@open-mercato/ui 0.6.3-develop.3894.1.352abf4240 → 0.6.3

package/dist/backend/charts/BarChartImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/BarChartImpl.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from 'recharts'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\nimport type { BarChartDataItem, BarChartProps } from './BarChart'\n\ntype ImplProps = Pick<\n  BarChartProps,\n  | 'data'\n  | 'index'\n  | 'categories'\n  | 'colors'\n  | 'layout'\n  | 'valueFormatter'\n  | 'showLegend'\n  | 'showGridLines'\n  | 'categoryLabels'\n> & {\n  valueFormatter: (value: number) => string\n}\n\nexport default function BarChartImpl({\n  data,\n  index,\n  categories,\n  colors,\n  layout = 'vertical',\n  valueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  categoryLabels,\n}: ImplProps) {\n  const isHorizontal = layout === 'horizontal'\n  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200\n  const getBarColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={chartHeight}>\n      <RechartsBarChart\n        data={data}\n        layout={isHorizontal ? 'vertical' : 'horizontal'}\n        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n      >\n        {showGridLines && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n        )}\n        <XAxis\n          type={isHorizontal ? 'number' : 'category'}\n          dataKey={isHorizontal ? undefined : index}\n          tickFormatter={isHorizontal ? valueFormatter : undefined}\n          tick={{ fontSize: 11 }}\n        />\n        <YAxis\n          type={isHorizontal ? 'category' : 'number'}\n          dataKey={isHorizontal ? index : undefined}\n          tickFormatter={isHorizontal ? undefined : valueFormatter}\n          width={isHorizontal ? 90 : 50}\n          interval={0}\n          tick={{ fontSize: 10 }}\n        />\n        <Tooltip\n          content={\n            <ChartTooltipContent\n              valueFormatter={valueFormatter}\n              categoryLabels={categoryLabels}\n              labelFormatter={(label, payload) => {\n                const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined\n                const item = entry?.payload\n                return item?.[index] ? String(item[index]) : label\n              }}\n            />\n          }\n          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}\n        />\n        {showLegend && categories.length > 1 && (\n          <Legend verticalAlign=\"top\" height={36} />\n        )}\n        {categories.map((category, idx) => (\n          <Bar\n            key={category}\n            dataKey={category}\n            fill={getBarColor(idx)}\n            radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}\n          />\n        ))}\n      </RechartsBarChart>\n    </ResponsiveContainer>\n  )\n}\n"],
+  "mappings": ";AAgDM,SAMI,KANJ;AA7CN;AAAA,EACE,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,yBAAyB;AAkBxC,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AACF,GAAc;AACZ,QAAM,eAAe,WAAW;AAChC,QAAM,cAAc,eAAe,KAAK,IAAI,KAAK,KAAK,SAAS,EAAE,IAAI;AACrE,QAAM,cAAc,CAAC,QAAwB,kBAAkB,SAAS,GAAG,GAAG,GAAG;AAEjF,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,aACxC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,eAAe,aAAa;AAAA,MACpC,QAAQ,EAAE,KAAK,GAAG,OAAO,IAAI,MAAM,IAAI,QAAQ,EAAE;AAAA,MAEhD;AAAA,yBACC,oBAAC,iBAAc,iBAAgB,OAAM,QAAO,sBAAqB;AAAA,QAEnE;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,WAAW;AAAA,YAChC,SAAS,eAAe,SAAY;AAAA,YACpC,eAAe,eAAe,iBAAiB;AAAA,YAC/C,MAAM,EAAE,UAAU,GAAG;AAAA;AAAA,QACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,aAAa;AAAA,YAClC,SAAS,eAAe,QAAQ;AAAA,YAChC,eAAe,eAAe,SAAY;AAAA,YAC1C,OAAO,eAAe,KAAK;AAAA,YAC3B,UAAU;AAAA,YACV,MAAM,EAAE,UAAU,GAAG;AAAA;AAAA,QACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,gBAAgB,CAAC,OAAO,YAAY;AAClC,wBAAM,QAAQ,UAAU,CAAC;AACzB,wBAAM,OAAO,OAAO;AACpB,yBAAO,OAAO,KAAK,IAAI,OAAO,KAAK,KAAK,CAAC,IAAI;AAAA,gBAC/C;AAAA;AAAA,YACF;AAAA,YAEF,QAAQ,EAAE,MAAM,qBAAqB,SAAS,IAAI;AAAA;AAAA,QACpD;AAAA,QACC,cAAc,WAAW,SAAS,KACjC,oBAAC,UAAO,eAAc,OAAM,QAAQ,IAAI;AAAA,QAEzC,WAAW,IAAI,CAAC,UAAU,QACzB;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS;AAAA,YACT,MAAM,YAAY,GAAG;AAAA,YACrB,QAAQ,eAAe,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA;AAAA,UAH5C;AAAA,QAIP,CACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "names": []
+}

