@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/data/StatusBreakdown.cjs

@@ -4,9 +4,6 @@ const jsxRuntime = require("react/jsx-runtime");
 require("react");
 const utils = require("../lib/utils.cjs");
 const button = require("../components/button.cjs");
-function segment(key, label, count, className) {
-  return { key, label, count: Math.max(0, count || 0), className };
-}
 const defaultRenderLink = ({ to, className, title, children }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: to, className, title, children });
 function StackedStatusBar({
   segments,
@@ -76,5 +73,4 @@ function StatusRows({
 }
 exports.StackedStatusBar = StackedStatusBar;
 exports.StatusRows = StatusRows;
-exports.segment = segment;
 //# sourceMappingURL=StatusBreakdown.cjs.map

package/dist/data/StatusBreakdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBreakdown.cjs","sources":["../../src/data/StatusBreakdown.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\n\n// A status-breakdown family: one StatusSegment list rendered either as a single\n// horizontal StackedStatusBar (scan a mix at a glance) or as vertical StatusRows\n// (each status on its own line with a proportional bar, optional drill-down link\n// and retry). Shared by monitor/intake/cycle breakdowns and any panel that shows\n// a count mix.\n\nexport interface StatusSegment {\n  key: string;\n  label: string;\n  count: number;\n  /** Tailwind background class for the swatch/bar fill, e.g. \"bg-green-500\". */\n  className: string;\n  /**\n   * When set, the row links here (the breakdown points each status at its\n   * filtered records/members view). Rendered via the `renderLink` prop so the\n   * component stays router-agnostic.\n   */\n  href?: string;\n}\n\n/** Builds a StatusSegment, clamping the count to a non-negative integer. */\nexport function segment(key: string, label: string, count: number, className: string): StatusSegment {\n  return { key, label, count: Math.max(0, count || 0), className };\n}\n\n/** Render-prop for a status row's link, so callers supply their router's Link (or a plain <a>). */\nexport type StatusRenderLink = (args: {\n  to: string;\n  className?: string;\n  title?: string;\n  children: ReactNode;\n}) => ReactElement;\n\nconst defaultRenderLink: StatusRenderLink = ({ to, className, title, children }) => (\n  <a href={to} className={className} title={title}>\n    {children}\n  </a>\n);\n\n// StackedStatusBar renders the segments as a single horizontal multi-color bar —\n// segments share one track sized proportionally to the visible-segment total.\nexport function StackedStatusBar({\n  segments,\n  ariaLabel,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"flex h-2 overflow-hidden rounded bg-muted\" aria-label={ariaLabel}>\n      {visible.map((s) => (\n        <div\n          key={s.key}\n          className={s.className}\n          title={`${s.label}: ${s.count}`}\n          style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// StatusRows renders each status as its own row — a colored swatch + label, the\n// count, and a horizontal bar sized proportionally to the visible-segment total.\n// The vertical counterpart to StackedStatusBar. An optional onRetry surfaces a\n// Retry button per row; callers that omit it get no button. When a segment\n// carries an href the whole row links there via renderLink (defaults to a plain\n// <a>); the Retry button stops propagation so it stays independently clickable.\nexport function StatusRows({\n  segments,\n  ariaLabel,\n  onRetry,\n  retryingKey,\n  isRetryable,\n  renderLink = defaultRenderLink,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n  onRetry?: (segment: StatusSegment) => void;\n  retryingKey?: string;\n  isRetryable?: (segment: StatusSegment) => boolean;\n  renderLink?: StatusRenderLink;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"space-y-2\" aria-label={ariaLabel}>\n      {visible.map((s) => {\n        const retryable = !!onRetry && (isRetryable?.(s) ?? false);\n        const meta = (\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn(\"h-2.5 w-2.5 shrink-0 rounded-sm\", s.className)} aria-hidden=\"true\" />\n            <span className=\"truncate text-xs\">{s.label}</span>\n            <span className=\"ml-auto shrink-0 font-mono text-xs text-muted-foreground\">{s.count}</span>\n          </div>\n        );\n        return (\n          <div key={s.key} className=\"flex items-center gap-3\">\n            {s.href\n              ? renderLink({\n                  to: s.href,\n                  className: \"flex min-w-0 flex-1 rounded hover:bg-accent/40\",\n                  title: `View ${s.label} records`,\n                  children: meta,\n                })\n              : meta}\n            <div className=\"h-2 w-32 shrink-0 overflow-hidden rounded bg-muted sm:w-48\">\n              <div className={cn(\"h-full\", s.className)} style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }} />\n            </div>\n            {retryable ? (\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-6 shrink-0 px-2 text-[11px]\"\n                disabled={retryingKey === s.key}\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  onRetry?.(s);\n                }}\n              >\n                {retryingKey === s.key ? \"Retrying…\" : \"Retry\"}\n              </Button>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","cn","Button"],"mappings":"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"}
+{"version":3,"file":"StatusBreakdown.cjs","sources":["../../src/data/StatusBreakdown.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\n\n// A status-breakdown family: one StatusSegment list rendered either as a single\n// horizontal StackedStatusBar (scan a mix at a glance) or as vertical StatusRows\n// (each status on its own line with a proportional bar, optional drill-down link\n// and retry). Shared by monitor/intake/cycle breakdowns and any panel that shows\n// a count mix.\n\nexport interface StatusSegment {\n  key: string;\n  label: string;\n  count: number;\n  /** Tailwind background class for the swatch/bar fill, e.g. \"bg-green-500\". */\n  className: string;\n  /**\n   * When set, the row links here (the breakdown points each status at its\n   * filtered records/members view). Rendered via the `renderLink` prop so the\n   * component stays router-agnostic.\n   */\n  href?: string;\n}\n\n/** Render-prop for a status row's link, so callers supply their router's Link (or a plain <a>). */\nexport type StatusRenderLink = (args: {\n  to: string;\n  className?: string;\n  title?: string;\n  children: ReactNode;\n}) => ReactElement;\n\nconst defaultRenderLink: StatusRenderLink = ({ to, className, title, children }) => (\n  <a href={to} className={className} title={title}>\n    {children}\n  </a>\n);\n\n// StackedStatusBar renders the segments as a single horizontal multi-color bar —\n// segments share one track sized proportionally to the visible-segment total.\nexport function StackedStatusBar({\n  segments,\n  ariaLabel,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"flex h-2 overflow-hidden rounded bg-muted\" aria-label={ariaLabel}>\n      {visible.map((s) => (\n        <div\n          key={s.key}\n          className={s.className}\n          title={`${s.label}: ${s.count}`}\n          style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// StatusRows renders each status as its own row — a colored swatch + label, the\n// count, and a horizontal bar sized proportionally to the visible-segment total.\n// The vertical counterpart to StackedStatusBar. An optional onRetry surfaces a\n// Retry button per row; callers that omit it get no button. When a segment\n// carries an href the whole row links there via renderLink (defaults to a plain\n// <a>); the Retry button stops propagation so it stays independently clickable.\nexport function StatusRows({\n  segments,\n  ariaLabel,\n  onRetry,\n  retryingKey,\n  isRetryable,\n  renderLink = defaultRenderLink,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n  onRetry?: (segment: StatusSegment) => void;\n  retryingKey?: string;\n  isRetryable?: (segment: StatusSegment) => boolean;\n  renderLink?: StatusRenderLink;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"space-y-2\" aria-label={ariaLabel}>\n      {visible.map((s) => {\n        const retryable = !!onRetry && (isRetryable?.(s) ?? false);\n        const meta = (\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn(\"h-2.5 w-2.5 shrink-0 rounded-sm\", s.className)} aria-hidden=\"true\" />\n            <span className=\"truncate text-xs\">{s.label}</span>\n            <span className=\"ml-auto shrink-0 font-mono text-xs text-muted-foreground\">{s.count}</span>\n          </div>\n        );\n        return (\n          <div key={s.key} className=\"flex items-center gap-3\">\n            {s.href\n              ? renderLink({\n                  to: s.href,\n                  className: \"flex min-w-0 flex-1 rounded hover:bg-accent/40\",\n                  title: `View ${s.label} records`,\n                  children: meta,\n                })\n              : meta}\n            <div className=\"h-2 w-32 shrink-0 overflow-hidden rounded bg-muted sm:w-48\">\n              <div className={cn(\"h-full\", s.className)} style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }} />\n            </div>\n            {retryable ? (\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-6 shrink-0 px-2 text-[11px]\"\n                disabled={retryingKey === s.key}\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  onRetry?.(s);\n                }}\n              >\n                {retryingKey === s.key ? \"Retrying…\" : \"Retry\"}\n              </Button>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","cn","Button"],"mappings":"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"}

package/dist/data/StatusBreakdown.d.ts

@@ -12,8 +12,6 @@ export interface StatusSegment {
      */
     href?: string;
 }
-/** Builds a StatusSegment, clamping the count to a non-negative integer. */
-export declare function segment(key: string, label: string, count: number, className: string): StatusSegment;
 /** Render-prop for a status row's link, so callers supply their router's Link (or a plain <a>). */
 export type StatusRenderLink = (args: {
     to: string;

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBreakdown.d.ts","sourceRoot":"","sources":["../../src/data/StatusBreakdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU1D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,4EAA4E;AAC5E,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,aAAa,CAEnG;AAED,mGAAmG;AACnG,MAAM,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAK,YAAY,CAAC;AAUnB,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAkBA;AAQD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAA8B,GAC/B,EAAE;IACD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC;IAClD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CAmDA"}
+{"version":3,"file":"StatusBreakdown.d.ts","sourceRoot":"","sources":["../../src/data/StatusBreakdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU1D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mGAAmG;AACnG,MAAM,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAK,YAAY,CAAC;AAUnB,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAkBA;AAQD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAA8B,GAC/B,EAAE;IACD,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC;IAClD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CAmDA"}

package/dist/data/StatusBreakdown.js

@@ -2,9 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { cn } from "../lib/utils.js";
 import { Button } from "../components/button.js";
-function segment(key, label, count, className) {
-  return { key, label, count: Math.max(0, count || 0), className };
-}
 const defaultRenderLink = ({ to, className, title, children }) => /* @__PURE__ */ jsx("a", { href: to, className, title, children });
 function StackedStatusBar({
   segments,
@@ -74,7 +71,6 @@ function StatusRows({
 }
 export {
   StackedStatusBar,
-  StatusRows,
-  segment
+  StatusRows
 };
 //# sourceMappingURL=StatusBreakdown.js.map

package/dist/data/StatusBreakdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBreakdown.js","sources":["../../src/data/StatusBreakdown.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\n\n// A status-breakdown family: one StatusSegment list rendered either as a single\n// horizontal StackedStatusBar (scan a mix at a glance) or as vertical StatusRows\n// (each status on its own line with a proportional bar, optional drill-down link\n// and retry). Shared by monitor/intake/cycle breakdowns and any panel that shows\n// a count mix.\n\nexport interface StatusSegment {\n  key: string;\n  label: string;\n  count: number;\n  /** Tailwind background class for the swatch/bar fill, e.g. \"bg-green-500\". */\n  className: string;\n  /**\n   * When set, the row links here (the breakdown points each status at its\n   * filtered records/members view). Rendered via the `renderLink` prop so the\n   * component stays router-agnostic.\n   */\n  href?: string;\n}\n\n/** Builds a StatusSegment, clamping the count to a non-negative integer. */\nexport function segment(key: string, label: string, count: number, className: string): StatusSegment {\n  return { key, label, count: Math.max(0, count || 0), className };\n}\n\n/** Render-prop for a status row's link, so callers supply their router's Link (or a plain <a>). */\nexport type StatusRenderLink = (args: {\n  to: string;\n  className?: string;\n  title?: string;\n  children: ReactNode;\n}) => ReactElement;\n\nconst defaultRenderLink: StatusRenderLink = ({ to, className, title, children }) => (\n  <a href={to} className={className} title={title}>\n    {children}\n  </a>\n);\n\n// StackedStatusBar renders the segments as a single horizontal multi-color bar —\n// segments share one track sized proportionally to the visible-segment total.\nexport function StackedStatusBar({\n  segments,\n  ariaLabel,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"flex h-2 overflow-hidden rounded bg-muted\" aria-label={ariaLabel}>\n      {visible.map((s) => (\n        <div\n          key={s.key}\n          className={s.className}\n          title={`${s.label}: ${s.count}`}\n          style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// StatusRows renders each status as its own row — a colored swatch + label, the\n// count, and a horizontal bar sized proportionally to the visible-segment total.\n// The vertical counterpart to StackedStatusBar. An optional onRetry surfaces a\n// Retry button per row; callers that omit it get no button. When a segment\n// carries an href the whole row links there via renderLink (defaults to a plain\n// <a>); the Retry button stops propagation so it stays independently clickable.\nexport function StatusRows({\n  segments,\n  ariaLabel,\n  onRetry,\n  retryingKey,\n  isRetryable,\n  renderLink = defaultRenderLink,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n  onRetry?: (segment: StatusSegment) => void;\n  retryingKey?: string;\n  isRetryable?: (segment: StatusSegment) => boolean;\n  renderLink?: StatusRenderLink;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"space-y-2\" aria-label={ariaLabel}>\n      {visible.map((s) => {\n        const retryable = !!onRetry && (isRetryable?.(s) ?? false);\n        const meta = (\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn(\"h-2.5 w-2.5 shrink-0 rounded-sm\", s.className)} aria-hidden=\"true\" />\n            <span className=\"truncate text-xs\">{s.label}</span>\n            <span className=\"ml-auto shrink-0 font-mono text-xs text-muted-foreground\">{s.count}</span>\n          </div>\n        );\n        return (\n          <div key={s.key} className=\"flex items-center gap-3\">\n            {s.href\n              ? renderLink({\n                  to: s.href,\n                  className: \"flex min-w-0 flex-1 rounded hover:bg-accent/40\",\n                  title: `View ${s.label} records`,\n                  children: meta,\n                })\n              : meta}\n            <div className=\"h-2 w-32 shrink-0 overflow-hidden rounded bg-muted sm:w-48\">\n              <div className={cn(\"h-full\", s.className)} style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }} />\n            </div>\n            {retryable ? (\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-6 shrink-0 px-2 text-[11px]\"\n                disabled={retryingKey === s.key}\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  onRetry?.(s);\n                }}\n              >\n                {retryingKey === s.key ? \"Retrying…\" : \"Retry\"}\n              </Button>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StatusBreakdown.js","sources":["../../src/data/StatusBreakdown.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\n\n// A status-breakdown family: one StatusSegment list rendered either as a single\n// horizontal StackedStatusBar (scan a mix at a glance) or as vertical StatusRows\n// (each status on its own line with a proportional bar, optional drill-down link\n// and retry). Shared by monitor/intake/cycle breakdowns and any panel that shows\n// a count mix.\n\nexport interface StatusSegment {\n  key: string;\n  label: string;\n  count: number;\n  /** Tailwind background class for the swatch/bar fill, e.g. \"bg-green-500\". */\n  className: string;\n  /**\n   * When set, the row links here (the breakdown points each status at its\n   * filtered records/members view). Rendered via the `renderLink` prop so the\n   * component stays router-agnostic.\n   */\n  href?: string;\n}\n\n/** Render-prop for a status row's link, so callers supply their router's Link (or a plain <a>). */\nexport type StatusRenderLink = (args: {\n  to: string;\n  className?: string;\n  title?: string;\n  children: ReactNode;\n}) => ReactElement;\n\nconst defaultRenderLink: StatusRenderLink = ({ to, className, title, children }) => (\n  <a href={to} className={className} title={title}>\n    {children}\n  </a>\n);\n\n// StackedStatusBar renders the segments as a single horizontal multi-color bar —\n// segments share one track sized proportionally to the visible-segment total.\nexport function StackedStatusBar({\n  segments,\n  ariaLabel,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"flex h-2 overflow-hidden rounded bg-muted\" aria-label={ariaLabel}>\n      {visible.map((s) => (\n        <div\n          key={s.key}\n          className={s.className}\n          title={`${s.label}: ${s.count}`}\n          style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// StatusRows renders each status as its own row — a colored swatch + label, the\n// count, and a horizontal bar sized proportionally to the visible-segment total.\n// The vertical counterpart to StackedStatusBar. An optional onRetry surfaces a\n// Retry button per row; callers that omit it get no button. When a segment\n// carries an href the whole row links there via renderLink (defaults to a plain\n// <a>); the Retry button stops propagation so it stays independently clickable.\nexport function StatusRows({\n  segments,\n  ariaLabel,\n  onRetry,\n  retryingKey,\n  isRetryable,\n  renderLink = defaultRenderLink,\n}: {\n  segments: StatusSegment[];\n  ariaLabel?: string;\n  onRetry?: (segment: StatusSegment) => void;\n  retryingKey?: string;\n  isRetryable?: (segment: StatusSegment) => boolean;\n  renderLink?: StatusRenderLink;\n}) {\n  const visible = segments.filter((s) => s.count > 0);\n  const total = visible.reduce((sum, s) => sum + s.count, 0);\n  if (visible.length === 0 || total <= 0) {\n    return <div className=\"rounded border border-dashed p-3 text-xs text-muted-foreground\">No status data</div>;\n  }\n  return (\n    <div className=\"space-y-2\" aria-label={ariaLabel}>\n      {visible.map((s) => {\n        const retryable = !!onRetry && (isRetryable?.(s) ?? false);\n        const meta = (\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn(\"h-2.5 w-2.5 shrink-0 rounded-sm\", s.className)} aria-hidden=\"true\" />\n            <span className=\"truncate text-xs\">{s.label}</span>\n            <span className=\"ml-auto shrink-0 font-mono text-xs text-muted-foreground\">{s.count}</span>\n          </div>\n        );\n        return (\n          <div key={s.key} className=\"flex items-center gap-3\">\n            {s.href\n              ? renderLink({\n                  to: s.href,\n                  className: \"flex min-w-0 flex-1 rounded hover:bg-accent/40\",\n                  title: `View ${s.label} records`,\n                  children: meta,\n                })\n              : meta}\n            <div className=\"h-2 w-32 shrink-0 overflow-hidden rounded bg-muted sm:w-48\">\n              <div className={cn(\"h-full\", s.className)} style={{ width: `${Math.max(1, (s.count / total) * 100)}%` }} />\n            </div>\n            {retryable ? (\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-6 shrink-0 px-2 text-[11px]\"\n                disabled={retryingKey === s.key}\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  onRetry?.(s);\n                }}\n              >\n                {retryingKey === s.key ? \"Retrying…\" : \"Retry\"}\n              </Button>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAgCA,MAAM,oBAAsC,CAAC,EAAE,IAAI,WAAW,OAAO,SAAA,MACnE,oBAAC,KAAA,EAAE,MAAM,IAAI,WAAsB,OAChC,SAAA,CACH;AAKK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,SAAS,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;AAClD,QAAM,QAAQ,QAAQ,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;AACzD,MAAI,QAAQ,WAAW,KAAK,SAAS,GAAG;AACtC,WAAO,oBAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA,kBAAc;AAAA,EACvG;AACA,SACE,oBAAC,SAAI,WAAU,6CAA4C,cAAY,WACpE,UAAA,QAAQ,IAAI,CAAC,MACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW,EAAE;AAAA,MACb,OAAO,GAAG,EAAE,KAAK,KAAK,EAAE,KAAK;AAAA,MAC7B,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,GAAI,EAAE,QAAQ,QAAS,GAAG,CAAC,IAAA;AAAA,IAAI;AAAA,IAHtD,EAAE;AAAA,EAAA,CAKV,GACH;AAEJ;AAQO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAOG;AACD,QAAM,UAAU,SAAS,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;AAClD,QAAM,QAAQ,QAAQ,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;AACzD,MAAI,QAAQ,WAAW,KAAK,SAAS,GAAG;AACtC,WAAO,oBAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA,kBAAc;AAAA,EACvG;AACA,SACE,oBAAC,SAAI,WAAU,aAAY,cAAY,WACpC,UAAA,QAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,YAAY,CAAC,CAAC,aAAY,2CAAc,OAAM;AACpD,UAAM,OACJ,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,mCAAmC,EAAE,SAAS,GAAG,eAAY,QAAO;AAAA,MACxF,oBAAC,QAAA,EAAK,WAAU,oBAAoB,YAAE,OAAM;AAAA,MAC5C,oBAAC,QAAA,EAAK,WAAU,4DAA4D,YAAE,MAAA,CAAM;AAAA,IAAA,GACtF;AAEF,WACE,qBAAC,OAAA,EAAgB,WAAU,2BACxB,UAAA;AAAA,MAAA,EAAE,OACC,WAAW;AAAA,QACT,IAAI,EAAE;AAAA,QACN,WAAW;AAAA,QACX,OAAO,QAAQ,EAAE,KAAK;AAAA,QACtB,UAAU;AAAA,MAAA,CACX,IACD;AAAA,MACJ,oBAAC,OAAA,EAAI,WAAU,8DACb,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,UAAU,EAAE,SAAS,GAAG,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,GAAI,EAAE,QAAQ,QAAS,GAAG,CAAC,IAAA,EAAI,CAAG,EAAA,CAC3G;AAAA,MACC,YACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,gBAAgB,EAAE;AAAA,UAC5B,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AACF,+CAAU;AAAA,UACZ;AAAA,UAEC,UAAA,gBAAgB,EAAE,MAAM,cAAc;AAAA,QAAA;AAAA,MAAA,IAEvC;AAAA,IAAA,EAAA,GA3BI,EAAE,GA4BZ;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/data/Timeline.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const DISC_TONE = {
+  success: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+  danger: "bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
+  info: "bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300",
+  neutral: "bg-muted text-muted-foreground"
+};
+function Timeline({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: utils.cn("relative", className), children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative flex gap-density-3 pb-density-4 last:pb-0", children: [
+      !last && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute bottom-0 left-[10px] top-[22px] w-px bg-border"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: utils.cn(
+            "relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full",
+            DISC_TONE[item.tone ?? "neutral"]
+          ),
+          children: item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon },
+              className: "h-3 w-3"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+          item.actor && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: item.actor }),
+          item.action && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+            " ",
+            item.action
+          ] }),
+          item.timestamp && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5 text-xs text-muted-foreground", children: [
+            "· ",
+            item.timestamp
+          ] })
+        ] }),
+        item.body != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 overflow-hidden rounded-md border border-border bg-secondary", children: [
+          item.bodyHeader != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-density-3 py-1.5 text-xs", children: item.bodyHeader }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-2 text-sm leading-relaxed text-foreground", children: item.body })
+        ] })
+      ] })
+    ] }, item.id);
+  }) });
+}
+exports.Timeline = Timeline;
+//# sourceMappingURL=Timeline.cjs.map

