npm - @classic-homes/theme-mcp - Versions diffs - 0.1.3 → 0.1.4 - Mend

@classic-homes/theme-mcp 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/cli.js CHANGED Viewed

@@ -112,6 +112,59 @@ var component_catalog_default = {
         "Card"
       ]
     },
+    {
+      name: "AlertDescription",
+      description: "Main content text component for Alert messages",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Alert>\n  <AlertTitle>Notice</AlertTitle>\n  <AlertDescription>This is the alert message content.</AlertDescription>\n</Alert>"
+        },
+        {
+          title: "Simple Message",
+          code: "<AlertDescription>Your session will expire in 5 minutes.</AlertDescription>"
+        },
+        {
+          title: "With Link",
+          code: '<AlertDescription>\n  Your account needs verification.\n  <a href="/verify" class="underline font-medium">Verify now</a>\n</AlertDescription>'
+        },
+        {
+          title: "Error List",
+          code: '<AlertDescription>\n  <ul class="list-disc pl-4 mt-2">\n    <li>Email is required</li>\n    <li>Password must be at least 8 characters</li>\n  </ul>\n</AlertDescription>'
+        },
+        {
+          title: "Rich Content",
+          code: '<AlertDescription>\n  <p>Your order #12345 has been placed successfully.</p>\n  <a href="/orders/12345" class="underline font-medium mt-2 inline-block"> View order details </a>\n</AlertDescription>'
+        },
+        {
+          title: "Without Title",
+          code: '<Alert variant="info">\n  <AlertDescription>Pro tip: Press Ctrl+K to open the command palette.</AlertDescription>\n</Alert>'
+        }
+      ],
+      relatedComponents: [
+        "Alert",
+        "AlertTitle"
+      ]
+    },
     {
       name: "AlertDialog",
       description: "Modal dialog for confirmations and important actions",
@@ -243,6 +296,55 @@ var component_catalog_default = {
         "DropdownMenu"
       ]
     },
