@octane-xplat/ui 0.6.0 → 0.7.0

package/dist/web/WebView.web.tsrx.js

@@ -1,21 +1,22 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { layoutChildProps } from "./layout-child.web.js";
-import { __s, bag16, clone, hookSlots, snapshotSpread, template } from "octane";
+import { __s, bag16, clone, hookSlots, snapshotSpread, template, useEffect, useRef } from "octane";
 import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
 //#region src/WebView.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<iframe></iframe>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
 var _rm$1 = [
 	"s",
 	"n",
 	"m"
 ];
-var _hs$ = /* @__PURE__ */ hookSlots(1);
 var DEFAULT_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals";
 var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
 	let __hk = __memoRegion.hooks;
 	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const frame = useRef(null, _hs$ + 0);
 	const handle = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (el) => ({
 		reload: () => {
 			try {
@@ -33,12 +34,47 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 		},
 		native: el
 	}));
+	useEffect(() => {
+		const el = frame.current;
+		if (!el) return;
+		let observer;
+		let observedDocument;
+		const measure = () => {
+			try {
+				const doc = el.contentDocument;
+				const body = doc?.body;
+				const root = doc?.documentElement;
+				if (!doc || !body || !root) return;
+				const size = {
+					width: Math.max(body.scrollWidth, root.scrollWidth),
+					height: Math.max(body.scrollHeight, root.scrollHeight)
+				};
+				if (size.width <= 0 || size.height <= 0) return;
+				if (props.matchContents) el.style.height = `${size.height}px`;
+				props.onLayoutContent?.(size);
+				if (observedDocument !== doc && typeof ResizeObserver !== "undefined") {
+					observer?.disconnect();
+					observer = new ResizeObserver(measure);
+					observer.observe(body);
+					observer.observe(root);
+					observedDocument = doc;
+				}
+			} catch {}
+		};
+		el.addEventListener("load", measure);
+		measure();
+		return () => {
+			el.removeEventListener("load", measure);
+			observer?.disconnect();
+		};
+	}, [props.matchContents, props.onLayoutContent], _hs$ + 1);
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13;
 		const _root = clone(_t$0);
 		_m0 = (el) => {
 			if (!el) return;
+			frame.current = el;
 			applyEscapeProps(el, props);
 			props.bind?.(handle(el));
 		};
@@ -114,13 +150,14 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_m11
 			]
-		], "b:adbe378c", false);
+		], "b:5cdc9608", false);
 		_b = bag16(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
 		{
 			const _v = (el) => {
 				if (!el) return;
+				frame.current = el;
 				applyEscapeProps(el, props);
 				props.bind?.(handle(el));
 			};
@@ -227,9 +264,9 @@ var WebView = /* @__PURE__ */ __s(function WebView(props, __s, __extra) {
 				"onError",
 				_b.l
 			]
-		], "b:adbe378c", false);
+		], "b:5cdc9608", false);
 	}
