@camstack/ui-library 0.1.52 → 0.1.53

package/dist/index.cjs

@@ -37,6 +37,10 @@ let _trpc_client = require("@trpc/client");
 _trpc_client = __toESM(_trpc_client, 1);
 let _trpc_react_query = require("@trpc/react-query");
 _trpc_react_query = __toESM(_trpc_react_query, 1);
+let react_konva = require("react-konva");
+react_konva = __toESM(react_konva, 1);
+let konva = require("konva");
+konva = __toESM(konva, 1);
 let _camstack_types = require("@camstack/types");
 let _camstack_sdk = require("@camstack/sdk");
 let zod = require("zod");
@@ -6875,6 +6879,8 @@ function populateShareCache() {
 	cache.share["@tanstack/react-query"] ??= _tanstack_react_query;
 	cache.share["@trpc/client"] ??= _trpc_client;
 	cache.share["@trpc/react-query"] ??= _trpc_react_query;
+	cache.share["react-konva"] ??= react_konva;
+	cache.share["konva"] ??= konva;
 	cache.share["@camstack/ui-library"] ??= readHostGlobal("__camstackUiLibrary");
 	cache.share["@camstack/sdk"] ??= readHostGlobal("__camstackSdk");
 	cache.share["@camstack/types"] ??= readHostGlobal("__camstackTypes");
@@ -6893,6 +6899,8 @@ function ensureMfHostInit() {
 			"@tanstack/react-query": npmShared(() => _tanstack_react_query),
 			"@trpc/client": npmShared(() => _trpc_client),
 			"@trpc/react-query": npmShared(() => _trpc_react_query),
+			"react-konva": npmShared(() => react_konva),
+			"konva": npmShared(() => konva),
 			"@camstack/ui-library": npmShared(() => readHostGlobal("__camstackUiLibrary")),
 			"@camstack/sdk": npmShared(() => readHostGlobal("__camstackSdk")),
 			"@camstack/types": npmShared(() => readHostGlobal("__camstackTypes"))
@@ -15948,6 +15956,12 @@ var useDecoderPushPacket = trpc.decoder.pushPacket.useQuery;
 var useDecoderOpenStream = trpc.decoder.openStream.useQuery;
 /** Generated alias around `trpc.decoder.pullFrames.useQuery`. */
 var useDecoderPullFrames = trpc.decoder.pullFrames.useQuery;
+/** Generated alias around `trpc.decoder.pullHandles.useQuery`. */
+var useDecoderPullHandles = trpc.decoder.pullHandles.useQuery;
+/** Generated alias around `trpc.decoder.getFrame.useQuery`. */
+var useDecoderGetFrame = trpc.decoder.getFrame.useQuery;
+/** Generated alias around `trpc.decoder.getShmStats.useQuery`. */
+var useDecoderGetShmStats = trpc.decoder.getShmStats.useQuery;
 /** Generated alias around `trpc.decoder.updateConfig.useQuery`. */
 var useDecoderUpdateConfig = trpc.decoder.updateConfig.useQuery;
 /** Generated alias around `trpc.decoder.getStats.useQuery`. */
@@ -16232,6 +16246,12 @@ var useMotionDetectionApplyDeviceSettingsPatch = trpc.motionDetection.applyDevic
 var useMotionTriggerSetMotionTrigger = trpc.motionTrigger.setMotionTrigger.useMutation;
 /** Generated alias around `trpc.motionTrigger.getStatus.useQuery`. */
 var useMotionTriggerGetStatus = trpc.motionTrigger.getStatus.useQuery;
+/** Generated alias around `trpc.motionZones.getOptions.useQuery`. */
+var useMotionZonesGetOptions = trpc.motionZones.getOptions.useQuery;
+/** Generated alias around `trpc.motionZones.setZone.useMutation`. */
+var useMotionZonesSetZone = trpc.motionZones.setZone.useMutation;
+/** Generated alias around `trpc.motionZones.getStatus.useQuery`. */
+var useMotionZonesGetStatus = trpc.motionZones.getStatus.useQuery;
 /** Generated alias around `trpc.mqttBroker.listBrokers.useQuery`. */
 var useMqttBrokerListBrokers = trpc.mqttBroker.listBrokers.useQuery;
 /** Generated alias around `trpc.mqttBroker.getBrokerConfig.useQuery`. */
@@ -16284,6 +16304,8 @@ var useNodesShutdownNode = trpc.nodes.shutdownNode.useMutation;
 var useNodesRenameNode = trpc.nodes.renameNode.useMutation;
 /** Generated alias around `trpc.nodes.clusterAddonStatus.useQuery`. */
 var useNodesClusterAddonStatus = trpc.nodes.clusterAddonStatus.useQuery;
+/** Generated alias around `trpc.nodes.getCapUsageGraph.useQuery`. */
+var useNodesGetCapUsageGraph = trpc.nodes.getCapUsageGraph.useQuery;
 /** Generated alias around `trpc.nodes.getNodeAddons.useQuery`. */
 var useNodesGetNodeAddons = trpc.nodes.getNodeAddons.useQuery;
 /** Generated alias around `trpc.nodes.setProcessLogLevel.useMutation`. */
@@ -16502,10 +16524,18 @@ var usePtzStop = trpc.ptz.stop.useMutation;
 var usePtzGetPresets = trpc.ptz.getPresets.useQuery;
 /** Generated alias around `trpc.ptz.goToPreset.useMutation`. */
 var usePtzGoToPreset = trpc.ptz.goToPreset.useMutation;
+/** Generated alias around `trpc.ptz.savePreset.useMutation`. */
+var usePtzSavePreset = trpc.ptz.savePreset.useMutation;
+/** Generated alias around `trpc.ptz.deletePreset.useMutation`. */
+var usePtzDeletePreset = trpc.ptz.deletePreset.useMutation;
+/** Generated alias around `trpc.ptz.getOptions.useQuery`. */
+var usePtzGetOptions = trpc.ptz.getOptions.useQuery;
 /** Generated alias around `trpc.ptz.goHome.useMutation`. */
 var usePtzGoHome = trpc.ptz.goHome.useMutation;
 /** Generated alias around `trpc.ptz.getPosition.useQuery`. */
 var usePtzGetPosition = trpc.ptz.getPosition.useQuery;
+/** Generated alias around `trpc.ptz.setAutofocus.useMutation`. */
+var usePtzSetAutofocus = trpc.ptz.setAutofocus.useMutation;
 /** Generated alias around `trpc.ptz.getStatus.useQuery`. */
 var usePtzGetStatus = trpc.ptz.getStatus.useQuery;
 /** Generated alias around `trpc.ptzAutotrack.getStatus.useQuery`. */
@@ -16662,8 +16692,18 @@ var useStreamBrokerGetStreamUrl = trpc.streamBroker.getStreamUrl.useQuery;
 var useStreamBrokerGetStreamWithCodec = trpc.streamBroker.getStreamWithCodec.useMutation;
 /** Generated alias around `trpc.streamBroker.releaseStreamWithCodec.useMutation`. */
 var useStreamBrokerReleaseStreamWithCodec = trpc.streamBroker.releaseStreamWithCodec.useMutation;
-/** Generated alias around `trpc.streamBroker.getBroker.useQuery`. */
-var useStreamBrokerGetBroker = trpc.streamBroker.getBroker.useQuery;
+/** Generated alias around `trpc.streamBroker.subscribeAudioChunks.useMutation`. */
+var useStreamBrokerSubscribeAudioChunks = trpc.streamBroker.subscribeAudioChunks.useMutation;
+/** Generated alias around `trpc.streamBroker.pullAudioChunks.useQuery`. */
+var useStreamBrokerPullAudioChunks = trpc.streamBroker.pullAudioChunks.useQuery;
+/** Generated alias around `trpc.streamBroker.unsubscribeAudioChunks.useMutation`. */
+var useStreamBrokerUnsubscribeAudioChunks = trpc.streamBroker.unsubscribeAudioChunks.useMutation;
+/** Generated alias around `trpc.streamBroker.subscribeFrames.useMutation`. */
+var useStreamBrokerSubscribeFrames = trpc.streamBroker.subscribeFrames.useMutation;
+/** Generated alias around `trpc.streamBroker.pullFrameHandles.useQuery`. */
+var useStreamBrokerPullFrameHandles = trpc.streamBroker.pullFrameHandles.useQuery;
+/** Generated alias around `trpc.streamBroker.unsubscribeFrames.useMutation`. */
+var useStreamBrokerUnsubscribeFrames = trpc.streamBroker.unsubscribeFrames.useMutation;
 /** Generated alias around `trpc.streamBroker.setPreBufferDuration.useMutation`. */
 var useStreamBrokerSetPreBufferDuration = trpc.streamBroker.setPreBufferDuration.useMutation;
 /** Generated alias around `trpc.streamBroker.getPreBufferInfo.useQuery`. */
@@ -16686,6 +16726,14 @@ var useStreamBrokerGetDeviceSettingsContribution = trpc.streamBroker.getDeviceSe
 var useStreamBrokerGetDeviceLiveContribution = trpc.streamBroker.getDeviceLiveContribution.useQuery;
 /** Generated alias around `trpc.streamBroker.applyDeviceSettingsPatch.useMutation`. */
 var useStreamBrokerApplyDeviceSettingsPatch = trpc.streamBroker.applyDeviceSettingsPatch.useMutation;
+/** Generated alias around `trpc.streamParams.getOptions.useQuery`. */
+var useStreamParamsGetOptions = trpc.streamParams.getOptions.useQuery;
+/** Generated alias around `trpc.streamParams.setProfile.useMutation`. */
+var useStreamParamsSetProfile = trpc.streamParams.setProfile.useMutation;
+/** Generated alias around `trpc.streamParams.getConfigSchema.useQuery`. */
+var useStreamParamsGetConfigSchema = trpc.streamParams.getConfigSchema.useQuery;
+/** Generated alias around `trpc.streamParams.getStatus.useQuery`. */
+var useStreamParamsGetStatus = trpc.streamParams.getStatus.useQuery;
 /** Generated alias around `trpc.switch.setState.useMutation`. */
 var useSwitchSetState = trpc.switch.setState.useMutation;
 /** Generated alias around `trpc.switch.getStatus.useQuery`. */
@@ -16748,6 +16796,18 @@ var useUserManagementDisableTotp = trpc.userManagement.disableTotp.useMutation;
 var useUserManagementGetTotpStatus = trpc.userManagement.getTotpStatus.useQuery;
 /** Generated alias around `trpc.userManagement.verifyTotp.useMutation`. */
 var useUserManagementVerifyTotp = trpc.userManagement.verifyTotp.useMutation;
+/** Generated alias around `trpc.userManagement.oauthIssueCode.useMutation`. */
+var useUserManagementOauthIssueCode = trpc.userManagement.oauthIssueCode.useMutation;
+/** Generated alias around `trpc.userManagement.oauthExchangeCode.useMutation`. */
+var useUserManagementOauthExchangeCode = trpc.userManagement.oauthExchangeCode.useMutation;
+/** Generated alias around `trpc.userManagement.oauthRefresh.useMutation`. */
+var useUserManagementOauthRefresh = trpc.userManagement.oauthRefresh.useMutation;
+/** Generated alias around `trpc.userManagement.oauthVerifyAccessToken.useQuery`. */
+var useUserManagementOauthVerifyAccessToken = trpc.userManagement.oauthVerifyAccessToken.useQuery;
+/** Generated alias around `trpc.userManagement.listOauthSessions.useQuery`. */
+var useUserManagementListOauthSessions = trpc.userManagement.listOauthSessions.useQuery;
+/** Generated alias around `trpc.userManagement.revokeOauthSession.useMutation`. */
+var useUserManagementRevokeOauthSession = trpc.userManagement.revokeOauthSession.useMutation;
 /** Generated alias around `trpc.webrtcSession.listStreams.useQuery`. */
 var useWebrtcSessionListStreams = trpc.webrtcSession.listStreams.useQuery;
 /** Generated alias around `trpc.webrtcSession.createSession.useMutation`. */
@@ -16791,8 +16851,16 @@ var useZonesUpdateZone = trpc.zones.updateZone.useMutation;
 * `vite.widgets.config.ts`). At runtime we fetch the public list of
 * addon-contributed widgets via `useAddonWidgetsListWidgets()`, register
 * each remote (`registerRemotes`) once, then resolve a widget by
-* loading the exposed `./widgets` module (`loadRemote`) whose default
-* export is a `Record<stableId, ComponentType<WidgetProps>>` map.
+* loading the exposed module (`loadRemote`) whose default export is a
+* `Record<componentKey, ComponentType>` map.
+*
+* Unified UI-contribution model (Task 10) — a widget declaration IS a
+* `UiContribution` with `kind:'remote'`. Both the device-detail path
+* (`ContributionRenderer`) and the dashboard render widgets through the
+* same `loadRemoteBundle` MF path. `loadRemoteBundle` is exported and
+* generic over `(remoteName, exposedModule, entryUrl)` so any
+* `UiContributionRemote` descriptor resolves without an aggregator-keyed
+* lookup.
 *
 * Why MF instead of raw ESM:
 *  - automatic dedup of shared deps (react/react-dom/@tanstack/etc.)
@@ -16802,9 +16870,7 @@ var useZonesUpdateZone = trpc.zones.updateZone.useMutation;
 *    wins by default).
 *  - cross-bundle context invariant preserved automatically: every
 *    remote's `@camstack/ui-library` import resolves to the host's
