@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/stories/PatternsGallery.svelte

@@ -1,399 +1,399 @@
-<script lang="ts">
-  // ============================================================================
-  // PATTERNS VISUAL GALLERY
-  // Displays ALL pattern components (Layer 3) - Layout & flow components
-  // ============================================================================
-
-  // Forms
-  import FormActions from '../patterns/forms/FormActions.svelte';
-  import FormGrid from '../patterns/forms/FormGrid.svelte';
-  import FormSection from '../patterns/forms/FormSection.svelte';
-  import FormValidationSummary from '../patterns/forms/FormValidationSummary.svelte';
-
-  // Navigation
-  import BottomNav from '../patterns/navigation/BottomNav.svelte';
-  import Header from '../patterns/navigation/Header.svelte';
-
-  // Page
-  import PageHeader from '../patterns/page/PageHeader.svelte';
-  import PageLayout from '../patterns/page/PageLayout.svelte';
-  import PageLoader from '../patterns/page/PageLoader.svelte';
-  import SectionHeader from '../patterns/page/SectionHeader.svelte';
-
-  // Data
-  import DataGrid from '../patterns/data/DataGrid.svelte';
-  import DataList from '../patterns/data/DataList.svelte';
-  import DataTable from '../patterns/data/DataTable.svelte';
-
-  // Layout (canonical components from components/Layout)
-  import Grid from '../components/Layout/Grid.svelte';
-  import Stack from '../components/Layout/Stack.svelte';
-  import Sidebar from '../components/Layout/Sidebar.svelte';
-
-  // Primitives for demos
-  import Button from '../primitives/Button/Button.svelte';
-  import Input from '../primitives/Input/Input.svelte';
-  import Card from '../primitives/Card.svelte';
-  import Badge from '../primitives/Badges/Badge.svelte';
-
-  // State
-  let isDark = $state(false);
-  let showPageLoader = $state(false);
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-
-  // Section styling
-  const sectionClass = (dark: boolean) =>
-    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
-
-  const headingClass = (dark: boolean) =>
-    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
-
-  const subheadingClass = (dark: boolean) =>
-    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
-
-  // Demo data
-  const sampleErrors: Record<string, string | null | undefined> = {
-    email: 'Email is required',
-    password: 'Password must be at least 8 characters',
-  };
-
-  const tableData = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
-    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'Inactive' },
-  ];
-
-  const tableColumns = [
-    { key: 'name', label: 'Name' },
-    { key: 'email', label: 'Email' },
-    { key: 'status', label: 'Status' },
-  ];
-
-  const gridItems = [
-    { id: 1, title: 'Item 1', description: 'Description for item 1' },
-    { id: 2, title: 'Item 2', description: 'Description for item 2' },
-    { id: 3, title: 'Item 3', description: 'Description for item 3' },
-    { id: 4, title: 'Item 4', description: 'Description for item 4' },
-    { id: 5, title: 'Item 5', description: 'Description for item 5' },
-    { id: 6, title: 'Item 6', description: 'Description for item 6' },
-  ];
-
-  const listItems = [
-    { id: 1, primary: 'Primary text 1', secondary: 'Secondary text' },
-    { id: 2, primary: 'Primary text 2', secondary: 'More details here' },
-    { id: 3, primary: 'Primary text 3', secondary: 'Additional info' },
-  ];
-
-  const bottomNavLinks = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Shows', href: '/shows', icon: 'shows' },
-    { label: 'Profile', href: '/profile', icon: 'profile' },
-  ];
-</script>
-
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-8">
-    <div>
-      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Patterns Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Layout & flow components (Layer 3)</p>
-    </div>
-    <button
-      onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
-    >
-      {isDark ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  </div>
-
-  <!-- ========== PAGE PATTERNS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>PageHeader</h2>
-    <p class={subheadingClass(isDark)}>Page title with optional actions and breadcrumb</p>
-
-    <div class="space-y-6 border rounded-lg p-4 {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <PageHeader title="Page Title">
-        {#snippet actions()}{/snippet}
-      </PageHeader>
-      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
-      <PageHeader title="With Subtitle" subtitle="This is a subtitle explaining the page">
-        {#snippet actions()}{/snippet}
-      </PageHeader>
-      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
-      <PageHeader title="With Actions">
-        {#snippet actions()}
-          <Button size="sm">Add New</Button>
-        {/snippet}
-      </PageHeader>
-    </div>
-  </section>
-
-  <!-- ========== SECTION HEADER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>SectionHeader</h2>
-    <p class={subheadingClass(isDark)}>Section dividers with optional description</p>
-
-    <div class="space-y-6">
-      <SectionHeader title="Basic Section" />
-      <SectionHeader title="With Description" description="Additional context about this section" />
-      <SectionHeader title="With Action">
-        {#snippet actions()}
-          <Button variant="link" size="sm">View All</Button>
-        {/snippet}
-      </SectionHeader>
-    </div>
-  </section>
-
-  <!-- ========== PAGE LOADER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>PageLoader</h2>
-    <p class={subheadingClass(isDark)}>Full-page loading indicator</p>
-
-    <Button onclick={() => {
-      showPageLoader = true;
-      setTimeout(() => showPageLoader = false, 2000);
-    }}>
-      Show PageLoader (2s)
-    </Button>
-  </section>
-
-  {#if showPageLoader}
-    <PageLoader />
-  {/if}
-
-  <!-- ========== FORM PATTERNS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormSection</h2>
-    <p class={subheadingClass(isDark)}>Grouped form fields with title and description</p>
-
-    <FormSection title="Personal Information" description="Enter your personal details">
-      <div class="space-y-4">
-        <Input label="Full Name" placeholder="John Doe" />
-        <Input label="Email" type="email" placeholder="john@example.com" />
-      </div>
-    </FormSection>
-  </section>
-
-  <!-- ========== FORM GRID ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormGrid</h2>
-    <p class={subheadingClass(isDark)}>Responsive grid layout for form fields</p>
-
-    <FormGrid cols={2}>
-      <Input label="First Name" placeholder="John" />
-      <Input label="Last Name" placeholder="Doe" />
-      <Input label="Email" type="email" placeholder="john@example.com" />
-      <Input label="Phone" type="tel" placeholder="(555) 123-4567" />
-    </FormGrid>
-
-    <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">3 Columns</p>
-      <FormGrid cols={3}>
-        <Input label="City" placeholder="New York" />
-        <Input label="State" placeholder="NY" />
-        <Input label="Zip" placeholder="10001" />
-      </FormGrid>
-    </div>
-  </section>
-
-  <!-- ========== FORM ACTIONS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormActions</h2>
-    <p class={subheadingClass(isDark)}>Form submit/cancel button group</p>
-
-    <div class="space-y-6">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Default (right-aligned)</p>
-        <FormActions submitLabel="Save Changes" cancelLabel="Cancel" />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">With loading state</p>
-        <FormActions submitLabel="Saving..." isSubmitting={true} />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete confirmation</p>
-        <FormActions submitLabel="Delete" submitVariant="red" cancelVariant="alternative" />
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== FORM VALIDATION SUMMARY ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormValidationSummary</h2>
-    <p class={subheadingClass(isDark)}>Summary of form validation errors</p>
-
-    <FormValidationSummary errors={sampleErrors} />
-  </section>
-
-  <!-- ========== DATA TABLE ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>DataTable</h2>
-    <p class={subheadingClass(isDark)}>Tabular data display with sorting and actions</p>
-
-    <DataTable>
-      {#snippet header(cellSize: string)}
-        <tr>
-          <th class={cellSize}>Name</th>
-          <th class={cellSize}>Email</th>
-          <th class={cellSize}>Status</th>
-        </tr>
-      {/snippet}
-      {#snippet children(cellSize: string)}
-        {#each tableData as row}
-          <tr>
-            <td class={cellSize}>{row.name}</td>
-            <td class={cellSize}>{row.email}</td>
-            <td class={cellSize}>{row.status}</td>
-          </tr>
-        {/each}
-      {/snippet}
-    </DataTable>
-  </section>
-
-  <!-- ========== DATA LIST ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>DataList</h2>
-    <p class={subheadingClass(isDark)}>Vertical list of items with primary/secondary text</p>
-
-    <div class="max-w-md">
-      <DataList items={listItems}>
-        {#snippet children(data: typeof listItems[0], _index: number)}
-          <div class="flex justify-between items-center">
-            <div>
-              <p class="font-medium {isDark ? 'text-white' : 'text-gray-900'}">{data.primary}</p>
-              <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{data.secondary}</p>
-            </div>
-            <Badge variant="info">Active</Badge>
-          </div>
-        {/snippet}
-      </DataList>
-    </div>
-  </section>
-
-  <!-- ========== DATA GRID ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>DataGrid</h2>
-    <p class={subheadingClass(isDark)}>Responsive grid of cards</p>
-
-    <DataGrid items={gridItems} cols={3}>
-      {#snippet children(data: typeof gridItems[0], _index: number)}
-        <Card>
-          <h4 class="font-medium mb-1">{data.title}</h4>
-          <p class="text-sm text-gray-500">{data.description}</p>
-        </Card>
-      {/snippet}
-    </DataGrid>
-  </section>
-
-  <!-- ========== LAYOUT: STACK ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Stack</h2>
-    <p class={subheadingClass(isDark)}>Vertical spacing utility</p>
-
-    <div class="max-w-sm">
-      <Stack gap="md">
-        <Card>Stack Item 1</Card>
-        <Card>Stack Item 2</Card>
-        <Card>Stack Item 3</Card>
-      </Stack>
-    </div>
-  </section>
-
-  <!-- ========== LAYOUT: GRID ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Grid</h2>
-    <p class={subheadingClass(isDark)}>Responsive grid layout utility</p>
-
-    <Grid cols="4" gap="md">
-      {#each [1, 2, 3, 4, 5, 6, 7, 8] as i}
-        <Card class="text-center py-4">
-          <span class="text-2xl font-bold">{i}</span>
-        </Card>
-      {/each}
-    </Grid>
-  </section>
-
-  <!-- ========== LAYOUT: SIDEBAR ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Sidebar</h2>
-    <p class={subheadingClass(isDark)}>Sidebar + main content layout</p>
-
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <Sidebar>
-        {#snippet sidebar()}
-          <div class="p-4 {isDark ? 'bg-gray-900' : 'bg-gray-100'} h-48">
-            <p class="font-medium mb-4">Navigation</p>
-            <ul class="space-y-2 text-sm">
-              <li>Dashboard</li>
-              <li>Settings</li>
-              <li>Profile</li>
-            </ul>
-          </div>
-        {/snippet}
-        {#snippet children()}
-          <div class="p-4 h-48">
-            <p>Main content area</p>
-          </div>
-        {/snippet}
-      </Sidebar>
-    </div>
-  </section>
-
-  <!-- ========== NAVIGATION: HEADER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Header</h2>
-    <p class={subheadingClass(isDark)}>Top navigation bar with logo, nav links, and user menu</p>
-
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800">
-        <Header 
-          name="John Doe" 
-          email="john@example.com"
-          navLinks={[
-            { label: 'Dashboard', href: '/dashboard' },
-            { label: 'Shows', href: '/shows' },
-          ]}
-        />
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== NAVIGATION: BOTTOM NAV ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>BottomNav</h2>
-    <p class={subheadingClass(isDark)}>Mobile bottom navigation</p>
-
-    <div class="border rounded-lg overflow-hidden max-w-sm mx-auto {isDark ? 'border-gray-700' : 'border-gray-200'} flex">
-      <BottomNav links={bottomNavLinks} />
-    </div>
-  </section>
-
-  <!-- ========== PAGE LAYOUT ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>PageLayout</h2>
-    <p class={subheadingClass(isDark)}>Complete page structure with breadcrumb, title, and content</p>
-
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <PageLayout 
-        title="PageLayout Demo" 
-        subtitle="Example page layout"
-        breadcrumb={[{ name: 'Home', href: '/' }, { name: 'Demo', href: '/demo' }]}
-      >
-        {#snippet actions()}
-          <Button size="sm">Action</Button>
-        {/snippet}
-        {#snippet children()}
-          <div class="p-6">
-            <p>Main page content goes here. The layout handles spacing and responsive behavior.</p>
-          </div>
-        {/snippet}
-      </PageLayout>
-    </div>
-  </section>
-</div>
+<script lang="ts">
+  // ============================================================================
+  // PATTERNS VISUAL GALLERY
+  // Displays ALL pattern components (Layer 3) - Layout & flow components
+  // ============================================================================
+
+  // Forms
+  import FormActions from '../patterns/forms/FormActions.svelte';
+  import FormGrid from '../patterns/forms/FormGrid.svelte';
+  import FormSection from '../patterns/forms/FormSection.svelte';
+  import FormValidationSummary from '../patterns/forms/FormValidationSummary.svelte';
+
+  // Navigation
+  import BottomNav from '../patterns/navigation/BottomNav.svelte';
+  import Header from '../patterns/navigation/Header.svelte';
+
+  // Page
+  import PageHeader from '../patterns/page/PageHeader.svelte';
+  import PageLayout from '../patterns/page/PageLayout.svelte';
+  import PageLoader from '../patterns/page/PageLoader.svelte';
+  import SectionHeader from '../patterns/page/SectionHeader.svelte';
+
+  // Data
+  import DataGrid from '../patterns/data/DataGrid.svelte';
+  import DataList from '../patterns/data/DataList.svelte';
+  import DataTable from '../patterns/data/DataTable.svelte';
+
+  // Layout (canonical components from components/Layout)
+  import Grid from '../components/Layout/Grid.svelte';
+  import Stack from '../components/Layout/Stack.svelte';
+  import Sidebar from '../components/Layout/Sidebar.svelte';
+
+  // Primitives for demos
+  import Button from '../primitives/Button/Button.svelte';
+  import Input from '../primitives/Input/Input.svelte';
+  import Card from '../primitives/Card.svelte';
+  import Badge from '../primitives/Badges/Badge.svelte';
+
+  // State
+  let isDark = $state(false);
+  let showPageLoader = $state(false);
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Section styling
+  const sectionClass = (dark: boolean) =>
+    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+
+  const headingClass = (dark: boolean) =>
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+
+  const subheadingClass = (dark: boolean) =>
+    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+
+  // Demo data
+  const sampleErrors: Record<string, string | null | undefined> = {
+    email: 'Email is required',
+    password: 'Password must be at least 8 characters',
+  };
+
+  const tableData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
+    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'Inactive' },
+  ];
+
+  const tableColumns = [
+    { key: 'name', label: 'Name' },
+    { key: 'email', label: 'Email' },
+    { key: 'status', label: 'Status' },
+  ];
+
+  const gridItems = [
+    { id: 1, title: 'Item 1', description: 'Description for item 1' },
+    { id: 2, title: 'Item 2', description: 'Description for item 2' },
+    { id: 3, title: 'Item 3', description: 'Description for item 3' },
+    { id: 4, title: 'Item 4', description: 'Description for item 4' },
+    { id: 5, title: 'Item 5', description: 'Description for item 5' },
+    { id: 6, title: 'Item 6', description: 'Description for item 6' },
+  ];
+
+  const listItems = [
+    { id: 1, primary: 'Primary text 1', secondary: 'Secondary text' },
+    { id: 2, primary: 'Primary text 2', secondary: 'More details here' },
+    { id: 3, primary: 'Primary text 3', secondary: 'Additional info' },
+  ];
+
+  const bottomNavLinks = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Shows', href: '/shows', icon: 'shows' },
+    { label: 'Profile', href: '/profile', icon: 'profile' },
+  ];
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-8">
+    <div>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Patterns Gallery</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Layout & flow components (Layer 3)</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  <!-- ========== PAGE PATTERNS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>PageHeader</h2>
+    <p class={subheadingClass(isDark)}>Page title with optional actions and breadcrumb</p>
+
+    <div class="space-y-6 border rounded-lg p-4 {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <PageHeader title="Page Title">
+        {#snippet actions()}{/snippet}
+      </PageHeader>
+      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
+      <PageHeader title="With Subtitle" subtitle="This is a subtitle explaining the page">
+        {#snippet actions()}{/snippet}
+      </PageHeader>
+      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
+      <PageHeader title="With Actions">
+        {#snippet actions()}
+          <Button size="sm">Add New</Button>
+        {/snippet}
+      </PageHeader>
+    </div>
+  </section>
+
+  <!-- ========== SECTION HEADER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>SectionHeader</h2>
+    <p class={subheadingClass(isDark)}>Section dividers with optional description</p>
+
+    <div class="space-y-6">
+      <SectionHeader title="Basic Section" />
+      <SectionHeader title="With Description" description="Additional context about this section" />
+      <SectionHeader title="With Action">
+        {#snippet actions()}
+          <Button variant="link" size="sm">View All</Button>
+        {/snippet}
+      </SectionHeader>
+    </div>
+  </section>
+
+  <!-- ========== PAGE LOADER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>PageLoader</h2>
+    <p class={subheadingClass(isDark)}>Full-page loading indicator</p>
+
+    <Button onclick={() => {
+      showPageLoader = true;
+      setTimeout(() => showPageLoader = false, 2000);
+    }}>
+      Show PageLoader (2s)
+    </Button>
+  </section>
+
+  {#if showPageLoader}
+    <PageLoader />
+  {/if}
+
+  <!-- ========== FORM PATTERNS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormSection</h2>
+    <p class={subheadingClass(isDark)}>Grouped form fields with title and description</p>
+
+    <FormSection title="Personal Information" description="Enter your personal details">
+      <div class="space-y-4">
+        <Input label="Full Name" placeholder="John Doe" />
+        <Input label="Email" type="email" placeholder="john@example.com" />
+      </div>
+    </FormSection>
+  </section>
+
+  <!-- ========== FORM GRID ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormGrid</h2>
+    <p class={subheadingClass(isDark)}>Responsive grid layout for form fields</p>
+
+    <FormGrid cols={2}>
+      <Input label="First Name" placeholder="John" />
+      <Input label="Last Name" placeholder="Doe" />
+      <Input label="Email" type="email" placeholder="john@example.com" />
+      <Input label="Phone" type="tel" placeholder="(555) 123-4567" />
+    </FormGrid>
+
+    <div class="mt-6">
+      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">3 Columns</p>
+      <FormGrid cols={3}>
+        <Input label="City" placeholder="New York" />
+        <Input label="State" placeholder="NY" />
+        <Input label="Zip" placeholder="10001" />
+      </FormGrid>
+    </div>
+  </section>
+
+  <!-- ========== FORM ACTIONS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormActions</h2>
+    <p class={subheadingClass(isDark)}>Form submit/cancel button group</p>
+
+    <div class="space-y-6">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Default (right-aligned)</p>
+        <FormActions submitLabel="Save Changes" cancelLabel="Cancel" />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">With loading state</p>
+        <FormActions submitLabel="Saving..." isSubmitting={true} />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete confirmation</p>
+        <FormActions submitLabel="Delete" submitVariant="red" cancelVariant="alternative" />
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== FORM VALIDATION SUMMARY ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormValidationSummary</h2>
+    <p class={subheadingClass(isDark)}>Summary of form validation errors</p>
+
+    <FormValidationSummary errors={sampleErrors} />
+  </section>
+
+  <!-- ========== DATA TABLE ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>DataTable</h2>
+    <p class={subheadingClass(isDark)}>Tabular data display with sorting and actions</p>
+
+    <DataTable>
+      {#snippet header(cellSize: string)}
+        <tr>
+          <th class={cellSize}>Name</th>
+          <th class={cellSize}>Email</th>
+          <th class={cellSize}>Status</th>
+        </tr>
+      {/snippet}
+      {#snippet children(cellSize: string)}
+        {#each tableData as row}
+          <tr>
+            <td class={cellSize}>{row.name}</td>
+            <td class={cellSize}>{row.email}</td>
+            <td class={cellSize}>{row.status}</td>
+          </tr>
+        {/each}
+      {/snippet}
+    </DataTable>
+  </section>
+
+  <!-- ========== DATA LIST ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>DataList</h2>
+    <p class={subheadingClass(isDark)}>Vertical list of items with primary/secondary text</p>
+
+    <div class="max-w-md">
+      <DataList items={listItems}>
+        {#snippet children(data: typeof listItems[0], _index: number)}
+          <div class="flex justify-between items-center">
+            <div>
+              <p class="font-medium {isDark ? 'text-white' : 'text-gray-900'}">{data.primary}</p>
+              <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{data.secondary}</p>
+            </div>
+            <Badge variant="info">Active</Badge>
+          </div>
+        {/snippet}
+      </DataList>
+    </div>
+  </section>
+
+  <!-- ========== DATA GRID ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>DataGrid</h2>
+    <p class={subheadingClass(isDark)}>Responsive grid of cards</p>
+
+    <DataGrid items={gridItems} cols={3}>
+      {#snippet children(data: typeof gridItems[0], _index: number)}
+        <Card>
+          <h4 class="font-medium mb-1">{data.title}</h4>
+          <p class="text-sm text-gray-500">{data.description}</p>
+        </Card>
+      {/snippet}
+    </DataGrid>
+  </section>
+
+  <!-- ========== LAYOUT: STACK ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Stack</h2>
+    <p class={subheadingClass(isDark)}>Vertical spacing utility</p>
+
+    <div class="max-w-sm">
+      <Stack gap="md">
+        <Card>Stack Item 1</Card>
+        <Card>Stack Item 2</Card>
+        <Card>Stack Item 3</Card>
+      </Stack>
+    </div>
+  </section>
+
+  <!-- ========== LAYOUT: GRID ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Grid</h2>
+    <p class={subheadingClass(isDark)}>Responsive grid layout utility</p>
+
+    <Grid cols="4" gap="md">
+      {#each [1, 2, 3, 4, 5, 6, 7, 8] as i}
+        <Card class="text-center py-4">
+          <span class="text-2xl font-bold">{i}</span>
+        </Card>
+      {/each}
+    </Grid>
+  </section>
+
+  <!-- ========== LAYOUT: SIDEBAR ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Sidebar</h2>
+    <p class={subheadingClass(isDark)}>Sidebar + main content layout</p>
+
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <Sidebar>
+        {#snippet sidebar()}
+          <div class="p-4 {isDark ? 'bg-gray-900' : 'bg-gray-100'} h-48">
+            <p class="font-medium mb-4">Navigation</p>
+            <ul class="space-y-2 text-sm">
+              <li>Dashboard</li>
+              <li>Settings</li>
+              <li>Profile</li>
+            </ul>
+          </div>
+        {/snippet}
+        {#snippet children()}
+          <div class="p-4 h-48">
+            <p>Main content area</p>
+          </div>
+        {/snippet}
+      </Sidebar>
+    </div>
+  </section>
+
+  <!-- ========== NAVIGATION: HEADER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Header</h2>
+    <p class={subheadingClass(isDark)}>Top navigation bar with logo, nav links, and user menu</p>
+
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800">
+        <Header 
+          name="John Doe" 
+          email="john@example.com"
+          navLinks={[
+            { label: 'Dashboard', href: '/dashboard' },
+            { label: 'Shows', href: '/shows' },
+          ]}
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== NAVIGATION: BOTTOM NAV ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>BottomNav</h2>
+    <p class={subheadingClass(isDark)}>Mobile bottom navigation</p>
+
+    <div class="border rounded-lg overflow-hidden max-w-sm mx-auto {isDark ? 'border-gray-700' : 'border-gray-200'} flex">
+      <BottomNav links={bottomNavLinks} />
+    </div>
+  </section>
+
+  <!-- ========== PAGE LAYOUT ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>PageLayout</h2>
+    <p class={subheadingClass(isDark)}>Complete page structure with breadcrumb, title, and content</p>
+
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <PageLayout 
+        title="PageLayout Demo" 
+        subtitle="Example page layout"
+        breadcrumb={[{ name: 'Home', href: '/' }, { name: 'Demo', href: '/demo' }]}
+      >
+        {#snippet actions()}
+          <Button size="sm">Action</Button>
+        {/snippet}
+        {#snippet children()}
+          <div class="p-6">
+            <p>Main page content goes here. The layout handles spacing and responsive behavior.</p>
+          </div>
+        {/snippet}
+      </PageLayout>
+    </div>
+  </section>
+</div>