@octane-xplat/ui 0.7.2 → 0.7.3

package/src/tap-to-blur.ios.ts

@@ -0,0 +1,90 @@
+/** Tap-outside-to-blur: iOS keeps a focused UITextField/UITextView as first
+ *  responder until something else takes it, so a tap on blank chrome never
+ *  dismisses the keyboard on its own.
+ *
+ *  iOS: a single window-level UITapGestureRecognizer (ref-counted across
+ *  attach calls) sees every touch in the app window — popups/sheets included —
+ *  where a recognizer on an intermediate container proved unreliable. On each
+ *  tap we hit-test and resign first responder unless the hit view is an
+ *  editable text view (otherwise the field would focus-then-blur in the same
+ *  tap — recognizers fire on touch-up, after the field's touch-down focus).
+ *  Keyboard taps live in a separate UIWindow, so they never reach it.
+ *  `cancelsTouchesInView` stays false so taps still reach buttons. */
+export function attachTapToBlur(view: any): () => void {
+	const marker = '__xplatTapToBlur';
+	if (!view || view[marker]) {return () => {};}
+	view[marker] = true;
+
+	iosAttach();
+	return () => {
+		view[marker] = false;
+		iosDetach();
+	};
+}
+
+let iosCount = 0;
+let iosTarget: any = null;
+let iosRecognizer: any = null;
+let iosWindow: any = null;
+
+function iosAttach() {
+	iosCount++;
+	if (iosRecognizer) {return;}
+	const appWin = appWindow();
+	if (!appWin) {return;}
+	iosWindow = appWin;
+	// Resolve Objective-C bridge globals only when the iOS view is attached.
+	@NativeClass
+	class TapToBlurRecognizerTarget extends NSObject implements UIGestureRecognizerDelegate {
+		static ObjCProtocols = [UIGestureRecognizerDelegate]
+		static ObjCExposedMethods = {
+			tap: { returns: interop.types.void, params: [UITapGestureRecognizer] },
+		};
+
+		gestureRecognizerShouldReceiveTouch(_recognizer: any, touch: any) {
+			let hit = touch.view
+			while (hit) {
+				const textField = hit.isKindOfClass(UITextField.class())
+				const textView = hit.isKindOfClass(UITextView.class())
+				if (textField || textView) {
+					return false
+				}
+				hit = hit.superview
+			}
+			return true
+		}
+
+		tap(_recognizer: any) {
+			iosWindow.endEditing(true);
+		}
+	}
+
+	iosTarget = TapToBlurRecognizerTarget.new();
+	iosRecognizer = UITapGestureRecognizer.alloc().initWithTargetAction(iosTarget, 'tap');
+	iosRecognizer.delegate = iosTarget;
+	iosRecognizer.cancelsTouchesInView = false;
+	appWin.addGestureRecognizer(iosRecognizer);
+}
+
+function iosDetach() {
+	iosCount--;
+	if (iosCount > 0 || !iosRecognizer) {return;}
+	iosWindow?.removeGestureRecognizer(iosRecognizer);
+	iosRecognizer = null;
+	iosTarget = null;
+	iosWindow = null;
+}
+
+function appWindow() {
+	const scenes = UIApplication.sharedApplication.connectedScenes;
+	// connectedScenes is an NSSet — `allObjects` marshals to a JS array.
+	for (const scene of (scenes as any).allObjects ?? []) {
+		if (scene instanceof UIWindowScene) {
+			for (const w of (scene.windows as any)?.allObjects ?? scene.windows ?? []) {
+				if (w.isKeyWindow) {return w;}
+			}
+		}
+	}
+
+	return UIApplication.sharedApplication.keyWindow;
+}

package/src/tap-to-blur.mobile.ts

@@ -1,108 +1,26 @@
 import { Application } from '@nativescript/core';
 
