@octane-xplat/ui 0.2.0 → 0.3.0

package/dist/web/ui42.js

@@ -0,0 +1,9 @@
+//#region src/stacks.web.ts
+/** Web twin — one linear URL stack; named stacks don't apply. */
+function registerStack(_name, _frame) {}
+function getStack(_name) {}
+function stackEntries() {
+	return [].values();
+}
+//#endregion
+export { getStack, registerStack, stackEntries };

package/dist/web/ui43.js

@@ -0,0 +1,22 @@
+//#region src/store.ts
+function createStore(initial) {
+	let value = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => value,
+		set(next) {
+			const v = typeof next === "function" ? next(value) : next;
+			if (Object.is(v, value)) return;
+			value = v;
+			for (const l of [...listeners]) l();
+		},
+		subscribe(notify) {
+			listeners.add(notify);
+			return () => {
+				listeners.delete(notify);
+			};
+		}
+	};
+}
+//#endregion
+export { createStore };

package/dist/web/ui44.js

@@ -0,0 +1,8 @@
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/use-store.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useStore(store, select) {
+	return useSyncExternalStore(store.subscribe, select === void 0 ? store.get : () => select(store.get()), _h$0);
+}
+//#endregion
+export { useStore };

package/dist/web/ui5.js

@@ -1,62 +1,64 @@
-import { __s, bag9, clone, delegateEvents, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/Pressable.web.tsrx
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui3.js";
+import { __s, bag7, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Row.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents([
-	"click",
-	"pointercancel",
-	"pointerdown",
-	"pointerleave",
-	"pointerup"
-]);
 var _t$0 = /* @__PURE__ */ template("<div></div>");
-var Pressable = /* @__PURE__ */ __s(function Pressable(props, __s, __extra) {
-	let timer = null;
-	const cancel = () => {
-		if (timer !== null) {
-			clearTimeout(timer);
-			timer = null;
-		}
-	};
-	const down = () => {
-		if (props.disabled || !props.onLongPress) return;
-		cancel();
-		timer = setTimeout(() => {
-			timer = null;
-			props.onLongPress?.();
-		}, 500);
-	};
+var _rm$1 = [
+	"s",
+	"e",
+	"d"
+];
+var Row = /* @__PURE__ */ __s(function Row(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m0, _m1, _m2, _m3, _m4;
 		const _root = clone(_t$0);
-		_m1 = _root;
-		setEventHandler(_root, "$$click", props.disabled ? void 0 : props.onPress);
-		setEventHandler(_root, "$$pointerdown", down);
-		setEventHandler(_root, "$$pointerup", cancel);
-		setEventHandler(_root, "$$pointerleave", cancel);
-		setEventHandler(_root, "$$pointercancel", cancel);
-		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, null, void 0);
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = ["vx-row", props.className];
+		_m2 = snapshotSpread(layoutChildProps(props));
+		_m3 = _root;
+		_m4 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[true, _m2]
+		], "b:be019871", true);
+		_b = bag7(__s, _root, _m0, _m1, _m2, _m3, _m4, null, void 0);
+		__s.refFields = _rm$1;
 	} else {
-		setEventHandler(_b.b, "$$click", props.disabled ? void 0 : props.onPress);
-		setEventHandler(_b.b, "$$pointerdown", down);
-		setEventHandler(_b.b, "$$pointerup", cancel);
-		setEventHandler(_b.b, "$$pointerleave", cancel);
-		setEventHandler(_b.b, "$$pointercancel", cancel);
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:0d0a69e5", "attr");
-	_b.c = updateFreshClassName(["vx-pressable", props.className], _b.c, _b.b);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = ["vx-row", props.className];
+			if (_b.b !== _v) _b.b = _v;
 		}
+		_b.c = snapshotSpread(layoutChildProps(props));
+		_b.e = bindSignalHostPropSources(__s, _b.e, _b.d, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[true, _b.c]
+		], "b:be019871", true);
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "role", props.accessibilityRole ?? "button", "b:ab1f73d1", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "aria-label", props.accessibilityLabel, "b:bf6ff2b6", "ariaAttr");
-	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "aria-hidden", props.accessible === false ? true : void 0, "b:22b020b5", "ariaAttr");
-	_b.j = bindSignalChild(__s, _b.j, 1, _b.b, props.children, "b:7124d4dc", null, void 0, void 0, void 0, true);
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.d, props.children, "b:95d1a265", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Pressable };
+export { Row };

