@camstack/ui-library 1.2.243 → 1.2.245

package/dist/index.cjs

@@ -8048,6 +8048,8 @@ var usePipelineOrchestratorSetCameraStepToggle = trpc.pipelineOrchestrator.setCa
 var usePipelineOrchestratorGetCameraStepOverrides = trpc.pipelineOrchestrator.getCameraStepOverrides.useQuery;
 /** Generated alias around `trpc.pipelineOrchestrator.setCameraStepOverride.useMutation`. */
 var usePipelineOrchestratorSetCameraStepOverride = trpc.pipelineOrchestrator.setCameraStepOverride.useMutation;
+/** Generated alias around `trpc.pipelineOrchestrator.setCameraStepSettings.useMutation`. */
+var usePipelineOrchestratorSetCameraStepSettings = trpc.pipelineOrchestrator.setCameraStepSettings.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.setCameraPipelineForAgent.useMutation`. */
 var usePipelineOrchestratorSetCameraPipelineForAgent = trpc.pipelineOrchestrator.setCameraPipelineForAgent.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.resolvePipeline.useQuery`. */
@@ -28744,32 +28746,6 @@ 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
-		})]
-	});
-}
-//#endregion
 //#region src/composites/grouped-model-selector.tsx
 /**
 * GroupedModelSelector — the shared Family → Tier → Variant model picker.
@@ -29050,6 +29026,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",
@@ -29059,7 +29286,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;
@@ -29099,7 +29326,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",
@@ -29150,6 +29377,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.
@@ -29161,124 +29414,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 ?? [],
@@ -29345,7 +29551,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, {
@@ -29354,7 +29560,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", {
@@ -29365,7 +29572,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;
@@ -29415,7 +29622,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];
@@ -29501,204 +29709,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:
@@ -29719,233 +29970,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 inspector, which lays
+* the same parts out across accelerators and layers (D754/D756); the settings
+* form here is that inspector's `LayeredSettingsForm` with one layer.
+*/
+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", {
@@ -33860,117 +33935,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.
@@ -55563,16 +55527,16 @@ 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.
+* DeviceStepMatrix — the READ-ONLY "Compare" view of the step inspector
+* (D756): one hierarchical steps × accelerators matrix showing what every
+* accelerator runs for every step, side by side.
 *
-*   Column 1 (STICKY): the indented step tree. 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.
+*   Column 1 (STICKY): the indented step tree (slot + name + class-flow chips).
+*   Columns 2..N (one per accelerator): the model chip, "⚠ skip" when the step
+*     runs on the camera but the accelerator has no compatible model, or "—".
+*     A click selects that (step, accelerator) in the inspector — the matrix
+*     itself edits nothing (it used to host a slide-over editor that scrolled
+*     away with the page).
 *
 * Responsive, container-measured (never a global media query, so it also works
 * embedded):
