@octane-xplat/ui 0.7.1 → 0.7.3

package/dist/native/{tap-to-blur.mobile.js → tap-to-blur.ios.js}

@@ -1,5 +1,5 @@
-import { Application } from "@nativescript/core";
-//#region src/tap-to-blur.mobile.ts
+import __decorate from "./_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+//#region src/tap-to-blur.ios.ts
 /** 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.
@@ -11,36 +11,15 @@ import { Application } from "@nativescript/core";
 *  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. */
+*  `cancelsTouchesInView` stays false so taps still reach buttons. */
 function attachTapToBlur(view) {
 	const marker = "__xplatTapToBlur";
 	if (!view || view[marker]) return () => {};
 	view[marker] = true;
-	if (Application.ios) {
-		iosAttach();
-		return () => {
-			view[marker] = false;
-			iosDetach();
-		};
-	}
-	if (Application.android) {
-		const handler = (_args) => {
-			const activity = Application.android.foregroundActivity;
-			const focused = activity?.currentFocus;
-			if (!focused) return;
-			activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE)?.hideSoftInputFromWindow(focused.getWindowToken(), 0);
-		};
-		view.on("tap", handler);
-		return () => {
-			view[marker] = false;
-			view.off("tap", handler);
-		};
-	}
+	iosAttach();
 	return () => {
 		view[marker] = false;
+		iosDetach();
 	};
 }
 var iosCount = 0;