package/dist/web/ui6.js

@@ -1,31 +1,58 @@
-import { __s, bag5, clone, delegateEvents, setEventHandler, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalValue, enableSignalBindings } from "octane/internal/client";
-//#region src/TextInput.web.tsrx
-enableSignalBindings(1, true);
-delegateEvents(["input"]);
-var _t$0 = /* @__PURE__ */ template("<input data-octane-input=\"i:ab65f8a8\"/>");
-var TextInput = /* @__PURE__ */ __s(function TextInput(props, __s, __extra) {
+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/Grid.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"d",
+	"b"
+];
+function parseTracks(spec) {
+	return spec?.split(",").map((part) => {
+		const track = part.trim();
+		if (track === "auto") return "auto";
+		if (track.endsWith("*")) return `${track.slice(0, -1) || "1"}fr`;
+		return /^\d+(?:\.\d+)?$/.test(track) ? `${track}px` : track;
+	}).join(" ");
+}
+var warnedAboutGap = false;
+var Grid = /* @__PURE__ */ __s(function Grid(props, __s, __extra) {
+	if (props.gap != null && !warnedAboutGap) {
+		warnedAboutGap = true;
+		console.warn("[Grid] gap is not supported; use child margins instead.");
+	}
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m3;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_m3 = bindSignalValue(__s, void 0, _root, props.value, "i:ab65f8a8");
-		setEventHandler(_root, "$$input", (e) => props.onChange?.(e.target.value));
-		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, void 0);
+		queueRefAttach(__s, _m3 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.d, _b.b));
+		_b = bag6(__s, _root, void 0, _m1, void 0, _m3, null, void 0);
+		__s.refFields = _rm$1;
 	} else {
-		_b.d = bindSignalValue(__s, _b.d, _b.b, props.value, "i:ab65f8a8");
-		setEventHandler(_b.b, "$$input", (e) => props.onChange?.(e.target.value));
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.d) _b.d = replaceRef(__s, _b.d, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f09620ef", "class");
+	_b.a = updateFreshClassName(["vx-grid", props.className], _b.a, _b.b);
 	{
-		const _v = props.style;
+		const _v = {
+			...props.style,
+			...props.rows ? { gridTemplateRows: parseTracks(props.rows) } : {},
+			...props.columns ? { gridTemplateColumns: parseTracks(props.columns) } : {}
+		};
 		if (_b.c !== _v) {
 			setStyle(_b.b, _v, _b.c);
 			_b.c = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "placeholder", props.placeholder ?? props.hint, "b:f03e01a9", "attr");
+	{
+		const _v = props.children;
+		_b.e = childTextHoleUpdate(__s, 1, _b.b, _v, _b.e, _b.f);
+		_b.f = _v;
+	}
 });
 //#endregion
-export { TextInput };
+export { Grid };

package/dist/web/ui7.js

@@ -1,47 +1,40 @@
-import { __s, bag4, bag5, child, clone, drainFrag, forBlock, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/List.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _key$0 = (item) => item.id;
-function __empty$1(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
+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/Stack.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"d",
+	"b"
+];
+var Stack = /* @__PURE__ */ __s(function Stack(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1;
+		let _m1, _m3;
 		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);
-	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:7e61efcc", _b.b, true, void 0, true, void 0);
-}
-function __item$3(item, __s, __extra) {
-	__extra[0].renderItem(item);
-	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
-}
-var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4;
-		const _root = clone(_t$1);
 		_m1 = _root;
-		_m4 = child(_root);
-		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
+		queueRefAttach(__s, _m3 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.d, _b.b));
+		_b = bag6(__s, _root, void 0, _m1, void 0, _m3, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.d) _b.d = replaceRef(__s, _b.d, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:22ff36f2", "attr");
-	_b.c = updateFreshClassName(["vx-list", props.className], _b.c, _b.b);
+	_b.a = updateFreshClassName(["vx-stack", props.className], _b.a, _b.b);
 	{
 		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
 		}
 	}
