@camstack/ui-library 1.2.177 → 1.2.178

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

@@ -72,3 +72,36 @@ export declare function clampNormalizedRect(rect: GridNormalizedRect): GridNorma
 export declare function moveNormalizedRect(rect: GridNormalizedRect, dx: number, dy: number): GridNormalizedRect;
 /** Resize from the bottom-right corner: the origin stays put. */
 export declare function resizeNormalizedRect(rect: GridNormalizedRect, dw: number, dh: number): GridNormalizedRect;
+/** The eight grips on a rectangle. A corner moves two edges, an edge one. */
+export type GridResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+/**
+ * Resize from ANY handle: the opposite side is the anchor.
+ *
+ * The editor had one grip, in the bottom-right, which meant a cell could only
+ * grow away from its origin — to move its top edge an operator had to drag the
+ * whole cell and then resize it back. The rectangle is expressed as its two
+ * edges here rather than origin+extent, because that is what makes "the
+ * opposite edge does not move" fall out instead of being arithmetic to get
+ * wrong. `clampNormalizedRect` still has the last word: the addon THROWS on a
+ * rectangle outside the unit square.
+ */
+export declare function resizeNormalizedRectFrom(rect: GridNormalizedRect, handle: GridResizeHandle, dx: number, dy: number): GridNormalizedRect;
+/**
+ * Tile the whole canvas with `count` cells, leaving no gap.
+ *
+ * Autofill exists because the useful answer to "put these four cameras up" is
+ * almost never the one hand-dragging produces: rectangles land a pixel apart
+ * and the composition shows black seams the operator cannot see in the editor
+ * but will see in the stream.
+ *
+ * The shape is the near-square one — `ceil(sqrt(n))` columns — and a short last
+ * row STRETCHES to the full width rather than leaving a hole. Three cameras
+ * become two over one, not a 2x2 with an empty quarter, which is precisely the
+ * layout autofill is asked to avoid.
+ *
+ * Aspect is deliberately not considered: these are CANVAS fractions, and what a
+ * source shows inside its cell is the crop's business (the source rectangle),
+ * not the placement's. Mixing the two here would silently re-crop every cell
+ * whenever the canvas was resized.
+ */
+export declare function autofillCellRects(count: number): readonly GridNormalizedRect[];

package/dist/index.cjs