-*    instance, so `createContext()` references match across bundles
-*    (the duplicate-Context bug that motivated `createSharedContext`
-*    falls out for free).
+*    instance, so `createContext()` references match across bundles.
 *
 * Live-update — listens to `addon.widget-ready` so newly-loaded addons
 * surface their widgets without a manual page reload (the aggregator
@@ -16815,11 +16881,11 @@ var useZonesUpdateZone = trpc.zones.updateZone.useMutation;
 */
 var WidgetRegistryContext = createSharedContext("camstack:widget-registry", null);
 /**
-* Process-global cache for resolved widget bundles, keyed by
-* `remoteName` (every remote exposes a single `./widgets` module whose
-* default export is the `Record<stableId, Component>` map). Survives
-* provider remount — avoids a full re-fetch + re-init of the MF remote
-* when admin-ui's tree cycles.
+* Process-global cache for resolved remote bundles, keyed by
+* `<remoteName>::<exposedModule>`. Each cached value is the exposed
+* module's default-record map (`Record<componentKey, Component>`).
+* Survives provider remount — avoids a full re-fetch + re-init of the
+* MF remote when admin-ui's tree cycles.
 */
 var bundleModuleCache = /* @__PURE__ */ new Map();
 var bundleInflight = /* @__PURE__ */ new Map();
@@ -16831,6 +16897,10 @@ var bundleInflight = /* @__PURE__ */ new Map();
 * update.
 */
 var registeredRemotes = /* @__PURE__ */ new Set();
+/** Cache key for `bundleModuleCache` — one entry per `(remote, module)`. */
+function bundleCacheKey(remoteName, exposedModule) {
+	return `${remoteName}::${exposedModule}`;
+}
 function isRemoteWidgetsModule(value) {
 	if (!value || typeof value !== "object") return false;
 	const def = value.default;
@@ -16839,8 +16909,7 @@ function isRemoteWidgetsModule(value) {
 /**
 * Diagnostic-only string for the "Got: …" tail in the not-a-record
 * error. Returns a JSON-friendly snapshot of the module's keys + proto
-* name without exposing the value itself (the value is the unknown
-* thing the module factory produced, may be huge or contain PII).
+* name without exposing the value itself.
 */
 function describeRemoteShape(mod) {
 	if (!mod || typeof mod !== "object") return typeof mod;
@@ -16854,13 +16923,19 @@ function describeRemoteShape(mod) {
 	};
 }
 /**
-* Register the MF remote (idempotent) and load its `./widgets` module.
-* Returns the resolved `Record<stableId, Component>` map.
+* Register the MF remote (idempotent) and load one of its exposed
+* modules. Returns the resolved `Record<componentKey, Component>` map
+* (the exposed module's `default` export).
+*
+* Exported so the unified `ContributionRenderer` `kind:'remote'` path
+* can load an arbitrary `{ remoteName, exposedModule }` descriptor —
+* the same path the `WidgetRegistry` uses internally for widgets.
 */
-async function loadRemoteBundle(remoteName, entryUrl) {
-	const cached = bundleModuleCache.get(remoteName);
+async function loadRemoteBundle(remoteName, exposedModule, entryUrl) {
+	const cacheKey = bundleCacheKey(remoteName, exposedModule);
+	const cached = bundleModuleCache.get(cacheKey);
 	if (cached) return cached;
-	const inflight = bundleInflight.get(remoteName);
+	const inflight = bundleInflight.get(cacheKey);
 	if (inflight) return inflight;
 	if (!registeredRemotes.has(remoteName)) {
 		ensureMfHostInit();
@@ -16871,22 +16946,26 @@ async function loadRemoteBundle(remoteName, entryUrl) {
 		}], { force: false });
 		registeredRemotes.add(remoteName);
 	}
-	const promise = loadRemote(`${remoteName}/widgets`).then((mod) => {
+	const promise = loadRemote(`${remoteName}/${exposedModule.startsWith("./") ? exposedModule.slice(2) : exposedModule}`).then((mod) => {
 		if (!isRemoteWidgetsModule(mod)) {
 			const shape = describeRemoteShape(mod);
-			throw new Error(`Widget remote ${remoteName} (${entryUrl}) does not expose a default record on './widgets'. Got: ${JSON.stringify(shape)}`);
+			throw new Error(`Remote ${remoteName} (${entryUrl}) does not expose a default record on '${exposedModule}'. Got: ${JSON.stringify(shape)}`);
 		}
 		const map = mod.default;
-		bundleModuleCache.set(remoteName, map);
-		bundleInflight.delete(remoteName);
+		bundleModuleCache.set(cacheKey, map);
+		bundleInflight.delete(cacheKey);
 		return map;
 	}).catch((err) => {
-		bundleInflight.delete(remoteName);
+		bundleInflight.delete(cacheKey);
 		throw err;
 	});
-	bundleInflight.set(remoteName, promise);
+	bundleInflight.set(cacheKey, promise);
 	return promise;
 }
+/** Synchronous peek at the resolved-bundle cache — `undefined` if not yet loaded. */
+function peekBundle(remoteName, exposedModule) {
+	return bundleModuleCache.get(bundleCacheKey(remoteName, exposedModule));
+}
 var BOOT_WINDOW_MS = 3e4;
 var POLL_INTERVAL_MS = 2e3;
 function WidgetRegistryProvider({ children }) {
@@ -16906,21 +16985,24 @@ function WidgetRegistryProvider({ children }) {
 		queryClient.invalidateQueries({ queryKey: [["addonWidgets", "listWidgets"]] });
 	});
 	const [resolvedTick, setResolvedTick] = (0, react$1.useState)(0);
+	const widgets = (0, react$1.useMemo)(() => rawWidgets ?? [], [rawWidgets]);
 	(0, react$1.useEffect)(() => {
-		if (!rawWidgets) return;
+		if (widgets.length === 0) return;
 		let cancelled = false;
-		const seenRemotes = /* @__PURE__ */ new Set();
-		for (const w of rawWidgets) {
-			if (seenRemotes.has(w.remoteName)) continue;
-			seenRemotes.add(w.remoteName);
-			if (bundleModuleCache.has(w.remoteName)) continue;
+		const seen = /* @__PURE__ */ new Set();
+		for (const w of widgets) {
+			const key = bundleCacheKey(w.remote.remoteName, w.remote.exposedModule);
+			if (seen.has(key)) continue;
+			seen.add(key);
+			if (bundleModuleCache.has(key)) continue;
 			const entryUrl = w.bundleUrl;
-			loadRemoteBundle(w.remoteName, entryUrl).then(() => {
+			loadRemoteBundle(w.remote.remoteName, w.remote.exposedModule, entryUrl).then(() => {
 				if (!cancelled) setResolvedTick((t) => t + 1);
 			}).catch((err) => {
 				const reason = err instanceof Error ? err.message : String(err);
 				(typeof globalThis !== "undefined" ? globalThis.console : void 0)?.error?.("[WidgetRegistry] Failed to load widget remote", {
-					remoteName: w.remoteName,
+					remoteName: w.remote.remoteName,
+					exposedModule: w.remote.exposedModule,
 					entryUrl,
 					reason
 				});
@@ -16929,19 +17011,26 @@ function WidgetRegistryProvider({ children }) {
 		return () => {
 			cancelled = true;
 		};
-	}, [rawWidgets]);
+	}, [widgets]);
 	const registry = (0, react$1.useMemo)(() => {
-		const widgets = rawWidgets ?? [];
 		const byId = /* @__PURE__ */ new Map();
-		for (const w of widgets) byId.set(`${w.addonId}/${w.stableId}`, w);
+		const entryUrlByRemote = /* @__PURE__ */ new Map();
+		for (const w of widgets) {
+			byId.set(`${w.addonId}/${w.stableId}`, w);
+			entryUrlByRemote.set(w.remote.remoteName, w.bundleUrl);
+		}
 		const toMetadata = (widgetId, entry) => ({
 			widgetId,
 			addonId: entry.addonId,
 			stableId: entry.stableId,
+			tab: entry.tab,
+			subTab: entry.subTab,
 			label: entry.label,
+			order: entry.order,
+			kind: entry.kind,
+			remote: entry.remote,
 			description: entry.description,
 			icon: entry.icon,
-			remoteName: entry.remoteName,
 			bundleUrl: entry.bundleUrl,
 			hosts: entry.hosts,
 			requires: entry.requires,
@@ -16954,9 +17043,9 @@ function WidgetRegistryProvider({ children }) {
 			resolve: (widgetId) => {
 				const entry = byId.get(widgetId);
 				if (!entry) return void 0;
-				const bundle = bundleModuleCache.get(entry.remoteName);
+				const bundle = peekBundle(entry.remote.remoteName, entry.remote.exposedModule);
 				if (!bundle) return null;
-				const Component = bundle[entry.stableId];
+				const Component = bundle[entry.remote.componentKey ?? entry.stableId];
 				if (!Component) return void 0;
 				return Component;
 			},
@@ -16969,15 +17058,23 @@ function WidgetRegistryProvider({ children }) {
 				const out = [];
 				for (const [widgetId, entry] of byId) out.push(toMetadata(widgetId, entry));
 				return out;
-			}
+			},
+			entryUrlFor: (remoteName) => entryUrlByRemote.get(remoteName)
 		};
-	}, [rawWidgets, resolvedTick]);
+	}, [widgets, resolvedTick]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetRegistryContext.Provider, {
 		value: registry,
 		children
 	});
 }
-/** Returns the registered widget component, `null` while loading, or `undefined` if unknown. */
+/**
+* Returns the registered widget component, `null` while loading, or
+* `undefined` if unknown.
+*
+* @deprecated Unused by all render paths since the unified
+* UI-contribution model (Task 10). Use `useRemoteComponent` /
+* `<WidgetSlot>` instead. Kept for external addons that may import it.
+*/
 function useWidget(widgetId) {
 	return useWidgetRegistry().resolve(widgetId);
 }
@@ -16991,6 +17088,68 @@ function useWidgetMetadata(widgetId) {
 function useAllWidgets() {
 	return useWidgetRegistry().listAll();
 }
+/**
+* Resolve a `kind:'remote'` `UiContributionRemote` descriptor to a
+* React component. Drives the unified `ContributionRenderer`
+* `kind:'remote'` path — both device-detail contributions and dashboard
+* widgets resolve through the same MF `loadRemoteBundle` loader.
+*
+* Returns:
+*  - `undefined` — the remote couldn't be resolved (no entry URL known,
+*    or the remote exposed no component for `componentKey`),
+*  - `null` — the bundle is still loading,
+*  - the component otherwise.
+*
+* `entryUrl` may be passed explicitly; when omitted it's resolved from
+* the registry's aggregator-stamped `bundleUrl` for `remote.remoteName`.
+*/
+function useRemoteComponent(remote, entryUrl) {
+	const reg = useOptionalWidgetRegistry();
+	const resolvedEntryUrl = entryUrl ?? reg?.entryUrlFor(remote.remoteName);
+	const [tick, setTick] = (0, react$1.useState)(0);
+	const [loadFailed, setLoadFailed] = (0, react$1.useState)(false);
+	(0, react$1.useEffect)(() => {
+		if (!resolvedEntryUrl) return;
+		setLoadFailed(false);
+		if (peekBundle(remote.remoteName, remote.exposedModule)) return;
+		let cancelled = false;
+		loadRemoteBundle(remote.remoteName, remote.exposedModule, resolvedEntryUrl).then(() => {
+			if (!cancelled) setTick((t) => t + 1);
+		}).catch((err) => {
+			const reason = err instanceof Error ? err.message : String(err);
+			(typeof globalThis !== "undefined" ? globalThis.console : void 0)?.error?.("[WidgetRegistry] Failed to load remote component", {
+				remoteName: remote.remoteName,
+				exposedModule: remote.exposedModule,
+				entryUrl: resolvedEntryUrl,
+				reason
+			});
+			if (!cancelled) setLoadFailed(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		remote.remoteName,
+		remote.exposedModule,
+		resolvedEntryUrl
+	]);
+	return (0, react$1.useMemo)(() => {
+		if (!resolvedEntryUrl) return void 0;
+		if (loadFailed) return void 0;
+		const bundle = peekBundle(remote.remoteName, remote.exposedModule);
+		if (!bundle) return null;
+		const componentKey = remote.componentKey;
+		if (componentKey === void 0) return Object.values(bundle)[0] ?? void 0;
+		return bundle[componentKey] ?? void 0;
+	}, [
+		remote.remoteName,
+		remote.exposedModule,
+		remote.componentKey,
+		resolvedEntryUrl,
+		tick,
+		loadFailed
+	]);
+}
 /** Read the registry instance — throws when no provider is mounted. */
 function useWidgetRegistry() {
 	const ctx = useOptionalWidgetRegistry();
@@ -17005,163 +17164,1429 @@ function useContextSafe(ctx) {
 	return (0, react$1.useContext)(ctx);
 }
 //#endregion
-//#region src/composites/widget-slot.tsx
+//#region src/hooks/use-ptz.ts
 /**
-* <WidgetSlot> — single host-side mount point for any addon-contributed
-* widget. Consumers reference a widget by its public id
-* (`<addonId>/<stableId>`), the slot looks the component up in the
-* shared `WidgetRegistry`, validates host context against the widget's
-* `requires` metadata, and renders one of:
-*   - skeleton placeholder while the bundle is still loading,
-*   - inline error fallback when the widget id is unknown OR the host
-*     didn't supply a required context (`deviceContext` /
-*     `integrationContext`),
-*   - the resolved component otherwise.
+* usePTZ — PTZ control hook for device-scoped pan / tilt / zoom.
 *
-* The slot is intentionally STUPID — no styling beyond the skeleton/
-* error fallback. Layout (card vs inline, sizing) is the host's
-* responsibility.
+* Wraps the `ptz` capability methods through the canonical
+* `useDeviceProxy` surface — every call goes through
+* `dev.ptz?.<method>(...)` with deviceId/nodeId auto-injected. The
+* hook stays bare-bones around state (`busy`, `error`, `presets`)
+* so the operator-facing component (PTZOverlay) stays trivial.
+*
+* Returns:
+*   - `move(direction)`: discrete one-shot move (cap.move + cap.stop).
+*     Use for short pulse moves triggered by tapping a d-pad button.
+*   - `startContinuous(direction)` / `stopContinuous()`: gesture-driven
+*     continuous motion (`cap.continuousMove` + `cap.stop`). Use for
+*     long-press handlers on touch / mouse-down handlers on desktop.
+*   - `zoom('in' | 'out')`: discrete zoom step.
+*   - `goHome()`: jump to preset 0.
+*   - `presets` + `goToPreset(presetId)`: list and jump to named presets.
+*
+* Parametrised by the same `UseDeviceProxyTrpc` shape every other
+* device hook uses — works under admin-ui (BackendClient.trpc) and
+* addon pages (AddonPageProps.trpc) alike.
 */
-function WidgetSlot(props) {
-	const { widgetId, host = "device-tab", config, deviceId, integrationId, instanceId, size, columns, rows } = props;
-	const Component = useWidget(widgetId);
-	const metadata = useWidgetMetadata(widgetId);
-	const resolvedInstanceId = (0, react$1.useMemo)(() => instanceId ?? widgetId, [instanceId, widgetId]);
-	if (Component === void 0 && metadata === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
-		widgetId,
-		reason: "unknown"
-	});
-	if (Component === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
-		widgetId,
-		reason: "missing-export"
-	});
-	if (Component === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetSkeleton, {});
-	if (metadata) {
-		if (metadata.requires.deviceContext && deviceId === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
-			widgetId,
-			reason: "missing-device-context"
-		});
-		if (metadata.requires.integrationContext && integrationId === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
-			widgetId,
-			reason: "missing-integration-context"
-		});
+var DIRECTION_VECTORS = {
+	"up": {
+		pan: 0,
+		tilt: 1
+	},
+	"down": {
+		pan: 0,
+		tilt: -1
+	},
+	"left": {
+		pan: -1,
+		tilt: 0
+	},
+	"right": {
+		pan: 1,
+		tilt: 0
+	},
+	"up-left": {
+		pan: -1,
+		tilt: 1
+	},
+	"up-right": {
+		pan: 1,
+		tilt: 1
+	},
+	"down-left": {
+		pan: -1,
+		tilt: -1
+	},
+	"down-right": {
+		pan: 1,
+		tilt: -1
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		instanceId: resolvedInstanceId,
-		host,
-		config,
-		deviceId,
-		integrationId,
-		size,
-		columns,
-		rows
-	});
-}
-function WidgetSkeleton() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "rounded-lg border border-border bg-surface/40 p-4 animate-pulse",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-3 w-24 bg-foreground-subtle/20 rounded mb-2" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-foreground-subtle/10 rounded mb-1" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-3/4 bg-foreground-subtle/10 rounded" })
-		]
-	});
-}
-function WidgetMissingError({ widgetId, reason }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
-		children: reason === "unknown" ? `Widget "${widgetId}" not registered` : reason === "missing-export" ? `Widget "${widgetId}" bundle does not export this stableId` : reason === "missing-device-context" ? `Widget "${widgetId}" requires a deviceId` : `Widget "${widgetId}" requires an integrationId`
-	});
-}
-//#endregion
-//#region src/composites/config-form-field.tsx
-var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
-var LABEL_CLASS = "block text-[11px] font-medium text-foreground mb-1";
-var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5";
-function FieldWrapper({ label, description, required, span, children, translationFn }) {
-	const colSpanClass = span === 2 ? "col-span-2" : span === 3 ? "col-span-3" : span === 4 ? "col-span-4" : "col-span-1";
-	const resolvedLabel = resolveLabel(label, translationFn);
-	const resolvedDescription = resolveLabel(description, translationFn);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: colSpanClass,
-		children: [
-			resolvedLabel !== void 0 && resolvedLabel !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: LABEL_CLASS,
-				children: [resolvedLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-danger ml-0.5",
-					children: "*"
-				})]
-			}),
-			children,
-			resolvedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: DESC_CLASS,
-				children: resolvedDescription
-			})
-		]
-	});
-}
-function TextField({ field, value, onChange, disabled, translationFn }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
-		label: field.label,
-		description: field.description,
-		required: field.required,
-		span: field.span,
-		translationFn,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			type: field.inputType ?? "text",
-			className: INPUT_CLASS,
-			value: value === void 0 || value === null ? "" : String(value),
-			placeholder: field.placeholder,
-			maxLength: field.maxLength,
-			pattern: field.pattern,
-			disabled: disabled || field.disabled,
-			onChange: (e) => onChange(e.target.value)
-		})
-	});
-}
-function NumberField({ field, value, onChange, disabled, translationFn }) {
-	const [local, setLocal] = (0, react$1.useState)(value === void 0 || value === null ? "" : String(value));
-	const focusedRef = (0, react$1.useRef)(false);
+};
+function usePTZ(trpc, deviceId, hookOptions) {
+	const defaultSpeed = hookOptions?.defaultSpeed ?? .5;
+	const pulseMs = hookOptions?.pulseMs ?? 250;
+	const enabled = hookOptions?.enabled ?? true;
+	const ptz = useDeviceProxy(trpc, enabled ? deviceId : null)?.ptz;
+	const [presets, setPresets] = (0, react$1.useState)([]);
+	const [options, setOptions] = (0, react$1.useState)(null);
+	const [busy, setBusy] = (0, react$1.useState)(false);
+	const [error, setError] = (0, react$1.useState)(null);
+	const isAbsentProvider = (err) => {
+		const msg = err instanceof Error ? err.message : String(err);
+		return msg.includes("provider not available") || msg.includes("no 'ptz' binding");
+	};
+	const refreshPresets = (0, react$1.useCallback)(async () => {
+		if (!enabled || !ptz) return;
+		try {
+			setPresets(await ptz.getPresets({}));
+		} catch (err) {
+			if (isAbsentProvider(err)) return;
+			setError(err instanceof Error ? err.message : String(err));
+		}
+	}, [ptz, enabled]);
+	const refreshOptions = (0, react$1.useCallback)(async () => {
+		if (!enabled || !ptz) return;
+		try {
+			setOptions(await ptz.getOptions({}));
+		} catch (err) {
+			if (isAbsentProvider(err)) return;
+			setError(err instanceof Error ? err.message : String(err));
+		}
+	}, [ptz, enabled]);
 	(0, react$1.useEffect)(() => {
-		if (focusedRef.current) return;
-		setLocal(value === void 0 || value === null ? "" : String(value));
-	}, [value]);
-	const handleChange = (raw) => {
-		setLocal(raw);
-		if (raw === "" || raw === "-") {
-			onChange(void 0);
+		refreshPresets();
+		refreshOptions();
+	}, [refreshPresets, refreshOptions]);
+	const wrap = (0, react$1.useCallback)(async (fn) => {
+		if (!enabled || !ptz) return void 0;
+		setError(null);
+		setBusy(true);
+		try {
+			return await fn();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
 			return;
+		} finally {
+			setBusy(false);
 		}
-		const parsed = Number(raw);
-		if (Number.isNaN(parsed)) return;
-		onChange(parsed);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
-		label: field.label,
-		description: field.description,
-		required: field.required,
-		span: field.span,
-		translationFn,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: "number",
-				className: INPUT_CLASS,
-				value: local,
-				placeholder: field.placeholder,
-				min: field.min,
-				max: field.max,
-				step: field.step,
-				disabled: disabled || field.disabled,
-				onFocus: () => {
-					focusedRef.current = true;
-				},
-				onBlur: () => {
-					focusedRef.current = false;
-				},
-				onChange: (e) => handleChange(e.target.value)
-			}), field.unit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-foreground-subtle whitespace-nowrap",
+	}, [enabled, ptz]);
+	return {
+		move: (0, react$1.useCallback)(async (direction, speed) => {
+			if (!ptz) return;
+			const v = DIRECTION_VECTORS[direction];
+			const s = speed ?? defaultSpeed;
+			await wrap(async () => {
+				await ptz.move({
+					pan: v.pan,
+					tilt: v.tilt,
+					speed: s
+				});
+				await new Promise((r) => setTimeout(r, pulseMs));
+				await ptz.stop({});
+			});
+		}, [
+			ptz,
+			defaultSpeed,
+			pulseMs,
+			wrap
+		]),
+		startContinuous: (0, react$1.useCallback)(async (direction, speed) => {
+			if (!ptz) return;
+			const v = DIRECTION_VECTORS[direction];
+			const s = speed ?? defaultSpeed;
+			await wrap(() => ptz.continuousMove({
+				pan: v.pan,
+				tilt: v.tilt,
+				speed: s
+			}));
+		}, [
+			ptz,
+			defaultSpeed,
+			wrap
+		]),
+		stopContinuous: (0, react$1.useCallback)(async () => {
+			if (!ptz) return;
+			await wrap(() => ptz.stop({}));
+		}, [ptz, wrap]),
+		zoom: (0, react$1.useCallback)(async (direction, speed) => {
+			if (!ptz) return;
+			const z = direction === "in" ? 1 : -1;
+			const s = speed ?? defaultSpeed;
+			await wrap(async () => {
+				await ptz.move({
+					zoom: z,
+					speed: s
+				});
+				await new Promise((r) => setTimeout(r, pulseMs));
+				await ptz.stop({});
+			});
+		}, [
+			ptz,
+			defaultSpeed,
+			pulseMs,
+			wrap
+		]),
+		goHome: (0, react$1.useCallback)(async () => {
+			if (!ptz) return;
+			await wrap(() => ptz.goHome({}));
+		}, [ptz, wrap]),
+		goToPreset: (0, react$1.useCallback)(async (presetId) => {
+			if (!ptz) return;
+			await wrap(() => ptz.goToPreset({ presetId }));
+		}, [ptz, wrap]),
+		savePreset: (0, react$1.useCallback)(async (name) => {
+			if (!ptz) return void 0;
+			return wrap(async () => {
+				const usedIds = new Set(presets.map((p) => Number(p.id)).filter((n) => Number.isInteger(n) && n >= 0));
+				let nextId = 0;
+				while (usedIds.has(nextId)) nextId += 1;
+				const presetId = String(nextId);
+				await ptz.savePreset({
+					presetId,
+					name
+				});
+				await refreshPresets();
+				return presetId;
+			});
+		}, [
+			ptz,
+			presets,
+			refreshPresets,
+			wrap
+		]),
+		deletePreset: (0, react$1.useCallback)(async (presetId) => {
+			if (!ptz) return;
+			await wrap(async () => {
+				await ptz.deletePreset({ presetId });
+				await refreshPresets();
+			});
+		}, [
+			ptz,
+			refreshPresets,
+			wrap
+		]),
+		presets,
+		refreshPresets,
+		options,
+		busy,
+		error
+	};
+}
+//#endregion
+//#region src/composites/ptz-overlay.tsx
+/**
+* PTZOverlay — pan / tilt / zoom controls.
+*
+* Two visual variants driven by `mode`:
+*   - `'overlay'` (default): translucent dark pill positioned bottom-
+*     right of the camera viewport. Used as `extraOverlay` on the
+*     `CameraStreamPlayer` so operators can drive PTZ without leaving
+*     the live view. Opaque background + subtle ring keeps the d-pad
+*     legible against any frame.
+*   - `'panel'`: full-bleed inside a host container (e.g. the floating
+*     PTZ panel in DeviceDetail). No absolute positioning, no inner
+*     wrapper card — the host's chrome is the only frame. Inherits the
+*     surrounding `bg-surface` so the dark theme reads consistently
+*     instead of the previous always-dark-bubble look.
+*
+* Interaction model is identical across modes: short tap fires a
+* discrete pulse (`move`); long press starts continuous motion until
+* release (`startContinuous` + `stopContinuous` on pointer up).
+*/
+function DPadButton({ direction, icon: Icon, disabled, className, variant, onMove, onStart, onStop }) {
+	const [pressedAt, setPressedAt] = (0, react$1.useState)(null);
+	const [continuous, setContinuous] = (0, react$1.useState)(false);
+	const handlePointerDown = (0, react$1.useCallback)((e) => {
+		if (disabled) return;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		setPressedAt(Date.now());
+		setContinuous(false);
+		const timer = setTimeout(() => {
+			setContinuous(true);
+			onStart(direction);
+		}, 250);
+		e.currentTarget.dataset.timer = String(timer);
+	}, [
+		direction,
+		disabled,
+		onStart
+	]);
+	const handlePointerUp = (0, react$1.useCallback)((e) => {
+		const timerId = Number(e.currentTarget.dataset.timer);
+		if (timerId) clearTimeout(timerId);
+		e.currentTarget.dataset.timer = "";
+		if (continuous) onStop();
+		else if (pressedAt !== null) onMove(direction);
+		setPressedAt(null);
+		setContinuous(false);
+	}, [
+		continuous,
+		direction,
+		onMove,
+		onStop,
+		pressedAt
+	]);
+	const handlePointerCancel = (0, react$1.useCallback)((e) => {
+		const timerId = Number(e.currentTarget.dataset.timer);
+		if (timerId) clearTimeout(timerId);
+		e.currentTarget.dataset.timer = "";
+		if (continuous) onStop();
+		setPressedAt(null);
+		setContinuous(false);
+	}, [continuous, onStop]);
+	const sizeClass = variant === "panel" ? "h-9 w-9" : "h-7 w-7";
+	const iconSizeClass = variant === "panel" ? "h-4 w-4" : "h-3.5 w-3.5";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		disabled,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		className: cn("flex items-center justify-center rounded transition-colors disabled:opacity-40", variant === "panel" ? "text-foreground hover:bg-surface-hover active:bg-surface-hover/80" : "text-white hover:bg-white/15 active:bg-white/25", sizeClass, className),
+		title: direction,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconSizeClass })
+	});
+}
+function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true, showHome = true, className }) {
+	const { move, startContinuous, stopContinuous, zoom, goHome, goToPreset, savePreset, deletePreset, presets, options, busy, error } = controls;
+	const 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 presetManagementVisible = isPanel && (options?.supportsPresets ?? false);
+	const maxPresetsReached = options?.maxPresets !== void 0 && presets.length >= options.maxPresets;
+	const handleSavePreset = (0, react$1.useCallback)(async () => {
+		const name = presetName.trim();
+		if (!name || busy || maxPresetsReached) return;
+		if (await savePreset(name) !== void 0) setPresetName("");
+	}, [
+		presetName,
+		busy,
+		maxPresetsReached,
+		savePreset
+	]);
+	const handleDeletePreset = (0, react$1.useCallback)(async (presetId, label) => {
+		if (!await confirm({
+			title: "Delete preset",
+			message: `Delete PTZ preset "${label}"? This removes it from the camera.`,
+			confirmLabel: "Delete",
+			variant: "danger"
+		})) return;
+		await deletePreset(presetId);
+	}, [confirm, deletePreset]);
+	const containerClass = isPanel ? "flex flex-col items-stretch gap-2 w-full h-full p-3" : "pointer-events-auto absolute top-3 right-3 z-10 flex flex-col items-end gap-2";
+	const rowClass = isPanel ? cn("flex items-center gap-3 rounded-lg p-2", busy && "ring-1 ring-primary/40") : cn("flex items-center gap-2 rounded-lg border border-white/30 bg-zinc-900/90 backdrop-blur-md p-2 shadow-lg shadow-black/40", busy && "ring-1 ring-primary/40");
+	const sideButtonSize = isPanel ? "h-9 w-9" : "h-7 w-7";
+	const sideIconSize = isPanel ? "h-4 w-4" : "h-3.5 w-3.5";
+	const sideButtonHover = isPanel ? "text-foreground hover:bg-surface-hover" : "text-white hover:bg-white/15";
+	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: [
+							/* @__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"
+							})
+						]
+					}),
+					(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", {
+								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",
+									onClick: () => {
+										goToPreset(p.id);
+										setPresetsOpen(false);
+									},
+									disabled: busy,
+									className: cn("flex-1 px-3 py-1.5 text-left text-[10px] disabled:opacity-40", isPanel ? "text-foreground" : "text-white"),
+									children: p.name || p.id
+								}), presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => void handleDeletePreset(p.id, p.name || p.id),
+									disabled: busy,
+									title: `Delete preset ${p.name || p.id}`,
+									className: cn("mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded", "text-foreground-subtle hover:bg-danger/15 hover:text-danger disabled:opacity-40"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3 w-3" })
+								})]
+							}, p.id))
+						})]
+					})
+				]
+			}),
+			presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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"]
+					})]
+				}), 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
+//#region src/composites/cap-settings/PtzPanel.tsx
+/**
+* PtzPanel — live pan/tilt/zoom controls for the `ptz` capability. A
+* cap-settings component (ui-library), mounted as a cap-contributed
+* top-level device-detail tab via the cap-UI contribution mechanism
+* (the `ptz` cap declares `ui: { tab: 'ptz', kind: 'static', ... }`).
+*
+* Consolidates the former admin-ui `PTZPanelContent`: `usePTZ` drives
+* the controls, `PTZOverlay` renders them (`mode='panel'`), and an
+* Autofocus toggle is shown only when `getOptions().hasAutofocus`.
+* Autotrack is its own cap-UI contribution (`ptz-autotrack`), mounted
+* independently by the contribution mechanism — not nested here.
+*/
+/** Autofocus toggle — only mounted when `hasAutofocus`. Reads the cap's
+*  `getStatus().autofocus` and drives `setAutofocus`. */
+function AutofocusToggle({ deviceId }) {
+	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
+	const [enabled, setEnabled] = (0, react$1.useState)(null);
+	const [busy, setBusy] = (0, react$1.useState)(false);
+	(0, react$1.useEffect)(() => {
+		if (!dev) return void 0;
+		let cancelled = false;
+		(async () => {
+			try {
+				const status = await dev.ptz?.getStatus({});
+				if (cancelled || !status) return;
+				setEnabled(status.autofocus);
+			} catch {}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [dev]);
+	const toggle = (0, react$1.useCallback)(async () => {
+		if (!dev?.ptz || enabled === null) return;
+		setBusy(true);
+		try {
+			const next = !enabled;
+			await dev.ptz.setAutofocus({ enabled: next });
+			setEnabled(next);
+		} catch (err) {
+			console.error("ptz.setAutofocus failed", err);
+		} finally {
+			setBusy(false);
+		}
+	}, [dev, enabled]);
+	if (enabled === null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between border-t border-border/40 mt-2 pt-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10.5px] font-semibold text-foreground",
+			children: "Autofocus"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: () => void toggle(),
+			disabled: busy,
+			"aria-pressed": enabled,
+			className: `flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${enabled ? "bg-success/15 text-success hover:bg-success/25" : "bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground"} disabled:opacity-50`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${enabled ? "bg-success" : "bg-foreground-subtle/40"}` }), enabled ? "On" : "Off"]
+		})]
+	});
+}
+function PtzPanel({ deviceId }) {
+	const system = useSystem();
+	const ready = Number.isFinite(deviceId);
+	const controls = usePTZ(system.trpcClient, ready ? deviceId : 0, { enabled: ready });
+	if (!ready) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center h-full text-[11px] text-foreground-subtle italic",
+		children: [
+			"Device #",
+			deviceId,
+			" not loaded."
+		]
+	});
+	const hasAutofocus = controls.options?.hasAutofocus === true;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col h-full overflow-y-auto",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "text-[11px] font-semibold text-foreground-subtle uppercase tracking-wider mb-2",
+				children: "PTZ"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PTZOverlay, {
+				controls,
+				mode: "panel"
+			}),
+			hasAutofocus && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutofocusToggle, { deviceId })
+		]
+	});
+}
+//#endregion
+//#region src/hooks/use-device-autotrack.ts
+/**
+* `useDeviceAutotrack` — typed wrapper around the `ptz-autotrack` cap.
+*
+* Surface:
+*   - `status` — current `{enabled, lastChangedAt, currentSettings}`,
+*      polled at 5s intervals while the hook is mounted.
+*   - `setEnabled(on)` — flip the on/off state.
+*   - `setSettings(partial)` — patch one or more settings keys.
+*   - `isPending` — true while a mutation is in flight.
+*
+* Returns `null` for `status` when the cap isn't available (device
+* doesn't support autotrack) — callers gate render on this OR on the
+* device's `PtzAutotrack` feature flag.
+*/
+function useDeviceAutotrack(deviceId) {
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const statusQuery = usePtzAutotrackGetStatus({ deviceId: deviceId ?? 0 }, {
+		enabled: deviceId !== null && Number.isFinite(deviceId),
+		refetchInterval: 5e3,
+		retry: 1
+	});
+	const setEnabledMutation = usePtzAutotrackSetEnabled({ onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: [["ptzAutotrack"]] });
+	} });
+	const setSettingsMutation = usePtzAutotrackSetSettings({ onSuccess: () => {
+		queryClient.invalidateQueries({ queryKey: [["ptzAutotrack"]] });
+	} });
+	const setEnabled = (0, react$1.useCallback)(async (on) => {
+		if (deviceId === null) return;
+		await setEnabledMutation.mutateAsync({
+			deviceId,
+			enabled: on
+		});
+	}, [deviceId, setEnabledMutation]);
+	const setSettings = (0, react$1.useCallback)(async (patch) => {
+		if (deviceId === null) return;
+		await setSettingsMutation.mutateAsync({
+			deviceId,
+			settings: patch
+		});
+	}, [deviceId, setSettingsMutation]);
+	const errorMsg = (() => {
+		if (statusQuery.error) return statusQuery.error.message;
+		if (setEnabledMutation.error) return setEnabledMutation.error.message;
+		if (setSettingsMutation.error) return setSettingsMutation.error.message;
+		return null;
+	})();
+	return {
+		status: statusQuery.data ?? null,
+		isLoading: statusQuery.isLoading,
+		isPending: setEnabledMutation.isPending || setSettingsMutation.isPending,
+		error: errorMsg,
+		setEnabled,
+		setSettings
+	};
+}
+//#endregion
+//#region src/composites/cap-settings/AutotrackSection.tsx
+/**
+* Autotrack settings card — rendered inside the PTZ panel when the
+* device has `DeviceFeature.PtzAutotrack`. Three knobs (cross-vendor
+* schema): target type, stop delay, disappear delay, plus an enable /
+* disable toggle that drives the `ptz-autotrack` cap directly.
+*
+* Save semantics:
+*   - Toggle (enable/disable) calls `setEnabled` immediately.
+*   - Form fields debounce-save on blur — no explicit Save button.
+*
+* Vendor capability hints:
+*   - The cap's status carries `currentSettings` from the camera's
+*     own GET; rendered on every poll so the operator sees what's
+*     really applied vs what they typed.
+*   - When the firmware ignored a setting, the field stays editable.
+*/
+function AutotrackSection({ deviceId }) {
+	const { status, isLoading, isPending, error, setEnabled, setSettings } = useDeviceAutotrack(Number.isFinite(deviceId) ? deviceId : null);
+	const [draft, setDraft] = (0, react$1.useState)({
+		targetType: "",
+		stopDelaySeconds: 30,
+		disappearDelaySeconds: 15
+	});
+	const [editing, setEditing] = (0, react$1.useState)(false);
+	(0, react$1.useEffect)(() => {
+		if (editing) return;
+		const s = status?.currentSettings;
+		if (!s) return;
+		setDraft({
+			targetType: s.targetType,
+			stopDelaySeconds: s.stopDelaySeconds,
+			disappearDelaySeconds: s.disappearDelaySeconds
+		});
+	}, [status, editing]);
+	if (isLoading && !status) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 px-3 py-2 text-[10.5px] text-foreground-subtle",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }), "Loading autotrack…"]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-t border-border/40 mt-2 pt-2 px-1 space-y-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+					className: "flex items-center gap-1.5 text-[11px] font-semibold text-foreground-subtle uppercase tracking-wider",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Crosshair, { className: "h-3 w-3 text-primary" }), "Autotrack"]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => {
+						setEnabled(!(status?.enabled ?? false));
+					},
+					disabled: isPending,
+					className: `flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${status?.enabled ? "bg-success/15 text-success hover:bg-success/25" : "bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground"} disabled:opacity-50`,
+					"aria-pressed": status?.enabled ?? false,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${status?.enabled ? "bg-success" : "bg-foreground-subtle/40"}` }), status?.enabled ? "Enabled" : "Disabled"]
+				})]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-1.5 rounded-md border border-danger/30 bg-danger/5 px-2 py-1.5 text-[10px] text-danger",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleAlert, { className: "h-3 w-3 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "leading-snug break-words",
+					children: error
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-2 gap-2 px-2",
+				children: [
+					(status?.supportedTargetTypes?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "col-span-2 flex flex-col gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-medium text-foreground-subtle",
+							children: "Target type"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+							value: draft.targetType,
+							onFocus: () => setEditing(true),
+							onChange: (e) => setDraft((d) => ({
+								...d,
+								targetType: e.target.value
+							})),
+							onBlur: () => {
+								setEditing(false);
+								const current = status?.currentSettings?.targetType ?? "";
+								if (draft.targetType !== current) setSettings({ targetType: draft.targetType });
+							},
+							disabled: isPending,
+							className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50",
+							children: (status?.supportedTargetTypes ?? []).map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: opt.value,
+								children: opt.label
+							}, opt.value))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-medium text-foreground-subtle",
+							children: "Stop delay (s)"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "number",
+							min: 0,
+							max: 300,
+							value: draft.stopDelaySeconds,
+							onFocus: () => setEditing(true),
+							onChange: (e) => setDraft((d) => ({
+								...d,
+								stopDelaySeconds: Number(e.target.value) || 0
+							})),
+							onBlur: () => {
+								setEditing(false);
+								const current = status?.currentSettings?.stopDelaySeconds ?? 30;
+								if (draft.stopDelaySeconds !== current) setSettings({ stopDelaySeconds: draft.stopDelaySeconds });
+							},
+							disabled: isPending,
+							className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] font-medium text-foreground-subtle",
+							children: "Disappear delay (s)"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "number",
+							min: 0,
+							max: 300,
+							value: draft.disappearDelaySeconds,
+							onFocus: () => setEditing(true),
+							onChange: (e) => setDraft((d) => ({
+								...d,
+								disappearDelaySeconds: Number(e.target.value) || 0
+							})),
+							onBlur: () => {
+								setEditing(false);
+								const current = status?.currentSettings?.disappearDelaySeconds ?? 15;
+								if (draft.disappearDelaySeconds !== current) setSettings({ disappearDelaySeconds: draft.disappearDelaySeconds });
+							},
+							disabled: isPending,
+							className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "px-2 text-[9.5px] text-foreground-subtle leading-snug italic",
+				children: "Settings save on blur. Vendor support varies — Reolink honours all three; Hikvision honours target type + stop delay only (disappear delay is accepted but ignored at firmware push)."
+			})
+		]
+	});
+}
+//#endregion
+//#region src/contexts/player-overlays.tsx
+/**
+* Player overlay registry — pluggable layers + toolbar buttons for
+* the device-detail live-frame `StreamPanel`.
+*
+* Why a registry: previously `StreamPanelContent` hardcoded each
+* overlay (PTZ, intercom toggle, zone editor) and threaded the
+* editing state by hand. Adding a new feature (audio waveform,
+* detection bbox tracker, recording controls, …) meant another
+* round of plumbing through the host file and StreamPanel's prop
+* surface. The registry lets a sibling component (Detection tab,
+* Live Stats tab, an addon-page extension) declare its own layer
+* imperatively via a hook, and the host renders whatever's
+* registered.
+*
+* Two registries live side-by-side:
+*
+*   1. **layers** — absolute-positioned React nodes drawn over the
+*      video frame (zones polygon canvas, motion bbox overlay,
+*      audio waveform). Rendered ordered by `order` (lower first
+*      → bottom; higher → top); the last-registered layer wins
+*      ties.
+*
+*   2. **toolbar buttons** — controls surfaced in the player's
+*      always-visible toolbar cluster (next to Intercom + Play/Stop).
+*      Each carries an icon, label, controlled `active` flag, and
+*      a click handler. The host (StreamPanel) renders them
+*      uniformly; tone variants stay simple (`'default' | 'primary'`).
+*
+* Lifecycle: hooks register their layer / button on mount and
+* unregister on unmount, so swapping tabs (e.g. leaving Detection)
+* automatically tears down the registration. Re-registering with
+* the same `id` replaces the prior entry — meaning a single hook
+* call can update its overlay/button props on every render without
+* leaking entries.
+*
+* Provider scope: typically wraps the whole device-detail subtree
+* so the StreamPanel + every tab share the same registry. One
+* provider per `deviceId`; switching device IDs unmounts the
+* provider naturally.
+*/
+var PlayerOverlaysStateContext = createSharedContext("camstack:player-overlays-state", null);
+var PlayerOverlaysActionsContext = createSharedContext("camstack:player-overlays-actions", null);
+function PlayerOverlaysProvider({ children }) {
+	const [layers, setLayers] = (0, react$1.useState)(() => /* @__PURE__ */ new Map());
+	const [buttons, setButtons] = (0, react$1.useState)(() => /* @__PURE__ */ new Map());
+	const setLayer = (0, react$1.useCallback)((layer) => {
+		setLayers((prev) => {
+			const next = new Map(prev);
+			next.set(layer.id, layer);
+			return next;
+		});
+	}, []);
+	const removeLayer = (0, react$1.useCallback)((id) => {
+		setLayers((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const setButton = (0, react$1.useCallback)((button) => {
+		setButtons((prev) => {
+			const next = new Map(prev);
+			next.set(button.id, button);
+			return next;
+		});
+	}, []);
+	const removeButton = (0, react$1.useCallback)((id) => {
+		setButtons((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const stateValue = (0, react$1.useMemo)(() => ({
+		layers,
+		buttons
+	}), [layers, buttons]);
+	const actionsValue = (0, react$1.useMemo)(() => ({
+		setLayer,
+		removeLayer,
+		setButton,
+		removeButton
+	}), [
+		setLayer,
+		removeLayer,
+		setButton,
+		removeButton
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayerOverlaysStateContext.Provider, {
+		value: stateValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayerOverlaysActionsContext.Provider, {
+			value: actionsValue,
+			children
+		})
+	});
+}
+/** Snapshot of registered layers ordered by `order` (asc, ties resolved
+*  by insertion order of the underlying Map). Returns `[]` outside a
+*  provider. */
+function usePlayerOverlayLayers() {
+	const state = (0, react$1.useContext)(PlayerOverlaysStateContext);
+	return (0, react$1.useMemo)(() => {
+		if (!state) return [];
+		return [...state.layers.values()].sort((a, b) => a.order - b.order);
+	}, [state]);
+}
+/** Snapshot of registered toolbar buttons, ordered by `order` (asc). */
+function usePlayerToolbarButtons() {
+	const state = (0, react$1.useContext)(PlayerOverlaysStateContext);
+	return (0, react$1.useMemo)(() => {
+		if (!state) return [];
+		return [...state.buttons.values()].sort((a, b) => a.order - b.order);
+	}, [state]);
+}
+/**
+* Register an overlay layer for the lifetime of the calling component.
+* Re-registers on every render with the latest spec; auto-unregisters
+* on unmount. Pass `null` to skip registration when the layer is
+* conditionally enabled (the hook still runs every render — keeps
+* react-hook order stable across spec === null toggles).
+*
+* Callers that build the spec inline should memoise it (`useMemo`)
+* to avoid re-registering on every parent render — context-write
+* effects depend on referential equality of the spec object.
+*/
+function usePlayerOverlayLayer(spec) {
+	const actions = (0, react$1.useContext)(PlayerOverlaysActionsContext);
+	(0, react$1.useEffect)(() => {
+		if (!actions || !spec) return void 0;
+		actions.setLayer(spec);
+		return () => actions.removeLayer(spec.id);
+	}, [actions, spec]);
+}
+/** Same shape as `usePlayerOverlayLayer`, scoped to toolbar buttons. */
+function usePlayerToolbarButton(spec) {
+	const actions = (0, react$1.useContext)(PlayerOverlaysActionsContext);
+	(0, react$1.useEffect)(() => {
+		if (!actions || !spec) return void 0;
+		actions.setButton(spec);
+		return () => actions.removeButton(spec.id);
+	}, [actions, spec]);
+}
+//#endregion
+//#region src/composites/cap-settings/MotionGridCanvas.tsx
+/**
+* MotionGridCanvas — the on-frame motion-zone grid editor.
+*
+* This component is *only* the editable lattice painted over the live
+* frame: a plain CSS-grid of `gridWidth × gridHeight` cells. It carries
+* NO controls — enabled / sensitivity / save / quick-actions all live
+* in the management bar inside the settings section (`MotionZonesTab`),
+* so the live frame stays unobstructed.
+*
+* Interaction:
+*   - Click a cell → toggle it.
+*   - Press + drag → paint every touched cell to whatever the
+*     first-touched cell flipped TO (the standard grid-mask gesture).
+*
+* Purely controlled — every change is forwarded through `onCellsChange`;
+* the owning `MotionZonesTab` keeps the single source of truth.
+*/
+function MotionGridCanvas({ options, cells, onCellsChange }) {
+	const { gridWidth, gridHeight } = options;
+	const total = gridWidth * gridHeight;
+	const paintingRef = (0, react$1.useRef)(false);
+	const paintValueRef = (0, react$1.useRef)(true);
+	const paintedRef = (0, react$1.useRef)(/* @__PURE__ */ new Set());
+	const [, forceTick] = (0, react$1.useState)(0);
+	const applyCell = (0, react$1.useCallback)((index, value) => {
+		if (index < 0 || index >= total) return;
+		if (cells[index] === value) return;
+		const next = [...cells];
+		while (next.length < total) next.push(false);
+		next.length = total;
+		next[index] = value;
+		onCellsChange(next);
+	}, [
+		cells,
+		total,
+		onCellsChange
+	]);
+	const handlePointerDown = (0, react$1.useCallback)((index) => (e) => {
+		e.preventDefault();
+		const nextValue = !cells[index];
+		paintingRef.current = true;
+		paintValueRef.current = nextValue;
+		paintedRef.current = new Set([index]);
+		applyCell(index, nextValue);
+		forceTick((t) => t + 1);
+	}, [cells, applyCell]);
+	const handlePointerEnter = (0, react$1.useCallback)((index) => () => {
+		if (!paintingRef.current) return;
+		if (paintedRef.current.has(index)) return;
+		paintedRef.current.add(index);
+		applyCell(index, paintValueRef.current);
+	}, [applyCell]);
+	const endPaint = (0, react$1.useCallback)(() => {
+		if (!paintingRef.current) return;
+		paintingRef.current = false;
+		paintedRef.current = /* @__PURE__ */ new Set();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "absolute inset-0 select-none grid",
+		style: {
+			gridTemplateColumns: `repeat(${String(gridWidth)}, 1fr)`,
+			gridTemplateRows: `repeat(${String(gridHeight)}, 1fr)`
+		},
+		onPointerUp: endPaint,
+		onPointerLeave: endPaint,
+		children: Array.from({ length: total }, (_, i) => {
+			const active = cells[i] === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": `motion cell ${String(i)}`,
+				"aria-pressed": active,
+				onPointerDown: handlePointerDown(i),
+				onPointerEnter: handlePointerEnter(i),
+				className: active ? "border border-primary/70 bg-primary/55 hover:bg-primary/65 transition-colors" : "border border-white/25 bg-white/10 hover:bg-white/20 transition-colors"
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/composites/cap-settings/MotionZonesSettings.tsx
+/**
+* MotionZonesSettings — management surface for the on-camera
+* `motion-zones` capability. A cap-settings component (ui-library),
+* mounted into the device-detail Config tab via the cap-UI
+* contribution mechanism (the `motion-zones` cap declares a `ui` block).
+*
+* Split of concerns (mirrors the analytics zones drawer):
+*   - The editable GRID is painted over the live frame by
+*     `MotionGridCanvas`, registered as a player-overlay layer only
+*     while the operator has toggled "Edit grid" on (OFF by default).
+*   - Every CONTROL lives here, in the settings section, NOT on the
+*     frame: a quick-action bar (All on / All off / Invert), Save /
+*     Revert, and the cell-count status.
+*   - Detection enable + sensitivity are NOT edited here — they are
+*     the camera's on-board motion master switch, owned by the
+*     driver's "On-camera motion" settings section. The grid editor
+*     only paints the mask (`setZone` with a `cells`-only patch;
+*     enable / sensitivity are left untouched camera-side).
+*
+* The grid editor draws nothing on cameras without the `motion-zones`
+* cap — the fetch self-gates on a failed `getOptions`.
+*/
+/** "Camera doesn't expose the cap" — swallow so the editor stays
+*  hidden on unsupported devices (mirrors `usePTZ`'s gate). */
+function isAbsentProvider(err) {
+	const msg = err instanceof Error ? err.message : String(err);
+	return msg.includes("provider not available") || msg.includes("motion-zones");
+}
+/** Coerce an arbitrary `cells` array to exactly `gridWidth*gridHeight`. */
+function normaliseCells(cells, options) {
+	const total = options.gridWidth * options.gridHeight;
+	const next = new Array(total);
+	for (let i = 0; i < total; i += 1) next[i] = cells[i] === true;
+	return next;
+}
+function cellsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+	return true;
+}
+function MotionZonesSettings({ deviceId }) {
+	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
+	const [options, setOptions] = (0, react$1.useState)(null);
+	const [unsupported, setUnsupported] = (0, react$1.useState)(false);
+	const [cells, setCells] = (0, react$1.useState)(null);
+	const [committed, setCommitted] = (0, react$1.useState)(null);
+	const [saving, setSaving] = (0, react$1.useState)(false);
+	const [editingGrid, setEditingGrid] = (0, react$1.useState)(false);
+	const seededRef = (0, react$1.useRef)(false);
+	(0, react$1.useEffect)(() => {
+		if (!dev) return void 0;
+		let cancelled = false;
+		(async () => {
+			try {
+				const opts = await dev.motionZones?.getOptions({});
+				if (cancelled || !opts) return;
+				setOptions(opts);
+				if (seededRef.current) return;
+				const status = await dev.motionZones?.getStatus({});
+				if (cancelled || !status) return;
+				seededRef.current = true;
+				const norm = normaliseCells(status.cells, opts);
+				setCommitted(norm);
+				setCells(norm);
+			} catch (err) {
+				if (cancelled) return;
+				if (isAbsentProvider(err)) setUnsupported(true);
+				else console.error("motion-zones load failed", err);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [dev]);
+	const dirty = (0, react$1.useMemo)(() => cells !== null && committed !== null && !cellsEqual(cells, committed), [cells, committed]);
+	const activeCount = (0, react$1.useMemo)(() => cells ? cells.reduce((n, c) => c ? n + 1 : n, 0) : 0, [cells]);
+	const total = options ? options.gridWidth * options.gridHeight : 0;
+	const setAll = (0, react$1.useCallback)((value) => {
+		if (total > 0) setCells(new Array(total).fill(value));
+	}, [total]);
+	const invert = (0, react$1.useCallback)(() => {
+		setCells((prev) => prev ? prev.map((c) => !c) : prev);
+	}, []);
+	const revert = (0, react$1.useCallback)(() => {
+		if (committed) setCells([...committed]);
+	}, [committed]);
+	const save = (0, react$1.useCallback)(async () => {
+		if (!cells || !dev?.motionZones || !options) return;
+		setSaving(true);
+		try {
+			await dev.motionZones.setZone({ patch: { cells: [...cells] } });
+			const fresh = await dev.motionZones.getStatus({});
+			if (fresh) {
+				const norm = normaliseCells(fresh.cells, options);
+				setCommitted(norm);
+				setCells(norm);
+			}
+		} catch (err) {
+			console.error("motion-zones.setZone failed", err);
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		cells,
+		dev,
+		options
+	]);
+	usePlayerOverlayLayer((0, react$1.useMemo)(() => editingGrid && !unsupported && options && cells ? {
+		id: "motion-zones",
+		order: 110,
+		node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionGridCanvas, {
+			options,
+			cells,
+			onCellsChange: setCells
+		})
+	} : null, [
+		editingGrid,
+		unsupported,
+		options,
+		cells
+	]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "text-[11px] font-semibold text-foreground-subtle uppercase tracking-wider",
+			children: "Motion Zones"
+		}), unsupported ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `${TEXT_HINT} leading-relaxed`,
+			children: "This camera doesn't expose an on-board motion-detection grid."
+		}) : !(!unsupported && options !== null && cells !== null) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `${TEXT_HINT} leading-relaxed`,
+			children: "Loading the camera's motion grid…"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: `${TEXT_HINT} leading-relaxed`,
+			children: [
+				"Toggle",
+				" ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: "text-foreground",
+					children: "Edit grid"
+				}),
+				" to paint the region the camera watches for motion directly on the live frame, then ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: "text-foreground",
+					children: "Save"
+				}),
+				" to push the mask to the camera. Detection on/off and sensitivity are set in the",
+				" ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: "text-foreground",
+					children: "On-camera motion"
+				}),
+				" section."
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 flex-wrap",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setEditingGrid((v) => !v),
+					disabled: saving,
+					"aria-pressed": editingGrid,
+					className: editingGrid ? "rounded-md border border-primary/50 bg-primary/15 px-2.5 py-1 text-[11px] font-medium text-primary hover:bg-primary/25 disabled:opacity-40 transition-colors" : "rounded-md border border-border bg-surface px-2.5 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: editingGrid ? "Done editing" : "Edit grid"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setAll(true),
+					disabled: saving,
+					className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: "All on"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setAll(false),
+					disabled: saving,
+					className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: "All off"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: invert,
+					disabled: saving,
+					className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: "Invert"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: `${TEXT_HINT} ml-1 tabular-nums`,
+					children: [
+						activeCount,
+						" / ",
+						total,
+						" cells · ",
+						options.gridWidth,
+						"×",
+						options.gridHeight
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: revert,
+					disabled: saving || !dirty,
+					className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: "Revert"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => void save(),
+					disabled: saving || !dirty,
+					className: "rounded-md border border-primary/50 bg-primary/15 px-2.5 py-1 text-[11px] font-medium text-primary hover:bg-primary/25 disabled:opacity-40 transition-colors",
+					children: saving ? "Saving…" : "Save"
+				})
+			]
+		})] })]
+	});
+}
+//#endregion
+//#region src/widgets/host-widgets.ts
+/** Host widgets — ui-library React components embeddable as a
+*  `type:'widget'` ConfigField. `WidgetSlot` resolves these BEFORE the
+*  Module-Federation `WidgetRegistry`. ids are namespaced `host/<name>`. */
+var HOST_WIDGETS = {
+	"host/motion-zones-grid": MotionZonesSettings,
+	"host/ptz-panel": PtzPanel,
+	"host/ptz-autotrack": AutotrackSection
+};
+//#endregion
+//#region src/composites/widget-slot.tsx
+/**
+* <WidgetSlot> — single host-side mount point for any addon-contributed
+* widget. Consumers reference a widget by its public id
+* (`<addonId>/<stableId>`), the slot looks the widget's metadata up in
+* the shared `WidgetRegistry`, resolves the component through the
+* unified `useRemoteComponent` Module-Federation loader (the SAME path
+* `ContributionRenderer`'s `kind:'remote'` branch uses), validates host
+* context against the widget's `requires` metadata, and renders one of:
+*   - skeleton placeholder while the bundle is still loading,
+*   - inline error fallback when the widget id is unknown OR the host
+*     didn't supply a required context (`deviceContext` /
+*     `integrationContext`),
+*   - the resolved component otherwise.
+*
+* The slot is intentionally STUPID — no styling beyond the skeleton/
+* error fallback. Layout (card vs inline, sizing) is the host's
+* responsibility.
+*/
+function WidgetSlot(props) {
+	const { widgetId, deviceId } = props;
+	const HostComponent = HOST_WIDGETS[widgetId];
+	if (HostComponent !== void 0) {
+		if (deviceId === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
+			widgetId,
+			reason: "missing-device-context"
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HostComponent, { deviceId });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RemoteWidgetSlot, { ...props });
+}
+/**
+* Module-Federation remote-widget path — looks the widget's metadata up
+* in the shared `WidgetRegistry` and resolves it through `useRemoteComponent`.
+*/
+function RemoteWidgetSlot(props) {
+	const { widgetId } = props;
+	const metadata = useWidgetMetadata(widgetId);
+	if (metadata === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
+		widgetId,
+		reason: "unknown"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResolvedWidgetSlot, {
+		...props,
+		metadata
+	});
+}
+/**
+* Inner host — resolves the widget component through the unified
+* `useRemoteComponent` MF loader (shared with `ContributionRenderer`'s
+* `kind:'remote'` branch). Mounted only once a `metadata` descriptor is
+* known, so the hook always receives a valid `remote` descriptor.
+*/
+function ResolvedWidgetSlot(props) {
+	const { widgetId, host = "device-tab", config, deviceId, integrationId, instanceId, size, columns, rows, metadata } = props;
+	const Component = useRemoteComponent(metadata.remote, metadata.bundleUrl);
+	const resolvedInstanceId = (0, react$1.useMemo)(() => instanceId ?? widgetId, [instanceId, widgetId]);
+	if (Component === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetSkeleton, {});
+	if (Component === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
+		widgetId,
+		reason: "missing-export"
+	});
+	if (metadata.requires.deviceContext && deviceId === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
+		widgetId,
+		reason: "missing-device-context"
+	});
+	if (metadata.requires.integrationContext && integrationId === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetMissingError, {
+		widgetId,
+		reason: "missing-integration-context"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		instanceId: resolvedInstanceId,
+		host,
+		config,
+		deviceId,
+		integrationId,
+		size,
+		columns,
+		rows
+	});
+}
+function WidgetSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rounded-lg border border-border bg-surface/40 p-4 animate-pulse",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-3 w-24 bg-foreground-subtle/20 rounded mb-2" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-foreground-subtle/10 rounded mb-1" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-2 w-3/4 bg-foreground-subtle/10 rounded" })
+		]
+	});
+}
+function WidgetMissingError({ widgetId, reason }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning",
+		children: reason === "unknown" ? `Widget "${widgetId}" not registered` : reason === "missing-export" ? `Widget "${widgetId}" bundle does not export this stableId` : reason === "missing-device-context" ? `Widget "${widgetId}" requires a deviceId` : `Widget "${widgetId}" requires an integrationId`
+	});
+}
+//#endregion
+//#region src/composites/config-form-field.tsx
+var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
+var LABEL_CLASS = "block text-[11px] font-medium text-foreground mb-1";
+var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5";
+function FieldWrapper({ label, description, required, span, children, translationFn }) {
+	const colSpanClass = span === 2 ? "col-span-2" : span === 3 ? "col-span-3" : span === 4 ? "col-span-4" : "col-span-1";
+	const resolvedLabel = resolveLabel(label, translationFn);
+	const resolvedDescription = resolveLabel(description, translationFn);
+	const hasLabel = resolvedLabel !== void 0 && resolvedLabel !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${colSpanClass} min-w-0`,
+		children: [
+			hasLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: LABEL_CLASS,
+				children: [resolvedLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-danger ml-0.5",
+					children: "*"
+				})]
+			}),
+			children,
+			resolvedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: DESC_CLASS,
+				children: resolvedDescription
+			})
+		]
+	});
+}
+function TextField({ field, value, onChange, disabled, translationFn }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
+		label: field.label,
+		description: field.description,
+		required: field.required,
+		span: field.span,
+		translationFn,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: field.inputType ?? "text",
+			className: INPUT_CLASS,
+			value: value === void 0 || value === null ? "" : String(value),
+			placeholder: field.placeholder,
+			maxLength: field.maxLength,
+			pattern: field.pattern,
+			disabled: disabled || field.disabled,
+			onChange: (e) => onChange(e.target.value)
+		})
+	});
+}
+function NumberField({ field, value, onChange, disabled, translationFn }) {
+	const [local, setLocal] = (0, react$1.useState)(value === void 0 || value === null ? "" : String(value));
+	const focusedRef = (0, react$1.useRef)(false);
+	(0, react$1.useEffect)(() => {
+		if (focusedRef.current) return;
+		setLocal(value === void 0 || value === null ? "" : String(value));
+	}, [value]);
+	const handleChange = (raw) => {
+		setLocal(raw);
+		if (raw === "" || raw === "-") {
+			onChange(void 0);
+			return;
+		}
+		const parsed = Number(raw);
+		if (Number.isNaN(parsed)) return;
+		onChange(parsed);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
+		label: field.label,
+		description: field.description,
+		required: field.required,
+		span: field.span,
+		translationFn,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				className: INPUT_CLASS,
+				value: local,
+				placeholder: field.placeholder,
+				min: field.min,
+				max: field.max,
+				step: field.step,
+				disabled: disabled || field.disabled,
+				onFocus: () => {
+					focusedRef.current = true;
+				},
+				onBlur: () => {
+					focusedRef.current = false;
+				},
+				onChange: (e) => handleChange(e.target.value)
+			}), field.unit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-foreground-subtle whitespace-nowrap",
 				children: field.unit
 			})]
 		})
@@ -18270,18 +19695,12 @@ function AddonActionButtonField({ field, values, disabled, onAction }) {
 }
 function WidgetField({ field }) {
 	const deviceId = useDeviceId();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
-		label: field.label,
-		description: field.description,
-		required: field.required,
-		span: field.span,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetSlot, {
-			widgetId: field.widgetId,
-			host: "device-tab",
-			config: field.widgetConfig,
-			deviceId: deviceId ?? void 0,
-			instanceId: field.key
-		})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetSlot, {
+		widgetId: field.widgetId,
+		host: "device-tab",
+		config: field.widgetConfig,
+		deviceId: deviceId ?? void 0,
+		instanceId: field.key
 	});
 }
 function formatReadonlyValue(value, unit) {
@@ -18772,7 +20191,7 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 * + patch loop. `onAfterChange` fires once the patch is applied so
 * consumers can re-read any derived state.
 */
-var Chevron = ({ open }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+var Chevron$1 = ({ open }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	className: `h-3 w-3 transition-transform ${open ? "rotate-90" : ""}`,
 	viewBox: "0 0 24 24",
 	fill: "none",
@@ -18937,7 +20356,7 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 			className: "w-full px-4 py-2 flex items-center gap-2 hover:bg-surface-hover text-left",
 			"aria-expanded": open,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { open }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron$1, { open }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 					className: "text-xs font-semibold text-foreground uppercase tracking-wide flex-1",
 					children: title ?? addonId
@@ -19507,184 +20926,38 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 							className: "h-3.5 w-3.5",
 							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "2",
-							strokeLinecap: "round",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" })
-						})
-					})]
-				})]
-			})
-		]
-	});
-}
-function ToolbarButton$1({ onClick, title, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		onClick,
-		title,
-		className: "rounded-full p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition-colors",
-		children
-	});
-}
-async function waitForIceGathering(pc) {
-	if (pc.iceGatheringState === "complete") return;
-	return new Promise((resolve) => {
-		const handler = () => {
-			if (pc.iceGatheringState === "complete") {
-				pc.removeEventListener("icegatheringstatechange", handler);
-				resolve();
-			}
-		};
-		pc.addEventListener("icegatheringstatechange", handler);
-		setTimeout(resolve, 5e3);
-	});
-}
-//#endregion
-//#region src/contexts/player-overlays.tsx
-/**
-* Player overlay registry — pluggable layers + toolbar buttons for
-* the device-detail live-frame `StreamPanel`.
-*
-* Why a registry: previously `StreamPanelContent` hardcoded each
-* overlay (PTZ, intercom toggle, zone editor) and threaded the
-* editing state by hand. Adding a new feature (audio waveform,
-* detection bbox tracker, recording controls, …) meant another
-* round of plumbing through the host file and StreamPanel's prop
-* surface. The registry lets a sibling component (Detection tab,
-* Live Stats tab, an addon-page extension) declare its own layer
-* imperatively via a hook, and the host renders whatever's
-* registered.
-*
-* Two registries live side-by-side:
-*
-*   1. **layers** — absolute-positioned React nodes drawn over the
-*      video frame (zones polygon canvas, motion bbox overlay,
-*      audio waveform). Rendered ordered by `order` (lower first
-*      → bottom; higher → top); the last-registered layer wins
-*      ties.
-*
-*   2. **toolbar buttons** — controls surfaced in the player's
-*      always-visible toolbar cluster (next to Intercom + Play/Stop).
-*      Each carries an icon, label, controlled `active` flag, and
-*      a click handler. The host (StreamPanel) renders them
-*      uniformly; tone variants stay simple (`'default' | 'primary'`).
-*
-* Lifecycle: hooks register their layer / button on mount and
-* unregister on unmount, so swapping tabs (e.g. leaving Detection)
-* automatically tears down the registration. Re-registering with
-* the same `id` replaces the prior entry — meaning a single hook
-* call can update its overlay/button props on every render without
-* leaking entries.
-*
-* Provider scope: typically wraps the whole device-detail subtree
-* so the StreamPanel + every tab share the same registry. One
-* provider per `deviceId`; switching device IDs unmounts the
-* provider naturally.
-*/
-var PlayerOverlaysStateContext = createSharedContext("camstack:player-overlays-state", null);
-var PlayerOverlaysActionsContext = createSharedContext("camstack:player-overlays-actions", null);
-function PlayerOverlaysProvider({ children }) {
-	const [layers, setLayers] = (0, react$1.useState)(() => /* @__PURE__ */ new Map());
-	const [buttons, setButtons] = (0, react$1.useState)(() => /* @__PURE__ */ new Map());
-	const setLayer = (0, react$1.useCallback)((layer) => {
-		setLayers((prev) => {
-			const next = new Map(prev);
-			next.set(layer.id, layer);
-			return next;
-		});
-	}, []);
-	const removeLayer = (0, react$1.useCallback)((id) => {
-		setLayers((prev) => {
-			if (!prev.has(id)) return prev;
-			const next = new Map(prev);
-			next.delete(id);
-			return next;
-		});
-	}, []);
-	const setButton = (0, react$1.useCallback)((button) => {
-		setButtons((prev) => {
-			const next = new Map(prev);
-			next.set(button.id, button);
-			return next;
-		});
-	}, []);
-	const removeButton = (0, react$1.useCallback)((id) => {
-		setButtons((prev) => {
-			if (!prev.has(id)) return prev;
-			const next = new Map(prev);
-			next.delete(id);
-			return next;
-		});
-	}, []);
-	const stateValue = (0, react$1.useMemo)(() => ({
-		layers,
-		buttons
-	}), [layers, buttons]);
-	const actionsValue = (0, react$1.useMemo)(() => ({
-		setLayer,
-		removeLayer,
-		setButton,
-		removeButton
-	}), [
-		setLayer,
-		removeLayer,
-		setButton,
-		removeButton
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayerOverlaysStateContext.Provider, {
-		value: stateValue,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayerOverlaysActionsContext.Provider, {
-			value: actionsValue,
-			children
-		})
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" })
+						})
+					})]
+				})]
+			})
+		]
 	});
 }
-/** Snapshot of registered layers ordered by `order` (asc, ties resolved
-*  by insertion order of the underlying Map). Returns `[]` outside a
-*  provider. */
-function usePlayerOverlayLayers() {
-	const state = (0, react$1.useContext)(PlayerOverlaysStateContext);
-	return (0, react$1.useMemo)(() => {
-		if (!state) return [];
-		return [...state.layers.values()].sort((a, b) => a.order - b.order);
-	}, [state]);
-}
-/** Snapshot of registered toolbar buttons, ordered by `order` (asc). */
-function usePlayerToolbarButtons() {
-	const state = (0, react$1.useContext)(PlayerOverlaysStateContext);
-	return (0, react$1.useMemo)(() => {
-		if (!state) return [];
-		return [...state.buttons.values()].sort((a, b) => a.order - b.order);
-	}, [state]);
-}
-/**
-* Register an overlay layer for the lifetime of the calling component.
-* Re-registers on every render with the latest spec; auto-unregisters
-* on unmount. Pass `null` to skip registration when the layer is
-* conditionally enabled (the hook still runs every render — keeps
-* react-hook order stable across spec === null toggles).
-*
-* Callers that build the spec inline should memoise it (`useMemo`)
-* to avoid re-registering on every parent render — context-write
-* effects depend on referential equality of the spec object.
-*/
-function usePlayerOverlayLayer(spec) {
-	const actions = (0, react$1.useContext)(PlayerOverlaysActionsContext);
-	(0, react$1.useEffect)(() => {
-		if (!actions || !spec) return void 0;
-		actions.setLayer(spec);
-		return () => actions.removeLayer(spec.id);
-	}, [actions, spec]);
+function ToolbarButton$1({ onClick, title, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		onClick,
+		title,
+		className: "rounded-full p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition-colors",
+		children
+	});
 }
-/** Same shape as `usePlayerOverlayLayer`, scoped to toolbar buttons. */
-function usePlayerToolbarButton(spec) {
-	const actions = (0, react$1.useContext)(PlayerOverlaysActionsContext);
-	(0, react$1.useEffect)(() => {
-		if (!actions || !spec) return void 0;
-		actions.setButton(spec);
-		return () => actions.removeButton(spec.id);
-	}, [actions, spec]);
+async function waitForIceGathering(pc) {
+	if (pc.iceGatheringState === "complete") return;
+	return new Promise((resolve) => {
+		const handler = () => {
+			if (pc.iceGatheringState === "complete") {
+				pc.removeEventListener("icegatheringstatechange", handler);
+				resolve();
+			}
+		};
+		pc.addEventListener("icegatheringstatechange", handler);
+		setTimeout(resolve, 5e3);
+	});
 }
 //#endregion
 //#region src/composites/stream-panel.tsx
@@ -22170,7 +23443,7 @@ var LEVEL_OPTIONS = [
 	"error"
 ];
 /** Max live entries kept in the ring buffer. */
-var MAX_LIVE_ENTRIES$2 = 500;
+var MAX_LIVE_ENTRIES$1 = 500;
 function passesLevel(logLevel, filterLevel) {
 	if (!filterLevel) return true;
 	return (LEVEL_SEVERITY[logLevel] ?? 0) >= (LEVEL_SEVERITY[filterLevel] ?? 0);
@@ -22199,7 +23472,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		integrationId,
 		requestId
 	]);
-	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES$2);
+	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES$1);
 	const buffer = externalBuffer ?? fallbackBuffer;
 	const liveLogs = buffer.entries;
 	const [clearedAt, setClearedAt] = (0, react$1.useState)(0);
@@ -22526,7 +23799,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 										className: "px-1 py-1 align-top w-5",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCopyButton$2, {
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCopyButton$1, {
 											copied: copiedRowKey === key,
 											onCopy: () => copyOne(log, key)
 										})
@@ -22565,7 +23838,7 @@ function ScopeBadge$2({ label, value }) {
 * "did it work" affordance — same UX language the toolbar Copy
 * button already uses for its `Copied!` label.
 */
-function RowCopyButton$2({ copied, onCopy }) {
+function RowCopyButton$1({ copied, onCopy }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		title: "Copy this row",
@@ -22890,7 +24163,7 @@ function hasContent(entry) {
 	if (cat === _camstack_types.EventCategory.DetectionResult || cat === _camstack_types.EventCategory.PipelineAudioInferenceResult) return summarizeEvent(cat, entry.data) !== null;
 	return true;
 }
-var MAX_LIVE_ENTRIES$1 = 300;
+var MAX_LIVE_ENTRIES = 300;
 function EventStream({ agentId, addonId, deviceId, defaultCategories, categories: legacyCategories, category: propsCategory, maxHeight = "max-h-96", limit = 50, showCategoryFilter = true, showFilters: _showFilters = false, liveBuffer: externalBuffer, onClose, className }) {
 	const defaultsArray = (0, react$1.useMemo)(() => defaultCategories ?? legacyCategories ?? DEFAULT_EVENT_CATEGORIES, [defaultCategories, legacyCategories]);
 	const defaultsKey = (0, react$1.useMemo)(() => [...defaultsArray].sort().join(","), [defaultsArray]);
@@ -22902,7 +24175,7 @@ function EventStream({ agentId, addonId, deviceId, defaultCategories, categories
 			setActiveCategories(new Set(defaultsArray));
 		}
 	}, [defaultsKey, defaultsArray]);
-	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES$1);
+	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES);
 	const buffer = externalBuffer ?? fallbackBuffer;
 	const liveEvents = buffer.entries;
 	const [autoScroll, setAutoScroll] = (0, react$1.useState)(true);
@@ -23226,7 +24499,7 @@ function EventStream({ agentId, addonId, deviceId, defaultCategories, categories
 									className: "text-foreground-subtle whitespace-nowrap w-[70px] shrink-0 pt-0.5",
 									children: new Date(event.timestamp).toLocaleTimeString()
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCopyButton$1, {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCopyButton, {
 									copied: copiedRowId === event.id,
 									onCopy: () => copyOne(event)
 								}),
@@ -23416,7 +24689,7 @@ function ScopeBadge$1({ label, value }) {
 * click doesn't toggle the row's expand state. Flashes a Check
 * for ~1s after copy.
 */
-function RowCopyButton$1({ copied, onCopy }) {
+function RowCopyButton({ copied, onCopy }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		title: "Copy this event",
@@ -23683,162 +24956,137 @@ function StatusBadge$1({ status }) {
 //#endregion
 //#region src/composites/state-values-stream.tsx
 /**
-* StateValuesStream — runtime-state change viewer for ui-library.
+* StateValuesStream — live current-state tree for ui-library.
+*
+* Renders a single device's CURRENT runtime-state as a scrollable,
+* collapsible hierarchical tree (NOT a chronological change log).
 *
-* Subscribes to `EventCategory.DeviceStateChanged` events scoped to a
-* single device. Each row shows: timestamp, capName, slice JSON.
-* Supports cap-name multiselect filter + free-text search.
+*  - Seed: on mount, `trpc.deviceState.getAllSnapshots` returns the
+*    whole-system snapshot; we pick out this device's entry and build
+*    a `Map<capName, slice>` of its current state.
+*  - Realtime: an `EventCategory.DeviceStateChanged` tRPC subscription
+*    scoped to the device patches each cap's slice into the map in
+*    place — the matching tree node re-renders, no rows are appended.
+*  - Tree: top level = cap names (sorted, expanded by default); each
+*    cap node expands to its slice keys; nested objects/arrays expand
+*    recursively, deep nesting collapsed by default. A per-cap
+*    "updated Ns ago" indicator surfaces realtime activity.
+*  - Filter/search: cap-name multiselect popover + free-text search,
+*    both applied to the tree (filter which caps show; search matches
+*    keys/values anywhere in the slice).
 *
-* Live subscription is mounted only while this component is rendered,
+* The live subscription is mounted only while this component renders,
 * so the parent can mount/unmount it on tab switches and the tRPC
 * subscription is torn down automatically when hidden.
 */
-function isStateChangeForDevice(raw, deviceId) {
-	if (!raw || typeof raw !== "object") return false;
-	const e = raw;
-	if (e.category !== _camstack_types.EventCategory.DeviceStateChanged) return false;
-	const data = e.data;
-	if (!data || typeof data !== "object") return false;
-	if (data.deviceId !== deviceId) return false;
-	if (typeof data.capName !== "string") return false;
-	if (!data.slice || typeof data.slice !== "object") return false;
-	return true;
-}
-function toEntry(raw) {
+/** Narrow an untrusted live-stream event to a `DeviceStateChanged`
+*  for THIS device, returning the cap name + slice it carries. */
+function readStateChange(raw, deviceId) {
 	if (!raw || typeof raw !== "object") return null;
 	const e = raw;
-	const id = typeof e.id === "string" ? e.id : null;
-	const timestamp = typeof e.timestamp === "string" ? e.timestamp : null;
+	if (e.category !== _camstack_types.EventCategory.DeviceStateChanged) return null;
 	const data = e.data;
-	if (!id || !timestamp || !data || typeof data !== "object") return null;
-	if (typeof data.capName !== "string" || !data.slice || typeof data.slice !== "object") return null;
+	if (!data || typeof data !== "object") return null;
+	if (data.deviceId !== deviceId) return null;
+	if (typeof data.capName !== "string") return null;
+	if (!data.slice || typeof data.slice !== "object") return null;
 	return {
-		id,
-		timestamp,
 		capName: data.capName,
 		slice: data.slice
 	};
 }
-var MAX_LIVE_ENTRIES = 300;
+function isSystemSnapshot(raw) {
+	return !!raw && typeof raw === "object" && !Array.isArray(raw);
+}
 /**
 * Every device-scoped cap name, sorted alphabetically — same shape
 * as `ALL_EVENT_CATEGORIES` in event-stream.tsx so the filter
 * surface is symmetric across the three live-streams (Logs, Events,
-* State). Computed once at module load; the user can pick from this
-* full list rather than only the caps that have already emitted at
-* least one slice change in the current session.
+* State). Computed once at module load.
 */
 var ALL_DEVICE_CAP_NAMES = Object.freeze([...new Set(_camstack_types.ALL_CAPABILITY_DEFINITIONS.filter((c) => c.scope === "device").map((c) => c.name))].sort());
-function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limit = 50, liveBuffer: externalBuffer, onClose, className }) {
+/** Depth at which tree nodes start collapsed. Cap nodes (depth 0) and
+*  their direct slice keys (depth 1) render expanded; anything nested
+*  deeper opens on demand. */
+var DEFAULT_EXPAND_DEPTH = 1;
+function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", onClose, className }) {
 	const [activeCaps, setActiveCaps] = (0, react$1.useState)((0, react$1.useMemo)(() => new Set(defaultCaps ?? []), [defaultCaps]));
 	const [searchText, setSearchText] = (0, react$1.useState)("");
-	const [autoScroll, setAutoScroll] = (0, react$1.useState)(true);
-	const [expandedRows, setExpandedRows] = (0, react$1.useState)(/* @__PURE__ */ new Set());
-	const [clearedAt, setClearedAt] = (0, react$1.useState)(0);
 	const [filterOpen, setFilterOpen] = (0, react$1.useState)(false);
 	const [filterSearch, setFilterSearch] = (0, react$1.useState)("");
 	const filterRootRef = (0, react$1.useRef)(null);
-	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES);
-	const buffer = externalBuffer ?? fallbackBuffer;
-	const liveEvents = buffer.entries;
-	const scrollRef = (0, react$1.useRef)(null);
+	const [capStates, setCapStates] = (0, react$1.useState)(/* @__PURE__ */ new Map());
+	const [collapseOverrides, setCollapseOverrides] = (0, react$1.useState)(/* @__PURE__ */ new Map());
+	const [, setNowTick] = (0, react$1.useState)(0);
 	const prevDeviceRef = (0, react$1.useRef)(deviceId);
 	(0, react$1.useEffect)(() => {
 		if (prevDeviceRef.current !== deviceId) {
 			prevDeviceRef.current = deviceId;
-			buffer.reset();
-			setExpandedRows(/* @__PURE__ */ new Set());
-			setClearedAt(0);
+			setCapStates(/* @__PURE__ */ new Map());
+			setCollapseOverrides(/* @__PURE__ */ new Map());
 		}
-	}, [deviceId, buffer]);
-	const recentInput = (0, react$1.useMemo)(() => ({
-		deviceId,
-		category: _camstack_types.EventCategory.DeviceStateChanged,
-		limit
-	}), [deviceId, limit]);
-	const { data: initialEvents, isLoading } = trpc.systemEvents.getRecent.useQuery(recentInput, { staleTime: 3e4 });
-	const activeCapsRef = (0, react$1.useRef)(activeCaps);
+	}, [deviceId]);
+	const { data: snapshot, isLoading } = trpc.deviceState.getAllSnapshots.useQuery({}, { staleTime: 3e4 });
+	const seededRef = (0, react$1.useRef)(false);
+	(0, react$1.useEffect)(() => {
+		if (seededRef.current) return;
+		if (!isSystemSnapshot(snapshot)) return;
+		const deviceSlices = snapshot[String(deviceId)];
+		seededRef.current = true;
+		if (!deviceSlices) return;
+		const now = Date.now();
+		setCapStates((prev) => {
+			const next = new Map(prev);
+			for (const [capName, slice] of Object.entries(deviceSlices)) {
+				if (next.has(capName)) continue;
+				next.set(capName, {
+					slice,
+					updatedAt: now
+				});
+			}
+			return next;
+		});
+	}, [snapshot, deviceId]);
 	(0, react$1.useEffect)(() => {
-		activeCapsRef.current = activeCaps;
-	}, [activeCaps]);
+		seededRef.current = false;
+	}, [deviceId]);
 	trpc.systemEvents.subscribe.useSubscription({
 		deviceId,
 		category: _camstack_types.EventCategory.DeviceStateChanged
 	}, { onData: (raw) => {
-		if (!isStateChangeForDevice(raw, deviceId)) return;
-		const entry = toEntry(raw);
-		if (!entry) return;
-		const active = activeCapsRef.current;
-		if (active.size > 0 && !active.has(entry.capName)) return;
-		buffer.append(entry);
+		const change = readStateChange(raw, deviceId);
+		if (!change) return;
+		setCapStates((prev) => {
+			const next = new Map(prev);
+			next.set(change.capName, {
+				slice: change.slice,
+				updatedAt: Date.now()
+			});
+			return next;
+		});
 	} });
-	const prevLiveCountRef = (0, react$1.useRef)(liveEvents.length);
 	(0, react$1.useEffect)(() => {
-		const el = scrollRef.current;
-		if (!el) {
-			prevLiveCountRef.current = liveEvents.length;
-			return;
-		}
-		const prevCount = prevLiveCountRef.current;
-		prevLiveCountRef.current = liveEvents.length;
-		if (liveEvents.length <= prevCount) return;
-		if (autoScroll && el.scrollTop <= 8) el.scrollTo({ top: 0 });
-		else if (!autoScroll && el.scrollTop > 0) {
-			const firstRow = el.firstElementChild?.firstElementChild;
-			const rowHeight = firstRow instanceof HTMLElement ? firstRow.offsetHeight : 28;
-			const newCount = liveEvents.length - prevCount;
-			el.scrollTop += rowHeight * newCount;
-		}
-	}, [liveEvents.length, autoScroll]);
-	const allEntries = (0, react$1.useMemo)(() => {
-		const byId = /* @__PURE__ */ new Map();
-		for (const e of initialEvents ?? []) {
-			const entry = toEntry(e);
-			if (entry) byId.set(entry.id, entry);
-		}
-		for (const e of liveEvents) byId.set(e.id, e);
-		let list = [...byId.values()];
-		if (clearedAt > 0) list = list.filter((e) => new Date(e.timestamp).getTime() > clearedAt);
-		if (activeCaps.size > 0) list = list.filter((e) => activeCaps.has(e.capName));
+		const id = setInterval(() => setNowTick((t) => t + 1), 5e3);
+		return () => clearInterval(id);
+	}, []);
+	const visibleCaps = (0, react$1.useMemo)(() => {
+		const caps = new Set(ALL_DEVICE_CAP_NAMES);
+		for (const capName of capStates.keys()) caps.add(capName);
+		return [...caps].sort();
+	}, [capStates]);
+	const filteredCapNames = (0, react$1.useMemo)(() => {
 		const needle = searchText.trim().toLowerCase();
-		if (needle) list = list.filter((e) => {
-			if (e.capName.toLowerCase().includes(needle)) return true;
-			try {
-				if (new Date(e.timestamp).toLocaleTimeString().toLowerCase().includes(needle)) return true;
-			} catch {}
-			try {
-				if (Object.entries(e.slice).map(([k, v]) => `${k}=${formatValue(v)}`).join(" · ").toLowerCase().includes(needle)) return true;
-			} catch {}
-			try {
-				if (JSON.stringify(e.slice).toLowerCase().includes(needle)) return true;
-			} catch {}
-			return false;
+		return [...capStates.keys()].sort().filter((capName) => {
+			if (activeCaps.size > 0 && !activeCaps.has(capName)) return false;
+			if (!needle) return true;
+			if (capName.toLowerCase().includes(needle)) return true;
+			return sliceMatchesSearch(capStates.get(capName)?.slice ?? {}, needle);
 		});
-		return list.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
 	}, [
-		initialEvents,
-		liveEvents,
+		capStates,
 		activeCaps,
-		searchText,
-		clearedAt
+		searchText
 	]);
-	const visibleCaps = (0, react$1.useMemo)(() => {
-		const caps = new Set(ALL_DEVICE_CAP_NAMES);
-		for (const e of initialEvents ?? []) {
-			const entry = toEntry(e);
-			if (entry) caps.add(entry.capName);
-		}
-		for (const e of liveEvents) caps.add(e.capName);
-		return [...caps].sort();
-	}, [initialEvents, liveEvents]);
-	const toggleRow = (0, react$1.useCallback)((id) => {
-		setExpandedRows((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	}, []);
 	const toggleCap = (0, react$1.useCallback)((cap) => {
 		setActiveCaps((prev) => {
 			const next = new Set(prev);
@@ -23851,34 +25099,36 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 		setActiveCaps(new Set(defaultCaps ?? []));
 		setSearchText("");
 	}, [defaultCaps]);
-	const handleClear = (0, react$1.useCallback)(() => {
-		setClearedAt(Date.now());
-		buffer.reset();
-	}, [buffer]);
-	const [copiedAll, setCopiedAll] = (0, react$1.useState)(false);
-	const [copiedRowId, setCopiedRowId] = (0, react$1.useState)(null);
-	const formatEntryForCopy = (0, react$1.useCallback)((entry) => {
-		return `${new Date(entry.timestamp).toISOString()} [${entry.capName}]  slice=${JSON.stringify(entry.slice)}`;
-	}, []);
-	const handleCopyAll = (0, react$1.useCallback)(() => {
-		const lines = allEntries.map(formatEntryForCopy);
-		navigator.clipboard.writeText(lines.join("\n")).then(() => {
-			setCopiedAll(true);
-			setTimeout(() => setCopiedAll(false), 1500);
-		});
-	}, [allEntries, formatEntryForCopy]);
-	const copyOne = (0, react$1.useCallback)((entry) => {
-		navigator.clipboard.writeText(formatEntryForCopy(entry)).then(() => {
-			setCopiedRowId(entry.id);
-			setTimeout(() => setCopiedRowId((prev) => prev === entry.id ? null : prev), 1200);
-		});
-	}, [formatEntryForCopy]);
 	const handleSelectAllCaps = (0, react$1.useCallback)(() => {
 		setActiveCaps(new Set(visibleCaps));
 	}, [visibleCaps]);
 	const handleSelectNoCaps = (0, react$1.useCallback)(() => {
 		setActiveCaps(/* @__PURE__ */ new Set());
 	}, []);
+	const toggleNode = (0, react$1.useCallback)((path, currentlyOpen) => {
+		setCollapseOverrides((prev) => {
+			const next = new Map(prev);
+			next.set(path, !currentlyOpen);
+			return next;
+		});
+	}, []);
+	const isPathOpen = (0, react$1.useCallback)((path, depth) => {
+		const override = collapseOverrides.get(path);
+		if (override !== void 0) return override;
+		return depth < DEFAULT_EXPAND_DEPTH;
+	}, [collapseOverrides]);
+	const [copiedAll, setCopiedAll] = (0, react$1.useState)(false);
+	const handleCopyAll = (0, react$1.useCallback)(() => {
+		const out = {};
+		for (const capName of filteredCapNames) {
+			const state = capStates.get(capName);
+			if (state) out[capName] = state.slice;
+		}
+		navigator.clipboard.writeText(JSON.stringify(out, null, 2)).then(() => {
+			setCopiedAll(true);
+			setTimeout(() => setCopiedAll(false), 1500);
+		});
+	}, [filteredCapNames, capStates]);
 	const filteredPopoverCaps = (0, react$1.useMemo)(() => {
 		const needle = filterSearch.trim().toLowerCase();
 		if (!needle) return visibleCaps;
@@ -23897,6 +25147,7 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 		document.addEventListener("mousedown", onDocClick);
 		return () => document.removeEventListener("mousedown", onDocClick);
 	}, [filterOpen]);
+	const searchNeedle = searchText.trim().toLowerCase();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("h-full min-h-0 flex flex-col", className),
 		onClick: (e) => e.stopPropagation(),
@@ -23913,18 +25164,6 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 						label: "device",
 						value: `#${deviceId}`
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: () => {
-							setAutoScroll((a) => !a);
-							if (!autoScroll && scrollRef.current) scrollRef.current.scrollTo({
-								top: 0,
-								behavior: "smooth"
-							});
-						},
-						className: cn("inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border transition-colors", autoScroll ? "border-border text-foreground-subtle hover:text-foreground" : "border-amber-500/30 bg-amber-500/10 text-amber-400"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowUpToLine, { className: "h-2.5 w-2.5" }), autoScroll ? "Auto" : "Paused"]
-					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative",
 						ref: filterRootRef,
