@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/native/dialog-context.js

@@ -0,0 +1,8 @@
+import { createContext } from "octane/universal/native";
+//#region src/dialog-context.ts
+var DialogContext = createContext(null);
+/** JSX-provider form — the universal renderer's context is a callable
+*  rather than a `.Provider` member (same aliasing as FieldProvider). */
+var DialogProvider = DialogContext;
+//#endregion
+export { DialogContext, DialogProvider };

package/dist/native/escape-props.js

@@ -1,11 +1,25 @@
 import { applyNativeModifiers } from "./apply-native-modifiers.native.js";
 import { rememberGridChildPlacement } from "./grid-placement.js";
-import { isAndroid, isIOS } from "@nativescript/core";
+import { ScrollView, isAndroid, isIOS } from "@nativescript/core";
 //#region src/escape-props.ts
+/** Android ViewGroups clip every child to the child's own layout bounds
+*  (`clipChildren`) and to the padding box (`clipToPadding`) — the DOM and
+*  iOS both default to overflow:visible, so a transformed child (a rotated
+*  tilt, a translate) or any deliberate overhang is cut off on Android only.
+*  Scroll containers keep their clip; every other ViewGroup follows the
+*  shared overflow-visible contract. Runs on `loaded` — the native view
+*  does not exist yet at ref time. */
+function unclipAndroidContainer(view) {
+	const native = view?.android;
+	if (!native || view instanceof ScrollView || typeof native.setClipChildren !== "function") return;
+	native.setClipChildren(false);
+	native.setClipToPadding(false);
+}
 /** Apply only the active device's escape bag after the primitive's own props. */
 function applyEscapeProps(view, props) {
 	if (!view) return;
 	rememberGridChildPlacement(view, props);
+	if (isAndroid) view.on?.("loaded", () => unclipAndroidContainer(view));
 	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
 	if (bag) Object.assign(view, bag);
 	applyNativeModifiers(view, props.modifiers);
@@ -25,7 +39,12 @@ var NATIVE_ACCESSIBILITY_ROLES = {
 	switch: "switch",
 	radio: "radioButton",
 	spinbutton: "spinButton",
-	tab: "button"
+	tab: "button",
+	menu: "none",
+	group: "none",
+	menuitem: "button",
+	menuitemcheckbox: "checkbox",
+	menuitemradio: "radioButton"
 };
 /** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
 function nativeAccessibilityRole(role) {
@@ -36,8 +55,9 @@ function nativeAccessibilityRole(role) {
 function nativeAccessibilityState(state) {
 	if (state?.disabled) return "disabled";
 	if (state?.selected) return "selected";
-	if (state?.checked === true) return "checked";
-	if (state?.checked === false) return "unchecked";
+	const checked = state?.checked ?? state?.pressed;
+	if (checked === true) return "checked";
+	if (checked === false) return "unchecked";
 }
 //#endregion
 export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/field-context.js

@@ -0,0 +1,57 @@
+import { FormLayoutContext } from "./form-layout-context.js";
+import { InputGroupContext } from "./input-group-context.js";
+import { createContext, useContext } from "octane/universal/native";
+//#region src/field-context.ts
+var FieldContext = createContext(null);
+var FieldProvider = FieldContext;
+/** Resolve wrapper defaults and the accessibility links for a field control. */
+function useFieldControlProps(props) {
+	const field = useContext(FieldContext);
+	const form = useContext(FormLayoutContext);
+	const group = useContext(InputGroupContext);
+	const status = field?.status ?? props.status;
+	const description = field?.description ?? props.description;
+	const ownLabel = props.accessibilityLabel ?? (props.label && props.label !== field?.label ? props.label : void 0);
+	const ariaDescribedBy = [
+		props.web?.["aria-describedby"],
+		field?.descriptionId,
+		field?.statusId
+	].filter(Boolean).join(" ") || void 0;
+	const disabledReason = (field?.isDisabled ?? props.isDisabled) || props.isDisabled ? field?.disabledMessage ?? props.disabledMessage : void 0;
+	const hint = [
+		props.accessibilityHint,
+		description,
+		status?.message,
+		disabledReason
+	].filter(Boolean).join(". ") || void 0;
+	const isOptional = field?.isOptional ?? props.isOptional;
+	const isRequired = !isOptional && Boolean(field?.isRequired ?? props.isRequired ?? form.defaultOptionality === "required");
+	return {
+		...props,
+		isDisabled: Boolean(field?.isDisabled || group?.isDisabled || props.isDisabled),
+		isReadOnly: Boolean(field?.isReadOnly || props.isReadOnly),
+		isLoading: field?.isLoading ?? props.isLoading,
+		isRequired,
+		isOptional,
+		size: field?.size ?? group?.size ?? props.size,
+		inInputGroup: group != null,
+		status,
+		id: props.id ?? field?.controlId,
+		fieldLabel: field?.label,
+		ariaLabel: ownLabel ?? (field ? void 0 : props.label),
+		ariaLabelledBy: ownLabel ? void 0 : props.web?.["aria-labelledby"] ?? field?.labelId,
+		ariaDescribedBy,
+		accessibilityHint: hint
+	};
+}
+/** Resolve field-control props and report whether a surrounding Field owns
+*  the label, so third-party controls can compose with Field without nesting. */
+function useFieldControl(props) {
+	const inField = useContext(FieldContext) != null;
+	return {
+		props: useFieldControlProps(props),
+		inField
+	};
+}
+//#endregion
+export { FieldContext, FieldProvider, useFieldControl, useFieldControlProps };

package/dist/native/form-layout-context.js

@@ -0,0 +1,10 @@
+import { createContext } from "octane/universal/native";
+//#region src/form-layout-context.ts
+/** Layered arrangement context: `Field`/`FormField` switches to a
+*  horizontal-labels render under `direction === 'horizontal-labels'`, and
+*  `useFieldControlProps` resolves `aria-required` from
+*  `defaultOptionality`. Nested FormLayouts shadow the outer value. */
+var FormLayoutContext = createContext({ direction: "vertical" });
+var FormLayoutProvider = FormLayoutContext;
+//#endregion
+export { FormLayoutContext, FormLayoutProvider };

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/icons.js

@@ -17,9 +17,31 @@ function getIcon(name) {
 }
 if (!icons.has("xplat-search")) icons.set("xplat-search", { svg: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" });
 if (!icons.has("xplat-clear")) icons.set("xplat-clear", { svg: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" });
+if (!icons.has("xplat-copy")) icons.set("xplat-copy", { svg: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" });
+if (!icons.has("xplat-check")) icons.set("xplat-check", { svg: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" });
+if (!icons.has("xplat-chevron-down")) icons.set("xplat-chevron-down", { svg: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" });
+if (!icons.has("xplat-chevron-up")) icons.set("xplat-chevron-up", { svg: "M12 8l-6 6 1.41 1.41L12 9.83l4.59 4.58L18 14z" });
+if (!icons.has("xplat-doc-image")) icons.set("xplat-doc-image", { svg: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" });
+if (!icons.has("xplat-more-horizontal")) icons.set("xplat-more-horizontal", { svg: "M5 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" });
 if (!icons.has("xplat-play")) icons.set("xplat-play", { svg: "M8 5v14l11-7z" });
 if (!icons.has("xplat-pause")) icons.set("xplat-pause", { svg: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" });
 if (!icons.has("xplat-volume")) icons.set("xplat-volume", { svg: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" });
+if (!icons.has("xplat-calendar")) icons.set("xplat-calendar", { svg: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z" });
+if (!icons.has("xplat-clock")) icons.set("xplat-clock", { svg: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" });
+if (!icons.has("xplat-upload")) icons.set("xplat-upload", { svg: "M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z" });
+if (!icons.has("xplat-close")) icons.set("xplat-close", { svg: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" });
+if (!icons.has("xplat-chevron-left")) icons.set("xplat-chevron-left", { svg: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" });
+if (!icons.has("xplat-chevron-right")) icons.set("xplat-chevron-right", { svg: "M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z" });
 if (!icons.has("xplat-volume-off")) icons.set("xplat-volume-off", { svg: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.45-.54 2.78-1.32 3.97-2.27L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" });
+if (!icons.has("xplat-send")) icons.set("xplat-send", { svg: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" });
+if (!icons.has("xplat-stop")) icons.set("xplat-stop", { svg: "M6 6h12v12H6z" });
+if (!icons.has("xplat-chevron-down")) icons.set("xplat-chevron-down", { svg: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" });
+if (!icons.has("xplat-clock")) icons.set("xplat-clock", { svg: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" });
+if (!icons.has("xplat-check")) icons.set("xplat-check", { svg: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" });
+if (!icons.has("xplat-check-double")) icons.set("xplat-check-double", { svg: "M0.41 13.41L6 19l1.41-1.42L1.83 12zM22.24 5.58L11.66 16.17 7.5 12l-1.43 1.41 5.59 5.59L23.66 7zM18 7l-1.41-1.42-6.35 6.35 1.41 1.41L18 7z" });
+if (!icons.has("xplat-error")) icons.set("xplat-error", { svg: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" });
+if (!icons.has("xplat-warning")) icons.set("xplat-warning", { svg: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" });
+if (!icons.has("xplat-wrench")) icons.set("xplat-wrench", { svg: "M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" });
+if (!icons.has("xplat-mic")) icons.set("xplat-mic", { svg: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" });
 //#endregion
 export { getIcon, registerIcon, registerIcons };

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 };