@octane-xplat/ui 0.5.0 → 0.7.0

package/README.md

@@ -1,11 +1,19 @@
 # @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.
+> Build shared screens for your app, with platform-specific controls where
+> they improve the experience.
 >
 > Status: `0.x` — the API surface is still moving. iOS/Android targets need
 > the NativeScript toolchain (Xcode/JDK + `ns`).
 
+Start with the [app creator](../create/README.md) when building a new app with
+an agent. xplat's five-target direction covers web, iOS, Android, macOS, and
+Windows; this package's established implementations cover web and mobile,
+with a bounded experimental macOS surface. The Windows scaffold has not yet
+been run on Windows, so UI support there remains unverified. See [target support](https://octane-xplat.goddardai.org/spec#choose-your-targets).
+
+To add the UI package to an existing configured app:
+
 ```sh
 pnpm add @octane-xplat/ui octane
 ```
@@ -13,6 +21,8 @@ pnpm add @octane-xplat/ui octane
 `octane` is a required peer; the `@nativescript/*` peers are optional and
 only needed for native targets.
 
+This component fragment assumes `save` is your app’s action handler.
+
 ```tsx
 import { Row, Text, Pressable } from '@octane-xplat/ui'
 
@@ -25,7 +35,7 @@ import { Row, Text, Pressable } from '@octane-xplat/ui'
 ```
 
 The package also ships `styled()`, layout stacks, routing (`Link`, `NavLink`,
-route tables), overlay/toast/modal services, and the theme stylesheet:
+route tables), sheet/overlay/toast services, and the theme stylesheet:
 
 ```ts
 import '@octane-xplat/ui/theme/tokens.css'
@@ -36,11 +46,14 @@ 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
+- [Known limits](https://octane-xplat.goddardai.org/known-limits) — broken/platform-bound seams, version-stamped
+
+For agents: [llms.txt](https://octane-xplat.goddardai.org/llms.txt) indexes the docs; `llms-full.txt` inlines every guide.
 
 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.
+  boundaries (`*.web`, `.mobile`, `.ios`, `.android`, and the unsuffixed native default), not inside JSX.
 - No DOM globals in shared code; use `@octane-xplat/platform` for device
   capabilities.

package/dist/native/Absolute.tsrx.js

@@ -0,0 +1,43 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Absolute.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "absolutelayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["accessible", 4],
+		["accessibilityLabel", 5],
+		["accessibilityRole", 6],
+		["accessibilityHint", 7],
+		["accessibilityValue", 8],
+		["accessibilityState", 9],
+		["accessibilityLiveRegion", 10]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 11
+	}]
+});
+var Absolute = defineUniversalComponent("nativescript", function Absolute(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		(view) => applyEscapeProps(view, props),
+		cx("vx-absolute", props.className),
+		props.style,
+		props.accessible,
+		props.accessibilityLabel,
+		nativeAccessibilityRole(props.accessibilityRole),
+		props.accessibilityHint,
+		props.accessibilityValue,
+		nativeAccessibilityState(props.accessibilityState),
+		props.accessibilityLiveRegion,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Absolute };

package/dist/native/Accordion.tsrx.js

@@ -0,0 +1,75 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Collapsible } from "./Collapsible.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalFor, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+//#region src/Accordion.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var Accordion = defineUniversalComponent("nativescript", function Accordion(props) {
+	const normalize = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
+	const [internal, setInternal] = useState(normalize(props.defaultOpen), _h$0);
+	const controlled = props.open !== void 0;
+	const openKeys = controlled ? normalize(props.open) : internal;
+	const report = (keys) => {
+		if (!controlled) setInternal(keys);
+		props.onOpenChange?.(props.multiple ? keys : keys[0]);
+	};
+	const toggle = (key, next) => {
+		if (props.multiple) report(next ? [...openKeys, key] : openKeys.filter((k) => k !== key));
+		else report(next ? [key] : []);
+	};
+	return universalValue(__octaneUniversalPlan1, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-accordion", props.className),
+		props.style,
+		universalFor(props.items, (item, __octaneUniversalIndex) => item.key, (item, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Collapsible, universalProps([
+				[
+					"set",
+					"className",
+					"vx-accordion-item"
+				],
+				[
+					"set",
+					"trigger",
+					item.header
+				],
+				[
+					"set",
+					"disabled",
+					item.disabled
+				],
+				[
+					"set",
+					"open",
+					openKeys.includes(item.key)
+				],
+				[
+					"set",
+					"onOpenChange",
+					(next) => toggle(item.key, next)
+				]
+			], item.content))]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Accordion };

package/dist/native/ActivityIndicator.tsrx.js

@@ -0,0 +1,35 @@
+import { cx } from "./cx.js";
+import { applyNativeProps } from "./platformProps.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/ActivityIndicator.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["ref", 3]
+	]
+});
+var ActivityIndicator = defineUniversalComponent("nativescript", function ActivityIndicator(props) {
+	if (props.busy === false) return null;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx("vx-spinner", props.className),
+		props.style,
+		(el) => {
+			if (!el) return;
+			applyNativeProps(el, props);
+			el.once("loaded", () => {
+				el.animate({
+					rotate: 360,
+					duration: 800,
+					iterations: Number.POSITIVE_INFINITY
+				});
+			});
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ActivityIndicator };

package/dist/native/Alert.tsrx.js

@@ -0,0 +1,74 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Icon } from "./Icon.tsrx.js";
+import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+//#region src/Alert.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-alert-title" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-alert-body" },
+		"children": [{
+			"kind": "slot",
+			"slot": 5
+		}, {
+			"kind": "slot",
+			"slot": 6
+		}]
+	}]
+});
+var Alert = defineUniversalComponent("nativescript", markWarm(function Alert(props) {
+	const tone = props.tone ?? "info";
+	useBatch([], () => {
+		warmChild(Icon, {
+			name: props.icon,
+			className: "vx-alert-icon"
+		});
+	});
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-alert", "vx-alert--" + tone, props.className),
+		props.style,
+		props.icon ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([[
+			"set",
+			"name",
+			props.icon
+		], [
+			"set",
+			"className",
+			"vx-alert-icon"
+		]]))]) : null,
+		props.title != null ? universalValue(__octaneUniversalPlan1, [props.title]) : null,
+		props.children
+	]);
+}, (__wp) => {
+	warmChild(Icon, {
+		name: __wp.icon,
+		className: "vx-alert-icon"
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { Alert };

package/dist/native/Avatar.tsrx.js

@@ -0,0 +1,76 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Image } from "./Image.tsrx.js";
+import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Avatar.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-avatar-fallback" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityLabel", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var Avatar = defineUniversalComponent("nativescript", function Avatar(props) {
+	const size = props.size ?? 32;
+	const box = {
+		width: size,
+		height: size,
+		borderRadius: size / 2
+	};
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-avatar", props.className),
+		{
+			...props.style,
+			...box
+		},
+		props.alt,
+		props.src ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Image, universalProps([
+			[
+				"set",
+				"className",
+				"vx-avatar-img"
+			],
+			[
+				"set",
+				"src",
+				props.src
+			],
+			[
+				"set",
+				"alt",
+				props.alt
+			],
+			[
+				"set",
+				"style",
+				{
+					width: size,
+					height: size,
+					borderRadius: size / 2
+				}
+			]
+		]))]) : universalValue(__octaneUniversalPlan1, [props.fallback ?? ""])
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Avatar };

package/dist/native/AvatarGroup.tsrx.js

@@ -0,0 +1,84 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Avatar } from "./Avatar.tsrx.js";
+import { toChildArray } from "./child-array.js";
+import { defineUniversalComponent, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/AvatarGroup.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-avatar-group-item" },
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}, {
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var AvatarGroup = defineUniversalComponent("nativescript", function AvatarGroup(props) {
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i) => i === 0 ? void 0 : { marginLeft: -size / 3 };
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-avatar-group", props.className),
+		props.style,
+		shown.map((child, i) => universalValue(__octaneUniversalPlan0, [universalProps([
+			[
+				"set",
+				"key",
+				i
+			],
+			[
+				"set",
+				"className",
+				"vx-avatar-group-item"
+			],
+			[
+				"set",
+				"style",
+				itemStyle(i)
+			]
+		]), child])),
+		overflow > 0 ? universalValue(__octaneUniversalPlan1, [itemStyle(shown.length), universalComponent("nativescript", Avatar, universalProps([[
+			"set",
+			"fallback",
+			`+${overflow}`
+		], [
+			"set",
+			"size",
+			size
+		]]))]) : null
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { AvatarGroup };

package/dist/native/Badge.tsrx.js

@@ -0,0 +1,29 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Badge.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var Badge = defineUniversalComponent("nativescript", function Badge(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-badge", props.className),
+		props.style,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Badge };

package/dist/native/Banner.tsrx.js

@@ -0,0 +1,80 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Icon } from "./Icon.tsrx.js";
+import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+//#region src/Banner.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": {
+		"className": "vx-banner-dismiss",
+		"text": "✕"
+	},
+	"bindings": [["onTap", 0]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 4
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "className": "vx-banner-body" },
+			"children": [{
+				"kind": "slot",
+				"slot": 5
+			}]
+		},
+		{
+			"kind": "slot",
+			"slot": 6
+		}
+	]
+});
+var Banner = defineUniversalComponent("nativescript", markWarm(function Banner(props) {
+	useBatch([], () => {
+		warmChild(Icon, {
+			name: props.icon,
+			className: "vx-banner-icon"
+		});
+	});
+	return universalValue(__octaneUniversalPlan2, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-banner", props.className),
+		props.style,
+		props.icon ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([[
+			"set",
+			"name",
+			props.icon
+		], [
+			"set",
+			"className",
+			"vx-banner-icon"
+		]]))]) : null,
+		props.children,
+		props.onDismiss ? universalValue(__octaneUniversalPlan1, [props.onDismiss]) : null
+	]);
+}, (__wp) => {
+	warmChild(Icon, {
+		name: __wp.icon,
+		className: "vx-banner-icon"
+	});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { Banner };

package/dist/native/Breadcrumb.tsrx.js

@@ -0,0 +1,66 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { defineUniversalComponent, universalFor, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Breadcrumb.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-breadcrumb-sep" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-breadcrumb-link" },
+	"bindings": [["text", 0], ["onTap", 1]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-breadcrumb-text" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-breadcrumb-item" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var Breadcrumb = defineUniversalComponent("nativescript", function Breadcrumb(props) {
+	const sep = props.separator ?? "/";
+	return universalValue(__octaneUniversalPlan4, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-breadcrumb", props.className),
+		props.style,
+		universalFor(props.items.map((item, i) => ({
+			item,
+			i
+		})), (e, __octaneUniversalIndex) => e.i, (e, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan3, [e.i > 0 ? universalValue(__octaneUniversalPlan0, [sep]) : null, e.item.onSelect ? universalValue(__octaneUniversalPlan1, [e.item.label, e.item.onSelect]) : universalValue(__octaneUniversalPlan2, [e.item.label])]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Breadcrumb };

package/dist/native/Button.tsrx.js

@@ -0,0 +1,62 @@
+import { cx } from "./cx.js";
+import { Pressable } from "./Pressable.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
+import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
+//#region src/Button.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Button = defineUniversalComponent("nativescript", markWarm(function Button(props) {
+	const disabled = props.disabled || props.loading;
+	useBatch([], () => {
+		warmChild(ActivityIndicator, {});
+	});
+	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Pressable, universalProps([
+		["spread", props],
+		[
+			"set",
+			"disabled",
+			disabled
+		],
+		[
+			"set",
+			"className",
+			cx("vx-button", props.loading && "vx-button--loading", props.className)
+		],
+		[
+			"set",
+			"accessibilityRole",
+			props.accessibilityRole ?? "button"
+		]
+	], props.loading ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", ActivityIndicator, universalProps([]))]) : universalValue(__octaneUniversalPlan1, [
+		props.leading,
+		props.children,
+		props.trailing
+	])))]);
+}, (__wp) => {
+	warmChild(ActivityIndicator, {});
+}), { "module": "@nativescript-community/octane" });
+//#endregion
+export { Button };