@flanksource/clicky-ui 0.2.20 → 0.3.1

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":"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"}

package/dist/data/TimeseriesCoreBars.cjs

@@ -24,9 +24,25 @@ function toneClass(pct, [warn, danger]) {
 }
 function CoreBarsIcon({ icon }) {
   if (typeof icon === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, width: 14, height: 14, className: "text-muted-foreground" });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: icon,
+        width: 14,
+        height: 14,
+        className: "text-muted-foreground"
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, width: 14, height: 14, className: "text-muted-foreground" });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.Icon,
+    {
+      icon,
+      width: 14,
+      height: 14,
+      className: "text-muted-foreground"
+    }
+  );
 }
 function formatCores(cores) {
   return Number.isInteger(cores) ? String(cores) : cores.toFixed(1);
@@ -40,6 +56,10 @@ function TimeseriesCoreBars({
   range = "1h",
   refreshMs = 5e3,
   thresholds = [75, 90],
+  variant = "default",
+  showLabel = true,
+  showValue = true,
+  orientation,
   fetcher = defaultFetcher,
   className
 }) {
@@ -77,33 +97,111 @@ function TimeseriesCoreBars({
   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: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-end gap-0.5", children: model.bars.map((bar, i) => {
-      const corePct = Math.round(bar.fill * 100);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "relative h-full w-2 overflow-hidden rounded-sm bg-muted",
-          title: `core ${i + 1}: ${corePct}%`,
-          "aria-label": `core ${i + 1}: ${corePct}%`,
-          "data-fill": bar.fill,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: utils.cn("absolute inset-x-0 bottom-0 transition-all duration-300", tone),
-              style: { height: `${corePct}%` }
-            }
-          )
-        },
-        i
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-foreground", children: caption }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-      icon ? /* @__PURE__ */ jsxRuntime.jsx(CoreBarsIcon, { icon }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
-    ] })
-  ] });
+  const compactCaption = model.hasUsage ? `${formatCores(model.usageCores)}/${model.limitCores !== void 0 ? formatCores(model.limitCores) : "?"} cores` : "—";
+  const titleText = `${title}: ${compactCaption}`;
+  const isCell = variant === "cell";
+  const resolvedOrientation = orientation ?? "vertical";
+  const isDense = model.coreCount > 4;
+  const valueText = isCell ? compactCaption : caption;
+  const hiddenAccessibleText = !showLabel || !showValue ? titleText : void 0;
+  const bars = /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        "flex shrink-0",
+        resolvedOrientation === "vertical" ? utils.cn("items-end", isCell ? "h-4 gap-px" : "h-10 gap-0.5") : utils.cn(
+          "flex-col justify-center",
+          isCell ? "h-4 w-10 gap-px" : "h-10 w-16 gap-0.5"
+        )
+      ),
+      "aria-hidden": isCell ? "true" : void 0,
+      "data-orientation": resolvedOrientation,
+      "data-core-count": model.coreCount,
+      "data-core-density": isDense ? "compact" : "default",
+      children: model.bars.map((bar, i) => {
+        const corePct = Math.round(bar.fill * 100);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "relative overflow-hidden bg-muted",
+              resolvedOrientation === "vertical" ? utils.cn(
+                "h-full",
+                isCell ? isDense ? "w-[3px] rounded-[2px]" : "w-1.5 rounded-[2px]" : isDense ? "w-1 rounded-sm" : "w-2 rounded-sm"
+              ) : utils.cn("min-h-px w-full flex-1 rounded-[2px]")
+            ),
+            title: `core ${i + 1}: ${corePct}%`,
+            "aria-label": !isCell ? `core ${i + 1}: ${corePct}%` : void 0,
+            "data-fill": bar.fill,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: utils.cn(
+                  "absolute bottom-0 left-0 transition-all duration-300",
+                  tone
+                ),
+                style: resolvedOrientation === "vertical" ? { height: `${corePct}%`, right: 0 } : { width: `${corePct}%`, top: 0 }
+              }
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+  const valueNode = showValue ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        "shrink-0 font-semibold tabular-nums text-foreground",
+        isCell ? null : "text-xs"
+      ),
+      children: valueText
+    }
+  ) : null;
+  const label = icon || showLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils.cn(
+        "inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground"
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(CoreBarsIcon, { icon }) : null,
+        showLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title }) : null
+      ]
+    }
+  ) : null;
+  if (isCell) {
+    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: titleText,
+        "aria-label": hiddenAccessibleText,
+        children: [
+          label,
+          bars,
+          valueNode
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("flex flex-col items-center gap-1", className),
+      title: hiddenAccessibleText,
+      "aria-label": hiddenAccessibleText,
+      children: [
+        bars,
+        valueNode,
+        label
+      ]
+    }
+  );
 }
 exports.TimeseriesCoreBars = TimeseriesCoreBars;
 //# 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\";\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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"}
