@octane-xplat/ui 0.5.0 → 0.7.0

package/src/android/BottomNavigationView.android.tsrx

@@ -0,0 +1,170 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { memo } from 'octane';
+import { Frame, GridLayout, Page, TabView, TabViewItem } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import { registerStack } from '../stacks';
+import { cx } from '../cx';
+import { getIcon } from '../icons';
+import { Icon } from '../Icon.tsrx';
+import { Pressable } from '../Pressable.tsrx';
+import { Text } from '../Text.tsrx';
+import { layoutsForRoute, screenFor, useRoute } from '../route';
+import { RouteHost, screenParamsFor } from '../route-host.mobile';
+import type { PlatformTabSpec, PlatformTabsProps, PlatformWidgetProps } from '../props';
+import { applyEscapeProps } from '../escape-props';
+
+export type { PlatformTabSpec as TabSpec } from '../props';
+
+// Android named stacks never navigate a Frame (upstream #11444 makes
+// TabViewItem frames unsafe) — pushes live in the route store instead, and a
+// stack pane renders the current route here, same shape as the self-drawn
+// Tabs. The bottom bar's OS chrome stays platform-authentic; only the pane
+// content swaps.
+type TabPaneProps = { render: () => any; stack?: string };
+function TabPane(props: TabPaneProps) @{
+	const route = useRoute(props.stack ?? '');
+	const Screen = route ? screenFor(route.name) : undefined;
+
+	@if (route && Screen) {
+		<RouteHost
+			screen={Screen}
+			layouts={layoutsForRoute(route.name)}
+			params={screenParamsFor(route)}
+		/>
+	} @else {
+		<>{props.render()}</>
+	}
+}
+
+const paneRoots = new WeakMap<GridLayout, any>();
+const tabsByView = new WeakMap<GridLayout, () => any>();
+const itemsCache = new WeakMap<readonly PlatformTabSpec[], TabViewItem[]>();
+const iconWarned = new Set<string>();
+
+function applyIcon(item: TabViewItem, name: string): void {
+	if (name.startsWith('res://')) {
+		item.iconSource = name;
+		return;
+	}
+	const glyph = getIcon(name);
+	if (!glyph) {
+		warnIconOnce(name, `tab icon '${name}' isn't registered — call registerIcons() at boot.`);
+		return;
+	}
+
+	if (glyph.src) {
+		item.iconSource = glyph.src;
+	} else if (glyph.font) {
+		item.iconSource = 'font://' + glyph.font.glyph;
+		item.iconFontFamily = glyph.font.family;
+	} else if (glyph.text) {
+		item.iconSource = 'font://' + glyph.text;
+	} else {
+		warnIconOnce(
+			name,
+			`tab icon '${name}' has no src/font/text representation — the platform tab bar can't render svg/markup glyphs.`,
+		);
+	}
+}
+
+function warnIconOnce(name: string, msg: string): void {
+	if (iconWarned.has(name)) return;
+	iconWarned.add(name);
+	console.warn('[octane-xplat] ' + msg);
+}
+
+function itemsFor(tabs: readonly PlatformTabSpec[]): TabViewItem[] {
+	let items = itemsCache.get(tabs);
+	if (items !== undefined) return items;
+	items = tabs.map((t) => {
+		const item = new TabViewItem();
+		item.title = t.title;
+		if (t.icon) applyIcon(item, t.icon);
+		if (t.stack) {
+			const frame = new Frame();
+			frame.once('loaded', () => {
+				frame.navigate({
+					create: () => {
+						const page = new Page();
+						page.actionBarHidden = true;
+						const pane = new GridLayout();
+						page.content = pane;
+						createNativeScriptRoot(pane).render(
+							TabPane as unknown as UniversalComponent, { render: t.render, stack: t.stack });
+
+						return page;
+					},
+				});
+			});
+
+			registerStack(t.stack, frame);
+			item.view = frame;
+			return item;
+		}
+
+		const cv = new GridLayout();
+		tabsByView.set(cv, t.render);
+		item.view = cv;
+		return item;
+	});
+
+	itemsCache.set(tabs, items);
+	return items;
+}
+
+function mountPanes(e: any) {
+	const tv = e.object as TabView;
+	for (const item of tv.items as TabViewItem[]) {
+		const cv = item.view as GridLayout;
+		if (!(cv instanceof GridLayout) || paneRoots.has(cv)) continue;
+		const render = tabsByView.get(cv);
+		if (!render) continue;
+		const root = createNativeScriptRoot(cv);
+		paneRoots.set(cv, root);
+		root.render(TabPane as unknown as UniversalComponent, { render });
+	}
+}
+
+function NavInner(props: {
+	className?: any;
+	style?: any;
+	id?: string;
+	tabs: readonly PlatformTabSpec[];
+	selectedIndex?: number;
+	onSelectedIndexChanged?: (index: number) => void;
+	modifiers?: PlatformWidgetProps<PlatformTabsProps>['modifiers'];
+}) @{
+	<tabview
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		items={itemsFor(props.tabs)}
+		selectedIndex={props.selectedIndex}
+		onSelectedIndexChanged={(e: any) => props.onSelectedIndexChanged?.(e.value)}
+		onLoaded={mountPanes}
+	/>
+}
+
+// Memoized on the tabs array — TabView.item writes rebuild the native
+// structure, and the driver re-applies props every render.
+const MemoNav = memo(NavInner, (a, b) => a.tabs === b.tabs && a.selectedIndex === b.selectedIndex && a.modifiers === b.modifiers);
+
+/** BottomNavigationView — the platform tab bar (Android bottom navigation
+ *  via NativeScript TabView). Each `stack` pane hosts a Frame for the tab's
+ *  chrome, but pushes stay in the route store and render through RouteHost —
+ *  TabViewItem-hosted Frames lose navigation bookkeeping upstream
+ *  (NativeScript#11444; the #11446 fix ships in the xplat core patch).
+ *  `tabs` is identity-stable. */
+export function BottomNavigationView(props: PlatformWidgetProps<PlatformTabsProps>) @{
+	<MemoNav
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		tabs={props.tabs}
+		selectedIndex={props.selectedIndex}
+		onSelectedIndexChanged={props.onSelectedIndexChanged}
+		modifiers={props.modifiers}
+	/>
+}

