@classic-homes/theme-mcp 0.1.1 → 0.1.3

package/dist/index.js

@@ -7,7 +7,6 @@ import { ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
 // src/data/component-catalog.json
 var component_catalog_default = {
   version: "0.1.0",
-  generated: "2026-01-14T23:23:18.723Z",
   components: [
     {
       name: "Alert",
@@ -307,6 +306,54 @@ var component_catalog_default = {
         "Toast"
       ]
     },
+    {
+      name: "AreaChart",
+      description: "Line chart with gradient fill and stacking support",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { AreaChart } from '@classic-homes/charts-svelte';
+
+  const data = {
+    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    series: [
+      { name: 'Email', data: [120, 132, 101, 134, 90, 230, 210] },
+      { name: 'Ads', data: [220, 182, 191, 234, 290, 330, 310] },
+      { name: 'Video', data: [150, 232, 201, 154, 190, 330, 410] },
+    ],
+  };
+</script>
+
+<AreaChart title="Weekly Traffic" {data} stacked smooth gradient height={400} />`
+        },
+        {
+          title: "Stacked Area with Gradient",
+          code: '<AreaChart title="Traffic Sources" {data} stacked smooth gradient height={400} />'
+        },
+        {
+          title: "Simple Area Chart",
+          code: `<AreaChart
+  title="Single Series"
+  data={{
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    series: [{ name: 'Revenue', data: [100, 150, 120, 180, 200] }],
+  }}
+  smooth
+/>`
+        }
+      ],
+      relatedComponents: [
+        "LineChart",
+        "BarChart"
+      ]
+    },
     {
       name: "AuthLayout",
       description: "Centered card layout for authentication pages",
@@ -718,6 +765,50 @@ var component_catalog_default = {
         "Button"
       ]
     },
+    {
+      name: "BarChart",
+      description: "Compare categories with vertical or horizontal bars",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      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",
@@ -888,6 +979,61 @@ var component_catalog_default = {
         "Dialog"
       ]
     },
+    {
+      name: "CandlestickChart",
+      description: "Financial OHLC data with volume bars",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { CandlestickChart } from '@classic-homes/charts-svelte';
+
+  const data = {
+    dates: ['2024-01', '2024-02', '2024-03', '2024-04'],
+    data: [
+      { open: 20, close: 34, low: 10, high: 38 },
+      { open: 40, close: 35, low: 30, high: 50 },
+      { open: 31, close: 38, low: 28, high: 48 },
+      { open: 38, close: 30, low: 25, high: 44 },
+    ],
+    volume: [100, 120, 90, 140],
+  };
+</script>
+
+<CandlestickChart title="Stock Price" {data} showVolume height={400} />`
+        },
+        {
+          title: "With Volume",
+          code: '<CandlestickChart title="AAPL Stock" {data} showVolume height={500} />'
+        },
+        {
+          title: "Without Volume",
+          code: `<CandlestickChart
+  title="Price History"
+  data={{
+    dates: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    data: [
+      { open: 100, close: 110, low: 95, high: 115 },
+      { open: 110, close: 105, low: 100, high: 120 },
+      { open: 105, close: 115, low: 102, high: 118 },
+      { open: 115, close: 108, low: 105, high: 120 },
+      { open: 108, close: 125, low: 105, high: 128 },
+    ],
+  }}
+/>`
+        }
+      ],
+      relatedComponents: [
+        "LineChart",
+        "BarChart"
+      ]
+    },
     {
       name: "Card",
       description: "Container component for grouping related content",
@@ -1745,6 +1891,48 @@ var component_catalog_default = {
         "DropdownMenu"
       ]
     },
+    {
+      name: "DonutChart",
+      description: "Pie chart variant with center labels for key metrics",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { DonutChart } from '@classic-homes/charts-svelte';
+
+  const data = [
+    { name: 'Completed', value: 65 },
+    { name: 'In Progress', value: 25 },
+    { name: 'Pending', value: 10 },
+  ];
+</script>
+
+<DonutChart title="Task Status" {data} centerLabel="Total" centerValue="100" height={400} />`
+        },
+        {
+          title: "Dashboard KPI",
+          code: '<DonutChart title="Budget Usage" {data} centerLabel="Spent" centerValue="$45,000" height={300} />'
+        },
+        {
+          title: "With Labels",
+          code: '<DonutChart title="Category Distribution" {data} showLabels centerLabel="Items" centerValue="156" />'
+        },
+        {
+          title: "Custom Inner Radius",
+          code: '<DonutChart title="Thin Donut" {data} innerRadius="70%" />'
+        }
+      ],
+      relatedComponents: [
+        "PieChart",
+        "GaugeChart"
+      ]
+    },
     {
       name: "DropdownMenu",
       description: "Contextual menu with items, groups, and keyboard navigation",
@@ -2721,6 +2909,96 @@ var component_catalog_default = {
         "PageHeader"
       ]
     },
+    {
+      name: "FunnelChart",
+      description: "Visualize conversion rates and process flows",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { FunnelChart } from '@classic-homes/charts-svelte';
+
+  const data = [
+    { name: 'Visited', value: 100 },
+    { name: 'Inquired', value: 80 },
+    { name: 'Ordered', value: 60 },
+    { name: 'Paid', value: 40 },
+    { name: 'Completed', value: 20 },
+  ];
+</script>
+
+<FunnelChart title="Conversion Funnel" {data} sort="descending" showLabels height={400} />`
+        },
+        {
+          title: "Sales Pipeline",
+          code: `<FunnelChart
+  title="Sales Pipeline"
+  data={[
+    { name: 'Leads', value: 500 },
+    { name: 'Qualified', value: 350 },
+    { name: 'Proposal', value: 200 },
+    { name: 'Negotiation', value: 100 },
+    { name: 'Closed', value: 50 },
+  ]}
+  sort="descending"
+/>`
+        },
+        {
+          title: "Ascending Funnel",
+          code: '<FunnelChart title="Growth Funnel" {data} sort="ascending" />'
+        }
+      ],
+      relatedComponents: [
+        "BarChart",
+        "SankeyChart"
+      ]
+    },
+    {
+      name: "GaugeChart",
+      description: "Display single value metrics with progress indicator",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { GaugeChart } from '@classic-homes/charts-svelte';
+</script>
+
+<GaugeChart title="Performance Score" value={72} min={0} max={100} showProgress height={400} />`
+        },
+        {
+          title: "Performance Score",
+          code: '<GaugeChart title="Performance Score" value={85} min={0} max={100} showProgress />'
+        },
+        {
+          title: "With Custom Formatter",
+          code: '<GaugeChart title="Completion Rate" value={72} formatValue={(v) => `${v}%`} showProgress />'
+        },
+        {
+          title: "Temperature Gauge",
+          code: '<GaugeChart\n  title="CPU Temperature"\n  value={65}\n  min={0}\n  max={100}\n  formatValue={(v) => `${v}\xB0C`}\n  showProgress\n/>'
+        },
+        {
+          title: "Revenue KPI",
+          code: '<GaugeChart\n  title="Monthly Target"\n  value={85000}\n  min={0}\n  max={100000}\n  formatValue={(v) => `$${(v / 1000).toFixed(0)}K`}\n  showProgress\n/>'
+        }
+      ],
+      relatedComponents: [
+        "DonutChart",
+        "RadarChart"
+      ]
+    },
     {
       name: "Header",
       description: "Flexible application header with navigation support",
@@ -2893,6 +3171,68 @@ var component_catalog_default = {
         "PublicLayout"
       ]
     },
+    {
+      name: "HeatmapChart",
+      description: "Matrix data visualization with color intensity",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { HeatmapChart } from '@classic-homes/charts-svelte';
+
+  const xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  const yAxis = ['12a', '6a', '12p', '6p'];
+
+  const data = {
+    data: [
+      [0, 0, 5],
+      [0, 1, 1],
+      [0, 2, 0],
+      [0, 3, 2],
+      [1, 0, 1],
+      [1, 1, 0],
+      [1, 2, 3],
+      [1, 3, 4],
+      // ... more data points
+    ],
+    min: 0,
+    max: 5,
+  };
+</script>
+
+<HeatmapChart title="Activity Heatmap" {data} {xAxis} {yAxis} showValues height={400} />`
+        },
+        {
+          title: "GitHub-style Activity",
+          code: `<HeatmapChart
+  title="Commit Activity"
+  {data}
+  xAxis={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
+  yAxis={['12a', '4a', '8a', '12p', '4p', '8p']}
+/>`
+        },
+        {
+          title: "Correlation Matrix",
+          code: `<HeatmapChart
+  title="Feature Correlation"
+  {data}
+  xAxis={['Price', 'Size', 'Age', 'Rooms']}
+  yAxis={['Price', 'Size', 'Age', 'Rooms']}
+  showValues
+/>`
+        }
+      ],
+      relatedComponents: [
+        "ScatterChart",
+        "TreemapChart"
+      ]
+    },
     {
       name: "Icon",
       description: "A unified icon component with 50+ commonly used icons",
@@ -3285,6 +3625,64 @@ var component_catalog_default = {
         "FormField"
       ]
     },