-/** Tap-outside-to-blur: iOS keeps a focused UITextField/UITextView as first
- *  responder until something else takes it, so a tap on blank chrome never
- *  dismisses the keyboard on its own.
- *
- *  iOS: a single window-level UITapGestureRecognizer (ref-counted across
- *  attach calls) sees every touch in the app window — popups/sheets included —
- *  where a recognizer on an intermediate container proved unreliable. On each
- *  tap we hit-test and resign first responder unless the hit view is an
- *  editable text view (otherwise the field would focus-then-blur in the same
- *  tap — recognizers fire on touch-up, after the field's touch-down focus).
- *  Keyboard taps live in a separate UIWindow, so they never reach it.
- *  `cancelsTouchesInView` stays false so taps still reach buttons.
- *
- *  Android: hides the soft keyboard from the currently focused view when a
- *  tap lands on the attached container. */
+/** Hide the Android soft keyboard when the user taps the attached view. */
 export function attachTapToBlur(view: any): () => void {
 	const marker = '__xplatTapToBlur';
 	if (!view || view[marker]) {return () => {};}
 	view[marker] = true;
 
-	if (Application.ios) {
-		iosAttach();
-		return () => {
-			view[marker] = false;
-			iosDetach();
-		};
+	if (!Application.android) {
+		return () => { view[marker] = false; };
 	}
 
-	if (Application.android) {
-		const handler = (_args: any) => {
-			const activity = Application.android.foregroundActivity;
-			const focused = activity?.currentFocus;
-			if (!focused) {return;}
-			const imm = activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE);
-			imm?.hideSoftInputFromWindow(focused.getWindowToken(), 0);
-		};
-
-		view.on('tap', handler);
-		return () => {
-			view[marker] = false;
-			view.off('tap', handler);
-		};
-	}
+	const handler = (_args: any) => {
+		const activity = Application.android.foregroundActivity;
+		const focused = activity?.currentFocus;
+		if (!focused) {return;}
+		const imm = activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE);
+		imm?.hideSoftInputFromWindow(focused.getWindowToken(), 0);
+	};
 
+	view.on('tap', handler);
 	return () => {
 		view[marker] = false;
+		view.off('tap', handler);
 	};
 }
-
-let iosCount = 0;
-let iosTarget: any = null;
-let iosRecognizer: any = null;
-let iosWindow: any = null;
-
-function iosAttach() {
-	iosCount++;
-	if (iosRecognizer) {return;}
-	const appWin = appWindow();
-	if (!appWin) {return;}
-	iosWindow = appWin;
-
-	const Owner = class extends NSObject {
-		static ObjCExposedMethods = {
-			tap: { returns: interop.types.void, params: [UITapGestureRecognizer] },
-		};
-		tap(recognizer: any) {
-			const point = recognizer.locationInView(iosWindow);
-			// hitTest can land on a text field's internal subview — walk up.
-			let hit = iosWindow.hitTest(point, null);
-			while (hit) {
-				if (hit instanceof UITextField || hit instanceof UITextView) {return;}
-				hit = hit.superview;
-			}
-
-			iosWindow.endEditing(true);
-		}
-	};
-
-	iosTarget = Owner.new();
-	iosRecognizer = UITapGestureRecognizer.alloc().initWithTargetAction(iosTarget, 'tap');
-	iosRecognizer.cancelsTouchesInView = false;
-	appWin.addGestureRecognizer(iosRecognizer);
-}
-
-function iosDetach() {
-	iosCount--;
-	if (iosCount > 0 || !iosRecognizer) {return;}
-	iosWindow?.removeGestureRecognizer(iosRecognizer);
-	iosRecognizer = null;
-	iosTarget = null;
-	iosWindow = null;
-}
-
-function appWindow() {
-	const scenes = UIApplication.sharedApplication.connectedScenes;
-	// connectedScenes is an NSSet — `allObjects` marshals to a JS array.
-	for (const scene of (scenes as any).allObjects ?? []) {
-		if (scene instanceof UIWindowScene) {
-			for (const w of (scene.windows as any)?.allObjects ?? scene.windows ?? []) {
-				if (w.isKeyWindow) {return w;}
-			}
-		}
-	}
-
-	return UIApplication.sharedApplication.keyWindow;
-}

package/src/theme/tokens.css

