@camstack/ui-library 1.2.179 → 1.2.181

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

@@ -32,13 +32,25 @@ export interface GridProfileOffer {
     readonly profile: 'high' | 'mid' | 'low';
     readonly offered: boolean;
     readonly missingSources: readonly number[];
+    /**
+     * The canvas this profile composes onto, `WxH`, or empty when it is not
+     * offered. DERIVED — the operator no longer types a resolution, so this is
+     * the only place the grid's actual size is ever stated.
+     */
+    readonly canvas: string;
+    /**
+     * Whether this profile is PUBLISHED, of the ones the grid could serve.
+     *
+     * A grid's `high` composes its sources' `high`, so on a 4K fleet it is a 4K
+     * canvas built from 4K decodes — an opt-in, not something a viewer's adaptive
+     * should be handed by climbing to the top rung it can see.
+     */
+    readonly published: boolean;
 }
 export interface GridLayoutView {
     readonly instanceId: string;
     readonly deviceId: number;
     readonly name: string;
-    readonly width: number;
-    readonly height: number;
     readonly fps: number;
     readonly cells: readonly GridLayoutCell[];
     readonly profiles: readonly GridProfileOffer[];

package/dist/index.cjs

@@ -16641,7 +16641,9 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : "",
+		published: typeof value["published"] === "boolean" ? value["published"] : offered
 	};
 }
 /**
@@ -16655,8 +16657,8 @@ function readProfileOffer(value) {
 function parseGridView(raw) {
 	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 { instanceId, deviceId, name, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
@@ -16673,8 +16675,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16888,7 +16888,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 			setLoaded("unreadable");
 		});
 	}, [dev, reload]);
-	const save = (0, react$1.useCallback)(async () => {
+	const save = (0, react$1.useCallback)(async (extra) => {
 		const layout = dev?.cameraGridLayout;
 		if (draft === null || !layout) return;
 		setSaving(true);
@@ -16896,10 +16896,9 @@ function CameraGridLayoutEditor({ deviceId }) {
 		try {
 			const outcome = parseGridView(await layout.saveLayout({
 				name: draft.name,
-				width: draft.width,
-				height: draft.height,
 				fps: draft.fps,
-				cells: draft.cells.map((cell) => ({ ...cell }))
+				cells: draft.cells.map((cell) => ({ ...cell })),
+				...extra?.publishedProfiles !== void 0 ? { publishedProfiles: [...extra.publishedProfiles] } : {}
 			}));
 			if (outcome !== null && outcome !== "unreadable") {
 				setLoaded(outcome);
@@ -16920,7 +16919,27 @@ function CameraGridLayoutEditor({ deviceId }) {
 			} : cell)
 		});
 	}, []);
-	const canvasAspect = (0, react$1.useMemo)(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
+	/**
+	* The shape the grid will actually come out as.
+	*
+	* The canvas is no longer a field: each profile derives its own from the
+	* cells and the sources' dimensions, and the server reports what it came out
+	* as. Drawing at that aspect is the only way the editor shows the truth —
+	* before, it drew at whatever two numbers had been typed, which is exactly
+	* how a layout could look right here and wrong on screen.
+	*
+	* 16:9 while nothing is offered yet: a grid with no cells has no shape, and
+	* an empty editor has to be drawn at something.
+	*/
+	const canvasAspect = (0, react$1.useMemo)(() => {
+		const offered = loaded === void 0 || loaded === null || loaded === "unreadable" ? [] : loaded.profiles;
+		for (const row of offered) {
+			if (!row.offered) continue;
+			const [width, height] = row.canvas.split("x").map(Number);
+			if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return width / height;
+		}
+		return 16 / 9;
+	}, [loaded]);
 	if (loaded === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
 		title: "Grid layout",
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
@@ -17031,66 +17050,48 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "grid grid-cols-4 gap-2 text-[10.5px]",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "Width",
-							value: draft.width,
-							onChange: (width) => {
-								setDraft({
-									...draft,
-									width
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "Height",
-							value: draft.height,
-							onChange: (height) => {
-								setDraft({
-									...draft,
-									height
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
-							label: "FPS",
-							value: draft.fps,
-							onChange: (fps) => {
-								setDraft({
-									...draft,
-									fps
-								});
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							disabled: draft.cells.length >= MAX_CELLS,
-							onClick: () => {
-								const first = cameras.find((camera) => camera.id !== deviceId);
-								if (!first) return;
-								setDraft({
-									...draft,
-									cells: [...draft.cells, {
-										deviceId: first.id,
-										source: FULL_FRAME,
-										cell: clampNormalizedRect({
-											x: .1,
-											y: .1,
-											width: .4,
-											height: .4
-										})
-									}]
-								});
-								setSelected(draft.cells.length);
-							},
-							className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
-						})
-					]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+						label: "FPS",
+						value: draft.fps,
+						onChange: (fps) => {
+							setDraft({
+								...draft,
+								fps
+							});
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						disabled: draft.cells.length >= MAX_CELLS,
+						onClick: () => {
+							const first = cameras.find((camera) => camera.id !== deviceId);
+							if (!first) return;
+							setDraft({
+								...draft,
+								cells: [...draft.cells, {
+									deviceId: first.id,
+									source: FULL_FRAME,
+									cell: clampNormalizedRect({
+										x: .1,
+										y: .1,
+										width: .4,
+										height: .4
+									})
+								}]
+							});
+							setSelected(draft.cells.length);
+						},
+						className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
+					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridProfileReport, {
 					offers: loaded.profiles,
-					cameras
+					cameras,
+					onToggle: (profile) => {
+						if (draft === null) return;
+						const current = loaded.profiles.filter((row) => row.published).map((row) => row.profile);
+						save({ publishedProfiles: current.includes(profile) ? current.filter((entry) => entry !== profile) : [...current, profile] });
+					}
 				}),
 				draft.cells[selected] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellInspector, {
 					cell: draft.cells[selected],
@@ -17120,7 +17121,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 * 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 }) {
+function GridProfileReport({ offers, cameras, onToggle }) {
 	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]",
@@ -17129,16 +17130,33 @@ function GridProfileReport({ offers, cameras }) {
 			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(", ")}`
-			})]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked: offer.published,
+					disabled: !offer.offered,
+					"aria-label": `publish ${offer.profile}`,
+					onChange: () => {
+						onToggle(offer.profile);
+					}
+				}),
+				/* @__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: [
+						offer.canvas,
+						" —",
+						" ",
+						offer.published ? `composed from every source’s ${offer.profile}` : "serviceable, not published"
+					]
+				}) : /* @__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))]
 	});
 }

package/dist/index.js

@@ -16617,7 +16617,9 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : "",
+		published: typeof value["published"] === "boolean" ? value["published"] : offered
 	};
 }
 /**
@@ -16631,8 +16633,8 @@ function readProfileOffer(value) {
 function parseGridView(raw) {
 	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 { instanceId, deviceId, name, fps, cells, profiles } = raw;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof fps !== "number" || !Array.isArray(cells) || !Array.isArray(profiles)) return "unreadable";
 	const parsed = [];
 	for (const entry of cells) {
 		const cell = readCell(entry);
@@ -16649,8 +16651,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16864,7 +16864,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 			setLoaded("unreadable");
 		});
 	}, [dev, reload]);
-	const save = useCallback(async () => {
+	const save = useCallback(async (extra) => {
 		const layout = dev?.cameraGridLayout;
 		if (draft === null || !layout) return;
 		setSaving(true);
@@ -16872,10 +16872,9 @@ function CameraGridLayoutEditor({ deviceId }) {
 		try {
 			const outcome = parseGridView(await layout.saveLayout({
 				name: draft.name,
-				width: draft.width,
-				height: draft.height,
 				fps: draft.fps,
-				cells: draft.cells.map((cell) => ({ ...cell }))
+				cells: draft.cells.map((cell) => ({ ...cell })),
+				...extra?.publishedProfiles !== void 0 ? { publishedProfiles: [...extra.publishedProfiles] } : {}
 			}));
 			if (outcome !== null && outcome !== "unreadable") {
 				setLoaded(outcome);
@@ -16896,7 +16895,27 @@ function CameraGridLayoutEditor({ deviceId }) {
 			} : cell)
 		});
 	}, []);
-	const canvasAspect = useMemo(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
+	/**
+	* The shape the grid will actually come out as.
+	*
+	* The canvas is no longer a field: each profile derives its own from the
+	* cells and the sources' dimensions, and the server reports what it came out
+	* as. Drawing at that aspect is the only way the editor shows the truth —
+	* before, it drew at whatever two numbers had been typed, which is exactly
+	* how a layout could look right here and wrong on screen.
+	*
+	* 16:9 while nothing is offered yet: a grid with no cells has no shape, and
+	* an empty editor has to be drawn at something.
+	*/
+	const canvasAspect = useMemo(() => {
+		const offered = loaded === void 0 || loaded === null || loaded === "unreadable" ? [] : loaded.profiles;
+		for (const row of offered) {
+			if (!row.offered) continue;
+			const [width, height] = row.canvas.split("x").map(Number);
+			if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return width / height;
+		}
+		return 16 / 9;
+	}, [loaded]);
 	if (loaded === void 0) return /* @__PURE__ */ jsx(WidgetPanel, {
 		title: "Grid layout",
 		icon: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5" }),
@@ -17007,66 +17026,48 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "grid grid-cols-4 gap-2 text-[10.5px]",
-					children: [
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "Width",
-							value: draft.width,
-							onChange: (width) => {
-								setDraft({
-									...draft,
-									width
-								});
-							}
-						}),
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "Height",
-							value: draft.height,
-							onChange: (height) => {
-								setDraft({
-									...draft,
-									height
-								});
-							}
-						}),
-						/* @__PURE__ */ jsx(LabelledNumber, {
-							label: "FPS",
-							value: draft.fps,
-							onChange: (fps) => {
-								setDraft({
-									...draft,
-									fps
-								});
-							}
-						}),
-						/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							disabled: draft.cells.length >= MAX_CELLS,
-							onClick: () => {
-								const first = cameras.find((camera) => camera.id !== deviceId);
-								if (!first) return;
-								setDraft({
-									...draft,
-									cells: [...draft.cells, {
-										deviceId: first.id,
-										source: FULL_FRAME,
-										cell: clampNormalizedRect({
-											x: .1,
-											y: .1,
-											width: .4,
-											height: .4
-										})
-									}]
-								});
-								setSelected(draft.cells.length);
-							},
-							className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
-							children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }), " Cell"]
-						})
-					]
+					children: [/* @__PURE__ */ jsx(LabelledNumber, {
+						label: "FPS",
+						value: draft.fps,
+						onChange: (fps) => {
+							setDraft({
+								...draft,
+								fps
+							});
+						}
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: draft.cells.length >= MAX_CELLS,
+						onClick: () => {
+							const first = cameras.find((camera) => camera.id !== deviceId);
+							if (!first) return;
+							setDraft({
+								...draft,
+								cells: [...draft.cells, {
+									deviceId: first.id,
+									source: FULL_FRAME,
+									cell: clampNormalizedRect({
+										x: .1,
+										y: .1,
+										width: .4,
+										height: .4
+									})
+								}]
+							});
+							setSelected(draft.cells.length);
+						},
+						className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
+						children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }), " Cell"]
+					})]
 				}),
 				/* @__PURE__ */ jsx(GridProfileReport, {
 					offers: loaded.profiles,
-					cameras
+					cameras,
+					onToggle: (profile) => {
+						if (draft === null) return;
+						const current = loaded.profiles.filter((row) => row.published).map((row) => row.profile);
+						save({ publishedProfiles: current.includes(profile) ? current.filter((entry) => entry !== profile) : [...current, profile] });
+					}
 				}),
 				draft.cells[selected] !== void 0 && /* @__PURE__ */ jsx(CellInspector, {
 					cell: draft.cells[selected],
@@ -17096,7 +17097,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 * 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 }) {
+function GridProfileReport({ offers, cameras, onToggle }) {
 	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]",
@@ -17105,16 +17106,33 @@ function GridProfileReport({ offers, cameras }) {
 			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(", ")}`
-			})]
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: offer.published,
+					disabled: !offer.offered,
+					"aria-label": `publish ${offer.profile}`,
+					onChange: () => {
+						onToggle(offer.profile);
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-10 uppercase",
+					children: offer.profile
+				}),
+				offer.offered ? /* @__PURE__ */ jsxs("span", {
+					className: "text-foreground-subtle",
+					children: [
+						offer.canvas,
+						" —",
+						" ",
+						offer.published ? `composed from every source’s ${offer.profile}` : "serviceable, not published"
+					]
+				}) : /* @__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))]
 	});
 }

package/package.json

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