@octane-xplat/ui 0.2.1 → 0.3.0

package/dist/web/ui31.js

@@ -0,0 +1,42 @@
+import { hookSlots, useEffect, useState } from "octane";
+//#region src/safeAreaInsets.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+function measure() {
+	if (!document.body) return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	const probe = document.createElement("div");
+	probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);";
+	document.body.appendChild(probe);
+	const style = getComputedStyle(probe);
+	const insets = {
+		top: parseFloat(style.paddingTop) || 0,
+		right: parseFloat(style.paddingRight) || 0,
+		bottom: parseFloat(style.paddingBottom) || 0,
+		left: parseFloat(style.paddingLeft) || 0
+	};
+	probe.remove();
+	return insets;
+}
+function useSafeAreaInsets() {
+	const [insets, setInsets] = useState({
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	}, _h$0);
+	useEffect(() => {
+		const update = () => setInsets(measure());
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, [], _h$1);
+	return insets;
+}
+//#endregion
+export { useSafeAreaInsets };

package/dist/web/ui32.js

@@ -0,0 +1,77 @@
+import { useSafeAreaInsets } from "./ui31.js";
+import { __s, bag11, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, template, withSlot } from "octane";
+import { canSplitStyleProperties, childTextHoleUpdate, replaceRef, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
+//#region src/SafeArea.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+function applyWebProps(node, bag) {
+	if (!node || !bag) return;
+	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
+	else node[key] = value;
+}
+var SafeArea = /* @__PURE__ */ __s(function SafeArea(props, __s, __extra) {
+	const insets = withSlot(_h$0, useSafeAreaInsets);
+	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 = (node) => applyWebProps(node, props.web), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag11(__s, _root, _m0, _m1, void 0, __s, void 0, void 0, void 0, void 0, void 0, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (node) => applyWebProps(node, props.web);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = updateFreshClassName(["vx-safe-area", props.className], _b.c, _b.a);
+	{
+		const __styleSpread = { ...props.style };
+		const __styleValue = insets.top;
+		const __styleValue$ = insets.right;
+		const __styleValue$2 = insets.bottom;
+		const __styleValue$3 = insets.left;
+		const __styleFull = "paddingTop" in __styleSpread || "paddingRight" in __styleSpread || "paddingBottom" in __styleSpread || "paddingLeft" in __styleSpread || !canSplitStyleProperties();
+		if (_b.d === __s || __styleFull || _b.e) {
+			const __styleObject = __styleFull && !("paddingTop" in styleObjectPrototype || "paddingRight" in styleObjectPrototype || "paddingBottom" in styleObjectPrototype || "paddingLeft" in styleObjectPrototype) ? (__styleSpread["paddingTop"] = __styleValue, __styleSpread["paddingRight"] = __styleValue$, __styleSpread["paddingBottom"] = __styleValue$2, __styleSpread["paddingLeft"] = __styleValue$3, __styleSpread) : {
+				...__styleSpread,
+				"paddingTop": __styleValue,
+				"paddingRight": __styleValue$,
+				"paddingBottom": __styleValue$2,
+				"paddingLeft": __styleValue$3
+			};
+			setStyle(_b.a, __styleObject, _b.d === __s ? void 0 : _b.e ? _b.d : {
+				..._b.d,
+				"paddingTop": _b.f,
+				"paddingRight": _b.g,
+				"paddingBottom": _b.h,
+				"paddingLeft": _b.i
+			});
+			_b.d = __styleFull ? __styleObject : __styleSpread;
+		} else {
+			setStyle(_b.a, __styleSpread, _b.d);
+			if (_b.f !== __styleValue) setStyleProperty(_b.a, "paddingTop", __styleValue, "", _b.f);
+			if (_b.g !== __styleValue$) setStyleProperty(_b.a, "paddingRight", __styleValue$, "", _b.g);
+			if (_b.h !== __styleValue$2) setStyleProperty(_b.a, "paddingBottom", __styleValue$2, "", _b.h);
+			if (_b.i !== __styleValue$3) setStyleProperty(_b.a, "paddingLeft", __styleValue$3, "", _b.i);
+			_b.d = __styleSpread;
+		}
+		_b.e = __styleFull;
+		_b.f = __styleValue;
+		_b.g = __styleValue$;
+		_b.h = __styleValue$2;
+		_b.i = __styleValue$3;
+	}
+	{
+		const _v = props.children;
+		_b.j = childTextHoleUpdate(__s, 1, _b.a, _v, _b.j, _b.k);
+		_b.k = _v;
+	}
+});
+//#endregion
+export { SafeArea };

package/dist/web/ui33.js

@@ -0,0 +1,43 @@
+import { __s, bag6, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { childTextHoleUpdate, replaceRef, updateFreshClassName } from "octane/internal/client";
+//#region src/KeyboardAvoiding.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+function applyWebProps(node, bag) {
+	if (!node || !bag) return;
+	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
+	else node[key] = value;
+}
+var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (node) => applyWebProps(node, props.web), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (node) => applyWebProps(node, props.web);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = updateFreshClassName(["vx-keyboard-avoiding", props.className], _b.c, _b.a);
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.a, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	{
+		const _v = props.children;
+		_b.e = childTextHoleUpdate(__s, 1, _b.a, _v, _b.e, _b.f);
+		_b.f = _v;
+	}
+});
+//#endregion
+export { KeyboardAvoiding };

