@fayz-ai/ui 0.1.7 → 0.2.1

package/dist/chunk-7TBDPNLY.cjs

@@ -0,0 +1,649 @@
+'use strict';
+
+var chunkD6SXPF4F_cjs = require('./chunk-D6SXPF4F.cjs');
+var chunkVVVZO2LE_cjs = require('./chunk-VVVZO2LE.cjs');
+var React = require('react');
+var LucideIcons = require('lucide-react');
+var core = require('@fayz-ai/core');
+var jsxRuntime = require('react/jsx-runtime');
+var recharts = require('recharts');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
+
+var SPAN_CLASS = {
+  1: "",
+  2: "sm:col-span-2",
+  3: "sm:col-span-2 lg:col-span-3",
+  4: "sm:col-span-2 lg:col-span-4"
+};
+function DashboardGrid({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkVVVZO2LE_cjs.cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: SPAN_CLASS[Math.min(Math.max(item.span ?? 1, 1), 4)] ?? "", children: item.node }, item.id)) });
+}
+
+// src/dashboard/layout.ts
+function resolveDashboardLayout(registered, appConfig, userPrefs, forceVisibleByDefault = false) {
+  const overrides = /* @__PURE__ */ new Map();
+  const merge = (cfg) => {
+    for (const w of cfg?.widgets ?? []) {
+      overrides.set(w.id, { ...overrides.get(w.id), ...w });
+    }
+  };
+  merge(appConfig);
+  merge(userPrefs);
+  return registered.map((def, index) => {
+    const o = overrides.get(def.id);
+    const baseVisible = forceVisibleByDefault ? true : def.defaultVisible ?? true;
+    const visible = o?.visible ?? baseVisible;
+    const order = o?.order ?? def.defaultOrder ?? index;
+    const span = Math.min(Math.max(o?.span ?? def.span ?? 1, 1), 4);
+    return { def, visible, order, span };
+  }).filter((x) => x.visible).sort((a, b) => a.order - b.order).map(({ def, span, order }) => ({ def, span, order }));
+}
+var KEY = (surface, scope) => `fayz.dashboard.prefs.${scope}.${surface}`;
+function read(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function useDashboardPreferences(surface, scope = "home") {
+  const key = KEY(surface, scope);
+  const [prefs, setPrefs] = React__namespace.useState(() => read(key));
+  React__namespace.useEffect(() => {
+    setPrefs(read(key));
+  }, [key]);
+  const save = React__namespace.useCallback((next) => {
+    setPrefs(next);
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(next));
+      } catch {
+      }
+    }
+  }, [key]);
+  const setVisible = React__namespace.useCallback((widgetId, visible) => {
+    setPrefs((cur) => {
+      const widgets = [...cur?.widgets ?? []];
+      const i = widgets.findIndex((w) => w.id === widgetId);
+      if (i >= 0) widgets[i] = { ...widgets[i], visible };
+      else widgets.push({ id: widgetId, visible });
+      const next = { ...cur, widgets };
+      if (typeof window !== "undefined") {
+        try {
+          window.localStorage.setItem(key, JSON.stringify(next));
+        } catch {
+        }
+      }
+      return next;
+    });
+  }, [key]);
+  const reset = React__namespace.useCallback(() => {
+    setPrefs(null);
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.removeItem(key);
+      } catch {
+      }
+    }
+  }, [key]);
+  return { prefs, save, setVisible, reset };
+}
+var DEFAULT_RANGE_OPTIONS = ["7d", "30d", "90d"];
+var DashboardRangeContext = React__namespace.createContext(null);
+function useDashboardRange() {
+  return React__namespace.useContext(DashboardRangeContext);
+}
+function DashboardRangeProvider({
+  options = DEFAULT_RANGE_OPTIONS,
+  defaultRange,
+  onChange,
+  children
+}) {
+  const [range, setRangeState] = React__namespace.useState(defaultRange ?? options[1] ?? options[0] ?? "30d");
+  const setRange = React__namespace.useCallback((r) => {
+    setRangeState(r);
+    onChange?.(r);
+  }, [onChange]);
+  const value = React__namespace.useMemo(() => ({ range, setRange, options }), [range, setRange, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardRangeContext.Provider, { value, children });
+}
+function DashboardRangeControl({ className }) {
+  const ctx = useDashboardRange();
+  if (!ctx) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkD6SXPF4F_cjs.SegmentedControl,
+    {
+      options: ctx.options,
+      value: ctx.range,
+      onChange: ctx.setRange,
+      className,
+      "aria-label": "Time range"
+    }
+  );
+}
+function DashboardCustomizeMenu({ widgets, visibleIds, onToggle, onReset, label }) {
+  const t = core.useTranslation();
+  if (widgets.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Dropdown, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Button, { variant: "outline", size: "sm", className: "gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+      label ?? "Customize"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.DropdownContent, { align: "end", className: "max-h-[70vh] w-60 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.DropdownLabel, { children: label ?? "Show widgets" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.DropdownSeparator, {}),
+      widgets.map((w) => /* @__PURE__ */ jsxRuntime.jsx(
+        chunkD6SXPF4F_cjs.DropdownCheckboxItem,
+        {
+          checked: visibleIds.has(w.id),
+          onCheckedChange: (checked) => onToggle(w.id, Boolean(checked)),
+          onSelect: (e) => e.preventDefault(),
+          children: t(w.title)
+        },
+        w.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.DropdownSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.DropdownItem, { onSelect: () => onReset(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.RotateCcw, { className: "mr-2 h-3.5 w-3.5" }),
+        "Reset to defaults"
+      ] })
+    ] })
+  ] });
+}
+function HoverHide({ id, onHide, children }) {
+  if (!onHide) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative h-full", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onHide(id),
+        title: "Hide widget",
+        "aria-label": "Hide widget",
+        className: "absolute right-2 top-2 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-background/90 text-muted-foreground opacity-0 shadow-sm transition-opacity hover:text-foreground group-hover:opacity-100",
+        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.EyeOff, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function toGridItems(laidOut, onHide) {
+  return laidOut.map(({ def, span }) => {
+    const Component = core.resolvePluginComponent(def);
+    const node = Component ? /* @__PURE__ */ jsxRuntime.jsx(Component, { ...def.props ?? {} }) : null;
+    return { id: def.id, span, node: /* @__PURE__ */ jsxRuntime.jsx(HoverHide, { id: def.id, onHide, children: node }) };
+  });
+}
+var DashboardNavigateContext = React__namespace.createContext(
+  (path) => core.hashRouterAdapter().navigate(path)
+);
+var DashboardNavigateProvider = DashboardNavigateContext.Provider;
+function useDashboardNavigate() {
+  return React__namespace.useContext(DashboardNavigateContext);
+}
+function WidgetGrid({ widgets, appLayout, surface }) {
+  const { prefs, setVisible } = useDashboardPreferences(surface);
+  const laidOut = resolveDashboardLayout(widgets, appLayout, prefs ?? void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardGrid, { items: toGridItems(laidOut, (id) => setVisible(id, false)) });
+}
+function DashboardCanvas({
+  surface,
+  domain,
+  title,
+  subtitle,
+  showHeader = true,
+  appLayout,
+  range,
+  customizable = true,
+  customizeLabel,
+  initialVisibility,
+  onNavigate,
+  className
+}) {
+  const runtime = core.usePluginRuntime();
+  const widgets = core.getDashboardWidgets(runtime, { surface, domain });
+  const rangeOpts = range ? range === true ? {} : range : null;
+  const forceAll = (initialVisibility ?? (surface === "plugin-home" ? "all" : "default")) === "all";
+  const { prefs, setVisible, reset } = useDashboardPreferences(surface, domain ?? "home");
+  const laidOut = resolveDashboardLayout(widgets, appLayout, prefs ?? void 0, forceAll);
+  const visibleIds = React__namespace.useMemo(() => new Set(laidOut.map((w) => w.def.id)), [laidOut]);
+  const hasControls = Boolean(rangeOpts) || customizable && widgets.length > 0;
+  const headerBlock = showHeader && (title || subtitle) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }) : null,
+    subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle }) : null
+  ] }) : null;
+  const topRow = headerBlock || hasControls ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    headerBlock ?? /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+    hasControls ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      customizable && widgets.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        DashboardCustomizeMenu,
+        {
+          widgets,
+          visibleIds,
+          onToggle: setVisible,
+          onReset: reset,
+          label: customizeLabel
+        }
+      ) : null,
+      rangeOpts ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRangeControl, {}) : null
+    ] }) : null
+  ] }) : null;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className ?? "space-y-6 p-6", children: [
+    topRow,
+    widgets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardTitle, { children: "Welcome!" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardDescription, { children: "Your dashboard will show key metrics and information here." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Enable plugins or register dashboard widgets to populate this view." }) })
+    ] }) : laidOut.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardContent, { className: "p-6 text-sm text-muted-foreground", children: "All widgets are hidden. Use \u201CCustomize\u201D to choose what to show." }) }) : /* @__PURE__ */ jsxRuntime.jsx(DashboardGrid, { items: toGridItems(laidOut) })
+  ] });
+  const navWrapped = onNavigate ? /* @__PURE__ */ jsxRuntime.jsx(DashboardNavigateProvider, { value: onNavigate, children: content }) : content;
+  return rangeOpts ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRangeProvider, { options: rangeOpts.options, defaultRange: rangeOpts.default, onChange: rangeOpts.onChange, children: navWrapped }) : navWrapped;
+}
+function renderIcon(icon, className = "h-4 w-4") {
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    const Comp = LucideIcons__namespace[icon];
+    return Comp ? React__namespace.createElement(Comp, { className }) : null;
+  }
+  return React__namespace.createElement(icon, { className });
+}
+function formatKpiValue(value, format, currency) {
+  const locale = currency?.locale ?? "pt-BR";
+  switch (format) {
+    case "currency":
+      return new Intl.NumberFormat(locale, { style: "currency", currency: currency?.code ?? "BRL", maximumFractionDigits: 0 }).format(value);
+    case "percent":
+      return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)}%`;
+    case "duration":
+      return `${Math.round(value)} min`;
+    default:
+      return new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+  }
+}
+function deriveTrend(current, previous, explicit) {
+  if (explicit) return explicit;
+  if (previous == null) return void 0;
+  return current > previous ? "up" : current < previous ? "down" : "neutral";
+}
+function TrendChip({ trend, delta, invert }) {
+  if (trend === "neutral") return null;
+  const good = invert ? trend === "down" : trend === "up";
+  const Icon = trend === "up" ? LucideIcons.TrendingUp : LucideIcons.TrendingDown;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkVVVZO2LE_cjs.cn(
+    "inline-flex items-center gap-0.5 text-xs font-medium",
+    good ? "text-emerald-600" : "text-rose-600"
+  ), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3" }),
+    delta != null ? `${delta > 0 ? "+" : ""}${delta}%` : null
+  ] });
+}
+function trendColor(trend, invert) {
+  if (!trend || trend === "neutral") return "hsl(var(--info))";
+  const good = invert ? trend === "down" : trend === "up";
+  return good ? "#10b981" : "#f43f5e";
+}
+function Sparkline({ data, color }) {
+  const gid = React__namespace.useId();
+  if (!data || data.length < 2) return null;
+  const W = 96, H = 32, P = 3;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const span = max - min || 1;
+  const step = (W - P * 2) / (data.length - 1);
+  const pts = data.map((d, i) => {
+    const x = P + i * step;
+    const y = P + (H - P * 2) * (1 - (d - min) / span);
+    return [x, y];
+  });
+  const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+  const area = `${line} L${pts[pts.length - 1][0].toFixed(1)},${H} L${pts[0][0].toFixed(1)},${H} Z`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${W} ${H}`, className: "h-8 w-24 shrink-0 overflow-visible", preserveAspectRatio: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: `url(#${gid})` }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+  ] });
+}
+function Gauge({ value, goal, color, children }) {
+  const pct = goal > 0 ? Math.min(1, Math.max(0, value / goal)) : 0;
+  const R = 40, CX = 50, CY = 46, SW = 9;
+  const len = Math.PI * R;
+  const d = `M ${CX - R} ${CY} A ${R} ${R} 0 0 1 ${CX + R} ${CY}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto w-full max-w-[160px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 100 52", className: "w-full", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: "hsl(var(--muted))", strokeWidth: SW, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: color,
+          strokeWidth: SW,
+          strokeLinecap: "round",
+          strokeDasharray: len,
+          strokeDashoffset: len * (1 - pct)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 text-center text-2xl font-semibold tracking-tight text-foreground", children })
+  ] });
+}
+function KpiCard(props) {
+  const { label, icon, sub, format, currency, invertTrend } = props;
+  const [computed, setComputed] = React__namespace.useState(null);
+  const [errored, setErrored] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (!props.compute) return;
+    let cancelled = false;
+    props.compute().then((v) => {
+      if (!cancelled) setComputed(v);
+    }).catch(() => {
+      if (!cancelled) setErrored(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [props.compute]);
+  const isAsync = Boolean(props.compute);
+  const loading = props.loading || isAsync && computed === null && !errored;
+  let display = props.value;
+  let current = props.current;
+  let previous = props.previous;
+  let trend = props.trend;
+  let unit;
+  let spark = props.spark;
+  if (isAsync && computed) {
+    display = formatKpiValue(computed.value, format, currency);
+    current = computed.value;
+    previous = computed.previousValue;
+    trend = computed.trend;
+    unit = computed.unit;
+    spark = computed.spark ?? spark;
+  } else if (display == null && props.amount != null) {
+    display = formatKpiValue(props.amount, format, currency);
+    current = current ?? props.amount;
+  }
+  const resolvedTrend = current != null ? deriveTrend(current, previous, trend) : trend;
+  const delta = current != null && previous != null && previous !== 0 ? Math.round((current - previous) / previous * 100) : null;
+  const accent = props.accent ?? trendColor(resolvedTrend, invertTrend);
+  const valueText = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    display,
+    unit ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-sm font-normal text-muted-foreground", children: unit }) : null
+  ] });
+  const trendChip = resolvedTrend ? /* @__PURE__ */ jsxRuntime.jsx(TrendChip, { trend: resolvedTrend, delta, invert: invertTrend }) : null;
+  const isGauge = props.goal != null && current != null;
+  const hasSpark = Boolean(spark && spark.length >= 2);
+  let body;
+  if (errored) {
+    body = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" });
+  } else if (loading) {
+    body = isGauge ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto h-16 w-32 animate-pulse rounded bg-muted" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-20 animate-pulse rounded bg-muted" });
+  } else if (isGauge) {
+    body = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Gauge, { value: current, goal: props.goal, color: accent, children: valueText }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+        trendChip,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: sub ?? `out of ${formatKpiValue(props.goal, format, currency)}` })
+      ] })
+    ] });
+  } else if (hasSpark) {
+    body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold tracking-tight text-foreground", children: valueText }),
+        trendChip ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5", children: trendChip }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: spark, color: accent })
+    ] });
+  } else {
+    body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold tracking-tight text-foreground", children: valueText }),
+      trendChip ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-0.5", children: trendChip }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardContent, { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: renderIcon(icon) })
+    ] }),
+    body,
+    sub && !isGauge ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: sub }) : null
+  ] }) });
+}
+var PALETTE = [
+  "hsl(var(--info))",
+  "hsl(var(--magic))",
+  "hsl(var(--success))",
+  "hsl(var(--warning))",
+  "hsl(var(--destructive))"
+];
+var AXIS = "hsl(var(--muted-foreground))";
+var GRID = "hsl(var(--border))";
+function ChartWidget({
+  type,
+  data,
+  series,
+  categoryKey = "name",
+  title,
+  icon,
+  headerAction,
+  height = 240,
+  className
+}) {
+  const color = (i, explicit) => explicit ?? PALETTE[i % PALETTE.length];
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Card, { className, children: [
+    (title || headerAction) && /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardHeader, { className: "flex-row items-center justify-between space-y-0", children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardTitle, { className: "flex items-center gap-2", children: [
+        renderIcon(icon),
+        title
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      headerAction
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardContent, { className: "p-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: type === "pie" ? /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Pie, { data, dataKey: series[0]?.dataKey ?? "value", nameKey: categoryKey, innerRadius: 50, outerRadius: 80, paddingAngle: 2, children: data.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: color(i, series[0]?.color) }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
+    ] }) : type === "bar" ? /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: GRID, vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: categoryKey, stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false, width: 36 }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { cursor: { fill: GRID, opacity: 0.3 } }),
+      series.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+      series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: s.dataKey, name: s.label ?? s.dataKey, fill: color(i, s.color), radius: [4, 4, 0, 0] }, s.dataKey))
+    ] }) : type === "area" ? /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: GRID, vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: categoryKey, stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false, width: 36 }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+      series.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+      series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Area, { dataKey: s.dataKey, name: s.label ?? s.dataKey, stroke: color(i, s.color), fill: color(i, s.color), fillOpacity: 0.15 }, s.dataKey))
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: GRID, vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: categoryKey, stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { stroke: AXIS, fontSize: 12, tickLine: false, axisLine: false, width: 36 }),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+      series.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+      series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { dataKey: s.dataKey, name: s.label ?? s.dataKey, stroke: color(i, s.color), strokeWidth: 2, dot: false }, s.dataKey))
+    ] }) }) })
+  ] });
+}
+function TableWidget({
+  title,
+  icon,
+  columns,
+  data,
+  loading,
+  emptyMessage,
+  onRowClick,
+  headerAction,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Card, { className, children: [
+    (title || headerAction) && /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardHeader, { className: "flex-row items-center justify-between space-y-0", children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardTitle, { className: "flex items-center gap-2", children: [
+        renderIcon(icon),
+        title
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      headerAction
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkD6SXPF4F_cjs.DataTable,
+      {
+        columns,
+        data,
+        loading,
+        emptyMessage,
+        onRowClick,
+        variant: "flat",
+        compact: true
+      }
+    ) })
+  ] });
+}
+function OnboardingWidget({
+  title = "Getting started",
+  subtitle,
+  steps,
+  onNavigate,
+  hideWhenComplete = true,
+  className
+}) {
+  const [completed, setCompleted] = React__namespace.useState(
+    () => Object.fromEntries(steps.map((s) => [s.id, Boolean(s.done)]))
+  );
+  React__namespace.useEffect(() => {
+    let cancelled = false;
+    Promise.all(steps.map(async (s) => {
+      if (s.done != null) return [s.id, s.done];
+      if (!s.check) return [s.id, false];
+      try {
+        return [s.id, await s.check()];
+      } catch {
+        return [s.id, false];
+      }
+    })).then((entries) => {
+      if (!cancelled) setCompleted(Object.fromEntries(entries));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [steps]);
+  const doneCount = steps.filter((s) => completed[s.id]).length;
+  const allDone = doneCount === steps.length;
+  if (allDone && hideWhenComplete) return null;
+  const runAction = (action) => {
+    if (!action) return;
+    if (typeof action === "string") onNavigate?.(action);
+    else action();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.Card, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkD6SXPF4F_cjs.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardTitle, { children: title }),
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardDescription, { children: subtitle }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary transition-all",
+            style: { width: `${steps.length ? doneCount / steps.length * 100 : 0}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
+          doneCount,
+          "/",
+          steps.length
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.CardContent, { className: "space-y-1 pt-0", children: steps.map((step) => {
+      const isDone = completed[step.id];
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 rounded-lg px-2 py-2.5 hover:bg-muted/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVVVZO2LE_cjs.cn(
+          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+          isDone ? "bg-emerald-100 text-emerald-600" : "bg-muted text-muted-foreground"
+        ), children: isDone ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "h-4 w-4" }) : renderIcon(step.icon, "h-4 w-4") ?? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Circle, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunkVVVZO2LE_cjs.cn("text-sm font-medium", isDone && "text-muted-foreground line-through"), children: step.title }),
+          step.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: step.description }) : null
+        ] }),
+        !isDone && step.action ? /* @__PURE__ */ jsxRuntime.jsx(chunkD6SXPF4F_cjs.Button, { size: "sm", variant: "outline", onClick: () => runAction(step.action), children: step.actionLabel ?? "Start" }) : null
+      ] }, step.id);
+    }) })
+  ] });
+}
+
+// src/dashboard/define.ts
+function build(kind, defaultSpan, input) {
+  return {
+    kind,
+    span: input.span ?? defaultSpan,
+    defaultVisible: input.defaultVisible ?? true,
+    id: input.id,
+    title: input.title,
+    description: input.description,
+    icon: input.icon,
+    domain: input.domain,
+    defaultOrder: input.defaultOrder,
+    surfaces: input.surfaces,
+    verticalId: input.verticalId,
+    permission: input.permission,
+    component: input.component,
+    props: input.props
+  };
+}
+var defineKpiWidget = (input) => build("kpi", 1, input);
+var defineChartWidget = (input) => build("chart", 2, input);
+var defineTableWidget = (input) => build("table", 4, input);
+var defineOnboardingWidget = (input) => build("onboarding", 2, input);
+var defineCustomWidget = (input) => build("custom", 2, input);
+
+exports.ChartWidget = ChartWidget;
+exports.DEFAULT_RANGE_OPTIONS = DEFAULT_RANGE_OPTIONS;
+exports.DashboardCanvas = DashboardCanvas;
+exports.DashboardCustomizeMenu = DashboardCustomizeMenu;
+exports.DashboardGrid = DashboardGrid;
+exports.DashboardNavigateProvider = DashboardNavigateProvider;
+exports.DashboardRangeControl = DashboardRangeControl;
+exports.DashboardRangeProvider = DashboardRangeProvider;
+exports.KpiCard = KpiCard;
+exports.OnboardingWidget = OnboardingWidget;
+exports.TableWidget = TableWidget;
+exports.WidgetGrid = WidgetGrid;
+exports.defineChartWidget = defineChartWidget;
+exports.defineCustomWidget = defineCustomWidget;
+exports.defineKpiWidget = defineKpiWidget;
+exports.defineOnboardingWidget = defineOnboardingWidget;
+exports.defineTableWidget = defineTableWidget;
+exports.formatKpiValue = formatKpiValue;
+exports.renderIcon = renderIcon;
+exports.resolveDashboardLayout = resolveDashboardLayout;
+exports.useDashboardNavigate = useDashboardNavigate;
+exports.useDashboardPreferences = useDashboardPreferences;
+exports.useDashboardRange = useDashboardRange;
+//# sourceMappingURL=chunk-7TBDPNLY.cjs.map
+//# sourceMappingURL=chunk-7TBDPNLY.cjs.map