package/dist/data/Timeline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.cjs","sources":["../../src/data/Timeline.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { BadgeTone } from \"./Badge\";\n\nexport type TimelineItem = {\n  /** Stable key. */\n  id: string | number;\n  /** Icon shown in the tone-colored disc. */\n  icon?: string | StaticIconComponent;\n  /** Semantic color of the disc. Defaults to `neutral`. */\n  tone?: BadgeTone;\n  /** Actor (rendered bold), e.g. a username. */\n  actor?: ReactNode;\n  /** What happened, e.g. \"approved these changes\". */\n  action?: ReactNode;\n  /** Relative time, e.g. \"1d ago\". */\n  timestamp?: ReactNode;\n  /** Optional expanded body (Gavel's threaded comment bubble). */\n  body?: ReactNode;\n  /** Optional header for the body bubble, e.g. a file anchor + status `Badge`. */\n  bodyHeader?: ReactNode;\n};\n\nexport type TimelineProps = {\n  /** Events rendered top to bottom, connected by a rail. */\n  items: TimelineItem[];\n  /** Classes applied to the list. */\n  className?: string;\n};\n\nconst DISC_TONE: Record<BadgeTone, string> = {\n  success: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300\",\n  danger: \"bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300\",\n  warning: \"bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300\",\n  info: \"bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300\",\n  neutral: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical activity feed (the Gavel `TimelineCard`): each event has a\n * tone-colored icon disc joined by a connector rail, an actor/action/time\n * line, and an optional body bubble for threaded detail. Domain-agnostic —\n * callers compose `bodyHeader` (e.g. a file anchor + status `Badge`) and\n * `body` themselves.\n */\nexport function Timeline({ items, className }: TimelineProps) {\n  return (\n    <ol className={cn(\"relative\", className)}>\n      {items.map((item, index) => {\n        const last = index === items.length - 1;\n        return (\n          <li key={item.id} className=\"relative flex gap-density-3 pb-density-4 last:pb-0\">\n            {!last && (\n              <span\n                aria-hidden\n                className=\"absolute bottom-0 left-[10px] top-[22px] w-px bg-border\"\n              />\n            )}\n            <span\n              className={cn(\n                \"relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full\",\n                DISC_TONE[item.tone ?? \"neutral\"],\n              )}\n            >\n              {item.icon && (\n                <Icon\n                  {...(typeof item.icon === \"string\" ? { name: item.icon } : { icon: item.icon })}\n                  className=\"h-3 w-3\"\n                />\n              )}\n            </span>\n            <div className=\"min-w-0 flex-1 pt-px\">\n              <div className=\"text-sm\">\n                {item.actor && <span className=\"font-semibold text-foreground\">{item.actor}</span>}\n                {item.action && <span className=\"text-muted-foreground\"> {item.action}</span>}\n                {item.timestamp && (\n                  <span className=\"ml-1.5 text-xs text-muted-foreground\">· {item.timestamp}</span>\n                )}\n              </div>\n              {item.body != null && (\n                <div className=\"mt-1.5 overflow-hidden rounded-md border border-border bg-secondary\">\n                  {item.bodyHeader != null && (\n                    <div className=\"border-b border-border px-density-3 py-1.5 text-xs\">\n                      {item.bodyHeader}\n                    </div>\n                  )}\n                  <div className=\"px-density-3 py-density-2 text-sm leading-relaxed text-foreground\">\n                    {item.body}\n                  </div>\n                </div>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"names":["jsx","cn","jsxs","Icon"],"mappings":";;;;;AA+BA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AASO,SAAS,SAAS,EAAE,OAAO,aAA4B;AAC5D,SACEA,2BAAAA,IAAC,MAAA,EAAG,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACpC,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,UAAU,MAAM,SAAS;AACtC,WACEC,2BAAAA,KAAC,MAAA,EAAiB,WAAU,sDACzB,UAAA;AAAA,MAAA,CAAC,QACAF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGdA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA,UAAU,KAAK,QAAQ,SAAS;AAAA,UAAA;AAAA,UAGjC,eAAK,QACJD,2BAAAA;AAAAA,YAACG,KAAAA;AAAAA,YAAA;AAAA,cACE,GAAI,OAAO,KAAK,SAAS,WAAW,EAAE,MAAM,KAAK,SAAS,EAAE,MAAM,KAAK,KAAA;AAAA,cACxE,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,MAGJD,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,UAAA,KAAK,SAASF,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,UAC1E,KAAK,UAAUE,gCAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,YAAA;AAAA,YAAE,KAAK;AAAA,UAAA,GAAO;AAAA,UACrE,KAAK,aACJA,gCAAC,QAAA,EAAK,WAAU,wCAAuC,UAAA;AAAA,YAAA;AAAA,YAAG,KAAK;AAAA,UAAA,EAAA,CAAU;AAAA,QAAA,GAE7E;AAAA,QACC,KAAK,QAAQ,QACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,uEACZ,UAAA;AAAA,UAAA,KAAK,cAAc,QAClBF,2BAAAA,IAAC,SAAI,WAAU,sDACZ,eAAK,WAAA,CACR;AAAA,UAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,qEACZ,eAAK,KAAA,CACR;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,GAxCO,KAAK,EAyCd;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;;"}

