@camstack/ui-library 1.1.43 → 1.1.44

package/dist/index.cjs

@@ -14426,7 +14426,7 @@ function buildDisplayStep(addon, cfg) {
 function computeEffective(mode, agentDefault, patch) {
 	if (mode !== "device" || !patch) return agentDefault;
 	return {
-		enabled: patch.enabled ?? agentDefault.enabled,
+		enabled: agentDefault.enabled,
 		modelId: patch.modelId ?? agentDefault.modelId,
 		settings: patch.settings ?? agentDefault.settings
 	};
@@ -14440,97 +14440,62 @@ function AgentModeEditor({ addon, agentDefault, modelsForFormat, onChangeAgentCo
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4 text-xs",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
-					checked: agentDefault.enabled,
-					onChange: (e) => update({ enabled: e.target.checked })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-					"Enabled on this agent (",
-					addon.name,
-					")"
-				] })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-[10px] uppercase tracking-widest text-foreground-subtle mb-1",
-				children: "Model"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
-				models: modelsForFormat,
-				value: agentDefault.modelId ?? "",
-				onChange: (modelId) => update({ modelId })
-			})] }),
-			(addon.configSchema?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "pt-2 border-t border-border/50 space-y-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-[10px] uppercase tracking-widest text-foreground-subtle",
-					children: "Settings"
-				}), addon.configSchema?.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
-					field,
-					allFields: addon.configSchema ?? [],
-					step: buildDisplayStep(addon, agentDefault),
-					disabled: false,
-					onChange: (next) => update({ settings: { ...next.settings } })
-				}, field.key))]
-			})
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-[10px] uppercase tracking-widest text-foreground-subtle mb-1",
+			children: "Model"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+			models: modelsForFormat,
+			value: agentDefault.modelId ?? "",
+			onChange: (modelId) => update({ modelId })
+		})] }), (addon.configSchema?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pt-2 border-t border-border/50 space-y-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-[10px] uppercase tracking-widest text-foreground-subtle",
+				children: "Settings"
+			}), addon.configSchema?.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
+				field,
+				allFields: addon.configSchema ?? [],
+				step: buildDisplayStep(addon, agentDefault),
+				disabled: false,
+				onChange: (next) => update({ settings: { ...next.settings } })
+			}, field.key))]
+		})]
 	});
 }
 function DeviceModeEditor({ addon, agentDefault, agentNodeId, currentPatch, modelsForFormat, onChangePatch }) {
 	const effective = computeEffective("device", agentDefault, currentPatch);
 	const commitPatch = (next) => {
-		const hasAnyField = next.enabled !== void 0 || next.modelId !== void 0 || next.settings !== void 0;
+		const hasAnyField = next.modelId !== void 0 || next.settings !== void 0;
 		onChangePatch?.(hasAnyField ? next : null);
 	};
-	const setEnabled = (state) => {
-		const { enabled: _prev, ...rest } = currentPatch ?? {};
-		commitPatch(state === "inherit" ? rest : {
-			...rest,
-			enabled: state === "on"
-		});
-	};
 	const setModel = (modelId) => {
-		const { modelId: _prev, ...rest } = currentPatch ?? {};
+		const { enabled: _enabled, modelId: _prev, ...rest } = currentPatch ?? {};
 		commitPatch(modelId === void 0 ? rest : {
 			...rest,
 			modelId
 		});
 	};
 	const setSettings = (settings) => {
-		const { settings: _prev, ...rest } = currentPatch ?? {};
+		const { enabled: _enabled, settings: _prev, ...rest } = currentPatch ?? {};
 		commitPatch(settings === void 0 ? rest : {
 			...rest,
 			settings
 		});
 	};
-	const enabledTri = currentPatch?.enabled === void 0 ? "inherit" : currentPatch.enabled ? "on" : "off";
 	const modelOverridden = currentPatch?.modelId !== void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4 text-xs",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1",
-				children: [[
-					"inherit",
-					"on",
-					"off"
-				].map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => setEnabled(s),
-					className: cn("px-3 py-1 border border-border rounded text-xs capitalize", enabledTri === s ? "bg-primary text-primary-foreground border-primary" : "bg-surface text-foreground hover:bg-muted"),
-					children: s
-				}, s)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "ml-2 text-[10px] text-foreground-subtle",
-					children: [
-						"agent default:",
-						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-semibold",
-							children: agentDefault.enabled ? "on" : "off"
-						})
-					]
-				})]
+				className: "rounded bg-muted/40 px-3 py-2 text-[11px] text-foreground-subtle",
+				children: [
+					"Provisioning for ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "font-semibold text-foreground",
+						children: agentNodeId
+					}),
+					" — model + settings only. Whether this camera runs the step is set by its per-camera gate above."
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -14601,15 +14566,13 @@ function DeviceModeEditor({ addon, agentDefault, agentNodeId, currentPatch, mode
 				className: "rounded bg-muted/40 px-3 py-2 text-[11px] text-foreground-subtle",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "font-semibold text-foreground mb-0.5",
-					children: "Effective config preview"
+					children: "Effective provisioning preview"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "font-mono truncate",
 					children: [
 						addon.id,
 						" · model: ",
-						effective.modelId,
-						" · ",
-						effective.enabled ? "on" : "off"
+						effective.modelId ?? "Auto"
 					]
 				})]
 			})
