@camstack/ui-library 1.2.244 → 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,30 +28695,43 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 	});
 }
 //#endregion
-//#region src/primitives/collapsible-card.tsx
-function CollapsibleCard({ expanded, onExpandedChange, header, children, dimmed = false, hideChevron = false, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("rounded-lg border border-border bg-surface overflow-hidden", dimmed && "opacity-[0.45]", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			role: "button",
-			tabIndex: 0,
-			className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none",
-			onClick: () => onExpandedChange(!expanded),
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					onExpandedChange(!expanded);
-				}
-			},
-			children: [!hideChevron && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-foreground-subtle shrink-0",
-				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-4 w-4" })
-			}), header]
-		}), expanded && children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "border-t border-border px-3 py-3",
-			children
-		})]
-	});
+//#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
@@ -29052,6 +29014,257 @@ function ModelPicker({ models, value, onChange, disabled, defaultModelId }) {
 	});
 }
 //#endregion
+//#region src/composites/resolve-step-default-model.ts
+function resolveStepDefaultModel(catalog, format) {
+	const hasFormatBuild = (modelId) => catalog.models.find((m) => m.id === modelId)?.formats[format] !== void 0;
+	const declared = catalog.defaultModelIdByFormat?.[format];
+	if (declared !== void 0 && hasFormatBuild(declared)) return declared;
+	if (hasFormatBuild(catalog.defaultModelId)) return catalog.defaultModelId;
+	const available = catalog.models.filter((m) => m.formats[format] !== void 0 && m.legacy !== true);
+	if (available.length === 0) return catalog.defaultModelId;
+	return [...available].toSorted((a, b) => (a.formats[format]?.sizeMB ?? Infinity) - (b.formats[format]?.sizeMB ?? Infinity))[0].id;
+}
+/**
+* The model a matrix CELL shows as this step's effective default on `device`.
+*
+* The device's ELECTED model (`device.defaultModelId`, the per-device
+* object-detection election) applies ONLY when this step's catalog actually
+* contains it — `slot === 'detector'` alone is too wide, because
+* package-detection shares the detector slot with the root step. Bit live
+* 2026-08-08: rfdetr-package became the package step's default and every
+* matrix cell still showed the device's yolo as the "selected" model, because
+* the election was applied slot-wide. Membership is the principled gate: an
+* elected model this step cannot run is never displayed for it.
+*/
+function resolveEffectiveDefaultModel(catalog, device) {
+	const format = device?.format;
+	if (format === void 0) return void 0;
+	const elected = device?.defaultModelId;
+	return catalog.slot === "detector" && elected !== void 0 && catalog.models.some((m) => m.id === elected) ? elected : resolveStepDefaultModel(catalog, format);
+}
+/**
+* The models a step may run on an engine `format` — the ONE derivation of the
+* option list. An unknown format yields NOTHING rather than everything: a
+* picker that offered a model with no build for the device would write a pin
+* the runner cannot honour.
+*/
+function stepModelOptions(models, format) {
+	if (format === void 0) return [];
+	return models.filter((m) => m.formats[format] !== void 0);
+}
+/** Can this step run on `format` at all? (`false` ⇒ the caller renders "⚠ skip"/"—".) */
+function stepHasModelForFormat(models, format) {
+	return stepModelOptions(models, format).length > 0;
+}
+/**
+* The model a step ACTUALLY runs for a (device, camera) — the whole effective
+* chain in one place: per-camera override → per-(node,device) base → the
+* resolved default (`resolveEffectiveDefaultModel`).
+*
+* Every surface calls this: the matrix cell, and the drawer's picker seed. They
+* are the same number, and the only way to keep them the same number is to have
+* one function produce it. A surface that owns fewer layers omits them (the node
+* matrix passes no `override`) — it does NOT get its own resolver.
+*/
+function resolveEffectiveStepModel(input) {
+	return input.override ?? input.base ?? resolveEffectiveDefaultModel(input.catalog, input.device);
+}
+//#endregion
+//#region src/composites/root-model-source.tsx
+/**
+* "Use the root model" — the step editor's control for a step the camera's
+* ROOT detection model can supply (D730).
+*
+* The flag (`useRootModel`, in the step's own settings) is an operator INTENT
+* kept beside the step's model: checking it never changes the model, and a
+* root that cannot supply the step leaves the step running its own model while
+* the flag waits, inactive, for a root that can. Whether it is in force is
+* `resolveRootSupply` — the same function the runner decides with.
+*/
+/** The editor's view of the flag for one step, or `null` for a step no root can supply. */
+function rootSourceState(stepId, settings, rootModel) {
+	if (!(0, _camstack_types.isRootSuppliableStepId)(stepId)) return null;
+	return (0, _camstack_types.resolveRootSupply)(stepId, settings, rootModel?.supplies);
+}
+/** The settings bag with the flag set — every other key untouched. */
+function withUseRootModel(settings, value) {
+	return {
+		...settings,
+		[_camstack_types.USE_ROOT_MODEL_SETTING_KEY]: value
+	};
+}
+/** What the operator must know about a supply, beyond "it is on". */
+function supplyNotes(supply) {
+	if (supply.kind === "label") {
+		const notes = supply.uncovered.length > 0 ? [`Not produced by this model: ${supply.uncovered.join(", ")}.`] : [];
+		if (supply.stepId === "package-detection") return [...notes, "The root model's own package boxes become the package result at this step's threshold; this step's zone-crop view is not used, so small parcels the full-frame model misses stay missed."];
+		return [...notes, "This step's class list decides which of the root's labels become the fine class; a switched-off class stays at its macro."];
+	}
+	if (supply.kind === "mask") return ["Masks come from the root model: each detection carries the root's own instance mask, so this step's model does not run. A root mask follows the model's mask grid (a quarter of its input), coarser than this step's own per-crop mask."];
+	if (supply.stepId === "face-detection") return ["Face boxes come from the root model. Each is re-found by this step's face detector in a square around it before recognition, so only a face it finds is recognised; a box with no face in it is dropped."];
+	return ["Plate boxes come from the root model and the plate reader reads them. The crop margin around a root plate box has not been measured for this model yet."];
+}
+/** The reason an intended supply is not in force, in the operator's words. */
+function inactiveText(state, rootModel) {
+	switch (state.inactiveReason) {
+		case "root-input-too-small": return `the current root model (${rootModel.name}) sees the frame too small to find faces reliably (it needs an input of 640 px or more).`;
+		case "root-does-not-declare":
+		case void 0: return `the current root model (${rootModel.name}) cannot supply this.`;
+	}
+}
+function RootModelSourceControl({ stepId, settings, rootModel, disabled, onChange }) {
+	if (rootModel === void 0) return null;
+	const state = rootSourceState(stepId, settings, rootModel);
+	if (state === null) return null;
+	const inactiveNote = state.inactive ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rounded bg-muted/40 px-3 py-2 text-[11px] text-foreground-subtle",
+		"data-testid": "root-model-inactive",
+		children: [
+			"Use the root model: inactive — ",
+			inactiveText(state, rootModel),
+			" The step runs its own model."
+		]
+	}) : null;
+	if (state.supply === void 0) return inactiveNote;
+	const checked = state.intent;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		"data-testid": "root-model-source",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center gap-2 text-xs text-foreground",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked,
+						disabled,
+						onChange: (e) => onChange(e.target.checked)
+					}),
+					"Use the root model (",
+					rootModel.name,
+					")"
+				]
+			}),
+			inactiveNote,
+			state.effective && supplyNotes(state.supply).map((note) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] leading-snug text-foreground-subtle",
+				children: note
+			}, note))
+		]
+	});
+}
+//#endregion
+//#region src/lib/responsive.ts
+/**
+* Responsive design tokens — three-tier system.
+*
+* The admin-ui targets three width tiers; every component should pick
+* the right token from this file instead of hand-coding breakpoints.
+* Adopting the tokens uniformly is what makes the app feel consistent
+* across operator devices (mobile / tablet / desktop) and what unlocks
+* targeted tuning (e.g. shrink every label by 1px in one place).
+*
+* Tier definitions (Tailwind breakpoints):
+*
+*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
+*     Single column, tight padding, smallest text, icon-only buttons
+*     where labels can be inferred. The operator can still see every
+*     stat / action — no horizontal scroll, no clipped text. The user
+*     directive: "molta informazione in poco spazio quando la width è
+*     bassa." [a lot of information in little space when the width is low.]
+*
+*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
+*     2-column grids, side panels become visible, button labels return.
+*     Targets ~768px–1024px viewports — the most common operator sizes.
+*
+*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
+*     4-column grids, generous padding, full-width header text,
+*     side-by-side composite layouts. The operator has elbow room.
+*
+* Conventions:
+*   - **Always start from L1** — the bare class is always the compact
+*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
+*     desktop-first breakpoints; no max-width queries.
+*   - **Token strings are static** — kept as `as const` so callers can
+*     compose them via `cn()` / template literals without running a
+*     class generator at runtime.
+*   - **Pair the token with a comment** — the comment in the file
+*     names every breakpoint it crosses, so a reader can predict the
+*     layout without going to Tailwind docs.
+*/
+/** Container padding for a card-style section (header + body). */
+var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
+/** Header strip inside a card (between border-b lines). */
+var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
+/** Body padding for a card-style section. */
+var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
+/** Gap between cards in a vertical stack. */
+var STACK_GAP = "space-y-3 sm:space-y-4";
+/** Gap between cards in a grid (4 cells / row at lg). */
+var GRID_GAP = "gap-2 sm:gap-3";
+/** Row padding inside a divided list (e.g. InfoRow). */
+var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
+/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
+var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
+/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
+var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
+/** Side-by-side layout that stacks below md (canvas + side panel). */
+var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
+/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
+var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
+/**
+* The tier boundary at which a settings label/value row stops stacking.
+*
+* Below it (L1 — compact) the row is ONE column: label on its own line, value
+* on the next at full width. Above it the row is label-left / value-right as
+* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
+* value beside it; a phone has neither, and the failure mode is not "cramped"
+* but "the value is the part that gets cut" — the one thing the operator
+* opened the page to read.
+*/
+var SETTING_ROW_STACK_BREAKPOINT = "sm";
+/** Outer row: single column at L1, label/value columns from `sm` up. */
+var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
+/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
+var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
+/**
+* Value lane — the value text plus its trailing affordances (copy / reveal).
+* `w-full` at L1 so the value owns the whole row once the label is above it;
+* `sm:flex-1` makes it share the row again from `sm` up.
+*/
+var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
+/**
+* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
+* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
+* desktop form, where the row is wide enough for truncation to be a choice
+* rather than data loss.
+*/
+var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
+/** Section header label (uppercase tracking-wider). */
+var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
+/** Field label inside a row. */
+var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
+/** Sub-label / hint text. */
+var TEXT_HINT = "text-[10px] text-foreground-subtle";
+/** Primary value (a metric, badge, …). */
+var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
+/** Big metric value (StatCard). */
+var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
+/** Default compact button. */
+var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
+/** Primary compact button. */
+var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
+/** Danger compact button. */
+var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
+/** Warning compact button (e.g. cancel-drawing). */
+var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
+/** Compact text/select/number input. */
+var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
+/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
+var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
+var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
+var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
+//#endregion
 //#region src/composites/model-bound-slider.tsx
 var SOURCE_LABEL = {
 	override: "Override for this model",
@@ -29061,7 +29274,7 @@ var SOURCE_LABEL = {
 function formatNumber(value, scale) {
 	return (scale !== void 0 ? value / scale : value).toFixed(2).replace(/\.?0+$/, "");
 }
-function ModelBoundSlider({ field, modelId, settings, disabled, onChangeSettings }) {
+function ModelBoundSlider({ field, modelId, settings, disabled, onChangeSettings, hideSourceRow = false }) {
 	const modelDefault = field.modelApplicability?.defaultByModel?.[modelId];
 	const state = (0, _camstack_types.resolveModelBoundSetting)(settings, field.key, modelId.length > 0 ? modelId : void 0, modelDefault, field.default);
 	const fallback = typeof field.default === "number" ? field.default : field.min ?? 0;
@@ -29101,7 +29314,7 @@ function ModelBoundSlider({ field, modelId, settings, disabled, onChangeSettings
 			onChange: (e) => handleChange(Number(e.target.value)),
 			className: "w-full accent-primary h-1.5"
 		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		!hideSourceRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mt-1 flex items-center justify-between gap-2 text-[10px]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-testid": "model-bound-source",
@@ -29152,6 +29365,32 @@ function ResetModelDefaultsButton({ fields, modelId, settings, disabled, onReset
 	});
 }
 //#endregion
+//#region src/primitives/collapsible-card.tsx
+function CollapsibleCard({ expanded, onExpandedChange, header, children, dimmed = false, hideChevron = false, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("rounded-lg border border-border bg-surface overflow-hidden", dimmed && "opacity-[0.45]", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "button",
+			tabIndex: 0,
+			className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none",
+			onClick: () => onExpandedChange(!expanded),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onExpandedChange(!expanded);
+				}
+			},
+			children: [!hideChevron && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-foreground-subtle shrink-0",
+				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-4 w-4" })
+			}), header]
+		}), expanded && children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-t border-border px-3 py-3",
+			children
+		})]
+	});
+}
+//#endregion
 //#region src/composites/pipeline-step.tsx
 /**
 * PipelineStep — single step card in the pipeline builder.
@@ -29163,124 +29402,77 @@ function ResetModelDefaultsButton({ fields, modelId, settings, disabled, onReset
 function modelsForStep(schema) {
 	return schema?.models ?? [];
 }
-function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth = 0, onChange, onDelete: _onDelete, readOnly = false, toggleMode = "simple", overrideState = null, onOverrideChange, inheritedEnabled, hideModelAndSettings = false, allowAutoModel = false }) {
+function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth = 0, onChange, onDelete: _onDelete, readOnly = false }) {
 	const [expanded, setExpanded] = (0, react$1.useState)(false);
 	const models = modelsForStep(schema);
-	const isAutoSentinel = allowAutoModel && step.modelId === "";
-	if (models.length > 0 && !isAutoSentinel && !models.some((m) => m.id === step.modelId) && !readOnly) {
+	if (models.length > 0 && !models.some((m) => m.id === step.modelId) && !readOnly) {
 		const fallback = (schema?.defaultModelId ? models.find((m) => m.id === schema.defaultModelId) : null) ?? models[0];
 		if (fallback && fallback.id !== step.modelId) queueMicrotask(() => onChange({
 			...step,
 			modelId: fallback.id
 		}));
 	}
-	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex-1 min-w-0",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none",
-					children: step.slot
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-sm font-semibold text-foreground truncate block leading-tight",
-					children: step.addonName
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-1 mt-0.5 flex-wrap",
-					children: [
-						step.inputClasses.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/12 text-blue-400",
-							children: c
-						}, c)),
-						step.inputClasses.length > 0 && step.outputClasses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-foreground-subtle/40 text-[10px]",
-							children: "→"
-						}),
-						step.outputClasses.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/12 text-green-400",
-							children: c
-						}, c))
-					]
-				})
-			]
-		}),
-		!readOnly && toggleMode === "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			onClick: (e) => {
-				e.stopPropagation();
-				onChange({
-					...step,
-					enabled: !step.enabled
-				});
-			},
-			className: cn("relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors", step.enabled ? "bg-success" : "bg-foreground-subtle/30"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("inline-block h-4 w-4 rounded-full bg-white shadow transition-transform", step.enabled ? "translate-x-6" : "translate-x-1") })
-		}),
-		!readOnly && toggleMode === "threeState" && onOverrideChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-0.5 rounded-md border border-border p-0.5",
-			onClick: (e) => e.stopPropagation(),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreeStateButton, {
-					label: "Inherit",
-					active: overrideState === null,
-					variant: "inherit",
-					subtext: inheritedEnabled === void 0 ? void 0 : inheritedEnabled ? "on" : "off",
-					onClick: () => onOverrideChange(null)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreeStateButton, {
-					label: "On",
-					active: overrideState === true,
-					variant: "on",
-					onClick: () => onOverrideChange(true)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreeStateButton, {
-					label: "Off",
-					active: overrideState === false,
-					variant: "off",
-					onClick: () => onOverrideChange(false)
-				})
-			]
-		})
-	] });
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex-1 min-w-0",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none",
+				children: step.slot
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold text-foreground truncate block leading-tight",
+				children: step.addonName
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1 mt-0.5 flex-wrap",
+				children: [
+					step.inputClasses.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/12 text-blue-400",
+						children: c
+					}, c)),
+					step.inputClasses.length > 0 && step.outputClasses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-foreground-subtle/40 text-[10px]",
+						children: "→"
+					}),
+					step.outputClasses.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/12 text-green-400",
+						children: c
+					}, c))
+				]
+			})
+		]
+	}), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		onClick: (e) => {
+			e.stopPropagation();
+			onChange({
+				...step,
+				enabled: !step.enabled
+			});
+		},
+		className: cn("relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors", step.enabled ? "bg-success" : "bg-foreground-subtle/30"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("inline-block h-4 w-4 rounded-full bg-white shadow transition-transform", step.enabled ? "translate-x-6" : "translate-x-1") })
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleCard, {
 		expanded,
 		onExpandedChange: setExpanded,
 		dimmed: !step.enabled,
 		header,
-		children: hideModelAndSettings ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-[11px] text-foreground-subtle",
-			children: "Model and detection settings are managed per agent — open the Pipeline page for this camera's agent to edit them."
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "space-y-3",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-						className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide",
-						children: "Model"
-					}),
-					allowAutoModel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "flex items-center gap-2 text-[11px] text-foreground-subtle",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: isAutoSentinel,
-							disabled: readOnly,
-							onChange: (e) => onChange({
-								...step,
-								modelId: e.target.checked ? "" : schema?.defaultModelId ?? models[0]?.id ?? ""
-							})
-						}), "Auto (node default)"]
-					}),
-					!isAutoSentinel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
-						models,
-						value: step.modelId,
-						disabled: readOnly,
-						onChange: (id) => onChange({
-							...step,
-							modelId: id
-						})
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide",
+					children: "Model"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+					models,
+					value: step.modelId,
+					disabled: readOnly,
+					onChange: (id) => onChange({
+						...step,
+						modelId: id
 					})
-				]
+				})]
 			}), schema?.configSchema?.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
 				field,
 				allFields: schema.configSchema ?? [],
@@ -29347,7 +29539,7 @@ function resolveSettingValue(key, step, allFields) {
 	const sibling = allFields.find((f) => "key" in f && f.key === key);
 	return sibling && "default" in sibling ? sibling.default : void 0;
 }
-function ConfigSchemaField({ field, allFields, step, disabled, onChange }) {
+function ConfigSchemaField({ field, allFields, step, disabled, onChange, hideModelBoundSourceRow }) {
 	const applicability = "modelApplicability" in field ? field.modelApplicability : void 0;
 	const inapplicableReason = applicability?.inapplicable?.[step.modelId];
 	const control = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaFieldControl, {
@@ -29356,7 +29548,8 @@ function ConfigSchemaField({ field, allFields, step, disabled, onChange }) {
 		step,
 		disabled: disabled || inapplicableReason !== void 0,
 		modelScopedOptions: applicability?.optionsByModel?.[step.modelId],
-		onChange
+		onChange,
+		hideModelBoundSourceRow: hideModelBoundSourceRow === true
 	});
 	if (inapplicableReason === void 0) return control;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -29367,7 +29560,7 @@ function ConfigSchemaField({ field, allFields, step, disabled, onChange }) {
 		})]
 	});
 }
-function ConfigSchemaFieldControl({ field, allFields, step, disabled, modelScopedOptions, onChange }) {
+function ConfigSchemaFieldControl({ field, allFields, step, disabled, modelScopedOptions, onChange, hideModelBoundSourceRow }) {
 	const showWhen = field.type !== "separator" && field.type !== "info" ? field.showWhen : void 0;
 	if (showWhen) {
 		const { field: condField, equals, notEquals, in: inList, notIn } = showWhen;
@@ -29417,7 +29610,8 @@ function ConfigSchemaFieldControl({ field, allFields, step, disabled, modelScope
 		onChangeSettings: (settings) => onChange({
 			...step,
 			settings
-		})
+		}),
+		hideSourceRow: hideModelBoundSourceRow
 	});
 	if (field.type === "slider" || field.type === "number") {
 		const raw = step.settings?.[field.key];
@@ -29503,204 +29697,247 @@ function ConfigSchemaFieldControl({ field, allFields, step, disabled, modelScope
 	});
 	return null;
 }
-function ThreeStateButton({ label, active, variant, subtext, onClick }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		onClick,
-		className: cn("px-2 py-1 text-[10px] font-medium rounded transition-colors", active ? variant === "on" ? "bg-green-500/20 text-green-400" : variant === "off" ? "bg-red-500/20 text-red-400" : "bg-primary/20 text-primary" : "text-foreground-subtle hover:bg-surface-hover"),
-		children: [label, subtext && active && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "ml-1 opacity-60",
-			children: [
-				"(",
-				subtext,
-				")"
-			]
-		})]
-	});
-}
 //#endregion
-//#region src/composites/resolve-step-default-model.ts
-function resolveStepDefaultModel(catalog, format) {
-	const hasFormatBuild = (modelId) => catalog.models.find((m) => m.id === modelId)?.formats[format] !== void 0;
-	const declared = catalog.defaultModelIdByFormat?.[format];
-	if (declared !== void 0 && hasFormatBuild(declared)) return declared;
-	if (hasFormatBuild(catalog.defaultModelId)) return catalog.defaultModelId;
-	const available = catalog.models.filter((m) => m.formats[format] !== void 0 && m.legacy !== true);
-	if (available.length === 0) return catalog.defaultModelId;
-	return [...available].toSorted((a, b) => (a.formats[format]?.sizeMB ?? Infinity) - (b.formats[format]?.sizeMB ?? Infinity))[0].id;
+//#region src/composites/step-inspector/setting-values.ts
+function isValueField(field) {
+	return field.type !== "separator" && field.type !== "info" && field.type !== "group";
 }
-/**
-* The model a matrix CELL shows as this step's effective default on `device`.
-*
-* The device's ELECTED model (`device.defaultModelId`, the per-device
-* object-detection election) applies ONLY when this step's catalog actually
-* contains it — `slot === 'detector'` alone is too wide, because
-* package-detection shares the detector slot with the root step. Bit live
-* 2026-08-08: rfdetr-package became the package step's default and every
-* matrix cell still showed the device's yolo as the "selected" model, because
-* the election was applied slot-wide. Membership is the principled gate: an
-* elected model this step cannot run is never displayed for it.
-*/
-function resolveEffectiveDefaultModel(catalog, device) {
-	const format = device?.format;
-	if (format === void 0) return void 0;
-	const elected = device?.defaultModelId;
-	return catalog.slot === "detector" && elected !== void 0 && catalog.models.some((m) => m.id === elected) ? elected : resolveStepDefaultModel(catalog, format);
+/** True for a D738 field whose value is stored with the model it was made for. */
+function bindsToModel(field) {
+	return (field.type === "slider" || field.type === "number") && field.bindsToModel === true;
 }
 /**
-* The models a step may run on an engine `format` — the ONE derivation of the
-* option list. An unknown format yields NOTHING rather than everything: a
-* picker that offered a model with no build for the device would write a pin
-* the runner cannot honour.
+* What runs when no layer stores the field: the running model's default for a
+* model-bound field that the model declares one for (D738), else the field's
+* own default. `fromModel` says which.
 */
-function stepModelOptions(models, format) {
-	if (format === void 0) return [];
-	return models.filter((m) => m.formats[format] !== void 0);
+function defaultOfField(field, modelId) {
+	const byModel = "modelApplicability" in field ? field.modelApplicability?.defaultByModel?.[modelId] : void 0;
+	if (byModel !== void 0) return {
+		value: byModel,
+		fromModel: true
+	};
+	return {
+		value: "default" in field ? field.default : void 0,
+		fromModel: false
+	};
 }
-/** Can this step run on `format` at all? (`false` ⇒ the caller renders "⚠ skip"/"—".) */
-function stepHasModelForFormat(models, format) {
-	return stepModelOptions(models, format).length > 0;
+function trimNumber(n) {
+	return n.toFixed(2).replace(/\.?0+$/, "");
 }
-/**
-* The model a step ACTUALLY runs for a (device, camera) — the whole effective
-* chain in one place: per-camera override → per-(node,device) base → the
-* resolved default (`resolveEffectiveDefaultModel`).
-*
-* Every surface calls this: the matrix cell, and the drawer's picker seed. They
-* are the same number, and the only way to keep them the same number is to have
-* one function produce it. A surface that owns fewer layers omits them (the node
-* matrix passes no `override`) — it does NOT get its own resolver.
-*/
-function resolveEffectiveStepModel(input) {
-	return input.override ?? input.base ?? resolveEffectiveDefaultModel(input.catalog, input.device);
+/** One stored value as the operator reads it (`0.65`, `on`, `Person, Vehicle`, `—`). */
+function formatSettingValue(field, value) {
+	if (value === void 0 || value === null) return "—";
+	if (typeof value === "boolean") return value ? "on" : "off";
+	if (typeof value === "number") {
+		const scale = field.type === "slider" ? field.displayScale : void 0;
+		const unit = "unit" in field && typeof field.unit === "string" ? ` ${field.unit}` : "";
+		return `${trimNumber(scale !== void 0 ? value / scale : value)}${unit}`;
+	}
+	const options = "options" in field && Array.isArray(field.options) ? field.options : [];
+	const labelOf = (v) => {
+		const hit = options.find((o) => o.value === v);
+		return hit ? hit.label : String(v);
+	};
+	if (Array.isArray(value)) return value.length === 0 ? "none" : value.map(labelOf).join(", ");
+	if (typeof value === "string") return labelOf(value);
+	return JSON.stringify(value);
 }
 //#endregion
-//#region src/composites/root-model-source.tsx
-/**
-* "Use the root model" — the step editor's control for a step the camera's
-* ROOT detection model can supply (D730).
-*
-* The flag (`useRootModel`, in the step's own settings) is an operator INTENT
-* kept beside the step's model: checking it never changes the model, and a
-* root that cannot supply the step leaves the step running its own model while
-* the flag waits, inactive, for a root that can. Whether it is in force is
-* `resolveRootSupply` — the same function the runner decides with.
-*/
-/** The editor's view of the flag for one step, or `null` for a step no root can supply. */
-function rootSourceState(stepId, settings, rootModel) {
-	if (!(0, _camstack_types.isRootSuppliableStepId)(stepId)) return null;
-	return (0, _camstack_types.resolveRootSupply)(stepId, settings, rootModel?.supplies);
+//#region src/composites/step-inspector/layered-settings-form.tsx
+var SOURCE_TONE$1 = {
+	accelerator: "border-amber-500/40 bg-amber-500/10 text-amber-500",
+	camera: "border-primary/40 bg-primary/10 text-primary",
+	node: "border-border bg-muted/40 text-foreground",
+	default: "border-border/60 text-foreground-subtle"
+};
+/** DOM id of a field's box — the target of a search hit. */
+function stepFieldDomId(key) {
+	return `step-field-${key}`;
 }
-/** The settings bag with the flag set — every other key untouched. */
-function withUseRootModel(settings, value) {
+function displayStep(addon, modelId, settings) {
 	return {
-		...settings,
-		[_camstack_types.USE_ROOT_MODEL_SETTING_KEY]: value
+		addonId: addon.id,
+		addonName: addon.name,
+		slot: addon.slot,
+		inputClasses: [...addon.inputClasses],
+		outputClasses: [...addon.outputClasses],
+		enabled: true,
+		modelId,
+		children: [],
+		settings: { ...settings }
 	};
 }
-/** What the operator must know about a supply, beyond "it is on". */
-function supplyNotes(supply) {
-	if (supply.kind === "label") {
-		const notes = supply.uncovered.length > 0 ? [`Not produced by this model: ${supply.uncovered.join(", ")}.`] : [];
-		if (supply.stepId === "package-detection") return [...notes, "The root model's own package boxes become the package result at this step's threshold; this step's zone-crop view is not used, so small parcels the full-frame model misses stay missed."];
-		return [...notes, "This step's class list decides which of the root's labels become the fine class; a switched-off class stays at its macro."];
-	}
-	if (supply.kind === "mask") return ["Masks come from the root model: each detection carries the root's own instance mask, so this step's model does not run. A root mask follows the model's mask grid (a quarter of its input), coarser than this step's own per-crop mask."];
-	if (supply.stepId === "face-detection") return ["Face boxes come from the root model. Each is re-found by this step's face detector in a square around it before recognition, so only a face it finds is recognised; a box with no face in it is dropped."];
-	return ["Plate boxes come from the root model and the plate reader reads them. The crop margin around a root plate box has not been measured for this model yet."];
-}
-/** The reason an intended supply is not in force, in the operator's words. */
-function inactiveText(state, rootModel) {
-	switch (state.inactiveReason) {
-		case "root-input-too-small": return `the current root model (${rootModel.name}) sees the frame too small to find faces reliably (it needs an input of 640 px or more).`;
-		case "root-does-not-declare":
-		case void 0: return `the current root model (${rootModel.name}) cannot supply this.`;
-	}
-}
-function RootModelSourceControl({ stepId, settings, rootModel, disabled, onChange }) {
-	if (rootModel === void 0) return null;
-	const state = rootSourceState(stepId, settings, rootModel);
-	if (state === null) return null;
-	const inactiveNote = state.inactive ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "rounded bg-muted/40 px-3 py-2 text-[11px] text-foreground-subtle",
-		"data-testid": "root-model-inactive",
+var LAYER_IDS = [
+	"accelerator",
+	"camera",
+	"node"
+];
+/** "Camera · node 0.65 · model default 0.78 · [Reset to node]" under one field. */
+function SettingProvenance({ field, layers, target, labels, boundKeys, modelId, pinned, disabled, onReset, action }) {
+	const effective = (0, _camstack_types.effectiveStepSettings)(layers);
+	const fallback = defaultOfField(field, modelId);
+	const defaultLabel = fallback.fromModel ? "model default" : "default";
+	const stored = (0, _camstack_types.stepSettingSource)(layers, field.key, boundKeys);
+	const bound = bindsToModel(field);
+	const state = bound ? (0, _camstack_types.resolveModelBoundSetting)(effective, field.key, modelId, fallback.value, fallback.value) : null;
+	const source = state === null || state.source === "override" ? stored : "default";
+	const sourceText = source === "default" ? defaultLabel : labels[source] ?? source;
+	const levels = LAYER_IDS.filter((id) => id !== source && labels[id] !== void 0).filter((id) => layers[id]?.[field.key] !== void 0).map((id) => {
+		const binding = bound ? layers[id]?.[(0, _camstack_types.modelBindingKey)(field.key)] : void 0;
+		const forOther = typeof binding === "string" && binding !== modelId ? ` (for ${binding})` : "";
+		return `${labels[id]} ${formatSettingValue(field, layers[id]?.[field.key])}${forOther}`;
+	});
+	const withDefault = source === "default" ? levels : [...levels, `${defaultLabel} ${formatSettingValue(field, fallback.value)}`];
+	const targetStores = (0, _camstack_types.stepSettingSource)({ [target]: layers[target] }, field.key, boundKeys) !== "default";
+	const below = LAYER_IDS.slice(LAYER_IDS.indexOf(target) + 1).find((id) => labels[id] !== void 0 && layers[id]?.[field.key] !== void 0);
+	const resetTo = below !== void 0 ? labels[below] ?? below : defaultLabel;
+	const belowSource = stored === "default" ? "default" : (0, _camstack_types.stepSettingSource)({
+		...layers,
+		[stored]: void 0
+	}, field.key, boundKeys);
+	const pinnedAt = belowSource === "default" ? defaultLabel : labels[belowSource] ?? belowSource;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px]",
 		children: [
-			"Use the root model: inactive — ",
-			inactiveText(state, rootModel),
-			" The step runs its own model."
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "setting-source",
+				className: cn("rounded border px-1.5 py-px font-medium", SOURCE_TONE$1[source]),
+				children: sourceText
+			}),
+			withDefault.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "setting-levels",
+				className: "text-foreground-subtle",
+				children: withDefault.join(" · ")
+			}),
+			pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "rounded border border-amber-500/40 px-1.5 py-px text-amber-500",
+				title: "Stored by an older editor as a copy of the value below. It changes nothing today, but it stops later changes below from reaching this camera.",
+				children: [
+					"pinned at the ",
+					pinnedAt.toLowerCase(),
+					" value"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "ml-auto flex items-center gap-2",
+				children: [action, targetStores && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					disabled,
+					onClick: onReset,
+					className: "rounded px-1 text-foreground-subtle hover:bg-muted hover:text-foreground disabled:opacity-50",
+					children: ["Reset to ", resetTo.toLowerCase()]
+				})]
+			})
 		]
