@camstack/ui-library 1.2.178 → 1.2.180

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

@@ -32,13 +32,17 @@ 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;
 }
 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,8 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : ""
 	};
 }
 /**
@@ -16655,8 +16656,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 +16674,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16806,6 +16805,25 @@ var FULL_FRAME = {
 var MAX_CELLS = 16;
 /** Hoisted so `useDevices` does not re-subscribe on every render. */
 var CAMERA_FILTER = { type: _camstack_types.DeviceType.Camera };
+/**
+* A rectangle being dragged must not also PAN THE PAGE.
+*
+* On a phone a pointerdown on a `div` is a scroll gesture until the browser is
+* told otherwise, and `preventDefault` in the handler is too late — the browser
+* has already decided. `touch-action: none` is the only thing that makes a drag
+* work with a finger, and every surface that starts one carries it.
+*/
+var DRAG_SURFACE = { touchAction: "none" };
+/**
+* Finger-sized hit area around a grip.
+*
+* The visible square stays small (it sits ON the picture being edited and a big
+* one hides what it is positioning); the TOUCHABLE box around it is 24px, which
+* is the smallest target size that does not need a fingernail. The two are
+* different boxes on purpose — making the dot itself 24px would cover a quarter
+* of a small cell.
+*/
+var HANDLE_HIT = "absolute flex h-6 w-6 items-center justify-center";
 /** The eight grips, in the order they are drawn. */
 var HANDLES = [
 	"nw",
@@ -16818,15 +16836,26 @@ var HANDLES = [
 	"w"
 ];
 var HANDLE_STYLE = {
-	nw: "-top-1 -left-1 cursor-nw-resize",
-	n: "-top-1 left-1/2 -translate-x-1/2 cursor-n-resize",
-	ne: "-top-1 -right-1 cursor-ne-resize",
-	e: "top-1/2 -right-1 -translate-y-1/2 cursor-e-resize",
-	se: "-bottom-1 -right-1 cursor-se-resize",
-	s: "-bottom-1 left-1/2 -translate-x-1/2 cursor-s-resize",
-	sw: "-bottom-1 -left-1 cursor-sw-resize",
-	w: "top-1/2 -left-1 -translate-y-1/2 cursor-w-resize"
+	nw: "-top-3 -left-3 cursor-nw-resize",
+	n: "-top-3 left-1/2 -translate-x-1/2 cursor-n-resize",
+	ne: "-top-3 -right-3 cursor-ne-resize",
+	e: "top-1/2 -right-3 -translate-y-1/2 cursor-e-resize",
+	se: "-bottom-3 -right-3 cursor-se-resize",
+	s: "-bottom-3 left-1/2 -translate-x-1/2 cursor-s-resize",
+	sw: "-bottom-3 -left-3 cursor-sw-resize",
+	w: "top-1/2 -left-3 -translate-y-1/2 cursor-w-resize"
 };
+/**
+* Start a drag and KEEP it, even when the finger leaves the rectangle.
+*
+* Without pointer capture a drag ends the moment the pointer crosses the box it
+* started in — which on a phone is immediately, because the box is small and
+* the finger is not. With capture the events keep coming to the element that
+* was grabbed and still bubble to the canvas that does the arithmetic.
+*/
+function capturePointer(event) {
+	event.currentTarget.setPointerCapture(event.pointerId);
+}
 /** Move or resize, from one drag and one delta. */
 function applyDrag(drag, dx, dy) {
 	return drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRectFrom(drag.origin, drag.mode, dx, dy);
@@ -16866,8 +16895,6 @@ 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 }))
 			}));
@@ -16890,7 +16917,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" }),
@@ -16966,12 +17013,15 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
-					style: { aspectRatio: String(canvasAspect) },
+					style: {
+						aspectRatio: String(canvasAspect),
+						...DRAG_SURFACE
+					},
 					onPointerMove,
 					onPointerUp: () => {
 						setDrag(null);
 					},