@@ -2365,6 +2365,46 @@ var Laugh = createLucideIcon("laugh", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var LayoutGrid = createLucideIcon("layout-grid", [
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "3",
+		y: "3",
+		rx: "1",
+		key: "1g98yp"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "14",
+		y: "3",
+		rx: "1",
+		key: "6d4xhi"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "14",
+		y: "14",
+		rx: "1",
+		key: "nxv5o0"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "3",
+		y: "14",
+		rx: "1",
+		key: "1bb6yr"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Leaf = createLucideIcon("leaf", [["path", {
 	d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z",
 	key: "nnexq3"
@@ -16664,13 +16704,75 @@ function moveNormalizedRect(rect, dx, dy) {
 		y: rect.y + dy
 	});
 }
-/** Resize from the bottom-right corner: the origin stays put. */
-function resizeNormalizedRect(rect, dw, dh) {
+/**
+* Resize from ANY handle: the opposite side is the anchor.
+*
+* The editor had one grip, in the bottom-right, which meant a cell could only
+* grow away from its origin — to move its top edge an operator had to drag the
+* whole cell and then resize it back. The rectangle is expressed as its two
+* edges here rather than origin+extent, because that is what makes "the
+* opposite edge does not move" fall out instead of being arithmetic to get
+* wrong. `clampNormalizedRect` still has the last word: the addon THROWS on a
+* rectangle outside the unit square.
+*/
+function resizeNormalizedRectFrom(rect, handle, dx, dy) {
+	const west = handle === "nw" || handle === "w" || handle === "sw";
+	const east = handle === "ne" || handle === "e" || handle === "se";
+	const north = handle === "nw" || handle === "n" || handle === "ne";
+	const south = handle === "sw" || handle === "s" || handle === "se";
+	let left = rect.x;
+	let right = rect.x + rect.width;
+	let top = rect.y;
+	let bottom = rect.y + rect.height;
+	if (west) left = Math.min(right - MIN_EXTENT, Math.max(0, left + dx));
+	if (east) right = Math.max(left + MIN_EXTENT, Math.min(1, right + dx));
+	if (north) top = Math.min(bottom - MIN_EXTENT, Math.max(0, top + dy));
+	if (south) bottom = Math.max(top + MIN_EXTENT, Math.min(1, bottom + dy));
 	return clampNormalizedRect({
-		...rect,
-		width: rect.width + dw,
-		height: rect.height + dh
-	});
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	});
+}
+/**
+* Tile the whole canvas with `count` cells, leaving no gap.
+*
+* Autofill exists because the useful answer to "put these four cameras up" is
+* almost never the one hand-dragging produces: rectangles land a pixel apart
+* and the composition shows black seams the operator cannot see in the editor
+* but will see in the stream.
+*
+* The shape is the near-square one — `ceil(sqrt(n))` columns — and a short last
+* row STRETCHES to the full width rather than leaving a hole. Three cameras
+* become two over one, not a 2x2 with an empty quarter, which is precisely the
+* layout autofill is asked to avoid.
+*
+* Aspect is deliberately not considered: these are CANVAS fractions, and what a
+* source shows inside its cell is the crop's business (the source rectangle),
+* not the placement's. Mixing the two here would silently re-crop every cell
+* whenever the canvas was resized.
+*/
+function autofillCellRects(count) {
+	if (!Number.isFinite(count) || count <= 0) return [];
+	const cells = Math.floor(count);
+	const columns = Math.ceil(Math.sqrt(cells));
+	const rows = Math.ceil(cells / columns);
+	const rects = [];
+	let placed = 0;
+	for (let row = 0; row < rows; row++) {
+		const inRow = Math.min(columns, cells - placed);
+		const height = 1 / rows;
+		const width = 1 / inRow;
+		for (let column = 0; column < inRow; column++) rects.push({
+			x: column * width,
+			y: row * height,
+			width,
+			height
+		});
+		placed += inRow;
+	}
+	return rects;
 }
 //#endregion
 //#region src/composites/cap-settings/CameraGridLayoutEditor.tsx
@@ -16704,6 +16806,31 @@ 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 };
+/** The eight grips, in the order they are drawn. */
+var HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"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"
+};
+/** 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);
+}
 function CameraGridLayoutEditor({ deviceId }) {
 	const system = useSystem();
 	const cameras = (0, react$1.useMemo)(() => system.listDeviceInfos(CAMERA_FILTER), [system, useDevices(CAMERA_FILTER)]);
@@ -16792,19 +16919,39 @@ function CameraGridLayoutEditor({ deviceId }) {
 		if (drag === null) return;
 		const bounds = event.currentTarget.getBoundingClientRect();
 		if (bounds.width === 0 || bounds.height === 0) return;
+		if (drag.target !== "cell") return;
 		const dx = (event.clientX - drag.startX) / bounds.width;
 		const dy = (event.clientY - drag.startY) / bounds.height;
-		patchCell(drag.index, { cell: drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRect(drag.origin, dx, dy) });
+		patchCell(drag.index, { cell: applyDrag(drag, dx, dy) });
 	};
 	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" }),
-		headerRight: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			disabled: saving,
-			onClick: () => void save(),
-			className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
-			children: [saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, { className: "h-3 w-3" }), "Save"]
+		headerRight: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				disabled: draft.cells.length === 0,
+				title: "Tile every cell over the whole canvas, leaving no gap",
+				onClick: () => {
+					const rects = autofillCellRects(draft.cells.length);
+					setDraft({
+						...draft,
+						cells: draft.cells.map((cell, index) => ({
+							...cell,
+							cell: rects[index] ?? cell.cell
+						}))
+					});
+				},
+				className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayoutGrid, { className: "h-3 w-3" }), " Autofill"]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				disabled: saving,
+				onClick: () => void save(),
+				className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
+				children: [saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, { className: "h-3 w-3" }), "Save"]
+			})]
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col gap-3",
@@ -16837,6 +16984,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 							setSelected(index);
 							setDrag({
 								index,
+								target: "cell",
 								mode,
 								startX: event.clientX,
 								startY: event.clientY,
@@ -16982,14 +17130,14 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 			backgroundPosition,
 			backgroundRepeat: "no-repeat"
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: selected && HANDLES.map((handle) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "presentation",
 			onPointerDown: (event) => {
 				event.stopPropagation();
-				onDragStart("resize", event);
+				onDragStart(handle, event);
 			},
-			className: "absolute -bottom-1 -right-1 h-2.5 w-2.5 cursor-se-resize bg-accent"
-		})
+			className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+		}, handle))
 	});
 }
 function CellInspector({ cell, index, cameras, onChange, onRemove }) {
@@ -17025,6 +17173,13 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 					}, camera.id))
 				})]
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SourceCropEditor, {
+				deviceId: cell.deviceId,
+				source: cell.source,
+				onChange: (source) => {
+					onChange({ source });
+				}
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "grid grid-cols-4 gap-2",
 				children: [
@@ -17047,6 +17202,107 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 		]
 	});
 }
+/**
+* The crop, on the source camera's own frame.
+*
+* The whole snapshot is drawn at full opacity behind a dimmed overlay, and the
+* selected rectangle is the hole in it: what is INSIDE is what the grid will
+* show. Drawing it the other way round — bright rectangle on a dark picture —
+* reads as "this part is highlighted", which is not the same claim.
+*
+* Its drag state is local. The canvas above owns cell placement and this owns
+* the crop; sharing one drag state would mean every pointer move on either
+* canvas consulted a `target` discriminator to decide whether it was for the
+* other one.
+*/
+function SourceCropEditor({ deviceId, source, onChange }) {
+	const { src } = useDeviceSnapshotImage(deviceId, { width: 640 });
+	const [drag, setDrag] = (0, react$1.useState)(null);
+	const onPointerMove = (event) => {
+		if (drag === null) return;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return;
+		onChange(applyDrag({
+			...drag,
+			index: 0,
+			target: "source"
+		}, (event.clientX - drag.startX) / bounds.width, (event.clientY - drag.startY) / bounds.height));
+	};
+	const full = source.x === 0 && source.y === 0 && source.width === 1 && source.height === 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "uppercase text-foreground-subtle",
+				children: "Visible part of the camera"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				disabled: full,
+				onClick: () => {
+					onChange(FULL_FRAME);
+				},
+				className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5 uppercase disabled:opacity-40",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Maximize2, { className: "h-3 w-3" }), " Whole frame"]
+			})]
+		}), /* @__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" },
+			onPointerMove,
+			onPointerUp: () => {
+				setDrag(null);
+			},
+			onPointerLeave: () => {
+				setDrag(null);
+			},
+			children: [
+				src === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute inset-0 flex items-center justify-center text-[10px] text-foreground-subtle",
+					children: "No snapshot from this camera yet — the numbers below still apply."
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src,
+					alt: "",
+					className: "absolute inset-0 h-full w-full object-cover"
+				}),
+				/* @__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) => {
+						setDrag({
+							mode: "move",
+							startX: event.clientX,
+							startY: event.clientY,
+							origin: source
+						});
+					},
+					className: "absolute cursor-move border border-accent",
+					style: {
+						left: `${String(source.x * 100)}%`,
+						top: `${String(source.y * 100)}%`,
+						width: `${String(source.width * 100)}%`,
+						height: `${String(source.height * 100)}%`,
+						backgroundImage: src === null ? void 0 : `url(${src})`,
+						backgroundSize: `${String(100 / source.width)}% ${String(100 / source.height)}%`,
+						backgroundPosition: source.width >= 1 && source.height >= 1 ? "center" : `${String(source.x / Math.max(1e-6, 1 - source.width) * 100)}% ${String(source.y / Math.max(1e-6, 1 - source.height) * 100)}%`
+					},
+					children: HANDLES.map((handle) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "presentation",
+						onPointerDown: (event) => {
+							event.stopPropagation();
+							setDrag({
+								mode: handle,
+								startX: event.clientX,
+								startY: event.clientY,
+								origin: source
+							});
+						},
+						className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+					}, handle))
+				})
+			]
+		})]
+	});
+}
 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

@@ -2341,6 +2341,46 @@ var Laugh = createLucideIcon("laugh", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var LayoutGrid = createLucideIcon("layout-grid", [
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "3",
+		y: "3",
+		rx: "1",
+		key: "1g98yp"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "14",
+		y: "3",
+		rx: "1",
+		key: "6d4xhi"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "14",
+		y: "14",
+		rx: "1",
+		key: "nxv5o0"
+	}],
+	["rect", {
+		width: "7",
+		height: "7",
+		x: "3",
+		y: "14",
+		rx: "1",
+		key: "1bb6yr"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Leaf = createLucideIcon("leaf", [["path", {
 	d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z",
 	key: "nnexq3"
@@ -16640,13 +16680,75 @@ function moveNormalizedRect(rect, dx, dy) {
 		y: rect.y + dy
 	});
 }
-/** Resize from the bottom-right corner: the origin stays put. */
-function resizeNormalizedRect(rect, dw, dh) {
+/**
+* Resize from ANY handle: the opposite side is the anchor.
+*
+* The editor had one grip, in the bottom-right, which meant a cell could only
+* grow away from its origin — to move its top edge an operator had to drag the
+* whole cell and then resize it back. The rectangle is expressed as its two
+* edges here rather than origin+extent, because that is what makes "the
+* opposite edge does not move" fall out instead of being arithmetic to get
+* wrong. `clampNormalizedRect` still has the last word: the addon THROWS on a
+* rectangle outside the unit square.
+*/
+function resizeNormalizedRectFrom(rect, handle, dx, dy) {
+	const west = handle === "nw" || handle === "w" || handle === "sw";
+	const east = handle === "ne" || handle === "e" || handle === "se";
+	const north = handle === "nw" || handle === "n" || handle === "ne";
+	const south = handle === "sw" || handle === "s" || handle === "se";
+	let left = rect.x;
+	let right = rect.x + rect.width;
+	let top = rect.y;
+	let bottom = rect.y + rect.height;
+	if (west) left = Math.min(right - MIN_EXTENT, Math.max(0, left + dx));
+	if (east) right = Math.max(left + MIN_EXTENT, Math.min(1, right + dx));
+	if (north) top = Math.min(bottom - MIN_EXTENT, Math.max(0, top + dy));
+	if (south) bottom = Math.max(top + MIN_EXTENT, Math.min(1, bottom + dy));
 	return clampNormalizedRect({
-		...rect,
-		width: rect.width + dw,
-		height: rect.height + dh
-	});
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	});
+}
+/**
+* Tile the whole canvas with `count` cells, leaving no gap.
+*
+* Autofill exists because the useful answer to "put these four cameras up" is
+* almost never the one hand-dragging produces: rectangles land a pixel apart
+* and the composition shows black seams the operator cannot see in the editor
+* but will see in the stream.
+*
+* The shape is the near-square one — `ceil(sqrt(n))` columns — and a short last
+* row STRETCHES to the full width rather than leaving a hole. Three cameras
+* become two over one, not a 2x2 with an empty quarter, which is precisely the
+* layout autofill is asked to avoid.
+*
+* Aspect is deliberately not considered: these are CANVAS fractions, and what a
+* source shows inside its cell is the crop's business (the source rectangle),
+* not the placement's. Mixing the two here would silently re-crop every cell
+* whenever the canvas was resized.
+*/
+function autofillCellRects(count) {
+	if (!Number.isFinite(count) || count <= 0) return [];
+	const cells = Math.floor(count);
+	const columns = Math.ceil(Math.sqrt(cells));
+	const rows = Math.ceil(cells / columns);
+	const rects = [];
+	let placed = 0;
+	for (let row = 0; row < rows; row++) {
+		const inRow = Math.min(columns, cells - placed);
+		const height = 1 / rows;
+		const width = 1 / inRow;
+		for (let column = 0; column < inRow; column++) rects.push({
+			x: column * width,
+			y: row * height,
+			width,
+			height
+		});
+		placed += inRow;
+	}
+	return rects;
 }
 //#endregion
 //#region src/composites/cap-settings/CameraGridLayoutEditor.tsx