package/dist/backend/charts/LineChart.js

@@ -1,19 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  LineChart as RechartsLineChart,
-  AreaChart as RechartsAreaChart,
-  Line,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
 function defaultValueFormatter(value) {
   if (Math.abs(value) >= 1e6) {
     return `${(value / 1e6).toFixed(1)}M`;
@@ -23,6 +11,10 @@ function defaultValueFormatter(value) {
   }
   return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
 }
+const LineChartImpl = dynamic(() => import("./LineChartImpl.js"), {
+  ssr: false,
+  loading: () => /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+});
 function LineChart({
   title,
   data,
@@ -41,9 +33,6 @@ function LineChart({
   emptyMessage = "No data available",
   categoryLabels
 }) {
-  const getLineColor = (idx) => {
-    return resolveChartColor(colors?.[idx], idx);
-  };
   if (error) {
     return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
       title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
@@ -62,86 +51,24 @@ function LineChart({
       /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
     ] });
   }
-  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
   return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
     title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-      ChartComponent,
+    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(
+      LineChartImpl,
       {
         data,
-        margin: { top: 5, right: 10, left: 10, bottom: 5 },
-        children: [
-          showGridLines && /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              strokeDasharray: "3 3",
-              stroke: "hsl(var(--border))"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: index,
-              tick: { fontSize: 12 },
-              tickLine: false,
-              axisLine: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              tickFormatter: valueFormatter,
-              tick: { fontSize: 12 },
-              tickLine: false,
-              axisLine: false,
-              width: 56
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
-              cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
-            }
-          ),
-          showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
-            Legend,
-            {
-              verticalAlign: "top",
-              height: 36,
-              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
-            }
-          ),
-          showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
-            Area,
-            {
-              type: curveType,
-              dataKey: category,
-              stroke: getLineColor(idx),
-              fill: getLineColor(idx),
-              fillOpacity: 0.2,
-              strokeWidth: 2,
-              connectNulls,
-              dot: false,
-              activeDot: { r: 4, strokeWidth: 0 }
-            },
-            category
-          )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
-            Line,
-            {
-              type: curveType,
-              dataKey: category,
-              stroke: getLineColor(idx),
-              strokeWidth: 2,
-              connectNulls,
-              dot: false,
-              activeDot: { r: 4, strokeWidth: 0 }
-            },
-            category
-          ))
-        ]
+        index,
+        categories,
+        colors,
+        showArea,
+        valueFormatter,
+        showLegend,
+        showGridLines,
+        curveType,
+        connectNulls,
+        categoryLabels
       }
-    ) }) })
+    ) })
   ] });
 }
 var LineChart_default = LineChart;

