@camstack/ui-library 1.2.265 → 1.2.267

package/dist/composites/index.d.ts

@@ -16,8 +16,10 @@ export type { BatteryBadgeProps, BatteryStatusLike } from "./battery-badge";
 export { BatteryBadge } from "./battery-badge";
 export type { NetworkLinkBadgeProps, NetworkLinkStatusLike } from "./network-link-badge";
 export { NetworkLinkBadge } from "./network-link-badge";
-export { NODE_COLOR_IDS, assignNodeColorId, nodeColorClass, nodeTextColorClass } from "./node-color";
+export { NODE_COLOR_IDS, assignNodeColorId, nodeColorClass, nodeSoftBgClass, nodeTextColorClass } from "./node-color";
 export type { NodeColorId } from "./node-color";
+export type { AgentSettingsColorRow } from "./node-color-map";
+export { buildColorByNodeId, colorIdForNode } from "./node-color-map";
 export type { PipelineRoleId, RoleNodePillProps } from "./role-node-pill";
 export { RoleNodePill } from "./role-node-pill";
 export * from "./breadcrumb";
@@ -157,6 +159,11 @@ export { mountAddonPage } from "./mount-addon-page";
 export type { NodePickerProps } from "./node-picker";
 export { NodePicker } from "./node-picker";
 export * from "./page-header";
+export * from "./page-shell";
+export * from "./section-toolbar";
+export * from "./item-form-dialog";
+export * from "./use-item-form-url";
+export * from "./media-grid";
 export type { PhaseIconProps } from "./phase-icon";
 export { PhaseIcon } from "./phase-icon";
 export type { PipelineBuilderProps } from "./pipeline-builder";

package/dist/composites/item-form-dialog.d.ts

@@ -0,0 +1,24 @@
+/**
+* ItemFormDialog — shared shell for create/edit of a named list item.
+*
+* Mirrors Notification Center Rules: `Dialog` + `DialogContent` width lg,
+* sheet-on-mobile, scroll body; title + Cancel in the chrome; body and footer
+* slots for the form. Open state is owned by the caller (typically
+* `useItemFormUrl`).
+*/
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode, JSX } from "react";
+import { type DialogContentProps } from "../primitives";
+export interface ItemFormDialogProps {
+	readonly open: boolean;
+	readonly onClose: () => void;
+	readonly title: string;
+	readonly icon?: LucideIcon;
+	readonly error?: string | null;
+	readonly width?: DialogContentProps["width"];
+	readonly children: ReactNode;
+	/** Footer actions (Save, …). Cancel is always in the header. */
+	readonly footer?: ReactNode;
+	readonly testId?: string;
+}
+export declare function ItemFormDialog({ open, onClose, title, icon: Icon, error, width, children, footer, testId }: ItemFormDialogProps): JSX.Element | null;

package/dist/composites/media-grid.d.ts

@@ -0,0 +1,27 @@
+/**
+* MediaGrid — responsive grid of media tiles (events, frames, crops).
+* Empty and pending are distinct; never fold unanswered into empty (D315).
+*/
+import type { ReactNode, JSX } from "react";
+export interface MediaCardProps {
+	readonly children: ReactNode;
+	readonly selected?: boolean;
+	readonly onSelect?: () => void;
+	readonly label?: string;
+	readonly className?: string;
+	readonly testId?: string;
+}
+export declare function MediaCard({ children, selected, onSelect, label, className, testId }: MediaCardProps): JSX.Element;
+export type MediaGridStatus = "pending" | "ready" | "empty";
+export interface MediaGridProps {
+	readonly status: MediaGridStatus;
+	/** Required when status is `ready`. */
+	readonly children?: ReactNode;
+	/** Shown when status is pending. */
+	readonly pendingMessage?: string;
+	/** Shown when status is empty. */
+	readonly emptyMessage?: string;
+	readonly className?: string;
+	readonly testId?: string;
+}
+export declare function MediaGrid({ status, children, pendingMessage, emptyMessage, className, testId }: MediaGridProps): JSX.Element;

