@octane-xplat/ui 0.3.0 → 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": "0f82ad97-944d-4397-a64d-c6ebca7ba253",
+  "buildId": "945217e4-b47f-4701-903e-c65b8de4bec5",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/ui.js

@@ -1,40 +1,52 @@
-import { View } from "./ui5.js";
-import { Row } from "./ui6.js";
-import { Grid } from "./ui7.js";
-import { Stack } from "./ui8.js";
-import { Absolute } from "./ui9.js";
-import { Spacer } from "./ui10.js";
-import { Text } from "./ui11.js";
-import { Pressable } from "./ui12.js";
-import { TextInput } from "./ui13.js";
-import { TextArea } from "./ui14.js";
-import { List } from "./ui15.js";
-import { ScrollView } from "./ui16.js";
-import { Image } from "./ui17.js";
-import { Modal } from "./ui18.js";
-import { openModal } from "./ui19.js";
-import { getColorScheme, useColorScheme } from "./ui20.js";
-import { Overlay } from "./ui21.js";
-import { Popover } from "./ui22.js";
-import { showToast } from "./ui23.js";
-import { useAnimation } from "./ui24.js";
-import { styled } from "./ui25.js";
-import { Screen } from "./ui26.js";
-import { getStack, registerStack, stackEntries } from "./ui27.js";
-import { Tabs } from "./ui28.js";
-import { Switch } from "./ui29.js";
-import { useSafeAreaInsets } from "./ui30.js";
-import { SafeArea } from "./ui31.js";
-import { KeyboardAvoiding } from "./ui32.js";
-import { Drawer } from "./ui33.js";
-import { ActivityIndicator } from "./ui35.js";
-import { Slider } from "./ui36.js";
-import { registerIcon, registerIcons } from "./ui37.js";
-import { Icon } from "./ui38.js";
-import { Heading } from "./ui39.js";
-import { PlatformBadge } from "./ui40.js";
-import { deriveRouteManifest } from "./ui41.js";
-import { currentRoute, hrefFor, popRoute, pushRoute, registerRoutes, registerScreens, routeFor, screenFor, useRoute } from "./ui42.js";
-import { createStore } from "./ui43.js";
-import { useStore } from "./ui44.js";
-export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Icon, Image, KeyboardAvoiding, List, Modal, Overlay, PlatformBadge, Popover, Pressable, Row, SafeArea, Screen, ScrollView, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, createStore, currentRoute, deriveRouteManifest, getColorScheme, getStack, hrefFor, openModal, popRoute, pushRoute, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, screenFor, showToast, stackEntries, styled, useAnimation, useColorScheme, useRoute, useSafeAreaInsets, useStore };
+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,23 +1,32 @@
 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/Spacer.native.tsrx
+//#region src/Absolute.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "stacklayout",
-	"props": { "flexGrow": 1 },
+	"type": "absolutelayout",
 	"bindings": [
-		["ref", 0],
-		["className", 1],
-		["style", 2]
-	]
+		["id", 0],
+		["ref", 1],
+		["iosGlassEffect", 2],
+		["className", 3],
+		["style", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
 });
-var Spacer = defineUniversalComponent("nativescript", function Spacer(props) {
+var Absolute = defineUniversalComponent("nativescript", function Absolute(props) {
 	return universalValue(__octaneUniversalPlan0, [
+		props.id,
 		(view) => applyEscapeProps(view, props),
-		cx("vx-spacer", props.className),
-		props.style
+		glassConfigOf(props.glass),
+		cx("vx-absolute", glassClassOf(props.glass), props.className),
+		props.style,
+		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Spacer };
+export { Absolute };

package/dist/native/ui11.js

@@ -1,120 +1,53 @@
 import { cx } from "./ui2.js";
-import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
-import { layoutChildProps } from "./ui4.js";
-import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
-//#region src/Text.native.tsrx
+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": "span",
+	"type": "liquidglass",
 	"propsSlot": 0,
 	"children": [{
 		"kind": "slot",
 		"slot": 1
 	}]
 });
-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",
-				"ref",
-				(v) => applyEscapeProps(v, props)
-			],
-			["spread", layoutChildProps(props)],
-			[
-				"set",
-				"className",
-				cx(props.className)
-			],
-			[
-				"set",
-				"style",
-				textStyle
-			],
-			[
-				"set",
-				"maxLines",
-				props.numberOfLines
-			],
-			[
-				"set",
-				"textOverflow",
-				props.ellipsize ? "ellipsis" : void 0
-			],
-			[
-				"set",
-				"whiteSpace",
-				props.ellipsize ? "nowrap" : 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))]);
-	})]);
+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 { Text };
+export { LiquidGlass$1 as LiquidGlass };

package/dist/native/ui12.js

