@octane-xplat/ui 0.6.0 → 0.7.1

package/src/ListItem.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ListItemComponent, ListItemProps, ListItemSlotProps } from './props'
+import { Pressable } from './Pressable.tsrx'
+import { Text } from './Text.tsrx'
+import { cx } from './cx'
+
+function Leading(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-leading', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Content(props: ListItemSlotProps) @{
+	<flexboxlayout flexDirection="column" className={cx('vx-listitem-content', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Supporting(props: ListItemSlotProps) @{
+	<Text className={cx('vx-listitem-supporting', props.className)}>{props.children}</Text>
+}
+
+function Trailing(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-trailing', props.className)}>{props.children}</flexboxlayout>
+}
+
+function ListItemView(props: ListItemProps) @{
+	<Pressable
+		id={props.id}
+		className={cx('vx-listitem', props.className)}
+		style={props.style}
+		onPress={props.onPress}
+		disabled={props.disabled}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : 'text')}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.leading != null ? <Leading>{props.leading}</Leading> : null}
+		{props.title != null || props.supportingText != null ? (
+			<Content>
+				{props.title != null ? <Text className="vx-listitem-title">{props.title}</Text> : null}
+				{props.supportingText != null ? <Supporting>{props.supportingText}</Supporting> : null}
+			</Content>
+		) : null}
+		{props.children}
+		{props.trailing != null ? <Trailing>{props.trailing}</Trailing> : null}
+	</Pressable>
+}
+
+export const ListItem = Object.assign(ListItemView, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing,
+}) as ListItemComponent

package/src/ListItem.web.tsrx

@@ -0,0 +1,50 @@
+import type { ListItemComponent, ListItemProps, ListItemSlotProps } from './props'
+import { Pressable } from './Pressable.web.tsrx'
+import { Text } from './Text.web.tsrx'
+
+function Leading(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-leading', props.className]}>{props.children}</div>
+}
+
+function Content(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-content', props.className]}>{props.children}</div>
+}
+
+function Supporting(props: ListItemSlotProps) @{
+	<Text className={['vx-listitem-supporting', props.className]}>{props.children}</Text>
+}
+
+function Trailing(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-trailing', props.className]}>{props.children}</div>
+}
+
+function ListItemView(props: ListItemProps) @{
+	<Pressable
+		id={props.id}
+		className={['vx-listitem', props.className]}
+		style={props.style}
+		onPress={props.onPress}
+		disabled={props.disabled}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : 'text')}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.leading != null ? <Leading>{props.leading}</Leading> : null}
+		{props.title != null || props.supportingText != null ? (
+			<Content>
+				{props.title != null ? <Text className="vx-listitem-title">{props.title}</Text> : null}
+				{props.supportingText != null ? <Supporting>{props.supportingText}</Supporting> : null}
+			</Content>
+		) : null}
+		{props.children}
+		{props.trailing != null ? <Trailing>{props.trailing}</Trailing> : null}
+	</Pressable>
+}
+
+export const ListItem = Object.assign(ListItemView, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing,
+}) as ListItemComponent

package/src/Meter.macos.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { MeterProps } from './props'
+
+export function Meter(props: MeterProps) @{
+	<label id={props.id} className={props.className} accessibilityRole="progressbar">
+		{String(props.value ?? 0) + ' / ' + String(props.max ?? 100)}
+	</label>
+}

package/src/Meter.tsrx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { AccessibilityRole } from '@nativescript/core';
+import type { MeterProps } from './props';
+import { cx } from './cx';
+import { meterRange } from './meter-math';
+import './svg.mobile';
+
+/** Ring markup matching the web leaf's conic-gradient: a track circle plus a
+ *  dash-array arc rotated to start at 12 o'clock, drawn by `svgview`
+ *  (androidsvg on Android, SVGKit on iOS). The module-level import above is
+ *  the side effect that registers the element. */
+function ringSvg(size: number, strokeWidth: number, ratio: number, color: string, trackColor: string): string {
+	const c = size / 2;
+	const r = Math.max(0, (size - strokeWidth) / 2);
+	const circumference = 2 * Math.PI * r;
+	const track = `<circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="${trackColor}" stroke-width="${strokeWidth}"/>`;
+	const arc = ratio > 0 && r > 0
+		? `<circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-dasharray="${ratio * circumference} ${circumference}" transform="rotate(-90 ${c} ${c})"/>`
+		: '';
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">${track}${arc}</svg>`;
+}
+
+export function Meter(props: MeterProps) @{
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? '#3376cc';
+	const trackColor = props.trackColor ?? '#e1ecf7';
+
+	<gridlayout
+		id={props.id}
+		className={cx('vx-meter', props.className)}
+		style={{ width: size, height: size, ...props.style }}
+		accessible={true}
+		accessibilityRole={AccessibilityRole.ProgressBar}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityValue={`${value} of ${rangeMax}`}
+	>
+		<svgview src={ringSvg(size, strokeWidth, ratio, color, trackColor)} stretch="aspectFit" style={{ width: size, height: size }} />
+		<gridlayout horizontalAlignment="center" verticalAlignment="middle">
+			{props.children}
+		</gridlayout>
+	</gridlayout>
+}