-	forBlock(__s, 1, _b.b, props.items, _key$0, __item$3, 8, [props], __empty$1, _b.e, true);
+	{
+		const _v = props.children;
+		_b.e = childTextHoleUpdate(__s, 1, _b.b, _v, _b.e, _b.f);
+		_b.f = _v;
+	}
 });
 //#endregion
-export { List };
+export { Stack };

package/dist/web/ui8.js

@@ -1,29 +1,40 @@
-import { __s, bag6, clone, setStyle, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
-//#region src/ScrollView.web.tsrx
-enableSignalBindings(1, true);
+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/Absolute.web.tsrx
 var _t$0 = /* @__PURE__ */ template("<div></div>");
-var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
+var _rm$1 = [
+	"r",
+	"d",
+	"b"
+];
+var Absolute = /* @__PURE__ */ __s(function Absolute(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m1, _m3;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, null, void 0);
+		queueRefAttach(__s, _m3 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.d, _b.b));
+		_b = bag6(__s, _root, void 0, _m1, void 0, _m3, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.d) _b.d = replaceRef(__s, _b.d, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:79e2ec85", "attr");
-	_b.c = updateFreshClassName(["vx-scroll", props.className], _b.c, _b.b);
+	_b.a = updateFreshClassName(["vx-absolute", props.className], _b.a, _b.b);
 	{
-		const _v = {
-			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
-			...props.style
-		};
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
 		}
 	}
-	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:142a2a1c", null, void 0, void 0, void 0, true);
+	{
+		const _v = props.children;
+		_b.e = childTextHoleUpdate(__s, 1, _b.b, _v, _b.e, _b.f);
+		_b.f = _v;
+	}
 });
 //#endregion
-export { ScrollView };
+export { Absolute };

package/dist/web/ui9.js

@@ -1,27 +1,35 @@
-import { __s, bag6, clone, setStyle, template } from "octane";
-import { bindSignalAttribute, enableSignalBindings } from "octane/internal/client";
-//#region src/Image.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<img/>");
-var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
+import { applyEscapeProps } from "./ui2.js";
+import { __s, bag4, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { replaceRef, updateFreshClassName } from "octane/internal/client";
+//#region src/Spacer.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$0 = [
+	"r",
+	"d",
+	"b"
+];
+var Spacer = /* @__PURE__ */ __s(function Spacer(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m1;
+		let _m1, _m3;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0);
+		queueRefAttach(__s, _m3 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.d, _b.b));
+		_b = bag4(__s, _root, void 0, _m1, void 0, _m3);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.d) _b.d = replaceRef(__s, _b.d, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:dac1f500", "attr");
-	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:dee59c6d", "class");
+	_b.a = updateFreshClassName(["vx-spacer", props.className], _b.a, _b.b);
 	{
 		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.b, _v, _b.d);
-			_b.d = _v;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "src", props.src, "b:1951fade", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "alt", props.alt, "b:0b6f5f10", "attr");
 });
 //#endregion
-export { Image };
+export { Spacer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "dist",
@@ -20,15 +20,26 @@
     "@nativescript-community/octane": "0.2.1",
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.58",
+    "jsdom": "30.1.1",
     "octane": "0.4.0",
-    "vite": "8.3.0"
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
   },
   "peerDependencies": {
     "@nativescript-community/octane": ">=0.2.1 <1",
     "@nativescript/core": ">=9.1.0 <10",
     "octane": ">=0.1.51 <1"
   },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json"
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "test:native": "vitest run --config vitest.native.config.mts"
   }
 }

