@flanksource/clicky-ui 0.3.55 → 0.3.57

package/dist/data/ProgressBar.cjs

@@ -2,13 +2,15 @@ const require_utils = require("../lib/utils.cjs");
 const require_color = require("../lib/color.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/data/ProgressBar.tsx
-function ProgressBar({ segments, total, height = "h-2", className }) {
+function ProgressBar({ segments, total, label, formatValue = String, height = "h-2", className }) {
 	if (total === 0) return null;
-	const tooltip = segments.filter((s) => s.count > 0).map((s) => `${s.count} ${s.label}`).join(", ");
+	const tooltip = segments.filter((s) => s.count > 0).map((s) => `${formatValue(s.count)} ${s.label}`).join(", ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_utils.cn("w-full bg-muted rounded-full flex overflow-hidden", height, className),
 		title: tooltip,
 		role: "progressbar",
+		"aria-label": label,
+		"aria-valuetext": `${formatValue(segments.reduce((acc, s) => acc + s.count, 0))} of ${formatValue(total)}. ${tooltip}`,
 		"aria-valuemin": 0,
 		"aria-valuemax": total,
 		"aria-valuenow": segments.reduce((acc, s) => acc + s.count, 0),
@@ -22,7 +24,7 @@ function ProgressBar({ segments, total, height = "h-2", className }) {
 					width: `${pct}%`,
 					...asClass ? {} : { backgroundColor: seg.color }
 				},
-				title: `${seg.count} ${seg.label}`
+				title: `${formatValue(seg.count)} ${seg.label}`
 			}, i);
 		})
 	});

package/dist/data/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","names":["cn","isTailwindColorClass"],"sources":["../../src/data/ProgressBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { isTailwindColorClass } from \"../lib/color\";\n\nexport type ProgressSegment = {\n  /** Numeric amount represented by this segment. */\n  count: number;\n  /** Segment fill: a Tailwind bg class (e.g. \"bg-green-500\") or a CSS color value. */\n  color: string;\n  /** Label used in the tooltip. */\n  label: string;\n};\n\nexport type ProgressBarProps = {\n  /** Segments rendered in order from left to right. */\n  segments: ProgressSegment[];\n  /** Total value used to calculate segment percentages. */\n  total: number;\n  /** Height utility class, e.g. `h-2`. */\n  height?: string;\n  /** Classes applied to the progressbar root. */\n  className?: string;\n};\n\nexport function ProgressBar({ segments, total, height = \"h-2\", className }: ProgressBarProps) {\n  if (total === 0) return null;\n\n  const tooltip = segments\n    .filter((s) => s.count > 0)\n    .map((s) => `${s.count} ${s.label}`)\n    .join(\", \");\n\n  return (\n    <div\n      className={cn(\"w-full bg-muted rounded-full flex overflow-hidden\", height, className)}\n      title={tooltip}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={segments.reduce((acc, s) => acc + s.count, 0)}\n    >\n      {segments.map((seg, i) => {\n        if (seg.count === 0) return null;\n        const pct = (seg.count / total) * 100;\n        const asClass = isTailwindColorClass(seg.color);\n        return (\n          <div\n            key={i}\n            className={cn(asClass ? seg.color : undefined, height, \"transition-all duration-300\")}\n            style={{ width: `${pct}%`, ...(asClass ? {} : { backgroundColor: seg.color }) }}\n            title={`${seg.count} ${seg.label}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAuBA,SAAgB,YAAY,EAAE,UAAU,OAAO,SAAS,OAAO,aAA+B;CAC5F,IAAI,UAAU,GAAG,OAAO;CAExB,MAAM,UAAU,SACb,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,CAC1B,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,OAAO,CAAC,CACnC,KAAK,IAAI;CAEZ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAWA,cAAAA,GAAG,qDAAqD,QAAQ,SAAS;EACpF,OAAO;EACP,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;EAE1D,UAAA,SAAS,KAAK,KAAK,MAAM;GACxB,IAAI,IAAI,UAAU,GAAG,OAAO;GAC5B,MAAM,MAAO,IAAI,QAAQ,QAAS;GAClC,MAAM,UAAUC,cAAAA,qBAAqB,IAAI,KAAK;GAC9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAEE,WAAWD,cAAAA,GAAG,UAAU,IAAI,QAAQ,KAAA,GAAW,QAAQ,6BAA6B;IACpF,OAAO;KAAE,OAAO,GAAG,IAAI;KAAI,GAAI,UAAU,CAAC,IAAI,EAAE,iBAAiB,IAAI,MAAM;IAAG;IAC9E,OAAO,GAAG,IAAI,MAAM,GAAG,IAAI;GAC5B,GAJM,CAIN;EAEL,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"ProgressBar.cjs","names":["cn","isTailwindColorClass"],"sources":["../../src/data/ProgressBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { isTailwindColorClass } from \"../lib/color\";\n\nexport type ProgressSegment = {\n  /** Numeric amount represented by this segment. */\n  count: number;\n  /** Segment fill: a Tailwind bg class (e.g. \"bg-green-500\") or a CSS color value. */\n  color: string;\n  /** Label used in the tooltip. */\n  label: string;\n};\n\nexport type ProgressBarProps = {\n  /** Segments rendered in order from left to right. */\n  segments: ProgressSegment[];\n  /** Total value used to calculate segment percentages. */\n  total: number;\n  /** Accessible name for the measured resource. */\n  label?: string;\n  /** Formats amounts in tooltips and the accessible summary, e.g. bytes or durations. */\n  formatValue?: (value: number) => string;\n  /** Height utility class, e.g. `h-2`. */\n  height?: string;\n  /** Classes applied to the progressbar root. */\n  className?: string;\n};\n\nexport function ProgressBar({\n  segments,\n  total,\n  label,\n  formatValue = String,\n  height = \"h-2\",\n  className,\n}: ProgressBarProps) {\n  if (total === 0) return null;\n\n  const tooltip = segments\n    .filter((s) => s.count > 0)\n    .map((s) => `${formatValue(s.count)} ${s.label}`)\n    .join(\", \");\n\n  return (\n    <div\n      className={cn(\n        \"w-full bg-muted rounded-full flex overflow-hidden\",\n        height,\n        className,\n      )}\n      title={tooltip}\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuetext={`${formatValue(segments.reduce((acc, s) => acc + s.count, 0))} of ${formatValue(total)}. ${tooltip}`}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={segments.reduce((acc, s) => acc + s.count, 0)}\n    >\n      {segments.map((seg, i) => {\n        if (seg.count === 0) return null;\n        const pct = (seg.count / total) * 100;\n        const asClass = isTailwindColorClass(seg.color);\n        return (\n          <div\n            key={i}\n            className={cn(\n              asClass ? seg.color : undefined,\n              height,\n              \"transition-all duration-300\",\n            )}\n            style={{\n              width: `${pct}%`,\n              ...(asClass ? {} : { backgroundColor: seg.color }),\n            }}\n            title={`${formatValue(seg.count)} ${seg.label}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AA2BA,SAAgB,YAAY,EAC1B,UACA,OACA,OACA,cAAc,QACd,SAAS,OACT,aACmB;CACnB,IAAI,UAAU,GAAG,OAAO;CAExB,MAAM,UAAU,SACb,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,CAC1B,KAAK,MAAM,GAAG,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,CAChD,KAAK,IAAI;CAEZ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAWA,cAAAA,GACT,qDACA,QACA,SACF;EACA,OAAO;EACP,MAAK;EACL,cAAY;EACZ,kBAAgB,GAAG,YAAY,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,MAAM,YAAY,KAAK,EAAE,IAAI;EAC3G,iBAAe;EACf,iBAAe;EACf,iBAAe,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;EAE1D,UAAA,SAAS,KAAK,KAAK,MAAM;GACxB,IAAI,IAAI,UAAU,GAAG,OAAO;GAC5B,MAAM,MAAO,IAAI,QAAQ,QAAS;GAClC,MAAM,UAAUC,cAAAA,qBAAqB,IAAI,KAAK;GAC9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAEE,WAAWD,cAAAA,GACT,UAAU,IAAI,QAAQ,KAAA,GACtB,QACA,6BACF;IACA,OAAO;KACL,OAAO,GAAG,IAAI;KACd,GAAI,UAAU,CAAC,IAAI,EAAE,iBAAiB,IAAI,MAAM;IAClD;IACA,OAAO,GAAG,YAAY,IAAI,KAAK,EAAE,GAAG,IAAI;GACzC,GAXM,CAWN;EAEL,CAAC;CACE,CAAA;AAET"}

package/dist/data/ProgressBar.d.ts

@@ -11,10 +11,14 @@ export type ProgressBarProps = {
     segments: ProgressSegment[];
     /** Total value used to calculate segment percentages. */
     total: number;
+    /** Accessible name for the measured resource. */
+    label?: string;
+    /** Formats amounts in tooltips and the accessible summary, e.g. bytes or durations. */
+    formatValue?: (value: number) => string;
     /** Height utility class, e.g. `h-2`. */
     height?: string;
     /** Classes applied to the progressbar root. */
     className?: string;
 };
