@octane-xplat/ui 0.5.0 → 0.7.0

package/src/toast-anchor.macos.tsrx

@@ -0,0 +1,3 @@
+export function showToast(_content: unknown, _options?: unknown): void {
+	console.warn('[octane-xplat] Toast display is unsupported by the experimental AppKit target.')
+}

package/src/toast-anchor.tsrx

@@ -0,0 +1,122 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import { Popover } from './Popover.tsrx';
+import { topRootLayout } from './root-layout.mobile';
+import { applyThemeClasses } from './theme/theme-scheme';
+import type { ToastContent, ToastOptions, ToastPosition } from './props';
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+type ActiveToast = ToastEntry & { host: GridLayout; root: any; timer: ReturnType<typeof setTimeout> | null; unbindTheme?: () => void };
+const queue: ToastEntry[] = [];
+let active: ActiveToast | null = null;
+
+function placementFor(position: ToastPosition = 'bottom'): 'top' | 'bottom' {
+	return position.startsWith('top') ? 'top' : 'bottom';
+}
+
+function horizontalFor(position: ToastPosition = 'bottom'): 'left' | 'center' | 'right' {
+	if (position.endsWith('-start')) return 'left';
+	if (position.endsWith('-end')) return 'right';
+	return 'center';
+}
+
+function ToastBody(props: ToastEntry & { open: boolean }) @{
+	@if (props.options.anchor) {
+		<Popover
+			open={props.open}
+			anchor={props.options.anchor}
+			placement={props.options.placement ?? placementFor(props.options.position)}
+			dismissOnOutsideTap={false}
+		>
+			<gridlayout className="vx-toast">
+				@if (typeof props.content === 'string') {
+					<label>{props.content}</label>
+				} @else {
+					const Component = props.content;
+					<Component />
+				}
+			</gridlayout>
+		</Popover>
+	} @else {
+		@if (typeof props.content === 'string') {
+			<label className="vx-toast">{props.content}</label>
+		} @else {
+			const Component = props.content;
+			<gridlayout className="vx-toast"><Component /></gridlayout>
+		}
+	}
+}
+
+function finishToast(entry: ActiveToast) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const cleanup = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+
+	if (entry.options.anchor) {
+		entry.root.render(ToastBody as unknown as UniversalComponent, { ...entry, open: false });
+		setTimeout(cleanup, 0);
+		return;
+	}
+
+	const rootLayout = topRootLayout();
+	if (rootLayout && (rootLayout as any).hasChild?.(entry.host)) {
+		rootLayout.close(entry.host).then(cleanup, (error: unknown) => {
+			console.error('[Toast] close failed', error);
+			cleanup();
+		});
+	} else cleanup();
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift()!;
+	const anchored = Boolean(entry.options.anchor);
+	const rootLayout = topRootLayout();
+	if (!anchored && !rootLayout) {
+		console.warn('[Toast] RootLayout is not mounted; toast was skipped');
+		showNext();
+		return;
+	}
+
+	const host = new GridLayout();
+	const position = entry.options.position ?? 'bottom';
+	const unbindTheme = applyThemeClasses(host, 'vx-toast-host');
+	const root = createNativeScriptRoot(host);
+	const current: ActiveToast = { ...entry, host, root, timer: null, unbindTheme };
+	active = current;
+	root.render(ToastBody as unknown as UniversalComponent, { ...entry, open: true });
+
+	if (anchored) {
+		current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+		return;
+	}
+
+	host.horizontalAlignment = horizontalFor(position);
+	host.verticalAlignment = placementFor(position) === 'top' ? 'top' : 'bottom';
+	host.marginTop = placementFor(position) === 'top' ? 24 : 0;
+	host.marginBottom = placementFor(position) === 'top' ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : undefined);
+	rootLayout!.open(host).then(() => {
+		if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+	}, (error: unknown) => {
+		console.error('[Toast] open failed', error);
+		root.unmount?.();
+		if (active === current) active = null;
+		showNext();
+	});
+}
+
+/** FIFO queue. Anchored options use Popover; unanchored options use the
+ * RootLayout with top/bottom start/end alignment. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/toast-anchor.web.tsrx

@@ -0,0 +1,92 @@
+import { createRoot } from 'octane';
+import { Popover } from './Popover.web.tsrx';
+import type { ToastContent, ToastOptions, ToastPosition } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+const queue: ToastEntry[] = [];
+let active = false;
+
+function ToastBody(props: ToastEntry & { open: boolean }) @{
+	@if (props.options.anchor) {
+		<Popover
+			open={props.open}
+			anchor={props.options.anchor}
+			placement={props.options.placement ?? placementFor(props.options.position)}
+			dismissOnOutsideTap={false}
+		>
+			@if (typeof props.content === 'string') {
+				<div className="vx-toast">{props.content}</div>
+			} @else {
+				const Component = props.content;
+				<div className="vx-toast"><Component /></div>
+			}
+		</Popover>
+	} @else {
+		@if (typeof props.content === 'string') {
+			<div className="vx-toast">{props.content}</div>
+		} @else {
+			const Component = props.content;
+			<div className="vx-toast"><Component /></div>
+		}
+	}
+}
+
+function placementFor(position: ToastPosition = 'bottom'): 'top' | 'bottom' {
+	return position.startsWith('top') ? 'top' : 'bottom';
+}
+
+function applyWebProps(host: HTMLElement, props?: Record<string, any>) {
+	for (const [key, value] of Object.entries(props ?? {})) {
+		if (key.includes('-')) host.setAttribute(key, String(value));
+		else (host as any)[key] = value;
+	}
+}
+
+function alignmentFor(position: ToastPosition = 'bottom') {
+	if (position.endsWith('-start')) return 'flex-start';
+	if (position.endsWith('-end')) return 'flex-end';
+	return 'center';
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift()!;
+	const anchored = Boolean(entry.options.anchor);
+	const host = document.createElement('div');
+	const position = entry.options.position ?? 'bottom';
+	const unbindTheme = applyThemeClasses(host, cx('vx-toast-host', placementFor(position) === 'top' ? 'vx-toast-top' : 'vx-toast-bottom'));
+	applyWebProps(host, entry.options.web);
+	if (anchored) host.style.display = 'none';
+	else host.style.justifyContent = alignmentFor(position);
+
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, { ...entry, open: true });
+
+	const finish = () => {
+		const cleanup = () => {
+			unbindTheme();
+			root.unmount();
+			host.remove();
+			active = false;
+			showNext();
+		};
+
+		if (anchored) {
+			root.render(ToastBody, { ...entry, open: false });
+			setTimeout(cleanup, 0);
+		} else cleanup();
+	};
+
+	setTimeout(finish, Math.max(0, entry.options.duration ?? 3000));
+}
+
+/** FIFO queue. `anchor` uses the same portal positioning as Popover; without
+ * one, top/bottom and their start/end alignment variants use the viewport. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/toast.tsrx

@@ -0,0 +1,90 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { topRootLayout } from './root-layout.mobile';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { ToastContent, ToastOptions } from './props';
+import { cx } from './cx';
+
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+type ActiveToast = ToastEntry & { host: GridLayout; root: any; timer: ReturnType<typeof setTimeout> | null; unbindTheme?: () => void };
+
+const queue: ToastEntry[] = [];
+let active: ActiveToast | null = null;
+
+function ToastBody(props: { content: ToastContent }) @{
+	@if (typeof props.content === 'string') {
+		<label className="vx-toast">{props.content}</label>
+	} @else {
+		const Component = props.content;
+		<gridlayout className="vx-toast"><Component /></gridlayout>
+	}
+}
+
+function finishToast(entry: ActiveToast) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const rootLayout = topRootLayout();
+	const finish = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+
+	if (rootLayout && (rootLayout as any)?.hasChild?.(entry.host)) {
+		rootLayout.close(entry.host).then(finish, (error) => {
+			console.error('[Toast] close failed', error);
+			finish();
+		});
+	} else finish();
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift()!;
+	const rootLayout = topRootLayout();
+	if (!rootLayout) {
+		console.warn('[Toast] RootLayout is not mounted; toast was skipped');
+		return;
+	}
+
+	const host = new GridLayout();
+	const unbindTheme = applyThemeClasses(host, 'vx-toast-host');
+	host.horizontalAlignment = 'stretch';
+	host.verticalAlignment = entry.options.position === 'top' ? 'top' : 'bottom';
+	host.marginTop = entry.options.position === 'top' ? 24 : 0;
+	host.marginBottom = entry.options.position === 'top' ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : undefined);
+	const root = createNativeScriptRoot(host);
+	const current: ActiveToast = { ...entry, host, root, timer: null, unbindTheme };
+	active = current;
+	root.render(ToastBody as unknown as UniversalComponent, { content: entry.content });
+	const open = () => {
+		rootLayout.open(host).then(() => {
+			if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+		}, (error) => {
+			console.error('[Toast] open failed', error);
+			root.unmount?.();
+			if (active === current) active = null;
+			showNext();
+		});
+	};
+
+	if ((rootLayout as any).hasChild?.(host)) {
+		rootLayout.close(host).then(open, (error) => {
+			console.error('[Toast] stale host close failed', error);
+			if (active === current) active = null;
+			showNext();
+		});
+	} else open();
+}
+
+/** FIFO queue; each toast is shown after the prior toast closes. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/toast.web.tsrx

@@ -0,0 +1,50 @@
+import { createRoot } from 'octane';
+import type { ToastContent, ToastOptions } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+const queue: ToastEntry[] = [];
+let active = false;
+
+function ToastBody(props: { content: ToastContent }) @{
+	@if (typeof props.content === 'string') {
+		<div className="vx-toast">{props.content}</div>
+	} @else {
+		const Component = props.content;
+		<div className="vx-toast"><Component /></div>
+	}
+}
+
+function applyWebProps(host: HTMLElement, props?: Record<string, any>) {
+	if (!props) return;
+	for (const [key, value] of Object.entries(props)) {
+		if (key.includes('-')) host.setAttribute(key, String(value));
+		else (host as any)[key] = value;
+	}
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift()!;
+	const host = document.createElement('div');
+	const unbindTheme = applyThemeClasses(host, cx('vx-toast-host', entry.options.position === 'top' ? 'vx-toast-top' : 'vx-toast-bottom'));
+	applyWebProps(host, entry.options.web);
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, { content: entry.content });
+	setTimeout(() => {
+		unbindTheme();
+		root.unmount();
+		host.remove();
+		active = false;
+		showNext();
+	}, Math.max(0, entry.options.duration ?? 3000));
+}
+
+/** FIFO queue; each toast is shown after the prior toast closes. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/transform.web.ts

@@ -0,0 +1,52 @@
+/** Per-element transform composition for imperative writes. The DOM has a
+ *  single `transform` string where native has discrete view props, so web
+ *  keeps the last-written value per transform prop and re-joins them —
+ *  an AnimatedValue on `rotate` and a setTranslate drag on the same
+ *  element don't clobber each other. */
+
+const transformProps = {
+	translateX: (v: number) => `translateX(${v}px)`,
+	translateY: (v: number) => `translateY(${v}px)`,
+	translateZ: (v: number) => `translateZ(${v}px)`,
+	scale: (v: number) => `scale(${v})`,
+	scaleX: (v: number) => `scaleX(${v})`,
+	scaleY: (v: number) => `scaleY(${v})`,
+	rotate: (v: number) => `rotate(${v}deg)`,
+	rotateX: (v: number) => `rotateX(${v}deg)`,
+	rotateY: (v: number) => `rotateY(${v}deg)`,
+	skewX: (v: number) => `skewX(${v}deg)`,
+	skewY: (v: number) => `skewY(${v}deg)`,
+} satisfies Record<string, (v: number) => string>
+
+type TransformProp = keyof typeof transformProps
+type TransformState = { base: string; values: Map<TransformProp, number> }
+
+const transformStates = new WeakMap<HTMLElement, TransformState>()
+
+/** Write one transform prop without disturbing the element's other
+ *  transform components (or its stylesheet/base transform). */
+export function writeTransformProp(el: HTMLElement, prop: string, value: number): void {
+	if (Object.prototype.hasOwnProperty.call(transformProps, prop)) {
+		const transformProp = prop as TransformProp
+		let state = transformStates.get(el)
+		if (!state) {
+			const computed = getComputedStyle(el).transform
+			state = {
+				base: computed === 'none' ? '' : computed,
+				values: new Map(),
+			}
+
+			transformStates.set(el, state)
+		}
+
+		state.values.set(transformProp, value)
+		const transforms = Object.entries(transformProps)
+			.filter(([name]) => state.values.has(name as TransformProp))
+			.map(([name, toTransform]) => toTransform(state.values.get(name as TransformProp)!))
+
+		el.style.transform = [state.base, ...transforms].filter(Boolean).join(' ')
+		return
+	}
+
+	;(el.style as any)[prop] = value
+}

