@camstack/ui-library 1.2.245 → 1.2.246

package/dist/index.cjs

@@ -1707,41 +1707,6 @@ var CookingPot = createLucideIcon("cooking-pot", [
 * 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",
-		x2: "15",
-		y1: "12",
-		y2: "18",
-		key: "1p7wdc"
-	}],
-	["line", {
-		x1: "12",
-		x2: "18",
-		y1: "15",
-		y2: "15",
-		key: "1nscbv"
-	}],
-	["rect", {
-		width: "14",
-		height: "14",
-		x: "8",
-		y: "8",
-		rx: "2",
-		ry: "2",
-		key: "17jyea"
-	}],
-	["path", {
-		d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
-		key: "zix9uf"
-	}]
-]);
-/**
-* @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 Copy = createLucideIcon("copy", [["rect", {
 	width: "14",
 	height: "14",
@@ -7914,14 +7879,6 @@ var usePipelineExecutorGetGlobalPipelineConfig = trpc.pipelineExecutor.getGlobal
 var usePipelineExecutorGetOrchestratorConfigSchema = trpc.pipelineExecutor.getOrchestratorConfigSchema.useQuery;
 /** Generated alias around `trpc.pipelineExecutor.validatePipeline.useQuery`. */
 var usePipelineExecutorValidatePipeline = trpc.pipelineExecutor.validatePipeline.useQuery;
-/** Generated alias around `trpc.pipelineExecutor.listTemplates.useQuery`. */
-var usePipelineExecutorListTemplates = trpc.pipelineExecutor.listTemplates.useQuery;
-/** Generated alias around `trpc.pipelineExecutor.saveTemplate.useMutation`. */
-var usePipelineExecutorSaveTemplate = trpc.pipelineExecutor.saveTemplate.useMutation;
-/** Generated alias around `trpc.pipelineExecutor.updateTemplate.useMutation`. */
-var usePipelineExecutorUpdateTemplate = trpc.pipelineExecutor.updateTemplate.useMutation;
-/** Generated alias around `trpc.pipelineExecutor.deleteTemplate.useMutation`. */
-var usePipelineExecutorDeleteTemplate = trpc.pipelineExecutor.deleteTemplate.useMutation;
 /** Generated alias around `trpc.pipelineExecutor.getCapabilities.useQuery`. */
 var usePipelineExecutorGetCapabilities = trpc.pipelineExecutor.getCapabilities.useQuery;
 /** Generated alias around `trpc.pipelineExecutor.getAddonModels.useQuery`. */
@@ -8068,14 +8025,6 @@ var usePipelineOrchestratorSetCameraSensors = trpc.pipelineOrchestrator.setCamer
 var usePipelineOrchestratorReconcileFromDisk = trpc.pipelineOrchestrator.reconcileFromDisk.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.getReconcileFromDiskStatus.useQuery`. */
 var usePipelineOrchestratorGetReconcileFromDiskStatus = trpc.pipelineOrchestrator.getReconcileFromDiskStatus.useQuery;
-/** Generated alias around `trpc.pipelineOrchestrator.listTemplates.useQuery`. */
-var usePipelineOrchestratorListTemplates = trpc.pipelineOrchestrator.listTemplates.useQuery;
-/** Generated alias around `trpc.pipelineOrchestrator.saveTemplate.useMutation`. */
-var usePipelineOrchestratorSaveTemplate = trpc.pipelineOrchestrator.saveTemplate.useMutation;
-/** Generated alias around `trpc.pipelineOrchestrator.updateTemplate.useMutation`. */
-var usePipelineOrchestratorUpdateTemplate = trpc.pipelineOrchestrator.updateTemplate.useMutation;
-/** Generated alias around `trpc.pipelineOrchestrator.deleteTemplate.useMutation`. */
-var usePipelineOrchestratorDeleteTemplate = trpc.pipelineOrchestrator.deleteTemplate.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.getDeviceSettingsContribution.useQuery`. */
 var usePipelineOrchestratorGetDeviceSettingsContribution = trpc.pipelineOrchestrator.getDeviceSettingsContribution.useQuery;
 /** Generated alias around `trpc.pipelineOrchestrator.getDeviceLiveContribution.useQuery`. */
@@ -28746,6 +28695,45 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 	});
 }
 //#endregion