-export declare function ProgressBar({ segments, total, height, className }: ProgressBarProps): import("react").JSX.Element | null;
+export declare function ProgressBar({ segments, total, label, formatValue, height, className, }: ProgressBarProps): import("react").JSX.Element | null;
 //# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/data/ProgressBar.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qDAAqD;IACrD,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAc,EAAE,SAAS,EAAE,EAAE,gBAAgB,sCAgC3F"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/data/ProgressBar.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qDAAqD;IACrD,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAoB,EACpB,MAAc,EACd,SAAS,GACV,EAAE,gBAAgB,sCA6ClB"}

package/dist/data/ProgressBar.js

@@ -2,13 +2,15 @@ import { cn } from "../lib/utils.js";
 import { isTailwindColorClass } from "../lib/color.js";
 import { jsx } from "react/jsx-runtime";
 // src/data/ProgressBar.tsx
-function ProgressBar({ segments, total, height = "h-2", className }) {
+function ProgressBar({ segments, total, label, formatValue = String, height = "h-2", className }) {
 	if (total === 0) return null;
-	const tooltip = segments.filter((s) => s.count > 0).map((s) => `${s.count} ${s.label}`).join(", ");
+	const tooltip = segments.filter((s) => s.count > 0).map((s) => `${formatValue(s.count)} ${s.label}`).join(", ");
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("w-full bg-muted rounded-full flex overflow-hidden", height, className),
 		title: tooltip,
 		role: "progressbar",
+		"aria-label": label,
+		"aria-valuetext": `${formatValue(segments.reduce((acc, s) => acc + s.count, 0))} of ${formatValue(total)}. ${tooltip}`,
 		"aria-valuemin": 0,
 		"aria-valuemax": total,
 		"aria-valuenow": segments.reduce((acc, s) => acc + s.count, 0),
@@ -22,7 +24,7 @@ function ProgressBar({ segments, total, height = "h-2", className }) {
 					width: `${pct}%`,
 					...asClass ? {} : { backgroundColor: seg.color }
 				},
-				title: `${seg.count} ${seg.label}`
+				title: `${formatValue(seg.count)} ${seg.label}`
 			}, i);
 		})
 	});

package/dist/data/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../src/data/ProgressBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { isTailwindColorClass } from \"../lib/color\";\n\nexport type ProgressSegment = {\n  /** Numeric amount represented by this segment. */\n  count: number;\n  /** Segment fill: a Tailwind bg class (e.g. \"bg-green-500\") or a CSS color value. */\n  color: string;\n  /** Label used in the tooltip. */\n  label: string;\n};\n\nexport type ProgressBarProps = {\n  /** Segments rendered in order from left to right. */\n  segments: ProgressSegment[];\n  /** Total value used to calculate segment percentages. */\n  total: number;\n  /** Height utility class, e.g. `h-2`. */\n  height?: string;\n  /** Classes applied to the progressbar root. */\n  className?: string;\n};\n\nexport function ProgressBar({ segments, total, height = \"h-2\", className }: ProgressBarProps) {\n  if (total === 0) return null;\n\n  const tooltip = segments\n    .filter((s) => s.count > 0)\n    .map((s) => `${s.count} ${s.label}`)\n    .join(\", \");\n\n  return (\n    <div\n      className={cn(\"w-full bg-muted rounded-full flex overflow-hidden\", height, className)}\n      title={tooltip}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={segments.reduce((acc, s) => acc + s.count, 0)}\n    >\n      {segments.map((seg, i) => {\n        if (seg.count === 0) return null;\n        const pct = (seg.count / total) * 100;\n        const asClass = isTailwindColorClass(seg.color);\n        return (\n          <div\n            key={i}\n            className={cn(asClass ? seg.color : undefined, height, \"transition-all duration-300\")}\n            style={{ width: `${pct}%`, ...(asClass ? {} : { backgroundColor: seg.color }) }}\n            title={`${seg.count} ${seg.label}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAuBA,SAAgB,YAAY,EAAE,UAAU,OAAO,SAAS,OAAO,aAA+B;CAC5F,IAAI,UAAU,GAAG,OAAO;CAExB,MAAM,UAAU,SACb,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,CAC1B,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,OAAO,CAAC,CACnC,KAAK,IAAI;CAEZ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,qDAAqD,QAAQ,SAAS;EACpF,OAAO;EACP,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;EAE1D,UAAA,SAAS,KAAK,KAAK,MAAM;GACxB,IAAI,IAAI,UAAU,GAAG,OAAO;GAC5B,MAAM,MAAO,IAAI,QAAQ,QAAS;GAClC,MAAM,UAAU,qBAAqB,IAAI,KAAK;GAC9C,OACE,oBAAC,OAAD;IAEE,WAAW,GAAG,UAAU,IAAI,QAAQ,KAAA,GAAW,QAAQ,6BAA6B;IACpF,OAAO;KAAE,OAAO,GAAG,IAAI;KAAI,GAAI,UAAU,CAAC,IAAI,EAAE,iBAAiB,IAAI,MAAM;IAAG;IAC9E,OAAO,GAAG,IAAI,MAAM,GAAG,IAAI;GAC5B,GAJM,CAIN;EAEL,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../src/data/ProgressBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { isTailwindColorClass } from \"../lib/color\";\n\nexport type ProgressSegment = {\n  /** Numeric amount represented by this segment. */\n  count: number;\n  /** Segment fill: a Tailwind bg class (e.g. \"bg-green-500\") or a CSS color value. */\n  color: string;\n  /** Label used in the tooltip. */\n  label: string;\n};\n\nexport type ProgressBarProps = {\n  /** Segments rendered in order from left to right. */\n  segments: ProgressSegment[];\n  /** Total value used to calculate segment percentages. */\n  total: number;\n  /** Accessible name for the measured resource. */\n  label?: string;\n  /** Formats amounts in tooltips and the accessible summary, e.g. bytes or durations. */\n  formatValue?: (value: number) => string;\n  /** Height utility class, e.g. `h-2`. */\n  height?: string;\n  /** Classes applied to the progressbar root. */\n  className?: string;\n};\n\nexport function ProgressBar({\n  segments,\n  total,\n  label,\n  formatValue = String,\n  height = \"h-2\",\n  className,\n}: ProgressBarProps) {\n  if (total === 0) return null;\n\n  const tooltip = segments\n    .filter((s) => s.count > 0)\n    .map((s) => `${formatValue(s.count)} ${s.label}`)\n    .join(\", \");\n\n  return (\n    <div\n      className={cn(\n        \"w-full bg-muted rounded-full flex overflow-hidden\",\n        height,\n        className,\n      )}\n      title={tooltip}\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuetext={`${formatValue(segments.reduce((acc, s) => acc + s.count, 0))} of ${formatValue(total)}. ${tooltip}`}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={segments.reduce((acc, s) => acc + s.count, 0)}\n    >\n      {segments.map((seg, i) => {\n        if (seg.count === 0) return null;\n        const pct = (seg.count / total) * 100;\n        const asClass = isTailwindColorClass(seg.color);\n        return (\n          <div\n            key={i}\n            className={cn(\n              asClass ? seg.color : undefined,\n              height,\n              \"transition-all duration-300\",\n            )}\n            style={{\n              width: `${pct}%`,\n              ...(asClass ? {} : { backgroundColor: seg.color }),\n            }}\n            title={`${formatValue(seg.count)} ${seg.label}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AA2BA,SAAgB,YAAY,EAC1B,UACA,OACA,OACA,cAAc,QACd,SAAS,OACT,aACmB;CACnB,IAAI,UAAU,GAAG,OAAO;CAExB,MAAM,UAAU,SACb,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,CAC1B,KAAK,MAAM,GAAG,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,CAChD,KAAK,IAAI;CAEZ,OACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,QACA,SACF;EACA,OAAO;EACP,MAAK;EACL,cAAY;EACZ,kBAAgB,GAAG,YAAY,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,MAAM,YAAY,KAAK,EAAE,IAAI;EAC3G,iBAAe;EACf,iBAAe;EACf,iBAAe,SAAS,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;EAE1D,UAAA,SAAS,KAAK,KAAK,MAAM;GACxB,IAAI,IAAI,UAAU,GAAG,OAAO;GAC5B,MAAM,MAAO,IAAI,QAAQ,QAAS;GAClC,MAAM,UAAU,qBAAqB,IAAI,KAAK;GAC9C,OACE,oBAAC,OAAD;IAEE,WAAW,GACT,UAAU,IAAI,QAAQ,KAAA,GACtB,QACA,6BACF;IACA,OAAO;KACL,OAAO,GAAG,IAAI;KACd,GAAI,UAAU,CAAC,IAAI,EAAE,iBAAiB,IAAI,MAAM;IAClD;IACA,OAAO,GAAG,YAAY,IAAI,KAAK,EAAE,GAAG,IAAI;GACzC,GAXM,CAWN;EAEL,CAAC;CACE,CAAA;AAET"}

