@camstack/ui-library 1.2.163 → 1.2.165

package/dist/composites/confirm-dialog.d.ts

@@ -1,13 +1,58 @@
 import { ReactNode } from 'react';
-interface ConfirmOptions {
-    title: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    variant?: 'danger' | 'warning' | 'default';
+export type DialogVariant = 'danger' | 'warning' | 'default';
+export interface ConfirmOptions {
+    readonly title: string;
+    readonly message: string;
+    readonly confirmLabel?: string;
+    readonly cancelLabel?: string;
+    readonly variant?: DialogVariant;
+}
+export interface AlertOptions {
+    readonly title: string;
+    readonly message: string;
+    readonly acknowledgeLabel?: string;
+    readonly variant?: DialogVariant;
+}
+export type PromptInputType = 'text' | 'password';
+export interface PromptOptions {
+    readonly title: string;
+    /** Explanatory paragraph above the field. */
+    readonly message?: string;
+    /** Label rendered against the input. Defaults to the title. */
+    readonly label?: string;
+    readonly defaultValue?: string;
+    /** `password` masks the value and opts out of autofill/remember. */
+    readonly inputType?: PromptInputType;
+    readonly placeholder?: string;
+    readonly confirmLabel?: string;
+    readonly cancelLabel?: string;
+    /**
+     * A field the operator reads/copies rather than edits (the clipboard
+     * fallback). Rendered unmasked, selected on open, with no validation.
+     */
+    readonly readOnly?: boolean;
+    /**
+     * Returns an error message to REFUSE the value and keep the dialog open, or
+     * `null` to accept. Runs on submit — the dialog is the validation surface, so
+     * a refusal never needs a second `alert`.
+     */
+    readonly validate?: (value: string) => string | null;
+}
+export interface DialogContextValue {
+    readonly confirm: (options: ConfirmOptions) => Promise<boolean>;
+    readonly alert: (options: AlertOptions) => Promise<void>;
+    readonly prompt: (options: PromptOptions) => Promise<string | null>;
 }
 export declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;
+/** An error/notice with a single acknowledge. Replaces `window.alert`. */
+export declare function useAlert(): (options: AlertOptions) => Promise<void>;
+/** One text input with OK/Cancel. Replaces `window.prompt`. */
+export declare function usePrompt(): (options: PromptOptions) => Promise<string | null>;
 export declare function ConfirmDialogProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};
+/**
+ * Promotes `el` to the top layer. jsdom has `<dialog>` but no `showModal`, so
+ * the attribute is the fallback — see the file docblock.
+ */
+export declare function openTopLayer(el: HTMLDialogElement): void;

package/dist/generated/system-hooks.d.ts

@@ -1039,6 +1039,8 @@ export declare const useNotificationRulesUpdateRule: typeof trpc.notificationRul
 export declare const useNotificationRulesDeleteRule: typeof trpc.notificationRules.deleteRule.useMutation;
 /** Generated alias around `trpc.notificationRules.setRuleEnabled.useMutation`. */
 export declare const useNotificationRulesSetRuleEnabled: typeof trpc.notificationRules.setRuleEnabled.useMutation;
+/** Generated alias around `trpc.notificationRules.getClipRetentionAsks.useQuery`. */
+export declare const useNotificationRulesGetClipRetentionAsks: typeof trpc.notificationRules.getClipRetentionAsks.useQuery;
 /** Generated alias around `trpc.notificationRules.listDeviceMutes.useQuery`. */
 export declare const useNotificationRulesListDeviceMutes: typeof trpc.notificationRules.listDeviceMutes.useQuery;
 /** Generated alias around `trpc.notificationRules.setDeviceMuted.useMutation`. */
@@ -1443,6 +1445,8 @@ export declare const usePipelineRunnerGetCameraMetrics: typeof trpc.pipelineRunn
 export declare const usePipelineRunnerGetAllCameraMetrics: typeof trpc.pipelineRunner.getAllCameraMetrics.useQuery;
 /** Generated alias around `trpc.pipelineRunner.getLocalCameras.useQuery`. */
 export declare const usePipelineRunnerGetLocalCameras: typeof trpc.pipelineRunner.getLocalCameras.useQuery;
