@camstack/ui-library 1.1.27 → 1.1.28

package/dist/index.cjs

@@ -3748,37 +3748,41 @@ function mirror(input) {
 			});
 			continue;
 		}
-		const srcModel = findModel(targetAddon, srcCfg.modelId);
-		const canUseSource = srcModel !== null && Boolean(srcModel.formats[target.engine.format]);
 		let chosenModelId;
 		let outcome;
-		if (canUseSource) {
-			chosenModelId = srcCfg.modelId;
+		if (srcCfg.modelId === void 0) {
+			chosenModelId = void 0;
 			outcome = "exact";
 		} else {
-			const fallback = firstModelFor(targetAddon, target.engine.format);
-			if (!fallback) {
-				out.push({
-					addonId,
-					outcome: "skip",
-					modelId: null,
-					reason: "no compatible model for target format",
-					patch: null
-				});
-				continue;
+			const srcModel = findModel(targetAddon, srcCfg.modelId);
+			if (srcModel !== null && Boolean(srcModel.formats[target.engine.format])) {
+				chosenModelId = srcCfg.modelId;
+				outcome = "exact";
+			} else {
+				const fallback = firstModelFor(targetAddon, target.engine.format);
+				if (!fallback) {
+					out.push({
+						addonId,
+						outcome: "skip",
+						modelId: null,
+						reason: "no compatible model for target format",
+						patch: null
+					});
+					continue;
+				}
+				chosenModelId = fallback.id;
+				outcome = "mapped";
 			}
-			chosenModelId = fallback.id;
-			outcome = "mapped";
 		}
 		const patch = {
 			enabled: srcCfg.enabled,
-			modelId: chosenModelId,
+			...chosenModelId ? { modelId: chosenModelId } : {},
 			settings: dropModelSpecific(srcCfg.settings, targetAddon)
 		};
 		out.push({
 			addonId,
 			outcome,
-			modelId: chosenModelId,
+			modelId: chosenModelId ?? null,
 			patch
 		});
 	}
@@ -13268,10 +13272,11 @@ function modelsForStep(schema) {
 		name: m.name
 	}));
 }
-function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth = 0, onChange, onDelete: _onDelete, readOnly = false, toggleMode = "simple", overrideState = null, onOverrideChange, inheritedEnabled, hideModelAndSettings = false }) {
+function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth = 0, onChange, onDelete: _onDelete, readOnly = false, toggleMode = "simple", overrideState = null, onOverrideChange, inheritedEnabled, hideModelAndSettings = false, allowAutoModel = false }) {
 	const [expanded, setExpanded] = (0, react$1.useState)(false);
 	const models = modelsForStep(schema);
-	if (models.length > 0 && !models.some((m) => m.id === step.modelId) && !readOnly) {
+	const isAutoSentinel = allowAutoModel && step.modelId === "";
+	if (models.length > 0 && !isAutoSentinel && !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,
@@ -13356,59 +13361,28 @@ function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth = 0
 			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", {
 			className: "space-y-3",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSelect, {
-					label: "Model",
-					value: step.modelId,
-					disabled: readOnly,
-					options: models.map((m) => ({
-						value: m.id,
-						label: m.name
-					})),
-					onChange: (v) => onChange({
-						...step,
-						modelId: v
-					})
-				}),
-				step.slot === "audio-classifier" && step.engine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSelect, {
-					label: "Runtime",
-					value: `${step.engine.runtime}/${step.engine.backend}`,
-					disabled: readOnly,
-					options: [
-						{
-							value: "node/cpu",
-							label: "Node.js — ONNX CPU"
-						},
-						{
-							value: "node/coreml",
-							label: "Node.js — Apple SoundAnalysis (macOS)"
-						},
-						{
-							value: "python/cpu",
-							label: "Python — ONNX CPU"
-						}
-					],
-					onChange: (v) => {
-						const [runtime, backend] = v.split("/");
-						const format = backend === "coreml" ? "coreml" : "onnx";
-						onChange({
-							...step,
-							engine: {
-								runtime,
-								backend,
-								format
-							}
-						});
-					}
-				}),
-				schema?.configSchema?.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
-					field,
-					allFields: schema.configSchema ?? [],
-					step,
-					disabled: readOnly,
-					onChange
-				}, field.key))
-			]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSelect, {
+				label: "Model",
+				value: step.modelId,
+				disabled: readOnly,
+				options: [...allowAutoModel ? [{
+					value: "",
+					label: "Auto (node default)"
+				}] : [], ...models.map((m) => ({
+					value: m.id,
+					label: m.name
+				}))],
+				onChange: (v) => onChange({
+					...step,
+					modelId: v
+				})
+			}), schema?.configSchema?.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSchemaField, {
+				field,
+				allFields: schema.configSchema ?? [],
+				step,
+				disabled: readOnly,
+				onChange
+			}, field.key))]
 		})
 	});
 }
