@camstack/ui-library 1.1.24 → 1.1.26

package/dist/index.cjs

@@ -13842,6 +13842,17 @@ function AgentStepEditor(props) {
 }
 //#endregion
 //#region src/composites/pipeline-tree-matrix.tsx
+/**
+* Fixed column geometry (rem). The matrix uses a CSS grid with STATIC track
+* widths so a cell's content (a status chip, a long model id) can never resize
+* a column or shift its neighbours — cell content is truncated WITHIN the fixed
+* track instead. This kills the "table dances when the last column's status
+* changes" jitter. See `min-w-0` on every grid child, which lets the child
+* shrink to the track (a grid item's automatic minimum is its content size, so
+* without this a non-wrapping model id would blow the track wider than its max).
+*/
+var STEP_COL_REM = 18;
+var AGENT_COL_REM = 13;
 function flattenTree(nodes) {
 	const out = [];
 	const walk = (list, depth) => {
@@ -13921,40 +13932,58 @@ function QuickToggle({ enabled, onChange, disabled }) {
 		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") })
 	});
 }
+/**
+* Cell content. Kept width-stable: the status dot is `shrink-0` (reserved
+* space) and the model id truncates inside a `min-w-0` flex row, so a longer
+* model id never widens the cell — it ellipsises instead.
+*/
 function renderCellContent(state) {
 	if (state.kind === "enabled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "inline-flex items-center gap-1",
+		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",
+			className: "font-mono text-foreground truncate",
 			children: state.modelId
 		})]
 	});
 	if (state.kind === "disabled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "inline-flex 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" }), "off"]
+		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"
+		})]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "inline-flex items-center gap-1 text-foreground-subtle/70",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-muted shrink-0" }), "n/a"]
+		className: "flex min-w-0 items-center gap-1 text-foreground-subtle/70",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-muted shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: "n/a"
+		})]
+	});
+}
+function cellButtonClass(state, isSelected, extra) {
+	return cn("text-left text-xs hover:bg-muted/40", state.kind === "enabled" && "bg-emerald-500/5", state.kind === "na" && "bg-muted/30", isSelected && "ring-2 ring-primary ring-inset", extra);
+}
+/** Step label (slot heading + addon name + class chips), shared by both views. */
+function StepLabel({ node }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1 min-w-0 flex-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: node.slot }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 flex-wrap",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-semibold truncate",
+				children: node.addonName
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassChips, {
+				inputs: node.inputClasses,
+				outputs: node.outputClasses
+			})]
+		})]
 	});
 }
-function Row({ node, depth, agents, getCellState, onCellClick, selectedCell, toggleProps }) {
+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",
+		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.jsxs)("div", {
-			className: "flex flex-col gap-1 min-w-0 flex-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotHeading, { slot: node.slot }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2 flex-wrap",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "font-semibold truncate",
-					children: node.addonName
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassChips, {
-					inputs: node.inputClasses,
-					outputs: node.outputClasses
-				})]
-			})]
-		}), toggleProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		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,
@@ -13964,24 +13993,28 @@ function Row({ node, depth, agents, getCellState, onCellClick, selectedCell, tog
 		})]
 	}), agents.map((a) => {
 		const state = getCellState(node.addonId, a.agentNodeId);
-		const isSelected = selectedCell?.addonId === node.addonId && selectedCell.agentNodeId === a.agentNodeId;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			onClick: () => onCellClick(node.addonId, a.agentNodeId),
-			className: cn("text-left px-3 py-1.5 border-b border-l border-border text-xs hover:bg-muted/40", state.kind === "enabled" && "bg-emerald-500/5", state.kind === "na" && "bg-muted/30", isSelected && "ring-2 ring-primary ring-inset"),
+			className: cellButtonClass(state, selectedCell?.addonId === node.addonId && selectedCell.agentNodeId === a.agentNodeId, "min-w-0 overflow-hidden px-3 py-1.5 border-b border-l border-border"),
 			children: renderCellContent(state)
 		}, a.agentNodeId);
 	})] });
 }