package/dist/data/ProgressBars.cjs

@@ -35,7 +35,7 @@ function defaultFormatUnits(units) {
 * <capacity>" caption sits below with the icon+title. It is purely presentational
 * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).
 */
-function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], variant = "default", showLabel = true, showValue = true, showCapacity = false, orientation, stats, hoverCard = true, hoverFooter, className }) {
+function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], variant = "default", showLabel = true, showValue = true, showCapacity = false, orientation, stats, hoverCard = true, hoverFooter, error = null, className }) {
 	const perBar = unit?.perBar ?? 1e3;
 	const unitLabel = unit?.label ?? "cores";
 	const barLabel = unit?.barLabel ?? "core";
@@ -46,11 +46,15 @@ function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], va
 	const capacityText = model.limitUnits !== void 0 ? formatUnits(model.limitUnits) : "?";
 	const caption = !model.hasUsage ? "—" : showCapacity ? `${usageText} / ${capacityText} ${unitLabel}` : `${usageText} ${unitLabel}`;
 	const compactCaption = !model.hasUsage ? "—" : showCapacity ? `${usageText}/${capacityText} ${unitLabel}` : `${usageText} ${unitLabel}`;
-	const titleText = `${title}: ${compactCaption}`;
+	const titleText = `${title}: ${error ? error.message : compactCaption}`;
 	const isCell = variant === "cell";
 	const pctTone = model.limitUnits === void 0 ? void 0 : model.pct >= thresholds[1] ? "text-red-500" : model.pct >= thresholds[0] ? "text-amber-500" : "text-emerald-500";
 	const fmt = (n) => `${formatUnits(n)} ${unitLabel}`;
-	const hoverRows = model.hasUsage ? [
+	const hoverRows = error ? [{
+		label: "Error",
+		value: error.message,
+		tone: "text-red-500"
+	}] : model.hasUsage ? [
 		{
 			label: "Current",
 			value: fmt(model.usageUnits),
@@ -105,10 +109,14 @@ function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], va
 			}, i);
 		})
 	});
-	const valueNode = showValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	const valueNode = !showValue ? null : error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("min-w-0 max-w-full truncate text-red-500", isCell ? null : "text-xs"),
+		title: error.message,
+		children: error.message
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: require_utils.cn("shrink-0 font-semibold tabular-nums text-foreground", isCell ? null : "text-xs"),
 		children: valueText