+/** Generated alias around `trpc.pipelineRunner.requestOccupancyBurst.useMutation`. */
+export declare const usePipelineRunnerRequestOccupancyBurst: typeof trpc.pipelineRunner.requestOccupancyBurst.useMutation;
 /** Generated alias around `trpc.pipelineRunner.getNativeCrop.useQuery`. */
 export declare const usePipelineRunnerGetNativeCrop: typeof trpc.pipelineRunner.getNativeCrop.useQuery;
 /** Generated alias around `trpc.pipelineRunner.runDetailSubtree.useMutation`. */

package/dist/hooks/use-stationary-overlay.d.ts

@@ -1,5 +1,25 @@
 import { StationaryOverlayBox } from '@camstack/types';
-import { UseDeviceProxyTrpc } from './use-device-proxy';
+/**
+ * The ONE route this hook needs.
+ *
+ * Deliberately NOT the device proxy. The proxy exposes only the caps BOUND to
+ * a device, and `zone-analytics` is not one of them — on device 617 the
+ * bindings are `pipeline-analytics` and `motion-zones`. Reading the census
+ * through `dev?.zoneAnalytics?.…` therefore resolved to `undefined`, the hook
+ * returned an empty census, and the overlay drew nothing while reporting
+ * nothing: an unreachable cap was indistinguishable from an empty lot. The cap
+ * ROUTE is mounted system-wide and takes the `deviceId` as input, which is how
+ * every other caller reaches it.
+ */
+export interface UseStationaryOverlayTrpc {
+    readonly zoneAnalytics: {
+        readonly getCurrentSnapshot: {
+            readonly query: (input: {
+                deviceId: number;
+            }) => Promise<unknown>;
+        };
+    };
+}
 interface SnapshotStationary {
     readonly id: string;
     readonly className: string;
@@ -22,5 +42,5 @@ interface SnapshotStationary {
  * reads as a real detection in the wrong place.
  */
 export declare function toStationaryOverlayBox(row: SnapshotStationary): StationaryOverlayBox | null;
-export declare function useStationaryOverlay(trpc: UseDeviceProxyTrpc, deviceId: number | null): readonly StationaryOverlayBox[] | undefined;
+export declare function useStationaryOverlay(trpc: UseStationaryOverlayTrpc, deviceId: number | null): readonly StationaryOverlayBox[] | undefined;
 export {};

package/dist/index.cjs

@@ -6091,6 +6091,8 @@ var useNotificationRulesUpdateRule = trpc.notificationRules.updateRule.useMutati
 var useNotificationRulesDeleteRule = trpc.notificationRules.deleteRule.useMutation;
 /** Generated alias around `trpc.notificationRules.setRuleEnabled.useMutation`. */
 var useNotificationRulesSetRuleEnabled = trpc.notificationRules.setRuleEnabled.useMutation;
+/** Generated alias around `trpc.notificationRules.getClipRetentionAsks.useQuery`. */
+var useNotificationRulesGetClipRetentionAsks = trpc.notificationRules.getClipRetentionAsks.useQuery;
 /** Generated alias around `trpc.notificationRules.listDeviceMutes.useQuery`. */
 var useNotificationRulesListDeviceMutes = trpc.notificationRules.listDeviceMutes.useQuery;
 /** Generated alias around `trpc.notificationRules.setDeviceMuted.useMutation`. */
@@ -6495,6 +6497,8 @@ var usePipelineRunnerGetCameraMetrics = trpc.pipelineRunner.getCameraMetrics.use
 var usePipelineRunnerGetAllCameraMetrics = trpc.pipelineRunner.getAllCameraMetrics.useQuery;
 /** Generated alias around `trpc.pipelineRunner.getLocalCameras.useQuery`. */
 var usePipelineRunnerGetLocalCameras = trpc.pipelineRunner.getLocalCameras.useQuery;
+/** Generated alias around `trpc.pipelineRunner.requestOccupancyBurst.useMutation`. */
+var usePipelineRunnerRequestOccupancyBurst = trpc.pipelineRunner.requestOccupancyBurst.useMutation;
 /** Generated alias around `trpc.pipelineRunner.getNativeCrop.useQuery`. */
 var usePipelineRunnerGetNativeCrop = trpc.pipelineRunner.getNativeCrop.useQuery;
 /** Generated alias around `trpc.pipelineRunner.runDetailSubtree.useMutation`. */
@@ -11269,82 +11273,340 @@ function EventKindGlyph({ iconId, size = 16, color, className }) {
 }
 //#endregion
 //#region src/composites/confirm-dialog.tsx
+/**
+* The ONE modal dialog of the product — confirm, alert and prompt.
+*
+* ## Why all three live here
+*
+* The admin UI used to reach for `window.confirm` / `window.alert` /
+* `window.prompt` wherever a `useConfirm()` call was inconvenient. A native
+* dialog is wrong on three counts, and the operator hit the worst one on
+* Identity → Users: resetting a password opened `window.prompt`, which
+* **cannot mask its input**. A new password was typed in clear text, into a
+* box the browser may offer to remember. On top of that a native dialog
+* matches none of the product's visual language and the host can neither style
+* nor test it.
+*
+* So the fix is not "a password modal" — a second dialog component is the
+* defect, not the cure. The provider that already served every confirm in the
+* admin UI (and in the viewer, which documents its own copy as "deliberately
+* the same one `@camstack/ui-library` exposes to the admin UI") grew two more
+* intents. One provider, one backdrop, one visual language, one set of
+* keyboard rules.
+*
+* ## The three intents are NOT one control
+*
+* - `confirm` — a destructive yes/no. It names what is destroyed, and for the
+*   `danger` variant the destructive button is the NON-default: opening focus
+*   lands on Cancel, so a reflexive Enter cancels.
+* - `alert` — an error/notice with a single acknowledge.
+* - `prompt` — one text input with OK/Cancel. `inputType: 'password'` masks it
+*   (and opts out of autofill/remember); `readOnly` turns it into a readable,
+*   select-all-on-open field, which is the shape the copy-to-clipboard
+*   fallback needs — a password box would be actively wrong there.
+*
+* ## Why the surface is a native `<dialog>`
+*
+* These dialogs open OVER surfaces that are themselves native `<dialog>`s
+* opened with `showModal()` — the event detail panel, the similar-groups
+* modal. A `showModal()` dialog is promoted to the TOP LAYER and everything
+* outside it is inert, so a plain `fixed inset-0` overlay rendered at the app
+* root would be drawn behind that backdrop and could not be clicked at all.
+* Confirming a track delete from the detail panel would have been impossible.
+* So this surface is a `<dialog>` of its own: the top layer stacks, the newest
+* `showModal()` wins, and the confirm sits above the panel that asked for it.
+*
+* jsdom implements `<dialog>` but not `showModal()`, so the open falls back to
+* the `open` attribute there. Everything this component does — focus, keys,
+* resolution — is identical on both paths; only the top-layer promotion, which
+* jsdom cannot model at all, is missing. The fallback is asserted below.
+*
+* ## Focus, and why there is NO focus trap
+*
+* A `showModal()` dialog already scopes the tab ring to itself, and the
+* surfaces underneath (`SlideOverPanel`) implement no trap of their own. A
+* second, hand-rolled focus trap on top of that is how a page becomes
+* unescapable, so this component deliberately does not trap. What it does do:
+*
+* - focuses the input (prompt) or the DEFAULT button on open,
+* - restores focus to the previously focused element on close,
+* - handles Escape/Enter from a `keydown` on the dialog itself and calls
+*   `stopPropagation()`. React attaches its listeners at the root container, so
+*   stopping there keeps the event from reaching the `window` Escape listener
+*   of whatever modal is underneath: one Escape closes ONE dialog.
+*/
 var ConfirmContext = createSharedContext("camstack:confirm-dialog", null);
-function useConfirm() {
+function useDialogContext$1() {
 	const ctx = (0, react$1.useContext)(ConfirmContext);
 	if (!ctx) throw new Error("useConfirm must be used within ConfirmDialogProvider");
-	return ctx.confirm;
+	return ctx;
+}
+function useConfirm() {
+	return useDialogContext$1().confirm;
+}
+/** An error/notice with a single acknowledge. Replaces `window.alert`. */
+function useAlert() {
+	return useDialogContext$1().alert;
+}
+/** One text input with OK/Cancel. Replaces `window.prompt`. */
+function usePrompt() {
+	return useDialogContext$1().prompt;
+}
+var VARIANT_STYLES$2 = {
+	danger: { button: "bg-red-500 hover:bg-red-600 text-white" },
+	warning: { button: "bg-orange-500 hover:bg-orange-600 text-white" },
+	default: { button: "bg-primary hover:bg-primary/90 text-white" }
+};
+var CANCEL_CLASS = "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors";
+function variantOf(state) {
+	if (state.kind === "prompt") return "default";
+	return state.options.variant ?? "default";
+}
+/**
+* Whether the affirmative button is the DEFAULT (initially focused) control.
+* A `danger` confirm says no: the destructive action must be deliberate.
+*/
+function affirmativeIsDefault(state) {
+	return variantOf(state) !== "danger";
 }
 function ConfirmDialogProvider({ children }) {
 	const [dialog, setDialog] = (0, react$1.useState)(null);
-	const confirm = (0, react$1.useCallback)((options) => {
-		return new Promise((resolve) => {
-			setDialog({
-				...options,
-				resolve
-			});
+	const confirm = (0, react$1.useCallback)((options) => new Promise((resolve) => {
+		setDialog({
+			kind: "confirm",
+			options,
+			resolve
+		});
+	}), []);
+	const alert = (0, react$1.useCallback)((options) => new Promise((resolve) => {
+		setDialog({
+			kind: "alert",
+			options,
+			resolve: () => resolve()
 		});
+	}), []);
+	const prompt = (0, react$1.useCallback)((options) => new Promise((resolve) => {
+		setDialog({
+			kind: "prompt",
+			options,
+			resolve
+		});
+	}), []);
+	const close = (0, react$1.useCallback)(() => setDialog(null), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ConfirmContext.Provider, {
+		value: {
+			confirm,
+			alert,
+			prompt
+		},
+		children: [children, dialog && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogSurface, {
+			state: dialog,
+			onClose: close
+		}, dialogKey(dialog))]
+	});
+}
+/**
+* A key that changes per OPENED dialog, so a second dialog opened while one is
+* showing remounts the surface (fresh input value, fresh focus) instead of
+* inheriting the previous one's state.
+*/
+function dialogKey(state) {
+	return `${state.kind}:${state.options.title}`;
+}
+/**
+* Promotes `el` to the top layer. jsdom has `<dialog>` but no `showModal`, so
+* the attribute is the fallback — see the file docblock.
+*/
+function openTopLayer(el) {
+	if (typeof el.showModal === "function") el.showModal();
+	else el.setAttribute("open", "");
+}
+function closeTopLayer(el) {
+	if (!el.open) return;
+	if (typeof el.close === "function") el.close();
+	else el.removeAttribute("open");
+}
+function DialogSurface({ state, onClose }) {
+	const dialogRef = (0, react$1.useRef)(null);
+	const inputRef = (0, react$1.useRef)(null);
+	const defaultButtonRef = (0, react$1.useRef)(null);
+	const settled = (0, react$1.useRef)(false);
+	const [value, setValue] = (0, react$1.useState)(state.kind === "prompt" ? state.options.defaultValue ?? "" : "");
+	const [error, setError] = (0, react$1.useState)(null);
+	(0, react$1.useEffect)(() => {
+		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const el = dialogRef.current;
+		if (el) openTopLayer(el);
+		const input = inputRef.current;
+		if (input) {
+			input.focus();
+			if (state.kind === "prompt" && state.options.readOnly === true) input.select();
+		} else defaultButtonRef.current?.focus();
+		return () => {
+			if (el) closeTopLayer(el);
+			previous?.focus();
+		};
 	}, []);
-	const handleConfirm = () => {
-		dialog?.resolve(true);
-		setDialog(null);
-	};
-	const handleCancel = () => {
-		dialog?.resolve(false);
-		setDialog(null);
-	};
-	const variantStyles = {
-		danger: {
-			icon: "text-red-400",
-			button: "bg-red-500 hover:bg-red-600 text-white"
+	const cancel = (0, react$1.useCallback)(() => {
+		if (settled.current) return;
+		settled.current = true;
+		if (state.kind === "confirm") state.resolve(false);
+		else if (state.kind === "prompt") state.resolve(null);
+		else state.resolve();
+		onClose();
+	}, [state, onClose]);
+	const accept = (0, react$1.useCallback)(() => {
+		if (settled.current) return;
+		if (state.kind === "confirm") {
+			settled.current = true;
+			state.resolve(true);
+			onClose();
+			return;
+		}
+		if (state.kind === "alert") {
+			settled.current = true;
+			state.resolve();
+			onClose();
+			return;
+		}
+		if (state.options.readOnly !== true) {
+			const problem = state.options.validate?.(value) ?? null;
+			if (problem !== null) {
+				setError(problem);
+				inputRef.current?.focus();
+				return;
+			}
+		}
+		settled.current = true;
+		state.resolve(state.options.readOnly === true ? null : value);
+		onClose();
+	}, [
+		state,
+		onClose,
+		value
+	]);
+	const onKeyDown = (0, react$1.useCallback)((e) => {
+		if (e.key === "Escape") {
+			e.stopPropagation();
+			e.preventDefault();
+			cancel();
+			return;
+		}
+		if (e.key !== "Enter") return;
+		if (e.target === inputRef.current) return;
+		if (!affirmativeIsDefault(state)) return;
+		e.stopPropagation();
+		e.preventDefault();
+		accept();
+	}, [
+		state,
+		cancel,
+		accept
+	]);
+	const onSubmit = (0, react$1.useCallback)((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		accept();
+	}, [accept]);
+	const style = VARIANT_STYLES$2[variantOf(state)];
+	const titleId = "camstack-dialog-title";
+	const body = state.kind === "prompt" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PromptBody, {
+		options: state.options,
+		value,
+		error,
+		inputRef,
+		onChange: (next) => {
+			setValue(next);
+			setError(null);
+		}
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "mt-2 text-xs text-foreground-subtle leading-relaxed",
+		children: state.options.message
+	});
+	const footer = state.kind === "alert" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		ref: defaultButtonRef,
+		onClick: accept,
+		className: `px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${style.button}`,
+		children: state.options.acknowledgeLabel ?? "OK"
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		ref: affirmativeIsDefault(state) ? null : defaultButtonRef,
+		onClick: cancel,
+		className: CANCEL_CLASS,
+		children: state.options.cancelLabel ?? "Cancel"
+	}), !(state.kind === "prompt" && state.options.readOnly === true) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: state.kind === "prompt" ? "submit" : "button",
+		ref: affirmativeIsDefault(state) ? defaultButtonRef : null,
+		onClick: state.kind === "prompt" ? void 0 : accept,
+		className: `px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${style.button}`,
+		children: state.options.confirmLabel ?? (state.kind === "prompt" ? "OK" : "Confirm")
+	})] });
+	const inner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "px-5 pt-5 pb-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			id: titleId,
+			className: "text-sm font-semibold text-foreground",
+			children: state.options.title
+		}), body]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-end gap-2 px-5 py-3 border-t border-border bg-surface-hover/30",
+		children: footer
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+		ref: dialogRef,
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		onKeyDown,
+		onCancel: (e) => {
+			e.preventDefault();
+			cancel();
 		},