package/dist/composites/node-color-map.d.ts

@@ -0,0 +1,11 @@
+/**
+* nodeId → palette slot for assignment pills, NodePicker and other cluster surfaces.
+* Reads persisted `color` from listAgentSettings; falls back to assignNodeColorId.
+*/
+import { type NodeColorId } from "@camstack/types";
+export interface AgentSettingsColorRow {
+	readonly nodeId: string;
+	readonly settings: object;
+}
+export declare function buildColorByNodeId(rows: readonly AgentSettingsColorRow[] | undefined): ReadonlyMap<string, NodeColorId>;
+export declare function colorIdForNode(colorByNodeId: ReadonlyMap<string, NodeColorId>, nodeId: string): NodeColorId;

package/dist/composites/node-color.d.ts

@@ -2,3 +2,4 @@ import { NODE_COLOR_IDS, assignNodeColorId, type NodeColorId } from "@camstack/t
 export { NODE_COLOR_IDS, assignNodeColorId, type NodeColorId };
 export declare function nodeColorClass(id: NodeColorId): string;
 export declare function nodeTextColorClass(id: NodeColorId): string;
+export declare function nodeSoftBgClass(id: NodeColorId): string;

package/dist/composites/node-picker.d.ts

@@ -12,5 +12,7 @@ export interface NodePickerProps {
 	* default hides the picker since there's nothing to choose.
 	*/
 	readonly alwaysShow?: boolean;
+	/** When true, offline nodes stay enabled and selectable. Default false. */
+	readonly allowOffline?: boolean;
 }
-export declare function NodePicker({ selectedNodeId, onSelect, label, hideIcon, alwaysShow }: NodePickerProps): JSX.Element | null;
+export declare function NodePicker({ selectedNodeId, onSelect, label, hideIcon, alwaysShow, allowOffline }: NodePickerProps): JSX.Element | null;

package/dist/composites/page-header.d.ts

@@ -1,3 +1,7 @@
+/**
+* @deprecated Prefer `PageShell` for the full page frame (gutter + optional nav).
+* Kept for title-row-only call sites that already pad themselves.
+*/
 import { type ReactNode, type JSX } from "react";
 export interface PageHeaderProps {
 	title: string;

package/dist/composites/page-shell.d.ts

@@ -0,0 +1,20 @@
+/**
+* PageShell — the one page chrome for admin-ui and addon pages.
+*
+* Gutter `p-2 sm:p-4`, `overflow-x-clip` (never `hidden` — that kills sticky
+* descendants). Optional title row (icon + title + subtitle | actions) and a
+* `nav` slot under it for hub pills / selectors.
+*/
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode, JSX } from "react";
+export interface PageShellProps {
+	readonly icon?: LucideIcon;
+	readonly title?: string;
+	readonly subtitle?: ReactNode;
+	readonly actions?: ReactNode;
+	/** Selector row inside the header, under the title (hub pills, …). */
+	readonly nav?: ReactNode;
+	readonly className?: string;
+	readonly children: ReactNode;
+}
+export declare function PageShell({ icon: Icon, title, subtitle, actions, nav, className, children }: PageShellProps): JSX.Element;

package/dist/composites/section-toolbar.d.ts

@@ -0,0 +1,14 @@
+/**
+* SectionToolbar — filters / node on the left, Add (or other actions) on the
+* right, inside a SectionCard body. Owns no data.
+*/
+import type { ReactNode, JSX } from "react";
+export interface SectionToolbarProps {
+	/** Filters, NodePicker, search, … */
+	readonly start?: ReactNode;
+	/** Add button or other primary actions. */
+	readonly end?: ReactNode;
+	readonly className?: string;
+	readonly testId?: string;
+}
+export declare function SectionToolbar({ start, end, className, testId }: SectionToolbarProps): JSX.Element;

package/dist/composites/use-item-form-url.d.ts