package/src/android/CircularProgressIndicator.android.tsrx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ActivityIndicatorProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyNativeProps } from '../platformProps';
+
+/** CircularProgressIndicator — the platform spinner (Android indeterminate
+ *  ProgressBar via NativeScript `activityindicator`). The self-drawn shared
+ *  `ActivityIndicator` lives in the root export. */
+export function CircularProgressIndicator(props: PlatformWidgetProps<ActivityIndicatorProps>) @{
+	if (props.busy === false) return null;
+
+	<activityindicator
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		busy={props.busy ?? true}
+		ref={(el: any) => applyNativeProps(el, props)}
+	/>
+}

package/src/android/DrawerLayout.android.tsrx

@@ -0,0 +1,48 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import { Drawer as NSDrawer, install } from '@nativescript-community/ui-drawer';
+import { useEffect, useRef } from 'octane';
+import type { DrawerProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyEscapeProps } from '../escape-props';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		drawer: Attributes<typeof NSDrawer>;
+	}
+}
+
+// Optional peer: this leaf resolves only when the app ships the plugin
+// (isolated linker resolves it under the app root). install() registers the
+// plugin's gesture handler once at module load. The self-drawn shared
+// `Drawer` lives in the root export.
+install();
+registerElement('drawer', NSDrawer);
+
+/** DrawerLayout — ui-drawer host (AndroidX DrawerLayout behavior via the
+ *  plugin). `main`/`drawer` are slot props wired via the driver's hostSlot
+ *  mechanism; `open` drives the imperative open()/close(). Slot hosts are
+ *  gridlayout so each side stays multi-child. */
+export function DrawerLayout(props: PlatformWidgetProps<DrawerProps>) @{
+	const host = useRef<NSDrawer | null>(null);
+
+	useEffect(() => {
+		const d = host.current;
+		if (!d) return;
+		if (props.open && !d.isOpened('left')) d.open('left').catch(() => {});
+		else if (!props.open && d.isOpened('left')) d.close('left').catch(() => {});
+	}, [props.open]);
+
+	<drawer
+		id={props.id}
+		ref={(d: any) => { host.current = d; applyEscapeProps(d, props); }}
+		className={cx('vx-drawer', props.className)}
+		style={props.style}
+	>
+		<gridlayout hostSlot="mainContent">{props.main}</gridlayout>
+		@if (props.drawer != null) {
+			<gridlayout hostSlot="leftDrawer">{props.drawer}</gridlayout>
+		}
+	</drawer>
+}

