@camstack/ui-library 1.1.42 → 1.1.44

package/dist/index.cjs

@@ -8249,6 +8249,30 @@ var ArrowUp = createLucideIcon("arrow-up", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Baby = createLucideIcon("baby", [
+	["path", {
+		d: "M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5",
+		key: "1u7htd"
+	}],
+	["path", {
+		d: "M15 12h.01",
+		key: "1k8ypt"
+	}],
+	["path", {
+		d: "M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1",
+		key: "11xh7x"
+	}],
+	["path", {
+		d: "M9 12h.01",
+		key: "157uk2"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Ban = createLucideIcon("ban", [["circle", {
 	cx: "12",
 	cy: "12",
@@ -9203,6 +9227,74 @@ var Cloud = createLucideIcon("cloud", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Cog = createLucideIcon("cog", [
+	["path", {
+		d: "M11 10.27 7 3.34",
+		key: "16pf9h"
+	}],
+	["path", {
+		d: "m11 13.73-4 6.93",
+		key: "794ttg"
+	}],
+	["path", {
+		d: "M12 22v-2",
+		key: "1osdcq"
+	}],
+	["path", {
+		d: "M12 2v2",
+		key: "tus03m"
+	}],
+	["path", {
+		d: "M14 12h8",
+		key: "4f43i9"
+	}],
+	["path", {
+		d: "m17 20.66-1-1.73",
+		key: "eq3orb"
+	}],
+	["path", {
+		d: "m17 3.34-1 1.73",
+		key: "2wel8s"
+	}],
+	["path", {
+		d: "M2 12h2",
+		key: "1t8f8n"
+	}],
+	["path", {
+		d: "m20.66 17-1.73-1",
+		key: "sg0v6f"
+	}],
+	["path", {
+		d: "m20.66 7-1.73 1",
+		key: "1ow05n"
+	}],
+	["path", {
+		d: "m3.34 17 1.73-1",
+		key: "nuk764"
+	}],
+	["path", {
+		d: "m3.34 7 1.73 1",
+		key: "1ulond"
+	}],
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "2",
+		key: "1c9p78"
+	}],
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "8",
+		key: "46899m"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var CopyPlus = createLucideIcon("copy-plus", [
 	["line", {
 		x1: "15",
@@ -9855,6 +9947,26 @@ var GripHorizontal = createLucideIcon("grip-horizontal", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Hammer = createLucideIcon("hammer", [
+	["path", {
+		d: "m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9",
+		key: "1hayfq"
+	}],
+	["path", {
+		d: "m18 15 4-4",
+		key: "16gjal"
+	}],
+	["path", {
+		d: "m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5",
+		key: "15ts47"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var HardDrive = createLucideIcon("hard-drive", [
 	["path", {
 		d: "M10 16h.01",
@@ -10031,6 +10143,38 @@ var Info = createLucideIcon("info", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Laugh = createLucideIcon("laugh", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["path", {
+		d: "M18 13a6 6 0 0 1-6 5 6 6 0 0 1-6-5h12Z",
+		key: "b2q4dd"
+	}],
+	["line", {
+		x1: "9",
+		x2: "9.01",
+		y1: "9",
+		y2: "9",
+		key: "yxxnd0"
+	}],
+	["line", {
+		x1: "15",
+		x2: "15.01",
+		y1: "9",
+		y2: "9",
+		key: "1p4y9e"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var LayoutGrid = createLucideIcon("layout-grid", [
 	["rect", {
 		width: "7",
@@ -10722,6 +10866,16 @@ var Pencil = createLucideIcon("pencil", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Phone = createLucideIcon("phone", [["path", {
+	d: "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384",
+	key: "9njp5v"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Pipette = createLucideIcon("pipette", [
 	["path", {
 		d: "m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12",
@@ -12074,6 +12228,32 @@ var User = createLucideIcon("user", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Users = createLucideIcon("users", [
+	["path", {
+		d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+		key: "1yyitq"
+	}],
+	["path", {
+		d: "M16 3.128a4 4 0 0 1 0 7.744",
+		key: "16gr8j"
+	}],
+	["path", {
+		d: "M22 21v-2a4 4 0 0 0-3-3.87",
+		key: "kshegd"
+	}],
+	["circle", {
+		cx: "9",
+		cy: "7",
+		r: "4",
+		key: "nufk8"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var UtensilsCrossed = createLucideIcon("utensils-crossed", [
 	["path", {
 		d: "m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8",
@@ -14246,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
 	};
@@ -14260,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", {
@@ -14421,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"
 					]
 				})]
 			})
@@ -14454,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) => {
@@ -14481,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",
@@ -14531,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", {
@@ -14582,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 }) {
@@ -14634,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", {
@@ -14683,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 }) {
@@ -14754,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,
@@ -14766,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.
@@ -17507,8 +17880,6 @@ var useAddonsListFrameworkPackages = trpc.addons.listFrameworkPackages.useQuery;
 var useAddonsListCapabilityProviders = trpc.addons.listCapabilityProviders.useQuery;
 /** Generated alias around `trpc.addons.setCapabilityProviderEnabled.useMutation`. */
 var useAddonsSetCapabilityProviderEnabled = trpc.addons.setCapabilityProviderEnabled.useMutation;
-/** Generated alias around `trpc.addons.updateFrameworkPackage.useMutation`. */
-var useAddonsUpdateFrameworkPackage = trpc.addons.updateFrameworkPackage.useMutation;
 /** Generated alias around `trpc.addons.getVersions.useQuery`. */
 var useAddonsGetVersions = trpc.addons.getVersions.useQuery;
 /** Generated alias around `trpc.addons.restartAddon.useMutation`. */
@@ -26355,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
@@ -26533,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.
@@ -31310,12 +31669,30 @@ var EVENT_KIND_ICONS = {
 	doorbell: BellRing,
 	button: CircleDot,
 	"audio-speech": MessageSquare,
+	"audio-scream": Megaphone,
+	"audio-crying": Baby,
+	"audio-laughter": Laugh,
 	"audio-music": Music,
 	"audio-dog": Dog,
+	"audio-cat": Cat,
+	"audio-bird": Bird,
+	"audio-animal": PawPrint,
+	"audio-alarm": BellRing,
 	"audio-doorbell": BellRing,
-	"audio-siren": Siren,
 	"audio-glass_breaking": TriangleAlert,
-	"audio-alarm": TriangleAlert
+	"audio-gunshot": Crosshair,
+	"audio-vehicle": Car,
+	"audio-siren": Siren,
+	"audio-fire": Flame,
+	"audio-water": Droplets,
+	"audio-wind": Wind,
+	"audio-door": DoorOpen,
+	"audio-footsteps": Footprints,
+	"audio-crowd": Users,
+	"audio-telephone": Phone,
+	"audio-engine": Cog,
+	"audio-tools": Hammer,
+	"audio-silence": VolumeX
 };
 /** Resolve an `iconId` to a lucide component (falls back to `Tag`). */
 function resolveEventKindIcon(iconId) {
@@ -39783,6 +40160,7 @@ function computeClientHints(container) {
 var RECONNECT_BASE_DELAY_MS = 1500;
 var RECONNECT_MAX_DELAY_MS = 15e3;
 var MAX_RECONNECT_ATTEMPTS = 40;
+var FIRST_FRAME_TIMEOUT_MS = 8e3;
 function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, onConnectTiming, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const containerRef = (0, react$1.useRef)(null);
@@ -40159,14 +40537,26 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 						});
 						onConnectTiming?.({ ...timing });
 						const v = videoRef.current;
-						if (v && "requestVideoFrameCallback" in v) v.requestVideoFrameCallback(() => {
-							timing.firstFrameMs = ms();
-							console.info("[WebRTC timing] first decoded frame", {
-								streamKey,
-								firstFrameMs: timing.firstFrameMs
+						if (v && "requestVideoFrameCallback" in v) {
+							v.requestVideoFrameCallback(() => {
+								timing.firstFrameMs = ms();
+								console.info("[WebRTC timing] first decoded frame", {
+									streamKey,
+									firstFrameMs: timing.firstFrameMs
+								});
+								onConnectTiming?.({ ...timing });
 							});
-							onConnectTiming?.({ ...timing });
-						});
+							setTimeout(() => {
+								if (!mountedRef.current) return;
+								if (timing.firstFrameMs !== void 0) return;
+								console.warn("[WebRTC timing] NO decoded frame (stalled)", {
+									streamKey,
+									sinceIceConnectedMs: ms() - (timing.iceConnectedMs ?? 0),
+									iceConnectedMs: timing.iceConnectedMs,
+									firstTrackMs: timing.firstTrackMs
+								});
+							}, FIRST_FRAME_TIMEOUT_MS);
+						}
 					}
 					reconnectAttemptsRef.current = 0;
 					if (seamless) swapInOnce();
@@ -40199,8 +40589,12 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 			await pc.setLocalDescription(offer);
 			timing.localSetMs = ms();
 			if (!mountedRef.current || abort.signal.aborted) return;
+			const clientOfferHints = {
+				...computeClientHints(containerRef.current),
+				...hintsOverride
+			};
 			const signalingStart = ms();
-			const { sessionId: sid, sdpAnswer } = await handleOffer(pc.localDescription?.sdp ?? offer.sdp ?? "");
+			const { sessionId: sid, sdpAnswer } = await handleOffer(pc.localDescription?.sdp ?? offer.sdp ?? "", void 0, clientOfferHints);
 			timing.signalingRttMs = ms() - signalingStart;
 			sessionId = sid;
 			sessionIdsRef.current.add(sid);
@@ -40261,7 +40655,8 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		partialReconnectReset,
 		updateState,
 		onError,
-		startSessionStatePoll
+		startSessionStatePoll,
+		hintsOverride
 	]);
 	renegotiateRef.current = (0, react$1.useCallback)(async (sessionId, target) => {
 		const reofferFn = reoffer;
@@ -40274,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) {
@@ -40283,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;
@@ -40295,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();
@@ -40324,7 +40763,11 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				pc.close();
 				return;
 			}
-			const { sessionId: sid, sdpAnswer } = await reofferFn(sessionId, pc.localDescription?.sdp ?? offer.sdp ?? "", target);
+			const reofferHints = {
+				...computeClientHints(containerRef.current),
+				...hintsOverride
+			};
+			const { sessionId: sid, sdpAnswer } = await reofferFn(sessionId, pc.localDescription?.sdp ?? offer.sdp ?? "", target, reofferHints);
 			if (!mountedRef.current) {
 				pc.close();
 				return;
@@ -40375,7 +40818,8 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		addIceCandidate,
 		getIceCandidates,
 		updateState,
-		startSessionStatePoll
+		startSessionStatePoll,
+		hintsOverride
 	]);
 	const connect = useClientOffer ? connectClientOffer : useServerOffer ? connectServerOffer : connectWhep;
 	const connectRef = (0, react$1.useRef)(() => {});
@@ -44371,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. */
@@ -44417,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);
@@ -46088,13 +46580,14 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 		deviceId,
 		getIceServers
 	]);
-	const handleOffer = (0, react$1.useCallback)(async (target, sdpOffer, sessionId) => {
+	const handleOffer = (0, react$1.useCallback)(async (target, sdpOffer, sessionId, hints) => {
 		if (deviceId === null) throw new Error("No device selected");
 		return trpc.webrtcSession.handleOffer.mutate({
 			deviceId,
 			target,
 			sdpOffer,
-			...sessionId !== void 0 ? { sessionId } : {}
+			...sessionId !== void 0 ? { sessionId } : {},
+			...hints !== void 0 ? { hints } : {}
 		});
 	}, [trpc, deviceId]);
 	const sendAnswer = (0, react$1.useCallback)(async (sessionId, sdpAnswer) => {
@@ -46518,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;
@@ -46751,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;
@@ -46797,7 +47292,6 @@ exports.useAddonsSetAutoUpdateSettings = useAddonsSetAutoUpdateSettings;
 exports.useAddonsSetCapabilityProviderEnabled = useAddonsSetCapabilityProviderEnabled;
 exports.useAddonsStartJob = useAddonsStartJob;
 exports.useAddonsUninstallPackage = useAddonsUninstallPackage;
-exports.useAddonsUpdateFrameworkPackage = useAddonsUpdateFrameworkPackage;
 exports.useAddonsUpdatePackage = useAddonsUpdatePackage;
 exports.useAirQualitySensorGetStatus = useAirQualitySensorGetStatus;
 exports.useAlarmPanelArm = useAlarmPanelArm;