@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/builder/BuilderCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/builder/BuilderCanvas.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\n\nexport interface BuilderCanvasProps {\n  palette?: ReactNode;\n  canvas: ReactNode;\n  inspector?: ReactNode;\n}\n\n/** Stable pane composition. Palette and inspector slots will be migrated here incrementally. */\nexport const BuilderCanvas: FC<BuilderCanvasProps> = memo(function BuilderCanvas({ palette, canvas, inspector }) {\n  return (\n    <div className=\"flex min-h-0 min-w-0 flex-1 overflow-hidden\" data-testid=\"dashboard-editor-panes\">\n      {palette}\n      <main className=\"relative min-w-0 flex-1 overflow-hidden\">{canvas}</main>\n      {inspector}\n    </div>\n  );\n});\n"],"mappings":";;;AASA,IAAa,IAAwC,EAAK,SAAuB,EAAE,YAAS,WAAQ,gBAAa;AAC/G,QACE,kBAAC,OAAD;EAAK,WAAU;EAA8C,eAAY;YAAzE;GACG;GACD,kBAAC,QAAD;IAAM,WAAU;cAA2C;IAAc,CAAA;GACxE;GACG;;EAER"}
+{"version":3,"file":"BuilderCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/builder/BuilderCanvas.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\n\nexport interface BuilderCanvasProps {\n  palette?: ReactNode;\n  canvas: ReactNode;\n  inspector?: ReactNode;\n}\n\n/**\n * Stable pane composition for the builder: palette, canvas, inspector.\n *\n * The three panes sit side by side from `md` up. Below that they stack, because\n * a 300px palette pinned next to a canvas leaves the canvas unusably narrow on a\n * phone (BOFF-5636). The canvas keeps `min-w-0` so a wide widget grid scrolls\n * inside itself instead of pushing the page into horizontal scroll.\n */\nexport const BuilderCanvas: FC<BuilderCanvasProps> = memo(function BuilderCanvas({ palette, canvas, inspector }) {\n  return (\n    <div\n      className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden md:flex-row\"\n      data-testid=\"dashboard-editor-panes\"\n    >\n      {palette}\n      <main className=\"relative min-h-0 min-w-0 flex-1 overflow-hidden\">{canvas}</main>\n      {inspector}\n    </div>\n  );\n});\n"],"mappings":";;;AAgBA,IAAa,IAAwC,EAAK,SAAuB,EAAE,YAAS,WAAQ,gBAAa;AAC/G,QACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIG;GACD,kBAAC,QAAD;IAAM,WAAU;cAAmD;IAAc,CAAA;GAChF;GACG;;EAER"}

package/dist/bigconsole/components/builder/BuilderTopbar.js