@@ -23932,7 +25171,7 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 							type: "button",
 							onClick: () => setFilterOpen((v) => !v),
 							className: cn("inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border transition-colors", !allSelected ? "border-violet-500/30 bg-violet-500/10 text-violet-400" : "border-border text-foreground-subtle hover:text-foreground"),
-							title: "Pick caps to track",
+							title: "Pick caps to show",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Funnel, { className: "h-2.5 w-2.5" }),
 								"Filter (",
@@ -23957,19 +25196,12 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 						title: "Reset filters",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotateCcw, { className: "h-2.5 w-2.5" }), "Reset"]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: handleClear,
-						className: "inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border border-border text-foreground-subtle hover:text-foreground transition-colors",
-						title: "Clear visible entries",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-2.5 w-2.5" }), "Clear"]
-					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						onClick: handleCopyAll,
-						disabled: allEntries.length === 0,
-						className: cn("inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border transition-colors", copiedAll ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400" : "border-border text-foreground-subtle hover:text-foreground", allEntries.length === 0 && "opacity-40 cursor-not-allowed"),
-						title: "Copy all visible state changes",
+						disabled: filteredCapNames.length === 0,
+						className: cn("inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border transition-colors", copiedAll ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400" : "border-border text-foreground-subtle hover:text-foreground", filteredCapNames.length === 0 && "opacity-40 cursor-not-allowed"),
+						title: "Copy visible state as JSON",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Copy, { className: "h-2.5 w-2.5" }), copiedAll ? "Copied!" : "Copy"]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -23988,13 +25220,9 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-2.5 w-2.5" })
 						})]
 					}),