package/src/android/MaterialDialog.android.tsrx

@@ -0,0 +1,62 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import type { ModalProps } from "../props";
+import { Frame, GridLayout } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import { applyThemeClasses } from '../theme/theme-scheme';
+import { modalPresenter } from '../modal-presenter.mobile';
+
+// The modal's content renders inside a separate Octane root on a GridLayout
+// host — modals never share context with their presenter (decision #9).
+function Panel(props: { children?: any }) @{
+	<>{props.children}</>
+}
+
+/** MaterialDialog — declarative `open` drives the platform modal
+ *  presentation (`showModal`; fullscreen=false is a centered dialog sized
+ *  to its content, not a bottom sheet). Renders nothing inline; the
+ *  content lives on the modal's own root above the whole tree. The shared
+ *  `ui` surface has no Modal — `Overlay`/`Sheet` are the self-drawn
+ *  in-window versions. */
+export function MaterialDialog(props: ModalProps) @{
+	const shown = useRef<{ host: GridLayout; root: any; unbindTheme?: () => void } | null>(null);
+
+	useEffect(() => {
+		if (props.open && !shown.current) {
+			const presenter = modalPresenter(Frame.topmost());
+			if (!presenter) {
+				// Dropped, not deferred: the effect only re-runs when props
+				// change, so warn loudly instead of silently swallowing open.
+				console.warn('[Modal] open dropped — no live presenter (currentPage mid-navigation or no active frame).');
+				return;
+			}
+			const host = new GridLayout();
+			const unbindTheme = applyThemeClasses(host, 'vx-modal-host');
+			const root = createNativeScriptRoot(host);
+			shown.current = { host, root, unbindTheme };
+			if (props.component) {
+				root.render(props.component as UniversalComponent, props.params ?? {});
+			} else {
+				root.render(Panel as unknown as UniversalComponent, { children: props.children });
+			}
+
+			const fullscreen = props.presentation
+				? props.presentation === 'fullscreen'
+				: props.fullscreen ?? true;
+
+			presenter.showModal(host, {
+				context: {},
+				closeCallback: (result?: unknown) => { shown.current?.unbindTheme?.(); shown.current = null; props.onClose?.(result); },
+				fullscreen,
+				animated: true,
+			});
+		} else if (!props.open && shown.current) {
+			const { host } = shown.current;
+			shown.current = null;
+			host.closeModal();
+		}
+	}, [props.open]);
+
+	<></>
+}

package/src/android/MaterialSwitch.android.tsrx

@@ -0,0 +1,18 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PlatformWidgetProps, SwitchProps } from "../props";
+import { cx } from "../cx";
+import { applyEscapeProps } from "../escape-props";
+
+/** MaterialSwitch — the platform widget (Material SwitchMaterial via
+ *  NativeScript `switch`). OS chrome is the point here; the self-drawn
+ *  shared `Switch` lives in the root export. */
+export function MaterialSwitch(props: PlatformWidgetProps<SwitchProps>) @{
+	<switch
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		checked={props.checked}
+		onCheckedChange={(e: any) => props.onCheckedChange?.(e.value)}
+	/>
+}

package/src/android/RecyclerView.android.tsrx

