@stealthscale/sdk-host 0.1.0 → 0.4.0

package/dist/{create-routes-CkgZV-dU.js → create-routes-D4iCBYZe.js}

@@ -2,16 +2,17 @@ import { n as translatorOf, r as useProductName, t as pluginWordsOf } from "./wo
 import { DataProvider, createDataClient, defineMutation, defineQuery, findRecords, mutateOperation, operationQuery, resetData } from "@stealthscale/provider-data";
 import { HOST, NOBODY, evaluateWhen, hostContract, pluginOf, subjectOf } from "@stealthscale/sdk-core";
 import { sampledTransport } from "@stealthscale/provider-data/testing";
-import { Boundary, HostContext, PluginProvider, RouteDecorations, Slot, changesOf, conditionContextOf, decisionKey, decisionOf, isCommandEnabled, lazyOf, useCommands, useDocumentTitle, useNavigation, usePluginStatuses, useResolvedProduct, useSettings, useToaster } from "@stealthscale/sdk-plugin";
-import { Alert, EmptyState, Toast } from "@stealthscale/component-feedback";
+import { Boundary, HostContext, PluginImportError, PluginProvider, RouteDecorations, Slot, asServerSnapshot, changesOf, conditionContextOf, decisionKey, decisionOf, inServerSnapshot, isCommandEnabled, lazyOf, useCommands, useDocumentTitle, useHydrating, useNavigation, usePluginStatuses, useResolvedProduct, useSettings, useToaster } from "@stealthscale/sdk-plugin";
+import { Alert, EmptyState, Spinner, Toast } from "@stealthscale/component-feedback";
 import { settingKey } from "@stealthscale/settings";
+import { Navigate, Outlet, RouterContextProvider, compileRoutes, createLink, declaredOf, isNotFound, notFound, redirect, routeHref, useDeclaredRoute, useNavigate, useRouteContext, useRouteMap, useRouter } from "@stealthscale/provider-router";
 import { c } from "react/compiler-runtime";
-import { Navigate, Outlet, RouterContextProvider, compileRoutes, createLink, declaredOf, notFound, redirect, routeHref, useDeclaredRoute, useNavigate, useRouteContext, useRouter } from "@stealthscale/provider-router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Component, Suspense, createElement, lazy, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Button } from "@stealthscale/component-actions";
+import { Component, Suspense, createContext, createElement, lazy, use, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useTranslation } from "@stealthscale/provider-i18n";
+import { Button } from "@stealthscale/component-actions";
 import { normalizeHotkey, useHotkey, useHotkeys } from "@stealthscale/provider-hotkeys";
+import { SearchIcon, XIcon } from "lucide-react";
 import { Command, Dialog } from "@stealthscale/component-modals";
 import { loadNeeds } from "@stealthscale/provider-data/router";
 import { Stack } from "@stealthscale/component-layout";