package/src/translate.macos.ts

@@ -0,0 +1,5 @@
+export function setTranslate(view: any, x = 0, y = 0): void {
+	if (!view) {return}
+	view.translateX = x
+	view.translateY = y
+}

package/src/translate.ts

@@ -0,0 +1,13 @@
+import type { SetTranslate } from './props'
+
+/** Imperative translate write on a bound view — the gesture seam. NS
+ *  views carry real translateX/translateY properties (dips), so the write
+ *  is a direct prop set — synchronous on the UI thread. */
+export const setTranslate: SetTranslate = (view, x = 0, y = 0) => {
+	if (!view) {
+		return
+	}
+
+	view.translateX = x
+	view.translateY = y
+}

package/src/translate.web.ts

@@ -0,0 +1,15 @@
+import type { SetTranslate } from './props'
+import { writeTransformProp } from './transform.web'
+
+/** Imperative translate write on a bound view — the gesture seam. Called
+ *  per frame from pan handlers (docs/animation-gestures.md: animation
+ *  writes imperative, state stays declarative). Composes with other
+ *  transform writes on the same element via ./transform.web. */
+export const setTranslate: SetTranslate = (el, x = 0, y = 0) => {
+	if (!el) {
+		return
+	}
+
+	writeTransformProp(el, 'translateX', x)
+	writeTransformProp(el, 'translateY', y)
+}

