@getmicdrop/svelte-components 5.0.0 → 5.1.1

package/dist/stories/ButtonAuditReview.svelte

@@ -0,0 +1,463 @@
+<script>
+  import Button from '../primitives/Button/Button.svelte';
+
+  // Issue severity levels
+  const SEVERITY = {
+    HIGH: 'high',
+    MEDIUM: 'medium',
+    LOW: 'low'
+  };
+
+  // All identified issues
+  const issues = [
+    // HIGH SEVERITY - Invalid variants that won't render correctly
+    {
+      id: 1,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "secondary" is not recognized',
+      location: 'CustomDropzone.svelte, widgets/+page.svelte',
+      count: 4,
+      current: { variant: 'secondary', text: 'Browse files' },
+      proposed: { variant: 'alternative', text: 'Browse files' },
+      explanation: '"secondary" should map to "alternative" (gray outline style)'
+    },
+    {
+      id: 2,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "danger" is not recognized',
+      location: 'widgets/+page.svelte:309',
+      count: 1,
+      current: { variant: 'danger', text: 'Delete' },
+      proposed: { variant: 'red', text: 'Delete' },
+      explanation: '"danger" should be "red" for destructive actions'
+    },
+    {
+      id: 3,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "text" is not recognized',
+      location: 'PromocodeInput.svelte:169',
+      count: 1,
+      current: { variant: 'text', text: 'Apply' },
+      proposed: { variant: 'ghost', text: 'Apply' },
+      explanation: '"text" should be "ghost" for text-only buttons'
+    },
+    {
+      id: 4,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "blue-text" is not recognized',
+      location: 'csv-import/results, team/edit-user',
+      count: 5,
+      current: { variant: 'blue-text', text: 'Add more events' },
+      proposed: { variant: 'link', text: 'Add more events' },
+      explanation: '"blue-text" should be "link" for link-styled buttons'
+    },
+    {
+      id: 5,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "gray-solid" is not recognized',
+      location: 'payments/+page.svelte',
+      count: 2,
+      current: { variant: 'gray-solid', text: 'Set Default' },
+      proposed: { variant: 'alternative', text: 'Set Default' },
+      explanation: '"gray-solid" doesn\'t exist - use "alternative" for gray buttons'
+    },
+    {
+      id: 6,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "gray" is not recognized',
+      location: 'invite/accept/+page.svelte:64',
+      count: 1,
+      current: { variant: 'gray', text: 'Try Again' },
+      proposed: { variant: 'alternative', text: 'Try Again' },
+      explanation: '"gray" should be "alternative"'
+    },
+    {
+      id: 7,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "custom" is not recognized',
+      location: 'ProfilePictureSection.svelte:109',
+      count: 1,
+      current: { variant: 'custom', text: '(icon only)' },
+      proposed: { variant: 'icon', text: '' },
+      explanation: '"custom" for icon buttons should be "icon" variant'
+    },
+    {
+      id: 8,
+      severity: SEVERITY.HIGH,
+      category: 'Invalid Variant',
+      problem: 'Variant "green-solid" is not recognized',
+      location: 'Unknown location',
+      count: 1,
+      current: { variant: 'green-solid', text: 'Success' },
+      proposed: { variant: 'default', text: 'Success', success: true },
+      explanation: 'Green success buttons should use success prop, not variant'
+    },
+
+    // MEDIUM SEVERITY - Invalid sizes
+    // NOTE: full-md-auto and half are now VALID standard sizes
+    // {
+    //   id: 9,
+    //   severity: SEVERITY.MEDIUM,
+    //   category: 'RESOLVED',
+    //   problem: 'Size "full-md-auto" - NOW A STANDARD SIZE',
+    //   explanation: 'Added to Button component: full width mobile, auto width md+'
+    // },
+    // {
+    //   id: 10,
+    //   severity: SEVERITY.MEDIUM,
+    //   category: 'RESOLVED',
+    //   problem: 'Size "half" - NOW A STANDARD SIZE',
+    //   explanation: 'Added to Button component: 50% width with medium text'
+    // },
+    {
+      id: 11,
+      severity: SEVERITY.MEDIUM,
+      category: 'Invalid Size',
+      problem: 'Size "small" should be "sm"',
+      location: 'Various files',
+      count: 3,
+      current: { variant: 'blue-solid', size: 'small', text: 'Submit' },
+      proposed: { variant: 'default', size: 'sm', text: 'Submit' },
+      explanation: 'Standard size name is "sm", not "small"'
+    },
+
+    // LOW SEVERITY - Style consistency
+    {
+      id: 12,
+      severity: SEVERITY.LOW,
+      category: 'Legacy Naming',
+      problem: '801 buttons use legacy variant names',
+      location: 'Throughout codebase',
+      count: 801,
+      current: { variant: 'blue-solid', text: 'Save' },
+      proposed: { variant: 'default', text: 'Save' },
+      explanation: 'Consider migrating to Flowbite naming: blue-solid → default'
+    },
+    {
+      id: 13,
+      severity: SEVERITY.LOW,
+      category: 'Legacy Naming',
+      problem: 'gray-outline should be alternative',
+      location: 'Throughout codebase',
+      count: 128,
+      current: { variant: 'gray-outline', text: 'Cancel' },
+      proposed: { variant: 'alternative', text: 'Cancel' },
+      explanation: 'Flowbite naming: gray-outline → alternative'
+    },
+    {
+      id: 14,
+      severity: SEVERITY.LOW,
+      category: 'Empty Text',
+      problem: 'Non-icon buttons with no visible text',
+      location: 'Various components',
+      count: 191,
+      current: { variant: 'blue-solid', text: '' },
+      proposed: { variant: 'icon', text: '' },
+      explanation: 'Buttons with only icons should use variant="icon"'
+    }
+  ];
+
+  // Group by severity
+  const highSeverity = issues.filter(i => i.severity === SEVERITY.HIGH);
+  const mediumSeverity = issues.filter(i => i.severity === SEVERITY.MEDIUM);
+  const lowSeverity = issues.filter(i => i.severity === SEVERITY.LOW);
+
+  // Approval state
+  let approvals = $state({});
+
+  function approve(id) {
+    approvals[id] = 'approved';
+  }
+
+  function reject(id) {
+    approvals[id] = 'rejected';
+  }
+
+  function getStatusClass(id) {
+    if (approvals[id] === 'approved') return 'bg-green-100 border-green-500';
+    if (approvals[id] === 'rejected') return 'bg-red-100 border-red-500';
+    return 'bg-white border-gray-200';
+  }
+
+  function getSeverityColor(severity) {
+    if (severity === SEVERITY.HIGH) return 'bg-red-100 text-red-800';
+    if (severity === SEVERITY.MEDIUM) return 'bg-yellow-100 text-yellow-800';
+    return 'bg-blue-100 text-blue-800';
+  }
+</script>
+
+<div class="p-6 max-w-7xl mx-auto space-y-8">
+  <div class="text-center mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 mb-2">Button Audit Review</h1>
+    <p class="text-gray-600">Review identified issues and approve/reject proposed fixes</p>
+    <div class="flex justify-center gap-4 mt-4 text-sm">
+      <span class="px-3 py-1 rounded-full bg-red-100 text-red-800">High: {highSeverity.length} issues</span>
+      <span class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">Medium: {mediumSeverity.length} issues</span>
+      <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-800">Low: {lowSeverity.length} issues</span>
+    </div>
+  </div>
+
+  <!-- HIGH SEVERITY -->
+  <section>
+    <h2 class="text-xl font-bold text-red-700 mb-4 flex items-center gap-2">
+      <span class="w-3 h-3 rounded-full bg-red-500"></span>
+      High Severity - Invalid Variants ({highSeverity.length})
+    </h2>
+    <p class="text-gray-600 mb-4">These buttons use variant names that don't exist and may not render correctly.</p>
+
+    <div class="space-y-4">
+      {#each highSeverity as issue}
+        <div class="border-2 rounded-lg p-4 {getStatusClass(issue.id)}">
+          <div class="flex justify-between items-start mb-4">
+            <div>
+              <span class="text-xs font-medium px-2 py-1 rounded {getSeverityColor(issue.severity)}">
+                {issue.category}
+              </span>
+              <span class="text-xs text-gray-500 ml-2">{issue.count} occurrence{issue.count > 1 ? 's' : ''}</span>
+            </div>
+            <div class="flex gap-2">
+              <button
+                onclick={() => approve(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-green-600 text-white hover:bg-green-700"
+              >
+                Approve
+              </button>
+              <button
+                onclick={() => reject(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+
+          <h3 class="font-semibold text-gray-900 mb-2">{issue.problem}</h3>
+          <p class="text-sm text-gray-500 mb-4">Location: {issue.location}</p>
+
+          <div class="grid grid-cols-2 gap-6">
+            <!-- Current State -->
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-red-600">Current (Problem)</div>
+              <div class="p-4 bg-gray-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.current.variant}
+                  size={issue.current.size || 'md'}
+                >
+                  {issue.current.text || '(no text)'}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                variant="{issue.current.variant}"
+              </code>
+            </div>
+
+            <!-- Proposed Fix -->
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-green-600">Proposed Fix</div>
+              <div class="p-4 bg-green-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.proposed.variant}
+                  size={issue.proposed.size || 'md'}
+                  success={issue.proposed.success || false}
+                >
+                  {issue.proposed.text || '(no text)'}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                variant="{issue.proposed.variant}"
+              </code>
+            </div>
+          </div>
+
+          <p class="mt-4 text-sm text-gray-700 bg-blue-50 p-3 rounded">
+            <strong>Explanation:</strong> {issue.explanation}
+          </p>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <!-- MEDIUM SEVERITY -->
+  <section>
+    <h2 class="text-xl font-bold text-yellow-700 mb-4 flex items-center gap-2">
+      <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
+      Medium Severity - Invalid Sizes ({mediumSeverity.length})
+    </h2>
+    <p class="text-gray-600 mb-4">These buttons use non-standard size values.</p>
+
+    <div class="space-y-4">
+      {#each mediumSeverity as issue}
+        <div class="border-2 rounded-lg p-4 {getStatusClass(issue.id)}">
+          <div class="flex justify-between items-start mb-4">
+            <div>
+              <span class="text-xs font-medium px-2 py-1 rounded {getSeverityColor(issue.severity)}">
+                {issue.category}
+              </span>
+              <span class="text-xs text-gray-500 ml-2">{issue.count} occurrence{issue.count > 1 ? 's' : ''}</span>
+            </div>
+            <div class="flex gap-2">
+              <button
+                onclick={() => approve(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-green-600 text-white hover:bg-green-700"
+              >
+                Approve
+              </button>
+              <button
+                onclick={() => reject(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+
+          <h3 class="font-semibold text-gray-900 mb-2">{issue.problem}</h3>
+          <p class="text-sm text-gray-500 mb-4">Location: {issue.location}</p>
+
+          <div class="grid grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-red-600">Current (Problem)</div>
+              <div class="p-4 bg-gray-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.current.variant}
+                  size={issue.current.size || 'md'}
+                >
+                  {issue.current.text}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                size="{issue.current.size}"
+              </code>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-green-600">Proposed Fix</div>
+              <div class="p-4 bg-green-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.proposed.variant}
+                  size={issue.proposed.size || 'md'}
+                  class={issue.proposed.className || ''}
+                >
+                  {issue.proposed.text}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                size="{issue.proposed.size}"{issue.proposed.className ? ` class="${issue.proposed.className}"` : ''}
+              </code>
+            </div>
+          </div>
+
+          <p class="mt-4 text-sm text-gray-700 bg-blue-50 p-3 rounded">
+            <strong>Explanation:</strong> {issue.explanation}
+          </p>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <!-- LOW SEVERITY -->
+  <section>
+    <h2 class="text-xl font-bold text-blue-700 mb-4 flex items-center gap-2">
+      <span class="w-3 h-3 rounded-full bg-blue-500"></span>
+      Low Severity - Style Consistency ({lowSeverity.length})
+    </h2>
+    <p class="text-gray-600 mb-4">These are style improvements for consistency, not functional issues.</p>
+
+    <div class="space-y-4">
+      {#each lowSeverity as issue}
+        <div class="border-2 rounded-lg p-4 {getStatusClass(issue.id)}">
+          <div class="flex justify-between items-start mb-4">
+            <div>
+              <span class="text-xs font-medium px-2 py-1 rounded {getSeverityColor(issue.severity)}">
+                {issue.category}
+              </span>
+              <span class="text-xs text-gray-500 ml-2">{issue.count} occurrence{issue.count > 1 ? 's' : ''}</span>
+            </div>
+            <div class="flex gap-2">
+              <button
+                onclick={() => approve(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-green-600 text-white hover:bg-green-700"
+              >
+                Approve
+              </button>
+              <button
+                onclick={() => reject(issue.id)}
+                class="px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+
+          <h3 class="font-semibold text-gray-900 mb-2">{issue.problem}</h3>
+          <p class="text-sm text-gray-500 mb-4">Location: {issue.location}</p>
+
+          <div class="grid grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-gray-600">Current</div>
+              <div class="p-4 bg-gray-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.current.variant}
+                  size={issue.current.size || 'md'}
+                >
+                  {issue.current.text || '(icon)'}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                variant="{issue.current.variant}"
+              </code>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-sm font-medium text-green-600">Flowbite Standard</div>
+              <div class="p-4 bg-green-50 rounded-lg flex items-center justify-center min-h-[60px]">
+                <Button
+                  variant={issue.proposed.variant}
+                  size={issue.proposed.size || 'md'}
+                >
+                  {issue.proposed.text || '(icon)'}
+                </Button>
+              </div>
+              <code class="text-xs bg-gray-100 px-2 py-1 rounded block">
+                variant="{issue.proposed.variant}"
+              </code>
+            </div>
+          </div>
+
+          <p class="mt-4 text-sm text-gray-700 bg-blue-50 p-3 rounded">
+            <strong>Explanation:</strong> {issue.explanation}
+          </p>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <!-- Summary -->
+  <section class="mt-8 p-6 bg-gray-100 rounded-lg">
+    <h2 class="text-xl font-bold mb-4">Summary</h2>
+    <div class="grid grid-cols-3 gap-4 text-center">
+      <div class="p-4 bg-white rounded-lg">
+        <div class="text-3xl font-bold text-red-600">{highSeverity.reduce((sum, i) => sum + i.count, 0)}</div>
+        <div class="text-sm text-gray-600">High Severity Buttons</div>
+      </div>
+      <div class="p-4 bg-white rounded-lg">
+        <div class="text-3xl font-bold text-yellow-600">{mediumSeverity.reduce((sum, i) => sum + i.count, 0)}</div>
+        <div class="text-sm text-gray-600">Medium Severity Buttons</div>
+      </div>
+      <div class="p-4 bg-white rounded-lg">
+        <div class="text-3xl font-bold text-blue-600">{lowSeverity.reduce((sum, i) => sum + i.count, 0)}</div>
+        <div class="text-sm text-gray-600">Low Severity Buttons</div>
+      </div>
+    </div>
+    <p class="mt-4 text-sm text-gray-600">
+      Total buttons audited: 916 | Issues found: {issues.length} categories affecting {issues.reduce((sum, i) => sum + i.count, 0)} buttons
+    </p>
+  </section>
+</div>

package/dist/stories/ButtonAuditReview.svelte.d.ts

@@ -0,0 +1,7 @@
+export default ButtonAuditReview;
+type ButtonAuditReview = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ButtonAuditReview: import("svelte").Component<Record<string, never>, {}, "">;
+//# sourceMappingURL=ButtonAuditReview.svelte.d.ts.map

package/dist/stories/ButtonAuditReview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAuditReview.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditReview.svelte.js"],"names":[],"mappings":";;;;;AAibA,2FAAgE"}

package/dist/stories/ButtonGridView.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonGridView from "./ButtonGridView.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Grid View",
+    component: ButtonGridView,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="All Buttons" />

package/dist/stories/ButtonGridView.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default ButtonGridView;
+type ButtonGridView = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonGridView: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ButtonGridView from "./ButtonGridView.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ButtonGridView.stories.svelte.d.ts.map

package/dist/stories/ButtonGridView.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGridView.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonGridView.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4BA;;;;mBAA0H;2BAxB7F,yBAAyB;6CAeT,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/stories/ButtonGridView.svelte

@@ -0,0 +1,146 @@
+<script>
+  import Button from '../primitives/Button/Button.svelte';
+  import manifest from './button-audit-manifest.json';
+
+  // Flatten all buttons into a single array with source info
+  const allButtons = Object.entries(manifest.categories).flatMap(([category, routes]) =>
+    routes.flatMap(route =>
+      route.buttons.map(button => ({
+        ...button,
+        category,
+        file: route.file,
+        fullPath: route.fullPath
+      }))
+    )
+  );
+
+  // Dark mode
+  let isDark = $state(false);
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Filters
+  let variantFilter = $state('all');
+  let sizeFilter = $state('all');
+  let searchQuery = $state('');
+
+  const allVariants = [...new Set(allButtons.map(b => b.variant))].sort();
+  const allSizes = [...new Set(allButtons.map(b => b.size))].sort();
+
+  // Filtered buttons
+  let filtered = $derived.by(() => {
+    return allButtons.filter(b => {
+      if (variantFilter !== 'all' && b.variant !== variantFilter) return false;
+      if (sizeFilter !== 'all' && b.size !== sizeFilter) return false;
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        return b.text.toLowerCase().includes(q) ||
+               b.file.toLowerCase().includes(q) ||
+               b.variant.toLowerCase().includes(q);
+      }
+      return true;
+    });
+  });
+
+  // Get short file name
+  function shortFile(file) {
+    const parts = file.split('/');
+    return parts.slice(-2).join('/');
+  }
+
+  // VS Code link
+  function vscodeLink(fullPath, line) {
+    return `vscode://file${fullPath}:${line}`;
+  }
+
+  // Variant colors
+  function variantColor(variant) {
+    const colors = {
+      'blue-solid': 'bg-blue-100 text-blue-700',
+      'gray-outline': 'bg-gray-100 text-gray-700',
+      'blue-outline': 'bg-blue-50 text-blue-600',
+      'gray-text': 'bg-gray-50 text-gray-500',
+      'red-solid': 'bg-red-100 text-red-700',
+      'red-outline': 'bg-red-50 text-red-600',
+      'green-solid': 'bg-green-100 text-green-700',
+      'icon': 'bg-purple-100 text-purple-700',
+      'ghost': 'bg-yellow-100 text-yellow-700'
+    };
+    return colors[variant] || 'bg-gray-100 text-gray-700';
+  }
+</script>
+
+<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
+  <!-- Header -->
+  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4">
+    <div class="flex flex-wrap items-center justify-between gap-4">
+      <div>
+        <h1 class="text-xl font-bold text-gray-900 dark:text-white">Button Grid View</h1>
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          Showing {filtered.length} of {allButtons.length} buttons
+        </p>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <input
+          type="text"
+          bind:value={searchQuery}
+          placeholder="Search..."
+          class="px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white w-40"
+        />
+
+        <select bind:value={variantFilter} class="px-2 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+          <option value="all">All Variants</option>
+          {#each allVariants as v}<option value={v}>{v}</option>{/each}
+        </select>
+
+        <select bind:value={sizeFilter} class="px-2 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+          <option value="all">All Sizes</option>
+          {#each allSizes as s}<option value={s}>{s}</option>{/each}
+        </select>
+
+        <button onclick={toggleDark} class="px-3 py-1.5 text-sm rounded {isDark ? 'bg-gray-800 text-white' : 'bg-yellow-500 text-black'}">
+          {isDark ? '🌙' : '☀️'}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Grid -->
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-3">
+    {#each filtered as button, i}
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 flex flex-col">
+        <!-- Button Preview -->
+        <div class="flex items-center justify-center p-3 bg-gray-50 dark:bg-gray-700 rounded mb-2 min-h-[50px]">
+          <Button
+            variant={button.variant}
+            size={button.size}
+            loading={button.loading}
+            disabled={button.disabled}
+            danger={button.danger}
+            deemphasized={button.deemphasized}
+          >
+            {button.text === '(no text)' ? '' : button.text.slice(0, 20)}{button.text.length > 20 ? '…' : ''}
+          </Button>
+        </div>
+
+        <!-- Metadata -->
+        <div class="text-xs space-y-1">
+          <div class="flex gap-1 flex-wrap">
+            <span class="px-1.5 py-0.5 rounded {variantColor(button.variant)}">{button.variant}</span>
+            <span class="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">{button.size}</span>
+          </div>
+          <a
+            href={vscodeLink(button.fullPath, button.line)}
+            class="block text-blue-500 hover:underline truncate"
+            title={button.file}
+          >
+            {shortFile(button.file)}:{button.line}
+          </a>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>

package/dist/stories/ButtonGridView.svelte.d.ts

@@ -0,0 +1,7 @@
+export default ButtonGridView;
+type ButtonGridView = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ButtonGridView: import("svelte").Component<Record<string, never>, {}, "">;
+//# sourceMappingURL=ButtonGridView.svelte.d.ts.map

package/dist/stories/ButtonGridView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGridView.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonGridView.svelte.js"],"names":[],"mappings":";;;;;AA2IA,wFAA6D"}