package/src/theme/tokens.css

@@ -27,11 +27,65 @@
   flex-direction: column;
 }
 
+/* Safe-area values are zero when the viewport has no display cutout. */
+.vx-safe-area {
+  padding-top: constant(safe-area-inset-top);
+  padding-right: constant(safe-area-inset-right);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-left: constant(safe-area-inset-left);
+}
+
+.vx-safe-area {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}
+
+.vx-keyboard-avoiding { display: flex; flex-direction: column; }
+.vx-drawer { display: flex; flex-direction: row; position: relative; overflow: hidden; }
+.vx-drawer-main { display: flex; flex: 1; min-width: 0; }
+.vx-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); }
+.vx-drawer-panel {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 280px;
+  overflow: auto;
+  background: var(--color-surface);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
 .vx-row {
   flex-direction: row;
 }
 
+.vx-grid,
+.vx-stack {
+  display: grid;
+}
+
+.vx-stack > * {
+  grid-area: 1 / 1;
+}
+
+.vx-absolute {
+  position: relative;
+}
+
+.vx-absolute > * {
+  position: absolute;
+}
+
+.vx-spacer {
+  flex-grow: 1;
+}
+
 .vx-pressable {
+  display: flex;
+  flex-direction: column;
   user-select: none;
 }
 
@@ -39,11 +93,123 @@
 .vx-pressable:active {
   opacity: 0.85;
 }
+.vx-pressable-no-feedback:active {
+  opacity: 1;
+}
 /* native press feedback (NS pseudo — dead rule on web, and vice versa) */
 .vx-pressable:pressed {
   opacity: 0.85;
 }
 
+.vx-overlay {
+  z-index: 1000;
+}
+
+.vx-overlay-shade {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+.vx-overlay-content {
+  position: relative;
+  z-index: 1;
+}
+
+.vx-popover {
+  z-index: 1001;
+}
+
+.vx-toast-host {
+  position: fixed;
+  z-index: 1002;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.vx-toast-top { top: 24px; }
+.vx-toast-bottom { bottom: 24px; }
+
+.vx-toast {
+  pointer-events: auto;
+}
+
+/* auto-grow owns height — the manual resize handle has no native analog */
+.vx-textarea {
+  resize: none;
+}
+
+/* Modal is a real top-layer dialog on web. Presentation variants keep their
+   sizing and anchoring in tokens so both the component and openModal share it. */
+.vx-modal {
+  width: 480px;
+  max-width: 90%;
+  max-height: 90%;
+  padding: 24px;
+  border: 0;
+  border-radius: 16px;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+}
+
+.vx-modal::backdrop {
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.vx-modal--dialog {
+  width: 480px;
+  max-width: 90%;
+}
+
+.vx-modal--sheet {
+  width: 100%;
+  max-width: none;
+  max-height: 85%;
+  position: fixed;
+  inset: auto 0 0;
+  margin: 0;
+  border-radius: 16px 16px 0 0;
+}
+
+.vx-modal--fullscreen {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  border-radius: 0;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--placeholder-color, currentColor);
+}
+
+.vx-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  box-sizing: border-box;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: vx-spinner-turn 0.8s linear infinite;
+}
+
+@keyframes vx-spinner-turn {
+  to { transform: rotate(360deg); }
+}
+
+.vx-h1 { font-size: 2em; font-weight: bold; }
+.vx-h2 { font-size: 1.5em; font-weight: bold; }
+.vx-h3 { font-size: 1.17em; font-weight: bold; }
+.vx-h4 { font-size: 1em; font-weight: bold; }
+.vx-h5 { font-size: 0.83em; font-weight: bold; }
+.vx-h6 { font-size: 0.67em; font-weight: bold; }
+
 /* utilities (hand-written subset for the harness; Tailwind later) */
 
 .flex-1 { flex-grow: 1; }