@@ -16680,6 +16782,31 @@ var FULL_FRAME = {
 var MAX_CELLS = 16;
 /** Hoisted so `useDevices` does not re-subscribe on every render. */
 var CAMERA_FILTER = { type: DeviceType.Camera };
+/** The eight grips, in the order they are drawn. */
+var HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"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"
+};
+/** 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);
+}
 function CameraGridLayoutEditor({ deviceId }) {
 	const system = useSystem();
 	const cameras = useMemo(() => system.listDeviceInfos(CAMERA_FILTER), [system, useDevices(CAMERA_FILTER)]);
@@ -16768,19 +16895,39 @@ function CameraGridLayoutEditor({ deviceId }) {
 		if (drag === null) return;
 		const bounds = event.currentTarget.getBoundingClientRect();
 		if (bounds.width === 0 || bounds.height === 0) return;
+		if (drag.target !== "cell") return;
 		const dx = (event.clientX - drag.startX) / bounds.width;
 		const dy = (event.clientY - drag.startY) / bounds.height;
-		patchCell(drag.index, { cell: drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRect(drag.origin, dx, dy) });
+		patchCell(drag.index, { cell: applyDrag(drag, dx, dy) });
 	};
 	return /* @__PURE__ */ jsx(WidgetPanel, {
 		title: "Grid layout",
 		icon: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5" }),
-		headerRight: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			disabled: saving,
-			onClick: () => void save(),
-			className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
-			children: [saving ? /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-3 w-3" }), "Save"]
+		headerRight: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled: draft.cells.length === 0,
+				title: "Tile every cell over the whole canvas, leaving no gap",
+				onClick: () => {
+					const rects = autofillCellRects(draft.cells.length);
+					setDraft({
+						...draft,
+						cells: draft.cells.map((cell, index) => ({
+							...cell,
+							cell: rects[index] ?? cell.cell
+						}))
+					});
+				},
+				className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
+				children: [/* @__PURE__ */ jsx(LayoutGrid, { className: "h-3 w-3" }), " Autofill"]
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled: saving,
+				onClick: () => void save(),
+				className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
+				children: [saving ? /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-3 w-3" }), "Save"]
+			})]
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
@@ -16813,6 +16960,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 							setSelected(index);
 							setDrag({
 								index,
+								target: "cell",
 								mode,
 								startX: event.clientX,
 								startY: event.clientY,
@@ -16958,14 +17106,14 @@ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
 			backgroundPosition,
 			backgroundRepeat: "no-repeat"
 		},
-		children: /* @__PURE__ */ jsx("div", {
+		children: selected && HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
 			role: "presentation",
 			onPointerDown: (event) => {
 				event.stopPropagation();
-				onDragStart("resize", event);
+				onDragStart(handle, event);
 			},
-			className: "absolute -bottom-1 -right-1 h-2.5 w-2.5 cursor-se-resize bg-accent"
-		})
+			className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+		}, handle))
 	});
 }
 function CellInspector({ cell, index, cameras, onChange, onRemove }) {
@@ -17001,6 +17149,13 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 					}, camera.id))
 				})]
 			}),