+    {
+      name: "LineChart",
+      description: "Display trends over time with smooth curves and area fill options",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { LineChart } from '@classic-homes/charts-svelte';
+
+  const data = {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    series: [
+      { name: '2024', data: [120, 132, 101, 134, 90, 230] },
+      { name: '2025', data: [220, 182, 191, 234, 290, 330] },
+    ],
+  };
+</script>
+
+<LineChart title="Monthly Revenue" {data} smooth height={400} />`
+        },
+        {
+          title: "Smooth Line Chart",
+          code: '<LineChart title="Monthly Sales" {data} smooth height={400} />'
+        },
+        {
+          title: "With Data Points",
+          code: '<LineChart title="Monthly Sales" {data} smooth showDataPoints height={400} />'
+        },
+        {
+          title: "Stacked Lines",
+          code: '<LineChart title="Stacked Revenue" {data} stacked smooth height={400} />'
+        },
+        {
+          title: "With Area Fill",
+          code: '<LineChart title="Revenue Trend" {data} areaFilled smooth height={400} />'
+        },
+        {
+          title: "Handling Click Events",
+          code: `<script>
+  function handleClick(params) {
+    console.log('Clicked:', params.seriesName, params.name, params.value);
+  }
+</script>
+
+<LineChart title="Interactive Chart" {data} onClick={handleClick} />`
+        }
+      ],
+      relatedComponents: [
+        "AreaChart",
+        "BarChart"
+      ]
+    },
     {
       name: "LoadingLogo",
       description: "Animated brand logo for loading states",
@@ -4015,6 +4413,55 @@ var component_catalog_default = {
         "Separator"
       ]
     },
+    {
+      name: "PieChart",
+      description: "Show proportional data with interactive labels",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { PieChart } from '@classic-homes/charts-svelte';
+
+  const data = [
+    { name: 'Search Engine', value: 1048 },
+    { name: 'Direct', value: 735 },
+    { name: 'Email', value: 580 },
+    { name: 'Social Media', value: 484 },
+  ];
+</script>
+
+<PieChart title="Traffic Sources" {data} showLabels height={400} />`
+        },
+        {
+          title: "With Outside Labels",
+          code: '<PieChart title="Market Share" {data} showLabels labelPosition="outside" height={400} />'
+        },
+        {
+          title: "With Inside Labels",
+          code: '<PieChart title="Market Share" {data} showLabels labelPosition="inside" height={400} />'
+        },
+        {
+          title: "Handling Click Events",
+          code: `<script>
+  function handleClick(params) {
+    console.log('Clicked slice:', params.name, params.value);
+  }
+</script>
+
+<PieChart title="Interactive Pie" {data} onClick={handleClick} />`
+        }
+      ],
+      relatedComponents: [
+        "DonutChart",
+        "FunnelChart"
+      ]
+    },
     {
       name: "PublicLayout",
       description: "Layout for public-facing marketing and content pages",
@@ -4158,6 +4605,65 @@ var component_catalog_default = {
         "DashboardLayout"
       ]
     },
