@camstack/ui-library 1.2.178 → 1.2.179

package/dist/index.cjs

@@ -16806,6 +16806,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 +16837,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);
@@ -16966,12 +16996,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, {
@@ -17117,10 +17150,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 +17169,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 +17219,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 +17255,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 +17285,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 +17303,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 +17323,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 +17336,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 						role: "presentation",
 						onPointerDown: (event) => {
 							event.stopPropagation();
+							capturePointer(event);
 							setDrag({
 								mode: handle,
 								startX: event.clientX,
@@ -17296,13 +17344,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

@@ -16782,6 +16782,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 +16813,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);
@@ -16942,12 +16972,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, {
@@ -17093,10 +17126,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 +17145,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 +17195,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 +17231,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 +17261,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 +17279,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 +17299,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 +17312,7 @@ function SourceCropEditor({ deviceId, source, onChange }) {
 						role: "presentation",
 						onPointerDown: (event) => {
 							event.stopPropagation();
+							capturePointer(event);
 							setDrag({
 								mode: handle,
 								startX: event.clientX,
@@ -17272,13 +17320,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.179",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",