@@ -13607,7 +13581,181 @@ function ThreeStateButton({ label, active, variant, subtext, onClick }) {
 	});
 }
 //#endregion
+//#region src/composites/grouped-model-selector.tsx
+/**
+* GroupedModelSelector — the shared Family → Tier → Variant model picker.
+*
+* The catalog is a FLAT list of models (ids like `yolo26s`, `yolo26s-int8`);
+* this folds it into a `family → tier → variant` tree (see
+* `buildModelVariantGroups` in `@camstack/types`) so the operator picks
+* "YOLO26 → Small → Int8" instead of scanning a flat dropdown of every
+* size×quantization. The selected value stays the flat model id.
+*
+* Parameterised on the minimal `ModelVariantSource` shape so BOTH the config-UI
+* catalog (`ModelCatalogEntry`) and the pipeline/device steppers
+* (`PipelineModelOption`) drive the same component. Legacy / ungrouped models
+* never appear here (the grouping helpers skip them).
+*/
+function Chip({ active, onClick, disabled, children, title }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		disabled,
+		title,
+		className: cn("rounded-full px-3 py-1 text-[11px] font-medium border transition-colors", active ? "border-primary bg-primary/10 text-primary" : "border-border bg-background text-foreground-subtle hover:text-foreground hover:border-foreground-subtle/40", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+		children
+	});
+}
+function GroupedModelSelector({ catalog, value, onChange, disabled }) {
+	const families = (0, _camstack_types.buildModelVariantGroups)(catalog);
+	const current = (0, _camstack_types.describeModelVariant)(catalog, value);
+	const activeFamily = families.find((f) => f.family === current?.family)?.family ?? families[0]?.family ?? "";
+	const family = families.find((f) => f.family === activeFamily) ?? families[0];
+	if (!family) return null;
+	const activeTier = family.tiers.find((t) => t.tier === current?.tier)?.tier ?? family.tiers[0]?.tier ?? "";
+	const tier = family.tiers.find((t) => t.tier === activeTier) ?? family.tiers[0];
+	if (!tier) return null;
+	const selectTier = (tierId) => {
+		const t = family.tiers.find((x) => x.tier === tierId);
+		if (!t) return;
+		const want = {
+			precision: current?.precision,
+			optimization: current?.optimization
+		};
+		onChange((t.options.find((o) => o.precision === (want.precision ?? "fp32") && o.optimization === (want.optimization ?? "standard")) ?? t.options[0]).modelId);
+	};
+	const selectVariant = (opt) => {
+		const id = (0, _camstack_types.resolveVariantModelId)(catalog, {
+			family: family.family,
+			tier: tier.tier,
+			precision: opt.precision,
+			optimization: opt.optimization
+		});
+		if (id) onChange(id);
+	};
+	const selectedOption = tier.options.find((o) => o.modelId === value) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [
+			families.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] uppercase tracking-wide text-foreground-subtle mb-1.5",
+				children: "Family"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: families.map((f) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+					active: f.family === family.family,
+					disabled,
+					onClick: () => onChange(f.tiers[0]?.baseModelId ?? ""),
+					children: f.label
+				}, f.family))
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "text-[10px] uppercase tracking-wide text-foreground-subtle mb-1.5",
+				children: [family.label, " — size"]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid grid-cols-2 gap-1.5 sm:grid-cols-4",
+				children: family.tiers.map((t) => {
+					const active = t.tier === tier.tier;
+					const base = t.options.find((o) => o.modelId === t.baseModelId) ?? t.options[0];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						disabled,
+						onClick: () => selectTier(t.tier),
+						className: cn("rounded-lg border px-2 py-2 text-left transition-all", active ? "border-primary bg-primary/5 ring-1 ring-primary/30" : "border-border bg-background hover:border-foreground-subtle/40", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs font-semibold text-foreground",
+								children: t.label
+							}), active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-3 w-3 text-primary" })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "text-[10px] text-foreground-subtle",
+							children: [
+								"~",
+								base?.sizeMB ?? 0,
+								" MB"
+							]
+						})]
+					}, t.tier);
+				})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] uppercase tracking-wide text-foreground-subtle mb-1.5",
+				children: "Variant"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: tier.options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
+					active: opt.modelId === value,
+					disabled,
+					title: `${opt.formats.join(", ")} · ~${opt.sizeMB} MB`,
+					onClick: () => selectVariant(opt),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "inline-flex items-center gap-1",
+						children: [opt.optimization === "fast" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Zap, { className: "h-3 w-3" }), opt.label]
+					})
+				}, opt.modelId))
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 text-[10px] text-foreground-subtle pt-0.5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cpu, { className: "h-3 w-3" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "font-mono",
+						children: value || "—"
+					}),
+					selectedOption && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						"· ",
+						selectedOption.formats.join(", "),
+						" · ~",
+						selectedOption.sizeMB,
+						" MB"
+					] })
+				]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/composites/agent-step-editor.tsx
+/**
+* Shared model picker for the step editor — renders the grouped
+* Family→Tier→Variant selector when the step's models declare variant groups
+* (yolo26 …), else a flat `<select>` (face / plate / classifier catalogs and
+* custom models). Same component both the agent-default and per-device-override
+* modes use, so the picker looks identical across the pipeline stepper, the
+* device stepper and the cluster matrix.
+*/
+function ModelPicker({ models, value, onChange, disabled }) {
+	const hasGroups = (0, react$1.useMemo)(() => (0, _camstack_types.buildModelVariantGroups)(models).length > 0, [models]);
+	const ungrouped = (0, react$1.useMemo)(() => models.filter((m) => m.group === void 0), [models]);
+	const flatSelect = (opts, selectPlaceholder) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+		disabled,
+		className: "w-full bg-surface border border-border rounded px-2 py-1 text-xs disabled:opacity-50",
+		value: opts.some((m) => m.id === value) ? value : "",
+		onChange: (e) => onChange(e.target.value),
+		children: [selectPlaceholder !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			value: "",
+			disabled: true,
+			children: selectPlaceholder
+		}), opts.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			value: m.id,
+			children: m.name
+		}, m.id))]
+	});
+	if (!hasGroups) return flatSelect(models);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupedModelSelector, {
+			catalog: models,
+			value,
+			onChange,
+			disabled
+		}), ungrouped.length > 0 && /* @__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: "Other models"
+		}), flatSelect(ungrouped, "— custom / ungrouped model —")] })]
+	});
+}
 function buildDisplayStep(addon, cfg) {
 	return {
 		addonId: addon.id,
@@ -13616,7 +13764,7 @@ function buildDisplayStep(addon, cfg) {
 		inputClasses: [...addon.inputClasses],
 		outputClasses: [...addon.outputClasses],
 		enabled: cfg.enabled,
-		modelId: cfg.modelId,
+		modelId: cfg.modelId ?? addon.defaultModelId,
 		children: [],
 		settings: { ...cfg.settings }
 	};
@@ -13654,14 +13802,10 @@ function AgentModeEditor({ addon, agentDefault, modelsForFormat, onChangeAgentCo
 			/* @__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)("select", {
-				className: "w-full bg-surface border border-border rounded px-2 py-1 text-xs",
-				value: agentDefault.modelId,
-				onChange: (e) => update({ modelId: e.target.value }),
-				children: modelsForFormat.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-					value: m.id,
-					children: m.name
-				}, m.id))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+				models: modelsForFormat,
+				value: agentDefault.modelId ?? "",
+				onChange: (modelId) => update({ modelId })
 			})] }),
 			(addon.configSchema?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "pt-2 border-t border-border/50 space-y-3",
@@ -13752,15 +13896,11 @@ function DeviceModeEditor({ addon, agentDefault, agentNodeId, currentPatch, mode
 						children: "Override"
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelPicker, {
+					models: modelsForFormat,
 					disabled: !modelOverridden,
-					className: "w-full bg-surface border border-border rounded px-2 py-1 text-xs disabled:opacity-50",
-					value: modelOverridden ? currentPatch?.modelId ?? agentDefault.modelId : agentDefault.modelId,
-					onChange: (e) => setModel(e.target.value),
-					children: modelsForFormat.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: m.id,
-						children: m.name
-					}, m.id))
+					value: (modelOverridden ? currentPatch?.modelId ?? agentDefault.modelId : agentDefault.modelId) ?? "",
+					onChange: (modelId) => setModel(modelId)
 				}),
 				!modelOverridden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "text-[10px] text-foreground-subtle mt-1",
@@ -13940,17 +14080,33 @@ function QuickToggle({ enabled, onChange, disabled }) {
 function renderCellContent(state) {
 	if (state.kind === "enabled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex min-w-0 items-center gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "font-mono text-foreground truncate",
-			children: state.modelId
-		})]
+		title: state.overridden ? "override" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 rounded-full shrink-0", state.overridden ? "bg-amber-500" : "bg-emerald-500") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-mono text-foreground truncate",
+				children: state.modelId
+			}),
+			state.overridden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "ml-auto shrink-0 text-[8px] font-semibold uppercase text-amber-500",
+				children: "ovr"
+			})
+		]
 	});
 	if (state.kind === "disabled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex min-w-0 items-center gap-1 text-foreground-subtle",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full border border-foreground-subtle/60 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate",
-			children: "off"
-		})]
+		title: state.overridden ? "override" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 rounded-full shrink-0", state.overridden ? "bg-amber-500" : "border border-foreground-subtle/60") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate",
+				children: "off"
+			}),
+			state.overridden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "ml-auto shrink-0 text-[8px] font-semibold uppercase text-amber-500",
+				children: "ovr"
+			})
+		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex min-w-0 items-center gap-1 text-foreground-subtle/70",
@@ -15597,6 +15753,22 @@ function usePTZ(trpc, deviceId, hookOptions) {
 			refreshPresets,
 			wrap
 		]),
+		updatePreset: (0, react$1.useCallback)(async (presetId) => {
+			if (!ptz) return;
+			await wrap(async () => {
+				const existing = presets.find((p) => p.id === presetId);
+				await ptz.savePreset({
+					presetId,
+					name: existing?.name ?? ""
+				});
+				await refreshPresets();
+			});
+		}, [
+			ptz,
+			presets,
+			refreshPresets,
+			wrap
+		]),
 		deletePreset: (0, react$1.useCallback)(async (presetId) => {
 			if (!ptz) return;
 			await wrap(async () => {
@@ -15691,10 +15863,13 @@ function DPadButton({ direction, icon: Icon, disabled, className, variant, onMov
 	});
 }
 function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true, showHome = true, className }) {
-	const { move, startContinuous, stopContinuous, zoom, goHome, goToPreset, savePreset, deletePreset, presets, options, busy, error } = controls;
+	const { move, startContinuous, stopContinuous, zoom, goHome, goToPreset, savePreset, updatePreset, deletePreset, presets, options, busy, error } = controls;
 	const confirm = useConfirm();
 	const [presetsOpen, setPresetsOpen] = (0, react$1.useState)(false);
 	const [presetName, setPresetName] = (0, react$1.useState)("");
+	const presetTriggerRef = (0, react$1.useRef)(null);
+	const presetMenuRef = (0, react$1.useRef)(null);
+	const [menuPos, setMenuPos] = (0, react$1.useState)(null);
 	const isPanel = mode === "panel";
 	const zoomVisible = showZoom && (options?.hasZoom ?? true);
 	const supportsPresets = options?.supportsPresets ?? presets.length > 0;
@@ -15720,6 +15895,51 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 		})) return;
 		await deletePreset(presetId);
 	}, [confirm, deletePreset]);
+	const handleUpdatePreset = (0, react$1.useCallback)(async (presetId, label) => {
+		if (!await confirm({
+			title: "Update preset",
+			message: `Overwrite preset "${label}" with the camera's current position?`,
+			confirmLabel: "Update"
+		})) return;
+		await updatePreset(presetId);
+	}, [confirm, updatePreset]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!presetsOpen) {
+			setMenuPos(null);
+			return;
+		}
+		const reposition = () => {
+			const rect = presetTriggerRef.current?.getBoundingClientRect();
+			if (rect) setMenuPos({
+				top: rect.bottom + 4,
+				right: window.innerWidth - rect.right
+			});
+		};
+		reposition();
+		window.addEventListener("resize", reposition);
+		window.addEventListener("scroll", reposition, true);
+		return () => {
+			window.removeEventListener("resize", reposition);
+			window.removeEventListener("scroll", reposition, true);
+		};
+	}, [presetsOpen]);
+	(0, react$1.useEffect)(() => {
+		if (!presetsOpen) return;
+		const onPointerDown = (e) => {
+			const target = e.target;
+			if (presetMenuRef.current?.contains(target) || presetTriggerRef.current?.contains(target)) return;
+			setPresetsOpen(false);
+		};
+		const onKey = (e) => {
+			if (e.key === "Escape") setPresetsOpen(false);
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, [presetsOpen]);
 	const containerClass = isPanel ? "flex flex-col items-stretch gap-2 w-full h-full p-3" : "pointer-events-auto absolute top-3 right-3 z-10 flex flex-col items-end gap-2";
 	const rowClass = isPanel ? cn("flex items-center gap-3 rounded-lg p-2", busy && "ring-1 ring-primary/40") : cn("flex items-center gap-2 rounded-lg border border-white/30 bg-zinc-900/90 backdrop-blur-md p-2 shadow-lg shadow-black/40", busy && "ring-1 ring-primary/40");
 	const sideButtonSize = isPanel ? "h-9 w-9" : "h-7 w-7";
@@ -15820,14 +16040,22 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 				presetsVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						ref: presetTriggerRef,
 						type: "button",
 						onClick: () => setPresetsOpen((v) => !v),
 						disabled: busy,
 						className: cn("flex items-center gap-1 rounded px-2 text-[10px] disabled:opacity-40", isPanel ? "h-9 text-foreground hover:bg-surface-hover" : "h-7 text-white hover:bg-white/15"),
 						title: "Presets",
 						children: ["Presets", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: cn("h-3 w-3 transition-transform", presetsOpen && "rotate-180") })]
-					}), presetsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: cn("absolute right-0 top-full mt-1 rounded-lg shadow-xl py-1 z-20", presetManagementVisible ? "min-w-[220px]" : "min-w-[140px]", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
+					}), presetsOpen && menuPos && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: presetMenuRef,
+						style: {
+							position: "fixed",
+							top: menuPos.top,
+							right: menuPos.right,
+							zIndex: 60
+						},
+						className: cn("rounded-lg shadow-xl py-1", presetManagementVisible ? "min-w-[220px]" : "min-w-[140px]", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
 						children: [
 							presets.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: cn("px-3 py-1.5 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
@@ -15844,14 +16072,21 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 									disabled: busy,
 									className: cn("flex-1 px-3 py-1.5 text-left text-[10px] disabled:opacity-40", isPanel ? "text-foreground" : "text-white"),
 									children: p.name || p.id
-								}), presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								}), presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => void handleUpdatePreset(p.id, p.name || p.id),
+									disabled: busy,
+									title: `Overwrite "${p.name || p.id}" with current position`,
+									className: cn("flex h-5 w-5 shrink-0 items-center justify-center rounded", "text-foreground-subtle hover:bg-primary/15 hover:text-primary disabled:opacity-40"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Crosshair, { className: "h-3 w-3" })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									onClick: () => void handleDeletePreset(p.id, p.name || p.id),
 									disabled: busy,
 									title: `Delete preset ${p.name || p.id}`,
 									className: cn("mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded", "text-foreground-subtle hover:bg-danger/15 hover:text-danger disabled:opacity-40"),
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3 w-3" })
-								})]
+								})] })]
 							}, p.id)),
 							presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 								presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: cn("my-1 h-px", isPanel ? "bg-border" : "bg-white/15") }),
@@ -15887,7 +16122,7 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 								})
 							] })
 						]
-					})]
+					}), document.body)]
 				})
 			]
 		})]
@@ -17712,6 +17947,8 @@ var usePipelineExecutorGetGlobalSteps = trpc.pipelineExecutor.getGlobalSteps.use
 var usePipelineExecutorGetGlobalPipelineConfig = trpc.pipelineExecutor.getGlobalPipelineConfig.useQuery;
 /** Generated alias around `trpc.pipelineExecutor.getOrchestratorConfigSchema.useQuery`. */
 var usePipelineExecutorGetOrchestratorConfigSchema = trpc.pipelineExecutor.getOrchestratorConfigSchema.useQuery;
