hazo_ui 6.16.0 → 6.19.0

package/dist/index.js

@@ -2,14 +2,14 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React27 from 'react';
-import React27__default, { createContext, lazy, useContext, useRef, useState, useCallback, useEffect, useMemo, Fragment, Suspense, useSyncExternalStore } from 'react';
+import React27__default, { createContext, lazy, useRef, useContext, useState, useCallback, useEffect, useMemo, Fragment, Suspense, useSyncExternalStore } from 'react';
 import { generateRequestId } from 'hazo_core';
 import { withContext, setBrowserCorrelationId } from 'hazo_core/client';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ArrowUpDown, icons, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, Menu, GripVertical, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1, Globe } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, GripVertical, Trash2, ChevronLeft, Filter, Plus, ArrowUpDown, icons, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, Menu, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1, Globe } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -17,7 +17,7 @@ import { DayPicker } from 'react-day-picker';
 import { format } from 'date-fns';
 import { createPackageT, resolvePackageLocale } from 'hazo_core/i18n';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, pointerWithin, rectIntersection, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as FaIcons from 'react-icons/fa';
@@ -866,7 +866,11 @@ var en_default = {
   "charts.pct_of_first": "% of first: {{pct}}%",
   "charts.pct_of_prev": "% of prev: {{pct}}%",
   "charts.dropoff": "Drop-off: \u2212{{value}}",
-  "toast.missing_prefix": "Missing: {{items}}"
+  "toast.missing_prefix": "Missing: {{items}}",
+  "editable_data_table.add": "Add",
+  "editable_data_table.delete": "Delete row",
+  "editable_data_table.empty": "No rows yet. Click Add to start.",
+  "editable_data_table.drag_to_reorder": "Drag to reorder"
 };
 var default_t = createPackageT("hazo_ui", en_default);
 var defaultHazoUiT = default_t;
@@ -13154,7 +13158,847 @@ function useHazoEvent(pkg, event, handler) {
     return () => window.removeEventListener(event_name, listener);
   }, [pkg, event]);
 }
