@octane-xplat/ui 0.3.0 → 0.4.0

package/dist/web/ui23.js

@@ -1,57 +1,96 @@
-import { hookSlots, useRef } from "octane";
-//#region src/anim.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function createAnimated(initial, prop) {
-	let el = null;
-	let current = initial;
-	let raf = 0;
-	const apply = (v) => {
-		current = v;
-		if (el) el.style.transform = `translateX(${v}px)`;
-	};
-	const run = (step) => {
-		cancelAnimationFrame(raf);
-		const start = Date.now();
-		const tick = () => {
-			const v = step(Date.now() - start);
-			if (v === null) return;
-			apply(v);
-			raf = requestAnimationFrame(tick);
-		};
-		raf = requestAnimationFrame(tick);
-	};
-	return {
-		get value() {
-			return current;
-		},
-		bind(e) {
-			el = e;
-			if (el) el.style.transform = `translateX(${current}px)`;
-		},
-		to(target, opts) {
-			const dur = opts?.duration ?? 300;
-			const from = current;
-			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
-		},
-		spring(target, opts) {
-			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
-			let v = 0, x = current;
-			run(() => {
-				const dt = 1 / 60;
-				v += (-stiffness * (x - target) - damping * v) * dt;
-				x += v * dt;
-				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
-			});
-		},
-		stop() {
-			cancelAnimationFrame(raf);
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/ScrollView.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$0);
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = props.id;
+		_m2 = [
+			"vx-scroll",
+			glassClassOf(props.glass),
+			props.className
+		];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3]
+		], "b:bf7e328f", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
 		}
-	};
-}
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
-}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = [
+				"vx-scroll",
+				glassClassOf(props.glass),
+				props.className
+			];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:bf7e328f", true);
+	}
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:b1e7e75b", null, void 0, void 0, void 0, true);
+});
 //#endregion
-export { useAnimation };
+export { ScrollView };

package/dist/web/ui24.js

@@ -1,16 +1,32 @@
-import { hookSlots, useSyncExternalStore } from "octane";
-//#region src/theme/colorScheme.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function getColorScheme() {
-	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function subscribe(cb) {
-	const mq = matchMedia("(prefers-color-scheme: dark)");
-	mq.addEventListener("change", cb);
-	return () => mq.removeEventListener("change", cb);
-}
-function useColorScheme() {
-	return useSyncExternalStore(subscribe, getColorScheme, _h$0);
-}
+import { ScrollView } from "./ui23.js";
+import { bag4, child, clone, componentSlotVoid, drainFrag, markChildrenBlock, template } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/ScrollBox.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var ScrollBox = function ScrollBox(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$0);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, ScrollView, {
+		...props,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:09467f8a");
+};
 //#endregion
-export { getColorScheme, useColorScheme };
+export { ScrollBox };

package/dist/web/ui25.js

@@ -1,22 +1,108 @@
-import { componentSlot } from "octane";
-//#region src/styled.web.tsrx
-function styled(Base, def) {
-	function Styled(props, __s, __extra) {
-		const __block = __s.block;
-		const cls = [def.base];
-		const rest = { ...props };
-		for (const k of Object.keys(def.variants ?? {})) {
-			if (props[k]) cls.push(def.variants[k]);
-			delete rest[k];
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Image.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<img/>");
+var _rm$0 = [
+	"s",
+	"h",
+	"g"
+];
+var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7;
+		const _root = clone(_t$0);
+		_m0 = (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, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"src",
+				_m4
+			],
+			[
+				false,
+				"alt",
+				_m5
+			]
+		], "b:ed5f7791", false);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
 		}
-		if (props.className) cls.push(props.className);
-		if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-		componentSlot(__s, 0, __block.parentNode, Base, {
-			...rest,
-			"className": cls
-		}, __block.endMarker, void 0, void 0, true, void 0, "c:5d3d2b58");
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.className;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props));
+		{
+			const _v = props.src;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.alt;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		_b.h = bindSignalHostPropSources(__s, _b.h, _b.g, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"src",
+				_b.e
+			],
+			[
+				false,
+				"alt",
+				_b.f
+			]
+		], "b:ed5f7791", false);
 	}