package/src/Meter.web.tsrx

@@ -0,0 +1,32 @@
+import type { MeterProps } from './props';
+import { meterRange } from './meter-math';
+
+export function Meter(props: MeterProps) @{
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? '#3376cc';
+	const trackColor = props.trackColor ?? '#e1ecf7';
+	const sweep = ratio * 360;
+	const ringStyle = {
+		position: 'absolute' as const, inset: 0, borderRadius: '50%',
+		backgroundImage: `conic-gradient(${color} 0deg ${sweep}deg, ${trackColor} ${sweep}deg 360deg)`,
+		mask: `radial-gradient(circle, transparent calc(50% - ${strokeWidth}px), #000 calc(50% - ${strokeWidth}px + 0.5px))`,
+		WebkitMask: `radial-gradient(circle, transparent calc(50% - ${strokeWidth}px), #000 calc(50% - ${strokeWidth}px + 0.5px))`,
+	};
+
+	<div
+		id={props.id}
+		className={['vx-meter', props.className]}
+		style={{ display: 'grid', placeItems: 'center', position: 'relative', width: size, height: size, ...props.style }}
+		role="progressbar"
+		aria-label={props.accessibilityLabel}
+		aria-valuemin={0}
+		aria-valuemax={rangeMax}
+		aria-valuenow={value}
+	>
+		<div aria-hidden="true" style={ringStyle} />
+		<div style={{ position: 'relative' }}>{props.children}</div>
+	</div>
+}

package/src/NavLink.macos.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { NavLinkProps } from './props';
+import { Pressable } from './Pressable.macos.tsrx';
+import { pushRoute, useRoute } from './route.macos';
+import { cx } from './cx';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	<Pressable
+		className={cx(props.className, active ? props.activeClassName : undefined)}
+		style={props.style}
+		accessibilityRole="link"
+		onPress={() => pushRoute(props.route)}
+	>
+		<flexboxlayout flexDirection="row">{props.children}</flexboxlayout>
+	</Pressable>
+}

package/src/NavLink.tsrx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { NavLinkProps } from './props';
+import { Pressable } from './Pressable.tsrx';
+import { pushRoute, useRoute } from './route';
+import { cx } from './cx';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	<Pressable
+		className={cx(props.className, active ? props.activeClassName : undefined)}
+		onPress={() => pushRoute(props.route)}
+	>
+		<flexboxlayout flexDirection="row">{props.children}</flexboxlayout>
+	</Pressable>
+}

package/src/NavLink.web.tsrx

@@ -0,0 +1,23 @@
+import type { NavLinkProps } from './props';
+import { hrefFor, pushRoute, useRoute } from './route.web';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	const href = hrefFor(props.route);
+	const navigate = (event: any) => {
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		event.preventDefault();
+		pushRoute(props.route);
+	};
+
+	<a href={href} className={[props.className, active ? props.activeClassName : '']} onClick={navigate}>
+		{props.children}
+	</a>
+}