-	}) : null;
-	if (state.supply === void 0) return inactiveNote;
-	const checked = state.intent;
+	});
+}
+function LayeredSettingsForm({ addon, fields, layers, target, labels, modelId, onChangeLayer, rootModel, pinnedKeys = [], fieldActions, headerActions, highlightKey = null, disabled = false }) {
+	const boundKeys = (0, _camstack_types.collectModelBoundKeys)(fields);
+	const effective = (0, _camstack_types.effectiveStepSettings)(layers);
+	const targetLayer = layers[target];
+	const step = displayStep(addon, modelId, effective);
+	const rootState = rootSourceState(addon.id, effective, rootModel);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1",
-		"data-testid": "root-model-source",
+		className: "space-y-2 text-xs",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex items-center gap-2 text-xs text-foreground",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "checkbox",
-						checked,
-						disabled,
-						onChange: (e) => onChange(e.target.checked)
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: TEXT_SECTION_LABEL,
+						children: "Settings"
 					}),
-					"Use the root model (",
-					rootModel.name,
-					")"
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: TEXT_HINT,
+						children: ["editing: ", labels[target] ?? target]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "ml-auto flex flex-wrap items-center gap-3",
+						children: [headerActions, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetModelDefaultsButton, {
+							fields,
+							modelId,
+							settings: targetLayer,
+							disabled,
+							onReset: (next) => onChangeLayer(next)
+						})]
+					})
 				]
 			}),