@@ -14634,19 +14597,6 @@ function AgentStepEditor(props) {
 		onChangePatch
 	});
 }
-//#endregion
-//#region src/composites/pipeline-tree-matrix.tsx
-/**
-* Fixed column geometry (rem). The matrix uses a CSS grid with STATIC track
-* widths so a cell's content (a status chip, a long model id) can never resize
-* a column or shift its neighbours — cell content is truncated WITHIN the fixed
-* track instead. This kills the "table dances when the last column's status
-* changes" jitter. See `min-w-0` on every grid child, which lets the child
-* shrink to the track (a grid item's automatic minimum is its content size, so
-* without this a non-wrapping model id would blow the track wider than its max).
-*/
-var STEP_COL_REM = 18;
-var AGENT_COL_REM = 13;
 function flattenTree(nodes) {
 	const out = [];
 	const walk = (list, depth) => {
@@ -14661,6 +14611,20 @@ function flattenTree(nodes) {
 	walk(nodes, 0);
 	return out;
 }
+/**
+* Layout decision for the responsive A↔B switch. Pure so it can be unit-tested
+* in isolation from the DOM.
+*
+* Returns `true` (single-node fallback) when there is MORE than one node but
+* the container is too narrow to show the step column plus at least TWO node
+* columns side by side. An unmeasured container (`width <= 0`) defaults to the
+* wide matrix so there is no first-paint flash into the fallback.
+*/
+function shouldUseSingleNode(width, nodeCount, stepColPx, agentColPx = 208) {
+	if (nodeCount <= 1) return false;
+	if (width <= 0) return false;
+	return width < stepColPx + agentColPx * 2;
+}
 var SLOT_LABEL = {
 	detector: {
 		label: "detector",
@@ -14711,25 +14675,26 @@ function ClassChips({ inputs, outputs }) {
 		]
 	});
 }
-function QuickToggle({ enabled, onChange, disabled }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		role: "switch",
-		"aria-checked": enabled,
-		disabled,
-		onClick: (e) => {
-			e.stopPropagation();
-			onChange(!enabled);
-		},
-		className: cn("relative inline-flex h-3.5 w-7 shrink-0 items-center rounded-full transition-colors", enabled ? "bg-emerald-500" : "bg-foreground-subtle/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
-		title: enabled ? "Click to disable" : "Click to enable",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("inline-block h-3 w-3 rounded-full bg-white shadow transition-transform", enabled ? "translate-x-3.5" : "translate-x-0.5") })
+/** Step label (slot heading + addon name + class chips), shared by both views. */
+function StepLabel({ node }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1 min-w-0 flex-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: node.slot }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 flex-wrap",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-semibold truncate",
+				children: node.addonName
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassChips, {
+				inputs: node.inputClasses,
+				outputs: node.outputClasses
+			})]
+		})]
 	});
 }
 /**
-* Cell content. Kept width-stable: the status dot is `shrink-0` (reserved
-* space) and the model id truncates inside a `min-w-0` flex row, so a longer
-* model id never widens the cell — it ellipsises instead.
+* Cell content. Width-stable: the status dot is `shrink-0` (reserved space) and
+* the model id truncates inside a `min-w-0` flex row, so a longer model id never
+* widens the cell — it ellipsises instead.
 */
 function renderCellContent(state) {
 	if (state.kind === "enabled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -14762,31 +14727,41 @@ function renderCellContent(state) {
 			})
 		]
 	});
+	if (state.kind === "skip") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex min-w-0 items-center gap-1 text-amber-500",
+		title: "Gated on for this camera, but no compatible model on this node — click to provision",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate font-medium",
+			children: "⚠ skip"
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex min-w-0 items-center gap-1 text-foreground-subtle/70",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-muted shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "truncate",
-			children: "n/a"
+			children: "—"
 		})]
 	});
 }
 function cellButtonClass(state, isSelected, extra) {
-	return cn("text-left text-xs hover:bg-muted/40", state.kind === "enabled" && "bg-emerald-500/5", state.kind === "na" && "bg-muted/30", isSelected && "ring-2 ring-primary ring-inset", extra);
+	return cn("text-left text-xs hover:bg-muted/40", state.kind === "enabled" && "bg-emerald-500/5", state.kind === "skip" && "bg-amber-500/5", state.kind === "na" && "bg-muted/30", isSelected && "ring-2 ring-primary ring-inset", extra);
 }