-					onPointerLeave: () => {
+					onPointerCancel: () => {
 						setDrag(null);
 					},
 					children: [draft.cells.map((cell, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCellBox, {
@@ -16998,62 +17048,39 @@ 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,
@@ -17101,7 +17128,11 @@ function GridProfileReport({ offers, cameras }) {
 				children: offer.profile
 			}), offer.offered ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "text-foreground-subtle",
-				children: ["composed from every source’s ", offer.profile]
+				children: [
+					offer.canvas,
+					" — 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(", ")}`
@@ -17117,10 +17148,12 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 		role: "presentation",
 		onPointerDown: (event) => {
 			onSelect();
+			capturePointer(event);
 			onDragStart("move", event);
 		},
 		className: `absolute cursor-move border ${selected ? "border-accent" : "border-border/60"}`,
 		style: {
+			...DRAG_SURFACE,
 			left: `${String(cell.cell.x * 100)}%`,
 			top: `${String(cell.cell.y * 100)}%`,
 			width: `${String(cell.cell.width * 100)}%`,
@@ -17134,9 +17167,12 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 			role: "presentation",
 			onPointerDown: (event) => {
 				event.stopPropagation();
+				capturePointer(event);
 				onDragStart(handle, event);
 			},
-			className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+			className: `${HANDLE_HIT} ${HANDLE_STYLE[handle]}`,
+			style: DRAG_SURFACE,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-2.5 w-2.5 bg-accent" })
 		}, handle))
 	});
 }
