@octane-xplat/ui 0.9.0 → 0.11.0

package/src/animation-host.macos.ts

@@ -0,0 +1,47 @@
+const transformPaths: Record<string, string> = {
+	translateX: 'transform.translation.x',
+	translateY: 'transform.translation.y',
+	scale: 'transform.scale',
+	scaleX: 'transform.scale.x',
+	scaleY: 'transform.scale.y',
+	rotate: 'transform.rotation.z',
+}
+
+export function readReducedMotion(): boolean {
+	return Boolean(
+		(globalThis as any).NSWorkspace?.sharedWorkspace?.accessibilityDisplayShouldReduceMotion,
+	)
+}
+
+/** Refs are NSViews, not NativeScript views. Keep the renderer's y-down convention. */
+export function writeAnimatedProperty(view: any, property: string, value: number): void {
+	if (property === 'opacity') {
+		view.alphaValue = value
+		return
+	}
+
+	const path = transformPaths[property]
+	if (path) {
+		view.wantsLayer = true
+		// Explicit per-frame samples must not acquire implicit CA interpolation.
+		const transaction = (globalThis as any).CATransaction
+		transaction.begin()
+		try {
+			transaction.setDisableActions(true)
+			view.layer.setValueForKeyPath(
+				property === 'rotate'
+					? (value * Math.PI) / 180
+					: property === 'translateY'
+						? -value
+						: value,
+				path,
+			)
+		} finally {
+			transaction.commit()
+		}
+
+		return
+	}
+
+	throw new Error('useAnimation: unsupported AppKit property ' + property)
+}

package/src/app-shell-config.ts

@@ -0,0 +1,25 @@
+import type { MobileNavConfig } from './props'
+
+const CONFIG_KEYS = [
+	'hasToggle',
+	'isOpen',
+	'onOpenChange',
+	'content',
+	'breakpoint',
+	'defaultIsMobile',
+] as const
+
+/** Distinguish the plain mobile-nav options object from a portable child.
+ *  JSX elements and arrays remain opaque values; no renderer element API is
+ *  needed in shared/native modules. */
+export function isMobileNavConfig(value: unknown): value is MobileNavConfig {
+	if (value == null || typeof value !== 'object' || Array.isArray(value)) {
+		return false
+	}
+
+	const record = value as Record<string, unknown>
+	return (
+		Object.keys(record).length === 0 ||
+		CONFIG_KEYS.some((key) => Object.prototype.hasOwnProperty.call(record, key))
+	)
+}

package/src/bottom-sheet-context.ts

@@ -0,0 +1,29 @@
+import { createContext } from 'octane'
+import type { BottomSheetProps } from './props'
+
+/** One `BottomSheet` child's registration inside a `BottomSheetSwitcher`.
+ *  `props` carries the whole prop bag so the switcher's single host can
+ *  render the active panel verbatim (children are descriptor data — safe
+ *  to hand across the overlay root boundary on native). */
+export interface BottomSheetRegistration {
+	sheetId: string
+	props: BottomSheetProps
+}
+
+/** The switcher handle BottomSheet children consume. Registrations flow
+ *  through the store so the switcher's overlay root (a separate Octane
+ *  root on native) observes them without context crossing roots. */
+export interface BottomSheetSwitcherHandle {
+	register(spec: BottomSheetRegistration): void
+	unregister(sheetId: string): void
+	/** Report a user dismissal (drag/scrim/Escape) to the switcher. */
+	requestDismiss(): void
+	/** The sheetId the switcher is currently showing. */
+	activeSheet(): string | null
+}
+
+export const BottomSheetSwitcherContext = createContext<BottomSheetSwitcherHandle | null>(null)
+
+/** JSX-provider form — universal-renderer contexts are callables, not
+ *  `.Provider` members (same aliasing as FieldProvider/DialogProvider). */
+export const BottomSheetSwitcherProvider: any = BottomSheetSwitcherContext

package/src/bottom-sheet-panel.macos.tsrx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useEffect, useRef } from 'octane'
+import { useThemeScheme } from './theme/theme-scheme'
+import { LayerDepthProvider, useLayerDismissal } from './layer-dismissal.tsrx'
+import { cx } from './cx'
+
+/** Imperative content gets the same handle, scrolling and live theme as a
+ * declaration. Context stays inside this detached root. */
+export function ImperativeSheetPanel(props: { component: any; params: any; close: (result?: any) => void }) @{
+	const dark = useThemeScheme() === 'dark'
+	const dismissal = useLayerDismissal({ active: true, dismiss: () => props.close('closed'), restoreFocus: false })
+	const view = useRef<any>(null)
+	useEffect(() => { (globalThis as any).__xplatAppKit?.setSurfaceAppearance?.(view.current, dark) }, [dark])
+
+	<LayerDepthProvider value={dismissal.depth}>
+	<flexboxlayout flexDirection="column" ref={view} className={cx('vx-sheet', 'vx-bottom-sheet', dark && 'ns-dark')}>
+		<label className="vx-sheet-grabber" accessibilityLabel="Drag to resize sheet">―</label>
+		<scrollview><{props.component} params={props.params} close={props.close} /></scrollview>
+	</flexboxlayout>
+	</LayerDepthProvider>
+}