package/dist/data/Timeline.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from './Icon';
+import { BadgeTone } from './Badge';
+export type TimelineItem = {
+    /** Stable key. */
+    id: string | number;
+    /** Icon shown in the tone-colored disc. */
+    icon?: string | StaticIconComponent;
+    /** Semantic color of the disc. Defaults to `neutral`. */
+    tone?: BadgeTone;
+    /** Actor (rendered bold), e.g. a username. */
+    actor?: ReactNode;
+    /** What happened, e.g. "approved these changes". */
+    action?: ReactNode;
+    /** Relative time, e.g. "1d ago". */
+    timestamp?: ReactNode;
+    /** Optional expanded body (Gavel's threaded comment bubble). */
+    body?: ReactNode;
+    /** Optional header for the body bubble, e.g. a file anchor + status `Badge`. */
+    bodyHeader?: ReactNode;
+};
+export type TimelineProps = {
+    /** Events rendered top to bottom, connected by a rail. */
+    items: TimelineItem[];
+    /** Classes applied to the list. */
+    className?: string;
+};
+/**
+ * Vertical activity feed (the Gavel `TimelineCard`): each event has a
+ * tone-colored icon disc joined by a connector rail, an actor/action/time
+ * line, and an optional body bubble for threaded detail. Domain-agnostic —
+ * callers compose `bodyHeader` (e.g. a file anchor + status `Badge`) and
+ * `body` themselves.
+ */
+export declare function Timeline({ items, className }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/data/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,kBAAkB;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gFAAgF;IAChF,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,0DAA0D;IAC1D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,aAAa,2CAoD3D"}

package/dist/data/Timeline.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+const DISC_TONE = {
+  success: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+  danger: "bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
+  info: "bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300",
+  neutral: "bg-muted text-muted-foreground"
+};
+function Timeline({ items, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("relative", className), children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-density-3 pb-density-4 last:pb-0", children: [
+      !last && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute bottom-0 left-[10px] top-[22px] w-px bg-border"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full",
+            DISC_TONE[item.tone ?? "neutral"]
+          ),
+          children: item.icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon },
+              className: "h-3 w-3"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+          item.actor && /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: item.actor }),
+          item.action && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            " ",
+            item.action
+          ] }),
+          item.timestamp && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-xs text-muted-foreground", children: [
+            "· ",
+            item.timestamp
+          ] })
+        ] }),
+        item.body != null && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 overflow-hidden rounded-md border border-border bg-secondary", children: [
+          item.bodyHeader != null && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-density-3 py-1.5 text-xs", children: item.bodyHeader }),
+          /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-2 text-sm leading-relaxed text-foreground", children: item.body })
+        ] })
+      ] })
+    ] }, item.id);
+  }) });
+}
+export {
+  Timeline
+};
+//# sourceMappingURL=Timeline.js.map