-					liveEvents.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-[9px] text-emerald-400 font-medium",
-						children: [
-							"+",
-							liveEvents.length,
-							" live"
-						]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-[9px] text-emerald-400 font-medium inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" }), "live"]
 					})
 				]
 			}), onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -24004,90 +25232,172 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", limi
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3.5 w-3.5" })
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: scrollRef,
-			className: cn("flex-1 min-h-0 overflow-auto text-[10px]", maxHeight),
+			className: cn("flex-1 min-h-0 overflow-auto text-[10px] font-mono", maxHeight),
 			children: [
-				isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center justify-center gap-2 py-6 text-foreground-subtle",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), "Loading state changes..."]
+				isLoading && capStates.size === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-center gap-2 py-6 text-foreground-subtle font-sans",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), "Loading device state..."]
 				}),
-				!isLoading && allEntries.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "py-4 text-center text-foreground-subtle",
-					children: "No state changes"
+				!isLoading && capStates.size === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "py-4 text-center text-foreground-subtle font-sans",
+					children: "No runtime state"
 				}),
-				allEntries.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "divide-y divide-border/30",
-					children: allEntries.map((entry) => {
-						const expanded = expandedRows.has(entry.id);
-						const fields = Object.entries(entry.slice);
-						const summary = fields.slice(0, 3).map(([k, v]) => `${k}=${formatValue(v)}`).join(" · ");
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-start gap-2 px-3 py-1.5 hover:bg-surface-hover/30 cursor-pointer",
-							onClick: () => toggleRow(entry.id),
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-foreground-subtle whitespace-nowrap w-[70px] shrink-0 pt-0.5",
-									children: new Date(entry.timestamp).toLocaleTimeString()
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCopyButton, {
-									copied: copiedRowId === entry.id,
-									onCopy: () => copyOne(entry)
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex-1 min-w-0",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex items-center gap-1.5",
-											children: [
-												expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 text-foreground-subtle shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "inline-flex items-center gap-1 rounded-full border border-violet-500/30 bg-violet-500/15 text-violet-400 px-2 py-0.5 text-[9px] font-medium",
-													children: entry.capName
-												}),
-												fields.length > 3 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													className: "text-[9px] text-foreground-subtle",
-													children: [
-														"+",
-														fields.length - 3,
-														" more"
-													]
-												})
-											]
-										}),
-										summary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "text-foreground-subtle text-[10px] mt-0.5 ml-5 truncate",
-											children: summary
-										}),
-										expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "mt-1 ml-5 text-[9px] bg-surface rounded px-2 py-1.5 space-y-0.5 font-mono overflow-x-auto",
-											children: fields.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "text-foreground-subtle italic",
-												children: "empty slice"
-											}) : fields.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "text-primary/70",
-													children: k
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "text-foreground-subtle",
-													children: ": "
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "text-foreground break-all",
-													children: formatValue(v)
-												})
-											] }, k))
-										})
-									]
-								})
-							]
-						}, entry.id);
+				!isLoading && capStates.size > 0 && filteredCapNames.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "py-4 text-center text-foreground-subtle font-sans",
+					children: "No caps match the filter"
+				}),
+				filteredCapNames.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "py-1",
+					children: filteredCapNames.map((capName) => {
+						const state = capStates.get(capName);
+						if (!state) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapNode, {
+							capName,
+							slice: state.slice,
+							updatedAt: state.updatedAt,
+							searchNeedle,
+							isPathOpen,
+							onToggle: toggleNode
+						}, capName);
 					})
 				})
 			]
 		})]
 	});
 }