+//#region src/composites/accelerator-label.ts
+function names(device) {
+	const backend = device.backend.toLowerCase();
+	const dev = device.device.toLowerCase();
+	if (device.key === "cpu" || dev === "cpu" || backend === "cpu") return {
+		label: "CPU",
+		short: "CPU"
+	};
+	if (dev === "npu") return {
+		label: "Intel NPU",
+		short: "NPU"
+	};
+	if (dev === "gpu" || dev === "igpu") return {
+		label: "Intel iGPU",
+		short: "iGPU"
+	};
+	if (backend === "edgetpu") return {
+		label: "Coral Edge TPU",
+		short: "Coral"
+	};
+	if (backend === "coreml") return {
+		label: "Apple Neural Engine",
+		short: "ANE"
+	};
+	const pretty = `${device.backend} ${device.device}`.trim().replace(/\b\w/g, (c) => c.toUpperCase());
+	return {
+		label: pretty.length > 0 ? pretty : device.key,
+		short: device.backend || device.key
+	};
+}
+/** "Intel NPU", "Apple Neural Engine", "Coral Edge TPU", "CPU" — Auto tune's names too. */
+function acceleratorLabel(device) {
+	return names(device).label;
+}
+/** "NPU", "ANE", "Coral", "CPU" — chips and tabs. */
+function acceleratorShortLabel(device) {
+	return names(device).short;
+}
+//#endregion
 //#region src/composites/grouped-model-selector.tsx
 /**
 * GroupedModelSelector — the shared Family → Tier → Variant model picker.
@@ -29973,9 +29961,9 @@ function RootSuppliedModelNote({ rootModel, stepModelId }) {
 /**
 * AgentStepEditor — one step on ONE accelerator: its model and its settings,
 * as a single node-level layer. Model Studio's "settings for this installed
-* model" dialog uses it. The pipeline pages use the step inspector, which lays
-* the same parts out across accelerators and layers (D754/D756); the settings
-* form here is that inspector's `LayeredSettingsForm` with one layer.
+* model" dialog uses it. The pipeline pages use the step matrix's panel, which lays
+* the same parts out across accelerators and layers (D754/D757); the settings
+* form here is that panel's `LayeredSettingsForm` with one layer.
 */
 function AgentStepEditor({ addon, agentDefault, onChangeAgentConfig, engineFormat, effectiveModelId, rootModel }) {
 	const modelsForFormat = (0, react$1.useMemo)(() => stepModelOptions(addon.models, engineFormat), [addon.models, engineFormat]);
@@ -55405,25 +55393,46 @@ function ClassChips({ inputs, outputs }) {
 * the first column; each device's real format is shown per sub-column instead
 * ("Coral Edge TPU · tflite").
 */
+/** The per-accelerator lines of a column header: name, format, model, off. */
+function AgentColumnLines({ column }) {
+	const name = column.deviceLabel ?? column.deviceKey;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		(name !== void 0 || column.disabled === true) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 items-center gap-1",
+			children: [name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate text-[10px] font-medium text-foreground/90",
+				children: name
+			}), column.disabled === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "shrink-0 rounded bg-muted px-1 text-[8px] font-semibold uppercase text-foreground-subtle",
+				children: "off"
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "truncate text-[9px] text-foreground-subtle",
+			children: column.engineLabel
+		}),
+		column.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "truncate font-mono text-[9px] text-foreground-subtle",
+			title: column.detail,
+			children: column.detail
+		})
+	] });
+}
 function GroupedAgentHeader({ group }) {
+	const nodeLabel = group.columns[0]?.nodeLabel ?? group.agentNodeId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "columnheader",
 		className: "sticky top-0 z-10 min-w-0 border-b border-l border-border bg-muted/60",
 		style: { gridColumn: `span ${group.columns.length}` },
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "truncate px-3 pt-2 pb-1 text-xs font-semibold text-foreground",
-			children: group.agentNodeId
+			children: nodeLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "mt-1 flex border-t border-border/50",
-			children: group.columns.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("min-w-0 flex-1 px-3 py-1", i > 0 && "border-l border-border/50"),
-				title: `${c.deviceLabel ?? c.deviceKey} · ${c.engineLabel}`,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "truncate text-[10px] font-medium text-foreground/90",
-					children: c.deviceLabel ?? c.deviceKey
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "truncate text-[9px] text-foreground-subtle",
-					children: c.engineLabel
-				})]
+			children: group.columns.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn("min-w-0 flex-1 px-3 py-1", i > 0 && "border-l border-border/50", c.disabled === true && "opacity-70"),
+				title: `${c.deviceLabel ?? c.deviceKey} · ${c.engineLabel}${c.detail ? ` · ${c.detail}` : ""}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentColumnLines, { column: c })
 			}, agentColumnKey(c)))
 		})]
 	});
@@ -55527,25 +55536,30 @@ function cellButtonClass(state, isSelected, extra) {
 //#endregion
 //#region src/composites/device-step-matrix.tsx
 /**
-* DeviceStepMatrix — the READ-ONLY "Compare" view of the step inspector
-* (D756): one hierarchical steps × accelerators matrix showing what every
-* accelerator runs for every step, side by side.
-*
-*   Column 1 (STICKY): the indented step tree (slot + name + class-flow chips).
-*   Columns 2..N (one per accelerator): the model chip, "⚠ skip" when the step
-*     runs on the camera but the accelerator has no compatible model, or "—".
-*     A click selects that (step, accelerator) in the inspector — the matrix
-*     itself edits nothing (it used to host a slide-over editor that scrolled
-*     away with the page).
-*
-* 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`.
+* DeviceStepMatrix — the step × accelerator TABLE of a detection pipeline
+* (D757): the node's Pipeline tab and the camera's Detection pipeline → Steps
+* are this matrix, and a click on a cell (or a step's header) opens that step's
+* settings in a docked panel (`StepDetailDock`) that overlays the page instead
+* of reflowing the matrix.
+*
+*   Column 1 (STICKY): the indented step tree — slot, name, class-flow chips,
+*     and an optional badge (the camera's gate). The header is a button: it
+*     opens the step on the selected accelerator.
+*   Columns 2..N: one per accelerator, grouped under their node; the header
+*     names the accelerator, its format, the model it elects, and "off" for a
+*     switched-off one. A cell shows the model that runs there, or "⚠ skip",
+*     "→ iGPU", "root", "cluster", "ovr", "—".
+*
+* Keyboard: ONE Tab stop (a roving tabindex over the step headers and cells);
+* arrows move, Home / End go to the row's ends, Enter or Space opens.
+*
+* `reserveRightPx`: the width a docked panel covers at the right of the
+* viewport. The matrix adds a trailing spacer that wide (so any column can
+* scroll clear of it) and scrolls the selected cell into the uncovered part —
+* it never shrinks, so nothing reflows when the panel opens.
+*
+* Responsive, container-measured: narrower than the step column plus two
+* columns, the matrix shows ONE node at a time with a node selector.
 */
 /** The sticky step column. */
 var STEP_COL_REM = 18;
@@ -55556,11 +55570,41 @@ var STEP_COL_PX = STEP_COL_REM * 16;
 * step column and lets the device columns scroll horizontally beside it.
 */
 var STEP_COL_SINGLE_REM = 11;
-function StepCell({ node, depth }) {
+/** Where a key press moves the roving focus in a `rows × cols` grid. */
+function nextGridPosition(key, pos, rows, cols) {
+	const clamp = (r, c) => ({
+		r: Math.max(0, Math.min(rows - 1, r)),
+		c: Math.max(0, Math.min(cols - 1, c))
+	});
+	switch (key) {
+		case "ArrowRight": return clamp(pos.r, pos.c + 1);
+		case "ArrowLeft": return clamp(pos.r, pos.c - 1);
+		case "ArrowDown": return clamp(pos.r + 1, pos.c);
+		case "ArrowUp": return clamp(pos.r - 1, pos.c);
+		case "Home": return clamp(pos.r, 0);
+		case "End": return clamp(pos.r, cols - 1);
+		case "PageDown": return clamp(rows - 1, pos.c);
+		case "PageUp": return clamp(0, pos.c);
+		default: return null;
+	}
+}
+function StepCell({ node, depth, r, tabbable, selected, badge, onClick, sticky }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "sticky left-0 z-10 flex flex-col gap-2 border-b border-border bg-surface px-3 py-2 text-xs min-w-0",
-		style: { paddingLeft: `${12 + depth * 14}px` },
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node })
+		role: "rowheader",
+		className: cn("min-w-0 border-b border-border bg-surface", sticky && "sticky left-0 z-10"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"data-r": r,
+			"data-c": 0,
+			"data-step": node.addonId,
+			"data-col": "",
+			tabIndex: tabbable ? 0 : -1,
+			"aria-current": selected ? "true" : void 0,
+			onClick: onClick ? (e) => onClick(e.detail === 0) : void 0,
+			className: cn("flex h-full w-full min-w-0 items-start gap-2 px-3 py-2 text-left text-xs outline-none", "hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", selected && "bg-primary/10 shadow-[inset_3px_0_0_var(--color-primary)]"),
+			style: { paddingLeft: `${12 + depth * 14}px` },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node }), badge]
+		})
 	});
 }
 /**
@@ -55590,68 +55634,179 @@ function NodeSelectorBar({ nodes, selected, onSelect }) {
 						role: "tab",
 						"aria-selected": isSelected,
 						onClick: () => onSelect(a.agentNodeId),
-						title: `${a.agentNodeId} · ${a.engineLabel}`,
+						title: `${a.columns[0]?.nodeLabel ?? 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
+						children: a.columns[0]?.nodeLabel ?? a.agentNodeId
 					}, a.agentNodeId);
 				})
 			})
 		]
 	});
 }
-function MatrixGrid({ tree, agents, getCellState, onCellClick, selectedCell, single }) {
+var MatrixGrid = (0, react$1.forwardRef)(function MatrixGrid({ tree, agents, getCellState, onCellClick, onStepClick, stepBadge, selectedCell, single, reserveRightPx, label }, ref) {
 	const rows = (0, react$1.useMemo)(() => flattenTree(tree), [tree]);
 	const groups = (0, react$1.useMemo)(() => groupAgentColumns(agents), [agents]);
+	const boxRef = (0, react$1.useRef)(null);
+	const stepColRem = single ? STEP_COL_SINGLE_REM : STEP_COL_REM;
+	const gridTemplate = `${stepColRem}rem repeat(${agents.length}, 13rem)`;
+	const cols = agents.length + 1;
+	const [stickySteps, setStickySteps] = (0, react$1.useState)(true);
+	(0, react$1.useLayoutEffect)(() => {
+		const box = boxRef.current;
+		if (!box || reserveRightPx <= 0) {
+			setStickySteps(true);
+			return;
+		}
+		const measure = () => {
+			const left = box.getBoundingClientRect().left;
+			setStickySteps(window.innerWidth - reserveRightPx - left >= stepColRem * 16 + 208 + 24);
+		};
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, [reserveRightPx, stepColRem]);
+	const selectedPos = (0, react$1.useMemo)(() => {
+		if (selectedCell === null) return null;
+		const r = rows.findIndex((row) => row.node.addonId === selectedCell.addonId);
+		if (r < 0) return null;
+		const c = agents.findIndex((a) => agentColumnKey(a) === agentColumnKey(selectedCell));
+		return {
+			r,
+			c: c < 0 ? 0 : c + 1
+		};
+	}, [
+		selectedCell,
+		rows,
+		agents
+	]);
+	const [focusPos, setFocusPos] = (0, react$1.useState)({
+		r: 0,
+		c: 0
+	});
+	(0, react$1.useEffect)(() => {
+		if (selectedPos !== null) setFocusPos(selectedPos);
+	}, [selectedPos]);
+	const tab = focusPos.r < rows.length && focusPos.c < cols ? focusPos : {
+		r: 0,
+		c: 0
+	};
+	const focusAt = (r, c) => {
+		boxRef.current?.querySelector(`[data-r="${r}"][data-c="${c}"]`)?.focus();
+	};
+	(0, react$1.useImperativeHandle)(ref, () => ({ focusCell: (addonId, columnKey) => {
+		const r = rows.findIndex((row) => row.node.addonId === addonId);
+		if (r < 0) return;
+		const index = columnKey === null ? -1 : agents.findIndex((a) => agentColumnKey(a) === columnKey);
+		const c = index < 0 ? 0 : index + 1;
+		setFocusPos({
+			r,
+			c
+		});
+		focusAt(r, c);
+	} }), [rows, agents]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (selectedPos === null) return;
+		const box = boxRef.current;
+		const el = box?.querySelector(`[data-r="${selectedPos.r}"][data-c="${selectedPos.c}"]`);
+		if (!box || !el) return;
+		if (typeof el.scrollIntoView === "function") el.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		if (reserveRightPx <= 0) return;
+		const limit = window.innerWidth - reserveRightPx - 12;
+		const right = el.getBoundingClientRect().right;
+		if (right > limit) box.scrollLeft += right - limit;
+	}, [
+		selectedPos,
+		reserveRightPx,
+		stickySteps
+	]);
+	const onKeyDown = (e) => {
+		if (!(e.target instanceof HTMLElement) || e.target.dataset.r === void 0) return;
+		const pos = {
+			r: Number(e.target.dataset.r),
+			c: Number(e.target.dataset.c)
+		};
+		const next = nextGridPosition(e.key, pos, rows.length, cols);
+		if (next === null) return;
+		e.preventDefault();
+		setFocusPos(next);
+		focusAt(next.r, next.c);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: boxRef,
 		className: "overflow-auto rounded border border-border",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid w-max",
-			style: { gridTemplateColumns: `${single ? STEP_COL_SINGLE_REM : STEP_COL_REM}rem repeat(${agents.length}, 13rem)` },
-			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"
-				}),
-				groups.map((group) => group.grouped ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupedAgentHeader, { group }, group.agentNodeId) : group.columns.map((col) => /* @__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",
+			className: "flex w-max",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "grid",
+				"aria-label": label,
+				"aria-rowcount": rows.length + 1,
+				className: "grid w-max",
+				style: { gridTemplateColumns: gridTemplate },
+				onKeyDown,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "row",
+					className: "contents",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "truncate text-xs font-semibold text-foreground",
-						children: col.agentNodeId
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "truncate text-[10px] text-foreground-subtle",
-						children: col.engineLabel
+						role: "columnheader",
+						className: cn("top-0 z-20 border-b border-border bg-muted/60 px-3 py-2 text-[10px] uppercase tracking-widest text-foreground-subtle", stickySteps ? "sticky left-0" : "sticky"),
+						children: "Step"
+					}), groups.map((group) => group.grouped ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupedAgentHeader, { group }, group.agentNodeId) : group.columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						role: "columnheader",
+						className: cn("sticky top-0 z-10 min-w-0 border-b border-l border-border bg-muted/60 px-3 py-2", col.disabled === true && "opacity-70"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "truncate text-xs font-semibold text-foreground",
+							children: col.nodeLabel ?? col.agentNodeId
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentColumnLines, { column: col })]
+					}, agentColumnKey(col))))]
+				}), rows.map(({ node, depth }, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "row",
+					className: "contents",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCell, {
+						node,
+						depth,
+						r,
+						tabbable: tab.r === r && tab.c === 0,
+						selected: selectedCell?.addonId === node.addonId,
+						badge: stepBadge?.(node.addonId),
+						onClick: onStepClick ? (kb) => onStepClick(node.addonId, kb) : void 0,
+						sticky: stickySteps
+					}), agents.map((a, i) => {
+						const state = getCellState(node.addonId, a);
+						const isSelected = selectedCell !== null && selectedCell.addonId === node.addonId && agentColumnKey(selectedCell) === agentColumnKey(a);
+						const actionable = state.kind === "enabled" || state.kind === "skip";
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "gridcell",
+							className: "min-w-0 border-b border-l border-border",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-r": r,
+								"data-c": i + 1,
+								"data-step": node.addonId,
+								"data-col": agentColumnKey(a),
+								tabIndex: tab.r === r && tab.c === i + 1 ? 0 : -1,
+								"aria-disabled": !actionable,
+								"aria-selected": isSelected,
+								onClick: (e) => {
+									if (actionable) onCellClick(node.addonId, a, e.detail === 0);
+								},
+								className: cellButtonClass(state, isSelected, cn("h-full w-full min-w-0 overflow-hidden px-3 py-2 outline-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", !actionable && "cursor-default hover:bg-transparent", a.disabled === true && "opacity-70")),
+								children: renderCellContent(state)
+							})
+						}, agentColumnKey(a));
 					})]
-				}, agentColumnKey(col)))),
-				rows.map(({ node, depth }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixRow, {
-					node,
-					depth,
-					agents,
-					getCellState,
-					onCellClick,
-					selectedCell
-				}, node.addonId))
-			]
+				}, node.addonId))]
+			}), reserveRightPx > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				style: { width: reserveRightPx },
+				className: "shrink-0"
+			})]
 		})
 	});
-}
-function MatrixRow({ node, depth, agents, getCellState, onCellClick, selectedCell }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCell, {
-		node,
-		depth
-	}), agents.map((a) => {
-		const state = getCellState(node.addonId, a);
-		const isSelected = selectedCell !== null && selectedCell.addonId === node.addonId && agentColumnKey(selectedCell) === agentColumnKey(a);
-		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),
-			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)
-		}, agentColumnKey(a));
-	})] });
-}
-function DeviceStepMatrix({ tree, agents, getCellState, onCellClick, selectedCell, fallbackNodeId, onFallbackNodeChange }) {
+});
+var DeviceStepMatrix = (0, react$1.forwardRef)(function DeviceStepMatrix({ tree, agents, getCellState, onCellClick, selectedCell, fallbackNodeId, onFallbackNodeChange, onStepClick, stepBadge, reserveRightPx = 0, label = "Detection steps" }, ref) {
 	const containerRef = (0, react$1.useRef)(null);
 	const [width, setWidth] = (0, react$1.useState)(0);
 	(0, react$1.useLayoutEffect)(() => {
@@ -55669,6 +55824,15 @@ function DeviceStepMatrix({ tree, agents, getCellState, onCellClick, selectedCel
 		if (nodes.length === 0) return null;
 		return nodes.find((n) => n.agentNodeId === fallbackNodeId) ?? nodes[0] ?? null;
 	}, [nodes, fallbackNodeId]);
+	const selectedNodeId = selectedCell?.agentNodeId;
+	(0, react$1.useEffect)(() => {
+		if (single && selectedNodeId !== void 0 && selectedNodeId !== fallbackNodeId) onFallbackNodeChange(selectedNodeId);
+	}, [
+		single,
+		selectedNodeId,
+		fallbackNodeId,
+		onFallbackNodeChange
+	]);
 	const shownAgents = single && selectedNode ? selectedNode.columns : agents;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
@@ -55678,15 +55842,20 @@ function DeviceStepMatrix({ tree, agents, getCellState, onCellClick, selectedCel
 			selected: selectedNode.agentNodeId,
 			onSelect: onFallbackNodeChange
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid, {
+			ref,
 			tree,
 			agents: shownAgents,
 			getCellState,
 			onCellClick,
+			onStepClick,
+			stepBadge,
 			selectedCell,
-			single: single && selectedNode !== null
+			single: single && selectedNode !== null,
+			reserveRightPx,
+			label
 		})]
 	});
-}
+});
 //#endregion
 //#region src/composites/discovery-panel.tsx
 function DiscoveryPanel({ deviceId, className = "", onOpenChild }) {
@@ -56625,43 +56794,13 @@ function PhaseIcon({ phase, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { ...props });
 }
 //#endregion
-//#region src/lib/validate-template.ts
-function validateTemplate(steps, schema) {
-	const availableAddonIds = new Set(schema.slots.flatMap((s) => s.addons.map((a) => a.id)));
-	const warnings = [];
-	function validateStep(step) {
-		if (!availableAddonIds.has(step.addonId)) {
-			warnings.push(`Addon "${step.addonId}" is no longer available — step removed`);
-			return null;
-		}
-		const addon = schema.slots.flatMap((s) => s.addons).find((a) => a.id === step.addonId);
-		let modelId = step.modelId;
-		if (addon && !addon.models.some((m) => m.id === modelId)) {
-			const fallback = addon.defaultModelId;
-			warnings.push(`Model "${modelId}" not available for ${step.addonId} — using "${fallback}"`);
-			modelId = fallback;
-		}
-		const validChildren = step.children.map((c) => validateStep(c)).filter((c) => c !== null);
-		return {
-			...step,
-			modelId,
-			children: validChildren
-		};
-	}
-	const validSteps = steps.map((s) => validateStep(s)).filter((s) => s !== null);
-	return {
-		valid: warnings.length === 0,
-		steps: validSteps,
-		warnings
-	};
-}
-//#endregion
 //#region src/composites/pipeline-builder.tsx
 /**
-* PipelineBuilder — orchestrates the pipeline step tree with template management.
+* PipelineBuilder — orchestrates the pipeline step tree.
 *
-* Renders: template bar (save/load/delete), step tree from schema with nested
-* children, placeholder steps for disabled addons, all driven by API schema.
+* Renders the step tree from schema with nested children and placeholder steps
+* for disabled addons, all driven by API schema. There are no saved pipeline
+* templates (D759): the tree is the caller's state.
 */
 function buildSchemaMap(schema) {
 	const map = /* @__PURE__ */ new Map();
@@ -56713,31 +56852,9 @@ function PlaceholderStep({ addon, onClick }) {
 		})
 	});
 }