@@ -17181,16 +17217,15 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 				}
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "grid grid-cols-4 gap-2",
+				className: "grid grid-cols-2 gap-x-3 gap-y-1.5",
 				children: [
 					"x",
 					"y",
 					"width",
 					"height"
-				].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+				].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CropSlider, {
 					label: `Crop ${key}`,
-					value: Math.round(cell.source[key] * 100) / 100,
-					step: .01,
+					value: cell.source[key],
 					onChange: (next) => {
 						onChange({ source: clampNormalizedRect({
 							...cell.source,
@@ -17218,6 +17253,7 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 function SourceCropEditor({ deviceId, source, onChange }) {
 	const { src } = useDeviceSnapshotImage(deviceId, { width: 640 });
 	const [drag, setDrag] = (0, react$1.useState)(null);
+	const [sourceAspect, setSourceAspect] = (0, react$1.useState)(null);
 	const onPointerMove = (event) => {
 		if (drag === null) return;
 		const bounds = event.currentTarget.getBoundingClientRect();
@@ -17247,12 +17283,15 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
-			style: { aspectRatio: "16 / 9" },
+			style: {
+				aspectRatio: String(sourceAspect ?? 16 / 9),
+				...DRAG_SURFACE
+			},
 			onPointerMove,
 			onPointerUp: () => {
 				setDrag(null);
 			},
-			onPointerLeave: () => {
+			onPointerCancel: () => {
 				setDrag(null);
 			},
 			children: [
@@ -17262,12 +17301,17 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 					src,
 					alt: "",
-					className: "absolute inset-0 h-full w-full object-cover"
+					className: "absolute inset-0 h-full w-full",
+					onLoad: (event) => {
+						const { naturalWidth, naturalHeight } = event.currentTarget;
+						if (naturalWidth > 0 && naturalHeight > 0) setSourceAspect(naturalWidth / naturalHeight);
+					}
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-black/55" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					role: "presentation",
 					onPointerDown: (event) => {
+						capturePointer(event);
 						setDrag({
 							mode: "move",
 							startX: event.clientX,
@@ -17277,6 +17321,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 					},
 					className: "absolute cursor-move border border-accent",
 					style: {
+						...DRAG_SURFACE,
 						left: `${String(source.x * 100)}%`,
 						top: `${String(source.y * 100)}%`,
 						width: `${String(source.width * 100)}%`,
@@ -17289,6 +17334,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 						role: "presentation",
 						onPointerDown: (event) => {
 							event.stopPropagation();
+							capturePointer(event);
 							setDrag({
 								mode: handle,
 								startX: event.clientX,
@@ -17296,13 +17342,60 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 								origin: source
 							});
 						},
-						className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+						className: `${HANDLE_HIT} ${HANDLE_STYLE[handle]}`,
+						style: DRAG_SURFACE,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-2.5 w-2.5 bg-accent" })
 					}, handle))
 				})
 			]
 		})]
 	});
 }
+/**
+* One crop number, as a slider AND as a number.
+*
+* The slider is what makes this usable with a thumb — a `number` input on a
+* phone opens a keyboard, and adjusting a crop by typing 0.37 then 0.39 then
+* 0.38 is not adjusting, it is guessing. The typed field stays because a slider
+* cannot express "exactly a third" and because a value you can read is how you
+* copy a crop from one cell to another.
+*
+* Both write through `clampNormalizedRect` upstream, so neither can hand the
+* addon a rectangle that leaves the frame — it THROWS on one, by design.
+*/
+function CropSlider({ label, value, onChange }) {
+	const rounded = Math.round(value * 100) / 100;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-baseline justify-between text-foreground-subtle",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				min: 0,
+				max: 1,
+				step: .01,
+				value: rounded,
+				onChange: (event) => {
+					const next = Number(event.target.value);
+					if (Number.isFinite(next)) onChange(next);
+				},
+				className: "w-12 rounded border border-border bg-transparent px-1 py-0.5 text-right"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "range",
+			min: 0,
+			max: 1,
+			step: .005,
+			value,
+			onChange: (event) => {
+				const next = Number(event.target.value);
+				if (Number.isFinite(next)) onChange(next);
+			},
+			style: DRAG_SURFACE,
+			className: "h-5 w-full accent-accent"
+		})]
+	});
+}
 function LabelledNumber({ label, value, step = 1, onChange }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: "flex flex-col gap-0.5",

package/dist/index.js

@@ -16617,7 +16617,8 @@ function readProfileOffer(value) {
 	return {
 		profile,
 		offered,
-		missingSources
+		missingSources,
+		canvas: typeof value["canvas"] === "string" ? value["canvas"] : ""
 	};
 }
 /**
@@ -16631,8 +16632,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 +16650,6 @@ function parseGridView(raw) {
 		instanceId,
 		deviceId,
 		name,
-		width,
-		height,
 		fps,
 		cells: parsed,
 		profiles: offers
@@ -16782,6 +16781,25 @@ var FULL_FRAME = {
 var MAX_CELLS = 16;
 /** Hoisted so `useDevices` does not re-subscribe on every render. */
 var CAMERA_FILTER = { type: DeviceType.Camera };
+/**
+* A rectangle being dragged must not also PAN THE PAGE.
+*
+* On a phone a pointerdown on a `div` is a scroll gesture until the browser is
+* told otherwise, and `preventDefault` in the handler is too late — the browser
+* has already decided. `touch-action: none` is the only thing that makes a drag
+* work with a finger, and every surface that starts one carries it.
+*/
+var DRAG_SURFACE = { touchAction: "none" };
+/**
+* Finger-sized hit area around a grip.
+*
+* The visible square stays small (it sits ON the picture being edited and a big
+* one hides what it is positioning); the TOUCHABLE box around it is 24px, which
+* is the smallest target size that does not need a fingernail. The two are
+* different boxes on purpose — making the dot itself 24px would cover a quarter
+* of a small cell.
+*/
+var HANDLE_HIT = "absolute flex h-6 w-6 items-center justify-center";
 /** The eight grips, in the order they are drawn. */
 var HANDLES = [
 	"nw",
@@ -16794,15 +16812,26 @@ var HANDLES = [
 	"w"
 ];
 var HANDLE_STYLE = {
-	nw: "-top-1 -left-1 cursor-nw-resize",
-	n: "-top-1 left-1/2 -translate-x-1/2 cursor-n-resize",
-	ne: "-top-1 -right-1 cursor-ne-resize",
-	e: "top-1/2 -right-1 -translate-y-1/2 cursor-e-resize",
-	se: "-bottom-1 -right-1 cursor-se-resize",
-	s: "-bottom-1 left-1/2 -translate-x-1/2 cursor-s-resize",
-	sw: "-bottom-1 -left-1 cursor-sw-resize",
-	w: "top-1/2 -left-1 -translate-y-1/2 cursor-w-resize"
+	nw: "-top-3 -left-3 cursor-nw-resize",
+	n: "-top-3 left-1/2 -translate-x-1/2 cursor-n-resize",
+	ne: "-top-3 -right-3 cursor-ne-resize",
+	e: "top-1/2 -right-3 -translate-y-1/2 cursor-e-resize",
+	se: "-bottom-3 -right-3 cursor-se-resize",
+	s: "-bottom-3 left-1/2 -translate-x-1/2 cursor-s-resize",
+	sw: "-bottom-3 -left-3 cursor-sw-resize",
+	w: "top-1/2 -left-3 -translate-y-1/2 cursor-w-resize"
 };
+/**
+* Start a drag and KEEP it, even when the finger leaves the rectangle.
+*
+* Without pointer capture a drag ends the moment the pointer crosses the box it
+* started in — which on a phone is immediately, because the box is small and
+* the finger is not. With capture the events keep coming to the element that
+* was grabbed and still bubble to the canvas that does the arithmetic.
+*/
+function capturePointer(event) {
+	event.currentTarget.setPointerCapture(event.pointerId);
+}
 /** Move or resize, from one drag and one delta. */
 function applyDrag(drag, dx, dy) {
 	return drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRectFrom(drag.origin, drag.mode, dx, dy);
@@ -16842,8 +16871,6 @@ 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 }))
 			}));