package/dist/backend/charts/LineChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/charts/LineChart.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  LineChart as RechartsLineChart,\n  AreaChart as RechartsAreaChart,\n  Line,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type LineChartDataItem = Record<string, string | number | null | undefined>\n\nexport type LineChartProps = {\n  title?: string\n  data: LineChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  showArea?: boolean\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  curveType?: 'linear' | 'natural' | 'monotone' | 'step'\n  connectNulls?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function LineChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  showArea = false,\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: LineChartProps) {\n  const getLineColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  if (error) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart\n\n  return (\n    <div className={`rounded-lg border bg-card p-4 ${className}`}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ChartComponent\n            data={data}\n            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}\n          >\n            {showGridLines && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"hsl(var(--border))\"\n              />\n            )}\n            <XAxis\n              dataKey={index}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n            />\n            <YAxis\n              tickFormatter={valueFormatter}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n              width={56}\n            />\n            <Tooltip\n              content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}\n              cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}\n            />\n            {showLegend && categories.length > 1 && (\n              <Legend\n                verticalAlign=\"top\"\n                height={36}\n                formatter={(value) => (\n                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n                )}\n              />\n            )}\n            {showArea\n              ? categories.map((category, idx) => (\n                  <Area\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    fill={getLineColor(idx)}\n                    fillOpacity={0.2}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))\n              : categories.map((category, idx) => (\n                  <Line\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))}\n          </ChartComponent>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default LineChart\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport type LineChartDataItem = Record<string, string | number | null | undefined>\n\nexport type LineChartProps = {\n  title?: string\n  data: LineChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  showArea?: boolean\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  curveType?: 'linear' | 'natural' | 'monotone' | 'step'\n  connectNulls?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nconst LineChartImpl = dynamic(() => import('./LineChartImpl'), {\n  ssr: false,\n  loading: () => (\n    <div className=\"flex h-48 items-center justify-center\">\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  ),\n})\n\nexport function LineChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  showArea = false,\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n}: LineChartProps) {\n  if (error) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={`rounded-lg border bg-card p-4 ${className}`}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <LineChartImpl\n          data={data}\n          index={index}\n          categories={categories}\n          colors={colors}\n          showArea={showArea}\n          valueFormatter={valueFormatter}\n          showLegend={showLegend}\n          showGridLines={showGridLines}\n          curveType={curveType}\n          connectNulls={connectNulls}\n          categoryLabels={categoryLabels}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default LineChart\n"],
+  "mappings": ";AAyCM,cAyBA,YAzBA;AAtCN,OAAO,aAAa;AACpB,SAAS,eAAe;AAuBxB,SAAS,sBAAsB,OAAuB;AACpD,MAAI,KAAK,IAAI,KAAK,KAAK,KAAW;AAChC,WAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAAA,EAC1C;AACA,MAAI,KAAK,IAAI,KAAK,KAAK,KAAO;AAC5B,WAAO,IAAI,QAAQ,KAAO,QAAQ,CAAC,CAAC;AAAA,EACtC;AACA,SAAO,MAAM,eAAe,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrE;AAEA,MAAM,gBAAgB,QAAQ,MAAM,OAAO,iBAAiB,GAAG;AAAA,EAC7D,KAAK;AAAA,EACL,SAAS,MACP,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAEJ,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AACF,GAAmB;AACjB,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,4BAA4B,iBAAM,GACjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,KAAK,WAAW,GAAG;AAC9B,WACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,iCAAiC,wBAAa,GAC7D;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,iCAAiC,SAAS,IACvD;AAAA,aAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,IACjF,oBAAC,SAAI,WAAU,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;",
   "names": []
 }