@@ -5,7 +5,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/BuilderTopbar.tsx
 var a = e(function({ title: e, onBack: a, actions: o }) {
 	return /* @__PURE__ */ i("header", {
-		className: "flex min-h-12 items-center gap-3 border-b border-border-default bg-bg-surface px-3 py-2",
+		className: "flex min-h-12 flex-wrap items-center gap-x-control-gap gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-surface px-3 py-2",
 		children: [
 			/* @__PURE__ */ i(n, {
 				onClick: a,
@@ -16,12 +16,12 @@ var a = e(function({ title: e, onBack: a, actions: o }) {
 				children: [/* @__PURE__ */ r(t, { className: "mr-2 size-4" }), "Back"]
 			}),
 			/* @__PURE__ */ r("h1", {
-				className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary",
+				className: "min-w-0 flex-1 truncate text-base font-semibold tracking-tight text-text-primary",
 				title: e,
 				children: e
 			}),
 			o && /* @__PURE__ */ r("div", {
-				className: "flex flex-shrink-0 items-center gap-2",
+				className: "flex flex-shrink-0 flex-wrap items-center gap-2",
 				children: o
 			})
 		]

package/dist/bigconsole/components/builder/BuilderTopbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderTopbar.js","names":[],"sources":["../../../../src/bigconsole/components/builder/BuilderTopbar.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\n\nexport interface BuilderTopbarProps {\n  title: string;\n  onBack: () => void;\n  actions?: ReactNode;\n}\n\n/** Route-level navigation and identity for the dashboard editor. */\nexport const BuilderTopbar: FC<BuilderTopbarProps> = memo(function BuilderTopbar({ title, onBack, actions }) {\n  return (\n    <header className=\"flex min-h-12 items-center gap-3 border-b border-border-default bg-bg-surface px-3 py-2\">\n      <Button onClick={onBack} variant=\"ghost\" size=\"sm\" title=\"Back to Dashboards\" aria-label=\"Back to Dashboards\">\n        <ArrowLeft className=\"mr-2 size-4\" />\n        Back\n      </Button>\n      <h1 className=\"min-w-0 flex-1 truncate text-sm font-semibold text-text-primary\" title={title}>\n        {title}\n      </h1>\n      {actions && <div className=\"flex flex-shrink-0 items-center gap-2\">{actions}</div>}\n    </header>\n  );\n});\n"],"mappings":";;;;;AAWA,IAAa,IAAwC,EAAK,SAAuB,EAAE,UAAO,WAAQ,cAAW;AAC3G,QACE,kBAAC,UAAD;EAAQ,WAAU;YAAlB;GACE,kBAAC,GAAD;IAAQ,SAAS;IAAQ,SAAQ;IAAQ,MAAK;IAAK,OAAM;IAAqB,cAAW;cAAzF,CACE,kBAAC,GAAD,EAAW,WAAU,eAAgB,CAAA,EAAA,OAE9B;;GACT,kBAAC,MAAD;IAAI,WAAU;IAAyE;cACpF;IACE,CAAA;GACJ,KAAW,kBAAC,OAAD;IAAK,WAAU;cAAyC;IAAc,CAAA;GAC3E;;EAEX"}
+{"version":3,"file":"BuilderTopbar.js","names":[],"sources":["../../../../src/bigconsole/components/builder/BuilderTopbar.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\n\nexport interface BuilderTopbarProps {\n  title: string;\n  onBack: () => void;\n  actions?: ReactNode;\n}\n\n/**\n * Route-level navigation and identity for the dashboard editor.\n *\n * This is the route's `h1`, so it is set heavier than the section titles below\n * it; previously it was `text-sm`, i.e. lighter than the dashboard title in the\n * toolbar directly beneath, which made two adjacent bars compete (BOFF-5636).\n * The bar is a `bare` structural strip — spacing and a seam, no card surface.\n */\nexport const BuilderTopbar: FC<BuilderTopbarProps> = memo(function BuilderTopbar({ title, onBack, actions }) {\n  return (\n    <header className=\"flex min-h-12 flex-wrap items-center gap-x-control-gap gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-surface px-3 py-2\">\n      <Button onClick={onBack} variant=\"ghost\" size=\"sm\" title=\"Back to Dashboards\" aria-label=\"Back to Dashboards\">\n        <ArrowLeft className=\"mr-2 size-4\" />\n        Back\n      </Button>\n      <h1 className=\"min-w-0 flex-1 truncate text-base font-semibold tracking-tight text-text-primary\" title={title}>\n        {title}\n      </h1>\n      {actions && <div className=\"flex flex-shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n    </header>\n  );\n});\n"],"mappings":";;;;;AAkBA,IAAa,IAAwC,EAAK,SAAuB,EAAE,UAAO,WAAQ,cAAW;AAC3G,QACE,kBAAC,UAAD;EAAQ,WAAU;YAAlB;GACE,kBAAC,GAAD;IAAQ,SAAS;IAAQ,SAAQ;IAAQ,MAAK;IAAK,OAAM;IAAqB,cAAW;cAAzF,CACE,kBAAC,GAAD,EAAW,WAAU,eAAgB,CAAA,EAAA,OAE9B;;GACT,kBAAC,MAAD;IAAI,WAAU;IAA0F;cACrG;IACE,CAAA;GACJ,KAAW,kBAAC,OAAD;IAAK,WAAU;cAAmD;IAAc,CAAA;GACrF;;EAEX"}

package/dist/bigconsole/components/builder/inspector/AdvancedSection.js

@@ -1,45 +1,44 @@
-import { memo as e } from "react";
-import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "@burdenoff/fe-libs/ui";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Section as e } from "../../common/Section.js";
+import "../../common/index.js";
+import { memo as t } from "react";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "@burdenoff/fe-libs/ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/inspector/AdvancedSection.tsx
-var c = e(function({ renderer: e, rendererOptions: c, onRendererChange: l, templateEditor: u }) {
-	let d = c.find((t) => t.value === e);
-	return /* @__PURE__ */ s("section", {
-		className: "border-t border-border-default pt-4",
-		"aria-labelledby": "widget-advanced-renderer-heading",
+var l = t(function({ renderer: t, rendererOptions: l, onRendererChange: u, templateEditor: d }) {
+	let f = l.find((e) => e.value === t);
+	return /* @__PURE__ */ c(e, {
+		id: "widget-advanced-renderer",
+		title: "Renderer",
+		description: "Which engine draws this widget's body. Non-native renderers take a JSON template.",
+		"data-testid": "widget-inspector-renderer",
 		children: [
-			/* @__PURE__ */ o("h3", {
-				id: "widget-advanced-renderer-heading",
-				className: "mb-1 text-sm font-semibold text-text-primary",
-				children: "Renderer"
-			}),
-			/* @__PURE__ */ s(t, {
-				value: e,
-				onValueChange: (e) => l(e),
-				children: [/* @__PURE__ */ o(i, {
-					className: "h-9 text-sm",
-					children: /* @__PURE__ */ o(a, { placeholder: "Select renderer" })
-				}), /* @__PURE__ */ o(n, {
+			/* @__PURE__ */ c(n, {
+				value: t,
+				onValueChange: (e) => u(e),
+				children: [/* @__PURE__ */ s(a, {
+					className: "h-control-md text-sm",
+					children: /* @__PURE__ */ s(o, { placeholder: "Select renderer" })
+				}), /* @__PURE__ */ s(r, {
 					position: "popper",
 					side: "bottom",
 					sideOffset: 4,
 					align: "start",
 					className: "max-h-52",
-					children: c.map((e) => /* @__PURE__ */ o(r, {
+					children: l.map((e) => /* @__PURE__ */ s(i, {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})]
 			}),
-			d && /* @__PURE__ */ o("p", {
+			f && /* @__PURE__ */ s("p", {
 				className: "mt-1 text-sm text-text-muted",
-				children: d.description
+				children: f.description
 			}),
-			u
+			d
 		]
 	});
 });
 //#endregion
-export { c as AdvancedSection };
+export { l as AdvancedSection };
 
 //# sourceMappingURL=AdvancedSection.js.map

package/dist/bigconsole/components/builder/inspector/AdvancedSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/AdvancedSection.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@burdenoff/fe-libs/ui';\nimport type { RendererType } from '../../../types';\n\nexport interface AdvancedRendererOption {\n  value: RendererType;\n  label: string;\n  description: string;\n}\n\nexport interface AdvancedSectionProps {\n  renderer: RendererType;\n  rendererOptions: AdvancedRendererOption[];\n  onRendererChange: (renderer: RendererType) => void;\n  templateEditor?: ReactNode;\n}\n\n/** Renderer/template controls; actions and integrations migrate here next. */\nexport const AdvancedSection: FC<AdvancedSectionProps> = memo(function AdvancedSection({\n  renderer,\n  rendererOptions,\n  onRendererChange,\n  templateEditor,\n}) {\n  const selectedOption = rendererOptions.find((option) => option.value === renderer);\n\n  return (\n    <section className=\"border-t border-border-default pt-4\" aria-labelledby=\"widget-advanced-renderer-heading\">\n      <h3 id=\"widget-advanced-renderer-heading\" className=\"mb-1 text-sm font-semibold text-text-primary\">\n        Renderer\n      </h3>\n      <Select value={renderer} onValueChange={(value) => onRendererChange(value as RendererType)}>\n        <SelectTrigger className=\"h-9 text-sm\">\n          <SelectValue placeholder=\"Select renderer\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\" side=\"bottom\" sideOffset={4} align=\"start\" className=\"max-h-52\">\n          {rendererOptions.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      {selectedOption && <p className=\"mt-1 text-sm text-text-muted\">{selectedOption.description}</p>}\n      {templateEditor}\n    </section>\n  );\n});\n"],"mappings":";;;;AAkBA,IAAa,IAA4C,EAAK,SAAyB,EACrF,aACA,oBACA,qBACA,qBACC;CACD,IAAM,IAAiB,EAAgB,MAAM,MAAW,EAAO,UAAU,EAAS;AAElF,QACE,kBAAC,WAAD;EAAS,WAAU;EAAsC,mBAAgB;YAAzE;GACE,kBAAC,MAAD;IAAI,IAAG;IAAmC,WAAU;cAA+C;IAE9F,CAAA;GACL,kBAAC,GAAD;IAAQ,OAAO;IAAU,gBAAgB,MAAU,EAAiB,EAAsB;cAA1F,CACE,kBAAC,GAAD;KAAe,WAAU;eACvB,kBAAC,GAAD,EAAa,aAAY,mBAAoB,CAAA;KAC/B,CAAA,EAChB,kBAAC,GAAD;KAAe,UAAS;KAAS,MAAK;KAAS,YAAY;KAAG,OAAM;KAAQ,WAAU;eACnF,EAAgB,KAAK,MACpB,kBAAC,GAAD;MAA+B,OAAO,EAAO;gBAC1C,EAAO;MACG,EAFI,EAAO,MAEX,CACb;KACY,CAAA,CACT;;GACR,KAAkB,kBAAC,KAAD;IAAG,WAAU;cAAgC,EAAe;IAAgB,CAAA;GAC9F;GACO;;EAEZ"}
+{"version":3,"file":"AdvancedSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/AdvancedSection.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo } from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@burdenoff/fe-libs/ui';\nimport type { RendererType } from '../../../types';\nimport { Section } from '../../common';\n\nexport interface AdvancedRendererOption {\n  value: RendererType;\n  label: string;\n  description: string;\n}\n\nexport interface AdvancedSectionProps {\n  renderer: RendererType;\n  rendererOptions: AdvancedRendererOption[];\n  onRendererChange: (renderer: RendererType) => void;\n  templateEditor?: ReactNode;\n}\n\n/** Renderer/template controls; actions and integrations migrate here next. */\nexport const AdvancedSection: FC<AdvancedSectionProps> = memo(function AdvancedSection({\n  renderer,\n  rendererOptions,\n  onRendererChange,\n  templateEditor,\n}) {\n  const selectedOption = rendererOptions.find((option) => option.value === renderer);\n\n  return (\n    <Section\n      id=\"widget-advanced-renderer\"\n      title=\"Renderer\"\n      description=\"Which engine draws this widget's body. Non-native renderers take a JSON template.\"\n      data-testid=\"widget-inspector-renderer\"\n    >\n      <Select value={renderer} onValueChange={(value) => onRendererChange(value as RendererType)}>\n        <SelectTrigger className=\"h-control-md text-sm\">\n          <SelectValue placeholder=\"Select renderer\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\" side=\"bottom\" sideOffset={4} align=\"start\" className=\"max-h-52\">\n          {rendererOptions.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      {selectedOption && <p className=\"mt-1 text-sm text-text-muted\">{selectedOption.description}</p>}\n      {templateEditor}\n    </Section>\n  );\n});\n"],"mappings":";;;;;;AAmBA,IAAa,IAA4C,EAAK,SAAyB,EACrF,aACA,oBACA,qBACA,qBACC;CACD,IAAM,IAAiB,EAAgB,MAAM,MAAW,EAAO,UAAU,EAAS;AAElF,QACE,kBAAC,GAAD;EACE,IAAG;EACH,OAAM;EACN,aAAY;EACZ,eAAY;YAJd;GAME,kBAAC,GAAD;IAAQ,OAAO;IAAU,gBAAgB,MAAU,EAAiB,EAAsB;cAA1F,CACE,kBAAC,GAAD;KAAe,WAAU;eACvB,kBAAC,GAAD,EAAa,aAAY,mBAAoB,CAAA;KAC/B,CAAA,EAChB,kBAAC,GAAD;KAAe,UAAS;KAAS,MAAK;KAAS,YAAY;KAAG,OAAM;KAAQ,WAAU;eACnF,EAAgB,KAAK,MACpB,kBAAC,GAAD;MAA+B,OAAO,EAAO;gBAC1C,EAAO;MACG,EAFI,EAAO,MAEX,CACb;KACY,CAAA,CACT;;GACR,KAAkB,kBAAC,KAAD;IAAG,WAAU;cAAgC,EAAe;IAAgB,CAAA;GAC9F;GACO;;EAEZ"}

package/dist/bigconsole/components/builder/inspector/AppearanceSection.js

@@ -1,45 +1,56 @@
-import e from "../../widgets/chart/ChartConfig.js";
-import t from "../../widgets/gauge/GaugeConfig.js";
-import n from "../../widgets/heatmap/HeatmapConfig.js";
-import r from "../../widgets/list/ListConfig.js";
-import i from "../../widgets/metric-card/MetricCardConfig.js";
-import a from "../../widgets/progress/ProgressConfig.js";
-import o from "../../widgets/table/TableConfig.js";
-import { memo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { Section as e } from "../../common/Section.js";
+import "../../common/index.js";
+import t from "../../widgets/chart/ChartConfig.js";
+import n from "../../widgets/gauge/GaugeConfig.js";
+import r from "../../widgets/heatmap/HeatmapConfig.js";
+import i from "../../widgets/list/ListConfig.js";
+import a from "../../widgets/metric-card/MetricCardConfig.js";
+import o from "../../widgets/progress/ProgressConfig.js";
+import s from "../../widgets/table/TableConfig.js";
+import { memo as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/inspector/AppearanceSection.tsx
-function l(e) {
+function u(e) {
 	return e;
 }
-function u(s) {
-	switch (s) {
+function d(e) {
+	switch (e) {
 		case "metric_card":
-		case "kpi_card_comparison": return l(i);
+		case "kpi_card_comparison": return u(a);
 		case "chart":
-		case "funnel_chart": return l(e);
+		case "funnel_chart": return u(t);
 		case "table":
-		case "pivot_table": return l(o);
-		case "gauge": return l(t);
-		case "progress": return l(a);
-		case "list": return l(r);
-		case "heatmap": return l(n);
+		case "pivot_table": return u(s);
+		case "gauge": return u(n);
+		case "progress": return u(o);
+		case "list": return u(i);
+		case "heatmap": return u(r);
 		default: return null;
 	}
 }
-var d = s(function({ widgetType: e, config: t, onChange: n }) {
-	let r = u(e);
-	return r ? /* @__PURE__ */ c(r, {
-		config: t,
-		onChange: n
-	}) : /* @__PURE__ */ c("div", {
-		className: "rounded-lg bg-bg-sunken p-4 text-center",
-		children: /* @__PURE__ */ c("p", {
+var f = c(function({ widgetType: t, config: n, onChange: r }) {
+	let i = d(t);
+	return i ? /* @__PURE__ */ l(e, {
+		title: "Style",
+		description: "Presentation options for this widget type. Data and identity live on the other tabs.",
+		"data-testid": "widget-inspector-style",
+		children: /* @__PURE__ */ l(i, {
+			config: n,
+			onChange: r
+		})
+	}) : /* @__PURE__ */ l(e, {
+		tone: "info",
+		padding: "compact",
+		title: "No style options",
+		headingLevel: 3,
+		"data-testid": "widget-inspector-style-empty",
+		children: /* @__PURE__ */ l("p", {
 			className: "text-sm text-text-secondary",
-			children: "No style options for this widget type"
+			children: "This widget type renders from its data and template, so there is nothing to style here."
 		})
 	});
 });
 //#endregion
-export { d as AppearanceSection };
+export { f as AppearanceSection };
 
 //# sourceMappingURL=AppearanceSection.js.map

package/dist/bigconsole/components/builder/inspector/AppearanceSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/AppearanceSection.tsx"],"sourcesContent":["import { type ComponentType, type FC, memo } from 'react';\nimport type { WidgetType } from '../../../types';\nimport { MetricCardConfig } from '../../widgets/metric-card/MetricCardConfig';\nimport { ChartConfig } from '../../widgets/chart/ChartConfig';\nimport { TableConfig } from '../../widgets/table/TableConfig';\nimport { GaugeConfig } from '../../widgets/gauge/GaugeConfig';\nimport { ProgressConfig } from '../../widgets/progress/ProgressConfig';\nimport { ListConfig } from '../../widgets/list/ListConfig';\nimport { HeatmapConfig } from '../../widgets/heatmap/HeatmapConfig';\n\ninterface ConfigComponentProps {\n  config: never;\n  onChange: (config: never) => void;\n}\n\n// Legacy widget config components expose distinct config interfaces even though\n// they share the same runtime { config, onChange } contract. Keep the narrowing\n// cast in this adapter instead of spreading `never` casts across inspector code.\nfunction asConfigComponent(component: ComponentType<unknown>): ComponentType<ConfigComponentProps> {\n  return component as unknown as ComponentType<ConfigComponentProps>;\n}\n\nexport interface AppearanceSectionProps {\n  widgetType: WidgetType;\n  config: Record<string, unknown>;\n  onChange: (config: Record<string, unknown>) => void;\n}\n\nfunction getConfigComponent(type: WidgetType): ComponentType<ConfigComponentProps> | null {\n  switch (type) {\n    case 'metric_card':\n    case 'kpi_card_comparison':\n      return asConfigComponent(MetricCardConfig as ComponentType<unknown>);\n    case 'chart':\n    case 'funnel_chart':\n      return asConfigComponent(ChartConfig as ComponentType<unknown>);\n    case 'table':\n    case 'pivot_table':\n      return asConfigComponent(TableConfig as ComponentType<unknown>);\n    case 'gauge':\n      return asConfigComponent(GaugeConfig as ComponentType<unknown>);\n    case 'progress':\n      return asConfigComponent(ProgressConfig as ComponentType<unknown>);\n    case 'list':\n      return asConfigComponent(ListConfig as ComponentType<unknown>);\n    case 'heatmap':\n      return asConfigComponent(HeatmapConfig as ComponentType<unknown>);\n    default:\n      return null;\n  }\n}\n\n/** Widget-specific visual configuration with a shared empty state. */\nexport const AppearanceSection: FC<AppearanceSectionProps> = memo(function AppearanceSection({\n  widgetType,\n  config,\n  onChange,\n}) {\n  const ConfigComponent = getConfigComponent(widgetType);\n\n  if (!ConfigComponent) {\n    return (\n      <div className=\"rounded-lg bg-bg-sunken p-4 text-center\">\n        <p className=\"text-sm text-text-secondary\">No style options for this widget type</p>\n      </div>\n    );\n  }\n\n  return <ConfigComponent config={config as never} onChange={onChange as (config: never) => void} />;\n});\n"],"mappings":";;;;;;;;;;AAkBA,SAAS,EAAkB,GAAwE;AACjG,QAAO;;AAST,SAAS,EAAmB,GAA8D;AACxF,SAAQ,GAAR;EACE,KAAK;EACL,KAAK,sBACH,QAAO,EAAkB,EAA2C;EACtE,KAAK;EACL,KAAK,eACH,QAAO,EAAkB,EAAsC;EACjE,KAAK;EACL,KAAK,cACH,QAAO,EAAkB,EAAsC;EACjE,KAAK,QACH,QAAO,EAAkB,EAAsC;EACjE,KAAK,WACH,QAAO,EAAkB,EAAyC;EACpE,KAAK,OACH,QAAO,EAAkB,EAAqC;EAChE,KAAK,UACH,QAAO,EAAkB,EAAwC;EACnE,QACE,QAAO;;;AAKb,IAAa,IAAgD,EAAK,SAA2B,EAC3F,eACA,WACA,eACC;CACD,IAAM,IAAkB,EAAmB,EAAW;AAUtD,QARK,IAQE,kBAAC,GAAD;EAAyB;EAA2B;EAAuC,CAAA,GAN9F,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAA8B;GAAyC,CAAA;EAChF,CAAA;EAKV"}
+{"version":3,"file":"AppearanceSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/AppearanceSection.tsx"],"sourcesContent":["import { type ComponentType, type FC, memo } from 'react';\nimport type { WidgetType } from '../../../types';\nimport { Section } from '../../common';\nimport { MetricCardConfig } from '../../widgets/metric-card/MetricCardConfig';\nimport { ChartConfig } from '../../widgets/chart/ChartConfig';\nimport { TableConfig } from '../../widgets/table/TableConfig';\nimport { GaugeConfig } from '../../widgets/gauge/GaugeConfig';\nimport { ProgressConfig } from '../../widgets/progress/ProgressConfig';\nimport { ListConfig } from '../../widgets/list/ListConfig';\nimport { HeatmapConfig } from '../../widgets/heatmap/HeatmapConfig';\n\ninterface ConfigComponentProps {\n  config: never;\n  onChange: (config: never) => void;\n}\n\n// Legacy widget config components expose distinct config interfaces even though\n// they share the same runtime { config, onChange } contract. Keep the narrowing\n// cast in this adapter instead of spreading `never` casts across inspector code.\nfunction asConfigComponent(component: ComponentType<unknown>): ComponentType<ConfigComponentProps> {\n  return component as unknown as ComponentType<ConfigComponentProps>;\n}\n\nexport interface AppearanceSectionProps {\n  widgetType: WidgetType;\n  config: Record<string, unknown>;\n  onChange: (config: Record<string, unknown>) => void;\n}\n\nfunction getConfigComponent(type: WidgetType): ComponentType<ConfigComponentProps> | null {\n  switch (type) {\n    case 'metric_card':\n    case 'kpi_card_comparison':\n      return asConfigComponent(MetricCardConfig as ComponentType<unknown>);\n    case 'chart':\n    case 'funnel_chart':\n      return asConfigComponent(ChartConfig as ComponentType<unknown>);\n    case 'table':\n    case 'pivot_table':\n      return asConfigComponent(TableConfig as ComponentType<unknown>);\n    case 'gauge':\n      return asConfigComponent(GaugeConfig as ComponentType<unknown>);\n    case 'progress':\n      return asConfigComponent(ProgressConfig as ComponentType<unknown>);\n    case 'list':\n      return asConfigComponent(ListConfig as ComponentType<unknown>);\n    case 'heatmap':\n      return asConfigComponent(HeatmapConfig as ComponentType<unknown>);\n    default:\n      return null;\n  }\n}\n\n/** Widget-specific visual configuration with a shared empty state. */\nexport const AppearanceSection: FC<AppearanceSectionProps> = memo(function AppearanceSection({\n  widgetType,\n  config,\n  onChange,\n}) {\n  const ConfigComponent = getConfigComponent(widgetType);\n\n  if (!ConfigComponent) {\n    return (\n      <Section\n        tone=\"info\"\n        padding=\"compact\"\n        title=\"No style options\"\n        headingLevel={3}\n        data-testid=\"widget-inspector-style-empty\"\n      >\n        <p className=\"text-sm text-text-secondary\">\n          This widget type renders from its data and template, so there is nothing to style here.\n        </p>\n      </Section>\n    );\n  }\n\n  return (\n    <Section\n      title=\"Style\"\n      description=\"Presentation options for this widget type. Data and identity live on the other tabs.\"\n      data-testid=\"widget-inspector-style\"\n    >\n      <ConfigComponent config={config as never} onChange={onChange as (config: never) => void} />\n    </Section>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAS,EAAkB,GAAwE;AACjG,QAAO;;AAST,SAAS,EAAmB,GAA8D;AACxF,SAAQ,GAAR;EACE,KAAK;EACL,KAAK,sBACH,QAAO,EAAkB,EAA2C;EACtE,KAAK;EACL,KAAK,eACH,QAAO,EAAkB,EAAsC;EACjE,KAAK;EACL,KAAK,cACH,QAAO,EAAkB,EAAsC;EACjE,KAAK,QACH,QAAO,EAAkB,EAAsC;EACjE,KAAK,WACH,QAAO,EAAkB,EAAyC;EACpE,KAAK,OACH,QAAO,EAAkB,EAAqC;EAChE,KAAK,UACH,QAAO,EAAkB,EAAwC;EACnE,QACE,QAAO;;;AAKb,IAAa,IAAgD,EAAK,SAA2B,EAC3F,eACA,WACA,eACC;CACD,IAAM,IAAkB,EAAmB,EAAW;AAkBtD,QAhBK,IAiBH,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,eAAY;YAEZ,kBAAC,GAAD;GAAyB;GAA2B;GAAuC,CAAA;EACnF,CAAA,GArBR,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,OAAM;EACN,cAAc;EACd,eAAY;YAEZ,kBAAC,KAAD;GAAG,WAAU;aAA8B;GAEvC,CAAA;EACI,CAAA;EAad"}

package/dist/bigconsole/components/builder/inspector/DataBindingSection.js

@@ -1,120 +1,158 @@
-import e from "../../parser/DataSinkSelector.js";
-import t from "../../parser/ParserSelector.js";
-import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Input as r, Label as i, Spinner as a } from "@burdenoff/fe-libs/ui";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Section as e, SectionStack as t } from "../../common/Section.js";
+import "../../common/index.js";
+import n from "../../parser/DataSinkSelector.js";
+import r from "../../parser/ParserSelector.js";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Input as a, Label as o, Spinner as s } from "@burdenoff/fe-libs/ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/inspector/DataBindingSection.tsx
-var c = ({ consoleId: c, binding: l, dataSinkKey: u, dataPath: d, status: f, missingFields: p = [], preview: m, error: h, onDataSinkChange: g, onParserChange: _, onDataPathChange: v }) => {
-	let { t: y } = n(), b = {
-		unbound: y("bigconsole.builder.dataBinding.status.unbound", "Select a DataSink to begin"),
-		loading: y("bigconsole.builder.dataBinding.status.loading", "Testing parser and detecting fields…"),
-		bound: y("bigconsole.builder.dataBinding.status.bound", "Binding ready"),
-		no_data: y("bigconsole.builder.dataBinding.status.noData", "Parser returned no data"),
-		parser_error: y("bigconsole.builder.dataBinding.status.parserError", "Parser test failed"),
-		field_mismatch: y("bigconsole.builder.dataBinding.status.fieldMismatch", "Some mapped fields were not found")
+var u = {
+	unbound: "info",
+	loading: "info",
+	bound: "success",
+	no_data: "warning",
+	parser_error: "danger",
+	field_mismatch: "warning"
+}, d = ({ consoleId: d, binding: f, dataSinkKey: p, dataPath: m, status: h, missingFields: g = [], preview: _, error: v, onDataSinkChange: y, onParserChange: b, onDataPathChange: x }) => {
+	let { t: S } = i(), C = {
+		unbound: S("bigconsole.builder.dataBinding.status.unbound", "Select a DataSink to begin"),
+		loading: S("bigconsole.builder.dataBinding.status.loading", "Testing parser and detecting fields…"),
+		bound: S("bigconsole.builder.dataBinding.status.bound", "Binding ready"),
+		no_data: S("bigconsole.builder.dataBinding.status.noData", "Parser returned no data"),
+		parser_error: S("bigconsole.builder.dataBinding.status.parserError", "Parser test failed"),
+		field_mismatch: S("bigconsole.builder.dataBinding.status.fieldMismatch", "Some mapped fields were not found")
 	};
-	return /* @__PURE__ */ s("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ o("div", {
-				className: "rounded-md border border-border-subtle bg-bg-sunken p-3",
-				children: /* @__PURE__ */ o("p", {
-					className: "text-xs text-text-secondary",
-					children: y("bigconsole.builder.dataBinding.intro", "Connect this widget to a DataSink and Parser to display transformed data.")
-				})
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ o(i, { children: y("bigconsole.builder.dataBinding.dataSinkLabel", "DataSink") }),
-					/* @__PURE__ */ o(e, {
-						value: u,
-						onChange: g,
-						placeholder: y("bigconsole.builder.dataBinding.dataSinkPlaceholder", "Select a DataSink...")
-					}),
-					u && /* @__PURE__ */ s("p", {
-						className: "text-xs text-text-secondary",
-						children: [y("bigconsole.builder.dataBinding.keyLabel", "Key: {{key}}", { key: u }), l.source.ref && /* @__PURE__ */ o("span", {
-							className: "ml-2 text-text-tertiary",
-							children: y("bigconsole.builder.dataBinding.idLabel", "ID: {{id}}...", { id: l.source.ref.slice(0, 8) })
-						})]
-					})
-				]
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ o(i, { children: y("bigconsole.builder.dataBinding.parserLabel", "Parser") }),
-					/* @__PURE__ */ o(t, {
-						consoleId: c,
-						value: l.parserId ?? null,
-						onChange: _,
-						filterInputSinkKey: u ?? void 0,
+	return /* @__PURE__ */ l(t, { children: [
+		/* @__PURE__ */ c(e, {
+			title: "Data source",
+			description: S("bigconsole.builder.dataBinding.intro", "Connect this widget to a DataSink and Parser to display transformed data."),
+			"data-testid": "widget-inspector-data-source",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-form-gap",
+				children: [/* @__PURE__ */ l("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ c(o, { children: S("bigconsole.builder.dataBinding.dataSinkLabel", "DataSink") }),
+						/* @__PURE__ */ c(n, {
+							value: p,
+							onChange: y,
+							placeholder: S("bigconsole.builder.dataBinding.dataSinkPlaceholder", "Select a DataSink...")
+						}),
+						p && /* @__PURE__ */ l("p", {
+							className: "text-xs text-text-secondary",
+							children: [S("bigconsole.builder.dataBinding.keyLabel", "Key: {{key}}", { key: p }), f.source.ref && /* @__PURE__ */ c("span", {
+								className: "ml-2 text-text-muted",
+								children: S("bigconsole.builder.dataBinding.idLabel", "ID: {{id}}...", { id: f.source.ref.slice(0, 8) })
+							})]
+						})
+					]
+				}), /* @__PURE__ */ l("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ c(o, { children: S("bigconsole.builder.dataBinding.parserLabel", "Parser") }), /* @__PURE__ */ c(r, {
+						consoleId: d,
+						value: f.parserId ?? null,
+						onChange: b,
+						filterInputSinkKey: p ?? void 0,
 						filterStatus: void 0,
-						placeholder: u ? y("bigconsole.builder.dataBinding.parserPlaceholder", "Select a parser...") : y("bigconsole.builder.dataBinding.parserPlaceholderNoSink", "Select a DataSink first..."),
-						disabled: !u
+						placeholder: p ? S("bigconsole.builder.dataBinding.parserPlaceholder", "Select a parser...") : S("bigconsole.builder.dataBinding.parserPlaceholderNoSink", "Select a DataSink first..."),
+						disabled: !p
+					})]
+				})]
+			})
+		}),
+		/* @__PURE__ */ c(e, {
+			title: C[h],
+			tone: u[h],
+			padding: "compact",
+			headingLevel: 3,
+			icon: h === "loading" ? /* @__PURE__ */ c(s, { style: {
+				width: "14px",
+				height: "14px"
+			} }) : void 0,
+			"data-testid": "widget-inspector-binding-status",
+			children: /* @__PURE__ */ l("div", {
+				role: "status",
+				"aria-live": "polite",
+				className: "min-w-0 space-y-1",
+				children: [
+					/* @__PURE__ */ c("p", {
+						className: "sr-only",
+						children: C[h]
 					}),
-					/* @__PURE__ */ s("p", {
-						className: "flex items-center gap-1 text-xs text-text-secondary",
-						role: "status",
-						children: [f === "loading" && /* @__PURE__ */ o(a, { style: {
-							width: "12px",
-							height: "12px"
-						} }), b[f]]
+					v && /* @__PURE__ */ c("p", {
+						className: "break-words text-xs text-[var(--color-status-error-text)]",
+						children: v
 					}),
-					h && /* @__PURE__ */ o("p", {
-						className: "text-xs text-status-error-text",
-						children: h
+					g.length > 0 && /* @__PURE__ */ c("p", {
+						className: "break-words text-xs text-[var(--color-status-warning-text)]",
+						children: S("bigconsole.builder.dataBinding.missingFields", "Missing: {{fields}}", { fields: g.join(", ") })
 					}),
-					p.length > 0 && /* @__PURE__ */ o("p", {
-						className: "text-xs text-status-warning-text",
-						children: y("bigconsole.builder.dataBinding.missingFields", "Missing: {{fields}}", { fields: p.join(", ") })
+					!v && g.length === 0 && h === "bound" && /* @__PURE__ */ c("p", {
+						className: "text-xs text-text-secondary",
+						children: "The parser ran and its output matches the fields this widget expects."
 					})
 				]
-			}),
-			l.parserId && Object.keys(l.fields).length > 0 && /* @__PURE__ */ s("div", {
-				className: "rounded-md border border-status-success-border bg-status-success-bg-subtle p-3",
-				children: [/* @__PURE__ */ o("p", {
-					className: "mb-2 text-xs font-medium text-status-success-text",
-					children: y("bigconsole.builder.dataBinding.fieldMappingsConfigured", "Field mappings configured")
-				}), /* @__PURE__ */ o("div", {
-					className: "space-y-1 text-xs text-text-secondary",
-					children: Object.entries(l.fields).map(([e, t]) => /* @__PURE__ */ s("p", { children: [
+			})
+		}),
+		f.parserId && Object.keys(f.fields).length > 0 && /* @__PURE__ */ c(e, {
+			emphasis: "muted",
+			padding: "compact",
+			title: S("bigconsole.builder.dataBinding.fieldMappingsConfigured", "Field mappings configured"),
+			headingLevel: 3,
+			children: /* @__PURE__ */ c("div", {
+				className: "min-w-0 space-y-1 text-xs text-text-secondary",
+				children: Object.entries(f.fields).map(([e, t]) => /* @__PURE__ */ l("p", {
+					className: "break-words",
+					children: [
 						e,
 						": ",
-						/* @__PURE__ */ o("code", {
-							className: "rounded bg-bg-sunken px-1",
+						/* @__PURE__ */ c("code", {
+							className: "rounded bg-bg-surface px-1 font-mono",
 							children: t
 						})
-					] }, e))
-				})]
-			}),
-			m !== void 0 && /* @__PURE__ */ s("div", {
-				className: "space-y-2",
-				children: [/* @__PURE__ */ o(i, { children: y("bigconsole.builder.dataBinding.livePreviewLabel", "Live Preview") }), /* @__PURE__ */ o("pre", {
-					className: "max-h-40 overflow-auto rounded-md border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary",
-					children: JSON.stringify(m, null, 2)
-				})]
-			}),
-			/* @__PURE__ */ s("div", {
+					]
+				}, e))
+			})
+		}),
+		_ !== void 0 && /* @__PURE__ */ c(e, {
+			emphasis: "muted",
+			padding: "compact",
+			title: S("bigconsole.builder.dataBinding.livePreviewLabel", "Live Preview"),
+			description: "Raw parser output, exactly as the widget receives it.",
+			headingLevel: 3,
+			children: /* @__PURE__ */ c("pre", {
+				className: "max-h-40 min-w-0 overflow-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-surface p-3 text-xs text-text-secondary",
+				children: JSON.stringify(_, null, 2)
+			})
+		}),
+		/* @__PURE__ */ c(e, {
+			emphasis: "muted",
+			padding: "compact",
+			title: "Data path",
+			headingLevel: 3,
+			children: /* @__PURE__ */ l("div", {
 				className: "space-y-2",
 				children: [
-					/* @__PURE__ */ o(i, { children: y("bigconsole.builder.dataBinding.dataPathLabel", "Data Path (Optional)") }),
-					/* @__PURE__ */ o(r, {
-						value: d ?? "",
-						onChange: (e) => v(e.target.value || void 0),
-						placeholder: y("bigconsole.builder.dataBinding.dataPathPlaceholder", "e.g., summary.totalRevenue")
+					/* @__PURE__ */ c(o, {
+						htmlFor: "widget-inspector-data-path",
+						children: S("bigconsole.builder.dataBinding.dataPathLabel", "Data Path (Optional)")
+					}),
+					/* @__PURE__ */ c(a, {
+						id: "widget-inspector-data-path",
+						value: m ?? "",
+						onChange: (e) => x(e.target.value || void 0),
+						placeholder: S("bigconsole.builder.dataBinding.dataPathPlaceholder", "e.g., summary.totalRevenue")
 					}),
-					/* @__PURE__ */ o("p", {
+					/* @__PURE__ */ c("p", {
 						className: "text-xs text-text-secondary",
-						children: y("bigconsole.builder.dataBinding.dataPathHelp", "Path to extract specific data from the parser output (dot notation)")
+						children: S("bigconsole.builder.dataBinding.dataPathHelp", "Path to extract specific data from the parser output (dot notation)")
 					})
 				]
 			})
-		]
-	});
+		})
+	] });
 };
 //#endregion
-export { c as DataBindingSection };
+export { d as DataBindingSection };
 
 //# sourceMappingURL=DataBindingSection.js.map

package/dist/bigconsole/components/builder/inspector/DataBindingSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataBindingSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/DataBindingSection.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Input, Label, Spinner } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WidgetBinding, WidgetBindingStatus } from '../../../types';\nimport { DataSinkSelector } from '../../parser/DataSinkSelector';\nimport { ParserSelector } from '../../parser/ParserSelector';\n\nexport interface DataBindingSectionProps {\n  consoleId: string;\n  binding: WidgetBinding;\n  dataSinkKey: string | null;\n  dataPath?: string;\n  status: WidgetBindingStatus;\n  missingFields?: string[];\n  preview?: unknown;\n  error?: string | null;\n  onDataSinkChange: (key: string | null) => void;\n  onParserChange: (parserId: string | null) => void;\n  onDataPathChange: (path: string | undefined) => void;\n}\n\nexport const DataBindingSection: FC<DataBindingSectionProps> = ({\n  consoleId,\n  binding,\n  dataSinkKey,\n  dataPath,\n  status,\n  missingFields = [],\n  preview,\n  error,\n  onDataSinkChange,\n  onParserChange,\n  onDataPathChange,\n}) => {\n  const { t } = useI18n();\n\n  const statusLabels: Record<WidgetBindingStatus, string> = {\n    unbound: t('bigconsole.builder.dataBinding.status.unbound', 'Select a DataSink to begin'),\n    loading: t('bigconsole.builder.dataBinding.status.loading', 'Testing parser and detecting fields…'),\n    bound: t('bigconsole.builder.dataBinding.status.bound', 'Binding ready'),\n    no_data: t('bigconsole.builder.dataBinding.status.noData', 'Parser returned no data'),\n    parser_error: t('bigconsole.builder.dataBinding.status.parserError', 'Parser test failed'),\n    field_mismatch: t('bigconsole.builder.dataBinding.status.fieldMismatch', 'Some mapped fields were not found'),\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-md border border-border-subtle bg-bg-sunken p-3\">\n        <p className=\"text-xs text-text-secondary\">\n          {t(\n            'bigconsole.builder.dataBinding.intro',\n            'Connect this widget to a DataSink and Parser to display transformed data.'\n          )}\n        </p>\n      </div>\n\n      <div className=\"space-y-2\">\n        <Label>{t('bigconsole.builder.dataBinding.dataSinkLabel', 'DataSink')}</Label>\n        <DataSinkSelector\n          value={dataSinkKey}\n          onChange={onDataSinkChange}\n          placeholder={t('bigconsole.builder.dataBinding.dataSinkPlaceholder', 'Select a DataSink...')}\n        />\n        {dataSinkKey && (\n          <p className=\"text-xs text-text-secondary\">\n            {t('bigconsole.builder.dataBinding.keyLabel', 'Key: {{key}}', { key: dataSinkKey })}\n            {binding.source.ref && (\n              <span className=\"ml-2 text-text-tertiary\">\n                {t('bigconsole.builder.dataBinding.idLabel', 'ID: {{id}}...', {\n                  id: binding.source.ref.slice(0, 8),\n                })}\n              </span>\n            )}\n          </p>\n        )}\n      </div>\n\n      <div className=\"space-y-2\">\n        <Label>{t('bigconsole.builder.dataBinding.parserLabel', 'Parser')}</Label>\n        <ParserSelector\n          consoleId={consoleId}\n          value={binding.parserId ?? null}\n          onChange={onParserChange}\n          filterInputSinkKey={dataSinkKey ?? undefined}\n          filterStatus={undefined}\n          placeholder={\n            dataSinkKey\n              ? t('bigconsole.builder.dataBinding.parserPlaceholder', 'Select a parser...')\n              : t('bigconsole.builder.dataBinding.parserPlaceholderNoSink', 'Select a DataSink first...')\n          }\n          disabled={!dataSinkKey}\n        />\n        <p className=\"flex items-center gap-1 text-xs text-text-secondary\" role=\"status\">\n          {status === 'loading' && <Spinner style={{ width: '12px', height: '12px' }} />}\n          {statusLabels[status]}\n        </p>\n        {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n        {missingFields.length > 0 && (\n          <p className=\"text-xs text-status-warning-text\">\n            {t('bigconsole.builder.dataBinding.missingFields', 'Missing: {{fields}}', {\n              fields: missingFields.join(', '),\n            })}\n          </p>\n        )}\n      </div>\n\n      {binding.parserId && Object.keys(binding.fields).length > 0 && (\n        <div className=\"rounded-md border border-status-success-border bg-status-success-bg-subtle p-3\">\n          <p className=\"mb-2 text-xs font-medium text-status-success-text\">\n            {t('bigconsole.builder.dataBinding.fieldMappingsConfigured', 'Field mappings configured')}\n          </p>\n          <div className=\"space-y-1 text-xs text-text-secondary\">\n            {Object.entries(binding.fields).map(([name, path]) => (\n              <p key={name}>\n                {name}: <code className=\"rounded bg-bg-sunken px-1\">{path}</code>\n              </p>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {preview !== undefined && (\n        <div className=\"space-y-2\">\n          <Label>{t('bigconsole.builder.dataBinding.livePreviewLabel', 'Live Preview')}</Label>\n          <pre className=\"max-h-40 overflow-auto rounded-md border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary\">\n            {JSON.stringify(preview, null, 2)}\n          </pre>\n        </div>\n      )}\n\n      <div className=\"space-y-2\">\n        <Label>{t('bigconsole.builder.dataBinding.dataPathLabel', 'Data Path (Optional)')}</Label>\n        <Input\n          value={dataPath ?? ''}\n          onChange={(event) => onDataPathChange(event.target.value || undefined)}\n          placeholder={t('bigconsole.builder.dataBinding.dataPathPlaceholder', 'e.g., summary.totalRevenue')}\n        />\n        <p className=\"text-xs text-text-secondary\">\n          {t(\n            'bigconsole.builder.dataBinding.dataPathHelp',\n            'Path to extract specific data from the parser output (dot notation)'\n          )}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"DataBindingSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/DataBindingSection.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Input, Label, Spinner } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WidgetBinding, WidgetBindingStatus } from '../../../types';\nimport { DataSinkSelector } from '../../parser/DataSinkSelector';\nimport { ParserSelector } from '../../parser/ParserSelector';\nimport { Section, SectionStack, type SectionTone } from '../../common';\n\nexport interface DataBindingSectionProps {\n  consoleId: string;\n  binding: WidgetBinding;\n  dataSinkKey: string | null;\n  dataPath?: string;\n  status: WidgetBindingStatus;\n  missingFields?: string[];\n  preview?: unknown;\n  error?: string | null;\n  onDataSinkChange: (key: string | null) => void;\n  onParserChange: (parserId: string | null) => void;\n  onDataPathChange: (path: string | undefined) => void;\n}\n\n/**\n * Binding health is the single most important signal on this tab, so it gets a\n * toned section of its own instead of the bare `<p class=\"text-xs\">` it used to\n * be (BOFF-5636).\n */\nconst STATUS_TONES: Record<WidgetBindingStatus, SectionTone> = {\n  unbound: 'info',\n  loading: 'info',\n  bound: 'success',\n  no_data: 'warning',\n  parser_error: 'danger',\n  field_mismatch: 'warning',\n};\n\nexport const DataBindingSection: FC<DataBindingSectionProps> = ({\n  consoleId,\n  binding,\n  dataSinkKey,\n  dataPath,\n  status,\n  missingFields = [],\n  preview,\n  error,\n  onDataSinkChange,\n  onParserChange,\n  onDataPathChange,\n}) => {\n  const { t } = useI18n();\n\n  const statusLabels: Record<WidgetBindingStatus, string> = {\n    unbound: t('bigconsole.builder.dataBinding.status.unbound', 'Select a DataSink to begin'),\n    loading: t('bigconsole.builder.dataBinding.status.loading', 'Testing parser and detecting fields…'),\n    bound: t('bigconsole.builder.dataBinding.status.bound', 'Binding ready'),\n    no_data: t('bigconsole.builder.dataBinding.status.noData', 'Parser returned no data'),\n    parser_error: t('bigconsole.builder.dataBinding.status.parserError', 'Parser test failed'),\n    field_mismatch: t('bigconsole.builder.dataBinding.status.fieldMismatch', 'Some mapped fields were not found'),\n  };\n\n  return (\n    <SectionStack>\n      <Section\n        title=\"Data source\"\n        description={t(\n          'bigconsole.builder.dataBinding.intro',\n          'Connect this widget to a DataSink and Parser to display transformed data.'\n        )}\n        data-testid=\"widget-inspector-data-source\"\n      >\n        <div className=\"flex flex-col gap-form-gap\">\n          <div className=\"space-y-2\">\n            <Label>{t('bigconsole.builder.dataBinding.dataSinkLabel', 'DataSink')}</Label>\n            <DataSinkSelector\n              value={dataSinkKey}\n              onChange={onDataSinkChange}\n              placeholder={t('bigconsole.builder.dataBinding.dataSinkPlaceholder', 'Select a DataSink...')}\n            />\n            {dataSinkKey && (\n              <p className=\"text-xs text-text-secondary\">\n                {t('bigconsole.builder.dataBinding.keyLabel', 'Key: {{key}}', { key: dataSinkKey })}\n                {binding.source.ref && (\n                  <span className=\"ml-2 text-text-muted\">\n                    {t('bigconsole.builder.dataBinding.idLabel', 'ID: {{id}}...', {\n                      id: binding.source.ref.slice(0, 8),\n                    })}\n                  </span>\n                )}\n              </p>\n            )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label>{t('bigconsole.builder.dataBinding.parserLabel', 'Parser')}</Label>\n            <ParserSelector\n              consoleId={consoleId}\n              value={binding.parserId ?? null}\n              onChange={onParserChange}\n              filterInputSinkKey={dataSinkKey ?? undefined}\n              filterStatus={undefined}\n              placeholder={\n                dataSinkKey\n                  ? t('bigconsole.builder.dataBinding.parserPlaceholder', 'Select a parser...')\n                  : t('bigconsole.builder.dataBinding.parserPlaceholderNoSink', 'Select a DataSink first...')\n              }\n              disabled={!dataSinkKey}\n            />\n          </div>\n        </div>\n      </Section>\n\n      <Section\n        title={statusLabels[status]}\n        tone={STATUS_TONES[status]}\n        padding=\"compact\"\n        headingLevel={3}\n        icon={status === 'loading' ? <Spinner style={{ width: '14px', height: '14px' }} /> : undefined}\n        data-testid=\"widget-inspector-binding-status\"\n      >\n        <div role=\"status\" aria-live=\"polite\" className=\"min-w-0 space-y-1\">\n          {/*\n            The status label is the section heading, which sits OUTSIDE this live\n            region — without this echo a screen reader would never hear the binding\n            flip from \"loading\" to \"bound\".\n          */}\n          <p className=\"sr-only\">{statusLabels[status]}</p>\n          {error && <p className=\"break-words text-xs text-[var(--color-status-error-text)]\">{error}</p>}\n          {missingFields.length > 0 && (\n            <p className=\"break-words text-xs text-[var(--color-status-warning-text)]\">\n              {t('bigconsole.builder.dataBinding.missingFields', 'Missing: {{fields}}', {\n                fields: missingFields.join(', '),\n              })}\n            </p>\n          )}\n          {!error && missingFields.length === 0 && status === 'bound' && (\n            <p className=\"text-xs text-text-secondary\">\n              The parser ran and its output matches the fields this widget expects.\n            </p>\n          )}\n        </div>\n      </Section>\n\n      {binding.parserId && Object.keys(binding.fields).length > 0 && (\n        <Section\n          emphasis=\"muted\"\n          padding=\"compact\"\n          title={t('bigconsole.builder.dataBinding.fieldMappingsConfigured', 'Field mappings configured')}\n          headingLevel={3}\n        >\n          <div className=\"min-w-0 space-y-1 text-xs text-text-secondary\">\n            {Object.entries(binding.fields).map(([name, path]) => (\n              <p key={name} className=\"break-words\">\n                {name}: <code className=\"rounded bg-bg-surface px-1 font-mono\">{path}</code>\n              </p>\n            ))}\n          </div>\n        </Section>\n      )}\n\n      {preview !== undefined && (\n        <Section\n          emphasis=\"muted\"\n          padding=\"compact\"\n          title={t('bigconsole.builder.dataBinding.livePreviewLabel', 'Live Preview')}\n          description=\"Raw parser output, exactly as the widget receives it.\"\n          headingLevel={3}\n        >\n          <pre className=\"max-h-40 min-w-0 overflow-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-surface p-3 text-xs text-text-secondary\">\n            {JSON.stringify(preview, null, 2)}\n          </pre>\n        </Section>\n      )}\n\n      <Section emphasis=\"muted\" padding=\"compact\" title=\"Data path\" headingLevel={3}>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"widget-inspector-data-path\">\n            {t('bigconsole.builder.dataBinding.dataPathLabel', 'Data Path (Optional)')}\n          </Label>\n          <Input\n            id=\"widget-inspector-data-path\"\n            value={dataPath ?? ''}\n            onChange={(event) => onDataPathChange(event.target.value || undefined)}\n            placeholder={t('bigconsole.builder.dataBinding.dataPathPlaceholder', 'e.g., summary.totalRevenue')}\n          />\n          <p className=\"text-xs text-text-secondary\">\n            {t(\n              'bigconsole.builder.dataBinding.dataPathHelp',\n              'Path to extract specific data from the parser output (dot notation)'\n            )}\n          </p>\n        </div>\n      </Section>\n    </SectionStack>\n  );\n};\n"],"mappings":";;;;;;;;AA2BA,IAAM,IAAyD;CAC7D,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,cAAc;CACd,gBAAgB;CACjB,EAEY,KAAmD,EAC9D,cACA,YACA,gBACA,aACA,WACA,mBAAgB,EAAE,EAClB,YACA,UACA,qBACA,mBACA,0BACI;CACJ,IAAM,EAAE,SAAM,GAAS,EAEjB,IAAoD;EACxD,SAAS,EAAE,iDAAiD,6BAA6B;EACzF,SAAS,EAAE,iDAAiD,uCAAuC;EACnG,OAAO,EAAE,+CAA+C,gBAAgB;EACxE,SAAS,EAAE,gDAAgD,0BAA0B;EACrF,cAAc,EAAE,qDAAqD,qBAAqB;EAC1F,gBAAgB,EAAE,uDAAuD,oCAAoC;EAC9G;AAED,QACE,kBAAC,GAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,OAAM;GACN,aAAa,EACX,wCACA,4EACD;GACD,eAAY;aAEZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAA,UAAQ,EAAE,gDAAgD,WAAW,EAAS,CAAA;MAC9E,kBAAC,GAAD;OACE,OAAO;OACP,UAAU;OACV,aAAa,EAAE,sDAAsD,uBAAuB;OAC5F,CAAA;MACD,KACC,kBAAC,KAAD;OAAG,WAAU;iBAAb,CACG,EAAE,2CAA2C,gBAAgB,EAAE,KAAK,GAAa,CAAC,EAClF,EAAQ,OAAO,OACd,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE,0CAA0C,iBAAiB,EAC5D,IAAI,EAAQ,OAAO,IAAI,MAAM,GAAG,EAAE,EACnC,CAAC;QACG,CAAA,CAEP;;MAEF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAA,UAAQ,EAAE,8CAA8C,SAAS,EAAS,CAAA,EAC1E,kBAAC,GAAD;MACa;MACX,OAAO,EAAQ,YAAY;MAC3B,UAAU;MACV,oBAAoB,KAAe,KAAA;MACnC,cAAc,KAAA;MACd,aACE,IACI,EAAE,oDAAoD,qBAAqB,GAC3E,EAAE,0DAA0D,6BAA6B;MAE/F,UAAU,CAAC;MACX,CAAA,CACE;OACF;;GACE,CAAA;EAEV,kBAAC,GAAD;GACE,OAAO,EAAa;GACpB,MAAM,EAAa;GACnB,SAAQ;GACR,cAAc;GACd,MAAM,MAAW,YAAY,kBAAC,GAAD,EAAS,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ,EAAI,CAAA,GAAG,KAAA;GACrF,eAAY;aAEZ,kBAAC,OAAD;IAAK,MAAK;IAAS,aAAU;IAAS,WAAU;cAAhD;KAME,kBAAC,KAAD;MAAG,WAAU;gBAAW,EAAa;MAAY,CAAA;KAChD,KAAS,kBAAC,KAAD;MAAG,WAAU;gBAA6D;MAAU,CAAA;KAC7F,EAAc,SAAS,KACtB,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAE,gDAAgD,uBAAuB,EACxE,QAAQ,EAAc,KAAK,KAAK,EACjC,CAAC;MACA,CAAA;KAEL,CAAC,KAAS,EAAc,WAAW,KAAK,MAAW,WAClD,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAEvC,CAAA;KAEF;;GACE,CAAA;EAET,EAAQ,YAAY,OAAO,KAAK,EAAQ,OAAO,CAAC,SAAS,KACxD,kBAAC,GAAD;GACE,UAAS;GACT,SAAQ;GACR,OAAO,EAAE,0DAA0D,4BAA4B;GAC/F,cAAc;aAEd,kBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,QAAQ,EAAQ,OAAO,CAAC,KAAK,CAAC,GAAM,OAC1C,kBAAC,KAAD;KAAc,WAAU;eAAxB;MACG;MAAK;MAAE,kBAAC,QAAD;OAAM,WAAU;iBAAwC;OAAY,CAAA;MAC1E;OAFI,EAEJ,CACJ;IACE,CAAA;GACE,CAAA;EAGX,MAAY,KAAA,KACX,kBAAC,GAAD;GACE,UAAS;GACT,SAAQ;GACR,OAAO,EAAE,mDAAmD,eAAe;GAC3E,aAAY;GACZ,cAAc;aAEd,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,UAAU,GAAS,MAAM,EAAE;IAC7B,CAAA;GACE,CAAA;EAGZ,kBAAC,GAAD;GAAS,UAAS;GAAQ,SAAQ;GAAU,OAAM;GAAY,cAAc;aAC1E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAO,SAAQ;gBACZ,EAAE,gDAAgD,uBAAuB;MACpE,CAAA;KACR,kBAAC,GAAD;MACE,IAAG;MACH,OAAO,KAAY;MACnB,WAAW,MAAU,EAAiB,EAAM,OAAO,SAAS,KAAA,EAAU;MACtE,aAAa,EAAE,sDAAsD,6BAA6B;MAClG,CAAA;KACF,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,+CACA,sEACD;MACC,CAAA;KACA;;GACE,CAAA;EACG,EAAA,CAAA"}