package/dist/data/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sources":["../../src/data/Timeline.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { BadgeTone } from \"./Badge\";\n\nexport type TimelineItem = {\n  /** Stable key. */\n  id: string | number;\n  /** Icon shown in the tone-colored disc. */\n  icon?: string | StaticIconComponent;\n  /** Semantic color of the disc. Defaults to `neutral`. */\n  tone?: BadgeTone;\n  /** Actor (rendered bold), e.g. a username. */\n  actor?: ReactNode;\n  /** What happened, e.g. \"approved these changes\". */\n  action?: ReactNode;\n  /** Relative time, e.g. \"1d ago\". */\n  timestamp?: ReactNode;\n  /** Optional expanded body (Gavel's threaded comment bubble). */\n  body?: ReactNode;\n  /** Optional header for the body bubble, e.g. a file anchor + status `Badge`. */\n  bodyHeader?: ReactNode;\n};\n\nexport type TimelineProps = {\n  /** Events rendered top to bottom, connected by a rail. */\n  items: TimelineItem[];\n  /** Classes applied to the list. */\n  className?: string;\n};\n\nconst DISC_TONE: Record<BadgeTone, string> = {\n  success: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300\",\n  danger: \"bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300\",\n  warning: \"bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300\",\n  info: \"bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300\",\n  neutral: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical activity feed (the Gavel `TimelineCard`): each event has a\n * tone-colored icon disc joined by a connector rail, an actor/action/time\n * line, and an optional body bubble for threaded detail. Domain-agnostic —\n * callers compose `bodyHeader` (e.g. a file anchor + status `Badge`) and\n * `body` themselves.\n */\nexport function Timeline({ items, className }: TimelineProps) {\n  return (\n    <ol className={cn(\"relative\", className)}>\n      {items.map((item, index) => {\n        const last = index === items.length - 1;\n        return (\n          <li key={item.id} className=\"relative flex gap-density-3 pb-density-4 last:pb-0\">\n            {!last && (\n              <span\n                aria-hidden\n                className=\"absolute bottom-0 left-[10px] top-[22px] w-px bg-border\"\n              />\n            )}\n            <span\n              className={cn(\n                \"relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full\",\n                DISC_TONE[item.tone ?? \"neutral\"],\n              )}\n            >\n              {item.icon && (\n                <Icon\n                  {...(typeof item.icon === \"string\" ? { name: item.icon } : { icon: item.icon })}\n                  className=\"h-3 w-3\"\n                />\n              )}\n            </span>\n            <div className=\"min-w-0 flex-1 pt-px\">\n              <div className=\"text-sm\">\n                {item.actor && <span className=\"font-semibold text-foreground\">{item.actor}</span>}\n                {item.action && <span className=\"text-muted-foreground\"> {item.action}</span>}\n                {item.timestamp && (\n                  <span className=\"ml-1.5 text-xs text-muted-foreground\">· {item.timestamp}</span>\n                )}\n              </div>\n              {item.body != null && (\n                <div className=\"mt-1.5 overflow-hidden rounded-md border border-border bg-secondary\">\n                  {item.bodyHeader != null && (\n                    <div className=\"border-b border-border px-density-3 py-1.5 text-xs\">\n                      {item.bodyHeader}\n                    </div>\n                  )}\n                  <div className=\"px-density-3 py-density-2 text-sm leading-relaxed text-foreground\">\n                    {item.body}\n                  </div>\n                </div>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,YAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AASO,SAAS,SAAS,EAAE,OAAO,aAA4B;AAC5D,SACE,oBAAC,MAAA,EAAG,WAAW,GAAG,YAAY,SAAS,GACpC,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,UAAU,MAAM,SAAS;AACtC,WACE,qBAAC,MAAA,EAAiB,WAAU,sDACzB,UAAA;AAAA,MAAA,CAAC,QACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,UAAU,KAAK,QAAQ,SAAS;AAAA,UAAA;AAAA,UAGjC,eAAK,QACJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAI,OAAO,KAAK,SAAS,WAAW,EAAE,MAAM,KAAK,SAAS,EAAE,MAAM,KAAK,KAAA;AAAA,cACxE,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,MAGJ,qBAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,UAAA,KAAK,SAAS,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,UAC1E,KAAK,UAAU,qBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,YAAA;AAAA,YAAE,KAAK;AAAA,UAAA,GAAO;AAAA,UACrE,KAAK,aACJ,qBAAC,QAAA,EAAK,WAAU,wCAAuC,UAAA;AAAA,YAAA;AAAA,YAAG,KAAK;AAAA,UAAA,EAAA,CAAU;AAAA,QAAA,GAE7E;AAAA,QACC,KAAK,QAAQ,QACZ,qBAAC,OAAA,EAAI,WAAU,uEACZ,UAAA;AAAA,UAAA,KAAK,cAAc,QAClB,oBAAC,SAAI,WAAU,sDACZ,eAAK,WAAA,CACR;AAAA,UAEF,oBAAC,OAAA,EAAI,WAAU,qEACZ,eAAK,KAAA,CACR;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,GAxCO,KAAK,EAyCd;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/data/TimeseriesCoreBars.cjs