-/** Step label (slot heading + addon name + class chips), shared by both views. */
-function StepLabel({ node }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-1 min-w-0 flex-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: node.slot }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2 flex-wrap",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-semibold truncate",
-				children: node.addonName
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassChips, {
-				inputs: node.inputClasses,
-				outputs: node.outputClasses
-			})]
-		})]
+//#endregion
+//#region src/composites/pipeline-tree-matrix.tsx
+var STEP_COL_REM$1 = 18;
+function QuickToggle({ enabled, onChange, disabled }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": enabled,
+		disabled,
+		onClick: (e) => {
+			e.stopPropagation();
+			onChange(!enabled);
+		},
+		className: cn("relative inline-flex h-3.5 w-7 shrink-0 items-center rounded-full transition-colors", enabled ? "bg-emerald-500" : "bg-foreground-subtle/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+		title: enabled ? "Click to disable" : "Click to enable",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("inline-block h-3 w-3 rounded-full bg-white shadow transition-transform", enabled ? "translate-x-3.5" : "translate-x-0.5") })
 	});
 }
 function GridRow({ node, depth, agents, getCellState, onCellClick, selectedCell, toggleProps }) {
@@ -14814,11 +14789,11 @@ function GridRow({ node, depth, agents, getCellState, onCellClick, selectedCell,
 /**
 * Wide layout: horizontally self-scrolling matrix. The scroll lives INSIDE
 * this `overflow-auto` box (sticky first column + sticky header row) so the
-* page body never scrolls sideways. Column tracks are fixed px widths — see
-* STEP_COL_REM / AGENT_COL_REM — so the grid is static regardless of content.
+* page body never scrolls sideways. Column tracks are fixed px widths so the
+* grid is static regardless of content.
 */
-function MatrixGrid({ rows, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
-	const gridTemplate = `${STEP_COL_REM}rem repeat(${agents.length}, ${AGENT_COL_REM}rem)`;
+function MatrixGrid$1({ rows, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
+	const gridTemplate = `${STEP_COL_REM$1}rem repeat(${agents.length}, 13rem)`;
 	const showToggle = onToggleEnabled !== void 0 && agents.length === 1;
 	const onlyAgent = agents[0]?.agentNodeId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -14863,9 +14838,7 @@ function MatrixGrid({ rows, agents, getCellState, onCellClick, selectedCell, onT
 }
 /**
 * Narrow layout: one card per agent column, each listing every step stacked
-* vertically. A wide fixed matrix is unusable on a phone; here the same cells
-* (click-to-edit, status, toggle) reflow into full-width rows so nothing scrolls
-* horizontally. Feature-parity with the matrix — same `onCellClick`, same
+* vertically. Feature-parity with the matrix — same `onCellClick`, same
 * `renderCellContent`, same single-agent `onToggleEnabled`.
 */
 function StackedCards({ rows, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
@@ -14934,7 +14907,7 @@ function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedC
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "hidden @2xl/matrix:block",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid$1, {
 				rows,
 				agents,
 				getCellState,
@@ -14946,6 +14919,226 @@ function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedC
 	});
 }
 //#endregion
+//#region src/composites/device-step-matrix.tsx
+/**
+* DeviceStepMatrix — the per-camera "Detection pipeline → Steps" surface (#33)
+* rendered as ONE hierarchical steps×nodes matrix.
+*
+*   Column 1 (STICKY): the indented step tree. Each step carries its slot +
+*     name + class-flow chips PLUS a per-camera, node-independent GATE control
+*     with THREE states — On / Off / Default (inherit). `package-detection` is
+*     zone-driven, so it shows a "Zones" badge instead of a gate.
+*   Columns 2..N (one per online node): the provisioned model chip (click →
+*     the model/config picker), a clickable "⚠ skip" when the step is gated ON
+*     but the node has no compatible model, or "—" when N/A.
+*
+* Responsive, container-measured (never a global media query, so it also works
+* embedded):
+*   A) wide — sticky step column + node columns in an `overflow-x:auto` box, so
+*      narrow viewports scroll the NODES sideways while col-1 stays pinned and
+*      the page body never scrolls horizontally.
+*   B) narrow — below the width needed for ≥2 node columns, collapse to a
+*      single-node view: a node selector picks ONE node and the matrix renders
+*      `step-tree × that-one-node`.
+*/
+/** Wider than the cluster matrix's 18rem: col-1 also hosts the gate control. */
+var STEP_COL_REM = 21;
+var STEP_COL_PX = STEP_COL_REM * 16;
+function activeChoice(gate) {
+	if (!gate.explicit) return "default";
+	return gate.effectiveOn ? "on" : "off";
+}
+/**
+* Tri-state segmented control. `Default` inherits the catalog value (shown in
+* the caption); `On`/`Off` pin an explicit per-camera override. Touch-friendly
+* 28px segments.
+*/
+function GateControl({ gate, busy, onSet }) {
+	const active = activeChoice(gate);
+	const seg = (choice, label, value, activeClass) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-pressed": active === choice,
+		disabled: busy,
+		onClick: () => onSet(value),
+		className: cn("flex-1 px-2 py-1 text-[11px] font-medium leading-none transition-colors", "min-h-[26px]", active === choice ? activeClass : "text-foreground-subtle hover:bg-muted/60", busy && "opacity-50 cursor-not-allowed"),
+		children: label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "inline-flex w-fit max-w-full self-start overflow-hidden rounded-md border border-border",
+			children: [
+				seg("default", "Auto", null, "bg-primary/15 text-primary"),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-px self-stretch bg-border" }),
+				seg("on", "On", true, "bg-emerald-500 text-white"),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-px self-stretch bg-border" }),
+				seg("off", "Off", false, "bg-foreground-subtle/70 text-white")
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10px] leading-none text-foreground-subtle",
+			children: active === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				"= default (",
+				gate.defaultOn ? "on" : "off",
+				")"
+			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["overridden · default ", gate.defaultOn ? "on" : "off"] })
+		})]
+	});
+}
+function ZoneBadge() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "inline-flex w-fit items-center gap-1 rounded-md border border-violet-500/40 bg-violet-500/10 px-2 py-1 text-[11px] font-medium text-violet-400",
+			children: "Zones"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10px] leading-none text-foreground-subtle",
+			children: "driven by package zones"
+		})]
+	});
+}
+function StepGateCell({ node, depth, gate, busy, onSet }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "sticky left-0 z-10 flex flex-col gap-2 border-b border-border bg-surface px-3 py-2.5 text-xs min-w-0",
+		style: { paddingLeft: `${12 + depth * 14}px` },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node }), gate.kind === "zone-driven" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoneBadge, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GateControl, {
+			gate,
+			busy,
+			onSet
+		})]
+	});
+}
+/**
+* Agents-scoped node selector for the B fallback. Styled like the shared
+* `NodePicker` but driven by THIS matrix's `agents` set — the cluster-wide
+* NodePicker can list nodes (e.g. the hub) that own no pipeline column here,
+* which would let the operator select a node the matrix can't show.
+*/
+function NodeSelectorBar({ agents, selected, onSelect }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-1.5",
+		role: "tablist",
+		"aria-label": "Node",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Server, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-foreground-subtle",
+				children: "Node"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex overflow-hidden rounded-md border border-border text-[11px] font-medium",
+				children: agents.map((a, idx) => {
+					const isSelected = a.agentNodeId === selected;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": isSelected,
+						onClick: () => onSelect(a.agentNodeId),
+						title: `${a.agentNodeId} · ${a.engineLabel}`,
+						className: cn("px-2.5 py-1 transition-colors", isSelected ? "bg-primary/15 text-primary" : "bg-transparent text-foreground-subtle hover:bg-surface-hover hover:text-foreground", idx > 0 && "border-l border-border"),
+						children: a.agentNodeId
+					}, a.agentNodeId);
+				})
+			})
+		]
+	});
+}
+function MatrixGrid({ tree, agents, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, single }) {
+	const rows = (0, react$1.useMemo)(() => flattenTree(tree), [tree]);
+	const gridTemplate = single ? `minmax(0, 1.35fr) repeat(${agents.length}, minmax(0, 1fr))` : `${STEP_COL_REM}rem repeat(${agents.length}, 13rem)`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("rounded border border-border", single ? "overflow-hidden" : "overflow-auto"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("grid", single ? "w-full" : "w-max"),
+			style: { gridTemplateColumns: gridTemplate },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "sticky left-0 top-0 z-20 border-b border-border bg-muted/60 px-3 py-2 text-[10px] uppercase tracking-widest text-foreground-subtle",
+					children: "Step · gate"
+				}),
+				agents.map((a) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "sticky top-0 z-10 min-w-0 border-b border-l border-border bg-muted/60 px-3 py-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "truncate text-xs font-semibold text-foreground",
+						children: a.agentNodeId
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "truncate text-[10px] text-foreground-subtle",
+						children: a.engineLabel
+					})]
+				}, a.agentNodeId)),
+				rows.map(({ node, depth }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixRow, {
+					node,
+					depth,
+					agents,
+					gate: gateFor(node.addonId),
+					getCellState,
+					onCellClick,
+					selectedCell,
+					onSetGate,
+					gateBusy
+				}, node.addonId))
+			]
+		})
+	});
+}
+function MatrixRow({ node, depth, agents, gate, getCellState, onCellClick, selectedCell, onSetGate, gateBusy }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepGateCell, {
+		node,
+		depth,
+		gate,
+		busy: gateBusy,
+		onSet: (next) => onSetGate(node.addonId, next)
+	}), agents.map((a) => {
+		const state = getCellState(node.addonId, a.agentNodeId);
+		const isSelected = selectedCell?.addonId === node.addonId && selectedCell.agentNodeId === a.agentNodeId;
+		const actionable = state.kind === "enabled" || state.kind === "skip";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			disabled: !actionable,
+			onClick: () => onCellClick(node.addonId, a.agentNodeId),
+			className: cellButtonClass(state, isSelected, cn("min-w-0 overflow-hidden border-b border-l border-border px-3 py-2", !actionable && "cursor-default hover:bg-transparent")),
+			children: renderCellContent(state)
+		}, a.agentNodeId);
+	})] });
+}
+function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, fallbackNodeId, onFallbackNodeChange }) {
+	const containerRef = (0, react$1.useRef)(null);
+	const [width, setWidth] = (0, react$1.useState)(0);
+	(0, react$1.useLayoutEffect)(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const measure = () => setWidth(el.getBoundingClientRect().width);
+		measure();
+		const RO = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+		RO?.observe(el);
+		return () => RO?.disconnect();
+	}, []);
+	const single = shouldUseSingleNode(width, agents.length, STEP_COL_PX);
+	const selectedNode = (0, react$1.useMemo)(() => {
+		if (agents.length === 0) return null;
+		return agents.find((a) => a.agentNodeId === fallbackNodeId) ?? agents[0];
+	}, [agents, fallbackNodeId]);
+	const shownAgents = single && selectedNode ? [selectedNode] : agents;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: "w-full space-y-2",
+		children: [single && selectedNode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorBar, {
+			agents,
+			selected: selectedNode.agentNodeId,
+			onSelect: onFallbackNodeChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid, {
+			tree,
+			agents: shownAgents,
+			gateFor,
+			getCellState,
+			onCellClick,
+			selectedCell,
+			onSetGate,
+			gateBusy,
+			single: single && selectedNode !== null
+		})]
+	});
+}
+//#endregion
 //#region src/trpc-react.ts
 /**
 * Shared typed React Query proxy for the backend AppRouter.
@@ -26533,131 +26726,117 @@ function ControlHeroCard({ trpc, deviceId, features, optimistic }) {
 }
 //#endregion
 //#region src/composites/device-controls/control-registry.tsx
-var COVER_CONTROL = {
-	InlineControl: CoverInlineControl,
-	HeroCard: CoverHeroCard
-};
-var DUMMY_CONTROL = {
-	InlineControl: DummyInline,
-	HeroCard: DummyHeroCard
-};
-var SENSOR_CONTROL = {
-	InlineControl: SensorInlineControl,
-	HeroCard: SensorHeroCard
-};
-var UPDATE_CONTROL = {
-	InlineControl: UpdateInlineControl,
-	HeroCard: UpdateHeroCard
-};
-var SWITCH_CONTROL = {
-	InlineControl: SwitchInlineControl,
-	HeroCard: SwitchHeroCard
-};
-var LOCK_CONTROL = {
-	InlineControl: LockInlineControl,
-	HeroCard: LockHeroCard
-};
-var LIGHT_CONTROL = {
-	InlineControl: LightInlineControl,
-	HeroCard: LightHeroCard
-};
-var FAN_CONTROL = {
-	InlineControl: FanInlineControl,
-	HeroCard: FanHeroCard
-};
-var THERMOSTAT_CONTROL = {
-	InlineControl: ThermostatInlineControl,
-	HeroCard: ThermostatHeroCard
-};
-var CLIMATE_CONTROL = {
-	InlineControl: AcInlineControl,
-	HeroCard: AcHeroCard
-};
-var MEDIA_PLAYER_CONTROL = {
-	InlineControl: MediaPlayerInlineControl,
-	HeroCard: MediaPlayerHeroCard
-};
-var ALARM_PANEL_CONTROL = {
-	InlineControl: AlarmInlineControl,
-	HeroCard: AlarmHeroCard
-};
-var CONTROL_CONTROL = {
-	InlineControl: ControlInlineControl,
-	HeroCard: ControlHeroCard
-};
-var VACUUM_CONTROL = {
-	InlineControl: VacuumInlineControl,
-	HeroCard: VacuumHeroCard
-};
-var LAWN_MOWER_CONTROL = {
-	InlineControl: LawnMowerInlineControl,
-	HeroCard: LawnMowerHeroCard
-};
-var VALVE_CONTROL = {
-	InlineControl: ValveInlineControl,
-	HeroCard: ValveHeroCard
-};
-var HUMIDIFIER_CONTROL = {
-	InlineControl: HumidifierInlineControl,
-	HeroCard: HumidifierHeroCard
-};
-var WATER_HEATER_CONTROL = {
-	InlineControl: WaterHeaterInlineControl,
-	HeroCard: WaterHeaterHeroCard
-};
-var WEATHER_CONTROL = {
-	InlineControl: WeatherInlineControl,
-	HeroCard: WeatherHeroCard
-};
-var IMAGE_CONTROL = {
-	InlineControl: ImageInlineControl,
-	HeroCard: ImageHeroCard
-};
-var PET_FEEDER_CONTROL = {
-	InlineControl: PetFeederInlineControl,
-	HeroCard: PetFeederHeroCard
-};
 /**
-* Exhaustive record over DeviceType. Omitting a member causes a
-* TypeScript build error (same pattern as DEVICE_TYPE_ACTIONS).
-*/
-var DEVICE_TYPE_CONTROL = {
-	[_camstack_types.DeviceType.Cover]: COVER_CONTROL,
-	[_camstack_types.DeviceType.Valve]: VALVE_CONTROL,
-	[_camstack_types.DeviceType.Humidifier]: HUMIDIFIER_CONTROL,
-	[_camstack_types.DeviceType.WaterHeater]: WATER_HEATER_CONTROL,
-	[_camstack_types.DeviceType.Camera]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Hub]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Switch]: SWITCH_CONTROL,
-	[_camstack_types.DeviceType.Siren]: SWITCH_CONTROL,
-	[_camstack_types.DeviceType.Light]: LIGHT_CONTROL,
-	[_camstack_types.DeviceType.Fan]: FAN_CONTROL,
-	[_camstack_types.DeviceType.Sensor]: SENSOR_CONTROL,
-	[_camstack_types.DeviceType.Thermostat]: THERMOSTAT_CONTROL,
-	[_camstack_types.DeviceType.Climate]: CLIMATE_CONTROL,
-	[_camstack_types.DeviceType.Button]: {
+* Presentation binding: the shared `DeviceControlKind` (decided in
+* `@camstack/types` `resolveDeviceControlKind`) → this platform's web
+* components. Exhaustive over `DeviceControlKind` — omitting a kind fails the
+* build here. The type→kind DECISION is single-sourced in `@camstack/types`;
+* this map only binds a kind to its web widgets.
+*/
+var CONTROL_KIND_COMPONENTS = {
+	cover: {
+		InlineControl: CoverInlineControl,
+		HeroCard: CoverHeroCard
+	},
+	valve: {
+		InlineControl: ValveInlineControl,
+		HeroCard: ValveHeroCard
+	},
+	humidifier: {
+		InlineControl: HumidifierInlineControl,
+		HeroCard: HumidifierHeroCard
+	},
+	"water-heater": {
+		InlineControl: WaterHeaterInlineControl,
+		HeroCard: WaterHeaterHeroCard
+	},
+	switch: {
+		InlineControl: SwitchInlineControl,
+		HeroCard: SwitchHeroCard
+	},
+	light: {
+		InlineControl: LightInlineControl,
+		HeroCard: LightHeroCard
+	},
+	fan: {
+		InlineControl: FanInlineControl,
+		HeroCard: FanHeroCard
+	},
+	sensor: {
+		InlineControl: SensorInlineControl,
+		HeroCard: SensorHeroCard
+	},
+	thermostat: {
+		InlineControl: ThermostatInlineControl,
+		HeroCard: ThermostatHeroCard
+	},
+	climate: {
+		InlineControl: AcInlineControl,
+		HeroCard: AcHeroCard
+	},
+	button: {
 		InlineControl: ButtonControl,
 		HeroCard: ButtonHeroCard
 	},
-	[_camstack_types.DeviceType.EventEmitter]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Update]: UPDATE_CONTROL,
-	[_camstack_types.DeviceType.Generic]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Notifier]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Script]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Automation]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Lock]: LOCK_CONTROL,
-	[_camstack_types.DeviceType.MediaPlayer]: MEDIA_PLAYER_CONTROL,
-	[_camstack_types.DeviceType.AlarmPanel]: ALARM_PANEL_CONTROL,
-	[_camstack_types.DeviceType.Control]: CONTROL_CONTROL,
-	[_camstack_types.DeviceType.Presence]: SENSOR_CONTROL,
-	[_camstack_types.DeviceType.Weather]: WEATHER_CONTROL,
-	[_camstack_types.DeviceType.Vacuum]: VACUUM_CONTROL,
-	[_camstack_types.DeviceType.LawnMower]: LAWN_MOWER_CONTROL,
-	[_camstack_types.DeviceType.Container]: DUMMY_CONTROL,
-	[_camstack_types.DeviceType.Image]: IMAGE_CONTROL,
-	[_camstack_types.DeviceType.PetFeeder]: PET_FEEDER_CONTROL
+	update: {
+		InlineControl: UpdateInlineControl,
+		HeroCard: UpdateHeroCard
+	},
+	lock: {
+		InlineControl: LockInlineControl,
+		HeroCard: LockHeroCard
+	},
+	"media-player": {
+		InlineControl: MediaPlayerInlineControl,
+		HeroCard: MediaPlayerHeroCard
+	},
+	alarm: {
+		InlineControl: AlarmInlineControl,
+		HeroCard: AlarmHeroCard
+	},
+	control: {
+		InlineControl: ControlInlineControl,
+		HeroCard: ControlHeroCard
+	},
+	weather: {
+		InlineControl: WeatherInlineControl,
+		HeroCard: WeatherHeroCard
+	},
+	vacuum: {
+		InlineControl: VacuumInlineControl,
+		HeroCard: VacuumHeroCard
+	},
+	"lawn-mower": {
+		InlineControl: LawnMowerInlineControl,
+		HeroCard: LawnMowerHeroCard
+	},
+	image: {
+		InlineControl: ImageInlineControl,
+		HeroCard: ImageHeroCard
+	},
+	"pet-feeder": {
+		InlineControl: PetFeederInlineControl,
+		HeroCard: PetFeederHeroCard
+	},
+	dummy: {
+		InlineControl: DummyInline,
+		HeroCard: DummyHeroCard
+	}
 };
 /**
+* Exhaustive record over DeviceType, DERIVED from the shared decision
+* (`DEVICE_TYPE_CONTROL_KIND`) composed with the web `CONTROL_KIND_COMPONENTS`
+* binding — so the type→control mapping can never diverge from the single
+* source in `@camstack/types`. Preserved as a public export for consumers/tests
+* that index it by `DeviceType`.
+*
+* The `Object.fromEntries` result is a `{ [k: string]: DeviceTypeControl }`;
+* `Object.values(DeviceType)` (a string enum) yields exactly the enum's members,
+* so the record is fully populated — the assertion narrows that documented
+* enum-record projection boundary.
+*/
+var DEVICE_TYPE_CONTROL = Object.fromEntries(Object.values(_camstack_types.DeviceType).map((type) => [type, CONTROL_KIND_COMPONENTS[_camstack_types.DEVICE_TYPE_CONTROL_KIND[type]]]));
+/**
 * Per-type FILL flag.
 *
 *   true  — range / choice / button controls (cover ▲■▼ triad, thermostat
@@ -26711,12 +26890,14 @@ var CONTROL_FILLS = {
 };
 var DEVICE_TYPE_VALUES$1 = new Set(Object.values(_camstack_types.DeviceType));
 /**
-* Runtime-string-safe lookup: a device row's `type` crosses the wire
-* as a plain string, so an unrecognised value resolves to null instead
-* of indexing the registry with an unverified key.
+* Runtime-string-safe lookup: a device row's `type` crosses the wire as a plain
+* string. The type→control-kind DECISION is single-sourced in `@camstack/types`
+* (`resolveDeviceControlKind`, null for an unrecognised type); this maps the
+* resolved kind onto the web components.
 */
 function resolveDeviceControl(type) {
-	return DEVICE_TYPE_VALUES$1.has(type) ? DEVICE_TYPE_CONTROL[type] : null;
+	const kind = (0, _camstack_types.resolveDeviceControlKind)(type);
+	return kind ? CONTROL_KIND_COMPONENTS[kind] : null;
 }
 /**
 * Runtime-string-safe alignment lookup for the fixed-width control column.
@@ -40488,8 +40669,30 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 			const pc = new RTCPeerConnection({ iceServers: [...iceServers ?? [], { urls: "stun:stun.l.google.com:19302" }] });
 			const newStream = new MediaStream();
 			let swappedIn = false;
-			const swapInOnce = () => {
-				if (swappedIn || !mountedRef.current) return;
+			let warmupStarted = false;
+			let warmupVideo = null;
+			let warmupRvfc;
+			let warmupSafety;
+			const teardownWarmup = () => {
+				if (warmupSafety !== void 0) {
+					clearTimeout(warmupSafety);
+					warmupSafety = void 0;
+				}
+				const v = warmupVideo;
+				warmupVideo = null;
+				if (!v) return;
+				if (warmupRvfc !== void 0 && typeof v.cancelVideoFrameCallback === "function") v.cancelVideoFrameCallback(warmupRvfc);
+				v.removeEventListener("loadeddata", commitSwap);
+				try {
+					v.srcObject = null;
+				} catch {}
+				v.remove();
+			};
+			function commitSwap() {
+				if (swappedIn || !mountedRef.current) {
+					teardownWarmup();
+					return;
+				}
 				swappedIn = true;
 				pcRef.current = pc;
 				if (videoRef.current) {
@@ -40497,11 +40700,32 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					videoRef.current.play().catch(() => {});
 				}
 				if (oldPc && oldPc !== pc) oldPc.close();
+				teardownWarmup();
+			}
+			const armSwap = () => {
+				if (warmupStarted || swappedIn || !mountedRef.current) return;
+				warmupStarted = true;
+				if (typeof document === "undefined") {
+					commitSwap();
+					return;
+				}
+				const v = document.createElement("video");
+				v.muted = true;
+				v.playsInline = true;
+				v.autoplay = true;
+				v.style.cssText = "position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;";
+				v.srcObject = newStream;
+				warmupVideo = v;
+				(containerRef.current ?? document.body).appendChild(v);
+				v.play().catch(() => {});
+				if (typeof v.requestVideoFrameCallback === "function") warmupRvfc = v.requestVideoFrameCallback(() => commitSwap());
+				v.addEventListener("loadeddata", commitSwap, { once: true });
+				warmupSafety = setTimeout(() => commitSwap(), 1800);
 			};
 			pc.ontrack = (event) => {
 				console.debug("[WebRTC] ontrack (reoffer)", event.track.kind, event.track.readyState);
 				newStream.addTrack(event.track);
-				swapInOnce();
+				armSwap();
 			};
 			pc.oniceconnectionstatechange = () => {
 				if (!mountedRef.current) return;
@@ -40509,10 +40733,11 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				console.debug("[WebRTC] ICE state (reoffer):", iceState);
 				if (iceState === "connected" || iceState === "completed") {
 					reconnectAttemptsRef.current = 0;
-					swapInOnce();
+					armSwap();
 					updateState("playing");
 					if (videoRef.current?.paused) videoRef.current.play().catch(() => {});
 				} else if (iceState === "failed" || iceState === "closed") {
+					teardownWarmup();
 					if (!swappedIn && iceState === "failed") pc.close();
 					updateState("disconnected");
 					scheduleReconnect();
@@ -44590,6 +44815,33 @@ function buildRawTree(data, fetchedAt) {
 * State). Computed once at module load.
 */
 var ALL_DEVICE_CAP_NAMES = Object.freeze([...new Set(_camstack_types.ALL_CAPABILITY_DEFINITIONS.filter((c) => c.scope === "device").map((c) => c.name))].toSorted());