+    {
+      name: "AlertTitle",
+      description: "Bold heading component for Alert messages",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Alert>\n  <AlertTitle>Heads up!</AlertTitle>\n  <AlertDescription>This is an important message.</AlertDescription>\n</Alert>"
+        },
+        {
+          title: "Success Alert",
+          code: '<Alert variant="success">\n  <AlertTitle>Success!</AlertTitle>\n  <AlertDescription>Your changes have been saved.</AlertDescription>\n</Alert>'
+        },
+        {
+          title: "Error Alert",
+          code: '<Alert variant="error">\n  <AlertTitle>Error</AlertTitle>\n  <AlertDescription>Something went wrong. Please try again.</AlertDescription>\n</Alert>'
+        },
+        {
+          title: "With Icon",
+          code: '<Alert variant="info">\n  <Icon name="info" class="h-4 w-4" />\n  <AlertTitle>Did you know?</AlertTitle>\n  <AlertDescription>You can use keyboard shortcuts.</AlertDescription>\n</Alert>'
+        },
+        {
+          title: "Custom Styling",
+          code: '<AlertTitle class="text-lg">Important Notice</AlertTitle>'
+        }
+      ],
+      relatedComponents: [
+        "Alert",
+        "AlertDescription"
+      ]
+    },
     {
       name: "AppShell",
       description: "Base wrapper component for applications with accessibility features",
@@ -316,8 +418,93 @@ var component_catalog_default = {
       description: "Line chart with gradient fill and stacking support",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "AreaChartData",
+          required: true,
+          description: "Chart data with categories and series"
+        },
+        {
+          name: "smooth",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Use smooth curved lines"
+        },
+        {
+          name: "stacked",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Stack areas to show total composition"
+        },
+        {
+          name: "gradient",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Apply gradient fill to areas"
+        },
+        {
+          name: "onClick",
+          type: "(params: DataPointEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        },
+        {
+          name: "showGrid",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show grid lines"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -625,6 +812,117 @@ var component_catalog_default = {
         "Card"
       ]
     },
+    {
+      name: "AvatarFallback",
+      description: "Fallback content displayed when Avatar image is unavailable",
+      category: "core",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: '<Avatar>\n  <AvatarImage src="/user.jpg" alt="John Doe" />\n  <AvatarFallback>JD</AvatarFallback>\n</Avatar>'
+        },
+        {
+          title: "Initials",
+          code: "<Avatar>\n  <AvatarFallback>AB</AvatarFallback>\n</Avatar>"
+        },
+        {
+          title: "Single Letter",
+          code: "<Avatar>\n  <AvatarFallback>J</AvatarFallback>\n</Avatar>"
+        },
+        {
+          title: "With Icon",
+          code: '<Avatar>\n  <AvatarFallback>\n    <Icon name="user" class="h-4 w-4" />\n  </AvatarFallback>\n</Avatar>'
+        },
+        {
+          title: "Custom Styling",
+          code: '<Avatar>\n  <AvatarFallback class="bg-primary text-primary-foreground">AD</AvatarFallback>\n</Avatar>'
+        },
+        {
+          title: "As Placeholder",
+          description: "When no image is available:",
+          code: "<Avatar>\n  <AvatarFallback>?</AvatarFallback>\n</Avatar>"
+        }
+      ],
+      relatedComponents: [
+        "Avatar",
+        "AvatarImage"
+      ]
+    },
+    {
+      name: "AvatarImage",
+      description: "Image component for displaying user profile pictures in Avatars",
+      category: "core",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "src",
+          type: "string",
+          required: false,
+          description: "Image source URL (required)"
+        },
+        {
+          name: "alt",
+          type: "string",
+          required: false,
+          description: "Alt text for accessibility"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: '<Avatar>\n  <AvatarImage src="/user-photo.jpg" alt="John Doe" />\n  <AvatarFallback>JD</AvatarFallback>\n</Avatar>'
+        },
+        {
+          title: "With Fallback",
+          code: '<Avatar>\n  <AvatarImage src="/avatar.jpg" alt="Jane Smith" />\n  <AvatarFallback>JS</AvatarFallback>\n</Avatar>'
+        },
+        {
+          title: "Different Sizes",
+          code: '<Avatar size="sm">\n  <AvatarImage src="/small.jpg" alt="Small avatar" />\n</Avatar>\n\n<Avatar size="lg">\n  <AvatarImage src="/large.jpg" alt="Large avatar" />\n</Avatar>'
+        },
+        {
+          title: "External Image",
+          code: '<Avatar>\n  <AvatarImage src="https://avatars.githubusercontent.com/u/123" alt="GitHub user" />\n  <AvatarFallback>GH</AvatarFallback>\n</Avatar>'
+        }
+      ],
+      relatedComponents: [
+        "Avatar",
+        "AvatarFallback"
+      ]
+    },
     {
       name: "Badge",
       description: "Small label component for status indicators and categorization",
@@ -775,45 +1073,144 @@ var component_catalog_default = {
       description: "Compare categories with vertical or horizontal bars",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
-      slots: [],
-      events: [],
-      examples: [
+      props: [
         {
-          title: "Basic Usage",
-          code: `<script>
-  import { BarChart } from '@classic-homes/charts-svelte';
-  const data = {
-    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
-    series: [
-      { name: 'Sales', data: [320, 332, 301, 334, 390] },
-      { name: 'Returns', data: [120, 132, 101, 134, 90] },
-    ],
-  };
-</script>
-<BarChart title="Weekly Sales" {data} height={400} />`
+          name: "data",
+          type: "BarChartData",
+          required: true,
+          description: "Chart data with categories and series"
         },
         {
-          title: "Horizontal Bar Chart",
-          code: '<BarChart title="Sales by Region" {data} orientation="horizontal" height={400} />'
+          name: "orientation",
+          type: "'vertical' | 'horizontal'",
+          default: "'vertical'",
+          required: false,
+          description: "Bar orientation"
         },
         {
-          title: "Stacked Bar Chart",
-          code: '<BarChart title="Revenue Breakdown" {data} stacked height={400} />'
+          name: "stacked",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Stack bars to show composition"
         },
         {
-          title: "With Value Labels",
-          code: '<BarChart title="Monthly Performance" {data} showValues height={400} />'
-        }
-      ],
-      relatedComponents: [
-        "LineChart",
-        "FunnelChart"
-      ]
-    },
+          name: "showValues",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show value labels on bars"
+        },
+        {
+          name: "onClick",
+          type: "(params: DataPointEventParams) => void",
+          required: false,
+          description: "Callback when a bar is clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "description",
+          type: "string",
+          required: false,
+          description: "Description for screen readers"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        },
+        {
+          name: "showGrid",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show grid lines"
+        }
+      ],
+      variants: [
+        {
+          name: "orientation",
+          values: [
+            "vertical",
+            "horizontal"
+          ],
+          default: "vertical"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { BarChart } from '@classic-homes/charts-svelte';
+  const data = {
+    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    series: [
+      { name: 'Sales', data: [320, 332, 301, 334, 390] },
+      { name: 'Returns', data: [120, 132, 101, 134, 90] },
+    ],
+  };
+</script>
+<BarChart title="Weekly Sales" {data} height={400} />`
+        },
+        {
+          title: "Horizontal Bar Chart",
+          code: '<BarChart title="Sales by Region" {data} orientation="horizontal" height={400} />'
+        },
+        {
+          title: "Stacked Bar Chart",
+          code: '<BarChart title="Revenue Breakdown" {data} stacked height={400} />'
+        },
+        {
+          title: "With Value Labels",
+          code: '<BarChart title="Monthly Performance" {data} showValues height={400} />'
+        }
+      ],
+      relatedComponents: [
+        "LineChart",
+        "FunnelChart"
+      ]
+    },
     {
       name: "Button",
       description: "Clickable button component with multiple variants, sizes, and loading states",
@@ -989,8 +1386,72 @@ var component_catalog_default = {
       description: "Financial OHLC data with volume bars",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "CandlestickData",
+          required: true,
+          description: "OHLC data with optional volume"
+        },
+        {
+          name: "showVolume",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Display volume bars below chart"
+        },
+        {
+          name: "onClick",
+          type: "(params: CandlestickEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        },
+        {
+          name: "showGrid",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show grid lines"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -1106,61 +1567,113 @@ var component_catalog_default = {
       ]
     },
     {
-      name: "Checkbox",
-      description: "Checkbox input for boolean selections and multiple choice options",
-      category: "form",
+      name: "CardContent",
+      description: "Main content area container for Card components",
+      category: "layout",
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "checked",
-          type: "boolean",
-          default: "false",
+          name: "class",
+          type: "string",
           required: false,
-          description: "Whether the checkbox is checked (bindable)"
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Card>\n  <CardContent>\n    <p>This is the main content of the card.</p>\n  </CardContent>\n</Card>"
         },
         {
-          name: "disabled",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Disables the checkbox"
+          title: "With Header",
+          code: "<Card>\n  <CardHeader>\n    <CardTitle>Settings</CardTitle>\n  </CardHeader>\n  <CardContent>\n    <p>Adjust your preferences below.</p>\n  </CardContent>\n</Card>"
         },
         {
-          name: "required",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Marks as required"
+          title: "Standalone Content",
+          description: "When using without a header, add top padding:",
+          code: '<Card>\n  <CardContent class="pt-6">\n    <p>Simple card with just content.</p>\n  </CardContent>\n</Card>'
         },
         {
-          name: "name",
-          type: "string",
-          required: false,
-          description: "Name attribute for forms"
+          title: "With Form Elements",
+          code: '<CardContent>\n  <div class="space-y-4">\n    <FormField label="Email" name="email" />\n    <FormField label="Password" name="password" type="password" />\n  </div>\n</CardContent>'
         },
         {
-          name: "value",
+          title: "Rich Content",
+          code: '<CardContent>\n  <div class="flex items-center gap-4">\n    <Avatar>\n      <AvatarImage src="/user.jpg" alt="User" />\n      <AvatarFallback>JD</AvatarFallback>\n    </Avatar>\n    <div>\n      <p class="font-medium">John Doe</p>\n      <p class="text-sm text-muted-foreground">Developer</p>\n    </div>\n  </div>\n</CardContent>'
+        }
+      ],
+      relatedComponents: [
+        "Card",
+        "CardHeader",
+        "CardFooter"
+      ]
+    },
+    {
+      name: "CardDescription",
+      description: "Secondary text component for Card headers",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
           type: "string",
           required: false,
-          description: "Value attribute for forms"
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>This is a description of the card content.</CardDescription>\n  </CardHeader>\n</Card>"
         },
         {
-          name: "id",
-          type: "string",
-          required: false,
-          description: "Element ID for label association"
+          title: "Descriptive Text",
+          code: "<CardDescription>\n  Configure your notification preferences and choose how you want to be contacted.\n</CardDescription>"
+        },
+        {
+          title: "With Custom Styling",
+          code: '<CardDescription class="text-xs">Last updated 2 hours ago</CardDescription>'
         },
+        {
+          title: "Multiple Lines",
+          code: "<CardDescription>\n  Your subscription includes unlimited access to all premium features. Upgrade anytime to unlock\n  more.\n</CardDescription>"
+        }
+      ],
+      relatedComponents: [
+        "Card",
+        "CardHeader",
+        "CardTitle"
+      ]
+    },
+    {
+      name: "CardFooter",
+      description: "Footer section container for Card action buttons",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
         {
           name: "class",
           type: "string",
           required: false,
           description: "Additional CSS classes"
-        },
-        {
-          name: "onCheckedChange",
-          type: "(checked: boolean) => void",
-          required: false,
-          description: "Callback when checked state changes"
         }
       ],
       variants: [],
@@ -1175,47 +1688,663 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  let checked = $state(false);\n</script>\n\n<Checkbox bind:checked />"
+          code: "<Card>\n  <CardContent>\n    <p>Card content here.</p>\n  </CardContent>\n  <CardFooter>\n    <Button>Save Changes</Button>\n  </CardFooter>\n</Card>"
         },
         {
-          title: "Checked",
-          code: "<Checkbox checked />"
+          title: "Multiple Actions",
+          code: '<CardFooter class="gap-2">\n  <Button variant="outline">Cancel</Button>\n  <Button>Save</Button>\n</CardFooter>'
         },
         {
-          title: "Disabled",
-          code: "<Checkbox disabled />\n<Checkbox disabled checked />"
+          title: "Right-Aligned Actions",
+          code: '<CardFooter class="justify-end gap-2">\n  <Button variant="ghost">Skip</Button>\n  <Button>Continue</Button>\n</CardFooter>'
         },
         {
-          title: "Required",
-          code: '<Checkbox required id="required-checkbox" />'
+          title: "Space Between",
+          code: '<CardFooter class="justify-between">\n  <Button variant="ghost">Back</Button>\n  <Button>Next</Button>\n</CardFooter>'
         },
         {
-          title: "Terms Agreement",
-          code: '<script>\n  let agreed = $state(false);\n</script>\n\n<div class="flex items-start gap-2">\n  <Checkbox id="agree" bind:checked={agreed} class="mt-1" />\n  <Label for="agree" class="leading-normal">\n    I agree to the <a href="/terms" class="text-primary underline">Terms of Service</a>\n    and <a href="/privacy" class="text-primary underline">Privacy Policy</a>\n  </Label>\n</div>\n\n<Button disabled={!agreed}>Continue</Button>'
+          title: "Full-Width Button",
+          code: '<CardFooter>\n  <Button class="w-full">Get Started</Button>\n</CardFooter>'
         },
         {
-          title: "Feature Selection",
-          code: `<script>
-  let features = $state(['basic']);
-  function toggleFeature(feature: string) {
-    if (features.includes(feature)) {
-      features = features.filter((f) => f !== feature);
-    } else {
-      features = [...features, feature];
-    }
-  }
-</script>
-<div class="space-y-2">
-  <div class="flex items-center gap-2">
-    <Checkbox
-      id="basic"
-      checked={features.includes('basic')}
-      onCheckedChange={() => toggleFeature('basic')}
-    />
-    <Label for="basic">Basic features</Label>
-  </div>
+          title: "With Summary Text",
+          code: '<CardFooter class="justify-between">\n  <span class="text-sm text-muted-foreground">2 items selected</span>\n  <Button size="sm">Delete Selected</Button>\n</CardFooter>'
+        }
+      ],
+      relatedComponents: [
+        "Card",
+        "CardContent",
+        "Button"
+      ]
+    },
+    {
+      name: "CardHeader",
+      description: "Header section container for Card components with title and description",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "variant",
+          type: "'default' | 'compact' | 'bordered' | 'shaded'",
+          default: "'default'",
+          required: false,
+          description: "Header style variant"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "variant",
+          values: [
+            "default",
+            "compact",
+            "bordered",
+            "shaded"
+          ],
+          default: "default"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card description text</CardDescription>\n  </CardHeader>\n</Card>"
+        },
+        {
+          title: "Default",
+          description: "Standard padding (p-6):",
+          code: '<CardHeader variant="default">\n  <CardTitle>Default Header</CardTitle>\n</CardHeader>'
+        },
+        {
+          title: "Compact",
+          description: "Reduced padding (p-4):",
+          code: '<CardHeader variant="compact">\n  <CardTitle>Compact Header</CardTitle>\n</CardHeader>'
+        },
+        {
+          title: "Bordered",
+          description: "Header with bottom border:",
+          code: '<CardHeader variant="bordered">\n  <CardTitle>Bordered Header</CardTitle>\n</CardHeader>'
+        },
+        {
+          title: "Shaded",
+          description: "Header with muted background:",
+          code: '<CardHeader variant="shaded">\n  <CardTitle>Shaded Header</CardTitle>\n</CardHeader>'
+        }
+      ],
+      relatedComponents: [
+        "Card",
+        "CardTitle",
+        "CardDescription"
+      ]
+    },
+    {
+      name: "CardTitle",
+      description: "Title heading component for Card headers",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n  </CardHeader>\n</Card>"
+        },
+        {
+          title: "With Description",
+          code: "<CardHeader>\n  <CardTitle>Account Settings</CardTitle>\n  <CardDescription>Manage your account preferences</CardDescription>\n</CardHeader>"
+        },
+        {
+          title: "Custom Styling",
+          code: '<CardTitle class="text-primary">Featured Title</CardTitle>'
+        },
+        {
+          title: "In Stats Card",
+          code: '<CardHeader class="flex-row items-center justify-between pb-2">\n  <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>\n  <Icon name="dollar" class="h-4 w-4 text-muted-foreground" />\n</CardHeader>'
+        }
+      ],
+      relatedComponents: [
+        "Card",
+        "CardHeader",
+        "CardDescription"
+      ]
+    },
+    {
+      name: "ChartContainer",
+      description: "Base wrapper component for charts with loading, error, and empty states",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility (aria-label)"
+        },
+        {
+          name: "description",
+          type: "string",
+          required: false,
+          description: "Chart description for screen readers"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart container height"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show loading skeleton"
+        },
+        {
+          name: "error",
+          type: "string | null",
+          required: false,
+          description: "Error message to display"
+        },
+        {
+          name: "empty",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show empty state"
+        },
+        {
+          name: "emptyMessage",
+          type: "string",
+          default: "'No data available'",
+          required: false,
+          description: "Custom empty state message"
+        },
+        {
+          name: "onRetry",
+          type: "() => void",
+          required: false,
+          description: "Callback for retry button in error state"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes for chart area"
+        },
+        {
+          name: "wrapperClass",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes for outer wrapper"
+        }
+      ],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { ChartContainer } from '@classic-homes/charts-svelte';
+</script>
+<ChartContainer title="Sales Overview" height={400}>
+  <!-- Your chart content here -->
+</ChartContainer>`
+        },
+        {
+          title: "With Loading State",
+          code: `<script>
+  import { ChartContainer, LineChart } from '@classic-homes/charts-svelte';
+  let loading = $state(true);
+  let data = $state(null);
+</script>
+<ChartContainer title="Revenue" {loading}>
+  {#if data}
+    <LineChart {data} title="Revenue" />
+  {/if}
+</ChartContainer>`
+        },
+        {
+          title: "With Error State",
+          code: `<script>
+  import { ChartContainer, BarChart } from '@classic-homes/charts-svelte';
+  let error = $state(null);
+  async function fetchData() {
+    try {
+      // fetch data
+    } catch (e) {
+      error = e.message;
+    }
+  }
+</script>
+<ChartContainer title="Analytics" {error} onRetry={fetchData}>
+  <BarChart {data} title="Analytics" />
+</ChartContainer>`
+        },
+        {
+          title: "With Empty State",
+          code: `<script>
+  import { ChartContainer, AreaChart } from '@classic-homes/charts-svelte';
+  let data = $state([]);
+</script>
+<ChartContainer
+  title="User Activity"
+  empty={data.length === 0}
+  emptyMessage="No activity recorded yet"
+>
+  <AreaChart {data} title="User Activity" />
+</ChartContainer>`
+        },
+        {
+          title: "Custom Styling",
+          code: '<ChartContainer title="Dashboard Chart" wrapperClass="shadow-lg" class="p-4">\n  <PieChart {data} title="Distribution" />\n</ChartContainer>'
+        }
+      ],
+      relatedComponents: [
+        "ChartSkeleton",
+        "ChartError",
+        "ChartEmpty"
+      ]
+    },
+    {
+      name: "ChartEmpty",
+      description: "Empty state component displayed when chart has no data",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [
+        {
+          name: "message",
+          type: "string",
+          default: "'No data available'",
+          required: false,
+          description: "Empty state message"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Component height"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { ChartEmpty } from '@classic-homes/charts-svelte';\n</script>\n\n<ChartEmpty />"
+        },
+        {
+          title: "Custom Message",
+          code: '<ChartEmpty message="No sales data for this period" />'
+        },
+        {
+          title: "Custom Height",
+          code: '<ChartEmpty height={300} message="Start adding data to see your chart" />'
+        },
+        {
+          title: "Conditional Rendering",
+          code: `<script>
+  import { ChartEmpty, LineChart } from '@classic-homes/charts-svelte';
+  let data = $state([]);
+</script>
+{#if data.length === 0}
+  <ChartEmpty message="No activity recorded" />
+{:else}
+  <LineChart {data} title="Activity" />
+{/if}`
+        },
+        {
+          title: "With Custom Styling",
+          code: '<ChartEmpty message="No results found" class="rounded-xl bg-muted/30" height={250} />'
+        }
+      ],
+      relatedComponents: [
+        "ChartContainer",
+        "ChartError",
+        "ChartSkeleton"
+      ]
+    },
+    {
+      name: "ChartError",
+      description: "Error state component for charts with optional retry functionality",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [
+        {
+          name: "message",
+          type: "string",
+          required: true,
+          description: "Error message to display"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Component height"
+        },
+        {
+          name: "onRetry",
+          type: "() => void",
+          required: false,
+          description: "Callback when retry button is clicked"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { ChartError } from '@classic-homes/charts-svelte';
+</script>
+<ChartError message="Failed to load chart data" />`
+        },
+        {
+          title: "With Retry Button",
+          code: `<script>
+  import { ChartError } from '@classic-homes/charts-svelte';
+  async function fetchData() {
+    // Retry logic
+  }
+</script>
+<ChartError message="Network error occurred" onRetry={fetchData} />`
+        },
+        {
+          title: "Custom Height",
+          code: '<ChartError message="Unable to process data" height={300} onRetry={handleRetry} />'
+        },
+        {
+          title: "Conditional Error Handling",
+          code: `<script>
+  import { ChartError, BarChart } from '@classic-homes/charts-svelte';
+  let error = $state(null);
+  let data = $state(null);
+  async function loadData() {
+    try {
+      error = null;
+      data = await fetchChartData();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+</script>
+{#if error}
+  <ChartError message={error} onRetry={loadData} />
+{:else if data}
+  <BarChart {data} title="Sales" />
+{/if}`
+        },
+        {
+          title: "With Custom Styling",
+          code: '<ChartError\n  message="Service temporarily unavailable"\n  class="rounded-xl"\n  onRetry={() => location.reload()}\n/>'
+        }
+      ],
+      relatedComponents: [
+        "ChartContainer",
+        "ChartEmpty",
+        "ChartSkeleton"
+      ]
+    },
+    {
+      name: "ChartSkeleton",
+      description: "Loading skeleton placeholder for charts with animated bars",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Skeleton height"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { ChartSkeleton } from '@classic-homes/charts-svelte';\n</script>\n\n<ChartSkeleton />"
+        },
+        {
+          title: "Custom Height",
+          code: "<ChartSkeleton height={300} />"
+        },
+        {
+          title: "With Custom Class",
+          code: '<ChartSkeleton class="rounded-xl shadow-md" />'
+        },
+        {
+          title: "Conditional Loading",
+          code: `<script>
+  import { ChartSkeleton, LineChart } from '@classic-homes/charts-svelte';
+  let loading = $state(true);
+  let data = $state(null);
+  async function loadData() {
+    loading = true;
+    data = await fetchChartData();
+    loading = false;
+  }
+</script>
+{#if loading}
+  <ChartSkeleton height={400} />
+{:else}
+  <LineChart {data} title="Revenue" />
+{/if}`
+        },
+        {
+          title: "In Card",
+          code: `<script>
+  import { ChartSkeleton, AreaChart } from '@classic-homes/charts-svelte';
+  import { Card, CardHeader, CardTitle, CardContent } from '@classic-homes/theme-svelte';
+</script>
+<Card>
+  <CardHeader>
+    <CardTitle>Analytics</CardTitle>
+  </CardHeader>
+  <CardContent>
+    {#if loading}
+      <ChartSkeleton height={300} />
+    {:else}
+      <AreaChart {data} title="Monthly Users" />
+    {/if}
+  </CardContent>
+</Card>`
+        },
+        {
+          title: "Multiple Skeletons",
+          code: '<div class="grid grid-cols-2 gap-4">\n  <ChartSkeleton height={250} />\n  <ChartSkeleton height={250} />\n</div>'
+        }
+      ],
+      relatedComponents: [
+        "ChartContainer",
+        "ChartError",
+        "ChartEmpty",
+        "Skeleton"
+      ]
+    },
+    {
+      name: "Checkbox",
+      description: "Checkbox input for boolean selections and multiple choice options",
+      category: "form",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "checked",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether the checkbox is checked (bindable)"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disables the checkbox"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Marks as required"
+        },
+        {
+          name: "name",
+          type: "string",
+          required: false,
+          description: "Name attribute for forms"
+        },
+        {
+          name: "value",
+          type: "string",
+          required: false,
+          description: "Value attribute for forms"
+        },
+        {
+          name: "id",
+          type: "string",
+          required: false,
+          description: "Element ID for label association"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        },
+        {
+          name: "onCheckedChange",
+          type: "(checked: boolean) => void",
+          required: false,
+          description: "Callback when checked state changes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  let checked = $state(false);\n</script>\n\n<Checkbox bind:checked />"
+        },
+        {
+          title: "Checked",
+          code: "<Checkbox checked />"
+        },
+        {
+          title: "Disabled",
+          code: "<Checkbox disabled />\n<Checkbox disabled checked />"
+        },
+        {
+          title: "Required",
+          code: '<Checkbox required id="required-checkbox" />'
+        },
+        {
+          title: "Terms Agreement",
+          code: '<script>\n  let agreed = $state(false);\n</script>\n\n<div class="flex items-start gap-2">\n  <Checkbox id="agree" bind:checked={agreed} class="mt-1" />\n  <Label for="agree" class="leading-normal">\n    I agree to the <a href="/terms" class="text-primary underline">Terms of Service</a>\n    and <a href="/privacy" class="text-primary underline">Privacy Policy</a>\n  </Label>\n</div>\n\n<Button disabled={!agreed}>Continue</Button>'
+        },
+        {
+          title: "Feature Selection",
+          code: `<script>
+  let features = $state(['basic']);
+  function toggleFeature(feature: string) {
+    if (features.includes(feature)) {
+      features = features.filter((f) => f !== feature);
+    } else {
+      features = [...features, feature];
+    }
+  }
+</script>
+<div class="space-y-2">
+  <div class="flex items-center gap-2">
+    <Checkbox
+      id="basic"
+      checked={features.includes('basic')}
+      onCheckedChange={() => toggleFeature('basic')}
+    />
+    <Label for="basic">Basic features</Label>
+  </div>
   <div class="flex items-center gap-2">
     <Checkbox
       id="advanced"
@@ -1235,106 +2364,785 @@ var component_catalog_default = {
 </div>`
         },
         {
-          title: "Form Submission",
-          code: '<form onsubmit={handleSubmit}>\n  <Checkbox name="newsletter" value="subscribed" />\n  <button type="submit">Submit</button>\n</form>'
+          title: "Form Submission",
+          code: '<form onsubmit={handleSubmit}>\n  <Checkbox name="newsletter" value="subscribed" />\n  <button type="submit">Submit</button>\n</form>'
+        }
+      ],
+      relatedComponents: [
+        "Switch",
+        "RadioGroup",
+        "Label"
+      ]
+    },
+    {
+      name: "Combobox",
+      description: "Searchable select with async loading support",
+      category: "form",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "value",
+          type: "string",
+          default: "''",
+          required: false,
+          description: "Current selected value (bindable)"
+        },
+        {
+          name: "options",
+          type: "SelectOption[]",
+          default: "Required",
+          required: false,
+          description: "Array of options"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          required: false,
+          description: "Placeholder text"
+        },
+        {
+          name: "emptyMessage",
+          type: "string",
+          default: "'No results found.'",
+          required: false,
+          description: "Message when no options match"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disables the combobox"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Marks as required"
+        },
+        {
+          name: "name",
+          type: "string",
+          required: false,
+          description: "Name attribute for forms"
+        },
+        {
+          name: "id",
+          type: "string",
+          required: false,
+          description: "Element ID"
+        },
+        {
+          name: "error",
+          type: "string",
+          required: false,
+          description: "Error message"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Shows loading state"
+        },
+        {
+          name: "debounceMs",
+          type: "number",
+          default: "300",
+          required: false,
+          description: "Debounce time for search"
+        },
+        {
+          name: "onValueChange",
+          type: "(value: string) => void",
+          required: false,
+          description: "Callback when value changes"
+        },
+        {
+          name: "onSearch",
+          type: "(query: string) => void",
+          required: false,
+          description: "Callback for search queries"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  let value = $state('');
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'orange', label: 'Orange' },
+  ];
+</script>
+<Combobox {options} bind:value placeholder="Select a fruit..." />`
+        },
+        {
+          title: "User Search",
+          code: '<script>\n  let selectedUser = $state(\'\');\n  let users = $state([]);\n  let loading = $state(false);\n\n  async function searchUsers(query: string) {\n    if (!query) {\n      users = [];\n      return;\n    }\n    loading = true;\n    const response = await fetch(`/api/users?search=${query}`);\n    users = await response.json();\n    loading = false;\n  }\n</script>\n\n<Combobox\n  options={users}\n  bind:value={selectedUser}\n  onSearch={searchUsers}\n  {loading}\n  placeholder="Search users..."\n  emptyMessage="No users found"\n/>'
+        },
+        {
+          title: "Location Autocomplete",
+          code: '<Combobox\n  options={locations}\n  bind:value\n  onSearch={searchLocations}\n  placeholder="Enter city or zip code..."\n  emptyMessage="No locations found"\n/>'
+        }
+      ],
+      relatedComponents: [
+        "Select",
+        "MultiSelect"
+      ]
+    },
+    {
+      name: "DashboardLayout",
+      description: "Complete dashboard layout with responsive sidebar and header",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "navigation",
+          type: "NavSection[]",
+          required: false,
+          description: "Navigation sections for sidebar"
+        },
+        {
+          name: "user",
+          type: "User",
+          required: false,
+          description: "Current user data"
+        },
+        {
+          name: "appName",
+          type: "string",
+          default: "'Dashboard'",
+          required: false,
+          description: "Application name"
+        },
+        {
+          name: "pageTitle",
+          type: "string",
+          required: false,
+          description: "Page title in header"
+        },
+        {
+          name: "backLink",
+          type: "BackLink",
+          required: false,
+          description: "Back link at top of navigation"
+        },
+        {
+          name: "sidebarVariant",
+          type: "'light' | 'dark'",
+          default: "'light'",
+          required: false,
+          description: "Sidebar visual variant"
+        },
+        {
+          name: "sidebarCollapsed",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Initial collapsed state"
+        },
+        {
+          name: "showHeader",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Whether to show header"
+        },
+        {
+          name: "logo",
+          type: "Snippet",
+          required: false,
+          description: "Custom logo"
+        },
+        {
+          name: "icon",
+          type: "Snippet<[NavItem]>",
+          required: false,
+          description: "Custom icon renderer"
+        },
+        {
+          name: "quickLinks",
+          type: "QuickLink[]",
+          required: false,
+          description: "Quick links at bottom"
+        },
+        {
+          name: "quickLinksDisplay",
+          type: "'list' | 'icons'",
+          default: "'list'",
+          required: false,
+          description: "Quick links display mode"
+        },
+        {
+          name: "onNavigate",
+          type: "(item: NavItem) => void",
+          required: false,
+          description: "Navigation callback"
+        },
+        {
+          name: "headerStart",
+          type: "Snippet",
+          required: false,
+          description: "Content after toggle button"
+        },
+        {
+          name: "headerEnd",
+          type: "Snippet",
+          required: false,
+          description: "Content at end of header"
+        },
+        {
+          name: "userMenu",
+          type: "Snippet<[User]>",
+          required: false,
+          description: "Custom user menu"
+        },
+        {
+          name: "sidebarFooter",
+          type: "Snippet",
+          required: false,
+          description: "Sidebar footer content"
+        },
+        {
+          name: "expandedWidth",
+          type: "number",
+          default: "256",
+          required: false,
+          description: "Expanded sidebar width (px)"
+        },
+        {
+          name: "collapsedWidth",
+          type: "number",
+          default: "64",
+          required: false,
+          description: "Collapsed sidebar width (px)"
+        },
+        {
+          name: "searchable",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Enable navigation search"
+        },
+        {
+          name: "searchPlaceholder",
+          type: "string",
+          default: "'Search...'",
+          required: false,
+          description: "Search input placeholder"
+        },
+        {
+          name: "headerSearch",
+          type: "HeaderSearchConfig",
+          required: false,
+          description: "Header search configuration"
+        },
+        {
+          name: "mobileBreakpoint",
+          type: "'sm' | 'md' | 'lg'",
+          default: "'lg'",
+          required: false,
+          description: "Mobile/desktop breakpoint"
+        },
+        {
+          name: "children",
+          type: "Snippet",
+          required: false,
+          description: "Main content"
+        }
+      ],
+      variants: [
+        {
+          name: "sidebarVariant",
+          values: [
+            "light",
+            "dark"
+          ],
+          default: "light"
+        },
+        {
+          name: "quickLinksDisplay",
+          values: [
+            "list",
+            "icons"
+          ],
+          default: "list"
+        },
+        {
+          name: "mobileBreakpoint",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          default: "lg"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  const navigation = [\n    {\n      id: 'main',\n      title: 'Main',\n      items: [\n        { id: 'dashboard', name: 'Dashboard', href: '/dashboard', icon: 'home' },\n        { id: 'projects', name: 'Projects', href: '/projects', icon: 'folder' },\n      ],\n    },\n  ];\n</script>\n\n<DashboardLayout {navigation}>\n  <h1>Dashboard Content</h1>\n</DashboardLayout>"
         }
       ],
       relatedComponents: [
-        "Switch",
-        "RadioGroup",
-        "Label"
+        "Sidebar",
+        "Header",
+        "AppShell"
       ]
     },
     {
-      name: "Combobox",
-      description: "Searchable select with async loading support",
-      category: "form",
+      name: "DataTable",
+      description: "Powerful data table with TanStack Table - sorting, filtering, pagination, virtualization, and inline editing",
+      category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "value",
+          name: "data",
+          type: "T[]",
+          required: false,
+          description: "Array of data rows"
+        },
+        {
+          name: "columns",
+          type: "DataTableColumn<T>[]",
+          required: false,
+          description: "Column definitions"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show loading state"
+        },
+        {
+          name: "loadingRows",
+          type: "number",
+          default: "5",
+          required: false,
+          description: "Number of skeleton rows"
+        },
+        {
+          name: "emptyMessage",
           type: "string",
-          default: "''",
+          default: "'No data available'",
           required: false,
-          description: "Current selected value (bindable)"
+          description: "Empty state message"
         },
         {
-          name: "options",
-          type: "SelectOption[]",
-          default: "Required",
+          name: "sortColumn",
+          type: "string",
           required: false,
-          description: "Array of options"
+          description: "Current sort column ID (bindable)"
+        },
+        {
+          name: "sortDirection",
+          type: "'asc' | 'desc'",
+          default: "'asc'",
+          required: false,
+          description: "Sort direction (bindable)"
+        },
+        {
+          name: "onSort",
+          type: "(column: string, direction: 'asc' | 'desc') => void",
+          required: false,
+          description: "Sort callback"
+        },
+        {
+          name: "onRowClick",
+          type: "(row: T) => void",
+          required: false,
+          description: "Row click callback"
+        },
+        {
+          name: "caption",
+          type: "string",
+          required: false,
+          description: "Accessible caption"
+        },
+        {
+          name: "row",
+          type: "Snippet<[T, number]>",
+          required: false,
+          description: "Custom row renderer"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional classes"
+        }
+      ],
+      variants: [
+        {
+          name: "sortDirection",
+          values: [
+            "asc",
+            "desc"
+          ],
+          default: "asc"
+        },
+        {
+          name: "onSort",
+          values: [
+            "asc",
+            "desc"
+          ]
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Creating a TanStack Table",
+          code: `<script lang="ts">
+  import {
+    createDataTable,
+    type ColumnDef,
+    type SortingState,
+    type RowSelectionState,
+  } from '@classic-homes/theme-svelte';
+  interface User {
+    id: number;
+    name: string;
+    email: string;
+  }
+  // State
+  let sorting = $state<SortingState>([]);
+  let rowSelection = $state<RowSelectionState>({});
+  // Column definitions (TanStack Table format)
+  const columns: ColumnDef<User>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+  ];
+  // Create table instance
+  const tableApi = createDataTable<User>(() => ({
+    data: users,
+    columns,
+    state: { sorting, rowSelection },
+    onSortingChange: (updater) => {
+      sorting = typeof updater === 'function' ? updater(sorting) : updater;
+    },
+    onRowSelectionChange: (updater) => {
+      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
+    },
+    enableRowSelection: true,
+    enableSorting: true,
+  }));
+  const table = $derived(tableApi.instance);
+</script>`
+        },
+        {
+          title: "Row Selection",
+          description: "Enable checkbox selection for rows:",
+          code: "<script>\n  let rowSelection = $state<RowSelectionState>({});\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { rowSelection },\n    onRowSelectionChange: (updater) => {\n      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n    },\n    enableRowSelection: true,\n    enableMultiRowSelection: true, // Allow multiple selections\n  }));\n</script>\n\n<!-- Render checkbox in header -->\n<th>\n  <Checkbox\n    checked={table.getIsAllRowsSelected()}\n    indeterminate={table.getIsSomeRowsSelected()}\n    onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}\n  />\n</th>\n\n<!-- Render checkbox in each row -->\n{#each table.getRowModel().rows as row}\n  <td>\n    <Checkbox\n      checked={row.getIsSelected()}\n      onCheckedChange={(checked) => row.toggleSelected(!!checked)}\n    />\n  </td>\n{/each}"
+        },
+        {
+          title: "Column Visibility",
+          description: "Allow users to toggle column visibility:",
+          code: "<script>\n  let columnVisibility = $state<VisibilityState>({});\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n</script>\n\n<!-- Use DataTableToolbar for built-in column visibility dropdown -->\n<DataTableToolbar {table} visibilityState={columnVisibility} />"
+        },
+        {
+          title: "Global Search",
+          description: "Filter across all columns:",
+          code: "<script>\n  let globalFilter = $state('');\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: (updater) => {\n      globalFilter = typeof updater === 'function' ? updater(globalFilter) : updater;\n    },\n    enableGlobalFilter: true,\n  }));\n</script>\n\n<!-- DataTableToolbar includes a search input -->\n<DataTableToolbar {table} />"
+        },
+        {
+          title: "Column Filters",
+          description: "Filter individual columns with faceted filtering:",
+          code: "<script>\n  let columnFilters = $state<ColumnFiltersState>([]);\n\n  const columns: ColumnDef<User>[] = [\n    {\n      accessorKey: 'role',\n      header: 'Role',\n      meta: {\n        filterOptions: [\n          { value: 'Admin', label: 'Admin' },\n          { value: 'Editor', label: 'Editor' },\n          { value: 'Viewer', label: 'Viewer' },\n        ],\n      },\n    },\n  ];\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { columnFilters },\n    onColumnFiltersChange: (updater) => {\n      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n    },\n    enableColumnFilters: true,\n  }));\n</script>\n\n<!-- DataTableToolbar renders filter badges for columns with filterOptions -->\n<DataTableToolbar {table} />"
+        },
+        {
+          title: "Pagination",
+          description: "Add pagination controls:",
+          code: "<script>\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    // Pagination is enabled by default\n  }));\n</script>\n\n<!-- Table content -->\n<table>...</table>\n\n<!-- Pagination controls -->\n<DataTablePagination {table} />"
+        },
+        {
+          title: "Virtualization",
+          description: "Render thousands of rows efficiently:",
+          code: '<script>\n  const tableApi = createDataTable<User>(() => ({\n    data: largeDataset, // 10,000+ rows\n    columns,\n    manualPagination: true, // Disable pagination for virtualization\n  }));\n</script>\n\n<DataTableVirtual\n  table={tableApi.instance}\n  rowHeight={48}\n  overscan={10}\n  height="500px"\n  onRowClick={(row) => console.log(row)}\n/>'
+        },
+        {
+          title: "Inline Editing",
+          description: "Enable double-click cell editing:",
+          code: "<script>\n  function handleCellEdit(rowId: string, columnId: string, value: unknown, row: User) {\n    // Update your data source\n    const index = users.findIndex((u) => u.id === row.id);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n</script>\n\n{#each table.getRowModel().rows as row}\n  <tr>\n    {#each row.getVisibleCells() as cell}\n      <td>\n        <DataTableEditableCell {cell} row={row.original} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
+        },
+        {
+          title: "User Management Table",
+          code: "<script>\n  const columns = [\n    { id: 'name', header: 'Name', accessor: 'name', sortable: true },\n    { id: 'email', header: 'Email', accessor: 'email', sortable: true },\n    { id: 'role', header: 'Role', accessor: 'role' },\n    {\n      id: 'joined',\n      header: 'Joined',\n      accessor: 'createdAt',\n      sortable: true,\n      format: (v) => new Date(v).toLocaleDateString(),\n    },\n  ];\n</script>\n\n<DataTable\n  data={users}\n  {columns}\n  caption=\"User management table\"\n  onRowClick={(user) => goto(`/users/${user.id}`)}\n/>"
+        },
+        {
+          title: "Product Inventory",
+          code: "<script>\n  const columns = [\n    { id: 'sku', header: 'SKU', accessor: 'sku', width: '120px' },\n    { id: 'name', header: 'Product', accessor: 'name', sortable: true },\n    {\n      id: 'stock',\n      header: 'Stock',\n      accessor: 'quantity',\n      align: 'right',\n      sortable: true,\n    },\n    {\n      id: 'price',\n      header: 'Price',\n      accessor: 'price',\n      align: 'right',\n      format: (v) => `$${v.toFixed(2)}`,\n    },\n  ];\n</script>\n\n<DataTable data={products} {columns} emptyMessage=\"No products found\" />"
+        }
+      ],
+      relatedComponents: [
+        "Skeleton",
+        "Badge",
+        "Button",
+        "Checkbox"
+      ]
+    },
+    {
+      name: "DataTableColumnFilter",
+      description: "Per-column text filter input for filtering individual columns in data tables",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "column",
+          type: "Column<T, unknown>",
+          default: "**required**",
+          required: false,
+          description: "The TanStack Table column to filter"
         },
         {
           name: "placeholder",
           type: "string",
+          default: "'Filter {columnName}...'",
           required: false,
-          description: "Placeholder text"
+          description: "Placeholder text for the input"
         },
         {
-          name: "emptyMessage",
+          name: "debounceMs",
+          type: "number",
+          default: "300",
+          required: false,
+          description: "Debounce delay in milliseconds"
+        },
+        {
+          name: "class",
           type: "string",
-          default: "'No results found.'",
           required: false,
-          description: "Message when no options match"
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, DataTableColumnFilter } from '@classic-homes/theme-svelte';\n\n  let columnFilters = $state([]);\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { columnFilters },\n    onColumnFiltersChange: (updater) => {\n      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n    },\n    enableColumnFilters: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<!-- Filter for the name column -->\n{#each table.getAllColumns() as column}\n  {#if column.getCanFilter()}\n    <DataTableColumnFilter {column} />\n  {/if}\n{/each}"
         },
         {
-          name: "disabled",
-          type: "boolean",
-          default: "false",
+          title: "Custom Placeholder",
+          code: '<DataTableColumnFilter {column} placeholder="Search names..." />'
+        },
+        {
+          title: "Faster Debounce",
+          code: "<DataTableColumnFilter {column} debounceMs={150} />"
+        },
+        {
+          title: "In Table Header",
+          code: '<thead>\n  <tr>\n    {#each table.getHeaderGroups()[0].headers as header}\n      <th>\n        {header.column.columnDef.header}\n        {#if header.column.getCanFilter()}\n          <DataTableColumnFilter column={header.column} class="mt-1" />\n        {/if}\n      </th>\n    {/each}\n  </tr>\n</thead>'
+        },
+        {
+          title: "Multiple Column Filters",
+          code: '<div class="flex gap-2">\n  {#each table.getAllColumns().filter((c) => c.getCanFilter()) as column}\n    <DataTableColumnFilter {column} class="w-40" />\n  {/each}\n</div>'
+        }
+      ],
+      relatedComponents: [
+        "DataTable",
+        "DataTableSearch",
+        "DataTableFacetedFilter"
+      ]
+    },
+    {
+      name: "DataTableColumnVisibility",
+      description: "Dropdown component for toggling column visibility in data tables",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "table",
+          type: "Table<T>",
+          default: "**required**",
+          required: false,
+          description: "The TanStack Table instance"
+        },
+        {
+          name: "visibilityState",
+          type: "VisibilityState",
+          required: false,
+          description: "Optional visibility state for reactivity"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, DataTableColumnVisibility } from '@classic-homes/theme-svelte';\n\n  let columnVisibility = $state({});\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableColumnVisibility {table} />"
+        },
+        {
+          title: "With Controlled State",
+          description: "Pass the visibility state for full reactivity:",
+          code: "<script>\n  let columnVisibility = $state({\n    email: false, // Hide email column by default\n    phone: false, // Hide phone column by default\n  });\n</script>\n\n<DataTableColumnVisibility {table} visibilityState={columnVisibility} />"
+        },
+        {
+          title: "In Toolbar",
+          code: '<div class="flex items-center gap-2">\n  <DataTableSearch {table} />\n  <DataTableColumnVisibility {table} />\n</div>'
+        },
+        {
+          title: "Hide Specific Columns Initially",
+          code: "<script>\n  // Some columns hidden by default\n  let columnVisibility = $state({\n    createdAt: false,\n    updatedAt: false,\n    internalId: false,\n  });\n\n  const tableApi = createDataTable(() => ({\n    data,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n</script>\n\n<DataTableColumnVisibility {table} visibilityState={columnVisibility} />"
+        }
+      ],
+      relatedComponents: [
+        "DataTable",
+        "DataTableToolbar",
+        "DropdownMenu"
+      ]
+    },
+    {
+      name: "DataTableEditableCell",
+      description: "Inline editable cell component for data tables with double-click editing",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "cell",
+          type: "Cell<T, unknown>",
+          default: "**required**",
           required: false,
-          description: "Disables the combobox"
+          description: "The TanStack Table cell to render"
         },
         {
-          name: "required",
-          type: "boolean",
-          default: "false",
+          name: "row",
+          type: "T",
+          default: "**required**",
           required: false,
-          description: "Marks as required"
+          description: "The row data object"
         },
         {
-          name: "name",
-          type: "string",
+          name: "onSave",
+          type: "(rowId: string, columnId: string, value: unknown, row: T) => void",
+          default: "**required**",
           required: false,
-          description: "Name attribute for forms"
+          description: "Callback when cell value is saved"
         },
         {
-          name: "id",
+          name: "class",
           type: "string",
           required: false,
-          description: "Element ID"
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, DataTableEditableCell } from '@classic-homes/theme-svelte';\n\n  function handleCellEdit(rowId, columnId, value, row) {\n    // Update your data source\n    const index = users.findIndex((u) => u.id === row.id);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n\n  const columns = [\n    {\n      accessorKey: 'name',\n      header: 'Name',\n      meta: { enableEditing: true },\n    },\n    {\n      accessorKey: 'email',\n      header: 'Email',\n      meta: { enableEditing: true },\n    },\n  ];\n\n  const tableApi = createDataTable(() => ({ data: users, columns }));\n  const table = $derived(tableApi.instance);\n</script>\n\n{#each table.getRowModel().rows as row}\n  <tr>\n    {#each row.getVisibleCells() as cell}\n      <td>\n        <DataTableEditableCell {cell} row={row.original} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
         },
         {
-          name: "error",
-          type: "string",
-          required: false,
-          description: "Error message"
+          title: "With Custom Formatting",
+          description: "Cells can have custom display formatting while editing the raw value:",
+          code: "<script>\n  const columns = [\n    {\n      accessorKey: 'price',\n      header: 'Price',\n      meta: {\n        enableEditing: true,\n        format: (value) => `$${Number(value).toFixed(2)}`,\n      },\n    },\n  ];\n</script>"
         },
         {
-          name: "loading",
-          type: "boolean",
-          default: "false",
+          title: "Async Save Handler",
+          code: "<script>\n  async function handleCellEdit(rowId, columnId, value, row) {\n    try {\n      await api.updateUser(row.id, { [columnId]: value });\n      // Update local state after successful save\n      users = users.map((u) => (u.id === row.id ? { ...u, [columnId]: value } : u));\n    } catch (error) {\n      console.error('Failed to save:', error);\n      // Optionally show error toast\n    }\n  }\n</script>"
+        }
+      ],
+      relatedComponents: [
+        "DataTable",
+        "FlexRender"
+      ]
+    },
+    {
+      name: "DataTableFacetedFilter",
+      description: "Multi-select dropdown filter for categorical columns in data tables",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "column",
+          type: "Column<T, unknown>",
+          default: "**required**",
           required: false,
-          description: "Shows loading state"
+          description: "The TanStack Table column to filter"
         },
         {
-          name: "debounceMs",
-          type: "number",
-          default: "300",
+          name: "title",
+          type: "string",
+          default: "**required**",
           required: false,
-          description: "Debounce time for search"
+          description: "Title displayed on the filter button"
         },
         {
-          name: "onValueChange",
-          type: "(value: string) => void",
+          name: "options",
+          type: "FilterOption[]",
+          default: "**required**",
           required: false,
-          description: "Callback when value changes"
+          description: "Available filter options"
         },
         {
-          name: "onSearch",
-          type: "(query: string) => void",
+          name: "class",
+          type: "string",
           required: false,
-          description: "Callback for search queries"
+          description: "Additional CSS classes"
         }
       ],
       variants: [],
@@ -1350,219 +3158,316 @@ var component_catalog_default = {
         {
           title: "Basic Usage",
           code: `<script>