@@ -0,0 +1,21 @@
+export type ItemFormUrlState = {
+	readonly mode: "closed";
+} | {
+	readonly mode: "new";
+} | {
+	readonly mode: "edit";
+	readonly id: string;
+};
+export interface UseItemFormUrlOptions {
+	/** Query key for create (default `new`). Value is the literal `1` when open. */
+	readonly newKey?: string;
+	/** Query key for edit id (default `edit`). */
+	readonly editKey?: string;
+}
+export interface UseItemFormUrlResult {
+	readonly state: ItemFormUrlState;
+	readonly openNew: () => void;
+	readonly openEdit: (id: string) => void;
+	readonly close: () => void;
+}
+export declare function useItemFormUrl(options?: UseItemFormUrlOptions): UseItemFormUrlResult;

package/dist/index.cjs

@@ -19723,18 +19723,21 @@ function WidgetPanel({ title, icon, headerRight, collapsible = false, defaultOpe
 }
 function WidgetMetricCard({ label, icon, children, footer }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "rounded-md border border-border/60 bg-background/40 px-3 py-2",
+		className: "min-w-0 rounded-lg border border-border bg-surface p-2 sm:p-2.5",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mb-1 flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
-				children: [icon, label]
+				className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-[10px] uppercase tracking-wider text-foreground-subtle",
+				children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "min-w-0 truncate",
+					children: label
+				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-sm font-medium text-foreground",
+				className: "truncate text-lg font-semibold leading-tight text-foreground",
 				children
 			}),
-			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-0.5 text-[10px] text-foreground-subtle",
+			footer != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-0.5 truncate text-[10px] text-foreground-subtle",
 				children: footer
 			}) : null
 		]