package/dist/backend/charts/LineChartImpl.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  LineChart as RechartsLineChart,
+  AreaChart as RechartsAreaChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function LineChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  showArea = false,
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  curveType = "monotone",
+  connectNulls = true,
+  categoryLabels
+}) {
+  const getLineColor = (idx) => resolveChartColor(colors?.[idx], idx);
+  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    ChartComponent,
+    {
+      data,
+      margin: { top: 5, right: 10, left: 10, bottom: 5 },
+      children: [
+        showGridLines && /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            strokeDasharray: "3 3",
+            stroke: "hsl(var(--border))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: index,
+            tick: { fontSize: 12 },
+            tickLine: false,
+            axisLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tickFormatter: valueFormatter,
+            tick: { fontSize: 12 },
+            tickLine: false,
+            axisLine: false,
+            width: 56
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
+            cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
+          }
+        ),
+        showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
+          Legend,
+          {
+            verticalAlign: "top",
+            height: 36,
+            formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+          }
+        ),
+        showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: curveType,
+            dataKey: category,
+            stroke: getLineColor(idx),
+            fill: getLineColor(idx),
+            fillOpacity: 0.2,
+            strokeWidth: 2,
+            connectNulls,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 }
+          },
+          category
+        )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curveType,
+            dataKey: category,
+            stroke: getLineColor(idx),
+            strokeWidth: 2,
+            connectNulls,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 0 }
+          },
+          category
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  LineChartImpl as default
+};
+//# sourceMappingURL=LineChartImpl.js.map

package/dist/backend/charts/LineChartImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/LineChartImpl.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  LineChart as RechartsLineChart,\n  AreaChart as RechartsAreaChart,\n  Line,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\nimport type { LineChartProps } from './LineChart'\n\ntype ImplProps = Pick<\n  LineChartProps,\n  | 'data'\n  | 'index'\n  | 'categories'\n  | 'colors'\n  | 'showArea'\n  | 'valueFormatter'\n  | 'showLegend'\n  | 'showGridLines'\n  | 'curveType'\n  | 'connectNulls'\n  | 'categoryLabels'\n> & {\n  valueFormatter: (value: number) => string\n}\n\nexport default function LineChartImpl({\n  data,\n  index,\n  categories,\n  colors,\n  showArea = false,\n  valueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  categoryLabels,\n}: ImplProps) {\n  const getLineColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)\n  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <ChartComponent\n        data={data}\n        margin={{ top: 5, right: 10, left: 10, bottom: 5 }}\n      >\n        {showGridLines && (\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n          />\n        )}\n        <XAxis\n          dataKey={index}\n          tick={{ fontSize: 12 }}\n          tickLine={false}\n          axisLine={false}\n        />\n        <YAxis\n          tickFormatter={valueFormatter}\n          tick={{ fontSize: 12 }}\n          tickLine={false}\n          axisLine={false}\n          width={56}\n        />\n        <Tooltip\n          content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}\n          cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}\n        />\n        {showLegend && categories.length > 1 && (\n          <Legend\n            verticalAlign=\"top\"\n            height={36}\n            formatter={(value) => (\n              <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n            )}\n          />\n        )}\n        {showArea\n          ? categories.map((category, idx) => (\n              <Area\n                key={category}\n                type={curveType}\n                dataKey={category}\n                stroke={getLineColor(idx)}\n                fill={getLineColor(idx)}\n                fillOpacity={0.2}\n                strokeWidth={2}\n                connectNulls={connectNulls}\n                dot={false}\n                activeDot={{ r: 4, strokeWidth: 0 }}\n              />\n            ))\n          : categories.map((category, idx) => (\n              <Line\n                key={category}\n                type={curveType}\n                dataKey={category}\n                stroke={getLineColor(idx)}\n                strokeWidth={2}\n                connectNulls={connectNulls}\n                dot={false}\n                activeDot={{ r: 4, strokeWidth: 0 }}\n              />\n            ))}\n      </ChartComponent>\n    </ResponsiveContainer>\n  )\n}\n"],
+  "mappings": ";AAqDM,SAKI,KALJ;AAlDN;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,yBAAyB;AAoBxC,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AACF,GAAc;AACZ,QAAM,eAAe,CAAC,QAAwB,kBAAkB,SAAS,GAAG,GAAG,GAAG;AAClF,QAAM,iBAAiB,WAAW,oBAAoB;AAEtD,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,EAAE,KAAK,GAAG,OAAO,IAAI,MAAM,IAAI,QAAQ,EAAE;AAAA,MAEhD;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAgB;AAAA,YAChB,QAAO;AAAA;AAAA,QACT;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAM,EAAE,UAAU,GAAG;AAAA,YACrB,UAAU;AAAA,YACV,UAAU;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAe;AAAA,YACf,MAAM,EAAE,UAAU,GAAG;AAAA,YACrB,UAAU;AAAA,YACV,UAAU;AAAA,YACV,OAAO;AAAA;AAAA,QACT;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,oBAAC,uBAAoB,gBAAgC,gBAAgC;AAAA,YAC9F,QAAQ,EAAE,QAAQ,gCAAgC,iBAAiB,MAAM;AAAA;AAAA,QAC3E;AAAA,QACC,cAAc,WAAW,SAAS,KACjC;AAAA,UAAC;AAAA;AAAA,YACC,eAAc;AAAA,YACd,QAAQ;AAAA,YACR,WAAW,CAAC,UACV,oBAAC,UAAK,OAAO,EAAE,OAAO,gCAAgC,UAAU,OAAO,GAAI,iBAAM;AAAA;AAAA,QAErF;AAAA,QAED,WACG,WAAW,IAAI,CAAC,UAAU,QACxB;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN,SAAS;AAAA,YACT,QAAQ,aAAa,GAAG;AAAA,YACxB,MAAM,aAAa,GAAG;AAAA,YACtB,aAAa;AAAA,YACb,aAAa;AAAA,YACb;AAAA,YACA,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA;AAAA,UAT7B;AAAA,QAUP,CACD,IACD,WAAW,IAAI,CAAC,UAAU,QACxB;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN,SAAS;AAAA,YACT,QAAQ,aAAa,GAAG;AAAA,YACxB,aAAa;AAAA,YACb;AAAA,YACA,KAAK;AAAA,YACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA;AAAA,UAP7B;AAAA,QAQP,CACD;AAAA;AAAA;AAAA,EACP,GACF;AAEJ;",
+  "names": []
+}