-			inactiveNote,
-			state.effective && supplyNotes(state.supply).map((note) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-[10px] leading-snug text-foreground-subtle",
-				children: note
-			}, note))
+			rootState !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootModelSourceControl, {
+				stepId: addon.id,
+				settings: effective,
+				rootModel,
+				disabled,
+				onChange: (v) => onChangeLayer((0, _camstack_types.withFieldFrom)(targetLayer, _camstack_types.USE_ROOT_MODEL_SETTING_KEY, withUseRootModel(effective, v), []))
+			}),
+			fields.map((field) => {
+				if (!isValueField(field)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
+					field,
+					allFields: fields,
+					step,
+					disabled,
+					onChange: () => {}
+				}, field.key);
+				const highlighted = highlightKey === field.key;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					id: stepFieldDomId(field.key),
+					"data-field-key": field.key,
+					className: cn("rounded-md border border-transparent px-2 py-1 -mx-2", highlighted && "border-primary/50 bg-primary/5"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
+						field,
+						allFields: fields,
+						step,
+						disabled,
+						hideModelBoundSourceRow: true,
+						onChange: (next) => onChangeLayer((0, _camstack_types.withFieldFrom)(targetLayer, field.key, next.settings ?? {}, boundKeys))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingProvenance, {
+						field,
+						layers,
+						target,
+						labels,
+						boundKeys,
+						modelId,
+						pinned: pinnedKeys.includes(field.key),
+						disabled,
+						onReset: () => onChangeLayer((0, _camstack_types.withoutField)(targetLayer, field.key, boundKeys)),
+						action: fieldActions?.(field.key, (0, _camstack_types.stepSettingSource)(layers, field.key, boundKeys))
+					})]
+				}, field.key);
+			})
 		]
 	});
 }
 //#endregion
 //#region src/composites/agent-step-editor.tsx
 /**
-* Per-(node,device) and per-camera editors must not surface knobs that the
-* cluster already owns. Those fields still exist on the step's catalog
-* schema so the runner can hydrate `child.settings`, but writing them here
+* A step's node-local fields: the catalog schema minus the knobs the CLUSTER
+* owns (`clusterStepSettingFieldsFor`). Those still exist on the schema so the
+* runner can hydrate `child.settings`, but writing them per node or per camera
 * would be a second store the overlay silently ignores.
 */