package/src/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	// Package source is consumed as raw .ts (exports map → ./src/*), so
+	// consumer dev transforms resolve THIS directory's nearest tsconfig.json.
+	// Vendored plugin files use decorators (@CSSType/@NativeClass) — without
+	// experimentalDecorators the transform emits TC39 `export @dec class`,
+	// which the device V8 cannot parse — SyntaxError at boot.
+	"extends": "../../../tsconfig.base.json"
+}

package/src/unsupported.macos.tsrx

@@ -0,0 +1,5 @@
+/** @jsxImportSource @xplat/macos/renderer */
+
+export function Unsupported(_props: any) @{
+	<label className="vx-unsupported">Unsupported by the AppKit host</label>
+}

package/src/use-back.tsrx

@@ -0,0 +1,11 @@
+import { useEffect } from 'octane';
+import { addBackInterceptor } from './route';
+
+/** Component-scoped back interceptor — mounted screens register in
+ *  render order, so the topmost screen's handler wins (interceptors run
+ *  most-recent-first) before the framework's default stack pop. Return
+ *  true to consume the press. Android-only: iOS has no hardware back,
+ *  so the handler simply never fires there. */
+export function useBackInterceptor(fn: () => boolean): void {
+	useEffect(() => addBackInterceptor(fn), [fn]);
+}