+/** Generated alias around `trpc.pipelineExecutor.validatePipeline.useQuery`. */
+var usePipelineExecutorValidatePipeline = trpc.pipelineExecutor.validatePipeline.useQuery;
 /** Generated alias around `trpc.pipelineExecutor.listTemplates.useQuery`. */
 var usePipelineExecutorListTemplates = trpc.pipelineExecutor.listTemplates.useQuery;
 /** Generated alias around `trpc.pipelineExecutor.saveTemplate.useMutation`. */
@@ -17782,6 +18019,8 @@ var usePipelineOrchestratorGetCameraMetrics = trpc.pipelineOrchestrator.getCamer
 var usePipelineOrchestratorGetCapabilityBindings = trpc.pipelineOrchestrator.getCapabilityBindings.useQuery;
 /** Generated alias around `trpc.pipelineOrchestrator.setCapabilityBinding.useMutation`. */
 var usePipelineOrchestratorSetCapabilityBinding = trpc.pipelineOrchestrator.setCapabilityBinding.useMutation;
+/** Generated alias around `trpc.pipelineOrchestrator.getIngestOwner.useQuery`. */
+var usePipelineOrchestratorGetIngestOwner = trpc.pipelineOrchestrator.getIngestOwner.useQuery;
 /** Generated alias around `trpc.pipelineOrchestrator.assignDecoder.useMutation`. */
 var usePipelineOrchestratorAssignDecoder = trpc.pipelineOrchestrator.assignDecoder.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.unassignDecoder.useMutation`. */
@@ -17814,6 +18053,8 @@ var usePipelineOrchestratorSetAgentMaxCameras = trpc.pipelineOrchestrator.setAge
 var usePipelineOrchestratorSetAgentDetectWeight = trpc.pipelineOrchestrator.setAgentDetectWeight.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.setAgentCapabilities.useMutation`. */
 var usePipelineOrchestratorSetAgentCapabilities = trpc.pipelineOrchestrator.setAgentCapabilities.useMutation;