+{"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 type TimeseriesCoreBarsVariant = \"default\" | \"cell\";\nexport type TimeseriesCoreBarsOrientation = \"horizontal\" | \"vertical\";\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  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: TimeseriesCoreBarsVariant;\n  /** Show the title text. Icons and values remain visible unless separately hidden. */\n  showLabel?: boolean;\n  /** Show the value/capacity caption. Icons and bars remain visible when false. */\n  showValue?: boolean;\n  /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */\n  orientation?: TimeseriesCoreBarsOrientation;\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 (\n      <Icon\n        name={icon}\n        width={14}\n        height={14}\n        className=\"text-muted-foreground\"\n      />\n    );\n  }\n  return (\n    <Icon\n      icon={icon}\n      width={14}\n      height={14}\n      className=\"text-muted-foreground\"\n    />\n  );\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  variant = \"default\",\n  showLabel = true,\n  showValue = true,\n  orientation,\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 =\n    rawValue === undefined\n      ? undefined\n      : value.transform\n        ? value.transform(rawValue)\n        : 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 =\n      rawMax === undefined\n        ? undefined\n        : maxSeries.transform\n          ? maxSeries.transform(rawMax)\n          : 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  const compactCaption = model.hasUsage\n    ? `${formatCores(model.usageCores)}/${model.limitCores !== undefined ? formatCores(model.limitCores) : \"?\"} cores`\n    : \"—\";\n  const titleText = `${title}: ${compactCaption}`;\n  const isCell = variant === \"cell\";\n  const resolvedOrientation = orientation ?? \"vertical\";\n  const isDense = model.coreCount > 4;\n  const valueText = isCell ? compactCaption : caption;\n  const hiddenAccessibleText = !showLabel || !showValue ? titleText : undefined;\n  const bars = (\n    <span\n      className={cn(\n        \"flex shrink-0\",\n        resolvedOrientation === \"vertical\"\n          ? cn(\"items-end\", isCell ? \"h-4 gap-px\" : \"h-10 gap-0.5\")\n          : cn(\n              \"flex-col justify-center\",\n              isCell ? \"h-4 w-10 gap-px\" : \"h-10 w-16 gap-0.5\",\n            ),\n      )}\n      aria-hidden={isCell ? \"true\" : undefined}\n      data-orientation={resolvedOrientation}\n      data-core-count={model.coreCount}\n      data-core-density={isDense ? \"compact\" : \"default\"}\n    >\n      {model.bars.map((bar, i) => {\n        const corePct = Math.round(bar.fill * 100);\n        return (\n          <span\n            key={i}\n            className={cn(\n              \"relative overflow-hidden bg-muted\",\n              resolvedOrientation === \"vertical\"\n                ? cn(\n                    \"h-full\",\n                    isCell\n                      ? isDense\n                        ? \"w-[3px] rounded-[2px]\"\n                        : \"w-1.5 rounded-[2px]\"\n                      : isDense\n                        ? \"w-1 rounded-sm\"\n                        : \"w-2 rounded-sm\",\n                  )\n                : cn(\"min-h-px w-full flex-1 rounded-[2px]\"),\n            )}\n            title={`core ${i + 1}: ${corePct}%`}\n            aria-label={!isCell ? `core ${i + 1}: ${corePct}%` : undefined}\n            data-fill={bar.fill}\n          >\n            <span\n              className={cn(\n                \"absolute bottom-0 left-0 transition-all duration-300\",\n                tone,\n              )}\n              style={\n                resolvedOrientation === \"vertical\"\n                  ? { height: `${corePct}%`, right: 0 }\n                  : { width: `${corePct}%`, top: 0 }\n              }\n            />\n          </span>\n        );\n      })}\n    </span>\n  );\n  const valueNode = showValue ? (\n    <span\n      className={cn(\n        \"shrink-0 font-semibold tabular-nums text-foreground\",\n        isCell ? null : \"text-xs\",\n      )}\n    >\n      {valueText}\n    </span>\n  ) : null;\n  const label =\n    icon || showLabel ? (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground\",\n        )}\n      >\n        {icon ? <CoreBarsIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate\">{title}</span> : null}\n      </span>\n    ) : null;\n\n  if (isCell) {\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={titleText}\n        aria-label={hiddenAccessibleText}\n      >\n        {label}\n        {bars}\n        {valueNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      title={hiddenAccessibleText}\n      aria-label={hiddenAccessibleText}\n    >\n      {bars}\n      {valueNode}\n      {label}\n    </div>\n  );\n}\n"],"names":["jsx","Icon","useMemo","useQueries","deriveCoreBars","cn","jsxs"],"mappings":"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"}