-function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateId, onSelectTemplate, onSaveTemplate, onUpdateTemplate, onDeleteTemplate, readOnly = false, excludeAddons = [], hideTemplates = false, showOnlyEnabled = false, showSlotLabels = false }) {
+function PipelineBuilder({ schema, steps, onChange, readOnly = false, excludeAddons = [], showOnlyEnabled = false, showSlotLabels = false }) {
 	const excluded = (0, react$1.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
 	const schemaMap = (0, react$1.useMemo)(() => buildSchemaMap(schema), [schema]);
-	const [warnings, setWarnings] = (0, react$1.useState)([]);
-	const dirty = selectedTemplateId ? JSON.stringify(steps) !== JSON.stringify(templates.find((t) => t.id === selectedTemplateId)?.steps) : false;
-	function handleSelectTemplate(e) {
-		const id = e.target.value || null;
-		if (id) {
-			const tpl = templates.find((t) => t.id === id);
-			if (tpl) setWarnings([...validateTemplate(tpl.steps, schema).warnings]);
-		} else setWarnings([]);
-		onSelectTemplate(id);
-	}
-	function handleSave() {
-		if (selectedTemplateId) onUpdateTemplate(selectedTemplateId, steps);
-	}
-	function handleSaveAs() {
-		const name = window.prompt("Template name:");
-		if (name?.trim()) onSaveTemplate(name.trim(), steps);
-	}
-	function handleDelete() {
-		if (!selectedTemplateId) return;
-		const tpl = templates.find((t) => t.id === selectedTemplateId);
-		if (tpl && window.confirm(`Delete template "${tpl.name}"?`)) onDeleteTemplate(selectedTemplateId);
-	}
 	/**
 	* When a step is updated, auto-enable the entire ancestor chain if a
 	* child/grandchild was just enabled. This ensures enabling face-recognition
@@ -56907,104 +57024,42 @@ function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateI
 			})]
 		}, step.addonId);
 	}
-	const rootSlots = schema.slots.filter((s) => s.parentSlot === null).toSorted((a, b) => a.priority - b.priority);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "space-y-4",
-		children: [
-			!hideTemplates && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rounded-lg border border-border bg-surface p-3",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "relative flex-1 min-w-0",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-								value: selectedTemplateId ?? "",
-								onChange: handleSelectTemplate,
-								className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary/50",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-									value: "",
-									children: "No template"
-								}), templates.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-									value: t.id,
-									children: t.name
-								}, t.id))]
-							})
-						}),
-						dirty && /* @__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)("button", {
-							onClick: handleSave,
-							disabled: !selectedTemplateId || readOnly,
-							title: "Save",
-							className: cn("p-2 rounded-lg border border-border transition-colors", selectedTemplateId && !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							onClick: handleSaveAs,
-							disabled: readOnly,
-							title: "Save As",
-							className: cn("p-2 rounded-lg border border-border transition-colors", !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyPlus, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							onClick: handleDelete,
-							disabled: !selectedTemplateId || readOnly,
-							title: "Delete",
-							className: cn("p-2 rounded-lg border border-border transition-colors", selectedTemplateId && !readOnly ? "text-foreground-subtle hover:text-danger" : "text-foreground-subtle/30 cursor-not-allowed"),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-4 w-4" })
-						})
-					]
-				})
-			}),
-			warnings.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-amber-400 space-y-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "font-medium",
-						children: "Template loaded with warnings:"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						onClick: () => setWarnings([]),
-						className: "text-amber-400/60 hover:text-amber-400",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3.5 w-3.5" })
-					})]
-				}), warnings.map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["• ", w] }, i))]
-			}),
-			rootSlots.map((slot) => {
-				const allSlotSteps = steps.filter((s) => s.slot === slot.id && !excluded.has(s.addonId));
-				const slotSteps = showOnlyEnabled ? allSlotSteps.filter((s) => s.enabled) : allSlotSteps;
-				const missingRootAddons = showOnlyEnabled ? [] : slot.addons.filter((a) => !existingIds.has(a.id) && !excluded.has(a.id));
-				const groups = /* @__PURE__ */ new Map();
-				const ungrouped = [];
-				for (const step of slotSteps) if (step.group) {
-					if (!groups.has(step.group)) groups.set(step.group, []);
-					groups.get(step.group).push(step);
-				} else ungrouped.push(step);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
-					children: [
-						showSlotLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50",
-							children: ["Slot: ", slot.label]
-						}),
-						ungrouped.map((step) => renderStep(step)),
-						[...groups.entries()].map(([groupName, groupSteps]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "space-y-2 rounded-lg border border-border/40 p-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50 px-1",
-								children: groupName
-							}), groupSteps.map((step) => renderStep(step))]
-						}, groupName)),
-						!readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderStep, {
-							addon,
-							onClick: () => {
-								onChange([...steps, createDefaultStep(addon)]);
-							}
-						}, addon.id))
-					]
-				}, slot.id);
-			})
-		]
+		children: schema.slots.filter((s) => s.parentSlot === null).toSorted((a, b) => a.priority - b.priority).map((slot) => {
+			const allSlotSteps = steps.filter((s) => s.slot === slot.id && !excluded.has(s.addonId));
+			const slotSteps = showOnlyEnabled ? allSlotSteps.filter((s) => s.enabled) : allSlotSteps;
+			const missingRootAddons = showOnlyEnabled ? [] : slot.addons.filter((a) => !existingIds.has(a.id) && !excluded.has(a.id));
+			const groups = /* @__PURE__ */ new Map();
+			const ungrouped = [];
+			for (const step of slotSteps) if (step.group) {
+				if (!groups.has(step.group)) groups.set(step.group, []);
+				groups.get(step.group).push(step);
+			} else ungrouped.push(step);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [
+					showSlotLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50",
+						children: ["Slot: ", slot.label]
+					}),
+					ungrouped.map((step) => renderStep(step)),
+					[...groups.entries()].map(([groupName, groupSteps]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2 rounded-lg border border-border/40 p-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50 px-1",
+							children: groupName
+						}), groupSteps.map((step) => renderStep(step))]
+					}, groupName)),
+					!readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderStep, {
+						addon,
+						onClick: () => {
+							onChange([...steps, createDefaultStep(addon)]);
+						}
+					}, addon.id))
+				]
+			}, slot.id);
+		})
 	});
 }
 //#endregion