@@ -0,0 +1,173 @@
+/** @jsxImportSource @nativescript-community/octane */
+// Universal hooks import from 'octane' — the compiler retargets them to the
+// nativescript runtime, and the dev server serves them via HTTP-ESM.
+import { memo, useEffect, useRef } from 'octane';
+import { ScrollView } from '@nativescript/core';
+import type { ListProps, PlatformWidgetProps } from "../props";
+import type { RefreshConfig, RefreshController } from '../refresh';
+import { cx } from "../cx";
+import { ActivityIndicator } from '../ActivityIndicator.tsrx';
+import { applyEscapeProps } from '../escape-props';
+import { REFRESH_HEADER_HEIGHT } from '../refresh-metrics';
+import { createPullToRefresh } from '../refresh';
+
+function rejectNestedScrollView(event: any) {
+	let parent = event.object?.parent;
+	while (parent) {
+		if (parent instanceof ScrollView) {
+			throw new Error('[RecyclerView] cannot be nested inside native ScrollView. Use ScrollBox so the list owns scrolling.');
+		}
+
+		parent = parent.parent;
+	}
+}
+
+/** Stable ref bag across the memo boundary — refresh callbacks are fresh
+ *  closures each parent render, so the props live behind refs and the
+ *  memo compare just sees the same bag. */
+interface RefreshBag {
+	cfg: { current: RefreshConfig };
+	indicator: { current: any };
+	ctl: { current: RefreshController | null };
+}
+
+// Cell machinery is driver-owned since @nativescript-community/octane 0.2.1
+// (upstream #7, closes our issue #1): `renderItem` on <listview> makes
+// itemTemplate vend a ContentView per recycled cell, each with its own
+// universal root; itemLoading binds items[index] and skips unchanged rows;
+// a changed renderItem re-binds live cells; discard unmounts the roots.
+// The cell ContentView is single-child — a renderItem returning multiple
+// roots would silently drop siblings — so output wraps in a gridlayout.
+function RecyclerViewInner(props: {
+	className?: any;
+	style?: any;
+	id?: string;
+	items: any[];
+	renderItem: (item: any, index: number) => any;
+	onEndReached?: () => void;
+	android?: Record<string, any>;
+	modifiers?: PlatformWidgetProps<ListProps>['modifiers'];
+	refresh?: RefreshBag;
+}) @{
+	const lv = useRef<any>(null);
+	useEffect(() => {
+		const bag = props.refresh;
+		if (!bag || !lv.current) return;
+		bag.ctl.current = createPullToRefresh({
+			scroller: lv.current,
+			indicator: bag.indicator.current,
+			isAtTop: () => (lv.current?.android?.computeVerticalScrollOffset?.() ?? 0) <= 0,
+			cfg: bag.cfg,
+		});
+
+		return () => {
+			bag.ctl.current?.detach();
+			bag.ctl.current = null;
+		};
+	}, []);
+
+	<listview
+		ref={(v: any) => {
+			lv.current = v;
+			applyEscapeProps(v, props);
+		}}
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		items={props.items}
+		onLoadMoreItems={props.onEndReached}
+		onLoaded={rejectNestedScrollView}
+		renderItem={(item: any, index: number) => <gridlayout>{props.renderItem(item, index)}</gridlayout>}
+		{...props.android}
+	/>
+}
+
+// The listview subtree is memoized on `items` and list configuration: the
+// universal driver re-applies props on every render (no value diffing), and
+// each write can trigger view-level side effects — measured: every unrelated
+// parent re-render refired itemLoading for all visible cells. Memoized on the
+// items reference and list configuration, unrelated parent re-renders skip
+// this subtree. Constraint: `renderItem` should be identity-stable (a
+// useCallback-style ref) — a fresh closure each render is deliberately
+// not part of the compare. (`RecyclerViewInner` must precede this —
+// compiled components are consts, not hoisted functions.)
+const MemoListView = memo(RecyclerViewInner, (a, b) =>
+	a.items === b.items &&
+	a.className === b.className &&
+	a.style === b.style &&
+	a.id === b.id &&
+	a.onEndReached === b.onEndReached &&
+	a.android === b.android &&
+	a.modifiers === b.modifiers &&
+	a.refresh === b.refresh
+);
+
+/** RecyclerView — the platform recycling list (Android RecyclerView via
+ *  NativeScript `listview`). `items` is a plain array, ItemsSource, or
+ *  ObservableArray — the driver binds `items[index]` into the recycled
+ *  cell's root and skips rebinds whose row, item, and renderer are
+ *  unchanged. Cell identity = the recycled host view, not the item.
+ *  The shared `ui` export has no List — compose ScrollView + mapped
+ *  children there.
+ *
+ *  `refreshing`/`onRefresh`/`refreshThreshold` enable pull-to-refresh:
+ *  the indicator is self-drawn (vx-spinner) and the list is translated
+ *  inside a clipped wrapper while the drag accumulates — no
+ *  SwipeRefreshLayout, so the pixels match the shared ScrollView path. */
+export function RecyclerView(props: PlatformWidgetProps<ListProps>) @{
+	const refreshCapable = props.onRefresh != null || props.refreshing != null;
+	const cfg = useRef<RefreshConfig>({});
+	cfg.current = {
+		onRefresh: props.onRefresh,
+		refreshing: props.refreshing,
+		threshold: props.refreshThreshold,
+	};
+
+	const indicator = useRef<any>(null);
+	const ctl = useRef<RefreshController | null>(null);
+	const refresh = useRef<RefreshBag>({ cfg, indicator, ctl });
+
+	useEffect(() => {
+		ctl.current?.sync();
+	}, [props.refreshing]);
+
+	@if (props.items.length > 0) {
+		@if (refreshCapable) {
+			<gridlayout className={cx('vx-refresh-wrap', props.className)} style={props.style}>
+				<MemoListView
+					id={props.id}
+					items={props.items}
+					renderItem={props.renderItem}
+					onEndReached={props.onEndReached}
+					android={props.android}
+					modifiers={props.modifiers}
+					refresh={refresh.current}
+				/>
+				<flexboxlayout
+					ref={(v: any) => {
+						indicator.current = v;
+					}}
+					className="vx-refresh"
+					verticalAlignment="top"
+					height={REFRESH_HEADER_HEIGHT}
+					translateY={-REFRESH_HEADER_HEIGHT}
+				>
+					<ActivityIndicator />
+				</flexboxlayout>
+			</gridlayout>
+		} @else {
+			<MemoListView
+				id={props.id}
+				items={props.items}
+				className={props.className}
+				style={props.style}
+				renderItem={props.renderItem}
+				onEndReached={props.onEndReached}
+				android={props.android}
+				modifiers={props.modifiers}
+			/>
+		}
+	} @else {
+		<>{props.renderEmpty?.()}</>
+	}
+}

