@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/web/ui36.js

@@ -1,45 +1,90 @@
-import { applyWebProps } from "./ui35.js";
-import { bag5, clone, ifBlock, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
-import { bindSignalAttribute, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/ActivityIndicator.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div role=\"progressbar\"></div>");
-var _rm$1 = [
-	"r",
-	"e",
-	"b"
-];
-function __then$0(__props, __s, __extra) {
-	const props = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		queueRefAttach(__s, _m4 = (el) => applyWebProps(el, props.web), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
-		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (el) => applyWebProps(el, props.web);
-		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:718dded3", "attr");
-	_b.c = updateFreshClassName(["vx-spinner", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+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);
+	};
+	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) writeAnimatedValue(el, prop, current);
+		},
+		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);
+		}
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
 }
-var ActivityIndicator = function ActivityIndicator(props, __s, __extra) {
-	const __block = __s.block;
-	{
-		const __ifCondition = !(props.busy === false);
-		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
-	}
-};
 //#endregion
-export { ActivityIndicator };
+export { useAnimation };

package/dist/web/ui37.js

@@ -1,47 +1,22 @@
-import { applyWebProps } from "./ui35.js";
-import { __s, bag9, clone, delegateEvents, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalValue, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/Slider.web.tsrx
-enableSignalBindings(1, true);
-delegateEvents(["input"]);
-var _t$0 = /* @__PURE__ */ template("<input type=\"range\" data-octane-input=\"i:c0018a58\"/>");
-var _rm$0 = [
-	"r",
-	"i",
-	"b"
-];
-var Slider = /* @__PURE__ */ __s(function Slider(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4, _m8;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		_m4 = bindSignalValue(__s, void 0, _root, props.value, "i:c0018a58");
-		setEventHandler(_root, "$$input", (e) => props.onValueChange?.(Number(e.target.value)));
-		queueRefAttach(__s, _m8 = (el) => applyWebProps(el, props.web), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.i, _b.b));
-		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, _m4, void 0, void 0, void 0, _m8);
-		__s.refFields = _rm$0;
-	} else {
-		_b.e = bindSignalValue(__s, _b.e, _b.b, props.value, "i:c0018a58");
-		setEventHandler(_b.b, "$$input", (e) => props.onValueChange?.(Number(e.target.value)));
-		{
-			const _r = (el) => applyWebProps(el, props.web);
-			if (_r !== _b.i) _b.i = replaceRef(__s, _b.i, _r, _b.b);
+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];
 		}
+		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:2dad67ff");
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:97ef4e10", "attr");
-	_b.c = updateFreshClassName(["vx-slider", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
-		}
-	}
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "min", props.minValue ?? 0, "b:7991c980", "attr");
-	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "max", props.maxValue ?? 100, "b:ff7f1a7c", "attr");
-	_b.h = bindSignalAttribute(__s, _b.h, _b.b, "disabled", props.disabled, "b:91d4cdb7", "booleanAttr");
-});
+	return Styled;
+}
 //#endregion
-export { Slider };
+export { styled };

package/dist/web/ui38.js

@@ -1,17 +1,7 @@
-//#region src/icons.ts
-/**
-* App-owned icon registry. `svg` is SVG path `d` data (not a full SVG
-* markup string). Native `font` glyphs render only when the app ships 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);
+//#region src/windows.web.ts
+/** Open a browser window using the current route unless a URL is supplied. */
+function openWindow(options = {}) {
+	return window.open(options.url ?? window.location.href, "_blank");
 }
 //#endregion
-export { getIcon, registerIcon, registerIcons };
+export { openWindow };

package/dist/web/ui39.js

@@ -1,100 +1,38 @@
-import { applyWebProps } from "./ui35.js";
-import { getIcon } from "./ui38.js";
-import { bag8, bag9, clone, hookSlots, ifBlock, queueRefAttach, queueRefDetach, template } from "octane";
-import { bindSignalAttribute, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish1, replaceRef, updateFreshClassAttr, updateFreshClassName } from "octane/internal/client";
-//#region src/Icon.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Screen.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path></path></svg>", 1);
-var _t$1 = /* @__PURE__ */ template("<img/>");
+var _t$0 = /* @__PURE__ */ template("<div></div>");
 var _rm$1 = [
 	"r",
-	"f",
+	"c",
 	"b"
 ];