-	}) : null;
+	});
 	const label = icon || showLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: require_utils.cn("inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground"),
 		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBarsIcon, { icon }) : null, showLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {

package/dist/data/ProgressBars.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBars.cjs","names":["Icon","deriveProgressBars","cn","GaugeHoverCard"],"sources":["../../src/data/ProgressBars.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { deriveProgressBars } from \"./ProgressBars.model\";\nimport { GaugeHoverCard, type GaugeHoverRow } from \"./GaugeHoverCard\";\n\nexport type ProgressBarsVariant = \"default\" | \"cell\";\nexport type ProgressBarsOrientation = \"horizontal\" | \"vertical\";\n\n/**\n * Describes what one bar represents, letting the same component render CPU cores,\n * memory gigabytes, or any other quantised capacity. Defaults model CPU cores.\n */\nexport interface ProgressBarsUnit {\n  /** Raw value that fills one bar, in the domain of `usage`/`max`. Default 1000 (millicores → 1 core). */\n  perBar?: number;\n  /** Caption/tooltip suffix naming the unit, plural. Default \"cores\". */\n  label?: string;\n  /** Per-bar hover tooltip noun, singular. Default \"core\". */\n  barLabel?: string;\n  /** Format a bar-unit count for the caption. Default: integers as-is, else 1 decimal. */\n  format?: (units: number) => string;\n}\n\n/** Summary statistics for the hover card, in the same domain as `usage`/`max`. */\nexport interface ProgressBarsStats {\n  /** Smallest value over the window. */\n  min: number;\n  /** Largest value over the window. */\n  max: number;\n  /** Mean value over the window. */\n  avg: number;\n}\n\nexport interface ProgressBarsProps {\n  /** Usage that fills the bars, in the raw domain (e.g. CPU millicores). */\n  usage: number | undefined;\n  /**\n   * The capacity, in the same raw domain as `usage`. Determines the number of\n   * bars (one per `unit.perBar`). When omitted or 0, the bar count falls back to\n   * the ceiling of the usage so an unbounded reading still renders.\n   */\n  max?: number;\n  /** What one bar represents. Defaults to CPU cores (perBar 1000, label \"cores\"). */\n  unit?: ProgressBarsUnit;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\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?: ProgressBarsVariant;\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  /**\n   * Include the capacity in the caption (\"2.3 / 4 cores\"). Defaults to false — the\n   * caption shows only the current value (\"2.3 cores\") since the bars already\n   * convey capacity. Set true to append the \"/ <capacity>\".\n   */\n  showCapacity?: boolean;\n  /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */\n  orientation?: ProgressBarsOrientation;\n  /**\n   * Summary stats for the hover card's Min/Max/Avg rows, in the SAME raw domain as\n   * `usage`/`max` (NOT divided by perBar). Pass null to omit those rows.\n   */\n  stats?: ProgressBarsStats | null;\n  /**\n   * Wrap the bars in a hover card summarising the metric (label + current / min /\n   * max / avg / capacity). Defaults to true.\n   */\n  hoverCard?: boolean;\n  /** Footer note in the hover card, e.g. the look-back window (\"over last 1h\"). */\n  hoverFooter?: ReactNode;\n  className?: string;\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 ProgressBarsIcon({ 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 defaultFormatUnits(units: number): string {\n  return Number.isInteger(units) ? String(units) : units.toFixed(1);\n}\n\n/**\n * ProgressBars renders quantised utilisation as a row of bars — one bar per unit\n * of capacity (the ceiling of the limit) — filled left to right by the usage. The\n * bar that straddles the usage boundary is partially filled (\"blocked out\") to\n * show the fractional unit in use, and the trailing bars stay empty to show\n * headroom; the bar colour crosses warning and danger thresholds. A \"<used> /\n * <capacity>\" caption sits below with the icon+title. It is purely presentational\n * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).\n */\nexport function ProgressBars({\n  usage,\n  max,\n  unit,\n  title,\n  icon,\n  thresholds = [75, 90],\n  variant = \"default\",\n  showLabel = true,\n  showValue = true,\n  showCapacity = false,\n  orientation,\n  stats,\n  hoverCard = true,\n  hoverFooter,\n  className,\n}: ProgressBarsProps) {\n  const perBar = unit?.perBar ?? 1000;\n  const unitLabel = unit?.label ?? \"cores\";\n  const barLabel = unit?.barLabel ?? \"core\";\n  const formatUnits = unit?.format ?? defaultFormatUnits;\n\n  const model = deriveProgressBars(usage, max, perBar);\n  const tone = toneClass(model.pct, thresholds);\n  const usageText = formatUnits(model.usageUnits);\n  const capacityText =\n    model.limitUnits !== undefined ? formatUnits(model.limitUnits) : \"?\";\n  const caption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText} / ${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const compactCaption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText}/${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const titleText = `${title}: ${compactCaption}`;\n  const isCell = variant === \"cell\";\n\n  // Hover card: surface current/min/max/avg/capacity in bar-units (stats are in\n  // the raw domain, so divide by perBar) so they read in the same unit as the\n  // caption. A bounded reading colours the current row by its threshold.\n  const pctTone =\n    model.limitUnits === undefined\n      ? undefined\n      : model.pct >= thresholds[1]\n        ? \"text-red-500\"\n        : model.pct >= thresholds[0]\n          ? \"text-amber-500\"\n          : \"text-emerald-500\";\n  const fmt = (n: number) => `${formatUnits(n)} ${unitLabel}`;\n  const hoverRows: GaugeHoverRow[] = model.hasUsage\n    ? [\n        { label: \"Current\", value: fmt(model.usageUnits), ...(pctTone ? { tone: pctTone } : {}) },\n        ...(stats\n          ? [\n              { label: \"Min\", value: fmt(stats.min / perBar) },\n              { label: \"Max\", value: fmt(stats.max / perBar) },\n              { label: \"Avg\", value: fmt(stats.avg / perBar) },\n            ]\n          : []),\n        ...(model.limitUnits !== undefined\n          ? [{ label: \"Capacity\", value: fmt(model.limitUnits) }]\n          : []),\n      ]\n    : [];\n\n  const resolvedOrientation = orientation ?? \"vertical\";\n  const isDense = model.barCount > 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-bar-count={model.barCount}\n      data-bar-density={isDense ? \"compact\" : \"default\"}\n    >\n      {model.bars.map((bar, i) => {\n        const barPct = 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={`${barLabel} ${i + 1}: ${barPct}%`}\n            aria-label={!isCell ? `${barLabel} ${i + 1}: ${barPct}%` : 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: `${barPct}%`, right: 0 }\n                  : { width: `${barPct}%`, 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 ? <ProgressBarsIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate\">{title}</span> : null}\n      </span>\n    ) : null;\n\n  const useHover = hoverCard && hoverRows.length > 0;\n\n  if (isCell) {\n    const cell = (\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        {...(useHover ? {} : { title: titleText })}\n        aria-label={useHover ? titleText : hiddenAccessibleText}\n      >\n        {label}\n        {bars}\n        {valueNode}\n      </span>\n    );\n    return useHover ? (\n      <GaugeHoverCard title={title} rows={hoverRows} footer={hoverFooter} trigger={cell} />\n    ) : (\n      cell\n    );\n  }\n\n  const block = (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      {...(useHover ? {} : { title: hiddenAccessibleText })}\n      aria-label={useHover ? titleText : hiddenAccessibleText}\n    >\n      {bars}\n      {valueNode}\n      {label}\n    </div>\n  );\n  return useHover ? (\n    <GaugeHoverCard\n      title={title}\n      rows={hoverRows}\n      footer={hoverFooter}\n      trigger={block}\n      className=\"w-full justify-center\"\n    />\n  ) : (\n    block\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBars.cjs","names":["Icon","deriveProgressBars","cn","GaugeHoverCard"],"sources":["../../src/data/ProgressBars.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { deriveProgressBars } from \"./ProgressBars.model\";\nimport { GaugeHoverCard, type GaugeHoverRow } from \"./GaugeHoverCard\";\n\nexport type ProgressBarsVariant = \"default\" | \"cell\";\nexport type ProgressBarsOrientation = \"horizontal\" | \"vertical\";\n\n/**\n * Describes what one bar represents, letting the same component render CPU cores,\n * memory gigabytes, or any other quantised capacity. Defaults model CPU cores.\n */\nexport interface ProgressBarsUnit {\n  /** Raw value that fills one bar, in the domain of `usage`/`max`. Default 1000 (millicores → 1 core). */\n  perBar?: number;\n  /** Caption/tooltip suffix naming the unit, plural. Default \"cores\". */\n  label?: string;\n  /** Per-bar hover tooltip noun, singular. Default \"core\". */\n  barLabel?: string;\n  /** Format a bar-unit count for the caption. Default: integers as-is, else 1 decimal. */\n  format?: (units: number) => string;\n}\n\n/** Summary statistics for the hover card, in the same domain as `usage`/`max`. */\nexport interface ProgressBarsStats {\n  /** Smallest value over the window. */\n  min: number;\n  /** Largest value over the window. */\n  max: number;\n  /** Mean value over the window. */\n  avg: number;\n}\n\nexport interface ProgressBarsProps {\n  /** Usage that fills the bars, in the raw domain (e.g. CPU millicores). */\n  usage: number | undefined;\n  /**\n   * The capacity, in the same raw domain as `usage`. Determines the number of\n   * bars (one per `unit.perBar`). When omitted or 0, the bar count falls back to\n   * the ceiling of the usage so an unbounded reading still renders.\n   */\n  max?: number;\n  /** What one bar represents. Defaults to CPU cores (perBar 1000, label \"cores\"). */\n  unit?: ProgressBarsUnit;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\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?: ProgressBarsVariant;\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  /**\n   * Include the capacity in the caption (\"2.3 / 4 cores\"). Defaults to false — the\n   * caption shows only the current value (\"2.3 cores\") since the bars already\n   * convey capacity. Set true to append the \"/ <capacity>\".\n   */\n  showCapacity?: boolean;\n  /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */\n  orientation?: ProgressBarsOrientation;\n  /**\n   * Summary stats for the hover card's Min/Max/Avg rows, in the SAME raw domain as\n   * `usage`/`max` (NOT divided by perBar). Pass null to omit those rows.\n   */\n  stats?: ProgressBarsStats | null;\n  /**\n   * Wrap the bars in a hover card summarising the metric (label + current / min /\n   * max / avg / capacity). Defaults to true.\n   */\n  hoverCard?: boolean;\n  /** Footer note in the hover card, e.g. the look-back window (\"over last 1h\"). */\n  hoverFooter?: ReactNode;\n  /**\n   * A failed read. Its message replaces the caption (in red) and the accessible\n   * label's reading, and is the hover card's only row, as TimeseriesGauge shows one.\n   */\n  error?: Error | null;\n  className?: string;\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 ProgressBarsIcon({ 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 defaultFormatUnits(units: number): string {\n  return Number.isInteger(units) ? String(units) : units.toFixed(1);\n}\n\n/**\n * ProgressBars renders quantised utilisation as a row of bars — one bar per unit\n * of capacity (the ceiling of the limit) — filled left to right by the usage. The\n * bar that straddles the usage boundary is partially filled (\"blocked out\") to\n * show the fractional unit in use, and the trailing bars stay empty to show\n * headroom; the bar colour crosses warning and danger thresholds. A \"<used> /\n * <capacity>\" caption sits below with the icon+title. It is purely presentational\n * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).\n */\nexport function ProgressBars({\n  usage,\n  max,\n  unit,\n  title,\n  icon,\n  thresholds = [75, 90],\n  variant = \"default\",\n  showLabel = true,\n  showValue = true,\n  showCapacity = false,\n  orientation,\n  stats,\n  hoverCard = true,\n  hoverFooter,\n  error = null,\n  className,\n}: ProgressBarsProps) {\n  const perBar = unit?.perBar ?? 1000;\n  const unitLabel = unit?.label ?? \"cores\";\n  const barLabel = unit?.barLabel ?? \"core\";\n  const formatUnits = unit?.format ?? defaultFormatUnits;\n\n  const model = deriveProgressBars(usage, max, perBar);\n  const tone = toneClass(model.pct, thresholds);\n  const usageText = formatUnits(model.usageUnits);\n  const capacityText =\n    model.limitUnits !== undefined ? formatUnits(model.limitUnits) : \"?\";\n  const caption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText} / ${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const compactCaption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText}/${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const titleText = `${title}: ${error ? error.message : compactCaption}`;\n  const isCell = variant === \"cell\";\n\n  // Hover card: surface current/min/max/avg/capacity in bar-units (stats are in\n  // the raw domain, so divide by perBar) so they read in the same unit as the\n  // caption. A bounded reading colours the current row by its threshold.\n  const pctTone =\n    model.limitUnits === undefined\n      ? undefined\n      : model.pct >= thresholds[1]\n        ? \"text-red-500\"\n        : model.pct >= thresholds[0]\n          ? \"text-amber-500\"\n          : \"text-emerald-500\";\n  const fmt = (n: number) => `${formatUnits(n)} ${unitLabel}`;\n  const hoverRows: GaugeHoverRow[] = error\n    ? [{ label: \"Error\", value: error.message, tone: \"text-red-500\" }]\n    : model.hasUsage\n    ? [\n        { label: \"Current\", value: fmt(model.usageUnits), ...(pctTone ? { tone: pctTone } : {}) },\n        ...(stats\n          ? [\n              { label: \"Min\", value: fmt(stats.min / perBar) },\n              { label: \"Max\", value: fmt(stats.max / perBar) },\n              { label: \"Avg\", value: fmt(stats.avg / perBar) },\n            ]\n          : []),\n        ...(model.limitUnits !== undefined\n          ? [{ label: \"Capacity\", value: fmt(model.limitUnits) }]\n          : []),\n      ]\n    : [];\n\n  const resolvedOrientation = orientation ?? \"vertical\";\n  const isDense = model.barCount > 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-bar-count={model.barCount}\n      data-bar-density={isDense ? \"compact\" : \"default\"}\n    >\n      {model.bars.map((bar, i) => {\n        const barPct = 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={`${barLabel} ${i + 1}: ${barPct}%`}\n            aria-label={!isCell ? `${barLabel} ${i + 1}: ${barPct}%` : 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: `${barPct}%`, right: 0 }\n                  : { width: `${barPct}%`, top: 0 }\n              }\n            />\n          </span>\n        );\n      })}\n    </span>\n  );\n  const valueNode = !showValue ? null : error ? (\n    <span\n      className={cn(\"min-w-0 max-w-full truncate text-red-500\", isCell ? null : \"text-xs\")}\n      title={error.message}\n    >\n      {error.message}\n    </span>\n  ) : (\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  );\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 ? <ProgressBarsIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate\">{title}</span> : null}\n      </span>\n    ) : null;\n\n  const useHover = hoverCard && hoverRows.length > 0;\n\n  if (isCell) {\n    const cell = (\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        {...(useHover ? {} : { title: titleText })}\n        aria-label={useHover ? titleText : hiddenAccessibleText}\n      >\n        {label}\n        {bars}\n        {valueNode}\n      </span>\n    );\n    return useHover ? (\n      <GaugeHoverCard title={title} rows={hoverRows} footer={hoverFooter} trigger={cell} />\n    ) : (\n      cell\n    );\n  }\n\n  const block = (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      {...(useHover ? {} : { title: hiddenAccessibleText })}\n      aria-label={useHover ? titleText : hiddenAccessibleText}\n    >\n      {bars}\n      {valueNode}\n      {label}\n    </div>\n  );\n  return useHover ? (\n    <GaugeHoverCard\n      title={title}\n      rows={hoverRows}\n      footer={hoverFooter}\n      trigger={block}\n      className=\"w-full justify-center\"\n    />\n  ) : (\n    block\n  );\n}\n"],"mappings":"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"}