@@ -5,6 +5,7 @@ const reactQuery = require("@tanstack/react-query");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("./Icon.cjs");
+const TimeseriesCoreBars_model = require("./TimeseriesCoreBars.model.cjs");
 const defaultFetcher = async (url) => {
   const res = await fetch(url);
   if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);
@@ -21,29 +22,6 @@ function toneClass(pct, [warn, danger]) {
   if (pct >= warn) return "bg-amber-500";
   return "bg-emerald-500";
 }
-const clamp01 = (n) => Math.min(1, Math.max(0, n));
-function deriveCoreBars(usageMilli, limitMilli) {
-  const hasUsage = usageMilli !== void 0;
-  const usageCores = (usageMilli ?? 0) / 1e3;
-  const hasLimit = limitMilli !== void 0 && limitMilli > 0;
-  const limitCores = hasLimit ? limitMilli / 1e3 : void 0;
-  const coreCount = Math.max(
-    1,
-    Math.ceil(hasLimit ? limitCores : usageCores)
-  );
-  const pct = hasLimit ? Math.min(100, Math.round(usageCores / limitCores * 100)) : 0;
-  const bars = Array.from({ length: coreCount }, (_, i) => ({
-    fill: clamp01(usageCores - i)
-  }));
-  return {
-    hasUsage,
-    usageCores,
-    coreCount,
-    pct,
-    bars,
-    ...limitCores !== void 0 && { limitCores }
-  };
-}
 function CoreBarsIcon({ icon }) {
   if (typeof icon === "string") {
     return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, width: 14, height: 14, className: "text-muted-foreground" });
@@ -96,7 +74,7 @@ function TimeseriesCoreBars({
     const rawMax = latestValue((_b = results[1]) == null ? void 0 : _b.data);
     limit = rawMax === void 0 ? void 0 : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;
   }
-  const model = deriveCoreBars(usage, limit);
+  const model = TimeseriesCoreBars_model.deriveCoreBars(usage, limit);
   const tone = toneClass(model.pct, thresholds);
   const caption = model.hasUsage ? `${formatCores(model.usageCores)} / ${model.limitCores !== void 0 ? formatCores(model.limitCores) : "?"} cores` : "—";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col items-center gap-1", className), children: [
@@ -128,5 +106,4 @@ function TimeseriesCoreBars({
   ] });
 }
 exports.TimeseriesCoreBars = TimeseriesCoreBars;
-exports.deriveCoreBars = deriveCoreBars;
 //# sourceMappingURL=TimeseriesCoreBars.cjs.map