-	return Styled;
-}
+});
 //#endregion
-export { styled };
+export { Image };

package/dist/web/ui26.js

@@ -1,39 +1,45 @@
-import { applyEscapeProps } from "./ui2.js";
-import { __s, bag6, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
-import { childTextHoleUpdate, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/Screen.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div></div>");
+import { __s, bag5, clone, createElement, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, template, useEffect, useMemo, useRef } from "octane";
+import { bindSignalChild, enableSignalBindings, replaceRef, setClassNameIfChanged } from "octane/internal/client";
+//#region src/Modal.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["close"]);
+var _t$0 = /* @__PURE__ */ template("<dialog></dialog>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
 var _rm$1 = [
 	"r",
 	"b",
 	"a"
 ];
-var Screen = /* @__PURE__ */ __s(function Screen(props, __s, __extra) {
+var Modal = /* @__PURE__ */ __s(function Modal(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	const content = useMemo(() => props.component ? createElement(props.component, props.params ?? {}) : props.children, [props], _hs$ + 1);
+	const presentation = props.presentation;
+	const className = presentation === "sheet" ? "vx-modal vx-modal--sheet" : presentation === "dialog" ? "vx-modal vx-modal--dialog" : presentation === "fullscreen" || !presentation && props.fullscreen ? "vx-modal vx-modal--fullscreen" : "vx-modal";
+	useEffect(() => {
+		const d = el.current;
+		if (!d) return;
+		if (props.open && !d.open) d.showModal();
+		else if (!props.open && d.open) d.close();
+	}, [props.open], _hs$ + 2);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		queueRefAttach(__s, _m1 = el, _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, null, void 0);
+		setEventHandler(_root, "$$close", () => props.onClose?.());
+		_b = bag5(__s, _root, _m0, _m1, void 0, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
-		const _r = (e) => applyEscapeProps(e, props);
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-	}
-	_b.c = updateFreshClassName(["vx-screen", props.className], _b.c, _b.a);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.a, _v, _b.d);
-			_b.d = _v;
+		{
+			const _r = el;
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
+		setEventHandler(_b.a, "$$close", () => props.onClose?.());
 	}
-	{
-		const _v = props.children;
-		_b.e = childTextHoleUpdate(__s, 1, _b.a, _v, _b.e, _b.f);
-		_b.f = _v;
-	}
+	_b.c = setClassNameIfChanged(className, _b.c, _b.a);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.a, content, "b:44cec141", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Screen };
+export { Modal };

package/dist/web/ui27.js

@@ -1,127 +1,16 @@
-//#region src/route-table.ts
-var EXT = /\.(tsrx|tsx|ts|mts|cts|js|mjs|cjs|jsx)$/;
-var SUFFIX = /\.(web|native|ios|android)$/;
-var PARAM = /^\[(.+)\]$/;
-/** Component pick rule for route/layout modules: default export, then a
-*  `screen` named export, then a single function export. Route files use
-*  named exports (decision #13) — a lone component is unambiguous. */
-function pick(mod, file) {
-	if (typeof mod?.default === "function") return mod.default;
-	if (typeof mod?.screen === "function") return mod.screen;
-	const fns = Object.keys(mod ?? {}).filter((k) => typeof mod[k] === "function");
-	if (fns.length === 1) return mod[fns[0]];
-	console.warn("[octane-xplat] route file " + file + (fns.length ? ` has ${fns.length} component-shaped exports (${fns.join(", ")}) — add a default or 'screen' export` : " has no component export") + " — skipped");
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/colorScheme.web.ts
+function getColorScheme() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function deriveRouteManifest(files, prefer, dir = "app") {
-	const prefix = dir.replace(/^\.?\/?/, "").replace(/\/+$/, "") + "/";
-	const seen = /* @__PURE__ */ new Map();
-	const layoutRank = /* @__PURE__ */ new Map();
-	const layouts = {};
-	const warned = /* @__PURE__ */ new Set();
-	for (const key of Object.keys(files).sort()) {
-		let rel = key.replace(/^\.?\//, "");
-		if (rel.startsWith(prefix)) rel = rel.slice(prefix.length);
-		rel = rel.replace(EXT, "");
-		const parts = rel.split("/");
-		let base = parts[parts.length - 1];
-		const sm = SUFFIX.exec(base);
-		const suffix = sm?.[1];
-		if (sm) base = base.slice(0, base.length - sm[0].length);
-		if (suffix && !prefer.includes(suffix)) continue;
-		const rank = suffix ? prefer.indexOf(suffix) : prefer.length;
-		if (base === "_layout") {
-			const d = parts.slice(0, -1).join("/");
-			const prev = layoutRank.get(d);
-			if (prev !== void 0 && prev <= rank) continue;
-			const component = pick(files[key], key);
-			if (component) {
-				layouts[d] = component;
-				layoutRank.set(d, rank);
-			}
-			continue;
-		}
-		const segs = parts.slice(0, -1).concat(base);
-		if (segs[segs.length - 1] === "index") segs.pop();
-		const segments = segs.map((s) => {
-			const p = PARAM.exec(s);
-			return p ? ":" + p[1] : s;
-		});
-		const name = segments.join("/") || "index";
-		const meta = {
-			name,
-			segments,
-			params: segments.filter((s) => s.startsWith(":")).map((s) => s.slice(1)),
-			file: key
-		};
-		const prev = seen.get(name);
-		if (prev && prev.rank <= rank) {
-			if (prev.rank === rank && !warned.has(name)) {
-				warned.add(name);
-				console.warn(`[octane-xplat] route '${name}' is defined by both ${prev.meta.file} and ${key} — keeping ${prev.meta.file}`);
-			}
-			continue;
-		}
-		const component = pick(files[key], key);
-		if (component) seen.set(name, {
-			rank,
-			meta,
-			component
-		});
-	}
-	const screens = {};
-	const routes = [];
-	for (const { meta, component } of seen.values()) {
-		screens[meta.name] = component;
-		routes.push(meta);
-	}
-	routes.sort((a, b) => b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name));
-	return {
-		screens,
-		routes,
-		layouts
-	};
+function subscribeSystemScheme(cb) {
+	const mq = matchMedia("(prefers-color-scheme: dark)");
+	mq.addEventListener("change", cb);
+	return () => mq.removeEventListener("change", cb);
 }
-/** Match URL path segments against a manifest — returns the winning meta
-*  plus extracted params, or null. First hit wins (routes are pre-sorted
-*  by specificity). */
-function matchRoute(routes, segs) {
-	for (const meta of routes) {
-		if (meta.segments.length !== segs.length) continue;
-		const params = {};
-		let ok = true;
-		for (let i = 0; i < segs.length; i++) {
-			const p = meta.segments[i];
-			if (p.startsWith(":")) params[p.slice(1)] = decodeURIComponent(segs[i]);
-			else if (p !== segs[i]) {
-				ok = false;
-				break;
-			}
-		}
-		if (ok) return {
-			meta,
-			params
-		};
-	}
-	return null;
-}
-/** Serialize a Route to a URL path (no origin): manifest routes substitute
-*  `:param` segments from params (leftover params → query string);
-*  non-manifest names keep the legacy `/<stack>/<name>?params` shape. */
-function buildRoutePath(routes, r) {
-	const meta = routes.find((m) => m.name === r.name);
-	let segs;
-	let rest = r.params;
-	if (meta) {
-		segs = meta.segments.map((s) => {
-			if (!s.startsWith(":")) return s;
-			const v = r.params[s.slice(1)];
-			if (v === void 0) console.warn(`[octane-xplat] route '${r.name}' pushed without path param ${s}`);
-			return encodeURIComponent(String(v ?? ""));
-		});
-		rest = Object.fromEntries(Object.entries(r.params).filter(([k]) => !meta.params.includes(k)));
-	} else segs = [r.name];
-	const q = Object.entries(rest).map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(String(v))).join("&");
-	return (((r.stack === "root" ? "" : "/" + r.stack) + "/" + segs.join("/")).replace(/\/+$/, "") || "/") + (q ? "?" + q : "");
+function useColorScheme() {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme, _h$0);
 }
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 //#endregion
-export { buildRoutePath, deriveRouteManifest, matchRoute };
+export { getColorScheme, subscribeSystemScheme, useColorScheme };

package/dist/web/ui28.js

@@ -1,112 +1,11 @@
-import { buildRoutePath, matchRoute } from "./ui27.js";
-import { hookSlots, useSyncExternalStore } from "octane";
-//#region src/route.web.ts
-var screens = {};
-var routes = [];
-/** Register the app's name → screen table. On web the table feeds
-*  `screenFor` — the fallback outlet resolution in Tabs when no
-*  `resolveScreen` prop is given; on native `pushRoute` resolves
-*  `route.name` through it. `manifest` (from deriveRouteManifest) enables
-*  path-param matching — call once from the shared routes module. */
-function registerScreens(table, manifest) {
-	screens = table;
-	routes = manifest ?? [];
-	if (current !== void 0) {
-		current = parse();
-		emit();
-	}
+//#region src/cx.ts
+/** NS `className` splits on ' ' only, and the universal driver applies the
+*  prop via `String(value)` — an array would arrive comma-joined and match
+*  no class at all. Native leaves normalize through cx() before handing
+*  className to an intrinsic. (The DOM renderer already flattens arrays,
+*  so web leaves don't need this.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
 }
-/** One-call registration for route-dir apps — screens + URL patterns +
-*  layouts all come from deriveRouteManifest. */
-function registerRoutes(manifest) {
-	registerScreens(manifest.screens, manifest.routes);
-}
-function screenFor(name) {
-	return screens[name];
-}
-var listeners = /* @__PURE__ */ new Set();
-var current;
-function queryParams() {
-	const params = {};
-	new URLSearchParams(location.search).forEach((v, k) => params[k] = v);
-	return params;
-}
-function parse() {
-	const segs = location.pathname.split("/").filter(Boolean);
-	if (!segs.length) return null;
-	const query = queryParams();
-	const root = matchRoute(routes, segs);
-	if (root) return {
-		stack: "root",
-		name: root.meta.name,
-		params: {
-			...query,
-			...root.params
-		}
-	};
-	if (segs.length > 1) {
-		const named = matchRoute(routes, segs.slice(1));
-		if (named) return {
-			stack: segs[0],
-			name: named.meta.name,
-			params: {
-				...query,
-				...named.params
-			}
-		};
-		return {
-			stack: segs[0],
-			name: segs[1],
-			params: query
-		};
-	}
-	return {
-		stack: "root",
-		name: segs[0],
-		params: query
-	};
-}
-function read() {
-	if (current === void 0) current = parse();
-	return current;
-}
-function emit() {
-	listeners.forEach((l) => l());
-}
-function pushRoute(r) {
-	history.pushState(null, "", buildRoutePath(routes, r));
-	current = r;
-	emit();
-}
-/** Web history is one linear stack — back pops whatever route is current;
-*  per-stack pops aren't expressible, so `stack` is accepted for parity
-*  and ignored. */
-function popRoute(_stack = "root") {
-	history.back();
-}
-window.addEventListener("popstate", () => {
-	current = parse();
-	emit();
-});
-/** Current route if it targets `stack`, else null. */
-function routeFor(stack) {
-	const c = read();
-	return c && c.stack === stack ? c : null;
-}
-/** The route active at boot — for deep-link tab selection. */
-function currentRoute() {
-	return read();
-}
-/** URL for a Route — Link's href and shareable-path helper. */
-function hrefFor(r) {
-	return buildRoutePath(routes, r);
-}
-function useRoute(stack) {
-	return useSyncExternalStore((cb) => {
-		listeners.add(cb);
-		return () => listeners.delete(cb);
-	}, () => routeFor(stack), _h$0);
-}
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 //#endregion
-export { currentRoute, hrefFor, popRoute, pushRoute, registerRoutes, registerScreens, routeFor, screenFor, useRoute };
+export { cx };