@almadar/ui 4.51.14 → 4.51.15

package/dist/runtime/index.js

@@ -3887,6 +3887,67 @@ var init_Radio = __esm({
     Radio.displayName = "Radio";
   }
 });
+var COLOR_VAR, Sparkline;
+var init_Sparkline = __esm({
+  "components/atoms/Sparkline.tsx"() {
+    init_cn();
+    COLOR_VAR = {
+      primary: "var(--color-primary)",
+      success: "var(--color-success)",
+      warning: "var(--color-warning)",
+      error: "var(--color-error)",
+      info: "var(--color-info)",
+      muted: "var(--color-muted-foreground)"
+    };
+    Sparkline = ({
+      data,
+      color = "auto",
+      width = 80,
+      height = 32,
+      strokeWidth = 2,
+      fill = false,
+      className
+    }) => {
+      if (data.length < 2) return null;
+      const pad = 2;
+      const min = Math.min(...data);
+      const max = Math.max(...data);
+      const range = max - min || 1;
+      const points = data.map((v, i) => {
+        const x = pad + i / (data.length - 1) * (width - pad * 2);
+        const y = pad + (1 - (v - min) / range) * (height - pad * 2);
+        return `${x},${y}`;
+      }).join(" ");
+      const resolvedColor = color === "auto" ? data[data.length - 1] >= data[0] ? COLOR_VAR.success : COLOR_VAR.error : COLOR_VAR[color];
+      const areaPath = fill ? `M ${pad},${height - pad} L ${points.split(" ").join(" L ")} L ${width - pad},${height - pad} Z` : null;
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          className: cn("flex-shrink-0", className),
+          "aria-hidden": "true",
+          children: [
+            areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: resolvedColor, opacity: 0.15 }),
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                fill: "none",
+                stroke: resolvedColor,
+                strokeWidth,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                points
+              }
+            )
+          ]
+        }
+      );
+    };
+    Sparkline.displayName = "Sparkline";
+  }
+});
 var Switch;
 var init_Switch = __esm({
   "components/atoms/Switch.tsx"() {
@@ -9164,7 +9225,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect68, useRef: useRef65, useCallback: useCallback110, useState: useState98 } = React80__default;
+      const { useEffect: useEffect68, useRef: useRef65, useCallback: useCallback112, useState: useState99 } = React80__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -9209,8 +9270,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState98(null);
-        const handleMapClick = useCallback110((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState99(null);
+        const handleMapClick = useCallback112((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -9219,7 +9280,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback110((marker) => {
+        const handleMarkerClick = useCallback112((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -19014,7 +19075,7 @@ var init_CastleTemplate = __esm({
     CastleTemplate.displayName = "CastleTemplate";
   }
 });
-var CHART_COLORS, BarChart, PieChart, LineChart, Chart;
+var CHART_COLORS, seriesColor, monthFormatter, formatTimeLabel, BarChart, PieChart, LineChart, ScatterChart, Chart;
 var init_Chart = __esm({
   "components/organisms/Chart.tsx"() {
     "use client";
@@ -19034,38 +19095,159 @@ var init_Chart = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
-    BarChart = ({ data, height, showValues }) => {
-      const maxValue = Math.max(...data.map((d) => d.value), 1);
-      return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "end", className: "w-full", style: { height }, children: data.map((point, idx) => {
-        const barHeight = point.value / maxValue * 100;
-        const color = point.color || CHART_COLORS[idx % CHART_COLORS.length];
-        return /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "center", flex: true, className: "min-w-0", children: [
-          showValues && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: point.value }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: cn(
-                "w-full rounded-t-sm transition-all duration-500 ease-out min-h-[4px]"
-              ),
-              style: {
-                height: `${barHeight}%`,
-                backgroundColor: color
-              }
+    seriesColor = (series, idx) => series.color ?? CHART_COLORS[idx % CHART_COLORS.length];
+    monthFormatter = new Intl.DateTimeFormat(void 0, {
+      month: "short",
+      year: "2-digit"
+    });
+    formatTimeLabel = (raw) => {
+      const parsed = new Date(raw);
+      if (Number.isNaN(parsed.getTime())) return raw;
+      return monthFormatter.format(parsed);
+    };
+    BarChart = ({ series, height, showValues, stack, timeAxis, histogram = false, onPointClick }) => {
+      const categories = useMemo(() => {
+        const set = [];
+        const seen = /* @__PURE__ */ new Set();
+        for (const s of series) {
+          for (const p2 of s.data) {
+            if (!seen.has(p2.label)) {
+              seen.add(p2.label);
+              set.push(p2.label);
             }
-          ),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              color: "secondary",
-              className: "truncate w-full text-center",
-              children: point.label
+          }
+        }
+        return set;
+      }, [series]);
+      const valueAt = useCallback(
+        (s, label) => {
+          const p2 = s.data.find((d) => d.label === label);
+          return p2 ? p2.value : 0;
+        },
+        []
+      );
+      const columnTotals = useMemo(() => {
+        if (stack === "none") return null;
+        return categories.map(
+          (label) => series.reduce((sum, s) => sum + valueAt(s, label), 0)
+        );
+      }, [categories, series, stack, valueAt]);
+      const maxValue = useMemo(() => {
+        if (stack === "normalize") return 100;
+        if (stack === "stack" && columnTotals) {
+          return Math.max(...columnTotals, 1);
+        }
+        let m = 1;
+        for (const s of series) {
+          for (const p2 of s.data) if (p2.value > m) m = p2.value;
+        }
+        return m;
+      }, [series, stack, columnTotals]);
+      return /* @__PURE__ */ jsx(
+        HStack,
+        {
+          gap: histogram ? "none" : "xs",
+          align: "end",
+          className: "w-full",
+          style: { height },
+          children: categories.map((label, catIdx) => {
+            const displayLabel = timeAxis ? formatTimeLabel(label) : label;
+            if (stack === "none") {
+              return /* @__PURE__ */ jsxs(
+                VStack,
+                {
+                  gap: "xs",
+                  align: "center",
+                  flex: true,
+                  className: "min-w-0",
+                  children: [
+                    /* @__PURE__ */ jsx(HStack, { gap: histogram ? "none" : "xs", align: "end", className: "w-full", style: { height: "100%" }, children: series.map((s, sIdx) => {
+                      const value = valueAt(s, label);
+                      const barHeight = value / maxValue * 100;
+                      const color = seriesColor(s, sIdx);
+                      return /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          className: cn(
+                            "rounded-t-sm transition-all duration-500 ease-out min-h-[4px] cursor-pointer hover:opacity-80",
+                            histogram ? "flex-1 mx-0" : "flex-1"
+                          ),
+                          style: {
+                            height: `${barHeight}%`,
+                            backgroundColor: color
+                          },
+                          onClick: () => onPointClick?.(
+                            { label, value, color },
+                            s.name
+                          ),
+                          title: `${s.name}: ${value}`
+                        },
+                        s.name
+                      );
+                    }) }),
+                    showValues && series.length === 1 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "tabular-nums", children: valueAt(series[0], label) }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: "truncate w-full text-center",
+                        children: displayLabel
+                      }
+                    )
+                  ]
+                },
+                label
+              );
             }
-          )
-        ] }, point.label);
-      }) });
+            const total = columnTotals?.[catIdx] ?? 1;
+            return /* @__PURE__ */ jsxs(
+              VStack,
+              {
+                gap: "xs",
+                align: "center",
+                flex: true,
+                className: "min-w-0",
+                children: [
+                  /* @__PURE__ */ jsx(VStack, { gap: "none", className: "w-full", style: { height: "100%" }, justify: "end", children: series.map((s, sIdx) => {
+                    const value = valueAt(s, label);
+                    const ratio = stack === "normalize" ? total === 0 ? 0 : value / total * 100 : value / maxValue * 100;
+                    const color = seriesColor(s, sIdx);
+                    return /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        className: "w-full transition-all duration-500 ease-out cursor-pointer hover:opacity-80",
+                        style: {
+                          height: `${ratio}%`,
+                          backgroundColor: color
+                        },
+                        onClick: () => onPointClick?.(
+                          { label, value, color },
+                          s.name
+                        ),
+                        title: `${s.name}: ${value}`
+                      },
+                      s.name
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "caption",
+                      color: "secondary",
+                      className: "truncate w-full text-center",
+                      children: displayLabel
+                    }
+                  )
+                ]
+              },
+              label
+            );
+          })
+        }
+      );
     };
-    PieChart = ({ data, height, showValues, donut = false }) => {
+    PieChart = ({ data, height, showValues, donut = false, onPointClick }) => {
       const total = data.reduce((sum, d) => sum + d.value, 0);
       const size = Math.min(height, 200);
       const radius = size / 2 - 8;
@@ -19111,7 +19293,11 @@ var init_Chart = __esm({
               fill: seg.color,
               stroke: "var(--color-card)",
               strokeWidth: "2",
-              className: "transition-opacity duration-200 hover:opacity-80"
+              className: "transition-opacity duration-200 hover:opacity-80 cursor-pointer",
+              onClick: () => onPointClick?.(
+                { label: seg.label, value: seg.value, color: seg.color },
+                "default"
+              )
             },
             idx
           )),
@@ -19146,56 +19332,243 @@ var init_Chart = __esm({
         ] }, idx)) })
       ] });
     };
