@octane-xplat/ui 0.10.0 → 0.11.0

package/dist/native/image-content.js

@@ -0,0 +1,206 @@
+//#region src/image-content.ts
+/** Shared `contentFit`/`contentPosition` + multi-source math for `Image` —
+*  pure functions used by every leaf (docs/notes/expo-image-study.md L7/L8).
+*  Semantics mirror CSS `object-fit`/`object-position`, which is also
+*  expo-image's contract: the leaves compute the drawn-content rect
+*  themselves instead of delegating to platform scaleType/contentMode,
+*  so all platforms get the same answer.
+*
+*  The default fit is 'cover' everywhere (the expo/RN default). Today's
+*  platform defaults disagree — web <img> is 'fill' and NS stretch is
+*  'aspectFit' — so an un-propped Image was silently divergent. */
+var DEFAULT_CONTENT_FIT = "cover";
+function resolveContentFit(fit) {
+	return fit ?? "cover";
+}
+/** expo-image's keyword shorthands; the object form positions relative to
+*  any corner pair ({top,left}, {top,right}, {bottom,left}, {bottom,right}). */
+var POSITION_KEYWORDS = {
+	center: {
+		top: "50%",
+		left: "50%"
+	},
+	top: {
+		top: 0,
+		left: "50%"
+	},
+	right: {
+		top: "50%",
+		right: 0
+	},
+	bottom: {
+		bottom: 0,
+		left: "50%"
+	},
+	left: {
+		top: "50%",
+		left: 0
+	},
+	"top center": {
+		top: 0,
+		left: "50%"
+	},
+	"top right": {
+		top: 0,
+		right: 0
+	},
+	"top left": {
+		top: 0,
+		left: 0
+	},
+	"right center": {
+		top: "50%",
+		right: 0
+	},
+	"right top": {
+		top: 0,
+		right: 0
+	},
+	"right bottom": {
+		bottom: 0,
+		right: 0
+	},
+	"bottom center": {
+		bottom: 0,
+		left: "50%"
+	},
+	"bottom right": {
+		bottom: 0,
+		right: 0
+	},
+	"bottom left": {
+		bottom: 0,
+		left: 0
+	},
+	"left center": {
+		top: "50%",
+		left: 0
+	},
+	"left top": {
+		top: 0,
+		left: 0
+	},
+	"left bottom": {
+		bottom: 0,
+		left: 0
+	}
+};
+function resolveContentPosition(position) {
+	if (typeof position === "string") return POSITION_KEYWORDS[position] ?? POSITION_KEYWORDS.center;
+	return position ?? POSITION_KEYWORDS.center;
+}
+function parseAxisValue(value) {
+	if (value == null) return null;
+	if (typeof value === "number") return { dips: value };
+	const text = String(value).trim();
+	if (text === "center") return { percent: 50 };
+	if (text.endsWith("%")) {
+		const parsed = Number.parseFloat(text);
+		return Number.isNaN(parsed) ? null : { percent: parsed };
+	}
+	const parsed = Number.parseFloat(text);
+	return Number.isNaN(parsed) ? null : { dips: parsed };
+}
+/** Offset of the drawn content's start edge inside the view along one axis.
+*  expo-image `calcTranslation`: percentages run over the free space
+*  (view − content), absolute dips measure from the named edge, and the
+*  reverse edge (right/bottom) counts back from the far side. */
+function contentAxisOffset(viewSize, contentSize, start, end) {
+	const from = parseAxisValue(start);
+	if (from) return "percent" in from ? from.percent / 100 * (viewSize - contentSize) : from.dips;
+	const to = parseAxisValue(end);
+	if (to) return "percent" in to ? (1 - to.percent / 100) * (viewSize - contentSize) : viewSize - contentSize - to.dips;
+	return (viewSize - contentSize) / 2;
+}
+function centeredAxis(start, end) {
+	const from = parseAxisValue(start);
+	if (from) return "percent" in from && from.percent === 50;
+	const to = parseAxisValue(end);
+	if (to) return "percent" in to && to.percent === 50;
+	return true;
+}
+function isCenteredContentPosition(position) {
+	return centeredAxis(position.left, position.right) && centeredAxis(position.top, position.bottom);
+}
+/** The rect the bitmap occupies inside the view box, in the same units the
+*  caller measures with (native: dips; web: CSS px via object-fit anyway —
+*  only the native leaf calls this). Every length unit is dips except the
+*  intrinsic size, which the leaf must supply in dips too. */
+function contentRect(fit, position, viewWidth, viewHeight, imageWidth, imageHeight) {
+	let width;
+	let height;
+	switch (fit) {
+		case "fill":
+			width = viewWidth;
+			height = viewHeight;
+			break;
+		case "cover": {
+			const scale = Math.max(viewWidth / imageWidth, viewHeight / imageHeight);
+			width = imageWidth * scale;
+			height = imageHeight * scale;
+			break;
+		}
+		case "scale-down": {
+			const scale = Math.min(1, Math.min(viewWidth / imageWidth, viewHeight / imageHeight));
+			width = imageWidth * scale;
+			height = imageHeight * scale;
+			break;
+		}
+		case "none":
+			width = imageWidth;
+			height = imageHeight;
+			break;
+		default: {
+			const scale = Math.min(viewWidth / imageWidth, viewHeight / imageHeight);
+			width = imageWidth * scale;
+			height = imageHeight * scale;
+		}
+	}
+	return {
+		x: contentAxisOffset(viewWidth, width, position.left, position.right),
+		y: contentAxisOffset(viewHeight, height, position.top, position.bottom),
+		width,
+		height
+	};
+}
+/** True when no platform stretch/scaleType can express the request and the
+*  leaf must measure + lay out the image itself: 'none' (iOS maps NS
+*  stretch='none' to TopLeft, not CSS centered), 'scale-down' (needs the
+*  intrinsic-vs-view compare), or any non-center position. 'fill' is
+*  exempt — its rect is always the whole box, so position can't matter. */
+function needsContentRect(fit, position) {
+	if (fit === "none" || fit === "scale-down") return true;
+	return fit !== "fill" && !isCenteredContentPosition(position);
+}
+/** NS `stretch` for the fast path — only reached for fits the platform
+*  vocabulary expresses identically (contain/cover/fill centered). */
+function contentFitToStretch(fit) {
+	switch (fit) {
+		case "contain": return "aspectFit";
+		case "fill": return "fill";
+		default: return "aspectFill";
+	}
+}
+/** L8 — expo `getBestSource`: the source whose declared pixel count
+*  (`width·height·scale²`, dips × density) is closest to the view's pixel
+*  count. Needs a real measured size; one source or no size picks nothing
+*  to decide. Unsized sources score worst and are skipped when any sized
+*  candidate exists. */
+function bestImageSource(sources, viewWidth, viewHeight, screenScale) {
+	if (sources.length === 0 || viewWidth <= 0 || viewHeight <= 0) return null;
+	if (sources.length === 1) return sources[0];
+	const target = viewWidth * viewHeight * screenScale * screenScale;
+	let best = null;
+	let bestFit = Infinity;
+	for (const source of sources) {
+		const pixelCount = (source.width ?? 0) * (source.height ?? 0) * (source.scale ?? 1) ** 2;
+		const fit = Math.abs(1 - pixelCount / target);
+		if (fit < bestFit) {
+			best = source;
+			bestFit = fit;
+		}
+	}
+	return best;
+}
+//#endregion
+export { DEFAULT_CONTENT_FIT, bestImageSource, contentAxisOffset, contentFitToStretch, contentRect, isCenteredContentPosition, needsContentRect, resolveContentFit, resolveContentPosition };

