@octane-xplat/ui 0.10.0 → 0.11.0

package/dist/native/Image.tsrx.js

@@ -1,36 +1,125 @@
 import { cx } from "./cx.js";
+import { rememberGridChildPlacement } from "./grid-placement.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { layoutChildProps } from "./layout-child.js";
 import { isSvgSrc, svgSource } from "./svg-source.js";
 import "./svg.mobile.js";
-import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalProps, universalValue, useMemo } from "@nativescript-community/octane";
-import { ImageSource } from "@nativescript/core";
+import { createSizedImageBinding } from "./image-sizing.js";
+import { contentFitToStretch, needsContentRect, resolveContentFit, resolveContentPosition } from "./image-content.js";
+import { createImageContentBinding } from "./image-content-binding.js";
+import { hashToPngBase64 } from "./hash-image.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalProps, universalValue, useLayoutEffect, useMemo, useRef } from "@nativescript-community/octane";
+import { ImageSource, Screen, isAndroid, isIOS, knownFolders } from "@nativescript/core";
 //#region src/Image.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _hs$ = /* @__PURE__ */ hookSlots(8);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "svgview",
 	"propsSlot": 0
 });
 var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "absolutelayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "image",
+		"props": { "stretch": "fill" },
+		"bindings": [
+			["ref", 1],
+			["loadMode", 2],
+			["accessibilityLabel", 3]
+		]
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "image",
 	"propsSlot": 0
 });
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
 });
