@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -2,76 +2,80 @@ 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) {
+	let n = t - e;
+	return Number.isFinite(n) && n > 0 ? n : 1;
+}
+function a(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;
+var o = e(function({ value: e, min: o = 0, max: s = 100, size: c = 120, strokeWidth: l = 12, thresholds: u, unit: d, showValue: f = !0, formatValue: p = (e) => e.toFixed(0) }) {
+	let m = t(() => {
+		let t = (c - l) / 2, n = t * Math.PI * 2, r = -225;
 		45 - r;
-		let i = (Math.max(a, Math.min(o, e)) - a) / (o - a);
+		let a = (Math.max(o, Math.min(s, e)) - o) / i(o, s);
 		return {
 			radius: t,
 			circumference: n,
-			arcLength: i * 270 / 360 * n,
+			arcLength: a * 270 / 360 * n,
 			backgroundArcLength: 270 / 360 * n,
 			startAngle: r,
-			percentage: i
+			percentage: a
 		};
 	}, [
-		s,
 		c,
+		l,
 		e,
-		a,
-		o
-	]), m = i(e, l);
+		o,
+		s
+	]), h = a(e, u);
 	return /* @__PURE__ */ r("div", {
 		className: "relative inline-flex items-center justify-center",
 		style: {
-			width: s,
-			height: s
+			width: c,
+			height: c
 		},
 		children: [/* @__PURE__ */ r("svg", {
-			width: s,
-			height: s,
-			viewBox: `0 0 ${s} ${s}`,
+			width: c,
+			height: c,
+			viewBox: `0 0 ${c} ${c}`,
 			className: "transform -rotate-135",
 			children: [/* @__PURE__ */ n("circle", {
-				cx: s / 2,
-				cy: s / 2,
-				r: p.radius,
+				cx: c / 2,
+				cy: c / 2,
+				r: m.radius,
 				fill: "none",
 				stroke: "var(--color-border-default)",
-				strokeWidth: c,
+				strokeWidth: l,
 				strokeLinecap: "round",
-				strokeDasharray: `${p.backgroundArcLength} ${p.circumference}`
+				strokeDasharray: `${m.backgroundArcLength} ${m.circumference}`
 			}), /* @__PURE__ */ n("circle", {
-				cx: s / 2,
-				cy: s / 2,
-				r: p.radius,
+				cx: c / 2,
+				cy: c / 2,
+				r: m.radius,
 				fill: "none",
-				stroke: m,
-				strokeWidth: c,
+				stroke: h,
+				strokeWidth: l,
 				strokeLinecap: "round",
-				strokeDasharray: `${p.arcLength} ${p.circumference}`,
+				strokeDasharray: `${m.arcLength} ${m.circumference}`,
 				className: "transition-all duration-500 ease-out"
 			})]
-		}), d && /* @__PURE__ */ r("div", {
+		}), f && /* @__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", {
+				style: { color: h },
+				children: p(e)
+			}), d && /* @__PURE__ */ n("span", {
 				className: "text-xs text-text-secondary",
-				children: u
+				children: d
 			})]
 		})]
 	});
 });
 //#endregion
-export { a as default };
+export { o as default, i as gaugeSpan };
 
 //# sourceMappingURL=CircularGauge.js.map

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

