@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/gauge/CircularGauge.js

@@ -0,0 +1,77 @@
+import { memo as e, useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/gauge/CircularGauge.tsx
+function i(e, t) {
+	if (!t?.length) return "var(--color-action-primary-bg)";
+	let n = [...t].sort((e, t) => e.value - t.value);
+	for (let t of n) if (e <= t.value) return t.color;
+	return n[n.length - 1].color;
+}
+var a = e(function({ value: e, min: a = 0, max: o = 100, size: s = 120, strokeWidth: c = 12, thresholds: l, unit: u, showValue: d = !0, formatValue: f = (e) => e.toFixed(0) }) {
+	let p = t(() => {
+		let t = (s - c) / 2, n = t * Math.PI * 2, r = -225;
+		45 - r;
+		let i = (Math.max(a, Math.min(o, e)) - a) / (o - a);
+		return {
+			radius: t,
+			circumference: n,
+			arcLength: i * 270 / 360 * n,
+			backgroundArcLength: 270 / 360 * n,
+			startAngle: r,
+			percentage: i
+		};
+	}, [
+		s,
+		c,
+		e,
+		a,
+		o
+	]), m = i(e, l);
+	return /* @__PURE__ */ r("div", {
+		className: "relative inline-flex items-center justify-center",
+		style: {
+			width: s,
+			height: s
+		},
+		children: [/* @__PURE__ */ r("svg", {
+			width: s,
+			height: s,
+			viewBox: `0 0 ${s} ${s}`,
+			className: "transform -rotate-135",
+			children: [/* @__PURE__ */ n("circle", {
+				cx: s / 2,
+				cy: s / 2,
+				r: p.radius,
+				fill: "none",
+				stroke: "var(--color-border-default)",
+				strokeWidth: c,
+				strokeLinecap: "round",
+				strokeDasharray: `${p.backgroundArcLength} ${p.circumference}`
+			}), /* @__PURE__ */ n("circle", {
+				cx: s / 2,
+				cy: s / 2,
+				r: p.radius,
+				fill: "none",
+				stroke: m,
+				strokeWidth: c,
+				strokeLinecap: "round",
+				strokeDasharray: `${p.arcLength} ${p.circumference}`,
+				className: "transition-all duration-500 ease-out"
+			})]
+		}), d && /* @__PURE__ */ r("div", {
+			className: "absolute inset-0 flex flex-col items-center justify-center",
+			children: [/* @__PURE__ */ n("span", {
+				className: "text-2xl font-bold text-text-primary",
+				style: { color: m },
+				children: f(e)
+			}), u && /* @__PURE__ */ n("span", {
+				className: "text-xs text-text-secondary",
+				children: u
+			})]
+		})]
+	});
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=CircularGauge.js.map

package/dist/bigconsole/components/widgets/gauge/CircularGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularGauge.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/CircularGauge.tsx"],"sourcesContent":["/**\n * CircularGauge Component\n *\n * Circular gauge visualization with arc and value display.\n */\n\nimport { type FC, memo, useMemo } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ThresholdConfig {\n  /** Threshold value */\n  value: number;\n  /** Color for values up to this threshold */\n  color: string;\n}\n\nexport interface CircularGaugeProps {\n  /** Current value */\n  value: number;\n  /** Minimum value */\n  min?: number;\n  /** Maximum value */\n  max?: number;\n  /** Size of the gauge */\n  size?: number;\n  /** Stroke width of the arc */\n  strokeWidth?: number;\n  /** Thresholds for color zones */\n  thresholds?: ThresholdConfig[];\n  /** Unit label */\n  unit?: string;\n  /** Whether to show the value */\n  showValue?: boolean;\n  /** Value format function */\n  formatValue?: (value: number) => string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getColorForValue(value: number, thresholds?: ThresholdConfig[]): string {\n  if (!thresholds?.length) {\n    return 'var(--color-action-primary-bg)';\n  }\n\n  // Sort thresholds by value\n  const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n\n  for (const threshold of sorted) {\n    if (value <= threshold.value) {\n      return threshold.color;\n    }\n  }\n\n  // Return last threshold color if above all\n  return sorted[sorted.length - 1].color;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CircularGauge: FC<CircularGaugeProps> = memo(function CircularGauge({\n  value,\n  min = 0,\n  max = 100,\n  size = 120,\n  strokeWidth = 12,\n  thresholds,\n  unit,\n  showValue = true,\n  formatValue = (v: number) => v.toFixed(0),\n}) {\n  // Calculate arc geometry\n  const geometry = useMemo(() => {\n    const radius = (size - strokeWidth) / 2;\n    const circumference = radius * Math.PI * 2;\n    const startAngle = -225; // Start from bottom-left\n    const endAngle = 45; // End at bottom-right\n    const totalAngle = endAngle - startAngle; // 270 degrees\n\n    // Clamp value to range\n    const clampedValue = Math.max(min, Math.min(max, value));\n    const percentage = (clampedValue - min) / (max - min);\n    const angle = percentage * totalAngle;\n\n    // Calculate arc path\n    const arcLength = (angle / 360) * circumference;\n    const backgroundArcLength = (totalAngle / 360) * circumference;\n\n    return {\n      radius,\n      circumference,\n      arcLength,\n      backgroundArcLength,\n      startAngle,\n      percentage,\n    };\n  }, [size, strokeWidth, value, min, max]);\n\n  const color = getColorForValue(value, thresholds);\n\n  return (\n    <div className=\"relative inline-flex items-center justify-center\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className=\"transform -rotate-135\">\n        {/* Background arc */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={geometry.radius}\n          fill=\"none\"\n          stroke=\"var(--color-border-default)\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={`${geometry.backgroundArcLength} ${geometry.circumference}`}\n        />\n\n        {/* Value arc */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={geometry.radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={`${geometry.arcLength} ${geometry.circumference}`}\n          className=\"transition-all duration-500 ease-out\"\n        />\n      </svg>\n\n      {/* Center content */}\n      {showValue && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n          <span className=\"text-2xl font-bold text-text-primary\" style={{ color }}>\n            {formatValue(value)}\n          </span>\n          {unit && <span className=\"text-xs text-text-secondary\">{unit}</span>}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default CircularGauge;\n"],"mappings":";;;AA4CA,SAAS,EAAiB,GAAe,GAAwC;AAC/E,KAAI,CAAC,GAAY,OACf,QAAO;CAIT,IAAM,IAAS,CAAC,GAAG,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;AAEhE,MAAK,IAAM,KAAa,EACtB,KAAI,KAAS,EAAU,MACrB,QAAO,EAAU;AAKrB,QAAO,EAAO,EAAO,SAAS,GAAG;;AAOnC,IAAa,IAAwC,EAAK,SAAuB,EAC/E,UACA,SAAM,GACN,SAAM,KACN,UAAO,KACP,iBAAc,IACd,eACA,SACA,eAAY,IACZ,kBAAe,MAAc,EAAE,QAAQ,EAAE,IACxC;CAED,IAAM,IAAW,QAAc;EAC7B,IAAM,KAAU,IAAO,KAAe,GAChC,IAAgB,IAAS,KAAK,KAAK,GACnC,IAAa;AACF,OACa;EAJ9B,IAQM,KADe,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,GACrB,MAAQ,IAAM;AAOjD,SAAO;GACL;GACA;GACA,WATY,IAAa,MAGA,MAAO;GAOhC,qBAN2B,MAAa,MAAO;GAO/C;GACA;GACD;IACA;EAAC;EAAM;EAAa;EAAO;EAAK;EAAI,CAAC,EAElC,IAAQ,EAAiB,GAAO,EAAW;AAEjD,QACE,kBAAC,OAAD;EAAK,WAAU;EAAmD,OAAO;GAAE,OAAO;GAAM,QAAQ;GAAM;YAAtG,CACE,kBAAC,OAAD;GAAK,OAAO;GAAM,QAAQ;GAAM,SAAS,OAAO,EAAK,GAAG;GAAQ,WAAU;aAA1E,CAEE,kBAAC,UAAD;IACE,IAAI,IAAO;IACX,IAAI,IAAO;IACX,GAAG,EAAS;IACZ,MAAK;IACL,QAAO;IACM;IACb,eAAc;IACd,iBAAiB,GAAG,EAAS,oBAAoB,GAAG,EAAS;IAC7D,CAAA,EAGF,kBAAC,UAAD;IACE,IAAI,IAAO;IACX,IAAI,IAAO;IACX,GAAG,EAAS;IACZ,MAAK;IACL,QAAQ;IACK;IACb,eAAc;IACd,iBAAiB,GAAG,EAAS,UAAU,GAAG,EAAS;IACnD,WAAU;IACV,CAAA,CACE;MAGL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;IAAuC,OAAO,EAAE,UAAO;cACpE,EAAY,EAAM;IACd,CAAA,EACN,KAAQ,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAY,CAAA,CAChE;KAEJ;;EAER"}

package/dist/bigconsole/components/widgets/gauge/GaugeConfig.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { GaugeConfig as ConfigType } from '../../../types';
+
+export interface GaugeConfigProps {
+    /** Current configuration */
+    config: ConfigType;
+    /** Callback when config changes */
+    onChange: (config: ConfigType) => void;
+}
+export declare const GaugeConfig: FC<GaugeConfigProps>;
+export default GaugeConfig;
+//# sourceMappingURL=GaugeConfig.d.ts.map

package/dist/bigconsole/components/widgets/gauge/GaugeConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeConfig.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeConfig.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAMD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuN3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/gauge/GaugeConfig.js

@@ -0,0 +1,180 @@
+import { memo as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/gauge/GaugeConfig.tsx
+var i = e(function({ config: e, onChange: i }) {
+	let a = t((t, n) => {
+		i({
+			...e,
+			[t]: n
+		});
+	}, [e, i]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Gauge Type"
+			}), /* @__PURE__ */ r("select", {
+				value: e.variant || "circular",
+				onChange: (e) => a("variant", e.target.value),
+				className: "\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          ",
+				children: [/* @__PURE__ */ n("option", {
+					value: "circular",
+					children: "Circular"
+				}), /* @__PURE__ */ n("option", {
+					value: "linear",
+					children: "Linear"
+				})]
+			})] }),
+			/* @__PURE__ */ r("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Minimum"
+				}), /* @__PURE__ */ n("input", {
+					type: "number",
+					value: e.min ?? 0,
+					onChange: (e) => a("min", Number(e.target.value)),
+					className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
+				})] }), /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Maximum"
+				}), /* @__PURE__ */ n("input", {
+					type: "number",
+					value: e.max ?? 100,
+					onChange: (e) => a("max", Number(e.target.value)),
+					className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
+				})] })]
+			}),
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Unit Label"
+			}), /* @__PURE__ */ n("input", {
+				type: "text",
+				value: e.unit || "",
+				onChange: (e) => a("unit", e.target.value),
+				placeholder: "e.g., %, ms, users",
+				className: "\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          "
+			})] }),
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Value Format"
+			}), /* @__PURE__ */ r("select", {
+				value: e.format || "number",
+				onChange: (e) => a("format", e.target.value),
+				className: "\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          ",
+				children: [
+					/* @__PURE__ */ n("option", {
+						value: "number",
+						children: "Number"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "percentage",
+						children: "Percentage"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "currency",
+						children: "Currency"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ r("div", { children: [
+				/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-2",
+					children: "Color Thresholds"
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "text-xs text-text-secondary mb-3",
+					children: "Define color zones based on value ranges. Values up to each threshold will use that color."
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ n("div", { className: "w-4 h-4 rounded bg-state-error" }),
+								/* @__PURE__ */ n("span", {
+									className: "text-sm text-text-primary flex-1",
+									children: "Danger (Red)"
+								}),
+								/* @__PURE__ */ n("input", {
+									type: "number",
+									value: e.thresholds?.[0]?.value ?? 33,
+									onChange: (t) => {
+										let n = [...e.thresholds || []];
+										n[0] = {
+											value: Number(t.target.value),
+											color: "error"
+										}, a("thresholds", n);
+									},
+									className: "\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
+								})
+							]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ n("div", { className: "w-4 h-4 rounded bg-state-warning" }),
+								/* @__PURE__ */ n("span", {
+									className: "text-sm text-text-primary flex-1",
+									children: "Warning (Yellow)"
+								}),
+								/* @__PURE__ */ n("input", {
+									type: "number",
+									value: e.thresholds?.[1]?.value ?? 66,
+									onChange: (t) => {
+										let n = [...e.thresholds || []];
+										n[1] = {
+											value: Number(t.target.value),
+											color: "warning"
+										}, a("thresholds", n);
+									},
+									className: "\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
+								})
+							]
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ n("div", { className: "w-4 h-4 rounded bg-state-success" }),
+								/* @__PURE__ */ n("span", {
+									className: "text-sm text-text-primary flex-1",
+									children: "Good (Green)"
+								}),
+								/* @__PURE__ */ n("input", {
+									type: "number",
+									value: e.thresholds?.[2]?.value ?? 100,
+									onChange: (t) => {
+										let n = [...e.thresholds || []];
+										n[2] = {
+											value: Number(t.target.value),
+											color: "success"
+										}, a("thresholds", n);
+									},
+									className: "\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
+								})
+							]
+						})
+					]
+				})
+			] }),
+			e.variant === "linear" && /* @__PURE__ */ r("label", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ n("input", {
+					type: "checkbox",
+					checked: e.showZones === !0,
+					onChange: (e) => a("showZones", e.target.checked),
+					className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+				}), /* @__PURE__ */ n("span", {
+					className: "text-sm text-text-primary",
+					children: "Show color zones in background"
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=GaugeConfig.js.map

package/dist/bigconsole/components/widgets/gauge/GaugeConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeConfig.tsx"],"sourcesContent":["/**\n * GaugeConfig Component\n *\n * Configuration panel for Gauge widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { GaugeConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeConfig: FC<GaugeConfigProps> = memo(function GaugeConfig({ config, onChange }) {\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Variant */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Gauge Type</label>\n        <select\n          value={config.variant || 'circular'}\n          onChange={(e) => handleChange('variant', e.target.value as ConfigType['variant'])}\n          className=\"\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          \"\n        >\n          <option value=\"circular\">Circular</option>\n          <option value=\"linear\">Linear</option>\n        </select>\n      </div>\n\n      {/* Min/Max Range */}\n      <div className=\"grid grid-cols-2 gap-3\">\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">Minimum</label>\n          <input\n            type=\"number\"\n            value={config.min ?? 0}\n            onChange={(e) => handleChange('min', Number(e.target.value))}\n            className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n          />\n        </div>\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">Maximum</label>\n          <input\n            type=\"number\"\n            value={config.max ?? 100}\n            onChange={(e) => handleChange('max', Number(e.target.value))}\n            className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n          />\n        </div>\n      </div>\n\n      {/* Unit */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Unit Label</label>\n        <input\n          type=\"text\"\n          value={config.unit || ''}\n          onChange={(e) => handleChange('unit', e.target.value)}\n          placeholder=\"e.g., %, ms, users\"\n          className=\"\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          \"\n        />\n      </div>\n\n      {/* Format */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Format</label>\n        <select\n          value={config.format || 'number'}\n          onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n          className=\"\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          \"\n        >\n          <option value=\"number\">Number</option>\n          <option value=\"percentage\">Percentage</option>\n          <option value=\"currency\">Currency</option>\n        </select>\n      </div>\n\n      {/* Thresholds Section */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-2\">Color Thresholds</label>\n        <p className=\"text-xs text-text-secondary mb-3\">\n          Define color zones based on value ranges. Values up to each threshold will use that color.\n        </p>\n\n        <div className=\"space-y-2\">\n          {/* Red zone */}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"w-4 h-4 rounded bg-state-error\" />\n            <span className=\"text-sm text-text-primary flex-1\">Danger (Red)</span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[0]?.value ?? 33}\n              onChange={(e) => {\n                const thresholds = [...(config.thresholds || [])];\n                thresholds[0] = {\n                  value: Number(e.target.value),\n                  color: 'error',\n                };\n                handleChange('thresholds', thresholds);\n              }}\n              className=\"\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n            />\n          </div>\n\n          {/* Yellow zone */}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"w-4 h-4 rounded bg-state-warning\" />\n            <span className=\"text-sm text-text-primary flex-1\">Warning (Yellow)</span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[1]?.value ?? 66}\n              onChange={(e) => {\n                const thresholds = [...(config.thresholds || [])];\n                thresholds[1] = {\n                  value: Number(e.target.value),\n                  color: 'warning',\n                };\n                handleChange('thresholds', thresholds);\n              }}\n              className=\"\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n            />\n          </div>\n\n          {/* Green zone */}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"w-4 h-4 rounded bg-state-success\" />\n            <span className=\"text-sm text-text-primary flex-1\">Good (Green)</span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[2]?.value ?? 100}\n              onChange={(e) => {\n                const thresholds = [...(config.thresholds || [])];\n                thresholds[2] = {\n                  value: Number(e.target.value),\n                  color: 'success',\n                };\n                handleChange('thresholds', thresholds);\n              }}\n              className=\"\n                w-20 px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Show zones (for linear gauge) */}\n      {config.variant === 'linear' && (\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showZones === true}\n            onChange={(e) => handleChange('showZones', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Show color zones in background</span>\n        </label>\n      )}\n    </div>\n  );\n});\n\nexport default GaugeConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Widget } from '../../../types';
+
+export interface GaugeWidgetProps {
+    /** Widget configuration */
+    widget: Widget;
+    /** Gauge data */
+    data?: GaugeData;
+    /** Click handler for drilldown */
+    onClick?: () => void;
+    /** Drilldown handler - receives gauge data */
+    onDrilldown?: (selectedData: Record<string, unknown>) => void;
+}
+export interface GaugeData {
+    /** Current value */
+    value: number;
+    /** Optional label */
+    label?: string;
+}
+export declare const GaugeWidget: FC<GaugeWidgetProps>;
+export default GaugeWidget;
+//# sourceMappingURL=GaugeWidget.d.ts.map

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeWidget.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AAS1D,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,SAAS;IACxB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6R3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.js

@@ -0,0 +1,217 @@
+import e from "./CircularGauge.js";
+import t from "./LinearGauge.js";
+import { unwrapRows as n } from "../utils/inferFields.js";
+import { memo as r, useCallback as i, useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/gauge/GaugeWidget.tsx
+var c = [
+	{
+		value: 33,
+		color: "var(--color-state-error)"
+	},
+	{
+		value: 66,
+		color: "var(--color-state-warning)"
+	},
+	{
+		value: 100,
+		color: "var(--color-state-success)"
+	}
+];
+function l(e) {
+	return e?.thresholds?.length ? e.thresholds.map((e) => ({
+		value: e.value,
+		color: e.color === "success" ? "var(--color-state-success)" : e.color === "warning" ? "var(--color-state-warning)" : e.color === "error" ? "var(--color-state-error)" : e.color
+	})) : c;
+}
+function u(e, t) {
+	switch (t?.format || "number") {
+		case "percentage": return `${e.toFixed(0)}%`;
+		case "currency": return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0
+		}).format(e);
+		default: return new Intl.NumberFormat("en-US", { maximumFractionDigits: t?.decimals || 0 }).format(e);
+	}
+}
+var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
+	let p = r.config, m = a(() => l(p), [p]), h = i((e) => u(e, p), [p]), g = !!r.drilldown?.enabled, _ = p?.variant === "linear", v = a(() => {
+		if (!c) return null;
+		if (c && typeof c == "object" && !Array.isArray(c)) {
+			let e = c;
+			if ("value" in e && typeof e.value == "number") return c;
+		}
+		let e = c;
+		if (e && typeof e == "object" && !Array.isArray(e)) {
+			let t = e;
+			if (!Object.entries(t).some(([e, t]) => e === "data" || e === "items" || e === "rows" ? !1 : typeof t == "number")) {
+				let r = n(t);
+				r && r.length > 0 && (e = r);
+			}
+		}
+		let t = p?.valueField || p?.value_field || "value";
+		if (Array.isArray(e) && e.length > 0) {
+			let n = e[0];
+			if (typeof n[t] == "number") return {
+				value: n[t],
+				label: typeof n.label == "string" ? n.label : void 0
+			};
+			for (let e of [
+				"value",
+				"growth",
+				"percentage",
+				"percent",
+				"progress",
+				"score",
+				"rate",
+				"amount",
+				"total"
+			]) if (typeof n[e] == "number") return {
+				value: n[e],
+				label: typeof n.label == "string" ? n.label : typeof n.name == "string" ? n.name : void 0
+			};
+			let r = Object.entries(n).find(([, e]) => typeof e == "number");
+			if (r) return {
+				value: r[1],
+				label: `${r[0].charAt(0).toUpperCase()}${r[0].slice(1)}`
+			};
+			if (e.length > 1) {
+				let t = Object.entries(n).filter(([, e]) => typeof e == "number");
+				if (t.length > 0) {
+					let [n] = t[0], r = e.reduce((e, t) => {
+						let r = t[n];
+						return e + (typeof r == "number" ? r : 0);
+					}, 0) / e.length;
+					return {
+						value: Math.round(r * 100) / 100,
+						label: `Avg ${n.charAt(0).toUpperCase()}${n.slice(1)}`
+					};
+				}
+			}
+		}
+		if (typeof e == "object" && !Array.isArray(e)) {
+			let n = e;
+			if (typeof n[t] == "number") return {
+				value: n[t],
+				label: typeof n.label == "string" ? n.label : void 0
+			};
+			for (let e of [
+				"value",
+				"growth",
+				"percentage",
+				"percent",
+				"progress",
+				"score",
+				"rate",
+				"amount",
+				"total"
+			]) if (typeof n[e] == "number") return {
+				value: n[e],
+				label: typeof n.label == "string" ? n.label : void 0
+			};
+			let r = Object.entries(n).find(([, e]) => typeof e == "number");
+			if (r) return {
+				value: r[1],
+				label: `${r[0].charAt(0).toUpperCase()}${r[0].slice(1)}`
+			};
+		}
+		if (typeof e == "number") return { value: e };
+		if (typeof e == "string") {
+			let t = parseFloat(e);
+			if (!isNaN(t)) return { value: t };
+		}
+		return null;
+	}, [c, p]), y = i(() => {
+		f && v ? f({
+			value: v.value,
+			label: v.label,
+			min: p?.min,
+			max: p?.max
+		}) : d && r.drilldowns?.length && d();
+	}, [
+		d,
+		f,
+		r.drilldowns,
+		v,
+		p?.min,
+		p?.max
+	]), b = !!(g || d && r.drilldowns?.length);
+	return v ? /* @__PURE__ */ s("div", {
+		className: `
+        flex flex-col items-center justify-center h-full p-4
+        ${b ? "cursor-pointer hover:bg-bg-muted/50 transition-colors" : ""}
+      `,
+		onClick: y,
+		role: b ? "button" : void 0,
+		tabIndex: b ? 0 : void 0,
+		onKeyDown: (e) => {
+			b && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y());
+		},
+		children: [
+			v.label && /* @__PURE__ */ o("p", {
+				className: "text-sm text-text-secondary mb-3 text-center",
+				children: v.label
+			}),
+			/* @__PURE__ */ o("div", {
+				className: `${_ ? "w-full max-w-xs" : ""}`,
+				children: _ ? /* @__PURE__ */ o(t, {
+					value: v.value,
+					min: p?.min,
+					max: p?.max,
+					thresholds: m,
+					unit: p?.unit,
+					formatValue: h,
+					showZones: p?.showZones
+				}) : /* @__PURE__ */ o(e, {
+					value: v.value,
+					min: p?.min,
+					max: p?.max,
+					thresholds: m,
+					unit: p?.unit,
+					formatValue: h,
+					size: p?.size === "sm" ? 100 : p?.size === "md" ? 140 : p?.size === "lg" ? 180 : 140
+				})
+			}),
+			b && /* @__PURE__ */ o("div", {
+				className: "mt-3 flex items-center justify-center",
+				children: /* @__PURE__ */ s("span", {
+					className: "text-xs text-text-secondary flex items-center gap-1",
+					children: ["View details", /* @__PURE__ */ o("svg", {
+						className: "w-3 h-3",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ o("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M9 5l7 7-7 7"
+						})
+					})]
+				})
+			})
+		]
+	}) : /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-center h-full text-text-secondary text-sm",
+		children: /* @__PURE__ */ s("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ o("svg", {
+				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ o("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 1.5,
+					d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+				})
+			}), /* @__PURE__ */ o("p", { children: "No gauge data" })]
+		})
+	});
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=GaugeWidget.js.map

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"sourcesContent":["/**\n * GaugeWidget Component\n *\n * Gauge widget with circular and linear variants.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, GaugeConfig } from '../../../types';\nimport { CircularGauge, type ThresholdConfig } from './CircularGauge';\nimport { LinearGauge } from './LinearGauge';\nimport { unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Gauge data */\n  data?: GaugeData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives gauge data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface GaugeData {\n  /** Current value */\n  value: number;\n  /** Optional label */\n  label?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_THRESHOLDS: ThresholdConfig[] = [\n  { value: 33, color: 'var(--color-state-error)' },\n  { value: 66, color: 'var(--color-state-warning)' },\n  { value: 100, color: 'var(--color-state-success)' },\n];\n\nfunction buildThresholds(config?: GaugeConfig): ThresholdConfig[] {\n  if (!config?.thresholds?.length) {\n    return DEFAULT_THRESHOLDS;\n  }\n\n  return config.thresholds.map((t) => ({\n    value: t.value,\n    color:\n      t.color === 'success'\n        ? 'var(--color-state-success)'\n        : t.color === 'warning'\n          ? 'var(--color-state-warning)'\n          : t.color === 'error'\n            ? 'var(--color-state-error)'\n            : t.color,\n  }));\n}\n\nfunction formatGaugeValue(value: number, config?: GaugeConfig): string {\n  const format = config?.format || 'number';\n\n  switch (format) {\n    case 'percentage':\n      return `${value.toFixed(0)}%`;\n    case 'currency':\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        maximumFractionDigits: 0,\n      }).format(value);\n    case 'number':\n    default:\n      return new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: config?.decimals || 0,\n      }).format(value);\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeWidget: FC<GaugeWidgetProps> = memo(function GaugeWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as GaugeConfig | undefined;\n\n  const thresholds = useMemo(() => buildThresholds(config), [config]);\n\n  const formatValue = useCallback((value: number) => formatGaugeValue(value, config), [config]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isLinear = config?.variant === 'linear';\n\n  // Normalize data from different formats (DataSink array, single object, etc.)\n  const normalizedData = useMemo((): GaugeData | null => {\n    if (!rawData) return null;\n\n    // Explicit top-level `value` always wins — even if a sibling envelope\n    // key exists (`{value: 42, data: [...]}` is a common summary+detail\n    // shape) we prefer the summary value rather than coercing to array mode.\n    if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {\n      const asRecord = rawData as unknown as Record<string, unknown>;\n      if ('value' in asRecord && typeof asRecord.value === 'number') {\n        return rawData as GaugeData;\n      }\n    }\n\n    // BOFF-2246: unwrap common envelopes so the existing array handler below\n    // (with its rich common-field heuristics) runs for parsers emitting\n    // `{data: [...]}` / `{items: [...]}` — previously those payloads hit\n    // \"No gauge data\" because no handler matched.\n    //\n    // Caveat: summary+detail payloads like `{ totalSales: 120, data: [...] }`\n    // should keep the top-level numeric (the existing single-object handler\n    // below has a generic \"any numeric field\" last-resort scan that would\n    // otherwise surface it). Skip the unwrap whenever ANY numeric sibling\n    // exists alongside the envelope key — matches the scope of the generic\n    // scan so we don't regress previously-working payloads.\n    let data: unknown = rawData;\n    if (data && typeof data === 'object' && !Array.isArray(data)) {\n      const obj = data as Record<string, unknown>;\n      const hasTopLevelNumericSibling = Object.entries(obj).some(([k, v]) => {\n        if (k === 'data' || k === 'items' || k === 'rows') return false;\n        return typeof v === 'number';\n      });\n\n      if (!hasTopLevelNumericSibling) {\n        // Array-aware unwrap — picks the first envelope key that's actually\n        // an array, so payloads like `{data: {page: 1}, items: [...]}` still\n        // reach the array handler below.\n        const maybe = unwrapRows(obj);\n        if (maybe && maybe.length > 0) data = maybe;\n      }\n    }\n\n    // Get configured value field from widget config\n    const valueField =\n      ((config as Record<string, unknown> | undefined)?.valueField as string) ||\n      ((config as Record<string, unknown> | undefined)?.value_field as string) ||\n      'value';\n\n    // Handle array from DataSink - extract value from first item\n    if (Array.isArray(data) && data.length > 0) {\n      const firstItem = data[0] as Record<string, unknown>;\n\n      // Try configured field first\n      if (typeof firstItem[valueField] === 'number') {\n        return {\n          value: firstItem[valueField] as number,\n          label: typeof firstItem.label === 'string' ? firstItem.label : undefined,\n        };\n      }\n\n      // Try common numeric field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof firstItem[field] === 'number') {\n          return {\n            value: firstItem[field] as number,\n            label:\n              typeof firstItem.label === 'string'\n                ? firstItem.label\n                : typeof firstItem.name === 'string'\n                  ? firstItem.name\n                  : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(firstItem).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n\n      // Try to aggregate (average) across all rows if single item didn't work\n      if (data.length > 1) {\n        const allNumericFields = Object.entries(firstItem).filter(([, v]) => typeof v === 'number');\n        if (allNumericFields.length > 0) {\n          const [fieldName] = allNumericFields[0];\n          const avg =\n            data.reduce((sum, row) => {\n              const val = (row as Record<string, unknown>)[fieldName];\n              return sum + (typeof val === 'number' ? val : 0);\n            }, 0) / data.length;\n\n          return {\n            value: Math.round(avg * 100) / 100,\n            label: `Avg ${fieldName.charAt(0).toUpperCase()}${fieldName.slice(1)}`,\n          };\n        }\n      }\n    }\n\n    // Handle single object without 'value' property\n    if (typeof data === 'object' && !Array.isArray(data)) {\n      const dataObj = data as unknown as Record<string, unknown>;\n\n      // Try configured field\n      if (typeof dataObj[valueField] === 'number') {\n        return {\n          value: dataObj[valueField] as number,\n          label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n        };\n      }\n\n      // Try common field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof dataObj[field] === 'number') {\n          return {\n            value: dataObj[field] as number,\n            label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(dataObj).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n    }\n\n    // Handle direct number\n    if (typeof data === 'number') {\n      return { value: data };\n    }\n\n    // Handle string that can be parsed as number\n    if (typeof data === 'string') {\n      const parsed = parseFloat(data);\n      if (!isNaN(parsed)) {\n        return { value: parsed };\n      }\n    }\n\n    return null;\n  }, [rawData, config]);\n\n  // Handle drilldown click - must be after normalizedData is computed\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && normalizedData) {\n      onDrilldown({\n        value: normalizedData.value,\n        label: normalizedData.label,\n        min: config?.min,\n        max: config?.max,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, normalizedData, config?.min, config?.max]);\n\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!normalizedData) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg\n            className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n            />\n          </svg>\n          <p>No gauge data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`\n        flex flex-col items-center justify-center h-full p-4\n        ${isClickable ? 'cursor-pointer hover:bg-bg-muted/50 transition-colors' : ''}\n      `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Label */}\n      {normalizedData.label && <p className=\"text-sm text-text-secondary mb-3 text-center\">{normalizedData.label}</p>}\n\n      {/* Gauge */}\n      <div className={`${isLinear ? 'w-full max-w-xs' : ''}`}>\n        {isLinear ? (\n          <LinearGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            showZones={config?.showZones}\n          />\n        ) : (\n          <CircularGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            size={config?.size === 'sm' ? 100 : config?.size === 'md' ? 140 : config?.size === 'lg' ? 180 : 140}\n          />\n        )}\n      </div>\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-3 flex items-center justify-center\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default GaugeWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/gauge/LinearGauge.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { ThresholdConfig } from './CircularGauge';
+
+export interface LinearGaugeProps {
+    /** Current value */
+    value: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Height of the gauge bar */
+    height?: number;
+    /** Thresholds for color zones */
+    thresholds?: ThresholdConfig[];
+    /** Unit label */
+    unit?: string;
+    /** Whether to show the value */
+    showValue?: boolean;
+    /** Whether to show min/max labels */
+    showRange?: boolean;
+    /** Value format function */
+    formatValue?: (value: number) => string;
+    /** Whether to show color zones */
+    showZones?: boolean;
+}
+export declare const LinearGauge: FC<LinearGaugeProps>;
+export default LinearGauge;
+//# sourceMappingURL=LinearGauge.d.ts.map

package/dist/bigconsole/components/widgets/gauge/LinearGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGauge.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/gauge/LinearGauge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAMvD,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0BD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4F3C,CAAC;AAEH,eAAe,WAAW,CAAC"}