-function nodeLocalConfigSchema(addon) {
+function stepLocalFields(addon) {
 	const clusterKeys = new Set((0, _camstack_types.clusterStepSettingFieldsFor)(addon.id).map((field) => field.key));
 	return (addon.configSchema ?? []).filter((field) => !clusterKeys.has(field.key));
 }
-function ClusterSettingsHint({ addonId }) {
-	if ((0, _camstack_types.clusterStepSettingFieldsFor)(addonId).length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "text-[10px] leading-snug text-foreground-subtle",
-		children: "Admission knobs for this step live in Pipeline → Cluster → Settings → Enrichment models. They apply to every camera — a per-device copy would fill the shared index from two policies."
-	});
-}
 /**
-* The model the step's settings are read and written for — what a model-bound
+* The model a step's settings are read and written for — what a model-bound
 * field (D738) binds to. While the ROOT supplies the step's fine label (D741),
 * that is the root model: the step's threshold then gates the root's label, on
 * the root's score scale. Otherwise the step's own model: its pin, else the
 * model the row really runs (`effectiveModelId` — the device's hardware-aware
 * default when unpinned), else the step's flat catalog default.
 */
-function settingsModelIdFor(addon, cfg, effectiveModelId, rootModel) {
-	if (rootModel !== void 0 && rootSourceState(addon.id, cfg.settings, rootModel)?.effective) return rootModel.modelId;
-	return cfg.modelId ?? effectiveModelId ?? addon.defaultModelId;
+function settingsModelIdFor(addon, modelId, settings, rootModel) {
+	if (rootModel !== void 0 && rootSourceState(addon.id, settings, rootModel)?.effective) return rootModel.modelId;
+	return modelId ?? addon.defaultModelId;
 }
-function buildDisplayStep(addon, cfg, modelId) {
-	return {
-		addonId: addon.id,
-		addonName: addon.name,
-		slot: addon.slot,
-		inputClasses: [...addon.inputClasses],
-		outputClasses: [...addon.outputClasses],
-		enabled: cfg.enabled,
-		modelId,
-		children: [],
-		settings: { ...cfg.settings }
-	};
+function ClusterSettingsHint({ addonId }) {
+	if ((0, _camstack_types.clusterStepSettingFieldsFor)(addonId).length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "text-[10px] leading-snug text-foreground-subtle",
+		children: "Admission knobs for this step live in Pipeline → Cluster → Settings → Enrichment models. They apply to every camera — a per-device copy would fill the shared index from two policies."
+	});
 }
 /**
 * Shown in place of the model picker while the root model supplies the step:
@@ -29721,233 +29958,57 @@ function RootSuppliedModelNote({ rootModel, stepModelId }) {
 		]
 	});
 }
-function computeEffective(mode, agentDefault, patch) {
-	if (mode !== "device" || !patch) return agentDefault;
-	return {
-		enabled: agentDefault.enabled,
-		modelId: patch.modelId ?? agentDefault.modelId,
-		settings: patch.settings ?? agentDefault.settings
-	};
-}
-function AgentModeEditor({ addon, agentDefault, modelsForFormat, engineFormat, effectiveModelId, rootModel, onChangeAgentConfig }) {
+/**
+* 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 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]);
 	const update = (patch) => {
 		onChangeAgentConfig?.({
 			...agentDefault,
 			...patch
 		});
 	};
-	const localSchema = nodeLocalConfigSchema(addon);
+	const fields = stepLocalFields(addon);
 	const formatDefault = addon.defaultModelIdByFormat?.[engineFormat] ?? addon.defaultModelId;
 	const rootSupplied = rootSourceState(addon.id, agentDefault.settings, rootModel)?.effective === true;
+	const runningModel = agentDefault.modelId ?? effectiveModelId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4 text-xs",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootModelSourceControl, {
-				stepId: addon.id,
-				settings: agentDefault.settings,
-				rootModel,
-				onChange: (v) => update({ settings: withUseRootModel(agentDefault.settings, v) })
-			}),
 			rootSupplied && rootModel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootSuppliedModelNote, {
 				rootModel,
-				stepModelId: agentDefault.modelId ?? effectiveModelId
+				stepModelId: runningModel
 			}) : /* @__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 ?? effectiveModelId ?? "",
+				value: runningModel ?? "",
 				defaultModelId: formatDefault,
 				onChange: (modelId) => update({ modelId })
 			})] }),
-			localSchema.length > 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.jsxs)("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-[10px] uppercase tracking-widest text-foreground-subtle",
-						children: "Settings"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetModelDefaultsButton, {
-						fields: localSchema,
-						modelId: settingsModelIdFor(addon, agentDefault, effectiveModelId, rootModel),
-						settings: agentDefault.settings,
-						onReset: (settings) => update({ settings })
-					})]
-				}), localSchema.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
-					field,
-					allFields: localSchema,
-					step: buildDisplayStep(addon, agentDefault, settingsModelIdFor(addon, agentDefault, effectiveModelId, rootModel)),
-					disabled: false,
-					onChange: (next) => update({ settings: { ...next.settings } })
-				}, field.key))]
+			(fields.length > 0 || rootSourceState(addon.id, agentDefault.settings, rootModel)) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pt-2 border-t border-border/50",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayeredSettingsForm, {
+					addon,
+					fields,
+					layers: { node: agentDefault.settings },
+					target: "node",
+					labels: { node: "This node" },
+					modelId: settingsModelIdFor(addon, runningModel, agentDefault.settings, rootModel),
+					...rootModel !== void 0 ? { rootModel } : {},
+					onChangeLayer: (settings) => update({ settings })
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClusterSettingsHint, { addonId: addon.id })
 		]
 	});
 }
-function DeviceModeEditor({ addon, agentDefault, agentNodeId, currentPatch, modelsForFormat, engineFormat, effectiveModelId, rootModel, onChangePatch }) {
-	const effective = computeEffective("device", agentDefault, currentPatch);
-	const inheritedModelId = agentDefault.modelId ?? effectiveModelId;
-	const formatDefault = addon.defaultModelIdByFormat?.[engineFormat] ?? addon.defaultModelId;
-	const commitPatch = (next) => {
-		const hasAnyField = next.modelId !== void 0 || next.settings !== void 0;
-		onChangePatch?.(hasAnyField ? next : null);
-	};
-	const setModel = (modelId) => {
-		const { modelId: _prev, ...rest } = currentPatch ?? {};
-		commitPatch(modelId === void 0 ? rest : {
-			...rest,
-			modelId
-		});
-	};
-	const setSettings = (settings) => {
-		const { settings: _prev, ...rest } = currentPatch ?? {};
-		commitPatch(settings === void 0 ? rest : {
-			...rest,
-			settings
-		});
-	};
-	const modelOverridden = currentPatch?.modelId !== void 0;
-	const localSchema = nodeLocalConfigSchema(addon);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-4 text-xs",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				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.jsx)(RootModelSourceControl, {
-				stepId: addon.id,
-				settings: effective.settings,
-				rootModel,
-				onChange: (v) => setSettings(withUseRootModel(effective.settings, v))
-			}),
-			rootSourceState(addon.id, effective.settings, rootModel)?.effective === true && rootModel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootSuppliedModelNote, {
-				rootModel,
-				stepModelId: effective.modelId ?? inheritedModelId
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center justify-between mb-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-[10px] uppercase tracking-widest text-foreground-subtle",
-						children: "Model"
-					}), modelOverridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "text-[10px] text-foreground-subtle hover:text-foreground",
-						onClick: () => setModel(void 0),
-						children: "Clear"
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "text-[10px] text-primary hover:underline",
-						onClick: () => setModel(inheritedModelId),
-						children: "Override"
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
-					models: modelsForFormat,
-					disabled: !modelOverridden,
-					value: (modelOverridden ? currentPatch?.modelId ?? inheritedModelId : inheritedModelId) ?? "",
-					defaultModelId: formatDefault,
-					onChange: (modelId) => setModel(modelId)
-				}),
-				!modelOverridden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "text-[10px] text-foreground-subtle mt-1",
-					children: ["inherits from ", agentNodeId]
-				})
-			] }),
-			localSchema.length > 0 && (() => {
-				const settingsOverridden = currentPatch?.settings !== void 0;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "pt-2 border-t border-border/50 space-y-3",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-[10px] uppercase tracking-widest text-foreground-subtle",
-								children: "Settings"
-							}), settingsOverridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetModelDefaultsButton, {
-									fields: localSchema,
-									modelId: settingsModelIdFor(addon, effective, inheritedModelId, rootModel),
-									settings: currentPatch?.settings,
-									onReset: (settings) => setSettings(settings)
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "text-[10px] text-foreground-subtle hover:text-foreground",
-									onClick: () => setSettings(void 0),
-									children: "Clear"
-								})]
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "text-[10px] text-primary hover:underline",
-								onClick: () => setSettings({ ...agentDefault.settings }),
-								children: "Override"
-							})]
-						}),
-						localSchema.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
-							field,
-							allFields: localSchema,
-							step: buildDisplayStep(addon, effective, settingsModelIdFor(addon, effective, inheritedModelId, rootModel)),
-							disabled: !settingsOverridden,
-							onChange: (next) => setSettings({ ...next.settings })
-						}, field.key)),
-						!settingsOverridden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "text-[10px] text-foreground-subtle",
-							children: ["inherits from ", agentNodeId]
-						})
-					]
-				});
-			})(),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClusterSettingsHint, { addonId: addon.id }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				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 provisioning preview"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "font-mono truncate",
-					children: [
-						addon.id,
-						" · model: ",
-						effective.modelId ?? inheritedModelId ?? "Auto"
-					]
-				})]
-			})
-		]
-	});
-}
-function AgentStepEditor(props) {
-	const { mode, addon, agentDefault, agentNodeId, currentPatch, onChangeAgentConfig, onChangePatch, engineFormat, effectiveModelId, rootModel } = props;
-	const modelsForFormat = (0, react$1.useMemo)(() => stepModelOptions(addon.models, engineFormat), [addon.models, engineFormat]);
-	if (mode === "agent") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentModeEditor, {
-		addon,
-		agentDefault,
-		modelsForFormat,
-		engineFormat,
-		effectiveModelId,
-		...rootModel !== void 0 ? { rootModel } : {},
-		onChangeAgentConfig
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceModeEditor, {
-		addon,
-		agentDefault,
-		agentNodeId,
-		currentPatch,
-		modelsForFormat,
-		engineFormat,
-		effectiveModelId,
-		...rootModel !== void 0 ? { rootModel } : {},
-		onChangePatch
-	});
-}
 //#endregion
 //#region src/primitives/icon-button.tsx
 var iconButtonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
@@ -33862,117 +33923,6 @@ async function waitForIceGathering(pc) {
 	});
 }
 //#endregion
-//#region src/lib/responsive.ts
-/**
-* Responsive design tokens — three-tier system.
-*
-* The admin-ui targets three width tiers; every component should pick
-* the right token from this file instead of hand-coding breakpoints.
-* Adopting the tokens uniformly is what makes the app feel consistent
-* across operator devices (mobile / tablet / desktop) and what unlocks
-* targeted tuning (e.g. shrink every label by 1px in one place).
-*
-* Tier definitions (Tailwind breakpoints):
-*
-*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
-*     Single column, tight padding, smallest text, icon-only buttons
-*     where labels can be inferred. The operator can still see every
-*     stat / action — no horizontal scroll, no clipped text. The user
-*     directive: "molta informazione in poco spazio quando la width è
-*     bassa." [a lot of information in little space when the width is low.]
-*
-*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
-*     2-column grids, side panels become visible, button labels return.
-*     Targets ~768px–1024px viewports — the most common operator sizes.
-*
-*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
-*     4-column grids, generous padding, full-width header text,
-*     side-by-side composite layouts. The operator has elbow room.
-*
-* Conventions:
-*   - **Always start from L1** — the bare class is always the compact
-*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
-*     desktop-first breakpoints; no max-width queries.
-*   - **Token strings are static** — kept as `as const` so callers can
-*     compose them via `cn()` / template literals without running a
-*     class generator at runtime.
-*   - **Pair the token with a comment** — the comment in the file
-*     names every breakpoint it crosses, so a reader can predict the
-*     layout without going to Tailwind docs.
-*/
-/** Container padding for a card-style section (header + body). */
-var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
-/** Header strip inside a card (between border-b lines). */
-var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
-/** Body padding for a card-style section. */
-var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
-/** Gap between cards in a vertical stack. */
-var STACK_GAP = "space-y-3 sm:space-y-4";
-/** Gap between cards in a grid (4 cells / row at lg). */
-var GRID_GAP = "gap-2 sm:gap-3";
-/** Row padding inside a divided list (e.g. InfoRow). */
-var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
-/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
-var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
-/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
-var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
-/** Side-by-side layout that stacks below md (canvas + side panel). */
-var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
-/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
-var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
-/**
-* The tier boundary at which a settings label/value row stops stacking.
-*
-* Below it (L1 — compact) the row is ONE column: label on its own line, value
-* on the next at full width. Above it the row is label-left / value-right as
-* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
-* value beside it; a phone has neither, and the failure mode is not "cramped"
-* but "the value is the part that gets cut" — the one thing the operator
-* opened the page to read.
-*/
-var SETTING_ROW_STACK_BREAKPOINT = "sm";
-/** Outer row: single column at L1, label/value columns from `sm` up. */
-var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
-/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
-var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
-/**
-* Value lane — the value text plus its trailing affordances (copy / reveal).
-* `w-full` at L1 so the value owns the whole row once the label is above it;
-* `sm:flex-1` makes it share the row again from `sm` up.
-*/
-var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
-/**
-* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
-* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
-* desktop form, where the row is wide enough for truncation to be a choice
-* rather than data loss.
-*/
-var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
-/** Section header label (uppercase tracking-wider). */
-var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
-/** Field label inside a row. */
-var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
-/** Sub-label / hint text. */
-var TEXT_HINT = "text-[10px] text-foreground-subtle";
-/** Primary value (a metric, badge, …). */
-var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
-/** Big metric value (StatCard). */
-var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
-/** Default compact button. */
-var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
-/** Primary compact button. */
-var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
-/** Danger compact button. */
-var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
-/** Warning compact button (e.g. cancel-drawing). */
-var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
-/** Compact text/select/number input. */
-var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
-/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
-var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
-var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
-var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
-//#endregion
 //#region src/composites/data-table-layout.ts
 /**
 * At this many columns and above, `auto` switches a narrow viewport to cards.
@@ -55443,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)))
 		})]
 	});
@@ -55565,97 +55536,75 @@ function cellButtonClass(state, isSelected, extra) {
 //#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$1 = 21;
-var STEP_COL_PX = STEP_COL_REM$1 * 16;
-/**
-* Narrow (mobile) step-column width. On a phone the wide 21rem column would
-* occlude nearly the whole viewport, so the single-node layout pins a slimmer
-* sticky step column and lets the device columns scroll horizontally beside it
-* (both fully readable) rather than cramming every column into the viewport.
+* 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.
 */
-var STEP_COL_SINGLE_REM = 11;
-function activeChoice(gate) {
-	if (!gate.explicit) return "default";
-	return gate.effectiveOn ? "on" : "off";
-}
+/** The sticky step column. */
+var STEP_COL_REM = 18;
+var STEP_COL_PX = STEP_COL_REM * 16;
 /**
-* 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.
+* Narrow (mobile) step-column width. On a phone the wide column would occlude
+* nearly the whole viewport, so the single-node layout pins a slimmer sticky
+* step column and lets the device columns scroll horizontally beside it.
 */
-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"
-		})]
-	});
+var STEP_COL_SINGLE_REM = 11;
+/** 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 StepGateCell({ node, depth, gate, busy, onSet, hideGate }) {
-	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 }), hideGate ? null : gate.kind === "zone-driven" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoneBadge, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GateControl, {
-			gate,
-			busy,
-			onSet
-		})]
+function StepCell({ node, depth, r, tabbable, selected, badge, onClick, sticky }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		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]
+		})
 	});
 }
 /**
@@ -55685,76 +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$1({ tree, agents, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, single, hideGate }) {
+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$1}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: hideGate ? "Step" : "Step · gate"
-				}),
-				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,
-					gate: gateFor(node.addonId),
-					getCellState,
-					onCellClick,
-					selectedCell,
-					onSetGate,
-					gateBusy,
-					hideGate
-				}, 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, gate, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, hideGate }) {
-	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),
-		hideGate
-	}), 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, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, fallbackNodeId, onFallbackNodeChange, hideGate }) {
+});
+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)(() => {
@@ -55772,6 +55824,15 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 		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,
@@ -55780,20 +55841,21 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 			nodes,
 			selected: selectedNode.agentNodeId,
 			onSelect: onFallbackNodeChange
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid$1, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid, {
+			ref,
 			tree,
 			agents: shownAgents,
-			gateFor,
 			getCellState,
 			onCellClick,
+			onStepClick,
+			stepBadge,
 			selectedCell,
-			onSetGate,
-			gateBusy,
 			single: single && selectedNode !== null,
-			hideGate
+			reserveRightPx,
+			label
 		})]
 	});
-}
+});
 //#endregion
 //#region src/composites/discovery-panel.tsx
 function DiscoveryPanel({ deviceId, className = "", onOpenChild }) {
@@ -56732,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();
@@ -56820,41 +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, toggleMode = "simple", overrides = {}, onOverrideChange, inheritedEnabledByAddon = {}, hideModelAndSettings = false, allowAutoModel = false }) {
-	const stepExtraProps = (addonId) => ({
-		toggleMode,
-		hideModelAndSettings,
-		allowAutoModel,
-		...toggleMode === "threeState" ? {
-			overrideState: overrides[addonId] !== void 0 ? overrides[addonId] : null,
-			onOverrideChange: onOverrideChange ? (next) => onOverrideChange(addonId, next) : void 0,
-			inheritedEnabled: inheritedEnabledByAddon[addonId]
-		} : {}
-	});
+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
@@ -56937,8 +56937,7 @@ function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateI
 				allSchemas: schemaMap,
 				onChange: handleStepChange,
 				onDelete: readOnly ? void 0 : (id) => onChange(steps.filter((s) => s.addonId !== id)),
-				readOnly,
-				...stepExtraProps(step.addonId)
+				readOnly
 			}), (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ml-4 pl-3 border-l border-border/60 space-y-1.5",
 				children: [
@@ -56967,8 +56966,7 @@ function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateI
 										children: step.children.filter((c) => c.addonId !== id)
 									});
 								},
-								readOnly,
-								...stepExtraProps(child.addonId)
+								readOnly
 							}), (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "ml-4 pl-3 border-l border-border/40 space-y-1.5",
 								children: [
@@ -56999,8 +56997,7 @@ function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateI
 												} : c)
 											});
 										},
-										readOnly,
-										...stepExtraProps(grandchild.addonId)
+										readOnly
 									}, grandchild.addonId)),
 									!readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderStep, {
 										addon,
@@ -57027,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
@@ -57160,179 +57095,6 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
 	});
 }
 //#endregion
-//#region src/composites/pipeline-tree-matrix.tsx
-var STEP_COL_REM = 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 }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "sticky left-0 z-10 bg-surface px-3 py-2 border-b border-border text-xs flex items-start gap-2 min-w-0",
-		style: { paddingLeft: `${12 + depth * 14}px` },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node }), toggleProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "pl-2 pt-0.5 shrink-0",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickToggle, {
-				enabled: toggleProps.enabled,
-				onChange: toggleProps.onChange,
-				disabled: toggleProps.disabled
-			})
-		})]
-	}), agents.map((a) => {
-		const state = getCellState(node.addonId, a);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			onClick: () => onCellClick(node.addonId, a),
-			className: cellButtonClass(state, selectedCell !== null && selectedCell.addonId === node.addonId && agentColumnKey(selectedCell) === agentColumnKey(a), "min-w-0 overflow-hidden px-3 py-1.5 border-b border-l border-border"),
-			children: renderCellContent(state)
-		}, agentColumnKey(a));
-	})] });
-}
-/**
-* 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 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}, 13rem)`;
-	const showToggle = onToggleEnabled !== void 0 && agents.length === 1;
-	const onlyAgent = agents[0];
-	const groups = groupAgentColumns(agents);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "overflow-auto border border-border rounded",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid w-max",
-			style: { gridTemplateColumns: gridTemplate },
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "sticky top-0 left-0 z-20 bg-muted/60 px-3 py-2 text-[10px] uppercase tracking-widest text-foreground-subtle border-b border-border",
-					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 bg-muted/60 px-3 py-2 border-b border-l border-border",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-xs font-semibold text-foreground truncate",
-						children: col.agentNodeId
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-[10px] text-foreground-subtle truncate",
-						children: col.engineLabel
-					})]
-				}, agentColumnKey(col)))),
-				rows.map(({ node, depth }) => {
-					const cellState = showToggle && onlyAgent !== void 0 ? getCellState(node.addonId, onlyAgent) : null;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRow, {
-						node,
-						depth,
-						agents,
-						getCellState,
-						onCellClick,
-						selectedCell,
-						toggleProps: showToggle && cellState !== null ? {
-							enabled: cellState.kind === "enabled",
-							onChange: (next) => onToggleEnabled?.(node.addonId, next),
-							disabled: cellState.kind === "na"
-						} : void 0
-					}, node.addonId);
-				})
-			]
-		})
-	});
-}
-/**
-* Narrow layout: one card per agent column, each listing every step stacked
-* vertically. Feature-parity with the matrix — same `onCellClick`, same
-* `renderCellContent`, same single-agent `onToggleEnabled`.
-*/
-function StackedCards({ rows, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
-	const showToggle = onToggleEnabled !== void 0 && agents.length === 1;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "space-y-3",
-		children: agents.map((a) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "border border-border rounded overflow-hidden",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "bg-muted/60 px-3 py-2 border-b border-border",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-xs font-semibold text-foreground truncate",
-					children: a.deviceLabel ? `${a.agentNodeId} · ${a.deviceLabel}` : a.agentNodeId
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-[10px] text-foreground-subtle truncate",
-					children: a.engineLabel
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: rows.map(({ node, depth }) => {
-				const state = getCellState(node.addonId, a);
-				const isSelected = selectedCell !== null && selectedCell.addonId === node.addonId && agentColumnKey(selectedCell) === agentColumnKey(a);
-				const toggleProps = showToggle && state !== null ? {
-					enabled: state.kind === "enabled",
-					onChange: (next) => onToggleEnabled?.(node.addonId, next),
-					disabled: state.kind === "na"
-				} : void 0;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					className: "border-b border-border last:border-b-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: () => onCellClick(node.addonId, a),
-							className: cellButtonClass(state, isSelected, "flex flex-1 min-w-0 items-start justify-between gap-3 px-3 py-2"),
-							style: { paddingLeft: `${12 + depth * 14}px` },
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "shrink-0 max-w-[45%] pt-0.5",
-								children: renderCellContent(state)
-							})]
-						}), toggleProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "pr-3 shrink-0",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickToggle, {
-								enabled: toggleProps.enabled,
-								onChange: toggleProps.onChange,
-								disabled: toggleProps.disabled
-							})
-						})]
-					})
-				}, node.addonId);
-			}) })]
-		}, agentColumnKey(a)))
-	});
-}
-function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
-	const rows = (0, react$1.useMemo)(() => flattenTree(tree), [tree]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "@container/matrix w-full",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "@2xl/matrix:hidden",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackedCards, {
-				rows,
-				agents,
-				getCellState,
-				onCellClick,
-				selectedCell,
-				onToggleEnabled
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "hidden @2xl/matrix:block",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixGrid, {
-				rows,
-				agents,
-				getCellState,
-				onCellClick,
-				selectedCell,
-				onToggleEnabled
-			})
-		})]
-	});
-}
-//#endregion
 //#region src/composites/provider-badge.tsx
 var providerConfig = {
 	onvif: {
@@ -57776,89 +57538,6 @@ function validateSelector(selector) {
 	}
 }
 //#endregion
-//#region src/composites/slide-over-panel.tsx
-/**
-* SlideOverPanel — a detail surface anchored to context on desktop and to the
-* viewport on mobile.
-*
-* - **Desktop (`md+`):** an in-container, NON-modal slide-over pinned to the
-*   right edge of the nearest positioned ancestor. The host reserves space with
-*   a matching `md:pr-*` so the panel sits beside its content (e.g. the
-*   multi-node pipeline matrix), not over it.
-* - **Mobile (`< md`):** a MODAL bottom sheet pinned to the viewport
-*   (`position: fixed`). It never derives its size from the surrounding
-*   container, so it can't stretch across a horizontally-laid-out node matrix
-*   and overflow the page — the previous behaviour when it was a fixed-width
-*   `absolute` panel anchored to the wide matrix wrapper.
-*
-* The whole desktop⇄mobile transform is pure Tailwind responsive classes on one
-* element — no layout-shift on hydration, no portal. JS is used only to lock
-* body scroll behind the mobile sheet and to wire Escape-to-close.
-*/
-function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass = "md:w-[360px]" }) {
-	const isMobile = useIsMobile();
-	(0, react$1.useEffect)(() => {
-		if (!open) return;
-		const onEsc = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", onEsc);
-		return () => window.removeEventListener("keydown", onEsc);
-	}, [open, onClose]);
-	(0, react$1.useEffect)(() => {
-		if (!open || !isMobile) return;
-		const previous = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = previous;
-		};
-	}, [open, isMobile]);
-	if (!open) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "fixed inset-0 z-40 bg-black/50 md:hidden",
-		onClick: onClose,
-		"aria-hidden": "true"
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-		className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col", "max-h-[85dvh] rounded-t-2xl border-t border-border", "bg-surface shadow-2xl pb-[env(safe-area-inset-bottom)]", "md:absolute md:inset-x-auto md:top-0 md:right-0 md:bottom-0 md:z-20", "md:max-h-none md:rounded-none md:border-t-0 md:border-l md:pb-0", widthClass),
-		role: "dialog",
-		"aria-modal": isMobile ? "true" : "false",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex shrink-0 justify-center pt-2 pb-1 md:hidden",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-1 w-9 rounded-full bg-foreground-subtle/30" })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-				className: "flex shrink-0 items-start justify-between gap-2 px-4 py-3 border-b border-border",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-sm font-semibold text-foreground truncate",
-						children: title
-					}), subtitle !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-[11px] text-foreground-subtle mt-0.5 truncate",
-						children: subtitle
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: onClose,
-					className: "p-1 rounded hover:bg-muted text-foreground-subtle hover:text-foreground",
-					"aria-label": "Close panel",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "w-4 h-4" })
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-3",
-				children
-			}),
-			footer !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-				className: "flex shrink-0 items-center gap-2 justify-end px-4 py-3 border-t border-border",
-				children: footer
-			})
-		]
-	})] });
-}
-//#endregion
 //#region src/composites/snapshot-button.tsx
 /**
 * SnapshotButton — operator-facing manual snapshot trigger.
@@ -58044,51 +57723,501 @@ function StepTimings({ timings, totalMs, className }) {
 	});
 }
 //#endregion
-//#region src/composites/step-tree-master.tsx
-var DOT_COLOR = {
-	inherit: "bg-muted",
-	on: "bg-emerald-500",
-	off: "bg-orange-500",
-	na: "bg-gray-300 opacity-50"
-};
-function TreeRow({ node, depth, selectedAddonId, onSelect, agentDots }) {
-	const isSelected = node.addonId === selectedAddonId;
-	const dots = agentDots?.[node.addonId] ?? [];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+//#region src/composites/step-inspector/accelerator-tabs.tsx
+function AcceleratorTabs({ items, selectedId, onSelect }) {
+	const onKeyDown = (e, index) => {
+		const delta = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+		if (delta === 0) return;
+		e.preventDefault();
+		const next = items[(index + delta + items.length) % items.length];
+		if (next !== void 0) onSelect(next.id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "tablist",
+		"aria-label": "Accelerator",
+		className: "-mx-1 flex min-w-0 flex-nowrap gap-1 overflow-x-auto px-1 pb-0.5",
+		children: items.map((item, index) => {
+			const selected = item.id === selectedId;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": selected,
+				"aria-label": item.marked ? `${item.label} (camera override)` : item.label,
+				tabIndex: selected ? 0 : -1,
+				onClick: () => onSelect(item.id),
+				onKeyDown: (e) => onKeyDown(e, index),
+				className: cn("inline-flex h-9 shrink-0 items-center gap-1 whitespace-nowrap rounded-md border px-2.5 text-[11px] font-medium transition-colors md:h-7", selected ? "border-primary/50 bg-primary/15 text-primary" : "border-border text-foreground-subtle hover:bg-surface-hover hover:text-foreground"),
+				children: [item.label, item.marked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-1.5 w-1.5 rounded-full bg-amber-500",
+					"aria-hidden": true
+				})]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+//#region src/composites/step-inspector/gate-control.tsx
+/**
+* GateControl — whether ONE camera runs a step: Auto (the catalog default) /
+* On / Off. A per-camera, node-independent switch, written at once (it is not
+* part of the inspector's draft). `package-detection` is driven by package
+* zones and shows a badge instead.
+*
+* Segments are 36 px tall on a phone and 32 px from `md` up — the matrix this
+* replaced drew 26 px ones.
+*/
+function activeChoice(gate) {
+	if (!gate.explicit) return "auto";
+	return gate.effectiveOn ? "on" : "off";
+}
+function GateControl({ gate, busy = false, onSet }) {
+	if (gate.kind === "zone-driven") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex items-center rounded-md border border-violet-500/40 bg-violet-500/10 px-2 py-1 text-[11px] font-medium text-violet-400",
+		title: "Runs where this camera has package zones — set on the Zones tab",
+		children: "Zones"
+	});
+	const active = activeChoice(gate);
+	const segment = (choice, label, value, on) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		onClick: () => onSelect(node.addonId),
-		className: cn("w-full flex items-center justify-between gap-2 text-left px-3 py-1.5 text-xs", "border-l-2", isSelected ? "bg-accent border-primary text-foreground font-medium" : "border-transparent hover:bg-muted/40 text-foreground"),
-		style: { paddingLeft: `${12 + depth * 14}px` },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
-			children: node.addonName
-		}), dots.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "flex items-center gap-1 shrink-0",
-			children: dots.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				title: `${d.agentNodeId}: ${d.state}`,
-				className: cn("w-2 h-2 rounded-full", DOT_COLOR[d.state])
-			}, d.agentNodeId))
+		role: "radio",
+		"aria-checked": active === choice,
+		disabled: busy,
+		onClick: () => onSet(value),
+		className: cn("h-9 min-w-12 px-3 text-xs font-medium transition-colors md:h-8", active === choice ? on : "text-foreground-subtle hover:bg-muted/60", busy && "cursor-not-allowed opacity-50"),
+		children: label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "radiogroup",
+			"aria-label": "Runs on this camera",
+			title: `Catalog default: ${gate.defaultOn ? "on" : "off"}`,
+			className: "inline-flex overflow-hidden rounded-md border border-border",
+			children: [
+				segment("auto", "Auto", null, "bg-primary/15 text-primary"),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w-px self-stretch bg-border",
+					"aria-hidden": true
+				}),
+				segment("on", "On", true, "bg-emerald-500 text-white"),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w-px self-stretch bg-border",
+					"aria-hidden": true
+				}),
+				segment("off", "Off", false, "bg-foreground-subtle/70 text-white")
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "hidden text-[10px] text-foreground-subtle @3xl/inspector:inline",
+			children: ["default: ", gate.defaultOn ? "on" : "off"]
 		})]