package/src/android/SeekBar.android.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PlatformWidgetProps, SliderProps } from '../props';
+import { cx } from '../cx';
+import { applyNativeProps } from '../platformProps';
+
+/** SeekBar — the platform widget (Android SeekBar via NativeScript
+ *  `slider`). The self-drawn shared `Slider` lives in the root export. */
+export function SeekBar(props: PlatformWidgetProps<SliderProps>) @{
+	<slider
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		value={props.value}
+		minValue={props.minValue ?? 0}
+		maxValue={props.maxValue ?? 100}
+		isEnabled={props.disabled ? false : true}
+		onValueChange={(e: any) => props.onValueChange?.(e.value)}
+		ref={(el: any) => applyNativeProps(el, props)}
+	/>
+}

package/src/android/icon.android.ts

@@ -0,0 +1,8 @@
+import type { PlatformIconChoice } from '../props'
+
+/** Selector for glyphs used by Android-authentic widgets; the shared root Icon is unchanged. */
+export const Icon = {
+	select(choice: PlatformIconChoice): string {
+		return choice.android.startsWith('res://') ? choice.android : `res://drawable/${choice.android}`
+	},
+}

package/src/android/index.ts

@@ -0,0 +1,37 @@
+// @octane-xplat/ui/android — Android-authentic widgets. OS chrome is the
+// point: these resolve only in native builds (the `ui/android` subpath has
+// no `web` export condition). Use inside `.android.tsrx`/`.mobile.tsrx`
+// files, or behind `isAndroid` in native-default code — a shared `.tsrx` that
+// imports this path fails the web build on purpose.
+
+export { MaterialSwitch } from './MaterialSwitch.android.tsrx'
+export { SeekBar } from './SeekBar.android.tsrx'
+export { CircularProgressIndicator } from './CircularProgressIndicator.android.tsrx'
+export { RecyclerView } from './RecyclerView.android.tsrx'
+export { BottomNavigationView } from './BottomNavigationView.android.tsrx'
+export type { PlatformTabSpec as TabSpec } from '../props'
+export { MaterialDialog } from './MaterialDialog.android.tsrx'
+export { openModal } from './openModal.android'
+export { DrawerLayout } from './DrawerLayout.android.tsrx'
+export { Icon } from './icon.android'
+export { modifier } from '../modifier-factories'
+
+export type {
+	SwitchProps,
+	SliderProps,
+	ActivityIndicatorProps,
+	ListProps,
+	TabsProps,
+	ModalProps,
+	ModalOpenOptions,
+	ModalOpenResult,
+	OpenModal,
+	DrawerProps,
+	NativeModifier,
+	NativeModifierValue,
+	PlatformIconChoice,
+	PlatformTabSpec,
+	PlatformTabsProps,
+	PlatformWidgetProps,
+	RefreshProps,
+} from '../props'

