@octane-xplat/ui 0.1.0 → 0.2.1

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "e5d5a76e-91b1-4920-b8b5-b59d15b06d53",
+  "buildId": "8686a45b-77f9-4ed0-bf1f-8a6087a94a55",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "f5e9483c-f0d0-4d47-91c8-407f37bf9a88",
+  "buildId": "cf079eb9-42ee-4226-83ff-a7f9254bf392",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/ui.js

@@ -15,5 +15,5 @@ import { currentRoute, pushRoute, routeFor, useRoute } from "./ui15.js";
 import { Tabs } from "./ui16.js";
 import { Switch } from "./ui17.js";
 import { PlatformBadge } from "./ui18.js";
-import { getStack, registerStack } 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, styled, useAnimation, useColorScheme, useRoute };
+import { getStack, registerStack, stackEntries } 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 };

package/dist/web/ui16.js

@@ -48,7 +48,7 @@ function __item$4(t, __s, __extra) {
 		props.onSelectedIndexChanged?.(i);
 	});
 	_b.a = updateFreshClassName(["vx-tab", active === props.tabs.indexOf(t) ? "active" : ""], _b.a, _b.b);
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, t.title, "b:6348b8b3", null, void 0, void 0, void 0, true);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, t.title, "b:6a83ceed", null, void 0, void 0, void 0, true);
 }
 function __else$2(__props, __s, __extra) {
 	const active = __extra[0];
@@ -66,7 +66,7 @@ function __else$2(__props, __s, __extra) {
 		_m6 = sibling(_el0, 1);
 		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, null, void 0);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:aa84790a", "attr");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:dd012c22", "attr");
 	_b.c = updateFreshClassName(["vx-tabs", props.className], _b.c, _b.b);
 	{
 		const _v = props.style;
@@ -80,7 +80,7 @@ function __else$2(__props, __s, __extra) {
 		props,
 		setInternal
 	], null, _b.f, true);
-	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, paneRoute && props.resolveScreen ? props.resolveScreen(paneRoute.name, paneRoute.params) : props.tabs[active]?.render(), "b:f2154571", null, void 0, void 0, void 0, true);
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.g, paneRoute && props.resolveScreen ? props.resolveScreen(paneRoute.name, paneRoute.params) : props.tabs[active]?.render(), "b:945751f6", null, void 0, void 0, void 0, true);
 }
 var Tabs = /* @__PURE__ */ __s(function Tabs(props, __s, __extra) {
 	const __block = __s.block;

package/dist/web/ui17.js

@@ -3,21 +3,21 @@ import { bindSignalAttribute, bindSignalChecked, enableSignalBindings, updateFre
 //#region src/Switch.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["change"]);
-var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:bf25de07\"/>");
+var _t$0 = /* @__PURE__ */ template("<input type=\"checkbox\" data-octane-input=\"i:86e2d28a\"/>");
 var Switch = /* @__PURE__ */ __s(function Switch(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m4;
 		const _root = clone(_t$0);
 		_m1 = _root;
-		_m4 = bindSignalChecked(__s, void 0, _root, props.checked, "i:bf25de07");
+		_m4 = bindSignalChecked(__s, void 0, _root, props.checked, "i:86e2d28a");
 		setEventHandler(_root, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
 		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
 	} else {
-		_b.e = bindSignalChecked(__s, _b.e, _b.b, props.checked, "i:bf25de07");
+		_b.e = bindSignalChecked(__s, _b.e, _b.b, props.checked, "i:86e2d28a");
 		setEventHandler(_b.b, "$$change", (e) => props.onCheckedChange?.(e.target.checked));
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:dddb26c5", "attr");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:c6de5afb", "attr");
 	_b.c = updateFreshClassName(["vx-switch", props.className], _b.c, _b.b);
 	{
 		const _v = props.style;

package/dist/web/ui18.js

@@ -11,7 +11,7 @@ var PlatformBadge = /* @__PURE__ */ __s(function PlatformBadge(props, __s, __ext
 		_m1 = _root;
 		_b = bag2(__s, _root, void 0, _m1);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:d2333534", "class");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f3cb9a4b", "class");
 });
 //#endregion
 export { PlatformBadge };

package/dist/web/ui19.js

@@ -2,5 +2,8 @@
 /** 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 };
+export { getStack, registerStack, stackEntries };

package/dist/web/ui2.js

@@ -90,7 +90,7 @@ var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
 		};
 		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:ae8eb435", "attr");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:82d7ce4a", "attr");
 	_b.d = updateFreshClassName(["vx-view", props.className], _b.d, _b.b);
 	{
 		const _v = props.style;
@@ -99,7 +99,7 @@ var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
 			_b.e = _v;
 		}
 	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:0277c7de", null, void 0, void 0, void 0, true);
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:f8e3deeb", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { View };

package/dist/web/ui4.js

@@ -11,7 +11,7 @@ var Text = /* @__PURE__ */ __s(function Text(props, __s, __extra) {
 		_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:fa2421a2", "class");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:14d3594c", "class");
 	{
 		const _v = props.style;
 		if (_b.c !== _v) {
@@ -19,7 +19,7 @@ var Text = /* @__PURE__ */ __s(function Text(props, __s, __extra) {
 			_b.c = _v;
 		}
 	}
-	_b.f = bindSignalChild(__s, _b.f, 1, _b.b, props.children, "b:7ee97a4e", null, void 0, void 0, void 0, true);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.b, props.children, "b:79e388b8", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { Text };

package/dist/web/ui5.js

@@ -2,18 +2,49 @@ import { __s, bag9, clone, delegateEvents, setEventHandler, setStyle, template }
 import { bindSignalAttribute, bindSignalChild, enableSignalBindings, updateFreshClassName } from "octane/internal/client";
 //#region src/Pressable.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["click"]);
+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);
+	};
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1;
 		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);
-	} else setEventHandler(_b.b, "$$click", props.disabled ? void 0 : props.onPress);
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:832122ac", "attr");
+	} 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;
@@ -22,10 +53,10 @@ var Pressable = /* @__PURE__ */ __s(function Pressable(props, __s, __extra) {
 			_b.d = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "role", props.accessibilityRole ?? "button", "b:6aeb41d8", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "aria-label", props.accessibilityLabel, "b:0b7c731e", "ariaAttr");
-	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "aria-hidden", props.accessible === false ? true : void 0, "b:d6cc8abe", "ariaAttr");
-	_b.j = bindSignalChild(__s, _b.j, 1, _b.b, props.children, "b:e3f0e733", null, void 0, void 0, void 0, 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);
 });
 //#endregion
 export { Pressable };