@@ -1 +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"}
+{"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\n/**\n * Width of the gauge range.\n *\n * A degenerate range (`min === max`, or an inverted one) makes every ratio\n * `NaN`/`Infinity`, which React emits as `stroke-dasharray=\"NaN …\"` or\n * `width: NaN%` — both invalid, so the browser drops the declaration and the\n * gauge renders unpredictably. Falling back to 1 makes the gauge read at its\n * minimum instead. Mirrors the `max - min || 1` guard already used by\n * HeatmapWidget, SparklineChart and MapWidget.\n */\nexport function gaugeSpan(min: number, max: number): number {\n  const span = max - min;\n  return Number.isFinite(span) && span > 0 ? span : 1;\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) / gaugeSpan(min, max);\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":";;;AAsDA,SAAgB,EAAU,GAAa,GAAqB;CAC1D,IAAM,IAAO,IAAM;AACnB,QAAO,OAAO,SAAS,EAAK,IAAI,IAAO,IAAI,IAAO;;AAGpD,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,KAAO,EAAU,GAAK,EAAI;AAO7D,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.js

@@ -2,91 +2,119 @@ import { memo as e, useCallback as t } from "react";
 import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/gauge/GaugeConfig.tsx
-var a = e(function({ config: e, onChange: a }) {
-	let { t: o } = n(), s = t((t, n) => {
-		a({
+var a = [
+	{
+		value: 33,
+		color: "error"
+	},
+	{
+		value: 66,
+		color: "warning"
+	},
+	{
+		value: 100,
+		color: "success"
+	}
+], o = e(function({ config: e, onChange: o }) {
+	let { t: s } = n(), c = t((t, n) => {
+		o({
 			...e,
 			[t]: n
 		});
-	}, [e, a]);
+	}, [e, o]), l = t((t, n) => {
+		let r = [];
+		for (let n = 0; n <= t; n++) r[n] = e.thresholds?.[n] ?? a[n] ?? {
+			value: 100,
+			color: "success"
+		};
+		r[t] = {
+			...r[t],
+			value: Number(n)
+		};
+		for (let n = t + 1; n < (e.thresholds?.length ?? 0); n++) r[n] = e.thresholds?.[n] ?? {
+			value: 100,
+			color: "success"
+		};
+		c("thresholds", r);
+	}, [e.thresholds, c]);
 	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
+		className: "min-w-0 space-y-form-gap",
 		children: [
 			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: o("bigconsole.widget.config.gauge.gaugeType", "Gauge Type")
+				children: s("bigconsole.widget.config.gauge.gaugeType", "Gauge Type")
 			}), /* @__PURE__ */ i("select", {
 				value: e.variant || "circular",
-				onChange: (e) => s("variant", e.target.value),
+				onChange: (e) => c("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__ */ r("option", {
 					value: "circular",
-					children: o("bigconsole.widget.config.gauge.variant.circular", "Circular")
+					children: s("bigconsole.widget.config.gauge.variant.circular", "Circular")
 				}), /* @__PURE__ */ r("option", {
 					value: "linear",
-					children: o("bigconsole.widget.config.gauge.variant.linear", "Linear")
+					children: s("bigconsole.widget.config.gauge.variant.linear", "Linear")
 				})]
 			})] }),
 			/* @__PURE__ */ i("div", {
-				className: "grid grid-cols-2 gap-3",
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
 				children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: o("bigconsole.widget.config.gauge.minimum", "Minimum")
+					children: s("bigconsole.widget.config.gauge.minimum", "Minimum")
 				}), /* @__PURE__ */ r("input", {
 					type: "number",
 					value: e.min ?? 0,
-					onChange: (e) => s("min", Number(e.target.value)),
+					onChange: (e) => c("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__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: o("bigconsole.widget.config.gauge.maximum", "Maximum")
+					children: s("bigconsole.widget.config.gauge.maximum", "Maximum")
 				}), /* @__PURE__ */ r("input", {
 					type: "number",
 					value: e.max ?? 100,
-					onChange: (e) => s("max", Number(e.target.value)),
+					onChange: (e) => c("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__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: o("bigconsole.widget.config.gauge.unitLabel", "Unit Label")
+				children: s("bigconsole.widget.config.gauge.unitLabel", "Unit Label")
 			}), /* @__PURE__ */ r("input", {
 				type: "text",
 				value: e.unit || "",
-				onChange: (e) => s("unit", e.target.value),
-				placeholder: o("bigconsole.widget.config.gauge.unitPlaceholder", "e.g., %, ms, users"),
+				onChange: (e) => c("unit", e.target.value),
+				placeholder: s("bigconsole.widget.config.gauge.unitPlaceholder", "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__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: o("bigconsole.widget.config.gauge.valueFormat", "Value Format")
+				children: s("bigconsole.widget.config.gauge.valueFormat", "Value Format")
 			}), /* @__PURE__ */ i("select", {
 				value: e.format || "number",
-				onChange: (e) => s("format", e.target.value),
+				onChange: (e) => c("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__ */ r("option", {
 						value: "number",
-						children: o("bigconsole.widget.config.gauge.format.number", "Number")
+						children: s("bigconsole.widget.config.gauge.format.number", "Number")
 					}),
 					/* @__PURE__ */ r("option", {
 						value: "percentage",
-						children: o("bigconsole.widget.config.gauge.format.percentage", "Percentage")
+						children: s("bigconsole.widget.config.gauge.format.percentage", "Percentage")
 					}),
 					/* @__PURE__ */ r("option", {
 						value: "currency",
-						children: o("bigconsole.widget.config.gauge.format.currency", "Currency")
+						children: s("bigconsole.widget.config.gauge.format.currency", "Currency")
 					})
 				]
 			})] }),
 			/* @__PURE__ */ i("div", { children: [
 				/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-2",
-					children: o("bigconsole.widget.config.gauge.colorThresholds", "Color Thresholds")
+					children: s("bigconsole.widget.config.gauge.colorThresholds", "Color Thresholds")
 				}),
 				/* @__PURE__ */ r("p", {
 					className: "text-xs text-text-secondary mb-3",
-					children: o("bigconsole.widget.config.gauge.colorThresholdsHelp", "Define color zones based on value ranges. Values up to each threshold will use that color.")
+					children: s("bigconsole.widget.config.gauge.colorThresholdsHelp", "Define color zones based on value ranges. Values up to each threshold will use that color.")
 				}),
 				/* @__PURE__ */ i("div", {
 					className: "space-y-2",
@@ -97,18 +125,12 @@ var a = e(function({ config: e, onChange: a }) {
 								/* @__PURE__ */ r("div", { className: "w-4 h-4 rounded bg-status-error-bg" }),
 								/* @__PURE__ */ r("span", {
 									className: "text-sm text-text-primary flex-1",
-									children: o("bigconsole.widget.config.gauge.threshold.danger", "Danger (Red)")
+									children: s("bigconsole.widget.config.gauge.threshold.danger", "Danger (Red)")
 								}),
 								/* @__PURE__ */ r("input", {
 									type: "number",
 									value: e.thresholds?.[0]?.value ?? 33,
-									onChange: (t) => {
-										let n = [...e.thresholds || []];
-										n[0] = {
-											value: Number(t.target.value),
-											color: "error"
-										}, s("thresholds", n);
-									},
+									onChange: (e) => l(0, e.target.value),
 									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              "
 								})
 							]
@@ -119,18 +141,12 @@ var a = e(function({ config: e, onChange: a }) {
 								/* @__PURE__ */ r("div", { className: "w-4 h-4 rounded bg-status-warning-bg" }),
 								/* @__PURE__ */ r("span", {
 									className: "text-sm text-text-primary flex-1",
-									children: o("bigconsole.widget.config.gauge.threshold.warning", "Warning (Yellow)")
+									children: s("bigconsole.widget.config.gauge.threshold.warning", "Warning (Yellow)")
 								}),
 								/* @__PURE__ */ r("input", {
 									type: "number",
 									value: e.thresholds?.[1]?.value ?? 66,
-									onChange: (t) => {
-										let n = [...e.thresholds || []];
-										n[1] = {
-											value: Number(t.target.value),
-											color: "warning"
-										}, s("thresholds", n);
-									},
+									onChange: (e) => l(1, e.target.value),
 									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              "
 								})
 							]
@@ -141,18 +157,12 @@ var a = e(function({ config: e, onChange: a }) {
 								/* @__PURE__ */ r("div", { className: "w-4 h-4 rounded bg-status-success-bg" }),
 								/* @__PURE__ */ r("span", {
 									className: "text-sm text-text-primary flex-1",
-									children: o("bigconsole.widget.config.gauge.threshold.good", "Good (Green)")
+									children: s("bigconsole.widget.config.gauge.threshold.good", "Good (Green)")
 								}),
 								/* @__PURE__ */ r("input", {
 									type: "number",
 									value: e.thresholds?.[2]?.value ?? 100,
-									onChange: (t) => {
-										let n = [...e.thresholds || []];
-										n[2] = {
-											value: Number(t.target.value),
-											color: "success"
-										}, s("thresholds", n);
-									},
+									onChange: (e) => l(2, e.target.value),
 									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              "
 								})
 							]
@@ -160,22 +170,37 @@ var a = e(function({ config: e, onChange: a }) {
 					]
 				})
 			] }),
-			e.variant === "linear" && /* @__PURE__ */ i("label", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ r("input", {
-					type: "checkbox",
-					checked: e.showZones === !0,
-					onChange: (e) => s("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__ */ r("span", {
-					className: "text-sm text-text-primary",
-					children: o("bigconsole.widget.config.gauge.showZones", "Show color zones in background")
-				})]
+			/* @__PURE__ */ i("div", {
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
+				children: [
+					/* @__PURE__ */ r("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
+					e.variant === "linear" && /* @__PURE__ */ i("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ r("input", {
+							type: "checkbox",
+							checked: e.showZones === !0,
+							onChange: (e) => c("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__ */ r("span", {
+							className: "text-sm text-text-primary",
+							children: s("bigconsole.widget.config.gauge.showZones", "Show color zones in background")
+						})]
+					}),
+					e.variant !== "linear" && /* @__PURE__ */ r("p", {
+						className: "text-xs text-text-secondary",
+						children: s("bigconsole.widget.config.gauge.noCircularOptions", "No display options for the circular gauge.")
+					})
+				]
 			})
 		]
 	});
 });
 //#endregion
