@camstack/ui-library 1.2.175 → 1.2.176

package/dist/composites/cap-settings/camera-grid-layout.d.ts

@@ -21,6 +21,18 @@ export interface GridLayoutCell {
     /** Where it lands, normalized against the CANVAS. */
     readonly cell: GridNormalizedRect;
 }
+/**
+ * Which profiles this grid can compose, and which sources stop it.
+ *
+ * Read-only in the editor. The operator does not choose what is on offer — the
+ * source cameras do, by what they have assigned — and a checkbox that pretended
+ * otherwise would publish a composition with a hole in it.
+ */
+export interface GridProfileOffer {
+    readonly profile: 'high' | 'mid' | 'low';
+    readonly offered: boolean;
+    readonly missingSources: readonly number[];
+}
 export interface GridLayoutView {
     readonly instanceId: string;
     readonly deviceId: number;
@@ -29,6 +41,7 @@ export interface GridLayoutView {
     readonly height: number;
     readonly fps: number;
     readonly cells: readonly GridLayoutCell[];
+    readonly profiles: readonly GridProfileOffer[];
 }
 /**
  * What a read of the grid can be.
@@ -39,7 +52,14 @@ export interface GridLayoutView {
  * which is exactly the failure D315 exists to stop.
  */
 export type GridLayoutReadOutcome = GridLayoutView | null | 'unreadable';
-/** Parse the `getGridForDevice` reply. See {@link GridLayoutReadOutcome}. */
+/**
+ * Parse the `camera-grid-layout.getLayout` reply. See {@link GridLayoutReadOutcome}.
+ *
+ * The cap answers the view itself, or `null` — there is no envelope. It used to
+ * come back as `{ grid }` from `addons.custom`, which was the mechanism the
+ * widget reached the addon through before the geometry had a capability of its
+ * own; the widget now asks THE CAMERA and the envelope went with the bridge.
+ */
 export declare function parseGridView(raw: unknown): GridLayoutReadOutcome;
 /**
  * Keep a rectangle inside the unit square.

package/dist/index.cjs

@@ -16261,6 +16261,136 @@ function AutotrackSection({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-device-proxy.ts
+/**
+* useDeviceProxy — canonical React entry point for a device.
+*
+* Symmetric with the server's `ctx.fetchDevice(id)` and the SDK's
+* `BackendClient.fetchDevice(id)` — same `DeviceProxy` shape, same
+* routing semantics (cap-method calls go through the wrapper chain;
+* `state.<cap>.value` reads the kernel's mirrored snapshot, never
+* the provider).
+*
+* What you can do with the returned proxy:
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*
+*   // Reactive runtime state — re-renders when the slice changes.
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*
+*   // Imperative cap-method calls — through the wrapper chain.
+*   await dev?.snapshot?.getSnapshot({ streamId: 'high' })
+*   await dev?.ptz?.move({ direction: 'left', steps: 1 })
+*
+* Lifecycle: the hook resolves bindings via `deviceManager.getBindings`
+* the first time `deviceId` becomes valid, and refreshes them on
+* `capability.binding-changed` events for that device. Returns `null`
+* until the first resolution completes (the proxy is not constructible
+* without a binding).
+*
+* Works in both admin-ui (`BackendClient.trpc`) and addon pages
+* (`AddonPageProps.trpc`) — parametrized by a minimal vanilla tRPC
+* proxy shape (matches both at runtime).
+*/
+var BINDING_CHANGED_CATEGORY = "capability.binding-changed";
+/**
+* @returns the proxy, or `null` while bindings are still loading or
+* when `deviceId` is null. Re-rendered when bindings change.
+*/
+function useDeviceProxy(trpc, deviceId) {
+	const [binding, setBinding] = (0, react$1.useState)(null);
+	(0, react$1.useEffect)(() => {
+		if (deviceId === null) {
+			setBinding(null);
+			return;
+		}
+		let cancelled = false;
+		const refresh = async () => {
+			try {
+				const next = await trpc.deviceManager.getBindings.query({ deviceId });
+				if (!cancelled) setBinding(next);
+			} catch {
+				if (!cancelled) setBinding((prev) => prev);
+			}
+		};
+		refresh();
+		const sub = trpc.live?.onEvent.subscribe({ category: BINDING_CHANGED_CATEGORY }, { onData: (evt) => {
+			const src = evt.data?.source;
+			if (!src) {
+				refresh();
+				return;
+			}
+			if (src.type === "device" && src.id === deviceId) refresh();
+		} });
+		return () => {
+			cancelled = true;
+			sub?.unsubscribe();
+		};
+	}, [trpc, deviceId]);
+	return (0, react$1.useMemo)(() => {
+		if (!binding) return null;
+		return (0, _camstack_types.createDeviceProxy)(trpc, binding);
+	}, [trpc, binding]);
+}
+/**
+* Companion hook — reads a `SliceHandle` reactively, returning the
+* current value and re-rendering on every push from the kernel
+* mirror. Pass `dev?.state.battery` etc. as the handle.
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*
+* Why a hook (and not just `dev.state.battery.subscribe(...)` inline)?
+* React doesn't observe external mutations on its own — a bare
+* subscribe call inside a render would fire on every render (memory
+* leak), wouldn't trigger a re-render on slice change, and wouldn't
+* clean up at unmount. The hook bridges the imperative
+* `(value, subscribe)` pair into React's declarative lifecycle via
+* `useSyncExternalStore` (the canonical React 18 primitive for
+* external stores — handles tearing in concurrent rendering and
+* de-dups identical pushes).
+*/
+function useDeviceStateSlice(handle) {
+	const subscribe = (0, react$1.useCallback)((notify) => {
+		if (!handle) return () => void 0;
+		return handle.subscribe(() => notify());
+	}, [handle]);
+	const getSnapshot = (0, react$1.useCallback)(() => handle?.value, [handle]);
+	return (0, react$1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+/**
+* One-line combinator — collapse the common
+* `useDeviceProxy + useDeviceStateSlice(dev?.state.<cap>)` pair into a
+* single hook. The selector receives the live `DeviceProxy['state']`
+* bag (typed against the codegen, so `s.battery` etc. autocomplete)
+* and returns one slice handle. Returns the slice value, undefined
+* while the binding resolves OR when the slice has no cached push yet.
+*
+* Idiomatic call-site:
+*
+*   const battery = useDeviceState(trpc, deviceId, (s) => s.battery)
+*   const zones = useDeviceState(trpc, deviceId, (s) => s.zones)
+*
+* vs. the manual pair:
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*   const zones = useDeviceStateSlice(dev?.state.zones)
+*
+* Use the manual pair when:
+*   - you also need the proxy's cap method bag (`dev.zones?.addZone(...)`)
+*   - you want to share the proxy across multiple slice reads with a
+*     single binding fetch (the combinator calls useDeviceProxy
+*     internally, which dedups bindings via React Query in practice
+*     but spawns one extra subscription per call site)
+*
+* Use the combinator when reading just one slice — most common case.
+*/
+function useDeviceState(trpc, deviceId, select) {
+	const dev = useDeviceProxy(trpc, deviceId);
+	return useDeviceStateSlice(dev ? select(dev.state) : void 0);
+}
+//#endregion
 //#region src/hooks/use-devices.ts
 /**
 * useDevices / useDevice — reactive sync-mirror reads.
@@ -16446,20 +16576,49 @@ function readCell(value) {
 		cell
 	};
 }
-/** Parse the `getGridForDevice` reply. See {@link GridLayoutReadOutcome}. */
+function readProfileOffer(value) {
+	if (!isRecord(value)) return null;
+	const profile = value["profile"];
+	const offered = value["offered"];
+	const missing = value["missingSources"];
+	if (profile !== "high" && profile !== "mid" && profile !== "low") return null;
+	if (typeof offered !== "boolean" || !Array.isArray(missing)) return null;
+	const missingSources = [];
+	for (const entry of missing) {
+		if (typeof entry !== "number" || !Number.isInteger(entry)) return null;
+		missingSources.push(entry);
+	}
+	return {
+		profile,
+		offered,
+		missingSources
+	};
+}
+/**
+* Parse the `camera-grid-layout.getLayout` reply. See {@link GridLayoutReadOutcome}.
+*
+* The cap answers the view itself, or `null` — there is no envelope. It used to
+* come back as `{ grid }` from `addons.custom`, which was the mechanism the
+* widget reached the addon through before the geometry had a capability of its
+* own; the widget now asks THE CAMERA and the envelope went with the bridge.
+*/
 function parseGridView(raw) {
-	if (!isRecord(raw) || !("grid" in raw)) return "unreadable";
-	const grid = raw["grid"];
-	if (grid === null) return null;
-	if (!isRecord(grid)) return "unreadable";
-	const { instanceId, deviceId, name, width, height, fps, cells } = grid;
-	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells)) return "unreadable";
+	if (raw === null) return null;
+	if (!isRecord(raw)) return "unreadable";
+	const { instanceId, deviceId, name, width, height, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
 		if (cell === null) return "unreadable";
 		parsed.push(cell);
 	}
+	const offers = [];
+	for (const entry of profiles) {
+		const offer = readProfileOffer(entry);
+		if (offer === null) return "unreadable";
+		offers.push(offer);
+	}
 	return {
 		instanceId,
 		deviceId,
@@ -16467,7 +16626,8 @@ function parseGridView(raw) {
 		width,
 		height,
 		fps,
-		cells: parsed
+		cells: parsed,
+		profiles: offers
 	};
 }
 /**
@@ -16525,7 +16685,6 @@ function resizeNormalizedRect(rect, dw, dh) {
 * the server nothing and it is wrong in exactly the ways the real composition
 * would be wrong.
 */
-var ADDON_ID = "camera-grid";
 var FULL_FRAME = {
 	x: 0,
 	y: 0,
@@ -16544,36 +16703,36 @@ function CameraGridLayoutEditor({ deviceId }) {
 	const [saveError, setSaveError] = (0, react$1.useState)(null);
 	const [selected, setSelected] = (0, react$1.useState)(0);
 	const [drag, setDrag] = (0, react$1.useState)(null);
+	const dev = useDeviceProxy(system.trpcClient, deviceId);
 	const reload = (0, react$1.useCallback)(async () => {
-		const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
-			addonId: ADDON_ID,
-			action: "getGridForDevice",
-			input: { deviceId }
-		}));
+		const layout = dev?.cameraGridLayout;
+		if (!layout) return;
+		const outcome = parseGridView(await layout.getLayout({}));
 		setLoaded(outcome);
 		setDraft(outcome === null || outcome === "unreadable" ? null : outcome);
-	}, [system, deviceId]);
+	}, [dev]);
 	(0, react$1.useEffect)(() => {
+		if (!dev) return;
+		if (!dev.cameraGridLayout) {
+			setLoaded(null);
+			return;
+		}
 		reload().catch(() => {
 			setLoaded("unreadable");
 		});
-	}, [reload]);
+	}, [dev, reload]);
 	const save = (0, react$1.useCallback)(async () => {
-		if (draft === null) return;
+		const layout = dev?.cameraGridLayout;
+		if (draft === null || !layout) return;
 		setSaving(true);
 		setSaveError(null);
 		try {
-			const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
-				addonId: ADDON_ID,
-				action: "saveGridLayout",
-				input: {
-					deviceId,
-					name: draft.name,
-					width: draft.width,
-					height: draft.height,
-					fps: draft.fps,
-					cells: draft.cells.map((cell) => ({ ...cell }))
-				}
+			const outcome = parseGridView(await layout.saveLayout({
+				name: draft.name,
+				width: draft.width,
+				height: draft.height,
+				fps: draft.fps,
+				cells: draft.cells.map((cell) => ({ ...cell }))
 			}));
 			if (outcome !== null && outcome !== "unreadable") {
 				setLoaded(outcome);
@@ -16584,11 +16743,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 		} finally {
 			setSaving(false);
 		}
-	}, [
-		system,
-		deviceId,
-		draft
-	]);
+	}, [dev, draft]);
 	const patchCell = (0, react$1.useCallback)((index, patch) => {
 		setDraft((prev) => prev === null ? prev : {
 			...prev,
@@ -16742,6 +16897,10 @@ function CameraGridLayoutEditor({ deviceId }) {
 						})
 					]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridProfileReport, {
+					offers: loaded.profiles,
+					cameras
+				}),
 				draft.cells[selected] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellInspector, {
 					cell: draft.cells[selected],
 					index: selected,
@@ -16761,6 +16920,37 @@ function CameraGridLayoutEditor({ deviceId }) {
 		})
 	});
 }