-	}), node.children.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRow, {
-		node: child,
-		depth: depth + 1,
-		selectedAddonId,
-		onSelect,
-		agentDots
-	}, child.addonId))] });
+	});
+}
+/** The gate as a short list-row badge. */
+function GateBadge({ gate }) {
+	if (gate.kind === "zone-driven") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "shrink-0 text-[9px] font-semibold uppercase text-violet-400",
+		children: "zones"
+	});
+	const on = gate.effectiveOn;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cn("shrink-0 rounded px-1.5 py-px text-[9px] font-semibold uppercase", on ? "bg-emerald-500/15 text-emerald-500" : "bg-muted text-foreground-subtle", gate.explicit && "ring-1 ring-inset ring-current"),
+		title: gate.explicit ? "Set for this camera" : "Catalog default",
+		children: on ? "on" : "off"
+	});
 }
-function StepTreeMaster({ tree, selectedAddonId, onSelect, agentDots, className }) {
+//#endregion
+//#region src/composites/step-inspector/segmented-choice.tsx
+/**
+* SegmentedChoice — a small, labelled single-choice group (a radiogroup of
+* buttons): which layer the inspector's settings edit ("All accelerators" /
+* "Only hub · NPU"). 36 px tall on a phone, 28 px from `md` up.
+*/
+function SegmentedChoice({ label, options, value, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "radiogroup",
+		"aria-label": label,
+		className: "flex flex-wrap items-center gap-1",
+		children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": value === option.value,
+			onClick: () => onChange(option.value),
+			className: cn("h-9 rounded-md border px-2.5 text-[11px] font-medium transition-colors md:h-7", value === option.value ? "border-primary/50 bg-primary/15 text-primary" : "border-border text-foreground-subtle hover:bg-surface-hover hover:text-foreground"),
+			children: option.label
+		}, option.value))
+	});
+}
+//#endregion
+//#region src/composites/step-inspector/step-detail-dock.tsx
+/**
+* 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: 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: a full-screen `Dialog` sheet.
+*/
+/** 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 ?? null; p !== null; p = p.parentElement) {
+		const { overflowY } = getComputedStyle(p);
+		if (overflowY === "auto" || overflowY === "scroll") return p;
+	}
+	return null;
+}
+function useDockBox(anchor, enabled) {
+	const [box, setBox] = (0, react$1.useState)(null);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!enabled) return;
+		const scroller = scrollParentOf(anchor.current);
+		const measure = () => {
+			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);
+		window.addEventListener("resize", measure);
+		return () => {
+			RO?.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [anchor, enabled]);
+	return box;
+}
+function StepDetailDock({ open, anchor, onClose, label, children }) {
+	const isMobile = useIsMobile();
+	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 matrix. */
+function BackToStepsButton({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		className: "inline-flex h-9 items-center gap-0.5 rounded-md border border-border px-2 text-xs text-foreground hover:bg-surface-hover",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": true
+		}), "Steps"]
+	});
+}
+//#endregion
+//#region src/composites/step-inspector/step-inspector-panel.tsx
+/**
+* StepInspectorPanel — the detail pane of the step inspector: a pinned header
+* (the step, its gate, the accelerator tabs), ONE scrolling body, and a pinned
+* save bar. Nothing in it depends on the page's scroll position — the slide-over
+* it replaced was anchored to the matrix block and scrolled away with it.
+*/
+function SaveBar({ dirtyCount, saving, status, error, onSave, onDiscard }) {
+	const dirty = dirtyCount > 0;
+	const message = saving ? "Saving…" : dirty ? `${dirtyCount} unsaved change${dirtyCount === 1 ? "" : "s"}` : status === "saved" ? "Saved" : status === "error" ? error ?? "Save failed" : "No unsaved changes";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+		className: "flex shrink-0 items-center gap-2 border-t border-border bg-surface px-4 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:pb-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				role: "status",
+				className: cn("min-w-0 flex-1 truncate text-[11px]", status === "error" && !dirty ? "text-danger" : dirty ? "text-amber-500" : "text-foreground-subtle"),
+				children: message
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				variant: "outline",
+				size: "md",
+				disabled: !dirty || saving,
+				onClick: onDiscard,
+				children: "Discard"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				variant: "primary",
+				size: "md",
+				disabled: !dirty || saving,
+				onClick: onSave,
+				children: "Save"
+			})
+		]
+	});
+}
+var StepInspectorPanel = (0, react$1.forwardRef)(function StepInspectorPanel({ title, subtitle, headerActions, headerExtra, leading, saveBar, onEscape, children, className }, headingRef) {
+	const headingId = (0, react$1.useId)();
+	const onKeyDown = (e) => {
+		if (e.key !== "Escape" || onEscape === void 0) return;
+		e.stopPropagation();
+		onEscape();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		"aria-labelledby": headingId,
+		onKeyDown,
+		className: cn("flex min-h-0 flex-1 flex-col overflow-hidden bg-surface", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "shrink-0 space-y-2 border-b border-border px-4 py-2.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-start gap-x-3 gap-y-2",
+					children: [
+						leading,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-[9rem] flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								id: headingId,
+								ref: headingRef,
+								tabIndex: -1,
+								className: "truncate text-sm font-semibold text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",
+								children: title
+							}), subtitle !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "mt-0.5 text-[11px] text-foreground-subtle",
+								children: subtitle
+							})]
+						}),
+						headerActions
+					]
+				}), headerExtra]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-inspector-body": true,
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-3",
+				children
+			}),
+			saveBar !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, { ...saveBar })
+		]
+	});
+});
+//#endregion
+//#region src/composites/step-inspector/step-model-row.tsx
+var SOURCE_TONE = {
+	camera: "border-primary/40 bg-primary/10 text-primary",
+	node: "border-border bg-muted/40 text-foreground",
+	default: "border-border/60 text-foreground-subtle",
+	cluster: "border-primary/40 bg-primary/5 text-primary"
+};
+function StepModelRow({ label, format, modelId, source, sourceLabel, models, defaultModelId, expanded, onToggle, onChangeModel, onReset, resetLabel = "Reset", note, extra, changed = false, disabled = false }) {
+	const pickable = models.length > 0 && note === void 0;
+	const canExpand = pickable || extra !== void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("rounded-md border border-border", expanded && "bg-muted/10"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cn(LIST_ROW, "space-y-1"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-medium text-foreground",
+							children: label
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-foreground-subtle",
+							children: format
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: cn("ml-auto rounded border px-1.5 py-px text-[10px] font-medium", SOURCE_TONE[source]),
+							children: sourceLabel
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground",
+							children: [modelId ?? "—", changed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ml-1 text-amber-500",
+								children: "•"
+							})]
+						}),
+						onReset !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40",
+							disabled,
+							onClick: onReset,
+							children: resetLabel
+						}),
+						canExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: cn("inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40", "min-h-9 md:min-h-0"),
+							"aria-expanded": expanded,
+							"aria-label": `Change model for ${label}`,
+							disabled,
+							onClick: onToggle,
+							children: expanded ? "Done" : pickable ? "Change" : "Route"
+						})
+					]
+				})]
+			}),
+			note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-t border-border/60 px-3 py-1.5 text-[10px] leading-snug text-foreground-subtle",
+				children: note
+			}),
+			expanded && canExpand && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-3 border-t border-border/60 px-3 py-3",
+				children: [pickable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+					models,
+					value: modelId ?? "",
+					defaultModelId,
+					disabled,
+					onChange: onChangeModel
+				}), extra]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/step-inspector/step-model-list.tsx
+/**
+* StepModelList — the model section of the step inspector.
+*
+* While nothing is pinned, edited or worth a note, the accelerators are
+* summarised by model — one line per distinct model, naming the accelerators
+* that run it ("yolov9m-320-int8 · hub iGPU, hub NPU, little-unraid iGPU") —
+* with "Per accelerator" to open one `StepModelRow` each. Four near-identical
+* rows pushed the settings, the thing most edits are about, below the fold.
+* A pin, a pending change or a note (no build here, root-supplied) shows every
+* row, so nothing that differs from the default is ever folded away.
+*/
+/** True when the rows can be summarised: nothing pinned here, edited, or noted. */
+function modelRowsAreFoldable(rows) {
+	return rows.length >= 2 && rows.every((r) => r.note === void 0 && r.onReset === void 0 && r.changed !== true && !r.expanded);
+}
+function groupByModel(rows) {
+	const groups = [];
+	for (const row of rows) {
+		const modelId = row.modelId ?? "—";
+		const index = groups.findIndex((g) => g.modelId === modelId && g.sourceLabel === row.sourceLabel);
+		const existing = groups[index];
+		if (existing !== void 0) groups[index] = {
+			...existing,
+			labels: [...existing.labels, row.label]
+		};
+		else groups.push({
+			modelId,
+			labels: [row.label],
+			sourceLabel: row.sourceLabel
+		});
+	}
+	return groups;
+}
+function StepModelList({ rows }) {
+	const [open, setOpen] = (0, react$1.useState)(false);
+	if (!open && modelRowsAreFoldable(rows)) {
+		const groups = groupByModel(rows);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("rounded-md border border-border", LIST_ROW),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "space-y-1",
+				children: groups.map((g) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex flex-wrap items-baseline gap-x-2 text-xs",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono text-foreground",
+							children: g.modelId
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 text-[11px] text-foreground-subtle",
+							children: g.labels.length === rows.length ? `all ${rows.length} accelerators` : g.labels.join(", ")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rounded border border-border px-1.5 py-px text-[10px] font-medium text-foreground-subtle",
+							children: g.sourceLabel
+						})
+					]
+				}, `${g.modelId}|${g.sourceLabel}`))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-1.5 flex justify-end",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: cn(BTN_COMPACT, "min-h-9 md:min-h-0"),
+					"aria-expanded": false,
+					onClick: () => setOpen(true),
+					children: "Per accelerator"
+				})
+			})]
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("flex flex-col py-2", className),
-		children: tree.map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRow, {
-			node,
-			depth: 0,
-			selectedAddonId,
-			onSelect,
-			agentDots
-		}, node.addonId))
+		className: "space-y-2",
+		children: rows.map(({ id, ...row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepModelRow, { ...row }, id))
 	});
 }
