@octane-xplat/ui 0.10.0 → 0.11.0

package/dist/web/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/web/image-content.js

@@ -0,0 +1,133 @@
+//#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 ensureWebUnits(value) {
+	const text = String(value).trim();
+	return text.endsWith("%") ? text : `${text}px`;
+}
+/** Browser `object-position` for a resolved position — mirrors expo-image
+*  web's `getObjectPositionFromContentPositionObject`. */
+function objectPositionCSSValue(position) {
+	const resolved = { ...position };
+	if (resolved.top == null && resolved.bottom == null) resolved.top = "50%";
+	if (resolved.left == null && resolved.right == null) resolved.left = "50%";
+	return [
+		"top",
+		"bottom",
+		"left",
+		"right"
+	].map((edge) => resolved[edge] != null ? `${edge} ${ensureWebUnits(resolved[edge])}` : "").filter((part) => part !== "").join(" ") || "50% 50%";
+}
+/** Browser `srcset` candidates for a source array: `w` descriptors (real
+*  file px = width·scale) when every source is sized, `x` descriptors when
+*  every source only carries density. `src` falls back to the largest
+*  declared pixel count — guaranteed coverage where srcset is ignored. */
+function imageSrcSet(sources) {
+	if (sources.length === 0) return { src: "" };
+	const everyWidth = sources.every((source) => typeof source.width === "number" && source.width > 0);
+	const everyScale = !everyWidth && sources.every((source) => typeof source.scale === "number" && source.scale > 0);
+	const srcSet = everyWidth ? sources.map((source) => `${source.uri} ${Math.round(source.width * (source.scale ?? 1))}w`).join(", ") : everyScale ? sources.map((source) => `${source.uri} ${source.scale}x`).join(", ") : void 0;
+	let fallback = sources[0];
+	let bestCount = -Infinity;
+	for (const source of sources) {
+		const count = (source.width ?? 0) * (source.height ?? 0) * (source.scale ?? 1) ** 2;
+		if (count > bestCount) {
+			bestCount = count;
+			fallback = source;
+		}
+	}
+	return {
+		src: fallback.uri,
+		srcSet
+	};
+}
+//#endregion
+export { DEFAULT_CONTENT_FIT, imageSrcSet, objectPositionCSSValue, resolveContentFit, resolveContentPosition };

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "1f8903f8-0ddb-4fe9-904d-a4c7652f5a67",
+  "buildId": "1c2dd44a-dfca-4434-aea5-573ac6a80e5f",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Cross-platform UI for Octane xplat — shared primitives, stacks, routes and theming across web (DOM), iOS and Android (NativeScript)",
   "keywords": [
     "android",
@@ -32,7 +32,7 @@
   "exports": {
     ".": {
       "macos": {
-        "types": "./types/index.macos.d.ts",
+        "types": "./types/generated/index.macos.d.ts",
         "default": "./src/index.macos.ts"
       },
       "web": {
@@ -70,6 +70,7 @@
     "@nativescript-community/ui-drawer": "0.1.32",
     "@nativescript/core": "9.1.2",
     "@nativescript/types": "9.0.0",
+    "@octane-xplat/macos-renderer": "0.11.0",
     "@octanejs/vite-plugin": "0.1.61",
     "@tsrx/typescript-plugin": "0.4.11",
     "jsdom": "30.1.1",

package/src/Image.macos.tsrx

@@ -4,13 +4,22 @@ import { appKitImageSource } from './svg-image.macos'
 import type { ImageProps } from './props'
 
 export function Image(props: ImageProps) @{
-	const src = useMemo(() => appKitImageSource(props.src), [props.src])
+	const srcString = (Array.isArray(props.src) ? props.src[0]?.uri : props.src) ?? ''
+	const src = useMemo(() => appKitImageSource(srcString), [srcString])
+	// contentFit → style.objectFit (the renderer maps contain/scale-down/
+	// fill/none; 'cover' degrades to scale-down — AppKit has no cover
+	// scaling mode). contentPosition is unimplemented on this leaf.
+	// `decoding` is ignored — AppKit image loads are synchronous.
+	const style = {
+		objectFit: props.contentFit ?? 'cover',
+		...props.style,
+	}
 
 	<image
 		id={props.id}
 		src={src}
 		className={props.className}
-		style={props.style}
+		{style}
 		accessibilityLabel={props.alt ?? ''}
 	/>
 }