+/** Top-level tree node: one capability. Header carries the cap-name
+*  pill + an "updated Ns ago" indicator; the body expands to the
+*  slice's keys. */
+function CapNode({ capName, slice, updatedAt, searchNeedle, isPathOpen, onToggle }) {
+	const path = capName;
+	const open = isPathOpen(path, 0);
+	const entries = Object.entries(slice);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1.5 px-3 py-1 hover:bg-surface-hover/30 cursor-pointer select-none",
+		onClick: () => onToggle(path, open),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+				open,
+				hasChildren: entries.length > 0
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "inline-flex items-center gap-1 rounded-full border border-violet-500/30 bg-violet-500/15 text-violet-400 px-2 py-0.5 text-[9px] font-medium font-sans",
+				children: capName
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-[9px] text-foreground-subtle font-sans",
+				children: [
+					entries.length,
+					" ",
+					entries.length === 1 ? "key" : "keys"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "ml-auto text-[9px] text-foreground-subtle/70 font-sans tabular-nums",
+				children: ["updated ", formatAge(updatedAt)]
+			})
+		]
+	}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeafEmpty, {
+		depth: 1,
+		label: "empty slice"
+	}) : entries.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+		path: `${path}.${k}`,
+		nodeKey: k,
+		value: v,
+		depth: 1,
+		searchNeedle,
+		isPathOpen,
+		onToggle
+	}, k)) })] });
+}
+/** Recursive tree node. A leaf renders `key: value`; an object or
+*  array renders a collapsible branch whose children recurse one
+*  level deeper. */
+function TreeNode({ path, nodeKey, value, depth, searchNeedle, isPathOpen, onToggle }) {
+	const branch = asBranch(value);
+	const indentStyle = { paddingLeft: `${12 + depth * 14}px` };
+	if (!branch) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start gap-1 px-3 py-0.5",
+		style: indentStyle,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: cn("shrink-0", highlightCls(nodeKey, searchNeedle, "text-primary/70")),
+				children: nodeKey
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-foreground-subtle",
+				children: ":"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: cn("break-all", highlightCls(formatValue(value), searchNeedle, valueCls(value))),
+				children: formatValue(value)
+			})
+		]
+	});
+	const open = isPathOpen(path, depth);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1 px-3 py-0.5 hover:bg-surface-hover/30 cursor-pointer select-none",
+		style: indentStyle,
+		onClick: () => onToggle(path, open),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
+				open,
+				hasChildren: branch.entries.length > 0
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: highlightCls(nodeKey, searchNeedle, "text-primary/70"),
+				children: nodeKey
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-foreground-subtle/70 text-[9px]",
+				children: branch.summary
+			})
+		]
+	}), open && (branch.entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeafEmpty, {
+		depth: depth + 1,
+		label: branch.kind === "array" ? "empty array" : "empty object"
+	}) : branch.entries.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+		path: `${path}.${k}`,
+		nodeKey: k,
+		value: v,
+		depth: depth + 1,
+		searchNeedle,
+		isPathOpen,
+		onToggle
+	}, k)))] });
+}
+/** Placeholder row for an object/array/slice with no entries. */
+function LeafEmpty({ depth, label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-3 py-0.5 text-foreground-subtle/60 italic",
+		style: { paddingLeft: `${12 + depth * 14}px` },
+		children: label
+	});
+}
+/** Expand/collapse chevron. Renders a fixed-width spacer when the node
+*  has no children so leaf and branch keys stay column-aligned. */
+function Chevron({ open, hasChildren }) {
+	if (!hasChildren) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "inline-block w-3 shrink-0" });
+	return open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 text-foreground-subtle shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" });
+}
+/** Classify a value as an expandable branch (plain object or array)
+*  or `null` for a leaf. Arrays expose index → element entries. */
+function asBranch(value) {
+	if (Array.isArray(value)) return {
+		kind: "array",
+		entries: value.map((v, i) => [String(i), v]),
+		summary: `[${value.length}]`
+	};
+	if (value && typeof value === "object") {
+		const entries = Object.entries(value);
+		return {
+			kind: "object",
+			entries,
+			summary: `{${entries.length}}`
+		};
+	}
+	return null;
+}
 function formatValue(v) {
 	if (v === null) return "null";
 	if (v === void 0) return "undefined";
@@ -24099,9 +25409,46 @@ function formatValue(v) {
 		return String(v);
 	}
 }