package/src/bottom-sheet-service.macos.ts

@@ -0,0 +1,72 @@
+import { ImperativeSheetPanel } from './bottom-sheet-panel.macos.tsrx'
+import type { BottomSheetOpenOptions, ModalOpenResult, OpenBottomSheet } from './props'
+
+interface ActiveSheet {
+	controller?: { close(): void; closedPromise: Promise<unknown> }
+	finish: (result?: ModalOpenResult) => void
+}
+
+const active = new Set<ActiveSheet>()
+
+export function closeBottomSheet(result?: ModalOpenResult): void {
+	;[...active].pop()?.finish(result)
+}
+
+/** Dedicated root in the key window's bottom-docked AppKit surface. */
+export const openBottomSheet: OpenBottomSheet = (
+	Component,
+	params,
+	options: BottomSheetOpenOptions = {},
+) => {
+	return new Promise<ModalOpenResult>((resolve, reject) => {
+		let finished = false
+		const entry: ActiveSheet = {
+			finish(result) {
+				if (finished) {
+					return
+				}
+
+				finished = true
+				active.delete(entry)
+				try {
+					entry.controller?.close()
+				} finally {
+					resolve(result)
+				}
+			},
+		}
+
+		active.add(entry)
+		try {
+			const present = (globalThis as any).__xplatAppKit?.presentSurface
+			if (!present) {
+				throw new Error('AppKit host has no shared sheet presenter')
+			}
+
+			entry.controller = present({
+				kind: 'sheet',
+				modal: options.hasScrim ?? true,
+				snapPoints: options.snapPoints,
+				label: options.label ?? 'Sheet',
+				component: ImperativeSheetPanel,
+				props: { component: Component, params, close: entry.finish },
+				onDismiss: () => entry.finish('closed'),
+			})
+
+			// Content can close synchronously during its first render.
+			if (finished) {
+				entry.controller?.close()
+			}
+
+			void entry.controller?.closedPromise.then(() => entry.finish('closed'))
+		} catch (error) {
+			active.delete(entry)
+			entry.controller?.close()
+			reject(error)
+		}
+	})
+}
+
+export function bottomSheetHost(): null {
+	return null
+}

package/src/{sheet-service.ts → bottom-sheet-service.ts}

@@ -1,12 +1,14 @@
 import { GridLayout } from '@nativescript/core'
 import { createNativeScriptRoot } from '@nativescript-community/octane'
 import type { UniversalComponent } from 'octane/universal'
-import type { ModalOpenResult, OpenSheet } from './props'
-import { topRootLayout } from './root-layout.mobile'
+import type { ModalOpenResult, OpenBottomSheet } from './props'
+import { topRootLayout } from './root-layout'
 import { applyThemeClasses } from './theme/theme-scheme'
+import { normalizeSnapPoints } from './sheet-snap'
 import { attachSheetDetents } from './sheet-detents'
-import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile'
+import { bindBottomInsetToKeyboard } from './keyboard-inset'
 import { attachTapToBlur } from './tap-to-blur'
