hazo_ui 6.16.0 → 6.19.0

package/dist/index.cjs

@@ -936,7 +936,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 = i18n.createPackageT("hazo_ui", en_default);
 var defaultHazoUiT = default_t;
@@ -13224,6 +13228,846 @@ 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] = React27.useState(false);
+  const [draft, setDraft] = React27.useState(String(value ?? ""));
+  const inputRef = React27.useRef(null);
+  React27.useEffect(() => {
+    if (forceEdit) {
+      setDraft(String(value ?? ""));
+      setEditing(true);
+    }
+  }, [forceEdit]);
+  React27.useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      if (forceEdit) {
+        onActivated?.();
+      }
+    }
+  }, [editing]);
+  const commit = React27.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 = React27.useCallback(() => {
+    setEditing(false);
+    setDraft(String(value ?? ""));
+  }, [value]);
+  const handleKeyDown = React27.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: String(value ?? ""),
+        onValueChange: (v) => onCommit(v),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (options ?? []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    );
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.default.memo(function SortableRow2({
+  id,
+  highlighted,
+  children
+}) {
+  const t = useHazoUiT();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableRow2,
+    {
+      ref: setNodeRef,
+      style,
+      "data-sortable-id": id,
+      className: cn(highlighted && "bg-blue-50 ring-1 ring-blue-300"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-6", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+});
+SortableRow.displayName = "SortableRow";
+var EditableTableRow = React27__namespace.default.memo(function EditableTableRow2({
+  row,
+  rowIndex,
+  rowKey,
+  isHighlighted,
+  columns,
+  activeEditColKey,
+  deleteLabel,
+  onCellCommit,
+  onDeleteRow,
+  onTabOutCell,
+  onEnterDownCell,
+  onPasteCell,
+  onActivated
+}) {
+  const renderCountRef = React27.useRef(0);
+  renderCountRef.current += 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(SortableRow, { id: rowKey, highlighted: isHighlighted, children: [
+    columns.map((col, colIndex) => {
+      const resolvedOptions = typeof col.options === "function" ? col.options(row) : col.options;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
+        {
+          className: cn("px-1 py-0.5", col.width),
+          "data-row-render-count": colIndex === 0 ? renderCountRef.current : void 0,
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-8", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+      }
+    ) })
+  ] });
+});
+EditableTableRow.displayName = "EditableTableRow";
+function EditableDataTable({
+  columns,
+  rows,
+  onChange,
+  getRowKey,
+  createRow,
+  highlightedKey,
+  className,
+  label
+}) {
+  const t = useHazoUiT();
+  const editableColumns = React27.useMemo(
+    () => columns.filter(
+      (col) => col.editable !== false && (col.type ?? "text") !== "select" && (col.type ?? "text") !== "color"
+    ).map((col) => col.key),
+    [columns]
+  );
+  const [activeEditCell, setActiveEditCell] = React27.useState(null);
+  const rowsRef = React27.useRef(rows);
+  rowsRef.current = rows;
+  const onChangeRef = React27.useRef(onChange);
+  onChangeRef.current = onChange;
+  const handleTabOut = React27.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 = React27.useCallback(
+    (rowIndex, colKey) => {
+      if (rowIndex + 1 < rows.length) {
+        setActiveEditCell({ row: rowIndex + 1, col: colKey });
+        return true;
+      }
+      return false;
+    },
+    [rows.length]
+  );
+  const handlePaste = React27.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 = React27.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 = React27.useCallback((rowIndex) => {
+    const currentRows = rowsRef.current;
+    onChangeRef.current(currentRows.filter((_, i) => i !== rowIndex));
+  }, []);
+  const onCellActivated = React27.useCallback(() => setActiveEditCell(null), []);
+  const handleAdd = () => {
+    onChange([...rows, createRow()]);
+  };
+  const sensors = core$1.useSensors(
+    core$1.useSensor(core$1.PointerSensor),
+    core$1.useSensor(core$1.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const rowKeys = React27.useMemo(
+    () => rows.map((row, i) => getRowKey(row, i)),
+    [rows, getRowKey]
+  );
+  const handleDragEnd = React27.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(sortable.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__ */ jsxRuntime.jsx(
+      core$1.DndContext,
+      {
+        sensors,
+        collisionDetection: core$1.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-editable-data-table": true, className: cn("flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: label }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
+                  t("editable_data_table.add")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow2, { className: "bg-muted/60 hover:bg-muted/60 border-b-2 border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-6 px-0" }),
+              columns.map((col) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableHead, { className: "w-8 px-0" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
+              rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                TableCell2,
+                {
+                  colSpan: columns.length + 2,
+                  className: "text-center text-xs text-muted-foreground italic py-4",
+                  children: t("editable_data_table.empty")
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                sortable.SortableContext,
+                {
+                  items: rowKeys,
+                  strategy: sortable.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: w.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold tabular-nums", children: w.count.toLocaleString() }),
+          w.key !== "all" && /* @__PURE__ */ jsxRuntime.jsx(TrendDeltaBadge, { pct: w.pctChange })
+        ] }),
+        w.key !== "all" && w.prevCount !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: prevTemplate.replace("{count}", w.prevCount.toLocaleString()) }),
+        w.key === "all" && /* @__PURE__ */ jsxRuntime.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] = React27.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-baseline justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold tabular-nums", children: total.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-2 min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: marginLeft,
+                        x2: W - marginRight,
+                        y1: y,
+                        y2: y,
+                        stroke: "currentColor",
+                        strokeOpacity: 0.1
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "text",
+                      {
+                        x: marginLeft - 6,
+                        y,
+                        dy: 3,
+                        textAnchor: "end",
+                        fontSize: 9,
+                        className: "fill-muted-foreground",
+                        children: tick.toLocaleString()
+                      }
+                    )
+                  ] }, tick);
+                }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                    "g",
+                    {
+                      onMouseEnter: () => setHoverIndex(i),
+                      onMouseLeave: () => setHoverIndex(null),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "rect",
+                          {
+                            x: colX,
+                            y: marginTop,
+                            width: colW,
+                            height: plotH,
+                            fill: "transparent"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("title", { children: `${d.label}: ${d.count} ${tooltipSuffix}` })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            x: centerX,
+                            y: barY - 4,
+                            textAnchor: "middle",
+                            fontSize: 10,
+                            fontWeight: 600,
+                            className: "fill-foreground",
+                            children: d.count
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          TrendStatCard,
+          {
+            w,
+            totalLabel,
+            prevTemplate
+          },
+          w.key
+        )),
+        chartData && chartData.length > 0 && /* @__PURE__ */ jsxRuntime.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 };
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -13316,6 +14160,7 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EditableDataTable = EditableDataTable;
 exports.EmptyState = EmptyState;
 exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;
@@ -13425,12 +14270,14 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.TrendSummary = TrendSummary;
 exports.announce = announce;
 exports.applyKanbanFilter = applyKanbanFilter;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.celebrate = celebrate;
 exports.cn = cn;
 exports.computeEta = computeEta;
+exports.computeTrendStats = computeTrendStats;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.defaultHazoUiT = defaultHazoUiT;
 exports.easeToward = easeToward;