@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/stories/ComponentConsolidation.stories.svelte

@@ -326,13 +326,13 @@ grep -r "<button" /Users/peet/repos/performers-portal/src --include="*.svelte
         </div>
       </div>
 
-      <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
-        <strong class="text-blue-700 dark:text-blue-400">New Button variants added:</strong>
-        <ul class="mt-2 list-disc list-inside text-blue-600 dark:text-blue-400 space-y-1">
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="avatar"</code> - Avatar/image trigger buttons (opacity hover)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item"</code> - Dropdown menu items (full width, left-aligned)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item-danger"</code> - Destructive menu items (red text)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="card"</code> - Selectable card buttons (bordered)</li>
+      <div class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded text-sm">
+        <strong class="text-green-700 dark:text-green-400">Extracted to dedicated components:</strong>
+        <ul class="mt-2 list-disc list-inside text-green-600 dark:text-green-400 space-y-1">
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;AvatarButton&gt;</code> - Avatar/image trigger buttons (opacity hover)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem&gt;</code> - Dropdown menu items (full width, left-aligned)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem danger&gt;</code> - Destructive menu items (red text)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;CardAction&gt;</code> - Selectable card buttons (bordered)</li>
         </ul>
       </div>
     </div>
@@ -505,7 +505,7 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
       </h2>
       <p class="text-sm text-green-700 dark:text-green-400">
         No raw <code class="bg-green-100 dark:bg-green-800 px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
-        All select functionality uses custom dropdown components (MultiSelect, SelectDropdown).
+        All select functionality uses the MultiSelect custom dropdown component.
       </p>
     </div>
 
@@ -1161,8 +1161,8 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
           <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Are these all necessary, or can some be variants of one component?</span>
         </li>
         <li>
-          <strong>Select vs SelectDropdown vs MultiSelect</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code?</span>
+          <strong>Select vs MultiSelect</strong>
+          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code? (SelectDropdown removed)</span>
         </li>
         <li>
           <strong>Input vs OTPInput vs PlaceAutocomplete</strong>

package/dist/stories/PatternsGallery.stories.svelte

@@ -1,19 +1,19 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import PatternsGallery from './PatternsGallery.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Visual Galleries/Patterns',
-    component: PatternsGallery,
-    parameters: {
-      layout: 'fullscreen',
-      docs: {
-        description: {
-          component: 'Complete visual gallery of all pattern components (Layer 3) - Layout & flow components.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="All Patterns" />
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PatternsGallery from './PatternsGallery.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Visual Galleries/Patterns',
+    component: PatternsGallery,
+    parameters: {
+      layout: 'fullscreen',
+      docs: {
+        description: {
+          component: 'Complete visual gallery of all pattern components (Layer 3) - Layout & flow components.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="All Patterns" />

package/dist/stories/PatternsGallery.svelte

@@ -1,115 +1,115 @@
-<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';
-
+<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'}`;
-
+
+  // 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 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>
-
+</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>
@@ -131,75 +131,75 @@
       </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" />
+
+  <!-- ========== 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>
-
+    </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>
@@ -222,15 +222,15 @@
       </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>
-
+
+  <!-- ========== 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>
@@ -255,7 +255,7 @@
       {/snippet}
     </DataTable>
   </section>
-
+
   <!-- ========== DATA LIST ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>DataList</h2>
@@ -275,7 +275,7 @@
       </DataList>
     </div>
   </section>
-
+
   <!-- ========== DATA GRID ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>DataGrid</h2>
@@ -290,35 +290,35 @@
       {/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: 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>
@@ -344,7 +344,7 @@
       </Sidebar>
     </div>
   </section>
-
+
   <!-- ========== NAVIGATION: HEADER ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>Header</h2>
@@ -363,7 +363,7 @@
       </div>
     </div>
   </section>
-
+
   <!-- ========== NAVIGATION: BOTTOM NAV ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>BottomNav</h2>
@@ -373,7 +373,7 @@
       <BottomNav links={bottomNavLinks} />
     </div>
   </section>
-
+
   <!-- ========== PAGE LAYOUT ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>PageLayout</h2>
@@ -396,4 +396,4 @@
       </PageLayout>
     </div>
   </section>
-</div>
+</div>

package/dist/stories/PrimitivesGallery.stories.svelte

@@ -1,19 +1,19 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import PrimitivesGallery from './PrimitivesGallery.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Visual Galleries/Primitives',
-    component: PrimitivesGallery,
-    parameters: {
-      layout: 'fullscreen',
-      docs: {
-        description: {
-          component: 'Complete visual gallery of all primitive components (Layer 1) with variants and states.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="All Primitives" />
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PrimitivesGallery from './PrimitivesGallery.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Visual Galleries/Primitives',
+    component: PrimitivesGallery,
+    parameters: {
+      layout: 'fullscreen',
+      docs: {
+        description: {
+          component: 'Complete visual gallery of all primitive components (Layer 1) with variants and states.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="All Primitives" />