+    {
+      name: "RadarChart",
+      description: "Multi-dimensional comparison across categories",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { RadarChart } from '@classic-homes/charts-svelte';
+
+  const indicators = [
+    { name: 'Sales', max: 6500 },
+    { name: 'Administration', max: 16000 },
+    { name: 'IT', max: 30000 },
+    { name: 'Support', max: 38000 },
+    { name: 'Development', max: 52000 },
+  ];
+
+  const data = {
+    series: [
+      { name: 'Budget', data: [4200, 3000, 20000, 35000, 50000] },
+      { name: 'Actual', data: [5000, 14000, 28000, 26000, 42000] },
+    ],
+  };
+</script>
+
+<RadarChart title="Budget vs Actual" {data} {indicators} shape="polygon" height={400} />`
+        },
+        {
+          title: "Circle Shape",
+          code: '<RadarChart title="Skill Assessment" {data} {indicators} shape="circle" />'
+        },
+        {
+          title: "Single Series",
+          code: `<RadarChart
+  title="Performance Metrics"
+  data={{
+    series: [{ name: 'Score', data: [80, 90, 70, 85, 95] }],
+  }}
+  indicators={[
+    { name: 'Speed', max: 100 },
+    { name: 'Quality', max: 100 },
+    { name: 'Teamwork', max: 100 },
+    { name: 'Innovation', max: 100 },
+    { name: 'Communication', max: 100 },
+  ]}
+/>`
+        }
+      ],
+      relatedComponents: [
+        "BarChart",
+        "GaugeChart"
+      ]
+    },
     {
       name: "RadioGroup",
       description: "Radio button group for single selection from multiple options",
@@ -4342,6 +4848,149 @@ var component_catalog_default = {
         "Switch"
       ]
     },
+    {
+      name: "SankeyChart",
+      description: "Flow relationships between entities",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { SankeyChart } from '@classic-homes/charts-svelte';
+
+  const data = {
+    nodes: [{ name: 'Source A' }, { name: 'Source B' }, { name: 'Process' }, { name: 'Output' }],
+    links: [
+      { source: 'Source A', target: 'Process', value: 50 },
+      { source: 'Source B', target: 'Process', value: 30 },
+      { source: 'Process', target: 'Output', value: 80 },
+    ],
+  };
+</script>
+
+<SankeyChart title="Energy Flow" {data} orient="horizontal" height={400} />`
+        },
+        {
+          title: "Website User Flow",
+          code: `<SankeyChart
+  title="User Journey"
+  data={{
+    nodes: [
+      { name: 'Homepage' },
+      { name: 'Products' },
+      { name: 'Cart' },
+      { name: 'Checkout' },
+      { name: 'Purchase' },
+      { name: 'Exit' },
+    ],
+    links: [
+      { source: 'Homepage', target: 'Products', value: 1000 },
+      { source: 'Homepage', target: 'Exit', value: 300 },
+      { source: 'Products', target: 'Cart', value: 500 },
+      { source: 'Products', target: 'Exit', value: 200 },
+      { source: 'Cart', target: 'Checkout', value: 400 },
+      { source: 'Cart', target: 'Exit', value: 100 },
+      { source: 'Checkout', target: 'Purchase', value: 350 },
+      { source: 'Checkout', target: 'Exit', value: 50 },
+    ],
+  }}
+/>`
+        },
+        {
+          title: "Budget Allocation",
+          code: `<SankeyChart
+  title="Budget Distribution"
+  data={{
+    nodes: [
+      { name: 'Revenue' },
+      { name: 'Operations' },
+      { name: 'Marketing' },
+      { name: 'R&D' },
+      { name: 'Profit' },
+    ],
+    links: [
+      { source: 'Revenue', target: 'Operations', value: 40 },
+      { source: 'Revenue', target: 'Marketing', value: 25 },
+      { source: 'Revenue', target: 'R&D', value: 20 },
+      { source: 'Revenue', target: 'Profit', value: 15 },
+    ],
+  }}
+/>`
+        },
+        {
+          title: "Vertical Orientation",
+          code: '<SankeyChart title="Process Flow" {data} orient="vertical" />'
+        }
+      ],
+      relatedComponents: [
+        "FunnelChart",
+        "TreemapChart"
+      ]
+    },
+    {
+      name: "ScatterChart",
+      description: "Visualize X/Y relationships with optional trend lines",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { ScatterChart } from '@classic-homes/charts-svelte';
+
+  const data = {
+    series: [
+      {
+        name: 'Dataset A',
+        data: [
+          [10.0, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+          [9.05, 8.81],
+          [11.0, 8.33],
+          [14.0, 7.66],
+        ],
+      },
+      {
+        name: 'Dataset B',
+        data: [
+          [8.0, 9.04],
+          [6.07, 7.95],
+          [11.0, 8.58],
+          [7.05, 9.81],
+          [9.0, 9.33],
+          [12.0, 8.66],
+        ],
+      },
+    ],
+  };
+</script>
+
+<ScatterChart title="Data Correlation" {data} showTrendLine height={400} />`
+        },
+        {
+          title: "With Trend Line",
+          code: '<ScatterChart title="Correlation Analysis" {data} showTrendLine height={400} />'
+        },
+        {
+          title: "Dynamic Point Size",
+          code: '<ScatterChart title="Sized Points" {data} symbolSize={(value) => Math.sqrt(value[1]) * 3} />'
+        }
+      ],
+      relatedComponents: [
+        "LineChart",
+        "HeatmapChart"
+      ]
+    },
     {
       name: "Section",
       description: "Content section container for page organization",
@@ -5985,6 +6634,94 @@ var component_catalog_default = {
         "Dialog",
         "DropdownMenu"
       ]
+    },
+    {
+      name: "TreemapChart",
+      description: "Hierarchical data as nested rectangles",
+      category: "chart",
+      importPath: "@classic-homes/charts-svelte",
+      props: [],
+      variants: [],
+      slots: [],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  import { TreemapChart } from '@classic-homes/charts-svelte';
+
+  const data = [
+    {
+      name: 'Frontend',
+      children: [
+        { name: 'React', value: 40 },
+        { name: 'Vue', value: 30 },
+        { name: 'Svelte', value: 20 },
+      ],
+    },
+    {
+      name: 'Backend',
+      children: [
+        { name: 'Node.js', value: 35 },
+        { name: 'Python', value: 25 },
+      ],
+    },
+  ];
+</script>
+
+<TreemapChart title="Tech Stack" {data} height={400} />`
+        },
+        {
+          title: "File System",
+          code: `<TreemapChart
+  title="Disk Usage"
+  data={[
+    {
+      name: 'Documents',
+      children: [
+        { name: 'PDFs', value: 500 },
+        { name: 'Images', value: 300 },
+        { name: 'Videos', value: 2000 },
+      ],
+    },
+    {
+      name: 'Applications',
+      children: [
+        { name: 'Development', value: 1500 },
+        { name: 'Productivity', value: 800 },
+      ],
+    },
+  ]}
+/>`
+        },
+        {
+          title: "Budget Breakdown",
+          code: `<TreemapChart
+  title="Department Budget"
+  data={[
+    {
+      name: 'Engineering',
+      children: [
+        { name: 'Salaries', value: 500000 },
+        { name: 'Equipment', value: 100000 },
+        { name: 'Training', value: 50000 },
+      ],
+    },
+    {
+      name: 'Marketing',
+      children: [
+        { name: 'Advertising', value: 200000 },
+        { name: 'Events', value: 75000 },
+      ],
+    },
+  ]}
+/>`
+        }
+      ],
+      relatedComponents: [
+        "PieChart",
+        "SankeyChart"
+      ]
     }
   ]
 };
@@ -7026,7 +7763,17 @@ import { z } from "zod";
 var catalog2 = component_catalog_default;
 var SearchComponentsSchema = z.object({
   query: z.string().describe("Search query (component name, description, or functionality)"),
-  category: z.enum(["core", "form", "layout", "feedback", "data", "overlay", "navigation", "branding"]).optional().describe("Filter by component category"),
+  category: z.enum([
+    "core",
+    "form",
+    "layout",
+    "feedback",
+    "data",
+    "overlay",
+    "navigation",
+    "branding",
+    "chart"
+  ]).optional().describe("Filter by component category"),
   limit: z.number().min(1).max(50).default(10).describe("Maximum number of results")
 });
 function registerSearchComponentsTool(server) {