+			/* @__PURE__ */ jsx(SourceCropEditor, {
+				deviceId: cell.deviceId,
+				source: cell.source,
+				onChange: (source) => {
+					onChange({ source });
+				}
+			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "grid grid-cols-4 gap-2",
 				children: [
@@ -17023,6 +17178,107 @@ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
 		]
 	});
 }
+/**
+* The crop, on the source camera's own frame.
+*
+* The whole snapshot is drawn at full opacity behind a dimmed overlay, and the
+* selected rectangle is the hole in it: what is INSIDE is what the grid will
+* show. Drawing it the other way round — bright rectangle on a dark picture —
+* reads as "this part is highlighted", which is not the same claim.
+*
+* Its drag state is local. The canvas above owns cell placement and this owns
+* the crop; sharing one drag state would mean every pointer move on either
+* canvas consulted a `target` discriminator to decide whether it was for the
+* other one.
+*/
+function SourceCropEditor({ deviceId, source, onChange }) {
+	const { src } = useDeviceSnapshotImage(deviceId, { width: 640 });
+	const [drag, setDrag] = useState(null);
+	const onPointerMove = (event) => {
+		if (drag === null) return;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return;
+		onChange(applyDrag({
+			...drag,
+			index: 0,
+			target: "source"
+		}, (event.clientX - drag.startX) / bounds.width, (event.clientY - drag.startY) / bounds.height));
+	};
+	const full = source.x === 0 && source.y === 0 && source.width === 1 && source.height === 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "uppercase text-foreground-subtle",
+				children: "Visible part of the camera"
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled: full,
+				onClick: () => {
+					onChange(FULL_FRAME);
+				},
+				className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5 uppercase disabled:opacity-40",
+				children: [/* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" }), " Whole frame"]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
+			style: { aspectRatio: "16 / 9" },
+			onPointerMove,
+			onPointerUp: () => {
+				setDrag(null);
+			},
+			onPointerLeave: () => {
+				setDrag(null);
+			},
+			children: [
+				src === null ? /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 flex items-center justify-center text-[10px] text-foreground-subtle",
+					children: "No snapshot from this camera yet — the numbers below still apply."
+				}) : /* @__PURE__ */ jsx("img", {
+					src,
+					alt: "",
+					className: "absolute inset-0 h-full w-full object-cover"
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-black/55" }),
+				/* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					onPointerDown: (event) => {
+						setDrag({
+							mode: "move",
+							startX: event.clientX,
+							startY: event.clientY,
+							origin: source
+						});
+					},
+					className: "absolute cursor-move border border-accent",
+					style: {
+						left: `${String(source.x * 100)}%`,
+						top: `${String(source.y * 100)}%`,
+						width: `${String(source.width * 100)}%`,
+						height: `${String(source.height * 100)}%`,
+						backgroundImage: src === null ? void 0 : `url(${src})`,
+						backgroundSize: `${String(100 / source.width)}% ${String(100 / source.height)}%`,
+						backgroundPosition: source.width >= 1 && source.height >= 1 ? "center" : `${String(source.x / Math.max(1e-6, 1 - source.width) * 100)}% ${String(source.y / Math.max(1e-6, 1 - source.height) * 100)}%`
+					},
+					children: HANDLES.map((handle) => /* @__PURE__ */ jsx("div", {
+						role: "presentation",
+						onPointerDown: (event) => {
+							event.stopPropagation();
+							setDrag({
+								mode: handle,
+								startX: event.clientX,
+								startY: event.clientY,
+								origin: source
+							});
+						},
+						className: `absolute h-2.5 w-2.5 bg-accent ${HANDLE_STYLE[handle]}`
+					}, handle))
+				})
+			]
+		})]
+	});
+}
 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.177",
+  "version": "1.2.178",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",