+function placeholderSource(placeholder) {
+	const png = hashToPngBase64(placeholder);
+	if (png) return ImageSource.fromBase64Sync(png);
+	const comma = placeholder.indexOf(",");
+	if (placeholder.startsWith("data:") && comma > 0 && placeholder.slice(0, comma).endsWith(";base64")) return ImageSource.fromBase64Sync(placeholder.slice(comma + 1));
+	if (placeholder.startsWith("res://")) return ImageSource.fromResourceSync(placeholder.slice(6));
+	if (placeholder.startsWith("~/")) return ImageSource.fromFileSync(knownFolders.currentApp().path + "/" + placeholder.slice(2));
+	if (!/^https?:\/\//.test(placeholder)) return ImageSource.fromFileSync(placeholder);
+	return null;
+}
+function applyPlaceholder(view, placeholder) {
+	if (!placeholder || !(view.isLoading || !view.imageSource)) return;
+	const ph = placeholderSource(placeholder);
+	if (ph) view.imageSource = ph;
+}
+function clipImageHost(host) {
+	host?.on?.("loaded", () => {
+		if (isIOS && host.ios) host.ios.clipsToBounds = true;
+	});
+}
 var Image = defineUniversalComponent("nativescript", function Image(props) {
-	const svg = useMemo(() => isSvgSrc(props.src) ? svgSource(props.src) : null, [props.src], _h$0);
+	const sources = Array.isArray(props.src) ? props.src : null;
+	const srcString = sources ? "" : props.src;
+	const fit = resolveContentFit(props.contentFit);
+	const position = resolveContentPosition(props.contentPosition);
+	const computed = needsContentRect(fit, position);
+	const imageRef = useRef(null, _h$0);
+	const placeholderRef = useRef(props.placeholder, _h$1);
+	placeholderRef.current = props.placeholder;
+	const sizing = useMemo(() => createSizedImageBinding({ afterIssue: (v) => applyPlaceholder(v, placeholderRef.current) }), [], _h$2);
+	const binding = useMemo(() => createImageContentBinding({
+		isAndroid,
+		screenScale: () => Screen.mainScreen?.scale ?? 1,
+		issue: (view, src, gate) => sizing.update(view, src, gate)
+	}), [], _h$3);
+	const boundRef = useRef({
+		key: props.recyclingKey,
+		src: props.src
+	}, _h$4);
+	const bound = boundRef.current;
+	boundRef.current = {
+		key: props.recyclingKey,
+		src: props.src
+	};
+	if (bound.key != null && props.recyclingKey != null && bound.key !== props.recyclingKey && bound.src !== props.src && imageRef.current) imageRef.current.imageSource = null;
+	const svg = useMemo(() => srcString && isSvgSrc(srcString) ? svgSource(srcString) : null, [srcString], _h$5);
 	const source = useMemo(() => {
-		const comma = props.src.indexOf(",");
-		if (props.src.startsWith("data:") && comma > 0 && props.src.slice(0, comma).endsWith(";base64")) return ImageSource.fromBase64Sync(props.src.slice(comma + 1));
-		return props.src;
-	}, [props.src], _h$1);
-	return universalValue(__octaneUniversalPlan2, [universalIf(svg != null, () => {
+		const comma = srcString.indexOf(",");
+		if (srcString.startsWith("data:") && comma > 0 && srcString.slice(0, comma).endsWith(";base64")) return ImageSource.fromBase64Sync(srcString.slice(comma + 1));
+		return srcString;
+	}, [srcString], _h$6);
+	const update = {
+		source: sources ? null : source,
+		sources,
+		fit,
+		position,
+		computed
+	};
+	useLayoutEffect(() => {
+		const view = imageRef.current;
+		if (!view || !props.placeholder || svg != null) return;
+		const show = () => applyPlaceholder(view, props.placeholder);
+		show();
+		view.on?.("isLoadingChange", show);
+		return () => view.off?.("isLoadingChange", show);
+	}, [
+		props.src,
+		props.placeholder,
+		svg
+	], _h$7);
+	return universalValue(__octaneUniversalPlan3, [universalIf(svg != null, () => {
 		return universalValue(__octaneUniversalPlan0, [universalProps([
 			[
 				"set",
@@ -61,7 +150,7 @@ var Image = defineUniversalComponent("nativescript", function Image(props) {
 			[
 				"set",
 				"stretch",
-				"aspectFit"
+				fit === "none" ? "none" : contentFitToStretch(fit === "scale-down" ? "contain" : fit)
 			],
 			[
 				"set",
@@ -69,12 +158,53 @@ var Image = defineUniversalComponent("nativescript", function Image(props) {
 				props.alt
 			]
 		])]);
+	}, () => universalIf(computed, () => {
+		return universalValue(__octaneUniversalPlan1, [
+			universalProps([
+				[
+					"set",
+					"ref",
+					(v) => {
+						clipImageHost(v);
+						rememberGridChildPlacement(v, props);
+						if (v) binding.update(v, null, update);
+					}
+				],
+				[
+					"set",
+					"id",
+					props.id
+				],
+				["spread", layoutChildProps(props)],
+				[
+					"set",
+					"className",
+					cx(props.className)
+				],
+				[
+					"set",
+					"style",
+					props.style
+				]
+			]),
+			(v) => {
+				imageRef.current = v;
+				applyEscapeProps(v, props);
+				if (v) binding.update(null, v, update);
+			},
+			props.decoding ?? "async",
+			props.alt
+		]);
 	}, () => {
-		return universalValue(__octaneUniversalPlan1, [universalProps([
+		return universalValue(__octaneUniversalPlan2, [universalProps([
 			[
 				"set",
 				"ref",
-				(v) => applyEscapeProps(v, props)
+				(v) => {
+					imageRef.current = v;
+					applyEscapeProps(v, props);
+					if (v) binding.update(v, v, update);
+				}
 			],
 			[
 				"set",
@@ -94,8 +224,13 @@ var Image = defineUniversalComponent("nativescript", function Image(props) {
 			],
 			[
 				"set",
-				"src",
-				source
+				"stretch",
+				contentFitToStretch(fit)
+			],
+			[
+				"set",
+				"loadMode",
+				props.decoding ?? "async"
 			],
 			[
 				"set",
@@ -103,7 +238,7 @@ var Image = defineUniversalComponent("nativescript", function Image(props) {
 				props.alt
 			]
 		])]);
-	})]);
+	}))]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
 export { Image };

package/dist/native/hash-image.js

@@ -0,0 +1,285 @@
+//#region src/hash-image.ts
+/** `blurhash:<hash>` / `thumbhash:<base64>` → PNG bytes as base64, or null. */
+function hashToPngBase64(src) {
+	if (src.startsWith("blurhash:")) {
+		const rgba = decodeBlurHash(src.slice(9), 32, 32);
+		return rgba ? base64Encode(rgbaToPng(32, 32, rgba)) : null;
+	}
+	if (src.startsWith("thumbhash:")) {
+		const hash = base64Decode(src.slice(10));
+		const decoded = hash ? thumbHashToRGBA(hash) : null;
+		return decoded ? base64Encode(rgbaToPng(decoded.w, decoded.h, decoded.rgba)) : null;
+	}
+	return null;
+}
+var BASE83 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+function decode83(str, start, end) {
+	let value = 0;
+	for (let i = start; i < end; i++) {
+		const digit = BASE83.indexOf(str[i]);
+		if (digit === -1) return -1;
+		value = value * 83 + digit;
+	}
+	return value;
+}
+function srgbToLinear(value) {
+	const v = value / 255;
+	return v <= .04045 ? v / 12.92 : Math.pow((v + .055) / 1.055, 2.4);
+}
+function linearToSrgb(value) {
+	const v = Math.max(0, Math.min(1, value));
+	return v <= .0031308 ? Math.round(v * 12.92 * 255 + .5) : Math.round((1.055 * Math.pow(v, 1 / 2.4) - .055) * 255 + .5);
+}
+function signPow(value, exp) {
+	return Math.sign(value) * Math.pow(Math.abs(value), exp);
+}
+function decodeBlurHash(hash, width, height) {
+	if (hash.length < 6) return null;
+	const sizeFlag = decode83(hash, 0, 1);
+	const quantisedMax = decode83(hash, 1, 2);
+	const dcValue = decode83(hash, 2, 6);
+	if (sizeFlag < 0 || quantisedMax < 0 || dcValue < 0) return null;
+	const numY = Math.floor(sizeFlag / 9) + 1;
+	const numX = sizeFlag % 9 + 1;
+	if (hash.length !== 4 + 2 * numX * numY) return null;
+	const maximumValue = (quantisedMax + 1) / 166;
+	const colors = new Array(numX * numY);
+	colors[0] = [
+		srgbToLinear(dcValue >> 16),
+		srgbToLinear(dcValue >> 8 & 255),
+		srgbToLinear(dcValue & 255)
+	];
+	for (let i = 1; i < numX * numY; i++) {
+		const value = decode83(hash, 4 + i * 2, 6 + i * 2);
+		if (value < 0) return null;
+		const quantR = Math.floor(value / 361);
+		const quantG = Math.floor(value / 19) % 19;
+		const quantB = value % 19;
+		colors[i] = [
+			signPow((quantR - 9) / 9, 2) * maximumValue,
+			signPow((quantG - 9) / 9, 2) * maximumValue,
+			signPow((quantB - 9) / 9, 2) * maximumValue
+		];
+	}
+	const pixels = new Uint8ClampedArray(width * height * 4);
+	for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+		let r = 0;
+		let g = 0;
+		let b = 0;
+		for (let j = 0; j < numY; j++) for (let i = 0; i < numX; i++) {
+			const basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
+			const color = colors[i + j * numX];
+			r += color[0] * basis;
+			g += color[1] * basis;
+			b += color[2] * basis;
+		}
+		const o = (x + y * width) * 4;
+		pixels[o] = linearToSrgb(r);
+		pixels[o + 1] = linearToSrgb(g);
+		pixels[o + 2] = linearToSrgb(b);
+		pixels[o + 3] = 255;
+	}
+	return pixels;
+}
+function thumbHashToApproximateAspectRatio(hash) {
+	const header = hash[3];
+	const hasAlpha = (hash[2] & 128) !== 0;
+	const isLandscape = (hash[4] & 128) !== 0;
+	return (isLandscape ? hasAlpha ? 5 : 7 : header & 7) / (isLandscape ? header & 7 : hasAlpha ? 5 : 7);
+}
+function thumbHashToRGBA(hash) {
+	if (hash.length < 5) return null;
+	const { PI, min, max, cos, round } = Math;
+	const header24 = hash[0] | hash[1] << 8 | hash[2] << 16;
+	const header16 = hash[3] | hash[4] << 8;
+	const l_dc = (header24 & 63) / 63;
+	const p_dc = (header24 >> 6 & 63) / 31.5 - 1;
+	const q_dc = (header24 >> 12 & 63) / 31.5 - 1;
+	const l_scale = (header24 >> 18 & 31) / 31;
+	const hasAlpha = header24 >> 23 !== 0;
+	const p_scale = (header16 >> 3 & 63) / 63;
+	const q_scale = (header16 >> 9 & 63) / 63;
+	const isLandscape = header16 >> 15 !== 0;
+	const lx = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7);
+	const ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
+	const a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1;
+	const a_scale = (hash[5] >> 4) / 15;
+	const ac_start = hasAlpha ? 6 : 5;
+	let ac_index = 0;
+	const decodeChannel = (nx, ny, scale) => {
+		const ac = [];
+		for (let cy = 0; cy < ny; cy++) for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++) {
+			const byte = hash[ac_start + (ac_index >> 1)];
+			if (byte === void 0) return null;
+			ac.push(((byte >> ((ac_index++ & 1) << 2) & 15) / 7.5 - 1) * scale);
+		}
+		return ac;
+	};
+	const l_ac = decodeChannel(lx, ly, l_scale);
+	const p_ac = decodeChannel(3, 3, p_scale * 1.25);
+	const q_ac = decodeChannel(3, 3, q_scale * 1.25);
+	const a_ac = hasAlpha ? decodeChannel(5, 5, a_scale) : null;
+	if (!l_ac || !p_ac || !q_ac || hasAlpha && !a_ac) return null;
+	const ratio = thumbHashToApproximateAspectRatio(hash);
+	const w = round(ratio > 1 ? 32 : 32 * ratio);
+	const h = round(ratio > 1 ? 32 / ratio : 32);
+	const rgba = new Uint8Array(w * h * 4);
+	const fx = [];
+	const fy = [];
+	for (let y = 0, i = 0; y < h; y++) for (let x = 0; x < w; x++, i += 4) {
+		let l = l_dc;
+		let p = p_dc;
+		let q = q_dc;
+		let a = a_dc;
+		for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++) fx[cx] = cos(PI / w * (x + .5) * cx);
+		for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++) fy[cy] = cos(PI / h * (y + .5) * cy);
+		for (let cy = 0, j = 0; cy < ly; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++) l += l_ac[j] * fx[cx] * fy2;
+		for (let cy = 0, j = 0; cy < 3; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
+			const f = fx[cx] * fy2;
+			p += p_ac[j] * f;
+			q += q_ac[j] * f;
+		}
+		if (hasAlpha && a_ac) for (let cy = 0, j = 0; cy < 5; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++) a += a_ac[j] * fx[cx] * fy2;
+		const b = l - 2 / 3 * p;
+		const r = (3 * l - b + q) / 2;
+		const g = r - q;
+		rgba[i] = max(0, 255 * min(1, r));
+		rgba[i + 1] = max(0, 255 * min(1, g));
+		rgba[i + 2] = max(0, 255 * min(1, b));
+		rgba[i + 3] = max(0, 255 * min(1, a));
+	}
+	return {
+		w,
+		h,
+		rgba
+	};
+}
+var PNG_CRC_TABLE = [
+	0,
+	498536548,
+	997073096,
+	651767980,
+	1994146192,
+	1802195444,
+	1303535960,
+	1342533948,
+	-306674912,
+	-267414716,
+	-690576408,
+	-882789492,
+	-1687895376,
+	-2032938284,
+	-1609899400,
+	-1111625188
+];
+/** Uncompressed PNG (zlib store blocks) — correctness over size; inputs are
+*  ~32px placeholders so the payload stays small. */
+function rgbaToPng(w, h, rgba) {
+	const row = w * 4 + 1;
+	const idat = 6 + h * (5 + row);
+	const bytes = [
+		137,
+		80,
+		78,
+		71,
+		13,
+		10,
+		26,
+		10,
+		0,
+		0,
+		0,
+		13,
+		73,
+		72,
+		68,
+		82,
+		0,
+		0,
+		w >> 8,
+		w & 255,
+		0,
+		0,
+		h >> 8,
+		h & 255,
+		8,
+		6,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		idat >>> 24,
+		idat >> 16 & 255,
+		idat >> 8 & 255,
+		idat & 255,
+		73,
+		68,
+		65,
+		84,
+		120,
+		1
+	];
+	let a = 1;
+	let b = 0;
+	for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) {
+		bytes.push(y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, row >> 8 ^ 255, 0);
+		for (b = (b + a) % 65521; i < end; i++) {
+			const u = rgba[i] & 255;
+			bytes.push(u);
+			a = (a + u) % 65521;
+			b = (b + a) % 65521;
+		}
+	}
+	bytes.push(b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130);
+	for (let [start, end] of [[12, 29], [37, 41 + idat]]) {
+		let c = -1;
+		for (let i = start; i < end; i++) {
+			c ^= bytes[i];
+			c = c >>> 4 ^ PNG_CRC_TABLE[c & 15];
+			c = c >>> 4 ^ PNG_CRC_TABLE[c & 15];
+		}
+		c = ~c;
+		bytes[end++] = c >>> 24;
+		bytes[end++] = c >> 16 & 255;
+		bytes[end++] = c >> 8 & 255;
+		bytes[end++] = c & 255;
+	}
+	return bytes;
+}
+var BASE64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+function base64Encode(bytes) {
+	let out = "";
+	for (let i = 0; i < bytes.length; i += 3) {
+		const b0 = bytes[i];
+		const b1 = i + 1 < bytes.length ? bytes[i + 1] : 0;
+		const b2 = i + 2 < bytes.length ? bytes[i + 2] : 0;
+		out += BASE64_CHARS[b0 >> 2];
+		out += BASE64_CHARS[(b0 & 3) << 4 | b1 >> 4];
+		out += i + 1 < bytes.length ? BASE64_CHARS[(b1 & 15) << 2 | b2 >> 6] : "=";
+		out += i + 2 < bytes.length ? BASE64_CHARS[b2 & 63] : "=";
+	}
+	return out;
+}
+function base64Decode(text) {
+	const clean = text.replace(/-/g, "+").replace(/_/g, "/").replace(/[\s=]/g, "");
+	const bytes = new Uint8Array(Math.floor(clean.length * 3 / 4));
+	let out = 0;
+	let acc = 0;
+	let bits = 0;
+	for (const ch of clean) {
+		const digit = BASE64_CHARS.indexOf(ch);
+		if (digit === -1) return null;
+		acc = acc << 6 | digit;
+		bits += 6;
+		if (bits >= 8) {
+			bits -= 8;
+			if (out < bytes.length) bytes[out++] = acc >> bits & 255;
+		}
+	}
+	return bytes.subarray(0, out);
+}
+//#endregion
+export { hashToPngBase64 };

package/dist/native/image-content-binding.js

@@ -0,0 +1,158 @@
+import { bestImageSource, contentRect } from "./image-content.js";
+//#region src/image-content-binding.ts
+/** Intrinsic size in dips. iOS `UIImage.size` is already points; Android
+*  `Bitmap` reports raw pixels — density-bucketed resource bitmaps convert
+*  through their bucket (a 300px xxxhdpi asset = 75 dips), while decoded
+*  remote/file bitmaps carry no density and treat px as dips, which is the
+*  CSS 'none' natural size on every platform. */
+function intrinsicDipSize(imageSource, android) {
+	const width = imageSource?.width;
+	const height = imageSource?.height;
+	if (!width || !height) return null;
+	if (android) {
+		const density = imageSource.android?.getDensity?.() ?? 0;
+		if (density > 0) return {
+			w: width * 160 / density,
+			h: height * 160 / density
+		};
+	}
+	return {
+		w: width,
+		h: height
+	};
+}
+/** Measure → compute → apply for Image's content contract (study L7).
+*  NS's stock widget owns its draw path — the widgets ImageView computes
+*  its own matrix in onDraw and honors only the four stretch scaleTypes —
+*  so the drawable-level matrix expo-image uses is engine internals. What
+*  the leaf can own is the view-level equivalent: measure the box
+*  (`layoutChanged` → `getActualSize`, dips), compute the content rect
+*  with the same math as object-fit/object-position, and lay out the
+*  inner <image stretch="fill"> to that rect inside a clipped host. One
+*  code path produces identical rects on iOS and Android.
+*
+*  This binding never writes `src` itself — it resolves WHICH source the
+*  view should load and hands it to `env.issue`, the sized-decode binding
+*  (study L1). That seam composes both contracts: the L8 array pick waits
+*  on the same first real layout the decode gate needs, and the computed
+*  path passes the semantic fit as the decode gate so 'none' still
+*  decodes at source resolution while 'fill' would have been
+*  view-sampled.
+*
+*  Before the bitmap's intrinsic size is known the computed path sizes
+*  the inner image to the host box: a real rect is what lets the decode
+*  gate's first-layout check pass, and the placeholder is the CSS 'fill'
+*  answer until imageSourceChange refines it.
+*
+*  `update` re-runs on every render (ref identity churn); all writes are
+*  idempotent. Null refs on detach are ignored — a dead listener is a
+*  self-contained cycle GC collects with the view. */
+function createImageContentBinding(env) {
+	let sizeView = null;
+	let imageView = null;
+	let update = {
+		source: null,
+		sources: null,
+		fit: "cover",
+		position: {},
+		computed: false
+	};
+	let appliedW = 0;
+	let appliedH = 0;
+	let appliedX = 0;
+	let appliedY = 0;
+	let listening = false;
+	let sourceListening = false;
+	const screenScale = () => {
+		try {
+			return env.screenScale();
+		} catch {
+			return 1;
+		}
+	};
+	const decodeGate = () => update.fit === "none" ? "none" : "aspectFit";
+	const evaluate = () => {
+		if (!sizeView) return;
+		const needsViewSize = update.computed || update.sources != null;
+		let viewWidth = 0;
+		let viewHeight = 0;
+		if (needsViewSize) {
+			const actual = sizeView.getActualSize?.();
+			viewWidth = actual?.width ?? 0;
+			viewHeight = actual?.height ?? 0;
+			if (viewWidth <= 0 || viewHeight <= 0) return;
+		}
+		if (imageView) {
+			let resolved = update.source;
+			if (update.sources?.length) resolved = bestImageSource(update.sources, viewWidth, viewHeight, screenScale())?.uri;
+			if (resolved != null && resolved !== "") env.issue(imageView, resolved, update.computed ? decodeGate() : void 0);
+		}
+		if (!update.computed || !imageView) return;
+		const intrinsic = intrinsicDipSize(imageView.imageSource, env.isAndroid);
+		const rect = intrinsic ? contentRect(update.fit, update.position, viewWidth, viewHeight, intrinsic.w, intrinsic.h) : {
+			x: 0,
+			y: 0,
+			width: viewWidth,
+			height: viewHeight
+		};
+		if (rect.width !== appliedW || rect.height !== appliedH || rect.x !== appliedX || rect.y !== appliedY) {
+			appliedW = rect.width;
+			appliedH = rect.height;
+			appliedX = rect.x;
+			appliedY = rect.y;
+			imageView.width = rect.width;
+			imageView.height = rect.height;
+			imageView.left = rect.x;
+			imageView.top = rect.y;
+		}
+	};
+	const onLayout = () => evaluate();
+	const onImageSource = () => evaluate();
+	const listen = () => {
+		const wantsMeasure = update.computed || update.sources != null;
+		if (wantsMeasure && !listening && typeof sizeView?.on === "function") {
+			sizeView.on("layoutChanged", onLayout);
+			listening = true;
+		} else if (!wantsMeasure && listening) {
+			sizeView?.off?.("layoutChanged", onLayout);
+			listening = false;
+		}
+		if (update.computed && !sourceListening && typeof imageView?.on === "function") {
+			imageView.on("imageSourceChange", onImageSource);
+			sourceListening = true;
+		} else if (!update.computed && sourceListening) {
+			imageView?.off?.("imageSourceChange", onImageSource);
+			sourceListening = false;
+		}
+	};
+	return {
+		/** (Re)bind views + intent. `sizeView` is the measured box (the image
+		*  itself on the stretch path, the clip host on the computed path);
+		*  `imageView` is the <image> that draws. */
+		update(nextSizeView, nextImageView, next) {
+			if (nextSizeView && nextSizeView !== sizeView) {
+				sizeView?.off?.("layoutChanged", onLayout);
+				sizeView = nextSizeView;
+				listening = false;
+			}
+			if (nextImageView && nextImageView !== imageView) {
+				imageView?.off?.("imageSourceChange", onImageSource);
+				imageView = nextImageView;
+				sourceListening = false;
+			}
+			update = next;
+			listen();
+			evaluate();
+		},
+		dispose() {
+			sizeView?.off?.("layoutChanged", onLayout);
+			imageView?.off?.("imageSourceChange", onImageSource);
+			sizeView = null;
+			imageView = null;
+			listening = false;
+			sourceListening = false;
+		}
+	};
+}
+//#endregion
+export { createImageContentBinding };