package/dist/data/TimeseriesCoreBars.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesCoreBars.cjs","sources":["../../src/data/TimeseriesCoreBars.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { GaugeSeries } from \"./TimeseriesGauge\";\nimport type { TimeseriesResponse } from \"./TimeseriesPanel\";\n\nexport interface TimeseriesCoreBarsProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value (CPU millicores) fills the bars. */\n  value: GaugeSeries;\n  /**\n   * The CPU capacity. Either a `.limit`-style metric series (its latest value in\n   * millicores) or a fixed number of millicores. Determines the number of bars\n   * (one per core). When omitted or 0, the bar count falls back to the ceiling of\n   * the usage in cores so an unbounded reading still renders.\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Look-back window passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /**\n   * Utilisation thresholds (percent of capacity) at which the fill turns amber\n   * then red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"bg-red-500\";\n  if (pct >= warn) return \"bg-amber-500\";\n  return \"bg-emerald-500\";\n}\n\nexport interface CoreBar {\n  /** Fraction of this core that is in use, in [0, 1]. */\n  fill: number;\n}\n\nexport interface CoreBarsModel {\n  /** Whether a usage reading was available. */\n  hasUsage: boolean;\n  /** Usage expressed in cores (millicores / 1000). */\n  usageCores: number;\n  /** Capacity in cores; undefined when no limit was resolved. */\n  limitCores?: number;\n  /** Number of bars rendered (one per core). */\n  coreCount: number;\n  /** Utilisation percentage of capacity; 0 when unbounded. */\n  pct: number;\n  /** Per-core fill fractions, left to right. */\n  bars: CoreBar[];\n}\n\nconst clamp01 = (n: number): number => Math.min(1, Math.max(0, n));\n\n// deriveCoreBars turns the latest usage/limit millicore readings into a per-core\n// bar model: one bar per core (ceil of the limit), filled left to right by usage\n// so the bar straddling the usage boundary is partially filled and the remainder\n// stays empty. When the limit is missing or 0 the bar count falls back to the\n// ceiling of the usage so an unbounded reading still renders sensibly.\nexport function deriveCoreBars(\n  usageMilli: number | undefined,\n  limitMilli: number | undefined,\n): CoreBarsModel {\n  const hasUsage = usageMilli !== undefined;\n  const usageCores = (usageMilli ?? 0) / 1000;\n  const hasLimit = limitMilli !== undefined && limitMilli > 0;\n  const limitCores = hasLimit ? (limitMilli as number) / 1000 : undefined;\n\n  const coreCount = Math.max(\n    1,\n    Math.ceil(hasLimit ? (limitCores as number) : usageCores),\n  );\n  const pct = hasLimit\n    ? Math.min(100, Math.round((usageCores / (limitCores as number)) * 100))\n    : 0;\n\n  const bars: CoreBar[] = Array.from({ length: coreCount }, (_, i) => ({\n    fill: clamp01(usageCores - i),\n  }));\n\n  // limitCores is an optional field under exactOptionalPropertyTypes — only set\n  // the key when a limit resolved, rather than assigning an explicit undefined.\n  return {\n    hasUsage,\n    usageCores,\n    coreCount,\n    pct,\n    bars,\n    ...(limitCores !== undefined && { limitCores }),\n  };\n}\n\nfunction CoreBarsIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\nfunction formatCores(cores: number): string {\n  return Number.isInteger(cores) ? String(cores) : cores.toFixed(1);\n}\n\n/**\n * TimeseriesCoreBars renders CPU utilisation as a row of vertical bars — one bar\n * per core (the ceiling of the CPU limit) — filled left to right by the latest\n * usage. The bar that straddles the usage boundary is partially filled (\"blocked\n * out\") to show the fractional core in use, and the trailing bars stay empty to\n * show headroom. Both usage and limit are read live from the timeseries store,\n * mirroring TimeseriesGauge's data plumbing; the bar colour crosses warning and\n * danger thresholds. A \"<used> / <cores>\" caption sits below with the icon+title.\n */\nexport function TimeseriesCoreBars({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  range = \"1h\",\n  refreshMs = 5000,\n  thresholds = [75, 90],\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesCoreBarsProps) {\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const usage = rawValue === undefined ? undefined : value.transform ? value.transform(rawValue) : rawValue;\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const model = deriveCoreBars(usage, limit);\n  const tone = toneClass(model.pct, thresholds);\n  const caption = model.hasUsage\n    ? `${formatCores(model.usageCores)} / ${model.limitCores !== undefined ? formatCores(model.limitCores) : \"?\"} cores`\n    : \"—\";\n\n  return (\n    <div className={cn(\"flex flex-col items-center gap-1\", className)}>\n      <div className=\"flex h-10 items-end gap-0.5\">\n        {model.bars.map((bar, i) => {\n          const corePct = Math.round(bar.fill * 100);\n          return (\n            <div\n              key={i}\n              className=\"relative h-full w-2 overflow-hidden rounded-sm bg-muted\"\n              title={`core ${i + 1}: ${corePct}%`}\n              aria-label={`core ${i + 1}: ${corePct}%`}\n              data-fill={bar.fill}\n            >\n              <div\n                className={cn(\"absolute inset-x-0 bottom-0 transition-all duration-300\", tone)}\n                style={{ height: `${corePct}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <span className=\"text-xs font-semibold text-foreground\">{caption}</span>\n      <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n        {icon ? <CoreBarsIcon icon={icon} /> : null}\n        <span>{title}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Icon","useMemo","useQueries","cn","jsxs"],"mappings":"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"}
+{"version":3,"file":"TimeseriesCoreBars.cjs","sources":["../../src/data/TimeseriesCoreBars.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { GaugeSeries } from \"./TimeseriesGauge\";\nimport type { TimeseriesResponse } from \"./TimeseriesPanel\";\nimport { deriveCoreBars } from \"./TimeseriesCoreBars.model\";\n\nexport interface TimeseriesCoreBarsProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value (CPU millicores) fills the bars. */\n  value: GaugeSeries;\n  /**\n   * The CPU capacity. Either a `.limit`-style metric series (its latest value in\n   * millicores) or a fixed number of millicores. Determines the number of bars\n   * (one per core). When omitted or 0, the bar count falls back to the ceiling of\n   * the usage in cores so an unbounded reading still renders.\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Look-back window passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /**\n   * Utilisation thresholds (percent of capacity) at which the fill turns amber\n   * then red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"bg-red-500\";\n  if (pct >= warn) return \"bg-amber-500\";\n  return \"bg-emerald-500\";\n}\n\nfunction CoreBarsIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\nfunction formatCores(cores: number): string {\n  return Number.isInteger(cores) ? String(cores) : cores.toFixed(1);\n}\n\n/**\n * TimeseriesCoreBars renders CPU utilisation as a row of vertical bars — one bar\n * per core (the ceiling of the CPU limit) — filled left to right by the latest\n * usage. The bar that straddles the usage boundary is partially filled (\"blocked\n * out\") to show the fractional core in use, and the trailing bars stay empty to\n * show headroom. Both usage and limit are read live from the timeseries store,\n * mirroring TimeseriesGauge's data plumbing; the bar colour crosses warning and\n * danger thresholds. A \"<used> / <cores>\" caption sits below with the icon+title.\n */\nexport function TimeseriesCoreBars({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  range = \"1h\",\n  refreshMs = 5000,\n  thresholds = [75, 90],\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesCoreBarsProps) {\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const usage = rawValue === undefined ? undefined : value.transform ? value.transform(rawValue) : rawValue;\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const model = deriveCoreBars(usage, limit);\n  const tone = toneClass(model.pct, thresholds);\n  const caption = model.hasUsage\n    ? `${formatCores(model.usageCores)} / ${model.limitCores !== undefined ? formatCores(model.limitCores) : \"?\"} cores`\n    : \"—\";\n\n  return (\n    <div className={cn(\"flex flex-col items-center gap-1\", className)}>\n      <div className=\"flex h-10 items-end gap-0.5\">\n        {model.bars.map((bar, i) => {\n          const corePct = Math.round(bar.fill * 100);\n          return (\n            <div\n              key={i}\n              className=\"relative h-full w-2 overflow-hidden rounded-sm bg-muted\"\n              title={`core ${i + 1}: ${corePct}%`}\n              aria-label={`core ${i + 1}: ${corePct}%`}\n              data-fill={bar.fill}\n            >\n              <div\n                className={cn(\"absolute inset-x-0 bottom-0 transition-all duration-300\", tone)}\n                style={{ height: `${corePct}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <span className=\"text-xs font-semibold text-foreground\">{caption}</span>\n      <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n        {icon ? <CoreBarsIcon icon={icon} /> : null}\n        <span>{title}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Icon","useMemo","useQueries","deriveCoreBars","cn","jsxs"],"mappings":"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"}

package/dist/data/TimeseriesCoreBars.d.ts

@@ -29,25 +29,6 @@ export interface TimeseriesCoreBarsProps {
     fetcher?: (url: string) => Promise<TimeseriesResponse>;
     className?: string;
 }