+/** Generated alias around `trpc.pipelineOrchestrator.setAgentReachableHost.useMutation`. */
+var usePipelineOrchestratorSetAgentReachableHost = trpc.pipelineOrchestrator.setAgentReachableHost.useMutation;
 /** Generated alias around `trpc.pipelineOrchestrator.getCameraSettings.useQuery`. */
 var usePipelineOrchestratorGetCameraSettings = trpc.pipelineOrchestrator.getCameraSettings.useQuery;
 /** Generated alias around `trpc.pipelineOrchestrator.setCameraStepToggle.useMutation`. */
@@ -17988,10 +18229,6 @@ var useSnapshotGetDeviceSettingsContribution = trpc.snapshot.getDeviceSettingsCo
 var useSnapshotGetDeviceLiveContribution = trpc.snapshot.getDeviceLiveContribution.useQuery;
 /** Generated alias around `trpc.snapshot.applyDeviceSettingsPatch.useMutation`. */
 var useSnapshotApplyDeviceSettingsPatch = trpc.snapshot.applyDeviceSettingsPatch.useMutation;
-/** Generated alias around `trpc.snapshotProvider.supportsDevice.useQuery`. */
-var useSnapshotProviderSupportsDevice = trpc.snapshotProvider.supportsDevice.useQuery;
-/** Generated alias around `trpc.snapshotProvider.getSnapshot.useQuery`. */
-var useSnapshotProviderGetSnapshot = trpc.snapshotProvider.getSnapshot.useQuery;
 /** Generated alias around `trpc.storage.resolve.useQuery`. */
 var useStorageResolve = trpc.storage.resolve.useQuery;
 /** Generated alias around `trpc.storage.write.useMutation`. */