@@ -57793,166 +57848,104 @@ function SegmentedChoice({ label, options, value, onChange }) {
 	});
 }
 //#endregion
-//#region src/composites/step-inspector/step-chips.tsx
-function chipText(state) {
-	switch (state.kind) {
-		case "enabled":
-			if (state.suppliedByRoot !== void 0) return "root";
-			return state.jumpTo !== void 0 ? `→ ${state.jumpTo}` : state.modelId;
-		case "skip": return state.jumpTo !== void 0 ? `→ ${state.jumpTo}` : "skip";
-		case "disabled": return "off";
-		case "na": return "—";
-	}
-}
-/** What a chip MEANS — the full model id, not its shortened text. */
-function chipKey(state) {
-	return state.kind === "enabled" ? `${state.modelId}|${chipText(state)}` : chipText(state);
-}
-function chipTone(state, selected) {
-	if (selected) return "border-primary/60 text-primary";
-	if (state.kind === "skip" && state.jumpTo === void 0) return "border-amber-500/40 text-amber-500";
-	if (state.kind === "na" || state.kind === "disabled") return "border-border/60 text-foreground-subtle/70";
-	return "border-border text-foreground-subtle";
-}
-function StepChips({ chips, selectedId }) {
-	const first = chips[0];
-	if (first !== void 0 && chips.length > 1 && chips.every((c) => chipKey(c.state) === chipKey(first.state) && !(c.state.kind === "enabled" && c.state.overridden === true) && chipTone(c.state, c.id === selectedId) === chipTone(first.state, first.id === selectedId)) && first !== void 0) {
-		const text = chipText(first.state);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "flex flex-wrap gap-1",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				title: `${text} on ${chips.map((c) => c.label).join(", ")}`,
-				className: cn("inline-flex max-w-[12rem] items-center gap-1 truncate rounded border px-1 font-mono text-[9px] leading-4", chipTone(first.state, first.id === selectedId)),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate",
-					children: text
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "shrink-0 font-sans text-foreground-subtle/80",
-					children: ["×", chips.length]
-				})]
-			})
-		});
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "flex flex-wrap gap-1",
-		children: chips.map((chip) => {
-			const overridden = chip.state.kind === "enabled" && chip.state.overridden === true;
-			const text = chipText(chip.state);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				title: `${chip.label}: ${chip.state.kind === "enabled" ? chip.state.modelId : text}${overridden ? " (camera override)" : ""}`,
-				className: cn("inline-flex max-w-[9rem] items-center gap-0.5 truncate rounded border px-1 font-mono text-[9px] leading-4", chipTone(chip.state, chip.id === selectedId)),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate",
-					children: text
-				}), overridden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-amber-500",
-					"aria-hidden": true,
-					children: "•"
-				})]
-			}, chip.id);
-		})
-	});
-}
-//#endregion
-//#region src/composites/step-inspector/step-inspector-layout.tsx
+//#region src/composites/step-inspector/step-detail-dock.tsx
 /**
-* StepInspectorLayout — the master–detail frame of the step inspector.
+* StepDetailDock — where a step's settings open from the step matrix
+* (D757): docked to the page's scroll container, never inside the scrolling
+* content.
 *
-* Desktop: the step list and the inspector side by side, each scrolling on its
-* own, in a block whose height FILLS the page's scroll container below it. So
-* neither pane depends on the page scroll position: the inspector's header and
-* save bar are always on screen, and the selected step stays visible in the
-* list. (The slide-over this replaced was absolutely positioned inside the
-* matrix block — its title and its Save button scrolled away with the page.)
-* In a narrow container (the camera page beside its live view, a tablet) the
-* two panes stack: the list on top, a third of the height.
+* Desktop: a side panel `position: fixed` over the RIGHT edge of the nearest
+* scroll container (its top, bottom and right are measured from that box), so
+* it stays where it is while the matrix scrolls under it, and its header and
+* save bar are always on screen. It overlays — it never reserves width, so the
+* matrix does not reflow (the slide-over before D756 reserved 360 px, the
+* matrix re-measured into a single-node layout, and the clicked cell slid
+* under the panel). The matrix uses {@link STEP_DOCK_WIDTH_PX} to scroll the
+* selected column clear of it.
 *
-* Phone: the list flows with the page; the inspector opens as a full-screen
-* sheet with "‹ Steps" to go back.
+* Phone: a full-screen `Dialog` sheet.
 */