-function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
-	const rows = (0, react$1.useMemo)(() => flattenTree(tree), [tree]);
-	const gridTemplate = `minmax(320px, 1fr) repeat(${agents.length}, minmax(160px, 220px))`;
+/**
+* Wide layout: horizontally self-scrolling matrix. The scroll lives INSIDE
+* this `overflow-auto` box (sticky first column + sticky header row) so the
+* page body never scrolls sideways. Column tracks are fixed px widths — see
+* STEP_COL_REM / AGENT_COL_REM — so the grid is static regardless of content.
+*/
+function MatrixGrid({ rows, agents, getCellState, onCellClick, selectedCell, onToggleEnabled }) {
+	const gridTemplate = `${STEP_COL_REM}rem repeat(${agents.length}, ${AGENT_COL_REM}rem)`;
 	const showToggle = onToggleEnabled !== void 0 && agents.length === 1;
 	const onlyAgent = agents[0]?.agentNodeId;
 	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",
+			className: "grid w-max",
 			style: { gridTemplateColumns: gridTemplate },
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -13989,9 +14022,9 @@ function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedC
 					children: "Step"
 				}),
 				agents.map((a) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "sticky top-0 z-10 bg-muted/60 px-3 py-2 border-b border-l border-border",
+					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",
+						className: "text-xs font-semibold text-foreground truncate",
 						children: a.agentNodeId
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "text-[10px] text-foreground-subtle truncate",
@@ -14000,7 +14033,7 @@ function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedC
 				}, a.agentNodeId)),
 				rows.map(({ node, depth }) => {
 					const cellState = showToggle && onlyAgent !== void 0 ? getCellState(node.addonId, onlyAgent) : null;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRow, {
 						node,
 						depth,
 						agents,
@@ -14018,6 +14051,90 @@ function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedC
 		})
 	});
 }