@@ -168,6 +168,8 @@ img {
 
 .vx-stack > * {
 	grid-area: 1 / 1;
+	horizontal-align: left;
+	vertical-align: top;
 }
 
 /* xplat-web-only:start — Absolute's native leaf is absolutelayout; CSS
@@ -316,6 +318,11 @@ img {
 	background-color: #000;
 }
 
+.vx-video > * {
+	horizontal-align: stretch;
+	vertical-align: stretch;
+}
+
 .vx-video-centerbtn {
 	width: 56px;
 	height: 56px;
@@ -617,6 +624,9 @@ button {
 	line-height: 20px;
 	color: var(--color-onprimary);
 }
+.vx-checkbox--on .vx-checkbox-check {
+	color: var(--color-onprimary);
+}
 .vx-checkbox-label {
 	margin-left: 8px;
 }
@@ -1212,10 +1222,6 @@ input.vx-search-field::-webkit-search-cancel-button {
 /* CommandPalette — panel centered by the overlay layer. */
 .vx-commandpalette {
 	width: 360px;
-	/* vw, not %: the overlay-content wrapper shrink-wraps the palette, so a
-	 * plain % would resolve against the palette's own width (clamping an
-	 * explicit style.width to 90% of itself). */
-	max-width: 90vw;
 	padding: 8px;
 	border-width: 1px;
 	border-color: var(--color-border);
@@ -1224,6 +1230,13 @@ input.vx-search-field::-webkit-search-cancel-button {
 	background-color: var(--color-surface);
 	color: var(--color-text);
 }
+/* xplat-web-only:start — native uses Screen.mainScreen.widthDIPs */
+.vx-commandpalette {
+	/* The overlay-content wrapper shrink-wraps the palette, so % would resolve
+	 * against the palette itself instead of the available viewport. */
+	max-width: 90vw;
+}
+/* xplat-web-only:end */
 .vx-cmdk-search {
 	margin-bottom: 4px;
 }
@@ -1615,25 +1628,28 @@ input.vx-search-field::-webkit-search-cancel-button {
 	gap: 24px;
 }
 
-/* line-height is REQUIRED on native: without it a Label's measured height
-   misses the font's line metrics, and Android clips the descenders/bottom
-   of the glyphs (observed: section-labels 21–29px bounds for 12sp text at
-   3.25x). Tailwind pairs every text-* size with a leading, same here. */
+/* Native Labels keep their natural font height even with line-height set, so
+   min-height aligns utilities whose natural metrics fall below their leading.
+   Tailwind pairs every text-* size with a leading, same here. */
 .text-2xl {
 	font-size: 28px;
 	line-height: 36px;
+	min-height: 36px;
 }
 .text-xl {
 	font-size: 20px;
 	line-height: 28px;
+	min-height: 28px;
 }
 .text-lg {
 	font-size: 18px;
 	line-height: 28px;
+	min-height: 28px;
 }
 .text-sm {
 	font-size: 13px;
 	line-height: 20px;
+	min-height: 20px;
 }
 .font-bold {
 	font-weight: bold;

package/src/useMeasure.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useState } from 'octane';
+import { useCallback, useEffect, useRef, useState } from 'octane';
 import type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props';
 
 function readBounds(view: any): MeasureBounds | null {
@@ -11,14 +11,12 @@ function readBounds(view: any): MeasureBounds | null {
 
 /** Binds to a NativeScript view and observes screen-relative DIP bounds by default. */
 export function useMeasure(options: UseMeasureOptions = {}): MeasureResult {
-	const [view, setView] = useState<any>(null);
 	const [bounds, setBounds] = useState<MeasureBounds | null>(null);
+	const detach = useRef<(() => void) | null>(null);
 	const observe = options.observe ?? true;
-	const bind = useCallback((next: any) => {
-		setView((current: any) => current === next ? current : next);
-	}, []);
-
-	useEffect(() => {
+	const bind = useCallback((view: any) => {
+		detach.current?.();
+		detach.current = null;
 		if (!view) {
 			setBounds(null);
 			return;
@@ -28,39 +26,40 @@ export function useMeasure(options: UseMeasureOptions = {}): MeasureResult {
 			const next = readBounds(view);
 			// Fresh object each read — skip the setState when nothing moved
 			// or the re-render → layoutChanged → update loop never ends.
-			setBounds((prev: MeasureBounds | null) =>
-				prev && next &&
-				prev.x === next.x && prev.y === next.y &&
-				prev.width === next.width && prev.height === next.height
+			setBounds((prev: MeasureBounds | null) => {
+				return prev && next &&
+					prev.x === next.x && prev.y === next.y &&
+					prev.width === next.width && prev.height === next.height
 					? prev
-					: next,
-			);
+					: next;
+			});
 		};
 
-		const onLoaded = update;
-		view.on?.('loaded', onLoaded);
+		view.on?.('loaded', update);
 		update();
+		const scrollParents: any[] = [];
 		if (observe) {
 			view.on?.('layoutChanged', update);
 			let parent = view.parent;
 			while (parent) {
 				parent.on?.('scroll', update);
+				scrollParents.push(parent);
 				parent = parent.parent;
 			}
 		}
 
-		return () => {
-			view.off?.('loaded', onLoaded);
+		detach.current = () => {
+			view.off?.('loaded', update);
 			if (observe) {
 				view.off?.('layoutChanged', update);
-				let parent = view.parent;
-				while (parent) {
+				for (const parent of scrollParents) {
 					parent.off?.('scroll', update);
-					parent = parent.parent;
 				}
 			}
 		};
-	}, [view, observe]);
+	}, [observe]);
+
+	useEffect(() => () => detach.current?.(), []);
 
 	return { bind, bounds };
 }

package/types/generated/.tsrx-typegen-manifest.json

@@ -169,6 +169,8 @@
     "cx.d.ts",
     "escape-props.d.ts",
     "escape-props.web.d.ts",
+    "grid-auto-placement.d.ts",
+    "grid-placement.d.ts",
     "icons.d.ts",
     "index.d.ts",
     "index.linux.d.ts",
@@ -223,6 +225,7 @@
     "styled.d.ts",
     "styled.web.d.ts",
     "svg.mobile.d.ts",
+    "tap-to-blur.ios.d.ts",
     "tap-to-blur.mobile.d.ts",
     "text-write.d.ts",
     "text-write.web.d.ts",

package/types/generated/Grid.d.ts

@@ -1,3 +1,2 @@
-/**  @jsxImportSource @nativescript-community/octane */
 import type { GridProps } from './props.js';
 export declare function Grid(props: GridProps): unknown;

package/types/generated/escape-props.d.ts

@@ -4,6 +4,10 @@ export declare function applyEscapeProps(view: any, props: {
     ios?: any;
     android?: any;
     modifiers?: readonly NativeModifier[];
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
 }): void;
 /** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
 export declare function nativeAccessibilityRole(role?: Role): string | undefined;

package/types/generated/grid-auto-placement.d.ts

@@ -0,0 +1,13 @@
+import type { GridChildPlacement } from './grid-placement.js';
+export interface GridCell {
+    row: number;
+    col: number;
+}
+export interface GridAutoPlacement {
+    cells: GridCell[];
+    rowCount: number;
+    columnCount: number;
+}
+/** Match CSS Grid's row-flow placement for NativeScript GridLayout children. */
+export declare function autoPlaceGridChildren(items: readonly GridChildPlacement[], rowTracks?: string, columnTracks?: string): GridAutoPlacement;
+export declare function ensureGridTracks(spec: string | undefined, requiredCount: number): string;

package/types/generated/grid-placement.d.ts

@@ -0,0 +1,5 @@
+import type { LayoutChildProps } from './props.js';
+export type GridChildPlacement = Pick<LayoutChildProps, 'row' | 'col' | 'rowSpan' | 'colSpan'>;
+/** Keep the authored Grid placement next to its mounted NativeScript view. */
+export declare function rememberGridChildPlacement(view: unknown, props: GridChildPlacement): void;
+export declare function gridChildPlacement(view: unknown): GridChildPlacement;

package/types/generated/tap-to-blur.ios.d.ts

@@ -0,0 +1,13 @@
+/** Tap-outside-to-blur: iOS keeps a focused UITextField/UITextView as first
+ *  responder until something else takes it, so a tap on blank chrome never
+ *  dismisses the keyboard on its own.
+ *
+ *  iOS: a single window-level UITapGestureRecognizer (ref-counted across
+ *  attach calls) sees every touch in the app window — popups/sheets included —
+ *  where a recognizer on an intermediate container proved unreliable. On each
+ *  tap we hit-test and resign first responder unless the hit view is an
+ *  editable text view (otherwise the field would focus-then-blur in the same
+ *  tap — recognizers fire on touch-up, after the field's touch-down focus).
+ *  Keyboard taps live in a separate UIWindow, so they never reach it.
+ *  `cancelsTouchesInView` stays false so taps still reach buttons. */
+export declare function attachTapToBlur(view: any): () => void;

package/types/generated/tap-to-blur.mobile.d.ts

@@ -1,16 +1,2 @@
-/** Tap-outside-to-blur: iOS keeps a focused UITextField/UITextView as first
- *  responder until something else takes it, so a tap on blank chrome never
- *  dismisses the keyboard on its own.
- *
- *  iOS: a single window-level UITapGestureRecognizer (ref-counted across
- *  attach calls) sees every touch in the app window — popups/sheets included —
- *  where a recognizer on an intermediate container proved unreliable. On each
- *  tap we hit-test and resign first responder unless the hit view is an
- *  editable text view (otherwise the field would focus-then-blur in the same
- *  tap — recognizers fire on touch-up, after the field's touch-down focus).
- *  Keyboard taps live in a separate UIWindow, so they never reach it.
- *  `cancelsTouchesInView` stays false so taps still reach buttons.
- *
- *  Android: hides the soft keyboard from the currently focused view when a
- *  tap lands on the attached container. */
+/** Hide the Android soft keyboard when the user taps the attached view. */
 export declare function attachTapToBlur(view: any): () => void;