-		warning: {
-			icon: "text-orange-400",
-			button: "bg-orange-500 hover:bg-orange-600 text-white"
+		onClick: (e) => {
+			if (e.target === e.currentTarget) cancel();
 		},
-		default: {
-			icon: "text-primary",
-			button: "bg-primary hover:bg-primary/90 text-white"
-		}
-	};
-	const style = dialog ? variantStyles[dialog.variant ?? "default"] : variantStyles.default;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ConfirmContext.Provider, {
-		value: { confirm },
-		children: [children, dialog && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "fixed inset-0 z-50 flex items-center justify-center",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
-				onClick: handleCancel
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative z-10 w-full max-w-sm mx-4 rounded-xl border border-border bg-surface shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-150",
-				onClick: (e) => e.stopPropagation(),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "px-5 pt-5 pb-4",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "text-sm font-semibold text-foreground",
-						children: dialog.title
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "mt-2 text-xs text-foreground-subtle leading-relaxed",
-						children: dialog.message
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-end gap-2 px-5 py-3 border-t border-border bg-surface-hover/30",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleCancel,
-						className: "px-3 py-1.5 text-xs font-medium rounded-md border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors",
-						children: dialog.cancelLabel ?? "Cancel"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleConfirm,
-						className: `px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${style.button}`,
-						children: dialog.confirmLabel ?? "Confirm"
-					})]
-				})]
-			})]
-		})]
+		className: "fixed left-1/2 top-1/2 z-50 m-0 w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border border-border bg-surface p-0 text-foreground shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm [&:not([open])]:hidden",
+		children: state.kind === "prompt" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			onSubmit,
+			children: inner
+		}) : inner
 	});
 }