package/dist/data/ProgressBars.d.ts

@@ -70,6 +70,11 @@ export interface ProgressBarsProps {
     hoverCard?: boolean;
     /** Footer note in the hover card, e.g. the look-back window ("over last 1h"). */
     hoverFooter?: ReactNode;
+    /**
+     * A failed read. Its message replaces the caption (in red) and the accessible
+     * label's reading, and is the hover card's only row, as TimeseriesGauge shows one.
+     */
+    error?: Error | null;
     className?: string;
 }
 /**
@@ -81,5 +86,5 @@ export interface ProgressBarsProps {
  * <capacity>" caption sits below with the icon+title. It is purely presentational
  * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).
  */
-export declare function ProgressBars({ usage, max, unit, title, icon, thresholds, variant, showLabel, showValue, showCapacity, orientation, stats, hoverCard, hoverFooter, className, }: ProgressBarsProps): import("react").JSX.Element;
+export declare function ProgressBars({ usage, max, unit, title, icon, thresholds, variant, showLabel, showValue, showCapacity, orientation, stats, hoverCard, hoverFooter, error, className, }: ProgressBarsProps): import("react").JSX.Element;
 //# sourceMappingURL=ProgressBars.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBars.d.ts","sourceRoot":"","sources":["../../src/data/ProgressBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED,kFAAkF;AAClF,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,mFAAmF;IACnF,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,UAAqB,EACrB,OAAmB,EACnB,SAAgB,EAChB,SAAgB,EAChB,YAAoB,EACpB,WAAW,EACX,KAAK,EACL,SAAgB,EAChB,WAAW,EACX,SAAS,GACV,EAAE,iBAAiB,+BAoLnB"}
+{"version":3,"file":"ProgressBars.d.ts","sourceRoot":"","sources":["../../src/data/ProgressBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED,kFAAkF;AAClF,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,mFAAmF;IACnF,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,UAAqB,EACrB,OAAmB,EACnB,SAAgB,EAChB,SAAgB,EAChB,YAAoB,EACpB,WAAW,EACX,KAAK,EACL,SAAgB,EAChB,WAAW,EACX,KAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BA6LnB"}

package/dist/data/ProgressBars.js

@@ -35,7 +35,7 @@ function defaultFormatUnits(units) {
 * <capacity>" caption sits below with the icon+title. It is purely presentational
 * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).
 */
-function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], variant = "default", showLabel = true, showValue = true, showCapacity = false, orientation, stats, hoverCard = true, hoverFooter, className }) {
+function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], variant = "default", showLabel = true, showValue = true, showCapacity = false, orientation, stats, hoverCard = true, hoverFooter, error = null, className }) {
 	const perBar = unit?.perBar ?? 1e3;
 	const unitLabel = unit?.label ?? "cores";
 	const barLabel = unit?.barLabel ?? "core";
@@ -46,11 +46,15 @@ function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], va
 	const capacityText = model.limitUnits !== void 0 ? formatUnits(model.limitUnits) : "?";
 	const caption = !model.hasUsage ? "—" : showCapacity ? `${usageText} / ${capacityText} ${unitLabel}` : `${usageText} ${unitLabel}`;
 	const compactCaption = !model.hasUsage ? "—" : showCapacity ? `${usageText}/${capacityText} ${unitLabel}` : `${usageText} ${unitLabel}`;
-	const titleText = `${title}: ${compactCaption}`;
+	const titleText = `${title}: ${error ? error.message : compactCaption}`;
 	const isCell = variant === "cell";
 	const pctTone = model.limitUnits === void 0 ? void 0 : model.pct >= thresholds[1] ? "text-red-500" : model.pct >= thresholds[0] ? "text-amber-500" : "text-emerald-500";
 	const fmt = (n) => `${formatUnits(n)} ${unitLabel}`;
-	const hoverRows = model.hasUsage ? [
+	const hoverRows = error ? [{
+		label: "Error",
+		value: error.message,
+		tone: "text-red-500"
+	}] : model.hasUsage ? [
 		{
 			label: "Current",
 			value: fmt(model.usageUnits),
@@ -105,10 +109,14 @@ function ProgressBars({ usage, max, unit, title, icon, thresholds = [75, 90], va
 			}, i);
 		})
 	});