+function EditableCell({
+  value,
+  type,
+  options,
+  defaultColorValue,
+  clearable,
+  onCommit,
+  editable,
+  forceEdit,
+  onTabOut,
+  onEnterDown,
+  onPaste,
+  onActivated
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(String(value ?? ""));
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (forceEdit) {
+      setDraft(String(value ?? ""));
+      setEditing(true);
+    }
+  }, [forceEdit]);
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      if (forceEdit) {
+        onActivated?.();
+      }
+    }
+  }, [editing]);
+  const commit = useCallback(() => {
+    setEditing(false);
+    if (type === "number") {
+      const n = Number(draft);
+      onCommit(Number.isNaN(n) || draft.trim() === "" ? 0 : n);
+    } else {
+      onCommit(draft);
+    }
+  }, [draft, onCommit, type]);
+  const cancel = useCallback(() => {
+    setEditing(false);
+    setDraft(String(value ?? ""));
+  }, [value]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onEnterDown?.();
+        commit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Tab") {
+        const direction = e.shiftKey ? -1 : 1;
+        const handled = onTabOut?.(direction) ?? false;
+        if (handled) {
+          e.preventDefault();
+          commit();
+        }
+      }
+    },
+    [commit, cancel, onTabOut, onEnterDown]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx("span", { className: "text-xs truncate block px-1 py-1.5", children: String(value ?? "") });
+  }
+  if (type === "color") {
+    const colorValue = String(
+      value ?? defaultColorValue ?? "#94a3b8"
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          className: "h-7 w-8 cursor-pointer border border-border rounded p-0.5",
+          value: colorValue,
+          onChange: (e) => onCommit(e.target.value)
+        }
+      ),
+      clearable && value != null && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs leading-none text-muted-foreground hover:text-foreground px-0.5",
+          onClick: () => onCommit(void 0),
+          children: "\xD7"
+        }
+      )
+    ] });
+  }
+  if (type === "select") {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(value ?? ""),
+        onValueChange: (v) => onCommit(v),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    );
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-xs truncate block px-1 py-1.5 cursor-text hover:bg-muted/50 rounded",
+        onClick: () => {
+          setDraft(String(value ?? ""));
+          setEditing(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setDraft(String(value ?? ""));
+            setEditing(true);
+          }
+        },
+        children: String(value ?? "")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: type === "number" ? "number" : "text",
+      className: "h-7 text-xs border border-input rounded-md px-2 bg-background focus:outline-none focus:ring-1 focus:ring-ring w-full",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: handleKeyDown,
+      onPaste: (e) => {
+        const text = e.clipboardData.getData("text/plain") || e.clipboardData.getData("text");
+        if (!text) return;
+        const handled = onPaste?.(text) ?? false;
+        if (handled) {
+          e.preventDefault();
+          setEditing(false);
+        }
+      },
+      onBlur: commit
+    }
+  );
+}
+var SortableRow = React27__default.memo(function SortableRow2({
+  id,
+  highlighted,
+  children
+}) {
+  const t = useHazoUiT();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    TableRow2,
+    {
+      ref: setNodeRef,
+      style,
+      "data-sortable-id": id,
+      className: cn(highlighted && "bg-blue-50 ring-1 ring-blue-300"),
+      children: [
+        /* @__PURE__ */ jsx(TableCell2, { className: "px-0 py-0.5 w-6", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: "cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground flex items-center justify-center",
+            title: t("editable_data_table.drag_to_reorder"),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+});
+SortableRow.displayName = "SortableRow";
+var EditableTableRow = React27__default.memo(function EditableTableRow2({
+  row,
+  rowIndex,
+  rowKey,
+  isHighlighted,
+  columns,
+  activeEditColKey,
+  deleteLabel,
+  onCellCommit,
+  onDeleteRow,
+  onTabOutCell,
+  onEnterDownCell,
+  onPasteCell,
+  onActivated
+}) {
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  return /* @__PURE__ */ jsxs(SortableRow, { id: rowKey, highlighted: isHighlighted, children: [
+    columns.map((col, colIndex) => {
+      const resolvedOptions = typeof col.options === "function" ? col.options(row) : col.options;
+      return /* @__PURE__ */ jsx(
+        TableCell2,
+        {
+          className: cn("px-1 py-0.5", col.width),
+          "data-row-render-count": colIndex === 0 ? renderCountRef.current : void 0,
+          children: /* @__PURE__ */ jsx(
+            EditableCell,
+            {
+              value: row[col.key],
+              type: col.type ?? "text",
+              options: resolvedOptions,
+              defaultColorValue: col.defaultValue?.(rowIndex),
+              clearable: col.clearable,
+              editable: col.editable !== false,
+              forceEdit: activeEditColKey === col.key,
+              onTabOut: (direction) => onTabOutCell(rowIndex, col.key, direction),
+              onEnterDown: () => onEnterDownCell(rowIndex, col.key),
+              onPaste: (text) => onPasteCell(rowIndex, col.key, text),
+              onActivated,
+              onCommit: (v) => onCellCommit(rowIndex, col.key, v)
+            }
+          )
+        },
+        col.key
+      );
+    }),
+    /* @__PURE__ */ jsx(TableCell2, { className: "px-0 py-0.5 w-8", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+        onClick: () => onDeleteRow(rowIndex),
+        "aria-label": deleteLabel,
+        children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+      }
+    ) })
+  ] });
+});
+EditableTableRow.displayName = "EditableTableRow";
+function EditableDataTable({
+  columns,
+  rows,
+  onChange,
+  getRowKey,
+  createRow,
+  highlightedKey,
+  className,
+  label
+}) {
+  const t = useHazoUiT();
+  const editableColumns = useMemo(
+    () => columns.filter(
+      (col) => col.editable !== false && (col.type ?? "text") !== "select" && (col.type ?? "text") !== "color"
+    ).map((col) => col.key),
+    [columns]
+  );
+  const [activeEditCell, setActiveEditCell] = useState(null);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const handleTabOut = useCallback(
+    (rowIndex, colKey, direction) => {
+      const idx = editableColumns.indexOf(colKey);
+      if (idx === -1) return false;
+      if (direction === 1) {
+        if (idx < editableColumns.length - 1) {
+          setActiveEditCell({ row: rowIndex, col: editableColumns[idx + 1] });
+          return true;
+        }
+        if (rowIndex + 1 < rows.length) {
+          setActiveEditCell({ row: rowIndex + 1, col: editableColumns[0] });
+          return true;
+        }
+        return false;
+      }
+      if (idx > 0) {
+        setActiveEditCell({ row: rowIndex, col: editableColumns[idx - 1] });
+        return true;
+      }
+      if (rowIndex - 1 >= 0) {
+        setActiveEditCell({
+          row: rowIndex - 1,
+          col: editableColumns[editableColumns.length - 1]
+        });
+        return true;
+      }
+      return false;
+    },
+    [editableColumns, rows.length]
+  );
+  const handleEnterDown = useCallback(
+    (rowIndex, colKey) => {
+      if (rowIndex + 1 < rows.length) {
+        setActiveEditCell({ row: rowIndex + 1, col: colKey });
+        return true;
+      }
+      return false;
+    },
+    [rows.length]
+  );
+  const handlePaste = useCallback(
+    (rowIndex, colKey, text) => {
+      const startColIdx = editableColumns.indexOf(
+        colKey
+      );
+      if (startColIdx === -1) return false;
+      const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+      const lines = normalized.split("\n");
+      if (lines.length > 1 && lines[lines.length - 1] === "") {
+        lines.pop();
+      }
+      const hasTab = normalized.includes("	");
+      const delimiter = hasTab ? "	" : ",";
+      const grid = lines.map((line) => line.split(delimiter));
+      const isSingleCell = grid.length === 1 && grid[0].length === 1;
+      if (isSingleCell) return false;
+      const currentRows = rowsRef.current;
+      const nextRows = currentRows.slice();
+      grid.forEach((lineCells, rowOffset) => {
+        const targetRowIndex = rowIndex + rowOffset;
+        while (targetRowIndex >= nextRows.length) {
+          nextRows.push(createRow());
+        }
+        const targetRow = {
+          ...nextRows[targetRowIndex]
+        };
+        lineCells.forEach((cellValue, colOffset) => {
+          const targetColIdx = startColIdx + colOffset;
+          if (targetColIdx >= editableColumns.length) return;
+          const targetColKey = editableColumns[targetColIdx];
+          const col = columns.find((c) => c.key === targetColKey);
+          if (col?.type === "number") {
+            const n = Number(cellValue);
+            targetRow[targetColKey] = Number.isNaN(n) || cellValue.trim() === "" ? 0 : n;
+          } else {
+            targetRow[targetColKey] = cellValue;
+          }
+        });
+        nextRows[targetRowIndex] = targetRow;
+      });
+      onChangeRef.current(nextRows);
+      return true;
+    },
+    [editableColumns, columns, createRow]
+  );
+  const handleCellChange = useCallback(
+    (rowIndex, colKey, value) => {
+      const currentRows = rowsRef.current;
+      const next = currentRows.map(
+        (row, i) => i === rowIndex ? { ...row, [colKey]: value } : row
+      );
+      onChangeRef.current(next);
+    },
+    []
+  );
+  const handleDelete = useCallback((rowIndex) => {
+    const currentRows = rowsRef.current;
+    onChangeRef.current(currentRows.filter((_, i) => i !== rowIndex));
+  }, []);
+  const onCellActivated = useCallback(() => setActiveEditCell(null), []);
+  const handleAdd = () => {
+    onChange([...rows, createRow()]);
+  };
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const rowKeys = useMemo(
+    () => rows.map((row, i) => getRowKey(row, i)),
+    [rows, getRowKey]
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === active.id
+      );
+      const newIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === over.id
+      );
+      if (oldIndex === -1 || newIndex === -1) return;
+      onChange(arrayMove(rows, oldIndex, newIndex));
+    },
+    [rows, getRowKey, onChange]
+  );
+  return (
+    // DndContext wraps the whole component rather than just <TableBody> —
+    // it renders its own hidden accessibility helpers (RestoreFocus,
+    // live-region announcer) as DOM siblings of its children. Nesting it
+    // directly inside <tbody> would make those helpers invalid children of
+    // <tbody> (only <tr> is valid there); wrapping the outer <div> instead
+    // gives them a valid home. <SortableContext> is a plain context
+    // provider with no DOM output of its own, so it can stay right inside
+    // <TableBody>, wrapping only the actual <tr> rows.
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxs("div", { "data-editable-data-table": true, className: cn("flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: label }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 px-2 text-xs ml-auto",
+                onClick: handleAdd,
+                "aria-label": t("editable_data_table.add"),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
+                  t("editable_data_table.add")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Table2, { children: [
+            /* @__PURE__ */ jsx(TableHeader2, { children: /* @__PURE__ */ jsxs(TableRow2, { className: "bg-muted/60 hover:bg-muted/60 border-b-2 border-border", children: [
+              /* @__PURE__ */ jsx(TableHead, { className: "w-6 px-0" }),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                TableHead,
+                {
+                  className: cn(
+                    "text-[11px] font-semibold uppercase tracking-wide text-foreground px-1 py-1 h-8",
+                    col.width
+                  ),
+                  children: col.label
+                },
+                col.key
+              )),
+              /* @__PURE__ */ jsx(TableHead, { className: "w-8 px-0" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(TableBody, { children: [
+              rows.length === 0 && /* @__PURE__ */ jsx(TableRow2, { children: /* @__PURE__ */ jsx(
+                TableCell2,
+                {
+                  colSpan: columns.length + 2,
+                  className: "text-center text-xs text-muted-foreground italic py-4",
+                  children: t("editable_data_table.empty")
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: rowKeys,
+                  strategy: verticalListSortingStrategy,
+                  children: rows.map((row, rowIndex) => {
+                    const key = rowKeys[rowIndex];
+                    const isHighlighted = highlightedKey != null && key === highlightedKey;
+                    const activeEditColKey = activeEditCell?.row === rowIndex ? activeEditCell.col : null;
+                    return /* @__PURE__ */ jsx(
+                      EditableTableRow,
+                      {
+                        row,
+                        rowIndex,
+                        rowKey: key,
+                        isHighlighted,
+                        columns,
+                        activeEditColKey,
+                        deleteLabel: t("editable_data_table.delete"),
+                        onCellCommit: handleCellChange,
+                        onDeleteRow: handleDelete,
+                        onTabOutCell: handleTabOut,
+                        onEnterDownCell: handleEnterDown,
+                        onPasteCell: handlePaste,
+                        onActivated: onCellActivated
+                      },
+                      key
+                    );
+                  })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  );
+}
+function TrendDeltaBadge({ pct }) {
+  if (pct === null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" });
+  }
+  const up = pct >= 0;
+  const cls = up ? "text-emerald-600" : "text-red-600";
+  const arrow = up ? "\u25B2" : "\u25BC";
+  return /* @__PURE__ */ jsxs("span", { className: `text-xs font-medium ${cls}`, title: "vs previous period", children: [
+    arrow,
+    " ",
+    up ? "+" : "",
+    pct,
+    "%"
+  ] });
+}
+var CARD_HEIGHT_PX = 168;
+function TrendStatCard({
+  w,
+  totalLabel,
+  prevTemplate
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cls_trend_stat_card flex min-w-0 flex-col justify-between rounded-lg border bg-card p-4",
+      style: { height: CARD_HEIGHT_PX },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: w.label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tabular-nums", children: w.count.toLocaleString() }),
+          w.key !== "all" && /* @__PURE__ */ jsx(TrendDeltaBadge, { pct: w.pctChange })
+        ] }),
+        w.key !== "all" && w.prevCount !== null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: prevTemplate.replace("{count}", w.prevCount.toLocaleString()) }),
+        w.key === "all" && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: totalLabel })
+      ]
+    }
+  );
+}
+function niceMax(n) {
+  if (n <= 0) return 1;
+  const exp = Math.floor(Math.log10(n));
+  const base = Math.pow(10, exp);
+  const frac = n / base;
+  let niceFrac;
+  if (frac <= 1) niceFrac = 1;
+  else if (frac <= 2) niceFrac = 2;
+  else if (frac <= 5) niceFrac = 5;
+  else niceFrac = 10;
+  return niceFrac * base;
+}
+function TrendMiniChart({
+  data,
+  title,
+  tooltipSuffix
+}) {
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const total = data.reduce((n2, d) => n2 + d.count, 0);
+  const rawMax = Math.max(1, ...data.map((d) => d.count));
+  const max = niceMax(rawMax);
+  const mid = Math.round(max / 2);
+  const W = 480;
+  const H = 120;
+  const marginLeft = 34;
+  const marginRight = 8;
+  const marginTop = 16;
+  const marginBottom = 20;
+  const plotW = W - marginLeft - marginRight;
+  const plotH = H - marginTop - marginBottom;
+  const gap = 6;
+  const n = Math.max(1, data.length);
+  const colW = plotW / n;
+  const bw = Math.max(1, colW - gap);
+  const yFor = (value) => marginTop + plotH - value / max * plotH;
+  const hovered = hoverIndex !== null ? data[hoverIndex] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cls_trend_mini_chart col-span-6 flex min-w-0 flex-col rounded-lg border bg-card p-3",
+      style: { height: CARD_HEIGHT_PX },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-baseline justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold tabular-nums", children: total.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative mt-2 min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              role: "img",
+              "aria-label": data.map((d) => `${d.label} ${d.count}`).join(", "),
+              viewBox: `0 0 ${W} ${H}`,
+              preserveAspectRatio: "none",
+              className: "h-full w-full",
+              children: [
+                [0, mid, max].map((tick) => {
+                  const y = yFor(tick);
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: marginLeft,
+                        x2: W - marginRight,
+                        y1: y,
+                        y2: y,
+                        stroke: "currentColor",
+                        strokeOpacity: 0.1
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: marginLeft - 6,
+                        y,
+                        dy: 3,
+                        textAnchor: "end",
+                        fontSize: 9,
+                        className: "fill-muted-foreground",
+                        children: tick.toLocaleString()
+                      }
+                    )
+                  ] }, tick);
+                }),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: marginLeft,
+                    x2: W - marginRight,
+                    y1: marginTop + plotH,
+                    y2: marginTop + plotH,
+                    stroke: "currentColor",
+                    strokeOpacity: 0.2
+                  }
+                ),
+                data.map((d, i) => {
+                  const barH = Math.round(d.count / max * plotH);
+                  const colX = marginLeft + i * colW;
+                  const barX = colX + (colW - bw) / 2;
+                  const barY = marginTop + plotH - barH;
+                  const centerX = colX + colW / 2;
+                  const isDimmed = hoverIndex !== null && hoverIndex !== i;
+                  return /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      onMouseEnter: () => setHoverIndex(i),
+                      onMouseLeave: () => setHoverIndex(null),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: colX,
+                            y: marginTop,
+                            width: colW,
+                            height: plotH,
+                            fill: "transparent"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: barX,
+                            y: barY,
+                            width: bw,
+                            height: Math.max(0, barH),
+                            rx: 2,
+                            className: "fill-primary",
+                            fillOpacity: isDimmed ? 0.45 : 1,
+                            children: /* @__PURE__ */ jsx("title", { children: `${d.label}: ${d.count} ${tooltipSuffix}` })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: centerX,
+                            y: barY - 4,
+                            textAnchor: "middle",
+                            fontSize: 10,
+                            fontWeight: 600,
+                            className: "fill-foreground",
+                            children: d.count
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: centerX,
+                            y: marginTop + plotH + 14,
+                            textAnchor: "middle",
+                            fontSize: 9,
+                            className: "fill-muted-foreground",
+                            children: d.label
+                          }
+                        )
+                      ]
+                    },
+                    d.label
+                  );
+                })
+              ]
+            }
+          ),
+          hovered && hoverIndex !== null && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full rounded-md border bg-popover px-2 py-1 text-[10px] font-medium text-popover-foreground shadow-sm",
+              style: {
+                left: `${Math.min(
+                  92,
+                  Math.max(
+                    8,
+                    (marginLeft + hoverIndex * (plotW / n) + plotW / n / 2) / W * 100
+                  )
+                )}%`,
+                top: `${(marginTop + plotH - hovered.count / max * plotH) / H * 100}%`
+              },
+              children: [
+                hovered.label,
+                ": ",
+                hovered.count,
+                " ",
+                tooltipSuffix
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function TrendSummary({
+  windows,
+  chartData,
+  chartTitle = "Activity (YTD)",
+  chartTooltipSuffix = "",
+  totalLabel = "total",
+  prevTemplate = "prev {count}",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_trend_summary mb-4 grid grid-cols-6 items-start gap-2 md:grid-cols-12",
+        className
+      ),
+      children: [
+        windows.map((w) => /* @__PURE__ */ jsx(
+          TrendStatCard,
+          {
+            w,
+            totalLabel,
+            prevTemplate
+          },
+          w.key
+        )),
+        chartData && chartData.length > 0 && /* @__PURE__ */ jsx(
+          TrendMiniChart,
+          {
+            data: chartData,
+            title: chartTitle,
+            tooltipSuffix: chartTooltipSuffix
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/lib/trend_stats.ts
+var DAY_MS = 864e5;
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pctOf(count, prev) {
+  if (prev === null || prev === 0) return null;
+  return Math.round((count - prev) / prev * 100);
+}
+var DEFAULT_WINDOWS = [
+  { key: "7d", label: "7 days", days: 7 },
+  { key: "30d", label: "30 days", days: 30 },
+  { key: "90d", label: "3 months", days: 90 },
+  { key: "180d", label: "6 months", days: 180 }
+];
+function computeTrendStats(items, now = /* @__PURE__ */ new Date(), options) {
+  const nowMs = now.getTime();
+  const times = [];
+  for (const item of items) {
+    if (!item || !item.created_at) continue;
+    const t = new Date(item.created_at).getTime();
+    if (!Number.isNaN(t)) times.push(t);
+  }
+  const countBetween = (startMs, endMs) => times.reduce((n, t) => t >= startMs && t < endMs ? n + 1 : n, 0);
+  const total = times.length;
+  const rollingDefs = options?.windows ?? DEFAULT_WINDOWS;
+  const windows = [
+    { key: "all", label: options?.totalLabel ?? "All time", count: total, prevCount: null, pctChange: null }
+  ];
+  for (const w of rollingDefs) {
+    const span = w.days * DAY_MS;
+    const count = countBetween(nowMs - span, nowMs);
+    const prevCount = countBetween(nowMs - 2 * span, nowMs - span);
+    windows.push({
+      key: w.key,
+      label: w.label,
+      count,
+      prevCount,
+      pctChange: pctOf(count, prevCount)
+    });
+  }
+  const ytdStart = new Date(now.getFullYear(), 0, 1).getTime();
+  const elapsed = nowMs - ytdStart;
+  const ytdCount = countBetween(ytdStart, nowMs);
+  const prevYtdStart = new Date(now.getFullYear() - 1, 0, 1).getTime();
+  const prevYtdCount = countBetween(prevYtdStart, prevYtdStart + elapsed);
+  windows.push({
+    key: "ytd",
+    label: "YTD",
+    count: ytdCount,
+    prevCount: prevYtdCount,
+    pctChange: pctOf(ytdCount, prevYtdCount)
+  });
+  const ytdMonthly = [];
+  const year = now.getFullYear();
+  for (let m = 0; m <= now.getMonth(); m++) {
+    const monthStart = new Date(year, m, 1).getTime();
+    const monthEnd = new Date(year, m + 1, 1).getTime();
+    ytdMonthly.push({ label: MONTHS[m], count: countBetween(monthStart, monthEnd) });
+  }
+  return { total, windows, ytdMonthly };
+}
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppFooter, AppHeader, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, CanvasTextToolbar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DEFAULT_ANNOUNCE_EVENT, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, FunnelChart, HazoBrowserTab, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiI18nProvider, HazoUiIcon, HazoUiIconPicker, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMemoryDropdown, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LiveRegion, LoadingTimeout, LocalePicker, Logo, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Slider, Sparkline, Spinner, StackedBars, StatusBadge, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, announce, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, defaultHazoUiT, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, hasUrlParam, isLucideValue, makeStatusBadge, median, parse_commands_from_text, permissionToast, pick_x_label_indices, readRememberedState, reset_hazo_ui_config, resolve_animation_classes, safeHref, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, upsertEntry as upsertMemoryEntry, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useHazoEvent, useHazoUiT, useIsMobile, useLoadingState, useLocalStorage, useLongPress, useMediaQuery, useRememberedState, useScrollRestore, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock, writeRememberedState };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppFooter, AppHeader, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, CanvasTextToolbar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DEFAULT_ANNOUNCE_EVENT, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableDataTable, EmptyState, ErrorBanner, ErrorPage, FunnelChart, HazoBrowserTab, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiI18nProvider, HazoUiIcon, HazoUiIconPicker, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMemoryDropdown, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LiveRegion, LoadingTimeout, LocalePicker, Logo, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Slider, Sparkline, Spinner, StackedBars, StatusBadge, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TrendSummary, announce, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, computeTrendStats, create_command_suggestion_extension, defaultHazoUiT, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, hasUrlParam, isLucideValue, makeStatusBadge, median, parse_commands_from_text, permissionToast, pick_x_label_indices, readRememberedState, reset_hazo_ui_config, resolve_animation_classes, safeHref, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, upsertEntry as upsertMemoryEntry, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useHazoEvent, useHazoUiT, useIsMobile, useLoadingState, useLocalStorage, useLongPress, useMediaQuery, useRememberedState, useScrollRestore, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock, writeRememberedState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map