-    LineChart = ({ data, height, showValues, fill = false }) => {
-      const maxValue = Math.max(...data.map((d) => d.value), 1);
+    LineChart = ({ series, height, showValues, fill = false, timeAxis, onPointClick }) => {
       const width = 400;
       const padding = { top: 20, right: 20, bottom: 30, left: 40 };
       const chartWidth = width - padding.left - padding.right;
       const chartHeight = height - padding.top - padding.bottom;
-      const points = useMemo(() => {
-        return data.map((point, idx) => ({
-          x: padding.left + idx / Math.max(data.length - 1, 1) * chartWidth,
-          y: padding.top + chartHeight - point.value / maxValue * chartHeight,
-          ...point
-        }));
-      }, [data, maxValue, chartWidth, chartHeight, padding]);
-      const linePath = points.map((p2, i) => `${i === 0 ? "M" : "L"} ${p2.x} ${p2.y}`).join(" ");
-      const areaPath = `${linePath} L ${points[points.length - 1]?.x ?? 0} ${padding.top + chartHeight} L ${padding.left} ${padding.top + chartHeight} Z`;
-      return /* @__PURE__ */ jsxs("svg", { width: "100%", height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", children: [
-        [0, 0.25, 0.5, 0.75, 1].map((frac) => {
-          const y = padding.top + chartHeight * (1 - frac);
-          return /* @__PURE__ */ jsx(
-            "line",
-            {
-              x1: padding.left,
-              y1: y,
-              x2: width - padding.right,
-              y2: y,
-              stroke: "var(--color-border)",
-              strokeDasharray: "4 4",
-              opacity: 0.5
-            },
-            frac
-          );
-        }),
-        fill && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "var(--color-primary)", opacity: 0.1 }),
-        /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: "var(--color-primary)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-        points.map((p2, idx) => /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx("circle", { cx: p2.x, cy: p2.y, r: "4", fill: "var(--color-card)", stroke: "var(--color-primary)", strokeWidth: "2" }),
-          showValues && /* @__PURE__ */ jsx("text", { x: p2.x, y: p2.y - 10, textAnchor: "middle", fill: "var(--color-foreground)", fontSize: "10", fontWeight: "500", children: p2.value }),
-          /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: p2.x,
-              y: height - 8,
-              textAnchor: "middle",
-              fill: "var(--color-muted-foreground)",
-              fontSize: "9",
-              children: p2.label
+      const labels = useMemo(() => {
+        const seen = /* @__PURE__ */ new Set();
+        const out = [];
+        for (const s of series) {
+          for (const p2 of s.data) {
+            if (!seen.has(p2.label)) {
+              seen.add(p2.label);
+              out.push(p2.label);
             }
-          )
-        ] }, idx))
-      ] });
+          }
+        }
+        return out;
+      }, [series]);
+      const maxValue = useMemo(() => {
+        let m = 1;
+        for (const s of series) {
+          for (const p2 of s.data) if (p2.value > m) m = p2.value;
+        }
+        return m;
+      }, [series]);
+      const xFor = useCallback(
+        (idx) => padding.left + idx / Math.max(labels.length - 1, 1) * chartWidth,
+        [labels.length, chartWidth, padding.left]
+      );
+      const yFor = useCallback(
+        (value) => padding.top + chartHeight - value / maxValue * chartHeight,
+        [maxValue, chartHeight, padding.top]
+      );
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "100%",
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            [0, 0.25, 0.5, 0.75, 1].map((frac) => {
+              const y = padding.top + chartHeight * (1 - frac);
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: padding.left,
+                  y1: y,
+                  x2: width - padding.right,
+                  y2: y,
+                  stroke: "var(--color-border)",
+                  strokeDasharray: "4 4",
+                  opacity: 0.5
+                },
+                frac
+              );
+            }),
+            series.map((s, sIdx) => {
+              const color = seriesColor(s, sIdx);
+              const points = labels.map((label, idx) => {
+                const point = s.data.find((d) => d.label === label);
+                return {
+                  x: xFor(idx),
+                  y: yFor(point ? point.value : 0),
+                  value: point ? point.value : 0,
+                  label
+                };
+              });
+              const linePath = points.map((p2, i) => `${i === 0 ? "M" : "L"} ${p2.x} ${p2.y}`).join(" ");
+              const areaPath = `${linePath} L ${points[points.length - 1]?.x ?? 0} ${padding.top + chartHeight} L ${padding.left} ${padding.top + chartHeight} Z`;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                fill && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: areaPath,
+                    fill: color,
+                    opacity: series.length > 1 ? 0.08 : 0.1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: linePath,
+                    fill: "none",
+                    stroke: color,
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeDasharray: s.dashed ? "6 4" : void 0
+                  }
+                ),
+                points.map((p2, idx) => /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: p2.x,
+                      cy: p2.y,
+                      r: "4",
+                      fill: "var(--color-card)",
+                      stroke: color,
+                      strokeWidth: "2",
+                      className: "cursor-pointer",
+                      onClick: () => onPointClick?.(
+                        { label: p2.label, value: p2.value, color },
+                        s.name
+                      )
+                    }
+                  ),
+                  showValues && series.length === 1 && /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: p2.x,
+                      y: p2.y - 10,
+                      textAnchor: "middle",
+                      fill: "var(--color-foreground)",
+                      fontSize: "10",
+                      fontWeight: "500",
+                      children: p2.value
+                    }
+                  )
+                ] }, idx))
+              ] }, s.name);
+            }),
+            labels.map((label, idx) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: xFor(idx),
+                y: height - 8,
+                textAnchor: "middle",
+                fill: "var(--color-muted-foreground)",
+                fontSize: "9",
+                children: timeAxis ? formatTimeLabel(label) : label
+              },
+              label
+            ))
+          ]
+        }
+      );
+    };
+    ScatterChart = ({ data, height, onPointClick }) => {
+      const width = 400;
+      const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+      const chartWidth = width - padding.left - padding.right;
+      const chartHeight = height - padding.top - padding.bottom;
+      const { minX, maxX, minY, maxY } = useMemo(() => {
+        if (data.length === 0) {
+          return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
+        }
+        let mnX = data[0].x;
+        let mxX = data[0].x;
+        let mnY = data[0].y;
+        let mxY = data[0].y;
+        for (const p2 of data) {
+          if (p2.x < mnX) mnX = p2.x;
+          if (p2.x > mxX) mxX = p2.x;
+          if (p2.y < mnY) mnY = p2.y;
+          if (p2.y > mxY) mxY = p2.y;
+        }
+        return { minX: mnX, maxX: mxX, minY: mnY, maxY: mxY };
+      }, [data]);
+      const rangeX = maxX - minX || 1;
+      const rangeY = maxY - minY || 1;
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "100%",
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            [0, 0.25, 0.5, 0.75, 1].map((frac) => {
+              const y = padding.top + chartHeight * (1 - frac);
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: padding.left,
+                  y1: y,
+                  x2: width - padding.right,
+                  y2: y,
+                  stroke: "var(--color-border)",
+                  strokeDasharray: "4 4",
+                  opacity: 0.5
+                },
+                frac
+              );
+            }),
+            data.map((p2, idx) => {
+              const cx = padding.left + (p2.x - minX) / rangeX * chartWidth;
+              const cy = padding.top + chartHeight - (p2.y - minY) / rangeY * chartHeight;
+              const r = p2.size ?? 5;
+              const color = p2.color ?? CHART_COLORS[idx % CHART_COLORS.length];
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r,
+                  fill: color,
+                  opacity: 0.7,
+                  className: "cursor-pointer hover:opacity-100",
+                  onClick: () => onPointClick?.(
+                    {
+                      label: p2.label ?? `(${p2.x}, ${p2.y})`,
+                      value: p2.y,
+                      color
+                    },
+                    "default"
+                  ),
+                  children: /* @__PURE__ */ jsx("title", { children: p2.label ?? `(${p2.x}, ${p2.y})` })
+                },
+                idx
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: padding.left,
+                y: height - 8,
+                fill: "var(--color-muted-foreground)",
+                fontSize: "9",
+                children: minX.toFixed(1)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: width - padding.right,
+                y: height - 8,
+                textAnchor: "end",
+                fill: "var(--color-muted-foreground)",
+                fontSize: "9",
+                children: maxX.toFixed(1)
+              }
+            )
+          ]
+        }
+      );
     };
     Chart = ({
       title,
@@ -19203,9 +19576,13 @@ var init_Chart = __esm({
       chartType = "bar",
       series,
       data: simpleData,
+      scatterData,
       height = 200,
       showLegend = true,
       showValues = false,
+      stack = "none",
+      timeAxis = false,
+      drillEvent,
       actions,
       entity,
       isLoading = false,
@@ -19222,11 +19599,25 @@ var init_Chart = __esm({
         },
         [eventBus]
       );
-      const normalizedData = useMemo(() => {
-        if (simpleData) return simpleData;
-        if (series && series.length > 0) return series[0].data;
+      const handlePointClick = useCallback(
+        (point, seriesName) => {
+          if (drillEvent) {
+            eventBus.emit(`UI:${drillEvent}`, {
+              label: point.label,
+              value: point.value,
+              seriesLabel: seriesName === "default" ? void 0 : seriesName
+            });
+          }
+        },
+        [drillEvent, eventBus]
+      );
+      const normalizedSeries = useMemo(() => {
+        if (series && series.length > 0) return series;
+        if (simpleData) return [{ name: "default", data: simpleData }];
         return [];
       }, [simpleData, series]);
+      const firstSeriesData = normalizedSeries[0]?.data ?? [];
+      const hasContent = chartType === "scatter" ? (scatterData?.length ?? 0) > 0 : normalizedSeries.some((s) => s.data.length > 0);
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: "Loading chart...", className });
       }
@@ -19240,7 +19631,7 @@ var init_Chart = __esm({
           }
         );
       }
-      if (normalizedData.length === 0) {
+      if (!hasContent) {
         return /* @__PURE__ */ jsx(EmptyState, { title: t("empty.noData"), description: t("empty.noData"), className });
       }
       return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
@@ -19261,18 +19652,84 @@ var init_Chart = __esm({
           )) })
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: "w-full", children: [
-          chartType === "bar" && /* @__PURE__ */ jsx(BarChart, { data: normalizedData, height, showValues }),
-          chartType === "line" && /* @__PURE__ */ jsx(LineChart, { data: normalizedData, height, showValues }),
-          chartType === "area" && /* @__PURE__ */ jsx(LineChart, { data: normalizedData, height, showValues, fill: true }),
-          chartType === "pie" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend }),
-          chartType === "donut" && /* @__PURE__ */ jsx(PieChart, { data: normalizedData, height, showValues: showLegend, donut: true })
+          chartType === "bar" && /* @__PURE__ */ jsx(
+            BarChart,
+            {
+              series: normalizedSeries,
+              height,
+              showValues,
+              stack,
+              timeAxis,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "histogram" && /* @__PURE__ */ jsx(
+            BarChart,
+            {
+              series: normalizedSeries,
+              height,
+              showValues,
+              stack: "none",
+              timeAxis: false,
+              histogram: true,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "line" && /* @__PURE__ */ jsx(
+            LineChart,
+            {
+              series: normalizedSeries,
+              height,
+              showValues,
+              timeAxis,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "area" && /* @__PURE__ */ jsx(
+            LineChart,
+            {
+              series: normalizedSeries,
+              height,
+              showValues,
+              timeAxis,
+              fill: true,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "pie" && /* @__PURE__ */ jsx(
+            PieChart,
+            {
+              data: firstSeriesData,
+              height,
+              showValues: showLegend,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "donut" && /* @__PURE__ */ jsx(
+            PieChart,
+            {
+              data: firstSeriesData,
+              height,
+              showValues: showLegend,
+              donut: true,
+              onPointClick: handlePointClick
+            }
+          ),
+          chartType === "scatter" && /* @__PURE__ */ jsx(
+            ScatterChart,
+            {
+              data: scatterData ?? [],
+              height,
+              onPointClick: handlePointClick
+            }
+          )
         ] }),
-        showLegend && series && series.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", justify: "center", wrap: true, children: series.map((s, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+        showLegend && normalizedSeries.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", justify: "center", wrap: true, children: normalizedSeries.map((s, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
           /* @__PURE__ */ jsx(
             Box,
             {
               className: "w-3 h-3 rounded-full flex-shrink-0",
-              style: { backgroundColor: s.color || CHART_COLORS[idx % CHART_COLORS.length] }
+              style: { backgroundColor: seriesColor(s, idx) }
             }
           ),
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: s.name })
@@ -24110,6 +24567,151 @@ var init_FlipCard = __esm({
     FlipCard.displayName = "FlipCard";
   }
 });
+function toISODate(d) {
+  return d.toISOString().slice(0, 10);
+}
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function startOfQuarter(d) {
+  return new Date(d.getFullYear(), Math.floor(d.getMonth() / 3) * 3, 1);
+}
+function startOfYear(d) {
+  return new Date(d.getFullYear(), 0, 1);
+}
+function daysAgo(n) {
+  const d = /* @__PURE__ */ new Date();
+  d.setDate(d.getDate() - n);
+  return d;
+}
+var DEFAULT_PRESETS, DateRangePicker;
+var init_DateRangePicker = __esm({
+  "components/molecules/DateRangePicker.tsx"() {
+    "use client";
+    init_cn();
+    init_Button();
+    init_Input();
+    init_Stack();
+    init_Typography();
+    init_useEventBus();
+    DEFAULT_PRESETS = [
+      {
+        label: "Last 7 days",
+        value: "7d",
+        range: () => ({ from: toISODate(daysAgo(7)), to: toISODate(/* @__PURE__ */ new Date()) })
+      },
+      {
+        label: "Last 30 days",
+        value: "30d",
+        range: () => ({ from: toISODate(daysAgo(30)), to: toISODate(/* @__PURE__ */ new Date()) })
+      },
+      {
+        label: "This Month",
+        value: "month",
+        range: () => ({ from: toISODate(startOfMonth(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
+      },
+      {
+        label: "This Quarter",
+        value: "quarter",
+        range: () => ({ from: toISODate(startOfQuarter(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
+      },
+      {
+        label: "YTD",
+        value: "ytd",
+        range: () => ({ from: toISODate(startOfYear(/* @__PURE__ */ new Date())), to: toISODate(/* @__PURE__ */ new Date()) })
+      }
+    ];
+    DateRangePicker = ({
+      from: fromProp,
+      to: toProp,
+      event,
+      onChange,
+      presets = DEFAULT_PRESETS,
+      fromLabel = "From",
+      toLabel = "To",
+      className
+    }) => {
+      const eventBus = useEventBus();
+      const [from, setFrom] = useState(fromProp ?? "");
+      const [to, setTo] = useState(toProp ?? "");
+      const [activePreset, setActivePreset] = useState(null);
+      const emit = useCallback(
+        (range) => {
+          onChange?.(range);
+          if (event) eventBus.emit(`UI:${event}`, range);
+        },
+        [onChange, event, eventBus]
+      );
+      const handleFromChange = useCallback(
+        (next) => {
+          setFrom(next);
+          setActivePreset(null);
+          emit({ from: next, to });
+        },
+        [to, emit]
+      );
+      const handleToChange = useCallback(
+        (next) => {
+          setTo(next);
+          setActivePreset(null);
+          emit({ from, to: next });
+        },
+        [from, emit]
+      );
+      const handlePreset = useCallback(
+        (preset) => {
+          const range = preset.range();
+          setFrom(range.from);
+          setTo(range.to);
+          setActivePreset(preset.value);
+          emit(range);
+        },
+        [emit]
+      );
+      const presetButtons = useMemo(
+        () => presets.map((preset) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: activePreset === preset.value ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => handlePreset(preset),
+            children: preset.label
+          },
+          preset.value
+        )),
+        [presets, activePreset, handlePreset]
+      );
+      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn(className), children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "end", children: [
+          /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fromLabel }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                value: from,
+                onChange: (e) => handleFromChange(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: toLabel }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                value: to,
+                onChange: (e) => handleToChange(e.target.value)
+              }
+            )
+          ] })
+        ] }),
+        presets.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, children: presetButtons })
+      ] });
+    };
+    DateRangePicker.displayName = "DateRangePicker";
+  }
+});
 var DEFAULT_OPTIONS, DateRangeSelector;
 var init_DateRangeSelector = __esm({
   "components/molecules/DateRangeSelector.tsx"() {
@@ -27081,7 +27683,9 @@ var init_StatDisplay = __esm({
     init_Typography();
     init_Box();
     init_Stack();
+    init_Sparkline();
     init_Icon();
+    init_useEventBus();
     variantColor = {
       default: "text-foreground",
       primary: "text-primary",
@@ -27096,6 +27700,10 @@ var init_StatDisplay = __esm({
       max,
       target,
       trend,
+      trendPolarity = "higher-is-better",
+      trendFormat = "absolute",
+      sparklineData,
+      clickEvent,
       prefix,
       suffix,
       icon: iconProp,
@@ -27109,6 +27717,10 @@ var init_StatDisplay = __esm({
       isLoading = false,
       error = null
     }) => {
+      const eventBus = useEventBus();
+      const handleClick = useCallback(() => {
+        if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { metricLabel: label });
+      }, [clickEvent, eventBus, label]);
       const ResolvedIcon = typeof iconProp === "string" ? resolveIcon(iconProp) : null;
       const iconSizes3 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
@@ -27119,7 +27731,10 @@ var init_StatDisplay = __esm({
       const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
       const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
       const trendUp = showTrend && trend > 0;
-      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
+      const trendIsGood = trendPolarity === "lower-is-better" ? !trendUp : trendUp;
+      const trendMagnitude = Math.abs(trend);
+      const trendSuffix = trendFormat === "percent" ? "%" : "";
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${trendMagnitude}${trendSuffix}` : "";
       if (error) {
         return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -27130,38 +27745,57 @@ var init_StatDisplay = __esm({
         ] }) });
       }
       if (compact) {
-        return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: cn("items-center", className), children: [
-          ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes3[size], iconColor) }),
-          typeof iconProp !== "string" && iconProp,
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
-          showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
-        ] });
+        return /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            gap: "sm",
+            className: cn("items-center", clickEvent && "cursor-pointer hover:opacity-80", className),
+            onClick: clickEvent ? handleClick : void 0,
+            children: [
+              ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes3[size], iconColor) }),
+              typeof iconProp !== "string" && iconProp,
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+              showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendIsGood ? "text-success" : "text-error"), children: trendLabel }),
+              sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data: sparklineData, color: "auto", width: 60, height: 20 })
+            ]
+          }
+        );
       }
-      return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
-            showTrend && /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "caption",
-                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
-                children: trendLabel
-              }
-            )
-          ] }),
-          showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
-              style: { width: `${targetPct}%` }
-            }
-          ) })
-        ] }),
-        (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes3[size], iconColor) }) : iconProp })
-      ] }) });
+      return /* @__PURE__ */ jsx(
+        Card,
+        {
+          className: cn(padSizes[size], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          onClick: clickEvent ? handleClick : void 0,
+          children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
+            /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
+              /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+                showTrend && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    className: cn("font-semibold pb-1", trendIsGood ? "text-success" : "text-error"),
+                    children: trendLabel
+                  }
+                )
+              ] }),
+              showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+                  style: { width: `${targetPct}%` }
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "end", children: [
+              (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes3[size], iconColor) }) : iconProp }),
+              sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data: sparklineData, color: "auto" })
+            ] })
+          ] })
+        }
+      );
     };
     StatDisplay.displayName = "StatDisplay";
   }
@@ -41505,6 +42139,7 @@ var init_StatCard = __esm({
     init_Box();
     init_Stack();
     init_Button();
+    init_Sparkline();
     init_useEventBus();
     init_useTranslate();
     init_Icon();
@@ -41674,32 +42309,7 @@ var init_StatCard = __esm({
           ] }),
           /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "end", children: [
             Icon3 && /* @__PURE__ */ jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsx(Icon3, { className: cn("h-6 w-6", iconColor) }) }),
-            sparklineData && sparklineData.length > 1 && (() => {
-              const w = 80;
-              const h = 32;
-              const pad = 2;
-              const min = Math.min(...sparklineData);
-              const max = Math.max(...sparklineData);
-              const range = max - min || 1;
-              const points = sparklineData.map((v, i) => {
-                const x = pad + i / (sparklineData.length - 1) * (w - pad * 2);
-                const y = pad + (1 - (v - min) / range) * (h - pad * 2);
-                return `${x},${y}`;
-              }).join(" ");
-              const trending = sparklineData[sparklineData.length - 1] >= sparklineData[0];
-              const strokeColor = trending ? "var(--color-success)" : "var(--color-error)";
-              return /* @__PURE__ */ jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
-                "polyline",
-                {
-                  fill: "none",
-                  stroke: strokeColor,
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  points
-                }
-              ) });
-            })()
+            sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data: sparklineData, color: "auto" })
           ] })
         ] }),
         action && /* @__PURE__ */ jsxs(
@@ -43597,6 +44207,7 @@ var init_component_registry_generated = __esm({
     init_DataGrid();
     init_DataList();
     init_DataTable();
+    init_DateRangePicker();
     init_DateRangeSelector();
     init_DayCell();
     init_DebuggerBoard();
@@ -43729,6 +44340,7 @@ var init_component_registry_generated = __esm({
     init_Skeleton();
     init_SocialProof();
     init_SortableList();
+    init_Sparkline();
     init_Split();
     init_SplitPane();
     init_SplitSection();
@@ -43877,6 +44489,7 @@ var init_component_registry_generated = __esm({
       "DataGrid": DataGrid,
       "DataList": DataList,
       "DataTable": DataTable,
+      "DateRangePicker": DateRangePicker,
       "DateRangeSelector": DateRangeSelector,
       "DayCell": DayCell,
       "DebuggerBoard": DebuggerBoard,
@@ -44038,6 +44651,7 @@ var init_component_registry_generated = __esm({
       "SortableList": SortableList,
       "Spacer": SpacerPattern,
       "SpacerPattern": SpacerPattern,
+      "Sparkline": Sparkline,
       "Spinner": SpinnerPattern,
       "SpinnerPattern": SpinnerPattern,
       "Split": Split,