package/dist/native/image-sizing.js

@@ -0,0 +1,102 @@
+//#region src/image-sizing.ts
+/** View-sized decode for the native <image> leaf.
+*
+*  NS Android reads decodeWidth/decodeHeight only when `src` is written —
+*  `srcProperty.setNative` → `_createImageSourceFromSrc` →
+*  `imageView.setUri(value, decodeWidth, decodeHeight, …)` — and the
+*  properties default to 0 → `Fetcher.calculateInSampleSize` maps
+*  reqWidth ≤ 0 to the source dims → inSampleSize 1 → a full-resolution
+*  decode (~48 MB ARGB_8888 per 12 MP photo; docs/notes/expo-image-study.md
+*  L1). So the leaf holds `src` until the view's first real layout, writes
+*  the decode dims in device pixels, then assigns src. A later resize
+*  re-issues at the new size — the same reload expo-image runs from
+*  onSizeChanged — under the same gate: 'fill'/'none' stretches keep the
+*  existing decode because a resize can't change the ideal sample there
+*  ('none' additionally never downsamples — its contract is source
+*  pixels). iOS ignores the decode dims entirely; the deferred assignment
+*  is behavior-identical there, so one path serves both platforms.
+*
+*  The ref callback re-fires on every render (identity change), so
+*  `update` must be idempotent: same view + same src + same size is a
+*  no-op. Null ref calls on detach are ignored by the leaf — re-attaching
+*  the same view must not lose `applied`, or each render would re-issue
+*  setUri. The dead-view listener left behind on real unmount is a
+*  self-contained cycle the GC collects with the component record.
+*
+*  `afterIssue` runs right after every `src` write — including a same-src
+*  resize re-issue mid-load, which fires no `isLoadingChange` (isLoading is
+*  already true). The Image placeholder hooks this to re-apply its bitmap
+*  after the write has nulled `imageSource` (L5, decision #103). */
+function createSizedImageBinding(options = {}) {
+	let view = null;
+	let listening = false;
+	let pendingSrc;
+	let pendingStretch;
+	let appliedSrc;
+	let applied = false;
+	let width = 0;
+	let height = 0;
+	const issue = (next) => {
+		const downscale = (pendingStretch ?? view.stretch) !== "none";
+		view.decodeWidth = {
+			value: downscale ? width : 0,
+			unit: "px"
+		};
+		view.decodeHeight = {
+			value: downscale ? height : 0,
+			unit: "px"
+		};
+		view.src = next;
+		appliedSrc = next;
+		applied = true;
+		options.afterIssue?.(view);
+	};
+	const evaluate = () => {
+		if (!view) return;
+		const measuredWidth = view.getMeasuredWidth?.() ?? 0;
+		const measuredHeight = view.getMeasuredHeight?.() ?? 0;
+		if (measuredWidth <= 0 || measuredHeight <= 0) return;
+		if (!applied || pendingSrc !== appliedSrc) {
+			width = measuredWidth;
+			height = measuredHeight;
+			issue(pendingSrc);
+			return;
+		}
+		if (measuredWidth === width && measuredHeight === height) return;
+		const stretch = pendingStretch ?? view.stretch;
+		if (stretch === "fill" || stretch === "none") return;
+		width = measuredWidth;
+		height = measuredHeight;
+		issue(appliedSrc);
+	};
+	const onLayout = () => evaluate();
+	return {
+		/** (Re)bind source → view; issues once the view reports a real layout.
+		*  `stretchForDecode` overrides view.stretch for the decode/reload
+		*  gates — see `issue`. */
+		update(next, source, stretchForDecode) {
+			if (next !== view) {
+				view?.off?.("layoutChanged", onLayout);
+				view = next;
+				listening = false;
+				applied = false;
+				appliedSrc = void 0;
+			}
+			pendingSrc = source;
+			pendingStretch = stretchForDecode;
+			if (view && !listening && typeof view.on === "function") {
+				view.on("layoutChanged", onLayout);
+				listening = true;
+			}
+			evaluate();
+		},
+		dispose() {
+			view?.off?.("layoutChanged", onLayout);
+			view = null;
+			listening = false;
+			applied = false;
+		}
+	};
+}
+//#endregion
+export { createSizedImageBinding };

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "f7051bda-1e6f-4589-a0af-fabe255e93f2",
+  "buildId": "34e7eb98-53f0-4d28-9246-10c4851ef1b3",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/vendor/ui-svg/index.android.js