-	const valueNode = showValue ? /* @__PURE__ */ jsx("span", {
+	const valueNode = !showValue ? null : error ? /* @__PURE__ */ jsx("span", {
+		className: cn("min-w-0 max-w-full truncate text-red-500", isCell ? null : "text-xs"),
+		title: error.message,
+		children: error.message
+	}) : /* @__PURE__ */ jsx("span", {
 		className: cn("shrink-0 font-semibold tabular-nums text-foreground", isCell ? null : "text-xs"),
 		children: valueText
-	}) : null;
+	});
 	const label = icon || showLabel ? /* @__PURE__ */ jsxs("span", {
 		className: cn("inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground"),
 		children: [icon ? /* @__PURE__ */ jsx(ProgressBarsIcon, { icon }) : null, showLabel ? /* @__PURE__ */ jsx("span", {

package/dist/data/ProgressBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBars.js","names":[],"sources":["../../src/data/ProgressBars.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { deriveProgressBars } from \"./ProgressBars.model\";\nimport { GaugeHoverCard, type GaugeHoverRow } from \"./GaugeHoverCard\";\n\nexport type ProgressBarsVariant = \"default\" | \"cell\";\nexport type ProgressBarsOrientation = \"horizontal\" | \"vertical\";\n\n/**\n * Describes what one bar represents, letting the same component render CPU cores,\n * memory gigabytes, or any other quantised capacity. Defaults model CPU cores.\n */\nexport interface ProgressBarsUnit {\n  /** Raw value that fills one bar, in the domain of `usage`/`max`. Default 1000 (millicores → 1 core). */\n  perBar?: number;\n  /** Caption/tooltip suffix naming the unit, plural. Default \"cores\". */\n  label?: string;\n  /** Per-bar hover tooltip noun, singular. Default \"core\". */\n  barLabel?: string;\n  /** Format a bar-unit count for the caption. Default: integers as-is, else 1 decimal. */\n  format?: (units: number) => string;\n}\n\n/** Summary statistics for the hover card, in the same domain as `usage`/`max`. */\nexport interface ProgressBarsStats {\n  /** Smallest value over the window. */\n  min: number;\n  /** Largest value over the window. */\n  max: number;\n  /** Mean value over the window. */\n  avg: number;\n}\n\nexport interface ProgressBarsProps {\n  /** Usage that fills the bars, in the raw domain (e.g. CPU millicores). */\n  usage: number | undefined;\n  /**\n   * The capacity, in the same raw domain as `usage`. Determines the number of\n   * bars (one per `unit.perBar`). When omitted or 0, the bar count falls back to\n   * the ceiling of the usage so an unbounded reading still renders.\n   */\n  max?: number;\n  /** What one bar represents. Defaults to CPU cores (perBar 1000, label \"cores\"). */\n  unit?: ProgressBarsUnit;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\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?: ProgressBarsVariant;\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  /**\n   * Include the capacity in the caption (\"2.3 / 4 cores\"). Defaults to false — the\n   * caption shows only the current value (\"2.3 cores\") since the bars already\n   * convey capacity. Set true to append the \"/ <capacity>\".\n   */\n  showCapacity?: boolean;\n  /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */\n  orientation?: ProgressBarsOrientation;\n  /**\n   * Summary stats for the hover card's Min/Max/Avg rows, in the SAME raw domain as\n   * `usage`/`max` (NOT divided by perBar). Pass null to omit those rows.\n   */\n  stats?: ProgressBarsStats | null;\n  /**\n   * Wrap the bars in a hover card summarising the metric (label + current / min /\n   * max / avg / capacity). Defaults to true.\n   */\n  hoverCard?: boolean;\n  /** Footer note in the hover card, e.g. the look-back window (\"over last 1h\"). */\n  hoverFooter?: ReactNode;\n  className?: string;\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 ProgressBarsIcon({ 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 defaultFormatUnits(units: number): string {\n  return Number.isInteger(units) ? String(units) : units.toFixed(1);\n}\n\n/**\n * ProgressBars renders quantised utilisation as a row of bars — one bar per unit\n * of capacity (the ceiling of the limit) — filled left to right by the usage. The\n * bar that straddles the usage boundary is partially filled (\"blocked out\") to\n * show the fractional unit in use, and the trailing bars stay empty to show\n * headroom; the bar colour crosses warning and danger thresholds. A \"<used> /\n * <capacity>\" caption sits below with the icon+title. It is purely presentational\n * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).\n */\nexport function ProgressBars({\n  usage,\n  max,\n  unit,\n  title,\n  icon,\n  thresholds = [75, 90],\n  variant = \"default\",\n  showLabel = true,\n  showValue = true,\n  showCapacity = false,\n  orientation,\n  stats,\n  hoverCard = true,\n  hoverFooter,\n  className,\n}: ProgressBarsProps) {\n  const perBar = unit?.perBar ?? 1000;\n  const unitLabel = unit?.label ?? \"cores\";\n  const barLabel = unit?.barLabel ?? \"core\";\n  const formatUnits = unit?.format ?? defaultFormatUnits;\n\n  const model = deriveProgressBars(usage, max, perBar);\n  const tone = toneClass(model.pct, thresholds);\n  const usageText = formatUnits(model.usageUnits);\n  const capacityText =\n    model.limitUnits !== undefined ? formatUnits(model.limitUnits) : \"?\";\n  const caption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText} / ${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const compactCaption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText}/${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const titleText = `${title}: ${compactCaption}`;\n  const isCell = variant === \"cell\";\n\n  // Hover card: surface current/min/max/avg/capacity in bar-units (stats are in\n  // the raw domain, so divide by perBar) so they read in the same unit as the\n  // caption. A bounded reading colours the current row by its threshold.\n  const pctTone =\n    model.limitUnits === undefined\n      ? undefined\n      : model.pct >= thresholds[1]\n        ? \"text-red-500\"\n        : model.pct >= thresholds[0]\n          ? \"text-amber-500\"\n          : \"text-emerald-500\";\n  const fmt = (n: number) => `${formatUnits(n)} ${unitLabel}`;\n  const hoverRows: GaugeHoverRow[] = model.hasUsage\n    ? [\n        { label: \"Current\", value: fmt(model.usageUnits), ...(pctTone ? { tone: pctTone } : {}) },\n        ...(stats\n          ? [\n              { label: \"Min\", value: fmt(stats.min / perBar) },\n              { label: \"Max\", value: fmt(stats.max / perBar) },\n              { label: \"Avg\", value: fmt(stats.avg / perBar) },\n            ]\n          : []),\n        ...(model.limitUnits !== undefined\n          ? [{ label: \"Capacity\", value: fmt(model.limitUnits) }]\n          : []),\n      ]\n    : [];\n\n  const resolvedOrientation = orientation ?? \"vertical\";\n  const isDense = model.barCount > 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-bar-count={model.barCount}\n      data-bar-density={isDense ? \"compact\" : \"default\"}\n    >\n      {model.bars.map((bar, i) => {\n        const barPct = 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={`${barLabel} ${i + 1}: ${barPct}%`}\n            aria-label={!isCell ? `${barLabel} ${i + 1}: ${barPct}%` : 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: `${barPct}%`, right: 0 }\n                  : { width: `${barPct}%`, 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 ? <ProgressBarsIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate\">{title}</span> : null}\n      </span>\n    ) : null;\n\n  const useHover = hoverCard && hoverRows.length > 0;\n\n  if (isCell) {\n    const cell = (\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        {...(useHover ? {} : { title: titleText })}\n        aria-label={useHover ? titleText : hiddenAccessibleText}\n      >\n        {label}\n        {bars}\n        {valueNode}\n      </span>\n    );\n    return useHover ? (\n      <GaugeHoverCard title={title} rows={hoverRows} footer={hoverFooter} trigger={cell} />\n    ) : (\n      cell\n    );\n  }\n\n  const block = (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      {...(useHover ? {} : { title: hiddenAccessibleText })}\n      aria-label={useHover ? titleText : hiddenAccessibleText}\n    >\n      {bars}\n      {valueNode}\n      {label}\n    </div>\n  );\n  return useHover ? (\n    <GaugeHoverCard\n      title={title}\n      rows={hoverRows}\n      footer={hoverFooter}\n      trigger={block}\n      className=\"w-full justify-center\"\n    />\n  ) : (\n    block\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBars.js","names":[],"sources":["../../src/data/ProgressBars.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { deriveProgressBars } from \"./ProgressBars.model\";\nimport { GaugeHoverCard, type GaugeHoverRow } from \"./GaugeHoverCard\";\n\nexport type ProgressBarsVariant = \"default\" | \"cell\";\nexport type ProgressBarsOrientation = \"horizontal\" | \"vertical\";\n\n/**\n * Describes what one bar represents, letting the same component render CPU cores,\n * memory gigabytes, or any other quantised capacity. Defaults model CPU cores.\n */\nexport interface ProgressBarsUnit {\n  /** Raw value that fills one bar, in the domain of `usage`/`max`. Default 1000 (millicores → 1 core). */\n  perBar?: number;\n  /** Caption/tooltip suffix naming the unit, plural. Default \"cores\". */\n  label?: string;\n  /** Per-bar hover tooltip noun, singular. Default \"core\". */\n  barLabel?: string;\n  /** Format a bar-unit count for the caption. Default: integers as-is, else 1 decimal. */\n  format?: (units: number) => string;\n}\n\n/** Summary statistics for the hover card, in the same domain as `usage`/`max`. */\nexport interface ProgressBarsStats {\n  /** Smallest value over the window. */\n  min: number;\n  /** Largest value over the window. */\n  max: number;\n  /** Mean value over the window. */\n  avg: number;\n}\n\nexport interface ProgressBarsProps {\n  /** Usage that fills the bars, in the raw domain (e.g. CPU millicores). */\n  usage: number | undefined;\n  /**\n   * The capacity, in the same raw domain as `usage`. Determines the number of\n   * bars (one per `unit.perBar`). When omitted or 0, the bar count falls back to\n   * the ceiling of the usage so an unbounded reading still renders.\n   */\n  max?: number;\n  /** What one bar represents. Defaults to CPU cores (perBar 1000, label \"cores\"). */\n  unit?: ProgressBarsUnit;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\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?: ProgressBarsVariant;\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  /**\n   * Include the capacity in the caption (\"2.3 / 4 cores\"). Defaults to false — the\n   * caption shows only the current value (\"2.3 cores\") since the bars already\n   * convey capacity. Set true to append the \"/ <capacity>\".\n   */\n  showCapacity?: boolean;\n  /** Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right. */\n  orientation?: ProgressBarsOrientation;\n  /**\n   * Summary stats for the hover card's Min/Max/Avg rows, in the SAME raw domain as\n   * `usage`/`max` (NOT divided by perBar). Pass null to omit those rows.\n   */\n  stats?: ProgressBarsStats | null;\n  /**\n   * Wrap the bars in a hover card summarising the metric (label + current / min /\n   * max / avg / capacity). Defaults to true.\n   */\n  hoverCard?: boolean;\n  /** Footer note in the hover card, e.g. the look-back window (\"over last 1h\"). */\n  hoverFooter?: ReactNode;\n  /**\n   * A failed read. Its message replaces the caption (in red) and the accessible\n   * label's reading, and is the hover card's only row, as TimeseriesGauge shows one.\n   */\n  error?: Error | null;\n  className?: string;\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 ProgressBarsIcon({ 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 defaultFormatUnits(units: number): string {\n  return Number.isInteger(units) ? String(units) : units.toFixed(1);\n}\n\n/**\n * ProgressBars renders quantised utilisation as a row of bars — one bar per unit\n * of capacity (the ceiling of the limit) — filled left to right by the usage. The\n * bar that straddles the usage boundary is partially filled (\"blocked out\") to\n * show the fractional unit in use, and the trailing bars stay empty to show\n * headroom; the bar colour crosses warning and danger thresholds. A \"<used> /\n * <capacity>\" caption sits below with the icon+title. It is purely presentational\n * — pass plain `usage`/`max` numbers (TimeseriesCoreBars wraps it with live data).\n */\nexport function ProgressBars({\n  usage,\n  max,\n  unit,\n  title,\n  icon,\n  thresholds = [75, 90],\n  variant = \"default\",\n  showLabel = true,\n  showValue = true,\n  showCapacity = false,\n  orientation,\n  stats,\n  hoverCard = true,\n  hoverFooter,\n  error = null,\n  className,\n}: ProgressBarsProps) {\n  const perBar = unit?.perBar ?? 1000;\n  const unitLabel = unit?.label ?? \"cores\";\n  const barLabel = unit?.barLabel ?? \"core\";\n  const formatUnits = unit?.format ?? defaultFormatUnits;\n\n  const model = deriveProgressBars(usage, max, perBar);\n  const tone = toneClass(model.pct, thresholds);\n  const usageText = formatUnits(model.usageUnits);\n  const capacityText =\n    model.limitUnits !== undefined ? formatUnits(model.limitUnits) : \"?\";\n  const caption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText} / ${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const compactCaption = !model.hasUsage\n    ? \"—\"\n    : showCapacity\n      ? `${usageText}/${capacityText} ${unitLabel}`\n      : `${usageText} ${unitLabel}`;\n  const titleText = `${title}: ${error ? error.message : compactCaption}`;\n  const isCell = variant === \"cell\";\n\n  // Hover card: surface current/min/max/avg/capacity in bar-units (stats are in\n  // the raw domain, so divide by perBar) so they read in the same unit as the\n  // caption. A bounded reading colours the current row by its threshold.\n  const pctTone =\n    model.limitUnits === undefined\n      ? undefined\n      : model.pct >= thresholds[1]\n        ? \"text-red-500\"\n        : model.pct >= thresholds[0]\n          ? \"text-amber-500\"\n          : \"text-emerald-500\";\n  const fmt = (n: number) => `${formatUnits(n)} ${unitLabel}`;\n  const hoverRows: GaugeHoverRow[] = error\n    ? [{ label: \"Error\", value: error.message, tone: \"text-red-500\" }]\n    : model.hasUsage\n    ? [\n        { label: \"Current\", value: fmt(model.usageUnits), ...(pctTone ? { tone: pctTone } : {}) },\n        ...(stats\n          ? [\n              { label: \"Min\", value: fmt(stats.min / perBar) },\n              { label: \"Max\", value: fmt(stats.max / perBar) },\n              { label: \"Avg\", value: fmt(stats.avg / perBar) },\n            ]\n          : []),\n        ...(model.limitUnits !== undefined\n          ? [{ label: \"Capacity\", value: fmt(model.limitUnits) }]\n          : []),\n      ]\n    : [];\n\n  const resolvedOrientation = orientation ?? \"vertical\";\n  const isDense = model.barCount > 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-bar-count={model.barCount}\n      data-bar-density={isDense ? \"compact\" : \"default\"}\n    >\n      {model.bars.map((bar, i) => {\n        const barPct = 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={`${barLabel} ${i + 1}: ${barPct}%`}\n            aria-label={!isCell ? `${barLabel} ${i + 1}: ${barPct}%` : 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: `${barPct}%`, right: 0 }\n                  : { width: `${barPct}%`, top: 0 }\n              }\n            />\n          </span>\n        );\n      })}\n    </span>\n  );\n  const valueNode = !showValue ? null : error ? (\n    <span\n      className={cn(\"min-w-0 max-w-full truncate text-red-500\", isCell ? null : \"text-xs\")}\n      title={error.message}\n    >\n      {error.message}\n    </span>\n  ) : (\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  );\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 ? <ProgressBarsIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate\">{title}</span> : null}\n      </span>\n    ) : null;\n\n  const useHover = hoverCard && hoverRows.length > 0;\n\n  if (isCell) {\n    const cell = (\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        {...(useHover ? {} : { title: titleText })}\n        aria-label={useHover ? titleText : hiddenAccessibleText}\n      >\n        {label}\n        {bars}\n        {valueNode}\n      </span>\n    );\n    return useHover ? (\n      <GaugeHoverCard title={title} rows={hoverRows} footer={hoverFooter} trigger={cell} />\n    ) : (\n      cell\n    );\n  }\n\n  const block = (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      {...(useHover ? {} : { title: hiddenAccessibleText })}\n      aria-label={useHover ? titleText : hiddenAccessibleText}\n    >\n      {bars}\n      {valueNode}\n      {label}\n    </div>\n  );\n  return useHover ? (\n    <GaugeHoverCard\n      title={title}\n      rows={hoverRows}\n      footer={hoverFooter}\n      trigger={block}\n      className=\"w-full justify-center\"\n    />\n  ) : (\n    block\n  );\n}\n"],"mappings":"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"}

package/dist/data/Properties.cjs

@@ -36,19 +36,19 @@ var DENSITY_CLASSES = {
 		row: "px-density-4 py-density-3",
 		label: "text-sm font-medium text-muted-foreground",
 		value: "text-base text-foreground",
-		gridTemplateColumns: "minmax(12rem, 20rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(12rem, 40%), min(20rem, 50%)) minmax(0, 1fr)"
 	},
 	comfortable: {
 		row: "px-density-3 py-density-2",
 		label: "text-xs font-medium text-muted-foreground",
 		value: "text-sm text-foreground",
-		gridTemplateColumns: "minmax(7rem, 12rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(7rem, 40%), min(12rem, 50%)) minmax(0, 1fr)"
 	},
 	compact: {
 		row: "px-density-2 py-density-1.5",
 		label: "font-mono text-[11px] text-muted-foreground",
 		value: "text-xs text-foreground",
-		gridTemplateColumns: "minmax(8rem, 14rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(8rem, 40%), min(14rem, 50%)) minmax(0, 1fr)"
 	}
 };
 function Properties({ items, renderLabel, renderValue, labelIcon, prefixActions, suffixActions, className, rowClassName, gridTemplateColumns, labelClassName, valueClassName, density = "comfortable", keyRef, showDensityMenu = true, emptyMessage = "No properties" }) {

package/dist/data/Properties.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.cjs","names":["UiRows","UiListFlat","UiListDashes","useContext","PropertiesContext","useState","cn","formatPropertyLabel","Fragment","Icon","PropertyValue","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { PropertiesContext } from \"./properties-context\";\nimport { PropertyValue } from \"./PropertyValue\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Optional display type; structured values otherwise render as JSON. */\n  type?: \"text\" | \"json\" | \"bytes\" | \"duration\" | \"number\" | \"boolean\" | \"date\";\n  /** Unit for numeric values, such as ms, s, bytes, or percent. */\n  unit?: string;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables a child area spanning both columns, with nested labels indented. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?:\n    | string\n    | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const parent = useContext(PropertiesContext);\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : null}\n                  <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n                </div>\n                {item.subtitle ? (\n                  <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                    {item.subtitle}\n                  </div>\n                ) : null}\n              </dt>\n              <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n                <div className=\"flex min-w-0 items-start gap-density-1\">\n                  <ActionList\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : <PropertyValue item={item} density={activeDensity} />}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\"\n          ? { name: action.icon }\n          : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Properties.cjs","names":["UiRows","UiListFlat","UiListDashes","useContext","PropertiesContext","useState","cn","formatPropertyLabel","Fragment","Icon","PropertyValue","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { PropertiesContext } from \"./properties-context\";\nimport { PropertyValue } from \"./PropertyValue\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Optional display type; structured values otherwise render as JSON. */\n  type?: \"text\" | \"json\" | \"bytes\" | \"duration\" | \"number\" | \"boolean\" | \"date\";\n  /** Unit for numeric values, such as ms, s, bytes, or percent. */\n  unit?: string;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables a child area spanning both columns, with nested labels indented. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?:\n    | string\n    | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(min(12rem, 40%), min(20rem, 50%)) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(min(7rem, 40%), min(12rem, 50%)) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(min(8rem, 40%), min(14rem, 50%)) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const parent = useContext(PropertiesContext);\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : null}\n                  <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n                </div>\n                {item.subtitle ? (\n                  <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                    {item.subtitle}\n                  </div>\n                ) : null}\n              </dt>\n              <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n                <div className=\"flex min-w-0 items-start gap-density-1\">\n                  <ActionList\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : <PropertyValue item={item} density={activeDensity} />}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\"\n          ? { name: action.icon }\n          : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiGA,IAAM,oCAAoC;AAE1C,IAAM,6BAID;CACH;EAAE,OAAO;EAAW,OAAO;EAAW,MAAMA,eAAAA;CAAO;CACnD;EAAE,OAAO;EAAe,OAAO;EAAe,MAAMC,mBAAAA;CAAW;CAC/D;EAAE,OAAO;EAAY,OAAO;EAAY,MAAMC,qBAAAA;CAAa;AAC7D;AAEA,IAAM,kBAGF;CACF,UAAU;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACP,qBAAqB;CACvB;CACA,aAAa;EACX,KAAK;EACL,OAAO;EACP,OAAO;EACP,qBAAqB;CACvB;CACA,SAAS;EACP,KAAK;EACL,OAAO;EACP,OAAO;EACP,qBAAqB;CACvB;AACF;AAEA,SAAgB,WAAwB,EACtC,OACA,aACA,aACA,WACA,eACA,eACA,WACA,cACA,qBACA,gBACA,gBACA,UAAU,eACV,QACA,kBAAkB,MAClB,eAAe,mBACM;CACrB,MAAM,UAAA,GAASC,MAAAA,WAAAA,CAAWC,2BAAAA,iBAAiB;CAC3C,MAAM,CAAC,iBAAiB,uBAAA,GAAsBC,MAAAA,SAAAA,CAA4B;CAC1E,CAAA,GAAA,MAAA,UAAA,OAAgB,mBAAmB,kBAAkB,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;CAEvE,MAAM,UAAU,MAAM,QAAQ,SAAS,CAAC,KAAK,MAAM;CAEnD,IAAI,QAAQ,WAAW,GACrB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAiC,UAAA;CAAkB,CAAA;CAG3E,MAAM,gBAAgB,QAAQ,WAAW,mBAAmB;CAC5D,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UACJ,QAAQ,WAAW,uBAAuB,OAAO;CACnD,MAAM,QAAQ,QAAQ,SAAS;CAE/B,MAAM,iBAAiB,SAA4B;EACjD,mBAAmB,IAAI;EACvB,mBAAmB,QAAQ,IAAI;CACjC;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,WAAWC,cAAAA,GACT,2FACA,UAAU,sDACV,SACF;EACA,OAAO,EAAE,qBAAqB,SAAS,YAAY,QAAQ;EAN7D,UAAA,CAQG,mBAAmB,CAAC,SACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAAU,UAAA;GAA8B,CAAA,GACtD,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;IACE,SAAS;IACT,UAAU;GACX,CAAA,EACC,CAAA,CACD;EACH,CAAA,IAAA,MACH,QAAQ,KAAK,SAAS;GACrB,MAAM,WACJ,OAAO,cAAc,aACjB,UAAU,KAAK,KAAK,KAAK,OAAO,IAAI,IACpC;GACN,MAAM,gBAAgB,cAClB,YAAY,KAAK,KAAK,KAAK,OAAO,IAAI,IACtCC,yBAAAA,oBAAoB,KAAK,GAAG;GAChC,MAAM,YACJ,OAAO,kBAAkB,WAAW,gBAAgB,KAAK;GAE3D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,MAAAA,UAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACE,WAAWF,cAAAA,GACT,8DACA,OAAO,KACP,YACF;IALF,UAAA,CAOE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KACE,cAAY;KACZ,WAAWA,cAAAA,GAAG,oBAAoB,OAAO,OAAO,cAAc;KAC9D,OAAO,EAAE,oBAAoB,QAAQ,GAAG;KAH1C,UAAA,CAKE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACG,aAAAA,MAAD;OAAM,MAAM;OAAU,WAAU;MAAoB,CAAA,IAClD,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAoB,CAAA,CACrD;KACJ,CAAA,GAAA,KAAK,WACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MACZ,UAAA,KAAK;KACH,CAAA,IACH,IACF;IACJ,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;KAAI,WAAWH,cAAAA,GAAG,6BAA6B,cAAc;KAC3D,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;QACE,SAAS;QACH;QACN,WAAU;OACX,CAAA;OACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;QACE,WAAWA,cAAAA,GAAG,6BAA6B,OAAO,KAAK;QAEtD,UAAA,cACG,YAAY,KAAK,KAAK,KAAK,OAAO,IAAI,IACtC,iBAAA,GAAA,kBAAA,IAAA,CAACI,sBAAAA,eAAD;SAAqB;SAAM,SAAS;QAAgB,CAAA;OACrD,CAAA;OACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;QACE,SAAS;QACH;QACN,WAAU;OACX,CAAA;MACE;;IACH,CAAA,CACD;GACJ,CAAA,GAAA,KAAK,cAAc,KAAK,YAAY,KAAK,iBACxC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KAAI,WAAU;KAAd,UAAA,CAAyB,WAAU,aAAe;IAClD,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;KAAI,WAAU;KACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACN,2BAAAA,kBAAkB,UAAnB;MACE,OAAO;OACL,OAAO,QAAQ;OACf;OACA,SAAS;MACX;MAEC,UAAA,KAAK,eAAe;KACK,CAAA;IAC1B,CAAA,CACD;GACH,CAAA,IAAA,IACI,EAAA,GA/DK,KAAK,GA+DV;EAEd,CAAC,CACC;;AAER;AAEA,SAAS,sBAAsB,EAC7B,SACA,YAIC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACO,qBAAAA,cAAD;EACE,OAAM;EACN,WAAU;EACV,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACE,MAAMC,uBAAAA;GACN,OAAM;GACN,WAAU;EACX,CAAA;EAGD,WAAA,cACA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAAsD,UAAA;GAEhE,CAAA,GACJ,2BAA2B,KAAK,WAAW;IAC1C,MAAM,SAAS,YAAY,OAAO;IAClC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,WAAW,yBAAyB,MAAM;KAC1C,eAAe;MACb,SAAS,OAAO,KAAK;MACrB,UAAU;KACZ;KATF,UAAA;MAWE,iBAAA,GAAA,kBAAA,IAAA,CAACJ,aAAAA,MAAD;OACE,MAAM,OAAO;OACb,WAAU;MACX,CAAA;MACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAA2B,UAAA,OAAO;MAAY,CAAA;MAC7D,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD;OAAM,MAAMK,gBAAAA;OAAS,WAAU;MAA2B,CAAA,IAE1D,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAAuB,eAAA;MAAa,CAAA;KAEhD;IApBD,GAAA,OAAO,KAoBN;GAEZ,CAAC,CACE;;CAEK,CAAA;AAElB;AAEA,SAAS,yBAAyB,QAAyB;CACzD,OAAOR,cAAAA,GACL,gEACA,sDACA,UAAU,cACZ;AACF;AAEA,SAAS,kBACP,QAC+B;CAC/B,MAAM,aAAa,4BAA4B,MAAM;CACrD,IAAI,CAAC,cAAc,OAAO,WAAW,aAAa,OAAO,KAAA;CAEzD,IAAI;EACF,MAAM,QAAQ,OAAO,aAAa,QAAQ,UAAU;EACpD,OAAO,oBAAoB,KAAK,IAAI,QAAQ,KAAA;CAC9C,QAAQ;EACN;CACF;AACF;AAEA,SAAS,mBACP,QACA,SACM;CACN,MAAM,aAAa,4BAA4B,MAAM;CACrD,IAAI,CAAC,cAAc,OAAO,WAAW,aAAa;CAElD,IAAI;EACF,OAAO,aAAa,QAAQ,YAAY,OAAO;CACjD,QAAQ,CAER;AACF;AAEA,SAAS,4BACP,QACoB;CACpB,MAAM,aAAa,QAAQ,KAAK;CAChC,OAAO,aACH,GAAG,kCAAkC,GAAG,WAAW,YACnD,KAAA;AACN;AAEA,SAAS,oBAAoB,OAA4C;CACvE,OAAO,UAAU,aAAa,UAAU,iBAAiB,UAAU;AACrE;AAEA,SAAS,WAAc,EACrB,SACA,MACA,aAKC;CACD,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAC7C,MAAM,WAAW,QAAQ,QACtB,WAAW,CAAC,OAAO,WAAW,OAAO,QAAQ,KAAK,KAAK,KAAK,OAAO,IAAI,CAC1E;CACA,IAAI,SAAS,WAAW,GAAG,OAAO;CAClC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAWA,cAAAA,GAAG,4BAA4B,SAAS;EACtD,UAAA,SAAS,KAAK,WACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAD;GAAgD;GAAc;EAAO,GAAxC,OAAO,EAAiC,CACtE;CACG,CAAA;AAEV;AAEA,SAAS,uBAA0B,EACjC,QACA,QAIC;CACD,MAAM,QAAQ,OAAO,MAAM,KAAK,KAAK,KAAK,OAAO,IAAI;CACrD,MAAM,WAAW,OAAO,WAAW,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK;CAClE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,OAAO;EACG;EACV,WAAWA,cAAAA,GACT,iFACA,yCACA,wFACF;EACA,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,OAAO,QAAQ,KAAK,KAAK,KAAK,OAAO,IAAI;EAC3C;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,aAAAA,MAAD;GACE,GAAK,OAAO,OAAO,SAAS,WACxB,EAAE,MAAM,OAAO,KAAK,IACpB,EAAE,MAAM,OAAO,KAAK;GACxB,WAAU;EACX,CAAA;CACK,CAAA;AAEZ"}

package/dist/data/Properties.js

@@ -36,19 +36,19 @@ var DENSITY_CLASSES = {
 		row: "px-density-4 py-density-3",
 		label: "text-sm font-medium text-muted-foreground",
 		value: "text-base text-foreground",
-		gridTemplateColumns: "minmax(12rem, 20rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(12rem, 40%), min(20rem, 50%)) minmax(0, 1fr)"
 	},
 	comfortable: {
 		row: "px-density-3 py-density-2",
 		label: "text-xs font-medium text-muted-foreground",
 		value: "text-sm text-foreground",
-		gridTemplateColumns: "minmax(7rem, 12rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(7rem, 40%), min(12rem, 50%)) minmax(0, 1fr)"
 	},
 	compact: {
 		row: "px-density-2 py-density-1.5",
 		label: "font-mono text-[11px] text-muted-foreground",
 		value: "text-xs text-foreground",
-		gridTemplateColumns: "minmax(8rem, 14rem) minmax(0, 1fr)"
+		gridTemplateColumns: "minmax(min(8rem, 40%), min(14rem, 50%)) minmax(0, 1fr)"
 	}
 };
 function Properties({ items, renderLabel, renderValue, labelIcon, prefixActions, suffixActions, className, rowClassName, gridTemplateColumns, labelClassName, valueClassName, density = "comfortable", keyRef, showDensityMenu = true, emptyMessage = "No properties" }) {