@@ -25753,7 +25756,9 @@ var contentVariants = cva("relative fixed left-1/2 top-1/2 -translate-x-1/2 -tra
 		width: {
 			sm: "max-w-sm",
 			md: "max-w-md",
-			lg: "max-w-lg"
+			lg: "max-w-lg",
+			/** Wide editors (scripts, long forms). */
+			xl: "max-w-4xl"
 		},
 		/**
 		* WHICH box scrolls when the content is taller than the height cap.
@@ -25800,6 +25805,11 @@ var contentVariants = cva("relative fixed left-1/2 top-1/2 -translate-x-1/2 -tra
 			width: "lg",
 			class: "md:w-[calc(100vw-2rem)] md:max-w-lg"
 		},
+		{
+			placement: "sheet-on-mobile",
+			width: "xl",
+			class: "md:w-[calc(100vw-2rem)] md:max-w-4xl"
+		},
 		{
 			scroll: "body",
 			placement: "sheet-on-mobile",
@@ -30918,6 +30928,8 @@ var GRID_GAP = "gap-2 sm:gap-3";
 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";
+/** Auto-fill media tiles (events, frames, crops) — ~4 across at lg. */
+var MEDIA_GRID = "grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))]";
 /** 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). */
@@ -32829,12 +32841,46 @@ var NODE_TEXT_CLASS = {
 	"node-g": "text-node-g",
 	"node-h": "text-node-h"
 };
+/** Soft fill for selected pills / chrome (Tailwind v4 needs full class strings). */
+var NODE_BG_SOFT_CLASS$1 = {
+	"node-a": "bg-node-a/15",
+	"node-b": "bg-node-b/15",
+	"node-c": "bg-node-c/15",
+	"node-d": "bg-node-d/15",
+	"node-e": "bg-node-e/15",
+	"node-f": "bg-node-f/15",
+	"node-g": "bg-node-g/15",
+	"node-h": "bg-node-h/15"
+};
 function nodeColorClass(id) {
 	return NODE_BG_CLASS[id];
 }
 function nodeTextColorClass(id) {
 	return NODE_TEXT_CLASS[id];
 }
+function nodeSoftBgClass(id) {
+	return NODE_BG_SOFT_CLASS$1[id];
+}
+//#endregion
+//#region src/composites/node-color-map.ts
+/**
+* nodeId → palette slot for assignment pills, NodePicker and other cluster surfaces.
+* Reads persisted `color` from listAgentSettings; falls back to assignNodeColorId.
+*/
+function readSettingsColor(settings) {
+	for (const [key, value] of Object.entries(settings)) if (key === "color") return value;
+}
+function buildColorByNodeId(rows) {
+	const map = /* @__PURE__ */ new Map();
+	for (const row of rows ?? []) {
+		const parsed = _camstack_types.NodeColorIdSchema.safeParse(readSettingsColor(row.settings));
+		map.set(row.nodeId, parsed.success ? parsed.data : (0, _camstack_types.assignNodeColorId)(row.nodeId));
+	}
+	return map;
+}
+function colorIdForNode(colorByNodeId, nodeId) {
+	return colorByNodeId.get(nodeId) ?? (0, _camstack_types.assignNodeColorId)(nodeId);
+}
 //#endregion
 //#region src/composites/role-node-pill.tsx
 var ROLE_SOFT_CLASS = {
@@ -58072,12 +58118,15 @@ function mountAddonPage(PageComponent, options = {}) {
 *
 * Uses `useClusterNodes` hook so every consumer hits the same React-Query
 * cache. Renders a `Server` icon + label + segmented pill bar with one
-* button per online node, hub first.
+* button per node (hub first), tinted from agent-settings palette colours.
+* Offline nodes stay listed; they are disabled unless `allowOffline`.
 *
 * Used by admin-ui Addons page, benchmark addon page, pipeline page, etc.
 */
-function NodePicker({ selectedNodeId, onSelect, label = "Node", hideIcon = false, alwaysShow = false }) {
+function NodePicker({ selectedNodeId, onSelect, label = "Node", hideIcon = false, alwaysShow = false, allowOffline = false }) {
 	const { nodes } = useClusterNodes();
+	const settingsQuery = usePipelineOrchestratorListAgentSettings(void 0);
+	const colorByNodeId = (0, react$1.useMemo)(() => buildColorByNodeId(settingsQuery.data), [settingsQuery.data]);
 	if (!alwaysShow && nodes.length <= 1) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-1.5",
@@ -58091,12 +58140,14 @@ function NodePicker({ selectedNodeId, onSelect, label = "Node", hideIcon = false
 				className: "flex rounded-md border border-border overflow-hidden text-[11px] font-medium",
 				children: nodes.map((node, idx) => {
 					const isSelected = selectedNodeId === node.id;
+					const colorId = colorIdForNode(colorByNodeId, node.id);
+					const disabled = !allowOffline && !node.isOnline;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => onSelect(node.id),
-						disabled: !node.isOnline,
+						disabled,
 						title: node.isOnline ? node.name : `${node.name} (offline)`,
-						className: cn("px-2.5 py-1 transition-colors", isSelected ? "bg-primary/15 text-primary" : "bg-transparent text-foreground-subtle hover:bg-surface-hover hover:text-foreground", idx > 0 && "border-l border-border", !node.isOnline && "opacity-50 cursor-not-allowed"),
+						className: cn("px-2.5 py-1 transition-colors", isSelected ? cn(nodeSoftBgClass(colorId), nodeTextColorClass(colorId)) : cn("bg-transparent hover:bg-surface-hover", nodeTextColorClass(colorId), !disabled && "opacity-70 hover:opacity-100"), idx > 0 && "border-l border-border", disabled && "opacity-50 cursor-not-allowed"),
 						children: node.shortName
 					}, node.id);
 				})
@@ -58108,20 +58159,227 @@ function NodePicker({ selectedNodeId, onSelect, label = "Node", hideIcon = false
 //#region src/composites/page-header.tsx
 function PageHeader({ title, subtitle, actions, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex flex-col gap-2 mb-3 sm:flex-row sm:items-center sm:justify-between", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "text-sm font-semibold text-foreground",
-			children: title
-		}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-foreground-subtle text-xs",
-			children: subtitle
-		})] }), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-center gap-2 flex-wrap",
+		className: cn("mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-lg font-semibold text-foreground",
+				children: title
+			}), subtitle !== void 0 && subtitle !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-0.5 text-xs text-foreground-subtle",
+				children: subtitle
+			})]
+		}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center gap-2",
 			children: actions
 		})]
 	});
 }
 //#endregion
