@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/web/View.web.tsrx.js

@@ -0,0 +1,250 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { usePan } from "./pan.web.tsrx.js";
+import { __s, bagOf, clone, hookSlots, snapshotSpread, template, useRef, withSlot } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/View.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _rm$1 = [
+	"s",
+	"o",
+	"n"
+];
+var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	withSlot(_h$1, usePan, el, props.onPan);
+	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, _m8, _m9, _m10, _m11, _m12, _m13, _m14;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = (e) => {
+			el.current = e;
+			if (e) {
+				applyEscapeProps(e, props);
+				props.bind?.(e);
+			}
+		};
+		_m2 = ["vx-view", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, props.style));
+		_m4 = props.accessibilityRole;
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = _root;
+		_m14 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"ref",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			]
+		], "b:5d1942f5", true);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: null,
+			q: void 0
+		});
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = (e) => {
+				el.current = e;
+				if (e) {
+					applyEscapeProps(e, props);
+					props.bind?.(e);
+				}
+			};
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-view", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, props.style));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		_b.o = bindSignalHostPropSources(__s, _b.o, _b.n, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"ref",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			]
+		], "b:5d1942f5", true);
+	}
+	_b.r = bindSignalChild(__s, _b.r, 1, _b.n, props.children, "b:c8fab23f", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { View };

package/dist/web/WebView.web.tsrx.js

@@ -0,0 +1,235 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { __s, bag16, clone, hookSlots, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
+//#region src/WebView.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<iframe></iframe>");
+var _rm$1 = [
+	"s",
+	"n",
+	"m"
+];
+var _hs$ = /* @__PURE__ */ hookSlots(1);
+var DEFAULT_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals";
+var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const handle = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (el) => ({
+		reload: () => {
+			try {
+				el.contentWindow.location.reload();
+			} catch {
+				if (el.src) el.src = el.src;
+			}
+		},
+		goBack: () => el.contentWindow?.history.back(),
+		goForward: () => el.contentWindow?.history.forward(),
+		stopLoading: () => {
+			try {
+				el.contentWindow?.stop();
+			} catch {}
+		},
+		native: el
+	}));
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13;
+		const _root = clone(_t$0);
+		_m0 = (el) => {
+			if (!el) return;
+			applyEscapeProps(el, props);
+			props.bind?.(handle(el));
+		};
+		_m1 = props.id;
+		_m2 = ["vx-webview", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props));
+		_m4 = props.html;
+		_m5 = props.html === void 0 ? props.src : void 0;
+		_m6 = props.sandbox === false ? void 0 : props.sandbox ?? DEFAULT_SANDBOX;
+		_m7 = props.scrollEnabled === false ? "no" : void 0;
+		_m8 = props.accessibilityLabel;
+		_m9 = props.accessible === false ? true : void 0;
+		_m10 = (e) => props.onLoad?.({ url: props.html === void 0 ? e.currentTarget?.src : void 0 });
+		_m11 = (e) => props.onError?.({
+			url: props.html === void 0 ? e.currentTarget?.src : void 0,
+			error: "iframe failed to load"
+		});
+		_m12 = _root;
+		_m13 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"srcDoc",
+				_m4
+			],
+			[
+				false,
+				"src",
+				_m5
+			],
+			[
+				false,
+				"sandbox",
+				_m6
+			],
+			[
+				false,
+				"scrolling",
+				_m7
+			],
+			[
+				false,
+				"title",
+				_m8
+			],
+			[
+				false,
+				"aria-hidden",
+				_m9
+			],
+			[
+				false,
+				"onLoad",
+				_m10
+			],
+			[
+				false,
+				"onError",
+				_m11
+			]
+		], "b:adbe378c", false);
+		_b = bag16(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = (el) => {
+				if (!el) return;
+				applyEscapeProps(el, props);
+				props.bind?.(handle(el));
+			};
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-webview", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props));
+		{
+			const _v = props.html;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.html === void 0 ? props.src : void 0;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.sandbox === false ? void 0 : props.sandbox ?? DEFAULT_SANDBOX;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.scrollEnabled === false ? "no" : void 0;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = (e) => props.onLoad?.({ url: props.html === void 0 ? e.currentTarget?.src : void 0 });
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = (e) => props.onError?.({
+				url: props.html === void 0 ? e.currentTarget?.src : void 0,
+				error: "iframe failed to load"
+			});
+			if (_b.l !== _v) _b.l = _v;
+		}
+		_b.n = bindSignalHostPropSources(__s, _b.n, _b.m, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"srcDoc",
+				_b.e
+			],
+			[
+				false,
+				"src",
+				_b.f
+			],
+			[
+				false,
+				"sandbox",
+				_b.g
+			],
+			[
+				false,
+				"scrolling",
+				_b.h
+			],
+			[
+				false,
+				"title",
+				_b.i
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.j
+			],
+			[
+				false,
+				"onLoad",
+				_b.k
+			],
+			[
+				false,
+				"onError",
+				_b.l
+			]
+		], "b:adbe378c", false);
+	}
+	_b.q = bindSignalChild(__s, _b.q, 1, _b.m, Object.prototype.propertyIsEnumerable.call(_b.n.resolved, "children") ? _b.n.resolved.children : void 0, "b:adbe378c", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { WebView };

package/dist/web/aliases.web.tsrx.js

@@ -0,0 +1,24 @@
+import { Select } from "./Select.web.tsrx.js";
+import { createScopedValue } from "octane";
+import { createElementFromConfig } from "octane/internal/client";
+//#region src/aliases.web.tsrx
+var SelectMenu = function SelectMenu(props, __s, __extra) {
+	return createScopedValue(() => createElementFromConfig("c:bda11851", Select, {
+		...props,
+		multiple: true
+	})) ?? null;
+};
+var Combobox = function Combobox(props, __s, __extra) {
+	return createScopedValue(() => createElementFromConfig("c:4a0931a9", Select, {
+		...props,
+		searchable: true
+	})) ?? null;
+};
+var InputMenu = function InputMenu(props, __s, __extra) {
+	return createScopedValue(() => createElementFromConfig("c:4bbd50ae", Select, {
+		...props,
+		searchable: true
+	})) ?? null;
+};
+//#endregion
+export { Combobox, InputMenu, SelectMenu };

package/dist/web/{ui35.js → anim.web.tsrx.js}

@@ -1,3 +1,4 @@
+import { writeTransformProp } from "./transform.web.js";
 import { hookSlots, useRef } from "octane";
 //#region src/anim.web.tsrx
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
@@ -7,7 +8,7 @@ function createAnimated(initial, prop) {
 	let raf = 0;
 	const apply = (v) => {
 		current = v;
-		if (el) el.style.transform = `translateX(${v}px)`;
+		if (el) writeTransformProp(el, prop, v);
 	};
 	const run = (step) => {
 		cancelAnimationFrame(raf);
@@ -26,7 +27,7 @@ function createAnimated(initial, prop) {
 		},
 		bind(e) {
 			el = e;
-			if (el) el.style.transform = `translateX(${current}px)`;
+			if (el) writeTransformProp(el, prop, current);
 		},
 		to(target, opts) {
 			const dur = opts?.duration ?? 300;

package/dist/web/child-array.js

@@ -0,0 +1,15 @@
+//#region src/child-array.ts
+/** Normalize a JSX children value to a flat array — children may be a
+*  single node, an array, or nested arrays from `.map` calls. */
+function toChildArray(children) {
+	const out = [];
+	const walk = (node) => {
+		if (node == null || node === false) return;
+		if (Array.isArray(node)) for (const child of node) walk(child);
+		else out.push(node);
+	};
+	walk(children);
+	return out;
+}
+//#endregion
+export { toChildArray };

package/dist/web/icons.js

@@ -0,0 +1,25 @@
+//#region src/icons.ts
+/**
+* App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
+* markup string). `src` can carry an image or an SVG source; the leaves only
+* infer SVG from inline markup, SVG data URIs, and `.svg` paths/URLs. Native
+* `font` glyphs render only when the app ships and registers that font.
+*/
+var icons = /* @__PURE__ */ new Map();
+function registerIcon(name, glyph) {
+	icons.set(name, glyph);
+}
+function registerIcons(record) {
+	for (const [name, glyph] of Object.entries(record)) icons.set(name, glyph);
+}
+function getIcon(name) {
+	return icons.get(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-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-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" });
+//#endregion
+export { getIcon, registerIcon, registerIcons };

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "09d40cb6-77c8-4f47-9fd0-53989e8bea06",
+  "buildId": "713b80db-403f-439c-98d0-7aed298c257f",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/pan.web.tsrx.js

@@ -0,0 +1,66 @@
+import { hookSlots, useEffect } from "octane";
+//#region src/pan.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function usePan(el, cb) {
+	useEffect(() => {
+		const node = el.current;
+		if (!node || !cb) return;
+		let sx = 0, sy = 0, active = false, last = 0, lx = 0, t0 = 0;
+		const emit = (e, state) => {
+			const now = performance.now();
+			const dt = Math.max(now - t0, 1) / 1e3;
+			const vx = (e.clientX - lx) / dt;
+			const vy = (e.clientY - last) / dt;
+			lx = e.clientX;
+			last = e.clientY;
+			t0 = now;
+			cb({
+				x: e.clientX - sx,
+				y: e.clientY - sy,
+				dx: e.clientX - sx,
+				dy: e.clientY - sy,
+				vx,
+				vy,
+				state,
+				target: node
+			});
+		};
+		const down = (e) => {
+			active = true;
+			sx = e.clientX;
+			sy = e.clientY;
+			t0 = performance.now();
+			lx = sx;
+			last = sy;
+			node.setPointerCapture?.(e.pointerId);
+			emit(e, "began");
+		};
+		const move = (e) => {
+			if (active) emit(e, "moved");
+		};
+		const up = (e) => {
+			if (active) {
+				active = false;
+				emit(e, "ended");
+			}
+		};
+		const cancel = (e) => {
+			if (active) {
+				active = false;
+				emit(e, "cancelled");
+			}
+		};
+		node.addEventListener("pointerdown", down);
+		node.addEventListener("pointermove", move);
+		node.addEventListener("pointerup", up);
+		node.addEventListener("pointercancel", cancel);
+		return () => {
+			node.removeEventListener("pointerdown", down);
+			node.removeEventListener("pointermove", move);
+			node.removeEventListener("pointerup", up);
+			node.removeEventListener("pointercancel", cancel);
+		};
+	}, [el, cb], _h$0);
+}
+//#endregion
+export { usePan };

package/dist/web/platform.web.js

@@ -0,0 +1,9 @@
+//#region src/platform.web.ts
+/** Compile-time platform flag — `false` in every web build. Prefer
+*  `.web`/`.native` leaves for real divergence; `isNative` covers the
+*  render-time cases (conditional JSX, prop selection) where a whole
+*  leaf file is heavier than the difference. Bundlers constant-fold it,
+*  so `!isNative` branches tree-shake out of web output. */
+var isNative = false;
+//#endregion
+export { isNative };

package/dist/web/refresh-metrics.js

@@ -0,0 +1,9 @@
+//#region src/refresh-metrics.ts
+/** Finger-travel → content displacement. iOS rubber-band applies ~0.5
+*  resistance at small pulls; web/Android drive the same ratio so the
+*  affordance reads identically across targets. */
+function dampenPull(dy) {
+	return dy * .5;
+}
+//#endregion
+export { dampenPull };