-function __then$0(__props, __s, __extra) {
-	const glyph = __extra[0];
-	const props = __extra[1];
-	const size = __extra[2];
+var Screen = /* @__PURE__ */ __s(function Screen(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1, _m5, _m7;
+		let _m1, _m2;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		queueRefAttach(__s, _m5 = (el) => applyWebProps(el, props.web), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.f, _b.b));
-		_m7 = _root.firstChild;
-		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, void 0, _m5, void 0, _m7, void 0);
+		queueRefAttach(__s, _m2 = (e) => applyEscapeProps(e, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
-		const _r = (el) => applyWebProps(el, props.web);
-		if (_r !== _b.f) _b.f = replaceRef(__s, _b.f, _r, _b.b);
+		const _r = (e) => applyEscapeProps(e, props);
+		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:c2998a08", "attr");
-	_b.c = updateFreshClassAttr(["vx-icon", props.className], _b.c, _b.b);
-	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "width", size, "b:2cb24e58", "attr");
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "height", size, "b:030dffd1", "attr");
-	_b.g = bindSignalAttribute(__s, _b.g, _b.h, "d", glyph.svg, "b:87ff75cb", "attr");
-	_b.i = bindSignalAttribute(__s, _b.i, _b.h, "fill", props.color ?? "currentColor", "b:5bd1a218", "attr");
-}
-var _rm$4 = [
-	"r",
-	"h",
-	"b"
-];
-function __then$3(__props, __s, __extra) {
-	const glyph = __extra[0];
-	const props = __extra[1];
-	const size = __extra[2];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m7;
-		const _root = clone(_t$1);
-		_m1 = _root;
-		queueRefAttach(__s, _m7 = (el) => applyWebProps(el, props.web), _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.h, _b.b));
-		_b = bag8(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, _m7);
-		__s.refFields = _rm$4;
-	} else {
-		const _r = (el) => applyWebProps(el, props.web);
-		if (_r !== _b.h) _b.h = replaceRef(__s, _b.h, _r, _b.b);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:4057121c", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-screen", props.className], _b.d, _b.b);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
+		}
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:e7755c5a", "attr");
-	_b.c = updateFreshClassName(["vx-icon", props.className], _b.c, _b.b);
-	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "src", glyph.src, "b:c1db93e6", "attr");
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", size, "b:ea1c538f", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", size, "b:a3678376", "attr");
-	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "alt", props.name, "b:056826c3", "attr");
-}
-function __else$2(__props, __s, __extra) {
-	const __block = __s.block;
-	const glyph = __extra[0];
-	__extra[1];
-	__extra[2];
-	ifBlock(__s, 0, __block.parentNode, glyph.src, __then$3, null, __block.endMarker, __extra);
-}
-function _frag$0(props, __s, __extra) {
-	const __block = __s.block;
-	ifBlock(__s, 0, __block.parentNode, props.h0, props.h1, props.h2, __block.endMarker, props.h3);
-}
-var _hs$ = /* @__PURE__ */ hookSlots(5);
-var Icon = function Icon(props, __s, __extra) {
-	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
-	let __hk = __memoRegion.hooks;
-	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
-	let __hkd0;
-	const glyph = (__hkd0 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) ? hookMemoPublish1(__hk, 0, getIcon(props.name), __hkd0) : __hk[2]);
-	if (!glyph) return null;
-	const size = props.size ?? 24;
-	return createElementFromConfig("c:96c53b1e", _frag$0, {
-		h0: glyph.svg,
-		h1: __then$0,
-		h2: __else$2,
-		h3: [
-			glyph,
-			props,
-			size
-		]
-	});
-};
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:80ad049e", null, void 0, void 0, void 0, true);
+});
 //#endregion
-export { Icon };
+export { Screen };

package/dist/web/ui4.js

@@ -1,153 +1,47 @@
-import { applyEscapeProps } from "./ui2.js";
-import { layoutChildProps } from "./ui3.js";
-import { __s, bag8, clone, hookSlots, snapshotSpread, template, useEffect, useRef } 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 _rm$1 = [
-	"s",
-	"f",
-	"e"
-];
-var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useEffect(() => {
-		const node = el.current;
-		const cb = props.onPan;
-		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);
-		};
-	}, [props.onPan], _hs$ + 1);
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3, _m4, _m5;
-		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));
-		_m4 = _root;
-		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
-			[
-				false,
-				"id",
-				_m0
-			],
-			[
-				false,
-				"ref",
-				_m1
-			],
-			[
-				false,
-				"className",
-				_m2
-			],
-			[true, _m3]
-		], "b:3f348e03", true);
-		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, 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));
-		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
-			[
-				false,
-				"id",
-				_b.a
-			],
-			[
-				false,
-				"ref",
-				_b.b
-			],
-			[
-				false,
-				"className",
-				_b.c
-			],
-			[true, _b.d]
-		], "b:3f348e03", true);
-	}
-	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:35b9af07", null, void 0, void 0, void 0, true);
-});
+//#region src/layout-child.web.ts
+/** The shared contract is "numbers are dips" (RN semantics), but octane's DOM
+*  renderer keeps React's unitless list — lineHeight is unitless there, so
+*  `style={{lineHeight: 40}}` would render a 40× multiplier instead of 40px.
+*  lineHeight is the one unitless-in-React prop that is a length in the
+*  shared vocabulary; force the px suffix. */
+function normStyle(style) {
+	if (style && typeof style.lineHeight === "number") return {
+		...style,
+		lineHeight: style.lineHeight + "px"
+	};
+	return style;
+}
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
+*  attribute has no CSS equivalent and is ignored on web. Grid indices are
+*  zero-based in the shared API, matching NativeScript. */
+function layoutChildProps(props, baseStyle = props.style) {
+	const style = { ...normStyle(baseStyle) };
+	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
+	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
+	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
+	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
+	if (props.left !== void 0) style.left = props.left;
+	if (props.top !== void 0) style.top = props.top;
+	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
+	if (props.order !== void 0) style.order = props.order;
+	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) style.gap = props.gap;
+	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+	if (typeof style.lineHeight === "number") style.lineHeight = style.lineHeight + "px";
+	return { style };
+}
 //#endregion
-export { View };
+export { layoutChildProps, normStyle };