package/dist/web/ui34.js

@@ -0,0 +1,67 @@
+import { __s, bag3, bag8, child, clone, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { childTextHoleUpdate, replaceRef, updateFreshClassName } from "octane/internal/client";
+//#region src/Drawer.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\" aria-hidden=\"true\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<div><div class=\"vx-drawer-main\"></div><!></div>");
+function __then$1(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = sibling(child(_root), 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag3(__s, null, _m0, null, void 0);
+	}
+	{
+		const _v = props.drawer;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+var _rm$4 = [
+	"r",
+	"b",
+	"a"
+];
+function applyWebProps(node, bag) {
+	if (!node || !bag) return;
+	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
+	else node[key] = value;
+}
+var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m4, _m5;
+		const _root = clone(_t$1);
+		queueRefAttach(__s, _m1 = (node) => applyWebProps(node, props.web), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m4 = sibling(child(_root), 1);
+		_m5 = child(_root);
+		_b = bag8(__s, _root, _m0, _m1, void 0, void 0, _m4, _m5, null, void 0);
+		__s.refFields = _rm$4;
+	} else {
+		const _r = (node) => applyWebProps(node, props.web);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = updateFreshClassName(["vx-drawer", props.className], _b.c, _b.a);
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.a, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	{
+		const _v = props.main;
+		_b.g = childTextHoleUpdate(__s, 1, _b.f, _v, _b.g, _b.h);
+		_b.h = _v;
+	}
+	{
+		const __ifCondition = props.open;
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$1, null, _b.e, __ifCondition ? [props] : void 0);
+	}
+});
+//#endregion
+export { Drawer };

package/dist/web/ui35.js

@@ -0,0 +1,9 @@
+//#region src/platformProps.web.ts
+/** Apply a web escape-hatch bag after the primitive's standard props. */
+function applyWebProps(el, props) {
+	if (!el || !props) return;
+	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
+	else el[name] = value;
+}
+//#endregion
+export { applyWebProps };

package/dist/web/ui36.js

@@ -0,0 +1,45 @@
+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;
+		}
+	}
+}
+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 };

package/dist/web/ui37.js

@@ -0,0 +1,47 @@
+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);
+		}
+	}
+	_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");
+});
+//#endregion
+export { Slider };

package/dist/web/ui38.js

@@ -0,0 +1,17 @@
+//#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);
+}
+//#endregion
+export { getIcon, registerIcon, registerIcons };

package/dist/web/ui39.js

@@ -0,0 +1,100 @@
+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
+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 _rm$1 = [
+	"r",
+	"f",
+	"b"
+];
+function __then$0(__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, _m5, _m7;
+		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);
+		__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);
+	}
+	_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: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
+		]
+	});
+};
+//#endregion
+export { Icon };

package/dist/web/ui4.js

@@ -1,25 +1,153 @@
-import { __s, bag5, clone, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings } from "octane/internal/client";
-//#region src/Text.web.tsrx
+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("<span></span>");
-var Text = /* @__PURE__ */ __s(function Text(props, __s, __extra) {
+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 _m1;
+		let _m0, _m1, _m2, _m3, _m4, _m5;
 		const _root = clone(_t$0);
-		_m1 = _root;
-		_b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:14d3594c", "class");
-	{
-		const _v = props.style;
-		if (_b.c !== _v) {
-			setStyle(_b.b, _v, _b.c);
-			_b.c = _v;
+		_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.f = bindSignalChild(__s, _b.f, 1, _b.b, props.children, "b:79e388b8", null, void 0, void 0, void 0, true);
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:35b9af07", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Text };
+export { View };

package/dist/web/ui40.js

@@ -0,0 +1,41 @@
+import { applyWebProps } from "./ui35.js";
+import { bag4, child, clone, componentSlot, drainFrag, markChildrenBlock, template } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/Heading.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var Heading = function Heading(props, __s, __extra) {
+	const __block = __s.block;
+	const level = props.level ?? 2;
+	const tag = `h${level}`;
+	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;
+		}
+	}
+	componentSlot(__s, 0, __block.parentNode, tag, {
+		"id": props.id,
+		"className": [
+			"vx-heading",
+			`vx-h${level}`,
+			props.className
+		],
+		"style": props.style,
+		"ref": (el) => applyWebProps(el, props.web),
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:4d3be985");
+};
+//#endregion
+export { Heading };

package/dist/web/ui41.js

@@ -0,0 +1,17 @@
+import { __s, bag2, clone, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
+//#region src/PlatformBadge.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span>web</span>");
+var PlatformBadge = /* @__PURE__ */ __s(function PlatformBadge(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag2(__s, _root, void 0, _m1);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f3cb9a4b", "class");
+});
+//#endregion
+export { PlatformBadge };