+/**
+* Narrow layout: one card per agent column, each listing every step stacked
+* vertically. A wide fixed matrix is unusable on a phone; here the same cells
+* (click-to-edit, status, toggle) reflow into full-width rows so nothing scrolls
+* horizontally. Feature-parity with the matrix — same `onCellClick`, same
+* `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.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.agentNodeId);
+				const isSelected = selectedCell?.addonId === node.addonId && selectedCell.agentNodeId === a.agentNodeId;
+				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.agentNodeId),
+							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);
+			}) })]
+		}, a.agentNodeId))
+	});
+}
+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/trpc-react.ts
 /**
@@ -15578,8 +15695,10 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 	const confirm = useConfirm();
 	const [presetsOpen, setPresetsOpen] = (0, react$1.useState)(false);
 	const [presetName, setPresetName] = (0, react$1.useState)("");
-	const presetsVisible = (showPresets ?? presets.length > 0) && presets.length > 0;
 	const isPanel = mode === "panel";
+	const zoomVisible = showZoom && (options?.hasZoom ?? true);
+	const supportsPresets = options?.supportsPresets ?? presets.length > 0;
+	const presetsVisible = (showPresets ?? supportsPresets) && supportsPresets;
 	const presetManagementVisible = isPanel && (options?.supportsPresets ?? false);
 	const maxPresetsReached = options?.maxPresets !== void 0 && presets.length >= options.maxPresets;
 	const handleSavePreset = (0, react$1.useCallback)(async () => {
@@ -15609,109 +15728,112 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 	const sepClass = isPanel ? "h-12 w-px bg-border mx-1" : "h-12 w-px bg-white/15 mx-1";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn(containerClass, className),
-		children: [
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
-				children: ["PTZ: ", error]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn(rowClass, isPanel && "justify-center"),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "grid grid-cols-3 gap-0.5",
+		children: [error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
+			children: ["PTZ: ", error]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn(rowClass, isPanel && "justify-center"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-3 gap-0.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: isPanel ? "h-9 w-9" : "h-7 w-7"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
+							direction: "up",
+							icon: ArrowUp,
+							variant: mode,
+							onMove: move,
+							onStart: startContinuous,
+							onStop: stopContinuous
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: isPanel ? "h-9 w-9" : "h-7 w-7"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
+							direction: "left",
+							icon: ArrowLeft,
+							variant: mode,
+							onMove: move,
+							onStart: startContinuous,
+							onStop: stopContinuous
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: isPanel ? "h-9 w-9" : "h-7 w-7"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
+							direction: "right",
+							icon: ArrowRight,
+							variant: mode,
+							onMove: move,
+							onStart: startContinuous,
+							onStop: stopContinuous
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: isPanel ? "h-9 w-9" : "h-7 w-7"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
+							direction: "down",
+							icon: ArrowDown,
+							variant: mode,
+							onMove: move,
+							onStart: startContinuous,
+							onStop: stopContinuous
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: isPanel ? "h-9 w-9" : "h-7 w-7"
+						})
+					]
+				}),
+				(zoomVisible || showHome) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: sepClass }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-0.5",
+					children: [zoomVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => zoom("in"),
+						disabled: busy,
+						title: "Zoom in",
+						className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { className: sideIconSize })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => zoom("out"),
+						disabled: busy,
+						title: "Zoom out",
+						className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { className: sideIconSize })
+					})] }), showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => goHome(),
+						disabled: busy,
+						title: "Go home",
+						className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: sideIconSize })
+					})]
+				}),
+				presetsVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						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"),
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": true,
-								className: isPanel ? "h-9 w-9" : "h-7 w-7"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
-								direction: "up",
-								icon: ArrowUp,
-								variant: mode,
-								onMove: move,
-								onStart: startContinuous,
-								onStop: stopContinuous
+							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"),
+								children: "No presets yet"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": true,
-								className: isPanel ? "h-9 w-9" : "h-7 w-7"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
-								direction: "left",
-								icon: ArrowLeft,
-								variant: mode,
-								onMove: move,
-								onStart: startContinuous,
-								onStop: stopContinuous
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": true,
-								className: isPanel ? "h-9 w-9" : "h-7 w-7"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
-								direction: "right",
-								icon: ArrowRight,
-								variant: mode,
-								onMove: move,
-								onStart: startContinuous,
-								onStop: stopContinuous
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": true,
-								className: isPanel ? "h-9 w-9" : "h-7 w-7"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
-								direction: "down",
-								icon: ArrowDown,
-								variant: mode,
-								onMove: move,
-								onStart: startContinuous,
-								onStop: stopContinuous
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": true,
-								className: isPanel ? "h-9 w-9" : "h-7 w-7"
-							})
-						]
-					}),
-					(showZoom || showHome) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: sepClass }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col gap-0.5",
-						children: [showZoom && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => zoom("in"),
-							disabled: busy,
-							title: "Zoom in",
-							className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { className: sideIconSize })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => zoom("out"),
-							disabled: busy,
-							title: "Zoom out",
-							className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { className: sideIconSize })
-						})] }), showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => goHome(),
-							disabled: busy,
-							title: "Go home",
-							className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: sideIconSize })
-						})]
-					}),
-					presetsVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "relative",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							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.jsx)("div", {
-							className: cn("absolute right-0 top-full mt-1 min-w-[140px] rounded-lg shadow-xl py-1 z-20", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
-							children: presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: cn("group flex items-center", isPanel ? "hover:bg-surface-hover" : "hover:bg-white/15"),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
@@ -15730,44 +15852,45 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
 									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)("div", {
-				className: "flex flex-col gap-1 rounded-lg border border-border p-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "text",
-						value: presetName,
-						onChange: (e) => setPresetName(e.target.value),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") handleSavePreset();
-						},
-						disabled: busy || maxPresetsReached,
-						placeholder: "New preset name",
-						maxLength: 64,
-						className: cn("min-w-0 flex-1 rounded border border-border bg-surface px-2 py-1 text-[11px] text-foreground", "placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary/50", "disabled:opacity-40")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: () => void handleSavePreset(),
-						disabled: busy || maxPresetsReached || presetName.trim().length === 0,
-						title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
-						className: cn("flex h-7 shrink-0 items-center gap-1 rounded px-2 text-[10px] font-medium", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), "Save current position"]
+							}, 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") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-1 px-2 py-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										value: presetName,
+										onChange: (e) => setPresetName(e.target.value),
+										onKeyDown: (e) => {
+											if (e.key === "Enter") handleSavePreset();
+										},
+										disabled: busy || maxPresetsReached,
+										placeholder: "New preset name",
+										maxLength: 64,
+										className: cn("min-w-0 flex-1 rounded border px-2 py-1 text-[11px]", "focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-40", isPanel ? "border-border bg-surface text-foreground placeholder:text-foreground-subtle" : "border-white/30 bg-zinc-800 text-white placeholder:text-white/40")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										onClick: () => void handleSavePreset(),
+										disabled: busy || maxPresetsReached || presetName.trim().length === 0,
+										title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
+										className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" })
+									})]
+								}),
+								maxPresetsReached && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: cn("block px-2 pb-1 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
+									children: [
+										"Preset limit reached (",
+										options?.maxPresets,
+										")."
+									]
+								})
+							] })
+						]
 					})]
-				}), maxPresetsReached && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-[10px] text-foreground-subtle",
-					children: [
-						"Camera preset limit reached (",
-						options?.maxPresets,
-						"). Delete a preset to add a new one."
-					]
-				})]
-			})
-		]
+				})
+			]
+		})]
 	});
 }
 //#endregion
@@ -16925,6 +17048,12 @@ var useCoverSetPosition = trpc.cover.setPosition.useMutation;
 var useCoverSetTiltPosition = trpc.cover.setTiltPosition.useMutation;
 /** Generated alias around `trpc.cover.getStatus.useQuery`. */
 var useCoverGetStatus = trpc.cover.getStatus.useQuery;