package/src/NavigationMenu.macos.tsrx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { NavigationMenuProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal === false ? 'column' : 'row'}
+		className={cx('vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout
+				className={cx('vx-navmenu-item', item.active && 'vx-navmenu-item--on', item.disabled && 'vx-navmenu-item--disabled')}
+				flexDirection="row"
+				alignItems="center"
+				style={{ padding: '6px 10px', borderRadius: 4, ...(item.active ? { backgroundColor: '#eaeaea' } : {}), ...(item.disabled ? { opacity: 0.5 } : {}) }}
+				onTap={item.disabled ? undefined : item.onSelect}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <label className="vx-navmenu-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/NavigationMenu.tsrx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { NavigationMenuProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal === false ? 'column' : 'row'}
+		className={cx('vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout
+				className={cx('vx-navmenu-item', item.active && 'vx-navmenu-item--on', item.disabled && 'vx-navmenu-item--disabled')}
+				onTap={item.disabled ? undefined : item.onSelect}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <label className="vx-navmenu-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/NavigationMenu.web.tsrx

@@ -0,0 +1,31 @@
+import type { NavigationMenuProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** NavigationMenu — row (or column) of nav items. Mostly a desktop/web
+ *  idiom; the mobile equivalent is Tabs/Drawer. */
+export function NavigationMenu(props: NavigationMenuProps) @{
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-navmenu', props.horizontal === false ? 'vx-navmenu--col' : 'vx-navmenu--row', props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel}
+	>
+		{props.items.map((item: any) => (
+			<span
+				key={item.key}
+				role="link"
+				aria-current={item.active ? 'page' : undefined}
+				aria-disabled={item.disabled || undefined}
+				tabIndex={item.disabled ? undefined : 0}
+				className={['vx-navmenu-item', item.active ? 'vx-navmenu-item--on' : undefined, item.disabled ? 'vx-navmenu-item--disabled' : undefined]}
+				onClick={item.disabled ? undefined : item.onSelect}
+				onKeyDown={(e: any) => { if (!item.disabled && e.key === 'Enter') item.onSelect?.(); }}
+			>
+				{item.icon ? <Icon name={item.icon} /> : null}
+				{item.label != null ? <span className="vx-navmenu-label">{item.label}</span> : null}
+			</span>
+		))}
+	</nav>
+}

package/src/Overlay.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { OverlayProps } from './props'
+import { cx } from './cx'
+
+export function Overlay(props: OverlayProps) @{
+	@if (props.open) {
+		<flexboxlayout flexDirection="column" className={cx('vx-overlay', props.className)} style={props.style}>
+			{props.children}
+		</flexboxlayout>
+	}
+}

package/src/Overlay.tsrx

@@ -0,0 +1,84 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { OverlayProps } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout.mobile';
+
+function OverlayBody(props: { children?: any }) @{
+	<>{props.children}</>
+}
+
+type OpenOverlay = { host: GridLayout; root: any; dismissOnClose: boolean; unbindTheme?: () => void };
+
+/** Renders children in a separate RootLayout root above the current screen. */
+export function Overlay(props: OverlayProps) @{
+	const shown = useRef<OpenOverlay | null>(null);
+	const hostView = useRef<any>(null);
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+
+	const rootLayout = () => rootLayoutFor(hostView.current);
+
+	useEffect(() => {
+		const current = shown.current;
+		if (!props.open) {
+			if (!current) return;
+			current.dismissOnClose = false;
+			shown.current = null;
+			const rl = rootLayout();
+			if (rl && (rl as any)?.hasChild?.(current.host)) {
+				rl.close(current.host).then(
+					() => current.root.unmount?.(),
+					(error) => { console.error('[Overlay] close failed', error); current.root.unmount?.(); },
+				);
+			} else current.root.unmount?.();
+
+			return;
+		}
+
+		if (current) {
+			current.root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+			current.unbindTheme = applyThemeClasses(current.host, cx('vx-overlay-host', props.className));
+			if (props.style) Object.assign(current.host.style, props.style);
+			Object.assign(current.host, isIOS ? props.ios : isAndroid ? props.android : undefined);
+			return;
+		}
+
+		const rl = rootLayout();
+		if (!rl) return;
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx('vx-overlay-host', props.className));
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'stretch';
+		if (props.style) Object.assign(host.style, props.style);
+		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
+		const root = createNativeScriptRoot(host);
+		const opened = { host, root, dismissOnClose: true, unbindTheme };
+		shown.current = opened;
+		root.render(OverlayBody as unknown as UniversalComponent, { children: props.children });
+		host.on('closed', () => {
+			if (shown.current === opened) shown.current = null;
+			opened.unbindTheme?.();
+			root.unmount?.();
+			if (opened.dismissOnClose) dismiss.current?.();
+		});
+
+		const open = () => rl.open(host, props.shadeCover ? {
+			shadeCover: { opacity: 0.45, color: '#000000', tapToClose: true },
+		} : {}).catch((error: unknown) => {
+			if (shown.current === opened) shown.current = null;
+			console.error('[Overlay] open failed', error);
+			root.unmount?.();
+		});
+
+		if ((rl as any).hasChild?.(host)) {
+			rl.close(host).then(open, (error) => console.error('[Overlay] stale host close failed', error));
+		} else open();
+	}, [props.open, props.children, props.shadeCover, props.className, props.style, props.ios, props.android]);
+
+	<stacklayout ref={(v: any) => { hostView.current = v; }} style={{ width: 0, height: 0 }} />
+}

package/src/Overlay.web.tsrx

@@ -0,0 +1,23 @@
+import { createPortal } from 'octane';
+import type { OverlayProps } from './props';
+import { useThemeScheme } from './theme/theme-scheme';
+import { cx } from './cx';
+
+/** Renders an in-window overlay through the DOM renderer's body portal. */
+export function Overlay(props: OverlayProps) @{
+	const dark = useThemeScheme() === 'dark';
+
+	@if (props.open) {
+		<>{createPortal(
+			<div className={cx('vx-overlay', dark && 'dark', props.className)} style={{ ...props.style, position: 'fixed', inset: 0 }} {...props.web}>
+				@if (props.shadeCover) {
+					<div className="vx-overlay-shade" onClick={props.onDismiss} />
+				}
+				<div className="vx-overlay-content" onClick={(event: any) => event.stopPropagation()}>
+					{props.children}
+				</div>
+			</div>,
+			document.body,
+		)}</>
+	}
+}

package/src/Pagination.macos.tsrx

@@ -0,0 +1,54 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PaginationProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: { key: string; page: number | null }[] = [];
+	let lastEllipsis = false;
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push({ key: String(p), page: p });
+			lastEllipsis = false;
+		} else if (!lastEllipsis) {
+			pages.push({ key: 'e' + p, page: null });
+			lastEllipsis = true;
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		alignItems="center"
+		className={cx('vx-pagination', props.disabled && 'vx-pagination--disabled', props.className)}
+		style={props.style}
+	>
+		<flexboxlayout className="vx-page-btn" justifyContent="center" alignItems="center" style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4 }} 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')}
+					justifyContent="center"
+					alignItems="center"
+					style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4, ...(e.page === current ? { backgroundColor: '#171717', borderColor: '#171717', color: '#fafafa' } : {}) }}
+					onTap={() => go(e.page!)}
+				>
+					<label text={String(e.page)} />
+				</flexboxlayout>}</>
+		}
+		<flexboxlayout className="vx-page-btn" justifyContent="center" alignItems="center" style={{ width: 28, height: 28, borderWidth: 1, borderColor: '#eaeaea', borderRadius: 4 }} onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/Pagination.tsrx

