Add showTitle prop to Page component for conditional title rendering

Documentation/Common/page.md

@@ -28,20 +28,31 @@ function MyPage() {
 }
 ```
 
+## Showing the Title
+
+By default the title is not rendered. Pass `showTitle` to opt in:
+
+```typescript
+<Page title="My Page" showTitle>
+    <div>Page content goes here</div>
+</Page>
+```
+
 ## With Panel Styling
 
 ```typescript
-<Page title="Dashboard" panel={true}>
+<Page title="Dashboard" panel>
     <div>Content with panel background</div>
 </Page>
 ```
 
 ## Props
 
-- `title`: Page title displayed at the top
-- `panel`: Apply panel styling to content area (default: false)
+- `title`: Page title string (always required, used e.g. for accessibility or document title even when not visible)
+- `showTitle`: Render the title as a visible heading (default: `false`)
+- `panel`: Apply panel styling to content area (default: `false`)
 - `children`: Page content
-- All standard HTML div attributes (className, style, etc.)
+- All standard HTML div attributes (`className`, `style`, etc.)
 
 ## Layout
 

Source/Common/Page.stories.tsx

@@ -41,3 +41,31 @@ export const WithPanel: Story = {
         </Page>
     )
 };
+
+export const WithTitle: Story = {
+    args: {
+        title: 'Visible Page Title',
+        showTitle: true,
+    },
+    render: (args) => (
+        <Page {...args}>
+            <div className="p-4">
+                <p>The title is shown above because showTitle is true.</p>
+            </div>
+        </Page>
+    )
+};
+
+export const WithoutTitle: Story = {
+    args: {
+        title: 'Hidden Page Title',
+        showTitle: false,
+    },
+    render: (args) => (
+        <Page {...args}>
+            <div className="p-4">
+                <p>The title is hidden because showTitle is false (the default).</p>
+            </div>
+        </Page>
+    )
+};

Source/Common/Page.tsx

@@ -5,14 +5,15 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 export interface PageProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
+    showTitle?: boolean;
     children?: ReactNode;
     panel?: boolean
 }
 
-export const Page = ({ title, children, panel, ...rest }: PageProps) => {
+export const Page = ({ title, showTitle = false, children, panel, ...rest }: PageProps) => {
     return (
         <div className='flex flex-col h-full flex-1' {...rest}>
-            <h1 className='text-3xl mt-3 mb-4'>{title}</h1>
+            {showTitle && <h1 className='text-3xl mt-3 mb-4'>{title}</h1>}
             <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>
                 {children}
             </main>