package/src/android/openModal.android.ts

@@ -0,0 +1,55 @@
+import { Frame, GridLayout } from '@nativescript/core'
+import { createNativeScriptRoot } from '@nativescript-community/octane'
+import type { UniversalComponent } from 'octane/universal'
+import type { ModalOpenOptions, ModalOpenResult, OpenModal } from '../props'
+import { applyThemeClasses } from '../theme/theme-scheme'
+import { modalPresenter } from '../modal-presenter.mobile'
+
+/** Open a component in its own NativeScript modal root and resolve on close. */
+export const openModal: OpenModal = (Component, params, options = {}) =>
+	new Promise<ModalOpenResult>((resolve, reject) => {
+		const presenter = modalPresenter(Frame.topmost())
+		if (!presenter) {
+			reject(
+				new Error(
+					'openModal dropped — no live presenter. The topmost frame has no loaded currentPage (a page mid-navigation), or no frame is active yet.',
+				),
+			)
+
+			return
+		}
+
+		const host = new GridLayout()
+		const unbindTheme = applyThemeClasses(host, 'vx-modal-host')
+		const root = createNativeScriptRoot(host) as any
+		let finished = false
+		const finish = (result?: ModalOpenResult) => {
+			if (finished) {
+				return
+			}
+
+			finished = true
+			unbindTheme()
+			root.unmount?.()
+			host.removeChildren?.()
+			resolve(result)
+		}
+
+		const close = (result?: ModalOpenResult) => host.closeModal(result)
+		root.render(Component as UniversalComponent, { params, close })
+
+		const fullscreen = options.presentation
+			? options.presentation === 'fullscreen'
+			: (options.fullscreen ?? true)
+
+		// showModal takes (viewToShow, options). On Android fullscreen=false is
+		// a centered dialog sized to its content.
+		presenter.showModal(host, {
+			context: {},
+			closeCallback: finish,
+			fullscreen,
+			animated: options.animated ?? true,
+		})
+	})
+
+export type { ModalOpenOptions }

package/src/anim.macos.tsrx

@@ -0,0 +1,20 @@
+import type { AnimatedValue } from './props'
+
+/** AppKit animation writes currently commit their target value immediately.
+ * This preserves the shared hook surface while the host animation driver is
+ * still unsupported. */
+export function useAnimation(initial = 0, property = 'opacity'): AnimatedValue {
+	let value = initial
+	let view: any
+	const write = (next: number) => {
+		value = next
+		if (view) {view[property] = next}
+	}
+	return {
+		get value() { return value },
+		bind(el: any) { view = el; write(value) },
+		to(target: number) { write(target) },
+		spring(target: number) { write(target) },
+		stop() {},
+	}
+}