+/**
+* The honest report. A grid's `high` composes its sources' `high` and its `low`
+* their `low`, so a profile is on offer only when EVERY source can serve it —
+* and the refusal names the source, because "this grid has no low" is not
+* something an operator can act on and "615 has no low" is.
+*
+* Read-only on purpose: what is on offer is decided by the source cameras'
+* assignments, and a control here would be a switch that writes nothing (D62).
+*/
+function GridProfileReport({ offers, cameras }) {
+	const nameOf = (deviceId) => cameras.find((camera) => camera.id === deviceId)?.name ?? `#${String(deviceId)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1 rounded border border-border p-2 text-[10.5px]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "uppercase text-foreground-subtle",
+			children: "Published profiles"
+		}), offers.map((offer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "w-10 uppercase",
+				children: offer.profile
+			}), offer.offered ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-foreground-subtle",
+				children: ["composed from every source’s ", offer.profile]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-danger",
+				children: offer.missingSources.length === 0 ? "not offered — this grid has no cells yet" : `not offered — no ${offer.profile} on ${offer.missingSources.map(nameOf).join(", ")}`
+			})]
+		}, offer.profile))]
+	});
+}
 function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 	const { src } = useDeviceSnapshotImage(cell.deviceId, { width: 640 });
 	const backgroundSize = `${String(100 / cell.source.width)}% ${String(100 / cell.source.height)}%`;
@@ -16866,136 +17056,6 @@ function LabelledNumber({ label, value, step = 1, onChange }) {
 	});
 }
 //#endregion
-//#region src/hooks/use-device-proxy.ts
-/**
-* useDeviceProxy — canonical React entry point for a device.
-*
-* Symmetric with the server's `ctx.fetchDevice(id)` and the SDK's
-* `BackendClient.fetchDevice(id)` — same `DeviceProxy` shape, same
-* routing semantics (cap-method calls go through the wrapper chain;
-* `state.<cap>.value` reads the kernel's mirrored snapshot, never
-* the provider).
-*
-* What you can do with the returned proxy:
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*
-*   // Reactive runtime state — re-renders when the slice changes.
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*
-*   // Imperative cap-method calls — through the wrapper chain.
-*   await dev?.snapshot?.getSnapshot({ streamId: 'high' })
-*   await dev?.ptz?.move({ direction: 'left', steps: 1 })
-*
-* Lifecycle: the hook resolves bindings via `deviceManager.getBindings`
-* the first time `deviceId` becomes valid, and refreshes them on
-* `capability.binding-changed` events for that device. Returns `null`
-* until the first resolution completes (the proxy is not constructible
-* without a binding).
-*
-* Works in both admin-ui (`BackendClient.trpc`) and addon pages
-* (`AddonPageProps.trpc`) — parametrized by a minimal vanilla tRPC
-* proxy shape (matches both at runtime).
-*/
-var BINDING_CHANGED_CATEGORY = "capability.binding-changed";
-/**
-* @returns the proxy, or `null` while bindings are still loading or
-* when `deviceId` is null. Re-rendered when bindings change.
-*/
-function useDeviceProxy(trpc, deviceId) {
-	const [binding, setBinding] = (0, react$1.useState)(null);
-	(0, react$1.useEffect)(() => {
-		if (deviceId === null) {
-			setBinding(null);
-			return;
-		}
-		let cancelled = false;
-		const refresh = async () => {
-			try {
-				const next = await trpc.deviceManager.getBindings.query({ deviceId });
-				if (!cancelled) setBinding(next);
-			} catch {
-				if (!cancelled) setBinding((prev) => prev);
-			}
-		};
-		refresh();
-		const sub = trpc.live?.onEvent.subscribe({ category: BINDING_CHANGED_CATEGORY }, { onData: (evt) => {
-			const src = evt.data?.source;
-			if (!src) {
-				refresh();
-				return;
-			}
-			if (src.type === "device" && src.id === deviceId) refresh();
-		} });
-		return () => {
-			cancelled = true;
-			sub?.unsubscribe();
-		};
-	}, [trpc, deviceId]);
-	return (0, react$1.useMemo)(() => {
-		if (!binding) return null;
-		return (0, _camstack_types.createDeviceProxy)(trpc, binding);
-	}, [trpc, binding]);
-}
-/**
-* Companion hook — reads a `SliceHandle` reactively, returning the
-* current value and re-rendering on every push from the kernel
-* mirror. Pass `dev?.state.battery` etc. as the handle.
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*
-* Why a hook (and not just `dev.state.battery.subscribe(...)` inline)?
-* React doesn't observe external mutations on its own — a bare
-* subscribe call inside a render would fire on every render (memory
-* leak), wouldn't trigger a re-render on slice change, and wouldn't
-* clean up at unmount. The hook bridges the imperative
-* `(value, subscribe)` pair into React's declarative lifecycle via
-* `useSyncExternalStore` (the canonical React 18 primitive for
-* external stores — handles tearing in concurrent rendering and
-* de-dups identical pushes).
-*/
-function useDeviceStateSlice(handle) {
-	const subscribe = (0, react$1.useCallback)((notify) => {
-		if (!handle) return () => void 0;
-		return handle.subscribe(() => notify());
-	}, [handle]);
-	const getSnapshot = (0, react$1.useCallback)(() => handle?.value, [handle]);
-	return (0, react$1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-}
-/**
-* One-line combinator — collapse the common
-* `useDeviceProxy + useDeviceStateSlice(dev?.state.<cap>)` pair into a
-* single hook. The selector receives the live `DeviceProxy['state']`
-* bag (typed against the codegen, so `s.battery` etc. autocomplete)
-* and returns one slice handle. Returns the slice value, undefined
-* while the binding resolves OR when the slice has no cached push yet.
-*
-* Idiomatic call-site:
-*
-*   const battery = useDeviceState(trpc, deviceId, (s) => s.battery)
-*   const zones = useDeviceState(trpc, deviceId, (s) => s.zones)
-*
-* vs. the manual pair:
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*   const zones = useDeviceStateSlice(dev?.state.zones)
-*
-* Use the manual pair when:
-*   - you also need the proxy's cap method bag (`dev.zones?.addZone(...)`)
-*   - you want to share the proxy across multiple slice reads with a
-*     single binding fetch (the combinator calls useDeviceProxy
-*     internally, which dedups bindings via React Query in practice
-*     but spawns one extra subscription per call site)
-*
-* Use the combinator when reading just one slice — most common case.
-*/
-function useDeviceState(trpc, deviceId, select) {
-	const dev = useDeviceProxy(trpc, deviceId);
-	return useDeviceStateSlice(dev ? select(dev.state) : void 0);
-}
-//#endregion
 //#region src/hooks/use-device-capability.ts
 function useDeviceCapability(options) {
 	const dev = useDeviceProxy(options.trpc, options.deviceId);

package/dist/index.js

@@ -16237,6 +16237,136 @@ function AutotrackSection({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-device-proxy.ts
+/**
+* useDeviceProxy — canonical React entry point for a device.
+*
+* Symmetric with the server's `ctx.fetchDevice(id)` and the SDK's
+* `BackendClient.fetchDevice(id)` — same `DeviceProxy` shape, same
+* routing semantics (cap-method calls go through the wrapper chain;
+* `state.<cap>.value` reads the kernel's mirrored snapshot, never
+* the provider).
+*
+* What you can do with the returned proxy:
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*
+*   // Reactive runtime state — re-renders when the slice changes.
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*
+*   // Imperative cap-method calls — through the wrapper chain.
+*   await dev?.snapshot?.getSnapshot({ streamId: 'high' })
+*   await dev?.ptz?.move({ direction: 'left', steps: 1 })
+*
+* Lifecycle: the hook resolves bindings via `deviceManager.getBindings`
+* the first time `deviceId` becomes valid, and refreshes them on
+* `capability.binding-changed` events for that device. Returns `null`
+* until the first resolution completes (the proxy is not constructible
+* without a binding).
+*
+* Works in both admin-ui (`BackendClient.trpc`) and addon pages
+* (`AddonPageProps.trpc`) — parametrized by a minimal vanilla tRPC
+* proxy shape (matches both at runtime).
+*/
+var BINDING_CHANGED_CATEGORY = "capability.binding-changed";
+/**
+* @returns the proxy, or `null` while bindings are still loading or
+* when `deviceId` is null. Re-rendered when bindings change.
+*/
+function useDeviceProxy(trpc, deviceId) {
+	const [binding, setBinding] = useState(null);
+	useEffect(() => {
+		if (deviceId === null) {
+			setBinding(null);
+			return;
+		}
+		let cancelled = false;
+		const refresh = async () => {
+			try {
+				const next = await trpc.deviceManager.getBindings.query({ deviceId });
+				if (!cancelled) setBinding(next);
+			} catch {
+				if (!cancelled) setBinding((prev) => prev);
+			}
+		};
+		refresh();
+		const sub = trpc.live?.onEvent.subscribe({ category: BINDING_CHANGED_CATEGORY }, { onData: (evt) => {
+			const src = evt.data?.source;
+			if (!src) {
+				refresh();
+				return;
+			}
+			if (src.type === "device" && src.id === deviceId) refresh();
+		} });
+		return () => {
+			cancelled = true;
+			sub?.unsubscribe();
+		};
+	}, [trpc, deviceId]);
+	return useMemo(() => {
+		if (!binding) return null;
+		return createDeviceProxy(trpc, binding);
+	}, [trpc, binding]);
+}
+/**
+* Companion hook — reads a `SliceHandle` reactively, returning the
+* current value and re-rendering on every push from the kernel
+* mirror. Pass `dev?.state.battery` etc. as the handle.
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*
+* Why a hook (and not just `dev.state.battery.subscribe(...)` inline)?
+* React doesn't observe external mutations on its own — a bare
+* subscribe call inside a render would fire on every render (memory
+* leak), wouldn't trigger a re-render on slice change, and wouldn't
+* clean up at unmount. The hook bridges the imperative
+* `(value, subscribe)` pair into React's declarative lifecycle via
+* `useSyncExternalStore` (the canonical React 18 primitive for
+* external stores — handles tearing in concurrent rendering and
+* de-dups identical pushes).
+*/
+function useDeviceStateSlice(handle) {
+	const subscribe = useCallback((notify) => {
+		if (!handle) return () => void 0;
+		return handle.subscribe(() => notify());
+	}, [handle]);
+	const getSnapshot = useCallback(() => handle?.value, [handle]);
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+/**
+* One-line combinator — collapse the common
+* `useDeviceProxy + useDeviceStateSlice(dev?.state.<cap>)` pair into a
+* single hook. The selector receives the live `DeviceProxy['state']`
+* bag (typed against the codegen, so `s.battery` etc. autocomplete)
+* and returns one slice handle. Returns the slice value, undefined
+* while the binding resolves OR when the slice has no cached push yet.
+*
+* Idiomatic call-site:
+*
+*   const battery = useDeviceState(trpc, deviceId, (s) => s.battery)
+*   const zones = useDeviceState(trpc, deviceId, (s) => s.zones)
+*
+* vs. the manual pair:
+*
+*   const dev = useDeviceProxy(trpc, deviceId)
+*   const battery = useDeviceStateSlice(dev?.state.battery)
+*   const zones = useDeviceStateSlice(dev?.state.zones)
+*
+* Use the manual pair when:
+*   - you also need the proxy's cap method bag (`dev.zones?.addZone(...)`)
+*   - you want to share the proxy across multiple slice reads with a
+*     single binding fetch (the combinator calls useDeviceProxy
+*     internally, which dedups bindings via React Query in practice
+*     but spawns one extra subscription per call site)
+*
+* Use the combinator when reading just one slice — most common case.
+*/
+function useDeviceState(trpc, deviceId, select) {
+	const dev = useDeviceProxy(trpc, deviceId);
+	return useDeviceStateSlice(dev ? select(dev.state) : void 0);
+}
+//#endregion
 //#region src/hooks/use-devices.ts
 /**
 * useDevices / useDevice — reactive sync-mirror reads.
@@ -16422,20 +16552,49 @@ function readCell(value) {
 		cell
 	};
 }
-/** Parse the `getGridForDevice` reply. See {@link GridLayoutReadOutcome}. */
+function readProfileOffer(value) {
+	if (!isRecord(value)) return null;
+	const profile = value["profile"];
+	const offered = value["offered"];
+	const missing = value["missingSources"];
+	if (profile !== "high" && profile !== "mid" && profile !== "low") return null;
+	if (typeof offered !== "boolean" || !Array.isArray(missing)) return null;
+	const missingSources = [];
+	for (const entry of missing) {
+		if (typeof entry !== "number" || !Number.isInteger(entry)) return null;
+		missingSources.push(entry);
+	}
+	return {
+		profile,
+		offered,
+		missingSources
+	};
+}
+/**
+* Parse the `camera-grid-layout.getLayout` reply. See {@link GridLayoutReadOutcome}.
+*
+* The cap answers the view itself, or `null` — there is no envelope. It used to
+* come back as `{ grid }` from `addons.custom`, which was the mechanism the
+* widget reached the addon through before the geometry had a capability of its
+* own; the widget now asks THE CAMERA and the envelope went with the bridge.
+*/
 function parseGridView(raw) {
-	if (!isRecord(raw) || !("grid" in raw)) return "unreadable";
-	const grid = raw["grid"];
-	if (grid === null) return null;
-	if (!isRecord(grid)) return "unreadable";
-	const { instanceId, deviceId, name, width, height, fps, cells } = grid;
-	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells)) return "unreadable";
+	if (raw === null) return null;
+	if (!isRecord(raw)) return "unreadable";
+	const { instanceId, deviceId, name, width, height, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
 		if (cell === null) return "unreadable";
 		parsed.push(cell);
 	}
+	const offers = [];
+	for (const entry of profiles) {
+		const offer = readProfileOffer(entry);
+		if (offer === null) return "unreadable";
+		offers.push(offer);
+	}
 	return {
 		instanceId,
 		deviceId,
@@ -16443,7 +16602,8 @@ function parseGridView(raw) {
 		width,
 		height,
 		fps,
-		cells: parsed
+		cells: parsed,
+		profiles: offers
 	};
 }
 /**
@@ -16501,7 +16661,6 @@ function resizeNormalizedRect(rect, dw, dh) {
 * the server nothing and it is wrong in exactly the ways the real composition
 * would be wrong.
 */
-var ADDON_ID = "camera-grid";
 var FULL_FRAME = {
 	x: 0,
 	y: 0,
@@ -16520,36 +16679,36 @@ function CameraGridLayoutEditor({ deviceId }) {
 	const [saveError, setSaveError] = useState(null);
 	const [selected, setSelected] = useState(0);
 	const [drag, setDrag] = useState(null);
+	const dev = useDeviceProxy(system.trpcClient, deviceId);
 	const reload = useCallback(async () => {
-		const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
-			addonId: ADDON_ID,
-			action: "getGridForDevice",
-			input: { deviceId }
-		}));
+		const layout = dev?.cameraGridLayout;
+		if (!layout) return;
+		const outcome = parseGridView(await layout.getLayout({}));
 		setLoaded(outcome);
 		setDraft(outcome === null || outcome === "unreadable" ? null : outcome);
-	}, [system, deviceId]);
+	}, [dev]);
 	useEffect(() => {
+		if (!dev) return;
+		if (!dev.cameraGridLayout) {
+			setLoaded(null);
+			return;
+		}
 		reload().catch(() => {
 			setLoaded("unreadable");
 		});
-	}, [reload]);
+	}, [dev, reload]);
 	const save = useCallback(async () => {
-		if (draft === null) return;
+		const layout = dev?.cameraGridLayout;
+		if (draft === null || !layout) return;
 		setSaving(true);
 		setSaveError(null);
 		try {
-			const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
-				addonId: ADDON_ID,
-				action: "saveGridLayout",
-				input: {
-					deviceId,
-					name: draft.name,
-					width: draft.width,
-					height: draft.height,
-					fps: draft.fps,
-					cells: draft.cells.map((cell) => ({ ...cell }))
-				}
+			const outcome = parseGridView(await layout.saveLayout({
+				name: draft.name,
+				width: draft.width,
+				height: draft.height,
+				fps: draft.fps,
+				cells: draft.cells.map((cell) => ({ ...cell }))
 			}));
 			if (outcome !== null && outcome !== "unreadable") {
 				setLoaded(outcome);
@@ -16560,11 +16719,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 		} finally {
 			setSaving(false);
 		}
-	}, [
-		system,
-		deviceId,
-		draft
-	]);
+	}, [dev, draft]);
 	const patchCell = useCallback((index, patch) => {
 		setDraft((prev) => prev === null ? prev : {
 			...prev,
@@ -16718,6 +16873,10 @@ function CameraGridLayoutEditor({ deviceId }) {
 						})
 					]
 				}),
+				/* @__PURE__ */ jsx(GridProfileReport, {
+					offers: loaded.profiles,
+					cameras
+				}),
 				draft.cells[selected] !== void 0 && /* @__PURE__ */ jsx(CellInspector, {
 					cell: draft.cells[selected],
 					index: selected,
@@ -16737,6 +16896,37 @@ function CameraGridLayoutEditor({ deviceId }) {
 		})
 	});
 }
+/**
+* The honest report. A grid's `high` composes its sources' `high` and its `low`
+* their `low`, so a profile is on offer only when EVERY source can serve it —
+* and the refusal names the source, because "this grid has no low" is not
+* something an operator can act on and "615 has no low" is.
+*
+* Read-only on purpose: what is on offer is decided by the source cameras'
+* assignments, and a control here would be a switch that writes nothing (D62).
+*/
+function GridProfileReport({ offers, cameras }) {
+	const nameOf = (deviceId) => cameras.find((camera) => camera.id === deviceId)?.name ?? `#${String(deviceId)}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 rounded border border-border p-2 text-[10.5px]",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "uppercase text-foreground-subtle",
+			children: "Published profiles"
+		}), offers.map((offer) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "w-10 uppercase",
+				children: offer.profile
+			}), offer.offered ? /* @__PURE__ */ jsxs("span", {
+				className: "text-foreground-subtle",
+				children: ["composed from every source’s ", offer.profile]
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-danger",
+				children: offer.missingSources.length === 0 ? "not offered — this grid has no cells yet" : `not offered — no ${offer.profile} on ${offer.missingSources.map(nameOf).join(", ")}`
+			})]
+		}, offer.profile))]
+	});
+}
 function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 	const { src } = useDeviceSnapshotImage(cell.deviceId, { width: 640 });
 	const backgroundSize = `${String(100 / cell.source.width)}% ${String(100 / cell.source.height)}%`;
