@octane-xplat/ui 0.7.2 → 0.7.3

package/dist/native/useMeasure.tsrx.js

@@ -1,4 +1,4 @@
-import { hookSlots, useCallback, useEffect, useState } from "@nativescript-community/octane";
+import { hookSlots, useCallback, useEffect, useRef, useState } from "@nativescript-community/octane";
 //#region src/useMeasure.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(4);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
@@ -17,44 +17,43 @@ function readBounds(view) {
 	};
 }
 function useMeasure(options = {}) {
-	const [view, setView] = useState(null, _h$0);
-	const [bounds, setBounds] = useState(null, _h$1);
+	const [bounds, setBounds] = useState(null, _h$0);
+	const detach = useRef(null, _h$1);
 	const observe = options.observe ?? true;
-	const bind = useCallback((next) => {
-		setView((current) => current === next ? current : next);
-	}, [], _h$2);
-	useEffect(() => {
+	const bind = useCallback((view) => {
+		detach.current?.();
+		detach.current = null;
 		if (!view) {
 			setBounds(null);
 			return;
 		}
 		const update = () => {
 			const next = readBounds(view);
-			setBounds((prev) => prev && next && prev.x === next.x && prev.y === next.y && prev.width === next.width && prev.height === next.height ? prev : next);
+			setBounds((prev) => {
+				return prev && next && prev.x === next.x && prev.y === next.y && prev.width === next.width && prev.height === next.height ? prev : next;
+			});
 		};
-		const onLoaded = update;
-		view.on?.("loaded", onLoaded);
+		view.on?.("loaded", update);
 		update();
+		const scrollParents = [];
 		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) {
-					parent.off?.("scroll", update);
-					parent = parent.parent;
-				}
+				for (const parent of scrollParents) parent.off?.("scroll", update);
 			}
 		};
-	}, [view, observe], _h$3);
+	}, [observe], _h$2);
+	useEffect(() => () => detach.current?.(), [], _h$3);
 	return {
 		bind,
 		bounds

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "b6a64d5b-cfff-418e-921b-443efbc3bad2",
+  "buildId": "0ba2ee91-551d-42cf-a6c9-dedc87a8a53b",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Cross-platform UI for Octane xplat — shared primitives, stacks, routes and theming across web (DOM), iOS and Android (NativeScript)",
   "keywords": [
     "octane",

package/src/CommandPalette.tsrx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { useState } from 'octane';
+import { Screen } from '@nativescript/core';
 import type { CommandPaletteProps, MenuItem } from "./props";
 import { cx } from "./cx";
 import { Overlay } from './Overlay.tsrx';
@@ -19,6 +20,10 @@ export function CommandPalette(props: CommandPaletteProps) @{
 	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 * 0.9,
+	};
 
 	const select = (item: MenuItem) => {
 		if (item.disabled) return;
@@ -29,8 +34,9 @@ export function CommandPalette(props: CommandPaletteProps) @{
 	<Overlay open={props.open} shadeCover={true} onDismiss={() => setOpen(false)} className="vx-cmdk-layer">
 		<flexboxlayout
 			className={cx('vx-commandpalette', props.className)}
-			style={props.style}
+			style={panelStyle}
 			id={props.id}
+			flexDirection="column"
 			horizontalAlignment="center"
 			verticalAlignment="top"
 			marginTop={80}

package/src/Grid.tsrx

@@ -1,20 +1,49 @@
 /** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
 import type { GridProps } from './props';
 import { cx } from './cx';
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { autoPlaceGridChildren, ensureGridTracks } from './grid-auto-placement';
+import { gridChildPlacement } from './grid-placement';
 
 let warnedAboutGap = false;
 
 export function Grid(props: GridProps) @{
+	const grid = useRef<any>(null);
 	const deprecatedGap = (props as GridProps & { gap?: number | string }).gap;
 	if (deprecatedGap != null && !warnedAboutGap) {
 		warnedAboutGap = true;
 		console.warn('[Grid] gap was removed; use child margins');
 	}
 
+	useEffect(() => {
+		const host = grid.current;
+		if (!host) return;
+
+		const views: any[] = [];
+		host.eachChildView((child: any) => {
+			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]);
+
 	<gridlayout
 		id={props.id}
-		ref={(view: any) => applyEscapeProps(view, props)}
+		ref={(view: any) => {
+			grid.current = view;
+			applyEscapeProps(view, props);
+		}}
 		rows={props.rows}
 		columns={props.columns}
 		className={cx('vx-grid', props.className)}

package/src/Pagination.tsrx

@@ -36,11 +36,13 @@ export function Pagination(props: PaginationProps) @{
 	>
 		<flexboxlayout className="vx-page-btn" onTap={() => go(current - 1)}><label text="‹" /></flexboxlayout>
 		@for (const e of pages; key e.key) {
-			{e.page == null
-				? <label className="vx-page-ellipsis" text="…" />
-				: <flexboxlayout className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')} onTap={() => go(e.page!)}>
+			@if (e.page == null) {
+				<label className="vx-page-ellipsis" text="…" />
+			} @else {
+				<flexboxlayout className={cx('vx-page-btn', e.page === current && 'vx-page-btn--on')} onTap={() => go(e.page!)}>
 					<label text={String(e.page)} />
-				</flexboxlayout>}
+				</flexboxlayout>
+			}
 		}
 		<flexboxlayout className="vx-page-btn" onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
 	</flexboxlayout>

package/src/Popover.tsrx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { useEffect, useRef, useState } from 'octane';
-import { GridLayout } from '@nativescript/core';
+import { GridLayout, isIOS, Screen } from '@nativescript/core';
 import { createNativeScriptRoot } from '@nativescript-community/octane';
 import type { UniversalComponent } from 'octane/universal';
 import type { PopoverProps } from './props';
@@ -38,13 +38,19 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 			},
 			props.placement ?? 'bottom',
 		);
-
+		const insets = isIOS ? panelRef.current?.parent?.getSafeAreaInsets?.() : undefined;
+		const scale = isIOS ? Number(Screen.mainScreen.scale) || 1 : 1;
+		const panelPosition = {
+			...next,
+			left: next.left - Number(insets?.left ?? 0) / scale,
+			top: next.top - Number(insets?.top ?? 0) / scale,
+		};
 		setPosition((current) =>
-			current?.left === next.left &&
-			current?.top === next.top &&
-			current?.placement === next.placement
+			current?.left === panelPosition.left &&
+			current?.top === panelPosition.top &&
+			current?.placement === panelPosition.placement
 				? current
-				: next,
+				: panelPosition,
 		);
 
 		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
@@ -73,6 +79,14 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 		};
 	}, [props.open, props.anchorView, props.placement, props.children, props.style]);
 
+	useEffect(() => {
+		if (position) {
+			const panel = panelRef.current;
+			const parent = panel?.parent;
+			parent?.requestLayout?.();
+		}
+	}, [position]);
+
 	useEffect(() => {
 		applyNativeProps(panelRef.current, props);
 	}, [props.ios, props.android, settled]);

package/src/Screen.tsrx

@@ -3,7 +3,7 @@ import type { ScreenProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
 import { registerRootLayout, unregisterRootLayout } from "./root-layout.mobile";
-import { attachTapToBlur } from "./tap-to-blur.mobile";
+import { attachTapToBlur } from "./tap-to-blur";
 // The screen shell is a RootLayout so RootLayout.open() can layer overlays
 // over it (decision #22). Self-registers on loaded/unloaded — overlay and
 // sheet services mount on the most recently mounted shell (topRootLayout).

package/src/Sheet.tsrx

@@ -9,7 +9,7 @@ import { applyThemeClasses } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
 import { attachSheetDetents } from './sheet-detents';
 import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile';
-import { attachTapToBlur } from './tap-to-blur.mobile';
+import { attachTapToBlur } from './tap-to-blur';
 
 function SheetBody(props: { children?: any }) @{
 	<>{props.children}</>

package/src/Slider.tsrx

@@ -22,14 +22,20 @@ export function Slider(props: SliderProps) @{
 	const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
 	const width = measure.bounds?.width ?? 0;
 
-	// Stable ref identity — an inline ref closure re-fires ref(null)/ref(el)
-	// per render, which bounces useMeasure's setView and loops forever.
+	// Keep one ref identity so native measurement listeners stay attached to
+	// the same host across rerenders.
 	const host = useRef<any>(null);
 	const bindHost = useCallback((el: any) => {
 		host.current = el;
 		measure.bind(el);
 	}, []);
 
+	const trackHeight = 4;
+	const thumbSize = 20;
+	const trackTop = (28 - trackHeight) / 2;
+	const thumbTop = (28 - thumbSize) / 2;
+	const thumbLeft = Math.min(Math.max(ratio * width - thumbSize / 2, 0), Math.max(width - thumbSize, 0));
+
 	useEffect(() => {
 		applyNativeProps(host.current, props);
 	});
@@ -52,7 +58,7 @@ export function Slider(props: SliderProps) @{
 		}
 	});
 
-	<gridlayout
+	<absolutelayout
 		id={props.id}
 		className={cx('vx-slider', props.className)}
 		style={props.style}
@@ -60,12 +66,8 @@ export function Slider(props: SliderProps) @{
 		onPan={onPan}
 		ref={bindHost}
 	>
-		<flexboxlayout className="vx-slider-track" />
-		<flexboxlayout className="vx-slider-fill" horizontalAlignment="left" style={{ width: ratio * width }} />
-		<flexboxlayout
-			className="vx-slider-thumb"
-			horizontalAlignment="left"
-			style={{ marginLeft: Math.min(Math.max(ratio * width - 10, 0), Math.max(width - 20, 0)) }}
-		/>
-	</gridlayout>
+		<flexboxlayout className="vx-slider-track" style={{ width, translateY: trackTop }} />
+		<flexboxlayout className="vx-slider-fill" style={{ width: ratio * width, translateY: trackTop }} />
+		<flexboxlayout className="vx-slider-thumb" style={{ translateX: thumbLeft, translateY: thumbTop }} />
+	</absolutelayout>
 }

package/src/Text.tsrx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { createContext, useContext } from 'octane';
+import { Application } from '@nativescript/core';
 import type { TextProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
@@ -24,8 +25,41 @@ function TextScope(props: { children?: any }) {
 
 export function Text(props: TextProps) @{
 	const inText = useContext(InText);
+	const fontWeightValue = String(props.style?.fontWeight ?? '').toLowerCase();
+	const namedWeights: Record<string, number> = {
+		normal: 400,
+		bold: 700,
+		thin: 100,
+		'extra-light': 200,
+		light: 300,
+		medium: 500,
+		'semi-bold': 600,
+		'extra-bold': 800,
+		black: 900,
+	};
+	const fontWeight = /^\d+$/.test(fontWeightValue)
+		? Number(fontWeightValue)
+		: namedWeights[fontWeightValue];
+	const lineHeight = props.style?.lineHeight;
+	// UIFontDescriptor resolves variable fonts to the regular axis default on
+	// iOS. Set wght explicitly so CSS fontWeight selects the matching instance.
 	const textStyle = {
 		...props.style,
+		...((Application.ios || Application.android) &&
+		typeof lineHeight === 'number' &&
+		Number.isFinite(lineHeight) &&
+		lineHeight > 0 &&
+		props.style?.height == null &&
+		props.style?.minHeight == null
+			? { minHeight: lineHeight }
+			: {}),
+		...(Application.ios &&
+		props.style?.fontVariationSettings == null &&
+		fontWeight !== undefined &&
+		fontWeight >= 100 &&
+		fontWeight <= 900
+			? { fontVariationSettings: `'wght' ${fontWeight}` }
+			: {}),
 		// Clamped text must be allowed to shrink — the shared shrink:0 default
 		// would let the label overflow its row instead of truncating.
 		...(props.ellipsize || props.numberOfLines ? { flexShrink: 1 } : {}),

package/src/WebView.tsrx

@@ -24,6 +24,22 @@ function reportContentLayout(view: any, props: WebViewProps) {
 	}
 }
 
+function applyNativeScrollEnabled(view: any, enabled: boolean | undefined) {
+	if (isIOS) {
+		const scrollView = view?.ios?.scrollView
+		if (scrollView) scrollView.scrollEnabled = enabled !== false
+	} else if (isAndroid) {
+		const nativeView = view?.android
+		if (!nativeView?.setOnTouchListener) return
+		nativeView.setOnTouchListener(enabled === false
+			? new android.view.View.OnTouchListener({
+					onTouch: (_view: any, event: any) =>
+						event.getActionMasked() === android.view.MotionEvent.ACTION_MOVE,
+				})
+			: null)
+	}
+}
+
 /** Embedded web document — NS <webview> (WKWebView / android.webkit.WebView).
  *  `html` flows through the `src` property: values that aren't http/file
  *  URLs take its `_loadData` path. NS reports failures as `loadFinished`
@@ -39,16 +55,7 @@ export function WebView(props: WebViewProps) @{
 	useEffect(() => {
 		const v = el.current;
 		if (!v) return;
-		if (isIOS) {
-			v.ios.scrollView.scrollEnabled = props.scrollEnabled !== false;
-		} else if (isAndroid) {
-			v.android.setOnTouchListener(props.scrollEnabled === false
-				? new android.view.View.OnTouchListener({
-						onTouch: (_view: any, event: any) =>
-							event.getActionMasked() === android.view.MotionEvent.ACTION_MOVE,
-					})
-				: null);
-		}
+		applyNativeScrollEnabled(v, props.scrollEnabled)
 		if (props.matchContents && loaded.current) reportContentLayout(v, props);
 	}, [props.scrollEnabled, props.matchContents]);
 
@@ -70,7 +77,9 @@ export function WebView(props: WebViewProps) @{
 		className={cx('vx-webview', props.className)}
 		style={props.style}
 		src={props.html !== undefined ? props.html : props.src}
+		onLoaded={() => applyNativeScrollEnabled(el.current, props.scrollEnabled)}
 		onLoadFinished={(e: any) => {
+			applyNativeScrollEnabled(e.object ?? el.current, props.scrollEnabled)
 			if (e.error) props.onError?.({ url: e.url, error: e.error });
 			else {
 				loaded.current = true;

package/src/escape-props.ts

@@ -1,15 +1,25 @@
 import { isAndroid, isIOS } from '@nativescript/core'
 import type { NativeModifier, Role } from './props'
 import { applyNativeModifiers } from './apply-native-modifiers.native'
+import { rememberGridChildPlacement } from './grid-placement'
 
 /** Apply only the active device's escape bag after the primitive's own props. */
 export function applyEscapeProps(
 	view: any,
-	props: { ios?: any; android?: any; modifiers?: readonly NativeModifier[] },
+	props: {
+		ios?: any
+		android?: any
+		modifiers?: readonly NativeModifier[]
+		row?: number
+		col?: number
+		rowSpan?: number
+		colSpan?: number
+	},
 ): void {
 	if (!view) {
 		return
 	}
+	rememberGridChildPlacement(view, props)
 
 	const bag = isIOS ? props.ios : isAndroid ? props.android : undefined
 	if (bag) {

package/src/grid-auto-placement.ts

@@ -0,0 +1,121 @@
+import type { GridChildPlacement } from './grid-placement'
+
+export interface GridCell {
+	row: number
+	col: number
+}
+
+export interface GridAutoPlacement {
+	cells: GridCell[]
+	rowCount: number
+	columnCount: number
+}
+
+function gridIndex(value: unknown): number | null {
+	if (value == null || value === '') return null
+	const index = Number(value)
+	return Number.isInteger(index) && index >= 0 ? index : null
+}
+
+function gridSpan(value: unknown): number {
+	const span = Number(value)
+	return Number.isInteger(span) && span > 0 ? span : 1
+}
+
+function trackCount(spec?: string): number {
+	return spec?.split(',').filter((track) => track.trim().length > 0).length ?? 0
+}
+
+/** Match CSS Grid's row-flow placement for NativeScript GridLayout children. */
+export function autoPlaceGridChildren(
+	items: readonly GridChildPlacement[],
+	rowTracks?: string,
+	columnTracks?: string,
+): GridAutoPlacement {
+	const placements = items.map((item) => ({
+		row: gridIndex(item.row),
+		col: gridIndex(item.col),
+		rowSpan: gridSpan(item.rowSpan),
+		colSpan: gridSpan(item.colSpan),
+	}))
+	const columnCount = Math.max(
+		1,
+		trackCount(columnTracks),
+		...placements
+			.filter((placement) => placement.col != null)
+			.map((placement) => placement.col! + placement.colSpan),
+		...placements.map((placement) => placement.colSpan),
+	)
+	const occupied = new Set<string>()
+	const isFree = (row: number, col: number, rowSpan: number, colSpan: number) => {
+		for (let y = row; y < row + rowSpan; y++) {
+			for (let x = col; x < col + colSpan; x++) {
+				if (occupied.has(`${y},${x}`)) return false
+			}
+		}
+		return true
+	}
+	const occupy = (row: number, col: number, rowSpan: number, colSpan: number) => {
+		for (let y = row; y < row + rowSpan; y++) {
+			for (let x = col; x < col + colSpan; x++) occupied.add(`${y},${x}`)
+		}
+	}
+
+	// Definite placements reserve their cells before automatic items flow.
+	for (const placement of placements) {
+		if (placement.row != null && placement.col != null) {
+			occupy(placement.row, placement.col, placement.rowSpan, placement.colSpan)
+		}
+	}
+
+	for (const placement of placements) {
+		if (placement.row == null || placement.col != null) continue
+		let col = 0
+		while (!isFree(placement.row, col, placement.rowSpan, placement.colSpan)) col++
+		placement.col = col
+		occupy(placement.row, col, placement.rowSpan, placement.colSpan)
+	}
+
+	for (const placement of placements) {
+		if (placement.col == null || placement.row != null) continue
+		let row = 0
+		while (!isFree(row, placement.col, placement.rowSpan, placement.colSpan)) row++
+		placement.row = row
+		occupy(row, placement.col, placement.rowSpan, placement.colSpan)
+	}
+
+	let cursorRow = 0
+	let cursorCol = 0
+	for (const placement of placements) {
+		if (placement.row != null && placement.col != null) continue
+		while (true) {
+			if (cursorCol + placement.colSpan > columnCount) {
+				cursorRow++
+				cursorCol = 0
+				continue
+			}
+			if (isFree(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)) break
+			cursorCol++
+		}
+		placement.row = cursorRow
+		placement.col = cursorCol
+		occupy(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)
+		cursorCol += placement.colSpan
+		if (cursorCol >= columnCount) {
+			cursorRow++
+			cursorCol = 0
+		}
+	}
+
+	return {
+		cells: placements.map(({ row, col }) => ({ row: row!, col: col! })),
+		rowCount: Math.max(trackCount(rowTracks), ...placements.map((item) => item.row! + item.rowSpan)),
+		columnCount: Math.max(columnCount, ...placements.map((item) => item.col! + item.colSpan)),
+	}
+}
+
+export function ensureGridTracks(spec: string | undefined, requiredCount: number): string {
+	const tracks = spec?.split(',').map((track) => track.trim()).filter(Boolean) ?? []
+	while (tracks.length < requiredCount) tracks.push('auto')
+	return tracks.join(',')
+}

package/src/grid-placement.ts

@@ -0,0 +1,29 @@
+import type { LayoutChildProps } from './props'
+
+export type GridChildPlacement = Pick<LayoutChildProps, 'row' | 'col' | 'rowSpan' | 'colSpan'>
+
+const placements = new WeakMap<object, GridChildPlacement>()
+
+/** Keep the authored Grid placement next to its mounted NativeScript view. */
+export function rememberGridChildPlacement(view: unknown, props: GridChildPlacement): void {
+	if ((typeof view !== 'object' || view === null) && typeof view !== 'function') {
+		return
+	}
+
+	const placement: GridChildPlacement = {}
+	for (const key of ['row', 'col', 'rowSpan', 'colSpan'] as const) {
+		if (props[key] !== undefined) {
+			placement[key] = props[key]
+		}
+	}
+
+	if (Object.keys(placement).length) {
+		placements.set(view as object, placement)
+	} else {
+		placements.delete(view as object)
+	}
+}
+
+export function gridChildPlacement(view: unknown): GridChildPlacement {
+	return typeof view === 'object' && view !== null ? placements.get(view) ?? {} : {}
+}

package/src/sheet-service.ts

@@ -6,7 +6,7 @@ import { topRootLayout } from './root-layout.mobile'
 import { applyThemeClasses } from './theme/theme-scheme'
 import { attachSheetDetents } from './sheet-detents'
 import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile'
-import { attachTapToBlur } from './tap-to-blur.mobile' 
+import { attachTapToBlur } from './tap-to-blur'
 
 interface ActiveSheet {
 	host: GridLayout