-/** The tallest the inspector block can be without making its scroll container scroll. */
-function fillHeightPx(input) {
-	const room = input.scrollerHeight - input.paddingBottom - input.offsetInScroller;
-	return Math.max(input.minPx, Math.floor(room));
+/** Width of the desktop dock — what the matrix keeps clear of it. */
+var STEP_DOCK_WIDTH_PX = 432;
+/** The dock's viewport box, from its scroll container's box. */
+function dockBox(input) {
+	const right = Math.max(0, input.viewportWidth - input.scroller.right);
+	const width = Math.min(input.widthPx, input.scroller.right);
+	return {
+		top: Math.max(0, input.scroller.top),
+		height: Math.max(0, input.scroller.bottom - Math.max(0, input.scroller.top)),
+		right,
+		width
+	};
 }
 function scrollParentOf(el) {
-	for (let p = el.parentElement; p !== null; p = p.parentElement) {
+	for (let p = el?.parentElement ?? null; p !== null; p = p.parentElement) {
 		const { overflowY } = getComputedStyle(p);
 		if (overflowY === "auto" || overflowY === "scroll") return p;
 	}
 	return null;
 }
-/** Height of the block so that it ends at the bottom of its scroll container. */
-function useFillHeight(enabled, minPx) {
-	const ref = (0, react$1.useRef)(null);
-	const [height, setHeight] = (0, react$1.useState)(null);
+function useDockBox(anchor, enabled) {
+	const [box, setBox] = (0, react$1.useState)(null);
 	(0, react$1.useLayoutEffect)(() => {
-		const el = ref.current;
-		if (!enabled || el === null) return;
-		const scroller = scrollParentOf(el);
+		if (!enabled) return;
+		const scroller = scrollParentOf(anchor.current);
 		const measure = () => {
-			const box = scroller ?? document.documentElement;
-			const style = getComputedStyle(box);
-			const top = scroller ? scroller.getBoundingClientRect().top : 0;
-			const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
-			setHeight(fillHeightPx({
-				scrollerHeight: scroller ? scroller.clientHeight : window.innerHeight,
-				paddingBottom: Number.parseFloat(style.paddingBottom) || 0,
-				offsetInScroller: el.getBoundingClientRect().top - top + scrollTop,
-				minPx
+			setBox(dockBox({
+				scroller: scroller?.getBoundingClientRect() ?? {
+					top: 0,
+					bottom: window.innerHeight,
+					right: window.innerWidth
+				},
+				viewportWidth: window.innerWidth,
+				widthPx: 432
 			}));
 		};
 		measure();
 		const RO = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
 		if (scroller) RO?.observe(scroller);
-		if (el.parentElement) RO?.observe(el.parentElement);
 		window.addEventListener("resize", measure);
 		return () => {
 			RO?.disconnect();
 			window.removeEventListener("resize", measure);
 		};
-	}, [enabled, minPx]);
-	return {
-		ref,
-		height
-	};
+	}, [anchor, enabled]);
+	return box;
 }
-function StepInspectorLayout({ list, detail, mobileDetailOpen, onMobileClose, minHeightPx = 420, className }) {
+function StepDetailDock({ open, anchor, onClose, label, children }) {
 	const isMobile = useIsMobile();
-	const { ref, height } = useFillHeight(!isMobile, minHeightPx);
-	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("space-y-3", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: SECTION_CARD,
-			children: list
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
-			open: mobileDetailOpen,
-			onOpenChange: (open) => !open && onMobileClose(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
-				placement: "sheet-on-mobile",
-				scroll: "body",
-				className: "h-[100dvh] max-h-none w-full max-w-full rounded-none border-0 p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
-				children: mobileDetailOpen && detail
-			})
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cn("@container/inspector", className),
-		style: height !== null ? { height } : void 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("grid h-full min-h-0 gap-3", "grid-cols-1 grid-rows-[minmax(9rem,32%)_minmax(0,1fr)]", "@xl/inspector:grid-cols-[minmax(14rem,19rem)_minmax(0,1fr)] @xl/inspector:grid-rows-1"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn(SECTION_CARD, "flex min-h-0 flex-col"),
-				children: list
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn(SECTION_CARD, "flex min-h-0 flex-col"),
-				children: detail
-			})]
+	const box = useDockBox(anchor, open && !isMobile);
+	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open,
+		onOpenChange: (next) => !next && onClose(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
+			placement: "sheet-on-mobile",
+			scroll: "body",
+			"aria-label": label,
+			className: "h-[100dvh] max-h-none w-full max-w-full rounded-none border-0 p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
+			children: open && children
 		})
 	});
+	if (!open) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		"aria-label": label,
+		"data-step-dock": true,
+		className: "fixed z-30 flex flex-col border-l border-border bg-surface shadow-2xl",
+		style: box !== null ? {
+			top: box.top,
+			height: box.height,
+			right: box.right,
+			width: box.width
+		} : {
+			top: 0,
+			bottom: 0,
+			right: 0,
+			width: 432
+		},
+		children
+	});
 }