package/src/use-back.web.tsrx

@@ -0,0 +1,12 @@
+import { useEffect } from 'octane';
+import { addBackInterceptor } from './route.web';
+
+/** Component-scoped back interceptor — mounted screens register in
+ *  render order, so the topmost screen's handler wins (interceptors run
+ *  most-recent-first) before the framework's default stack pop. Return
+ *  true to consume the press. On web there is nothing to intercept —
+ *  the browser owns back — so this registers a never-firing handler and
+ *  addBackInterceptor warns once. */
+export function useBackInterceptor(fn: () => boolean): void {
+	useEffect(() => addBackInterceptor(fn), [fn]);
+}

package/src/use-store.tsrx

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from 'octane';
+import type { ReadableStore } from './props';
+
+/**
+ * Subscribe the calling component to a module-scope store — the portable
+ * shared-state read. On the universal renderer a re-rendering parent retains
+ * unchanged-prop children, so a component that reads store state must carry
+ * its own subscription; on web this is equally correct (and costs nothing).
+ * `select` must return an Object.is-stable value per store state.
+ */
+export function useStore<T>(store: ReadableStore<T>): T;
+export function useStore<T, S>(store: ReadableStore<T>, select: (state: T) => S): S;
+export function useStore<T, S>(store: ReadableStore<T>, select?: (state: T) => S): T | S {
+	return useSyncExternalStore<T | S>(
+		store.subscribe,
+		select === undefined ? store.get : () => select(store.get()),
+	);
+}

