@octane-xplat/ui 0.2.1 → 0.4.0

package/README.md

@@ -0,0 +1,46 @@
+# @octane-xplat/ui
+
+> Cross-platform primitives for Octane xplat — one element vocabulary that
+> renders to the DOM on web and NativeScript views on iOS/Android.
+>
+> Status: `0.x` — the API surface is still moving. iOS/Android targets need
+> the NativeScript toolchain (Xcode/JDK + `ns`).
+
+```sh
+pnpm add @octane-xplat/ui octane
+```
+
+`octane` is a required peer; the `@nativescript/*` peers are optional and
+only needed for native targets.
+
+```tsx
+import { Row, Text, Pressable } from '@octane-xplat/ui'
+
+;<Row className="items-center gap-2">
+	<Text>Hello</Text>
+	<Pressable onPress={save}>
+		<Text>Save</Text>
+	</Pressable>
+</Row>
+```
+
+The package also ships `styled()`, layout stacks, routing (`Link`, `NavLink`,
+route tables), overlay/toast/modal services, and the theme stylesheet:
+
+```ts
+import '@octane-xplat/ui/theme/tokens.css'
+```
+
+Docs:
+
+- [Building screens](https://octane-xplat.goddardai.org/primitives) — the element vocabulary
+- [Styling screens](https://octane-xplat.goddardai.org/styling) — classes, tokens, runtime styles
+- [Moving between screens](https://octane-xplat.goddardai.org/navigation) — routes and links
+
+Rules for consumers:
+
+- Static styles = `className`; dynamic styles = `style` objects.
+- One element vocabulary per file — platform divergence happens at file
+  boundaries (`*.web`/`.native`/`.ios`/`.android`), not inside JSX.
+- No DOM globals in shared code; use `@octane-xplat/platform` for device
+  capabilities.

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "8686a45b-77f9-4ed0-bf1f-8a6087a94a55",
+  "buildId": "945217e4-b47f-4701-903e-c65b8de4bec5",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/ui.js

@@ -1,19 +1,52 @@
-import { View } from "./ui2.js";
-import { Row } from "./ui3.js";
-import { Text } from "./ui4.js";
-import { Pressable } from "./ui5.js";
-import { TextInput } from "./ui6.js";
-import { List } from "./ui7.js";
-import { ScrollView } from "./ui8.js";
-import { Image } from "./ui9.js";
-import { Modal } from "./ui10.js";
-import { useAnimation } from "./ui11.js";
-import { getColorScheme, useColorScheme } from "./ui12.js";
-import { styled } from "./ui13.js";
-import { Screen } from "./ui14.js";
-import { getStack, registerStack, stackEntries } from "./ui15.js";
-import { Tabs } from "./ui16.js";
-import { Switch } from "./ui17.js";
-import { PlatformBadge } from "./ui18.js";
-import { currentRoute, pushRoute, routeFor, useRoute } from "./ui19.js";
-export { View as Column, Image, List, Modal, PlatformBadge, Pressable, Row, Screen, ScrollView, Switch, Tabs, Text, TextInput, View, currentRoute, getColorScheme, getStack, pushRoute, registerStack, routeFor, stackEntries, styled, useAnimation, useColorScheme, useRoute };
+import { View } from "./ui6.js";
+import { Row } from "./ui7.js";
+import { Grid } from "./ui8.js";
+import { Stack } from "./ui9.js";
+import { Absolute } from "./ui10.js";
+import { LiquidGlass } from "./ui11.js";
+import { LiquidGlassContainer } from "./ui12.js";
+import { Spacer } from "./ui13.js";
+import { Text } from "./ui14.js";
+import { RichText, RichTextSpan } from "./ui15.js";
+import { Pressable } from "./ui16.js";
+import { Link } from "./ui17.js";
+import { getStack, registerStack, stackEntries } from "./ui18.js";
+import { deriveRouteManifest } from "./ui19.js";
+import { canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsForRoute, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./ui21.js";
+import { NavLink } from "./ui22.js";
+import { TextInput } from "./ui23.js";
+import { TextArea } from "./ui24.js";
+import { List } from "./ui25.js";
+import { ScrollBox } from "./ui26.js";
+import { ScrollView } from "./ui27.js";
+import { Image } from "./ui29.js";
+import { getColorScheme, useColorScheme } from "./ui30.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./ui31.js";
+import { Modal } from "./ui32.js";
+import { openModal } from "./ui33.js";
+import { findInRootLayouts, rootLayoutFor, topRootLayout } from "./ui34.js";
+import { Overlay } from "./ui35.js";
+import { Popover } from "./ui38.js";
+import { showToast } from "./ui39.js";
+import { useAnimation } from "./ui40.js";
+import { styled } from "./ui41.js";
+import { openWindow } from "./ui42.js";
+import { Screen } from "./ui43.js";
+import { Tabs } from "./ui44.js";
+import { Switch } from "./ui45.js";
+import { useSafeAreaInsets } from "./ui46.js";
+import { SafeArea } from "./ui47.js";
+import { KeyboardAvoiding } from "./ui48.js";
+import { Drawer } from "./ui49.js";
+import { ActivityIndicator } from "./ui50.js";
+import { Meter } from "./ui52.js";
+import { Slider } from "./ui53.js";
+import { registerIcon, registerIcons } from "./ui54.js";
+import { Icon } from "./ui55.js";
+import { Heading } from "./ui56.js";
+import { PlatformBadge } from "./ui57.js";
+import { createStore } from "./ui58.js";
+import { useStore } from "./ui59.js";
+import { Sheet } from "./ui60.js";
+import { closeSheet, openSheet, sheetHost } from "./ui61.js";
+export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Icon, Image, KeyboardAvoiding, Link, LiquidGlass, LiquidGlassContainer, List, Meter, Modal, NavLink, Overlay, PlatformBadge, Popover, Pressable, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, Sheet, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, findInRootLayouts, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, layoutsForRoute, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, rootLayoutFor, routeFor, routeStacks, screenFor, setThemePreference, sheetHost, showToast, stackEntries, styled, themeSchemeClasses, topRootLayout, useAnimation, useCanGoBack, useColorScheme, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/native/ui10.js

@@ -1,52 +1,32 @@
-import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { ContentView, Frame } from "@nativescript/core";
-//#region src/Modal.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { glassClassOf, glassConfigOf } from "./ui4.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Absolute.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
+	"kind": "host",
+	"type": "absolutelayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["iosGlassEffect", 2],
+		["className", 3],
+		["style", 4]
+	],
 	"children": [{
 		"kind": "slot",
-		"slot": 0
+		"slot": 5
 	}]
 });
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": []
-});
-var Panel = defineUniversalComponent("nativescript", function Panel(props) {
-	return universalValue(__octaneUniversalPlan0, [props.children]);
-}, { "module": "@nativescript-community/octane" });
-var Modal = defineUniversalComponent("nativescript", function Modal(props) {
-	const shown = useRef(null, _h$0);
-	useEffect(() => {
-		if (props.open && !shown.current) {
-			const presenter = Frame.topmost()?.currentPage ?? Frame.topmost();
-			if (!presenter) return;
-			const host = new ContentView();
-			const root = createNativeScriptRoot(host);
-			shown.current = {
-				host,
-				root
-			};
-			root.render(Panel, { children: props.children });
-			presenter.showModal(host, {
-				context: {},
-				closeCallback: () => {
-					shown.current = null;
-					props.onClose?.();
-				},
-				fullscreen: props.fullscreen ?? true,
-				animated: true
-			});
-		} else if (!props.open && shown.current) {
-			const { host } = shown.current;
-			shown.current = null;
-			host.closeModal();
-		}
-	}, [props.open], _h$1);
-	return universalValue(__octaneUniversalPlan1, []);
+var Absolute = defineUniversalComponent("nativescript", function Absolute(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(view) => applyEscapeProps(view, props),
+		glassConfigOf(props.glass),
+		cx("vx-absolute", glassClassOf(props.glass), props.className),
+		props.style,
+		props.children
+	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Modal };
+export { Absolute };

package/dist/native/ui11.js

@@ -1,58 +1,53 @@
-import { hookSlots, useRef } from "@nativescript-community/octane";
-import { cancelAnimationFrame, requestAnimationFrame } from "@nativescript/core/animation-frame";
-//#region src/anim.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function createAnimated(initial, prop) {
-	let view = null;
-	let current = initial;
-	let raf = 0;
-	const apply = (v) => {
-		current = v;
-		if (view) view[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(v) {
-			view = v;
-			if (view) view[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;
-}
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { layoutChildProps } from "./ui5.js";
+import { defineUniversalComponent, registerElement, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { LiquidGlass } from "@nativescript/core";
+//#region src/LiquidGlass.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "liquidglass",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+registerElement("liquidglass", LiquidGlass);
+var LiquidGlass$1 = defineUniversalComponent("nativescript", function LiquidGlass(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"ref",
+			(v) => applyEscapeProps(v, props)
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"iosGlassEffect",
+			{
+				variant: props.variant ?? "regular",
+				interactive: props.interactive ?? true,
+				tint: props.tint,
+				animateChangeDuration: props.animateChangeDuration
+			}
+		],
+		[
+			"set",
+			"className",
+			cx("vx-glass", props.variant === "clear" ? "vx-glass--clear" : void 0, props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		]
+	]), props.children]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { useAnimation };
+export { LiquidGlass$1 as LiquidGlass };

package/dist/native/ui12.js

@@ -1,17 +1,48 @@
-import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/theme/colorScheme.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function getColorScheme() {
-	return Application.primaryWindow?.systemAppearance?.() ?? Application.systemAppearance?.() ?? "light";
-}
-function subscribe(cb) {
-	const h = () => cb();
-	Application.on("systemAppearanceChanged", h);
-	return () => Application.off("systemAppearanceChanged", h);
-}
-function useColorScheme() {
-	return useSyncExternalStore(subscribe, getColorScheme, _h$0);
-}
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { layoutChildProps } from "./ui5.js";
+import { defineUniversalComponent, registerElement, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { LiquidGlassContainer } from "@nativescript/core";
+//#region src/LiquidGlassContainer.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "liquidglasscontainer",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+registerElement("liquidglasscontainer", LiquidGlassContainer);
+var LiquidGlassContainer$1 = defineUniversalComponent("nativescript", function LiquidGlassContainer(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"ref",
+			(v) => applyEscapeProps(v, props)
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"iosGlassEffect",
+			{ spacing: props.spacing ?? 8 }
+		],
+		[
+			"set",
+			"className",
+			cx("vx-glass-container", props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		]
+	]), props.children]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { getColorScheme, useColorScheme };
+export { LiquidGlassContainer$1 as LiquidGlassContainer };

package/dist/native/ui13.js

@@ -1,19 +1,25 @@
-import "@nativescript-community/octane";
-import { defineUniversalComponent as defineUniversalComponent$1, universalComponent as universalComponent$1 } from "octane/universal";
-//#region src/styled.native.tsrx
-function styled(Base, def) {
-	function Styled(props) {
-		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);
-		rest.className = cls;
-		return universalComponent$1("nativescript", Base, rest);
-	}
-	return defineUniversalComponent$1("nativescript", Styled);
-}
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Spacer.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "stacklayout",
+	"props": { "flexGrow": 1 },
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3]
+	]
+});
+var Spacer = defineUniversalComponent("nativescript", function Spacer(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(view) => applyEscapeProps(view, props),
+		cx("vx-spacer", props.className),
+		props.style
+	]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { styled };
+export { Spacer };

package/dist/native/ui14.js

@@ -1,20 +1,125 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Screen.native.tsrx
+import { cx } from "./ui2.js";
+import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
+import { layoutChildProps } from "./ui5.js";
+import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
+//#region src/Text.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "rootlayout",
-	"bindings": [["className", 0], ["style", 1]],
+	"type": "span",
+	"propsSlot": 0,
 	"children": [{
 		"kind": "slot",
-		"slot": 2
+		"slot": 1
 	}]
 });
