@octane-xplat/image-crop 0.0.1 → 0.10.0

package/dist/web/Guide.web.js

@@ -0,0 +1,15 @@
+import { componentSlot } from "octane";
+import { View } from "@octane-xplat/ui";
+//#region src/Guide.web.tsrx
+var Guide = function Guide(props, __s, __extra) {
+	const __block = __s.block;
+	componentSlot(__s, 0, __block.parentNode, View, {
+		...props,
+		"style": {
+			...props.style,
+			pointerEvents: "none"
+		}
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:de4db464");
+};
+//#endregion
+export { Guide };

package/dist/web/ImageCrop.js

@@ -0,0 +1,199 @@
+import { constrainCrop, containFrame, convertToPercentCrop, dragCrop } from "./geometry.js";
+import { Gesture } from "./Gesture.web.js";
+import { Guide } from "./Guide.web.js";
+import { Source } from "./Source.web.js";
+import { compilerMemoRegion, hookMemoCreate, hookMemoEqual, hookMemoPublish2 } from "octane/internal/client";
+import { componentSlot, componentSlotVoid, forBlock, hookSlots, ifBlock, markChildrenBlock, useRef, withSlot } from "octane";
+import { Absolute, View, useMeasure } from "@octane-xplat/ui";
+//#region src/ImageCrop.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _key$7 = (fraction) => fraction;
+function __item$8(fraction, __s, __extra) {
+	const __block = __s.block;
+	const crop = __extra[0];
+	const left = __extra[1];
+	const top = __extra[2];
+	componentSlotVoid(__s, 0, __block.parentNode, Guide, {
+		"left": left + crop.width * fraction,
+		"top": top,
+		"style": {
+			width: 1,
+			height: crop.height,
+			backgroundColor: "rgba(255,255,255,0.53)"
+		}
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:0cff140c");
+	componentSlotVoid(__s, 1, __block.parentNode, Guide, {
+		"left": left,
+		"top": top + crop.height * fraction,
+		"style": {
+			width: crop.width,
+			height: 1,
+			backgroundColor: "rgba(255,255,255,0.53)"
+		}
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:fa385af7");
+}
+function __then$6(__props, __s, __extra) {
+	const __block = __s.block;
+	const crop = __extra[0];
+	const left = __extra[1];
+	const top = __extra[2];
+	forBlock(__s, 0, __block.parentNode, [1 / 3, 2 / 3], _key$7, __item$8, 8, [
+		crop,
+		left,
+		top,
+		Guide
+	], null, __block.endMarker);
+}
+var _key$13 = (handle) => handle;
+function __item$14(handle, __s, __extra) {
+	const __block = __s.block;
+	const crop = __extra[0];
+	const frame = __extra[1];
+	const left = __extra[2];
+	const pan = __extra[3];
+	const props = __extra[4];
+	const top = __extra[5];
+	const hx = handle.includes("w") ? 0 : handle.includes("e") ? crop.width : crop.width / 2;
+	const hy = handle.includes("n") ? 0 : handle.includes("s") ? crop.height : crop.height / 2;
+	const x = Math.max(frame.x, Math.min(left + hx - 12, frame.x + frame.width - 24));
+	const y = Math.max(frame.y, Math.min(top + hy - 12, frame.y + frame.height - 24));
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	componentSlotVoid(__s, 0, __block.parentNode, Gesture, {
+		"id": props.id ? props.id + "-" + handle : void 0,
+		"left": x,
+		"top": y,
+		"accessibilityLabel": "Resize crop " + handle,
+		"accessibilityState": { disabled: props.disabled },
+		"style": {
+			width: Math.min(24, frame.width),
+			height: Math.min(24, frame.height),
+			backgroundColor: props.disabled ? "rgba(255,255,255,0.27)" : "rgba(255,255,255,0.53)",
+			borderWidth: 1,
+			borderColor: "#ffffff"
+		},
+		"onPan": props.disabled ? void 0 : (e) => pan(handle, e)
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:69decbd7");
+}
+var __childrenBody = {};
+var __childrenBody$ = {};
+var handles = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
+var ImageCrop = function ImageCrop(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(8);
+	let __hkd0, __hkd1, __hkd0$, __hkd1$;
+	const measure = withSlot(_h$0, useMeasure);
+	const viewport = {
+		width: Math.min(props.width, measure.bounds?.width ?? props.width),
+		height: Math.min(props.height, measure.bounds?.height ?? props.height)
+	};
+	const frame = (__hkd0 = viewport, __hkd1 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) ? hookMemoPublish2(__hk, 0, containFrame(viewport, {
+		width: props.imageWidth,
+		height: props.imageHeight
+	}), __hkd0, __hkd1) : __hk[3]);
+	const crop = (__hkd0$ = props, __hkd1$ = frame, __hk[4] !== true || !hookMemoEqual(__hk[5], __hkd0$) || !hookMemoEqual(__hk[6], __hkd1$) ? hookMemoPublish2(__hk, 4, constrainCrop(props.crop, frame, props), __hkd0$, __hkd1$) : __hk[7]);
+	const gesture = useRef(null, _hs$ + 1);
+	const pan = (handle, event) => {
+		if (props.disabled || frame.width <= 0 || frame.height <= 0) {
+			gesture.current = null;
+			return;
+		}
+		if (event.state === "began") {
+			gesture.current = {
+				handle,
+				start: crop,
+				size: frame,
+				dx: event.dx,
+				dy: event.dy,
+				src: props.src
+			};
+			return;
+		}
+		const active = gesture.current;
+		if (!active || active.handle !== handle) return;
+		if (event.state === "cancelled") {
+			gesture.current = null;
+			return;
+		}
+		if (active.src !== props.src || active.size.width !== frame.width || active.size.height !== frame.height) {
+			gesture.current = null;
+			return;
+		}
+		const next = dragCrop(active.start, handle, event.dx - active.dx, event.dy - active.dy, frame, props);
+		const percent = convertToPercentCrop(next, frame);
+		props.onChange(next, percent);
+		if (event.state === "ended") {
+			gesture.current = null;
+			props.onComplete?.(next, percent);
+		}
+	};
+	const left = frame.x + crop.x, top = frame.y + crop.y;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$3(__props, __s, __extra) {
+			const __block = __s.block;
+			componentSlotVoid(__s, 0, __block.parentNode, Source, {
+				"src": props.src,
+				"alt": props.alt,
+				"width": viewport.width,
+				"height": viewport.height
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:43bdecbd");
+			componentSlotVoid(__s, 1, __block.parentNode, Gesture, {
+				"id": props.id ? props.id + "-move" : void 0,
+				"left": left,
+				"top": top,
+				"style": {
+					width: crop.width,
+					height: crop.height,
+					borderWidth: 1,
+					borderColor: "#ffffff",
+					backgroundColor: "rgba(255,255,255,0.13)"
+				},
+				"onPan": props.disabled ? void 0 : (e) => pan("move", e)
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:29511f8e");
+			{
+				const __ifCondition = props.ruleOfThirds;
+				ifBlock(__s, 2, __block.parentNode, __ifCondition, __then$6, null, __block.endMarker, __ifCondition ? [
+					crop,
+					left,
+					top
+				] : void 0);
+			}
+			forBlock(__s, 3, __block.parentNode, handles, _key$13, __item$14, 8 | (Gesture.$$singleRoot === true ? 2 : 0), [
+				crop,
+				frame,
+				left,
+				pan,
+				props,
+				top
+			], null, __block.endMarker);
+		}
+		componentSlot(__s, 0, __block.parentNode, Absolute, {
+			"style": viewport,
+			"children": markChildrenBlock(__children$3, __childrenBody)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:a85e82b5");
+	}
+	componentSlot(__s, 0, __block.parentNode, View, {
+		"id": props.id,
+		"ref": measure.ref,
+		"style": {
+			width: props.width,
+			height: props.height
+		},
+		"children": markChildrenBlock(__children$1, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:b2e40433");
+};
+//#endregion
+export { ImageCrop };

package/dist/web/Source.web.js

@@ -0,0 +1,50 @@
+import { componentSlot, markWarm, registerWarmPlan, warmChild } from "octane";
+import { Image } from "@octane-xplat/ui";
+//#region src/Source.web.tsrx
+var Source = /* @__PURE__ */ markWarm(function Source(props, __s, __extra) {
+	const __block = __s.block;
+	const __warmPlan = Source.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		warmChild(Image, {
+			src: props.src,
+			alt: props.alt,
+			style: {
+				width: props.width,
+				height: props.height,
+				objectFit: "contain",
+				pointerEvents: "none",
+				userSelect: "none"
+			},
+			web: { draggable: false }
+		});
+	}, void 0);
+	componentSlot(__s, 0, __block.parentNode, Image, {
+		"src": props.src,
+		"alt": props.alt,
+		"style": {
+			width: props.width,
+			height: props.height,
+			objectFit: "contain",
+			pointerEvents: "none",
+			userSelect: "none"
+		},
+		"web": { draggable: false }
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:5695e414");
+}, (__wp) => {
+	const props = __wp;
+	warmChild(Image, {
+		src: props.src,
+		alt: props.alt,
+		style: {
+			width: props.width,
+			height: props.height,
+			objectFit: "contain",
+			pointerEvents: "none",
+			userSelect: "none"
+		},
+		web: { draggable: false }
+	});
+});
+//#endregion
+export { Source };

package/dist/web/geometry.js

@@ -0,0 +1,102 @@
+//#region src/geometry.ts
+var positive = (n) => Number.isFinite(n) && n > 0 ? n : 0;
+var finite = (n) => Number.isFinite(n) ? n : 0;
+var clamp = (n, low, high) => Math.min(Math.max(n, Math.min(low, high)), high);
+/** Displayed image rectangle inside a centered contain-fit viewport. */
+function containFrame(view, natural) {
+	const scale = natural.width > 0 && natural.height > 0 ? Math.min(positive(view.width) / natural.width, positive(view.height) / natural.height) : 0;
+	const width = positive(natural.width * scale), height = positive(natural.height * scale);
+	return {
+		x: (positive(view.width) - width) / 2,
+		y: (positive(view.height) - height) / 2,
+		width,
+		height
+	};
+}
+function convertToPixelCrop(crop, size) {
+	const sx = crop.unit === "%" ? positive(size.width) / 100 : 1;
+	const sy = crop.unit === "%" ? positive(size.height) / 100 : 1;
+	return {
+		unit: "px",
+		x: finite(crop.x) * sx,
+		y: finite(crop.y) * sy,
+		width: positive(crop.width) * sx,
+		height: positive(crop.height) * sy
+	};
+}
+function convertToPercentCrop(crop, size) {
+	const p = convertToPixelCrop(crop, size);
+	return {
+		unit: "%",
+		x: size.width > 0 ? p.x / size.width * 100 : 0,
+		y: size.height > 0 ? p.y / size.height * 100 : 0,
+		width: size.width > 0 ? p.width / size.width * 100 : 0,
+		height: size.height > 0 ? p.height / size.height * 100 : 0
+	};
+}
+/** Convert displayed-image coordinates to natural pixels for a separate pixel exporter. */
+function toNaturalCrop(crop, displayed, natural) {
+	return convertToPixelCrop(convertToPercentCrop(crop, displayed), natural);
+}
+function fromNaturalCrop(crop, natural, displayed) {
+	return convertToPixelCrop(convertToPercentCrop(crop, natural), displayed);
+}
+/** Clamp external controlled input. Impossible minimums yield to bounds/maxima. */
+function constrainCrop(crop, size, limits = {}) {
+	const p = convertToPixelCrop(crop, size);
+	const maxW = Math.min(positive(size.width), limits.maxWidth === void 0 ? Infinity : positive(limits.maxWidth));
+	const maxH = Math.min(positive(size.height), limits.maxHeight === void 0 ? Infinity : positive(limits.maxHeight));
+	let width = clamp(p.width, positive(limits.minWidth ?? 0), maxW);
+	let height = clamp(p.height, positive(limits.minHeight ?? 0), maxH);
+	const aspect = positive(limits.aspect ?? 0);
+	if (aspect) {
+		width = clamp(width, Math.max(positive(limits.minWidth ?? 0), positive(limits.minHeight ?? 0) * aspect), Math.min(maxW, maxH * aspect));
+		height = width / aspect;
+	}
+	return {
+		unit: "px",
+		x: clamp(p.x, 0, positive(size.width) - width),
+		y: clamp(p.y, 0, positive(size.height) - height),
+		width,
+		height
+	};
+}
+/** Resize from a frozen gesture origin using cumulative view-space deltas. */
+function dragCrop(start, handle, dx, dy, size, limits = {}) {
+	const p = constrainCrop(start, size, limits);
+	dx = finite(dx);
+	dy = finite(dy);
+	if (handle === "move") return {
+		...p,
+		x: clamp(p.x + dx, 0, size.width - p.width),
+		y: clamp(p.y + dy, 0, size.height - p.height)
+	};
+	const west = handle.includes("w"), east = handle.includes("e");
+	const north = handle.includes("n"), south = handle.includes("s");
+	const ax = west ? p.x + p.width : east ? p.x : p.x + p.width / 2;
+	const ay = north ? p.y + p.height : south ? p.y : p.y + p.height / 2;
+	const boundW = west ? ax : east ? size.width - ax : 2 * Math.min(ax, size.width - ax);
+	const boundH = north ? ay : south ? size.height - ay : 2 * Math.min(ay, size.height - ay);
+	const maxW = Math.min(boundW, limits.maxWidth ?? Infinity);
+	const maxH = Math.min(boundH, limits.maxHeight ?? Infinity);
+	let width = p.width + (west ? -dx : east ? dx : 0);
+	let height = p.height + (north ? -dy : south ? dy : 0);
+	const aspect = positive(limits.aspect ?? 0);
+	if (aspect) {
+		if (!west && !east || (north || south) && Math.abs(dy * aspect) > Math.abs(dx)) width = height * aspect;
+		width = clamp(width, Math.max(positive(limits.minWidth ?? 0), positive(limits.minHeight ?? 0) * aspect), Math.max(0, Math.min(maxW, maxH * aspect)));
+		height = width / aspect;
+	} else {
+		width = clamp(width, positive(limits.minWidth ?? 0), Math.max(0, maxW));
+		height = clamp(height, positive(limits.minHeight ?? 0), Math.max(0, maxH));
+	}
+	return {
+		unit: "px",
+		x: west ? ax - width : east ? ax : ax - width / 2,
+		y: north ? ay - height : south ? ay : ay - height / 2,
+		width,
+		height
+	};
+}
+//#endregion
+export { constrainCrop, containFrame, convertToPercentCrop, convertToPixelCrop, dragCrop, fromNaturalCrop, toNaturalCrop };

package/dist/web/index.js

@@ -0,0 +1,3 @@
+import { constrainCrop, containFrame, convertToPercentCrop, convertToPixelCrop, dragCrop, fromNaturalCrop, toNaturalCrop } from "./geometry.js";
+import { ImageCrop } from "./ImageCrop.js";
+export { ImageCrop, constrainCrop, containFrame, convertToPercentCrop, convertToPixelCrop, dragCrop, fromNaturalCrop, toNaturalCrop };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "4d71b428-eff6-4252-a6e5-04b9651fb264",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/package.json

@@ -1,11 +1,89 @@
 {
   "name": "@octane-xplat/image-crop",
-  "version": "0.0.1",
-  "description": "Placeholder stub for @octane-xplat/image-crop — no supported API yet.",
+  "version": "0.10.0",
+  "description": "Inline controlled image crop selection for Octane Xplat web, iOS, Android and macOS",
+  "keywords": [
+    "crop",
+    "cross-platform",
+    "image",
+    "nativescript",
+    "octane"
+  ],
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/image-crop",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/image-crop"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src",
+    "README.md"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./src/index.macos.ts"
+      },
+      "types": "./types/generated/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@octane-xplat/ui": "0.10.0"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.10.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "@octane-xplat/macos-renderer": ">=0.8.0 <1",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "@octane-xplat/macos-renderer": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "typegen": "tsrx-typegen --target crop",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json && tsrx-tsc --noEmit -p tsconfig.mobile.json && tsrx-tsc --noEmit -p tsconfig.macos.json",
+    "test": "vitest run tests/geometry.test.ts",
+    "pack:check": "tsrx-typegen --pack-check"
   }
-}
+}

package/src/Gesture.macos.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Gesture(props: ViewProps) @{
+	<View {...props} />
+}

package/src/Gesture.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Gesture(props: ViewProps) @{
+	<View {...props} />
+}

package/src/Gesture.web.tsrx

@@ -0,0 +1,5 @@
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Gesture(props: ViewProps) @{
+	<View {...props} style={{ ...props.style, touchAction: 'none', userSelect: 'none', boxSizing: 'border-box' }} />
+}

package/src/Guide.macos.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Guide(props: ViewProps) @{
+	<View {...props} style={{ ...props.style, pointerEvents: 'none' }} />
+}

package/src/Guide.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Guide(props: ViewProps) @{
+	<View {...props} ios={{ isUserInteractionEnabled: false }} android={{ isUserInteractionEnabled: false }} />
+}

package/src/Guide.web.tsrx

@@ -0,0 +1,5 @@
+import { View } from '@octane-xplat/ui'
+import type { ViewProps } from '@octane-xplat/ui'
+export function Guide(props: ViewProps) @{
+	<View {...props} style={{ ...props.style, pointerEvents: 'none' }} />
+}

package/src/ImageCrop.tsrx

@@ -0,0 +1,70 @@
+import { useRef } from 'octane'
+import { Absolute, View, useMeasure } from '@octane-xplat/ui'
+import type { PanEvent } from '@octane-xplat/ui'
+import type { CropHandle, ImageCropProps, PixelCrop, Size } from './props'
+import { constrainCrop, containFrame, convertToPercentCrop, dragCrop } from './geometry'
+import { Gesture } from './Gesture'
+import { Guide } from './Guide'
+import { Source } from './Source'
+
+const handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const
+
+/** Inline controlled selection. View.onPan delegates to the UI usePan leaves. */
+export function ImageCrop(props: ImageCropProps) @{
+	const measure = useMeasure()
+	// Root hosts may offer more space than the explicitly sized image viewport.
+	const viewport = { width: Math.min(props.width, measure.bounds?.width ?? props.width), height: Math.min(props.height, measure.bounds?.height ?? props.height) }
+	const frame = containFrame(viewport, { width: props.imageWidth, height: props.imageHeight })
+	const crop = constrainCrop(props.crop, frame, props)
+	const gesture = useRef<{ handle: CropHandle; start: PixelCrop; size: Size; dx: number; dy: number; src: string } | null>(null)
+	const pan = (handle: CropHandle, event: PanEvent) => {
+		if (props.disabled || frame.width <= 0 || frame.height <= 0) { gesture.current = null; return }
+		if (event.state === 'began') {
+			gesture.current = { handle, start: crop, size: frame, dx: event.dx, dy: event.dy, src: props.src }
+			return
+		}
+
+		const active = gesture.current
+		if (!active || active.handle !== handle) return
+		if (event.state === 'cancelled') { gesture.current = null; return }
+		// Layout/source changes invalidate a gesture rather than mixing scales.
+		if (active.src !== props.src || active.size.width !== frame.width || active.size.height !== frame.height) { gesture.current = null; return }
+		const next = dragCrop(active.start, handle, event.dx - active.dx, event.dy - active.dy, frame, props)
+		const percent = convertToPercentCrop(next, frame)
+		props.onChange(next, percent)
+		if (event.state === 'ended') {
+			gesture.current = null
+			props.onComplete?.(next, percent)
+		}
+	}
+
+	const left = frame.x + crop.x, top = frame.y + crop.y
+
+	<View id={props.id} ref={measure.ref} style={{ width: props.width, height: props.height }}>
+		<Absolute style={viewport}>
+			<Source src={props.src} alt={props.alt} width={viewport.width} height={viewport.height} />
+			<Gesture id={props.id ? props.id + '-move' : undefined} left={left} top={top}
+				style={{ width: crop.width, height: crop.height, borderWidth: 1, borderColor: '#ffffff', backgroundColor: 'rgba(255,255,255,0.13)' }}
+				onPan={props.disabled ? undefined : (e: PanEvent) => pan('move', e)} />
+			@if (props.ruleOfThirds) {
+				@for (const fraction of [1 / 3, 2 / 3]; key fraction) {
+					<>
+						<Guide left={left + crop.width * fraction} top={top} style={{ width: 1, height: crop.height, backgroundColor: 'rgba(255,255,255,0.53)' }} />
+						<Guide left={left} top={top + crop.height * fraction} style={{ width: crop.width, height: 1, backgroundColor: 'rgba(255,255,255,0.53)' }} />
+					</>
+				}
+			}
+			@for (const handle of handles; key handle) {
+				const hx = handle.includes('w') ? 0 : handle.includes('e') ? crop.width : crop.width / 2
+				const hy = handle.includes('n') ? 0 : handle.includes('s') ? crop.height : crop.height / 2
+				// Keep hit regions inside the image, including at image edges.
+				const x = Math.max(frame.x, Math.min(left + hx - 12, frame.x + frame.width - 24))
+				const y = Math.max(frame.y, Math.min(top + hy - 12, frame.y + frame.height - 24))
+				<Gesture id={props.id ? props.id + '-' + handle : undefined} left={x} top={y}
+					accessibilityLabel={'Resize crop ' + handle} accessibilityState={{ disabled: props.disabled }}
+					style={{ width: Math.min(24, frame.width), height: Math.min(24, frame.height), backgroundColor: props.disabled ? 'rgba(255,255,255,0.27)' : 'rgba(255,255,255,0.53)', borderWidth: 1, borderColor: '#ffffff' }}
+					onPan={props.disabled ? undefined : (e: PanEvent) => pan(handle, e)} />
+			}
+		</Absolute>
+	</View>
+}

package/src/Source.macos.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { Image } from '@octane-xplat/ui'
+import type { ImageCropProps } from './props'
+export function Source(props: Pick<ImageCropProps, 'src' | 'alt' | 'width' | 'height'>) @{
+	<Image src={props.src} alt={props.alt} style={{ width: props.width, height: props.height, objectFit: 'contain', pointerEvents: 'none' }} />
+}

package/src/Source.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { Image } from '@octane-xplat/ui'
+import type { ImageCropProps } from './props'
+export function Source(props: Pick<ImageCropProps, 'src' | 'alt' | 'width' | 'height'>) @{
+	<Image src={props.src} alt={props.alt} style={{ width: props.width, height: props.height }}
+		ios={{ stretch: 'aspectFit', isUserInteractionEnabled: false }}
+		android={{ stretch: 'aspectFit', isUserInteractionEnabled: false }} />
+}

package/src/Source.web.tsrx

@@ -0,0 +1,5 @@
+import { Image } from '@octane-xplat/ui'
+import type { ImageCropProps } from './props'
+export function Source(props: Pick<ImageCropProps, 'src' | 'alt' | 'width' | 'height'>) @{
+	<Image src={props.src} alt={props.alt} style={{ width: props.width, height: props.height, objectFit: 'contain', pointerEvents: 'none', userSelect: 'none' }} web={{ draggable: false }} />
+}