-/** "‹ Steps" — the phone sheet's way back to the list. */
+/** "‹ Steps" — the phone sheet's way back to the matrix. */
 function BackToStepsButton({ onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
@@ -58045,192 +58038,6 @@ var StepInspectorPanel = (0, react$1.forwardRef)(function StepInspectorPanel({ t
 	});
 });
 //#endregion
-//#region src/composites/step-inspector/step-list.tsx
-/**
-* StepList — the master pane of the step inspector: every detection step of the
-* tree, one compact row each, as ONE tab stop.
-*
-* Keyboard (a listbox with a roving tabindex): ↑/↓/Home/End move the selection,
-* Enter or → hands focus to the inspector, `/` jumps to the search box. The
-* search matches a step's name or any of its field labels, so a question about
-* a knob ("face size", "person") finds the step that owns it; Enter in the box
-* selects the first hit and says which field it matched.
-*/
-function matches(text, tokens) {
-	const lower = text.toLowerCase();
-	return tokens.every((t) => lower.includes(t));
-}
-/** Rows matching `query` (all tokens in the name, or all in one field label). */
-function searchSteps(rows, query) {
-	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
-	if (tokens.length === 0) return rows.map((row) => ({ row }));
-	const hits = [];
-	for (const row of rows) {
-		if (matches(row.name, tokens)) {
-			hits.push({ row });
-			continue;
-		}
-		const field = row.fieldLabels.find((l) => matches(l, tokens));
-		if (field !== void 0) hits.push({
-			row,
-			matchedField: field
-		});
-	}
-	return hits;
-}
-var StepList = (0, react$1.forwardRef)(function StepList({ rows, selectedId, onSelect, onActivate, onPick, label, className }, ref) {
-	const [query, setQuery] = (0, react$1.useState)("");
-	const listRef = (0, react$1.useRef)(null);
-	const searchRef = (0, react$1.useRef)(null);
-	const hits = (0, react$1.useMemo)(() => searchSteps(rows, query), [rows, query]);
-	const tabStopId = hits.some((h) => h.row.addonId === selectedId) ? selectedId : hits[0]?.row.addonId ?? null;
-	const pendingFocus = (0, react$1.useRef)(null);
-	const tryFocus = (addonId) => {
-		const el = listRef.current?.querySelector(`[data-step-id="${addonId}"]`);
-		if (!el) return false;
-		el.focus();
-		return true;
-	};
-	const focusRow = (addonId) => {
-		if (addonId === null) return;
-		pendingFocus.current = tryFocus(addonId) ? null : addonId;
-	};
-	(0, react$1.useLayoutEffect)(() => {
-		if (pendingFocus.current !== null && tryFocus(pendingFocus.current)) pendingFocus.current = null;
-	});
-	(0, react$1.useImperativeHandle)(ref, () => ({ focusSelected: () => focusRow(selectedId) }), [selectedId]);
-	const move = (index) => {
-		const target = hits[Math.max(0, Math.min(hits.length - 1, index))];
-		if (target === void 0) return;
-		onSelect(target.row.addonId, target.matchedField);
-		focusRow(target.row.addonId);
-	};
-	const onRowKeyDown = (e, index, hit) => {
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault();
-				move(index + 1);
-				return;
-			case "ArrowUp":
-				e.preventDefault();
-				move(index - 1);
-				return;
-			case "Home":
-				e.preventDefault();
-				move(0);
-				return;
-			case "End":
-				e.preventDefault();
-				move(hits.length - 1);
-				return;
-			case "Enter":
-			case "ArrowRight":
-				e.preventDefault();
-				onActivate(hit.row.addonId);
-				return;
-			case "/":
-				e.preventDefault();
-				searchRef.current?.focus();
-				return;
-			default:
-		}
-	};
-	const onSearchKeyDown = (e) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			const first = hits[0];
-			if (first !== void 0) {
-				onSelect(first.row.addonId, first.matchedField);
-				onPick?.(first.row.addonId);
-				focusRow(first.row.addonId);
-			}
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			setQuery("");
-			focusRow(selectedId);
-		} else if (e.key === "ArrowDown") {
-			e.preventDefault();
-			focusRow(tabStopId);
-		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex min-h-0 flex-col", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative shrink-0 border-b border-border p-1.5",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
-				className: "pointer-events-none absolute left-3.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-foreground-subtle",
-				"aria-hidden": true
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				ref: searchRef,
-				type: "search",
-				value: query,
-				onChange: (e) => setQuery(e.target.value),
-				onKeyDown: onSearchKeyDown,
-				placeholder: "Find a step or setting  /",
-				"aria-label": "Find a step or setting",
-				className: "h-9 w-full rounded-md border border-border bg-background pl-8 pr-2 text-xs text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 md:h-8"
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-			ref: listRef,
-			role: "listbox",
-			"aria-label": label,
-			className: "min-h-0 flex-1 overflow-y-auto py-1",
-			children: [hits.map((hit, index) => {
-				const { row } = hit;
-				const selected = row.addonId === selectedId;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-					role: "option",
-					"aria-selected": selected,
-					tabIndex: row.addonId === tabStopId ? 0 : -1,
-					"data-step-id": row.addonId,
-					onClick: () => {
-						onSelect(row.addonId, hit.matchedField);
-						onPick?.(row.addonId);
-					},
-					onKeyDown: (e) => onRowKeyDown(e, index, hit),
-					className: cn("cursor-pointer border-l-2 py-1 pl-2.5 pr-3 outline-none transition-colors", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", selected ? "border-primary bg-primary/10" : "border-transparent hover:bg-muted/40"),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex min-w-0 items-baseline gap-2",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "w-[4.5rem] shrink-0 truncate",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: row.slot })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: cn("min-w-0 flex-1 truncate text-xs font-medium", selected ? "text-foreground" : "text-foreground/90"),
-									style: { paddingLeft: `${row.depth * 12}px` },
-									children: [row.depth > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "mr-1 text-foreground-subtle/60",
-										"aria-hidden": true,
-										children: "└"
-									}), row.name]
-								}),
-								row.status
-							]
-						}),
-						hit.matchedField !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mt-0.5 truncate pl-[5rem] text-[10px] text-primary",
-							children: ["↳ ", hit.matchedField]
-						}),
-						row.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-0.5 pl-[5rem]",
-							children: row.detail
-						})
-					]
-				}, row.addonId);
-			}), hits.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "px-3 py-4 text-center text-[11px] text-foreground-subtle",
-				children: [
-					"No step matches “",
-					query,
-					"”."
-				]
-			})]
-		})]
-	});
-});
-//#endregion
 //#region src/composites/step-inspector/step-model-row.tsx
 var SOURCE_TONE = {
 	camera: "border-primary/40 bg-primary/10 text-primary",
@@ -58386,6 +58193,30 @@ function StepModelList({ rows }) {
 	});
 }
 //#endregion