-  let value = $state('');
+  import { createDataTable, DataTableFacetedFilter } from '@classic-homes/theme-svelte';
-  const options = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'orange', label: 'Orange' },
-  ];
+  let columnFilters = $state([]);
+  const tableApi = createDataTable(() => ({
+    data: users,
+    columns,
+    state: { columnFilters },
+    onColumnFiltersChange: (updater) => {
+      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;
+    },
+    enableColumnFilters: true,
+  }));
+  const table = $derived(tableApi.instance);
+  const statusColumn = $derived(table.getColumn('status'));
 </script>
-<Combobox {options} bind:value placeholder="Select a fruit..." />`
+<DataTableFacetedFilter
+  column={statusColumn}
+  title="Status"
+  options={[
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+    { value: 'pending', label: 'Pending' },
+  ]}
+/>`
         },
         {
-          title: "User Search",
-          code: '<script>\n  let selectedUser = $state(\'\');\n  let users = $state([]);\n  let loading = $state(false);\n\n  async function searchUsers(query: string) {\n    if (!query) {\n      users = [];\n      return;\n    }\n    loading = true;\n    const response = await fetch(`/api/users?search=${query}`);\n    users = await response.json();\n    loading = false;\n  }\n</script>\n\n<Combobox\n  options={users}\n  bind:value={selectedUser}\n  onSearch={searchUsers}\n  {loading}\n  placeholder="Search users..."\n  emptyMessage="No users found"\n/>'
+          title: "With Counts",
+          description: "Display the count of items for each option:",
+          code: `<script>
+  // Calculate counts from your data
+  const statusCounts = $derived.by(() => {
+    const counts = { active: 0, inactive: 0, pending: 0 };
+    users.forEach((u) => counts[u.status]++);
+    return counts;
+  });
+  const statusOptions = $derived([
+    { value: 'active', label: 'Active', count: statusCounts.active },
+    { value: 'inactive', label: 'Inactive', count: statusCounts.inactive },
+    { value: 'pending', label: 'Pending', count: statusCounts.pending },
+  ]);
+</script>
+<DataTableFacetedFilter column={statusColumn} title="Status" options={statusOptions} />`
         },
         {
-          title: "Location Autocomplete",
-          code: '<Combobox\n  options={locations}\n  bind:value\n  onSearch={searchLocations}\n  placeholder="Enter city or zip code..."\n  emptyMessage="No locations found"\n/>'
+          title: "Multiple Filters",
+          code: `<div class="flex gap-2">
+  <DataTableFacetedFilter
+    column={table.getColumn('status')}
+    title="Status"
+    options={statusOptions}
+  />
+  <DataTableFacetedFilter column={table.getColumn('role')} title="Role" options={roleOptions} />
+  <DataTableFacetedFilter
+    column={table.getColumn('department')}
+    title="Department"
+    options={departmentOptions}
+  />
+</div>`
+        },
+        {
+          title: "In DataTableToolbar",
+          code: `<DataTableToolbar {table}>
+  {#snippet filters()}
+    <DataTableFacetedFilter
+      column={table.getColumn('status')}
+      title="Status"
+      options={statusOptions}
+    />
+    <DataTableFacetedFilter
+      column={table.getColumn('priority')}
+      title="Priority"
+      options={priorityOptions}
+    />
+  {/snippet}
+</DataTableToolbar>`
+        },
+        {
+          title: "Dynamic Options from Data",
+          code: `<script>
+  // Extract unique values from data
+  const uniqueStatuses = $derived(
+    [...new Set(users.map((u) => u.status))].map((status) => ({
+      value: status,
+      label: status.charAt(0).toUpperCase() + status.slice(1),
+      count: users.filter((u) => u.status === status).length,
+    }))
+  );
+</script>
+<DataTableFacetedFilter
+  column={table.getColumn('status')}
+  title="Status"
+  options={uniqueStatuses}
+/>`
         }
       ],
       relatedComponents: [
-        "Select",
-        "MultiSelect"
+        "DataTable",
+        "DataTableToolbar",
+        "DataTableColumnFilter"
       ]
     },
     {
-      name: "DashboardLayout",
-      description: "Complete dashboard layout with responsive sidebar and header",
-      category: "layout",
+      name: "DataTablePagination",
+      description: "Pagination controls for TanStack Table with page navigation and rows per page selector",
+      category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "navigation",
-          type: "NavSection[]",
+          name: "table",
+          type: "Table<T>",
+          default: "**required**",
           required: false,
-          description: "Navigation sections for sidebar"
+          description: "The TanStack Table instance"
         },
         {
-          name: "user",
-          type: "User",
+          name: "pageSizeOptions",
+          type: "number[]",
+          default: "[10, 25, 50, 100]",
           required: false,
-          description: "Current user data"
+          description: "Available page size options"
         },
         {
-          name: "appName",
-          type: "string",
-          default: "'Dashboard'",
+          name: "showSelectedCount",
+          type: "boolean",
+          default: "true",
           required: false,
-          description: "Application name"
+          description: "Show selected row count when rows are selected"
         },
         {
-          name: "pageTitle",
+          name: "class",
           type: "string",
           required: false,
-          description: "Page title in header"
-        },
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
         {
-          name: "backLink",
-          type: "BackLink",
-          required: false,
-          description: "Back link at top of navigation"
-        },
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
         {
-          name: "sidebarVariant",
-          type: "'light' | 'dark'",
-          default: "'light'",
-          required: false,
-          description: "Sidebar visual variant"
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, DataTablePagination } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<table>...</table>\n<DataTablePagination {table} />"
         },
         {
-          name: "sidebarCollapsed",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Initial collapsed state"
+          title: "Custom Page Sizes",
+          code: "<DataTablePagination {table} pageSizeOptions={[5, 10, 20, 50]} />"
         },
         {
-          name: "showHeader",
-          type: "boolean",
-          default: "true",
-          required: false,
-          description: "Whether to show header"
+          title: "Hide Selected Count",
+          code: "<DataTablePagination {table} showSelectedCount={false} />"
         },
         {
-          name: "logo",
-          type: "Snippet",
-          required: false,
-          description: "Custom logo"
-        },
+          title: "With Custom Styling",
+          code: '<DataTablePagination {table} class="border-t pt-4" />'
+        }
+      ],
+      relatedComponents: [
+        "DataTable",
+        "DataTableToolbar"
+      ]
+    },
+    {
+      name: "DataTableSearch",
+      description: "Global search input component for filtering all columns in a data table",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
         {
-          name: "icon",
-          type: "Snippet<[NavItem]>",
+          name: "table",
+          type: "Table<T>",
+          default: "**required**",
           required: false,
-          description: "Custom icon renderer"
+          description: "The TanStack Table instance"
         },
         {
-          name: "quickLinks",
-          type: "QuickLink[]",
+          name: "placeholder",
+          type: "string",
+          default: "'Search...'",
           required: false,
-          description: "Quick links at bottom"
+          description: "Placeholder text for the input"
         },
         {
-          name: "quickLinksDisplay",
-          type: "'list' | 'icons'",
-          default: "'list'",
+          name: "debounceMs",
+          type: "number",
+          default: "300",
           required: false,
-          description: "Quick links display mode"
+          description: "Debounce delay in milliseconds"
         },
         {
-          name: "onNavigate",
-          type: "(item: NavItem) => void",
+          name: "class",
+          type: "string",
           required: false,
-          description: "Navigation callback"
-        },
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
         {
-          name: "headerStart",
-          type: "Snippet",
-          required: false,
-          description: "Content after toggle button"
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, DataTableSearch } from '@classic-homes/theme-svelte';\n\n  let globalFilter = $state('');\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: (updater) => {\n      globalFilter = typeof updater === 'function' ? updater(globalFilter) : updater;\n    },\n    enableGlobalFilter: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableSearch {table} /><table>...</table>"
         },
         {
-          name: "headerEnd",
-          type: "Snippet",
-          required: false,
-          description: "Content at end of header"
+          title: "Custom Placeholder",
+          code: '<DataTableSearch {table} placeholder="Search users by name or email..." />'
         },
         {
-          name: "userMenu",
-          type: "Snippet<[User]>",
-          required: false,
-          description: "Custom user menu"
+          title: "Faster Debounce",
+          description: "For more responsive filtering:",
+          code: "<DataTableSearch {table} debounceMs={150} />"
         },
         {
-          name: "sidebarFooter",
-          type: "Snippet",
-          required: false,
-          description: "Sidebar footer content"
+          title: "No Debounce",
+          description: "For immediate filtering (smaller datasets):",
+          code: "<DataTableSearch {table} debounceMs={0} />"
         },
         {
-          name: "expandedWidth",
-          type: "number",
-          default: "256",
-          required: false,
-          description: "Expanded sidebar width (px)"
+          title: "Custom Width",
+          code: '<DataTableSearch {table} class="w-[300px]" />'
         },
         {
-          name: "collapsedWidth",
-          type: "number",
-          default: "64",
+          title: "In Custom Layout",
+          code: '<div class="flex items-center gap-4">\n  <DataTableSearch {table} class="flex-1" />\n  <Button>Add User</Button>\n</div>'
+        }
+      ],
+      relatedComponents: [
+        "DataTable",
+        "DataTableToolbar",
+        "DataTableColumnFilter"
+      ]
+    },
+    {
+      name: "DataTableToolbar",
+      description: "Combined toolbar component with search, filters, and column visibility controls",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "table",
+          type: "Table<T>",
+          default: "**required**",
           required: false,
-          description: "Collapsed sidebar width (px)"
+          description: "The TanStack Table instance"
         },
         {
-          name: "searchable",
+          name: "showSearch",
           type: "boolean",
-          default: "false",
+          default: "true",
           required: false,
-          description: "Enable navigation search"
+          description: "Show global search input"
         },
         {
-          name: "searchPlaceholder",
-          type: "string",
-          default: "'Search...'",
+          name: "showColumnVisibility",
+          type: "boolean",
+          default: "true",
           required: false,
-          description: "Search input placeholder"
+          description: "Show column visibility dropdown"
         },
         {
-          name: "headerSearch",
-          type: "HeaderSearchConfig",
+          name: "searchPlaceholder",
+          type: "string",
+          default: "'Search...'",
           required: false,
-          description: "Header search configuration"
+          description: "Placeholder text for search input"
         },
         {
-          name: "mobileBreakpoint",
-          type: "'sm' | 'md' | 'lg'",
-          default: "'lg'",
+          name: "visibilityState",
+          type: "VisibilityState",
           required: false,
-          description: "Mobile/desktop breakpoint"
+          description: "Optional visibility state for reactivity"
         },
         {
-          name: "children",
+          name: "filters",
           type: "Snippet",
           required: false,
-          description: "Main content"
-        }
-      ],
-      variants: [
-        {
-          name: "sidebarVariant",
-          values: [
-            "light",
-            "dark"
-          ],
-          default: "light"
+          description: "Custom filters slot"
         },
         {
-          name: "quickLinksDisplay",
-          values: [
-            "list",
-            "icons"
-          ],
-          default: "list"
+          name: "actions",
+          type: "Snippet",
+          required: false,
+          description: "Custom actions slot"
         },
         {
-          name: "mobileBreakpoint",
-          values: [
-            "sm",
-            "md",
-            "lg"
-          ],
-          default: "lg"
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
         }
       ],