package/dist/web/ui6.js

@@ -3,21 +3,21 @@ import { bindSignalAttribute, bindSignalValue, enableSignalBindings } from "octa
 //#region src/TextInput.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["input"]);
-var _t$0 = /* @__PURE__ */ template("<input data-octane-input=\"i:cd4865f9\"/>");
+var _t$0 = /* @__PURE__ */ template("<input data-octane-input=\"i:ab65f8a8\"/>");
 var TextInput = /* @__PURE__ */ __s(function TextInput(props, __s, __extra) {
 	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:cd4865f9");
+		_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);
 	} else {
-		_b.d = bindSignalValue(__s, _b.d, _b.b, props.value, "i:cd4865f9");
+		_b.d = bindSignalValue(__s, _b.d, _b.b, props.value, "i:ab65f8a8");
 		setEventHandler(_b.b, "$$input", (e) => props.onChange?.(e.target.value));
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f914f05f", "class");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f09620ef", "class");
 	{
 		const _v = props.style;
 		if (_b.c !== _v) {
@@ -25,7 +25,7 @@ var TextInput = /* @__PURE__ */ __s(function TextInput(props, __s, __extra) {
 			_b.c = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "placeholder", props.placeholder, "b:d3d4e22e", "attr");
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "placeholder", props.placeholder ?? props.hint, "b:f03e01a9", "attr");
 });
 //#endregion
 export { TextInput };

package/dist/web/ui7.js

@@ -17,11 +17,21 @@ function __empty$1(__props, __s, __extra) {
 		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:24ab3bd2", _b.b, true, void 0, true, void 0);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:dbd88467", _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;
+	const __block = __s.block;
+	const props = __extra[0];
+	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);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderItem(item), "b:a4298d20", _b.b, true, void 0, true, void 0);
 }
 var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
 	let _b = __s.slots[0];
@@ -32,7 +42,7 @@ var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
 		_m4 = child(_root);
 		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:73617e12", "attr");