@@ -30042,10 +30279,11 @@ 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 }) {
+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,
@@ -33278,7 +33516,7 @@ function ScheduleBandsEditor({ schedules, onChange }) {
 		className: "space-y-2",
 		children: [schedules.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 			className: "text-[11px] text-foreground-subtle",
-			children: "Sempre (24/7) — aggiungi una fascia per limitare gli orari."
+			children: "Always (24/7) — add a band to restrict hours."
 		}) : schedules.map((band, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BandRow, {
 			band,
 			onChange: (b) => replaceAt(i, b),
@@ -33287,7 +33525,7 @@ function ScheduleBandsEditor({ schedules, onChange }) {
 			type: "button",
 			onClick: addBand,
 			className: "flex items-center gap-1 rounded-md bg-surface-hover px-2 py-1 text-[11px] text-foreground-subtle hover:text-foreground",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Aggiungi fascia"]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Add band"]
 		})]
 	});
 }
@@ -33297,18 +33535,18 @@ function BandRow({ band, onChange, onRemove }) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "flex-1",
-				children: "Sempre"
+				children: "Always"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				onClick: () => onChange(newBand()),
 				className: "text-foreground-subtle hover:text-foreground underline",
-				children: "imposta fascia"
+				children: "Set band"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				onClick: onRemove,
-				"aria-label": "Rimuovi fascia",
+				"aria-label": "Remove band",
 				className: "text-foreground-subtle hover:text-red-500",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" })
 			})
