@octane-xplat/image-crop 0.0.1 → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,4 +1,122 @@
-# @octane-xplat/image-crop
+# Inline image crop selection
 
-This is a placeholder stub published to reserve the package name ahead of the
-first automated release. It has no supported API.
+`@octane-xplat/image-crop` selects a rectangle inline on web, iOS, Android, and macOS (AppKit).
+It uses Octane Xplat primitives and shared geometry. It returns selection
+coordinates; it does not produce a cropped image file or open a modal.
+
+## Install and use
+
+```sh
+pnpm add @octane-xplat/image-crop
+```
+
+Use the existing Octane Xplat renderer setup; no extra NativeScript plugin or
+CSS pipeline is required. Supply the source's decoded, oriented natural size
+and a viewport in CSS pixels (web), DIPs (iOS/Android), or points (AppKit).
+
+For AppKit, use the existing `xplatMacOS` compiler setup; the `macos` package
+condition supplies source for that renderer. macOS image sources support base64
+data URIs and local paths/file URLs. Remote URLs are not loaded by the AppKit
+renderer; download them separately and supply a local source. Desktop WebView
+apps use the web implementation.
+
+```tsx
+import { useState } from 'octane'
+import { ImageCrop, toNaturalCrop } from '@octane-xplat/image-crop'
+import type { Crop } from '@octane-xplat/image-crop'
+
+export function PhotoSelection() {
+	const [crop, setCrop] = useState<Crop>({
+		unit: '%',
+		x: 25,
+		y: 25,
+		width: 50,
+		height: 50,
+	})
+	return (
+		<ImageCrop
+			src="https://example.com/photo.jpg"
+			alt="Photo to crop"
+			imageWidth={1600}
+			imageHeight={1200}
+			width={400}
+			height={300}
+			crop={crop}
+			aspect={4 / 3}
+			minWidth={40}
+			ruleOfThirds
+			onChange={(_, percent) => setCrop(percent)}
+			onComplete={(pixel) => {
+				const natural = toNaturalCrop(
+					pixel,
+					{ width: 400, height: 300 },
+					{ width: 1600, height: 1200 },
+				)
+				console.log(natural)
+			}}
+		/>
+	)
+}
+```
+
+Replace the example URL and dimensions with your source. Keep hook-calling
+components in `.tsx` or `.tsrx` inside your renderer include glob.
+[The maintained demo](https://github.com/octane-xplat/octane-xplat/blob/main/packages/image-crop/examples/selection.tsrx) uses a bundled image.
+
+## Coordinates and control
+
+The contract follows react-image-crop's crop shape and callback pair:
+`onChange(pixelCrop, percentCrop)` and `onComplete(pixelCrop, percentCrop)`.
+Store either callback argument and pass it back as `crop`. The widget does not
+hold a separate visible selection when the controlled prop stays unchanged.
+
+`px` means displayed-image pixels / DIPs, not natural source pixels. `%` means
+percent of the contained image's width for x/width and height for y/height.
+Letterbox margins are excluded. `containFrame(viewSize, naturalSize)` gives the
+image rectangle; pass its width and height to `toNaturalCrop`. Use
+`fromNaturalCrop` for the reverse mapping. A 1600×1200 source displayed at
+400×300 maps `{x:100,y:75,width:200,height:150,unit:'px'}` to natural pixels
+`{x:400,y:300,width:800,height:600,unit:'px'}`.
+
+Drag the interior to move and any of eight handles to resize. `aspect` is
+width/height. Minimum and optional maximum dimensions always use displayed
+pixels, including for a percent crop. Image bounds and maximums take precedence
+when a minimum cannot fit. Invalid controlled coordinates are constrained for
+rendering without emitting a callback. Side handles with an aspect expand the
+other axis around its midpoint; corners keep the opposite corner fixed.
+
+`disabled` blocks gestures. `ruleOfThirds` draws non-interactive guide lines.
+Completion fires on gesture end, not cancellation. Cancellation keeps the last
+controlled selection. A layout change during a gesture aborts that gesture.
+
+## Boundaries and verification
+
+V1 assumes centered contain-fit and requires known natural dimensions; it does
+not decode orientation or discover source dimensions. It does not implement
+keyboard nudging, drawing a new rectangle outside the selection, circular
+crops, or the full react-image-crop API. Small selections can have overlapping
+24-pixel handle hit regions; choose minimum dimensions suitable for your UI.
+
+Producing pixels is a separate concern: use canvas on web or ImageSource
+operations on native, with the natural coordinates from `toNaturalCrop`.
+Neither output path is implemented by this leaf.
+
+From the monorepo root:
+
+```sh
+pnpm --filter @octane-xplat/image-crop test
+pnpm --filter @octane-xplat/image-crop typecheck
+pnpm --filter @octane-xplat/image-crop build
+pnpm probe doctor
+pnpm probe run packages/image-crop/examples/selection.tsrx --target web --deps @octane-xplat/image-crop
+pnpm probe run packages/image-crop/tests/selection.macos.tsrx --target macos --deps @octane-xplat/image-crop
+```
+
+The mounted probe checks handles and records geometry. It does not establish
+OS touch hit-testing or visual pixel parity. Geometry tests cover conversion,
+letterboxing, movement, aspect resizing, and constraints.
+
+The maintained AppKit integration test checks all eight resize handles, interior
+movement, aspect and min/max bounds, cancellation, disabled callbacks, source
+scaling, input-transparent guides, and window resizing. It uses renderer pan
+dispatch and AppKit hit-testing; OS mouse input remains separately unverified.

package/dist/native/Gesture.js

@@ -0,0 +1,12 @@
+import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { View } from "@octane-xplat/ui";
+//#region src/Gesture.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Gesture = defineUniversalComponent("nativescript", function Gesture(props) {
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([["spread", props]]))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Gesture };

