@stealthscale/sdk-host 0.1.0 → 0.4.0

package/dist/standalone/app.js

@@ -1,16 +1,17 @@
-import { a as HostContent, c as sampledFrom, i as HostNotFound, n as HostRoot, o as createHost, r as HostProvider, s as internalsOf, t as createHostRoutes } from "../create-routes-CkgZV-dU.js";
+import { c as HostProvider, f as onCaughtError, h as sampledFrom, l as HostNotFound, m as internalsOf, p as createHost, t as createHostRoutes } from "../create-routes-D4iCBYZe.js";
+import { t as ProductFrame } from "../frame-HZM1zS7g.js";
 import { standaloneSources } from "../standalone.js";
 import { DataError } from "@stealthscale/provider-data";
-import { hostContract } from "@stealthscale/sdk-core";
-import { Into, Slot, useResolvedProduct, useSlot } from "@stealthscale/sdk-plugin";
+import { NOBODY, hostContract } from "@stealthscale/sdk-core";
+import { Into, useResolvedProduct } from "@stealthscale/sdk-plugin";
 import { localStore } from "@stealthscale/settings";
-import { c } from "react/compiler-runtime";
 import { RouterProvider, createAppRootRoute, createRouter, routeHref, routeMap, routerOptions, useRouteContext, useRouter, useRouterState } from "@stealthscale/provider-router";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useState, useSyncExternalStore } from "react";
 import { useTranslation } from "@stealthscale/provider-i18n";
 import { Stack } from "@stealthscale/component-layout";
-import { AppShell, FloatingPanel } from "@stealthscale/component-screen";
+import { FloatingPanel } from "@stealthscale/component-screen";
 import { Field, Fieldset, NativeSelect, SegmentGroup, Switch } from "@stealthscale/component-forms";
 import { createRoot } from "react-dom/client";
 import { Shell, useThemeChoice } from "@stealthscale/provider-shell";
@@ -113,6 +114,34 @@ function standaloneTransport(product, modes) {
 	};
 }
 //#endregion
+//#region src/standalone/start.ts
+/**
+* Reads what the standalone page starts from: the address it opens at, and the flags the panel
+* offers.
+*/
+/**
+* Returns the address the standalone page opens at: the plugin's first menu entry, else its first
+* route that a sample or an empty path fills. Undefined where the plugin has neither.
+*
+* @param product - The standalone product, whose id is the plugin's.
+* @param routes - The router's map.
+*/
+function startOf(product, routes) {
+	const filled = product.routes.filter(({ plugin }) => plugin === product.productId).filter(({ path, sample }) => sample !== void 0 || !path.includes("$"));
+	const [start] = [...filled.filter(({ navigation }) => navigation !== void 0), ...filled];
+	return start === void 0 ? void 0 : routeHref(routes, { id: start.id }, start.sample);
+}
+/**
+* Returns every flag the installed plugins' contracts declare, in install order, with the variants
+* of each experiment.
+*/
+function flagsOf(product) {
+	return Object.values(product.manifests).flatMap(({ contract }) => Object.values(contract.featureFlags).map(({ id, variants }) => ({
+		id,
+		variants: variants?.map(String)
+	})));
+}
+//#endregion
 //#region src/standalone/hosted.ts
 /**
 * Creates the host of the standalone page.
@@ -128,16 +157,18 @@ function standaloneTransport(product, modes) {
 function standaloneHosted(product, glyphs, store = localStore()) {
 	const sources = standaloneSources(product);
 	const modes = operationModes();
+	const host = createHost({
+		access: sources.access,
+		data: { transport: standaloneTransport(product, modes) },
+		flags: sources.flags,
+		glyphs,
+		product,
+		session: sources.session,
+		store
+	});
 	return {
-		host: createHost({
-			access: sources.access,
-			data: { transport: standaloneTransport(product, modes) },
-			flags: sources.flags,
-			glyphs,
-			product,
-			session: sources.session,
-			store
-		}),
+		flags: flagsOf(product),
+		host,
 		modes,
 		sources
 	};
@@ -150,7 +181,7 @@ function standaloneHosted(product, glyphs, store = localStore()) {
 * @param props - The legend and the controls.
 * @returns The fieldset.
 */
