@octane-xplat/ui 0.7.2 → 0.9.0

package/README.md

@@ -7,10 +7,11 @@
 > 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,
+an agent. Xplat's target direction covers web, iOS, Android, macOS, Windows,
+and Linux; 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).
+been run on Windows, so UI support there remains unverified; Linux renders
+the DOM surface inside an experimental WebKitGTK host. See [target support](https://octane-xplat.goddardai.org/spec#choose-your-targets).
 
 To add the UI package to an existing configured app:
 

package/dist/native/Button.tsrx.js

@@ -1,6 +1,6 @@
 import { cx } from "./cx.js";
-import { Pressable } from "./Pressable.tsrx.js";
 import { ActivityIndicator } from "./ActivityIndicator.tsrx.js";
+import { Pressable } from "./Pressable.tsrx.js";
 import { defineUniversalComponent, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, warmChild } from "@nativescript-community/octane";
 //#region src/Button.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {

package/dist/native/CommandPalette.tsrx.js

@@ -3,6 +3,7 @@ import { Icon } from "./Icon.tsrx.js";
 import { TextInput } from "./TextInput.tsrx.js";
 import { Overlay } from "./Overlay.tsrx.js";
 import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalFor, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+import { Screen } from "@nativescript/core";
 //#region src/CommandPalette.tsrx
 var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
@@ -31,6 +32,7 @@ var __octaneUniversalPlan3 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
 	"props": {
+		"flexDirection": "column",
 		"horizontalAlignment": "center",
 		"verticalAlignment": "top",
 		"marginTop": 80
@@ -64,6 +66,10 @@ var CommandPalette = defineUniversalComponent("nativescript", function CommandPa
 		props.onOpenChange?.(next);
 	};
 	const shown = query ? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase())) : props.items;