+//#region src/composites/page-shell.tsx
+function PageShell({ icon: Icon, title, subtitle, actions, nav, className, children }) {
+	const hasTitleRow = Boolean(title) || subtitle != null || actions != null;
+	const hasHeader = hasTitleRow || nav != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("space-y-4 overflow-x-clip p-2 sm:p-4", className),
+		children: [hasHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-3",
+			children: [hasTitleRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [title !== void 0 && title !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h1", {
+						className: "flex items-center gap-2 text-lg font-semibold text-foreground",
+						children: [Icon !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							className: "h-4 w-4 shrink-0 text-foreground-subtle",
+							"aria-hidden": true
+						}), title]
+					}), subtitle != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-0.5 text-xs text-foreground-subtle",
+						children: subtitle
+					})]
+				}), actions != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: actions
+				})]
+			}), nav]
+		}), children]
+	});
+}
+//#endregion
+//#region src/composites/section-toolbar.tsx
+function SectionToolbar({ start, end, className, testId }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", className),
+		"data-testid": testId,
+		children: [start != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+			children: start
+		}), end != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex shrink-0 flex-wrap items-center gap-2 sm:justify-end",
+			children: end
+		})]
+	});
+}
+//#endregion
+//#region src/composites/item-form-dialog.tsx
+function ItemFormDialog({ open, onClose, title, icon: Icon, error, width = "lg", children, footer, testId }) {
+	if (!open) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open: true,
+		onOpenChange: (next) => !next && onClose(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
+			width,
+			placement: "sheet-on-mobile",
+			scroll: "body",
+			"data-testid": testId,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-3 flex shrink-0 items-center justify-between gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+						className: "flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground",
+						children: [Icon !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							className: "h-4 w-4 shrink-0 text-foreground-subtle",
+							"aria-hidden": true
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: title
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						variant: "ghost",
+						type: "button",
+						onClick: onClose,
+						children: "Cancel"
+					})]
+				}),
+				error != null && error !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-3 shrink-0 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger",
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, {
+					className: "pr-1",
+					children
+				}),
+				footer != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, {
+					className: "mt-3 shrink-0",
+					children: footer
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/hooks/use-url-query.ts
+/**
+* Tiny URL query sync for surfaces that cannot assume react-router
+* (federated addon pages) or that only need a handful of params.
+*
+* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
+* null values are deleted so the URL stays short.
+*/
+function readParam(key) {
+	return new URLSearchParams(window.location.search).get(key);
+}
+function writeParam(key, value) {
+	const params = new URLSearchParams(window.location.search);
+	if (value === null || value === "") params.delete(key);
+	else params.set(key, value);
+	const qs = params.toString();
+	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+	window.history.replaceState(null, "", url);
+}
+/**
+* One query param as React state. `null` means absent.
+* Changing it replaces the URL without a navigation.
+*/
+function useUrlQueryParam(key) {
+	const [value, setValue] = (0, react$1.useState)(() => readParam(key));
+	(0, react$1.useEffect)(() => {
+		const onPop = () => setValue(readParam(key));
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, [key]);
+	return [value, (0, react$1.useCallback)((next) => {
+		writeParam(key, next);
+		setValue(next);
+	}, [key])];
+}
+//#endregion
+//#region src/composites/use-item-form-url.ts
+/**
+* URL ownership for create/edit modals: `?new=1` or `?edit=<id>` (replace).
+* Mutually exclusive — opening one clears the other.
+*/
+function useItemFormUrl(options = {}) {
+	const newKey = options.newKey ?? "new";
+	const editKey = options.editKey ?? "edit";
+	const [newParam, setNewParam] = useUrlQueryParam(newKey);
+	const [editParam, setEditParam] = useUrlQueryParam(editKey);
+	return {
+		state: (0, react$1.useMemo)(() => {
+			if (editParam !== null && editParam !== "") return {
+				mode: "edit",
+				id: editParam
+			};
+			if (newParam === "1") return { mode: "new" };
+			return { mode: "closed" };
+		}, [editParam, newParam]),
+		openNew: (0, react$1.useCallback)(() => {
+			setEditParam(null);
+			setNewParam("1");
+		}, [setEditParam, setNewParam]),
+		openEdit: (0, react$1.useCallback)((id) => {
+			setNewParam(null);
+			setEditParam(id);
+		}, [setEditParam, setNewParam]),
+		close: (0, react$1.useCallback)(() => {
+			setNewParam(null);
+			setEditParam(null);
+		}, [setEditParam, setNewParam])
+	};
+}
+//#endregion
+//#region src/composites/media-grid.tsx
+function MediaCard({ children, selected = false, onSelect, label, className, testId }) {
+	const interactive = onSelect !== void 0;
+	const onKeyDown = (event) => {
+		if (!interactive) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			onSelect();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: interactive ? "button" : void 0,
+		tabIndex: interactive ? 0 : void 0,
+		"aria-pressed": interactive ? selected : void 0,
+		"aria-label": label,
+		"data-testid": testId,
+		onClick: onSelect,
+		onKeyDown,
+		className: cn("relative aspect-square min-w-0 overflow-hidden rounded-md border bg-surface", selected ? "border-primary ring-1 ring-primary" : "border-border", interactive && "cursor-pointer hover:border-foreground-subtle", className),
+		children
+	});
+}
+function MediaGrid({ status, children, pendingMessage = "Loading…", emptyMessage = "Nothing to show", className, testId }) {
+	if (status === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "animate-pulse py-8 text-center text-xs text-foreground-subtle",
+		"data-testid": testId,
+		children: pendingMessage
+	});
+	if (status === "empty") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "py-8 text-center text-xs text-foreground-subtle",
+		"data-testid": testId,
+		children: emptyMessage
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn(MEDIA_GRID, GRID_GAP, className),
+		"data-testid": testId,
+		children
+	});
+}
+//#endregion
 //#region src/composites/phase-icon.tsx
 /**
 * PhaseIcon — renders the correct lucide icon for a CameraPhase.
@@ -62065,42 +62323,6 @@ function useZoneEditing() {
 	return (0, react$1.useContext)(ZoneEditingContext);
 }
 //#endregion
-//#region src/hooks/use-url-query.ts
-/**
-* Tiny URL query sync for surfaces that cannot assume react-router
-* (federated addon pages) or that only need a handful of params.
-*
-* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
-* null values are deleted so the URL stays short.
-*/
-function readParam(key) {
-	return new URLSearchParams(window.location.search).get(key);
-}
-function writeParam(key, value) {
-	const params = new URLSearchParams(window.location.search);
-	if (value === null || value === "") params.delete(key);
-	else params.set(key, value);
-	const qs = params.toString();
-	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
-	window.history.replaceState(null, "", url);
-}
-/**
-* One query param as React state. `null` means absent.
-* Changing it replaces the URL without a navigation.
-*/
-function useUrlQueryParam(key) {
-	const [value, setValue] = (0, react$1.useState)(() => readParam(key));
-	(0, react$1.useEffect)(() => {
-		const onPop = () => setValue(readParam(key));
-		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
-	}, [key]);
-	return [value, (0, react$1.useCallback)((next) => {
-		writeParam(key, next);
-		setValue(next);
-	}, [key])];
-}
-//#endregion
 //#region src/hooks/use-device-cap-slice.ts
 /**
 * useDeviceCapSlice — generic runtime-state slice reader for an arbitrary
@@ -62802,6 +63024,7 @@ exports.ImageOff = ImageOff;
 exports.ImageSelector = ImageSelector;
 exports.InferenceConfigSelector = InferenceConfigSelector;
 exports.Input = Input;
+exports.ItemFormDialog = ItemFormDialog;
 exports.KebabMenu = KebabMenu;
 exports.KeyValueList = KeyValueList;
 exports.LIST_ROW = LIST_ROW;
@@ -62816,8 +63039,11 @@ exports.LockInlineControl = LockInlineControl;
 exports.LockPanel = LockPanel;
 exports.LogStream = LogStream;
 exports.LoginForm = LoginForm;
+exports.MEDIA_GRID = MEDIA_GRID;
 exports.MODE_COLOR = MODE_COLOR;
 exports.MaskShapeCanvas = MaskShapeCanvas;
+exports.MediaCard = MediaCard;
+exports.MediaGrid = MediaGrid;
 exports.MediaPlayerHeroCard = MediaPlayerHeroCard;
 exports.MediaPlayerInlineControl = MediaPlayerInlineControl;
 exports.MediaPlayerPanel = MediaPlayerPanel;
@@ -62854,6 +63080,7 @@ exports.PICKER_WINDOW = PICKER_WINDOW;
 exports.PRIORITY = PRIORITY;
 exports.PTZOverlay = PTZOverlay;
 exports.PageHeader = PageHeader;
+exports.PageShell = PageShell;
 exports.PageSizeSelect = PageSizeSelect;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
@@ -62916,6 +63143,7 @@ exports.ScrollArea = ScrollArea;
 exports.SecretFieldControl = SecretFieldControl;
 exports.SecretRevealProvider = SecretRevealProvider;
 exports.SectionCard = SectionCard;
+exports.SectionToolbar = SectionToolbar;
 exports.SegmentedChoice = SegmentedChoice;
 exports.Select = Select;
 exports.SelectedChip = SelectedChip;
@@ -62999,6 +63227,7 @@ exports.assignNodeColorId = _camstack_types.assignNodeColorId;
 exports.badgeFor = badgeFor;
 exports.badgeFor$1 = badgeFor;
 exports.bindsToModel = bindsToModel;
+exports.buildColorByNodeId = buildColorByNodeId;
 exports.buildPeerConnectionConfig = buildPeerConnectionConfig;
 exports.buildStepTreeFromSchema = buildStepTreeFromSchema;
 exports.catalogHasDraft = catalogHasDraft;
@@ -63011,6 +63240,7 @@ exports.classifySessionVerdict = classifySessionVerdict;
 exports.clearPickerGroup = clearPickerGroup;
 exports.clusterRootModelIds = clusterRootModelIds;
 exports.cn = cn;
+exports.colorIdForNode = colorIdForNode;
 exports.columnsForContext = columnsForContext;
 exports.compareSrflxMappings = compareSrflxMappings;
 exports.computePageButtons = computePageButtons;
@@ -63103,6 +63333,7 @@ exports.nextSort = nextSort;
 exports.nextSortDirection = nextSortDirection;
 exports.nextTableSort = nextTableSort;
 exports.nodeColorClass = nodeColorClass;
+exports.nodeSoftBgClass = nodeSoftBgClass;
 exports.nodeTextColorClass = nodeTextColorClass;
 exports.normalizeForSearch = normalizeForSearch;
 exports.offListSelections = offListSelections;
@@ -63625,6 +63856,7 @@ exports.useIntercomStartTalkSession = useIntercomStartTalkSession;
 exports.useIntercomStopSession = useIntercomStopSession;
 exports.useIsMidWidth = useIsMidWidth;
 exports.useIsMobile = useIsMobile;
+exports.useItemFormUrl = useItemFormUrl;
 exports.useKeychainAdminAcknowledgeReset = useKeychainAdminAcknowledgeReset;
 exports.useKeychainAdminDeleteOrphans = useKeychainAdminDeleteOrphans;
 exports.useKeychainAdminDownloadRecoveryKey = useKeychainAdminDownloadRecoveryKey;