+	_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);
 	{
 		const _v = props.style;

package/dist/web/ui8.js

@@ -11,7 +11,7 @@ var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
 		_m1 = _root;
 		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, null, void 0);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:43734484", "attr");
+	_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);
 	{
 		const _v = {
@@ -23,7 +23,7 @@ var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
 			_b.d = _v;
 		}
 	}
-	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:a9b6a064", null, void 0, void 0, void 0, true);
+	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:142a2a1c", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { ScrollView };

package/dist/web/ui9.js

@@ -11,8 +11,8 @@ var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 		_m1 = _root;
 		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:2b4768ff", "attr");
-	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:75dde9fe", "class");
+	_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");
 	{
 		const _v = props.style;
 		if (_b.d !== _v) {
@@ -20,8 +20,8 @@ var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
 			_b.d = _v;
 		}
 	}
-	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "src", props.src, "b:0755e81c", "attr");
-	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "alt", props.alt, "b:62789e39", "attr");
+	_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 };

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "files": [
     "dist",
+    "types",
     "src/theme/tokens.css"
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "web": "./dist/web/ui.js",
       "native": "./dist/native/ui.js",
       "default": "./dist/native/ui.js"
@@ -16,17 +18,25 @@
   },
   "devDependencies": {
     "@nativescript-community/octane": "0.2.1",
-    "@octanejs/vite-plugin": "0.1.58",
     "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.58",
     "octane": "0.4.0",
     "vite": "8.3.0"
   },
   "peerDependencies": {
-    "octane": ">=0.1.51 <1",
     "@nativescript-community/octane": ">=0.2.1 <1",
-    "@nativescript/core": ">=9.1.0 <10"
+    "@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"
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json"
   }
 }

package/types/index.d.ts

@@ -0,0 +1,97 @@
+// Boundary types for @octane-xplat/ui — the thin shell over the real
+// contract. Every interface lives in `src/props.ts` (imported by both
+// platform leaves and emitted here as `./props`), so the ONLY hand-written
+// part is the mechanical `declare const X: UniversalComponent<XProps>`
+// wrapper — component shapes can't drift from the source. tsrx-tsc can't
+// emit declarations for .tsrx (upstream: tsrx-org/tsrx#136); this file is
+// what `tsc --emitDeclarationOnly` on pure .ts buys us.
+
+import type { UniversalComponent } from 'octane/universal';
+import type {
+	AnimatedValue,
+	ColorScheme,
+	ImageProps,
+	ListProps,
+	ModalProps,
+	PlatformBadgeProps,
+	PressableProps,
+	Route,
+	RowProps,
+	ScreenProps,
+	ScrollViewProps,
+	SwitchProps,
+	TabSpec,
+	TabsProps,
+	TextInputProps,
+	TextProps,
+	ViewProps,
+} from './props';
+
+export type {
+	AnimatedValue,
+	ColorScheme,
+	ImageProps,
+	ListProps,
+	ModalProps,
+	PanEvent,
+	PlatformBadgeProps,
+	PressableProps,
+	Route,
+	RowProps,
+	ScreenProps,
+	ScrollViewProps,
+	SwipeEvent,
+	SwitchProps,
+	TabSpec,
+	TabsProps,
+	TextInputProps,
+	TextProps,
+	ViewProps,
+} from './props';
+
+// ---------- primitives ----------
+
+export declare const View: UniversalComponent<ViewProps>;
+/** Column-direction alias of View. */
+export declare const Column: UniversalComponent<ViewProps>;
+export declare const Row: UniversalComponent<RowProps>;
+export declare const Text: UniversalComponent<TextProps>;
+export declare const Pressable: UniversalComponent<PressableProps>;
+export declare const TextInput: UniversalComponent<TextInputProps>;
+export declare const List: UniversalComponent<ListProps>;
+export declare const ScrollView: UniversalComponent<ScrollViewProps>;
+export declare const Image: UniversalComponent<ImageProps>;
+export declare const Screen: UniversalComponent<ScreenProps>;
+export declare const Switch: UniversalComponent<SwitchProps>;
+export declare const PlatformBadge: UniversalComponent<PlatformBadgeProps>;
+
+// ---------- overlays / shells ----------
+
+export declare const Modal: UniversalComponent<ModalProps>;
+export declare const Tabs: UniversalComponent<TabsProps>;
+
+// ---------- stacks (native registry; no-op on web) ----------
+
+export declare function registerStack(name: string, frame: any): void;
+export declare function getStack(name: string): any;
+export declare function stackEntries(): IterableIterator<[string, any]>;
+
+// ---------- routes (web store; no-op on native) ----------
+
+export declare function pushRoute(r: Route): void;
+export declare function routeFor(stack: string): Route | null;
+export declare function currentRoute(): Route | null;
+export declare function useRoute(stack: string): Route | null;
+
+// ---------- animation / theme ----------
+
+export declare function useAnimation(initial?: number, prop?: string): AnimatedValue;
+export declare function getColorScheme(): ColorScheme;
+export declare function useColorScheme(): ColorScheme;
+
+// ---------- styled ----------
+
+export declare function styled<P extends { className?: any }, V extends Record<string, any>>(
+	Base: (props: P) => any,
+	def: { base?: any; variants?: V },
+): UniversalComponent<P & { [K in keyof V]?: boolean }>;