package/dist/native/Guide.js

@@ -0,0 +1,24 @@
+import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { View } from "@octane-xplat/ui";
+//#region src/Guide.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Guide = defineUniversalComponent("nativescript", function Guide(props) {
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([
+		["spread", props],
+		[
+			"set",
+			"ios",
+			{ isUserInteractionEnabled: false }
+		],
+		[
+			"set",
+			"android",
+			{ isUserInteractionEnabled: false }
+		]
+	]))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Guide };

package/dist/native/ImageCrop.js

@@ -0,0 +1,295 @@
+import { constrainCrop, containFrame, convertToPercentCrop, dragCrop } from "./geometry.js";
+import { Gesture } from "./Gesture.js";
+import { Guide } from "./Guide.js";
+import { Source } from "./Source.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalFor, universalIf, universalPlan, universalProps, universalValue, useRef, withSlot } from "@nativescript-community/octane";
+import { Absolute, View, useMeasure } from "@octane-xplat/ui";
+//#region src/ImageCrop.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		}
+	]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var handles = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
+var ImageCrop = defineUniversalComponent("nativescript", function ImageCrop(props) {
+	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 = containFrame(viewport, {
+		width: props.imageWidth,
+		height: props.imageHeight
+	});
+	const crop = constrainCrop(props.crop, frame, props);
+	const gesture = useRef(null, _h$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;
+	return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", View, universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"ref",
+			measure.ref
+		],
+		[
+			"set",
+			"style",
+			{
+				width: props.width,
+				height: props.height
+			}
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Absolute, universalProps([[
+			"set",
+			"style",
+			viewport
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan3, [
+				universalComponent("nativescript", Source, universalProps([
+					[
+						"set",
+						"src",
+						props.src
+					],
+					[
+						"set",
+						"alt",
+						props.alt
+					],
+					[
+						"set",
+						"width",
+						viewport.width
+					],
+					[
+						"set",
+						"height",
+						viewport.height
+					]
+				])),
+				universalComponent("nativescript", Gesture, universalProps([
+					[
+						"set",
+						"id",
+						props.id ? props.id + "-move" : void 0
+					],
+					[
+						"set",
+						"left",
+						left
+					],
+					[
+						"set",
+						"top",
+						top
+					],
+					[
+						"set",
+						"style",
+						{
+							width: crop.width,
+							height: crop.height,
+							borderWidth: 1,
+							borderColor: "#ffffff",
+							backgroundColor: "rgba(255,255,255,0.13)"
+						}
+					],
+					[
+						"set",
+						"onPan",
+						props.disabled ? void 0 : (e) => pan("move", e)
+					]
+				])),
+				universalIf(props.ruleOfThirds, () => {
+					return universalValue(__octaneUniversalPlan1, [universalFor([1 / 3, 2 / 3], (fraction, __octaneUniversalIndex) => fraction, (fraction, __octaneUniversalIndex) => {
+						return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Guide, universalProps([
+							[
+								"set",
+								"left",
+								left + crop.width * fraction
+							],
+							[
+								"set",
+								"top",
+								top
+							],
+							[
+								"set",
+								"style",
+								{
+									width: 1,
+									height: crop.height,
+									backgroundColor: "rgba(255,255,255,0.53)"
+								}
+							]
+						])), universalComponent("nativescript", Guide, universalProps([
+							[
+								"set",
+								"left",
+								left
+							],
+							[
+								"set",
+								"top",
+								top + crop.height * fraction
+							],
+							[
+								"set",
+								"style",
+								{
+									width: crop.width,
+									height: 1,
+									backgroundColor: "rgba(255,255,255,0.53)"
+								}
+							]
+						]))]);
+					})]);
+				}),
+				universalFor(handles, (handle, __octaneUniversalIndex$) => handle, (handle, __octaneUniversalIndex$) => {
+					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));
+					return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Gesture, universalProps([
+						[
+							"set",
+							"id",
+							props.id ? props.id + "-" + handle : void 0
+						],
+						[
+							"set",
+							"left",
+							x
+						],
+						[
+							"set",
+							"top",
+							y
+						],
+						[
+							"set",
+							"accessibilityLabel",
+							"Resize crop " + handle
+						],
+						[
+							"set",
+							"accessibilityState",
+							{ disabled: props.disabled }
+						],
+						[
+							"set",
+							"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"
+							}
+						],
+						[
+							"set",
+							"onPan",
+							props.disabled ? void 0 : (e) => pan(handle, e)
+						]
+					]))]);
+				})
+			]);
+		})))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ImageCrop };