+import { Screen } from '@nativescript/core'
 
 interface ActiveSheet {
 	host: GridLayout
@@ -19,37 +21,48 @@ const active = new Set<ActiveSheet>()
 
 /** The most recently opened sheet's host view — for harness asserts (view
  *  identity beats tree search; the owning rootlayout may unload/reload). */
-export function sheetHost(): GridLayout | null {
+export function bottomSheetHost(): GridLayout | null {
 	return [...active].pop()?.host ?? null
 }
 
-/** Close the most recently opened sheet (resolve with `result`). */
-export function closeSheet(result?: ModalOpenResult): void {
+/** Close the most recently opened bottom sheet (resolve with `result`). */
+export function closeBottomSheet(result?: ModalOpenResult): void {
 	;[...active].pop()?.finish(result)
 }
 
-/** Imperative in-window sheet: a dedicated Octane root on a bottom-docked
- *  GridLayout host opened on the CURRENT rootlayout (topRootLayout — the
- *  service has no declaring view). Resolves when the sheet closes. */
-export const openSheet: OpenSheet = (Component, params, options = {}) =>
+/** Imperative in-window bottom sheet: a dedicated Octane root on a
+ *  bottom-docked GridLayout host opened on the CURRENT rootlayout
+ *  (topRootLayout — the service has no declaring view). Resolves when the
+ *  sheet closes. Astryx `snapPoints` fractions/percent/px all resolve
+ *  against the screen height. */
+export const openBottomSheet: OpenBottomSheet = (Component, params, options = {}) =>
 	new Promise<ModalOpenResult>((resolve) => {
 		const rl = topRootLayout()
 		if (!rl) {
-			console.warn('[openSheet] no RootLayout mounted — sheet skipped')
+			console.warn('[openBottomSheet] no RootLayout mounted — sheet skipped')
 			resolve(undefined)
 			return
 		}
 
 		const host = new GridLayout()
-		const unbindTheme = applyThemeClasses(host, 'vx-sheet-host')
+		const unbindTheme = applyThemeClasses(host, 'vx-sheet-host vx-bottom-sheet-host')
 		host.horizontalAlignment = 'stretch'
 		host.verticalAlignment = 'bottom'
+		host.accessibilityLabel = options.label ?? ''
 		const root = createNativeScriptRoot(host)
 		// Detents own enter/slide-out — the RootLayout animation always
-		// lands translateY at 0, so it's skipped while detents attach.
-		const detents = options.detents?.length
-			? attachSheetDetents(host, options.detents, () => finish())
-			: null
+		// lands translateY at 0, so it's skipped while gestures attach.
+		const detentFractions = options.snapPoints?.length
+			? normalizeSnapPoints(options.snapPoints, Screen.mainScreen.heightDIPs)
+			: []
+
+		const detents = attachSheetDetents(host, detentFractions, () => finish(), {
+			swipeOnly: !detentFractions.length,
+		})
+
+		if (detentFractions.length) {
+			host.height = detentFractions[detentFractions.length - 1] * Screen.mainScreen.heightDIPs
+		}
 
 		// Lift the host above the software keyboard — bottom-anchored sheets
 		// hosting inputs (e.g. the demo 'In sheet' todo add row) are covered
@@ -75,7 +88,7 @@ export const openSheet: OpenSheet = (Component, params, options = {}) =>
 			active.delete(entry)
 			unbindKeyboard()
 			unbindTheme()
-			detents?.detach()
+			detents.detach()
 			root.unmount?.()
 			const owner = host.parent as any
 			if (owner?.hasChild?.(host) && !closing) {
@@ -83,7 +96,7 @@ export const openSheet: OpenSheet = (Component, params, options = {}) =>
 					owner.removeChild?.(host)
 				} else {
 					;(owner.close?.(host) as Promise<unknown> | undefined)?.catch((error: unknown) => {
-						console.error('[openSheet] close failed', error)
+						console.error('[openBottomSheet] close failed', error)
 					})
 				}
 			}
@@ -105,20 +118,13 @@ export const openSheet: OpenSheet = (Component, params, options = {}) =>
 		root.render(Component as UniversalComponent, { params, close: finish })
 		active.add(entry)
 
-		rl.open(host, {
-			...((options.shadeCover ?? true) ? { shadeCover: { opacity: 0.4, tapToClose: true } } : {}),
-			...(detents
-				? {}
-				: {
-						animation: {
-							enterFrom: { translateY: 400, duration: 250 },
-							exitTo: { translateY: 400, duration: 200 },
-						},
-					}),
-		})
-			.then(() => detents?.enter())
+		const openOptions =
+			(options.hasScrim ?? true) ? { shadeCover: { opacity: 0.4, tapToClose: true } } : undefined
+
+		rl.open(host, openOptions)
+			.then(() => detents.enter())
 			.catch((error: unknown) => {
-				console.error('[openSheet] open failed', error)
+				console.error('[openBottomSheet] open failed', error)
 				finish()
 			})
 	})

package/src/bottom-sheet-service.web.ts

@@ -0,0 +1,85 @@
+import { createRoot } from 'octane'
+import type { ModalOpenResult, OpenBottomSheet } from './props'
+import { applyThemeClasses } from './theme/theme-scheme'
+import { normalizeSnapPoints } from './sheet-snap'
+import { attachSheetDetents } from './sheet-detents.web'
+import { isolateModalFocus } from './modal-focus.web'
+
+const BASE_SCRIM = 0.4
+
+interface ActiveSheet {
+	layer: HTMLElement
+	finish: (result?: ModalOpenResult) => void
+}
+
+const active = new Set<ActiveSheet>()
+
+/** Close the most recently opened bottom sheet (resolve with `result`). */
+export function closeBottomSheet(result?: ModalOpenResult): void {
+	;[...active].pop()?.finish(result)
+}
+
+/** Imperative in-window bottom sheet: portal layer at document root,
+ *  bottom-anchored panel, dedicated Octane root, grabber + snap/swipe
+ *  gestures. Resolves when the sheet closes. */
+export const openBottomSheet: OpenBottomSheet = (Component, params, options = {}) =>
+	new Promise<ModalOpenResult>((resolve) => {
+		const layer = document.createElement('div')
+		const unbindTheme = applyThemeClasses(layer, 'vx-sheet-layer vx-bottom-sheet-layer')
+		const panel = document.createElement('div')
+		panel.className = 'vx-sheet vx-bottom-sheet'
+		panel.setAttribute('aria-label', options.label ?? 'Sheet')
+		const hasScrim = options.hasScrim ?? true
+		const snapPoints = options.snapPoints?.length
+			? normalizeSnapPoints(options.snapPoints, window.innerHeight)
+			: []
+
+		let finished = false
+		let releaseFocus: (() => void) | undefined
+		const finish = (result?: ModalOpenResult) => {
+			if (finished) {
+				return
+			}
+
+			finished = true
+			active.delete(entry)
+			releaseFocus?.()
+			unbindTheme()
+			detents.detach()
+			root.unmount()
+			layer.remove()
+			resolve(result)
+		}
+
+		const entry: ActiveSheet = { layer, finish }
+		let backdrop: HTMLDivElement | null = null
+		if (hasScrim) {
+			backdrop = document.createElement('div')
+			backdrop.className = 'vx-sheet-backdrop'
+			backdrop.style.opacity = String(BASE_SCRIM)
+			backdrop.addEventListener('click', () => finish())
+			layer.appendChild(backdrop)
+		}
+
+		layer.appendChild(panel)
+		document.body.appendChild(layer)
+		// Attached after the layer is in the document — the panel sizes
+		// against the viewport and slides in to the smallest stop.
+		const detents = attachSheetDetents(panel, snapPoints, () => finish(), {
+			swipeOnly: !snapPoints.length,
+			onOffset: (offset, vh) => {
+				if (backdrop) {
+					backdrop.style.opacity = String(Math.max(0, BASE_SCRIM * (1 - offset / vh)))
+				}
+			},
+		})
+
+		const root = createRoot(panel)
+		root.render(Component, { params, close: finish })
+		active.add(entry)
+		if (hasScrim) {
+			panel.setAttribute('role', 'dialog')
+			panel.setAttribute('aria-modal', 'true')
+			releaseFocus = isolateModalFocus(layer, panel, () => finish())
+		}
+	})

package/src/busy-lane.ts

@@ -0,0 +1,39 @@
+import { createContext } from 'octane'
+
+/** How BaseTypeahead hands its busy state to a wrapper that owns the
+ *  inline-end lane (Typeahead/Tokenizer paint the spinner beside their own
+ *  controls instead of a second indicator inside the base). A store rather
+ *  than wrapper state so a search transition re-renders only the leaf that
+ *  draws the Spinner. This is a context, not a prop, because the wiring is
+ *  package-internal — anything on the public props becomes API. */
+export interface BusyIndicatorLane {
+	onBusyChange: (isBusy: boolean) => void
+	subscribe: (onStoreChange: () => void) => () => void
+	getIsBusy: () => boolean
+}
+
+export function createBusyIndicatorLane(): BusyIndicatorLane {
+	let isBusy = false
+	const listeners = new Set<() => void>()
+	return {
+		onBusyChange(next: boolean) {
+			if (isBusy === next) {
+				return
+			}
+
+			isBusy = next
+			for (const listener of listeners) {
+				listener()
+			}
+		},
+		subscribe(onStoreChange: () => void) {
+			listeners.add(onStoreChange)
+			return () => listeners.delete(onStoreChange)
+		},
+		getIsBusy: () => isBusy,
+	}
+}
+
+/** The wrapper's lane, or null when the base renders its own indicator. */
+export const BusyLaneContext = createContext<BusyIndicatorLane | null>(null)
+export const BusyLaneProvider: any = BusyLaneContext

package/src/button-group-context.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'octane'
+import type { ButtonGroupContextValue } from './props'
+
+/** Position a member occupies inside its ButtonGroup — the group's per-child
+ *  slot providers stamp it so grouped styling doesn't depend on
+ *  `:first-child`/`:has()` CSS (absent on NativeScript). */
+export interface ButtonGroupMember extends ButtonGroupContextValue {
+	position: 'first' | 'middle' | 'last' | 'only'
+}
+
+export const ButtonGroupContext: any = createContext<ButtonGroupMember | null>(null)
+export const ButtonGroupProvider: any = ButtonGroupContext
+
+/** Button (and grouped trigger components) read group membership here;
+ *  returns null outside a ButtonGroup. */
+export function useButtonGroup(): ButtonGroupMember | null {
+	return useContext(ButtonGroupContext)
+}