@@ -30,7 +30,7 @@ function getSVG(src) {
 var SVGExternalFileResolver = class extends com.caverock.androidsvg.SVGExternalFileResolver {
 	resolveFont(fontFamily, fontWeight, fontStyle) {
 		if (fontFamily) fontFamily = fontFamily.replace(/\\\//, "/");
-		return new Font(fontFamily, void 0, fontStyle.toLowerCase(), fontWeight + "").getAndroidTypeface();
+		return Font.default.withFontFamily(fontFamily).withFontStyle(fontStyle.toLowerCase()).withFontWeight(fontWeight + "").getAndroidTypeface();
 	}
 	resolveImage(filename) {
 		let bitmap = null;

package/dist/web/Image.web.tsrx.js

@@ -1,28 +1,76 @@
 import { applyEscapeProps } from "./escape-props.web.js";
-import { layoutChildProps } from "./layout-child.web.js";
-import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { layoutChildProps, normStyle } from "./layout-child.web.js";
+import { imageSrcSet, objectPositionCSSValue, resolveContentFit, resolveContentPosition } from "./image-content.js";
+import { hashToPngBase64 } from "./hash-image.js";
+import { __s, bag11, clone, hookSlots, snapshotSpread, template, useLayoutEffect, useRef } from "octane";
 import { bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
 //#region src/Image.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<img/>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
 var _rm$0 = [
 	"s",
-	"h",
-	"g"
+	"k",
+	"j"
 ];
+function placeholderUrl(placeholder) {
+	const png = hashToPngBase64(placeholder);
+	return png ? `data:image/png;base64,${png}` : placeholder;
+}
 var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
+	const imgRef = useRef(null, _hs$ + 0);
+	const sources = Array.isArray(props.src) ? props.src : null;
+	const selected = sources ? imageSrcSet(sources) : {
+		src: props.src,
+		srcSet: void 0
+	};
+	useLayoutEffect(() => {
+		const img = imgRef.current;
+		if (!img || !props.placeholder || img.complete) return;
+		const placeholder = placeholderUrl(props.placeholder);
+		const { src: final, srcSet: finalSrcSet } = selected;
+		const warm = document.createElement("img");
+		warm.src = final;
+		if (finalSrcSet) warm.srcset = finalSrcSet;
+		const swap = () => {
+			img.src = final;
+			if (finalSrcSet) img.srcset = finalSrcSet;
+		};
+		img.addEventListener("load", swap, { once: true });
+		img.addEventListener("error", swap, { once: true });
+		if (finalSrcSet) img.srcset = "";
+		img.src = placeholder;
+		return () => {
+			img.removeEventListener("load", swap);
+			img.removeEventListener("error", swap);
+		};
+	}, [props.src, props.placeholder], _hs$ + 1);
+	const style = {
+		objectFit: "cover",
+		objectPosition: "50% 50%",
+		...normStyle(props.style),
+		...props.contentFit !== void 0 ? { objectFit: resolveContentFit(props.contentFit) } : null,
+		...props.contentPosition !== void 0 ? { objectPosition: objectPositionCSSValue(resolveContentPosition(props.contentPosition)) } : null
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10;
 		const _root = clone(_t$0);
-		_m0 = (e) => applyEscapeProps(e, props);
+		_m0 = (e) => {
+			imgRef.current = e;
+			applyEscapeProps(e, props);
+		};
 		_m1 = props.id;
 		_m2 = props.className;
 		_m3 = snapshotSpread(layoutChildProps(props));
-		_m4 = props.src;
-		_m5 = props.alt;
-		_m6 = _root;
-		_m7 = bindSignalHostPropSources(__s, void 0, _root, [
+		_m4 = selected.src;
+		_m5 = selected.srcSet;
+		_m6 = props.decoding ?? "async";
+		_m7 = props.alt;
+		_m8 = style;
+		_m9 = _root;
+		_m10 = bindSignalHostPropSources(__s, void 0, _root, [
 			[
 				false,
 				"ref",
@@ -46,15 +94,33 @@ var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 			],
 			[
 				false,
-				"alt",
+				"srcSet",
 				_m5
+			],
+			[
+				false,
+				"decoding",
+				_m6
+			],
+			[
+				false,
+				"alt",
+				_m7
+			],
+			[
+				false,
+				"style",
+				_m8
 			]
-		], "b:ed5f7791", false);
-		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7);
+		], "b:2396612c", false);
+		_b = bag11(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10);
 		__s.refFields = _rm$0;
 	} else {
 		{
-			const _v = (e) => applyEscapeProps(e, props);
+			const _v = (e) => {
+				imgRef.current = e;
+				applyEscapeProps(e, props);
+			};
 			if (_b.a !== _v) _b.a = _v;
 		}
 		{
@@ -67,14 +133,26 @@ var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 		}
 		_b.d = snapshotSpread(layoutChildProps(props));
 		{
-			const _v = props.src;
+			const _v = selected.src;
 			if (_b.e !== _v) _b.e = _v;
 		}
 		{
-			const _v = props.alt;
+			const _v = selected.srcSet;
 			if (_b.f !== _v) _b.f = _v;
 		}
-		_b.h = bindSignalHostPropSources(__s, _b.h, _b.g, [
+		{
+			const _v = props.decoding ?? "async";
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.alt;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = style;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		_b.k = bindSignalHostPropSources(__s, _b.k, _b.j, [
 			[
 				false,
 				"ref",
@@ -98,10 +176,25 @@ var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 			],
 			[
 				false,
-				"alt",
+				"srcSet",
 				_b.f
+			],
+			[
+				false,
+				"decoding",
+				_b.g
+			],
+			[
+				false,
+				"alt",
+				_b.h
+			],
+			[
+				false,
+				"style",
+				_b.i
 			]
-		], "b:ed5f7791", false);
+		], "b:2396612c", false);
 	}
 });
 //#endregion