-export interface CoreBar {
-    /** Fraction of this core that is in use, in [0, 1]. */
-    fill: number;
-}
-export interface CoreBarsModel {
-    /** Whether a usage reading was available. */
-    hasUsage: boolean;
-    /** Usage expressed in cores (millicores / 1000). */
-    usageCores: number;
-    /** Capacity in cores; undefined when no limit was resolved. */
-    limitCores?: number;
-    /** Number of bars rendered (one per core). */
-    coreCount: number;
-    /** Utilisation percentage of capacity; 0 when unbounded. */
-    pct: number;
-    /** Per-core fill fractions, left to right. */
-    bars: CoreBar[];
-}
-export declare function deriveCoreBars(usageMilli: number | undefined, limitMilli: number | undefined): CoreBarsModel;
 /**
  * TimeseriesCoreBars renders CPU utilisation as a row of vertical bars — one bar
  * per core (the ceiling of the CPU limit) — filled left to right by the latest

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

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesCoreBars.d.ts","sourceRoot":"","sources":["../../src/data/TimeseriesCoreBars.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,KAAK,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,MAAM,WAAW,OAAO;IACtB,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB;AASD,wBAAgB,cAAc,CAC5B,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,aAAa,CA4Bf;AAaD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAY,EACZ,KAAK,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAY,EACZ,SAAgB,EAChB,UAAqB,EACrB,OAAwB,EACxB,SAAS,GACV,EAAE,uBAAuB,2CAqEzB"}
+{"version":3,"file":"TimeseriesCoreBars.d.ts","sourceRoot":"","sources":["../../src/data/TimeseriesCoreBars.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,KAAK,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAY,EACZ,KAAK,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAY,EACZ,SAAgB,EAChB,UAAqB,EACrB,OAAwB,EACxB,SAAS,GACV,EAAE,uBAAuB,2CAqEzB"}

package/dist/data/TimeseriesCoreBars.js

@@ -3,6 +3,7 @@ import { useQueries } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "./Icon.js";
+import { deriveCoreBars } from "./TimeseriesCoreBars.model.js";
 const defaultFetcher = async (url) => {
   const res = await fetch(url);
   if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);
@@ -19,29 +20,6 @@ function toneClass(pct, [warn, danger]) {
   if (pct >= warn) return "bg-amber-500";
   return "bg-emerald-500";
 }
-const clamp01 = (n) => Math.min(1, Math.max(0, n));
-function deriveCoreBars(usageMilli, limitMilli) {
-  const hasUsage = usageMilli !== void 0;
-  const usageCores = (usageMilli ?? 0) / 1e3;
-  const hasLimit = limitMilli !== void 0 && limitMilli > 0;
-  const limitCores = hasLimit ? limitMilli / 1e3 : void 0;
-  const coreCount = Math.max(
-    1,
-    Math.ceil(hasLimit ? limitCores : usageCores)
-  );
-  const pct = hasLimit ? Math.min(100, Math.round(usageCores / limitCores * 100)) : 0;
-  const bars = Array.from({ length: coreCount }, (_, i) => ({
-    fill: clamp01(usageCores - i)
-  }));
-  return {
-    hasUsage,
-    usageCores,
-    coreCount,
-    pct,
-    bars,
-    ...limitCores !== void 0 && { limitCores }
-  };
-}
 function CoreBarsIcon({ icon }) {
   if (typeof icon === "string") {
     return /* @__PURE__ */ jsx(Icon, { name: icon, width: 14, height: 14, className: "text-muted-foreground" });
@@ -126,7 +104,6 @@ function TimeseriesCoreBars({
   ] });
 }
 export {
-  TimeseriesCoreBars,
-  deriveCoreBars
+  TimeseriesCoreBars
 };
 //# sourceMappingURL=TimeseriesCoreBars.js.map

package/dist/data/TimeseriesCoreBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesCoreBars.js","sources":["../../src/data/TimeseriesCoreBars.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { GaugeSeries } from \"./TimeseriesGauge\";\nimport type { TimeseriesResponse } from \"./TimeseriesPanel\";\n\nexport interface TimeseriesCoreBarsProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value (CPU millicores) fills the bars. */\n  value: GaugeSeries;\n  /**\n   * The CPU capacity. Either a `.limit`-style metric series (its latest value in\n   * millicores) or a fixed number of millicores. Determines the number of bars\n   * (one per core). When omitted or 0, the bar count falls back to the ceiling of\n   * the usage in cores so an unbounded reading still renders.\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Look-back window passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /**\n   * Utilisation thresholds (percent of capacity) at which the fill turns amber\n   * then red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"bg-red-500\";\n  if (pct >= warn) return \"bg-amber-500\";\n  return \"bg-emerald-500\";\n}\n\nexport interface CoreBar {\n  /** Fraction of this core that is in use, in [0, 1]. */\n  fill: number;\n}\n\nexport interface CoreBarsModel {\n  /** Whether a usage reading was available. */\n  hasUsage: boolean;\n  /** Usage expressed in cores (millicores / 1000). */\n  usageCores: number;\n  /** Capacity in cores; undefined when no limit was resolved. */\n  limitCores?: number;\n  /** Number of bars rendered (one per core). */\n  coreCount: number;\n  /** Utilisation percentage of capacity; 0 when unbounded. */\n  pct: number;\n  /** Per-core fill fractions, left to right. */\n  bars: CoreBar[];\n}\n\nconst clamp01 = (n: number): number => Math.min(1, Math.max(0, n));\n\n// deriveCoreBars turns the latest usage/limit millicore readings into a per-core\n// bar model: one bar per core (ceil of the limit), filled left to right by usage\n// so the bar straddling the usage boundary is partially filled and the remainder\n// stays empty. When the limit is missing or 0 the bar count falls back to the\n// ceiling of the usage so an unbounded reading still renders sensibly.\nexport function deriveCoreBars(\n  usageMilli: number | undefined,\n  limitMilli: number | undefined,\n): CoreBarsModel {\n  const hasUsage = usageMilli !== undefined;\n  const usageCores = (usageMilli ?? 0) / 1000;\n  const hasLimit = limitMilli !== undefined && limitMilli > 0;\n  const limitCores = hasLimit ? (limitMilli as number) / 1000 : undefined;\n\n  const coreCount = Math.max(\n    1,\n    Math.ceil(hasLimit ? (limitCores as number) : usageCores),\n  );\n  const pct = hasLimit\n    ? Math.min(100, Math.round((usageCores / (limitCores as number)) * 100))\n    : 0;\n\n  const bars: CoreBar[] = Array.from({ length: coreCount }, (_, i) => ({\n    fill: clamp01(usageCores - i),\n  }));\n\n  // limitCores is an optional field under exactOptionalPropertyTypes — only set\n  // the key when a limit resolved, rather than assigning an explicit undefined.\n  return {\n    hasUsage,\n    usageCores,\n    coreCount,\n    pct,\n    bars,\n    ...(limitCores !== undefined && { limitCores }),\n  };\n}\n\nfunction CoreBarsIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\nfunction formatCores(cores: number): string {\n  return Number.isInteger(cores) ? String(cores) : cores.toFixed(1);\n}\n\n/**\n * TimeseriesCoreBars renders CPU utilisation as a row of vertical bars — one bar\n * per core (the ceiling of the CPU limit) — filled left to right by the latest\n * usage. The bar that straddles the usage boundary is partially filled (\"blocked\n * out\") to show the fractional core in use, and the trailing bars stay empty to\n * show headroom. Both usage and limit are read live from the timeseries store,\n * mirroring TimeseriesGauge's data plumbing; the bar colour crosses warning and\n * danger thresholds. A \"<used> / <cores>\" caption sits below with the icon+title.\n */\nexport function TimeseriesCoreBars({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  range = \"1h\",\n  refreshMs = 5000,\n  thresholds = [75, 90],\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesCoreBarsProps) {\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const usage = rawValue === undefined ? undefined : value.transform ? value.transform(rawValue) : rawValue;\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const model = deriveCoreBars(usage, limit);\n  const tone = toneClass(model.pct, thresholds);\n  const caption = model.hasUsage\n    ? `${formatCores(model.usageCores)} / ${model.limitCores !== undefined ? formatCores(model.limitCores) : \"?\"} cores`\n    : \"—\";\n\n  return (\n    <div className={cn(\"flex flex-col items-center gap-1\", className)}>\n      <div className=\"flex h-10 items-end gap-0.5\">\n        {model.bars.map((bar, i) => {\n          const corePct = Math.round(bar.fill * 100);\n          return (\n            <div\n              key={i}\n              className=\"relative h-full w-2 overflow-hidden rounded-sm bg-muted\"\n              title={`core ${i + 1}: ${corePct}%`}\n              aria-label={`core ${i + 1}: ${corePct}%`}\n              data-fill={bar.fill}\n            >\n              <div\n                className={cn(\"absolute inset-x-0 bottom-0 transition-all duration-300\", tone)}\n                style={{ height: `${corePct}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <span className=\"text-xs font-semibold text-foreground\">{caption}</span>\n      <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n        {icon ? <CoreBarsIcon icon={icon} /> : null}\n        <span>{title}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeseriesCoreBars.js","sources":["../../src/data/TimeseriesCoreBars.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { GaugeSeries } from \"./TimeseriesGauge\";\nimport type { TimeseriesResponse } from \"./TimeseriesPanel\";\nimport { deriveCoreBars } from \"./TimeseriesCoreBars.model\";\n\nexport interface TimeseriesCoreBarsProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value (CPU millicores) fills the bars. */\n  value: GaugeSeries;\n  /**\n   * The CPU capacity. Either a `.limit`-style metric series (its latest value in\n   * millicores) or a fixed number of millicores. Determines the number of bars\n   * (one per core). When omitted or 0, the bar count falls back to the ceiling of\n   * the usage in cores so an unbounded reading still renders.\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Look-back window passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /**\n   * Utilisation thresholds (percent of capacity) at which the fill turns amber\n   * then red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"bg-red-500\";\n  if (pct >= warn) return \"bg-amber-500\";\n  return \"bg-emerald-500\";\n}\n\nfunction CoreBarsIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\nfunction formatCores(cores: number): string {\n  return Number.isInteger(cores) ? String(cores) : cores.toFixed(1);\n}\n\n/**\n * TimeseriesCoreBars renders CPU utilisation as a row of vertical bars — one bar\n * per core (the ceiling of the CPU limit) — filled left to right by the latest\n * usage. The bar that straddles the usage boundary is partially filled (\"blocked\n * out\") to show the fractional core in use, and the trailing bars stay empty to\n * show headroom. Both usage and limit are read live from the timeseries store,\n * mirroring TimeseriesGauge's data plumbing; the bar colour crosses warning and\n * danger thresholds. A \"<used> / <cores>\" caption sits below with the icon+title.\n */\nexport function TimeseriesCoreBars({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  range = \"1h\",\n  refreshMs = 5000,\n  thresholds = [75, 90],\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesCoreBarsProps) {\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const usage = rawValue === undefined ? undefined : value.transform ? value.transform(rawValue) : rawValue;\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const model = deriveCoreBars(usage, limit);\n  const tone = toneClass(model.pct, thresholds);\n  const caption = model.hasUsage\n    ? `${formatCores(model.usageCores)} / ${model.limitCores !== undefined ? formatCores(model.limitCores) : \"?\"} cores`\n    : \"—\";\n\n  return (\n    <div className={cn(\"flex flex-col items-center gap-1\", className)}>\n      <div className=\"flex h-10 items-end gap-0.5\">\n        {model.bars.map((bar, i) => {\n          const corePct = Math.round(bar.fill * 100);\n          return (\n            <div\n              key={i}\n              className=\"relative h-full w-2 overflow-hidden rounded-sm bg-muted\"\n              title={`core ${i + 1}: ${corePct}%`}\n              aria-label={`core ${i + 1}: ${corePct}%`}\n              data-fill={bar.fill}\n            >\n              <div\n                className={cn(\"absolute inset-x-0 bottom-0 transition-all duration-300\", tone)}\n                style={{ height: `${corePct}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <span className=\"text-xs font-semibold text-foreground\">{caption}</span>\n      <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n        {icon ? <CoreBarsIcon icon={icon} /> : null}\n        <span>{title}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/TimeseriesCoreBars.model.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+function deriveCoreBars(usageMilli, limitMilli) {
+  const hasUsage = usageMilli !== void 0;
+  const usageCores = (usageMilli ?? 0) / 1e3;
+  const hasLimit = limitMilli !== void 0 && limitMilli > 0;
+  const limitCores = hasLimit ? limitMilli / 1e3 : void 0;
+  const coreCount = Math.max(
+    1,
+    Math.ceil(hasLimit ? limitCores : usageCores)
+  );
+  const pct = hasLimit ? Math.min(100, Math.round(usageCores / limitCores * 100)) : 0;
+  const bars = Array.from({ length: coreCount }, (_, i) => ({
+    fill: clamp01(usageCores - i)
+  }));
+  return {
+    hasUsage,
+    usageCores,
+    coreCount,
+    pct,
+    bars,
+    ...limitCores !== void 0 && { limitCores }
+  };
+}
+exports.deriveCoreBars = deriveCoreBars;
+//# sourceMappingURL=TimeseriesCoreBars.model.cjs.map