package/dist/native/Source.js

@@ -0,0 +1,83 @@
+import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+import { Image } from "@octane-xplat/ui";
+//#region src/Source.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Source = defineUniversalComponent("nativescript", markWarm(function Source(props) {
+	useBatch([], () => {
+		warmChild(Image, {
+			src: props.src,
+			alt: props.alt,
+			style: {
+				width: props.width,
+				height: props.height
+			},
+			ios: {
+				stretch: "aspectFit",
+				isUserInteractionEnabled: false
+			},
+			android: {
+				stretch: "aspectFit",
+				isUserInteractionEnabled: false
+			}
+		});
+	});
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Image, universalProps([
+		[
+			"set",
+			"src",
+			props.src
+		],
+		[
+			"set",
+			"alt",
+			props.alt
+		],
+		[
+			"set",
+			"style",
+			{
+				width: props.width,
+				height: props.height
+			}
+		],
+		[
+			"set",
+			"ios",
+			{
+				stretch: "aspectFit",
+				isUserInteractionEnabled: false
+			}
+		],
+		[
+			"set",
+			"android",
+			{
+				stretch: "aspectFit",
+				isUserInteractionEnabled: false
+			}
+		]
+	]))]);
+}, (__wp) => {
+	const props = __wp;
+	warmChild(Image, {
+		src: props.src,
+		alt: props.alt,
+		style: {
+			width: props.width,
+			height: props.height
+		},
+		ios: {
+			stretch: "aspectFit",
+			isUserInteractionEnabled: false
+		},
+		android: {
+			stretch: "aspectFit",
+			isUserInteractionEnabled: false
+		}
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { Source };

package/dist/native/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/native/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/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "7ccceb2f-0c9f-43cc-beb6-b354d84d8552",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/Gesture.web.js

@@ -0,0 +1,17 @@
+import { componentSlot } from "octane";
+import { View } from "@octane-xplat/ui";
+//#region src/Gesture.web.tsrx
+var Gesture = function Gesture(props, __s, __extra) {
+	const __block = __s.block;
+	componentSlot(__s, 0, __block.parentNode, View, {
+		...props,
+		"style": {
+			...props.style,
+			touchAction: "none",
+			userSelect: "none",
+			boxSizing: "border-box"
+		}
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:883cc1f9");
+};
+//#endregion
+export { Gesture };