-var Screen = defineUniversalComponent("nativescript", function Screen(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.className,
-		props.style,
-		props.children
-	]);
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var InText = createContext(false);
+var TextScope = defineUniversalComponent("nativescript", function TextScope(props) {
+	return InText({
+		value: true,
+		children: props.children
+	});
+}, { "module": "@nativescript-community/octane" });
+var Text = defineUniversalComponent("nativescript", function Text(props) {
+	const inText = useContext(InText);
+	const textStyle = {
+		...props.style,
+		...props.ellipsize ? {
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		} : {}
+	};
+	return universalValue(__octaneUniversalPlan2, [universalIf(inText, () => {
+		return universalValue(__octaneUniversalPlan0, [universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			[
+				"set",
+				"className",
+				cx(props.className)
+			],
+			[
+				"set",
+				"style",
+				textStyle
+			],
+			["spread", layoutChildProps(props)]
+		]), props.children]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan1, [universalProps([
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx(props.className)
+			],
+			[
+				"set",
+				"style",
+				textStyle
+			],
+			[
+				"set",
+				"maxLines",
+				props.numberOfLines ?? 0
+			],
+			[
+				"set",
+				"whiteSpace",
+				props.ellipsize ? "nowrap" : "normal"
+			],
+			[
+				"set",
+				"textOverflow",
+				props.ellipsize ? "ellipsis" : void 0
+			],
+			[
+				"set",
+				"accessibilityHint",
+				props.accessibilityHint
+			],
+			[
+				"set",
+				"accessibilityValue",
+				props.accessibilityValue
+			],
+			[
+				"set",
+				"accessibilityState",
+				nativeAccessibilityState(props.accessibilityState)
+			],
+			[
+				"set",
+				"accessibilityLiveRegion",
+				props.accessibilityLiveRegion
+			]
+		]), universalComponent("nativescript", TextScope, universalProps([], props.children))]);
+	})]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Screen };
+export { Text };