@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/entries/charts.js

@@ -1,4 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { MarketingWidgetDemo } from "../demos/marketing-widgets.js";
+import { marketingWidgetExampleCode } from "../demos/marketing-widgets-code.generated.js";
 import {
   BarChart,
   DeltaBadge,
@@ -8,49 +11,409 @@ import {
   Sparkline,
   TopNTable
 } from "@open-mercato/ui/backend/charts";
-const revenueByMonth = [
-  { month: "Jan", revenue: 48200 },
-  { month: "Feb", revenue: 51400 },
-  { month: "Mar", revenue: 47900 },
-  { month: "Apr", revenue: 61200 },
-  { month: "May", revenue: 58600 },
-  { month: "Jun", revenue: 67300 }
+function KpiCardEntryDeltaBadgePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(DeltaBadge, { direction: "up", value: 12.4 }),
+    /* @__PURE__ */ jsx(DeltaBadge, { direction: "down", value: 4.7 }),
+    /* @__PURE__ */ jsx(DeltaBadge, { direction: "unchanged", value: 0 }),
+    /* @__PURE__ */ jsx(DeltaBadge, { direction: "up", value: 38, unit: t("design_system.gallery.samples.content.pts") })
+  ] });
+}
+function SparklineEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: t("design_system.gallery.samples.content.weeklyOrdersTrend") }) });
+}
+function SparklineEntrySemanticColorPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-primary", children: /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: t("design_system.gallery.samples.content.ordersTrendingUp") }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-destructive", children: /* @__PURE__ */ jsx(
+      Sparkline,
+      {
+        values: [...weeklyOrdersTrend].reverse(),
+        ariaLabel: t("design_system.gallery.samples.content.returnsTrendingDown")
+      }
+    ) })
+  ] });
+}
+function SparklineEntrySizesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-6 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(
+      Sparkline,
+      {
+        values: weeklyOrdersTrend,
+        ariaLabel: t("design_system.gallery.samples.content.smallTrend"),
+        width: 64,
+        height: 20
+      }
+    ),
+    /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: t("design_system.gallery.samples.content.defaultTrend") }),
+    /* @__PURE__ */ jsx(
+      Sparkline,
+      {
+        values: weeklyOrdersTrend,
+        ariaLabel: t("design_system.gallery.samples.content.largeTrend"),
+        width: 160,
+        height: 40
+      }
+    )
+  ] });
+}
+function KpiCardEntryTrendDirectionsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsx(
+      KpiCard,
+      {
+        title: t("design_system.gallery.samples.content.revenue"),
+        value: 67300,
+        prefix: "\u20AC",
+        trend: {
+          value: 14.8,
+          direction: "up"
+        },
+        comparisonLabel: t("design_system.gallery.samples.content.vsPreviousMonth")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      KpiCard,
+      {
+        title: t("design_system.gallery.samples.content.cancelledOrders"),
+        value: 22,
+        trend: {
+          value: 6.1,
+          direction: "down"
+        },
+        comparisonLabel: t("design_system.gallery.samples.content.vsPreviousMonth")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      KpiCard,
+      {
+        title: t("design_system.gallery.samples.content.activeCustomers"),
+        value: 1284,
+        trend: {
+          value: 0,
+          direction: "unchanged"
+        },
+        comparisonLabel: t("design_system.gallery.samples.content.vsPreviousMonth")
+      }
+    )
+  ] });
+}
+function KpiCardEntrySuffixAndFooterPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ jsx(
+    KpiCard,
+    {
+      title: t("design_system.gallery.samples.content.averageOrderValue"),
+      value: 86.4,
+      prefix: "\u20AC",
+      suffix: t("design_system.gallery.samples.content.net"),
+      trend: {
+        value: 3.2,
+        direction: "up"
+      },
+      footer: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(
+        Sparkline,
+        {
+          values: weeklyOrdersTrend,
+          ariaLabel: t("design_system.gallery.samples.content.weeklyOrdersTrend")
+        }
+      ) })
+    }
+  ) });
+}
+function KpiCardEntryStatesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsx(KpiCard, { title: t("design_system.gallery.samples.content.loading"), value: null, loading: true }),
+    /* @__PURE__ */ jsx(
+      KpiCard,
+      {
+        title: t("design_system.gallery.samples.content.error"),
+        value: null,
+        error: t("design_system.gallery.samples.content.failedToLoadMetric")
+      }
+    ),
+    /* @__PURE__ */ jsx(KpiCard, { title: t("design_system.gallery.samples.content.noData"), value: null })
+  ] });
+}
+function BarChartEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: t("design_system.gallery.samples.content.revenueByMonth"),
+      data: revenueByMonth(t),
+      index: "month",
+      categories: ["revenue"],
+      showLegend: false
+    }
+  ) });
+}
+function BarChartEntryHorizontalPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: t("design_system.gallery.samples.content.revenueByChannel"),
+      data: revenueByChannel(t),
+      index: "channel",
+      categories: ["revenue"],
+      layout: "horizontal",
+      showLegend: false
+    }
+  ) });
+}
+function BarChartEntryMultiSeriesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      title: t("design_system.gallery.samples.content.ordersByMonth"),
+      data: ordersByMonth(t),
+      index: "month",
+      categories: ["online", "retail"],
+      categoryLabels: {
+        online: t("design_system.gallery.samples.content.online"),
+        retail: t("design_system.gallery.samples.content.retail")
+      }
+    }
+  ) });
+}
+function LineChartEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      title: t("design_system.gallery.samples.content.revenueByMonth"),
+      data: revenueByMonth(t),
+      index: "month",
+      categories: ["revenue"],
+      showLegend: false
+    }
+  ) });
+}
+function LineChartEntryAreaPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      title: t("design_system.gallery.samples.content.revenueByMonth"),
+      data: revenueByMonth(t),
+      index: "month",
+      categories: ["revenue"],
+      showArea: true,
+      showLegend: false
+    }
+  ) });
+}
+function LineChartEntryMultiSeriesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      title: t("design_system.gallery.samples.content.ordersByMonth"),
+      data: ordersByMonth(t),
+      index: "month",
+      categories: ["online", "retail"],
+      categoryLabels: {
+        online: t("design_system.gallery.samples.content.online"),
+        retail: t("design_system.gallery.samples.content.retail")
+      },
+      curveType: "monotone"
+    }
+  ) });
+}
+function PieChartEntryPiePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(PieChart, { title: t("design_system.gallery.samples.content.ordersByStatus"), data: ordersByStatus(t) }) });
+}
+function PieChartEntryDonutPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    PieChart,
+    {
+      title: t("design_system.gallery.samples.content.ordersByStatus"),
+      data: ordersByStatus(t),
+      variant: "donut"
+    }
+  ) });
+}
+function TopNTableEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    TopNTable,
+    {
+      title: t("design_system.gallery.samples.content.topProducts"),
+      data: topProducts(t),
+      columns: topProductColumns(t)
+    }
+  ) });
+}
+function TopNTableEntryMaxRowsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    TopNTable,
+    {
+      title: t("design_system.gallery.samples.content.top3Products"),
+      data: topProducts(t),
+      columns: topProductColumns(t),
+      maxRows: 3
+    }
+  ) });
+}
+function TopNTableEntryEmptyPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+    TopNTable,
+    {
+      title: t("design_system.gallery.samples.content.topProducts"),
+      data: [],
+      columns: topProductColumns(t),
+      emptyMessage: t("design_system.gallery.samples.content.noSalesInThisPeriod")
+    }
+  ) });
+}
+const revenueByMonth = (t) => [
+  {
+    month: t("design_system.gallery.samples.content.jan"),
+    revenue: 48200
+  },
+  {
+    month: t("design_system.gallery.samples.content.feb"),
+    revenue: 51400
+  },
+  {
+    month: t("design_system.gallery.samples.content.mar"),
+    revenue: 47900
+  },
+  {
+    month: t("design_system.gallery.samples.content.apr"),
+    revenue: 61200
+  },
+  {
+    month: t("design_system.gallery.samples.content.may"),
+    revenue: 58600
+  },
+  {
+    month: t("design_system.gallery.samples.content.jun"),
+    revenue: 67300
+  }
 ];
