@octane-xplat/ui 0.5.0 → 0.6.0

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/{ui36.js → anim.web.tsrx.js}

@@ -1,46 +1,14 @@
+import { writeTransformProp } from "./transform.web.js";
 import { hookSlots, useRef } from "octane";
 //#region src/anim.web.tsrx
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-var transformProps = {
-	translateX: (v) => `translateX(${v}px)`,
-	translateY: (v) => `translateY(${v}px)`,
-	translateZ: (v) => `translateZ(${v}px)`,
-	scale: (v) => `scale(${v})`,
-	scaleX: (v) => `scaleX(${v})`,
-	scaleY: (v) => `scaleY(${v})`,
-	rotate: (v) => `rotate(${v}deg)`,
-	rotateX: (v) => `rotateX(${v}deg)`,
-	rotateY: (v) => `rotateY(${v}deg)`,
-	skewX: (v) => `skewX(${v}deg)`,
-	skewY: (v) => `skewY(${v}deg)`
-};
-var transformStates = /* @__PURE__ */ new WeakMap();
-function writeAnimatedValue(el, prop, value) {
-	if (Object.prototype.hasOwnProperty.call(transformProps, prop)) {
-		const transformProp = prop;
-		let state = transformStates.get(el);
-		if (!state) {
-			const computed = getComputedStyle(el).transform;
-			state = {
-				base: computed === "none" ? "" : computed,
-				values: /* @__PURE__ */ new Map()
-			};
-			transformStates.set(el, state);
-		}
-		state.values.set(transformProp, value);
-		const transforms = Object.entries(transformProps).filter(([name]) => state.values.has(name)).map(([name, toTransform]) => toTransform(state.values.get(name)));
-		el.style.transform = [state.base, ...transforms].filter(Boolean).join(" ");
-		return;
-	}
-	el.style[prop] = value;
-}
 function createAnimated(initial, prop) {
 	let el = null;
 	let current = initial;
 	let raf = 0;
 	const apply = (v) => {
 		current = v;
-		if (el) writeAnimatedValue(el, prop, v);
+		if (el) writeTransformProp(el, prop, v);
 	};
 	const run = (step) => {
 		cancelAnimationFrame(raf);
@@ -59,7 +27,7 @@ function createAnimated(initial, prop) {
 		},
 		bind(e) {
 			el = e;
-			if (el) writeAnimatedValue(el, prop, current);
+			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": "bc136ba4-ca23-4dbc-99a2-c7175a4714db",
+  "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 };

package/dist/web/refresh.web.js

@@ -0,0 +1,133 @@
+import { setTranslate } from "./translate.web.js";
+import { dampenPull } from "./refresh-metrics.js";
+//#region src/refresh.web.ts
+var DOCK_ANIM_MS = 180;
+/** Pointer/touch-driven pull-to-refresh for the DOM leaf — the web has no
+*  native overscroll, so drag distance translates the scroller inside the
+*  clipped wrapper while the self-drawn indicator slides into the gap.
+*  `touchmove` must be non-passive: `preventDefault` is what keeps the
+*  browser from taking the gesture as a scroll (or Chrome's own
+*  pull-to-refresh on Android). Mouse drags ride the pointer events. */
+function createPullToRefresh(host) {
+	const { scroller, indicator, cfg } = host;
+	if (!scroller || !indicator) return {
+		sync: () => {},
+		detach: () => {}
+	};
+	let pulling = false;
+	let y0 = 0;
+	let pull = 0;
+	let docked = false;
+	let grace = null;
+	const threshold = () => cfg.current.threshold ?? 64;
+	/** Resting gap: the strip stays docked while the gesture docked it OR
+	*  the controlled `refreshing` prop holds it open. */
+	const held = () => docked || !!cfg.current.refreshing;
+	const applyReveal = (reveal) => {
+		setTranslate(indicator, 0, reveal - 64);
+		setTranslate(scroller, 0, reveal);
+	};
+	const settle = (reveal) => {
+		for (const el of [scroller, indicator]) el.style.transition = `transform ${DOCK_ANIM_MS}ms ease-out`;
+		applyReveal(reveal);
+		setTimeout(() => {
+			for (const el of [scroller, indicator]) el.style.transition = "";
+		}, DOCK_ANIM_MS);
+	};
+	const dock = () => {
+		docked = true;
+		pull = 0;
+		settle(64);
+	};
+	const collapse = () => {
+		docked = false;
+		pull = 0;
+		settle(0);
+	};
+	/** `pull` is drag distance beyond the held baseline — a release only
+	*  fires `onRefresh` when the user actually pulled (a resting release
+	*  inside the dock re-fires nothing). */
+	const release = () => {
+		pulling = false;
+		const reveal = pull + (held() ? 64 : 0);
+		if (pull > 0 && reveal >= threshold()) {
+			cfg.current.onRefresh?.();
+			dock();
+			if (grace) clearTimeout(grace);
+			grace = setTimeout(() => {
+				if (!cfg.current.refreshing) collapse();
+			}, 350);
+		} else if (held()) {
+			docked = true;
+			pull = 0;
+			settle(64);
+		} else collapse();
+	};
+	const begin = (y, prevent) => {
+		if (scroller.scrollTop > 0) return;
+		pulling = true;
+		y0 = y;
+		pull = 0;
+		prevent?.();
+	};
+	const move = (y, prevent) => {
+		if (!pulling) return;
+		const dy = y - y0;
+		if (dy <= 0 || scroller.scrollTop > 0) {
+			pulling = false;
+			pull = 0;
+			applyReveal(held() ? 64 : 0);
+			return;
+		}
+		prevent();
+		pull = dampenPull(dy);
+		applyReveal(pull + (held() ? 64 : 0));
+	};
+	const end = () => {
+		if (pulling) release();
+	};
+	const touchStart = (e) => begin(e.touches[0].clientY);
+	const touchMove = (e) => move(e.touches[0].clientY, () => e.preventDefault());
+	const touchEnd = () => end();
+	const pointerDown = (e) => {
+		if (e.pointerType === "mouse" && e.button === 0) begin(e.clientY, () => e.preventDefault());
+	};
+	const pointerMove = (e) => {
+		if (e.pointerType === "mouse") move(e.clientY, () => e.preventDefault());
+	};
+	const pointerUp = (e) => {
+		if (e.pointerType === "mouse") end();
+	};
+	scroller.addEventListener("touchstart", touchStart, { passive: true });
+	scroller.addEventListener("touchmove", touchMove, { passive: false });
+	scroller.addEventListener("touchend", touchEnd);
+	scroller.addEventListener("touchcancel", touchEnd);
+	scroller.addEventListener("pointerdown", pointerDown);
+	scroller.addEventListener("pointermove", pointerMove);
+	scroller.addEventListener("pointerup", pointerUp);
+	scroller.addEventListener("pointercancel", pointerUp);
+	return {
+		sync: () => {
+			if (cfg.current.refreshing) {
+				if (grace) clearTimeout(grace);
+				if (!docked && !pulling) dock();
+			} else if (docked && !pulling) collapse();
+		},
+		detach: () => {
+			if (grace) clearTimeout(grace);
+			scroller.removeEventListener("touchstart", touchStart);
+			scroller.removeEventListener("touchmove", touchMove);
+			scroller.removeEventListener("touchend", touchEnd);
+			scroller.removeEventListener("touchcancel", touchEnd);
+			scroller.removeEventListener("pointerdown", pointerDown);
+			scroller.removeEventListener("pointermove", pointerMove);
+			scroller.removeEventListener("pointerup", pointerUp);
+			scroller.removeEventListener("pointercancel", pointerUp);
+			scroller.style.transition = "";
+			indicator.style.transition = "";
+			applyReveal(0);
+		}
+	};
+}
+//#endregion
+export { createPullToRefresh };

package/dist/web/{ui18.js → route.web.js}

@@ -1,4 +1,4 @@
-import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./ui17.js";
+import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./route-table.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/route.web.ts
 var screens = {};
@@ -162,6 +162,18 @@ function presentationFor(name) {
 function popRoute(_stack = "root") {
 	history.back();
 }
+var backInterceptorWarned = false;
+/** No-op twin of the native leaf. Browser back is already real history —
+*  there is no hardware-back event to intercept on web, so registered
+*  interceptors never fire. Warns once so a mistaken call site isn't
+*  silently absent. */
+function addBackInterceptor(_fn) {
+	if (!backInterceptorWarned) {
+		backInterceptorWarned = true;
+		console.warn("[octane-xplat] addBackInterceptor is a no-op on web — browser back is URL history, not an interceptable event.");
+	}
+	return () => {};
+}
 window.addEventListener("popstate", () => {
 	saveScroll();
 	historyDepth = history.state?.__octaneXplatDepth ?? 0;
@@ -237,4 +249,4 @@ var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 //#endregion
-export { canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };
+export { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };