canvas-ui-sdk 0.3.24 → 4.0.1

package/README.md

@@ -1,6 +1,6 @@
 # Canvas UI SDK
 
-A themeable React component library with a shadcn-style CLI for copying components into consumer projects, a visual theme editor, and an MCP server for Claude Code.
+A themeable React component library with a shadcn-style CLI for copying components into consumer projects, a visual theme editor, and an MCP server for AI editors.
 
 ## Installation
 
@@ -62,14 +62,34 @@ Override design tokens in your `globals.css`:
 
 See `styles/tokens.reference.css` for the full list of available CSS variables.
 
-## MCP Server (Claude Code)
+## MCP Server
 
-Connect the MCP server so Claude Code can discover all components, templates, and design tokens:
+Connect the MCP server so your AI editor can discover all components, templates, and design tokens. Add a `.mcp.json` to your project root:
 
-```bash
-claude mcp add canvas-ui-sdk node node_modules/canvas-ui-sdk/mcp/dist/index.js
+```json
+{
+  "mcpServers": {
+    "canvas-ui-sdk": {
+      "command": "node",
+      "args": ["node_modules/canvas-ui-sdk/mcp/dist/index.js"]
+    }
+  }
+}
 ```
 
+Or with the Claude Code CLI: `claude mcp add canvas-ui-sdk node node_modules/canvas-ui-sdk/mcp/dist/index.js`
+
+## AI Instructions
+
+Copy the SDK instructions file into your project so your AI editor knows how to use the CLI, design tokens, and component patterns:
+
+| Editor | Command |
+|--------|---------|
+| Claude Code | `cp node_modules/canvas-ui-sdk/prompts/CLAUDE.md ./CLAUDE.md` |
+| Cursor | `cp node_modules/canvas-ui-sdk/prompts/.cursorrules ./.cursorrules` |
+| Windsurf | `cp node_modules/canvas-ui-sdk/prompts/.windsurfrules ./.windsurfrules` |
+| GitHub Copilot | `mkdir -p .github && cp node_modules/canvas-ui-sdk/prompts/copilot-instructions.md ./.github/copilot-instructions.md` |
+
 ## Live Theme Editor
 
 The `<ThemeDrawer>` component provides a visual editor for customizing colors, typography, button sizes, input styles, and branding in real-time. When you're happy with your theme, bake it into source code with `prompts/bake-theme.md`.

package/dist/charts.js

@@ -186,7 +186,7 @@ function WidgetFooter({
   );
 }
 function MetricCard({ label, value, change, className }) {
-  return /* @__PURE__ */ jsx(WidgetCard, { className: cn("flex-1 min-w-[200px]", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(WidgetCard, { className: cn("", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex flex-col justify-center",
@@ -242,11 +242,16 @@ function MetricCard({ label, value, change, className }) {
     }
   ) });
 }
+var metricGridClasses = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
 function MetricCardsRow({ metrics, columns = 4, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex flex-wrap w-full", className),
+      className: cn("grid w-full", metricGridClasses[columns], className),
       style: { gap: "var(--spacing-4xl, 32px)" },
       children: metrics.slice(0, columns).map((metric) => /* @__PURE__ */ jsx(
         MetricCard,
@@ -381,7 +386,7 @@ function LineChartWidget({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { height: 300, width: "100%" }, children: /* @__PURE__ */ jsx(Line, { data, options }) })
+          /* @__PURE__ */ jsx("div", { className: "h-[200px] sm:h-[300px] w-full", children: /* @__PURE__ */ jsx(Line, { data, options }) })
         ]
       }
     ),
@@ -503,14 +508,14 @@ function DonutChartWidget({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-start w-full",
+              className: "flex flex-col sm:flex-row items-start w-full",
               style: {
                 gap: "var(--spacing-4xl, 32px)",
                 padding: "var(--spacing-3xl, 24px) 0",
                 borderTop: "1px solid var(--canvas-border)"
               },
               children: [
-                /* @__PURE__ */ jsx("div", { style: { width: 280, height: 280, flexShrink: 0 }, children: /* @__PURE__ */ jsx(Doughnut, { data, options }) }),
+                /* @__PURE__ */ jsx("div", { className: "w-full sm:w-[280px]", style: { height: 280, flexShrink: 0 }, children: /* @__PURE__ */ jsx(Doughnut, { data, options }) }),
                 /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -873,7 +878,7 @@ function TwoColumnWidgets({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex w-full items-start", className),
+      className: cn("flex flex-col sm:flex-row w-full items-start", className),
       style: { gap: "var(--spacing-4xl, 32px)" },
       children
     }

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/blocks/graph-metric-tiles.tsx"],"names":["ChartJS"],"mappings":"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","file":"charts.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  ArrowUpRight,\n  ArrowDownRight,\n  DotsThreeVertical,\n  Gear,\n} from \"@phosphor-icons/react\";\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  Tooltip,\n  Legend,\n  Filler,\n  ArcElement,\n} from \"chart.js\";\nimport { Line, Doughnut } from \"react-chartjs-2\";\n\n// Register Chart.js components\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  Tooltip,\n  Legend,\n  Filler,\n  ArcElement\n);\n\n// ============================================\n// Custom Hook: useCSSVariableColors\n// ============================================\n\ninterface CSSVariableColors {\n  primary: string;\n  background: string;\n  text: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n  success: string;\n  chartColor1: string;\n  chartColor2: string;\n  chartColor3: string;\n  chartColor4: string;\n  chartColor5: string;\n  chartLineColor: string;\n  chartAreaColor: string;\n}\n\nfunction useCSSVariableColors(): CSSVariableColors {\n  const [colors, setColors] = useState<CSSVariableColors>({\n    primary: \"#1165ef\",\n    background: \"#ffffff\",\n    text: \"#0d121c\",\n    textMuted: \"#4b5565\",\n    textPlaceholder: \"#6c7684\",\n    border: \"#e9eef3\",\n    success: \"#08875d\",\n    chartColor1: \"#e45451\",\n    chartColor2: \"#69bdbc\",\n    chartColor3: \"#f8f578\",\n    chartColor4: \"#f2b66b\",\n    chartColor5: \"#6c7684\",\n    chartLineColor: \"#1165ef\",\n    chartAreaColor: \"rgba(17, 101, 239, 0.1)\",\n  });\n\n  const readColors = useCallback(() => {\n    if (typeof window === \"undefined\") return;\n    // Read from document.body since theme overrides are applied there\n    const style = getComputedStyle(document.body);\n    const primary = style.getPropertyValue(\"--canvas-primary\").trim() || \"#1165ef\";\n\n    // Derive chart area color from primary with 10% opacity\n    const hexToRgba = (hex: string, alpha: number): string => {\n      const r = parseInt(hex.slice(1, 3), 16);\n      const g = parseInt(hex.slice(3, 5), 16);\n      const b = parseInt(hex.slice(5, 7), 16);\n      return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    };\n\n    setColors({\n      primary,\n      background: style.getPropertyValue(\"--canvas-background\").trim() || \"#ffffff\",\n      text: style.getPropertyValue(\"--canvas-text\").trim() || \"#0d121c\",\n      textMuted: style.getPropertyValue(\"--canvas-text-muted\").trim() || \"#4b5565\",\n      textPlaceholder: style.getPropertyValue(\"--canvas-text-placeholder\").trim() || \"#6c7684\",\n      border: style.getPropertyValue(\"--canvas-border\").trim() || \"#e9eef3\",\n      success: style.getPropertyValue(\"--canvas-success\").trim() || \"#08875d\",\n      chartColor1: style.getPropertyValue(\"--chart-color-1\").trim() || \"#e45451\",\n      chartColor2: style.getPropertyValue(\"--chart-color-2\").trim() || \"#69bdbc\",\n      chartColor3: style.getPropertyValue(\"--chart-color-3\").trim() || \"#f8f578\",\n      chartColor4: style.getPropertyValue(\"--chart-color-4\").trim() || \"#f2b66b\",\n      chartColor5: style.getPropertyValue(\"--chart-color-5\").trim() || \"#6c7684\",\n      chartLineColor: style.getPropertyValue(\"--chart-line-color\").trim() || primary,\n      chartAreaColor: style.getPropertyValue(\"--chart-area-color\").trim() || hexToRgba(primary, 0.1),\n    });\n  }, []);\n\n  useEffect(() => {\n    readColors();\n\n    // Watch both document.body and document.documentElement for style changes\n    // Theme drawer writes to body, stylesheet/iframe sync writes to documentElement\n    const observer = new MutationObserver(() => {\n      readColors();\n    });\n\n    observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: [\"style\"],\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"style\"],\n    });\n\n    // Also listen for custom event that variables drawer might dispatch\n    const handleVariableChange = () => readColors();\n    window.addEventListener(\"css-variables-changed\", handleVariableChange);\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener(\"css-variables-changed\", handleVariableChange);\n    };\n  }, [readColors]);\n\n  return colors;\n}\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MetricCardData {\n  id: string;\n  label: string;\n  value: string;\n  change?: {\n    value: string;\n    direction: \"up\" | \"down\";\n  };\n}\n\nexport interface MetricListItem {\n  id: string;\n  date?: string;\n  label: string;\n  value: string;\n}\n\nexport interface DonutChartLegendItem {\n  id: string;\n  label: string;\n  value: string;\n  color: string;\n}\n\nexport interface ProgressBarItem {\n  id: string;\n  label: string;\n  sublabel?: string;\n  value?: string;\n  progress: number; // 0-100\n  imageUrl?: string;\n  color?: string;\n}\n\n// ============================================\n// Shared Sub-components\n// ============================================\n\ninterface WidgetCardProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction WidgetCard({ children, className }: WidgetCardProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col overflow-hidden\", className)}\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-nav, 8px)\",\n        boxShadow: \"0px 1px 2px 0px rgba(0, 0, 0, 0.02)\",\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface WidgetHeaderProps {\n  label: string;\n  onMenuClick?: () => void;\n}\n\nfunction WidgetHeader({ label, onMenuClick }: WidgetHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <span\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size, 14px)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n          color: \"var(--canvas-text-placeholder)\",\n        }}\n      >\n        {label}\n      </span>\n      <button\n        onClick={onMenuClick}\n        className=\"flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)]\"\n        style={{ width: 32, height: 32 }}\n      >\n        <DotsThreeVertical size={20} weight=\"bold\" color=\"var(--canvas-text-placeholder)\" />\n      </button>\n    </div>\n  );\n}\n\ninterface WidgetFooterProps {\n  manageLabel?: string;\n  viewDetailsLabel?: string;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nfunction WidgetFooter({\n  manageLabel = \"Manage\",\n  viewDetailsLabel = \"View details >\",\n  onManageClick,\n  onViewDetailsClick,\n}: WidgetFooterProps) {\n  return (\n    <div\n      className=\"flex items-center justify-between w-full\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        padding: \"var(--spacing-2xl, 20px) var(--spacing-4xl, 32px)\",\n      }}\n    >\n      <button\n        onClick={onManageClick}\n        className=\"flex items-center\"\n        style={{ gap: \"var(--spacing-md, 8px)\" }}\n      >\n        <Gear size={16} color=\"var(--canvas-text-placeholder)\" />\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 14px)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {manageLabel}\n        </span>\n      </button>\n      <button\n        onClick={onViewDetailsClick}\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size, 14px)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n          color: \"var(--canvas-primary)\",\n        }}\n      >\n        {viewDetailsLabel}\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// MetricCard Component\n// ============================================\n\nexport interface MetricCardProps {\n  label: string;\n  value: string;\n  change?: {\n    value: string;\n    direction: \"up\" | \"down\";\n  };\n  className?: string;\n}\n\nexport function MetricCard({ label, value, change, className }: MetricCardProps) {\n  return (\n    <WidgetCard className={cn(\"flex-1 min-w-[200px]\", className)}>\n      <div\n        className=\"flex flex-col justify-center\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          gap: \"var(--spacing-lg, 12px)\",\n        }}\n      >\n        {/* Label */}\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 14px)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {label}\n        </span>\n\n        {/* Value */}\n        <span\n          style={{\n            fontFamily: \"var(--typo-h4-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-h4-size, 36px)\",\n            fontWeight: 700,\n            lineHeight: 1.25,\n            letterSpacing: \"-0.01em\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {value}\n        </span>\n\n        {/* Change indicator */}\n        {change && (\n          <div className=\"flex items-center\" style={{ gap: \"var(--spacing-xs, 4px)\" }}>\n            {change.direction === \"up\" ? (\n              <ArrowUpRight size={20} weight=\"bold\" color=\"var(--canvas-success)\" />\n            ) : (\n              <ArrowDownRight size={20} weight=\"bold\" color=\"var(--canvas-destructive)\" />\n            )}\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 14px)\",\n                fontWeight: 600,\n                lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n                color: change.direction === \"up\" ? \"var(--canvas-success)\" : \"var(--canvas-destructive)\",\n              }}\n            >\n              {change.value}\n            </span>\n          </div>\n        )}\n      </div>\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// MetricCardsRow Component\n// ============================================\n\nexport interface MetricCardsRowProps {\n  metrics: MetricCardData[];\n  columns?: 2 | 3 | 4;\n  className?: string;\n}\n\nexport function MetricCardsRow({ metrics, columns = 4, className }: MetricCardsRowProps) {\n  return (\n    <div\n      className={cn(\"flex flex-wrap w-full\", className)}\n      style={{ gap: \"var(--spacing-4xl, 32px)\" }}\n    >\n      {metrics.slice(0, columns).map((metric) => (\n        <MetricCard\n          key={metric.id}\n          label={metric.label}\n          value={metric.value}\n          change={metric.change}\n        />\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// LineChartWidget Component\n// ============================================\n\nexport interface LineChartWidgetProps {\n  label: string;\n  value: string;\n  description?: string;\n  chartData?: number[];\n  chartLabels?: string[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nexport function LineChartWidget({\n  label,\n  value,\n  description,\n  chartData = [30, 45, 35, 50, 40, 60, 55, 70, 65, 80, 75, 90],\n  chartLabels = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: LineChartWidgetProps) {\n  const colors = useCSSVariableColors();\n\n  const data = {\n    labels: chartLabels,\n    datasets: [\n      {\n        data: chartData,\n        fill: true,\n        backgroundColor: colors.chartAreaColor,\n        borderColor: colors.chartLineColor,\n        borderWidth: 2,\n        tension: 0.4,\n        pointRadius: 0,\n        pointHoverRadius: 4,\n        pointHoverBackgroundColor: colors.chartLineColor,\n        pointHoverBorderColor: colors.background,\n        pointHoverBorderWidth: 2,\n      },\n    ],\n  };\n\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: {\n        display: false,\n      },\n      tooltip: {\n        backgroundColor: colors.text,\n        titleColor: colors.background,\n        bodyColor: colors.background,\n        padding: 12,\n        cornerRadius: 8,\n        displayColors: false,\n      },\n    },\n    scales: {\n      x: {\n        grid: {\n          display: false,\n        },\n        ticks: {\n          color: colors.textPlaceholder,\n          font: {\n            size: 12,\n          },\n        },\n        border: {\n          display: false,\n        },\n      },\n      y: {\n        grid: {\n          color: colors.border,\n        },\n        ticks: {\n          color: colors.textPlaceholder,\n          font: {\n            size: 12,\n          },\n        },\n        border: {\n          display: false,\n        },\n      },\n    },\n    interaction: {\n      intersect: false,\n      mode: \"index\" as const,\n    },\n  };\n\n  return (\n    <WidgetCard className={cn(\"w-full\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={label} onMenuClick={onMenuClick} />\n\n        {/* Value & Description */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {value}\n          </span>\n          {description && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {description}\n            </span>\n          )}\n        </div>\n\n        {/* Chart */}\n        <div style={{ height: 300, width: \"100%\" }}>\n          <Line data={data} options={options} />\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// DonutChartWidget Component\n// ============================================\n\nexport interface DonutChartWidgetProps {\n  label: string;\n  value: string;\n  description?: string;\n  legendItems?: DonutChartLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultDonutLegendItems: DonutChartLegendItem[] = [\n  { id: \"1\", label: \"Product sales\", value: \"$400,000\", color: \"chartColor1\" },\n  { id: \"2\", label: \"Subscription\", value: \"$350,000\", color: \"chartColor2\" },\n  { id: \"3\", label: \"Advertising\", value: \"$300,000\", color: \"chartColor3\" },\n  { id: \"4\", label: \"Services fees\", value: \"$250,000\", color: \"chartColor4\" },\n  { id: \"5\", label: \"Royalties\", value: \"$200,000\", color: \"chartColor5\" },\n  { id: \"6\", label: \"Affiliate marketing\", value: \"$197,454\", color: \"chartColor5\" },\n  { id: \"7\", label: \"Licensing\", value: \"$180,000\", color: \"chartColor5\" },\n  { id: \"8\", label: \"Sponsorship\", value: \"$150,000\", color: \"chartColor5\" },\n];\n\nexport function DonutChartWidget({\n  label,\n  value,\n  description,\n  legendItems = defaultDonutLegendItems,\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: DonutChartWidgetProps) {\n  const colors = useCSSVariableColors();\n\n  const getColorValue = (colorKey: string): string => {\n    const colorMap: Record<string, string> = {\n      chartColor1: colors.chartColor1,\n      chartColor2: colors.chartColor2,\n      chartColor3: colors.chartColor3,\n      chartColor4: colors.chartColor4,\n      chartColor5: colors.chartColor5,\n    };\n    return colorMap[colorKey] || colorKey;\n  };\n\n  const chartColors = legendItems.map((item) => getColorValue(item.color));\n  const chartValues = legendItems.map((item) => {\n    const numericValue = parseFloat(item.value.replace(/[$,]/g, \"\"));\n    return isNaN(numericValue) ? 0 : numericValue;\n  });\n\n  const data = {\n    labels: legendItems.map((item) => item.label),\n    datasets: [\n      {\n        data: chartValues,\n        backgroundColor: chartColors,\n        borderColor: colors.background,\n        borderWidth: 3,\n        hoverBorderColor: colors.background,\n        hoverBorderWidth: 3,\n      },\n    ],\n  };\n\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: \"60%\",\n    plugins: {\n      legend: {\n        display: false,\n      },\n      tooltip: {\n        backgroundColor: colors.text,\n        titleColor: colors.background,\n        bodyColor: colors.background,\n        padding: 12,\n        cornerRadius: 8,\n      },\n    },\n  };\n\n  return (\n    <WidgetCard className={cn(\"w-full\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={label} onMenuClick={onMenuClick} />\n\n        {/* Value & Description */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {value}\n          </span>\n          {description && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {description}\n            </span>\n          )}\n        </div>\n\n        {/* Chart + Legend */}\n        <div\n          className=\"flex items-start w-full\"\n          style={{\n            gap: \"var(--spacing-4xl, 32px)\",\n            padding: \"var(--spacing-3xl, 24px) 0\",\n            borderTop: \"1px solid var(--canvas-border)\",\n          }}\n        >\n          {/* Donut Chart */}\n          <div style={{ width: 280, height: 280, flexShrink: 0 }}>\n            <Doughnut data={data} options={options} />\n          </div>\n\n          {/* Legend Grid */}\n          <div\n            className=\"flex-1 grid grid-cols-2\"\n            style={{ gap: \"var(--spacing-3xl, 24px)\" }}\n          >\n            {legendItems.map((item) => (\n              <div\n                key={item.id}\n                className=\"flex items-center\"\n                style={{ gap: \"var(--spacing-md, 8px)\" }}\n              >\n                <div\n                  className=\"rounded-full\"\n                  style={{\n                    width: 8,\n                    height: 8,\n                    backgroundColor: getColorValue(item.color),\n                    flexShrink: 0,\n                  }}\n                />\n                <div className=\"flex flex-col\">\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 16px)\",\n                      fontWeight: 600,\n                      lineHeight: 1.5,\n                      color: \"var(--canvas-text)\",\n                    }}\n                  >\n                    {item.value}\n                  </span>\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 14px)\",\n                      fontWeight: 400,\n                      lineHeight: 1.4,\n                      color: \"var(--canvas-text-placeholder)\",\n                    }}\n                  >\n                    {item.label}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// MetricListCard Component\n// ============================================\n\nexport interface MetricListCardProps {\n  headerLabel: string;\n  title: string;\n  subtitle?: string;\n  items: MetricListItem[];\n  viewDetailsLabel?: string;\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultMetricListItems: MetricListItem[] = [\n  { id: \"1\", date: \"Aug 9\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"2\", date: \"Jul 18\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"3\", date: \"Jul 12\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"4\", date: \"Jun 8\", label: \"Software subscription\", value: \"-$40\" },\n];\n\nexport function MetricListCard({\n  headerLabel,\n  title,\n  subtitle,\n  items = defaultMetricListItems,\n  viewDetailsLabel = \"View transactions >\",\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: MetricListCardProps) {\n  return (\n    <WidgetCard className={cn(\"flex-1 min-w-0\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={headerLabel} onMenuClick={onMenuClick} />\n\n        {/* Title & Subtitle */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {title}\n          </span>\n          {subtitle && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {subtitle}\n            </span>\n          )}\n        </div>\n\n        {/* List Items */}\n        <div className=\"flex flex-col\">\n          {items.map((item, index) => (\n            <div\n              key={item.id}\n              className=\"flex items-center\"\n              style={{\n                padding: \"var(--spacing-lg, 12px) 0\",\n                gap: \"var(--spacing-3xl, 24px)\",\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n                borderBottom: \"1px solid var(--canvas-border)\",\n              }}\n            >\n              {item.date && (\n                <span\n                  style={{\n                    fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                    fontSize: \"var(--typo-body-s-size, 16px)\",\n                    fontWeight: 600,\n                    lineHeight: 1.5,\n                    color: \"var(--canvas-text-placeholder)\",\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  {item.date}\n                </span>\n              )}\n              <span\n                className=\"flex-1\"\n                style={{\n                  fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                  fontSize: \"var(--typo-body-s-size, 16px)\",\n                  fontWeight: 400,\n                  lineHeight: 1.5,\n                  color: \"var(--canvas-text)\",\n                }}\n              >\n                {item.label}\n              </span>\n              <span\n                style={{\n                  fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                  fontSize: \"var(--typo-body-s-size, 16px)\",\n                  fontWeight: 600,\n                  lineHeight: 1.5,\n                  color: \"var(--canvas-text)\",\n                  whiteSpace: \"nowrap\",\n                }}\n              >\n                {item.value}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n        viewDetailsLabel={viewDetailsLabel}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// ProgressMetricCard Component\n// ============================================\n\nexport interface ProgressMetricCardProps {\n  headerLabel: string;\n  title: string;\n  subtitle?: string;\n  items: ProgressBarItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultProgressItems: ProgressBarItem[] = [\n  { id: \"1\", label: \"$55,000\", progress: 80, imageUrl: \"/logos/shopify.png\" },\n  { id: \"2\", label: \"$30,000\", progress: 50, imageUrl: \"/logos/etsy.png\" },\n  { id: \"3\", label: \"$16,493\", progress: 30, imageUrl: \"/logos/amazon.png\" },\n  { id: \"4\", label: \"$13,800\", progress: 25, imageUrl: \"/logos/dribbble.png\" },\n];\n\nexport function ProgressMetricCard({\n  headerLabel,\n  title,\n  subtitle,\n  items = defaultProgressItems,\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: ProgressMetricCardProps) {\n  const colors = useCSSVariableColors();\n\n  return (\n    <WidgetCard className={cn(\"flex-1 min-w-0\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={headerLabel} onMenuClick={onMenuClick} />\n\n        {/* Title & Subtitle */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {title}\n          </span>\n          {subtitle && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {subtitle}\n            </span>\n          )}\n        </div>\n\n        {/* Progress Items */}\n        <div className=\"flex flex-col\">\n          {items.map((item, index) => (\n            <div\n              key={item.id}\n              className=\"flex items-center\"\n              style={{\n                padding: \"var(--spacing-lg, 12px) 0\",\n                gap: \"var(--spacing-xl, 16px)\",\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n                borderBottom: index < items.length - 1 ? \"1px solid var(--canvas-border)\" : \"none\",\n                height: 64,\n              }}\n            >\n              {/* Image */}\n              {item.imageUrl && (\n                <div\n                  className=\"flex items-center justify-center\"\n                  style={{ width: 32, height: 32, flexShrink: 0 }}\n                >\n                  <img\n                    src={item.imageUrl}\n                    alt=\"\"\n                    style={{\n                      maxWidth: \"100%\",\n                      maxHeight: \"100%\",\n                      objectFit: \"contain\",\n                    }}\n                    onError={(e) => {\n                      // Hide image on error\n                      (e.target as HTMLImageElement).style.display = \"none\";\n                    }}\n                  />\n                </div>\n              )}\n\n              {/* Progress Bar */}\n              <div\n                className=\"flex-1\"\n                style={{\n                  height: 8,\n                  backgroundColor: \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-3xl, 24px)\",\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    width: `${item.progress}%`,\n                    height: \"100%\",\n                    backgroundColor: item.color || colors.primary,\n                    borderRadius: \"var(--spacing-3xl, 24px)\",\n                  }}\n                />\n              </div>\n\n              {/* Value */}\n              <div className=\"flex flex-col items-end\">\n                <span\n                  style={{\n                    fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                    fontSize: \"var(--typo-body-s-size, 16px)\",\n                    fontWeight: 600,\n                    lineHeight: 1.5,\n                    color: \"var(--canvas-text)\",\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  {item.label}\n                </span>\n                {item.sublabel && (\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 14px)\",\n                      fontWeight: 500,\n                      lineHeight: 1.4,\n                      color: \"var(--canvas-text-placeholder)\",\n                    }}\n                  >\n                    {item.sublabel}\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// TwoColumnWidgets Layout Component\n// ============================================\n\nexport interface TwoColumnWidgetsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function TwoColumnWidgets({ children, className }: TwoColumnWidgetsProps) {\n  return (\n    <div\n      className={cn(\"flex w-full items-start\", className)}\n      style={{ gap: \"var(--spacing-4xl, 32px)\" }}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// DashboardHeader Component\n// ============================================\n\nexport interface DashboardHeaderProps {\n  title: string;\n  subtitle?: string;\n  className?: string;\n}\n\nexport function DashboardHeader({ title, subtitle, className }: DashboardHeaderProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-xs, 4px)\" }}\n    >\n      <h2\n        style={{\n          fontFamily: \"var(--typo-h6-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-h6-size, 24px)\",\n          fontWeight: \"var(--typo-h6-weight, 600)\",\n          lineHeight: \"var(--typo-h6-line-height, 1.25)\",\n          color: \"var(--canvas-text)\",\n          margin: 0,\n        }}\n      >\n        {title}\n      </h2>\n      {subtitle && (\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 16px)\",\n            fontWeight: 400,\n            lineHeight: 1.5,\n            color: \"var(--canvas-text-muted)\",\n            margin: 0,\n          }}\n        >\n          {subtitle}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// ============================================\n// Full Dashboard Demo Component\n// ============================================\n\nexport interface GraphMetricTilesDemoProps {\n  className?: string;\n}\n\nexport function GraphMetricTilesDemo({ className }: GraphMetricTilesDemoProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-3xl, 24px)\" }}\n    >\n      {/* Header */}\n      <DashboardHeader title=\"Dashboard\" subtitle=\"View your company's metric\" />\n\n      {/* 4-Column Metrics Row */}\n      <MetricCardsRow\n        metrics={[\n          { id: \"1\", label: \"Sales\", value: \"164\", change: { value: \"34\", direction: \"up\" } },\n          { id: \"2\", label: \"Revenue\", value: \"$5,462\", change: { value: \"$3,462\", direction: \"up\" } },\n          { id: \"3\", label: \"Expenses\", value: \"$1,642\", change: { value: \"$642\", direction: \"up\" } },\n          { id: \"4\", label: \"Profit\", value: \"$3,820\", change: { value: \"$2,820\", direction: \"up\" } },\n        ]}\n        columns={4}\n      />\n\n      {/* Line Chart Widget */}\n      <LineChartWidget\n        label=\"Profit and loss\"\n        value=\"$127,454\"\n        description=\"Your expenses decreased by 8% this month\"\n      />\n\n      {/* Donut Chart Widget */}\n      <DonutChartWidget\n        label=\"Revenue\"\n        value=\"$2,127,454\"\n        description=\"Your revenue increased by 25% this month\"\n      />\n\n      {/* Two Column - Transactions & Financial Summary */}\n      <TwoColumnWidgets>\n        <MetricListCard\n          headerLabel=\"Recent activities\"\n          title=\"Transactions\"\n          subtitle=\"You spent $2,321 in the past 7 days\"\n          items={[\n            { id: \"1\", date: \"Aug 9\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"2\", date: \"Jul 18\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"3\", date: \"Jul 12\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"4\", date: \"Jun 8\", label: \"Software subscription\", value: \"-$40\" },\n          ]}\n        />\n        <MetricListCard\n          headerLabel=\"Cash\"\n          title=\"Financial Summary\"\n          subtitle=\"You have positive cash flow\"\n          items={[\n            { id: \"1\", label: \"ProjectCo March invoice\", value: \"$80,000\" },\n            { id: \"2\", label: \"Tax refund\", value: \"$5,646\" },\n            { id: \"3\", label: \"Kohort February invoice\", value: \"$64,000\" },\n            { id: \"4\", label: \"License fee\", value: \"$7,500\" },\n          ]}\n        />\n      </TwoColumnWidgets>\n\n      {/* Two Column - Progress Metrics */}\n      <TwoColumnWidgets>\n        <ProgressMetricCard\n          headerLabel=\"Revenue\"\n          title=\"Sources\"\n          subtitle=\"Third-party marketplaces\"\n          items={[\n            { id: \"1\", label: \"$55,000\", progress: 80, color: \"#95bf47\" },\n            { id: \"2\", label: \"$30,000\", progress: 50, color: \"#f27123\" },\n            { id: \"3\", label: \"$16,493\", progress: 30, color: \"#faa11f\" },\n            { id: \"4\", label: \"$13,800\", progress: 25, color: \"#ff91e9\" },\n          ]}\n        />\n        <ProgressMetricCard\n          headerLabel=\"Net income\"\n          title=\"Trend analysis\"\n          subtitle=\"2020 - 2024\"\n          items={[\n            { id: \"1\", label: \"$132,000\", sublabel: \"2024\", progress: 100 },\n            { id: \"2\", label: \"$78,252\", sublabel: \"2023\", progress: 60 },\n            { id: \"3\", label: \"$36,493\", sublabel: \"2022\", progress: 28 },\n            { id: \"4\", label: \"$21,800\", sublabel: \"2021\", progress: 17 },\n          ]}\n        />\n      </TwoColumnWidgets>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/blocks/graph-metric-tiles.tsx"],"names":["ChartJS"],"mappings":"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","file":"charts.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  ArrowUpRight,\n  ArrowDownRight,\n  DotsThreeVertical,\n  Gear,\n} from \"@phosphor-icons/react\";\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  Tooltip,\n  Legend,\n  Filler,\n  ArcElement,\n} from \"chart.js\";\nimport { Line, Doughnut } from \"react-chartjs-2\";\n\n// Register Chart.js components\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  Tooltip,\n  Legend,\n  Filler,\n  ArcElement\n);\n\n// ============================================\n// Custom Hook: useCSSVariableColors\n// ============================================\n\ninterface CSSVariableColors {\n  primary: string;\n  background: string;\n  text: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n  success: string;\n  chartColor1: string;\n  chartColor2: string;\n  chartColor3: string;\n  chartColor4: string;\n  chartColor5: string;\n  chartLineColor: string;\n  chartAreaColor: string;\n}\n\nfunction useCSSVariableColors(): CSSVariableColors {\n  const [colors, setColors] = useState<CSSVariableColors>({\n    primary: \"#1165ef\",\n    background: \"#ffffff\",\n    text: \"#0d121c\",\n    textMuted: \"#4b5565\",\n    textPlaceholder: \"#6c7684\",\n    border: \"#e9eef3\",\n    success: \"#08875d\",\n    chartColor1: \"#e45451\",\n    chartColor2: \"#69bdbc\",\n    chartColor3: \"#f8f578\",\n    chartColor4: \"#f2b66b\",\n    chartColor5: \"#6c7684\",\n    chartLineColor: \"#1165ef\",\n    chartAreaColor: \"rgba(17, 101, 239, 0.1)\",\n  });\n\n  const readColors = useCallback(() => {\n    if (typeof window === \"undefined\") return;\n    // Read from document.body since theme overrides are applied there\n    const style = getComputedStyle(document.body);\n    const primary = style.getPropertyValue(\"--canvas-primary\").trim() || \"#1165ef\";\n\n    // Derive chart area color from primary with 10% opacity\n    const hexToRgba = (hex: string, alpha: number): string => {\n      const r = parseInt(hex.slice(1, 3), 16);\n      const g = parseInt(hex.slice(3, 5), 16);\n      const b = parseInt(hex.slice(5, 7), 16);\n      return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    };\n\n    setColors({\n      primary,\n      background: style.getPropertyValue(\"--canvas-background\").trim() || \"#ffffff\",\n      text: style.getPropertyValue(\"--canvas-text\").trim() || \"#0d121c\",\n      textMuted: style.getPropertyValue(\"--canvas-text-muted\").trim() || \"#4b5565\",\n      textPlaceholder: style.getPropertyValue(\"--canvas-text-placeholder\").trim() || \"#6c7684\",\n      border: style.getPropertyValue(\"--canvas-border\").trim() || \"#e9eef3\",\n      success: style.getPropertyValue(\"--canvas-success\").trim() || \"#08875d\",\n      chartColor1: style.getPropertyValue(\"--chart-color-1\").trim() || \"#e45451\",\n      chartColor2: style.getPropertyValue(\"--chart-color-2\").trim() || \"#69bdbc\",\n      chartColor3: style.getPropertyValue(\"--chart-color-3\").trim() || \"#f8f578\",\n      chartColor4: style.getPropertyValue(\"--chart-color-4\").trim() || \"#f2b66b\",\n      chartColor5: style.getPropertyValue(\"--chart-color-5\").trim() || \"#6c7684\",\n      chartLineColor: style.getPropertyValue(\"--chart-line-color\").trim() || primary,\n      chartAreaColor: style.getPropertyValue(\"--chart-area-color\").trim() || hexToRgba(primary, 0.1),\n    });\n  }, []);\n\n  useEffect(() => {\n    readColors();\n\n    // Watch both document.body and document.documentElement for style changes\n    // Theme drawer writes to body, stylesheet/iframe sync writes to documentElement\n    const observer = new MutationObserver(() => {\n      readColors();\n    });\n\n    observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: [\"style\"],\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"style\"],\n    });\n\n    // Also listen for custom event that variables drawer might dispatch\n    const handleVariableChange = () => readColors();\n    window.addEventListener(\"css-variables-changed\", handleVariableChange);\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener(\"css-variables-changed\", handleVariableChange);\n    };\n  }, [readColors]);\n\n  return colors;\n}\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MetricCardData {\n  id: string;\n  label: string;\n  value: string;\n  change?: {\n    value: string;\n    direction: \"up\" | \"down\";\n  };\n}\n\nexport interface MetricListItem {\n  id: string;\n  date?: string;\n  label: string;\n  value: string;\n}\n\nexport interface DonutChartLegendItem {\n  id: string;\n  label: string;\n  value: string;\n  color: string;\n}\n\nexport interface ProgressBarItem {\n  id: string;\n  label: string;\n  sublabel?: string;\n  value?: string;\n  progress: number; // 0-100\n  imageUrl?: string;\n  color?: string;\n}\n\n// ============================================\n// Shared Sub-components\n// ============================================\n\ninterface WidgetCardProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction WidgetCard({ children, className }: WidgetCardProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col overflow-hidden\", className)}\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-nav, 8px)\",\n        boxShadow: \"0px 1px 2px 0px rgba(0, 0, 0, 0.02)\",\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface WidgetHeaderProps {\n  label: string;\n  onMenuClick?: () => void;\n}\n\nfunction WidgetHeader({ label, onMenuClick }: WidgetHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <span\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size, 14px)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n          color: \"var(--canvas-text-placeholder)\",\n        }}\n      >\n        {label}\n      </span>\n      <button\n        onClick={onMenuClick}\n        className=\"flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)]\"\n        style={{ width: 32, height: 32 }}\n      >\n        <DotsThreeVertical size={20} weight=\"bold\" color=\"var(--canvas-text-placeholder)\" />\n      </button>\n    </div>\n  );\n}\n\ninterface WidgetFooterProps {\n  manageLabel?: string;\n  viewDetailsLabel?: string;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nfunction WidgetFooter({\n  manageLabel = \"Manage\",\n  viewDetailsLabel = \"View details >\",\n  onManageClick,\n  onViewDetailsClick,\n}: WidgetFooterProps) {\n  return (\n    <div\n      className=\"flex items-center justify-between w-full\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        padding: \"var(--spacing-2xl, 20px) var(--spacing-4xl, 32px)\",\n      }}\n    >\n      <button\n        onClick={onManageClick}\n        className=\"flex items-center\"\n        style={{ gap: \"var(--spacing-md, 8px)\" }}\n      >\n        <Gear size={16} color=\"var(--canvas-text-placeholder)\" />\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 14px)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {manageLabel}\n        </span>\n      </button>\n      <button\n        onClick={onViewDetailsClick}\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size, 14px)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n          color: \"var(--canvas-primary)\",\n        }}\n      >\n        {viewDetailsLabel}\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// MetricCard Component\n// ============================================\n\nexport interface MetricCardProps {\n  label: string;\n  value: string;\n  change?: {\n    value: string;\n    direction: \"up\" | \"down\";\n  };\n  className?: string;\n}\n\nexport function MetricCard({ label, value, change, className }: MetricCardProps) {\n  return (\n    <WidgetCard className={cn(\"\", className)}>\n      <div\n        className=\"flex flex-col justify-center\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          gap: \"var(--spacing-lg, 12px)\",\n        }}\n      >\n        {/* Label */}\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 14px)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {label}\n        </span>\n\n        {/* Value */}\n        <span\n          style={{\n            fontFamily: \"var(--typo-h4-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-h4-size, 36px)\",\n            fontWeight: 700,\n            lineHeight: 1.25,\n            letterSpacing: \"-0.01em\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {value}\n        </span>\n\n        {/* Change indicator */}\n        {change && (\n          <div className=\"flex items-center\" style={{ gap: \"var(--spacing-xs, 4px)\" }}>\n            {change.direction === \"up\" ? (\n              <ArrowUpRight size={20} weight=\"bold\" color=\"var(--canvas-success)\" />\n            ) : (\n              <ArrowDownRight size={20} weight=\"bold\" color=\"var(--canvas-destructive)\" />\n            )}\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 14px)\",\n                fontWeight: 600,\n                lineHeight: \"var(--typo-body-s-line-height, 1.4)\",\n                color: change.direction === \"up\" ? \"var(--canvas-success)\" : \"var(--canvas-destructive)\",\n              }}\n            >\n              {change.value}\n            </span>\n          </div>\n        )}\n      </div>\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// MetricCardsRow Component\n// ============================================\n\nexport interface MetricCardsRowProps {\n  metrics: MetricCardData[];\n  columns?: 2 | 3 | 4;\n  className?: string;\n}\n\nconst metricGridClasses: Record<2 | 3 | 4, string> = {\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nexport function MetricCardsRow({ metrics, columns = 4, className }: MetricCardsRowProps) {\n  return (\n    <div\n      className={cn(\"grid w-full\", metricGridClasses[columns], className)}\n      style={{ gap: \"var(--spacing-4xl, 32px)\" }}\n    >\n      {metrics.slice(0, columns).map((metric) => (\n        <MetricCard\n          key={metric.id}\n          label={metric.label}\n          value={metric.value}\n          change={metric.change}\n        />\n      ))}\n    </div>\n  );\n}\n\n// ============================================\n// LineChartWidget Component\n// ============================================\n\nexport interface LineChartWidgetProps {\n  label: string;\n  value: string;\n  description?: string;\n  chartData?: number[];\n  chartLabels?: string[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nexport function LineChartWidget({\n  label,\n  value,\n  description,\n  chartData = [30, 45, 35, 50, 40, 60, 55, 70, 65, 80, 75, 90],\n  chartLabels = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: LineChartWidgetProps) {\n  const colors = useCSSVariableColors();\n\n  const data = {\n    labels: chartLabels,\n    datasets: [\n      {\n        data: chartData,\n        fill: true,\n        backgroundColor: colors.chartAreaColor,\n        borderColor: colors.chartLineColor,\n        borderWidth: 2,\n        tension: 0.4,\n        pointRadius: 0,\n        pointHoverRadius: 4,\n        pointHoverBackgroundColor: colors.chartLineColor,\n        pointHoverBorderColor: colors.background,\n        pointHoverBorderWidth: 2,\n      },\n    ],\n  };\n\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    plugins: {\n      legend: {\n        display: false,\n      },\n      tooltip: {\n        backgroundColor: colors.text,\n        titleColor: colors.background,\n        bodyColor: colors.background,\n        padding: 12,\n        cornerRadius: 8,\n        displayColors: false,\n      },\n    },\n    scales: {\n      x: {\n        grid: {\n          display: false,\n        },\n        ticks: {\n          color: colors.textPlaceholder,\n          font: {\n            size: 12,\n          },\n        },\n        border: {\n          display: false,\n        },\n      },\n      y: {\n        grid: {\n          color: colors.border,\n        },\n        ticks: {\n          color: colors.textPlaceholder,\n          font: {\n            size: 12,\n          },\n        },\n        border: {\n          display: false,\n        },\n      },\n    },\n    interaction: {\n      intersect: false,\n      mode: \"index\" as const,\n    },\n  };\n\n  return (\n    <WidgetCard className={cn(\"w-full\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={label} onMenuClick={onMenuClick} />\n\n        {/* Value & Description */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {value}\n          </span>\n          {description && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {description}\n            </span>\n          )}\n        </div>\n\n        {/* Chart */}\n        <div className=\"h-[200px] sm:h-[300px] w-full\">\n          <Line data={data} options={options} />\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// DonutChartWidget Component\n// ============================================\n\nexport interface DonutChartWidgetProps {\n  label: string;\n  value: string;\n  description?: string;\n  legendItems?: DonutChartLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultDonutLegendItems: DonutChartLegendItem[] = [\n  { id: \"1\", label: \"Product sales\", value: \"$400,000\", color: \"chartColor1\" },\n  { id: \"2\", label: \"Subscription\", value: \"$350,000\", color: \"chartColor2\" },\n  { id: \"3\", label: \"Advertising\", value: \"$300,000\", color: \"chartColor3\" },\n  { id: \"4\", label: \"Services fees\", value: \"$250,000\", color: \"chartColor4\" },\n  { id: \"5\", label: \"Royalties\", value: \"$200,000\", color: \"chartColor5\" },\n  { id: \"6\", label: \"Affiliate marketing\", value: \"$197,454\", color: \"chartColor5\" },\n  { id: \"7\", label: \"Licensing\", value: \"$180,000\", color: \"chartColor5\" },\n  { id: \"8\", label: \"Sponsorship\", value: \"$150,000\", color: \"chartColor5\" },\n];\n\nexport function DonutChartWidget({\n  label,\n  value,\n  description,\n  legendItems = defaultDonutLegendItems,\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: DonutChartWidgetProps) {\n  const colors = useCSSVariableColors();\n\n  const getColorValue = (colorKey: string): string => {\n    const colorMap: Record<string, string> = {\n      chartColor1: colors.chartColor1,\n      chartColor2: colors.chartColor2,\n      chartColor3: colors.chartColor3,\n      chartColor4: colors.chartColor4,\n      chartColor5: colors.chartColor5,\n    };\n    return colorMap[colorKey] || colorKey;\n  };\n\n  const chartColors = legendItems.map((item) => getColorValue(item.color));\n  const chartValues = legendItems.map((item) => {\n    const numericValue = parseFloat(item.value.replace(/[$,]/g, \"\"));\n    return isNaN(numericValue) ? 0 : numericValue;\n  });\n\n  const data = {\n    labels: legendItems.map((item) => item.label),\n    datasets: [\n      {\n        data: chartValues,\n        backgroundColor: chartColors,\n        borderColor: colors.background,\n        borderWidth: 3,\n        hoverBorderColor: colors.background,\n        hoverBorderWidth: 3,\n      },\n    ],\n  };\n\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: \"60%\",\n    plugins: {\n      legend: {\n        display: false,\n      },\n      tooltip: {\n        backgroundColor: colors.text,\n        titleColor: colors.background,\n        bodyColor: colors.background,\n        padding: 12,\n        cornerRadius: 8,\n      },\n    },\n  };\n\n  return (\n    <WidgetCard className={cn(\"w-full\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={label} onMenuClick={onMenuClick} />\n\n        {/* Value & Description */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {value}\n          </span>\n          {description && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {description}\n            </span>\n          )}\n        </div>\n\n        {/* Chart + Legend */}\n        <div\n          className=\"flex flex-col sm:flex-row items-start w-full\"\n          style={{\n            gap: \"var(--spacing-4xl, 32px)\",\n            padding: \"var(--spacing-3xl, 24px) 0\",\n            borderTop: \"1px solid var(--canvas-border)\",\n          }}\n        >\n          {/* Donut Chart */}\n          <div className=\"w-full sm:w-[280px]\" style={{ height: 280, flexShrink: 0 }}>\n            <Doughnut data={data} options={options} />\n          </div>\n\n          {/* Legend Grid */}\n          <div\n            className=\"flex-1 grid grid-cols-2\"\n            style={{ gap: \"var(--spacing-3xl, 24px)\" }}\n          >\n            {legendItems.map((item) => (\n              <div\n                key={item.id}\n                className=\"flex items-center\"\n                style={{ gap: \"var(--spacing-md, 8px)\" }}\n              >\n                <div\n                  className=\"rounded-full\"\n                  style={{\n                    width: 8,\n                    height: 8,\n                    backgroundColor: getColorValue(item.color),\n                    flexShrink: 0,\n                  }}\n                />\n                <div className=\"flex flex-col\">\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 16px)\",\n                      fontWeight: 600,\n                      lineHeight: 1.5,\n                      color: \"var(--canvas-text)\",\n                    }}\n                  >\n                    {item.value}\n                  </span>\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 14px)\",\n                      fontWeight: 400,\n                      lineHeight: 1.4,\n                      color: \"var(--canvas-text-placeholder)\",\n                    }}\n                  >\n                    {item.label}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// MetricListCard Component\n// ============================================\n\nexport interface MetricListCardProps {\n  headerLabel: string;\n  title: string;\n  subtitle?: string;\n  items: MetricListItem[];\n  viewDetailsLabel?: string;\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultMetricListItems: MetricListItem[] = [\n  { id: \"1\", date: \"Aug 9\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"2\", date: \"Jul 18\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"3\", date: \"Jul 12\", label: \"Software subscription\", value: \"-$40\" },\n  { id: \"4\", date: \"Jun 8\", label: \"Software subscription\", value: \"-$40\" },\n];\n\nexport function MetricListCard({\n  headerLabel,\n  title,\n  subtitle,\n  items = defaultMetricListItems,\n  viewDetailsLabel = \"View transactions >\",\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: MetricListCardProps) {\n  return (\n    <WidgetCard className={cn(\"flex-1 min-w-0\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={headerLabel} onMenuClick={onMenuClick} />\n\n        {/* Title & Subtitle */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {title}\n          </span>\n          {subtitle && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {subtitle}\n            </span>\n          )}\n        </div>\n\n        {/* List Items */}\n        <div className=\"flex flex-col\">\n          {items.map((item, index) => (\n            <div\n              key={item.id}\n              className=\"flex items-center\"\n              style={{\n                padding: \"var(--spacing-lg, 12px) 0\",\n                gap: \"var(--spacing-3xl, 24px)\",\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n                borderBottom: \"1px solid var(--canvas-border)\",\n              }}\n            >\n              {item.date && (\n                <span\n                  style={{\n                    fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                    fontSize: \"var(--typo-body-s-size, 16px)\",\n                    fontWeight: 600,\n                    lineHeight: 1.5,\n                    color: \"var(--canvas-text-placeholder)\",\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  {item.date}\n                </span>\n              )}\n              <span\n                className=\"flex-1\"\n                style={{\n                  fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                  fontSize: \"var(--typo-body-s-size, 16px)\",\n                  fontWeight: 400,\n                  lineHeight: 1.5,\n                  color: \"var(--canvas-text)\",\n                }}\n              >\n                {item.label}\n              </span>\n              <span\n                style={{\n                  fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                  fontSize: \"var(--typo-body-s-size, 16px)\",\n                  fontWeight: 600,\n                  lineHeight: 1.5,\n                  color: \"var(--canvas-text)\",\n                  whiteSpace: \"nowrap\",\n                }}\n              >\n                {item.value}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n        viewDetailsLabel={viewDetailsLabel}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// ProgressMetricCard Component\n// ============================================\n\nexport interface ProgressMetricCardProps {\n  headerLabel: string;\n  title: string;\n  subtitle?: string;\n  items: ProgressBarItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  onManageClick?: () => void;\n  onViewDetailsClick?: () => void;\n}\n\nconst defaultProgressItems: ProgressBarItem[] = [\n  { id: \"1\", label: \"$55,000\", progress: 80, imageUrl: \"/logos/shopify.png\" },\n  { id: \"2\", label: \"$30,000\", progress: 50, imageUrl: \"/logos/etsy.png\" },\n  { id: \"3\", label: \"$16,493\", progress: 30, imageUrl: \"/logos/amazon.png\" },\n  { id: \"4\", label: \"$13,800\", progress: 25, imageUrl: \"/logos/dribbble.png\" },\n];\n\nexport function ProgressMetricCard({\n  headerLabel,\n  title,\n  subtitle,\n  items = defaultProgressItems,\n  className,\n  onMenuClick,\n  onManageClick,\n  onViewDetailsClick,\n}: ProgressMetricCardProps) {\n  const colors = useCSSVariableColors();\n\n  return (\n    <WidgetCard className={cn(\"flex-1 min-w-0\", className)}>\n      {/* Content */}\n      <div\n        className=\"flex flex-col\"\n        style={{\n          padding: \"var(--spacing-4xl, 32px)\",\n          paddingBottom: 0,\n          gap: \"var(--spacing-3xl, 24px)\",\n        }}\n      >\n        <WidgetHeader label={headerLabel} onMenuClick={onMenuClick} />\n\n        {/* Title & Subtitle */}\n        <div className=\"flex flex-col\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-h5-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h5-size, 30px)\",\n              fontWeight: 600,\n              lineHeight: 1.27,\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {title}\n          </span>\n          {subtitle && (\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size, 16px)\",\n                fontWeight: 400,\n                lineHeight: 1.5,\n                color: \"var(--canvas-text-muted)\",\n              }}\n            >\n              {subtitle}\n            </span>\n          )}\n        </div>\n\n        {/* Progress Items */}\n        <div className=\"flex flex-col\">\n          {items.map((item, index) => (\n            <div\n              key={item.id}\n              className=\"flex items-center\"\n              style={{\n                padding: \"var(--spacing-lg, 12px) 0\",\n                gap: \"var(--spacing-xl, 16px)\",\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n                borderBottom: index < items.length - 1 ? \"1px solid var(--canvas-border)\" : \"none\",\n                height: 64,\n              }}\n            >\n              {/* Image */}\n              {item.imageUrl && (\n                <div\n                  className=\"flex items-center justify-center\"\n                  style={{ width: 32, height: 32, flexShrink: 0 }}\n                >\n                  <img\n                    src={item.imageUrl}\n                    alt=\"\"\n                    style={{\n                      maxWidth: \"100%\",\n                      maxHeight: \"100%\",\n                      objectFit: \"contain\",\n                    }}\n                    onError={(e) => {\n                      // Hide image on error\n                      (e.target as HTMLImageElement).style.display = \"none\";\n                    }}\n                  />\n                </div>\n              )}\n\n              {/* Progress Bar */}\n              <div\n                className=\"flex-1\"\n                style={{\n                  height: 8,\n                  backgroundColor: \"var(--canvas-border)\",\n                  borderRadius: \"var(--spacing-3xl, 24px)\",\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    width: `${item.progress}%`,\n                    height: \"100%\",\n                    backgroundColor: item.color || colors.primary,\n                    borderRadius: \"var(--spacing-3xl, 24px)\",\n                  }}\n                />\n              </div>\n\n              {/* Value */}\n              <div className=\"flex flex-col items-end\">\n                <span\n                  style={{\n                    fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                    fontSize: \"var(--typo-body-s-size, 16px)\",\n                    fontWeight: 600,\n                    lineHeight: 1.5,\n                    color: \"var(--canvas-text)\",\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  {item.label}\n                </span>\n                {item.sublabel && (\n                  <span\n                    style={{\n                      fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                      fontSize: \"var(--typo-body-s-size, 14px)\",\n                      fontWeight: 500,\n                      lineHeight: 1.4,\n                      color: \"var(--canvas-text-placeholder)\",\n                    }}\n                  >\n                    {item.sublabel}\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <WidgetFooter\n        onManageClick={onManageClick}\n        onViewDetailsClick={onViewDetailsClick}\n      />\n    </WidgetCard>\n  );\n}\n\n// ============================================\n// TwoColumnWidgets Layout Component\n// ============================================\n\nexport interface TwoColumnWidgetsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function TwoColumnWidgets({ children, className }: TwoColumnWidgetsProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col sm:flex-row w-full items-start\", className)}\n      style={{ gap: \"var(--spacing-4xl, 32px)\" }}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// DashboardHeader Component\n// ============================================\n\nexport interface DashboardHeaderProps {\n  title: string;\n  subtitle?: string;\n  className?: string;\n}\n\nexport function DashboardHeader({ title, subtitle, className }: DashboardHeaderProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-xs, 4px)\" }}\n    >\n      <h2\n        style={{\n          fontFamily: \"var(--typo-h6-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-h6-size, 24px)\",\n          fontWeight: \"var(--typo-h6-weight, 600)\",\n          lineHeight: \"var(--typo-h6-line-height, 1.25)\",\n          color: \"var(--canvas-text)\",\n          margin: 0,\n        }}\n      >\n        {title}\n      </h2>\n      {subtitle && (\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size, 16px)\",\n            fontWeight: 400,\n            lineHeight: 1.5,\n            color: \"var(--canvas-text-muted)\",\n            margin: 0,\n          }}\n        >\n          {subtitle}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// ============================================\n// Full Dashboard Demo Component\n// ============================================\n\nexport interface GraphMetricTilesDemoProps {\n  className?: string;\n}\n\nexport function GraphMetricTilesDemo({ className }: GraphMetricTilesDemoProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-3xl, 24px)\" }}\n    >\n      {/* Header */}\n      <DashboardHeader title=\"Dashboard\" subtitle=\"View your company's metric\" />\n\n      {/* 4-Column Metrics Row */}\n      <MetricCardsRow\n        metrics={[\n          { id: \"1\", label: \"Sales\", value: \"164\", change: { value: \"34\", direction: \"up\" } },\n          { id: \"2\", label: \"Revenue\", value: \"$5,462\", change: { value: \"$3,462\", direction: \"up\" } },\n          { id: \"3\", label: \"Expenses\", value: \"$1,642\", change: { value: \"$642\", direction: \"up\" } },\n          { id: \"4\", label: \"Profit\", value: \"$3,820\", change: { value: \"$2,820\", direction: \"up\" } },\n        ]}\n        columns={4}\n      />\n\n      {/* Line Chart Widget */}\n      <LineChartWidget\n        label=\"Profit and loss\"\n        value=\"$127,454\"\n        description=\"Your expenses decreased by 8% this month\"\n      />\n\n      {/* Donut Chart Widget */}\n      <DonutChartWidget\n        label=\"Revenue\"\n        value=\"$2,127,454\"\n        description=\"Your revenue increased by 25% this month\"\n      />\n\n      {/* Two Column - Transactions & Financial Summary */}\n      <TwoColumnWidgets>\n        <MetricListCard\n          headerLabel=\"Recent activities\"\n          title=\"Transactions\"\n          subtitle=\"You spent $2,321 in the past 7 days\"\n          items={[\n            { id: \"1\", date: \"Aug 9\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"2\", date: \"Jul 18\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"3\", date: \"Jul 12\", label: \"Software subscription\", value: \"-$40\" },\n            { id: \"4\", date: \"Jun 8\", label: \"Software subscription\", value: \"-$40\" },\n          ]}\n        />\n        <MetricListCard\n          headerLabel=\"Cash\"\n          title=\"Financial Summary\"\n          subtitle=\"You have positive cash flow\"\n          items={[\n            { id: \"1\", label: \"ProjectCo March invoice\", value: \"$80,000\" },\n            { id: \"2\", label: \"Tax refund\", value: \"$5,646\" },\n            { id: \"3\", label: \"Kohort February invoice\", value: \"$64,000\" },\n            { id: \"4\", label: \"License fee\", value: \"$7,500\" },\n          ]}\n        />\n      </TwoColumnWidgets>\n\n      {/* Two Column - Progress Metrics */}\n      <TwoColumnWidgets>\n        <ProgressMetricCard\n          headerLabel=\"Revenue\"\n          title=\"Sources\"\n          subtitle=\"Third-party marketplaces\"\n          items={[\n            { id: \"1\", label: \"$55,000\", progress: 80, color: \"#95bf47\" },\n            { id: \"2\", label: \"$30,000\", progress: 50, color: \"#f27123\" },\n            { id: \"3\", label: \"$16,493\", progress: 30, color: \"#faa11f\" },\n            { id: \"4\", label: \"$13,800\", progress: 25, color: \"#ff91e9\" },\n          ]}\n        />\n        <ProgressMetricCard\n          headerLabel=\"Net income\"\n          title=\"Trend analysis\"\n          subtitle=\"2020 - 2024\"\n          items={[\n            { id: \"1\", label: \"$132,000\", sublabel: \"2024\", progress: 100 },\n            { id: \"2\", label: \"$78,252\", sublabel: \"2023\", progress: 60 },\n            { id: \"3\", label: \"$36,493\", sublabel: \"2022\", progress: 28 },\n            { id: \"4\", label: \"$21,800\", sublabel: \"2021\", progress: 17 },\n          ]}\n        />\n      </TwoColumnWidgets>\n    </div>\n  );\n}\n"]}