@@ -16866,7 +16893,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" }),
@@ -16942,12 +16989,15 @@ function CameraGridLayoutEditor({ deviceId }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
-					style: { aspectRatio: String(canvasAspect) },
+					style: {
+						aspectRatio: String(canvasAspect),
+						...DRAG_SURFACE
+					},
 					onPointerMove,
 					onPointerUp: () => {
 						setDrag(null);
 					},
-					onPointerLeave: () => {
+					onPointerCancel: () => {
 						setDrag(null);
 					},
 					children: [draft.cells.map((cell, index) => /* @__PURE__ */ jsx(GridCellBox, {
@@ -16974,62 +17024,39 @@ 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,
@@ -17077,7 +17104,11 @@ function GridProfileReport({ offers, cameras }) {
 				children: offer.profile
 			}), offer.offered ? /* @__PURE__ */ jsxs("span", {
 				className: "text-foreground-subtle",
-				children: ["composed from every source’s ", offer.profile]
+				children: [
+					offer.canvas,
+					" — 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(", ")}`
@@ -17093,10 +17124,12 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 		role: "presentation",
 		onPointerDown: (event) => {
 			onSelect();
+			capturePointer(event);
 			onDragStart("move", event);
 		},
 		className: `absolute cursor-move border ${selected ? "border-accent" : "border-border/60"}`,
 		style: {
+			...DRAG_SURFACE,
 			left: `${String(cell.cell.x * 100)}%`,
 			top: `${String(cell.cell.y * 100)}%`,
 			width: `${String(cell.cell.width * 100)}%`,
@@ -17110,9 +17143,12 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 			role: "presentation",
 			onPointerDown: (event) => {
 				event.stopPropagation();
+				capturePointer(event);
 				onDragStart(handle, event);
 			},
-			className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+			className: `${HANDLE_HIT} ${HANDLE_STYLE[handle]}`,
+			style: DRAG_SURFACE,
+			children: /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 bg-accent" })
 		}, handle))
 	});
 }
@@ -17157,16 +17193,15 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 				}
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-4 gap-2",
+				className: "grid grid-cols-2 gap-x-3 gap-y-1.5",
 				children: [
 					"x",
 					"y",
 					"width",
 					"height"
-				].map((key) => /* @__PURE__ */ jsx(LabelledNumber, {
+				].map((key) => /* @__PURE__ */ jsx(CropSlider, {
 					label: `Crop ${key}`,
-					value: Math.round(cell.source[key] * 100) / 100,
-					step: .01,
+					value: cell.source[key],
 					onChange: (next) => {
 						onChange({ source: clampNormalizedRect({
 							...cell.source,
@@ -17194,6 +17229,7 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 function SourceCropEditor({ deviceId, source, onChange }) {
 	const { src } = useDeviceSnapshotImage(deviceId, { width: 640 });
 	const [drag, setDrag] = useState(null);
+	const [sourceAspect, setSourceAspect] = useState(null);
 	const onPointerMove = (event) => {
 		if (drag === null) return;
 		const bounds = event.currentTarget.getBoundingClientRect();
@@ -17223,12 +17259,15 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
-			style: { aspectRatio: "16 / 9" },
+			style: {
+				aspectRatio: String(sourceAspect ?? 16 / 9),
+				...DRAG_SURFACE
+			},
 			onPointerMove,
 			onPointerUp: () => {
 				setDrag(null);
 			},
-			onPointerLeave: () => {
+			onPointerCancel: () => {
 				setDrag(null);
 			},
 			children: [
@@ -17238,12 +17277,17 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 				}) : /* @__PURE__ */ jsx("img", {
 					src,
 					alt: "",
-					className: "absolute inset-0 h-full w-full object-cover"
+					className: "absolute inset-0 h-full w-full",
+					onLoad: (event) => {
+						const { naturalWidth, naturalHeight } = event.currentTarget;
+						if (naturalWidth > 0 && naturalHeight > 0) setSourceAspect(naturalWidth / naturalHeight);
+					}
 				}),
 				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-black/55" }),
 				/* @__PURE__ */ jsx("div", {
 					role: "presentation",
 					onPointerDown: (event) => {
+						capturePointer(event);
 						setDrag({
 							mode: "move",
 							startX: event.clientX,
@@ -17253,6 +17297,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 					},
 					className: "absolute cursor-move border border-accent",
 					style: {
+						...DRAG_SURFACE,
 						left: `${String(source.x * 100)}%`,
 						top: `${String(source.y * 100)}%`,
 						width: `${String(source.width * 100)}%`,
@@ -17265,6 +17310,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 						role: "presentation",
 						onPointerDown: (event) => {
 							event.stopPropagation();
+							capturePointer(event);
 							setDrag({
 								mode: handle,
 								startX: event.clientX,
@@ -17272,13 +17318,60 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 								origin: source
 							});
 						},
-						className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+						className: `${HANDLE_HIT} ${HANDLE_STYLE[handle]}`,
+						style: DRAG_SURFACE,
+						children: /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 bg-accent" })
 					}, handle))
 				})
 			]
 		})]
 	});
 }
+/**
+* One crop number, as a slider AND as a number.
+*
+* The slider is what makes this usable with a thumb — a `number` input on a
+* phone opens a keyboard, and adjusting a crop by typing 0.37 then 0.39 then
+* 0.38 is not adjusting, it is guessing. The typed field stays because a slider
+* cannot express "exactly a third" and because a value you can read is how you
+* copy a crop from one cell to another.
+*
+* Both write through `clampNormalizedRect` upstream, so neither can hand the
+* addon a rectangle that leaves the frame — it THROWS on one, by design.
+*/
+function CropSlider({ label, value, onChange }) {
+	const rounded = Math.round(value * 100) / 100;
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline justify-between text-foreground-subtle",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 0,
+				max: 1,
+				step: .01,
+				value: rounded,
+				onChange: (event) => {
+					const next = Number(event.target.value);
+					if (Number.isFinite(next)) onChange(next);
+				},
+				className: "w-12 rounded border border-border bg-transparent px-1 py-0.5 text-right"
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "range",
+			min: 0,
+			max: 1,
+			step: .005,
+			value,
+			onChange: (event) => {
+				const next = Number(event.target.value);
+				if (Number.isFinite(next)) onChange(next);
+			},
+			style: DRAG_SURFACE,
+			className: "h-5 w-full accent-accent"
+		})]
+	});
+}
 function LabelledNumber({ label, value, step = 1, onChange }) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: "flex flex-col gap-0.5",

package/package.json

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