-export { a as default };
+export { o as default };
 
 //# sourceMappingURL=GaugeConfig.js.map

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

@@ -1 +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 { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\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 { t } = useI18n();\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\">\n          {t('bigconsole.widget.config.gauge.gaugeType', 'Gauge Type')}\n        </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\">{t('bigconsole.widget.config.gauge.variant.circular', 'Circular')}</option>\n          <option value=\"linear\">{t('bigconsole.widget.config.gauge.variant.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\">\n            {t('bigconsole.widget.config.gauge.minimum', 'Minimum')}\n          </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\">\n            {t('bigconsole.widget.config.gauge.maximum', 'Maximum')}\n          </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\">\n          {t('bigconsole.widget.config.gauge.unitLabel', 'Unit Label')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.unit || ''}\n          onChange={(e) => handleChange('unit', e.target.value)}\n          placeholder={t('bigconsole.widget.config.gauge.unitPlaceholder', '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\">\n          {t('bigconsole.widget.config.gauge.valueFormat', 'Value Format')}\n        </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\">{t('bigconsole.widget.config.gauge.format.number', 'Number')}</option>\n          <option value=\"percentage\">{t('bigconsole.widget.config.gauge.format.percentage', 'Percentage')}</option>\n          <option value=\"currency\">{t('bigconsole.widget.config.gauge.format.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\">\n          {t('bigconsole.widget.config.gauge.colorThresholds', 'Color Thresholds')}\n        </label>\n        <p className=\"text-xs text-text-secondary mb-3\">\n          {t(\n            'bigconsole.widget.config.gauge.colorThresholdsHelp',\n            'Define color zones based on value ranges. Values up to each threshold will use that color.'\n          )}\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-status-error-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.danger', 'Danger (Red)')}\n            </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-status-warning-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.warning', 'Warning (Yellow)')}\n            </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-status-success-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.good', 'Good (Green)')}\n            </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\">\n            {t('bigconsole.widget.config.gauge.showZones', 'Show color zones in background')}\n          </span>\n        </label>\n      )}\n    </div>\n  );\n});\n\nexport default GaugeConfig;\n"],"mappings":"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"}
+{"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 { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { GaugeConfig as ConfigType, GaugeThreshold } 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/** Semantic fallbacks for bands a config has not defined yet. */\nconst DEFAULT_THRESHOLD_BANDS: readonly GaugeThreshold[] = [\n  { value: 33, color: 'error' },\n  { value: 66, color: 'warning' },\n  { value: 100, color: 'success' },\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeConfig: FC<GaugeConfigProps> = memo(function GaugeConfig({ config, onChange }) {\n  const { t } = useI18n();\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  /**\n   * Update one threshold band's value without disturbing the rest of the entry.\n   *\n   * Writing a whole new `{value, color}` by index used to discard whatever\n   * colour the band already carried — including the hex the backend widget\n   * catalog seeds — so editing one band left a mixed hex/semantic array and\n   * silently repainted that band. It also dropped the optional `label`.\n   *\n   * Writing by bare index into a shorter array would leave holes (`[ , , {…}]`),\n   * which the widget then maps over as `undefined`; seed any missing lower\n   * bands with their semantic default instead.\n   */\n  const handleThresholdValueChange = useCallback(\n    (index: number, rawValue: string) => {\n      const next: GaugeThreshold[] = [];\n      for (let i = 0; i <= index; i++) {\n        next[i] = config.thresholds?.[i] ?? DEFAULT_THRESHOLD_BANDS[i] ?? { value: 100, color: 'success' };\n      }\n      // Preserve everything except the edited value (colour, label, …).\n      next[index] = { ...next[index], value: Number(rawValue) };\n      // Keep any bands beyond the edited one untouched.\n      for (let i = index + 1; i < (config.thresholds?.length ?? 0); i++) {\n        next[i] = config.thresholds?.[i] ?? { value: 100, color: 'success' };\n      }\n      handleChange('thresholds', next);\n    },\n    [config.thresholds, handleChange]\n  );\n\n  return (\n    <div className=\"min-w-0 space-y-form-gap\">\n      {/* Variant */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.gauge.gaugeType', 'Gauge Type')}\n        </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\">{t('bigconsole.widget.config.gauge.variant.circular', 'Circular')}</option>\n          <option value=\"linear\">{t('bigconsole.widget.config.gauge.variant.linear', 'Linear')}</option>\n        </select>\n      </div>\n\n      {/* Min/Max Range */}\n      <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">\n            {t('bigconsole.widget.config.gauge.minimum', 'Minimum')}\n          </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\">\n            {t('bigconsole.widget.config.gauge.maximum', 'Maximum')}\n          </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\">\n          {t('bigconsole.widget.config.gauge.unitLabel', 'Unit Label')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.unit || ''}\n          onChange={(e) => handleChange('unit', e.target.value)}\n          placeholder={t('bigconsole.widget.config.gauge.unitPlaceholder', '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\">\n          {t('bigconsole.widget.config.gauge.valueFormat', 'Value Format')}\n        </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\">{t('bigconsole.widget.config.gauge.format.number', 'Number')}</option>\n          <option value=\"percentage\">{t('bigconsole.widget.config.gauge.format.percentage', 'Percentage')}</option>\n          <option value=\"currency\">{t('bigconsole.widget.config.gauge.format.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\">\n          {t('bigconsole.widget.config.gauge.colorThresholds', 'Color Thresholds')}\n        </label>\n        <p className=\"text-xs text-text-secondary mb-3\">\n          {t(\n            'bigconsole.widget.config.gauge.colorThresholdsHelp',\n            'Define color zones based on value ranges. Values up to each threshold will use that color.'\n          )}\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-status-error-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.danger', 'Danger (Red)')}\n            </span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[0]?.value ?? 33}\n              onChange={(e) => handleThresholdValueChange(0, e.target.value)}\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-status-warning-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.warning', 'Warning (Yellow)')}\n            </span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[1]?.value ?? 66}\n              onChange={(e) => handleThresholdValueChange(1, e.target.value)}\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-status-success-bg\" />\n            <span className=\"text-sm text-text-primary flex-1\">\n              {t('bigconsole.widget.config.gauge.threshold.good', 'Good (Green)')}\n            </span>\n            <input\n              type=\"number\"\n              value={config.thresholds?.[2]?.value ?? 100}\n              onChange={(e) => handleThresholdValueChange(2, e.target.value)}\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      <div\n        role=\"group\"\n        aria-label=\"Display options\"\n        className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n      >\n        {/* Toggles are a different KIND of control from the field stack above, so they\n          get their own labelled group instead of being visually identical to it\n          (BOFF-5636). */}\n        <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\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\">\n              {t('bigconsole.widget.config.gauge.showZones', 'Show color zones in background')}\n            </span>\n          </label>\n        )}\n        {config.variant !== 'linear' && (\n          <p className=\"text-xs text-text-secondary\">\n            {t('bigconsole.widget.config.gauge.noCircularOptions', 'No display options for the circular gauge.')}\n          </p>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default GaugeConfig;\n"],"mappings":"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"}