+function PromptBody({ options, value, error, inputRef, onChange }) {
+	const readOnly = options.readOnly === true;
+	const isPassword = !readOnly && options.inputType === "password";
+	const inputId = "camstack-dialog-input";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		options.message !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-2 text-xs text-foreground-subtle leading-relaxed",
+			children: options.message
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			htmlFor: inputId,
+			className: "mt-3 block text-[11px] font-medium text-foreground-subtle",
+			children: options.label ?? options.title
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			id: inputId,
+			ref: inputRef,
+			type: isPassword ? "password" : "text",
+			value,
+			readOnly,
+			placeholder: options.placeholder,
+			onChange: (e) => onChange(e.target.value),
+			onFocus: readOnly ? (e) => e.currentTarget.select() : void 0,
+			autoComplete: isPassword ? "new-password" : "off",
+			autoCorrect: "off",
+			autoCapitalize: "off",
+			spellCheck: false,
+			className: "mt-1 w-full rounded-md border border-border bg-surface px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary"
+		}),
+		error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-1.5 text-[11px] text-red-400",
+			children: error
+		})
+	] });
+}
 //#endregion
 //#region src/contexts/device-context.tsx
 /**
@@ -27977,13 +28239,18 @@ function StationaryBoxes({ boxes }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: boxes.map((b) => {
 		const color = getClassColor(b.className);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "absolute border-2 border-dashed rounded-sm opacity-70",
+			"data-census-box": "",
+			className: "absolute",
 			style: {
 				left: `${String(b.x1 * 100)}%`,
 				top: `${String(b.y1 * 100)}%`,
 				width: `${String((b.x2 - b.x1) * 100)}%`,
 				height: `${String((b.y2 - b.y1) * 100)}%`,
-				borderColor: color
+				borderColor: color,
+				borderWidth: _camstack_types.STATIONARY_OVERLAY_STYLE.borderWidth,
+				borderStyle: _camstack_types.STATIONARY_OVERLAY_STYLE.dashed ? "dashed" : "solid",
+				borderRadius: _camstack_types.STATIONARY_OVERLAY_STYLE.borderRadius,
+				opacity: _camstack_types.STATIONARY_OVERLAY_STYLE.opacity
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "absolute -top-5 left-0 px-1 text-[10px] font-medium rounded-sm whitespace-nowrap",
@@ -27994,19 +28261,12 @@ function StationaryBoxes({ boxes }) {
 				children: [
 					b.label ?? b.className,
 					" · ",
-					formatParkedFor(now - b.becameStationaryAt)
+					(0, _camstack_types.formatParkedFor)(now - b.becameStationaryAt)
 				]
 			})
 		}, b.id);
 	}) });
 }
-/** "3 h", "12 min", "45 s" — coarse on purpose: nobody reads a parked car to
-*  the second, and a ticking label redraws the overlay for nothing. */
-function formatParkedFor(ms) {
-	if (ms < 6e4) return `${String(Math.max(0, Math.round(ms / 1e3)))} s`;
-	if (ms < 36e5) return `${String(Math.round(ms / 6e4))} min`;
-	return `${String(Math.round(ms / 36e5))} h`;
-}
 function DetectionBoxes({ detections, frameWidth, frameHeight }) {
 	if (frameWidth === 0 || frameHeight === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: detections.map((d) => {
@@ -49767,18 +50027,17 @@ function toStationaryOverlayBox(row) {
 	};
 }
 function useStationaryOverlay(trpc, deviceId) {
-	const dev = useDeviceProxy(trpc, deviceId);
-	return (0, _tanstack_react_query.useQuery)({
+	const query = (0, _tanstack_react_query.useQuery)({
 		queryKey: [
 			"zone-analytics",
 			deviceId,
 			"stationaryOverlay"
 		],
-		enabled: deviceId !== null && !!dev,
+		enabled: deviceId !== null,
 		refetchInterval: STATIONARY_POLL_MS,
 		staleTime: STATIONARY_POLL_MS / 2,
 		queryFn: async () => {
-			const rows = (await dev?.zoneAnalytics?.getCurrentSnapshot({ deviceId }))?.stationaryObjects ?? [];
+			const rows = (await trpc.zoneAnalytics.getCurrentSnapshot.query({ deviceId }))?.stationaryObjects ?? [];
 			const out = [];
 			for (const r of rows) {
 				const box = toStationaryOverlayBox(r);
@@ -49786,7 +50045,8 @@ function useStationaryOverlay(trpc, deviceId) {
 			}
 			return out;
 		}
-	}).data;
+	});
+	return query.isError ? void 0 : query.data;
 }
 //#endregion
 //#region src/hooks/turn-server-cache.ts
@@ -50798,6 +51058,7 @@ exports.nextSort = nextSort;
 exports.nextSortDirection = nextSortDirection;
 exports.nextTableSort = nextTableSort;
 exports.normalizeForSearch = normalizeForSearch;
+exports.openTopLayer = openTopLayer;
 exports.overrideEntityIdFromLink = overrideEntityIdFromLink;
 exports.parseRecordedServerMessage = parseRecordedServerMessage;
 exports.providerIcons = providerIcons;
@@ -50882,6 +51143,7 @@ exports.useAlarmPanelArm = useAlarmPanelArm;
 exports.useAlarmPanelDisarm = useAlarmPanelDisarm;
 exports.useAlarmPanelGetStatus = useAlarmPanelGetStatus;
 exports.useAlarmPanelTrigger = useAlarmPanelTrigger;
+exports.useAlert = useAlert;
 exports.useAlertsDismiss = useAlertsDismiss;
 exports.useAlertsEmit = useAlertsEmit;
 exports.useAlertsGetUnreadCount = useAlertsGetUnreadCount;
@@ -51390,6 +51652,7 @@ exports.useNotificationRulesCreateRule = useNotificationRulesCreateRule;
 exports.useNotificationRulesCreateSnooze = useNotificationRulesCreateSnooze;
 exports.useNotificationRulesDeleteRule = useNotificationRulesDeleteRule;
 exports.useNotificationRulesGetAlarmConfig = useNotificationRulesGetAlarmConfig;
+exports.useNotificationRulesGetClipRetentionAsks = useNotificationRulesGetClipRetentionAsks;
 exports.useNotificationRulesGetConditionCatalog = useNotificationRulesGetConditionCatalog;
 exports.useNotificationRulesGetHistory = useNotificationRulesGetHistory;
 exports.useNotificationRulesGetRule = useNotificationRulesGetRule;
@@ -51601,6 +51864,7 @@ exports.usePipelineRunnerGetParkedTrackFrame = usePipelineRunnerGetParkedTrackFr
 exports.usePipelineRunnerParkTrackFrame = usePipelineRunnerParkTrackFrame;
 exports.usePipelineRunnerReleaseParkedTrackFrames = usePipelineRunnerReleaseParkedTrackFrames;
 exports.usePipelineRunnerReportMotion = usePipelineRunnerReportMotion;
+exports.usePipelineRunnerRequestOccupancyBurst = usePipelineRunnerRequestOccupancyBurst;
 exports.usePipelineRunnerRunDetailSubtree = usePipelineRunnerRunDetailSubtree;
 exports.usePipelineRunnerRunStatelessStep = usePipelineRunnerRunStatelessStep;
 exports.usePlateGalleryAssignPlate = usePlateGalleryAssignPlate;
@@ -51631,6 +51895,7 @@ exports.usePrivacyMaskGetOptions = usePrivacyMaskGetOptions;
 exports.usePrivacyMaskGetStatus = usePrivacyMaskGetStatus;
 exports.usePrivacyMaskSetAudioEnabled = usePrivacyMaskSetAudioEnabled;
 exports.usePrivacyMaskSetMask = usePrivacyMaskSetMask;
+exports.usePrompt = usePrompt;
 exports.usePtzAutotrackGetSettings = usePtzAutotrackGetSettings;
 exports.usePtzAutotrackGetStatus = usePtzAutotrackGetStatus;
 exports.usePtzAutotrackSetEnabled = usePtzAutotrackSetEnabled;