+      variants: [],
       slots: [
         {
           name: "children",
@@ -1574,115 +3479,103 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  const navigation = [\n    {\n      id: 'main',\n      title: 'Main',\n      items: [\n        { id: 'dashboard', name: 'Dashboard', href: '/dashboard', icon: 'home' },\n        { id: 'projects', name: 'Projects', href: '/projects', icon: 'folder' },\n      ],\n    },\n  ];\n</script>\n\n<DashboardLayout {navigation}>\n  <h1>Dashboard Content</h1>\n</DashboardLayout>"
+          code: "<script>\n  import { createDataTable, DataTableToolbar } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    enableGlobalFilter: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableToolbar {table} /><table>...</table>"
+        },
+        {
+          title: "Search Only",
+          code: "<DataTableToolbar {table} showColumnVisibility={false} />"
+        },
+        {
+          title: "Custom Placeholder",
+          code: '<DataTableToolbar {table} searchPlaceholder="Search users..." />'
+        },
+        {
+          title: "With Custom Filters",
+          code: `<DataTableToolbar {table}>
+  {#snippet filters()}
+    <DataTableFacetedFilter
+      {table}
+      columnId="status"
+      title="Status"
+      options={[
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ]}
+    />
+  {/snippet}
+</DataTableToolbar>`
+        },
+        {
+          title: "With Custom Actions",
+          code: '<DataTableToolbar {table}>\n  {#snippet actions()}\n    <Button variant="outline" size="sm">Export</Button>\n  {/snippet}\n</DataTableToolbar>'
+        },
+        {
+          title: "Full Customization",
+          code: '<DataTableToolbar {table} showSearch={true} showColumnVisibility={true}>\n  {#snippet filters()}\n    <DataTableFacetedFilter {table} columnId="role" title="Role" options={roleOptions} />\n    <DataTableFacetedFilter {table} columnId="status" title="Status" options={statusOptions} />\n  {/snippet}\n  {#snippet actions()}\n    <Button onclick={handleExport}>Export CSV</Button>\n    <Button onclick={handleDelete} variant="destructive">Delete Selected</Button>\n  {/snippet}\n</DataTableToolbar>'
         }
       ],
       relatedComponents: [
-        "Sidebar",
-        "Header",
-        "AppShell"
+        "DataTable",
+        "DataTableSearch",
+        "DataTableColumnVisibility",
+        "DataTableFacetedFilter"
       ]
     },
     {
-      name: "DataTable",
-      description: "Sortable, accessible data table with loading states",
+      name: "DataTableVirtual",
+      description: "Virtualized table component for efficiently rendering large datasets with 10,000+ rows",
       category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "data",
-          type: "T[]",
-          required: false,
-          description: "Array of data rows"
-        },
-        {
-          name: "columns",
-          type: "DataTableColumn<T>[]",
+          name: "table",
+          type: "Table<T>",
+          default: "**required**",
           required: false,
-          description: "Column definitions"
+          description: "The TanStack Table instance"
         },
         {
-          name: "loading",
-          type: "boolean",
-          default: "false",
+          name: "rowHeight",
+          type: "number",
+          default: "48",
           required: false,
-          description: "Show loading state"
+          description: "Height of each row in pixels (must be fixed)"
         },
         {
-          name: "loadingRows",
+          name: "overscan",
           type: "number",
           default: "5",
           required: false,
-          description: "Number of skeleton rows"
-        },
-        {
-          name: "emptyMessage",
-          type: "string",
-          default: "'No data available'",
-          required: false,
-          description: "Empty state message"
+          description: "Number of rows to render outside visible area"
         },
         {
-          name: "sortColumn",
+          name: "height",
           type: "string",
+          default: "'500px'",
           required: false,
-          description: "Current sort column ID (bindable)"
-        },
-        {
-          name: "sortDirection",
-          type: "'asc' | 'desc'",
-          default: "'asc'",
-          required: false,
-          description: "Sort direction (bindable)"
-        },
-        {
-          name: "onSort",
-          type: "(column: string, direction: 'asc' | 'desc') => void",
-          required: false,
-          description: "Sort callback"
+          description: "Height of the container (CSS value)"
         },
         {
           name: "onRowClick",
           type: "(row: T) => void",
           required: false,
-          description: "Row click callback"
-        },
-        {
-          name: "caption",
-          type: "string",
-          required: false,
-          description: "Accessible caption"
+          description: "Callback when row is clicked"
         },
         {
-          name: "row",
-          type: "Snippet<[T, number]>",
+          name: "enableRowSelection",
+          type: "boolean",
+          default: "false",
           required: false,
-          description: "Custom row renderer"
+          description: "Enable row selection checkboxes"
         },
         {
           name: "class",
           type: "string",
           required: false,
-          description: "Additional classes"
-        }
-      ],
-      variants: [
-        {
-          name: "sortDirection",
-          values: [
-            "asc",
-            "desc"
-          ],
-          default: "asc"
-        },
-        {
-          name: "onSort",
-          values: [
-            "asc",
-            "desc"
-          ]
+          description: "Additional CSS classes"
         }
       ],
