@octane-xplat/ui 0.1.0

package/dist/web/ui6.js

@@ -0,0 +1,31 @@
+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:cd4865f9\"/>");
+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");
+		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");
+		setEventHandler(_b.b, "$$input", (e) => props.onChange?.(e.target.value));
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:f914f05f", "class");
+	{
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "placeholder", props.placeholder, "b:d3d4e22e", "attr");
+});
+//#endregion
+export { TextInput };

package/dist/web/ui7.js

@@ -0,0 +1,47 @@
+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];
+	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.renderEmpty?.(), "b:24ab3bd2", _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);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:73617e12", "attr");
+	_b.c = updateFreshClassName(["vx-list", props.className], _b.c, _b.b);
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	forBlock(__s, 1, _b.b, props.items, _key$0, __item$3, 8, [props], __empty$1, _b.e, true);
+});
+//#endregion
+export { List };

package/dist/web/ui8.js

@@ -0,0 +1,29 @@
+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);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_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.c = updateFreshClassName(["vx-scroll", props.className], _b.c, _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;
+		}
+	}
+	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.children, "b:a9b6a064", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { ScrollView };

package/dist/web/ui9.js

@@ -0,0 +1,27 @@
+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) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_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");
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_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");
+});
+//#endregion
+export { Image };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@octane-xplat/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/theme/tokens.css"
+  ],
+  "exports": {
+    ".": {
+      "web": "./dist/web/ui.js",
+      "native": "./dist/native/ui.js",
+      "default": "./dist/native/ui.js"
+    },
+    "./theme/tokens.css": "./src/theme/tokens.css"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@octanejs/vite-plugin": "0.1.58",
+    "@nativescript/core": "9.1.2",
+    "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"
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native"
+  }
+}

package/src/theme/tokens.css

@@ -0,0 +1,110 @@
+/* Design tokens — NS reads :root/.ns-root; web reads :root/.dark.
+   Numbers are dip (native) = px (web) by leaf convention. */
+
+:root,
+.ns-root {
+  --color-primary: #4f46e5;
+  --color-on-primary: #ffffff;
+  --color-surface: #ffffff;
+  --color-text: #111827;
+  --space-4: 16px;
+}
+
+.ns-dark,
+.dark {
+  --color-surface: #0f172a;
+  --color-text: #f8fafc;
+}
+
+/* vocabulary base styles */
+
+.vx-view,
+.vx-row {
+  display: flex;
+}
+
+.vx-view {
+  flex-direction: column;
+}
+
+.vx-row {
+  flex-direction: row;
+}
+
+.vx-pressable {
+  user-select: none;
+}
+
+/* web press feedback */
+.vx-pressable:active {
+  opacity: 0.85;
+}
+/* native press feedback (NS pseudo — dead rule on web, and vice versa) */
+.vx-pressable:pressed {
+  opacity: 0.85;
+}
+
+/* utilities (hand-written subset for the harness; Tailwind later) */
+
+.flex-1 { flex-grow: 1; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.gap-4 { gap: 16px; }
+
+.text-xl { font-size: 20px; }
+.font-bold { font-weight: bold; }
+
+.bg-primary { background-color: var(--color-primary); }
+.text-onprimary { color: var(--color-on-primary); }
+.bg-danger { background-color: #dc2626; }
+.shadow-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
+
+.btn {
+  padding-top: 12px;
+  padding-right: 20px;
+  padding-bottom: 12px;
+  padding-left: 20px;
+  border-radius: 8px;
+}
+
+/* harness experiment styles */
+
+.vx-app {
+  padding: 24px;
+  background-color: var(--color-surface);
+  color: var(--color-text);
+}
+
+.vx-app .text-xl,
+.vx-app Text,
+.vx-app label {
+  color: var(--color-text);
+}
+
+.input {
+  padding: 10px;
+  border-width: 1px;
+  border-color: #94a3b8;
+  border-radius: 6px;
+  font-size: 16px;
+}
+
+.chip {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 13px;
+}
+
+.cell {
+  padding: 12px;
+  border-bottom-width: 1px;
+  border-bottom-color: #e2e8f0;
+}
+
+.vx-list {
+  flex-grow: 1;
+}
+
+.gap-2 { gap: 8px; }