+/** Tailwind colour for a leaf value by JS type. */
+function valueCls(v) {
+	if (v === null || v === void 0) return "text-foreground-subtle/60";
+	if (typeof v === "number") return "text-amber-400";
+	if (typeof v === "boolean") return v ? "text-emerald-400" : "text-rose-400";
+	return "text-foreground";
+}
+/** Append a highlight background when `text` matches the live search
+*  needle, so search hits are visible inside the tree. */
+function highlightCls(text, needle, base) {
+	if (needle && text.toLowerCase().includes(needle)) return cn(base, "bg-violet-500/20 rounded px-0.5");
+	return base;
+}
+/** Deep search a slice — true when `needle` appears in any key or any
+*  stringified leaf value anywhere in the tree. */
+function sliceMatchesSearch(value, needle) {
+	if (Array.isArray(value)) return value.some((v) => sliceMatchesSearch(v, needle));
+	if (value && typeof value === "object") {
+		for (const [k, v] of Object.entries(value)) {
+			if (k.toLowerCase().includes(needle)) return true;
+			if (sliceMatchesSearch(v, needle)) return true;
+		}
+		return false;
+	}
+	return formatValue(value).toLowerCase().includes(needle);
+}
+/** Human "Ns ago" / "Nm ago" age label for the per-cap freshness
+*  indicator. */
+function formatAge(updatedAt) {
+	const deltaMs = Date.now() - updatedAt;
+	if (deltaMs < 5e3) return "just now";
+	const secs = Math.floor(deltaMs / 1e3);
+	if (secs < 60) return `${secs}s ago`;
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	return `${Math.floor(mins / 60)}h ago`;
+}
 function ScopeBadge({ label, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "text-[9px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium",
+		className: "text-[9px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary font-medium font-sans",
 		children: [
 			label,
 			": ",
@@ -24110,16 +25457,13 @@ function ScopeBadge({ label, value }) {
 	});
 }
 /**
-* Cap-name multiselect popover — same shape as
-* `CategoryFilterPopover` in event-stream.tsx (search box at top,
-* Select All / None / Defaults buttons, scrollable checkbox list).
-* Caps don't have icons / styled badges like events do — we render
-* a flat name + violet-pill bracket so the look stays consistent
-* with the rest of the StateValuesStream rows.
+* Cap-name multiselect popover — same shape as `CategoryFilterPopover`
+* in event-stream.tsx (search box at top, Select All / None / Defaults
+* buttons, scrollable checkbox list).
 */
 function CapFilterPopover({ search, onSearchChange, caps, active, onToggle, onSelectAll, onSelectNone, onResetDefaults }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "absolute z-20 top-full mt-1 left-0 w-72 max-h-80 rounded-md border border-border bg-surface shadow-lg flex flex-col",
+		className: "absolute z-20 top-full mt-1 left-0 w-72 max-h-80 rounded-md border border-border bg-surface shadow-lg flex flex-col font-sans",
 		onClick: (e) => e.stopPropagation(),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -24190,24 +25534,6 @@ function CapFilterPopover({ search, onSearchChange, caps, active, onToggle, onSe
 		]
 	});
 }