@@ -59,7 +60,7 @@ function createEventBus({ events, report }) {
 			if (event.sticky) kept.set(eventId, payload);
 			depth += 1;
 			try {
-				target.dispatchEvent(new CustomEvent(eventId, { detail: payload }));
+				target.dispatchEvent(new CustomEvent(eventId, { detail: [payload] }));
 			} finally {
 				depth -= 1;
 			}
@@ -84,7 +85,7 @@ function createEventBus({ events, report }) {
 			* Receives the event on the target.
 			*/
 			const listener = (event) => {
-				deliver(event.detail);
+				deliver(event.detail[0]);
 			};
 			target.addEventListener(eventId, listener);
 			if (kept.has(eventId)) deliver(kept.get(eventId));
@@ -444,26 +445,38 @@ function createPageStore() {
 //#endregion
 //#region src/stores/quarantine.ts
 /**
+* Counts the renders of each route and extension that throw in a row, and quarantines a target
+* that fails too many.
+*/
+/**
 * Returns the quarantine store, with no target quarantined.
 *
 * @remarks
 *   The count is per render, not per second, so a target rendered sixty times a minute and one
 *   rendered once an hour follow one rule. A render that commits returns its target's count to
-*   zero. A quarantine lasts until `retry` or a reload: no store keeps it, because a reload may
-*   load a release that fixed the fault.
+*   zero. The store reports and counts an error once until a render of its target commits or a
+*   retry. The router's error boundary resets on every update of its match, and a boundary that
+*   resets renders its fallback again with the error it caught. A quarantine lasts until `retry`
+*   or a reload: no store keeps it, because a reload may load a release that fixed the fault. A
+*   `PluginImportError` is reported and does not count, because a module that failed to import
+*   renders only after a reload: Chromium keeps the failed import for the document's life.
 */
 function createQuarantineStore({ after, report }) {
 	const failures = /* @__PURE__ */ new Map();
+	const last = /* @__PURE__ */ new Map();
 	const state = writable(/* @__PURE__ */ new Map());
 	return {
 		failed: (target, error) => {
-			const count = (failures.get(target) ?? 0) + 1;
-			failures.set(target, count);
+			if (last.has(target) && last.get(target) === error) return;
+			last.set(target, error);
 			report({
 				error,
 				kind: "render-failed",
 				target
 			});
+			if (error instanceof PluginImportError) return;
+			const count = (failures.get(target) ?? 0) + 1;
+			failures.set(target, count);
 			if (count < after || state.get().has(target)) return;
 			state.set(new Map([...state.get(), [target, {
 				error,
@@ -478,9 +491,11 @@ function createQuarantineStore({ after, report }) {
 		get: state.get,
 		rendered: (target) => {
 			failures.delete(target);
+			last.delete(target);
 		},
 		retry: (target) => {
 			failures.delete(target);
+			last.delete(target);
 			if (!state.get().has(target)) return;
 			state.set(new Map([...state.get()].filter(([quarantined]) => quarantined !== target)));
 		},
@@ -505,7 +520,8 @@ function createReportStore() {
 //#endregion
 //#region src/host/page.ts
 /**
-* Failed renders in a row after which a target is quarantined, where the product states none.
+* Failed renders in a row after which a target is quarantined, where the product does not set a
+* number.
 */
 const QUARANTINE_AFTER = 3;
 /**
@@ -520,9 +536,10 @@ function toConsole(entry) {
 	else console.warn(`${PREFIX} ${entry.kind}`, entry);
 }
 /**
-* Returns the page's stores, empty, and the function that reports an entry into them.
+* Returns the page's stores and the function that reports an entry into them, with each refused
+* release reported.
 */
-function createPage({ quarantineAfter = QUARANTINE_AFTER, report: receiver = toConsole }) {
+function createPage({ quarantineAfter = QUARANTINE_AFTER, refused = [], report: receiver = toConsole }) {
 	const reports = createReportStore();
 	/**
 	* Adds an entry to the reports store and passes it to the receiver.
@@ -531,7 +548,9 @@ function createPage({ quarantineAfter = QUARANTINE_AFTER, report: receiver = toC
 		reports.add(entry);
 		receiver(entry);
 	};
+	for (const entry of refused) report(entry);
 	return {
+		loading: writable(false),
 		report,
 		stores: {
 			mounted: createMountedStore(),
@@ -555,6 +574,9 @@ function valuesOf(record) {
 /**
 * Returns every importer a plugin's code lists: its pages, extensions, commands and sections, and
 * their fallbacks.
+*
+* @remarks
+*   The page index is left out, because the palette imports it the first time it opens.
 */
 function importersOf(code) {
 	return [
@@ -756,8 +778,8 @@ function hostApiOf({ connection, data, events, product, stores, toaster }) {
 		return {
 			can: (permission, resourceId) => allowed(stores, product, permission.id, resourceId),
 			data: hostData,
-			emit: (event, payload) => {
-				events.emit(pluginId, event.id, payload);
+			emit: (event, ...payload) => {
+				events.emit(pluginId, event.id, payload[0]);
 			},
 			flag: (flag) => stores.flags.read(flag.id) ?? flag.default ?? false,
 			matched: connected?.matched().at(-1),
@@ -772,15 +794,15 @@ function hostApiOf({ connection, data, events, product, stores, toaster }) {
 //#endregion
 //#region src/recovery/stale.ts
 /**
-* Records the version under the key in the tab's session storage, and returns true where it did.
+* Records a value under the key in the tab's session storage, and returns true where it did.
 *
-* @returns False where the key contains the version already, or where the browser refuses the
+* @returns False where the key contains the value already, or where the browser refuses the
 *   storage.
 */
-function recordReload(key, version) {
+function recordReload(key, value) {
 	try {
-		if (window.sessionStorage.getItem(key) === version) return false;
-		window.sessionStorage.setItem(key, version);
+		if (window.sessionStorage.getItem(key) === value) return false;
+		window.sessionStorage.setItem(key, value);
 		return true;
 	} catch {
 		return false;
@@ -788,21 +810,24 @@ function recordReload(key, version) {
 }
 /**
 * Returns the function that reloads the page after a module failed to import, once per build
-* version, and returns true while the page reloads.
+* version and deployment, and returns true while the page reloads.
 *
 * @remarks
 *   The function records the product's version under `stealth.<productId>.reloaded` before it
-*   reloads. For a version recorded before, it returns false, so a chunk the new build lacks as
-*   well renders the error component instead of a second reload. A server has no page to reload,
-*   and a page whose storage the browser refuses cannot record the version, so both return false.
-* @param product - The product: its id names the storage key, and its version is the build's.
-*/
-function staleRecovery({ productId, version }) {
+*   reloads, as `<version>+<deployment>` on a page that loaded a deployment's releases. For a value
+*   recorded before, it returns false, so a chunk the new build lacks as well renders the error
+*   component instead of a second reload. A server has no page to reload, and a page whose storage
+*   the browser refuses cannot record the value, so both return false.
+* @param product - The product: its id names the storage key, its version is the build's, and its
+*   deployment is the one whose releases the page loaded.
+*/
+function staleRecovery({ deployment, productId, version }) {
 	const key = `stealth.${productId}.reloaded`;
+	const recorded = deployment === void 0 ? version : `${version}+${deployment}`;
 	let reloading = false;
 	return () => {
 		if (reloading) return true;
-		if (typeof window === "undefined" || !recordReload(key, version)) return false;
+		if (typeof window === "undefined" || !recordReload(key, recorded)) return false;
 		reloading = true;
 		window.location.reload();
 		return true;
@@ -817,7 +842,8 @@ function staleRecovery({ productId, version }) {
 *   failed to preload and for a module that failed to import. A cancelled event makes the import
 *   resolve with no module, which the host's importers keep pending while the page reloads. An
 *   event the listener does not cancel rejects the import.
-* @param recover - Reloads the page once per build version, and returns true while it reloads.
+* @param recover - Reloads the page once per build version and deployment, and returns true while
+*   it reloads.
 */
 function listenForStaleChunks(recover) {
 	/**
@@ -858,8 +884,13 @@ function moduleOf(module, pluginId) {
 * Imports a plugin's module through its importer, measures the plugin's first import, and reloads
 * the page where the import fails.
 *
+* @remarks
+*   Where the page does not reload, the import rejects with a `PluginImportError`, whose `cause` is
+*   the import's error. TanStack's lazy route component reloads the page once more for an error
+*   whose message names a module that failed to fetch, and the host's message names none, so the
+*   route's error component renders after the one reload per build version and deployment.
 * @returns The module, or a promise that never settles while the page reloads.
-* @throws The import's error where the page does not reload.
+* @throws {@link PluginImportError} Where the import fails and the page does not reload.
 */
 async function imported(importer, pluginId, loading) {
 	const start = loading.startOf(pluginId);
@@ -868,7 +899,7 @@ async function imported(importer, pluginId, loading) {
 		module = moduleOf(await importer(), pluginId);
 	} catch (error) {
 		if (loading.recover()) return reloading();
-		throw error;
+		throw new PluginImportError(pluginId, error);
 	}
 	if (start !== void 0) performance.measure(`stealth:load:${pluginId}`, { start });
 	return module;
@@ -886,8 +917,8 @@ function mapped(record, map) {
 	return record === void 0 ? void 0 : Object.fromEntries(Object.entries(record).map(([name, value]) => [name, map(value)]));
 }
 /**
-* Returns a plugin's code with every importer wrapped: pages, fallbacks, extensions, commands and
-* settings sections.
+* Returns a plugin's code with every importer wrapped: routes and their fallbacks, extensions,
+* commands, settings sections and the page index.
 */
 function codeOf(code, wrap) {
 	return {
@@ -899,6 +930,7 @@ function codeOf(code, wrap) {
 			component: wrap(entry.component),
 			fallback: maybe(entry.fallback, wrap)
 		})),
+		pages: maybe(code.pages, wrap),
 		routes: mapped(code.routes, (route) => typeof route === "function" ? wrap(route) : {
 			component: wrap(route.component),
 			fallback: maybe(route.fallback, wrap)
@@ -929,11 +961,11 @@ function loadingOf(product) {
 * @remarks
 *   A wrapped importer measures its plugin's first import as `stealth:load:<plugin id>`, from the
 *   moment the import starts until the module resolves. Where an import rejects or resolves with no
-*   module, the page reloads once per build version, and the import never settles. A second failure
-*   for the same version rejects, and the route's error component or the extension's boundary
-*   renders it. `createRuntime` and `createHostRoutes` both wrap the product they receive, so a
-*   product that passes one object to `createHost` and `createHostRoutes` shares one recovery and
-*   one measure per plugin.
+*   module, the page reloads once per build version and deployment, and the import never settles. A
+*   second failure for the same version and deployment rejects with a `PluginImportError`, and the
+*   route's error component or the extension's boundary renders it. `createRuntime` and
+*   `createHostRoutes` both wrap the product they receive, so a product that passes one object to
+*   `createHost` and `createHostRoutes` shares one recovery and one measure per plugin.
 * @param product - The product, with each installed plugin's manifest.
 */
 function instrumented(product) {
@@ -1221,14 +1253,27 @@ function createAccessStore({ product, report, source }) {
 */
 const ON = { on: true };
 /**
+* The availability of a plugin that the computation withholds.
+*/
+const WITHHELD = {
+	on: false,
+	reason: "unavailable"
+};
+/**
+* The empty set of withheld plugins.
+*/
+const NONE$1 = /* @__PURE__ */ new Set();
+/**
 * Returns every installed plugin's availability, in install order.
 *
 * @remarks
-*   A plugin is computed on first need, so it is computed after every plugin its condition names
-*   and every plugin it requires, whatever the install order. A plugin on a ring of conditions and
-*   requirements, which the build refuses, reads as off to the plugin that asks.
+*   A plugin is computed on first need, so every plugin in its condition and every plugin it
+*   requires is computed before it, whatever the install order. The build refuses a ring of
+*   conditions and requirements. On such a ring, `on` returns false for a plugin that is still
+*   being computed. A withheld plugin is off before any test runs, so a plugin that requires it is
+*   off too.
 */
-function availabilityOf({ availability, flags, plugins, session, switches }) {
+function availabilityOf({ availability, flags, plugins, session, switches, withheld }) {
 	const installed = new Map(plugins.map((plugin) => [plugin.id, plugin]));
 	const known = /* @__PURE__ */ new Map();
 	const computing = /* @__PURE__ */ new Set();
@@ -1251,6 +1296,7 @@ function availabilityOf({ availability, flags, plugins, session, switches }) {
 	* Returns a plugin's availability: the reason of the first test it fails, else on.
 	*/
 	const tested = (plugin) => {
+		if (withheld.has(plugin.id)) return WITHHELD;
 		if (flags.read(plugin.killSwitch) === false) return {
 			on: false,
 			reason: "unavailable"
@@ -1284,6 +1330,24 @@ function availabilityOf({ availability, flags, plugins, session, switches }) {
 	return plugins.map((plugin) => [plugin.id, computed(plugin)]);
 }
 /**
+* Returns the reader of the availability inside a server snapshot: computed from the flags the
+* flag store returns there, and computed again only after the flag state it returns changed.
+*
+* @param flags - The flag store, whose state the computation is kept for.
+* @param compute - Computes every plugin's availability from the stores as they read.
+*/
+function servedOf(flags, compute) {
+	let served;
+	return () => {
+		const state = flags.get();
+		if (served === void 0 || served.flags !== state) served = {
+			flags: state,
+			value: Object.fromEntries(compute())
+		};
+		return served.value;
+	};
+}
+/**
 * Returns the availability store, computed now and again whenever the session, a flag or a switch
 * changes.
 *
@@ -1292,19 +1356,24 @@ function availabilityOf({ availability, flags, plugins, session, switches }) {
 *   on (`unavailable`), it is locked or switched on (`off`), its condition is true (`condition`),
 *   and every plugin it requires without `optional` is on (`requirement`). A computation that
 *   changes no plugin's state publishes nothing. A plugin whose reason changes while it remains
-*   off is published without a call to `changed`.
+*   off is published without a call to `changed`. Inside a server snapshot the store returns the
+*   availability that it computes from the server render's flags, so a boundary that hydrates late
+*   renders what the server rendered. The server renders a page without the plugins of its
+*   releases, so inside a server snapshot each release plugin is off with the reason `unavailable`.
 */
 function createAvailabilityStore({ changed, flags, product, session, switches }) {
 	const availability = writable({});
 	/**
-	* Returns every plugin's availability as the stores are now.
+	* Returns every plugin's availability as the stores are now, with every plugin in `withheld`
+	* off.
 	*/
-	const compute = () => availabilityOf({
+	const compute = (withheld = NONE$1) => availabilityOf({
 		availability,
 		flags,
 		plugins: product.plugins,
 		session,
-		switches: switches.get()
+		switches: switches.get(),
+		withheld
 	});
 	const first = compute();
 	let states = new Map(first.map(([pluginId, state]) => [pluginId, state.on]));
@@ -1330,15 +1399,92 @@ function createAvailabilityStore({ changed, flags, product, session, switches })
 		flags.subscribe(recompute),
 		switches.subscribe(recompute)
 	];
+	const releases = new Set(product.releases);
+	const served = servedOf(flags, () => compute(releases));
 	return {
 		dispose: () => {
 			for (const stop of stops) stop();
 		},
-		get: availability.get,
+		get: () => inServerSnapshot() ? served() : availability.get(),
 		subscribe: availability.subscribe
 	};
 }
 //#endregion
+//#region src/stores/flag-overrides.ts
+/**
+* Returns true where a value fits a flag: a boolean for a release or an ops flag, one of its
+* variants for an experiment.
+*/
+function fits(flag, value) {
+	return flag.type === "boolean" ? typeof value === "boolean" : typeof value === "string" && flag.variants?.includes(value) === true;
+}
+/**
+* Returns true where a parsed value is an object whose members can be read by name.
+*/
+function isRecord$1(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* Returns the object stored text contains, or an empty object for no text, for text that is not
+* JSON, and for JSON that is not an object.
+*/
+function parsed(text) {
+	if (text === null) return {};
+	try {
+		const value = JSON.parse(text);
+		return isRecord$1(value) ? value : {};
+	} catch {
+		return {};
+	}
+}
+/**
+* Returns the overrides the tab's storage contains that fit a declared flag, and queues
+* `flag-ignored` for each that does not fit. An override for a flag no installed plugin declares is
+* left out without a report.
+*
+* @param storage - The tab's session storage. No override is read without it.
+* @param key - The key the overrides are kept under.
+* @param declared - The declared flags, by qualified id.
+* @param queue - Receives `flag-ignored` for an override that does not fit its flag.
+*/
+function storedOverrides(storage, key, declared, queue) {
+	const kept = [];
+	for (const [id, value] of Object.entries(parsed(storage?.getItem(key) ?? null))) {
+		const flag = declared.get(id);
+		if (flag === void 0) continue;
+		if (fits(flag, value)) kept.push([id, value]);
+		else queue({
+			flag: id,
+			kind: "flag-ignored",
+			source: "override",
+			value
+		});
+	}
+	return Object.fromEntries(kept);
+}
+/**
+* Writes the overrides to the tab's storage, or removes the key where none is left.
+*
+* @returns False where the storage refused the write. The overrides then last until the page
+*   reloads.
+*/
+function written(storage, key, overrides) {
+	try {
+		if (Object.keys(overrides).length === 0) storage.removeItem(key);
+		else storage.setItem(key, JSON.stringify(overrides));
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Returns the overrides with a flag's override replaced, or removed where no value is given.
+*/
+function withOverride(overrides, id, value) {
+	const kept = Object.entries(overrides).filter(([flag]) => flag !== id);
+	return Object.fromEntries(value === void 0 ? kept : [...kept, [id, value]]);
+}
+//#endregion
 //#region src/stores/flag-session.ts
 /**
 * Returns the record of the variants served, for no subject yet.
@@ -1416,13 +1562,6 @@ function identityOf(source, failed) {
 *   variant the person saw.
 */
 /**
-* Returns true where a value fits a flag: a boolean for a release or an ops flag, one of its
-* variants for an experiment.
-*/
-function fits(flag, value) {
-	return flag.type === "boolean" ? typeof value === "boolean" : typeof value === "string" && flag.variants?.includes(value) === true;
-}
-/**
 * Returns the flag source's value for a flag, or undefined where the source states none or throws.
 * A throw queues `flags-failed`.
 */
@@ -1525,67 +1664,6 @@ function publishedOf(report) {
 	};
 }
 /**
-* Returns true where a parsed value is an object whose members can be read by name.
-*/
-function isRecord$1(value) {
-	return typeof value === "object" && value !== null;
-}
-/**
-* Returns the object stored text contains, or an empty object for no text, for text that is not
-* JSON, and for JSON that is not an object.
-*/
-function parsed(text) {
-	if (text === null) return {};
-	try {
-		const value = JSON.parse(text);
-		return isRecord$1(value) ? value : {};
-	} catch {
-		return {};
-	}
-}
-/**
-* Returns the overrides the tab's storage contains that fit a declared flag, and queues
-* `flag-ignored` for each that does not fit. An override for a flag no installed plugin declares is
-* left out without a report.
-*/
-function storedOverrides(storage, key, declared, queue) {
-	const kept = [];
-	for (const [id, value] of Object.entries(parsed(storage?.getItem(key) ?? null))) {
-		const flag = declared.get(id);
-		if (flag === void 0) continue;
-		if (fits(flag, value)) kept.push([id, value]);
-		else queue({
-			flag: id,
-			kind: "flag-ignored",
-			source: "override",
-			value
-		});
-	}
-	return Object.fromEntries(kept);
-}
-/**
-* Writes the overrides to the tab's storage, or removes the key where none is left.
-*
-* @returns False where the storage refused the write. The overrides then last until the page
-*   reloads.
-*/
-function written(storage, key, overrides) {
-	try {
-		if (Object.keys(overrides).length === 0) storage.removeItem(key);
-		else storage.setItem(key, JSON.stringify(overrides));
-		return true;
-	} catch {
-		return false;
-	}
-}
-/**
-* Returns the overrides with a flag's override replaced, or removed where the value is undefined.
-*/
-function withOverride(overrides, id, value) {
-	const kept = Object.entries(overrides).filter(([flag]) => flag !== id);
-	return Object.fromEntries(value === void 0 ? kept : [...kept, [id, value]]);
-}
-/**
 * Returns the store's `read`: the tab's override, else the reading the page took, else a first
 * evaluation, published at the end of the task.
 */
@@ -1664,20 +1742,28 @@ function hydrationOf(shared, reevaluate, waiting) {
 	const { declared, exposures, published } = shared;
 	let active = false;
 	let aside = {};
+	let served;
 	return {
 		active: () => active,
 		hydrate: (readings, subject) => {
+			const kept = /* @__PURE__ */ new Map();
 			active = true;
 			aside = published.state.get().overrides;
 			published.setOverrides({});
 			for (const [id, reading] of readings) {
 				const flag = declared.get(id);
 				if (flag === void 0 || !fits(flag, reading.value)) continue;
+				kept.set(id, reading);
 				published.readings.set(id, reading);
 				exposures.serve(subject, flag, reading.value);
 			}
+			served = {
+				overrides: {},
+				readings: kept
+			};
 			published.flush();
 		},
+		served: () => served,
 		settle: () => {
 			if (!active) return;
 			active = false;
@@ -1688,6 +1774,28 @@ function hydrationOf(shared, reevaluate, waiting) {
 	};
 }
 /**
+* Returns the store's `get` and `read`, which return what the server render read inside a server
+* snapshot after a hydration, and the published state outside one.
+*
+* @remarks
+*   A boundary can hydrate after `settle`, once the store took the browser's values. React reads
+*   its components' flags as a server snapshot, so the boundary hydrates against the server's HTML
+*   and renders the browser's values after it. A flag the server render did not read is evaluated
+*   as outside a server snapshot.
+* @param hydration - The store's hydration, which keeps the server render's state.
+* @param published - The store's published state.
+* @param read - The store's reader outside a server snapshot.
+*/
+function servedReadersOf(hydration, published, read) {
+	return {
+		get: () => (inServerSnapshot() ? hydration.served() : void 0) ?? published.state.get(),
+		read: (id) => {
+			const served = inServerSnapshot() ? hydration.served()?.readings.get(id) : void 0;
+			return served === void 0 ? read(id) : served.value;
+		}
+	};
+}
+/**
 * Returns the flag store over the product's flags, its flag source and the tab's storage.
 *
 * @remarks
@@ -1698,7 +1806,8 @@ function hydrationOf(shared, reevaluate, waiting) {
 *   the flags the page has read, and the previous values remain while `identify` is pending.
 *   `flag-exposed` is reported the first time the session's subject is served each variant of an
 *   experiment. An override counts no exposure. A store a server render hydrated reads the
-*   server's readings until `settle`, and evaluates again only then.
+*   server's readings until `settle`, and evaluates again only then. Inside a server snapshot it
+*   returns the server's readings after `settle` too.
 */
 function createFlagStore({ overrides: storage, product, report, source }) {
 	const published = publishedOf(report);
@@ -1723,19 +1832,21 @@ function createFlagStore({ overrides: storage, product, report, source }) {
 	const stop = source?.subscribe(() => {
 		if (shared.identity.trusted() !== void 0 && !hydration.active()) reevaluate();
 	});
+	const readers = servedReadersOf(hydration, published, readerOf(shared));
 	return {
 		dispose: () => {
 			stop?.();
 			shared.identity.stop();
 		},
-		get: published.state.get,
+		get: readers.get,
 		hydrate: hydration.hydrate,
 		identify: async (session) => {
 			shared.exposures.reset(subjectOf(session));
 			if (await shared.identity.identify(session) && !hydration.active()) reevaluate();
 		},
+		overridable: storage !== void 0,
 		override: overriderOf(shared, storage, key),
-		read: readerOf(shared),
+		read: readers.read,
 		settle: hydration.settle,
 		snapshot: () => [...published.readings],
 		subscribe: published.state.subscribe
@@ -2249,12 +2360,33 @@ function createHost(options) {
 		connect: connection.connect,
 		flags,
 		glyphs: options.glyphs,
+		loading: page.loading,
 		runtime,
 		switches: state.switches
 	});
 	return host;
 }
 //#endregion
+//#region src/parts/caught.ts
+/**
+* Writes an error that a React error boundary caught to the console, and leaves the router's
+* not-found out.
+*/
+/**
+* Writes an error that an error boundary caught to the console, as React's default does in a
+* production build, and returns without writing for the router's not-found.
+*
+* @remarks
+*   A page throws the router's not-found for parameters it cannot resolve, and the router's
+*   boundary renders the product's not-found page in the page's place. React reports every error a
+*   boundary catches, so a root without this handler writes each such not-found to the console. A
+*   product passes the handler to `createRoot` and `hydrateRoot` as `onCaughtError`.
+*/
+function onCaughtError(error) {
+	if (isNotFound(error)) return;
+	console.error(error);
+}
+//#endregion
 //#region src/parts/content.tsx
 /**
 * Renders the root route's outlet inside the `content` region, so the region's extensions decorate
@@ -2277,89 +2409,107 @@ function HostContent() {
 	return t0;
 }
 //#endregion
-//#region src/routes/not-found.ts
-/**
-* Returns true for the data of a page whose plugin a switch or a kill switch stopped.
-*/
-function isStopped(data) {
-	return "plugin" in data && typeof data.plugin === "string" && "reason" in data && (data.reason === "off" || data.reason === "unavailable");
-}
+//#region src/host/use-internals.ts
 /**
-* Returns true for the data of a page the host quarantined.
+* Reads the internals of the host that the router's context contains, for the host's own parts.
 */
-function isQuarantined(data) {
-	return "target" in data && typeof data.target === "string" && data.target.startsWith("route:") && "reason" in data && data.reason === "quarantined";
-}
 /**
-* Reads the data of a not-found error as the host's not-found data.
+* Returns the internals of the host that the router's context contains.
 *
-* @remarks
-*   Every route of the tree can throw a not-found error, so data of another shape, from a route the
-*   product wrote, reads as none.
-* @param data - The data the router passes the not-found component.
-* @returns The data the route evaluator threw, or nothing.
+* @throws {@link Error} Where `createHost` did not create the host.
 */
-function notFoundDataOf(data) {
-	if (typeof data !== "object" || data === null) return void 0;
-	return isStopped(data) || isQuarantined(data) ? data : void 0;
+function useInternals() {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { strict: false };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { host } = useRouteContext(t0);
+	let t1;
+	if ($[1] !== host) {
+		t1 = internalsOf(host);
+		$[1] = host;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 //#endregion
-//#region src/parts/not-found.tsx
+//#region src/parts/loading.tsx
 /**
-* Renders the root's not-found page: for a page whose plugin a switch or a kill switch stopped, for
-* a page the host quarantined, and for an address no route matches.
+* Renders the host's loading page. The loading page takes the place of a page while the router
+* loads that page.
 */
 /**
-* Returns the ref of the page's heading, which takes focus where the page replaced the page a
-* person was on without a navigation.
+* Renders a busy panel with a spinner above a level-one heading.
 *
 * @remarks
-*   The router records an address as resolved only after the pages of its navigation rendered, so
-*   the resolved address equals the address while the page first renders only where no navigation
-*   led to it: a switch, a kill switch, a condition or a quarantine changed under the person.
+*   The spinner does not have a role, so a screen reader announces the state from the heading. The
+*   panel sets `aria-busy` while it renders. The host records the panel as on screen from its
+*   commit until it unmounts, so the page that replaces it renders as the first page of the load.
 */
-function useHeading() {
-	const $ = c(6);
-	const heading = useRef(null);
-	const router = useRouter();
+function HostLoading() {
+	const $ = c(8);
+	const { t } = useTranslation("host");
+	const { loading } = useInternals();
 	let t0;
-	if ($[0] !== router.state.location.href || $[1] !== router.state.resolvedLocation?.href) {
-		t0 = () => router.state.resolvedLocation?.href === router.state.location.href;
-		$[0] = router.state.location.href;
-		$[1] = router.state.resolvedLocation?.href;
-		$[2] = t0;
-	} else t0 = $[2];
-	const [replaced] = useState(t0);
 	let t1;
-	let t2;
-	if ($[3] !== replaced) {
-		t1 = () => {
-			if (replaced) heading.current?.focus();
+	if ($[0] !== loading) {
+		t0 = () => {
+			loading.set(true);
+			return () => {
+				loading.set(false);
+			};
 		};
-		t2 = [replaced];
-		$[3] = replaced;
-		$[4] = t1;
-		$[5] = t2;
+		t1 = [loading];
+		$[0] = loading;
+		$[1] = t0;
+		$[2] = t1;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t0 = $[1];
+		t1 = $[2];
 	}
-	useEffect(t1, t2);
-	return heading;
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(EmptyState.Indicator, { children: /* @__PURE__ */ jsx(Spinner, { size: "2xl" }) });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("page.loading.title");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(EmptyState.Root, {
+			"aria-busy": "true",
+			children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [t2, /* @__PURE__ */ jsx(EmptyState.Title, {
+				as: "h1",
+				children: t3
+			})] })
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
 }
+//#endregion
+//#region src/parts/not-found-page.tsx
 /**
-* Renders the not-found page the router's data describes.
+* Renders the not-found page that the data describes.
 *
 * @remarks
-*   A page whose plugin a switch turned off names the plugin and offers a button that turns it on.
-*   A page whose plugin a kill switch stopped names the plugin and offers nothing. A quarantined
-*   page offers a retry that lifts the quarantine. Data of another shape, or none, renders a plain
-*   not-found page, which states nothing about the address. The host runs the router's
-*   `beforeLoad` again after a switch or a retry, and the page renders again in this one's place.
+*   A page whose plugin a switch turned off shows the plugin's name and a button that turns the
+*   plugin on. A page whose plugin a kill switch stopped shows the plugin's name alone. A
+*   quarantined page shows a retry that lifts the quarantine. A plain not-found page does not
+*   describe the address. The host runs the router's `beforeLoad` again after a switch or a retry,
+*   and the page renders again in place of this one.
 */
-function HostNotFound(t0) {
+function NotFoundPage(t0) {
 	const $ = c(25);
-	const { data } = t0;
+	const { found, heading } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = { strict: false };
@@ -2367,16 +2517,13 @@ function HostNotFound(t0) {
 	} else t1 = $[0];
 	const { host } = useRouteContext(t1);
 	const { i18n, t } = useTranslation("host");
-	const heading = useHeading();
+	const reason = found?.reason ?? "plain";
 	let T0;
 	let T1;
-	let found;
 	let t2;
 	let t3;
 	let t4;
-	if ($[1] !== data || $[2] !== heading || $[3] !== host || $[4] !== i18n || $[5] !== t) {
-		found = notFoundDataOf(data);
-		const reason = found?.reason ?? "plain";
+	if ($[1] !== found || $[2] !== heading || $[3] !== host || $[4] !== i18n || $[5] !== reason || $[6] !== t) {
 		const plugin = found === void 0 || found.reason === "quarantined" ? "" : pluginWordsOf(i18n).t(found.plugin, "plugin.name");
 		T1 = EmptyState.Root;
 		T0 = EmptyState.Content;
@@ -2393,21 +2540,20 @@ function HostNotFound(t0) {
 			},
 			children: t("notFound.off.action", { plugin })
 		}) : null;
-		$[1] = data;
+		$[1] = found;
 		$[2] = heading;
 		$[3] = host;
 		$[4] = i18n;
-		$[5] = t;
-		$[6] = T0;
-		$[7] = T1;
-		$[8] = found;
+		$[5] = reason;
+		$[6] = t;
+		$[7] = T0;
+		$[8] = T1;
 		$[9] = t2;
 		$[10] = t3;
 		$[11] = t4;
 	} else {
-		T0 = $[6];
-		T1 = $[7];
-		found = $[8];
+		T0 = $[7];
+		T1 = $[8];
 		t2 = $[9];
 		t3 = $[10];
 		t4 = $[11];
@@ -2450,16 +2596,206 @@ function HostNotFound(t0) {
 	return t7;
 }
 //#endregion
-//#region src/parts/connection.ts
+//#region src/routes/not-found.ts
 /**
-* Returns the qualified ids of the declared routes the router matched, outermost first.
-*
-* @remarks
-*   The root and every route the product wrote without a name state no id, so the list leaves them
-*   out.
+* Returns true for the data of a page whose plugin a switch or a kill switch stopped.
 */
-function matchedOf(router) {
-	return router.state.matches.flatMap((match) => declaredOf(match)?.id ?? []);
+function isStopped(data) {
+	return "plugin" in data && typeof data.plugin === "string" && "reason" in data && (data.reason === "off" || data.reason === "unavailable");
+}
+/**
+* Returns true for the data of a page the host quarantined.
+*/
+function isQuarantined(data) {
+	return "target" in data && typeof data.target === "string" && data.target.startsWith("route:") && "reason" in data && data.reason === "quarantined";
+}
+/**
+* Reads the data of a not-found error as the host's not-found data.
+*
+* @remarks
+*   Every route of the tree can throw a not-found error, so data of another shape, from a route the
+*   product wrote, reads as none.
+* @param data - The data the router passes the not-found component.
+* @returns The data the route evaluator threw, or nothing.
+*/
+function notFoundDataOf(data) {
+	if (typeof data !== "object" || data === null) return void 0;
+	return isStopped(data) || isQuarantined(data) ? data : void 0;
+}
+//#endregion
+//#region src/routes/release-reload.ts
+/**
+* Loads the address again after a hydration where the page's document contains a deployment.
+*
+* @remarks
+*   A server renders a page without the routes of its releases. Where only a route of a release
+*   matches the address, the server renders the not-found page. The router's hydration commits that
+*   page as final and does not load the address. The page loads the address again once it hydrated.
+*/
+/**
+* Returns true while a plain not-found page waits for the router to load the address again with
+* the routes of the page's releases.
+*
+* @remarks
+*   The wait starts where the page renders on a server or hydrates, and the page's document
+*   contains a deployment. After the page hydrated, the router loads the address again. The wait
+*   ends when that load ends. A route of a release that matches the address then renders in place
+*   of the not-found page.
+* @param plain - True where the not-found page does not have data of the host's own.
+*/
+function useReleaseReload(plain) {
+	const $ = c(8);
+	const { product } = useInternals().runtime;
+	const router = useRouter();
+	const hydrating = useHydrating();
+	let t0;
+	if ($[0] !== hydrating || $[1] !== plain || $[2] !== product) {
+		t0 = () => plain && hydrating && product.releases !== void 0;
+		$[0] = hydrating;
+		$[1] = plain;
+		$[2] = product;
+		$[3] = t0;
+	} else t0 = $[3];
+	const [reloading, setReloading] = useState(t0);
+	let t1;
+	let t2;
+	if ($[4] !== reloading || $[5] !== router) {
+		t1 = () => {
+			if (!reloading) return;
+			const ended = () => {
+				setReloading(false);
+			};
+			router.invalidate().then(ended, ended);
+		};
+		t2 = [reloading, router];
+		$[4] = reloading;
+		$[5] = router;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	return reloading;
+}
+//#endregion
+//#region src/routes/replacement.ts
+/**
+* Moves focus to a page that renders in place of the page a person is on, where focus moved to the
+* document's body.
+*/
+/**
+* Moves focus to the page when it renders in place of the page a person is on without a
+* navigation, and focus is on the document's body.
+*
+* @remarks
+*   The router records an address as resolved only after the pages of its navigation rendered.
+*   While the page first renders, the resolved address equals the address only where a switch, a
+*   kill switch, a condition, a quarantine or a retry changed the page without a navigation. The
+*   page takes focus only after the content region showed a page, so the first page of a load does
+*   not take focus. A page that replaces the host's loading page is the first page of its load too.
+*   A page does not take focus while it hydrates. Focus moves to the document's body when the
+*   element that has it unmounts. The page takes focus from the body alone, so a control outside
+*   the page keeps it. The element that takes focus gets a tab index of `-1` where it has none, so
+*   it takes focus without a tab stop.
+* @param heading - The page's own heading. Without it, the first level-one heading of the main
+*   region takes focus, else the main region.
+*/
+function useReplacementFocus(heading) {
+	const $ = c(11);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { strict: false };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { host } = useRouteContext(t0);
+	const router = useRouter();
+	const hydrating = useHydrating();
+	let t1;
+	if ($[1] !== host || $[2] !== hydrating || $[3] !== router) {
+		t1 = () => !hydrating && !internalsOf(host).loading.get() && host.stores.mounted.get().has(hostContract.slots.content.id) && router.state.resolvedLocation?.href === router.state.location.href;
+		$[1] = host;
+		$[2] = hydrating;
+		$[3] = router;
+		$[4] = t1;
+	} else t1 = $[4];
+	const [replaced] = useState(t1);
+	let t2;
+	if ($[5] !== heading?.current || $[6] !== replaced) {
+		t2 = () => {
+			if (!replaced || document.activeElement !== document.body) return;
+			const main = document.querySelector("main");
+			const target = heading?.current ?? main?.querySelector("h1") ?? main;
+			target?.setAttribute("tabindex", target.getAttribute("tabindex") ?? "-1");
+			target?.focus();
+		};
+		$[5] = heading?.current;
+		$[6] = replaced;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== heading || $[9] !== replaced) {
+		t3 = [heading, replaced];
+		$[8] = heading;
+		$[9] = replaced;
+		$[10] = t3;
+	} else t3 = $[10];
+	useEffect(t2, t3);
+}
+//#endregion
+//#region src/parts/not-found.tsx
+/**
+* Renders the root's not-found page: for a page whose plugin a switch or a kill switch stopped, for
+* a page the host quarantined, and for an address no route matches.
+*/
+/**
+* Renders the not-found page that the router's data describes, or the loading page while the
+* router loads the address again with the routes of the page's releases.
+*
+* @remarks
+*   The page treats the router's data as the host's own where the route evaluator threw it, and
+*   ignores any other data. Where the page's document contains a deployment, a plain
+*   not-found page renders the loading page on a server and while it hydrates. It renders the
+*   loading page until the router loaded the address again. The heading takes focus where the page
+*   renders in place of the page a person is on.
+*/
+function HostNotFound(t0) {
+	const $ = c(5);
+	const { data } = t0;
+	const heading = useRef(null);
+	let t1;
+	if ($[0] !== data) {
+		t1 = notFoundDataOf(data);
+		$[0] = data;
+		$[1] = t1;
+	} else t1 = $[1];
+	const found = t1;
+	const reloading = useReleaseReload(found === void 0);
+	useReplacementFocus(heading);
+	let t2;
+	if ($[2] !== found || $[3] !== reloading) {
+		t2 = reloading ? /* @__PURE__ */ jsx(HostLoading, {}) : /* @__PURE__ */ jsx(NotFoundPage, {
+			found,
+			heading
+		});
+		$[2] = found;
+		$[3] = reloading;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+//#region src/parts/connection.ts
+/**
+* Returns the qualified ids of the declared routes the router matched, outermost first.
+*
+* @remarks
+*   The root and every route the product wrote without a name state no id, so the list leaves them
+*   out.
+*/
+function matchedOf(router) {
+	return router.state.matches.flatMap((match) => declaredOf(match)?.id ?? []);
 }
 /**
 * Returns the connection of a router and the catalogues' instance.
@@ -2709,7 +3045,7 @@ function HostFailed(t0) {
 	let t6;
 	if ($[11] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Button, {
-			onClick: _temp$4,
+			onClick: _temp$6,
 			children: t5
 		});
 		$[11] = t5;
@@ -2732,7 +3068,7 @@ function HostFailed(t0) {
 	} else t7 = $[16];
 	return t7;
 }
-function _temp$4() {
+function _temp$6() {
 	window.location.reload();
 }
 //#endregion
@@ -2938,7 +3274,7 @@ function CommandKeys() {
 		const [hotkey, bound] = t1;
 		return {
 			callback: () => {
-				const first = bound.find(_temp$3);
+				const first = bound.find(_temp$5);
 				if (first !== void 0) runReporting(first, runtime, t("commands.failed", { label: first.label }));
 			},
 			hotkey
@@ -2946,20 +3282,305 @@ function CommandKeys() {
 	}));
 	return null;
 }
-function _temp$3(t0) {
+function _temp$5(t0) {
 	const { enabled } = t0;
 	return enabled;
 }
 //#endregion
-//#region src/commands/palette.tsx
+//#region src/commands/palette-state.ts
 /**
-* Renders the command palette: the commands a key could run and the main menu's pages, in a dialog
-* `Mod+K` opens.
+* Shares the command palette's open state between the palette and the controls of the frame.
 */
 /**
-* The chord that opens the palette, which the build refuses to a command.
+* Provides the palette's open state to the palette and the frame. `HostRoot` provides it, and the
+* value is undefined outside `HostRoot`.
 */
-const PALETTE = "Mod+K";
+const PaletteContext = createContext(void 0);
+/**
+* Returns the palette's open state, so a control in the frame opens the palette that `Mod+K` opens.
+*
+* @throws {@link Error} Outside `HostRoot`.
+*/
+function usePalette() {
+	const state = use(PaletteContext);
+	if (state === void 0) throw new Error("usePalette() found no HostRoot. The frame and the palette render inside HostRoot, which provides the palette's state.");
+	return state;
+}
+//#endregion
+//#region src/app/listed.ts
+/**
+* Reads which routes the person may open, with or without a menu entry, and the menus and settings
+* pages a sidebar lists from them.
+*/
+/**
+* Returns the routes whose plugin is on and whose condition is true, with or without a menu entry.
+*
+* @param routes - The product's routes.
+* @param stores - The stores that a condition depends on.
+*/
+function openableRoutesOf(routes, stores) {
+	const context = conditionContextOf(stores);
+	return routes.filter(({ plugin, when }) => context.on(plugin) && evaluateWhen(when, context));
+}
+/**
+* Returns the routes with a menu entry whose plugin is on and whose condition is true.
+*
+* @param routes - The product's routes.
+* @param stores - The stores that a condition depends on.
+*/
+function listedRoutesOf(routes, stores) {
+	return openableRoutesOf(routes, stores).filter(({ navigation }) => navigation !== void 0);
+}
+/**
+* Returns the ids of the routes a selection returns, and renders again when a plugin turns on or
+* off, a flag changes or the session changes.
+*
+* @remarks
+*   The snapshot is the ids joined by spaces. A qualified id does not contain a space, so a
+*   component does not render again after a change that selects the same routes. The server
+*   snapshot runs the selection inside `asServerSnapshot`, so a component hydrates with the routes
+*   that the server render selected.
+*/
+function useSelected(select) {
+	const $ = c(14);
+	const { product, stores } = useInternals().runtime;
+	const { availability, flags, session } = stores;
+	let t0;
+	if ($[0] !== availability || $[1] !== flags || $[2] !== session) {
+		t0 = (changed) => {
+			const stops = [
+				availability,
+				flags,
+				session
+			].map((store) => store.subscribe(changed));
+			return () => {
+				for (const stop of stops) stop();
+			};
+		};
+		$[0] = availability;
+		$[1] = flags;
+		$[2] = session;
+		$[3] = t0;
+	} else t0 = $[3];
+	const subscribe = t0;
+	let t1;
+	if ($[4] !== availability || $[5] !== flags || $[6] !== product.routes || $[7] !== select || $[8] !== session) {
+		t1 = () => select(product.routes, {
+			availability,
+			flags,
+			session
+		}).map(_temp$4).join(" ");
+		$[4] = availability;
+		$[5] = flags;
+		$[6] = product.routes;
+		$[7] = select;
+		$[8] = session;
+		$[9] = t1;
+	} else t1 = $[9];
+	const read = t1;
+	let t2;
+	if ($[10] !== read) {
+		t2 = () => asServerSnapshot(read);
+		$[10] = read;
+		$[11] = t2;
+	} else t2 = $[11];
+	const t3 = useSyncExternalStore(subscribe, read, t2);
+	let t4;
+	if ($[12] !== t3) {
+		t4 = new Set(t3.split(" "));
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+function _temp$4(t0) {
+	const { id } = t0;
+	return id;
+}
+/**
+* Returns the ids of the routes a menu may list, and renders again when a plugin turns on or off,
+* a flag changes or the session changes.
+*/
+function useListed() {
+	return useSelected(listedRoutesOf);
+}
+/**
+* Returns the ids of the routes the person may open, with or without a menu entry, and renders
+* again when a plugin turns on or off, a flag changes or the session changes.
+*/
+function useOpenable() {
+	return useSelected(openableRoutesOf);
+}
+/**
+* Returns true where a menu lists a route the person may open.
+*/
+function lists(menu, product, listed) {
+	return product.routes.some(({ id, navigation }) => {
+		return navigation?.menu === menu && listed.has(id);
+	});
+}
+/**
+* Returns the menus plugins declare that list a route the person may open, in install order.
+*
+* @param product - The resolved product.
+* @param listed - The ids of the routes a menu may list.
+* @param plugin - The plugin whose menus count. Without it, the menus of every plugin but the host
+*   count.
+*/
+function menusOf(product, listed, plugin) {
+	return product.menus.filter((menu) => {
+		return (plugin === void 0 ? menu.plugin !== hostContract.pluginId : menu.plugin === plugin) && lists(menu.id, product, listed);
+	});
+}
+/**
+* Returns true where the settings menu lists a page the person may open.
+*
+* @param product - The resolved product.
+* @param listed - The ids of the routes a menu may list.
+* @param plugin - The plugin whose settings pages count. Without it, the pages of every plugin
+*   count.
+*/
+function settingsListed(product, listed, plugin) {
+	return product.routes.some(({ id, navigation, plugin: owner }) => {
+		return navigation?.menu === hostContract.menus.settings.id && listed.has(id) && (plugin === void 0 || owner === plugin);
+	});
+}
+//#endregion
+//#region src/commands/pages.ts
+/**
+* Imports the page index of every installed plugin the first time the palette opens.
+*
+* @remarks
+*   The catalogue's index lists 183 pages, so the palette imports the indexes only when a person
+*   opens it. The host imports each index once per product. The host reports an index as
+*   `index-failed` under its plugin when its import fails or its module does not export exactly one
+*   function. The palette then lists none of that plugin's indexed pages.
+*/
+/**
+* The separator i18next reads between a namespace and a key.
+*/
+const SEPARATOR = ":";
+/**
+* The pages of each product's indexes, imported once per product.
+*/
+const INDEXES = /* @__PURE__ */ new WeakMap();
+/**
+* Returns a key without its namespace prefix.
+*
+* @param key - A key of a plugin's catalogue, or `<namespace>:<key>` of another catalogue.
+*/
+function bareKeyOf(key) {
+	return key.slice(key.indexOf(SEPARATOR) + 1);
+}
+/**
+* Returns the namespaces that prefix the keys of the pages, without repeats.
+*/
+function namespacesOf(pages) {
+	const named = pages.flatMap(({ entry }) => [entry.label, entry.group ?? ""]).filter((key) => key.includes(SEPARATOR)).map((key) => key.slice(0, key.indexOf(SEPARATOR)));
+	return [...new Set(named)];
+}
+/**
+* Returns the pages one plugin's index lists.
+*
+* @throws {@link Error} When the index's module does not export exactly one function.
+*/
+async function indexOf(pluginId, load) {
+	const functions = Object.values(await load()).filter((value) => typeof value === "function");
+	const [list] = functions;
+	if (functions.length !== 1 || list === void 0) throw new Error(`The page index of ${pluginId} exports ${String(functions.length)} functions. A page index must export exactly one function.`);
+	return list().map((entry) => ({
+		entry,
+		plugin: pluginId
+	}));
+}
+/**
+* Imports every installed plugin's index and loads the namespaces that prefix its pages' keys.
+*
+* @remarks
+*   The function reports each index that fails, and lists the pages of the others.
+* @param product - The product, with each plugin's manifest.
+* @param report - The host's report.
+* @param load - Loads the catalogues of the namespaces that prefix the keys.
+* @returns The pages of every index that loaded, in install order.
+*/
+async function indexedPagesOf(product, report, load) {
+	const lists = Object.entries(product.manifests).map(async ([pluginId, { code }]) => {
+		if (code.pages === void 0) return [];
+		try {
+			return await indexOf(pluginId, code.pages);
+		} catch (error) {
+			report({
+				error,
+				kind: "index-failed",
+				plugin: pluginId
+			});
+			return [];
+		}
+	});
+	const pages = (await Promise.all(lists)).flat();
+	await load(namespacesOf(pages));
+	return pages;
+}
+/**
+* Returns the pages of a product's indexes, imported on the first call for the product.
+*/
+function cachedPagesOf(product, report, load) {
+	const known = INDEXES.get(product) ?? indexedPagesOf(product, report, load);
+	INDEXES.set(product, known);
+	return known;
+}
+/**
+* Returns the pages of every installed plugin's index once the palette has opened, and none
+* before.
+*
+* @param open - True while the palette is open.
+*/
+function usePageIndex(open) {
+	const $ = c(10);
+	const { runtime } = useInternals();
+	const { i18n } = useTranslation("host");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [pages, setPages] = useState(t0);
+	let t1;
+	if ($[1] !== i18n || $[2] !== open || $[3] !== runtime.product || $[4] !== runtime.report) {
+		t1 = () => {
+			let current = true;
+			const listed = async () => {
+				const loaded = await cachedPagesOf(runtime.product, runtime.report, (namespaces) => i18n.loadNamespaces([...namespaces]));
+				if (current) setPages(loaded);
+			};
+			if (open) listed();
+			return () => {
+				current = false;
+			};
+		};
+		$[1] = i18n;
+		$[2] = open;
+		$[3] = runtime.product;
+		$[4] = runtime.report;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== i18n || $[7] !== open || $[8] !== runtime) {
+		t2 = [
+			i18n,
+			open,
+			runtime
+		];
+		$[6] = i18n;
+		$[7] = open;
+		$[8] = runtime;
+		$[9] = t2;
+	} else t2 = $[9];
+	useEffect(t1, t2);
+	return pages;
+}
+//#endregion
+//#region src/commands/choices.ts
 /**
 * Returns true for a command the palette lists: it is enabled, takes no arguments and resolves
 * with no result.
@@ -2968,224 +3589,342 @@ function isListed({ command, enabled }) {
 	return enabled && !command.takesArguments && !command.returnsResult;
 }
 /**
-* Returns the rows the palette lists: each command a key could run under its plugin's name, then
-* each page of the main menu under `Go to`.
+* Returns a word of a plugin's catalogue, or of the catalogue its key names, and the key without a
+* namespace where no catalogue states the word.
+*/
+function worded(words, plugin, key) {
+	return words.t(plugin, key, { defaultValue: bareKeyOf(key) });
+}
+/**
+* Returns a row per entry of every menu but the main one that the person may open: under its
+* plugin's name, or under the settings menu's heading for a settings page.
+*
+* @remarks
+*   A row matches its menu's heading beside its text, and the palette lists it while a query
+*   matches it.
+*/
+function menuRows({ go, hrefOf, openable, product, words }) {
+	return product.menus.filter(({ id }) => id !== hostContract.menus.main.id).flatMap((menu) => {
+		const heading = words.t(menu.plugin, menu.label);
+		return product.routes.flatMap((route) => {
+			const { navigation } = route;
+			if (navigation?.menu !== menu.id || !openable.has(route.id)) return [];
+			const href = hrefOf(route.id);
+			return [{
+				action: {
+					group: menu.plugin === HOST ? heading : words.t(route.plugin, "plugin.name"),
+					keywords: heading,
+					label: words.t(route.plugin, navigation.label),
+					searchOnly: true,
+					value: `route:${route.id}`
+				},
+				run: () => {
+					go(href);
+				}
+			}];
+		});
+	});
+}
+/**
+* Returns a row per page of every plugin's index that the person may open, under its plugin's name.
+*
+* @remarks
+*   A row matches its group's heading beside its title, and the palette lists it while a query
+*   matches it.
+*/
+function pageRows({ go, hrefOf, openable, words }, pages) {
+	return pages.flatMap(({ entry, plugin }) => {
+		if (!openable.has(entry.route.id)) return [];
+		const href = hrefOf(entry.route.id, entry.params);
+		return [{
+			action: {
+				group: words.t(plugin, "plugin.name"),
+				keywords: entry.group === void 0 ? void 0 : worded(words, plugin, entry.group),
+				label: worded(words, plugin, entry.label),
+				searchOnly: true,
+				value: `page:${href}`
+			},
+			run: () => {
+				go(href);
+			}
+		}];
+	});
+}
+/**
+* Returns the rows the palette lists: each command a key could run under its plugin's name, each
+* page of the main menu under `Go to`, then the entries of the other menus and the pages of every
+* plugin's index.
 *
 * @remarks
 *   A command matches its catalogue's `keywords.<label>` beside its label, where the catalogue
-*   states it.
+*   states it. The indexes are imported the first time the palette opens.
+* @param runtime - The host's runtime, which reports a command that fails.
+* @param open - True while the palette is open.
 */
-function useChoices(runtime) {
-	const $ = c(10);
+function useChoices(runtime, open) {
+	const $ = c(14);
 	const commands = useCommands();
 	const entries = useNavigation();
 	const navigate = useNavigate();
+	const map = useRouteMap();
+	const openable = useOpenable();
+	const pages = usePageIndex(open);
 	const { i18n, t } = useTranslation("host");
 	let t0;
-	if ($[0] !== commands || $[1] !== entries || $[2] !== i18n || $[3] !== navigate || $[4] !== runtime || $[5] !== t) {
+	if ($[0] !== commands || $[1] !== entries || $[2] !== i18n || $[3] !== map || $[4] !== navigate || $[5] !== openable || $[6] !== pages || $[7] !== runtime || $[8] !== t) {
 		const words = pluginWordsOf(i18n);
 		let t1;
-		if ($[7] !== navigate || $[8] !== t) {
-			t1 = (t2) => {
-				const { href, label: label_0, routeId } = t2;
+		if ($[10] !== navigate) {
+			t1 = (href) => {
+				navigate({ to: href });
+			};
+			$[10] = navigate;
+			$[11] = t1;
+		} else t1 = $[11];
+		let t2;
+		if ($[12] !== map) {
+			t2 = (routeId, params) => routeHref(map, routeId, params);
+			$[12] = map;
+			$[13] = t2;
+		} else t2 = $[13];
+		const rows = {
+			go: t1,
+			hrefOf: t2,
+			openable,
+			product: runtime.product,
+			words
+		};
+		t0 = [
+			...commands.filter(_temp$3).map((status_0) => {
+				const { id, label, plugin } = status_0.command;
+				const keywords = `keywords.${label}`;
+				return {
+					action: {
+						group: words.t(plugin, "plugin.name"),
+						keywords: words.exists(plugin, keywords) ? words.t(plugin, keywords) : void 0,
+						label: status_0.label,
+						shortcut: status_0.keys,
+						value: id
+					},
+					run: () => {
+						runReporting(status_0, runtime, t("commands.failed", { label: status_0.label }));
+					}
+				};
+			}),
+			...entries.map((t3) => {
+				const { href: href_0, label: label_0, routeId: routeId_0 } = t3;
 				return {
 					action: {
 						group: t("palette.goTo"),
 						label: label_0,
-						value: `route:${routeId}`
+						value: `route:${routeId_0}`
 					},
 					run: () => {
-						navigate({ to: href });
+						rows.go(href_0);
 					}
 				};
-			};
-			$[7] = navigate;
-			$[8] = t;
-			$[9] = t1;
-		} else t1 = $[9];
-		t0 = [...commands.filter(_temp$2).map((status_0) => {
-			const { id, label, plugin } = status_0.command;
-			const keywords = `keywords.${label}`;
-			return {
-				action: {
-					group: words.t(plugin, "plugin.name"),
-					keywords: words.exists(plugin, keywords) ? words.t(plugin, keywords) : void 0,
-					label: status_0.label,
-					shortcut: status_0.keys,
-					value: id
-				},
-				run: () => {
-					runReporting(status_0, runtime, t("commands.failed", { label: status_0.label }));
-				}
-			};
-		}), ...entries.map(t1)];
+			}),
+			...menuRows(rows),
+			...pageRows(rows, pages)
+		];
 		$[0] = commands;
 		$[1] = entries;
 		$[2] = i18n;
-		$[3] = navigate;
-		$[4] = runtime;
-		$[5] = t;
-		$[6] = t0;
-	} else t0 = $[6];
+		$[3] = map;
+		$[4] = navigate;
+		$[5] = openable;
+		$[6] = pages;
+		$[7] = runtime;
+		$[8] = t;
+		$[9] = t0;
+	} else t0 = $[9];
 	return t0;
 }
-function _temp$2(status) {
+function _temp$3(status) {
 	return isListed(status);
 }
+//#endregion
+//#region src/commands/palette.tsx
+/**
+* The chord that opens the palette. The build refuses a command that binds it.
+*/
+const PALETTE = "Mod+K";
 /**
 * Renders the palette in a dialog that `Mod+K` opens and closes.
 *
 * @remarks
-*   Choosing a row closes the dialog, then runs the command or navigates to the page. The dialog
-*   renders where the palette renders, the `overlay` region at the end of the frame, so it needs no
-*   portal and renders on a server while closed.
+*   The query bar renders a search glyph before the field, and a clear control after it while the
+*   field has a query. A chosen row closes the dialog, then runs its command or navigates to its
+*   page. The palette renders in the `overlay` region at the end of the frame, so the dialog needs
+*   no portal. A server renders the dialog while it is closed. `HostRoot` provides the open state,
+*   so a control in the frame opens the same dialog.
 */
 function CommandPalette() {
-	const $ = c(38);
-	const [open, setOpen] = useState(false);
+	const $ = c(46);
+	const { open, setOpen } = usePalette();
+	const choices = useChoices(useInternals().runtime, open);
+	const { t } = useTranslation("host");
 	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = { strict: false };
-		$[0] = t0;
-	} else t0 = $[0];
-	const { host } = useRouteContext(t0);
+	if ($[0] !== setOpen) {
+		t0 = () => {
+			setOpen(_temp$2);
+		};
+		$[0] = setOpen;
+		$[1] = t0;
+	} else t0 = $[1];
+	useHotkey(PALETTE, t0);
 	let t1;
-	if ($[1] !== host) {
-		t1 = internalsOf(host);
-		$[1] = host;
-		$[2] = t1;
-	} else t1 = $[2];
-	const choices = useChoices(t1.runtime);
-	const { t } = useTranslation("host");
+	if ($[2] !== t) {
+		t1 = t("palette.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
 	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = () => {
-			setOpen(_temp2);
+	if ($[4] !== setOpen) {
+		t2 = (t3) => {
+			const { open: next } = t3;
+			setOpen(next);
 		};
-		$[3] = t2;
-	} else t2 = $[3];
-	useHotkey(PALETTE, t2);
+		$[4] = setOpen;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[4] !== t) {
-		t3 = t("palette.label");
-		$[4] = t;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = (t5) => {
-			const { open: next } = t5;
-			setOpen(next);
-		};
-		$[6] = t4;
-	} else t4 = $[6];
+		t3 = /* @__PURE__ */ jsx(Dialog.Backdrop, {});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== choices) {
+		t4 = choices.map(_temp2);
+		$[7] = choices;
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Dialog.Backdrop, {});
-		$[7] = t5;
-	} else t5 = $[7];
+	if ($[9] !== t) {
+		t5 = t("palette.commands");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[8] !== choices) {
-		t6 = choices.map(_temp3);
-		$[8] = choices;
-		$[9] = t6;
-	} else t6 = $[9];
+	if ($[11] !== t) {
+		t6 = (matches) => t("palette.count", { count: matches });
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[10] !== t) {
-		t7 = t("palette.commands");
-		$[10] = t;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== t) {
-		t8 = (matches) => t("palette.count", { count: matches });
-		$[12] = t;
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
-	if ($[14] !== choices) {
-		t9 = (value) => {
+	if ($[13] !== choices || $[14] !== setOpen) {
+		t7 = (value) => {
 			setOpen(false);
 			for (const choice of choices) if (choice.action.value === value) choice.run();
 		};
-		$[14] = choices;
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
+		$[13] = choices;
+		$[14] = setOpen;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
 	if ($[16] !== t) {
-		t10 = t("palette.search");
+		t8 = t("palette.search");
 		$[16] = t;
-		$[17] = t10;
-	} else t10 = $[17];
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(SearchIcon, { size: "100%" });
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("palette.search");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
 	let t11;
-	if ($[18] !== t) {
-		t11 = t("palette.search");
-		$[18] = t;
-		$[19] = t11;
-	} else t11 = $[19];
+	if ($[21] !== t) {
+		t11 = t("frame.clear");
+		$[21] = t;
+		$[22] = t11;
+	} else t11 = $[22];
 	let t12;
-	if ($[20] !== t10 || $[21] !== t11) {
-		t12 = /* @__PURE__ */ jsx(Command.Input, {
-			"aria-label": t10,
-			placeholder: t11
-		});
-		$[20] = t10;
-		$[21] = t11;
-		$[22] = t12;
-	} else t12 = $[22];
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(XIcon, { size: "100%" });
+		$[23] = t12;
+	} else t12 = $[23];
 	let t13;
-	if ($[23] !== t) {
-		t13 = t("palette.none");
-		$[23] = t;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
-	if ($[25] !== t13) {
-		t14 = /* @__PURE__ */ jsx(Command.List, { children: /* @__PURE__ */ jsx(Command.Empty, { children: t13 }) });
+	if ($[24] !== t11) {
+		t13 = /* @__PURE__ */ jsx(Command.Clear, {
+			"aria-label": t11,
+			children: t12
+		});
+		$[24] = t11;
 		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t10 || $[27] !== t13 || $[28] !== t8) {
+		t14 = /* @__PURE__ */ jsx(Command.Input, {
+			"aria-label": t8,
+			indicator: t9,
+			placeholder: t10,
+			children: t13
+		});
+		$[26] = t10;
+		$[27] = t13;
+		$[28] = t8;
+		$[29] = t14;
+	} else t14 = $[29];
 	let t15;
-	if ($[27] !== t12 || $[28] !== t14 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8 || $[32] !== t9) {
-		t15 = /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsxs(Command.Root, {
-			actions: t6,
-			"aria-label": t7,
-			count: t8,
-			onRun: t9,
-			children: [t12, t14]
-		}) }) });
-		$[27] = t12;
-		$[28] = t14;
-		$[29] = t6;
-		$[30] = t7;
-		$[31] = t8;
-		$[32] = t9;
-		$[33] = t15;
-	} else t15 = $[33];
+	if ($[30] !== t) {
+		t15 = t("palette.none");
+		$[30] = t;
+		$[31] = t15;
+	} else t15 = $[31];
 	let t16;
-	if ($[34] !== open || $[35] !== t15 || $[36] !== t3) {
-		t16 = /* @__PURE__ */ jsxs(Dialog.Root, {
-			"aria-label": t3,
-			onOpenChange: t4,
+	if ($[32] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Command.List, { children: /* @__PURE__ */ jsx(Command.Empty, { children: t15 }) });
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== t14 || $[35] !== t16 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7) {
+		t17 = /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsxs(Command.Root, {
+			actions: t4,
+			"aria-label": t5,
+			count: t6,
+			onRun: t7,
+			children: [t14, t16]
+		}) }) });
+		$[34] = t14;
+		$[35] = t16;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] !== open || $[42] !== t1 || $[43] !== t17 || $[44] !== t2) {
+		t18 = /* @__PURE__ */ jsxs(Dialog.Root, {
+			"aria-label": t1,
+			onOpenChange: t2,
 			open,
 			placement: "top",
 			scrollBehavior: "inside",
 			size: "lg",
 			variant: "plain",
-			children: [t5, t15]
+			children: [t3, t17]
 		});
-		$[34] = open;
-		$[35] = t15;
-		$[36] = t3;
-		$[37] = t16;
-	} else t16 = $[37];
-	return t16;
-}
-function _temp3(t0) {
+		$[41] = open;
+		$[42] = t1;
+		$[43] = t17;
+		$[44] = t2;
+		$[45] = t18;
+	} else t18 = $[45];
+	return t18;
+}
+function _temp2(t0) {
 	const { action } = t0;
 	return action;
 }
-function _temp2(shown) {
+function _temp$2(shown) {
 	return !shown;
 }
 //#endregion
@@ -3238,66 +3977,80 @@ function _temp$1(toast) {
 //#endregion
 //#region src/parts/root.tsx
 /**
+* Renders the root route's component: the `layout` region around the product's frame, and the
+* `overlay` region after it with the palette and the toast region.
+*/
+/**
 * Renders the product's frame inside the `layout` region, the `overlay` region after it, and the
 * keys of the product's commands.
 *
 * @remarks
 *   The router renders the root route's component inside a catch boundary of its own, so the
 *   component renders the host's last boundary around the frame, and an error in the frame
-*   renders the failure page and is reported with the target `host`.
+*   renders the failure page and is reported with the target `host`. The component provides the
+*   palette's open state, so a control in the frame opens the palette that `Mod+K` opens.
 */
 function HostRoot(t0) {
-	const $ = c(10);
+	const $ = c(12);
 	const { children } = t0;
+	const { runtime } = useInternals();
+	const [open, setOpen] = useState(false);
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { strict: false };
-		$[0] = t1;
-	} else t1 = $[0];
-	const { host } = useRouteContext(t1);
+	if ($[0] !== open) {
+		t1 = {
+			open,
+			setOpen
+		};
+		$[0] = open;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
-	if ($[1] !== host) {
-		t2 = internalsOf(host);
-		$[1] = host;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== children) {
-		t3 = /* @__PURE__ */ jsx(Slot, {
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx(Slot, {
 			slot: hostContract.slots.layout,
 			children
 		});
-		$[3] = children;
-		$[4] = t3;
-	} else t3 = $[4];
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
 	let t4;
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs(Slot, {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(Slot, {
 			slot: hostContract.slots.overlay,
 			children: [/* @__PURE__ */ jsx(CommandPalette, {}), /* @__PURE__ */ jsx(HostToasts, {})]
 		});
-		t5 = /* @__PURE__ */ jsx(CommandKeys, {});
+		t4 = /* @__PURE__ */ jsx(CommandKeys, {});
+		$[4] = t3;
 		$[5] = t4;
-		$[6] = t5;
 	} else {
+		t3 = $[4];
 		t4 = $[5];
-		t5 = $[6];
 	}
-	let t6;
-	if ($[7] !== t2.runtime || $[8] !== t3) {
-		t6 = /* @__PURE__ */ jsxs(LastBoundary, {
-			runtime: t2.runtime,
+	let t5;
+	if ($[6] !== runtime || $[7] !== t2) {
+		t5 = /* @__PURE__ */ jsxs(LastBoundary, {
+			runtime,
 			children: [
+				t2,
 				t3,
-				t4,
-				t5
+				t4
 			]
 		});
-		$[7] = t2.runtime;
-		$[8] = t3;
-		$[9] = t6;
-	} else t6 = $[9];
+		$[6] = runtime;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t1 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(PaletteContext, {
+			value: t1,
+			children: t5
+		});
+		$[9] = t1;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
 	return t6;
 }
 //#endregion
@@ -3343,16 +4096,16 @@ function componentOf(module, routeId) {
 * error page, and counts each error towards the page's quarantine.
 */
 /**
-* Marks a route error component that has counted no error yet.
-*/
-const UNCOUNTED = Symbol("uncounted");
-/**
 * Returns the error component of a plugin's route.
 *
 * @remarks
-*   The router renders the component for an error that the page or its loader throws. Each error
-*   counts one failure towards the route's quarantine, once however often the component renders
-*   it. The fallback renders in its plugin's scope, without props.
+*   The router renders the component for an error that the page or its loader throws. The component
+*   passes each error to the route's quarantine, which counts the error once however often the
+*   component mounts with it. The fallback renders in its plugin's scope, without props. A page
+*   whose module failed to import renders the host's error page with a button that reloads the
+*   page, in place of the fallback, because the fallback is a module of the same plugin and a
+*   reload is the one way to import it again. The error page takes focus where it renders in place
+*   of the page a person is on.
 * @param routeId - Qualified id of the route.
 * @param fallback - Imports the component the manifest renders in the page's place, where it
 *   states one.
@@ -3367,23 +4120,31 @@ function routeErrorOf(routeId, fallback) {
 		const { host } = useRouteContext({ strict: false });
 		const { quarantine } = host.stores;
 		const { t } = useTranslation("host");
-		const counted = useRef(UNCOUNTED);
+		const unloaded = error instanceof PluginImportError;
+		useReplacementFocus();
 		useEffect(() => {
-			if (counted.current === error) return;
-			counted.current = error;
 			quarantine.failed(target, error);
 		}, [error, quarantine]);
-		if (Fallback !== void 0) return /* @__PURE__ */ jsx(PluginProvider, {
+		if (Fallback !== void 0 && !unloaded) return /* @__PURE__ */ jsx(PluginProvider, {
 			pluginId: pluginOf(routeId),
 			children: /* @__PURE__ */ jsx(Suspense, {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Fallback, {})
 			})
 		});
-		return /* @__PURE__ */ jsx(EmptyState.Root, { children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [/* @__PURE__ */ jsx(EmptyState.Title, {
-			as: "h1",
-			children: t("page.failed.title")
-		}), /* @__PURE__ */ jsx(EmptyState.Description, { children: t("page.failed.description") })] }) });
+		return /* @__PURE__ */ jsx(EmptyState.Root, { children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [
+			/* @__PURE__ */ jsx(EmptyState.Title, {
+				as: "h1",
+				children: t("page.failed.title")
+			}),
+			/* @__PURE__ */ jsx(EmptyState.Description, { children: t("page.failed.description") }),
+			unloaded ? /* @__PURE__ */ jsx(Button, {
+				onClick: () => {
+					window.location.reload();
+				},
+				children: t("failed.reload")
+			}) : null
+		] }) });
 	};
 }
 //#endregion
@@ -3427,18 +4188,24 @@ function requiresSignIn(when) {
 * context.
 *
 * @remarks
-*   The evaluator throws the router's not-found error where the route's plugin is not on, with the
-*   plugin and its reason as data where a switch or a kill switch stopped it, and where the route
-*   is quarantined, with the target as data. Where the condition is false for a person who is not
-*   signed in, the product states a sign-in route, and the condition requires sign-in at its top
-*   level or in a top-level `allOf`, it throws the router's redirect to the sign-in route, with the
-*   address the navigation enters as the `redirect` search. Otherwise it returns the condition.
+*   For a person who is not signed in, where the product states a sign-in route and the condition
+*   requires sign-in at its top level or in a top-level `allOf`, the evaluator throws the router's
+*   redirect to the sign-in route, with the address the navigation enters as the `redirect` search.
+*   The redirect comes before the plugin's availability, because an entitlement or a condition on
+*   the plugin reads a session that does not exist yet. Otherwise the evaluator throws the router's
+*   not-found error where the route's plugin is not on, with the plugin and its reason as data
+*   where a switch or a kill switch stopped it, and where the route is quarantined, with the target
+*   as data. It then returns the condition.
 * @param product - The installed plugins and the sign-in route.
 */
 function evaluatorOf(product) {
 	return ({ pluginId, routeId, when }, { host, routes }, location) => {
 		const context = conditionContextOf(host.stores);
 		const target = `route:${routeId}`;
+		if (product.signIn !== void 0 && !context.authenticated && when !== void 0 && requiresSignIn(when)) throw redirect({
+			search: { redirect: location?.href },
+			to: routeHref(routes, product.signIn)
+		});
 		if (!context.on(pluginId)) {
 			const data = stoppedBy(pluginId, product.plugins, host.stores.availability.get());
 			throw data === void 0 ? notFound() : notFound({ data });
@@ -3447,12 +4214,7 @@ function evaluatorOf(product) {
 			reason: "quarantined",
 			target
 		} });
-		if (when === void 0 || evaluateWhen(when, context)) return true;
-		if (product.signIn !== void 0 && !context.authenticated && requiresSignIn(when)) throw redirect({
-			search: { redirect: location?.href },
-			to: routeHref(routes, product.signIn)
-		});
-		return false;
+		return when === void 0 || evaluateWhen(when, context);
 	};
 }
 //#endregion
@@ -3495,7 +4257,7 @@ function loaderOf(product, route) {
 * @remarks
 *   The component reads the host from the router's context. A render of the page that throws
 *   commits nothing, so the route's count of failed renders returns to zero only after a render
-*   that commits.
+*   that commits. The page takes focus where it renders in place of the page a person is on.
 * @param pluginId - Id of the plugin that declares the route, or the settings page, whose scope
 *   the page renders in.
 * @param routeId - The route's qualified id, under which its failed renders and the extensions
@@ -3511,6 +4273,7 @@ function hostPageOf(pluginId, routeId, page) {
 	return function HostPage() {
 		const { host } = useRouteContext({ strict: false });
 		const { quarantine } = host.stores;
+		useReplacementFocus();
 		useEffect(() => {
 			quarantine.rendered(target);
 		});
@@ -3600,8 +4363,8 @@ function unplacedOf(sections, listed, pages) {
 * part under the settings route.
 */
 /**
-* Returns the ids of the sections whose plugin is on and whose condition is true, joined by spaces,
-* which no qualified id contains.
+* Returns the ids of the sections whose plugin is on and whose condition is true, joined by spaces.
+* A qualified id does not contain a space.
 */
 function shownOf(sections, stores) {
 	const context = conditionContextOf(stores);
@@ -3610,9 +4373,13 @@ function shownOf(sections, stores) {
 /**
 * Returns the sections that render and the pages the settings menu lists, and renders again when a
 * plugin turns on or off, a flag changes or the session changes.
+*
+* @remarks
+*   The server snapshot computes the sections inside `asServerSnapshot`, so a settings page
+*   hydrates with the sections that the server render showed.
 */
 function useSections() {
-	const $ = c(22);
+	const $ = c(24);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { strict: false };
@@ -3654,47 +4421,53 @@ function useSections() {
 		$[9] = t2;
 	} else t2 = $[9];
 	const read = t2;
-	const t3 = useSyncExternalStore(subscribe, read, read);
-	let t4;
-	if ($[10] !== t3) {
-		t4 = new Set(t3.split(" "));
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	const shown = t4;
+	let t3;
+	if ($[10] !== read) {
+		t3 = () => asServerSnapshot(read);
+		$[10] = read;
+		$[11] = t3;
+	} else t3 = $[11];
+	const t4 = useSyncExternalStore(subscribe, read, t3);
 	let t5;
-	if ($[12] !== entries) {
-		t5 = entries.map(_temp);
-		$[12] = entries;
+	if ($[12] !== t4) {
+		t5 = new Set(t4.split(" "));
+		$[12] = t4;
 		$[13] = t5;
 	} else t5 = $[13];
+	const shown = t5;
 	let t6;
-	if ($[14] !== settings.sections || $[15] !== shown) {
-		let t7;
-		if ($[17] !== shown) {
-			t7 = (t8) => {
-				const { id } = t8;
+	if ($[14] !== entries) {
+		t6 = entries.map(_temp);
+		$[14] = entries;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== settings.sections || $[17] !== shown) {
+		let t8;
+		if ($[19] !== shown) {
+			t8 = (t9) => {
+				const { id } = t9;
 				return shown.has(id);
 			};
-			$[17] = shown;
-			$[18] = t7;
-		} else t7 = $[18];
-		t6 = settings.sections.filter(t7);
-		$[14] = settings.sections;
-		$[15] = shown;
-		$[16] = t6;
-	} else t6 = $[16];
-	let t7;
-	if ($[19] !== t5 || $[20] !== t6) {
-		t7 = {
-			listed: t5,
-			shown: t6
+			$[19] = shown;
+			$[20] = t8;
+		} else t8 = $[20];
+		t7 = settings.sections.filter(t8);
+		$[16] = settings.sections;
+		$[17] = shown;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[21] !== t6 || $[22] !== t7) {
+		t8 = {
+			listed: t6,
+			shown: t7
 		};
-		$[19] = t5;
-		$[20] = t6;
-		$[21] = t7;
-	} else t7 = $[21];
-	return t7;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 }
 function _temp(t0) {
 	const { routeId } = t0;
@@ -4710,9 +5483,11 @@ function declarationOf(product, route) {
 *   The routes compile in one call, so the compiler sees every path at once. Each route loads its
 *   page with the modules of the plugins in its `loads`, loads its `data` through the data client
 *   in the router's context, validates its search with its contract's validator, and evaluates its
-*   condition against the host in the router's context. The settings route renders the settings
-*   frame, its index opens the first settings page, and each settings page renders its sections.
-*   The pages import through the manifests' importers as `instrumented` wraps them.
+*   condition against the host in the router's context. Each route renders the root's not-found
+*   page in its own place, so a page that throws the router's not-found shows it inside the frame
+*   and counts no failure. The settings route renders the settings frame, its index opens the first
+*   settings page, and each settings page renders its sections. The pages import through the
+*   manifests' importers as `instrumented` wraps them.
 * @param product - The product, with each installed plugin's manifest.
 * @returns The function that compiles the routes under the root, for the root's `addChildren`.
 */
@@ -4723,8 +5498,9 @@ function createHostRoutes(product) {
 	return (root) => compileRoutes(declarations, {
 		errorComponent: ({ id }) => routeErrorOf(id, mappingOf(loaded, id).fallback),
 		evaluate,
+		notFoundComponent: root.options.notFoundComponent,
 		parent: root
 	});
 }
 //#endregion
-export { HostContent as a, sampledFrom as c, HostNotFound as i, HostRoot as n, createHost as o, HostProvider as r, internalsOf as s, createHostRoutes as t };
+export { settingsListed as a, HostProvider as c, HostContent as d, onCaughtError as f, sampledFrom as h, menusOf as i, HostNotFound as l, internalsOf as m, HostRoot as n, useListed as o, createHost as p, listedRoutesOf as r, usePalette as s, createHostRoutes as t, useInternals as u };