@@ -16842,136 +17032,6 @@ function LabelledNumber({ label, value, step = 1, onChange }) {
 	});
 }
 //#endregion
-//#region src/hooks/use-device-proxy.ts
-/**
-* useDeviceProxy — canonical React entry point for a device.
-*
-* Symmetric with the server's `ctx.fetchDevice(id)` and the SDK's
-* `BackendClient.fetchDevice(id)` — same `DeviceProxy` shape, same
-* routing semantics (cap-method calls go through the wrapper chain;
-* `state.<cap>.value` reads the kernel's mirrored snapshot, never
-* the provider).
-*
-* What you can do with the returned proxy:
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*
-*   // Reactive runtime state — re-renders when the slice changes.
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*
-*   // Imperative cap-method calls — through the wrapper chain.
-*   await dev?.snapshot?.getSnapshot({ streamId: 'high' })
-*   await dev?.ptz?.move({ direction: 'left', steps: 1 })
-*
-* Lifecycle: the hook resolves bindings via `deviceManager.getBindings`
-* the first time `deviceId` becomes valid, and refreshes them on
-* `capability.binding-changed` events for that device. Returns `null`
-* until the first resolution completes (the proxy is not constructible
-* without a binding).
-*
-* Works in both admin-ui (`BackendClient.trpc`) and addon pages
-* (`AddonPageProps.trpc`) — parametrized by a minimal vanilla tRPC
-* proxy shape (matches both at runtime).
-*/
-var BINDING_CHANGED_CATEGORY = "capability.binding-changed";
-/**
-* @returns the proxy, or `null` while bindings are still loading or
-* when `deviceId` is null. Re-rendered when bindings change.
-*/
-function useDeviceProxy(trpc, deviceId) {
-	const [binding, setBinding] = useState(null);
-	useEffect(() => {
-		if (deviceId === null) {
-			setBinding(null);
-			return;
-		}
-		let cancelled = false;
-		const refresh = async () => {
-			try {
-				const next = await trpc.deviceManager.getBindings.query({ deviceId });
-				if (!cancelled) setBinding(next);
-			} catch {
-				if (!cancelled) setBinding((prev) => prev);
-			}
-		};
-		refresh();
-		const sub = trpc.live?.onEvent.subscribe({ category: BINDING_CHANGED_CATEGORY }, { onData: (evt) => {
-			const src = evt.data?.source;
-			if (!src) {
-				refresh();
-				return;
-			}
-			if (src.type === "device" && src.id === deviceId) refresh();
-		} });
-		return () => {
-			cancelled = true;
-			sub?.unsubscribe();
-		};
-	}, [trpc, deviceId]);
-	return useMemo(() => {
-		if (!binding) return null;
-		return createDeviceProxy(trpc, binding);
-	}, [trpc, binding]);
-}
-/**
-* Companion hook — reads a `SliceHandle` reactively, returning the
-* current value and re-rendering on every push from the kernel
-* mirror. Pass `dev?.state.battery` etc. as the handle.
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*
-* Why a hook (and not just `dev.state.battery.subscribe(...)` inline)?
-* React doesn't observe external mutations on its own — a bare
-* subscribe call inside a render would fire on every render (memory
-* leak), wouldn't trigger a re-render on slice change, and wouldn't
-* clean up at unmount. The hook bridges the imperative
-* `(value, subscribe)` pair into React's declarative lifecycle via
-* `useSyncExternalStore` (the canonical React 18 primitive for
-* external stores — handles tearing in concurrent rendering and
-* de-dups identical pushes).
-*/
-function useDeviceStateSlice(handle) {
-	const subscribe = useCallback((notify) => {
-		if (!handle) return () => void 0;
-		return handle.subscribe(() => notify());
-	}, [handle]);
-	const getSnapshot = useCallback(() => handle?.value, [handle]);
-	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-/**
-* One-line combinator — collapse the common
-* `useDeviceProxy + useDeviceStateSlice(dev?.state.<cap>)` pair into a
-* single hook. The selector receives the live `DeviceProxy['state']`
-* bag (typed against the codegen, so `s.battery` etc. autocomplete)
-* and returns one slice handle. Returns the slice value, undefined
-* while the binding resolves OR when the slice has no cached push yet.
-*
-* Idiomatic call-site:
-*
-*   const battery = useDeviceState(trpc, deviceId, (s) => s.battery)
-*   const zones = useDeviceState(trpc, deviceId, (s) => s.zones)
-*
-* vs. the manual pair:
-*
-*   const dev = useDeviceProxy(trpc, deviceId)
-*   const battery = useDeviceStateSlice(dev?.state.battery)
-*   const zones = useDeviceStateSlice(dev?.state.zones)
-*
-* Use the manual pair when:
-*   - you also need the proxy's cap method bag (`dev.zones?.addZone(...)`)
-*   - you want to share the proxy across multiple slice reads with a
-*     single binding fetch (the combinator calls useDeviceProxy
-*     internally, which dedups bindings via React Query in practice
-*     but spawns one extra subscription per call site)
-*
-* Use the combinator when reading just one slice — most common case.
-*/
-function useDeviceState(trpc, deviceId, select) {
-	const dev = useDeviceProxy(trpc, deviceId);
-	return useDeviceStateSlice(dev ? select(dev.state) : void 0);
-}
-//#endregion
 //#region src/hooks/use-device-capability.ts
 function useDeviceCapability(options) {
 	const dev = useDeviceProxy(options.trpc, options.deviceId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.175",
+  "version": "1.2.176",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",