+	const panelStyle = {
+		...props.style,
+		maxWidth: props.style?.maxWidth ?? Screen.mainScreen.widthDIPs * .9
+	};
 	const select = (item) => {
 		if (item.disabled) return;
 		setOpen(false);
@@ -93,7 +99,7 @@ var CommandPalette = defineUniversalComponent("nativescript", function CommandPa
 	], universalChildren("nativescript", () => {
 		return universalValue(__octaneUniversalPlan3, [
 			cx("vx-commandpalette", props.className),
-			props.style,
+			panelStyle,
 			props.id,
 			universalComponent("nativescript", TextInput, universalProps([
 				[

package/dist/native/Grid.tsrx.js

@@ -1,7 +1,12 @@
 import { cx } from "./cx.js";
+import { gridChildPlacement } from "./grid-placement.js";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { autoPlaceGridChildren, ensureGridTracks } from "./grid-auto-placement.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 //#region src/Grid.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -27,13 +32,37 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 });
 var warnedAboutGap = false;
 var Grid = defineUniversalComponent("nativescript", function Grid(props) {
+	const grid = useRef(null, _h$0);
 	if (props.gap != null && !warnedAboutGap) {
 		warnedAboutGap = true;
 		console.warn("[Grid] gap was removed; use child margins");
 	}
+	useEffect(() => {
+		const host = grid.current;
+		if (!host) return;
+		const views = [];
+		host.eachChildView((child) => {
+			views.push(child);
+			return true;
+		});
+		const placement = autoPlaceGridChildren(views.map(gridChildPlacement), props.rows, props.columns);
+		host.rows = ensureGridTracks(props.rows, placement.rowCount);
+		host.columns = ensureGridTracks(props.columns, placement.columnCount);
+		for (let index = 0; index < views.length; index++) {
+			views[index].row = placement.cells[index].row;
+			views[index].col = placement.cells[index].col;
+		}
+	}, [
+		props.children,
+		props.rows,
+		props.columns
+	], _h$1);
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		(view) => applyEscapeProps(view, props),
+		(view) => {
+			grid.current = view;
+			applyEscapeProps(view, props);
+		},
 		props.rows,
 		props.columns,
 		cx("vx-grid", props.className),

package/dist/native/KeyboardAvoiding.mobile.tsrx.js

@@ -46,10 +46,10 @@ function useKeyboardInset() {
 }
 function useAndroidResize() {
 	useEffect(() => {
-		const nativeWindow = Application.android?.foregroundActivity?.window;
+		const nativeWindow = Application.android?.foregroundActivity?.getWindow();
 		if (!nativeWindow) return;
 		const params = android.view.WindowManager.LayoutParams;
-		const previous = nativeWindow.attributes.softInputMode;
+		const previous = nativeWindow.getAttributes().softInputMode;
 		const adjusted = previous & ~params.SOFT_INPUT_MASK_ADJUST | params.SOFT_INPUT_ADJUST_RESIZE;
 		nativeWindow.setSoftInputMode(adjusted);
 		return () => nativeWindow.setSoftInputMode(previous);

package/dist/native/Markdown.tsrx.js

@@ -0,0 +1,233 @@
+import { View } from "./View.tsrx.js";
+import { Text } from "./Text.tsrx.js";
+import { Screen } from "./Screen.tsrx.js";
+import { ScrollView } from "./ScrollView.tsrx.js";
+import { defineUniversalComponent, universalChildren, universalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Markdown.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan10 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan11 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan12 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan13 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan14 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan15 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan16 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan17 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan18 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan19 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var headingClass = [
+	"text-2xl font-bold",
+	"text-xl font-semibold",
+	"text-lg font-semibold"
+];
+var Inlines = defineUniversalComponent("nativescript", function Inlines(props) {
+	const out = [];
+	for (const n of props.nodes ?? []) switch (n.t) {
+		case "code":
+			out.push(universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ fontFamily: "ui-monospace" }
+			]], n.text))]));
+			break;
+		case "bold":
+			out.push(universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"font-bold"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					n.children
+				]]))]);
+			})))]));
+			break;
+		case "em":
+			out.push(universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ fontStyle: "italic" }
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					n.children
+				]]))]);
+			})))]));
+			break;
+		case "link":
+			out.push(universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"style",
+				{ textDecorationLine: "underline" }
+			]], n.text))]));
+			break;
+		default: out.push(n.text);
+	}
+	return out;
+}, { "module": "@nativescript-community/octane" });
+var Markdown = defineUniversalComponent("nativescript", function Markdown(props) {
+	return universalValue(__octaneUniversalPlan16, [universalComponent("nativescript", View, universalProps([[
+		"set",
+		"className",
+		"gap-3"
+	]], (props.data?.children ?? []).map((node) => {
+		switch (node.t) {
+			case "h": return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				headingClass[node.depth - 1] ?? "font-semibold"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan6, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "p": return universalValue(__octaneUniversalPlan9, [universalComponent("nativescript", Text, universalProps([], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "code": return universalValue(__octaneUniversalPlan10, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"text-sm"
+			], [
+				"set",
+				"style",
+				{ fontFamily: "ui-monospace" }
+			]], node.text))]);
+			case "list": return node.items.map((item, i) => universalValue(__octaneUniversalPlan12, [universalComponent("nativescript", Text, universalProps([], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan11, [node.ordered ? `${i + 1}. ` : "• ", universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					item
+				]]))]);
+			})))]));
+			case "quote": return universalValue(__octaneUniversalPlan14, [universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"text-muted"
+			], [
+				"set",
+				"style",
+				{ fontStyle: "italic" }
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan13, [universalComponent("nativescript", Inlines, universalProps([[
+					"set",
+					"nodes",
+					node.children
+				]]))]);
+			})))]);
+			case "hr": return universalValue(__octaneUniversalPlan15, [universalComponent("nativescript", View, universalProps([[
+				"set",
+				"style",
+				{
+					height: 1,
+					backgroundColor: "var(--color-border)"
+				}
+			]]))]);
+			default: return null;
+		}
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var MarkdownScreen = defineUniversalComponent("nativescript", function MarkdownScreen(props) {
+	return universalValue(__octaneUniversalPlan19, [universalComponent("nativescript", Screen, universalProps([[
+		"set",
+		"className",
+		"vx-app"
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan18, [universalComponent("nativescript", ScrollView, universalProps([[
+			"set",
+			"style",
+			{ padding: 16 }
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan17, [universalComponent("nativescript", Markdown, universalProps([[
+				"set",
+				"data",
+				props.data
+			]]))]);
+		})))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Markdown, MarkdownScreen };

package/dist/native/Overlay.tsrx.js

@@ -1,14 +1,16 @@
 import { cx } from "./cx.js";
-import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { rootLayoutFor } from "./root-layout.mobile.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
 //#region src/Overlay.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "range",
 	"children": [{
@@ -33,19 +35,12 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 	useEffect(() => {
 		const current = shown.current;
 		if (!props.open) {
-			if (!current) return;
-			current.dismissOnClose = false;
-			shown.current = null;
-			const rl = rootLayout();
-			if (rl && rl?.hasChild?.(current.host)) rl.close(current.host).then(() => current.root.unmount?.(), (error) => {
-				console.error("[Overlay] close failed", error);
-				current.root.unmount?.();
-			});
-			else current.root.unmount?.();
+			current?.lifetime.close();
 			return;
 		}
 		if (current) {
 			current.root.render(OverlayBody, { children: props.children });
+			current.unbindTheme?.();
 			current.unbindTheme = applyThemeClasses(current.host, cx("vx-overlay-host", props.className));
 			if (props.style) Object.assign(current.host.style, props.style);
 			Object.assign(current.host, isIOS ? props.ios : isAndroid ? props.android : void 0);
@@ -60,31 +55,24 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Overlay", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
 		const opened = {
 			host,
 			root,
-			dismissOnClose: true,
+			lifetime,
 			unbindTheme
 		};
+		lifetime.own(() => opened.unbindTheme?.());
 		shown.current = opened;
 		root.render(OverlayBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindTheme?.();
-			root.unmount?.();
-			if (opened.dismissOnClose) dismiss.current?.();
-		});
-		const open = () => rl.open(host, props.shadeCover ? { shadeCover: {
+		lifetime.open(props.shadeCover ? { shadeCover: {
 			opacity: .45,
 			color: "#000000",
 			tapToClose: true
-		} } : {}).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			console.error("[Overlay] open failed", error);
-			root.unmount?.();
-		});
-		if (rl.hasChild?.(host)) rl.close(host).then(open, (error) => console.error("[Overlay] stale host close failed", error));
-		else open();
+		} } : {});
 	}, [
 		props.open,
 		props.children,
@@ -94,6 +82,7 @@ var Overlay = defineUniversalComponent("nativescript", function Overlay(props) {
 		props.ios,
 		props.android
 	], _h$3);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$4);
 	return universalValue(__octaneUniversalPlan1, [(v) => {
 		hostView.current = v;
 	}, {

package/dist/native/Pagination.tsrx.js

@@ -1,12 +1,8 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
-import { defineUniversalComponent, universalFor, universalPlan, universalValue } from "@nativescript-community/octane";
+import { defineUniversalComponent, universalFor, universalIf, universalPlan, universalValue } from "@nativescript-community/octane";
 //#region src/Pagination.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": []
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "label",
 	"props": {
@@ -14,7 +10,7 @@ var __octaneUniversalPlan1 = universalPlan("nativescript", {
 		"text": "…"
 	}
 });
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
 	"bindings": [["className", 0], ["onTap", 1]],
@@ -24,6 +20,10 @@ var __octaneUniversalPlan2 = universalPlan("nativescript", {
 		"bindings": [["text", 2]]
 	}]
 });
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
 var __octaneUniversalPlan3 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
@@ -93,12 +93,15 @@ var Pagination = defineUniversalComponent("nativescript", function Pagination(pr
 		props.style,
 		() => go(current - 1),
 		universalFor(pages, (e, __octaneUniversalIndex) => e.key, (e, __octaneUniversalIndex) => {
-			e.page == null ? universalValue(__octaneUniversalPlan1, []) : universalValue(__octaneUniversalPlan2, [
-				cx("vx-page-btn", e.page === current && "vx-page-btn--on"),
-				() => go(e.page),
-				String(e.page)
-			]);
-			return universalValue(__octaneUniversalPlan0, []);
+			return universalValue(__octaneUniversalPlan2, [universalIf(e.page == null, () => {
+				return universalValue(__octaneUniversalPlan0, []);
+			}, () => {
+				return universalValue(__octaneUniversalPlan1, [
+					cx("vx-page-btn", e.page === current && "vx-page-btn--on"),
+					() => go(e.page),
+					String(e.page)
+				]);
+			})]);
 		}),
 		() => go(current + 1)
 	]);

package/dist/native/PinInput.tsrx.js

@@ -1,9 +1,13 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { TextInput } from "./TextInput.tsrx.js";
-import { defineUniversalComponent, hookSlots, universalComponent, universalFor, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, universalComponent, universalFor, universalPlan, universalProps, universalValue, useEffect, useRef, useState } from "@nativescript-community/octane";
 //#region src/PinInput.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
@@ -28,7 +32,15 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 	const [internal, setInternal] = useState("", _h$0);
 	const controlled = props.value !== void 0;
 	const value = controlled ? props.value : internal;
-	const handles = [];
+	const handles = useRef([], _h$1);
+	const pendingFocus = useRef(null, _h$2);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value], _h$3);
 	const setValue = (next) => {
 		const clipped = next.slice(0, length);
 		if (!controlled) setInternal(clipped);
@@ -37,10 +49,16 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 	};
 	const cellValue = (i) => value[i] ?? "";
 	const enter = (i, text) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 	return universalValue(__octaneUniversalPlan1, [
 		(v) => applyEscapeProps(v, props),
@@ -67,7 +85,7 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 				[
 					"set",
 					"editable",
-					!props.disabled
+					!props.disabled && i <= value.length
 				],
 				[
 					"set",
@@ -83,7 +101,7 @@ var PinInput = defineUniversalComponent("nativescript", function PinInput(props)
 					"set",
 					"bind",
 					(h) => {
-						handles[i] = h;
+						handles.current[i] = h;
 					}
 				]
 			]))]);