@flanksource/clicky-ui 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,11 +1,15 @@
 import { cn } from "./lib/utils.js";
 import { AVATAR_PALETTE, fnv1a32, paletteClass } from "./lib/palette.js";
 import { SIZE_TOKENS, resolveSize } from "./lib/size.js";
+import { formatBytes, formatBytesPerSecond, formatDuration, formatShort, formatUnit } from "./lib/format.js";
 import { ThemeProvider, useOptionalTheme, useResolvedTheme, useTheme } from "./hooks/use-theme.js";
 import { DensityProvider, useDensity, useDensityValue } from "./hooks/use-density.js";
 import { useSort } from "./hooks/use-sort.js";
 import { useHistoryRoute } from "./hooks/use-history-route.js";
+import { useTaskRun, useTaskRuns } from "./hooks/use-task-run.js";
 import { Button, buttonVariants } from "./components/button.js";
+import { SplitButton } from "./components/SplitButton.js";
+import { CLICKY_FORMAT_OPTIONS, FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
 import { DateField } from "./components/DateField.js";
 import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
@@ -14,6 +18,7 @@ import { RangeSlider } from "./components/RangeSlider.js";
 import { FilterBar } from "./components/FilterBar.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
+import { Combobox } from "./components/Combobox.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
@@ -48,15 +53,23 @@ import { ProgressBar } from "./data/ProgressBar.js";
 import { SignedDeltaBar } from "./data/SignedDeltaBar.js";
 import { SortableHeader } from "./data/SortableHeader.js";
 import { TabButton } from "./data/TabButton.js";
+import { TimeseriesPanel, resolveBreakdown, resolveSeries } from "./data/TimeseriesPanel.js";
+import { TimeseriesGauge } from "./data/TimeseriesGauge.js";
+import { StackedStatusBar, StatusRows, segment } from "./data/StatusBreakdown.js";
 import { Tree } from "./data/Tree.js";
 import { TreeNode } from "./data/TreeNode.js";
 import { TreeGroupHeader } from "./data/TreeGroupHeader.js";
+import { allGroupsTerminal, isTerminalStatus } from "./data/TaskSnapshot.js";
+import { bucketTasks, logLevelColor, taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from "./data/task-status.js";
+import { TaskProgress } from "./data/TaskProgress.js";
+import { TaskManager } from "./data/TaskManager.js";
 import { DiagnosticsTree } from "./data/diagnostics/DiagnosticsTree.js";
 import { DiagnosticsDetailPanel } from "./data/diagnostics/DiagnosticsDetailPanel.js";
 import { countProcesses, findProcessByPID, processLabel, processStateColor, processStateIcon } from "./data/diagnostics/utils.js";
 import { countGoroutinesByState, countStackByState, detectDumpFormat, parseGoroutineDump, parseStackDump } from "./data/diagnostics/stacktrace.js";
 import { countThreadsByState, parseJvmThreadDump } from "./data/diagnostics/jvm-stacktrace.js";
 import { JvmStackFrameRow, JvmStackTrace } from "./data/diagnostics/JvmStackTrace.js";
+import { FrameSourceWindow, frameHasSource } from "./data/diagnostics/FrameSourceWindow.js";
 import { StackTrace } from "./data/diagnostics/RenderedStackTrace.js";
 import { parseJavaStackTrace } from "./data/diagnostics/stacktrace-parse.js";
 import { CopyBadge, ErrorDetails, PrettyStackTrace } from "./data/diagnostics/ErrorDetails.js";
@@ -346,10 +359,12 @@ export {
   AvatarBadge,
   Badge,
   Button,
+  CLICKY_FORMAT_OPTIONS,
   Clicky,
   ClickyNodeView,
   ClickyTable,
   CodeBlock,
+  Combobox,
   CommandForm,
   CommandOutput,
   CopyBadge,
@@ -371,6 +386,8 @@ export {
   FilterPill,
   FilterPillGroup,
   FilterSeparator,
+  FormatOptionsDropdown,
+  FrameSourceWindow,
   Gauge,
   HarPanel,
   HoverCard,
@@ -402,15 +419,22 @@ export {
   Select,
   SignedDeltaBar,
   SortableHeader,
+  SplitButton,
   SplitPane,
   StackTrace,
+  StackedStatusBar,
   StatusDot,
+  StatusRows,
   TabButton,
   TagActionsProvider,
   TagList,
+  TaskManager,
+  TaskProgress,
   ThemeProvider,
   ThemeSwitcher,
   TimeRange,
+  TimeseriesGauge,
+  TimeseriesPanel,
   Timestamp,
   Tree,
   TreeGroupHeader,
@@ -905,7 +929,9 @@ export {
   UiZoomOut,
   UiZoomOutFilled,
   VIEW_OPTIONS,
+  allGroupsTerminal,
   badgeVariants,
+  bucketTasks,
   buttonVariants,
   changeIconAliases,
   chooseTimestampFormat,
@@ -921,12 +947,20 @@ export {
   findListEndpoint,
   findProcessByPID,
   fnv1a32,
+  formatBytes,
+  formatBytesPerSecond,
+  formatDuration,
   formatPropertyLabel,
+  formatShort,
   formatTimestamp,
+  formatUnit,
+  frameHasSource,
   getChangeIcon,
   inferColumns,
   isApplicationStackFrame,
   isPositionalParam,
+  isTerminalStatus,
+  logLevelColor,
   modeToFormat,
   normalizeErrorDiagnostics,
   normalizeLogsTableRows,
@@ -945,11 +979,18 @@ export {
   processLabel,
   processStateColor,
   processStateIcon,
+  resolveBreakdown,
+  resolveSeries,
   resolveSize,
+  segment,
   setFallbackIconProvider,
   splitTagToken,
   tagActionsFromRecord,
   tagFilterTokens,
+  taskSegments,
+  taskStatusBg,
+  taskStatusColor,
+  taskStatusIcon,
   useDensity,
   useDensityValue,
   useHistoryRoute,
@@ -961,6 +1002,8 @@ export {
   useSort,
   useTagActions,
   useTagActionsValue,
+  useTaskRun,
+  useTaskRuns,
   useTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/color.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TAILWIND_COLOR_CLASS = /^(?:bg|text|border|fill|stroke)-/;
+function isTailwindColorClass(color) {
+  return TAILWIND_COLOR_CLASS.test(color.trim());
+}
+const computedCache = /* @__PURE__ */ new Map();
+function computeClassColor(cssClass) {
+  if (typeof document === "undefined") return void 0;
+  const probe = document.createElement("span");
+  probe.className = cssClass;
+  probe.style.position = "absolute";
+  probe.style.opacity = "0";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  const style = getComputedStyle(probe);
+  const usesText = /^(?:text|stroke|fill)-/.test(cssClass.trim());
+  const value = usesText ? style.color : style.backgroundColor;
+  document.body.removeChild(probe);
+  if (!value || value === "rgba(0, 0, 0, 0)" || value === "transparent") return void 0;
+  return value;
+}
+function resolveCssColor(color) {
+  if (!isTailwindColorClass(color)) return color;
+  const cached = computedCache.get(color);
+  if (cached !== void 0) return cached;
+  const computed = computeClassColor(color) ?? color;
+  computedCache.set(color, computed);
+  return computed;
+}
+exports.isTailwindColorClass = isTailwindColorClass;
+exports.resolveCssColor = resolveCssColor;
+//# sourceMappingURL=color.cjs.map

package/dist/lib/color.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.cjs","sources":["../../src/lib/color.ts"],"sourcesContent":["// Resolves a series/segment \"color\" that may be expressed either as a CSS color\n// value (e.g. \"#10b981\", \"rgb(16 185 129)\", \"var(--chart-3)\") or as a Tailwind\n// utility class (e.g. \"bg-emerald-500\", \"text-rose-500\"). Consumers that need a\n// real CSS value — recharts stroke/fill, inline backgroundColor — call\n// resolveCssColor; the class→value resolution is done once per class via a probe\n// element and cached.\n\nconst TAILWIND_COLOR_CLASS = /^(?:bg|text|border|fill|stroke)-/;\n\n/** True when `color` looks like a Tailwind color utility class rather than a CSS value. */\nexport function isTailwindColorClass(color: string): boolean {\n  return TAILWIND_COLOR_CLASS.test(color.trim());\n}\n\nconst computedCache = new Map<string, string>();\n\n/**\n * Reads the rendered color of a Tailwind class by mounting an off-screen probe\n * and reading getComputedStyle. `text-`/`stroke-`/`fill-` classes resolve from\n * `color`; everything else (incl. `bg-`/`border-`) from `backgroundColor`.\n * Returns undefined when no document is available (SSR) or the property is\n * empty/transparent (so callers can fall back). No inline color is set on the\n * probe — an inline value outranks the class and would mask the class's color.\n */\nfunction computeClassColor(cssClass: string): string | undefined {\n  if (typeof document === \"undefined\") return undefined;\n  const probe = document.createElement(\"span\");\n  probe.className = cssClass;\n  probe.style.position = \"absolute\";\n  probe.style.opacity = \"0\";\n  probe.style.pointerEvents = \"none\";\n  document.body.appendChild(probe);\n  const style = getComputedStyle(probe);\n  const usesText = /^(?:text|stroke|fill)-/.test(cssClass.trim());\n  const value = usesText ? style.color : style.backgroundColor;\n  document.body.removeChild(probe);\n  if (!value || value === \"rgba(0, 0, 0, 0)\" || value === \"transparent\") return undefined;\n  return value;\n}\n\n/**\n * Returns a usable CSS color value for `color`. CSS values pass through\n * unchanged; Tailwind color classes are resolved to their computed value\n * (memoized). Falls back to the original string when resolution is impossible\n * (SSR, unknown class) so callers still get something to render.\n */\nexport function resolveCssColor(color: string): string {\n  if (!isTailwindColorClass(color)) return color;\n  const cached = computedCache.get(color);\n  if (cached !== undefined) return cached;\n  const computed = computeClassColor(color) ?? color;\n  computedCache.set(color, computed);\n  return computed;\n}\n"],"names":[],"mappings":";;AAOA,MAAM,uBAAuB;AAGtB,SAAS,qBAAqB,OAAwB;AAC3D,SAAO,qBAAqB,KAAK,MAAM,KAAA,CAAM;AAC/C;AAEA,MAAM,oCAAoB,IAAA;AAU1B,SAAS,kBAAkB,UAAsC;AAC/D,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,QAAQ,SAAS,cAAc,MAAM;AAC3C,QAAM,YAAY;AAClB,QAAM,MAAM,WAAW;AACvB,QAAM,MAAM,UAAU;AACtB,QAAM,MAAM,gBAAgB;AAC5B,WAAS,KAAK,YAAY,KAAK;AAC/B,QAAM,QAAQ,iBAAiB,KAAK;AACpC,QAAM,WAAW,yBAAyB,KAAK,SAAS,MAAM;AAC9D,QAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7C,WAAS,KAAK,YAAY,KAAK;AAC/B,MAAI,CAAC,SAAS,UAAU,sBAAsB,UAAU,cAAe,QAAO;AAC9E,SAAO;AACT;AAQO,SAAS,gBAAgB,OAAuB;AACrD,MAAI,CAAC,qBAAqB,KAAK,EAAG,QAAO;AACzC,QAAM,SAAS,cAAc,IAAI,KAAK;AACtC,MAAI,WAAW,OAAW,QAAO;AACjC,QAAM,WAAW,kBAAkB,KAAK,KAAK;AAC7C,gBAAc,IAAI,OAAO,QAAQ;AACjC,SAAO;AACT;;;"}

package/dist/lib/color.d.ts

@@ -0,0 +1,10 @@
+/** True when `color` looks like a Tailwind color utility class rather than a CSS value. */
+export declare function isTailwindColorClass(color: string): boolean;
+/**
+ * Returns a usable CSS color value for `color`. CSS values pass through
+ * unchanged; Tailwind color classes are resolved to their computed value
+ * (memoized). Falls back to the original string when resolution is impossible
+ * (SSR, unknown class) so callers still get something to render.
+ */
+export declare function resolveCssColor(color: string): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/lib/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AASA,2FAA2F;AAC3F,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE3D;AA4BD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOrD"}

package/dist/lib/color.js

@@ -0,0 +1,33 @@
+const TAILWIND_COLOR_CLASS = /^(?:bg|text|border|fill|stroke)-/;
+function isTailwindColorClass(color) {
+  return TAILWIND_COLOR_CLASS.test(color.trim());
+}
+const computedCache = /* @__PURE__ */ new Map();
+function computeClassColor(cssClass) {
+  if (typeof document === "undefined") return void 0;
+  const probe = document.createElement("span");
+  probe.className = cssClass;
+  probe.style.position = "absolute";
+  probe.style.opacity = "0";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  const style = getComputedStyle(probe);
+  const usesText = /^(?:text|stroke|fill)-/.test(cssClass.trim());
+  const value = usesText ? style.color : style.backgroundColor;
+  document.body.removeChild(probe);
+  if (!value || value === "rgba(0, 0, 0, 0)" || value === "transparent") return void 0;
+  return value;
+}
+function resolveCssColor(color) {
+  if (!isTailwindColorClass(color)) return color;
+  const cached = computedCache.get(color);
+  if (cached !== void 0) return cached;
+  const computed = computeClassColor(color) ?? color;
+  computedCache.set(color, computed);
+  return computed;
+}
+export {
+  isTailwindColorClass,
+  resolveCssColor
+};
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sources":["../../src/lib/color.ts"],"sourcesContent":["// Resolves a series/segment \"color\" that may be expressed either as a CSS color\n// value (e.g. \"#10b981\", \"rgb(16 185 129)\", \"var(--chart-3)\") or as a Tailwind\n// utility class (e.g. \"bg-emerald-500\", \"text-rose-500\"). Consumers that need a\n// real CSS value — recharts stroke/fill, inline backgroundColor — call\n// resolveCssColor; the class→value resolution is done once per class via a probe\n// element and cached.\n\nconst TAILWIND_COLOR_CLASS = /^(?:bg|text|border|fill|stroke)-/;\n\n/** True when `color` looks like a Tailwind color utility class rather than a CSS value. */\nexport function isTailwindColorClass(color: string): boolean {\n  return TAILWIND_COLOR_CLASS.test(color.trim());\n}\n\nconst computedCache = new Map<string, string>();\n\n/**\n * Reads the rendered color of a Tailwind class by mounting an off-screen probe\n * and reading getComputedStyle. `text-`/`stroke-`/`fill-` classes resolve from\n * `color`; everything else (incl. `bg-`/`border-`) from `backgroundColor`.\n * Returns undefined when no document is available (SSR) or the property is\n * empty/transparent (so callers can fall back). No inline color is set on the\n * probe — an inline value outranks the class and would mask the class's color.\n */\nfunction computeClassColor(cssClass: string): string | undefined {\n  if (typeof document === \"undefined\") return undefined;\n  const probe = document.createElement(\"span\");\n  probe.className = cssClass;\n  probe.style.position = \"absolute\";\n  probe.style.opacity = \"0\";\n  probe.style.pointerEvents = \"none\";\n  document.body.appendChild(probe);\n  const style = getComputedStyle(probe);\n  const usesText = /^(?:text|stroke|fill)-/.test(cssClass.trim());\n  const value = usesText ? style.color : style.backgroundColor;\n  document.body.removeChild(probe);\n  if (!value || value === \"rgba(0, 0, 0, 0)\" || value === \"transparent\") return undefined;\n  return value;\n}\n\n/**\n * Returns a usable CSS color value for `color`. CSS values pass through\n * unchanged; Tailwind color classes are resolved to their computed value\n * (memoized). Falls back to the original string when resolution is impossible\n * (SSR, unknown class) so callers still get something to render.\n */\nexport function resolveCssColor(color: string): string {\n  if (!isTailwindColorClass(color)) return color;\n  const cached = computedCache.get(color);\n  if (cached !== undefined) return cached;\n  const computed = computeClassColor(color) ?? color;\n  computedCache.set(color, computed);\n  return computed;\n}\n"],"names":[],"mappings":"AAOA,MAAM,uBAAuB;AAGtB,SAAS,qBAAqB,OAAwB;AAC3D,SAAO,qBAAqB,KAAK,MAAM,KAAA,CAAM;AAC/C;AAEA,MAAM,oCAAoB,IAAA;AAU1B,SAAS,kBAAkB,UAAsC;AAC/D,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,QAAQ,SAAS,cAAc,MAAM;AAC3C,QAAM,YAAY;AAClB,QAAM,MAAM,WAAW;AACvB,QAAM,MAAM,UAAU;AACtB,QAAM,MAAM,gBAAgB;AAC5B,WAAS,KAAK,YAAY,KAAK;AAC/B,QAAM,QAAQ,iBAAiB,KAAK;AACpC,QAAM,WAAW,yBAAyB,KAAK,SAAS,MAAM;AAC9D,QAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7C,WAAS,KAAK,YAAY,KAAK;AAC/B,MAAI,CAAC,SAAS,UAAU,sBAAsB,UAAU,cAAe,QAAO;AAC9E,SAAO;AACT;AAQO,SAAS,gBAAgB,OAAuB;AACrD,MAAI,CAAC,qBAAqB,KAAK,EAAG,QAAO;AACzC,QAAM,SAAS,cAAc,IAAI,KAAK;AACtC,MAAI,WAAW,OAAW,QAAO;AACjC,QAAM,WAAW,kBAAkB,KAAK,KAAK;AAC7C,gBAAc,IAAI,OAAO,QAAQ;AACjC,SAAO;AACT;"}

package/dist/lib/format.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const LOCALE = "en-US";
+function intl(value, maxFractionDigits = 1) {
+  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(
+    Number.isFinite(value) ? value : 0
+  );
+}
+function trimZero(s) {
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB", "PB"];
+function formatBytes(bytes, opts) {
+  const suffix = (opts == null ? void 0 : opts.suffix) ?? "";
+  if (bytes === void 0 || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;
+  const base = (opts == null ? void 0 : opts.base) ?? 1024;
+  let size = bytes;
+  let unit = 0;
+  while (size >= base && unit < BYTE_UNITS.length - 1) {
+    size /= base;
+    unit++;
+  }
+  const rendered = size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));
+  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;
+}
+function formatBytesPerSecond(bytes) {
+  return formatBytes(bytes, { suffix: "/s" });
+}
+const SHORT_UNITS = ["", "K", "M", "B", "T"];
+function formatShort(value) {
+  if (value === void 0 || !Number.isFinite(value)) return "0";
+  const sign = value < 0 ? "-" : "";
+  let n = Math.abs(value);
+  if (n < 1e3) return `${sign}${intl(n)}`;
+  let unit = 0;
+  while (n >= 1e3 && unit < SHORT_UNITS.length - 1) {
+    n /= 1e3;
+    unit++;
+  }
+  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));
+  return `${sign}${rendered}${SHORT_UNITS[unit]}`;
+}
+function formatDuration(value, opts) {
+  if (value === void 0 || !Number.isFinite(value)) return "0 ms";
+  const ms = (opts == null ? void 0 : opts.from) === "s" ? value * 1e3 : value;
+  const abs = Math.abs(ms);
+  if (abs < 1e3) return `${intl(ms, 0)} ms`;
+  if (abs < 6e4) return `${intl(ms / 1e3)} s`;
+  if (abs < 36e5) return `${intl(ms / 6e4)} min`;
+  return `${intl(ms / 36e5)} h`;
+}
+const UNIT_FORMATTERS = {
+  none: (v) => formatShort(v),
+  short: (v) => formatShort(v),
+  percent: (v) => `${intl(v)}%`,
+  percentunit: (v) => `${intl(v * 100)}%`,
+  "%": (v) => `${intl(v)}%`,
+  bytes: (v) => formatBytes(v, { base: 1024 }),
+  decbytes: (v) => formatBytes(v, { base: 1e3 }),
+  Bps: (v) => formatBytesPerSecond(v),
+  binBps: (v) => formatBytesPerSecond(v),
+  ms: (v) => formatDuration(v, { from: "ms" }),
+  s: (v) => formatDuration(v, { from: "s" })
+};
+function formatUnit(value, unit) {
+  const v = Number.isFinite(value) ? value : 0;
+  if (!unit) return intl(v);
+  const fmt = UNIT_FORMATTERS[unit];
+  if (fmt) return fmt(v);
+  return `${intl(v)}${unit}`;
+}
+exports.formatBytes = formatBytes;
+exports.formatBytesPerSecond = formatBytesPerSecond;
+exports.formatDuration = formatDuration;
+exports.formatShort = formatShort;
+exports.formatUnit = formatUnit;
+//# sourceMappingURL=format.cjs.map

package/dist/lib/format.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.cjs","sources":["../../src/lib/format.ts"],"sourcesContent":["// Value formatters and a Grafana-style unit registry, shared by TimeseriesPanel\n// (and any other metric display). Pure — no React — so it is trivially testable.\n//\n// `formatUnit(value, unit)` dispatches on a Grafana unit identifier (e.g.\n// \"bytes\", \"Bps\", \"percent\", \"ms\", \"short\"). Unknown unit strings are treated as\n// a raw suffix appended to the formatted number, preserving callers that pass a\n// literal like \"%\" or \"req\".\n\nconst LOCALE = \"en-US\";\n\nfunction intl(value: number, maxFractionDigits = 1): string {\n  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(\n    Number.isFinite(value) ? value : 0,\n  );\n}\n\n/** Drops a trailing \".0\" so whole values read \"1 KB\" rather than \"1.0 KB\". */\nfunction trimZero(s: string): string {\n  return s.endsWith(\".0\") ? s.slice(0, -2) : s;\n}\n\nexport interface FormatBytesOptions {\n  /** 1024 (IEC, the default) or 1000 (SI/decimal). */\n  base?: 1000 | 1024;\n  /** Appended after the unit label, e.g. \"/s\" for a rate. */\n  suffix?: string;\n}\n\nconst BYTE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"] as const;\n\n/**\n * Human-readable byte size. 1024-based by default with B/KB/MB/GB/TB/PB labels,\n * matching the prior diagnostics formatter. Whole numbers and values >= 10 drop\n * the fraction; smaller fractional values keep one decimal.\n */\nexport function formatBytes(bytes?: number, opts?: FormatBytesOptions): string {\n  const suffix = opts?.suffix ?? \"\";\n  if (bytes === undefined || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;\n  const base = opts?.base ?? 1024;\n  let size = bytes;\n  let unit = 0;\n  while (size >= base && unit < BYTE_UNITS.length - 1) {\n    size /= base;\n    unit++;\n  }\n  const rendered = size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));\n  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;\n}\n\n/** Byte rate, e.g. \"1.5 MB/s\". 1024-based. */\nexport function formatBytesPerSecond(bytes?: number): string {\n  return formatBytes(bytes, { suffix: \"/s\" });\n}\n\nconst SHORT_UNITS = [\"\", \"K\", \"M\", \"B\", \"T\"] as const;\n\n/** SI abbreviation: 999 -> \"999\", 1200 -> \"1.2K\", 3_400_000 -> \"3.4M\". */\nexport function formatShort(value?: number): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0\";\n  const sign = value < 0 ? \"-\" : \"\";\n  let n = Math.abs(value);\n  if (n < 1000) return `${sign}${intl(n)}`;\n  let unit = 0;\n  while (n >= 1000 && unit < SHORT_UNITS.length - 1) {\n    n /= 1000;\n    unit++;\n  }\n  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));\n  return `${sign}${rendered}${SHORT_UNITS[unit]}`;\n}\n\n/**\n * Duration rendered from a millisecond (default) or second input. Picks ms / s /\n * min / h by magnitude: 850 -> \"850 ms\", 1500 -> \"1.5 s\", 90_000 -> \"1.5 min\".\n */\nexport function formatDuration(value?: number, opts?: { from?: \"ms\" | \"s\" }): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0 ms\";\n  const ms = opts?.from === \"s\" ? value * 1000 : value;\n  const abs = Math.abs(ms);\n  if (abs < 1000) return `${intl(ms, 0)} ms`;\n  if (abs < 60_000) return `${intl(ms / 1000)} s`;\n  if (abs < 3_600_000) return `${intl(ms / 60_000)} min`;\n  return `${intl(ms / 3_600_000)} h`;\n}\n\n// formatters keyed by Grafana unit identifier. Keys not present here fall through\n// to the raw-suffix path in formatUnit.\nconst UNIT_FORMATTERS: Record<string, (v: number) => string> = {\n  none: (v) => formatShort(v),\n  short: (v) => formatShort(v),\n  percent: (v) => `${intl(v)}%`,\n  percentunit: (v) => `${intl(v * 100)}%`,\n  \"%\": (v) => `${intl(v)}%`,\n  bytes: (v) => formatBytes(v, { base: 1024 }),\n  decbytes: (v) => formatBytes(v, { base: 1000 }),\n  Bps: (v) => formatBytesPerSecond(v),\n  binBps: (v) => formatBytesPerSecond(v),\n  ms: (v) => formatDuration(v, { from: \"ms\" }),\n  s: (v) => formatDuration(v, { from: \"s\" }),\n};\n\n/**\n * Formats a value for display per a Grafana-style unit key. Unknown units are\n * appended as a literal suffix (back-compat for callers passing \"%\", \"req\",\n * etc.); an absent unit yields the plain localized number.\n */\nexport function formatUnit(value: number, unit?: string): string {\n  const v = Number.isFinite(value) ? value : 0;\n  if (!unit) return intl(v);\n  const fmt = UNIT_FORMATTERS[unit];\n  if (fmt) return fmt(v);\n  return `${intl(v)}${unit}`;\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/format.d.ts

@@ -0,0 +1,30 @@
+export interface FormatBytesOptions {
+    /** 1024 (IEC, the default) or 1000 (SI/decimal). */
+    base?: 1000 | 1024;
+    /** Appended after the unit label, e.g. "/s" for a rate. */
+    suffix?: string;
+}
+/**
+ * Human-readable byte size. 1024-based by default with B/KB/MB/GB/TB/PB labels,
+ * matching the prior diagnostics formatter. Whole numbers and values >= 10 drop
+ * the fraction; smaller fractional values keep one decimal.
+ */
+export declare function formatBytes(bytes?: number, opts?: FormatBytesOptions): string;
+/** Byte rate, e.g. "1.5 MB/s". 1024-based. */
+export declare function formatBytesPerSecond(bytes?: number): string;
+/** SI abbreviation: 999 -> "999", 1200 -> "1.2K", 3_400_000 -> "3.4M". */
+export declare function formatShort(value?: number): string;
+/**
+ * Duration rendered from a millisecond (default) or second input. Picks ms / s /
+ * min / h by magnitude: 850 -> "850 ms", 1500 -> "1.5 s", 90_000 -> "1.5 min".
+ */
+export declare function formatDuration(value?: number, opts?: {
+    from?: "ms" | "s";
+}): string;
+/**
+ * Formats a value for display per a Grafana-style unit key. Unknown units are
+ * appended as a literal suffix (back-compat for callers passing "%", "req",
+ * etc.); an absent unit yields the plain localized number.
+ */
+export declare function formatUnit(value: number, unit?: string): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/lib/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/lib/format.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAY7E;AAED,8CAA8C;AAC9C,wBAAgB,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAE3D;AAID,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAYlD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,CAAA;CAAE,GAAG,MAAM,CAQnF;AAkBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAM/D"}

package/dist/lib/format.js

@@ -0,0 +1,77 @@
+const LOCALE = "en-US";
+function intl(value, maxFractionDigits = 1) {
+  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(
+    Number.isFinite(value) ? value : 0
+  );
+}
+function trimZero(s) {
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB", "PB"];
+function formatBytes(bytes, opts) {
+  const suffix = (opts == null ? void 0 : opts.suffix) ?? "";
+  if (bytes === void 0 || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;
+  const base = (opts == null ? void 0 : opts.base) ?? 1024;
+  let size = bytes;
+  let unit = 0;
+  while (size >= base && unit < BYTE_UNITS.length - 1) {
+    size /= base;
+    unit++;
+  }
+  const rendered = size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));
+  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;
+}
+function formatBytesPerSecond(bytes) {
+  return formatBytes(bytes, { suffix: "/s" });
+}
+const SHORT_UNITS = ["", "K", "M", "B", "T"];
+function formatShort(value) {
+  if (value === void 0 || !Number.isFinite(value)) return "0";
+  const sign = value < 0 ? "-" : "";
+  let n = Math.abs(value);
+  if (n < 1e3) return `${sign}${intl(n)}`;
+  let unit = 0;
+  while (n >= 1e3 && unit < SHORT_UNITS.length - 1) {
+    n /= 1e3;
+    unit++;
+  }
+  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));
+  return `${sign}${rendered}${SHORT_UNITS[unit]}`;
+}
+function formatDuration(value, opts) {
+  if (value === void 0 || !Number.isFinite(value)) return "0 ms";
+  const ms = (opts == null ? void 0 : opts.from) === "s" ? value * 1e3 : value;
+  const abs = Math.abs(ms);
+  if (abs < 1e3) return `${intl(ms, 0)} ms`;
+  if (abs < 6e4) return `${intl(ms / 1e3)} s`;
+  if (abs < 36e5) return `${intl(ms / 6e4)} min`;
+  return `${intl(ms / 36e5)} h`;
+}
+const UNIT_FORMATTERS = {
+  none: (v) => formatShort(v),
+  short: (v) => formatShort(v),
+  percent: (v) => `${intl(v)}%`,
+  percentunit: (v) => `${intl(v * 100)}%`,
+  "%": (v) => `${intl(v)}%`,
+  bytes: (v) => formatBytes(v, { base: 1024 }),
+  decbytes: (v) => formatBytes(v, { base: 1e3 }),
+  Bps: (v) => formatBytesPerSecond(v),
+  binBps: (v) => formatBytesPerSecond(v),
+  ms: (v) => formatDuration(v, { from: "ms" }),
+  s: (v) => formatDuration(v, { from: "s" })
+};
+function formatUnit(value, unit) {
+  const v = Number.isFinite(value) ? value : 0;
+  if (!unit) return intl(v);
+  const fmt = UNIT_FORMATTERS[unit];
+  if (fmt) return fmt(v);
+  return `${intl(v)}${unit}`;
+}
+export {
+  formatBytes,
+  formatBytesPerSecond,
+  formatDuration,
+  formatShort,
+  formatUnit
+};
+//# sourceMappingURL=format.js.map

package/dist/lib/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sources":["../../src/lib/format.ts"],"sourcesContent":["// Value formatters and a Grafana-style unit registry, shared by TimeseriesPanel\n// (and any other metric display). Pure — no React — so it is trivially testable.\n//\n// `formatUnit(value, unit)` dispatches on a Grafana unit identifier (e.g.\n// \"bytes\", \"Bps\", \"percent\", \"ms\", \"short\"). Unknown unit strings are treated as\n// a raw suffix appended to the formatted number, preserving callers that pass a\n// literal like \"%\" or \"req\".\n\nconst LOCALE = \"en-US\";\n\nfunction intl(value: number, maxFractionDigits = 1): string {\n  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(\n    Number.isFinite(value) ? value : 0,\n  );\n}\n\n/** Drops a trailing \".0\" so whole values read \"1 KB\" rather than \"1.0 KB\". */\nfunction trimZero(s: string): string {\n  return s.endsWith(\".0\") ? s.slice(0, -2) : s;\n}\n\nexport interface FormatBytesOptions {\n  /** 1024 (IEC, the default) or 1000 (SI/decimal). */\n  base?: 1000 | 1024;\n  /** Appended after the unit label, e.g. \"/s\" for a rate. */\n  suffix?: string;\n}\n\nconst BYTE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"] as const;\n\n/**\n * Human-readable byte size. 1024-based by default with B/KB/MB/GB/TB/PB labels,\n * matching the prior diagnostics formatter. Whole numbers and values >= 10 drop\n * the fraction; smaller fractional values keep one decimal.\n */\nexport function formatBytes(bytes?: number, opts?: FormatBytesOptions): string {\n  const suffix = opts?.suffix ?? \"\";\n  if (bytes === undefined || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;\n  const base = opts?.base ?? 1024;\n  let size = bytes;\n  let unit = 0;\n  while (size >= base && unit < BYTE_UNITS.length - 1) {\n    size /= base;\n    unit++;\n  }\n  const rendered = size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));\n  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;\n}\n\n/** Byte rate, e.g. \"1.5 MB/s\". 1024-based. */\nexport function formatBytesPerSecond(bytes?: number): string {\n  return formatBytes(bytes, { suffix: \"/s\" });\n}\n\nconst SHORT_UNITS = [\"\", \"K\", \"M\", \"B\", \"T\"] as const;\n\n/** SI abbreviation: 999 -> \"999\", 1200 -> \"1.2K\", 3_400_000 -> \"3.4M\". */\nexport function formatShort(value?: number): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0\";\n  const sign = value < 0 ? \"-\" : \"\";\n  let n = Math.abs(value);\n  if (n < 1000) return `${sign}${intl(n)}`;\n  let unit = 0;\n  while (n >= 1000 && unit < SHORT_UNITS.length - 1) {\n    n /= 1000;\n    unit++;\n  }\n  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));\n  return `${sign}${rendered}${SHORT_UNITS[unit]}`;\n}\n\n/**\n * Duration rendered from a millisecond (default) or second input. Picks ms / s /\n * min / h by magnitude: 850 -> \"850 ms\", 1500 -> \"1.5 s\", 90_000 -> \"1.5 min\".\n */\nexport function formatDuration(value?: number, opts?: { from?: \"ms\" | \"s\" }): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0 ms\";\n  const ms = opts?.from === \"s\" ? value * 1000 : value;\n  const abs = Math.abs(ms);\n  if (abs < 1000) return `${intl(ms, 0)} ms`;\n  if (abs < 60_000) return `${intl(ms / 1000)} s`;\n  if (abs < 3_600_000) return `${intl(ms / 60_000)} min`;\n  return `${intl(ms / 3_600_000)} h`;\n}\n\n// formatters keyed by Grafana unit identifier. Keys not present here fall through\n// to the raw-suffix path in formatUnit.\nconst UNIT_FORMATTERS: Record<string, (v: number) => string> = {\n  none: (v) => formatShort(v),\n  short: (v) => formatShort(v),\n  percent: (v) => `${intl(v)}%`,\n  percentunit: (v) => `${intl(v * 100)}%`,\n  \"%\": (v) => `${intl(v)}%`,\n  bytes: (v) => formatBytes(v, { base: 1024 }),\n  decbytes: (v) => formatBytes(v, { base: 1000 }),\n  Bps: (v) => formatBytesPerSecond(v),\n  binBps: (v) => formatBytesPerSecond(v),\n  ms: (v) => formatDuration(v, { from: \"ms\" }),\n  s: (v) => formatDuration(v, { from: \"s\" }),\n};\n\n/**\n * Formats a value for display per a Grafana-style unit key. Unknown units are\n * appended as a literal suffix (back-compat for callers passing \"%\", \"req\",\n * etc.); an absent unit yields the plain localized number.\n */\nexport function formatUnit(value: number, unit?: string): string {\n  const v = Number.isFinite(value) ? value : 0;\n  if (!unit) return intl(v);\n  const fmt = UNIT_FORMATTERS[unit];\n  if (fmt) return fmt(v);\n  return `${intl(v)}${unit}`;\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/DropdownMenu.cjs

@@ -16,12 +16,19 @@ function DropdownMenu({
   items,
   children,
   align = "right",
+  onOpenChange,
   title,
   className,
   menuClassName
 }) {
   const [open, setOpen] = react.useState(false);
   const wrapperRef = react.useRef(null);
+  const onOpenChangeRef = react.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  react.useEffect(() => {
+    var _a;
+    (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, open);
+  }, [open]);
   react.useEffect(() => {
     if (!open) return;
     const onMouseDown = (e) => {
@@ -40,8 +47,17 @@ function DropdownMenu({
   }, [open]);
   const closeMenu = () => setOpen(false);
   const toggle = () => setOpen((v) => !v);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-block", className), ref: wrapperRef, children: [
-    trigger ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": open, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-flex", className), ref: wrapperRef, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "contents",
+        onClick: toggle,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        children: trigger
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
       button.Button,
       {
         variant,

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const onMouseDown = (e: MouseEvent) => {\n      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onMouseDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onMouseDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const closeMenu = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} ref={wrapperRef}>\n      {trigger ? (\n        <span onClick={toggle} aria-haspopup=\"menu\" aria-expanded={open}>\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          variant={variant}\n          size={size}\n          onClick={toggle}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n            menuClassName,\n          )}\n        >\n          {children\n            ? children(closeMenu)\n            : items?.map((item, i) => (\n                <button\n                  key={i}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  title={item.title}\n                  onClick={() => {\n                    item.onSelect();\n                    closeMenu();\n                  }}\n                  className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {item.icon && (\n                    <Icon\n                      {...(typeof item.icon === \"string\"\n                        ? { name: item.icon }\n                        : { icon: item.icon })}\n                    />\n                  )}\n                  {item.label}\n                </button>\n              ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","jsxs","cn","jsx","Button","Icon","UiChevronDown"],"mappings":";;;;;;;;AA8CO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AACtC,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAE9CC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,CAAC,MAAkB;;AACrC,UAAI,GAAC,gBAAW,YAAX,mBAAoB,SAAS,EAAE,kBAAyB,KAAK;AAAA,IACpE;AACA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AACrD,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YAAY,MAAM,QAAQ,KAAK;AACrC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAEtC,SACEC,gCAAC,SAAI,WAAWC,MAAAA,GAAG,yBAAyB,SAAS,GAAG,KAAK,YAC1D,UAAA;AAAA,IAAA,UACCC,2BAAAA,IAAC,UAAK,SAAS,QAAQ,iBAAc,QAAO,iBAAe,MACxD,UAAA,QAAA,CACH,IAEAF,2BAAAA;AAAAA,MAACG,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QAEd,UAAA;AAAA,UAAA,QAAQD,2BAAAA,IAACE,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,UACA,CAAC,eAAeF,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAMC,cAAAA,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,QACCH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,UAAU,UAAU,YAAY;AAAA,UAChC;AAAA,QAAA;AAAA,QAGD,UAAA,WACG,SAAS,SAAS,IAClB,+BAAO,IAAI,CAAC,MAAM,MAChBD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,UAAU,KAAK;AAAA,YACf,OAAO,KAAK;AAAA,YACZ,SAAS,MAAM;AACb,mBAAK,SAAA;AACL,wBAAA;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,KAAK,QACJE,2BAAAA;AAAAA,gBAACE,KAAAA;AAAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGzB,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAlBD;AAAA,QAAA;AAAA,MAoBR;AAAA,IAAA;AAAA,EACP,GAEJ;AAEJ;;"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onMouseDown = (e: MouseEvent) => {\n      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onMouseDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onMouseDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const closeMenu = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)} ref={wrapperRef}>\n      {trigger ? (\n        <span\n          className=\"contents\"\n          onClick={toggle}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          variant={variant}\n          size={size}\n          onClick={toggle}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n            menuClassName,\n          )}\n        >\n          {children\n            ? children(closeMenu)\n            : items?.map((item, i) => (\n                <button\n                  key={i}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  title={item.title}\n                  onClick={() => {\n                    item.onSelect();\n                    closeMenu();\n                  }}\n                  className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {item.icon && (\n                    <Icon\n                      {...(typeof item.icon === \"string\"\n                        ? { name: item.icon }\n                        : { icon: item.icon })}\n                    />\n                  )}\n                  {item.label}\n                </button>\n              ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","jsxs","cn","jsx","Button","Icon","UiChevronDown"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts

@@ -32,6 +32,8 @@ export type DropdownMenuProps = {
     children?: (closeMenu: () => void) => ReactNode;
     /** Horizontal alignment of the menu relative to the trigger. */
     align?: "left" | "right";
+    /** Notified whenever the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     /** Browser tooltip / accessible label for the default trigger. */
     title?: string;
     /** Classes applied to the wrapper. */
@@ -39,5 +41,5 @@ export type DropdownMenuProps = {
     /** Classes applied to the floating menu. */
     menuClassName?: string;
 };
-export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, align, title, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, align, onOpenChange, title, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/overlay/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CAiFnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CA4FnB"}

package/dist/overlay/DropdownMenu.js

@@ -14,12 +14,19 @@ function DropdownMenu({
   items,
   children,
   align = "right",
+  onOpenChange,
   title,
   className,
   menuClassName
 }) {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  useEffect(() => {
+    var _a;
+    (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, open);
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const onMouseDown = (e) => {
@@ -38,8 +45,17 @@ function DropdownMenu({
   }, [open]);
   const closeMenu = () => setOpen(false);
   const toggle = () => setOpen((v) => !v);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", className), ref: wrapperRef, children: [
-    trigger ? /* @__PURE__ */ jsx("span", { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": open, children: trigger }) : /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), ref: wrapperRef, children: [
+    trigger ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "contents",
+        onClick: toggle,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        children: trigger
+      }
+    ) : /* @__PURE__ */ jsxs(
       Button,
       {
         variant,