package/dist/backend/charts/PieChart.js

@@ -1,17 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import {
-  PieChart as RechartsPieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  Label
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
-import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
 function defaultValueFormatter(value) {
   if (Math.abs(value) >= 1e6) {
     return `${(value / 1e6).toFixed(1)}M`;
@@ -21,6 +12,10 @@ function defaultValueFormatter(value) {
   }
   return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
 }
+const PieChartImpl = dynamic(() => import("./PieChartImpl.js"), {
+  ssr: false,
+  loading: () => /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+});
 function PieChart({
   title,
   data,
@@ -34,9 +29,6 @@ function PieChart({
   className = "",
   emptyMessage = "No data available"
 }) {
-  const getSliceColor = (idx) => {
-    return resolveChartColor(colors?.[idx], idx);
-  };
   const total = React.useMemo(() => {
     return data.reduce((sum, item) => sum + item.value, 0);
   }, [data]);
@@ -60,57 +52,20 @@ function PieChart({
       /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
     ] });
   }
-  const innerRadius = variant === "donut" ? "60%" : 0;
-  const outerRadius = "80%";
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
     title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RechartsPieChart, { children: [
-      /* @__PURE__ */ jsxs(
-        Pie,
-        {
-          data,
-          dataKey: "value",
-          nameKey: "name",
-          cx: "50%",
-          cy: "40%",
-          innerRadius,
-          outerRadius,
-          paddingAngle: 2,
-          strokeWidth: 0,
-          children: [
-            data.map((_, idx) => /* @__PURE__ */ jsx(Cell, { fill: getSliceColor(idx) }, `cell-${idx}`)),
-            showLabel && variant === "donut" && /* @__PURE__ */ jsx(
-              Label,
-              {
-                value: valueFormatter(total),
-                position: "center",
-                className: "fill-foreground text-2xl font-bold"
-              }
-            )
-          ]
-        }
-      ),
-      showTooltip && /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          content: /* @__PURE__ */ jsx(
-            ChartTooltipContent,
-            {
-              valueFormatter,
-              hideLabel: true
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Legend,
-        {
-          verticalAlign: "bottom",
-          height: 36,
-          formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
-        }
-      )
-    ] }) }) })
+    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(
+      PieChartImpl,
+      {
+        data,
+        colors,
+        variant,
+        valueFormatter,
+        showLabel,
+        showTooltip,
+        total
+      }
+    ) })
   ] });
 }
 var PieChart_default = PieChart;

