@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/widgets/progress/ProgressWidget.js

@@ -3,155 +3,154 @@ import i from "./ProgressBar.js";
 import { memo as a, useCallback as o, useMemo as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/progress/ProgressWidget.tsx
-var u = a(function({ widget: a, data: u, onClick: d, onDrilldown: f }) {
-	let p = a.config, m = s(() => {
-		if (!u) return;
-		if (typeof u == "object" && !Array.isArray(u) && "value" in u) {
-			let e = u.value;
-			if (typeof e == "number") return u;
-			if (typeof e == "string") {
-				let t = Number(e);
-				if (Number.isFinite(t)) return {
-					...u,
-					value: t
+function u(e) {
+	if (typeof e == "number" && Number.isFinite(e)) return e;
+	if (typeof e == "string") {
+		let t = e.trim();
+		if (t === "") return null;
+		let n = Number(t);
+		if (Number.isFinite(n)) return n;
+	}
+	return null;
+}
+function d(e, t) {
+	for (let n of [e, t]) if (typeof n == "number" && Number.isFinite(n) && n > 0) return n;
+	return 100;
+}
+function f(e, t) {
+	switch (t) {
+		case "currency": return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0
+		}).format(e);
+		case "compact": return new Intl.NumberFormat("en-US", {
+			notation: "compact",
+			maximumFractionDigits: 1
+		}).format(e);
+		default: return new Intl.NumberFormat("en-US").format(e);
+	}
+}
+function p(e) {
+	let t = u(e.target);
+	return {
+		...t === null ? {} : { target: t },
+		...typeof e.description == "string" ? { description: e.description } : {}
+	};
+}
+var m = a(function({ widget: a, data: m, onClick: h, onDrilldown: g }) {
+	let _ = a.config, v = s(() => {
+		if (!m) return;
+		if (typeof m == "object" && !Array.isArray(m) && "value" in m) {
+			let e = m, t = u(e.value);
+			if (t !== null) {
+				let n = u(e.max), r = u(e.target);
+				return {
+					...m,
+					value: t,
+					max: n ?? void 0,
+					target: r ?? void 0
 				};
 			}
 		}
-		let i = e(u);
+		let i = e(m);
 		if (!i) return;
-		let a = p?.valueField, o = (e, t) => t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e), s = (e) => {
-			if (typeof e == "number" && Number.isFinite(e)) return e;
-			if (typeof e == "string") {
-				let t = Number(e);
-				if (Number.isFinite(t)) return t;
-			}
-			return null;
-		}, c = typeof i.label == "string" ? i.label : typeof i.name == "string" ? i.name : void 0;
+		let a = _?.valueField, o = (e, t) => t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e), s = typeof i.label == "string" ? i.label : typeof i.name == "string" ? i.name : void 0;
 		if (a) {
-			let e = r(u) ?? [i];
+			let e = r(m) ?? [i];
 			for (let n of e) if (n && typeof n == "object") {
-				let e = n, r = s(o(e, a));
+				let e = n, r = u(o(e, a));
 				if (r !== null) {
-					let n = typeof e.label == "string" ? e.label : typeof e.name == "string" ? e.name : c;
+					let n = typeof e.label == "string" ? e.label : typeof e.name == "string" ? e.name : s;
 					return {
 						value: r,
-						max: p?.max ?? t(u, a) ?? void 0,
-						label: n
+						max: _?.max ?? u(e.max) ?? t(m, a) ?? void 0,
+						label: n,
+						...p(e)
 					};
 				}
 			}
 			return;
 		}
-		let l = n(i);
-		if (!l) return;
-		let d = s(i[l]);
-		if (d !== null) return {
-			value: d,
-			max: p?.max ?? t(u, l) ?? void 0,
-			label: c
+		let c = n(i);
+		if (!c) return;
+		let l = u(i[c]);
+		if (l !== null) return {
+			value: l,
+			max: _?.max ?? u(i.max) ?? t(m, c) ?? void 0,
+			label: s,
+			...p(i)
 		};
-	}, [u, p]), h = s(() => {
-		if (!m) return 0;
-		let e = m.max || p?.max || 100;
-		return m.value / e * 100;
-	}, [m, p?.max]), g = s(() => {
-		if (!m?.target) return;
-		let e = m.max || p?.max || 100;
-		return m.target / e * 100;
-	}, [m, p?.max]), _ = s(() => p?.milestones?.length ? p.milestones.map((e) => ({
+	}, [m, _]), y = s(() => v ? v.value / d(v.max, _?.max) * 100 : 0, [v, _?.max]), b = s(() => {
+		if (v?.target !== void 0) return v.target / d(v.max, _?.max) * 100;
+	}, [v, _?.max]), x = s(() => _?.milestones?.length ? _.milestones.map((e) => ({
 		position: e.position ?? e.value ?? 0,
 		label: e.label,
-		reached: h >= (e.position ?? e.value ?? 0)
-	})) : [], [p?.milestones, h]), v = s(() => p?.colorMode === "dynamic" ? "dynamic" : p?.colorMode === "success" ? "success" : p?.colorMode === "warning" ? "warning" : p?.colorMode === "error" ? "error" : "default", [p?.colorMode]), y = s(() => {
-		if (!m) return "0";
-		switch (p?.format || "number") {
-			case "currency": return new Intl.NumberFormat("en-US", {
-				style: "currency",
-				currency: "USD",
-				maximumFractionDigits: 0
-			}).format(m.value);
-			case "compact": return new Intl.NumberFormat("en-US", {
-				notation: "compact",
-				maximumFractionDigits: 1
-			}).format(m.value);
-			default: return new Intl.NumberFormat("en-US").format(m.value);
-		}
-	}, [m, p?.format]), b = s(() => {
-		let e = m?.max || p?.max || 100;
-		switch (p?.format || "number") {
-			case "currency": return new Intl.NumberFormat("en-US", {
-				style: "currency",
-				currency: "USD",
-				maximumFractionDigits: 0
-			}).format(e);
-			case "compact": return new Intl.NumberFormat("en-US", {
-				notation: "compact",
-				maximumFractionDigits: 1
-			}).format(e);
-			default: return new Intl.NumberFormat("en-US").format(e);
-		}
+		reached: y >= (e.position ?? e.value ?? 0)
+	})) : [], [_?.milestones, y]), S = s(() => _?.colorMode === "dynamic" ? "dynamic" : _?.colorMode === "success" ? "success" : _?.colorMode === "warning" ? "warning" : _?.colorMode === "error" ? "error" : "default", [_?.colorMode]), C = s(() => v ? f(v.value, _?.format || "number") : "0", [v, _?.format]), w = s(() => f(d(v?.max, _?.max), _?.format || "number"), [
+		v?.max,
+		_?.max,
+		_?.format
+	]), T = s(() => {
+		if (v?.target !== void 0) return f(v.target, _?.format || "number");
+	}, [v?.target, _?.format]), E = o(() => {
+		g && v ? g({
+			value: v.value,
+			max: v.max,
+			target: v.target,
+			label: v.label,
+			percentage: y
+		}) : h && a.drilldowns?.length && h();
 	}, [
-		m?.max,
-		p?.max,
-		p?.format
-	]), x = o(() => {
-		f && m ? f({
-			value: m.value,
-			max: m.max,
-			target: m.target,
-			label: m.label,
-			percentage: h
-		}) : d && a.drilldowns?.length && d();
-	}, [
-		d,
-		f,
+		h,
+		g,
 		a.drilldowns,
-		m,
-		h
-	]), S = !!(a.drilldown?.enabled || d && a.drilldowns?.length);
-	return m ? /* @__PURE__ */ l("div", {
+		v,
+		y
+	]), D = !!(a.drilldown?.enabled || h && a.drilldowns?.length);
+	return v ? /* @__PURE__ */ l("div", {
 		className: `
           flex flex-col h-full p-4
-          ${S ? "cursor-pointer hover:bg-bg-sunken/50 transition-colors" : ""}
+          ${D ? "cursor-pointer hover:bg-bg-sunken/50 transition-colors" : ""}
         `,
-		onClick: x,
-		role: S ? "button" : void 0,
-		tabIndex: S ? 0 : void 0,
+		onClick: E,
+		role: D ? "button" : void 0,
+		tabIndex: D ? 0 : void 0,
 		onKeyDown: (e) => {
-			S && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), x());
+			D && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), E());
 		},
 		children: [
 			/* @__PURE__ */ l("div", {
 				className: "flex items-start justify-between mb-4",
 				children: [/* @__PURE__ */ l("div", {
 					className: "flex-1",
-					children: [m.label && /* @__PURE__ */ c("h4", {
+					children: [v.label && /* @__PURE__ */ c("h4", {
 						className: "text-sm font-medium text-text-primary",
-						children: m.label
-					}), m.description && /* @__PURE__ */ c("p", {
+						children: v.label
+					}), v.description && /* @__PURE__ */ c("p", {
 						className: "text-xs text-text-secondary mt-0.5",
-						children: m.description
+						children: v.description
 					})]
 				}), /* @__PURE__ */ l("div", {
 					className: "text-right",
 					children: [/* @__PURE__ */ c("span", {
 						className: "text-2xl font-bold text-text-primary",
-						children: y
-					}), p?.showMax !== !1 && /* @__PURE__ */ l("span", {
+						children: C
+					}), _?.showMax !== !1 && /* @__PURE__ */ l("span", {
 						className: "text-sm text-text-secondary",
-						children: [" / ", b]
+						children: [" / ", w]
 					})]
 				})]
 			}),
 			/* @__PURE__ */ c(i, {
-				value: h,
-				target: g,
-				milestones: _,
-				height: p?.barHeight || 12,
-				color: v,
-				showPercentage: p?.showPercentage !== !1
+				value: y,
+				target: b,
+				milestones: x,
+				height: _?.barHeight || 12,
+				color: S,
+				showPercentage: _?.showPercentage !== !1
 			}),
-			m.target !== void 0 && /* @__PURE__ */ l("div", {
+			v.target !== void 0 && /* @__PURE__ */ l("div", {
 				className: "mt-3 flex items-center gap-2 text-xs",
 				children: [/* @__PURE__ */ c("svg", {
 					className: "w-4 h-4 text-text-secondary",
@@ -161,20 +160,19 @@ var u = a(function({ widget: a, data: u, onClick: d, onDrilldown: f }) {
 				}), /* @__PURE__ */ l("span", {
 					className: "text-text-secondary",
 					children: [
-						"Target:",
-						" ",
+						"Target: ",
 						/* @__PURE__ */ c("span", {
 							className: "font-medium text-text-primary",
-							children: new Intl.NumberFormat("en-US").format(m.target)
+							children: T
 						}),
-						h >= (g || 0) && /* @__PURE__ */ c("span", {
+						y >= (b || 0) && /* @__PURE__ */ c("span", {
 							className: "text-status-success-text ml-1",
 							children: "Reached!"
 						})
 					]
 				})]
 			}),
-			S && /* @__PURE__ */ c("div", {
+			D && /* @__PURE__ */ c("div", {
 				className: "mt-auto pt-3 flex items-center justify-end",
 				children: /* @__PURE__ */ l("span", {
 					className: "text-xs text-text-secondary flex items-center gap-1",
@@ -193,9 +191,26 @@ var u = a(function({ widget: a, data: u, onClick: d, onDrilldown: f }) {
 				})
 			})
 		]
-	}) : null;
+	}) : /* @__PURE__ */ c("div", {
+		className: "flex items-center justify-center h-full text-text-secondary text-sm",
+		children: /* @__PURE__ */ l("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ c("svg", {
+				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ c("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__ */ c("p", { children: "No progress data" })]
+		})
+	});
 });
 //#endregion
-export { u as default };
+export { m as default };
 
 //# sourceMappingURL=ProgressWidget.js.map

package/dist/bigconsole/components/widgets/progress/ProgressWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressWidget.tsx"],"sourcesContent":["/**\n * ProgressWidget Component\n *\n * Progress bar widget with target, milestones, and color stages.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, ProgressConfig } from '../../../types';\nimport { ProgressBar, type Milestone } from './ProgressBar';\nimport { firstObjectRow, inferValueField, inferMaxValue, unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Progress data */\n  data?: ProgressData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives progress data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface ProgressData {\n  /** Current value */\n  value: number;\n  /** Maximum value (for calculating percentage) */\n  max?: number;\n  /** Target value */\n  target?: number;\n  /** Label for the progress */\n  label?: string;\n  /** Description text */\n  description?: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressWidget: FC<ProgressWidgetProps> = memo(function ProgressWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as ProgressConfig | undefined;\n\n  // BOFF-2246 smart default: if rawData is an array (or envelope) rather than\n  // the expected `ProgressData` single object, pull the configured valueField\n  // (flat OR dotted, e.g. `metrics.revenue`) or fall back to the first\n  // numeric field. Auto-compute a sensible max from the dataset.\n  const normalizedData = useMemo((): ProgressData | undefined => {\n    if (!rawData) return undefined;\n    // Already the expected shape — pass through. Accept both number and\n    // numeric-string `value`, since parsers sometimes serialize metrics as\n    // strings and the pre-BOFF-2246 code path rendered those via implicit\n    // JS coercion in percentage math.\n    if (typeof rawData === 'object' && !Array.isArray(rawData) && 'value' in rawData) {\n      const rawValue = (rawData as { value: unknown }).value;\n      if (typeof rawValue === 'number') {\n        return rawData as ProgressData;\n      }\n      if (typeof rawValue === 'string') {\n        const parsed = Number(rawValue);\n        if (Number.isFinite(parsed)) {\n          // Coerce to number so downstream math is deterministic.\n          return { ...(rawData as ProgressData), value: parsed };\n        }\n      }\n    }\n    const row = firstObjectRow(rawData);\n    if (!row) return undefined;\n    const configuredField = (config as Record<string, unknown> | undefined)?.valueField as string | undefined;\n\n    // Supports dotted paths like `metrics.revenue` so nested valueFields\n    // configured in widget config resolve on array/envelope payloads the\n    // same way they do on single-object payloads.\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown =>\n      path.split('.').reduce<unknown>((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj);\n\n    // Coerce `number` or finite numeric string to a number. Mirrors the\n    // pass-through branch above so the row path doesn't silently fall back\n    // to inference when a parser serializes metrics as strings.\n    const toNumber = (v: unknown): number | null => {\n      if (typeof v === 'number' && Number.isFinite(v)) return v;\n      if (typeof v === 'string') {\n        const n = Number(v);\n        if (Number.isFinite(n)) return n;\n      }\n      return null;\n    };\n\n    const labelFromRow =\n      typeof row.label === 'string' ? row.label : typeof row.name === 'string' ? row.name : undefined;\n\n    // Configured field is authoritative — scan every row for it so sparse\n    // envelopes like `{data:[{id:1},{revenue:120}]}` with\n    // `valueField:\"revenue\"` still resolve. If no row carries it, return\n    // undefined rather than substituting an unrelated numeric column from\n    // row[0] via inference (that would silently misrepresent user config).\n    if (configuredField) {\n      const rows = unwrapRows(rawData) ?? [row];\n      for (const r of rows) {\n        if (r && typeof r === 'object') {\n          const resolvedRow = r as Record<string, unknown>;\n          const resolved = toNumber(getNestedValue(resolvedRow, configuredField));\n          if (resolved !== null) {\n            const rowLabel =\n              typeof resolvedRow.label === 'string'\n                ? resolvedRow.label\n                : typeof resolvedRow.name === 'string'\n                  ? resolvedRow.name\n                  : labelFromRow;\n            return {\n              value: resolved,\n              max: config?.max ?? inferMaxValue(rawData, configuredField) ?? undefined,\n              label: rowLabel,\n            };\n          }\n        }\n      }\n      return undefined;\n    }\n\n    // Fall back to inference (only when no configured field). `inferValueField`\n    // already filters to numeric fields, but we still coerce here for symmetry\n    // with the configured branch above.\n    const inferred = inferValueField(row);\n    if (!inferred) return undefined;\n    const inferredValue = toNumber(row[inferred]);\n    if (inferredValue === null) return undefined;\n    return {\n      value: inferredValue,\n      max: config?.max ?? inferMaxValue(rawData, inferred) ?? undefined,\n      label: labelFromRow,\n    };\n  }, [rawData, config]);\n\n  // Downstream render uses the normalized shape. Name kept as `data` so the\n  // rest of the component body (formattedValue, handleClick, header, etc.)\n  // stays unchanged.\n  const data = normalizedData;\n\n  // Calculate percentage\n  const percentage = useMemo(() => {\n    if (!data) return 0;\n    const max = data.max || config?.max || 100;\n    return (data.value / max) * 100;\n  }, [data, config?.max]);\n\n  // Calculate target percentage\n  const targetPercentage = useMemo(() => {\n    if (!data?.target) return undefined;\n    const max = data.max || config?.max || 100;\n    return (data.target / max) * 100;\n  }, [data, config?.max]);\n\n  // Build milestones from config\n  const milestones: Milestone[] = useMemo(() => {\n    if (!config?.milestones?.length) return [];\n    return config.milestones.map((m) => ({\n      position: m.position ?? m.value ?? 0,\n      label: m.label,\n      reached: percentage >= (m.position ?? m.value ?? 0),\n    }));\n  }, [config?.milestones, percentage]);\n\n  // Determine color mode\n  const colorMode = useMemo(() => {\n    if (config?.colorMode === 'dynamic') return 'dynamic';\n    if (config?.colorMode === 'success') return 'success';\n    if (config?.colorMode === 'warning') return 'warning';\n    if (config?.colorMode === 'error') return 'error';\n    return 'default';\n  }, [config?.colorMode]);\n\n  // Format value\n  const formattedValue = useMemo(() => {\n    if (!data) return '0';\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(data.value);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(data.value);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(data.value);\n    }\n  }, [data, config?.format]);\n\n  const formattedMax = useMemo(() => {\n    const max = data?.max || config?.max || 100;\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(max);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(max);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(max);\n    }\n  }, [data?.max, config?.max, config?.format]);\n\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && data) {\n      onDrilldown({\n        value: data.value,\n        max: data.max,\n        target: data.target,\n        label: data.label,\n        percentage,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, percentage]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!data) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`\n          flex flex-col h-full p-4\n          ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/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      {/* Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div className=\"flex-1\">\n          {data.label && <h4 className=\"text-sm font-medium text-text-primary\">{data.label}</h4>}\n          {data.description && <p className=\"text-xs text-text-secondary mt-0.5\">{data.description}</p>}\n        </div>\n\n        {/* Value display */}\n        <div className=\"text-right\">\n          <span className=\"text-2xl font-bold text-text-primary\">{formattedValue}</span>\n          {config?.showMax !== false && (\n            <span className=\"text-sm text-text-secondary\">\n              {' / '}\n              {formattedMax}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Progress bar */}\n      <ProgressBar\n        value={percentage}\n        target={targetPercentage}\n        milestones={milestones}\n        height={config?.barHeight || 12}\n        color={colorMode}\n        showPercentage={config?.showPercentage !== false}\n      />\n\n      {/* Target info */}\n      {data.target !== undefined && (\n        <div className=\"mt-3 flex items-center gap-2 text-xs\">\n          <svg className=\"w-4 h-4 text-text-secondary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n          </svg>\n          <span className=\"text-text-secondary\">\n            Target:{' '}\n            <span className=\"font-medium text-text-primary\">{new Intl.NumberFormat('en-US').format(data.target)}</span>\n            {percentage >= (targetPercentage || 0) && <span className=\"text-status-success-text ml-1\">Reached!</span>}\n          </span>\n        </div>\n      )}\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-3 flex items-center justify-end\">\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 ProgressWidget;\n"],"mappings":"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"}
+{"version":3,"file":"ProgressWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressWidget.tsx"],"sourcesContent":["/**\n * ProgressWidget Component\n *\n * Progress bar widget with target, milestones, and color stages.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, ProgressConfig } from '../../../types';\nimport { ProgressBar, type Milestone } from './ProgressBar';\nimport { firstObjectRow, inferValueField, inferMaxValue, unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Progress data */\n  data?: ProgressData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives progress data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface ProgressData {\n  /** Current value */\n  value: number;\n  /** Maximum value (for calculating percentage) */\n  max?: number;\n  /** Target value */\n  target?: number;\n  /** Label for the progress */\n  label?: string;\n  /** Description text */\n  description?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Coerce a `number` or finite numeric string to a number, else null.\n *\n * Parser output is untrusted JSON and routinely serializes metrics as strings,\n * so every numeric field (`value`, `max`, `target`) goes through this rather\n * than relying on implicit coercion or truthiness.\n */\nfunction toNumber(v: unknown): number | null {\n  if (typeof v === 'number' && Number.isFinite(v)) return v;\n  if (typeof v === 'string') {\n    // `Number('')` and `Number('   ')` are 0, not NaN. An absent/blank field\n    // must stay null — otherwise a parser emitting `{target: \"\"}` would render\n    // a literal \"Target: 0\" with a marker pinned at 0%.\n    const trimmed = v.trim();\n    if (trimmed === '') return null;\n    const n = Number(trimmed);\n    if (Number.isFinite(n)) return n;\n  }\n  return null;\n}\n\n/**\n * Resolve the denominator for percentage maths.\n *\n * Picks the first candidate that is a usable positive number, so a max of `0`\n * (or a non-finite one) can never produce an Infinity/NaN percentage. The\n * previous `data.max || config?.max || 100` chain also treated a legitimate\n * max of 0 and a *string* max inconsistently.\n */\nfunction resolveMax(dataMax: number | undefined, configMax: number | undefined): number {\n  for (const candidate of [dataMax, configMax]) {\n    if (typeof candidate === 'number' && Number.isFinite(candidate) && candidate > 0) return candidate;\n  }\n  return 100;\n}\n\ntype ProgressValueFormat = NonNullable<ProgressConfig['format']>;\n\n/**\n * Format a progress number according to the widget's configured format.\n *\n * Shared by value, max AND target so the three figures shown together stay\n * mutually consistent — the target used to be formatted with a bare\n * `Intl.NumberFormat`, rendering e.g. \"$4,823,500 / $5,000,000\" next to a\n * target of \"5,000,000\".\n */\nfunction formatProgressNumber(value: number, format: ProgressValueFormat): string {\n  switch (format) {\n    case 'currency':\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        maximumFractionDigits: 0,\n      }).format(value);\n    case 'compact':\n      return new Intl.NumberFormat('en-US', {\n        notation: 'compact',\n        maximumFractionDigits: 1,\n      }).format(value);\n    // 'percentage' deliberately shares the plain-number branch so value, max\n    // and target remain consistent (matches the pre-existing value/max behaviour).\n    case 'percentage':\n    case 'number':\n    default:\n      return new Intl.NumberFormat('en-US').format(value);\n  }\n}\n\n/**\n * Optional presentation fields a DataSink row carried.\n *\n * The array/envelope branches below rebuild a fresh object, so without this\n * they silently dropped `target` and `description` — an array payload rendered\n * with no target marker, no target footer and no description while the\n * identical single-object payload rendered all three.\n */\nfunction rowExtras(row: Record<string, unknown>): Pick<ProgressData, 'target' | 'description'> {\n  const target = toNumber(row.target);\n  return {\n    ...(target !== null ? { target } : {}),\n    ...(typeof row.description === 'string' ? { description: row.description } : {}),\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressWidget: FC<ProgressWidgetProps> = memo(function ProgressWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as ProgressConfig | undefined;\n\n  // BOFF-2246 smart default: if rawData is an array (or envelope) rather than\n  // the expected `ProgressData` single object, pull the configured valueField\n  // (flat OR dotted, e.g. `metrics.revenue`) or fall back to the first\n  // numeric field. Auto-compute a sensible max from the dataset.\n  const normalizedData = useMemo((): ProgressData | undefined => {\n    if (!rawData) return undefined;\n    // Already the expected shape — pass through. Accept both number and\n    // numeric-string `value`, since parsers sometimes serialize metrics as\n    // strings and the pre-BOFF-2246 code path rendered those via implicit\n    // JS coercion in percentage math.\n    if (typeof rawData === 'object' && !Array.isArray(rawData) && 'value' in rawData) {\n      const source = rawData as unknown as Record<string, unknown>;\n      const numericValue = toNumber(source.value);\n      if (numericValue !== null) {\n        // Coerce `max`/`target` with the same rule as `value`. Parser payloads\n        // are untrusted JSON: a string max escapes the numeric guards below\n        // (e.g. \"0\" is truthy, so `data.max || …` would select it and yield an\n        // Infinity percentage), and a string target breaks the marker maths.\n        const numericMax = toNumber(source.max);\n        const numericTarget = toNumber(source.target);\n        return {\n          ...(rawData as ProgressData),\n          value: numericValue,\n          max: numericMax ?? undefined,\n          target: numericTarget ?? undefined,\n        };\n      }\n    }\n    const row = firstObjectRow(rawData);\n    if (!row) return undefined;\n    const configuredField = (config as Record<string, unknown> | undefined)?.valueField as string | undefined;\n\n    // Supports dotted paths like `metrics.revenue` so nested valueFields\n    // configured in widget config resolve on array/envelope payloads the\n    // same way they do on single-object payloads.\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown =>\n      path.split('.').reduce<unknown>((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj);\n\n    const labelFromRow =\n      typeof row.label === 'string' ? row.label : typeof row.name === 'string' ? row.name : undefined;\n\n    // Configured field is authoritative — scan every row for it so sparse\n    // envelopes like `{data:[{id:1},{revenue:120}]}` with\n    // `valueField:\"revenue\"` still resolve. If no row carries it, return\n    // undefined rather than substituting an unrelated numeric column from\n    // row[0] via inference (that would silently misrepresent user config).\n    if (configuredField) {\n      const rows = unwrapRows(rawData) ?? [row];\n      for (const r of rows) {\n        if (r && typeof r === 'object') {\n          const resolvedRow = r as Record<string, unknown>;\n          const resolved = toNumber(getNestedValue(resolvedRow, configuredField));\n          if (resolved !== null) {\n            const rowLabel =\n              typeof resolvedRow.label === 'string'\n                ? resolvedRow.label\n                : typeof resolvedRow.name === 'string'\n                  ? resolvedRow.name\n                  : labelFromRow;\n            return {\n              value: resolved,\n              // Explicit config wins, then the row's own max (authoritative for\n              // that row), then a dataset-derived guess.\n              max: config?.max ?? toNumber(resolvedRow.max) ?? inferMaxValue(rawData, configuredField) ?? undefined,\n              label: rowLabel,\n              ...rowExtras(resolvedRow),\n            };\n          }\n        }\n      }\n      return undefined;\n    }\n\n    // Fall back to inference (only when no configured field). `inferValueField`\n    // already filters to numeric fields, but we still coerce here for symmetry\n    // with the configured branch above.\n    const inferred = inferValueField(row);\n    if (!inferred) return undefined;\n    const inferredValue = toNumber(row[inferred]);\n    if (inferredValue === null) return undefined;\n    return {\n      value: inferredValue,\n      max: config?.max ?? toNumber(row.max) ?? inferMaxValue(rawData, inferred) ?? undefined,\n      label: labelFromRow,\n      ...rowExtras(row),\n    };\n  }, [rawData, config]);\n\n  // Downstream render uses the normalized shape. Name kept as `data` so the\n  // rest of the component body (formattedValue, handleClick, header, etc.)\n  // stays unchanged.\n  const data = normalizedData;\n\n  // Calculate percentage\n  const percentage = useMemo(() => {\n    if (!data) return 0;\n    return (data.value / resolveMax(data.max, config?.max)) * 100;\n  }, [data, config?.max]);\n\n  // Calculate target percentage. `=== undefined` rather than a truthiness\n  // check so a legitimate target of 0 still renders its marker.\n  const targetPercentage = useMemo(() => {\n    if (data?.target === undefined) return undefined;\n    return (data.target / resolveMax(data.max, config?.max)) * 100;\n  }, [data, config?.max]);\n\n  // Build milestones from config\n  const milestones: Milestone[] = useMemo(() => {\n    if (!config?.milestones?.length) return [];\n    return config.milestones.map((m) => ({\n      position: m.position ?? m.value ?? 0,\n      label: m.label,\n      reached: percentage >= (m.position ?? m.value ?? 0),\n    }));\n  }, [config?.milestones, percentage]);\n\n  // Determine color mode\n  const colorMode = useMemo(() => {\n    if (config?.colorMode === 'dynamic') return 'dynamic';\n    if (config?.colorMode === 'success') return 'success';\n    if (config?.colorMode === 'warning') return 'warning';\n    if (config?.colorMode === 'error') return 'error';\n    return 'default';\n  }, [config?.colorMode]);\n\n  // Format value\n  const formattedValue = useMemo(() => {\n    if (!data) return '0';\n    return formatProgressNumber(data.value, config?.format || 'number');\n  }, [data, config?.format]);\n\n  const formattedMax = useMemo(() => {\n    return formatProgressNumber(resolveMax(data?.max, config?.max), config?.format || 'number');\n  }, [data?.max, config?.max, config?.format]);\n\n  const formattedTarget = useMemo(() => {\n    if (data?.target === undefined) return undefined;\n    return formatProgressNumber(data.target, config?.format || 'number');\n  }, [data?.target, config?.format]);\n\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && data) {\n      onDrilldown({\n        value: data.value,\n        max: data.max,\n        target: data.target,\n        label: data.label,\n        percentage,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, percentage]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!data) {\n    // WidgetWrapper's `isUsableData` admits payloads this widget cannot turn\n    // into a number (e.g. `{\"value\":\"n/a\"}` or `[{\"name\":\"a\",\"status\":\"ok\"}]`),\n    // so its own empty state never shows. Returning bare null left an\n    // unexplained blank card; render the same empty state the sibling widgets\n    // use instead.\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 progress data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`\n          flex flex-col h-full p-4\n          ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/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      {/* Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div className=\"flex-1\">\n          {data.label && <h4 className=\"text-sm font-medium text-text-primary\">{data.label}</h4>}\n          {data.description && <p className=\"text-xs text-text-secondary mt-0.5\">{data.description}</p>}\n        </div>\n\n        {/* Value display */}\n        <div className=\"text-right\">\n          <span className=\"text-2xl font-bold text-text-primary\">{formattedValue}</span>\n          {config?.showMax !== false && (\n            <span className=\"text-sm text-text-secondary\">\n              {' / '}\n              {formattedMax}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Progress bar */}\n      <ProgressBar\n        value={percentage}\n        target={targetPercentage}\n        milestones={milestones}\n        height={config?.barHeight || 12}\n        color={colorMode}\n        showPercentage={config?.showPercentage !== false}\n      />\n\n      {/* Target info */}\n      {data.target !== undefined && (\n        <div className=\"mt-3 flex items-center gap-2 text-xs\">\n          <svg className=\"w-4 h-4 text-text-secondary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n          </svg>\n          <span className=\"text-text-secondary\">\n            Target: <span className=\"font-medium text-text-primary\">{formattedTarget}</span>\n            {percentage >= (targetPercentage || 0) && <span className=\"text-status-success-text ml-1\">Reached!</span>}\n          </span>\n        </div>\n      )}\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-3 flex items-center justify-end\">\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 ProgressWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/retention/RetentionWidget.js

@@ -17,7 +17,7 @@ var o = e(function({ widget: e, data: o, onClick: s }) {
 			className: "text-center",
 			children: [
 				/* @__PURE__ */ r("svg", {
-					className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+					className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
@@ -33,7 +33,7 @@ var o = e(function({ widget: e, data: o, onClick: s }) {
 					children: "No retention cohort data"
 				}),
 				/* @__PURE__ */ i("p", {
-					className: "text-xs text-text-tertiary mt-1",
+					className: "text-xs text-text-muted mt-1",
 					children: [
 						"Connect a data source that returns ",
 						/* @__PURE__ */ r("span", {
@@ -50,7 +50,7 @@ var o = e(function({ widget: e, data: o, onClick: s }) {
 					]
 				}),
 				/* @__PURE__ */ i("p", {
-					className: "text-xs text-text-tertiary mt-2",
+					className: "text-xs text-text-muted mt-2",
 					children: [
 						"Expected shape: ",
 						/* @__PURE__ */ r("span", {

package/dist/bigconsole/components/widgets/retention/RetentionWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RetentionWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/retention/RetentionWidget.tsx"],"sourcesContent":["/**\n * RetentionWidget Component\n *\n * Retention cohort chart showing user retention over time.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, RetentionConfig } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RetentionWidgetProps {\n  widget: Widget;\n  data?: RetentionData;\n  onClick?: (cohort: string, period: number, value: number) => void;\n}\n\nexport interface RetentionCohort {\n  /** Cohort identifier (e.g., \"Week 1\", \"Jan 2024\") */\n  cohort: string;\n  /** Initial cohort size */\n  initialSize: number;\n  /** Retention values for each period (percentages) */\n  values: number[];\n}\n\nexport interface RetentionData {\n  /** Period labels (e.g., [\"Day 0\", \"Day 1\", ...]) */\n  periods: string[];\n  /** Cohort data */\n  cohorts: RetentionCohort[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getRetentionColor(value: number): string {\n  // Green gradient based on retention percentage\n  if (value >= 80) return 'bg-status-success-bg/90 text-white';\n  if (value >= 60) return 'bg-status-success-bg/70 text-white';\n  if (value >= 40) return 'bg-status-success-bg/50 text-text-primary';\n  if (value >= 20) return 'bg-status-success-bg/30 text-text-primary';\n  if (value > 0) return 'bg-status-success-bg/10 text-text-secondary';\n  return 'bg-bg-sunken text-text-secondary';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const RetentionWidget: FC<RetentionWidgetProps> = memo(function RetentionWidget({ widget, data, onClick }) {\n  const config = widget.config as unknown as RetentionConfig | undefined;\n\n  const handleCellClick = useCallback(\n    (cohort: string, periodIndex: number, value: number) => {\n      if (onClick && widget.drilldowns?.length) {\n        onClick(cohort, periodIndex, value);\n      }\n    },\n    [onClick, widget.drilldowns]\n  );\n\n  const isClickable = Boolean(onClick && widget.drilldowns?.length);\n\n  // Calculate average retention per period\n  const averages = useMemo(() => {\n    if (!data?.cohorts?.length || !data?.periods?.length) return [];\n\n    return data.periods.map((_, periodIndex) => {\n      const values = data.cohorts\n        .map((c) => c.values?.[periodIndex])\n        .filter((v) => v !== undefined && v !== null) as number[];\n      if (values.length === 0) return 0;\n      return values.reduce((a, b) => a + b, 0) / values.length;\n    });\n  }, [data]);\n\n  // Show retention-specific empty state when cohort data is missing.\n  if (!data?.cohorts?.length || !data?.periods?.length) {\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 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p className=\"font-medium text-text-primary\">No retention cohort data</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">\n            Connect a data source that returns <span className=\"font-mono\">periods</span> and{' '}\n            <span className=\"font-mono\">cohorts</span>.\n          </p>\n          <p className=\"text-xs text-text-tertiary mt-2\">\n            Expected shape: <span className=\"font-mono\">RetentionData</span>.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      <table className=\"w-full border-collapse\">\n        <thead>\n          <tr>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-left sticky left-0 bg-bg-surface\">\n              Cohort\n            </th>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-right\">Users</th>\n            {data.periods.map((period, i) => (\n              <th key={i} className=\"p-2 text-xs font-medium text-text-secondary text-center min-w-[60px]\">\n                {period}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.cohorts.map((cohort, _cohortIndex) => (\n            <tr key={cohort.cohort}>\n              <td className=\"p-2 text-sm font-medium text-text-primary text-left sticky left-0 bg-bg-surface\">\n                {cohort.cohort}\n              </td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">\n                {new Intl.NumberFormat('en-US').format(cohort.initialSize)}\n              </td>\n              {cohort.values.map((value, periodIndex) => (\n                <td\n                  key={periodIndex}\n                  className={`p-0 ${isClickable ? 'cursor-pointer' : ''}`}\n                  onClick={() => handleCellClick(cohort.cohort, periodIndex, value)}\n                >\n                  <div\n                    className={`\n                        m-0.5 p-2 rounded text-center\n                        ${getRetentionColor(value)}\n                        ${isClickable ? 'hover:ring-2 hover:ring-action-primary-bg' : ''}\n                        transition-all\n                      `}\n                    title={`${cohort.cohort} - ${data.periods[periodIndex]}: ${value.toFixed(1)}%`}\n                  >\n                    <span className=\"text-xs font-medium\">{value.toFixed(config?.decimals ?? 0)}%</span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          ))}\n\n          {/* Average row */}\n          {config?.showAverages !== false && (\n            <tr className=\"border-t-2 border-border-default\">\n              <td className=\"p-2 text-sm font-medium text-text-primary sticky left-0 bg-bg-surface\">Average</td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">—</td>\n              {averages.map((avg, i) => (\n                <td key={i} className=\"p-0\">\n                  <div className=\"m-0.5 p-2 rounded bg-bg-sunken text-center\">\n                    <span className=\"text-xs font-semibold text-text-primary\">\n                      {avg.toFixed(config?.decimals ?? 0)}%\n                    </span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          )}\n        </tbody>\n      </table>\n\n      {/* Legend */}\n      {config?.showLegend !== false && (\n        <div className=\"flex items-center justify-center gap-2 mt-4\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <div className=\"flex gap-0.5\">\n            {[10, 30, 50, 70, 90].map((opacity) => (\n              <div key={opacity} className={`w-6 h-4 rounded bg-status-success-bg/${opacity}`} />\n            ))}\n          </div>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RetentionWidget;\n"],"mappings":"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"}
+{"version":3,"file":"RetentionWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/retention/RetentionWidget.tsx"],"sourcesContent":["/**\n * RetentionWidget Component\n *\n * Retention cohort chart showing user retention over time.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, RetentionConfig } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RetentionWidgetProps {\n  widget: Widget;\n  data?: RetentionData;\n  onClick?: (cohort: string, period: number, value: number) => void;\n}\n\nexport interface RetentionCohort {\n  /** Cohort identifier (e.g., \"Week 1\", \"Jan 2024\") */\n  cohort: string;\n  /** Initial cohort size */\n  initialSize: number;\n  /** Retention values for each period (percentages) */\n  values: number[];\n}\n\nexport interface RetentionData {\n  /** Period labels (e.g., [\"Day 0\", \"Day 1\", ...]) */\n  periods: string[];\n  /** Cohort data */\n  cohorts: RetentionCohort[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getRetentionColor(value: number): string {\n  // Green gradient based on retention percentage\n  if (value >= 80) return 'bg-status-success-bg/90 text-white';\n  if (value >= 60) return 'bg-status-success-bg/70 text-white';\n  if (value >= 40) return 'bg-status-success-bg/50 text-text-primary';\n  if (value >= 20) return 'bg-status-success-bg/30 text-text-primary';\n  if (value > 0) return 'bg-status-success-bg/10 text-text-secondary';\n  return 'bg-bg-sunken text-text-secondary';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const RetentionWidget: FC<RetentionWidgetProps> = memo(function RetentionWidget({ widget, data, onClick }) {\n  const config = widget.config as unknown as RetentionConfig | undefined;\n\n  const handleCellClick = useCallback(\n    (cohort: string, periodIndex: number, value: number) => {\n      if (onClick && widget.drilldowns?.length) {\n        onClick(cohort, periodIndex, value);\n      }\n    },\n    [onClick, widget.drilldowns]\n  );\n\n  const isClickable = Boolean(onClick && widget.drilldowns?.length);\n\n  // Calculate average retention per period\n  const averages = useMemo(() => {\n    if (!data?.cohorts?.length || !data?.periods?.length) return [];\n\n    return data.periods.map((_, periodIndex) => {\n      const values = data.cohorts\n        .map((c) => c.values?.[periodIndex])\n        .filter((v) => v !== undefined && v !== null) as number[];\n      if (values.length === 0) return 0;\n      return values.reduce((a, b) => a + b, 0) / values.length;\n    });\n  }, [data]);\n\n  // Show retention-specific empty state when cohort data is missing.\n  if (!data?.cohorts?.length || !data?.periods?.length) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p className=\"font-medium text-text-primary\">No retention cohort data</p>\n          <p className=\"text-xs text-text-muted mt-1\">\n            Connect a data source that returns <span className=\"font-mono\">periods</span> and{' '}\n            <span className=\"font-mono\">cohorts</span>.\n          </p>\n          <p className=\"text-xs text-text-muted mt-2\">\n            Expected shape: <span className=\"font-mono\">RetentionData</span>.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      <table className=\"w-full border-collapse\">\n        <thead>\n          <tr>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-left sticky left-0 bg-bg-surface\">\n              Cohort\n            </th>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-right\">Users</th>\n            {data.periods.map((period, i) => (\n              <th key={i} className=\"p-2 text-xs font-medium text-text-secondary text-center min-w-[60px]\">\n                {period}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.cohorts.map((cohort, _cohortIndex) => (\n            <tr key={cohort.cohort}>\n              <td className=\"p-2 text-sm font-medium text-text-primary text-left sticky left-0 bg-bg-surface\">\n                {cohort.cohort}\n              </td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">\n                {new Intl.NumberFormat('en-US').format(cohort.initialSize)}\n              </td>\n              {cohort.values.map((value, periodIndex) => (\n                <td\n                  key={periodIndex}\n                  className={`p-0 ${isClickable ? 'cursor-pointer' : ''}`}\n                  onClick={() => handleCellClick(cohort.cohort, periodIndex, value)}\n                >\n                  <div\n                    className={`\n                        m-0.5 p-2 rounded text-center\n                        ${getRetentionColor(value)}\n                        ${isClickable ? 'hover:ring-2 hover:ring-action-primary-bg' : ''}\n                        transition-all\n                      `}\n                    title={`${cohort.cohort} - ${data.periods[periodIndex]}: ${value.toFixed(1)}%`}\n                  >\n                    <span className=\"text-xs font-medium\">{value.toFixed(config?.decimals ?? 0)}%</span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          ))}\n\n          {/* Average row */}\n          {config?.showAverages !== false && (\n            <tr className=\"border-t-2 border-border-default\">\n              <td className=\"p-2 text-sm font-medium text-text-primary sticky left-0 bg-bg-surface\">Average</td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">—</td>\n              {averages.map((avg, i) => (\n                <td key={i} className=\"p-0\">\n                  <div className=\"m-0.5 p-2 rounded bg-bg-sunken text-center\">\n                    <span className=\"text-xs font-semibold text-text-primary\">\n                      {avg.toFixed(config?.decimals ?? 0)}%\n                    </span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          )}\n        </tbody>\n      </table>\n\n      {/* Legend */}\n      {config?.showLegend !== false && (\n        <div className=\"flex items-center justify-center gap-2 mt-4\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <div className=\"flex gap-0.5\">\n            {[10, 30, 50, 70, 90].map((opacity) => (\n              <div key={opacity} className={`w-6 h-4 rounded bg-status-success-bg/${opacity}`} />\n            ))}\n          </div>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RetentionWidget;\n"],"mappings":";;;AAuCA,SAAS,EAAkB,GAAuB;AAOhD,QALI,KAAS,KAAW,uCACpB,KAAS,KAAW,uCACpB,KAAS,KAAW,8CACpB,KAAS,KAAW,8CACpB,IAAQ,IAAU,gDACf;;AAOT,IAAa,IAA4C,EAAK,SAAyB,EAAE,WAAQ,SAAM,cAAW;CAChH,IAAM,IAAS,EAAO,QAEhB,IAAkB,GACrB,GAAgB,GAAqB,MAAkB;AACtD,EAAI,KAAW,EAAO,YAAY,UAChC,EAAQ,GAAQ,GAAa,EAAM;IAGvC,CAAC,GAAS,EAAO,WAAW,CAC7B,EAEK,IAAc,GAAQ,KAAW,EAAO,YAAY,SAGpD,IAAW,QACX,CAAC,GAAM,SAAS,UAAU,CAAC,GAAM,SAAS,SAAe,EAAE,GAExD,EAAK,QAAQ,KAAK,GAAG,MAAgB;EAC1C,IAAM,IAAS,EAAK,QACjB,KAAK,MAAM,EAAE,SAAS,GAAa,CACnC,QAAQ,MAAM,KAAyB,KAAK;AAE/C,SADI,EAAO,WAAW,IAAU,IACzB,EAAO,QAAQ,GAAG,MAAM,IAAI,GAAG,EAAE,GAAG,EAAO;GAClD,EACD,CAAC,EAAK,CAAC;AA4BV,QAzBI,CAAC,GAAM,SAAS,UAAU,CAAC,GAAM,SAAS,SAE1C,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;KAAyC,MAAK;KAAO,QAAO;KAAe,SAAQ;eAChG,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eAAgC;KAA4B,CAAA;IACzE,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA4C;MACP,kBAAC,QAAD;OAAM,WAAU;iBAAY;OAAc,CAAA;;MAAK;MAClF,kBAAC,QAAD;OAAM,WAAU;iBAAY;OAAc,CAAA;;MACxC;;IACJ,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA4C;MAC1B,kBAAC,QAAD;OAAM,WAAU;iBAAY;OAAoB,CAAA;;MAC9D;;IACA;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eAAoF;KAE7F,CAAA;IACL,kBAAC,MAAD;KAAI,WAAU;eAAyD;KAAU,CAAA;IAChF,EAAK,QAAQ,KAAK,GAAQ,MACzB,kBAAC,MAAD;KAAY,WAAU;eACnB;KACE,EAFI,EAEJ,CACL;IACC,EAAA,CAAA,EACC,CAAA,EACR,kBAAC,SAAD,EAAA,UAAA,CACG,EAAK,QAAQ,KAAK,GAAQ,MACzB,kBAAC,MAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAO;KACL,CAAA;IACL,kBAAC,MAAD;KAAI,WAAU;eACX,IAAI,KAAK,aAAa,QAAQ,CAAC,OAAO,EAAO,YAAY;KACvD,CAAA;IACJ,EAAO,OAAO,KAAK,GAAO,MACzB,kBAAC,MAAD;KAEE,WAAW,OAAO,IAAc,mBAAmB;KACnD,eAAe,EAAgB,EAAO,QAAQ,GAAa,EAAM;eAEjE,kBAAC,OAAD;MACE,WAAW;;0BAEL,EAAkB,EAAM,CAAC;0BACzB,IAAc,8CAA8C,GAAG;;;MAGrE,OAAO,GAAG,EAAO,OAAO,KAAK,EAAK,QAAQ,GAAa,IAAI,EAAM,QAAQ,EAAE,CAAC;gBAE5E,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CAAuC,EAAM,QAAQ,GAAQ,YAAY,EAAE,EAAC,IAAQ;;MAChF,CAAA;KACH,EAfE,EAeF,CACL;IACC,EAAA,EA1BI,EAAO,OA0BX,CACL,EAGD,GAAQ,iBAAiB,MACxB,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAwE;MAAY,CAAA;KAClG,kBAAC,MAAD;MAAI,WAAU;gBAA6C;MAAM,CAAA;KAChE,EAAS,KAAK,GAAK,MAClB,kBAAC,MAAD;MAAY,WAAU;gBACpB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,EAAI,QAAQ,GAAQ,YAAY,EAAE,EAAC,IAC/B;;OACH,CAAA;MACH,EANI,EAMJ,CACL;KACC;MAED,EAAA,CAAA,CACF;MAGP,GAAQ,eAAe,MACtB,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eAA8B;KAAS,CAAA;IACvD,kBAAC,OAAD;KAAK,WAAU;eACZ;MAAC;MAAI;MAAI;MAAI;MAAI;MAAG,CAAC,KAAK,MACzB,kBAAC,OAAD,EAAmB,WAAW,wCAAwC,KAAa,EAAzE,EAAyE,CACnF;KACE,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eAA8B;KAAW,CAAA;IACrD;KAEJ;;EAER"}

package/dist/bigconsole/components/widgets/states/EmptyState.js

@@ -4,11 +4,13 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = e(function({ widgetType: e, hasDataSource: r = !1, message: a, templateSlot: o }) {
 	let s = a || (!r && o ? `Connect the "${o}" data source to finish setting up this widget` : r ? i(e) : "Connect a data source to display data");
 	return /* @__PURE__ */ n("div", {
-		className: "\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        ",
+		className: "\n          flex flex-col items-center justify-center\n          h-full w-full min-w-0 min-h-[120px]\n          text-center\n          px-3\n        ",
+		role: "status",
 		children: [
 			/* @__PURE__ */ t("div", {
-				className: "\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-bg-sunken\n            text-text-secondary\n          ",
+				className: "\n            w-12 h-12 mb-3 shrink-0\n            flex items-center justify-center\n            rounded-full\n            bg-bg-sunken\n            text-text-secondary\n          ",
 				children: /* @__PURE__ */ t("svg", {
+					"aria-hidden": "true",
 					className: "w-6 h-6",
 					fill: "none",
 					stroke: "currentColor",
@@ -22,11 +24,11 @@ var r = e(function({ widgetType: e, hasDataSource: r = !1, message: a, templateS
 				})
 			}),
 			/* @__PURE__ */ t("p", {
-				className: "text-sm text-text-secondary",
+				className: "max-w-[32ch] text-sm font-medium text-text-primary",
 				children: s
 			}),
 			!r && /* @__PURE__ */ t("p", {
-				className: "text-xs text-text-secondary mt-2 max-w-[200px]",
+				className: "mt-2 max-w-[32ch] text-xs text-text-secondary",
 				children: "Click Edit to configure this widget"
 			})
 		]

package/dist/bigconsole/components/widgets/states/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/EmptyState.tsx"],"sourcesContent":["/**\n * WidgetEmptyState Component\n *\n * Empty state displayed when widget has no data.\n */\n\nimport { type FC, memo } from 'react';\nimport type { WidgetType } from '../../../types';\n\nexport interface WidgetEmptyStateProps {\n  /** Widget type for context-specific messaging */\n  widgetType?: WidgetType;\n  /** Whether a data source is configured */\n  hasDataSource?: boolean;\n  /** Custom message */\n  message?: string;\n  /**\n   * Slot name when this widget came from a store template and its data source\n   * has not been connected yet. Turns the generic empty state into an\n   * explicitly unfinished-setup state, so it does not read as a broken widget.\n   */\n  templateSlot?: string | null;\n}\n\nexport const WidgetEmptyState: FC<WidgetEmptyStateProps> = memo(function WidgetEmptyState({\n  widgetType,\n  hasDataSource = false,\n  message,\n  templateSlot,\n}) {\n  // A template widget awaiting its data source is a designed setup state, not\n  // an absence of results — say so explicitly and name the slot to connect.\n  const awaitingTemplateBinding = !hasDataSource && !!templateSlot;\n\n  // Determine appropriate message\n  const displayMessage =\n    message ||\n    (awaitingTemplateBinding\n      ? `Connect the \"${templateSlot}\" data source to finish setting up this widget`\n      : !hasDataSource\n        ? 'Connect a data source to display data'\n        : getEmptyMessageForType(widgetType));\n\n  return (\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        \"\n    >\n      {/* Empty Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-bg-sunken\n            text-text-secondary\n          \"\n      >\n        <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\"\n          />\n        </svg>\n      </div>\n\n      {/* Message */}\n      <p className=\"text-sm text-text-secondary\">{displayMessage}</p>\n\n      {/* Data source hint */}\n      {!hasDataSource && (\n        <p className=\"text-xs text-text-secondary mt-2 max-w-[200px]\">Click Edit to configure this widget</p>\n      )}\n    </div>\n  );\n});\n\n/**\n * Get context-specific empty message for widget type (v1.0 snake_case)\n */\nfunction getEmptyMessageForType(type?: WidgetType): string {\n  switch (type) {\n    case 'metric_card':\n    case 'kpi_card_comparison':\n      return 'No metrics available';\n    case 'chart':\n    case 'funnel_chart':\n      return 'No chart data available';\n    case 'table':\n    case 'pivot_table':\n      return 'No rows to display';\n    case 'gauge':\n    case 'progress':\n      return 'No value available';\n    case 'list':\n      return 'No items to display';\n    case 'heatmap':\n      return 'No heatmap data available';\n    case 'calendar':\n    case 'timeline':\n    case 'kanban':\n      return 'No schedule data available';\n    case 'map':\n      return 'No location data available';\n    case 'form':\n      return 'Form not configured';\n    case 'text':\n    case 'iframe':\n      return 'No content configured';\n    case 'custom':\n      return 'Custom widget not configured';\n    default:\n      return 'No data available';\n  }\n}\n\nexport default WidgetEmptyState;\n"],"mappings":";;;AAwBA,IAAa,IAA8C,EAAK,SAA0B,EACxF,eACA,mBAAgB,IAChB,YACA,mBACC;CAMD,IAAM,IACJ,MAJ8B,CAAC,KAAmB,IAM9C,gBAAgB,EAAa,kDAC5B,IAEC,EAAuB,EAAW,GADlC;AAGR,QACE,kBAAC,OAAD;EACE,WAAU;YADZ;GASE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAA+B;IAAmB,CAAA;GAG9D,CAAC,KACA,kBAAC,KAAD;IAAG,WAAU;cAAiD;IAAuC,CAAA;GAEnG;;EAER;AAKF,SAAS,EAAuB,GAA2B;AACzD,SAAQ,GAAR;EACE,KAAK;EACL,KAAK,sBACH,QAAO;EACT,KAAK;EACL,KAAK,eACH,QAAO;EACT,KAAK;EACL,KAAK,cACH,QAAO;EACT,KAAK;EACL,KAAK,WACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK;EACL,KAAK;EACL,KAAK,SACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK;EACL,KAAK,SACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,QACE,QAAO"}
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/EmptyState.tsx"],"sourcesContent":["/**\n * WidgetEmptyState Component\n *\n * Empty state displayed when widget has no data.\n */\n\nimport { type FC, memo } from 'react';\nimport type { WidgetType } from '../../../types';\n\nexport interface WidgetEmptyStateProps {\n  /** Widget type for context-specific messaging */\n  widgetType?: WidgetType;\n  /** Whether a data source is configured */\n  hasDataSource?: boolean;\n  /** Custom message */\n  message?: string;\n  /**\n   * Slot name when this widget came from a store template and its data source\n   * has not been connected yet. Turns the generic empty state into an\n   * explicitly unfinished-setup state, so it does not read as a broken widget.\n   */\n  templateSlot?: string | null;\n}\n\nexport const WidgetEmptyState: FC<WidgetEmptyStateProps> = memo(function WidgetEmptyState({\n  widgetType,\n  hasDataSource = false,\n  message,\n  templateSlot,\n}) {\n  // A template widget awaiting its data source is a designed setup state, not\n  // an absence of results — say so explicitly and name the slot to connect.\n  const awaitingTemplateBinding = !hasDataSource && !!templateSlot;\n\n  // Determine appropriate message\n  const displayMessage =\n    message ||\n    (awaitingTemplateBinding\n      ? `Connect the \"${templateSlot}\" data source to finish setting up this widget`\n      : !hasDataSource\n        ? 'Connect a data source to display data'\n        : getEmptyMessageForType(widgetType));\n\n  return (\n    /*\n      One shared recipe across the four widget states (empty / error / loading /\n      crash): same icon chip, same copy width, same padding. Copy is capped in\n      `ch` rather than a fixed 200px so it never overflows a narrow card\n      (BOFF-5636).\n    */\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-w-0 min-h-[120px]\n          text-center\n          px-3\n        \"\n      role=\"status\"\n    >\n      {/* Empty Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3 shrink-0\n            flex items-center justify-center\n            rounded-full\n            bg-bg-sunken\n            text-text-secondary\n          \"\n      >\n        <svg aria-hidden=\"true\" className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\"\n          />\n        </svg>\n      </div>\n\n      {/* Message */}\n      <p className=\"max-w-[32ch] text-sm font-medium text-text-primary\">{displayMessage}</p>\n\n      {/* Data source hint */}\n      {!hasDataSource && (\n        <p className=\"mt-2 max-w-[32ch] text-xs text-text-secondary\">Click Edit to configure this widget</p>\n      )}\n    </div>\n  );\n});\n\n/**\n * Get context-specific empty message for widget type (v1.0 snake_case)\n */\nfunction getEmptyMessageForType(type?: WidgetType): string {\n  switch (type) {\n    case 'metric_card':\n    case 'kpi_card_comparison':\n      return 'No metrics available';\n    case 'chart':\n    case 'funnel_chart':\n      return 'No chart data available';\n    case 'table':\n    case 'pivot_table':\n      return 'No rows to display';\n    case 'gauge':\n    case 'progress':\n      return 'No value available';\n    case 'list':\n      return 'No items to display';\n    case 'heatmap':\n      return 'No heatmap data available';\n    case 'calendar':\n    case 'timeline':\n    case 'kanban':\n      return 'No schedule data available';\n    case 'map':\n      return 'No location data available';\n    case 'form':\n      return 'Form not configured';\n    case 'text':\n    case 'iframe':\n      return 'No content configured';\n    case 'custom':\n      return 'Custom widget not configured';\n    default:\n      return 'No data available';\n  }\n}\n\nexport default WidgetEmptyState;\n"],"mappings":";;;AAwBA,IAAa,IAA8C,EAAK,SAA0B,EACxF,eACA,mBAAgB,IAChB,YACA,mBACC;CAMD,IAAM,IACJ,MAJ8B,CAAC,KAAmB,IAM9C,gBAAgB,EAAa,kDAC5B,IAEC,EAAuB,EAAW,GADlC;AAGR,QAOE,kBAAC,OAAD;EACE,WAAU;EAMV,MAAK;YAPP;GAUE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACpF,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAsD;IAAmB,CAAA;GAGrF,CAAC,KACA,kBAAC,KAAD;IAAG,WAAU;cAAgD;IAAuC,CAAA;GAElG;;EAER;AAKF,SAAS,EAAuB,GAA2B;AACzD,SAAQ,GAAR;EACE,KAAK;EACL,KAAK,sBACH,QAAO;EACT,KAAK;EACL,KAAK,eACH,QAAO;EACT,KAAK;EACL,KAAK,cACH,QAAO;EACT,KAAK;EACL,KAAK,WACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK;EACL,KAAK;EACL,KAAK,SACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK;EACL,KAAK,SACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,QACE,QAAO"}

package/dist/bigconsole/components/widgets/states/ErrorState.js

@@ -3,12 +3,13 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/states/ErrorState.tsx
 var r = e(function({ error: e, onRetry: r }) {
 	return /* @__PURE__ */ n("div", {
-		className: "\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        ",
+		className: "\n          flex flex-col items-center justify-center\n          h-full w-full min-w-0 min-h-[120px]\n          text-center\n          px-3\n        ",
 		role: "alert",
 		children: [
 			/* @__PURE__ */ t("div", {
-				className: "\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg/10\n            text-status-error-text\n          ",
+				className: "\n            w-12 h-12 mb-3 shrink-0\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg-subtle\n            text-[var(--color-status-error-text)]\n          ",
 				children: /* @__PURE__ */ t("svg", {
+					"aria-hidden": "true",
 					className: "w-6 h-6",
 					fill: "none",
 					stroke: "currentColor",
@@ -22,19 +23,20 @@ var r = e(function({ error: e, onRetry: r }) {
 				})
 			}),
 			/* @__PURE__ */ t("p", {
-				className: "text-sm font-medium text-status-error-text mb-1",
+				className: "mb-1 text-sm font-semibold text-[var(--color-status-error-text)]",
 				children: "Failed to load data"
 			}),
 			/* @__PURE__ */ t("p", {
-				className: "text-xs text-text-secondary max-w-[200px] mb-4",
+				className: "mb-4 max-w-[32ch] break-words text-xs text-text-secondary",
 				title: e,
 				children: e.length > 100 ? `${e.substring(0, 100)}...` : e
 			}),
 			r && /* @__PURE__ */ n("button", {
 				type: "button",
 				onClick: r,
-				className: "\n              inline-flex items-center gap-1.5\n              px-3 py-1.5\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-md\n              transition-colors\n            ",
+				className: "\n              inline-flex items-center gap-1.5\n              min-h-control-md px-3\n              text-sm font-medium\n              text-action-primary-text\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-button\n              motion-safe:transition-colors\n              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface\n            ",
 				children: [/* @__PURE__ */ t("svg", {
+					"aria-hidden": "true",
 					className: "w-4 h-4",
 					fill: "none",
 					stroke: "currentColor",

package/dist/bigconsole/components/widgets/states/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/ErrorState.tsx"],"sourcesContent":["/**\n * WidgetErrorState Component\n *\n * Error state displayed when widget data fetch fails.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface WidgetErrorStateProps {\n  /** Error message */\n  error: string;\n  /** Callback to retry loading */\n  onRetry?: () => void;\n}\n\nexport const WidgetErrorState: FC<WidgetErrorStateProps> = memo(function WidgetErrorState({ error, onRetry }) {\n  return (\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        \"\n      role=\"alert\"\n    >\n      {/* Error Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg/10\n            text-status-error-text\n          \"\n      >\n        <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n          />\n        </svg>\n      </div>\n\n      {/* Error Message */}\n      <p className=\"text-sm font-medium text-status-error-text mb-1\">Failed to load data</p>\n      <p className=\"text-xs text-text-secondary max-w-[200px] mb-4\" title={error}>\n        {error.length > 100 ? `${error.substring(0, 100)}...` : error}\n      </p>\n\n      {/* Retry Button */}\n      {onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"\n              inline-flex items-center gap-1.5\n              px-3 py-1.5\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-md\n              transition-colors\n            \"\n        >\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n            />\n          </svg>\n          Retry\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport default WidgetErrorState;\n"],"mappings":";;;AAeA,IAAa,IAA8C,EAAK,SAA0B,EAAE,UAAO,cAAW;AAC5G,QACE,kBAAC,OAAD;EACE,WAAU;EAMV,MAAK;YAPP;GAUE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAkD;IAAuB,CAAA;GACtF,kBAAC,KAAD;IAAG,WAAU;IAAiD,OAAO;cAClE,EAAM,SAAS,MAAM,GAAG,EAAM,UAAU,GAAG,IAAI,CAAC,OAAO;IACtD,CAAA;GAGH,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ,CAcE,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA,EAAA,QAEC;;GAEP;;EAER"}
+{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/ErrorState.tsx"],"sourcesContent":["/**\n * WidgetErrorState Component\n *\n * Error state displayed when widget data fetch fails.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface WidgetErrorStateProps {\n  /** Error message */\n  error: string;\n  /** Callback to retry loading */\n  onRetry?: () => void;\n}\n\nexport const WidgetErrorState: FC<WidgetErrorStateProps> = memo(function WidgetErrorState({ error, onRetry }) {\n  return (\n    /* Shares the empty-state recipe: same chip, same copy width, same padding. */\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-w-0 min-h-[120px]\n          text-center\n          px-3\n        \"\n      role=\"alert\"\n    >\n      {/* Error Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3 shrink-0\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg-subtle\n            text-[var(--color-status-error-text)]\n          \"\n      >\n        <svg aria-hidden=\"true\" className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n          />\n        </svg>\n      </div>\n\n      {/* Error Message */}\n      <p className=\"mb-1 text-sm font-semibold text-[var(--color-status-error-text)]\">Failed to load data</p>\n      <p className=\"mb-4 max-w-[32ch] break-words text-xs text-text-secondary\" title={error}>\n        {error.length > 100 ? `${error.substring(0, 100)}...` : error}\n      </p>\n\n      {/* Retry Button */}\n      {onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"\n              inline-flex items-center gap-1.5\n              min-h-control-md px-3\n              text-sm font-medium\n              text-action-primary-text\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-button\n              motion-safe:transition-colors\n              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface\n            \"\n        >\n          <svg aria-hidden=\"true\" className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n            />\n          </svg>\n          Retry\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport default WidgetErrorState;\n"],"mappings":";;;AAeA,IAAa,IAA8C,EAAK,SAA0B,EAAE,UAAO,cAAW;AAC5G,QAEE,kBAAC,OAAD;EACE,WAAU;EAMV,MAAK;YAPP;GAUE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACpF,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAmE;IAAuB,CAAA;GACvG,kBAAC,KAAD;IAAG,WAAU;IAA4D,OAAO;cAC7E,EAAM,SAAS,MAAM,GAAG,EAAM,UAAU,GAAG,IAAI,CAAC,OAAO;IACtD,CAAA;GAGH,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ,CAeE,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACpF,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA,EAAA,QAEC;;GAEP;;EAER"}