+/**
+* The keys of a cap's `runtimeState` object schema, or `[]` when the cap
+* declares none / it is not an object schema. Read structurally (no Zod
+* import, no cast) so a self-contained addon's schema instance still works
+* across the bundle boundary — `ZodObject.shape` is a public getter.
+*/
+function runtimeStateKeys(capName) {
+	const rs = _camstack_types.ALL_CAPABILITY_DEFINITIONS.find((c) => c.name === capName)?.runtimeState;
+	if (!rs || typeof rs !== "object") return [];
+	const shape = Reflect.get(rs, "shape");
+	if (!shape || typeof shape !== "object") return [];
+	return Object.keys(shape);
+}
+/**
+* Cold placeholder slice for a bound cap that declares `runtimeState` but
+* has never written it (e.g. a virtual-doorbell camera that has never rung).
+* Every declared field is seeded `null` so the tree surfaces the cap's
+* presence and reads as "never" instead of the cap being OMITTED entirely.
+* Returns `null` when the cap has no runtime-state schema (nothing to seed).
+*/
+function coldRuntimeStateSlice(capName) {
+	const keys = runtimeStateKeys(capName);
+	if (keys.length === 0) return null;
+	const slice = {};
+	for (const key of keys) slice[key] = null;
+	return slice;
+}
 /** Depth at which tree nodes start collapsed. Cap nodes (depth 0) and
 *  their direct slice keys (depth 1) render expanded; anything nested
 *  deeper opens on demand. */