package/dist/backend/charts/PieChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/charts/PieChart.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  PieChart as RechartsPieChart,\n  Pie,\n  Cell,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n  Label,\n} from 'recharts'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type PieChartDataItem = {\n  name: string\n  value: number\n}\n\nexport type PieChartProps = {\n  title?: string\n  data: PieChartDataItem[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  variant?: 'pie' | 'donut'\n  valueFormatter?: (value: number) => string\n  showLabel?: boolean\n  showTooltip?: boolean\n  className?: string\n  emptyMessage?: string\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function PieChart({\n  title,\n  data,\n  loading,\n  error,\n  colors,\n  variant = 'donut',\n  valueFormatter = defaultValueFormatter,\n  showLabel = true,\n  showTooltip = true,\n  className = '',\n  emptyMessage = 'No data available',\n}: PieChartProps) {\n  const getSliceColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  const total = React.useMemo(() => {\n    return data.reduce((sum, item) => sum + item.value, 0)\n  }, [data])\n\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const innerRadius = variant === 'donut' ? '60%' : 0\n  const outerRadius = '80%'\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsPieChart>\n            <Pie\n              data={data}\n              dataKey=\"value\"\n              nameKey=\"name\"\n              cx=\"50%\"\n              cy=\"40%\"\n              innerRadius={innerRadius}\n              outerRadius={outerRadius}\n              paddingAngle={2}\n              strokeWidth={0}\n            >\n              {data.map((_, idx) => (\n                <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />\n              ))}\n              {showLabel && variant === 'donut' && (\n                <Label\n                  value={valueFormatter(total)}\n                  position=\"center\"\n                  className=\"fill-foreground text-2xl font-bold\"\n                />\n              )}\n            </Pie>\n            {showTooltip && (\n              <Tooltip\n                content={\n                  <ChartTooltipContent\n                    valueFormatter={valueFormatter}\n                    hideLabel\n                  />\n                }\n              />\n            )}\n            <Legend\n              verticalAlign=\"bottom\"\n              height={36}\n              formatter={(value) => (\n                <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n              )}\n            />\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default PieChart\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport type PieChartDataItem = {\n  name: string\n  value: number\n}\n\nexport type PieChartProps = {\n  title?: string\n  data: PieChartDataItem[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  variant?: 'pie' | 'donut'\n  valueFormatter?: (value: number) => string\n  showLabel?: boolean\n  showTooltip?: boolean\n  className?: string\n  emptyMessage?: string\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nconst PieChartImpl = dynamic(() => import('./PieChartImpl'), {\n  ssr: false,\n  loading: () => (\n    <div className=\"flex h-48 items-center justify-center\">\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  ),\n})\n\nexport function PieChart({\n  title,\n  data,\n  loading,\n  error,\n  colors,\n  variant = 'donut',\n  valueFormatter = defaultValueFormatter,\n  showLabel = true,\n  showTooltip = true,\n  className = '',\n  emptyMessage = 'No data available',\n}: PieChartProps) {\n  const total = React.useMemo(() => {\n    return data.reduce((sum, item) => sum + item.value, 0)\n  }, [data])\n\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <PieChartImpl\n          data={data}\n          colors={colors}\n          variant={variant}\n          valueFormatter={valueFormatter}\n          showLabel={showLabel}\n          showTooltip={showTooltip}\n          total={total}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default PieChart\n"],
+  "mappings": ";AAuCM,cA2BA,YA3BA;AArCN,YAAY,WAAW;AACvB,OAAO,aAAa;AACpB,SAAS,eAAe;AAqBxB,SAAS,sBAAsB,OAAuB;AACpD,MAAI,KAAK,IAAI,KAAK,KAAK,KAAW;AAChC,WAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAAA,EAC1C;AACA,MAAI,KAAK,IAAI,KAAK,KAAK,KAAO;AAC5B,WAAO,IAAI,QAAQ,KAAO,QAAQ,CAAC,CAAC;AAAA,EACtC;AACA,SAAO,MAAM,eAAe,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrE;AAEA,MAAM,eAAe,QAAQ,MAAM,OAAO,gBAAgB,GAAG;AAAA,EAC3D,KAAK;AAAA,EACL,SAAS,MACP,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAEJ,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AACjB,GAAkB;AAChB,QAAM,QAAQ,MAAM,QAAQ,MAAM;AAChC,WAAO,KAAK,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,eAAe,aAAa,iCAAiC,SAAS,KAAK;AAEjF,MAAI,OAAO;AACT,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,4BAA4B,iBAAM,GACjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,iCAAgC,GACrD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,KAAK,WAAW,GAAG;AAC9B,WACE,qBAAC,SAAI,WAAW,cACb;AAAA,eAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACjF,oBAAC,SAAI,WAAU,yCACb,8BAAC,OAAE,WAAU,iCAAiC,wBAAa,GAC7D;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,cACb;AAAA,aAAS,oBAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,IACjF,oBAAC,SAAI,WAAU,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/dist/backend/charts/PieChartImpl.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Label
+} from "recharts";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function PieChartImpl({
+  data,
+  colors,
+  variant = "donut",
+  valueFormatter,
+  showLabel = true,
+  showTooltip = true,
+  total
+}) {
+  const getSliceColor = (idx) => resolveChartColor(colors?.[idx], idx);
+  const innerRadius = variant === "donut" ? "60%" : 0;
+  const outerRadius = "80%";
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsxs(
+      Pie,
+      {
+        data,
+        dataKey: "value",
+        nameKey: "name",
+        cx: "50%",
+        cy: "40%",
+        innerRadius,
+        outerRadius,
+        paddingAngle: 2,
+        strokeWidth: 0,
+        children: [
+          data.map((_, idx) => /* @__PURE__ */ jsx(Cell, { fill: getSliceColor(idx) }, `cell-${idx}`)),
+          showLabel && variant === "donut" && /* @__PURE__ */ jsx(
+            Label,
+            {
+              value: valueFormatter(total),
+              position: "center",
+              className: "fill-foreground text-2xl font-bold"
+            }
+          )
+        ]
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: /* @__PURE__ */ jsx(
+          ChartTooltipContent,
+          {
+            valueFormatter,
+            hideLabel: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+      }
+    )
+  ] }) });
+}
+export {
+  PieChartImpl as default
+};
+//# sourceMappingURL=PieChartImpl.js.map