@@ -55583,77 +55547,20 @@ function cellButtonClass(state, isSelected, extra) {
 *      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;
+/** The sticky step column. */
+var STEP_COL_REM = 18;
+var STEP_COL_PX = STEP_COL_REM * 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.
+* 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.
 */
 var STEP_COL_SINGLE_REM = 11;
-function activeChoice(gate) {
-	if (!gate.explicit) return "default";
-	return gate.effectiveOn ? "on" : "off";
-}
-/**
-* Tri-state segmented control. `Default` inherits the catalog value (shown in
-* the caption); `On`/`Off` pin an explicit per-camera override. Touch-friendly
-* 28px segments.
-*/
-function GateControl({ gate, busy, onSet }) {
-	const active = activeChoice(gate);
-	const seg = (choice, label, value, activeClass) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		"aria-pressed": active === choice,
-		disabled: busy,
-		onClick: () => onSet(value),
-		className: cn("flex-1 px-2 py-1 text-[11px] font-medium leading-none transition-colors", "min-h-[26px]", active === choice ? activeClass : "text-foreground-subtle hover:bg-muted/60", busy && "opacity-50 cursor-not-allowed"),
-		children: label
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "inline-flex w-fit max-w-full self-start overflow-hidden rounded-md border border-border",
-			children: [
-				seg("default", "Auto", null, "bg-primary/15 text-primary"),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-px self-stretch bg-border" }),
-				seg("on", "On", true, "bg-emerald-500 text-white"),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-px self-stretch bg-border" }),
-				seg("off", "Off", false, "bg-foreground-subtle/70 text-white")
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-[10px] leading-none text-foreground-subtle",
-			children: active === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				"= default (",
-				gate.defaultOn ? "on" : "off",
-				")"
-			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["overridden · default ", gate.defaultOn ? "on" : "off"] })
-		})]
-	});
-}
-function ZoneBadge() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "inline-flex w-fit items-center gap-1 rounded-md border border-violet-500/40 bg-violet-500/10 px-2 py-1 text-[11px] font-medium text-violet-400",
-			children: "Zones"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-[10px] leading-none text-foreground-subtle",
-			children: "driven by package zones"
-		})]
-	});
-}
-function StepGateCell({ node, depth, gate, busy, onSet, 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",
+function StepCell({ node, depth }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "sticky left-0 z-10 flex flex-col gap-2 border-b border-border bg-surface px-3 py-2 text-xs min-w-0",
 		style: { paddingLeft: `${12 + depth * 14}px` },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node }), hideGate ? null : gate.kind === "zone-driven" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoneBadge, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GateControl, {
-			gate,
-			busy,
-			onSet
-		})]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, { node })
 	});
 }
 /**
@@ -55692,18 +55599,18 @@ function NodeSelectorBar({ nodes, selected, onSelect }) {
 		]
 	});
 }
-function MatrixGrid$1({ tree, agents, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, single, hideGate }) {
+function MatrixGrid({ tree, agents, getCellState, onCellClick, selectedCell, single }) {
 	const rows = (0, react$1.useMemo)(() => flattenTree(tree), [tree]);
 	const groups = (0, react$1.useMemo)(() => groupAgentColumns(agents), [agents]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		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)` },
+			style: { gridTemplateColumns: `${single ? STEP_COL_SINGLE_REM : STEP_COL_REM}rem repeat(${agents.length}, 13rem)` },
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "sticky left-0 top-0 z-20 border-b border-border bg-muted/60 px-3 py-2 text-[10px] uppercase tracking-widest text-foreground-subtle",
-					children: hideGate ? "Step" : "Step · gate"
+					children: "Step"
 				}),
 				groups.map((group) => group.grouped ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupedAgentHeader, { group }, group.agentNodeId) : group.columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "sticky top-0 z-10 min-w-0 border-b border-l border-border bg-muted/60 px-3 py-2",
@@ -55719,26 +55626,18 @@ function MatrixGrid$1({ tree, agents, gateFor, getCellState, onCellClick, select
 					node,
 					depth,
 					agents,
-					gate: gateFor(node.addonId),
 					getCellState,
 					onCellClick,
-					selectedCell,
-					onSetGate,
-					gateBusy,
-					hideGate
+					selectedCell
 				}, node.addonId))
 			]
 		})
 	});
 }
-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, {
+function MatrixRow({ node, depth, agents, getCellState, onCellClick, selectedCell }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCell, {
 		node,
-		depth,
-		gate,
-		busy: gateBusy,
-		onSet: (next) => onSetGate(node.addonId, next),
-		hideGate
+		depth
 	}), agents.map((a) => {
 		const state = getCellState(node.addonId, a);
 		const isSelected = selectedCell !== null && selectedCell.addonId === node.addonId && agentColumnKey(selectedCell) === agentColumnKey(a);
@@ -55752,7 +55651,7 @@ function MatrixRow({ node, depth, agents, gate, getCellState, onCellClick, selec
 		}, agentColumnKey(a));
 	})] });
 }
-function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, selectedCell, onSetGate, gateBusy, fallbackNodeId, onFallbackNodeChange, hideGate }) {
+function DeviceStepMatrix({ tree, agents, getCellState, onCellClick, selectedCell, fallbackNodeId, onFallbackNodeChange }) {
 	const containerRef = (0, react$1.useRef)(null);
 	const [width, setWidth] = (0, react$1.useState)(0);
 	(0, react$1.useLayoutEffect)(() => {
@@ -55778,17 +55677,13 @@ 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, {
 			tree,
 			agents: shownAgents,
-			gateFor,
 			getCellState,
 			onCellClick,
 			selectedCell,
-			onSetGate,
-			gateBusy,
-			single: single && selectedNode !== null,
-			hideGate
+			single: single && selectedNode !== null
 		})]
 	});
 }
@@ -56818,17 +56713,7 @@ 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, templates, selectedTemplateId, onSelectTemplate, onSaveTemplate, onUpdateTemplate, onDeleteTemplate, readOnly = false, excludeAddons = [], hideTemplates = false, 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)([]);
@@ -56935,8 +56820,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: [
@@ -56965,8 +56849,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: [
@@ -56997,8 +56880,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,
@@ -57158,179 +57040,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: {
@@ -57774,89 +57483,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.
@@ -58042,51 +57668,725 @@ 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"
+	});
+}
+//#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-chips.tsx
+function chipText(state) {
+	switch (state.kind) {
+		case "enabled":
+			if (state.suppliedByRoot !== void 0) return "root";
+			return state.jumpTo !== void 0 ? `→ ${state.jumpTo}` : state.modelId;
+		case "skip": return state.jumpTo !== void 0 ? `→ ${state.jumpTo}` : "skip";
+		case "disabled": return "off";
+		case "na": return "—";
+	}
+}
+/** What a chip MEANS — the full model id, not its shortened text. */
+function chipKey(state) {
+	return state.kind === "enabled" ? `${state.modelId}|${chipText(state)}` : chipText(state);
+}
+function chipTone(state, selected) {
+	if (selected) return "border-primary/60 text-primary";
+	if (state.kind === "skip" && state.jumpTo === void 0) return "border-amber-500/40 text-amber-500";
+	if (state.kind === "na" || state.kind === "disabled") return "border-border/60 text-foreground-subtle/70";
+	return "border-border text-foreground-subtle";
+}
+function StepChips({ chips, selectedId }) {
+	const first = chips[0];
+	if (first !== void 0 && chips.length > 1 && chips.every((c) => chipKey(c.state) === chipKey(first.state) && !(c.state.kind === "enabled" && c.state.overridden === true) && chipTone(c.state, c.id === selectedId) === chipTone(first.state, first.id === selectedId)) && first !== void 0) {
+		const text = chipText(first.state);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex flex-wrap gap-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				title: `${text} on ${chips.map((c) => c.label).join(", ")}`,
+				className: cn("inline-flex max-w-[12rem] items-center gap-1 truncate rounded border px-1 font-mono text-[9px] leading-4", chipTone(first.state, first.id === selectedId)),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: text
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "shrink-0 font-sans text-foreground-subtle/80",
+					children: ["×", chips.length]
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "flex flex-wrap gap-1",
+		children: chips.map((chip) => {
+			const overridden = chip.state.kind === "enabled" && chip.state.overridden === true;
+			const text = chipText(chip.state);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				title: `${chip.label}: ${chip.state.kind === "enabled" ? chip.state.modelId : text}${overridden ? " (camera override)" : ""}`,
+				className: cn("inline-flex max-w-[9rem] items-center gap-0.5 truncate rounded border px-1 font-mono text-[9px] leading-4", chipTone(chip.state, chip.id === selectedId)),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: text
+				}), overridden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-amber-500",
+					"aria-hidden": true,
+					children: "•"
+				})]
+			}, chip.id);
+		})
+	});
+}
+//#endregion
+//#region src/composites/step-inspector/step-inspector-layout.tsx
+/**
+* StepInspectorLayout — the master–detail frame of the step inspector.
+*
+* Desktop: the step list and the inspector side by side, each scrolling on its
+* own, in a block whose height FILLS the page's scroll container below it. So
+* neither pane depends on the page scroll position: the inspector's header and
+* save bar are always on screen, and the selected step stays visible in the
+* list. (The slide-over this replaced was absolutely positioned inside the
+* matrix block — its title and its Save button scrolled away with the page.)
+* In a narrow container (the camera page beside its live view, a tablet) the
+* two panes stack: the list on top, a third of the height.
+*
+* Phone: the list flows with the page; the inspector opens as a full-screen
+* sheet with "‹ Steps" to go back.
+*/
+/** The tallest the inspector block can be without making its scroll container scroll. */
+function fillHeightPx(input) {
+	const room = input.scrollerHeight - input.paddingBottom - input.offsetInScroller;
+	return Math.max(input.minPx, Math.floor(room));
+}
+function scrollParentOf(el) {
+	for (let p = el.parentElement; p !== null; p = p.parentElement) {
+		const { overflowY } = getComputedStyle(p);
+		if (overflowY === "auto" || overflowY === "scroll") return p;
+	}
+	return null;
+}
+/** Height of the block so that it ends at the bottom of its scroll container. */
+function useFillHeight(enabled, minPx) {
+	const ref = (0, react$1.useRef)(null);
+	const [height, setHeight] = (0, react$1.useState)(null);
+	(0, react$1.useLayoutEffect)(() => {
+		const el = ref.current;
+		if (!enabled || el === null) return;
+		const scroller = scrollParentOf(el);
+		const measure = () => {
+			const box = scroller ?? document.documentElement;
+			const style = getComputedStyle(box);
+			const top = scroller ? scroller.getBoundingClientRect().top : 0;
+			const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
+			setHeight(fillHeightPx({
+				scrollerHeight: scroller ? scroller.clientHeight : window.innerHeight,
+				paddingBottom: Number.parseFloat(style.paddingBottom) || 0,
+				offsetInScroller: el.getBoundingClientRect().top - top + scrollTop,
+				minPx
+			}));
+		};
+		measure();
+		const RO = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		if (scroller) RO?.observe(scroller);
+		if (el.parentElement) RO?.observe(el.parentElement);
+		window.addEventListener("resize", measure);
+		return () => {
+			RO?.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [enabled, minPx]);
+	return {
+		ref,
+		height
+	};
 }
-function StepTreeMaster({ tree, selectedAddonId, onSelect, agentDots, className }) {
+function StepInspectorLayout({ list, detail, mobileDetailOpen, onMobileClose, minHeightPx = 420, className }) {
+	const isMobile = useIsMobile();
+	const { ref, height } = useFillHeight(!isMobile, minHeightPx);
+	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("space-y-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: SECTION_CARD,
+			children: list
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+			open: mobileDetailOpen,
+			onOpenChange: (open) => !open && onMobileClose(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
+				placement: "sheet-on-mobile",
+				scroll: "body",
+				className: "h-[100dvh] max-h-none w-full max-w-full rounded-none border-0 p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
+				children: mobileDetailOpen && detail
+			})
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		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))
+		ref,
+		className: cn("@container/inspector", className),
+		style: height !== null ? { height } : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("grid h-full min-h-0 gap-3", "grid-cols-1 grid-rows-[minmax(9rem,32%)_minmax(0,1fr)]", "@xl/inspector:grid-cols-[minmax(14rem,19rem)_minmax(0,1fr)] @xl/inspector:grid-rows-1"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn(SECTION_CARD, "flex min-h-0 flex-col"),
+				children: list
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn(SECTION_CARD, "flex min-h-0 flex-col"),
+				children: detail
+			})]
+		})
+	});
+}
+/** "‹ Steps" — the phone sheet's way back to the list. */
+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-list.tsx
+/**
+* StepList — the master pane of the step inspector: every detection step of the
+* tree, one compact row each, as ONE tab stop.
+*
+* Keyboard (a listbox with a roving tabindex): ↑/↓/Home/End move the selection,
+* Enter or → hands focus to the inspector, `/` jumps to the search box. The
+* search matches a step's name or any of its field labels, so a question about
+* a knob ("face size", "person") finds the step that owns it; Enter in the box
+* selects the first hit and says which field it matched.
+*/
+function matches(text, tokens) {
+	const lower = text.toLowerCase();
+	return tokens.every((t) => lower.includes(t));
+}
+/** Rows matching `query` (all tokens in the name, or all in one field label). */
+function searchSteps(rows, query) {
+	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	if (tokens.length === 0) return rows.map((row) => ({ row }));
+	const hits = [];
+	for (const row of rows) {
+		if (matches(row.name, tokens)) {
+			hits.push({ row });
+			continue;
+		}
+		const field = row.fieldLabels.find((l) => matches(l, tokens));
+		if (field !== void 0) hits.push({
+			row,
+			matchedField: field
+		});
+	}
+	return hits;
+}
+var StepList = (0, react$1.forwardRef)(function StepList({ rows, selectedId, onSelect, onActivate, onPick, label, className }, ref) {
+	const [query, setQuery] = (0, react$1.useState)("");
+	const listRef = (0, react$1.useRef)(null);
+	const searchRef = (0, react$1.useRef)(null);
+	const hits = (0, react$1.useMemo)(() => searchSteps(rows, query), [rows, query]);
+	const tabStopId = hits.some((h) => h.row.addonId === selectedId) ? selectedId : hits[0]?.row.addonId ?? null;
+	const pendingFocus = (0, react$1.useRef)(null);
+	const tryFocus = (addonId) => {
+		const el = listRef.current?.querySelector(`[data-step-id="${addonId}"]`);
+		if (!el) return false;
+		el.focus();
+		return true;
+	};
+	const focusRow = (addonId) => {
+		if (addonId === null) return;
+		pendingFocus.current = tryFocus(addonId) ? null : addonId;
+	};
+	(0, react$1.useLayoutEffect)(() => {
+		if (pendingFocus.current !== null && tryFocus(pendingFocus.current)) pendingFocus.current = null;
+	});
+	(0, react$1.useImperativeHandle)(ref, () => ({ focusSelected: () => focusRow(selectedId) }), [selectedId]);
+	const move = (index) => {
+		const target = hits[Math.max(0, Math.min(hits.length - 1, index))];
+		if (target === void 0) return;
+		onSelect(target.row.addonId, target.matchedField);
+		focusRow(target.row.addonId);
+	};
+	const onRowKeyDown = (e, index, hit) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				move(index + 1);
+				return;
+			case "ArrowUp":
+				e.preventDefault();
+				move(index - 1);
+				return;
+			case "Home":
+				e.preventDefault();
+				move(0);
+				return;
+			case "End":
+				e.preventDefault();
+				move(hits.length - 1);
+				return;
+			case "Enter":
+			case "ArrowRight":
+				e.preventDefault();
+				onActivate(hit.row.addonId);
+				return;
+			case "/":
+				e.preventDefault();
+				searchRef.current?.focus();
+				return;
+			default:
+		}
+	};
+	const onSearchKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			const first = hits[0];
+			if (first !== void 0) {
+				onSelect(first.row.addonId, first.matchedField);
+				onPick?.(first.row.addonId);
+				focusRow(first.row.addonId);
+			}
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			setQuery("");
+			focusRow(selectedId);
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			focusRow(tabStopId);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex min-h-0 flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative shrink-0 border-b border-border p-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
+				className: "pointer-events-none absolute left-3.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-foreground-subtle",
+				"aria-hidden": true
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: searchRef,
+				type: "search",
+				value: query,
+				onChange: (e) => setQuery(e.target.value),
+				onKeyDown: onSearchKeyDown,
+				placeholder: "Find a step or setting  /",
+				"aria-label": "Find a step or setting",
+				className: "h-9 w-full rounded-md border border-border bg-background pl-8 pr-2 text-xs text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 md:h-8"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+			ref: listRef,
+			role: "listbox",
+			"aria-label": label,
+			className: "min-h-0 flex-1 overflow-y-auto py-1",
+			children: [hits.map((hit, index) => {
+				const { row } = hit;
+				const selected = row.addonId === selectedId;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					role: "option",
+					"aria-selected": selected,
+					tabIndex: row.addonId === tabStopId ? 0 : -1,
+					"data-step-id": row.addonId,
+					onClick: () => {
+						onSelect(row.addonId, hit.matchedField);
+						onPick?.(row.addonId);
+					},
+					onKeyDown: (e) => onRowKeyDown(e, index, hit),
+					className: cn("cursor-pointer border-l-2 py-1 pl-2.5 pr-3 outline-none transition-colors", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", selected ? "border-primary bg-primary/10" : "border-transparent hover:bg-muted/40"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 items-baseline gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "w-[4.5rem] shrink-0 truncate",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: row.slot })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: cn("min-w-0 flex-1 truncate text-xs font-medium", selected ? "text-foreground" : "text-foreground/90"),
+									style: { paddingLeft: `${row.depth * 12}px` },
+									children: [row.depth > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "mr-1 text-foreground-subtle/60",
+										"aria-hidden": true,
+										children: "└"
+									}), row.name]
+								}),
+								row.status
+							]
+						}),
+						hit.matchedField !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-0.5 truncate pl-[5rem] text-[10px] text-primary",
+							children: ["↳ ", hit.matchedField]
+						}),
+						row.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mt-0.5 pl-[5rem]",
+							children: row.detail
+						})
+					]
+				}, row.addonId);
+			}), hits.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "px-3 py-4 text-center text-[11px] text-foreground-subtle",
+				children: [
+					"No step matches “",
+					query,
+					"”."
+				]
+			})]
+		})]
+	});
+});
+//#endregion
+//#region src/composites/step-inspector/step-model-row.tsx
+var SOURCE_TONE = {
+	camera: "border-primary/40 bg-primary/10 text-primary",
+	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: "space-y-2",
+		children: rows.map(({ id, ...row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepModelRow, { ...row }, id))
+	});
+}
+//#endregion
+//#region src/composites/step-tree.ts
 /**
 * Helper: build a StepTreeNode[] from a `PipelineSchema` by chaining on
 * `inputClasses` ⇔ `outputClasses` compatibility. Mirrors the orchestrator
@@ -61031,6 +61331,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;
@@ -61048,6 +61349,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;
@@ -61169,6 +61471,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;
@@ -61196,6 +61500,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;
@@ -61243,7 +61548,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;
@@ -61266,6 +61570,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;
@@ -61289,6 +61595,7 @@ exports.ScriptHeroCard = ScriptHeroCard;
 exports.ScriptInlineControl = ScriptInlineControl;
 exports.ScrollArea = ScrollArea;
 exports.SectionCard = SectionCard;
+exports.SegmentedChoice = SegmentedChoice;
 exports.Select = Select;
 exports.SelectedChip = SelectedChip;
 exports.SemanticBadge = SemanticBadge;
@@ -61300,7 +61607,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;
@@ -61308,8 +61614,13 @@ exports.Square = Square;
 exports.StatCard = StatCard;
 exports.StateValuesStream = StateValuesStream;
 exports.StatusBadge = StatusBadge;
+exports.StepChips = StepChips;
+exports.StepInspectorLayout = StepInspectorLayout;
+exports.StepInspectorPanel = StepInspectorPanel;
+exports.StepList = StepList;
+exports.StepModelList = StepModelList;
+exports.StepModelRow = StepModelRow;
 exports.StepTimings = StepTimings;
-exports.StepTreeMaster = StepTreeMaster;
 exports.Stepper = Stepper;
 exports.StreamBrokerSelector = StreamBrokerSelector;
 exports.StreamDebugOverlay = StreamDebugOverlay;
@@ -61363,6 +61674,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;
@@ -61387,6 +61699,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;
@@ -61406,6 +61719,7 @@ exports.emptyDevicesWidens = emptyDevicesWidens;
 exports.emptySessionRun = emptySessionRun;
 exports.ensureMfHostInit = ensureMfHostInit;
 exports.eventKindLabel = eventKindLabel;
+exports.fillHeightPx = fillHeightPx;
 exports.filterDataTableRows = filterDataTableRows;
 exports.filterDeviceOptions = filterDeviceOptions;
 exports.filterOptionSelectOptions = filterOptions;
@@ -61418,6 +61732,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;
@@ -61441,6 +61756,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;
@@ -61448,6 +61764,7 @@ exports.makeScrubBridge = makeScrubBridge;
 exports.metadataEntries = metadataEntries;
 exports.metadataString = metadataString;
 exports.mirror = mirror;
+exports.modelRowsAreFoldable = modelRowsAreFoldable;
 exports.mountAddonPage = mountAddonPage;
 exports.mountPath = mountPath;
 exports.nextReconnectAction = nextReconnectAction;
@@ -61505,9 +61822,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;
@@ -61519,7 +61838,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;
@@ -62349,6 +62670,7 @@ exports.usePipelineOrchestratorSetAgentReachableHost = usePipelineOrchestratorSe
 exports.usePipelineOrchestratorSetCameraPipelineForAgent = usePipelineOrchestratorSetCameraPipelineForAgent;
 exports.usePipelineOrchestratorSetCameraSensors = usePipelineOrchestratorSetCameraSensors;
 exports.usePipelineOrchestratorSetCameraStepOverride = usePipelineOrchestratorSetCameraStepOverride;
+exports.usePipelineOrchestratorSetCameraStepSettings = usePipelineOrchestratorSetCameraStepSettings;
 exports.usePipelineOrchestratorSetCameraStepToggle = usePipelineOrchestratorSetCameraStepToggle;
 exports.usePipelineOrchestratorSetCameraSwitch = usePipelineOrchestratorSetCameraSwitch;
 exports.usePipelineOrchestratorSetCapabilityBinding = usePipelineOrchestratorSetCapabilityBinding;
@@ -62734,4 +63056,5 @@ exports.waterHeaterTint = waterHeaterTint;
 exports.weatherConditionMeta = weatherConditionMeta;
 exports.weatherTint = weatherTint;
 exports.withResolvedParentDetail = withResolvedParentDetail;
+exports.withUseRootModel = withUseRootModel;
 exports.writeStoredGroupBy = writeStoredGroupBy;