+      variants: [],
       slots: [
         {
           name: "children",
@@ -1694,21 +3587,60 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  const data = [\n    { id: 1, name: 'John Doe', email: 'john@example.com' },\n    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },\n  ];\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: 'name' },\n    { id: 'email', header: 'Email', accessor: 'email' },\n  ];\n</script>\n\n<DataTable {data} {columns} />"
+          code: `<script>
+  import { createDataTable, DataTableVirtual } from '@classic-homes/theme-svelte';
+  const tableApi = createDataTable(() => ({
+    data: largeDataset, // 10,000+ rows
+    columns,
+    manualPagination: true, // Disable pagination for virtualization
+  }));
+  const table = $derived(tableApi.instance);
+</script>
+<DataTableVirtual {table} height="600px" />`
         },
         {
-          title: "User Management Table",
-          code: "<script>\n  const columns = [\n    { id: 'name', header: 'Name', accessor: 'name', sortable: true },\n    { id: 'email', header: 'Email', accessor: 'email', sortable: true },\n    { id: 'role', header: 'Role', accessor: 'role' },\n    {\n      id: 'joined',\n      header: 'Joined',\n      accessor: 'createdAt',\n      sortable: true,\n      format: (v) => new Date(v).toLocaleDateString(),\n    },\n  ];\n</script>\n\n<DataTable\n  data={users}\n  {columns}\n  caption=\"User management table\"\n  onRowClick={(user) => goto(`/users/${user.id}`)}\n/>"
+          title: "Custom Row Height",
+          code: '<DataTableVirtual {table} rowHeight={64} height="600px" />'
         },
         {
-          title: "Product Inventory",
-          code: "<script>\n  const columns = [\n    { id: 'sku', header: 'SKU', accessor: 'sku', width: '120px' },\n    { id: 'name', header: 'Product', accessor: 'name', sortable: true },\n    {\n      id: 'stock',\n      header: 'Stock',\n      accessor: 'quantity',\n      align: 'right',\n      sortable: true,\n    },\n    {\n      id: 'price',\n      header: 'Price',\n      accessor: 'price',\n      align: 'right',\n      format: (v) => `$${v.toFixed(2)}`,\n    },\n  ];\n</script>\n\n<DataTable data={products} {columns} emptyMessage=\"No products found\" />"
+          title: "With More Overscan",
+          description: "For smoother scrolling, increase the overscan:",
+          code: '<DataTableVirtual {table} overscan={10} height="600px" />'
+        },
+        {
+          title: "With Row Click Handler",
+          code: '<DataTableVirtual {table} height="600px" onRowClick={(row) => goto(`/users/${row.id}`)} />'
+        },
+        {
+          title: "With Row Selection",
+          code: `<script>
+  let rowSelection = $state({});
+  const tableApi = createDataTable(() => ({
+    data: largeDataset,
+    columns,
+    state: { rowSelection },
+    onRowSelectionChange: (updater) => {
+      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
+    },
+    enableRowSelection: true,
+    manualPagination: true,
+  }));
+</script>
+<DataTableVirtual {table} enableRowSelection height="600px" />`
+        },
+        {
+          title: "Full Height Container",
+          code: '<div class="flex-1 min-h-0">\n  <DataTableVirtual {table} height="100%" />\n</div>'
         }
       ],
       relatedComponents: [
-        "Skeleton",
-        "Badge",
-        "Button"
+        "DataTable",
+        "DataTablePagination"
       ]
     },
     {
@@ -1901,8 +3833,106 @@ var component_catalog_default = {
       description: "Pie chart variant with center labels for key metrics",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "PieSliceData[]",
+          required: true,
+          description: "Array of slice data"
+        },
+        {
+          name: "showLabels",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show labels on slices"
+        },
+        {
+          name: "labelPosition",
+          type: "'inside' | 'outside'",
+          default: "'outside'",
+          required: false,
+          description: "Position of labels"
+        },
+        {
+          name: "innerRadius",
+          type: "number | string",
+          default: "'50%'",
+          required: false,
+          description: "Inner radius for donut hole"
+        },
+        {
+          name: "centerLabel",
+          type: "string",
+          required: false,
+          description: "Text label in the center"
+        },
+        {
+          name: "centerValue",
+          type: "string | number",
+          required: false,
+          description: "Value displayed in the center"
+        },
+        {
+          name: "onClick",
+          type: "(params: SliceEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "labelPosition",
+          values: [
+            "inside",
+            "outside"
+          ],
+          default: "outside"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -2350,18 +4380,81 @@ var component_catalog_default = {
           code: '<FileUpload\n  accept="image/*"\n  maxSize={2 * 1024 * 1024}\n  bind:files={avatar}\n  onUpload={uploadAvatar}\n/>'
         },
         {
-          title: "Document Upload",
-          code: '<FileUpload\n  accept=".pdf,.doc,.docx"\n  multiple\n  maxFiles={10}\n  maxSize={10 * 1024 * 1024}\n  bind:files={documents}\n  onUpload={uploadDocument}\n/>'
+          title: "Document Upload",
+          code: '<FileUpload\n  accept=".pdf,.doc,.docx"\n  multiple\n  maxFiles={10}\n  maxSize={10 * 1024 * 1024}\n  bind:files={documents}\n  onUpload={uploadDocument}\n/>'
+        },
+        {
+          title: "With Progress",
+          description: "Files show upload progress:",
+          code: "<FileUpload\n  bind:files\n  onUpload={async (file) => {\n    // Upload with progress tracking\n    return await uploadWithProgress(file, (progress) => {\n      // Progress updates automatically\n    });\n  }}\n/>"
+        }
+      ],
+      relatedComponents: [
+        "Input",
+        "Button"
+      ]
+    },
+    {
+      name: "FlexRender",
+      description: "Dynamic content renderer for TanStack Table cells and headers",
+      category: "data",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "content",
+          type: "unknown",
+          default: "**required**",
+          required: false,
+          description: "Content to render (string, component, or function)"
+        },
+        {
+          name: "props",
+          type: "TProps",
+          default: "**required**",
+          required: false,
+          description: "Props to pass to component or function"
+        },
+        {
+          name: "asComponent",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Explicitly mark content as a Svelte component"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { createDataTable, FlexRender } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({ data: users, columns }));\n  const table = $derived(tableApi.instance);\n</script>\n\n<table>\n  <thead>\n    {#each table.getHeaderGroups() as headerGroup}\n      <tr>\n        {#each headerGroup.headers as header}\n          <th>\n            <FlexRender content={header.column.columnDef.header} props={header.getContext()} />\n          </th>\n        {/each}\n      </tr>\n    {/each}\n  </thead>\n  <tbody>\n    {#each table.getRowModel().rows as row}\n      <tr>\n        {#each row.getVisibleCells() as cell}\n          <td>\n            <FlexRender content={cell.column.columnDef.cell} props={cell.getContext()} />\n          </td>\n        {/each}\n      </tr>\n    {/each}\n  </tbody>\n</table>"
         },
         {
-          title: "With Progress",
-          description: "Files show upload progress:",
-          code: "<FileUpload\n  bind:files\n  onUpload={async (file) => {\n    // Upload with progress tracking\n    return await uploadWithProgress(file, (progress) => {\n      // Progress updates automatically\n    });\n  }}\n/>"
+          title: "With Custom Cell Component",
+          code: `<!-- StatusBadge.svelte -->
+<script lang="ts">
+  import type { CellContext } from '@classic-homes/theme-svelte';
+  import Badge from './Badge.svelte';
+  let { getValue }: CellContext<User, string> = $props();
+  const status = $derived(getValue());
+</script>
+<Badge variant={status === 'active' ? 'success' : 'secondary'}>
+  {status}
+</Badge>`
         }
       ],
       relatedComponents: [
-        "Input",
-        "Button"
+        "DataTable",
+        "DataTableEditableCell"
       ]
     },
     {
@@ -2919,8 +5012,103 @@ var component_catalog_default = {
       description: "Visualize conversion rates and process flows",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "FunnelSliceData[]",
+          required: true,
+          description: "Array of funnel stages"
+        },
+        {
+          name: "sort",
+          type: "'ascending' | 'descending' | 'none'",
+          default: "'descending'",
+          required: false,
+          description: "Sort order"
+        },
+        {
+          name: "orientation",
+          type: "'vertical' | 'horizontal'",
+          default: "'vertical'",
+          required: false,
+          description: "Funnel orientation"
+        },
+        {
+          name: "showLabels",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show value labels"
+        },
+        {
+          name: "onClick",
+          type: "(params: SliceEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "sort",
+          values: [
+            "ascending",
+            "descending",
+            "none"
+          ],
+          default: "descending"
+        },
+        {
+          name: "orientation",
+          values: [
+            "vertical",
+            "horizontal"
+          ],
+          default: "vertical"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -2969,8 +5157,86 @@ var component_catalog_default = {
       description: "Display single value metrics with progress indicator",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "value",
+          type: "number",
+          required: true,
+          description: "Current value to display"
+        },
+        {
+          name: "min",
+          type: "number",
+          default: "0",
+          required: false,
+          description: "Minimum value of the gauge"
+        },
+        {
+          name: "max",
+          type: "number",
+          default: "100",
+          required: false,
+          description: "Maximum value of the gauge"
+        },
+        {
+          name: "splitNumber",
+          type: "number",
+          default: "10",
+          required: false,
+          description: "Number of tick divisions"
+        },
+        {
+          name: "showProgress",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show colored progress arc"
+        },
+        {
+          name: "formatValue",
+          type: "(value: number) => string",
+          required: false,
+          description: "Custom value formatter"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "animation",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Enable/disable animations"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -3139,13 +5405,165 @@ var component_catalog_default = {
           default: "lg"
         },
         {
-          name: "maxWidth",
+          name: "maxWidth",
+          values: [
+            "none",
+            "sm",
+            "7xl"
+          ],
+          default: "none"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: '<Header title="Dashboard" />'
+        },
+        {
+          title: "E-commerce Header",
+          code: '<Header backdropBlur elevated maxWidth="7xl">\n  {#snippet start()}\n    <a href="/" class="font-bold text-xl">Store</a>\n  {/snippet}\n\n  {#snippet nav()}\n    <a href="/products">Products</a>\n    <a href="/categories">Categories</a>\n    <a href="/deals">Deals</a>\n  {/snippet}\n\n  {#snippet end()}\n    <Button variant="ghost" size="icon">\n      <SearchIcon />\n    </Button>\n    <Button variant="ghost" size="icon">\n      <CartIcon />\n      <Badge class="absolute -top-1 -right-1">3</Badge>\n    </Button>\n    <Button variant="ghost" size="icon">\n      <UserIcon />\n    </Button>\n  {/snippet}\n</Header>'
+        },
+        {
+          title: "Admin Header",
+          code: '<Header\n  showCollapseButton\n  sidebarCollapsed={!sidebarOpen}\n  onCollapseClick={() => (sidebarOpen = !sidebarOpen)}\n  title="Admin Panel"\n>\n  {#snippet end()}\n    <div class="flex items-center gap-4">\n      <Badge variant="outline">v2.1.0</Badge>\n      <Button variant="ghost" size="icon">\n        <SettingsIcon />\n      </Button>\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <Avatar>AD</Avatar>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item>Profile</DropdownMenu.Item>\n          <DropdownMenu.Item>Settings</DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item>Log out</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    </div>\n  {/snippet}\n</Header>'
+        }
+      ],
+      relatedComponents: [
+        "Sidebar",
+        "DashboardLayout",
+        "PublicLayout"
+      ]
+    },
+    {
+      name: "HeaderSearch",
+      description: "Docusaurus-style search component with modal dialog and keyboard navigation",
+      category: "navigation",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "enabled",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Whether search is visible"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          default: "'Search...'",
+          required: false,
+          description: "Placeholder text"
+        },
+        {
+          name: "onSearch",
+          type: "(query: string) => void",
+          required: false,
+          description: "Search callback (debounced 200ms)"
+        },
+        {
+          name: "onSelect",
+          type: "(item: SearchResultItem) => void",
+          required: false,
+          description: "Selection callback"
+        },
+        {
+          name: "onOpenChange",
+          type: "(open: boolean) => void",
+          required: false,
+          description: "Dialog open/close callback"
+        },
+        {
+          name: "results",
+          type: "SearchResultItem[] | SearchResultGroup[]",
+          default: "[]",
+          required: false,
+          description: "Search results to display"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Loading state"
+        },
+        {
+          name: "emptyMessage",
+          type: "string",
+          default: "'No results found.'",
+          required: false,
+          description: "Empty state message"
+        },
+        {
+          name: "enableShortcut",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Enable Cmd/Ctrl+K shortcut"
+        },
+        {
+          name: "shortcutKey",
+          type: "string",
+          default: "'k'",
+          required: false,
+          description: "Custom shortcut key"
+        },
+        {
+          name: "variant",
+          type: "'default' | 'icon'",
+          default: "'default'",
+          required: false,
+          description: "Trigger button style"
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md'",
+          default: "'md'",
+          required: false,
+          description: "Trigger button size"
+        },
+        {
+          name: "renderResult",
+          type: "Snippet<[item, isSelected]>",
+          required: false,
+          description: "Custom result renderer"
+        },
+        {
+          name: "renderEmpty",
+          type: "Snippet",
+          required: false,
+          description: "Custom empty state renderer"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional classes for trigger"
+        }
+      ],
+      variants: [
+        {
+          name: "variant",
+          values: [
+            "default",
+            "icon"
+          ],
+          default: "default"
+        },
+        {
+          name: "size",
           values: [
-            "none",
             "sm",
-            "7xl"
+            "md"
           ],
-          default: "none"
+          default: "md"
         }
       ],
       slots: [
@@ -3159,21 +5577,38 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: '<Header title="Dashboard" />'
+          code: '<script>\n  let results: SearchResultItem[] = $state([]);\n  let loading = $state(false);\n\n  async function handleSearch(query: string) {\n    loading = true;\n    results = await fetchSearchResults(query);\n    loading = false;\n  }\n\n  function handleSelect(item: SearchResultItem) {\n    goto(item.href);\n  }\n</script>\n\n<HeaderSearch\n  enabled={true}\n  placeholder="Search..."\n  onSearch={handleSearch}\n  onSelect={handleSelect}\n  {results}\n  {loading}\n/>'
         },
         {
-          title: "E-commerce Header",
-          code: '<Header backdropBlur elevated maxWidth="7xl">\n  {#snippet start()}\n    <a href="/" class="font-bold text-xl">Store</a>\n  {/snippet}\n\n  {#snippet nav()}\n    <a href="/products">Products</a>\n    <a href="/categories">Categories</a>\n    <a href="/deals">Deals</a>\n  {/snippet}\n\n  {#snippet end()}\n    <Button variant="ghost" size="icon">\n      <SearchIcon />\n    </Button>\n    <Button variant="ghost" size="icon">\n      <CartIcon />\n      <Badge class="absolute -top-1 -right-1">3</Badge>\n    </Button>\n    <Button variant="ghost" size="icon">\n      <UserIcon />\n    </Button>\n  {/snippet}\n</Header>'
+          title: "Default",
+          description: "Full search box with placeholder and keyboard shortcut hint:",
+          code: '<HeaderSearch variant="default" />'
         },
         {
-          title: "Admin Header",
-          code: '<Header\n  showCollapseButton\n  sidebarCollapsed={!sidebarOpen}\n  onCollapseClick={() => (sidebarOpen = !sidebarOpen)}\n  title="Admin Panel"\n>\n  {#snippet end()}\n    <div class="flex items-center gap-4">\n      <Badge variant="outline">v2.1.0</Badge>\n      <Button variant="ghost" size="icon">\n        <SettingsIcon />\n      </Button>\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <Avatar>AD</Avatar>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item>Profile</DropdownMenu.Item>\n          <DropdownMenu.Item>Settings</DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item>Log out</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    </div>\n  {/snippet}\n</Header>'
+          title: "Icon",
+          description: "Compact icon-only button:",
+          code: '<HeaderSearch variant="icon" />'
+        },
+        {
+          title: "In Header",
+          code: '<Header>\n  <div slot="actions">\n    <HeaderSearch onSearch={handleSearch} onSelect={handleSelect} {results} />\n  </div>\n</Header>'
+        },
+        {
+          title: "Grouped Results",
+          code: "<script>\n  const groupedResults = [\n    {\n      title: 'Components',\n      items: [\n        { id: '1', title: 'Button', href: '/docs/button' },\n        { id: '2', title: 'Card', href: '/docs/card' },\n      ],\n    },\n    {\n      title: 'Guides',\n      items: [{ id: '3', title: 'Getting Started', href: '/guides/start' }],\n    },\n  ];\n</script>\n\n<HeaderSearch results={groupedResults} />"
+        },
+        {
+          title: "Custom Result Rendering",
+          code: '<HeaderSearch {results}>\n  {#snippet renderResult(item, isSelected)}\n    <div class="flex items-center gap-2">\n      <Icon name={item.icon} />\n      <span>{item.title}</span>\n      {#if item.badge}\n        <Badge>{item.badge}</Badge>\n      {/if}\n    </div>\n  {/snippet}\n</HeaderSearch>'
+        },
+        {
+          title: "Custom Empty State",
+          code: '<HeaderSearch {results}>\n  {#snippet renderEmpty()}\n    <div class="text-center py-8">\n      <Icon name="search" class="h-8 w-8 mx-auto mb-2 text-muted-foreground" />\n      <p>No results found</p>\n      <a href="/help" class="text-primary">Need help?</a>\n    </div>\n  {/snippet}\n</HeaderSearch>'
         }
       ],
       relatedComponents: [
-        "Sidebar",
-        "DashboardLayout",
-        "PublicLayout"
+        "Header",
+        "Dialog"
       ]
     },
     {
@@ -3181,8 +5616,77 @@ var component_catalog_default = {
       description: "Matrix data visualization with color intensity",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "HeatmapData",
+          required: true,
+          description: "Matrix data with coordinates and values"
+        },
+        {
+          name: "xAxis",
+          type: "string[]",
+          required: true,
+          description: "X-axis labels"
+        },
+        {
+          name: "yAxis",
+          type: "string[]",
+          required: true,
+          description: "Y-axis labels"
+        },
+        {
+          name: "showValues",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Display values in cells"
+        },
+        {
+          name: "onClick",
+          type: "(params: HeatmapEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -3635,8 +6139,138 @@ var component_catalog_default = {
       description: "Display trends over time with smooth curves and area fill options",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "LineChartData",
+          required: true,
+          description: "Chart data with categories and series"
+        },
+        {
+          name: "smooth",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Use smooth curved lines instead of straight segments"
+        },
+        {
+          name: "areaFilled",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Fill the area under the line"
+        },
+        {
+          name: "showDataPoints",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show data point markers on the line"
+        },
+        {
+          name: "stacked",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Stack multiple series on top of each other"
+        },
+        {
+          name: "onClick",
+          type: "(params: DataPointEventParams) => void",
+          required: false,
+          description: "Callback when a data point is clicked"
+        },
+        {
+          name: "onHover",
+          type: "(params: DataPointEventParams) => void",
+          required: false,
+          description: "Callback when hovering over a data point"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility (aria-label)"
+        },
+        {
+          name: "description",
+          type: "string",
+          required: false,
+          description: "Optional description for screen readers"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height in pixels or CSS value"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show loading skeleton"
+        },
+        {
+          name: "error",
+          type: "string | null",
+          required: false,
+          description: "Error message to display"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "animation",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Enable/disable animations"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        },
+        {
+          name: "showGrid",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show grid lines"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Custom CSS class"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -4007,29 +6641,137 @@ var component_catalog_default = {
           description: "Disables the select"
         },
         {
-          name: "required",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Marks as required"
+          name: "required",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Marks as required"
+        },
+        {
+          name: "maxItems",
+          type: "number",
+          required: false,
+          description: "Maximum selections allowed"
+        },
+        {
+          name: "error",
+          type: "string",
+          required: false,
+          description: "Error message"
+        },
+        {
+          name: "onValueChange",
+          type: "(value: string[]) => void",
+          required: false,
+          description: "Callback when value changes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  let selected = $state([]);
+  const options = [
+    { value: 'react', label: 'React' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'angular', label: 'Angular' },
+  ];
+</script>
+<MultiSelect {options} bind:value={selected} placeholder="Select frameworks..." />`
+        },
+        {
+          title: "Tag Selector",
+          code: `<script>
+  let tags = $state([]);
+  const tagOptions = [
+    { value: 'urgent', label: 'Urgent' },
+    { value: 'bug', label: 'Bug' },
+    { value: 'feature', label: 'Feature' },
+    { value: 'docs', label: 'Documentation' },
+  ];
+</script>
+<MultiSelect label="Tags" options={tagOptions} bind:value={tags} placeholder="Add tags..." />`
+        },
+        {
+          title: "Team Members",
+          code: '<MultiSelect\n  label="Assign to"\n  options={teamMembers}\n  bind:value={assignees}\n  maxItems={5}\n  placeholder="Select team members..."\n/>'
+        }
+      ],
+      relatedComponents: [
+        "Select",
+        "Combobox",
+        "Checkbox"
+      ]
+    },
+    {
+      name: "NoticeBanner",
+      description: "Banner component for displaying scheduled, dismissible announcements",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Maintenance Notice",
+          code: "<script>\n  const notices = [\n    {\n      id: 'maintenance',\n      title: 'Scheduled Maintenance',\n      message: 'The system will be unavailable on Sunday 2-4 AM EST.',\n      variant: 'warning',\n      location: 'banner',\n      dismissible: true,\n      startDate: '2025-01-15',\n      endDate: '2025-01-20',\n    },\n  ];\n\n  initializeNotices(notices);\n</script>\n\n<NoticeBanner />"
         },
         {
-          name: "maxItems",
-          type: "number",
-          required: false,
-          description: "Maximum selections allowed"
+          title: "With Link",
+          code: "<script>\n  const notices = [\n    {\n      id: 'new-feature',\n      message: 'Check out our new dashboard features!',\n      variant: 'info',\n      location: 'banner',\n      link: {\n        text: 'Learn more',\n        href: '/whats-new',\n      },\n    },\n  ];\n</script>\n\n<NoticeBanner />"
         },
         {
-          name: "error",
-          type: "string",
-          required: false,
-          description: "Error message"
+          title: "Page-Specific Notice",
+          code: "<script>\n  const notices = [\n    {\n      id: 'billing-update',\n      message: 'Your payment method will expire soon.',\n      variant: 'warning',\n      location: 'banner',\n      pages: ['/settings', '/billing'],\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/billing'); // Notice will show\n</script>\n\n<NoticeBanner />"
         },
         {
-          name: "onValueChange",
-          type: "(value: string[]) => void",
+          title: "In Layout",
+          code: "<!-- +layout.svelte -->\n<NoticeBanner />\n\n<main>\n  <slot />\n</main>"
+        }
+      ],
+      relatedComponents: [
+        "NoticeCard",
+        "Alert"
+      ]
+    },
+    {
+      name: "NoticeCard",
+      description: "Card-style component for displaying inline scheduled announcements",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
           required: false,
-          description: "Callback when value changes"
+          description: "Additional CSS classes"
         }
       ],
       variants: [],
@@ -4044,42 +6786,62 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
+          code: "<script>\n  import { NoticeCard, initializeNotices, setCurrentPath } from '@classic-homes/theme-svelte';\n\n  const notices = [\n    {\n      id: 'welcome',\n      title: 'Welcome!',\n      message: 'Thanks for signing up. Complete your profile to get started.',\n      variant: 'info',\n      location: 'card',\n      dismissible: true,\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/dashboard');\n</script>\n\n<NoticeCard />"
+        },
+        {
+          title: "Welcome Message",
+          code: "<script>\n  const notices = [\n    {\n      id: 'onboarding',\n      title: 'Complete Your Profile',\n      message: 'Add a photo and bio to help others recognize you.',\n      variant: 'info',\n      location: 'card',\n      link: {\n        text: 'Edit profile',\n        href: '/settings/profile',\n      },\n    },\n  ];\n</script>\n\n<NoticeCard />"
+        },
+        {
+          title: "Feature Announcement",
           code: `<script>
-  let selected = $state([]);
-  const options = [
-    { value: 'react', label: 'React' },
-    { value: 'svelte', label: 'Svelte' },
-    { value: 'vue', label: 'Vue' },
-    { value: 'angular', label: 'Angular' },
+  const notices = [
+    {
+      id: 'new-charts',
+      title: 'New Charts Available',
+      message: "We've added 5 new chart types to your dashboard.",
+      variant: 'success',
+      location: 'card',
+      startDate: '2025-01-01',
+      endDate: '2025-01-31',
+    },
   ];
 </script>
-<MultiSelect {options} bind:value={selected} placeholder="Select frameworks..." />`
+<NoticeCard />`
         },
         {
-          title: "Tag Selector",
+          title: "Warning Notice",
           code: `<script>
-  let tags = $state([]);
-  const tagOptions = [
-    { value: 'urgent', label: 'Urgent' },
-    { value: 'bug', label: 'Bug' },
-    { value: 'feature', label: 'Feature' },
-    { value: 'docs', label: 'Documentation' },
+  const notices = [
+    {
+      id: 'storage-limit',
+      message: "You're approaching your storage limit. Upgrade to continue uploading.",
+      variant: 'warning',
+      location: 'card',
+      pages: ['/dashboard', '/files'],
+      link: {
+        text: 'Upgrade plan',
+        href: '/billing/upgrade',
+      },
+    },
   ];
 </script>
-<MultiSelect label="Tags" options={tagOptions} bind:value={tags} placeholder="Add tags..." />`
+<NoticeCard />`
         },
         {
-          title: "Team Members",
-          code: '<MultiSelect\n  label="Assign to"\n  options={teamMembers}\n  bind:value={assignees}\n  maxItems={5}\n  placeholder="Select team members..."\n/>'
+          title: "In Page Content",
+          code: '<div class="space-y-4">\n  <NoticeCard />\n\n  <Card>\n    <CardHeader>\n      <CardTitle>Dashboard</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <!-- Main content -->\n    </CardContent>\n  </Card>\n</div>'
+        },
+        {
+          title: "Custom Styling",
+          code: '<NoticeCard class="mb-6" />'
         }
       ],
       relatedComponents: [
-        "Select",
-        "Combobox",
-        "Checkbox"
+        "NoticeBanner",
+        "Alert"
       ]
     },
     {
@@ -4423,8 +7185,94 @@ var component_catalog_default = {
       description: "Show proportional data with interactive labels",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "PieSliceData[]",
+          required: true,
+          description: "Array of slice data with name and value"
+        },
+        {
+          name: "showLabels",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Show labels on slices"
+        },
+        {
+          name: "labelPosition",
+          type: "'inside' | 'outside'",
+          default: "'outside'",
+          required: false,
+          description: "Position of slice labels"
+        },
+        {
+          name: "innerRadius",
+          type: "number | string",
+          default: "0",
+          required: false,
+          description: "Inner radius (0 for solid pie)"
+        },
+        {
+          name: "onClick",
+          type: "(params: SliceEventParams) => void",
+          required: false,
+          description: "Callback when a slice is clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "labelPosition",
+          values: [
+            "inside",
+            "outside"
+          ],
+          default: "outside"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -4604,19 +7452,210 @@ var component_catalog_default = {
 </PublicLayout>`
         }
       ],
-      relatedComponents: [
-        "Header",
-        "Footer",
-        "DashboardLayout"
-      ]
-    },
-    {
-      name: "RadarChart",
-      description: "Multi-dimensional comparison across categories",
-      category: "chart",
-      importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      relatedComponents: [
+        "Header",
+        "Footer",
+        "DashboardLayout"
+      ]
+    },
+    {
+      name: "QuickLinks",
+      description: "Quick navigation links component for sidebars",
+      category: "navigation",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "links",
+          type: "QuickLink[]",
+          required: false,
+          description: "Array of quick link items (required)"
+        },
+        {
+          name: "display",
+          type: "'list' | 'icons'",
+          default: "'list'",
+          required: false,
+          description: "Display mode"
+        },
+        {
+          name: "variant",
+          type: "'light' | 'dark'",
+          default: "'light'",
+          required: false,
+          description: "Visual variant"
+        },
+        {
+          name: "icon",
+          type: "Snippet<[QuickLink]>",
+          required: false,
+          description: "Custom icon renderer"
+        },
+        {
+          name: "ariaLabel",
+          type: "string",
+          default: "'Quick links'",
+          required: false,
+          description: "Accessible navigation label"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "display",
+          values: [
+            "list",
+            "icons"
+          ],
+          default: "list"
+        },
+        {
+          name: "variant",
+          values: [
+            "light",
+            "dark"
+          ],
+          default: "light"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  const links: QuickLink[] = [\n    { id: 'docs', label: 'Documentation', href: '/docs', icon: 'book' },\n    { id: 'support', label: 'Support', href: '/support', icon: 'help' },\n    { id: 'github', label: 'GitHub', href: 'https://github.com', icon: 'github', external: true },\n  ];\n</script>\n\n<QuickLinks {links} />"
+        },
+        {
+          title: "List Mode (Default)",
+          description: "Shows icons with labels stacked vertically:",
+          code: '<QuickLinks {links} display="list" />'
+        },
+        {
+          title: "Icons Mode",
+          description: "Shows only icons, centered:",
+          code: '<QuickLinks {links} display="icons" />'
+        },
+        {
+          title: "Light (Default)",
+          description: "For light backgrounds:",
+          code: '<QuickLinks {links} variant="light" />'
+        },
+        {
+          title: "Dark",
+          description: "For dark sidebars:",
+          code: '<QuickLinks {links} variant="dark" />'
+        },
+        {
+          title: "With Badges",
+          code: "<script>\n  const links = [\n    { id: 'inbox', label: 'Inbox', href: '/inbox', icon: 'mail', badge: 5 },\n    { id: 'tasks', label: 'Tasks', href: '/tasks', icon: 'check', badge: '3 new' },\n  ];\n</script>\n\n<QuickLinks {links} />"
+        },
+        {
+          title: "External Links",
+          code: "<script>\n  const links = [{ id: 'docs', label: 'Docs', href: 'https://docs.example.com', external: true }];\n</script>\n\n<QuickLinks {links} />"
+        },
+        {
+          title: "Custom Icons",
+          code: '<QuickLinks {links}>\n  {#snippet icon(link)}\n    <Icon name={link.icon} class="h-5 w-5" />\n  {/snippet}\n</QuickLinks>'
+        },
+        {
+          title: "In Sidebar",
+          code: '<Sidebar>\n  <!-- Main navigation -->\n  <div slot="footer">\n    <QuickLinks {links} display="icons" variant="dark" />\n  </div>\n</Sidebar>'
+        }
+      ],
+      relatedComponents: [
+        "Sidebar",
+        "DashboardLayout"
+      ]
+    },
+    {
+      name: "RadarChart",
+      description: "Multi-dimensional comparison across categories",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [
+        {
+          name: "data",
+          type: "RadarChartData",
+          required: true,
+          description: "Chart data with series values"
+        },
+        {
+          name: "indicators",
+          type: "RadarIndicator[]",
+          required: true,
+          description: "Dimension definitions"
+        },
+        {
+          name: "shape",
+          type: "'polygon' | 'circle'",
+          default: "'polygon'",
+          required: false,
+          description: "Shape of the radar grid"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "shape",
+          values: [
+            "polygon",
+            "circle"
+          ],
+          default: "polygon"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -4858,8 +7897,73 @@ var component_catalog_default = {
       description: "Flow relationships between entities",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "SankeyData",
+          required: true,
+          description: "Nodes and links defining the flow"
+        },
+        {
+          name: "orient",
+          type: "'horizontal' | 'vertical'",
+          default: "'horizontal'",
+          required: false,
+          description: "Flow direction"
+        },
+        {
+          name: "onClick",
+          type: "(params: SankeyEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "orient",
+          values: [
+            "horizontal",
+            "vertical"
+          ],
+          default: "horizontal"
+        },
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -4942,8 +8046,79 @@ var component_catalog_default = {
       description: "Visualize X/Y relationships with optional trend lines",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "ScatterChartData",
+          required: true,
+          description: "Chart data with coordinate pairs"
+        },
+        {
+          name: "showTrendLine",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Display regression/trend line"
+        },
+        {
+          name: "symbolSize",
+          type: "number | ((value: number[]) => number)",
+          default: "10",
+          required: false,
+          description: "Point size (fixed or dynamic)"
+        },
+        {
+          name: "onClick",
+          type: "(params: DataPointEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showLegend",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show chart legend"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -6132,6 +9307,74 @@ var component_catalog_default = {
         "Label"
       ]
     },
+    {
+      name: "TabPanel",
+      description: "Content panel component for Tabs navigation",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "value",
+          type: "string",
+          required: false,
+          description: "Tab ID this panel belongs to (required)"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  const tabs = [
+    { id: 'account', label: 'Account' },
+    { id: 'password', label: 'Password' },
+    { id: 'notifications', label: 'Notifications' },
+  ];
+</script>
+<Tabs {tabs} defaultValue="account">
+  <TabPanel value="account">
+    <p>Account settings content here.</p>
+  </TabPanel>
+  <TabPanel value="password">
+    <p>Password settings content here.</p>
+  </TabPanel>
+  <TabPanel value="notifications">
+    <p>Notification settings content here.</p>
+  </TabPanel>
+</Tabs>`
+        },
+        {
+          title: "With Forms",
+          code: '<TabPanel value="profile">\n  <form class="space-y-4">\n    <FormField label="Name" name="name" />\n    <FormField label="Email" name="email" type="email" />\n    <Button type="submit">Save Changes</Button>\n  </form>\n</TabPanel>'
+        },
+        {
+          title: "With Cards",
+          code: '<TabPanel value="billing">\n  <div class="grid gap-4 md:grid-cols-2">\n    <Card>\n      <CardHeader>\n        <CardTitle>Current Plan</CardTitle>\n      </CardHeader>\n      <CardContent>Pro - $29/month</CardContent>\n    </Card>\n    <Card>\n      <CardHeader>\n        <CardTitle>Payment Method</CardTitle>\n      </CardHeader>\n      <CardContent>Visa ending in 4242</CardContent>\n    </Card>\n  </div>\n</TabPanel>'
+        },
+        {
+          title: "Custom Styling",
+          code: '<TabPanel value="settings" class="p-6 bg-muted rounded-lg">\n  <h3 class="font-semibold mb-4">Advanced Settings</h3>\n  <!-- Content -->\n</TabPanel>'
+        }
+      ],
+      relatedComponents: [
+        "Tabs"
+      ]
+    },
     {
       name: "Tabs",
       description: "Tabbed interface for organizing content",
@@ -6528,6 +9771,75 @@ var component_catalog_default = {
         "Dialog"
       ]
     },
+    {
+      name: "ToastContainer",
+      description: "Container component for displaying toast notifications",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "position",
+          type: "'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'",
+          default: "'bottom-right'",
+          required: false,
+          description: "Position on screen"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "position",
+          values: [
+            "top-left",
+            "top-right",
+            "top-center",
+            "bottom-left",
+            "bottom-right",
+            "bottom-center"
+          ],
+          default: "bottom-right"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Bottom Right (Default)",
+          code: '<ToastContainer position="bottom-right" />'
+        },
+        {
+          title: "Top Right",
+          code: '<ToastContainer position="top-right" />'
+        },
+        {
+          title: "Top Center",
+          code: '<ToastContainer position="top-center" />'
+        },
+        {
+          title: "Bottom Center",
+          code: '<ToastContainer position="bottom-center" />'
+        },
+        {
+          title: "Custom Position",
+          code: '<ToastContainer position="top-center" class="mt-16" />'
+        }
+      ],
+      relatedComponents: [
+        "Toast",
+        "AppShell"
+      ]
+    },
     {
       name: "Tooltip",
       description: "Contextual information displayed on hover",
@@ -6645,8 +9957,64 @@ var component_catalog_default = {
       description: "Hierarchical data as nested rectangles",
       category: "chart",
       importPath: "@classic-homes/charts-svelte",
-      props: [],
-      variants: [],
+      props: [
+        {
+          name: "data",
+          type: "TreemapNode[]",
+          required: true,
+          description: "Hierarchical tree data"
+        },
+        {
+          name: "levels",
+          type: "TreemapLevel[]",
+          required: false,
+          description: "Visual configuration for each level"
+        },
+        {
+          name: "onClick",
+          type: "(params: TreemapEventParams) => void",
+          required: false,
+          description: "Callback when clicked"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: true,
+          description: "Chart title for accessibility"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "400",
+          required: false,
+          description: "Chart height"
+        },
+        {
+          name: "theme",
+          type: "'light' | 'dark' | 'auto'",
+          default: "'auto'",
+          required: false,
+          description: "Theme preference"
+        },
+        {
+          name: "showTooltip",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Show tooltip on hover"
+        }
+      ],
+      variants: [
+        {
+          name: "theme",
+          values: [
+            "light",
+            "dark",
+            "auto"
+          ],
+          default: "auto"
+        }
+      ],
       slots: [],
       events: [],
       examples: [
@@ -7788,18 +11156,44 @@ function registerSearchComponentsTool(server) {
     SearchComponentsSchema.shape,
     async (params) => {
       const { query, category, limit } = SearchComponentsSchema.parse(params);
-      const queryLower = query.toLowerCase();
+      const queryLower = query.toLowerCase().trim();
+      const isListAll = queryLower === "*" || queryLower === "all" || queryLower === "" || queryLower === "list" || queryLower === "list all";
+      const queryWords = queryLower.split(/\s+/).filter((word) => word.length > 0);
       const results = catalog2.components.filter((component) => {
         if (category && component.category !== category) {
           return false;
         }
+        if (isListAll) {
+          return true;
+        }
         const searchableText = [
           component.name,
           component.description,
           ...component.props.map((p) => p.name),
-          ...component.relatedComponents
+          ...component.props.map((p) => p.description),
+          ...component.relatedComponents,
+          component.category
         ].join(" ").toLowerCase();
+        if (queryWords.length > 1) {
+          return queryWords.some((word) => searchableText.includes(word));
+        }
         return searchableText.includes(queryLower);
+      }).sort((a, b) => {
+        const aNameLower = a.name.toLowerCase();
+        const bNameLower = b.name.toLowerCase();
+        const aExactMatch = queryWords.some((word) => aNameLower === word);
+        const bExactMatch = queryWords.some((word) => bNameLower === word);
+        if (aExactMatch && !bExactMatch) return -1;
+        if (bExactMatch && !aExactMatch) return 1;
+        const aStartsWith = queryWords.some((word) => aNameLower.startsWith(word));
+        const bStartsWith = queryWords.some((word) => bNameLower.startsWith(word));
+        if (aStartsWith && !bStartsWith) return -1;
+        if (bStartsWith && !aStartsWith) return 1;
+        const aContains = queryWords.some((word) => aNameLower.includes(word));
+        const bContains = queryWords.some((word) => bNameLower.includes(word));
+        if (aContains && !bContains) return -1;
+        if (bContains && !aContains) return 1;
+        return aNameLower.localeCompare(bNameLower);
       }).slice(0, limit).map((c) => ({
         name: c.name,
         category: c.category,