+/** Generated alias around `trpc.dayNight.getOptions.useQuery`. */
+var useDayNightGetOptions = trpc.dayNight.getOptions.useQuery;
+/** Generated alias around `trpc.dayNight.setSettings.useMutation`. */
+var useDayNightSetSettings = trpc.dayNight.setSettings.useMutation;
+/** Generated alias around `trpc.dayNight.getStatus.useQuery`. */
+var useDayNightGetStatus = trpc.dayNight.getStatus.useQuery;
 /** Generated alias around `trpc.decoder.supportsCodec.useQuery`. */
 var useDecoderSupportsCodec = trpc.decoder.supportsCodec.useQuery;
 /** Generated alias around `trpc.decoder.getInfo.useQuery`. */
@@ -17261,6 +17390,12 @@ var useHumidifierGetStatus = trpc.humidifier.getStatus.useQuery;
 var useHumiditySensorGetStatus = trpc.humiditySensor.getStatus.useQuery;
 /** Generated alias around `trpc.image.getStatus.useQuery`. */
 var useImageGetStatus = trpc.image.getStatus.useQuery;
+/** Generated alias around `trpc.imageSettings.getOptions.useQuery`. */
+var useImageSettingsGetOptions = trpc.imageSettings.getOptions.useQuery;
+/** Generated alias around `trpc.imageSettings.setSettings.useMutation`. */
+var useImageSettingsSetSettings = trpc.imageSettings.setSettings.useMutation;
+/** Generated alias around `trpc.imageSettings.getStatus.useQuery`. */
+var useImageSettingsGetStatus = trpc.imageSettings.getStatus.useQuery;
 /** Generated alias around `trpc.integrations.list.useQuery`. */
 var useIntegrationsList = trpc.integrations.list.useQuery;
 /** Generated alias around `trpc.integrations.get.useQuery`. */
@@ -41228,7 +41363,6 @@ var LEVEL_SEVERITY = {
 	error: 3
 };
 var LEVEL_OPTIONS = [
-	"all",
 	"debug",
 	"info",
 	"warn",
@@ -41243,7 +41377,7 @@ function passesLevel(logLevel, filterLevel) {
 function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showFilters = true, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
 	const [localAddonId, setLocalAddonId] = (0, react$1.useState)("");
 	const [localDeviceId, setLocalDeviceId] = (0, react$1.useState)("");
-	const [levelFilter, setLevelFilter] = (0, react$1.useState)(initialLevel);
+	const [levelFilter, setLevelFilter] = (0, react$1.useState)(initialLevel ?? "info");
 	const agentId = propsAgentId;
 	const addonId = propsAddonId ?? (localAddonId || void 0);
 	const deviceId = propsDeviceId ?? (localDeviceId ? Number(localDeviceId) : void 0);
@@ -41444,11 +41578,11 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex rounded border border-border overflow-hidden text-[9px]",
-							children: LEVEL_OPTIONS.map((l) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							children: LEVEL_OPTIONS.map((l, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
-								onClick: () => setLevelFilter(l === "all" ? void 0 : l),
-								className: cn("px-1.5 py-0.5 capitalize transition-colors", l === "all" && !levelFilter || levelFilter === l ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:bg-surface-hover", l !== "all" && "border-l border-border"),
-								children: [l, l !== "all" ? "+" : ""]
+								onClick: () => setLevelFilter(l),
+								className: cn("px-1.5 py-0.5 capitalize transition-colors", levelFilter === l ? "bg-primary/10 text-primary" : "text-foreground-subtle hover:bg-surface-hover", i > 0 && "border-l border-border"),
+								children: [l, "+"]
 							}, l))
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
@@ -45373,6 +45507,9 @@ exports.useCoverSetPosition = useCoverSetPosition;
 exports.useCoverSetTiltPosition = useCoverSetTiltPosition;
 exports.useCoverStop = useCoverStop;
 exports.useCustomFieldRenderer = useCustomFieldRenderer;
+exports.useDayNightGetOptions = useDayNightGetOptions;
+exports.useDayNightGetStatus = useDayNightGetStatus;
+exports.useDayNightSetSettings = useDayNightSetSettings;
 exports.useDebouncedString = useDebouncedString;
 exports.useDecoderCreateSession = useDecoderCreateSession;
 exports.useDecoderDestroySession = useDecoderDestroySession;
@@ -45563,6 +45700,9 @@ exports.useHumidifierSetOn = useHumidifierSetOn;
 exports.useHumidifierSetTargetHumidity = useHumidifierSetTargetHumidity;
 exports.useHumiditySensorGetStatus = useHumiditySensorGetStatus;
 exports.useImageGetStatus = useImageGetStatus;
+exports.useImageSettingsGetOptions = useImageSettingsGetOptions;
+exports.useImageSettingsGetStatus = useImageSettingsGetStatus;
+exports.useImageSettingsSetSettings = useImageSettingsSetSettings;
 exports.useIntegrationsCreate = useIntegrationsCreate;
 exports.useIntegrationsDelete = useIntegrationsDelete;
 exports.useIntegrationsGet = useIntegrationsGet;