package/types/props.d.ts

@@ -0,0 +1,142 @@
+/** Shared prop/type contract — the single source of truth for the public
+ *  API surface. Platform leaves import these types so prop shapes cannot
+ *  drift across .web/.native, and `tsc --emitDeclarationOnly` emits this
+ *  file into the published package's boundary types (tsrx can't emit
+ *  declarations — pure .ts is what escapes that). No imports here:
+ *  everything must stay dependency-free and platform-agnostic. */
+export interface PanEvent {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    vx: number;
+    vy: number;
+    state: string;
+    target: any;
+}
+export interface SwipeEvent {
+    direction: number;
+}
+export interface ViewProps {
+    className?: any;
+    style?: any;
+    children?: any;
+    id?: string;
+    /** `ref` is runtime-reserved on component elements — leaves expose
+     *  `bind` to reach the native/DOM node. */
+    bind?: (el: any) => void;
+    onPan?: (e: PanEvent) => void;
+    onSwipe?: (e: SwipeEvent) => void;
+}
+export interface RowProps {
+    className?: any;
+    style?: any;
+    children?: any;
+}
+export interface TextProps {
+    className?: any;
+    style?: any;
+    children?: any;
+}
+export interface PressableProps {
+    className?: any;
+    style?: any;
+    children?: any;
+    id?: string;
+    disabled?: boolean;
+    onPress?: () => void;
+    /** ~500ms press-and-hold (web: timer over pointerdown/up). */
+    onLongPress?: () => void;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityRole?: string;
+}
+export interface TextInputProps {
+    className?: any;
+    style?: any;
+    value?: string;
+    placeholder?: string;
+    /** NativeScript's term for placeholder — web maps hint → placeholder. */
+    hint?: string;
+    onChange?: (value: string) => void;
+}
+export interface ListProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    items: any[];
+    renderItem: (item: any) => any;
+    renderEmpty?: () => any;
+}
+export interface ScrollViewProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    horizontal?: boolean;
+    children?: any;
+}
+export interface ImageProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    src: string;
+    alt?: string;
+}
+export interface ScreenProps {
+    className?: any;
+    style?: any;
+    children?: any;
+}
+export interface SwitchProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface PlatformBadgeProps {
+    className?: any;
+}
+export interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+    fullscreen?: boolean;
+    children?: any;
+}
+export interface TabSpec {
+    title: string;
+    render: () => any;
+    /** Named parallel stack — native hosts a Frame per such pane; on web
+     *  the pane is the route outlet for `stack` (pushed screens render in
+     *  place). navigate(name, params, {into: spec.stack}) targets it. */
+    stack?: string;
+}
+export interface TabsProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    tabs: readonly TabSpec[];
+    selectedIndex?: number;
+    onSelectedIndexChanged?: (index: number) => void;
+    /** Renders a pushed route's screen by name (the app owns the table).
+     *  Web: route outlet. Native: pushes render inside the pane's Frame. */
+    resolveScreen?: (name: string, params: Record<string, unknown>) => any;
+}
+export interface Route {
+    stack: string;
+    name: string;
+    params: Record<string, unknown>;
+}
+export interface AnimatedValue {
+    readonly value: number;
+    bind(el: any): void;
+    to(target: number, opts?: {
+        duration?: number;
+    }): void;
+    spring(target: number, opts?: {
+        damping?: number;
+        stiffness?: number;
+    }): void;
+    stop(): void;
+}
+export type ColorScheme = 'light' | 'dark';