@@ -33353,7 +33591,7 @@ function BandRow({ band, onChange, onRemove }) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					onClick: onRemove,
-					"aria-label": "Rimuovi fascia",
+					"aria-label": "Remove band",
 					className: "text-foreground-subtle hover:text-red-500",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" })
 				})
@@ -33369,7 +33607,7 @@ function BandRow({ band, onChange, onRemove }) {
 				}, d.value);
 			}), days.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "self-center text-[10px] text-foreground-subtle",
-				children: "tutti i giorni"
+				children: "every day"
 			}) : null]
 		})]
 	});
@@ -33415,7 +33653,7 @@ function RecordingSettings({ initial, saving, onSave }) {
 	});
 	const numOrUndef = (v) => v === "" ? void 0 : Number(v);
 	const toggleProfile = (p) => {
-		const cur = common.profiles ?? [];
+		const cur = common.profiles ?? [...PROFILES];
 		const next = cur.includes(p) ? cur.filter((x) => x !== p) : [...cur, p];
 		setCommon({
 			...common,
@@ -33593,7 +33831,7 @@ function RecordingSettings({ initial, saving, onSave }) {
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => toggleProfile(p),
-							className: `rounded px-2 py-1 ${(common.profiles ?? []).includes(p) ? "bg-primary text-primary-foreground" : "bg-surface-hover text-foreground-subtle"}`,
+							className: `rounded px-2 py-1 ${common.profiles == null || common.profiles.includes(p) ? "bg-primary text-primary-foreground" : "bg-surface-hover text-foreground-subtle"}`,
 							children: p
 						}, p);
 					})]