-/**
-* Per-row Copy icon — same shape used in log-stream / event-stream
-* so the three live-streams' rows are visually symmetric. Stops
-* propagation so the click doesn't toggle the row's expand state.
-* Flashes a Check for ~1s on success.
-*/
-function RowCopyButton({ copied, onCopy }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		title: "Copy this state change",
-		onClick: (e) => {
-			e.stopPropagation();
-			onCopy();
-		},
-		className: cn("rounded p-0.5 transition-colors mt-0.5", copied ? "text-emerald-400" : "text-foreground-subtle/60 hover:text-foreground hover:bg-surface-hover"),
-		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Copy, { className: "h-3 w-3" })
-	});
-}
 //#endregion
 //#region src/composites/device-activity-panel.tsx
 /**
@@ -24286,303 +25612,99 @@ function DeviceActivityPanel({ deviceId, defaultEventCategories, defaultStateCap
 					showFilters: false,
 					liveBuffer: logsBuffer
 				}),
-				tab === "events" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EventStream, {
-					deviceId,
-					defaultCategories: defaultEventCategories,
-					maxHeight,
-					showCategoryFilter: true,
-					liveBuffer: eventsBuffer
-				}),
-				tab === "state" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateValuesStream, {
-					deviceId,
-					defaultCaps: defaultStateCaps,
-					maxHeight,
-					liveBuffer: stateBuffer
-				})
-			]
-		})]
-	});
-}
-//#endregion
-//#region src/composites/confirm-action-button.tsx
-/**
-* ConfirmActionButton — destructive-action button with a modal confirm.
-*
-* Two-step UX for any operation operators shouldn't trigger by accident:
-* reboot device, restart addon, regenerate token, etc. The trigger is a
-* normal Button that opens a Dialog; confirming runs the async action,
-* the trigger spinner-disables itself for the duration, and the dialog
-* closes on success. Errors surface inline at the dialog's bottom.
-*
-* Generic on `TResult` so callers don't have to discard the return
-* value. Pass an `icon` to render it inside the trigger (e.g. RotateCw
-* for reboot, RefreshCw for restart).
-*/
-function ConfirmActionButton({ label, icon: Icon, title = "Confirm action", description, confirmLabel, triggerVariant = "outline", confirmVariant = "danger", size = "sm", disabled, className, action, onSuccess }) {
-	const [open, setOpen] = (0, react$1.useState)(false);
-	const [running, setRunning] = (0, react$1.useState)(false);
-	const [error, setError] = (0, react$1.useState)(null);
-	const handleConfirm = async () => {
-		setError(null);
-		setRunning(true);
-		try {
-			const result = await action();
-			onSuccess?.(result);
-			setOpen(false);
-		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
-		} finally {
-			setRunning(false);
-		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-		type: "button",
-		variant: triggerVariant,
-		size,
-		disabled,
-		onClick: () => {
-			setError(null);
-			setOpen(true);
-		},
-		className,
-		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), label]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
-		open,
-		onOpenChange: (next) => !running && setOpen(next),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 text-amber-400" }), title]
-			}), typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : description] }),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn("mt-2 px-3 py-2 rounded border border-danger/40 bg-danger/10", "text-xs text-danger"),
-				children: error
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				type: "button",
-				variant: "ghost",
-				size,
-				disabled: running,
-				onClick: () => setOpen(false),
-				children: "Cancel"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-				type: "button",
-				variant: confirmVariant,
-				size,
-				disabled: running,
-				onClick: () => {
-					handleConfirm();
-				},
-				children: [running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), confirmLabel ?? label]
-			})] })
-		] })
-	})] });
-}
-//#endregion
-//#region src/composites/ptz-overlay.tsx
-/**
-* PTZOverlay — pan / tilt / zoom controls.
-*
-* Two visual variants driven by `mode`:
-*   - `'overlay'` (default): translucent dark pill positioned bottom-
-*     right of the camera viewport. Used as `extraOverlay` on the
-*     `CameraStreamPlayer` so operators can drive PTZ without leaving
-*     the live view. Opaque background + subtle ring keeps the d-pad
-*     legible against any frame.
-*   - `'panel'`: full-bleed inside a host container (e.g. the floating
-*     PTZ panel in DeviceDetail). No absolute positioning, no inner
-*     wrapper card — the host's chrome is the only frame. Inherits the
-*     surrounding `bg-surface` so the dark theme reads consistently
-*     instead of the previous always-dark-bubble look.
-*
-* Interaction model is identical across modes: short tap fires a
-* discrete pulse (`move`); long press starts continuous motion until
-* release (`startContinuous` + `stopContinuous` on pointer up).
-*/
-function DPadButton({ direction, icon: Icon, disabled, className, variant, onMove, onStart, onStop }) {
-	const [pressedAt, setPressedAt] = (0, react$1.useState)(null);
-	const [continuous, setContinuous] = (0, react$1.useState)(false);
-	const handlePointerDown = (0, react$1.useCallback)((e) => {
-		if (disabled) return;
-		e.currentTarget.setPointerCapture(e.pointerId);
-		setPressedAt(Date.now());
-		setContinuous(false);
-		const timer = setTimeout(() => {
-			setContinuous(true);
-			onStart(direction);
-		}, 250);
-		e.currentTarget.dataset.timer = String(timer);
-	}, [
-		direction,
-		disabled,
-		onStart
-	]);
-	const handlePointerUp = (0, react$1.useCallback)((e) => {
-		const timerId = Number(e.currentTarget.dataset.timer);
-		if (timerId) clearTimeout(timerId);
-		e.currentTarget.dataset.timer = "";
-		if (continuous) onStop();
-		else if (pressedAt !== null) onMove(direction);
-		setPressedAt(null);
-		setContinuous(false);
-	}, [
-		continuous,
-		direction,
-		onMove,
-		onStop,
-		pressedAt
-	]);
-	const handlePointerCancel = (0, react$1.useCallback)((e) => {
-		const timerId = Number(e.currentTarget.dataset.timer);
-		if (timerId) clearTimeout(timerId);
-		e.currentTarget.dataset.timer = "";
-		if (continuous) onStop();
-		setPressedAt(null);
-		setContinuous(false);
-	}, [continuous, onStop]);
-	const sizeClass = variant === "panel" ? "h-9 w-9" : "h-7 w-7";
-	const iconSizeClass = variant === "panel" ? "h-4 w-4" : "h-3.5 w-3.5";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		disabled,
-		onPointerDown: handlePointerDown,
-		onPointerUp: handlePointerUp,
-		onPointerCancel: handlePointerCancel,
-		className: cn("flex items-center justify-center rounded transition-colors disabled:opacity-40", variant === "panel" ? "text-foreground hover:bg-surface-hover active:bg-surface-hover/80" : "text-white hover:bg-white/15 active:bg-white/25", sizeClass, className),
-		title: direction,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconSizeClass })
-	});
-}
-function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true, showHome = true, className }) {
-	const { move, startContinuous, stopContinuous, zoom, goHome, goToPreset, presets, busy, error } = controls;
-	const [presetsOpen, setPresetsOpen] = (0, react$1.useState)(false);
-	const presetsVisible = (showPresets ?? presets.length > 0) && presets.length > 0;
-	const isPanel = mode === "panel";
-	const containerClass = isPanel ? "flex flex-col items-stretch gap-2 w-full h-full p-3" : "pointer-events-auto absolute top-3 right-3 z-10 flex flex-col items-end gap-2";
-	const rowClass = isPanel ? cn("flex items-center gap-3 rounded-lg p-2", busy && "ring-1 ring-primary/40") : cn("flex items-center gap-2 rounded-lg border border-white/30 bg-zinc-900/90 backdrop-blur-md p-2 shadow-lg shadow-black/40", busy && "ring-1 ring-primary/40");
-	const sideButtonSize = isPanel ? "h-9 w-9" : "h-7 w-7";
-	const sideIconSize = isPanel ? "h-4 w-4" : "h-3.5 w-3.5";
-	const sideButtonHover = isPanel ? "text-foreground hover:bg-surface-hover" : "text-white hover:bg-white/15";
-	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: [
-						/* @__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"
-						})
-					]
-				}),
-				(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 })
-					})]
+				tab === "events" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EventStream, {
+					deviceId,
+					defaultCategories: defaultEventCategories,
+					maxHeight,
+					showCategoryFilter: true,
+					liveBuffer: eventsBuffer
 				}),
-				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 min-w-[140px] rounded-lg shadow-xl py-1 z-20", isPanel ? "bottom-full mb-1 bg-surface border border-border" : "top-full mt-1 border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
-						children: presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => {
-								goToPreset(p.id);
-								setPresetsOpen(false);
-							},
-							disabled: busy,
-							className: cn("block w-full px-3 py-1.5 text-left text-[10px] disabled:opacity-40", isPanel ? "text-foreground hover:bg-surface-hover" : "text-white hover:bg-white/15"),
-							children: p.name || p.id
-						}, p.id))
-					})]
+				tab === "state" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateValuesStream, {
+					deviceId,
+					defaultCaps: defaultStateCaps,
+					maxHeight,
+					liveBuffer: stateBuffer
 				})
 			]
 		})]
 	});
 }
 //#endregion
+//#region src/composites/confirm-action-button.tsx
+/**
+* ConfirmActionButton — destructive-action button with a modal confirm.
+*
+* Two-step UX for any operation operators shouldn't trigger by accident:
+* reboot device, restart addon, regenerate token, etc. The trigger is a
+* normal Button that opens a Dialog; confirming runs the async action,
+* the trigger spinner-disables itself for the duration, and the dialog
+* closes on success. Errors surface inline at the dialog's bottom.
+*
+* Generic on `TResult` so callers don't have to discard the return
+* value. Pass an `icon` to render it inside the trigger (e.g. RotateCw
+* for reboot, RefreshCw for restart).
+*/
+function ConfirmActionButton({ label, icon: Icon, title = "Confirm action", description, confirmLabel, triggerVariant = "outline", confirmVariant = "danger", size = "sm", disabled, className, action, onSuccess }) {
+	const [open, setOpen] = (0, react$1.useState)(false);
+	const [running, setRunning] = (0, react$1.useState)(false);
+	const [error, setError] = (0, react$1.useState)(null);
+	const handleConfirm = async () => {
+		setError(null);
+		setRunning(true);
+		try {
+			const result = await action();
+			onSuccess?.(result);
+			setOpen(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setRunning(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+		type: "button",
+		variant: triggerVariant,
+		size,
+		disabled,
+		onClick: () => {
+			setError(null);
+			setOpen(true);
+		},
+		className,
+		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), label]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open,
+		onOpenChange: (next) => !running && setOpen(next),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTitle, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 text-amber-400" }), title]
+			}), typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : description] }),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn("mt-2 px-3 py-2 rounded border border-danger/40 bg-danger/10", "text-xs text-danger"),
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "button",
+				variant: "ghost",
+				size,
+				disabled: running,
+				onClick: () => setOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: confirmVariant,
+				size,
+				disabled: running,
+				onClick: () => {
+					handleConfirm();
+				},
+				children: [running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), confirmLabel ?? label]
+			})] })
+		] })
+	})] });
+}
+//#endregion
 //#region src/composites/snapshot-button.tsx
 /**
 * SnapshotButton — operator-facing manual snapshot trigger.
@@ -25489,169 +26611,6 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 	};
 }
 //#endregion
-//#region src/hooks/use-ptz.ts
-/**
-* usePTZ — PTZ control hook for device-scoped pan / tilt / zoom.
-*
-* Wraps the `ptz` capability methods through the canonical
-* `useDeviceProxy` surface — every call goes through
-* `dev.ptz?.<method>(...)` with deviceId/nodeId auto-injected. The
-* hook stays bare-bones around state (`busy`, `error`, `presets`)
-* so the operator-facing component (PTZOverlay) stays trivial.
-*
-* Returns:
-*   - `move(direction)`: discrete one-shot move (cap.move + cap.stop).
-*     Use for short pulse moves triggered by tapping a d-pad button.
-*   - `startContinuous(direction)` / `stopContinuous()`: gesture-driven
-*     continuous motion (`cap.continuousMove` + `cap.stop`). Use for
-*     long-press handlers on touch / mouse-down handlers on desktop.
-*   - `zoom('in' | 'out')`: discrete zoom step.
-*   - `goHome()`: jump to preset 0.
-*   - `presets` + `goToPreset(presetId)`: list and jump to named presets.
-*
-* Parametrised by the same `UseDeviceProxyTrpc` shape every other
-* device hook uses — works under admin-ui (BackendClient.trpc) and
-* addon pages (AddonPageProps.trpc) alike.
-*/
-var DIRECTION_VECTORS = {
-	"up": {
-		pan: 0,
-		tilt: 1
-	},
-	"down": {
-		pan: 0,
-		tilt: -1
-	},
-	"left": {
-		pan: -1,
-		tilt: 0
-	},
-	"right": {
-		pan: 1,
-		tilt: 0
-	},
-	"up-left": {
-		pan: -1,
-		tilt: 1
-	},
-	"up-right": {
-		pan: 1,
-		tilt: 1
-	},
-	"down-left": {
-		pan: -1,
-		tilt: -1
-	},
-	"down-right": {
-		pan: 1,
-		tilt: -1
-	}
-};
-function usePTZ(trpc, deviceId, options) {
-	const defaultSpeed = options?.defaultSpeed ?? .5;
-	const pulseMs = options?.pulseMs ?? 250;
-	const enabled = options?.enabled ?? true;
-	const ptz = useDeviceProxy(trpc, enabled ? deviceId : null)?.ptz;
-	const [presets, setPresets] = (0, react$1.useState)([]);
-	const [busy, setBusy] = (0, react$1.useState)(false);
-	const [error, setError] = (0, react$1.useState)(null);
-	const refreshPresets = (0, react$1.useCallback)(async () => {
-		if (!enabled || !ptz) return;
-		try {
-			setPresets(await ptz.getPresets({}));
-		} catch (err) {
-			const msg = err instanceof Error ? err.message : String(err);
-			if (msg.includes("provider not available") || msg.includes("no 'ptz' binding")) return;
-			setError(msg);
-		}
-	}, [ptz, enabled]);
-	(0, react$1.useEffect)(() => {
-		refreshPresets();
-	}, [refreshPresets]);
-	const wrap = (0, react$1.useCallback)(async (fn) => {
-		if (!enabled || !ptz) return void 0;
-		setError(null);
-		setBusy(true);
-		try {
-			return await fn();
-		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
-			return;
-		} finally {
-			setBusy(false);
-		}
-	}, [enabled, ptz]);
-	return {
-		move: (0, react$1.useCallback)(async (direction, speed) => {
-			if (!ptz) return;
-			const v = DIRECTION_VECTORS[direction];
-			const s = speed ?? defaultSpeed;
-			await wrap(async () => {
-				await ptz.move({
-					pan: v.pan,
-					tilt: v.tilt,
-					speed: s
-				});
-				await new Promise((r) => setTimeout(r, pulseMs));
-				await ptz.stop({});
-			});
-		}, [
-			ptz,
-			defaultSpeed,
-			pulseMs,
-			wrap
-		]),
-		startContinuous: (0, react$1.useCallback)(async (direction, speed) => {
-			if (!ptz) return;
-			const v = DIRECTION_VECTORS[direction];
-			const s = speed ?? defaultSpeed;
-			await wrap(() => ptz.continuousMove({
-				pan: v.pan,
-				tilt: v.tilt,
-				speed: s
-			}));
-		}, [
-			ptz,
-			defaultSpeed,
-			wrap
-		]),
-		stopContinuous: (0, react$1.useCallback)(async () => {
-			if (!ptz) return;
-			await wrap(() => ptz.stop({}));
-		}, [ptz, wrap]),
-		zoom: (0, react$1.useCallback)(async (direction, speed) => {
-			if (!ptz) return;
-			const z = direction === "in" ? 1 : -1;
-			const s = speed ?? defaultSpeed;
-			await wrap(async () => {
-				await ptz.move({
-					zoom: z,
-					speed: s
-				});
-				await new Promise((r) => setTimeout(r, pulseMs));
-				await ptz.stop({});
-			});
-		}, [
-			ptz,
-			defaultSpeed,
-			pulseMs,
-			wrap
-		]),
-		goHome: (0, react$1.useCallback)(async () => {
-			if (!ptz) return;
-			await wrap(() => ptz.goHome({}));
-		}, [ptz, wrap]),
-		goToPreset: (0, react$1.useCallback)(async (presetId) => {
-			if (!ptz) return;
-			await wrap(() => ptz.goToPreset({ presetId }));
-		}, [ptz, wrap]),
-		presets,
-		refreshPresets,
-		busy,
-		error
-	};
-}
-//#endregion
 //#region src/hooks/use-doorbell-events.ts
 /**
 * useDoorbellEvents — subscribe to doorbell.onPressed across the cluster.
@@ -25879,6 +26838,7 @@ exports.AppShell = AppShell;
 exports.AudioClassificationList = AudioClassificationList;
 exports.AudioLevelWaveform = AudioLevelWaveform;
 exports.AudioWaveform = AudioWaveform;
+exports.AutotrackSection = AutotrackSection;
 exports.BTN_COMPACT = BTN_COMPACT;
 exports.BTN_COMPACT_DANGER = BTN_COMPACT_DANGER;
 exports.BTN_COMPACT_PRIMARY = BTN_COMPACT_PRIMARY;
@@ -25941,6 +26901,7 @@ exports.FormField = FormField$1;
 exports.GRID_GAP = GRID_GAP;
 exports.GRID_PAIRED = GRID_PAIRED;
 exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
+exports.HOST_WIDGETS = HOST_WIDGETS;
 exports.INPUT_COMPACT = INPUT_COMPACT;
 exports.IconButton = IconButton;
 exports.ImageSelector = ImageSelector;
@@ -25953,6 +26914,7 @@ exports.Label = Label;
 exports.LogStream = LogStream;
 exports.LoginForm = LoginForm;
 exports.MobileDrawer = MobileDrawer;
+exports.MotionZonesSettings = MotionZonesSettings;
 exports.NodeMultiSelectField = NodeMultiSelectField;
 exports.NodePicker = NodePicker;
 exports.NodeSelectField = NodeSelectField;
@@ -25969,6 +26931,7 @@ exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ProviderBadge = ProviderBadge;
+exports.PtzPanel = PtzPanel;
 exports.QrCode = QrCode;
 exports.ResponseLog = ResponseLog;
 exports.SECTION_BODY = SECTION_BODY;
@@ -26026,6 +26989,7 @@ exports.getClassColor = getClassColor;
 exports.getPhaseVisual = getPhaseVisual;
 exports.isFieldVisible = isFieldVisible;
 exports.lightColors = require_theme_index.lightColors$1;
+exports.loadRemoteBundle = loadRemoteBundle;
 exports.mirror = mirror;
 exports.mountAddonPage = mountAddonPage;
 exports.providerIcons = providerIcons;
@@ -26123,11 +27087,14 @@ exports.useCustomFieldRenderer = useCustomFieldRenderer;
 exports.useDebouncedString = useDebouncedString;
 exports.useDecoderCreateSession = useDecoderCreateSession;
 exports.useDecoderDestroySession = useDecoderDestroySession;
+exports.useDecoderGetFrame = useDecoderGetFrame;
 exports.useDecoderGetInfo = useDecoderGetInfo;
+exports.useDecoderGetShmStats = useDecoderGetShmStats;
 exports.useDecoderGetStats = useDecoderGetStats;
 exports.useDecoderListActiveSessions = useDecoderListActiveSessions;
 exports.useDecoderOpenStream = useDecoderOpenStream;
 exports.useDecoderPullFrames = useDecoderPullFrames;
+exports.useDecoderPullHandles = useDecoderPullHandles;
 exports.useDecoderPushPacket = useDecoderPushPacket;
 exports.useDecoderReprobeHwaccel = useDecoderReprobeHwaccel;
 exports.useDecoderSupportsCodec = useDecoderSupportsCodec;
@@ -26137,6 +27104,7 @@ exports.useDetectionPipelineGetDeviceLiveContribution = useDetectionPipelineGetD
 exports.useDetectionPipelineGetDeviceSettingsContribution = useDetectionPipelineGetDeviceSettingsContribution;
 exports.useDevShell = useDevShell;
 exports.useDevice = useDevice;
+exports.useDeviceAutotrack = useDeviceAutotrack;
 exports.useDeviceBattery = useDeviceBattery;
 exports.useDeviceCapability = useDeviceCapability;
 exports.useDeviceDetections = useDeviceDetections;
@@ -26291,6 +27259,9 @@ exports.useMotionGetStatus = useMotionGetStatus;
 exports.useMotionIsDetected = useMotionIsDetected;
 exports.useMotionTriggerGetStatus = useMotionTriggerGetStatus;
 exports.useMotionTriggerSetMotionTrigger = useMotionTriggerSetMotionTrigger;
+exports.useMotionZonesGetOptions = useMotionZonesGetOptions;
+exports.useMotionZonesGetStatus = useMotionZonesGetStatus;
+exports.useMotionZonesSetZone = useMotionZonesSetZone;
 exports.useMqttBrokerAddBroker = useMqttBrokerAddBroker;
 exports.useMqttBrokerGetBrokerConfig = useMqttBrokerGetBrokerConfig;
 exports.useMqttBrokerGetStatus = useMqttBrokerGetStatus;
@@ -26311,6 +27282,7 @@ exports.useNetworkQualityReportClientStats = useNetworkQualityReportClientStats;
 exports.useNodesClusterAddonStatus = useNodesClusterAddonStatus;
 exports.useNodesDeployAddon = useNodesDeployAddon;
 exports.useNodesExecuteQuery = useNodesExecuteQuery;
+exports.useNodesGetCapUsageGraph = useNodesGetCapUsageGraph;
 exports.useNodesGetNodeAddons = useNodesGetNodeAddons;
 exports.useNodesRenameNode = useNodesRenameNode;
 exports.useNodesRestartAddon = useNodesRestartAddon;
@@ -26433,12 +27405,16 @@ exports.usePtzAutotrackGetStatus = usePtzAutotrackGetStatus;
 exports.usePtzAutotrackSetEnabled = usePtzAutotrackSetEnabled;
 exports.usePtzAutotrackSetSettings = usePtzAutotrackSetSettings;
 exports.usePtzContinuousMove = usePtzContinuousMove;
+exports.usePtzDeletePreset = usePtzDeletePreset;
+exports.usePtzGetOptions = usePtzGetOptions;
 exports.usePtzGetPosition = usePtzGetPosition;
 exports.usePtzGetPresets = usePtzGetPresets;
 exports.usePtzGetStatus = usePtzGetStatus;
 exports.usePtzGoHome = usePtzGoHome;
 exports.usePtzGoToPreset = usePtzGoToPreset;
 exports.usePtzMove = usePtzMove;
+exports.usePtzSavePreset = usePtzSavePreset;
+exports.usePtzSetAutofocus = usePtzSetAutofocus;
 exports.usePtzStop = usePtzStop;
 exports.useRebootReboot = useRebootReboot;
 exports.useRecordingEngineDisable = useRecordingEngineDisable;
@@ -26462,6 +27438,7 @@ exports.useRecordingEngineUpdateRetentionConfig = useRecordingEngineUpdateRetent
 exports.useRecordingGetPlaybackUrl = useRecordingGetPlaybackUrl;
 exports.useRecordingGetSegments = useRecordingGetSegments;
 exports.useRecordingGetThumbnailAt = useRecordingGetThumbnailAt;
+exports.useRemoteComponent = useRemoteComponent;
 exports.useSettingsStoreCount = useSettingsStoreCount;
 exports.useSettingsStoreDeclareCollection = useSettingsStoreDeclareCollection;
 exports.useSettingsStoreDelete = useSettingsStoreDelete;
@@ -26503,7 +27480,6 @@ exports.useStorageWriteChunk = useStorageWriteChunk;
 exports.useStreamBrokerApplyDeviceSettingsPatch = useStreamBrokerApplyDeviceSettingsPatch;
 exports.useStreamBrokerAssignProfile = useStreamBrokerAssignProfile;
 exports.useStreamBrokerGetAllRtspEntries = useStreamBrokerGetAllRtspEntries;
-exports.useStreamBrokerGetBroker = useStreamBrokerGetBroker;
 exports.useStreamBrokerGetBrokerStats = useStreamBrokerGetBrokerStats;
 exports.useStreamBrokerGetDeviceLiveContribution = useStreamBrokerGetDeviceLiveContribution;
 exports.useStreamBrokerGetDeviceSettingsContribution = useStreamBrokerGetDeviceSettingsContribution;
@@ -26518,13 +27494,23 @@ exports.useStreamBrokerListAllCameraStreams = useStreamBrokerListAllCameraStream
 exports.useStreamBrokerListAllProfileSlots = useStreamBrokerListAllProfileSlots;
 exports.useStreamBrokerListClients = useStreamBrokerListClients;
 exports.useStreamBrokerPublishCameraStream = useStreamBrokerPublishCameraStream;
+exports.useStreamBrokerPullAudioChunks = useStreamBrokerPullAudioChunks;
+exports.useStreamBrokerPullFrameHandles = useStreamBrokerPullFrameHandles;
 exports.useStreamBrokerRegenerateRtspToken = useStreamBrokerRegenerateRtspToken;
 exports.useStreamBrokerReleaseStreamWithCodec = useStreamBrokerReleaseStreamWithCodec;
 exports.useStreamBrokerRestartProfile = useStreamBrokerRestartProfile;
 exports.useStreamBrokerRetractCameraStream = useStreamBrokerRetractCameraStream;
 exports.useStreamBrokerSetPreBufferDuration = useStreamBrokerSetPreBufferDuration;
 exports.useStreamBrokerSetRtspEnabled = useStreamBrokerSetRtspEnabled;
+exports.useStreamBrokerSubscribeAudioChunks = useStreamBrokerSubscribeAudioChunks;
+exports.useStreamBrokerSubscribeFrames = useStreamBrokerSubscribeFrames;
 exports.useStreamBrokerUnassignProfile = useStreamBrokerUnassignProfile;
+exports.useStreamBrokerUnsubscribeAudioChunks = useStreamBrokerUnsubscribeAudioChunks;
+exports.useStreamBrokerUnsubscribeFrames = useStreamBrokerUnsubscribeFrames;
+exports.useStreamParamsGetConfigSchema = useStreamParamsGetConfigSchema;
+exports.useStreamParamsGetOptions = useStreamParamsGetOptions;
+exports.useStreamParamsGetStatus = useStreamParamsGetStatus;
+exports.useStreamParamsSetProfile = useStreamParamsSetProfile;
 exports.useSwitchGetStatus = useSwitchGetStatus;
 exports.useSwitchSetState = useSwitchSetState;
 exports.useSystem = useSystem;
@@ -26548,10 +27534,16 @@ exports.useUserManagementDeleteUser = useUserManagementDeleteUser;
 exports.useUserManagementDisableTotp = useUserManagementDisableTotp;
 exports.useUserManagementGetTotpStatus = useUserManagementGetTotpStatus;
 exports.useUserManagementListApiKeys = useUserManagementListApiKeys;
+exports.useUserManagementListOauthSessions = useUserManagementListOauthSessions;
 exports.useUserManagementListScopedTokens = useUserManagementListScopedTokens;
 exports.useUserManagementListUsers = useUserManagementListUsers;
+exports.useUserManagementOauthExchangeCode = useUserManagementOauthExchangeCode;
+exports.useUserManagementOauthIssueCode = useUserManagementOauthIssueCode;
+exports.useUserManagementOauthRefresh = useUserManagementOauthRefresh;
+exports.useUserManagementOauthVerifyAccessToken = useUserManagementOauthVerifyAccessToken;
 exports.useUserManagementResetPassword = useUserManagementResetPassword;
 exports.useUserManagementRevokeApiKey = useUserManagementRevokeApiKey;
+exports.useUserManagementRevokeOauthSession = useUserManagementRevokeOauthSession;
 exports.useUserManagementRevokeScopedToken = useUserManagementRevokeScopedToken;
 exports.useUserManagementSetUserScopes = useUserManagementSetUserScopes;
 exports.useUserManagementSetupTotp = useUserManagementSetupTotp;