package/dist/backend/charts/PieChartImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/PieChartImpl.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  PieChart as RechartsPieChart,\n  Pie,\n  Cell,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n  Label,\n} from 'recharts'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\nimport type { PieChartProps } from './PieChart'\n\ntype ImplProps = Pick<\n  PieChartProps,\n  'data' | 'colors' | 'variant' | 'valueFormatter' | 'showLabel' | 'showTooltip'\n> & {\n  valueFormatter: (value: number) => string\n  total: number\n}\n\nexport default function PieChartImpl({\n  data,\n  colors,\n  variant = 'donut',\n  valueFormatter,\n  showLabel = true,\n  showTooltip = true,\n  total,\n}: ImplProps) {\n  const getSliceColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)\n  const innerRadius = variant === 'donut' ? '60%' : 0\n  const outerRadius = '80%'\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsPieChart>\n        <Pie\n          data={data}\n          dataKey=\"value\"\n          nameKey=\"name\"\n          cx=\"50%\"\n          cy=\"40%\"\n          innerRadius={innerRadius}\n          outerRadius={outerRadius}\n          paddingAngle={2}\n          strokeWidth={0}\n        >\n          {data.map((_, idx) => (\n            <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />\n          ))}\n          {showLabel && variant === 'donut' && (\n            <Label\n              value={valueFormatter(total)}\n              position=\"center\"\n              className=\"fill-foreground text-2xl font-bold\"\n            />\n          )}\n        </Pie>\n        {showTooltip && (\n          <Tooltip\n            content={\n              <ChartTooltipContent\n                valueFormatter={valueFormatter}\n                hideLabel\n              />\n            }\n          />\n        )}\n        <Legend\n          verticalAlign=\"bottom\"\n          height={36}\n          formatter={(value) => (\n            <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n          )}\n        />\n      </RechartsPieChart>\n    </ResponsiveContainer>\n  )\n}\n"],
+  "mappings": ";AAuCQ,SAYI,KAZJ;AApCR;AAAA,EACE,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,yBAAyB;AAWxC,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AACF,GAAc;AACZ,QAAM,gBAAgB,CAAC,QAAwB,kBAAkB,SAAS,GAAG,GAAG,GAAG;AACnF,QAAM,cAAc,YAAY,UAAU,QAAQ;AAClD,QAAM,cAAc;AAEpB,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,+BAAC,oBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAQ;AAAA,QACR,IAAG;AAAA,QACH,IAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,aAAa;AAAA,QAEZ;AAAA,eAAK,IAAI,CAAC,GAAG,QACZ,oBAAC,QAAyB,MAAM,cAAc,GAAG,KAAtC,QAAQ,GAAG,EAA8B,CACrD;AAAA,UACA,aAAa,YAAY,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,eAAe,KAAK;AAAA,cAC3B,UAAS;AAAA,cACT,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,SACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAS;AAAA;AAAA,QACX;AAAA;AAAA,IAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW,CAAC,UACV,oBAAC,UAAK,OAAO,EAAE,OAAO,gCAAgC,UAAU,OAAO,GAAI,iBAAM;AAAA;AAAA,IAErF;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/backend/dashboard/DashboardScreen.js