+//#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
 * `inputClasses` ⇔ `outputClasses` compatibility. Mirrors the orchestrator
@@ -61033,6 +61162,7 @@ var SceneMonitorEditor = (0, react$1.lazy)(() => Promise.resolve().then(() => re
 /** Lazy-wrapped `PrivacyMaskSettings` — code-split off the main bundle. */
 var PrivacyMaskSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-BqjXsXZR.cjs")).then((m) => ({ default: m.PrivacyMaskSettings })));
 //#endregion
+exports.AcceleratorTabs = AcceleratorTabs;
 exports.AddonGlobalSettingsForm = AddonGlobalSettingsForm;
 exports.AdminLinkQuickAction = AdminLinkQuickAction;
 exports.AgentStepEditor = AgentStepEditor;
@@ -61050,6 +61180,7 @@ exports.BTN_COMPACT = BTN_COMPACT;
 exports.BTN_COMPACT_DANGER = BTN_COMPACT_DANGER;
 exports.BTN_COMPACT_PRIMARY = BTN_COMPACT_PRIMARY;
 exports.BTN_COMPACT_WARNING = BTN_COMPACT_WARNING;
+exports.BackToStepsButton = BackToStepsButton;
 exports.Badge = Badge;
 exports.BatteryBadge = BatteryBadge;
 exports.BottomSheet = BottomSheet;
@@ -61171,6 +61302,8 @@ exports.FormField = FormField$1;
 exports.GRID_GAP = GRID_GAP;
 exports.GRID_PAIRED = GRID_PAIRED;
 exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
+exports.GateBadge = GateBadge;
+exports.GateControl = GateControl;
 exports.Grid2x2 = Grid2x2;
 exports.GripTrack = GripTrack;
 exports.GroupedModelSelector = GroupedModelSelector;
@@ -61198,6 +61331,7 @@ exports.LIST_ROW = LIST_ROW;
 exports.Label = Label;
 exports.LawnMowerHeroCard = LawnMowerHeroCard;
 exports.LawnMowerInlineControl = LawnMowerInlineControl;
+exports.LayeredSettingsForm = LayeredSettingsForm;
 exports.LightHeroCard = LightHeroCard;
 exports.LightInlineControl = LightInlineControl;
 exports.LockHeroCard = LockHeroCard;
@@ -61245,7 +61379,6 @@ exports.PhaseIcon = PhaseIcon;
 exports.PipelineBuilder = PipelineBuilder;
 exports.PipelineRuntimeSelector = PipelineRuntimeSelector;
 exports.PipelineStep = PipelineStep;
-exports.PipelineTreeMatrix = PipelineTreeMatrix;
 exports.PlaceholderChipField = PlaceholderChipField;
 exports.PlayerOverlaysProvider = PlayerOverlaysProvider;
 exports.Popover = Popover;
@@ -61268,6 +61401,8 @@ exports.RecordingPanel = RecordingPanel;
 exports.ResponseLog = ResponseLog;
 exports.RoleDisplayDefaultsFromServer = RoleDisplayDefaultsFromServer;
 exports.RoleDisplayDefaultsProvider = RoleDisplayDefaultsProvider;
+exports.RootModelSourceControl = RootModelSourceControl;
+exports.RootSuppliedModelNote = RootSuppliedModelNote;
 exports.RotateCcw = RotateCcw;
 exports.RunReport = RunReport;
 exports.SCENE_CAPTURE_VARIANTS = SCENE_CAPTURE_VARIANTS;
@@ -61285,12 +61420,14 @@ 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;
 exports.ScriptInlineControl = ScriptInlineControl;
 exports.ScrollArea = ScrollArea;
 exports.SectionCard = SectionCard;
+exports.SegmentedChoice = SegmentedChoice;
 exports.Select = Select;
 exports.SelectedChip = SelectedChip;
 exports.SemanticBadge = SemanticBadge;
@@ -61302,7 +61439,6 @@ exports.SettingRow = SettingRow;
 exports.Sidebar = Sidebar;
 exports.SidebarItem = SidebarItem;
 exports.Skeleton = Skeleton;
-exports.SlideOverPanel = SlideOverPanel;
 exports.SlideToggle = SlideToggle;
 exports.SnapshotButton = SnapshotButton;
 exports.SortHeaderButton = SortHeaderButton;
@@ -61310,8 +61446,11 @@ exports.Square = Square;
 exports.StatCard = StatCard;
 exports.StateValuesStream = StateValuesStream;
 exports.StatusBadge = StatusBadge;
+exports.StepDetailDock = StepDetailDock;
+exports.StepInspectorPanel = StepInspectorPanel;
+exports.StepModelList = StepModelList;
+exports.StepModelRow = StepModelRow;
 exports.StepTimings = StepTimings;
-exports.StepTreeMaster = StepTreeMaster;
 exports.Stepper = Stepper;
 exports.StreamBrokerSelector = StreamBrokerSelector;
 exports.StreamDebugOverlay = StreamDebugOverlay;
@@ -61358,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;
@@ -61365,6 +61506,7 @@ exports.applyPickerFilters = applyPickerFilters;
 exports.ariaSortForColumn = ariaSortForColumn;
 exports.badgeFor = badgeFor;
 exports.badgeFor$1 = badgeFor;
+exports.bindsToModel = bindsToModel;
 exports.buildPeerConnectionConfig = buildPeerConnectionConfig;
 exports.buildStepTreeFromSchema = buildStepTreeFromSchema;
 exports.catalogHasDraft = catalogHasDraft;
@@ -61389,6 +61531,7 @@ exports.createTheme = require_theme_index.createTheme$1;
 exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
 exports.dataTableFacets = dataTableFacets;
+exports.defaultOfField = defaultOfField;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
 exports.deriveDeviceKind = deriveDeviceKind;
 exports.deriveWebrtcDebugStats = deriveWebrtcDebugStats;
@@ -61403,6 +61546,7 @@ exports.deviceTypeLabel = deviceTypeLabel;
 exports.deviceTypeMeta = deviceTypeMeta;
 exports.deviceTypeMetaOf = deviceTypeMetaOf;
 exports.devicesToOptions = devicesToOptions;
+exports.dockBox = dockBox;
 exports.draftFromQuery = draftFromQuery;
 exports.emptyDevicesWidens = emptyDevicesWidens;
 exports.emptySessionRun = emptySessionRun;
@@ -61420,6 +61564,7 @@ exports.fleetViewOf = fleetViewOf;
 exports.formatControlDateTime = formatControlDateTime;
 exports.formatLastSeen = formatLastSeen;
 exports.formatNumeric = formatNumeric;
+exports.formatSettingValue = formatSettingValue;
 exports.freezeVerdict = freezeVerdict;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getClassColor = getClassColor;
@@ -61443,6 +61588,7 @@ exports.isAbsentProvider$1 = isAbsentProvider;
 exports.isDataTableFilterActive = isDataTableFilterActive;
 exports.isFieldVisible = isFieldVisible;
 exports.isGroupExpanded = isGroupExpanded;
+exports.isValueField = isValueField;
 exports.lawnMowerActivityMeta = lawnMowerActivityMeta;
 exports.lightColors = require_theme_index.lightColors$1;
 exports.loadRemoteBundle = loadRemoteBundle;
@@ -61450,8 +61596,10 @@ exports.makeScrubBridge = makeScrubBridge;
 exports.metadataEntries = metadataEntries;
 exports.metadataString = metadataString;
 exports.mirror = mirror;
+exports.modelRowsAreFoldable = modelRowsAreFoldable;
 exports.mountAddonPage = mountAddonPage;
 exports.mountPath = mountPath;
+exports.nextGridPosition = nextGridPosition;
 exports.nextReconnectAction = nextReconnectAction;
 exports.nextSort = nextSort;
 exports.nextSortDirection = nextSortDirection;
@@ -61507,9 +61655,11 @@ exports.rootSourceState = rootSourceState;
 exports.routerBasename = routerBasename;
 exports.sameLocationSuggestions = sameLocationSuggestions;
 exports.scrubReducer = scrubReducer;
+exports.searchSteps = searchSteps;
 exports.selectPickerGroup = selectPickerGroup;
 exports.selectedDeviceOptions = selectedDeviceOptions;
 exports.serializeRecordedCommand = serializeRecordedCommand;
+exports.settingsModelIdFor = settingsModelIdFor;
 exports.shouldCommit = shouldCommit;
 exports.shouldEmit = shouldEmit;
 exports.shouldShowAddNewFooter = shouldShowAddNewFooter;
@@ -61521,7 +61671,9 @@ exports.sortRowsByColumn = sortRowsByColumn;
 exports.statusIcons = statusIcons;
 exports.statusLine = statusLine;
 exports.statusLine$1 = statusLine;
+exports.stepFieldDomId = stepFieldDomId;
 exports.stepHasModelForFormat = stepHasModelForFormat;
+exports.stepLocalFields = stepLocalFields;
 exports.stepModelOptions = stepModelOptions;
 exports.stripParentNamePrefix = stripParentNamePrefix;
 exports.summarizeHubCandidates = summarizeHubCandidates;
@@ -62267,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;
@@ -62291,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;
@@ -62332,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;
@@ -62342,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;
@@ -62361,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;
@@ -62737,4 +62881,5 @@ exports.waterHeaterTint = waterHeaterTint;
 exports.weatherConditionMeta = weatherConditionMeta;
 exports.weatherTint = weatherTint;
 exports.withResolvedParentDetail = withResolvedParentDetail;
+exports.withUseRootModel = withUseRootModel;
 exports.writeStoredGroupBy = writeStoredGroupBy;