@@ -34136,7 +34374,7 @@ function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek, onScru
 				const left = pctForMs(s.startMs, windowFrom, windowTo);
 				const right = pctForMs(s.endMs, windowFrom, windowTo);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					"data-testid": "coverage-fascia",
+					"data-testid": "coverage-band",
 					className: "absolute inset-y-0 bg-gradient-to-b from-primary to-primary/80",
 					style: {
 						left: `${left}%`,
@@ -45158,6 +45396,7 @@ exports.GRID_GAP = GRID_GAP;
 exports.GRID_PAIRED = GRID_PAIRED;
 exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
 exports.GripTrack = GripTrack;
+exports.GroupedModelSelector = GroupedModelSelector;
 exports.HOST_WIDGETS = HOST_WIDGETS;
 exports.HlsVideo = HlsVideo;
 exports.HoverZoomImage = HoverZoomImage;
@@ -45894,6 +46133,7 @@ exports.usePipelineExecutorSetVideoPipelineSteps = usePipelineExecutorSetVideoPi
 exports.usePipelineExecutorSpinEngine = usePipelineExecutorSpinEngine;
 exports.usePipelineExecutorUncacheFrame = usePipelineExecutorUncacheFrame;
 exports.usePipelineExecutorUpdateTemplate = usePipelineExecutorUpdateTemplate;
+exports.usePipelineExecutorValidatePipeline = usePipelineExecutorValidatePipeline;
 exports.usePipelineOrchestratorApplyDeviceSettingsPatch = usePipelineOrchestratorApplyDeviceSettingsPatch;
 exports.usePipelineOrchestratorAssignAudio = usePipelineOrchestratorAssignAudio;
 exports.usePipelineOrchestratorAssignDecoder = usePipelineOrchestratorAssignDecoder;
@@ -45915,6 +46155,7 @@ exports.usePipelineOrchestratorGetDecoderAssignments = usePipelineOrchestratorGe
 exports.usePipelineOrchestratorGetDeviceLiveContribution = usePipelineOrchestratorGetDeviceLiveContribution;
 exports.usePipelineOrchestratorGetDeviceSettingsContribution = usePipelineOrchestratorGetDeviceSettingsContribution;
 exports.usePipelineOrchestratorGetGlobalMetrics = usePipelineOrchestratorGetGlobalMetrics;
+exports.usePipelineOrchestratorGetIngestOwner = usePipelineOrchestratorGetIngestOwner;
 exports.usePipelineOrchestratorGetPipelineAssignment = usePipelineOrchestratorGetPipelineAssignment;
 exports.usePipelineOrchestratorGetPipelineAssignments = usePipelineOrchestratorGetPipelineAssignments;
 exports.usePipelineOrchestratorListAgentSettings = usePipelineOrchestratorListAgentSettings;
@@ -45927,6 +46168,7 @@ exports.usePipelineOrchestratorSetAgentAddonDefaults = usePipelineOrchestratorSe
 exports.usePipelineOrchestratorSetAgentCapabilities = usePipelineOrchestratorSetAgentCapabilities;
 exports.usePipelineOrchestratorSetAgentDetectWeight = usePipelineOrchestratorSetAgentDetectWeight;
 exports.usePipelineOrchestratorSetAgentMaxCameras = usePipelineOrchestratorSetAgentMaxCameras;
+exports.usePipelineOrchestratorSetAgentReachableHost = usePipelineOrchestratorSetAgentReachableHost;
 exports.usePipelineOrchestratorSetCameraPipelineForAgent = usePipelineOrchestratorSetCameraPipelineForAgent;
 exports.usePipelineOrchestratorSetCameraStepOverride = usePipelineOrchestratorSetCameraStepOverride;
 exports.usePipelineOrchestratorSetCameraStepToggle = usePipelineOrchestratorSetCameraStepToggle;
@@ -46014,8 +46256,6 @@ exports.useSnapshotGetDeviceSettingsContribution = useSnapshotGetDeviceSettingsC
 exports.useSnapshotGetSnapshot = useSnapshotGetSnapshot;
 exports.useSnapshotGetStatus = useSnapshotGetStatus;
 exports.useSnapshotInvalidateCache = useSnapshotInvalidateCache;
-exports.useSnapshotProviderGetSnapshot = useSnapshotProviderGetSnapshot;
-exports.useSnapshotProviderSupportsDevice = useSnapshotProviderSupportsDevice;
 exports.useStorageAbortUpload = useStorageAbortUpload;
 exports.useStorageBeginDownload = useStorageBeginDownload;
 exports.useStorageBeginUpload = useStorageBeginUpload;