@@ -0,0 +1,47 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PaginationProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: { key: string; page: number | null }[] = [];
+	let lastEllipsis = false;
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push({ key: String(p), page: p });
+			lastEllipsis = false;
+		} else if (!lastEllipsis) {
+			pages.push({ key: 'e' + p, page: null });
+			lastEllipsis = true;
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-pagination', props.disabled && 'vx-pagination--disabled', props.className)}
+		style={props.style}
+	>
+		<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!)}>
+					<label text={String(e.page)} />
+				</flexboxlayout>}
+		}
+		<flexboxlayout className="vx-page-btn" onTap={() => go(current + 1)}><label text="›" /></flexboxlayout>
+	</flexboxlayout>
+}

package/src/Pagination.web.tsrx

@@ -0,0 +1,50 @@
+import type { PaginationProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Pagination — ‹ › plus a windowed run of page buttons around `page`
+ *  (first, last, `siblingCount` each side, … for gaps). */
+export function Pagination(props: PaginationProps) @{
+	const sibling = props.siblingCount ?? 1;
+	const count = Math.max(0, props.pageCount);
+	const current = Math.min(Math.max(1, props.page), Math.max(1, count));
+
+	const pages: (number | '…')[] = [];
+	for (let p = 1; p <= count; p++) {
+		if (p === 1 || p === count || Math.abs(p - current) <= sibling) {
+			pages.push(p);
+		} else if (pages[pages.length - 1] !== '…') {
+			pages.push('…');
+		}
+	}
+
+	const go = (p: number) => {
+		if (props.disabled || p < 1 || p > count || p === current) return;
+		props.onPageChange?.(p);
+	};
+
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-pagination', props.disabled ? 'vx-pagination--disabled' : undefined, props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel ?? 'Pagination'}
+	>
+		<span className="vx-page-btn" role="button" aria-disabled={current <= 1 || props.disabled || undefined} tabIndex={0} onClick={() => go(current - 1)}>‹</span>
+		{pages.map((p: number | '…', i: number) => (
+			p === '…'
+				? <span key={'e' + i} className="vx-page-ellipsis">…</span>
+				: <span
+					key={p}
+					className={['vx-page-btn', p === current ? 'vx-page-btn--on' : undefined]}
+					role="button"
+					aria-current={p === current ? 'page' : undefined}
+					tabIndex={0}
+					onClick={() => go(p)}
+					onKeyDown={(e: any) => { if (e.key === 'Enter') go(p); }}
+				>
+					{p}
+				</span>
+		))}
+		<span className="vx-page-btn" role="button" aria-disabled={current >= count || props.disabled || undefined} tabIndex={0} onClick={() => go(current + 1)}>›</span>
+	</nav>
+}