+//#region src/composites/step-inspector/step-search.ts
+function matches(text, tokens) {
+	const lower = text.toLowerCase();
+	return tokens.every((t) => lower.includes(t));
+}
+/** Steps matching `query` (all tokens in the name, or all in one field label). Empty query = all. */
+function searchSteps(rows, query) {
+	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	if (tokens.length === 0) return rows.map((row) => ({ addonId: row.addonId }));
+	const hits = [];
+	for (const row of rows) {
+		if (matches(row.name, tokens)) {
+			hits.push({ addonId: row.addonId });
+			continue;
+		}
+		const field = row.fieldLabels.find((l) => matches(l, tokens));
+		if (field !== void 0) hits.push({
+			addonId: row.addonId,
+			matchedField: field
+		});
+	}
+	return hits;
+}
+//#endregion
 //#region src/composites/step-tree.ts
 /**
 * Helper: build a StepTreeNode[] from a `PipelineSchema` by chaining on
@@ -61589,6 +61420,7 @@ exports.SPLIT_PANEL_OUTER = SPLIT_PANEL_OUTER;
 exports.SPLIT_PANEL_SIDE = SPLIT_PANEL_SIDE;
 exports.STACK_GAP = STACK_GAP;
 exports.STATE_COLOR = STATE_COLOR;
+exports.STEP_DOCK_WIDTH_PX = STEP_DOCK_WIDTH_PX;
 exports.SceneMonitorEditor = SceneMonitorEditor;
 exports.ScopePicker = ScopePicker;
 exports.ScriptHeroCard = ScriptHeroCard;
@@ -61614,10 +61446,8 @@ exports.Square = Square;
 exports.StatCard = StatCard;
 exports.StateValuesStream = StateValuesStream;
 exports.StatusBadge = StatusBadge;
-exports.StepChips = StepChips;
-exports.StepInspectorLayout = StepInspectorLayout;
+exports.StepDetailDock = StepDetailDock;
 exports.StepInspectorPanel = StepInspectorPanel;
-exports.StepList = StepList;
 exports.StepModelList = StepModelList;
 exports.StepModelRow = StepModelRow;
 exports.StepTimings = StepTimings;
@@ -61667,6 +61497,8 @@ exports.WidgetPanel = WidgetPanel;
 exports.WidgetRegistryProvider = WidgetRegistryProvider;
 exports.WidgetSlot = WidgetSlot;
 exports.ZoneEditingProvider = ZoneEditingProvider;
+exports.acceleratorLabel = acceleratorLabel;
+exports.acceleratorShortLabel = acceleratorShortLabel;
 exports.agentColumnKey = agentColumnKey;
 exports.allDeviceTypeFilterOptions = allDeviceTypeFilterOptions;
 exports.applyFleetQueryDefaults = applyFleetQueryDefaults;
@@ -61714,12 +61546,12 @@ exports.deviceTypeLabel = deviceTypeLabel;
 exports.deviceTypeMeta = deviceTypeMeta;
 exports.deviceTypeMetaOf = deviceTypeMetaOf;
 exports.devicesToOptions = devicesToOptions;
+exports.dockBox = dockBox;
 exports.draftFromQuery = draftFromQuery;
 exports.emptyDevicesWidens = emptyDevicesWidens;
 exports.emptySessionRun = emptySessionRun;
 exports.ensureMfHostInit = ensureMfHostInit;
 exports.eventKindLabel = eventKindLabel;
-exports.fillHeightPx = fillHeightPx;
 exports.filterDataTableRows = filterDataTableRows;
 exports.filterDeviceOptions = filterDeviceOptions;
 exports.filterOptionSelectOptions = filterOptions;
@@ -61767,6 +61599,7 @@ exports.mirror = mirror;
 exports.modelRowsAreFoldable = modelRowsAreFoldable;
 exports.mountAddonPage = mountAddonPage;
 exports.mountPath = mountPath;
+exports.nextGridPosition = nextGridPosition;
 exports.nextReconnectAction = nextReconnectAction;
 exports.nextSort = nextSort;
 exports.nextSortDirection = nextSortDirection;
@@ -62586,7 +62419,6 @@ exports.usePipelineExecutorCacheFrameInPool = usePipelineExecutorCacheFrameInPoo
 exports.usePipelineExecutorClearDeviceOverrides = usePipelineExecutorClearDeviceOverrides;
 exports.usePipelineExecutorClearModelBoundDeviceOverrides = usePipelineExecutorClearModelBoundDeviceOverrides;
 exports.usePipelineExecutorDeleteModel = usePipelineExecutorDeleteModel;
-exports.usePipelineExecutorDeleteTemplate = usePipelineExecutorDeleteTemplate;
 exports.usePipelineExecutorDownloadModel = usePipelineExecutorDownloadModel;
 exports.usePipelineExecutorGetAddonModels = usePipelineExecutorGetAddonModels;
 exports.usePipelineExecutorGetAudioCapabilities = usePipelineExecutorGetAudioCapabilities;
@@ -62610,22 +62442,18 @@ exports.usePipelineExecutorInferCached = usePipelineExecutorInferCached;
 exports.usePipelineExecutorKillEngine = usePipelineExecutorKillEngine;
 exports.usePipelineExecutorListLoadedEngines = usePipelineExecutorListLoadedEngines;
 exports.usePipelineExecutorListReferenceImages = usePipelineExecutorListReferenceImages;
-exports.usePipelineExecutorListTemplates = usePipelineExecutorListTemplates;
 exports.usePipelineExecutorRearmInferenceDevice = usePipelineExecutorRearmInferenceDevice;
 exports.usePipelineExecutorRunAudioTest = usePipelineExecutorRunAudioTest;
 exports.usePipelineExecutorRunPipeline = usePipelineExecutorRunPipeline;
 exports.usePipelineExecutorRunPipelineBatch = usePipelineExecutorRunPipelineBatch;
-exports.usePipelineExecutorSaveTemplate = usePipelineExecutorSaveTemplate;
 exports.usePipelineExecutorSetVideoPipelineSteps = usePipelineExecutorSetVideoPipelineSteps;
 exports.usePipelineExecutorSpinEngine = usePipelineExecutorSpinEngine;
 exports.usePipelineExecutorUncacheFrame = usePipelineExecutorUncacheFrame;
-exports.usePipelineExecutorUpdateTemplate = usePipelineExecutorUpdateTemplate;
 exports.usePipelineExecutorValidatePipeline = usePipelineExecutorValidatePipeline;
 exports.usePipelineOrchestratorApplyAutoTune = usePipelineOrchestratorApplyAutoTune;
 exports.usePipelineOrchestratorApplyDeviceSettingsPatch = usePipelineOrchestratorApplyDeviceSettingsPatch;
 exports.usePipelineOrchestratorAssignAudio = usePipelineOrchestratorAssignAudio;
 exports.usePipelineOrchestratorAssignPipeline = usePipelineOrchestratorAssignPipeline;
-exports.usePipelineOrchestratorDeleteTemplate = usePipelineOrchestratorDeleteTemplate;
 exports.usePipelineOrchestratorGetAgentLoad = usePipelineOrchestratorGetAgentLoad;
 exports.usePipelineOrchestratorGetAgentSettings = usePipelineOrchestratorGetAgentSettings;
 exports.usePipelineOrchestratorGetAudioAssignment = usePipelineOrchestratorGetAudioAssignment;
@@ -62651,7 +62479,6 @@ exports.usePipelineOrchestratorGetPipelineDevicePin = usePipelineOrchestratorGet
 exports.usePipelineOrchestratorGetPlacementStats = usePipelineOrchestratorGetPlacementStats;
 exports.usePipelineOrchestratorGetReconcileFromDiskStatus = usePipelineOrchestratorGetReconcileFromDiskStatus;
 exports.usePipelineOrchestratorListAgentSettings = usePipelineOrchestratorListAgentSettings;
-exports.usePipelineOrchestratorListTemplates = usePipelineOrchestratorListTemplates;
 exports.usePipelineOrchestratorPauseForStorageMigration = usePipelineOrchestratorPauseForStorageMigration;
 exports.usePipelineOrchestratorPlanAutoTune = usePipelineOrchestratorPlanAutoTune;
 exports.usePipelineOrchestratorRebalance = usePipelineOrchestratorRebalance;
@@ -62661,7 +62488,6 @@ exports.usePipelineOrchestratorRequestOccupancyLook = usePipelineOrchestratorReq
 exports.usePipelineOrchestratorResetNodePipelineDefaults = usePipelineOrchestratorResetNodePipelineDefaults;
 exports.usePipelineOrchestratorResolvePipeline = usePipelineOrchestratorResolvePipeline;
 exports.usePipelineOrchestratorResumeForStorageMigration = usePipelineOrchestratorResumeForStorageMigration;
-exports.usePipelineOrchestratorSaveTemplate = usePipelineOrchestratorSaveTemplate;
 exports.usePipelineOrchestratorSetAgentCapabilities = usePipelineOrchestratorSetAgentCapabilities;
 exports.usePipelineOrchestratorSetAgentDecodeLimits = usePipelineOrchestratorSetAgentDecodeLimits;
 exports.usePipelineOrchestratorSetAgentInferenceDevices = usePipelineOrchestratorSetAgentInferenceDevices;
@@ -62680,7 +62506,6 @@ exports.usePipelineOrchestratorSetShareSource = usePipelineOrchestratorSetShareS
 exports.usePipelineOrchestratorSuggestShares = usePipelineOrchestratorSuggestShares;
 exports.usePipelineOrchestratorUnassignAudio = usePipelineOrchestratorUnassignAudio;
 exports.usePipelineOrchestratorUnassignPipeline = usePipelineOrchestratorUnassignPipeline;
-exports.usePipelineOrchestratorUpdateTemplate = usePipelineOrchestratorUpdateTemplate;
 exports.usePipelineRunnerAttachCamera = usePipelineRunnerAttachCamera;
 exports.usePipelineRunnerDetachCamera = usePipelineRunnerDetachCamera;
 exports.usePipelineRunnerGetAllCameraMetrics = usePipelineRunnerGetAllCameraMetrics;