package/src/use-store.web.tsrx

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from 'octane';
+import type { ReadableStore } from './props';
+
+/**
+ * Subscribe the calling component to a module-scope store — the portable
+ * shared-state read. On the universal renderer a re-rendering parent retains
+ * unchanged-prop children, so a component that reads store state must carry
+ * its own subscription; on web this is equally correct (and costs nothing).
+ * `select` must return an Object.is-stable value per store state.
+ */
+export function useStore<T>(store: ReadableStore<T>): T;
+export function useStore<T, S>(store: ReadableStore<T>, select: (state: T) => S): S;
+export function useStore<T, S>(store: ReadableStore<T>, select?: (state: T) => S): T | S {
+	return useSyncExternalStore<T | S>(
+		store.subscribe,
+		select === undefined ? store.get : () => select(store.get()),
+	);
+}

package/src/useMeasure.macos.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane'
+import type { MeasureBounds, UseMeasureOptions } from './props'
+
+export function useMeasure(_options?: UseMeasureOptions) @{
+	const [bounds, setBounds] = useState<MeasureBounds | null>(null)
+	const bind = (view: any) => {
+		const frame = view?.frame
+		if (frame) {
+			// Fresh object each read — skip the setState when nothing moved
+			// or the re-render → ref → bind loop never ends.
+			setBounds((prev: MeasureBounds | null) =>
+				prev &&
+				prev.x === frame.origin.x && prev.y === frame.origin.y &&
+				prev.width === frame.size.width && prev.height === frame.size.height
+					? prev
+					: { x: frame.origin.x, y: frame.origin.y, width: frame.size.width, height: frame.size.height },
+			)
+		}
+	}
+
+	return { bind, bounds }
+}

package/src/useMeasure.tsrx

@@ -0,0 +1,66 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback, useEffect, useState } from 'octane';
+import type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props';
+
+function readBounds(view: any): MeasureBounds | null {
+	const point = view?.getLocationOnScreen?.();
+	const size = view?.getActualSize?.();
+	if (!point || !size) return null;
+	return { x: point.x, y: point.y, width: size.width, height: size.height };
+}
+
+/** 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 observe = options.observe ?? true;
+	const bind = useCallback((next: any) => {
+		setView((current: any) => current === next ? current : next);
+	}, []);
+
+	useEffect(() => {
+		if (!view) {
+			setBounds(null);
+			return;
+		}
+
+		const update = () => {
+			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
+					? prev
+					: next,
+			);
+		};
+
+		const onLoaded = update;
+		view.on?.('loaded', onLoaded);
+		update();
+		if (observe) {
+			view.on?.('layoutChanged', update);
+			let parent = view.parent;
+			while (parent) {
+				parent.on?.('scroll', update);
+				parent = parent.parent;
+			}
+		}
+
+		return () => {
+			view.off?.('loaded', onLoaded);
+			if (observe) {
+				view.off?.('layoutChanged', update);
+				let parent = view.parent;
+				while (parent) {
+					parent.off?.('scroll', update);
+					parent = parent.parent;
+				}
+			}
+		};
+	}, [view, observe]);
+
+	return { bind, bounds };
+}

package/src/useMeasure.web.tsrx

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'octane';
+import type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props';
+
+function readBounds(element: HTMLElement): MeasureBounds {
+	const rect = element.getBoundingClientRect();
+	return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+}
+
+/** Binds to a web element and observes its viewport-relative bounds by default. */
+export function useMeasure(options: UseMeasureOptions = {}): MeasureResult {
+	const [element, setElement] = useState<HTMLElement | null>(null);
+	const [bounds, setBounds] = useState<MeasureBounds | null>(null);
+	const observe = options.observe ?? true;
+	const bind = useCallback((next: any) => {
+		setElement((current) => current === next ? current : next);
+	}, []);
+
+	useEffect(() => {
+		if (!element) {
+			setBounds(null);
+			return;
+		}
+
+		const update = () => setBounds(readBounds(element));
+		update();
+		if (!observe) return;
+		const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+		resizeObserver?.observe(element);
+		window.addEventListener('resize', update);
+		window.addEventListener('scroll', update, true);
+		return () => {
+			resizeObserver?.disconnect();
+			window.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update, true);
+		};
+	}, [element, observe]);
+
+	return { bind, bounds };
+}

package/src/useStore.macos.tsrx

@@ -0,0 +1,6 @@
+import { useSyncExternalStore } from 'octane'
+import type { ReadableStore } from './store'
+
+export function useStore<T>(store: ReadableStore<T>): T {
+	return useSyncExternalStore(store.subscribe, store.get)
+}