@@ -44636,6 +44888,27 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", onCl
 	(0, react$1.useEffect)(() => {
 		seededRef.current = false;
 	}, [deviceId]);
+	const { data: bindings } = trpc.deviceManager.getBindings.useQuery({ deviceId }, { staleTime: 3e4 });
+	(0, react$1.useEffect)(() => {
+		const entries = bindings?.entries;
+		if (!entries || entries.length === 0) return;
+		const now = Date.now();
+		setCapStates((prev) => {
+			let mutated = false;
+			const next = new Map(prev);
+			for (const entry of entries) {
+				if (next.has(entry.capName)) continue;
+				const slice = coldRuntimeStateSlice(entry.capName);
+				if (!slice) continue;
+				next.set(entry.capName, {
+					slice,
+					updatedAt: now
+				});
+				mutated = true;
+			}
+			return mutated ? next : prev;
+		});
+	}, [bindings, deviceId]);
 	const patchCapState = (0, react$1.useCallback)((capName, slice) => {
 		setCapStates((prev) => {
 			const next = new Map(prev);
@@ -46738,6 +47011,7 @@ exports.DeviceItem = DeviceItem;
 exports.DeviceList = DeviceList;
 exports.DeviceMultiSelectField = DeviceMultiSelectField;
 exports.DeviceSelectField = DeviceSelectField;
+exports.DeviceStepMatrix = DeviceStepMatrix;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
@@ -46971,6 +47245,7 @@ exports.selectedDeviceOptions = selectedDeviceOptions;
 exports.serializeRecordedCommand = serializeRecordedCommand;
 exports.shouldCommit = shouldCommit;
 exports.shouldEmit = shouldEmit;
+exports.shouldUseSingleNode = shouldUseSingleNode;
 exports.sortRows = sortRows;
 exports.statusIcons = statusIcons;
 exports.stripParentNamePrefix = stripParentNamePrefix;