package/dist/data/TimeseriesCoreBars.d.ts

@@ -1,6 +1,8 @@
 import { StaticIconComponent } from './Icon';
 import { GaugeSeries } from './TimeseriesGauge';
 import { TimeseriesResponse } from './TimeseriesPanel';
+export type TimeseriesCoreBarsVariant = "default" | "cell";
+export type TimeseriesCoreBarsOrientation = "horizontal" | "vertical";
 export interface TimeseriesCoreBarsProps {
     /** Common prefix; the value/max requests are `baseUrl + id`. */
     baseUrl?: string;
@@ -25,6 +27,14 @@ export interface TimeseriesCoreBarsProps {
      * then red. Defaults to [75, 90].
      */
     thresholds?: [warning: number, danger: number];
+    /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */
+    variant?: TimeseriesCoreBarsVariant;
+    /** Show the title text. Icons and values remain visible unless separately hidden. */
+    showLabel?: boolean;
+    /** Show the value/capacity caption. Icons and bars remain visible when false. */
+    showValue?: boolean;
+    /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */
+    orientation?: TimeseriesCoreBarsOrientation;
     /** Override the default fetch (e.g. to route through an app's API client). */
     fetcher?: (url: string) => Promise<TimeseriesResponse>;
     className?: string;
@@ -38,5 +48,5 @@ export interface TimeseriesCoreBarsProps {
  * mirroring TimeseriesGauge's data plumbing; the bar colour crosses warning and
  * danger thresholds. A "<used> / <cores>" caption sits below with the icon+title.
  */
-export declare function TimeseriesCoreBars({ baseUrl, value, max, title, icon, range, refreshMs, thresholds, fetcher, className, }: TimeseriesCoreBarsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeseriesCoreBars({ baseUrl, value, max, title, icon, range, refreshMs, thresholds, variant, showLabel, showValue, orientation, fetcher, className, }: TimeseriesCoreBarsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TimeseriesCoreBars.d.ts.map

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;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"}
+{"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,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG,UAAU,CAAC;AAEtE,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,mFAAmF;IACnF,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAY,EACZ,KAAK,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAY,EACZ,SAAgB,EAChB,UAAqB,EACrB,OAAmB,EACnB,SAAgB,EAChB,SAAgB,EAChB,WAAW,EACX,OAAwB,EACxB,SAAS,GACV,EAAE,uBAAuB,2CAqKzB"}