-	_b.q = bindSignalChild(__s, _b.q, 1, _b.m, Object.prototype.propertyIsEnumerable.call(_b.n.resolved, "children") ? _b.n.resolved.children : void 0, "b:adbe378c", null, void 0, void 0, void 0, true);
+	_b.q = bindSignalChild(__s, _b.q, 1, _b.m, Object.prototype.propertyIsEnumerable.call(_b.n.resolved, "children") ? _b.n.resolved.children : void 0, "b:5cdc9608", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { WebView };

package/dist/web/index.shared.web.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": "713b80db-403f-439c-98d0-7aed298c257f",
+  "buildId": "78256e80-6068-49f2-aacb-e3e38333d9ee",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/platform.web.js

@@ -1,6 +1,6 @@
 //#region src/platform.web.ts
 /** Compile-time platform flag — `false` in every web build. Prefer
-*  `.web`/`.native` leaves for real divergence; `isNative` covers the
+*  `.web`/unsuffixed native defaults leaves for real divergence; `isNative` covers the
 *  render-time cases (conditional JSX, prop selection) where a whole
 *  leaf file is heavier than the difference. Bundlers constant-fold it,
 *  so `!isNative` branches tree-shake out of web output. */

package/dist/web/route-table.js

@@ -1,13 +1,12 @@
 //#region src/route-table.ts
 var EXT = /\.(tsrx|tsx|ts|mts|cts|js|mjs|cjs|jsx)$/;
-var SUFFIX = /\.(web|native|ios|android)$/;
+var SUFFIX = /\.(web|mobile|ios|android|macos|windows|linux)$/;
 var PARAM = /^\[(.+)\]$/;
 var PRESENT = /\+(modal|fade|push)$/;
 /** Internal error carrier used by the public `redirect()` helper. Keeping
 * this in the shared route table gives both platform leaves the same guard
 * behavior without importing a platform runtime. */
 var RouteRedirect = class extends Error {
-	route;
 	constructor(route) {
 		super("route redirect");
 		this.route = route;
@@ -102,7 +101,109 @@ function deriveRouteManifest(files, prefer, dir = "app") {
 		routes.push(meta);
 		if (meta.loader) loaders[meta.name] = meta.loader;
 	}
-	routes.sort((a, b) => b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name));
+	routes.sort(bySpecificity);
+	return {
+		screens,
+		routes,
+		layouts,
+		loaders
+	};
+}
+/** Match-order comparator: static segments (2) outrank params (1), ties
+*  break alphabetically so ordering is total and stable across merges. */
+function bySpecificity(a, b) {
+	return b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name);
+}
+/** Normalize a programmatic `path` into manifest segments using the
+*  route-dir vocabulary: `'docs/[slug]'` and `'docs/:slug'` are the same
+*  pattern, a trailing `index` drops, `''`/`'index'` name the root route. */
+function specSegments(path) {
+	const segs = path.split("/").filter(Boolean).map((s) => {
+		const p = PARAM.exec(s);
+		return p ? ":" + p[1] : s;
+	});
+	if (segs[segs.length - 1] === "index") segs.pop();
+	return segs;
+}
+var mergeWarned = /* @__PURE__ */ new Set();
+/** Build a manifest from app data rather than the route dir — the
+*  programmatic half of the route contract (host frameworks derive specs
+*  from their own sources, e.g. `readdirSync` over a content dir). Each
+*  spec's `path` uses the route-dir vocabulary; `layouts` keys are path
+*  prefixes playing the `_layout` role. Same-name duplicates inside the
+*  set keep the later entry with a warn, matching merge precedence. */
+function defineRoutes(input) {
+	const set = Array.isArray(input) ? { routes: input } : input;
+	const specs = set.routes;
+	const extra = set.layouts;
+	const screens = {};
+	const layouts = {};
+	const metas = /* @__PURE__ */ new Map();
+	const warned = /* @__PURE__ */ new Set();
+	for (const [key, layout] of Object.entries(extra ?? {})) {
+		const dir = key.replace(/^\/+|\/+$/g, "");
+		if (dir !== key) console.warn(`[octane-xplat] layout key '${key}' normalized to '${dir}'`);
+		layouts[dir] = layout;
+	}
+	for (const spec of specs) {
+		const segments = specSegments(spec.path);
+		const name = segments.join("/") || "index";
+		const meta = {
+			name,
+			segments,
+			params: segments.filter((s) => s.startsWith(":")).map((s) => s.slice(1)),
+			file: spec.source ?? `programmatic:${spec.path}`,
+			presentation: spec.presentation
+		};
+		if (spec.loader) meta.loader = spec.loader;
+		if (spec.beforeLoad) meta.beforeLoad = spec.beforeLoad;
+		if (spec.head) meta.head = spec.head;
+		if (metas.has(name) && !warned.has(name)) {
+			warned.add(name);
+			console.warn(`[octane-xplat] route '${name}' is defined twice — keeping the later spec (${meta.file})`);
+		}
+		if (typeof spec.screen !== "function") {
+			console.warn(`[octane-xplat] route '${name}' has no component — 'screen' must be a component function, not a module`);
+			continue;
+		}
+		metas.set(name, meta);
+		screens[name] = spec.screen;
+	}
+	const routes = [...metas.values()].sort(bySpecificity);
+	const loaders = {};
+	for (const meta of routes) if (meta.loader) loaders[meta.name] = meta.loader;
+	return {
+		screens,
+		routes,
+		layouts,
+		loaders
+	};
+}
+/** Compose manifests into one — file-derived base plus any number of
+*  programmatic sets (`registerRoutes(mergeRouteManifests(fromDir, dynamic))`).
+*  Registration order is precedence: on a same-name collision the later
+*  manifest's route wins and the loser's loader/beforeLoad/head go with it —
+*  a warn fires once per colliding name. `layouts` merge key-wise the same
+*  way. `matchRoute` order is rebuilt by specificity after the merge. */
+function mergeRouteManifests(...manifests) {
+	const screens = {};
+	const layouts = {};
+	const winners = /* @__PURE__ */ new Map();
+	for (const m of manifests) {
+		Object.assign(layouts, m.layouts);
+		Object.assign(screens, m.screens);
+		for (const meta of m.routes) {
+			const prev = winners.get(meta.name);
+			if (prev && !mergeWarned.has(meta.name)) {
+				mergeWarned.add(meta.name);
+				console.warn(`[octane-xplat] route '${meta.name}' is defined by both ${prev.file} and ${meta.file} — keeping ${meta.file}`);
+			}
+			winners.set(meta.name, meta);
+		}
+	}
+	const routes = [...winners.values()].sort(bySpecificity);
+	const loaders = {};
+	for (const meta of routes) if (meta.loader) loaders[meta.name] = meta.loader;
 	return {
 		screens,
 		routes,
@@ -246,4 +347,4 @@ function layoutChain(layouts, name) {
 	return chain;
 }
 //#endregion
-export { RouteRedirect, buildRoutePath, deriveRouteManifest, layoutChain, linkPath, matchRoute, matchUrl, parseQueryString };
+export { RouteRedirect, buildRoutePath, defineRoutes, deriveRouteManifest, layoutChain, linkPath, matchRoute, matchUrl, mergeRouteManifests, parseQueryString };

package/dist/web/route.web.js

@@ -1,29 +1,54 @@
-import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./route-table.js";
+import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl, mergeRouteManifests } from "./route-table.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/route.web.ts
+var baseManifest = {
+	screens: {},
+	routes: [],
+	layouts: {}
+};
+var dynamicManifests = [];
 var screens = {};
 var routes = [];
 var routeLayouts = {};
 var routeLoaders = {};
+function rebuildRegistry() {
+	const merged = mergeRouteManifests(baseManifest, ...dynamicManifests);
+	screens = merged.screens;
+	routes = merged.routes;
+	routeLayouts = merged.layouts;
+	routeLoaders = merged.loaders ?? {};
+	if (current !== void 0) {
+		current = parse();
+		emit();
+	}
+}
 /** Register the app's name → screen table. On web the table feeds
 *  `screenFor` — the fallback outlet resolution in Tabs when no
 *  `resolveScreen` prop is given; on native `pushRoute` resolves
 *  `route.name` through it. `manifest` (from deriveRouteManifest) enables
 *  path-param matching — call once from the shared routes module. */
 function registerScreens(table, manifest) {
-	screens = table;
-	routes = manifest ?? [];
-	if (current !== void 0) {
-		current = parse();
-		emit();
-	}
+	baseManifest = {
+		...baseManifest,
+		screens: table,
+		routes: manifest ?? []
+	};
+	rebuildRegistry();
 }
 /** One-call registration for route-dir apps — screens + URL patterns +
 *  layouts all come from deriveRouteManifest. */
 function registerRoutes(manifest) {
-	registerScreens(manifest.screens, manifest.routes);
-	routeLayouts = manifest.layouts;
-	routeLoaders = manifest.loaders ?? {};
+	baseManifest = manifest;
+	rebuildRegistry();
+	applyHead(read());
+}
+/** Layer a programmatic manifest (from `defineRoutes`) over the registered
+*  routes — same-name entries win over the base with a warn, so a host
+*  framework can override a file route deliberately. Registered layers
+*  survive later registerRoutes re-registration (e.g. routes.gen HMR). */
+function addRoutes(manifest) {
+	dynamicManifests.push(manifest);
+	rebuildRegistry();
 	applyHead(read());
 }
 function screenFor(name) {
@@ -249,4 +274,4 @@ var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 //#endregion
-export { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };
+export { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, layoutsFor as layoutsForRoute, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };

package/dist/web/ui.js

@@ -28,6 +28,7 @@ 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";
@@ -55,21 +56,19 @@ 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 { deriveRouteManifest } from "./route-table.js";
-import { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.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 { Pager } from "./Pager.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 { useMeasure } from "./useMeasure.web.tsrx.js";
-import { Slider } from "./Slider.web.tsrx.js";
-import { Video } from "./Video.web.tsrx.js";
-import { CameraView } from "./CameraView.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";
@@ -80,6 +79,8 @@ 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";
@@ -88,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";
-export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, CameraView, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, Meter, NavLink, NavigationMenu, Overlay, Pager, 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, Tree, User, Video, View, WebView, addBackInterceptor, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, 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 };
+import "./index.shared.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/virtual-list-layout.js

@@ -0,0 +1,146 @@
+function createVirtualListEntries(items, keyExtractor, getItemType) {
+	const seen = /* @__PURE__ */ new Set();
+	return items.map((item, index) => {
+		const key = keyExtractor(item, index);
+		const type = getItemType?.(item, index) ?? "default";
+		assertKey(key, "keyExtractor");
+		assertKey(type, "getItemType");
+		const keyToken = JSON.stringify([typeof key, key]);
+		if (seen.has(keyToken)) throw new Error(`VirtualList keyExtractor returned a duplicate key at index ${index}: ${String(key)}`);
+		seen.add(keyToken);
+		return {
+			item,
+			index,
+			key,
+			type,
+			typeKey: JSON.stringify([typeof type, type]),
+			rowKey: virtualListRowKey(key, type)
+		};
+	});
+}
+function virtualListMeasurementKey(rowKey, hasSeparator) {
+	return rowKey + (hasSeparator ? ":separator" : ":last");
+}
+function estimateVirtualListSizes(entries, hasSeparator, width, measurements) {
+	const totals = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1);
+		const cached = measurements.get(cacheKey);
+		if (!cached) continue;
+		const total = totals.get(entry.typeKey) ?? {
+			height: 0,
+			count: 0
+		};
+		total.height += cached.height;
+		total.count++;
+		totals.set(entry.typeKey, total);
+	}
+	return entries.map((entry) => {
+		const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1);
+		const cached = measurements.get(cacheKey);
+		if (cached && width > 0 && cached.width > 0 && Math.abs(cached.width - width) < .5) return cached.height;
+		const total = totals.get(entry.typeKey);
+		return total && total.count >= 4 ? total.height / total.count : 48;
+	});
+}
+/** Prefix-size index for variable-height rows. Updates and offset lookups are
+*  logarithmic, so measuring a row does not scan the whole data set. */
+var VirtualListSizeIndex = class {
+	constructor() {
+		this.sizes = /* @__PURE__ */ new Float64Array(0);
+		this.tree = /* @__PURE__ */ new Float64Array(1);
+	}
+	get length() {
+		return this.sizes.length;
+	}
+	get total() {
+		return this.prefix(this.length);
+	}
+	reset(sizes) {
+		this.sizes = Float64Array.from(sizes, normalizeSize);
+		this.tree = new Float64Array(this.sizes.length + 1);
+		for (let index = 1; index <= this.sizes.length; index++) {
+			this.tree[index] += this.sizes[index - 1];
+			const parent = index + (index & -index);
+			if (parent <= this.sizes.length) this.tree[parent] += this.tree[index];
+		}
+	}
+	get(index) {
+		return this.sizes[index] ?? 0;
+	}
+	set(index, size) {
+		if (index < 0 || index >= this.sizes.length) return 0;
+		const next = normalizeSize(size);
+		const delta = next - this.sizes[index];
+		if (delta === 0) return 0;
+		this.sizes[index] = next;
+		for (let node = index + 1; node < this.tree.length; node += node & -node) this.tree[node] += delta;
+		return delta;
+	}
+	/** Sum of the first `count` row heights. */
+	prefix(count) {
+		let node = Math.max(0, Math.min(this.sizes.length, Math.floor(count)));
+		let sum = 0;
+		while (node > 0) {
+			sum += this.tree[node];
+			node -= node & -node;
+		}
+		return sum;
+	}
+	/** Index of the row containing `offset`; exact row boundaries select the
+	*  row that starts at that boundary. */
+	indexAt(offset) {
+		if (this.sizes.length === 0) return 0;
+		const target = Math.max(0, Math.min(this.total, Number.isFinite(offset) ? offset : 0));
+		let index = 0;
+		let sum = 0;
+		let bit = 1;
+		while (bit * 2 <= this.sizes.length) bit *= 2;
+		for (; bit > 0; bit = Math.floor(bit / 2)) {
+			const next = index + bit;
+			if (next <= this.sizes.length && sum + this.tree[next] <= target) {
+				index = next;
+				sum += this.tree[next];
+			}
+		}
+		return Math.min(index, this.sizes.length - 1);
+	}
+};
+function virtualListRange(sizes, scrollOffset, viewportSize, overscanSize = viewportSize) {
+	if (sizes.length === 0) return {
+		start: 0,
+		end: 0,
+		top: 0,
+		bottom: 0
+	};
+	const offset = Math.max(0, Number.isFinite(scrollOffset) ? scrollOffset : 0);
+	const viewport = Math.max(0, Number.isFinite(viewportSize) ? viewportSize : 0);
+	const overscan = Math.max(0, Number.isFinite(overscanSize) ? overscanSize : 0);
+	const start = sizes.indexAt(Math.max(0, offset - overscan));
+	const end = Math.min(sizes.length, Math.max(start + 1, sizes.indexAt(offset + viewport + overscan) + 1));
+	return {
+		start,
+		end,
+		top: sizes.prefix(start),
+		bottom: Math.max(0, sizes.total - sizes.prefix(end))
+	};
+}
+/** Renderer keys include the item type so changing a key's type remounts its
+*  row instead of carrying component state into an incompatible template. */
+function virtualListRowKey(key, type) {
+	return JSON.stringify([
+		typeof key,
+		key,
+		typeof type,
+		type
+	]);
+}
+function assertKey(value, name) {
+	if (typeof value !== "string" && typeof value !== "number" || typeof value === "number" && !Number.isFinite(value)) throw new Error(`VirtualList ${name} must return a finite number or string`);
+}
+function normalizeSize(size) {
+	if (!Number.isFinite(size)) return .01;
+	return Math.max(.01, size);
+}
+//#endregion
+export { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange, virtualListRowKey };

package/dist/web/web/index.js

@@ -1,3 +1,3 @@
-import { Hoverable } from "./Hoverable.web.tsrx.js";
-import { Tooltip } from "./Tooltip.web.tsrx.js";
+import { Hoverable } from "../Hoverable.web.tsrx.js";
+import { Tooltip } from "../Tooltip.web.tsrx.js";
 export { Hoverable, Tooltip };