package/dist/data/TimeseriesCoreBars.model.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeseriesCoreBars.model.cjs","sources":["../../src/data/TimeseriesCoreBars.model.ts"],"sourcesContent":["export interface CoreBar {\n  /** Fraction of this core that is in use, in [0, 1]. */\n  fill: number;\n}\n\nexport interface CoreBarsModel {\n  /** Whether a usage reading was available. */\n  hasUsage: boolean;\n  /** Usage expressed in cores (millicores / 1000). */\n  usageCores: number;\n  /** Capacity in cores; undefined when no limit was resolved. */\n  limitCores?: number;\n  /** Number of bars rendered (one per core). */\n  coreCount: number;\n  /** Utilisation percentage of capacity; 0 when unbounded. */\n  pct: number;\n  /** Per-core fill fractions, left to right. */\n  bars: CoreBar[];\n}\n\nconst clamp01 = (n: number): number => Math.min(1, Math.max(0, n));\n\n// deriveCoreBars turns the latest usage/limit millicore readings into a per-core\n// bar model: one bar per core (ceil of the limit), filled left to right by usage\n// so the bar straddling the usage boundary is partially filled and the remainder\n// stays empty. When the limit is missing or 0 the bar count falls back to the\n// ceiling of the usage so an unbounded reading still renders sensibly.\nexport function deriveCoreBars(\n  usageMilli: number | undefined,\n  limitMilli: number | undefined,\n): CoreBarsModel {\n  const hasUsage = usageMilli !== undefined;\n  const usageCores = (usageMilli ?? 0) / 1000;\n  const hasLimit = limitMilli !== undefined && limitMilli > 0;\n  const limitCores = hasLimit ? (limitMilli as number) / 1000 : undefined;\n\n  const coreCount = Math.max(\n    1,\n    Math.ceil(hasLimit ? (limitCores as number) : usageCores),\n  );\n  const pct = hasLimit\n    ? Math.min(100, Math.round((usageCores / (limitCores as number)) * 100))\n    : 0;\n\n  const bars: CoreBar[] = Array.from({ length: coreCount }, (_, i) => ({\n    fill: clamp01(usageCores - i),\n  }));\n\n  return {\n    hasUsage,\n    usageCores,\n    coreCount,\n    pct,\n    bars,\n    ...(limitCores !== undefined && { limitCores }),\n  };\n}\n"],"names":[],"mappings":";;AAoBA,MAAM,UAAU,CAAC,MAAsB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AAO1D,SAAS,eACd,YACA,YACe;AACf,QAAM,WAAW,eAAe;AAChC,QAAM,cAAc,cAAc,KAAK;AACvC,QAAM,WAAW,eAAe,UAAa,aAAa;AAC1D,QAAM,aAAa,WAAY,aAAwB,MAAO;AAE9D,QAAM,YAAY,KAAK;AAAA,IACrB;AAAA,IACA,KAAK,KAAK,WAAY,aAAwB,UAAU;AAAA,EAAA;AAE1D,QAAM,MAAM,WACR,KAAK,IAAI,KAAK,KAAK,MAAO,aAAc,aAAyB,GAAG,CAAC,IACrE;AAEJ,QAAM,OAAkB,MAAM,KAAK,EAAE,QAAQ,UAAA,GAAa,CAAC,GAAG,OAAO;AAAA,IACnE,MAAM,QAAQ,aAAa,CAAC;AAAA,EAAA,EAC5B;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI,eAAe,UAAa,EAAE,WAAA;AAAA,EAAW;AAEjD;;"}