@@ -1,115 +1,48 @@
 import { cx } from "./ui2.js";
-import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
-import { layoutChildProps } from "./ui4.js";
-import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
-//#region src/Pressable.native.tsrx
+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": "flexboxlayout",
+	"type": "liquidglasscontainer",
 	"propsSlot": 0,
 	"children": [{
 		"kind": "slot",
 		"slot": 1
 	}]
 });
-var Pressable = defineUniversalComponent("nativescript", function Pressable(props) {
+registerElement("liquidglasscontainer", LiquidGlassContainer);
+var LiquidGlassContainer$1 = defineUniversalComponent("nativescript", function LiquidGlassContainer(props) {
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
-			"ref",
-			(v) => applyEscapeProps(v, props)
+			"id",
+			props.id
 		],
 		[
 			"set",
-			"id",
-			props.id
+			"ref",
+			(v) => applyEscapeProps(v, props)
 		],
 		["spread", layoutChildProps(props)],
 		[
 			"set",
-			"flexDirection",
-			"column"
+			"iosGlassEffect",
+			{ spacing: props.spacing ?? 8 }
 		],
 		[
 			"set",
 			"className",
-			cx("vx-pressable", props.className)
+			cx("vx-glass-container", props.className)
 		],
 		[
 			"set",
 			"style",
-			{
-				...props.style,
-				...props.hitSlop ? {
-					margin: -props.hitSlop,
-					padding: props.hitSlop
-				} : {}
-			}
-		],
-		[
-			"set",
-			"accessible",
-			props.accessible
-		],
-		[
-			"set",
-			"accessibilityLabel",
-			props.accessibilityLabel
-		],
-		[
-			"set",
-			"accessibilityRole",
-			props.accessibilityRole
-		],
-		[
-			"set",
-			"accessibilityHint",
-			props.accessibilityHint
-		],
-		[
-			"set",
-			"accessibilityValue",
-			props.accessibilityValue
-		],
-		[
-			"set",
-			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
-		],
-		[
-			"set",
-			"accessibilityLiveRegion",
-			props.accessibilityLiveRegion
-		],
-		[
-			"set",
-			"ignoreTouchAnimation",
-			props.ignoreTouchAnimation
-		],
-		[
-			"set",
-			"onTap",
-			props.disabled ? void 0 : props.onPress
-		],
-		[
-			"set",
-			"onLongPress",
-			props.disabled ? void 0 : props.onLongPress
-		],
-		[
-			"set",
-			"onDoubleTap",
-			props.disabled ? void 0 : props.onDoublePress
-		],
-		[
-			"set",
-			"onTouch",
-			props.disabled ? void 0 : (e) => {
-				if (e.action === "down") props.onPressIn?.();
-				else if (e.action === "up" || e.action === "cancel") props.onPressOut?.();
-			}
+			props.style
 		]
 	]), props.children]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Pressable };
+export { LiquidGlassContainer$1 as LiquidGlassContainer };

package/dist/native/ui13.js

@@ -1,55 +1,25 @@
 import { cx } from "./ui2.js";
 import { applyEscapeProps } from "./ui3.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/TextInput.native.tsrx
+//#region src/Spacer.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "textfield",
+	"type": "stacklayout",
+	"props": { "flexGrow": 1 },
 	"bindings": [
-		["ref", 0],
-		["id", 1],
+		["id", 0],
+		["ref", 1],
 		["className", 2],
-		["style", 3],
-		["text", 4],
-		["hint", 5],
-		["secure", 6],
-		["keyboardType", 7],
-		["returnKeyType", 8],
-		["editable", 9],
-		["onTextChange", 10],
-		["onReturnPress", 11],
-		["onFocus", 12],
-		["onBlur", 13]
+		["style", 3]
 	]
 });
-var TextInput = defineUniversalComponent("nativescript", function TextInput(props) {
+var Spacer = defineUniversalComponent("nativescript", function Spacer(props) {
 	return universalValue(__octaneUniversalPlan0, [
-		(v) => {
-			if (!v) return;
-			applyEscapeProps(v, props);
-			props.bind?.({
-				focus: () => v.focus(),
-				blur: () => v.dismissSoftInput?.() ?? v.blur(),
-				native: v
-			});
-		},
 		props.id,
-		cx(props.className),
-		{
-			...props.style,
-			...props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}
-		},
-		props.value,
-		props.placeholder ?? props.hint,
-		props.secure,
-		props.keyboardType === "default" ? void 0 : props.keyboardType,
-		props.returnKeyType,
-		props.editable,
-		(e) => props.onChange?.(e.value),
-		props.onSubmit,
-		props.onFocus,
-		props.onBlur
+		(view) => applyEscapeProps(view, props),
+		cx("vx-spacer", props.className),
+		props.style
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { TextInput };
+export { Spacer };