@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/data/ExecutionTree.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Tree = require("./Tree.cjs");
+function ExecutionTree({
+  roots,
+  className,
+  empty,
+  showControls,
+  defaultOpenDepth = 1,
+  costThreshold,
+  renderRow,
+  loadChildren
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tree.Tree,
+    {
+      roots,
+      getKey: (n) => n.id,
+      getChildren: (n) => n.children,
+      defaultOpen: (_n, depth) => depth < defaultOpenDepth,
+      ...className !== void 0 ? { className } : {},
+      ...empty !== void 0 ? { empty } : {},
+      ...showControls !== void 0 ? { showControls } : {},
+      ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
+      renderRow: ({ node }) => renderRow ? renderRow(node) : /* @__PURE__ */ jsxRuntime.jsx(DefaultExecutionRow, { node, costThreshold })
+    }
+  );
+}
+function DefaultExecutionRow({ node, costThreshold }) {
+  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs", children: [
+    node.status && /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { status: node.status }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: node.label }),
+    node.cost != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: slow ? "text-red-600" : "text-muted-foreground", children: formatCost(node) }),
+    node.times != null && node.times > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/60", children: [
+      "×",
+      node.times
+    ] }),
+    node.className && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "break-all text-muted-foreground/60", children: [
+      node.className,
+      node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : ""
+    ] }),
+    node.detail && Object.entries(node.detail).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/60", children: [
+      k,
+      "=",
+      v
+    ] }, k))
+  ] });
+}
+function formatCost(node) {
+  const unit = node.unit || "ms";
+  const value = node.cost ?? 0;
+  return unit === "ms" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;
+}
+const STATUS_COLOR = {
+  ok: "text-green-600",
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-amber-500",
+  running: "text-blue-600",
+  pending: "text-muted-foreground"
+};
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 ${STATUS_COLOR[status] ?? "text-muted-foreground"}`, title: status, children: "●" });
+}
+exports.ExecutionTree = ExecutionTree;
+//# sourceMappingURL=ExecutionTree.cjs.map

package/dist/data/ExecutionTree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionTree.cjs","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  loadChildren,\n}: ExecutionTreeProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":["jsx","Tree","jsxs"],"mappings":";;;;AAgDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,KAAA,MACZ,YAAY,UAAU,IAAI,IAAID,+BAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACEE,2BAAAA,KAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAUF,+BAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZA,2BAAAA,IAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClCE,2BAAAA,KAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJA,gCAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpCA,gCAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACEF,2BAAAA,IAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;;"}

package/dist/data/ExecutionTree.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+export type ExecutionNode = {
+    /** Stable unique key within the tree. */
+    id: string;
+    /** Display label (method/operation/step name). */
+    label: string;
+    /** Free-form node kind hint. */
+    kind?: string;
+    /** Outcome: ok | error | warning | running | pending. */
+    status?: string;
+    /** Numeric cost in `unit`. */
+    cost?: number;
+    /** Cost unit (default "ms"). */
+    unit?: string;
+    /** Aggregated invocation count (renders ×N when > 1). */
+    times?: number;
+    /** Owning class / file, rendered as a muted suffix. */
+    className?: string;
+    lineNumber?: number;
+    /** Extra key/values rendered as muted chips. */
+    detail?: Record<string, string>;
+    /** Node can be expanded via loadChildren even with no inline children. */
+    expandable?: boolean;
+    children?: ExecutionNode[];
+};
+export type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {
+    roots: T[];
+    className?: string;
+    empty?: ReactNode;
+    showControls?: boolean;
+    /** Open nodes shallower than this depth on first render (default 1). */
+    defaultOpenDepth?: number;
+    /** Costs at or above this value render in red (slow-path highlight). */
+    costThreshold?: number;
+    /** Override the entire row rendering. */
+    renderRow?: (node: T) => ReactNode;
+    loadChildren?: (node: T) => Promise<T[]>;
+};
+export declare function ExecutionTree<T extends ExecutionNode = ExecutionNode>({ roots, className, empty, showControls, defaultOpenDepth, costThreshold, renderRow, loadChildren, }: ExecutionTreeProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExecutionTree.d.ts.map

package/dist/data/ExecutionTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionTree.d.ts","sourceRoot":"","sources":["../../src/data/ExecutionTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,aAAa,GAAG;IAC1B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,EAAE,EACrE,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,aAAa,EACb,SAAS,EACT,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAgBvB"}

package/dist/data/ExecutionTree.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tree } from "./Tree.js";
+function ExecutionTree({
+  roots,
+  className,
+  empty,
+  showControls,
+  defaultOpenDepth = 1,
+  costThreshold,
+  renderRow,
+  loadChildren
+}) {
+  return /* @__PURE__ */ jsx(
+    Tree,
+    {
+      roots,
+      getKey: (n) => n.id,
+      getChildren: (n) => n.children,
+      defaultOpen: (_n, depth) => depth < defaultOpenDepth,
+      ...className !== void 0 ? { className } : {},
+      ...empty !== void 0 ? { empty } : {},
+      ...showControls !== void 0 ? { showControls } : {},
+      ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
+      renderRow: ({ node }) => renderRow ? renderRow(node) : /* @__PURE__ */ jsx(DefaultExecutionRow, { node, costThreshold })
+    }
+  );
+}
+function DefaultExecutionRow({ node, costThreshold }) {
+  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs", children: [
+    node.status && /* @__PURE__ */ jsx(StatusDot, { status: node.status }),
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: node.label }),
+    node.cost != null && /* @__PURE__ */ jsx("span", { className: slow ? "text-red-600" : "text-muted-foreground", children: formatCost(node) }),
+    node.times != null && node.times > 1 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+      "×",
+      node.times
+    ] }),
+    node.className && /* @__PURE__ */ jsxs("span", { className: "break-all text-muted-foreground/60", children: [
+      node.className,
+      node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : ""
+    ] }),
+    node.detail && Object.entries(node.detail).map(([k, v]) => /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+      k,
+      "=",
+      v
+    ] }, k))
+  ] });
+}
+function formatCost(node) {
+  const unit = node.unit || "ms";
+  const value = node.cost ?? 0;
+  return unit === "ms" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;
+}
+const STATUS_COLOR = {
+  ok: "text-green-600",
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-amber-500",
+  running: "text-blue-600",
+  pending: "text-muted-foreground"
+};
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsx("span", { className: `shrink-0 ${STATUS_COLOR[status] ?? "text-muted-foreground"}`, title: status, children: "●" });
+}
+export {
+  ExecutionTree
+};
+//# sourceMappingURL=ExecutionTree.js.map

package/dist/data/ExecutionTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionTree.js","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  loadChildren,\n}: ExecutionTreeProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAgDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,KAAA,MACZ,YAAY,UAAU,IAAI,IAAI,oBAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACE,qBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAU,oBAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChD,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZ,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClC,qBAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJ,qBAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpC,qBAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACE,oBAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;"}

package/dist/data/Gauge.cjs

@@ -20,10 +20,37 @@ function Gauge({
   icon,
   subtitle,
   meta,
+  variant = "default",
+  showLabel = true,
   className
 }) {
   const pct = max > 0 ? Math.round(value / max * 100) : 0;
   const displayValue = max === 100 ? value : pct;
+  const labelText = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
+  const valueNode = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("font-semibold tabular-nums", toneClass[tone]), children: [
+    displayValue,
+    suffix ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[0.85em] opacity-60", children: suffix }) : null
+  ] });
+  if (variant === "cell") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: utils.cn(
+          "inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs",
+          className
+        ),
+        title: labelText,
+        "aria-label": !showLabel ? labelText : void 0,
+        children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(GaugeIcon, { icon }) : null,
+          showLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: label }) : null,
+          valueNode,
+          meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: meta }) : null
+        ]
+      }
+    );
+  }
+  const showHeader = icon || showLabel || meta;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -31,18 +58,24 @@ function Gauge({
         "flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3",
         className
       ),
+      title: !showLabel ? labelText : void 0,
+      "aria-label": !showLabel ? labelText : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+        showHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
             icon ? /* @__PURE__ */ jsxRuntime.jsx(GaugeIcon, { icon }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+            showLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }) : null
           ] }),
           meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 truncate", children: meta }) : null
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: utils.cn("mt-2 text-2xl font-semibold tabular-nums tracking-tight", toneClass[tone]),
+            className: utils.cn(
+              showHeader && "mt-2",
+              "text-2xl font-semibold tabular-nums tracking-tight",
+              toneClass[tone]
+            ),
             children: [
               displayValue,
               suffix ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-sm opacity-60", children: suffix }) : null

package/dist/data/Gauge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.cjs","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          <span className=\"truncate\">{label}</span>\n        </span>\n        {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n      </div>\n      <span\n        className={cn(\"mt-2 text-2xl font-semibold tabular-nums tracking-tight\", toneClass[tone])}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon","isValidElement"],"mappings":";;;;;;AAkBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAOE,2BAAAA,IAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,UAAA,GACpC;AAAA,UACC,OAAOA,2BAAAA,IAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,GAC9D;AAAA,QACAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA,GAAG,2DAA2D,UAAU,IAAI,CAAC;AAAA,YAEvF,UAAA;AAAA,cAAA;AAAA,cACA,SAASC,2BAAAA,IAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAA4D;AAC/E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAOA,+BAACC,KAAAA,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AACA,MAAIC,MAAAA,eAAe,IAAI,GAAG;AACxB,WACEF,2BAAAA,IAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAAA,EAEJ;AAEA,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;;"}
+{"version":3,"file":"Gauge.cjs","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":["cn","jsx","jsxs","Icon","isValidElement"],"mappings":"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"}

package/dist/data/Gauge.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 export type GaugeTone = "neutral" | "success" | "warning" | "danger" | "info";
+export type GaugeVariant = "default" | "cell";
 export type GaugeProps = {
     label: ReactNode;
     value: number;
@@ -10,7 +11,11 @@ export type GaugeProps = {
     icon?: string | StaticIconComponent | ReactNode;
     subtitle?: ReactNode;
     meta?: ReactNode;
+    /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */
+    variant?: GaugeVariant;
+    /** Show the text label. Icons and values remain visible when false. */
+    showLabel?: boolean;
     className?: string;
 };
-export declare function Gauge({ label, value, max, tone, suffix, icon, subtitle, meta, className, }: GaugeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Gauge({ label, value, max, tone, suffix, icon, subtitle, meta, variant, showLabel, className, }: GaugeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Gauge.d.ts.map

package/dist/data/Gauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.d.ts","sourceRoot":"","sources":["../../src/data/Gauge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,GAAS,EACT,IAAgB,EAChB,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,UAAU,2CA4BZ"}
+{"version":3,"file":"Gauge.d.ts","sourceRoot":"","sources":["../../src/data/Gauge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,GAAS,EACT,IAAgB,EAChB,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAmB,EACnB,SAAgB,EAChB,SAAS,GACV,EAAE,UAAU,2CAmEZ"}

package/dist/data/Gauge.js

@@ -18,10 +18,37 @@ function Gauge({
   icon,
   subtitle,
   meta,
+  variant = "default",
+  showLabel = true,
   className
 }) {
   const pct = max > 0 ? Math.round(value / max * 100) : 0;
   const displayValue = max === 100 ? value : pct;
+  const labelText = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
+  const valueNode = /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", toneClass[tone]), children: [
+    displayValue,
+    suffix ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[0.85em] opacity-60", children: suffix }) : null
+  ] });
+  if (variant === "cell") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs",
+          className
+        ),
+        title: labelText,
+        "aria-label": !showLabel ? labelText : void 0,
+        children: [
+          icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
+          showLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: label }) : null,
+          valueNode,
+          meta ? /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: meta }) : null
+        ]
+      }
+    );
+  }
+  const showHeader = icon || showLabel || meta;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -29,18 +56,24 @@ function Gauge({
         "flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3",
         className
       ),
+      title: !showLabel ? labelText : void 0,
+      "aria-label": !showLabel ? labelText : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+        showHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
             icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+            showLabel ? /* @__PURE__ */ jsx("span", { className: "truncate", children: label }) : null
           ] }),
           meta ? /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate", children: meta }) : null
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsxs(
           "span",
           {
-            className: cn("mt-2 text-2xl font-semibold tabular-nums tracking-tight", toneClass[tone]),
+            className: cn(
+              showHeader && "mt-2",
+              "text-2xl font-semibold tabular-nums tracking-tight",
+              toneClass[tone]
+            ),
             children: [
               displayValue,
               suffix ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-sm opacity-60", children: suffix }) : null

package/dist/data/Gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gauge.js","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          <span className=\"truncate\">{label}</span>\n        </span>\n        {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n      </div>\n      <span\n        className={cn(\"mt-2 text-2xl font-semibold tabular-nums tracking-tight\", toneClass[tone])}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAO,oBAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACpC,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,UAAA,GACpC;AAAA,UACC,OAAO,oBAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,GAC9D;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,2DAA2D,UAAU,IAAI,CAAC;AAAA,YAEvF,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACC,oBAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAA4D;AAC/E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,oBAAC,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AACA,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,oBAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"Gauge.js","sources":["../../src/data/Gauge.tsx"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type GaugeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type GaugeVariant = \"default\" | \"cell\";\n\nexport type GaugeProps = {\n  label: ReactNode;\n  value: number;\n  max?: number;\n  tone?: GaugeTone;\n  suffix?: string;\n  icon?: string | StaticIconComponent | ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: GaugeVariant;\n  /** Show the text label. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst toneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-600 dark:text-green-400\",\n  warning: \"text-yellow-600 dark:text-yellow-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  info: \"text-blue-600 dark:text-blue-400\",\n};\n\nexport function Gauge({\n  label,\n  value,\n  max = 100,\n  tone = \"neutral\",\n  suffix = \"%\",\n  icon,\n  subtitle,\n  meta,\n  variant = \"default\",\n  showLabel = true,\n  className,\n}: GaugeProps) {\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const displayValue = max === 100 ? value : pct;\n  const labelText =\n    typeof label === \"string\" || typeof label === \"number\" ? String(label) : undefined;\n  const valueNode = (\n    <span className={cn(\"font-semibold tabular-nums\", toneClass[tone])}>\n      {displayValue}\n      {suffix ? <span className=\"ml-0.5 text-[0.85em] opacity-60\">{suffix}</span> : null}\n    </span>\n  );\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={labelText}\n        aria-label={!showLabel ? labelText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? (\n          <span className=\"min-w-0 truncate text-muted-foreground\">{label}</span>\n        ) : null}\n        {valueNode}\n        {meta ? <span className=\"shrink-0 truncate text-muted-foreground\">{meta}</span> : null}\n      </span>\n    );\n  }\n\n  const showHeader = icon || showLabel || meta;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3\",\n        className,\n      )}\n      title={!showLabel ? labelText : undefined}\n      aria-label={!showLabel ? labelText : undefined}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {icon ? <GaugeIcon icon={icon} /> : null}\n            {showLabel ? <span className=\"truncate\">{label}</span> : null}\n          </span>\n          {meta ? <span className=\"shrink-0 truncate\">{meta}</span> : null}\n        </div>\n      ) : null}\n      <span\n        className={cn(\n          showHeader && \"mt-2\",\n          \"text-2xl font-semibold tabular-nums tracking-tight\",\n          toneClass[tone],\n        )}\n      >\n        {displayValue}\n        {suffix ? <span className=\"ml-0.5 text-sm opacity-60\">{suffix}</span> : null}\n      </span>\n      {subtitle ? (\n        <span className=\"mt-1 truncate text-xs text-muted-foreground\">{subtitle}</span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent | ReactNode }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  if (isValidElement(icon)) {\n    return (\n      <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <Icon\n      icon={icon as StaticIconComponent}\n      width={16}\n      height={16}\n      className=\"text-muted-foreground\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAuBA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AACF,GAAe;AACb,QAAM,MAAM,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACxD,QAAM,eAAe,QAAQ,MAAM,QAAQ;AAC3C,QAAM,YACJ,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI;AAC3E,QAAM,iCACH,QAAA,EAAK,WAAW,GAAG,8BAA8B,UAAU,IAAI,CAAC,GAC9D,UAAA;AAAA,IAAA;AAAA,IACA,SAAS,oBAAC,QAAA,EAAK,WAAU,mCAAmC,kBAAO,IAAU;AAAA,EAAA,GAChF;AAGF,MAAI,YAAY,QAAQ;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACP,cAAY,CAAC,YAAY,YAAY;AAAA,QAEpC,UAAA;AAAA,UAAA,OAAO,oBAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,UACnC,YACC,oBAAC,QAAA,EAAK,WAAU,0CAA0C,iBAAM,IAC9D;AAAA,UACH;AAAA,UACA,OAAO,oBAAC,QAAA,EAAK,WAAU,2CAA2C,gBAAK,IAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxF;AAEA,QAAM,aAAa,QAAQ,aAAa;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO,CAAC,YAAY,YAAY;AAAA,MAChC,cAAY,CAAC,YAAY,YAAY;AAAA,MAEpC,UAAA;AAAA,QAAA,aACC,qBAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,4CACb,UAAA;AAAA,YAAA,OAAO,oBAAC,WAAA,EAAU,KAAA,CAAY,IAAK;AAAA,YACnC,YAAY,oBAAC,QAAA,EAAK,WAAU,YAAY,iBAAM,IAAU;AAAA,UAAA,GAC3D;AAAA,UACC,OAAO,oBAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAK,IAAU;AAAA,QAAA,EAAA,CAC9D,IACE;AAAA,QACJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,cAAc;AAAA,cACd;AAAA,cACA,UAAU,IAAI;AAAA,YAAA;AAAA,YAGf,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAAC,QAAA,EAAK,WAAU,6BAA6B,kBAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEzE,WACC,oBAAC,QAAA,EAAK,WAAU,+CAA+C,oBAAS,IACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,QAA4D;AAC/E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,oBAAC,QAAK,MAAM,MAAM,OAAO,IAAI,QAAQ,IAAI,WAAU,wBAAA,CAAwB;AAAA,EACpF;AACA,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,oBAAC,QAAA,EAAK,WAAU,0GACb,UAAA,MACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/data/GaugeHoverCard.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const HoverCard = require("../overlay/HoverCard.cjs");
+function GaugeHoverCard({
+  title,
+  rows,
+  footer,
+  trigger,
+  placement = "top",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HoverCard.HoverCard,
+    {
+      placement,
+      delay: 150,
+      trigger,
+      cardClassName: "min-w-[9rem]",
+      ...className ? { className } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-[11px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 tabular-nums", children: rows.map((r) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: r.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils.cn("text-right font-medium text-foreground", r.tone), children: r.value })
+        ] }, r.label)) }),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground", children: footer }) : null
+      ] })
+    }
+  );
+}
+exports.GaugeHoverCard = GaugeHoverCard;
+//# sourceMappingURL=GaugeHoverCard.cjs.map

package/dist/data/GaugeHoverCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeHoverCard.cjs","sources":["../../src/data/GaugeHoverCard.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { HoverCard, type HoverCardPlacement } from \"../overlay/HoverCard\";\n\nexport interface GaugeHoverRow {\n  /** Row label, e.g. \"Current\", \"Min\", \"Capacity\". */\n  label: string;\n  /** Pre-formatted value (already unit-scaled by the caller). */\n  value: string;\n  /** Optional text-tone class for the value (e.g. a threshold colour). */\n  tone?: string;\n}\n\nexport interface GaugeHoverCardProps {\n  /** Card heading — the metric label. */\n  title: string;\n  /** Stat rows (current/min/max/…) rendered as a definition list. */\n  rows: GaugeHoverRow[];\n  /** Optional footer note, e.g. the look-back window. */\n  footer?: ReactNode;\n  /** The gauge visual that opens the card on hover/focus. */\n  trigger: ReactNode;\n  placement?: HoverCardPlacement;\n  /** Classes for the HoverCard trigger wrapper (e.g. to keep a block gauge centred). */\n  className?: string;\n}\n\n// GaugeHoverCard wraps a gauge's visual in a HoverCard whose body lists the\n// metric's label and its current/min/max/avg/capacity readings. Shared by\n// TimeseriesGauge and TimeseriesCoreBars so both surface the same hover summary.\nexport function GaugeHoverCard({\n  title,\n  rows,\n  footer,\n  trigger,\n  placement = \"top\",\n  className,\n}: GaugeHoverCardProps) {\n  return (\n    <HoverCard\n      placement={placement}\n      delay={150}\n      trigger={trigger}\n      cardClassName=\"min-w-[9rem]\"\n      {...(className ? { className } : {})}\n    >\n      <div className=\"flex flex-col gap-1 text-[11px]\">\n        <div className=\"font-medium text-foreground\">{title}</div>\n        <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 tabular-nums\">\n          {rows.map((r) => (\n            <Fragment key={r.label}>\n              <dt className=\"text-muted-foreground\">{r.label}</dt>\n              <dd className={cn(\"text-right font-medium text-foreground\", r.tone)}>\n                {r.value}\n              </dd>\n            </Fragment>\n          ))}\n        </dl>\n        {footer ? (\n          <div className=\"mt-0.5 text-[10px] text-muted-foreground\">{footer}</div>\n        ) : null}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":["jsx","HoverCard","jsxs","Fragment","cn"],"mappings":";;;;;;AA8BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAwB;AACtB,SACEA,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,eAAc;AAAA,MACb,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAEjC,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,QAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,+BAA+B,UAAA,OAAM;AAAA,QACpDA,2BAAAA,IAAC,QAAG,WAAU,4DACX,eAAK,IAAI,CAAC,MACTE,2BAAAA,KAACC,MAAAA,UAAA,EACC,UAAA;AAAA,UAAAH,2BAAAA,IAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,EAAE,OAAM;AAAA,UAC/CA,2BAAAA,IAAC,QAAG,WAAWI,SAAG,0CAA0C,EAAE,IAAI,GAC/D,UAAA,EAAE,MAAA,CACL;AAAA,QAAA,EAAA,GAJa,EAAE,KAKjB,CACD,GACH;AAAA,QACC,SACCJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CAA4C,kBAAO,IAChE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/data/GaugeHoverCard.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { HoverCardPlacement } from '../overlay/HoverCard';
+export interface GaugeHoverRow {
+    /** Row label, e.g. "Current", "Min", "Capacity". */
+    label: string;
+    /** Pre-formatted value (already unit-scaled by the caller). */
+    value: string;
+    /** Optional text-tone class for the value (e.g. a threshold colour). */
+    tone?: string;
+}
+export interface GaugeHoverCardProps {
+    /** Card heading — the metric label. */
+    title: string;
+    /** Stat rows (current/min/max/…) rendered as a definition list. */
+    rows: GaugeHoverRow[];
+    /** Optional footer note, e.g. the look-back window. */
+    footer?: ReactNode;
+    /** The gauge visual that opens the card on hover/focus. */
+    trigger: ReactNode;
+    placement?: HoverCardPlacement;
+    /** Classes for the HoverCard trigger wrapper (e.g. to keep a block gauge centred). */
+    className?: string;
+}
+export declare function GaugeHoverCard({ title, rows, footer, trigger, placement, className, }: GaugeHoverCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GaugeHoverCard.d.ts.map

package/dist/data/GaugeHoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeHoverCard.d.ts","sourceRoot":"","sources":["../../src/data/GaugeHoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAiB,EACjB,SAAS,GACV,EAAE,mBAAmB,2CA2BrB"}

package/dist/data/GaugeHoverCard.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../lib/utils.js";
+import { HoverCard } from "../overlay/HoverCard.js";
+function GaugeHoverCard({
+  title,
+  rows,
+  footer,
+  trigger,
+  placement = "top",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    HoverCard,
+    {
+      placement,
+      delay: 150,
+      trigger,
+      cardClassName: "min-w-[9rem]",
+      ...className ? { className } : {},
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-[11px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 tabular-nums", children: rows.map((r) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: r.label }),
+          /* @__PURE__ */ jsx("dd", { className: cn("text-right font-medium text-foreground", r.tone), children: r.value })
+        ] }, r.label)) }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground", children: footer }) : null
+      ] })
+    }
+  );
+}
+export {
+  GaugeHoverCard
+};
+//# sourceMappingURL=GaugeHoverCard.js.map

package/dist/data/GaugeHoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeHoverCard.js","sources":["../../src/data/GaugeHoverCard.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { HoverCard, type HoverCardPlacement } from \"../overlay/HoverCard\";\n\nexport interface GaugeHoverRow {\n  /** Row label, e.g. \"Current\", \"Min\", \"Capacity\". */\n  label: string;\n  /** Pre-formatted value (already unit-scaled by the caller). */\n  value: string;\n  /** Optional text-tone class for the value (e.g. a threshold colour). */\n  tone?: string;\n}\n\nexport interface GaugeHoverCardProps {\n  /** Card heading — the metric label. */\n  title: string;\n  /** Stat rows (current/min/max/…) rendered as a definition list. */\n  rows: GaugeHoverRow[];\n  /** Optional footer note, e.g. the look-back window. */\n  footer?: ReactNode;\n  /** The gauge visual that opens the card on hover/focus. */\n  trigger: ReactNode;\n  placement?: HoverCardPlacement;\n  /** Classes for the HoverCard trigger wrapper (e.g. to keep a block gauge centred). */\n  className?: string;\n}\n\n// GaugeHoverCard wraps a gauge's visual in a HoverCard whose body lists the\n// metric's label and its current/min/max/avg/capacity readings. Shared by\n// TimeseriesGauge and TimeseriesCoreBars so both surface the same hover summary.\nexport function GaugeHoverCard({\n  title,\n  rows,\n  footer,\n  trigger,\n  placement = \"top\",\n  className,\n}: GaugeHoverCardProps) {\n  return (\n    <HoverCard\n      placement={placement}\n      delay={150}\n      trigger={trigger}\n      cardClassName=\"min-w-[9rem]\"\n      {...(className ? { className } : {})}\n    >\n      <div className=\"flex flex-col gap-1 text-[11px]\">\n        <div className=\"font-medium text-foreground\">{title}</div>\n        <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 tabular-nums\">\n          {rows.map((r) => (\n            <Fragment key={r.label}>\n              <dt className=\"text-muted-foreground\">{r.label}</dt>\n              <dd className={cn(\"text-right font-medium text-foreground\", r.tone)}>\n                {r.value}\n              </dd>\n            </Fragment>\n          ))}\n        </dl>\n        {footer ? (\n          <div className=\"mt-0.5 text-[10px] text-muted-foreground\">{footer}</div>\n        ) : null}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;AA8BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,eAAc;AAAA,MACb,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAEjC,UAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,+BAA+B,UAAA,OAAM;AAAA,QACpD,oBAAC,QAAG,WAAU,4DACX,eAAK,IAAI,CAAC,MACT,qBAAC,UAAA,EACC,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,EAAE,OAAM;AAAA,UAC/C,oBAAC,QAAG,WAAW,GAAG,0CAA0C,EAAE,IAAI,GAC/D,UAAA,EAAE,MAAA,CACL;AAAA,QAAA,EAAA,GAJa,EAAE,KAKjB,CACD,GACH;AAAA,QACC,SACC,oBAAC,OAAA,EAAI,WAAU,4CAA4C,kBAAO,IAChE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}