@@ -53,25 +32,34 @@ function iosAttach() {
 	const appWin = appWindow();
 	if (!appWin) return;
 	iosWindow = appWin;
-	const Owner = class extends NSObject {
+	let TapToBlurRecognizerTarget = class TapToBlurRecognizerTarget extends NSObject {
+		static {
+			this.ObjCProtocols = [UIGestureRecognizerDelegate];
+		}
 		static {
 			this.ObjCExposedMethods = { tap: {
 				returns: interop.types.void,
 				params: [UITapGestureRecognizer]
 			} };
 		}
-		tap(recognizer) {
-			const point = recognizer.locationInView(iosWindow);
-			let hit = iosWindow.hitTest(point, null);
+		gestureRecognizerShouldReceiveTouch(_recognizer, touch) {
+			let hit = touch.view;
 			while (hit) {
-				if (hit instanceof UITextField || hit instanceof UITextView) return;
+				const textField = hit.isKindOfClass(UITextField.class());
+				const textView = hit.isKindOfClass(UITextView.class());
+				if (textField || textView) return false;
 				hit = hit.superview;
 			}
+			return true;
+		}
+		tap(_recognizer) {
 			iosWindow.endEditing(true);
 		}
 	};
-	iosTarget = Owner.new();
+	TapToBlurRecognizerTarget = __decorate([NativeClass], TapToBlurRecognizerTarget);
+	iosTarget = TapToBlurRecognizerTarget.new();
 	iosRecognizer = UITapGestureRecognizer.alloc().initWithTargetAction(iosTarget, "tap");
+	iosRecognizer.delegate = iosTarget;
 	iosRecognizer.cancelsTouchesInView = false;
 	appWin.addGestureRecognizer(iosRecognizer);
 }

package/dist/native/ui.js

@@ -68,8 +68,8 @@ import { ScrollBox } from "./ScrollBox.tsrx.js";
 import { ScrollView } from "./ScrollView.tsrx.js";
 import { VirtualList } from "./VirtualList.tsrx.js";
 import { WebView } from "./WebView.tsrx.js";
-import { Hoverable } from "./Hoverable.tsrx.js";
-import { Tooltip } from "./Tooltip.tsrx.js";
+import { Hoverable } from "./Hoverable.mobile.tsrx.js";
+import { Tooltip } from "./Tooltip.mobile.tsrx.js";
 import { showToast } from "./toast-anchor.tsrx.js";
 import { useAnimation } from "./anim.tsrx.js";
 import { styled } from "./styled.tsrx.js";

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/index.shared.js

@@ -0,0 +1,92 @@
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Grid } from "./Grid.web.tsrx.js";
+import { Stack } from "./Stack.web.tsrx.js";
+import { Absolute } from "./Absolute.web.tsrx.js";
+import { setTranslate } from "./translate.web.js";
+import { Spacer } from "./Spacer.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Button } from "./Button.web.tsrx.js";
+import { Collapsible } from "./Collapsible.web.tsrx.js";
+import { Accordion } from "./Accordion.web.tsrx.js";
+import { Checkbox } from "./Checkbox.web.tsrx.js";
+import { RadioGroup } from "./RadioGroup.web.tsrx.js";
+import { getColorScheme, useColorScheme } from "./theme/colorScheme.web.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { registerIcon, registerIcons } from "./icons.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { DropdownMenu } from "./DropdownMenu.web.tsrx.js";
+import { ContextMenu } from "./ContextMenu.web.tsrx.js";
+import { Badge } from "./Badge.web.tsrx.js";
+import { Separator } from "./Separator.web.tsrx.js";
+import { Skeleton } from "./Skeleton.web.tsrx.js";
+import { Avatar } from "./Avatar.web.tsrx.js";
+import { AvatarGroup } from "./AvatarGroup.web.tsrx.js";
+import { FormField } from "./FormField.web.tsrx.js";
+import { FieldGroup } from "./FieldGroup.web.tsrx.js";
+import { ListItem } from "./ListItem.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { InputNumber } from "./InputNumber.web.tsrx.js";
+import { PinInput } from "./PinInput.web.tsrx.js";
+import { Select } from "./Select.web.tsrx.js";
+import { Combobox, InputMenu, SelectMenu } from "./aliases.web.tsrx.js";
+import { InputTags } from "./InputTags.web.tsrx.js";
+import { InputRating } from "./InputRating.web.tsrx.js";
+import { CheckboxGroup } from "./CheckboxGroup.web.tsrx.js";
+import { Breadcrumb } from "./Breadcrumb.web.tsrx.js";
+import { Pagination } from "./Pagination.web.tsrx.js";
+import { Stepper } from "./Stepper.web.tsrx.js";
+import { NavigationMenu } from "./NavigationMenu.web.tsrx.js";
+import { Overlay } from "./Overlay.web.tsrx.js";
+import { CommandPalette } from "./CommandPalette.web.tsrx.js";
+import { Table } from "./Table.web.tsrx.js";
+import { Timeline } from "./Timeline.web.tsrx.js";
+import { Tree } from "./Tree.web.tsrx.js";
+import { Alert } from "./Alert.web.tsrx.js";
+import { Card } from "./Card.web.tsrx.js";
+import { Chip } from "./Chip.web.tsrx.js";
+import { Kbd } from "./Kbd.web.tsrx.js";
+import { Empty } from "./Empty.web.tsrx.js";
+import { Banner } from "./Banner.web.tsrx.js";
+import { User } from "./User.web.tsrx.js";
+import { Meter } from "./Meter.web.tsrx.js";
+import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
+import { Link } from "./Link.web.tsrx.js";
+import { defineRoutes, deriveRouteManifest, mergeRouteManifests } from "./route-table.js";
+import { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
+import { NavLink } from "./NavLink.web.tsrx.js";
+import { TextArea } from "./TextArea.web.tsrx.js";
+import { SearchInput } from "./SearchInput.web.tsrx.js";
+import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { ScrollBox } from "./ScrollBox.web.tsrx.js";
+import { VirtualList } from "./VirtualList.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { WebView } from "./WebView.web.tsrx.js";
+import { Hoverable } from "./Hoverable.web.tsrx.js";
+import { Tooltip } from "./Tooltip.web.tsrx.js";
+import { showToast } from "./toast-anchor.web.tsrx.js";
+import { useAnimation } from "./anim.web.tsrx.js";
+import { styled } from "./styled.web.tsrx.js";
+import { openWindow } from "./windows.web.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { Tabs } from "./Tabs.web.tsrx.js";
+import { Switch } from "./Switch.web.tsrx.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
+import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { Drawer } from "./Drawer.web.tsrx.js";
+import { useMeasure } from "./useMeasure.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { Heading } from "./Heading.web.tsrx.js";
+import { isNative } from "./platform.web.js";
+import { getStack, registerStack, stackEntries } from "./stacks.web.js";
+import { useBackInterceptor } from "./use-back.web.tsrx.js";
+import { createStore } from "./store.js";
+import { useStore } from "./use-store.web.tsrx.js";
+import { Sheet } from "./Sheet.web.tsrx.js";
+import { closeSheet, openSheet } from "./sheet-service.web.js";
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, ListItem, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "c093a881-61b5-4e75-92ac-bfe0cf48326d",
+  "buildId": "0ba2ee91-551d-42cf-a6c9-dedc87a8a53b",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/ui.js

@@ -89,4 +89,5 @@ import { createStore } from "./store.js";
 import { useStore } from "./use-store.web.tsrx.js";
 import { Sheet } from "./Sheet.web.tsrx.js";
 import { closeSheet, openSheet } from "./sheet-service.web.js";
+import "./index.shared.js";
 export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, ListItem, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.7.1",
+  "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) {