-function Group(t0) {
+function Group$1(t0) {
 	const $ = c(7);
 	const { children, title } = t0;
 	let t1;
@@ -279,7 +310,7 @@ function AccessControls() {
 	} else t4 = $[12];
 	let t5;
 	if ($[13] !== t0 || $[14] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Group, {
+		t5 = /* @__PURE__ */ jsx(Group$1, {
 			title: t0,
 			children: t4
 		});
@@ -321,7 +352,7 @@ function Picker(t0) {
 	} else t2 = $[3];
 	let t3;
 	if ($[4] !== choices) {
-		t3 = choices.map(_temp$7);
+		t3 = choices.map(_temp$5);
 		$[4] = choices;
 		$[5] = t3;
 	} else t3 = $[5];
@@ -365,7 +396,7 @@ function Picker(t0) {
 	} else t7 = $[17];
 	return t7;
 }
-function _temp$7(choice) {
+function _temp$5(choice) {
 	return /* @__PURE__ */ jsx("option", {
 		value: choice.value,
 		children: choice.label
@@ -392,16 +423,16 @@ const WORDS = {
 	unauthenticated: "standalone.panel.data.modes.unauthenticated"
 };
 /**
-* Renders one picker per declared query and mutation, named by its qualified id, which sets how the
-* page's transport serves its operation.
+* Renders one picker per declared query and mutation, or nothing when the product declares neither.
 *
 * @remarks
-*   A query's pick resets every query of the page's data client and invalidates the router, so a
-*   page on screen loads again from nothing in the new mode: a refusal shows the page's error, a
+*   Each picker is named by the operation's qualified id and sets how the page's transport serves
+*   it. A query's pick resets every query of the page's data client and invalidates the router, so
+*   a page on screen loads again from nothing in the new mode: a refusal shows the page's error, a
 *   delay its pending state, and a page that failed renders again. An invalidation of the queries
 *   alone would keep the cached data through a refetch that fails or waits. A mutation runs in its
 *   mode the next time a person sends it, and its pick loads nothing again.
-* @returns The group.
+* @returns The group, or null when the product declares no query and no mutation.
 */
 function DataControls() {
 	const $ = c(22);
@@ -428,27 +459,29 @@ function DataControls() {
 	const choices = t1;
 	let t2;
 	if ($[3] !== queries) {
-		t2 = new Set(queries.map(_temp$6));
+		t2 = new Set(queries.map(_temp$4));
 		$[3] = queries;
 		$[4] = t2;
 	} else t2 = $[4];
 	const loaded = t2;
 	let t3;
-	if ($[5] !== t) {
-		t3 = t("standalone.panel.data.title");
-		$[5] = t;
-		$[6] = t3;
-	} else t3 = $[6];
+	if ($[5] !== mutations || $[6] !== queries) {
+		t3 = [...queries, ...mutations];
+		$[5] = mutations;
+		$[6] = queries;
+		$[7] = t3;
+	} else t3 = $[7];
+	const operations = t3;
+	if (operations.length === 0) return null;
 	let t4;
-	if ($[7] !== mutations || $[8] !== queries) {
-		t4 = [...queries, ...mutations];
-		$[7] = mutations;
-		$[8] = queries;
+	if ($[8] !== t) {
+		t4 = t("standalone.panel.data.title");
+		$[8] = t;
 		$[9] = t4;
 	} else t4 = $[9];
 	let t5;
-	if ($[10] !== choices || $[11] !== current || $[12] !== glyphs || $[13] !== host || $[14] !== loaded || $[15] !== modes || $[16] !== router || $[17] !== t4) {
-		t5 = t4.map((t6) => {
+	if ($[10] !== choices || $[11] !== current || $[12] !== glyphs || $[13] !== host || $[14] !== loaded || $[15] !== modes || $[16] !== operations || $[17] !== router) {
+		t5 = operations.map((t6) => {
 			const { id, operation: operation_0 } = t6;
 			return /* @__PURE__ */ jsx(Picker, {
 				choices,
@@ -469,23 +502,23 @@ function DataControls() {
 		$[13] = host;
 		$[14] = loaded;
 		$[15] = modes;
-		$[16] = router;
-		$[17] = t4;
+		$[16] = operations;
+		$[17] = router;
 		$[18] = t5;
 	} else t5 = $[18];
 	let t6;
-	if ($[19] !== t3 || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Group, {
-			title: t3,
+	if ($[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Group$1, {
+			title: t4,
 			children: t5
 		});
-		$[19] = t3;
+		$[19] = t4;
 		$[20] = t5;
 		$[21] = t6;
 	} else t6 = $[21];
 	return t6;
 }
-function _temp$6(t0) {
+function _temp$4(t0) {
 	const { operation } = t0;
 	return operation.id;
 }
@@ -495,46 +528,49 @@ function _temp$6(t0) {
 * Renders a small switch that spreads across the panel, its words at the start and its control at
 * the end.
 *
-* @param props - The state, the words and the callback a press calls.
+* @param props - The state, whether it takes a press, the words and the callback a press calls.
 * @returns The switch.
 */
 function Toggle(t0) {
-	const $ = c(9);
-	const { checked, label, onCheckedChange } = t0;
-	let t1;
+	const $ = c(10);
+	const { checked, disabled: t1, label, onCheckedChange } = t0;
+	const disabled = t1 === void 0 ? false : t1;
+	let t2;
 	if ($[0] !== onCheckedChange) {
-		t1 = (details) => {
+		t2 = (details) => {
 			onCheckedChange(details.checked);
 		};
 		$[0] = onCheckedChange;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
 	if ($[2] !== label) {
-		t2 = /* @__PURE__ */ jsx(Switch.Label, { children: label });
+		t3 = /* @__PURE__ */ jsx(Switch.Label, { children: label });
 		$[2] = label;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
-		$[4] = t3;
-	} else t3 = $[4];
+		$[3] = t3;
+	} else t3 = $[3];
 	let t4;
-	if ($[5] !== checked || $[6] !== t1 || $[7] !== t2) {
-		t4 = /* @__PURE__ */ jsxs(Switch.Root, {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== checked || $[6] !== disabled || $[7] !== t2 || $[8] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(Switch.Root, {
 			checked,
-			onCheckedChange: t1,
+			disabled,
+			onCheckedChange: t2,
 			size: "sm",
 			spread: true,
-			children: [t2, t3]
+			children: [t3, t4]
 		});
 		$[5] = checked;
-		$[6] = t1;
+		$[6] = disabled;
 		$[7] = t2;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 }
 //#endregion
 //#region src/standalone/flag-controls.tsx
@@ -543,81 +579,45 @@ function Toggle(t0) {
 * experiment.
 */
 /**
-* Renders one control per flag the installed plugins declare, named by its qualified id, which
-* overrides the flag in this tab.
+* Renders one control per flag the installed plugins declare, or nothing when they declare none.
 *
 * @remarks
-*   An override replaces the value every condition, menu and `useFeatureFlag` on the page reads, as
-*   the flag store's overrides do in a product outside production.
-* @returns The group.
+*   Each control is named by the flag's qualified id and overrides the flag in this tab. An
+*   override replaces the value every condition, menu and `useFeatureFlag` on the page reads, as
+*   the flag store's overrides do in a product outside production. The React Compiler is disabled
+*   for this component. Each control reads its flag from the store, which changes outside React,
+*   and a memoized render would keep the controls of an earlier change.
+* @returns The group, or null when no plugin declares a flag.
 */
 function FlagControls() {
-	const $ = c(13);
+	"use no memo";
 	const { flags: declared, glyphs } = useStandalone();
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = { strict: false };
-		$[0] = t0;
-	} else t0 = $[0];
-	const { host } = useRouteContext(t0);
+	const { host } = useRouteContext({ strict: false });
 	const { flags } = host.stores;
 	const { t } = useTranslation("host");
 	useSyncExternalStore(flags.subscribe, flags.get, flags.get);
-	let t1;
-	if ($[1] !== t) {
-		t1 = t("standalone.panel.flags.title");
-		$[1] = t;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== declared || $[4] !== flags || $[5] !== glyphs) {
-		let t3;
-		if ($[7] !== flags || $[8] !== glyphs) {
-			t3 = (t4) => {
-				const { id, variants } = t4;
-				return variants === void 0 ? /* @__PURE__ */ jsx(Toggle, {
-					checked: flags.read(id) === true,
-					label: id,
-					onCheckedChange: (on) => {
-						flags.override(id, on);
-					}
-				}, id) : /* @__PURE__ */ jsx(Picker, {
-					choices: variants.map(_temp$5),
-					indicator: glyphs.select?.indicator,
-					label: id,
-					onValueChange: (variant_0) => {
-						flags.override(id, variant_0);
-					},
-					value: String(flags.read(id))
-				}, id);
-			};
-			$[7] = flags;
-			$[8] = glyphs;
-			$[9] = t3;
-		} else t3 = $[9];
-		t2 = declared.map(t3);
-		$[3] = declared;
-		$[4] = flags;
-		$[5] = glyphs;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[10] !== t1 || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Group, {
-			title: t1,
-			children: t2
-		});
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	return t3;
-}
-function _temp$5(variant) {
-	return {
-		label: variant,
-		value: variant
-	};
+	if (declared.length === 0) return null;
+	return /* @__PURE__ */ jsx(Group$1, {
+		title: t("standalone.panel.flags.title"),
+		children: declared.map(({ id, variants }) => variants === void 0 ? /* @__PURE__ */ jsx(Toggle, {
+			checked: flags.read(id) === true,
+			label: id,
+			onCheckedChange: (on) => {
+				flags.override(id, on);
+			}
+		}, id) : /* @__PURE__ */ jsx(Picker, {
+			choices: variants.map((variant) => ({
+				label: variant,
+				value: variant
+			})),
+			indicator: glyphs.select?.indicator,
+			label: id,
+			onValueChange: (variant) => {
+				flags.override(id, variant);
+			},
+			value: String(flags.read(id))
+		}, id))
+	});
 }
 //#endregion
 //#region src/standalone/page-controls.tsx
@@ -636,7 +636,7 @@ function PageControls() {
 	const router = useRouter();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = { select: _temp$4 };
+		t0 = { select: _temp$3 };
 		$[0] = t0;
 	} else t0 = $[0];
 	const pathname = useRouterState(t0);
@@ -713,7 +713,7 @@ function PageControls() {
 	} else t6 = $[18];
 	return t6;
 }
-function _temp$4(state) {
+function _temp$3(state) {
 	return state.location.pathname;
 }
 //#endregion
@@ -727,67 +727,36 @@ function _temp$4(state) {
 * @remarks
 *   The standalone product's id is the plugin's. The first switch writes the person's switch, as
 *   the Plugins page does. The second overrides the kill switch in this tab, so the plugin's pages
-*   turn not found and its contributions leave the page.
+*   turn not found and its contributions leave the page. The React Compiler is disabled for this
+*   component. The kill switch's control reads the flag store, which changes outside React, and a
+*   memoized render would keep the control of an earlier change.
 * @returns The group.
 */
 function PluginControls() {
-	const $ = c(9);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = { strict: false };
-		$[0] = t0;
-	} else t0 = $[0];
-	const { host } = useRouteContext(t0);
+	"use no memo";
+	const { host } = useRouteContext({ strict: false });
 	const { switches } = internalsOf(host);
 	const { flags } = host.stores;
 	const { t } = useTranslation("host");
 	const { plugins, productId } = useResolvedProduct();
 	const switched = useSyncExternalStore(switches.subscribe, switches.get, switches.get);
 	useSyncExternalStore(flags.subscribe, flags.get, flags.get);
-	const T0 = Group;
-	let t1;
-	if ($[1] !== t) {
-		t1 = t("standalone.panel.plugin.title");
-		$[1] = t;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== productId) {
-		t2 = (t3) => {
-			const { id } = t3;
-			return id === productId;
-		};
-		$[3] = productId;
-		$[4] = t2;
-	} else t2 = $[4];
-	const t4 = plugins.filter(t2).map((t3) => {
-		const { id: id_0, killSwitch } = t3;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Toggle, {
-			checked: switched[id_0] !== false,
+	return /* @__PURE__ */ jsx(Group$1, {
+		title: t("standalone.panel.plugin.title"),
+		children: plugins.filter(({ id }) => id === productId).map(({ id, killSwitch }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Toggle, {
+			checked: switched[id] !== false,
 			label: t("standalone.panel.plugin.switch"),
 			onCheckedChange: (on) => {
-				switches.set(id_0, on);
+				switches.set(id, on);
 			}
 		}), /* @__PURE__ */ jsx(Toggle, {
 			checked: flags.read(killSwitch) !== false,
 			label: t("standalone.panel.plugin.kill"),
-			onCheckedChange: (on_0) => {
-				flags.override(killSwitch, on_0);
+			onCheckedChange: (on) => {
+				flags.override(killSwitch, on);
 			}
-		})] }, id_0);
+		})] }, id))
 	});
-	let t5;
-	if ($[5] !== T0 || $[6] !== t1 || $[7] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
-			title: t1,
-			children: t4
-		});
-		$[5] = T0;
-		$[6] = t1;
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	return t5;
 }
 //#endregion
 //#region src/standalone/session-controls.tsx
@@ -810,16 +779,19 @@ function grantedIn(session, list, id, on) {
 * its qualified id.
 *
 * @remarks
-*   Each switch replaces the session, so every condition, menu and decision on the page follows at
-*   once.
+*   Each switch replaces the session. Every condition, menu and decision on the page reads the new
+*   session at once. Signing out writes `NOBODY`, whose permission and entitlement lists are empty.
+*   Signing in again restores the session the switches showed before. The permission and
+*   entitlement switches take no press while nobody is signed in.
 * @returns The group.
 */
 function SessionControls() {
-	const $ = c(20);
+	const $ = c(21);
 	const { session } = useStandalone();
 	const { t } = useTranslation("host");
 	const { entitlements, permissions } = useResolvedProduct();
 	const current = useSyncExternalStore(session.subscribe, session.read, session.read);
+	const [signedIn, keep] = useState(current);
 	let t0;
 	if ($[0] !== t) {
 		t0 = t("standalone.panel.session.title");
@@ -834,65 +806,68 @@ function SessionControls() {
 		$[3] = t2;
 	} else t2 = $[3];
 	let t3;
-	if ($[4] !== current || $[5] !== session) {
+	if ($[4] !== current || $[5] !== session || $[6] !== signedIn) {
 		t3 = (authenticated) => {
-			session.set({
-				...current,
+			if (!authenticated) keep(current);
+			session.set(authenticated ? {
+				...signedIn,
 				authenticated
-			});
+			} : NOBODY);
 		};
 		$[4] = current;
 		$[5] = session;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[6] = signedIn;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[7] !== current.authenticated || $[8] !== t2 || $[9] !== t3) {
+	if ($[8] !== current.authenticated || $[9] !== t2 || $[10] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Toggle, {
 			checked: t1,
 			label: t2,
 			onCheckedChange: t3
 		});
-		$[7] = current.authenticated;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
+		$[8] = current.authenticated;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
 	let t5;
-	if ($[11] !== current || $[12] !== entitlements || $[13] !== permissions || $[14] !== session) {
-		t5 = [...permissions.map(_temp$3), ...entitlements.map(_temp2$1)].map((t6) => {
+	if ($[12] !== current || $[13] !== entitlements || $[14] !== permissions || $[15] !== session) {
+		t5 = [...permissions.map(_temp$2), ...entitlements.map(_temp2$1)].map((t6) => {
 			const [list, id_1] = t6;
 			return /* @__PURE__ */ jsx(Toggle, {
 				checked: current[list].includes(id_1),
+				disabled: !current.authenticated,
 				label: id_1,
 				onCheckedChange: (on) => {
 					session.set(grantedIn(current, list, id_1, on));
 				}
 			}, id_1);
 		});
-		$[11] = current;
-		$[12] = entitlements;
-		$[13] = permissions;
-		$[14] = session;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[12] = current;
+		$[13] = entitlements;
+		$[14] = permissions;
+		$[15] = session;
+		$[16] = t5;
+	} else t5 = $[16];
 	let t6;
-	if ($[16] !== t0 || $[17] !== t4 || $[18] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Group, {
+	if ($[17] !== t0 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Group$1, {
 			title: t0,
 			children: [t4, t5]
 		});
-		$[16] = t0;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t6;
-	} else t6 = $[19];
+		$[17] = t0;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
 	return t6;
 }
 function _temp2$1(t0) {
 	const { id: id_0 } = t0;
 	return ["entitlements", id_0];
 }
-function _temp$3(t0) {
+function _temp$2(t0) {
 	const { id } = t0;
 	return ["permissions", id];
 }
@@ -940,7 +915,7 @@ function ShellControls() {
 	let t1;
 	if ($[2] !== glyphs || $[3] !== locale || $[4] !== locales || $[5] !== setLocale || $[6] !== t) {
 		t1 = locales.length > 1 ? /* @__PURE__ */ jsx(Picker, {
-			choices: locales.map(_temp$2),
+			choices: locales.map(_temp$1),
 			indicator: glyphs.select?.indicator,
 			label: t("standalone.panel.shell.language"),
 			onValueChange: setLocale,
@@ -1013,7 +988,7 @@ function ShellControls() {
 	} else t6 = $[24];
 	let t7;
 	if ($[25] !== t0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Group, {
+		t7 = /* @__PURE__ */ jsxs(Group$1, {
 			title: t0,
 			children: [
 				t1,
@@ -1035,7 +1010,7 @@ function _temp2(one_0) {
 		value: one_0
 	};
 }
-function _temp$2(one) {
+function _temp$1(one) {
 	return {
 		label: one,
 		value: one
@@ -1116,7 +1091,7 @@ function StandalonePanel() {
 	const $ = c(22);
 	const { glyphs } = useStandalone();
 	const { t } = useTranslation("host");
-	const [t0] = useState(_temp$1);
+	const [t0] = useState(_temp);
 	const { position, size } = t0;
 	let t1;
 	if ($[0] !== t) {
@@ -1198,143 +1173,36 @@ function StandalonePanel() {
 	} else t10 = $[21];
 	return t10;
 }
-function _temp$1() {
+function _temp() {
 	return placementOf(window.innerWidth, window.innerHeight);
 }
 //#endregion
 //#region src/standalone/frame.tsx
 /**
-* Renders the shell with a bar, a column and a band for each region a contribution fills, the page
-* in the main region, and the panel through `Into`.
+* Renders the frame a product renders, and the development panel through `Into`.
 *
 * @remarks
-*   A region nobody fills renders no part of the shell, so an empty aside takes no column, as a
-*   product's frame leaves it out.
-* @returns The host's root around the shell.
+*   A standalone product states no frame options, so the page shows the plugin in the `sidebar`
+*   layout with every region the installed plugins fill, as a product that states none shows it.
+*   The panel renders in the `overlay` region, after the shell.
+* @returns The product's frame and the panel's contribution.
 */
 function StandaloneFrame() {
-	const $ = c(22);
-	const { slots } = hostContract;
-	const header = [
-		useSlot(slots.brand),
-		useSlot(slots.header),
-		useSlot(slots.userMenu)
-	].some(_temp);
-	const navigation = useSlot(slots.navigation).filled;
-	const aside = useSlot(slots.aside).filled;
-	const footer = useSlot(slots.footer).filled;
-	const status = useSlot(slots.status).filled;
+	const $ = c(2);
 	let t0;
-	if ($[0] !== header) {
-		t0 = header ? /* @__PURE__ */ jsxs(AppShell.Header, { children: [
-			/* @__PURE__ */ jsx(Slot, { slot: slots.brand }),
-			/* @__PURE__ */ jsx(Slot, { slot: slots.header }),
-			/* @__PURE__ */ jsx(Slot, { slot: slots.userMenu })
-		] }) : null;
-		$[0] = header;
-		$[1] = t0;
-	} else t0 = $[1];
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ProductFrame, {});
+		$[0] = t0;
+	} else t0 = $[0];
 	let t1;
-	if ($[2] !== navigation) {
-		t1 = navigation ? /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__PURE__ */ jsx(Slot, { slot: slots.navigation }) }) : null;
-		$[2] = navigation;
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsx(HostContent, {}) });
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== aside) {
-		t3 = aside ? /* @__PURE__ */ jsx(AppShell.Aside, { children: /* @__PURE__ */ jsx(Slot, { slot: slots.aside }) }) : null;
-		$[5] = aside;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== t1 || $[8] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(AppShell.Body, { children: [
-			t1,
-			t2,
-			t3
-		] });
-		$[7] = t1;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== footer) {
-		t5 = footer ? /* @__PURE__ */ jsx(AppShell.Footer, { children: /* @__PURE__ */ jsx(Slot, { slot: slots.footer }) }) : null;
-		$[10] = footer;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== status) {
-		t6 = status ? /* @__PURE__ */ jsx(AppShell.Status, { children: /* @__PURE__ */ jsx(Slot, { slot: slots.status }) }) : null;
-		$[12] = status;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== t0 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(AppShell.Root, { children: [
-			t0,
-			t4,
-			t5,
-			t6
-		] });
-		$[14] = t0;
-		$[15] = t4;
-		$[16] = t5;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Into, {
-			slot: slots.overlay,
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Fragment, { children: [t0, /* @__PURE__ */ jsx(Into, {
+			slot: hostContract.slots.overlay,
 			children: /* @__PURE__ */ jsx(StandalonePanel, {})
-		});
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== t7) {
-		t9 = /* @__PURE__ */ jsxs(HostRoot, { children: [t7, t8] });
-		$[20] = t7;
-		$[21] = t9;
-	} else t9 = $[21];
-	return t9;
-}
-function _temp(t0) {
-	const { filled } = t0;
-	return filled;
-}
-//#endregion
-//#region src/standalone/start.ts
-/**
-* Reads what the standalone page starts from: the address it opens at, and the flags the panel
-* offers.
-*/
-/**
-* Returns the address the standalone page opens at: the plugin's first menu entry, else its first
-* route that a sample or an empty path fills. Undefined where the plugin has neither.
-*
-* @param product - The standalone product, whose id is the plugin's.
-* @param routes - The router's map.
-*/
-function startOf(product, routes) {
-	const filled = product.routes.filter(({ plugin }) => plugin === product.productId).filter(({ path, sample }) => sample !== void 0 || !path.includes("$"));
-	const [start] = [...filled.filter(({ navigation }) => navigation !== void 0), ...filled];
-	return start === void 0 ? void 0 : routeHref(routes, { id: start.id }, start.sample);
-}
-/**
-* Returns every flag the installed plugins' contracts declare, in install order, with the variants
-* of each experiment.
-*/
-function flagsOf(product) {
-	return Object.values(product.manifests).flatMap(({ contract }) => Object.values(contract.featureFlags).map(({ id, variants }) => ({
-		id,
-		variants: variants?.map(String)
-	})));
+		})] });
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 }
 //#endregion
 //#region src/standalone/router.ts
@@ -1387,6 +1255,9 @@ function standaloneRouter(host, product) {
 /**
 * Renders the standalone page once the host is ready.
 *
+* @remarks
+*   The root takes the host's `onCaughtError`, so a page that throws the router's not-found writes
+*   nothing to the console.
 * @param options - The product, the catalogues, the glyphs, the locales, the themes and the
 *   element.
 * @returns The React root the page renders in, which `unmount` takes down.
@@ -1394,18 +1265,18 @@ function standaloneRouter(host, product) {
 */
 async function renderStandalone({ catalogues, element = document.querySelector("#root"), glyphs = {}, locales, product, themes }) {
 	if (element === null) throw new Error("The standalone page renders into the element with the id root, and the document has none.");
-	const { host, modes, sources } = standaloneHosted(product, glyphs);
+	const { flags, host, modes, sources } = standaloneHosted(product, glyphs);
 	const { router, routes } = standaloneRouter(host, product);
 	const state = {
 		access: sources.access,
-		flags: flagsOf(product),
+		flags,
 		glyphs,
 		modes,
 		routes,
 		session: sources.session
 	};
 	await host.ready();
-	const root = createRoot(element);
+	const root = createRoot(element, { onCaughtError });
 	root.render(/* @__PURE__ */ jsx(StandaloneContext, {
 		value: state,
 		children: /* @__PURE__ */ jsx(Shell, {