@@ -11,6 +11,7 @@ import { getDashboardWidgets, loadDashboardWidgetModule } from "./widgetRegistry
 import { cn } from "@open-mercato/shared/lib/utils";
 import { GripVertical, Info, Plus, RefreshCw, Settings2, Trash2, X, Loader2 } from "lucide-react";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { InjectionSpot } from "../injection/InjectionSpot.js";
 function sizeClass(size) {
   switch (size) {
@@ -39,6 +40,7 @@ function generateId() {
 }
 function DashboardScreen() {
   const t = useT();
+  const organizationScopeVersion = useOrganizationScopeVersion();
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [hasRegisteredWidgets, setHasRegisteredWidgets] = React.useState(true);
@@ -109,7 +111,7 @@ function DashboardScreen() {
   }, [t]);
   React.useEffect(() => {
     load();
-  }, [load]);
+  }, [load, organizationScopeVersion]);
   const metaById = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const meta of widgetCatalog) map.set(meta.id, meta);
@@ -450,6 +452,12 @@ function DashboardWidgetCard({
     setLoadError(null);
     loadDashboardWidgetModule(meta.loaderKey).then((loaded) => {
       if (cancelled) return;
+      if (!loaded) {
+        setModule(null);
+        setLoadError(t("dashboard.widget.loadError"));
+        setLoading(false);
+        return;
+      }
       setModule(loaded);
       setLoading(false);
     }).catch((err) => {