-const revenueByChannel = [
-  { channel: "Online store", revenue: 182400 },
-  { channel: "Marketplace", revenue: 96800 },
-  { channel: "Retail", revenue: 64200 },
-  { channel: "Wholesale", revenue: 41500 }
+const revenueByChannel = (t) => [
+  {
+    channel: t("design_system.gallery.samples.content.onlineStore"),
+    revenue: 182400
+  },
+  {
+    channel: t("design_system.gallery.samples.content.marketplace"),
+    revenue: 96800
+  },
+  {
+    channel: t("design_system.gallery.samples.content.retail"),
+    revenue: 64200
+  },
+  {
+    channel: t("design_system.gallery.samples.content.wholesale"),
+    revenue: 41500
+  }
 ];
-const ordersByMonth = [
-  { month: "Jan", online: 320, retail: 180 },
-  { month: "Feb", online: 348, retail: 164 },
-  { month: "Mar", online: 331, retail: 196 },
-  { month: "Apr", online: 402, retail: 214 },
-  { month: "May", online: 389, retail: 205 },
-  { month: "Jun", online: 446, retail: 232 }
+const ordersByMonth = (t) => [
+  {
+    month: t("design_system.gallery.samples.content.jan"),
+    online: 320,
+    retail: 180
+  },
+  {
+    month: t("design_system.gallery.samples.content.feb"),
+    online: 348,
+    retail: 164
+  },
+  {
+    month: t("design_system.gallery.samples.content.mar"),
+    online: 331,
+    retail: 196
+  },
+  {
+    month: t("design_system.gallery.samples.content.apr"),
+    online: 402,
+    retail: 214
+  },
+  {
+    month: t("design_system.gallery.samples.content.may"),
+    online: 389,
+    retail: 205
+  },
+  {
+    month: t("design_system.gallery.samples.content.jun"),
+    online: 446,
+    retail: 232
+  }
 ];
-const ordersByStatus = [
-  { name: "Completed", value: 268 },
-  { name: "Processing", value: 84 },
-  { name: "Pending payment", value: 37 },
-  { name: "Cancelled", value: 22 }
+const ordersByStatus = (t) => [
+  {
+    name: t("design_system.gallery.samples.content.completed"),
+    value: 268
+  },
+  {
+    name: t("design_system.gallery.samples.content.processing"),
+    value: 84
+  },
+  {
+    name: t("design_system.gallery.samples.content.pendingPayment"),
+    value: 37
+  },
+  {
+    name: t("design_system.gallery.samples.content.cancelled"),
+    value: 22
+  }
 ];
 const weeklyOrdersTrend = [12, 18, 14, 22, 19, 27, 24, 31, 28, 35, 33, 41];
-const topProducts = [
-  { product: "Aurora desk lamp", orders: 412, revenue: 28840 },
-  { product: "Birch side table", orders: 366, revenue: 47580 },
-  { product: "Linen throw pillow", orders: 341, revenue: 11935 },
-  { product: "Oak bookshelf", orders: 214, revenue: 53500 },
-  { product: "Ceramic vase set", orders: 198, revenue: 8910 }
+const topProducts = (t) => [
+  {
+    product: t("design_system.gallery.samples.content.auroraDeskLamp"),
+    orders: 412,
+    revenue: 28840
+  },
+  {
+    product: t("design_system.gallery.samples.content.birchSideTable"),
+    orders: 366,
+    revenue: 47580
+  },
+  {
+    product: t("design_system.gallery.samples.content.linenThrowPillow"),
+    orders: 341,
+    revenue: 11935
+  },
+  {
+    product: t("design_system.gallery.samples.content.oakBookshelf"),
+    orders: 214,
+    revenue: 53500
+  },
+  {
+    product: t("design_system.gallery.samples.content.ceramicVaseSet"),
+    orders: 198,
+    revenue: 8910
+  }
 ];
 const formatCurrency = (value) => `\u20AC${value.toLocaleString("en-US")}`;
-const topProductColumns = [
-  { key: "product", header: "Product" },
-  { key: "orders", header: "Orders", align: "right" },
+const topProductColumns = (t) => [
+  {
+    key: "product",
+    header: t("design_system.gallery.samples.content.product")
+  },
+  {
+    key: "orders",
+    header: t("design_system.gallery.samples.content.orders"),
+    align: "right"
+  },
   {
     key: "revenue",
-    header: "Revenue",
+    header: t("design_system.gallery.samples.content.revenue"),
     align: "right",
     formatter: (value) => formatCurrency(value)
   }
@@ -63,36 +426,7 @@ const kpiCardEntry = {
     {
       id: "trend-directions",
       title: "Trend directions",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3", children: [
-        /* @__PURE__ */ jsx(
-          KpiCard,
-          {
-            title: "Revenue",
-            value: 67300,
-            prefix: "\u20AC",
-            trend: { value: 14.8, direction: "up" },
-            comparisonLabel: "vs. previous month"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          KpiCard,
-          {
-            title: "Cancelled orders",
-            value: 22,
-            trend: { value: 6.1, direction: "down" },
-            comparisonLabel: "vs. previous month"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          KpiCard,
-          {
-            title: "Active customers",
-            value: 1284,
-            trend: { value: 0, direction: "unchanged" },
-            comparisonLabel: "vs. previous month"
-          }
-        )
-      ] }),
+      render: () => /* @__PURE__ */ jsx(KpiCardEntryTrendDirectionsPreview, {}),
       code: `import { KpiCard } from '@open-mercato/ui/backend/charts'
 
 <KpiCard
@@ -106,17 +440,7 @@ const kpiCardEntry = {
     {
       id: "suffix-and-footer",
       title: "Suffix and footer slot",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ jsx(
-        KpiCard,
-        {
-          title: "Average order value",
-          value: 86.4,
-          prefix: "\u20AC",
-          suffix: "net",
-          trend: { value: 3.2, direction: "up" },
-          footer: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Weekly orders trend" }) })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(KpiCardEntrySuffixAndFooterPreview, {}),
       code: `import { KpiCard, Sparkline } from '@open-mercato/ui/backend/charts'
 
 <KpiCard
@@ -131,11 +455,7 @@ const kpiCardEntry = {
     {
       id: "states",
       title: "Loading, error and empty states",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3", children: [
-        /* @__PURE__ */ jsx(KpiCard, { title: "Loading", value: null, loading: true }),
-        /* @__PURE__ */ jsx(KpiCard, { title: "Error", value: null, error: "Failed to load metric" }),
-        /* @__PURE__ */ jsx(KpiCard, { title: "No data", value: null })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(KpiCardEntryStatesPreview, {}),
       code: `import { KpiCard } from '@open-mercato/ui/backend/charts'
 
 <KpiCard title="Loading" value={null} loading />
@@ -145,12 +465,7 @@ const kpiCardEntry = {
     {
       id: "delta-badge",
       title: "DeltaBadge (standalone)",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(DeltaBadge, { direction: "up", value: 12.4 }),
-        /* @__PURE__ */ jsx(DeltaBadge, { direction: "down", value: 4.7 }),
-        /* @__PURE__ */ jsx(DeltaBadge, { direction: "unchanged", value: 0 }),
-        /* @__PURE__ */ jsx(DeltaBadge, { direction: "up", value: 38, unit: " pts" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(KpiCardEntryDeltaBadgePreview, {}),
       code: `import { DeltaBadge } from '@open-mercato/ui/backend/charts'
 
 <DeltaBadge direction="up" value={12.4} />
@@ -168,7 +483,7 @@ const sparklineEntry = {
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Weekly orders trend" }) }),
+      render: () => /* @__PURE__ */ jsx(SparklineEntryDefaultPreview, {}),
       code: `import { Sparkline } from '@open-mercato/ui/backend/charts'
 
 <Sparkline values={[12, 18, 14, 22, 19, 27, 24, 31]} ariaLabel="Weekly orders trend" />`
@@ -176,16 +491,7 @@ const sparklineEntry = {
     {
       id: "semantic-color",
       title: "Colored via currentColor",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-primary", children: /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Orders trending up" }) }),
-        /* @__PURE__ */ jsx("span", { className: "text-destructive", children: /* @__PURE__ */ jsx(
-          Sparkline,
-          {
-            values: [...weeklyOrdersTrend].reverse(),
-            ariaLabel: "Returns trending down"
-          }
-        ) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SparklineEntrySemanticColorPreview, {}),
       code: `import { Sparkline } from '@open-mercato/ui/backend/charts'
 
 // Sparkline strokes with currentColor \u2014 set a semantic text token on the wrapper.
@@ -196,11 +502,7 @@ const sparklineEntry = {
     {
       id: "sizes",
       title: "Custom width and height",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-6 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Small trend", width: 64, height: 20 }),
-        /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Default trend" }),
-        /* @__PURE__ */ jsx(Sparkline, { values: weeklyOrdersTrend, ariaLabel: "Large trend", width: 160, height: 40 })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SparklineEntrySizesPreview, {}),
       code: `import { Sparkline } from '@open-mercato/ui/backend/charts'
 
 <Sparkline values={values} ariaLabel="Small trend" width={64} height={20} />
@@ -217,16 +519,7 @@ const barChartEntry = {
     {
       id: "basic",
       title: "Basic (revenue by month)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        BarChart,
-        {
-          title: "Revenue by month",
-          data: revenueByMonth,
-          index: "month",
-          categories: ["revenue"],
-          showLegend: false
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(BarChartEntryBasicPreview, {}),
       code: `import { BarChart } from '@open-mercato/ui/backend/charts'
 
 <BarChart
@@ -240,17 +533,7 @@ const barChartEntry = {
     {
       id: "horizontal",
       title: "Horizontal layout",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        BarChart,
-        {
-          title: "Revenue by channel",
-          data: revenueByChannel,
-          index: "channel",
-          categories: ["revenue"],
-          layout: "horizontal",
-          showLegend: false
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(BarChartEntryHorizontalPreview, {}),
       code: `import { BarChart } from '@open-mercato/ui/backend/charts'
 
 <BarChart
@@ -265,16 +548,7 @@ const barChartEntry = {
     {
       id: "multi-series",
       title: "Multiple series with legend",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        BarChart,
-        {
-          title: "Orders by month",
-          data: ordersByMonth,
-          index: "month",
-          categories: ["online", "retail"],
-          categoryLabels: { online: "Online", retail: "Retail" }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(BarChartEntryMultiSeriesPreview, {}),
       code: `import { BarChart } from '@open-mercato/ui/backend/charts'
 
 <BarChart
@@ -295,16 +569,7 @@ const lineChartEntry = {
     {
       id: "basic",
       title: "Basic (revenue by month)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        LineChart,
-        {
-          title: "Revenue by month",
-          data: revenueByMonth,
-          index: "month",
-          categories: ["revenue"],
-          showLegend: false
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(LineChartEntryBasicPreview, {}),
       code: `import { LineChart } from '@open-mercato/ui/backend/charts'
 
 <LineChart
@@ -318,17 +583,7 @@ const lineChartEntry = {
     {
       id: "area",
       title: "Area fill",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        LineChart,
-        {
-          title: "Revenue by month",
-          data: revenueByMonth,
-          index: "month",
-          categories: ["revenue"],
-          showArea: true,
-          showLegend: false
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(LineChartEntryAreaPreview, {}),
       code: `import { LineChart } from '@open-mercato/ui/backend/charts'
 
 <LineChart
@@ -343,17 +598,7 @@ const lineChartEntry = {
     {
       id: "multi-series",
       title: "Multiple series, monotone curve",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        LineChart,
-        {
-          title: "Orders by month",
-          data: ordersByMonth,
-          index: "month",
-          categories: ["online", "retail"],
-          categoryLabels: { online: "Online", retail: "Retail" },
-          curveType: "monotone"
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(LineChartEntryMultiSeriesPreview, {}),
       code: `import { LineChart } from '@open-mercato/ui/backend/charts'
 
 <LineChart
@@ -375,7 +620,7 @@ const pieChartEntry = {
     {
       id: "pie",
       title: "Pie (orders by status)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(PieChart, { title: "Orders by status", data: ordersByStatus }) }),
+      render: () => /* @__PURE__ */ jsx(PieChartEntryPiePreview, {}),
       code: `import { PieChart } from '@open-mercato/ui/backend/charts'
 
 <PieChart title="Orders by status" data={ordersByStatus} />`
@@ -383,7 +628,7 @@ const pieChartEntry = {
     {
       id: "donut",
       title: "Donut",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(PieChart, { title: "Orders by status", data: ordersByStatus, variant: "donut" }) }),
+      render: () => /* @__PURE__ */ jsx(PieChartEntryDonutPreview, {}),
       code: `import { PieChart } from '@open-mercato/ui/backend/charts'
 
 <PieChart title="Orders by status" data={ordersByStatus} variant="donut" />`
@@ -398,7 +643,7 @@ const topNTableEntry = {
     {
       id: "basic",
       title: "Top products by revenue",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(TopNTable, { title: "Top products", data: topProducts, columns: topProductColumns }) }),
+      render: () => /* @__PURE__ */ jsx(TopNTableEntryBasicPreview, {}),
       code: `import { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'
 
 const columns: TopNTableColumn<TopProductRow>[] = [
@@ -412,15 +657,7 @@ const columns: TopNTableColumn<TopProductRow>[] = [
     {
       id: "max-rows",
       title: "Capped with maxRows",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        TopNTable,
-        {
-          title: "Top 3 products",
-          data: topProducts,
-          columns: topProductColumns,
-          maxRows: 3
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(TopNTableEntryMaxRowsPreview, {}),
       code: `import { TopNTable } from '@open-mercato/ui/backend/charts'
 
 <TopNTable title="Top 3 products" data={topProducts} columns={columns} maxRows={3} />`
@@ -428,22 +665,131 @@ const columns: TopNTableColumn<TopProductRow>[] = [
     {
       id: "empty",
       title: "Empty state",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        TopNTable,
-        {
-          title: "Top products",
-          data: [],
-          columns: topProductColumns,
-          emptyMessage: "No sales in this period"
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(TopNTableEntryEmptyPreview, {}),
       code: `import { TopNTable } from '@open-mercato/ui/backend/charts'
 
 <TopNTable title="Top products" data={[]} columns={columns} emptyMessage="No sales in this period" />`
     }
   ]
 };
+const marketingWidgetsEntry = {
+  id: "marketing-widgets",
+  title: "Marketing & Sales Widgets",
+  importPath: "@open-mercato/ui/primitives/card",
+  figmaNodeId: "164628:1734",
+  variants: [
+    {
+      id: "total-sales",
+      title: "total-sales",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "total-sales" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="total-sales" />')
+    },
+    {
+      id: "total-visitors",
+      title: "total-visitors",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "total-visitors" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="total-visitors" />')
+    },
+    {
+      id: "conversion-rate",
+      title: "conversion-rate",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "conversion-rate" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="conversion-rate" />')
+    },
+    {
+      id: "user-retention",
+      title: "user-retention",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "user-retention" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="user-retention" />')
+    },
+    {
+      id: "weekly-visitors",
+      title: "weekly-visitors",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "weekly-visitors" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="weekly-visitors" />')
+    },
+    {
+      id: "visitor-channels",
+      title: "visitor-channels",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "visitor-channels" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="visitor-channels" />')
+    },
+    {
+      id: "geography",
+      title: "geography",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "geography" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="geography" />')
+    },
+    {
+      id: "realtime-visitors",
+      title: "realtime-visitors",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "realtime-visitors" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="realtime-visitors" />')
+    },
+    {
+      id: "marketing-channels",
+      title: "marketing-channels",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "marketing-channels" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="marketing-channels" />')
+    },
+    {
+      id: "product-performance",
+      title: "product-performance",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "product-performance" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="product-performance" />')
+    },
+    {
+      id: "shipping-tracking",
+      title: "shipping-tracking",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "shipping-tracking" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="shipping-tracking" />')
+    },
+    {
+      id: "my-products",
+      title: "my-products",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "my-products" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="my-products" />')
+    },
+    {
+      id: "product-categories",
+      title: "product-categories",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "product-categories" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="product-categories" />')
+    },
+    {
+      id: "customer-segments",
+      title: "customer-segments",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "customer-segments" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="customer-segments" />')
+    },
+    {
+      id: "sales-channels",
+      title: "sales-channels",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "sales-channels" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="sales-channels" />')
+    },
+    {
+      id: "campaign-data",
+      title: "campaign-data",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "campaign-data" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="campaign-data" />')
+    },
+    {
+      id: "support-analytics",
+      title: "support-analytics",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "support-analytics" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="support-analytics" />')
+    },
+    {
+      id: "recent-activities",
+      title: "recent-activities",
+      render: () => /* @__PURE__ */ jsx(MarketingWidgetDemo, { kind: "recent-activities" }),
+      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind="recent-activities" />')
+    }
+  ]
+};
 const entries = [
+  marketingWidgetsEntry,
   kpiCardEntry,
   sparklineEntry,
   barChartEntry,