@stealthscale/sdk-host 0.1.0

package/dist/standalone/app.js

@@ -0,0 +1,1426 @@
+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 { 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 { 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 { 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 { Field, Fieldset, NativeSelect, SegmentGroup, Switch } from "@stealthscale/component-forms";
+import { createRoot } from "react-dom/client";
+import { Shell, useThemeChoice } from "@stealthscale/provider-shell";
+import { useColorMode } from "@stealthscale/provider-color-mode";
+import { useLocale } from "@stealthscale/provider-locale";
+//#region src/standalone/context.ts
+/**
+* Provides the development panel with the standalone page's sources, its operation modes, its
+* declared flags, the router's map and the page's glyphs.
+*/
+/**
+* Provides the standalone page's state to the panel. The value is undefined outside the page.
+*/
+const StandaloneContext = createContext(void 0);
+/**
+* Returns the standalone page's state.
+*
+* @throws {@link Error} Outside the standalone page.
+*/
+function useStandalone() {
+	const state = use(StandaloneContext);
+	if (state === void 0) throw new Error("The development panel renders inside the standalone page alone.");
+	return state;
+}
+//#endregion
+//#region src/standalone/data.ts
+/**
+* Serves a standalone product's operations as the development panel sets each one: from its
+* sample, from its sample after a delay, or with a refusal of one kind.
+*/
+/**
+* Lists every mode, in the order the panel offers them.
+*/
+const MODES$1 = [
+	"sample",
+	"delayed",
+	"conflict",
+	"forbidden",
+	"invalid",
+	"network",
+	"not-found",
+	"server",
+	"unauthenticated"
+];
+/**
+* The milliseconds a delayed operation waits before it serves its sample.
+*/
+const DELAY = 2e3;
+/**
+* Returns the operation modes of one page, every operation at its sample until the panel sets
+* another mode.
+*/
+function operationModes() {
+	let modes = {};
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => modes,
+		set: (id, mode) => {
+			modes = {
+				...modes,
+				[id]: mode
+			};
+			for (const listener of listeners) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/**
+* Returns a transport that serves each declared operation in the mode the panel set for it when it
+* runs.
+*
+* @remarks
+*   A delayed operation serves its sample after `DELAY`. A refused one rejects with a `DataError`
+*   of the mode's kind, so the page renders the error state the kind leads to. A subscription
+*   streams nothing, as the sampled transport's does.
+* @param product - The declared queries and mutations, whose samples the transport serves.
+* @param modes - The mode of each operation.
+*/
+function standaloneTransport(product, modes) {
+	const sampled = sampledFrom(product);
+	return {
+		run: async (operation, variables, options) => {
+			const mode = modes.get()[operation.id] ?? "sample";
+			if (mode === "delayed") await new Promise((resolve) => {
+				setTimeout(resolve, DELAY);
+			});
+			else if (mode !== "sample") throw new DataError({
+				kind: mode,
+				message: `The development panel refuses ${operation.id} as ${mode}.`,
+				operation: operation.id
+			});
+			return sampled.run(operation, variables, options);
+		},
+		subscribe: (operation, variables, next, signal) => sampled.subscribe(operation, variables, next, signal)
+	};
+}
+//#endregion
+//#region src/standalone/hosted.ts
+/**
+* Creates the host of the standalone page.
+*
+* @remarks
+*   The page keeps a person's switches, settings and placements in local storage by default, so
+*   they outlast a reload as they do in a product. The session, the decisions, the flag overrides
+*   and the operations' modes start afresh on every load.
+* @param product - The standalone product, from `virtual:product`.
+* @param glyphs - The glyphs the settings sections' forms render.
+* @param store - The store of a person's switches, settings and placements.
+*/
+function standaloneHosted(product, glyphs, store = localStore()) {
+	const sources = standaloneSources(product);
+	const modes = operationModes();
+	return {
+		host: createHost({
+			access: sources.access,
+			data: { transport: standaloneTransport(product, modes) },
+			flags: sources.flags,
+			glyphs,
+			product,
+			session: sources.session,
+			store
+		}),
+		modes,
+		sources
+	};
+}
+//#endregion
+//#region src/standalone/group.tsx
+/**
+* Renders a small fieldset with its legend and its controls stacked under it.
+*
+* @param props - The legend and the controls.
+* @returns The fieldset.
+*/
+function Group(t0) {
+	const $ = c(7);
+	const { children, title } = t0;
+	let t1;
+	if ($[0] !== title) {
+		t1 = /* @__PURE__ */ jsx(Fieldset.Legend, { children: title });
+		$[0] = title;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx(Stack, {
+			gap: "sm",
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fieldset.Root, {
+			size: "sm",
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/standalone/access-controls.tsx
+/**
+* Renders the development panel's control of the decisions on single resources: every check
+* allowed, every check denied, or every check pending.
+*/
+/**
+* Lists the decisions in the order the panel offers them, each with the key of its words and the
+* call that applies it.
+*/
+const DECISIONS = [
+	{
+		apply: (access) => {
+			access.allow();
+		},
+		key: "standalone.panel.access.allow",
+		value: "allow"
+	},
+	{
+		apply: (access) => {
+			access.deny();
+		},
+		key: "standalone.panel.access.deny",
+		value: "deny"
+	},
+	{
+		apply: (access) => {
+			access.pending();
+		},
+		key: "standalone.panel.access.pending",
+		value: "pending"
+	}
+];
+/**
+* Renders a segment group of the three decisions, which applies the one a person picks to every
+* check from then on.
+*
+* @remarks
+*   The access source tells the host's access store, which drops the decisions it knew and asks
+*   again, so every `useAccess` on the page follows.
+* @returns The group.
+*/
+function AccessControls() {
+	const $ = c(16);
+	const { access } = useStandalone();
+	const { t } = useTranslation("host");
+	const [decision, setDecision] = useState("allow");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("standalone.panel.access.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("standalone.panel.access.title");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== access) {
+		t2 = (t3) => {
+			const { value } = t3;
+			const picked = DECISIONS.find((one) => one.value === value);
+			picked.apply(access);
+			setDecision(picked.value);
+		};
+		$[4] = access;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = DECISIONS.map((t4) => {
+			const { key, value: value_0 } = t4;
+			return /* @__PURE__ */ jsx(SegmentGroup.Item, {
+				value: value_0,
+				children: /* @__PURE__ */ jsx(SegmentGroup.ItemText, { children: t(key) })
+			}, value_0);
+		});
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== decision || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(SegmentGroup.Root, {
+			"aria-label": t1,
+			onValueChange: t2,
+			size: "sm",
+			value: decision,
+			children: t3
+		});
+		$[8] = decision;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t0 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Group, {
+			title: t0,
+			children: t4
+		});
+		$[13] = t0;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/standalone/picker.tsx
+/**
+* Renders a small native select in a field its label names.
+*
+* @remarks
+*   The panel picks with a native select, because a listbox opened inside a floating panel stacks
+*   under the panel. The select states its size itself: the stylesheet compiler emits the rules of
+*   the sizes it reads in the source, and a size the select takes from the field at run time has
+*   none.
+* @param props - The choices, the value, the words, the glyph and the callback a pick calls.
+* @returns The field.
+*/
+function Picker(t0) {
+	const $ = c(18);
+	const { choices, indicator, label, onValueChange, value } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, { children: label });
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== onValueChange) {
+		t2 = (event) => {
+			onValueChange(event.currentTarget.value);
+		};
+		$[2] = onValueChange;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== choices) {
+		t3 = choices.map(_temp$7);
+		$[4] = choices;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t2 || $[7] !== t3 || $[8] !== value) {
+		t4 = /* @__PURE__ */ jsx(NativeSelect.Field, {
+			onChange: t2,
+			value,
+			children: t3
+		});
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = value;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== indicator) {
+		t5 = indicator === void 0 ? null : /* @__PURE__ */ jsx(NativeSelect.Indicator, { children: indicator });
+		$[10] = indicator;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(NativeSelect.Root, {
+			size: "sm",
+			children: [t4, t5]
+		});
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t1 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Field.Root, {
+			size: "sm",
+			children: [t1, t6]
+		});
+		$[15] = t1;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+function _temp$7(choice) {
+	return /* @__PURE__ */ jsx("option", {
+		value: choice.value,
+		children: choice.label
+	}, choice.value);
+}
+//#endregion
+//#region src/standalone/data-controls.tsx
+/**
+* Renders the development panel's operation controls: a picker per declared query and mutation of
+* how the page's transport serves it.
+*/
+/**
+* Maps each mode to the key of its words.
+*/
+const WORDS = {
+	conflict: "standalone.panel.data.modes.conflict",
+	delayed: "standalone.panel.data.modes.delayed",
+	forbidden: "standalone.panel.data.modes.forbidden",
+	invalid: "standalone.panel.data.modes.invalid",
+	network: "standalone.panel.data.modes.network",
+	"not-found": "standalone.panel.data.modes.not-found",
+	sample: "standalone.panel.data.modes.sample",
+	server: "standalone.panel.data.modes.server",
+	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.
+*
+* @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
+*   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.
+*/
+function DataControls() {
+	const $ = c(22);
+	const { glyphs, modes } = useStandalone();
+	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 { t } = useTranslation("host");
+	const { mutations, queries } = useResolvedProduct();
+	const current = useSyncExternalStore(modes.subscribe, modes.get, modes.get);
+	let t1;
+	if ($[1] !== t) {
+		t1 = MODES$1.map((mode) => ({
+			label: t(WORDS[mode]),
+			value: mode
+		}));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	const choices = t1;
+	let t2;
+	if ($[3] !== queries) {
+		t2 = new Set(queries.map(_temp$6));
+		$[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];
+	let t4;
+	if ($[7] !== mutations || $[8] !== queries) {
+		t4 = [...queries, ...mutations];
+		$[7] = mutations;
+		$[8] = queries;
+		$[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) => {
+			const { id, operation: operation_0 } = t6;
+			return /* @__PURE__ */ jsx(Picker, {
+				choices,
+				indicator: glyphs.select?.indicator,
+				label: id,
+				onValueChange: (value) => {
+					modes.set(operation_0.id, value);
+					if (!loaded.has(operation_0.id)) return;
+					host.data.resetQueries();
+					router.invalidate();
+				},
+				value: current[operation_0.id] ?? "sample"
+			}, id);
+		});
+		$[10] = choices;
+		$[11] = current;
+		$[12] = glyphs;
+		$[13] = host;
+		$[14] = loaded;
+		$[15] = modes;
+		$[16] = router;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== t3 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Group, {
+			title: t3,
+			children: t5
+		});
+		$[19] = t3;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+function _temp$6(t0) {
+	const { operation } = t0;
+	return operation.id;
+}
+//#endregion
+//#region src/standalone/toggle.tsx
+/**
+* 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.
+* @returns The switch.
+*/
+function Toggle(t0) {
+	const $ = c(9);
+	const { checked, label, onCheckedChange } = t0;
+	let t1;
+	if ($[0] !== onCheckedChange) {
+		t1 = (details) => {
+			onCheckedChange(details.checked);
+		};
+		$[0] = onCheckedChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== label) {
+		t2 = /* @__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];
+	let t4;
+	if ($[5] !== checked || $[6] !== t1 || $[7] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(Switch.Root, {
+			checked,
+			onCheckedChange: t1,
+			size: "sm",
+			spread: true,
+			children: [t2, t3]
+		});
+		$[5] = checked;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+//#endregion
+//#region src/standalone/flag-controls.tsx
+/**
+* Renders the development panel's flag controls: a switch per boolean flag, and a picker per
+* experiment.
+*/
+/**
+* Renders one control per flag the installed plugins declare, named by its qualified id, which
+* overrides the flag in this tab.
+*
+* @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.
+*/
+function FlagControls() {
+	const $ = c(13);
+	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 { 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
+	};
+}
+//#endregion
+//#region src/standalone/page-controls.tsx
+/**
+* Renders a picker of the routes in the router's map that a sample or an empty path fills, each
+* named by its qualified id, which opens the route a person picks.
+*
+* @remarks
+*   The picker shows the address the page is at, and lists it first where no route's sample leads
+*   there, such as a page a link opened with other parameters.
+* @returns The field.
+*/
+function PageControls() {
+	const $ = c(19);
+	const { glyphs, routes } = useStandalone();
+	const router = useRouter();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp$4 };
+		$[0] = t0;
+	} else t0 = $[0];
+	const pathname = useRouterState(t0);
+	const { t } = useTranslation("host");
+	const t1 = useResolvedProduct();
+	let t2;
+	if ($[1] !== pathname || $[2] !== routes || $[3] !== t1.routes) {
+		let t3;
+		if ($[5] !== routes) {
+			t3 = (t4) => {
+				const { id, path, sample } = t4;
+				return routes.has(id) && (sample !== void 0 || !path.includes("$"));
+			};
+			$[5] = routes;
+			$[6] = t3;
+		} else t3 = $[6];
+		const declared = t1.routes.filter(t3);
+		let t4;
+		if ($[7] !== routes) {
+			t4 = (t5) => {
+				const { id: id_0, sample: sample_0 } = t5;
+				return {
+					label: id_0,
+					value: routeHref(routes, { id: id_0 }, sample_0)
+				};
+			};
+			$[7] = routes;
+			$[8] = t4;
+		} else t4 = $[8];
+		const choices = declared.map(t4);
+		t2 = choices.some((t5) => {
+			const { value } = t5;
+			return value === pathname;
+		}) ? choices : [{
+			label: pathname,
+			value: pathname
+		}, ...choices];
+		$[1] = pathname;
+		$[2] = routes;
+		$[3] = t1.routes;
+		$[4] = t2;
+	} else t2 = $[4];
+	const listed = t2;
+	const t3 = glyphs.select?.indicator;
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("standalone.panel.page.route");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== router) {
+		t5 = (to) => {
+			router.navigate({ to });
+		};
+		$[11] = router;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== listed || $[14] !== pathname || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Picker, {
+			choices: listed,
+			indicator: t3,
+			label: t4,
+			onValueChange: t5,
+			value: pathname
+		});
+		$[13] = listed;
+		$[14] = pathname;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+function _temp$4(state) {
+	return state.location.pathname;
+}
+//#endregion
+//#region src/standalone/plugin-controls.tsx
+/**
+* Renders the development panel's plugin controls: the plugin's switch, and its kill switch.
+*/
+/**
+* Renders the switch of the plugin the standalone product runs, and the switch of its kill switch.
+*
+* @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.
+* @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);
+	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,
+			label: t("standalone.panel.plugin.switch"),
+			onCheckedChange: (on) => {
+				switches.set(id_0, on);
+			}
+		}), /* @__PURE__ */ jsx(Toggle, {
+			checked: flags.read(killSwitch) !== false,
+			label: t("standalone.panel.plugin.kill"),
+			onCheckedChange: (on_0) => {
+				flags.override(killSwitch, on_0);
+			}
+		})] }, id_0);
+	});
+	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
+/**
+* Renders the development panel's session controls: whether somebody is signed in, and each
+* permission and entitlement the session has.
+*/
+/**
+* Returns the session with one id added to one of its lists, or taken out of it.
+*/
+function grantedIn(session, list, id, on) {
+	const others = session[list].filter((one) => one !== id);
+	return {
+		...session,
+		[list]: on ? [...others, id] : others
+	};
+}
+/**
+* Renders a switch for signing in, then one per declared permission and entitlement, each named by
+* its qualified id.
+*
+* @remarks
+*   Each switch replaces the session, so every condition, menu and decision on the page follows at
+*   once.
+* @returns The group.
+*/
+function SessionControls() {
+	const $ = c(20);
+	const { session } = useStandalone();
+	const { t } = useTranslation("host");
+	const { entitlements, permissions } = useResolvedProduct();
+	const current = useSyncExternalStore(session.subscribe, session.read, session.read);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("standalone.panel.session.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = current.authenticated;
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("standalone.panel.session.signedIn");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== current || $[5] !== session) {
+		t3 = (authenticated) => {
+			session.set({
+				...current,
+				authenticated
+			});
+		};
+		$[4] = current;
+		$[5] = session;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== current.authenticated || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Toggle, {
+			checked: t1,
+			label: t2,
+			onCheckedChange: t3
+		});
+		$[7] = current.authenticated;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== current || $[12] !== entitlements || $[13] !== permissions || $[14] !== session) {
+		t5 = [...permissions.map(_temp$3), ...entitlements.map(_temp2$1)].map((t6) => {
+			const [list, id_1] = t6;
+			return /* @__PURE__ */ jsx(Toggle, {
+				checked: current[list].includes(id_1),
+				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];
+	let t6;
+	if ($[16] !== t0 || $[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Group, {
+			title: t0,
+			children: [t4, t5]
+		});
+		$[16] = t0;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+function _temp2$1(t0) {
+	const { id: id_0 } = t0;
+	return ["entitlements", id_0];
+}
+function _temp$3(t0) {
+	const { id } = t0;
+	return ["permissions", id];
+}
+//#endregion
+//#region src/standalone/shell-controls.tsx
+/**
+* Lists the color mode choices in the order the panel offers them, each with the key of its words.
+*/
+const MODES = [
+	{
+		key: "standalone.panel.shell.light",
+		value: "light"
+	},
+	{
+		key: "standalone.panel.shell.dark",
+		value: "dark"
+	},
+	{
+		key: "standalone.panel.shell.system",
+		value: "system"
+	}
+];
+/**
+* Renders a picker of the page's locales and one of its themes, each where the page offers more
+* than one, and a segment group of the color modes.
+*
+* @remarks
+*   Each control calls the shell's own setter, so the choice is remembered as a product's would be.
+*   A locale and a theme are named by their codes, as the page's configuration states them.
+* @returns The group.
+*/
+function ShellControls() {
+	const $ = c(30);
+	const { glyphs } = useStandalone();
+	const { t } = useTranslation("host");
+	const { locale, locales, setLocale } = useLocale();
+	const { setTheme, theme, themes } = useThemeChoice();
+	const { choice, setColorMode } = useColorMode();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("standalone.panel.shell.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	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),
+			indicator: glyphs.select?.indicator,
+			label: t("standalone.panel.shell.language"),
+			onValueChange: setLocale,
+			value: locale
+		}) : null;
+		$[2] = glyphs;
+		$[3] = locale;
+		$[4] = locales;
+		$[5] = setLocale;
+		$[6] = t;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== glyphs || $[9] !== setTheme || $[10] !== t || $[11] !== theme || $[12] !== themes) {
+		t2 = themes.length > 1 ? /* @__PURE__ */ jsx(Picker, {
+			choices: themes.map(_temp2),
+			indicator: glyphs.select?.indicator,
+			label: t("standalone.panel.shell.theme"),
+			onValueChange: setTheme,
+			value: theme
+		}) : null;
+		$[8] = glyphs;
+		$[9] = setTheme;
+		$[10] = t;
+		$[11] = theme;
+		$[12] = themes;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== t) {
+		t3 = t("standalone.panel.shell.colorMode");
+		$[14] = t;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== setColorMode) {
+		t4 = (t5) => {
+			const { value } = t5;
+			setColorMode(value);
+		};
+		$[16] = setColorMode;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== t) {
+		t5 = MODES.map((t6) => {
+			const { key, value: value_0 } = t6;
+			return /* @__PURE__ */ jsx(SegmentGroup.Item, {
+				value: value_0,
+				children: /* @__PURE__ */ jsx(SegmentGroup.ItemText, { children: t(key) })
+			}, value_0);
+		});
+		$[18] = t;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== choice || $[21] !== t3 || $[22] !== t4 || $[23] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SegmentGroup.Root, {
+			"aria-label": t3,
+			onValueChange: t4,
+			size: "sm",
+			value: choice,
+			children: t5
+		});
+		$[20] = choice;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== t0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Group, {
+			title: t0,
+			children: [
+				t1,
+				t2,
+				t6
+			]
+		});
+		$[25] = t0;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
+	return t7;
+}
+function _temp2(one_0) {
+	return {
+		label: one_0,
+		value: one_0
+	};
+}
+function _temp$2(one) {
+	return {
+		label: one,
+		value: one
+	};
+}
+//#endregion
+//#region src/standalone/controls.tsx
+/**
+* Renders the page picker, then the session, the decisions, the flags, the plugin's switches, the
+* operations and the display.
+*
+* @returns The stack of groups.
+*/
+function PanelControls() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [
+				/* @__PURE__ */ jsx(PageControls, {}),
+				/* @__PURE__ */ jsx(SessionControls, {}),
+				/* @__PURE__ */ jsx(AccessControls, {}),
+				/* @__PURE__ */ jsx(FlagControls, {}),
+				/* @__PURE__ */ jsx(PluginControls, {}),
+				/* @__PURE__ */ jsx(DataControls, {}),
+				/* @__PURE__ */ jsx(ShellControls, {})
+			]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+//#region src/standalone/panel.tsx
+/**
+* Renders the development panel: a floating window over the standalone page, open from the start,
+* with every control of the page.
+*/
+/**
+* The panel's width, in CSS pixels.
+*/
+const WIDTH = 352;
+/**
+* The panel's height where the window has room for it, in CSS pixels.
+*/
+const HEIGHT = 560;
+/**
+* The room between the panel and the window's edges, in CSS pixels.
+*/
+const GAP = 16;
+/**
+* Returns the panel's place at the window's bottom-end corner, no taller than the window allows.
+*/
+function placementOf(width, height) {
+	const tall = Math.min(HEIGHT, height - 32);
+	return {
+		position: {
+			x: Math.max(GAP, width - WIDTH - GAP),
+			y: Math.max(GAP, height - tall - GAP)
+		},
+		size: {
+			height: tall,
+			width: WIDTH
+		}
+	};
+}
+/**
+* Renders the panel, which a person drags, resizes and minimizes, and never closes.
+*
+* @remarks
+*   The panel opens at the window's bottom-end corner and is open for the page's life, so it needs
+*   no trigger on the page. It is not modal: the page under it takes the pointer and the keys. Its
+*   stage triggers render where the page's glyphs give theirs.
+* @returns The panel's root.
+*/
+function StandalonePanel() {
+	const $ = c(22);
+	const { glyphs } = useStandalone();
+	const { t } = useTranslation("host");
+	const [t0] = useState(_temp$1);
+	const { position, size } = t0;
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("standalone.panel.title");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(FloatingPanel.DragTrigger, { children: /* @__PURE__ */ jsx(FloatingPanel.Title, { children: t1 }) });
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== glyphs.minimize) {
+		t3 = glyphs.minimize === void 0 ? null : /* @__PURE__ */ jsx(FloatingPanel.StageTrigger, {
+			stage: "minimized",
+			children: glyphs.minimize
+		});
+		$[4] = glyphs.minimize;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== glyphs.restore) {
+		t4 = glyphs.restore === void 0 ? null : /* @__PURE__ */ jsx(FloatingPanel.StageTrigger, {
+			stage: "default",
+			children: glyphs.restore
+		});
+		$[6] = glyphs.restore;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(FloatingPanel.Control, { children: [t3, t4] });
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t2 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(FloatingPanel.Header, { children: [t2, t5] });
+		$[11] = t2;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(FloatingPanel.Body, { children: /* @__PURE__ */ jsx(PanelControls, {}) });
+		t8 = /* @__PURE__ */ jsx(FloatingPanel.ResizeTriggers, {});
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t7 = $[14];
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== t6) {
+		t9 = /* @__PURE__ */ jsx(FloatingPanel.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel.Content, { children: [
+			t6,
+			t7,
+			t8
+		] }) });
+		$[16] = t6;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== position || $[19] !== size || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(FloatingPanel.Root, {
+			defaultPosition: position,
+			defaultSize: size,
+			open: true,
+			children: t9
+		});
+		$[18] = position;
+		$[19] = size;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+}
+function _temp$1() {
+	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`.
+*
+* @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.
+*/
+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;
+	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];
+	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,
+			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)
+	})));
+}
+//#endregion
+//#region src/standalone/router.ts
+/**
+* Builds the standalone page's router: the host's routes under a root that renders the standalone
+* frame, opened at the plugin's start.
+*/
+/**
+* Returns the standalone page's router over the browser's address.
+*
+* @remarks
+*   A page opened at `/` replaces its address with the plugin's start, so the back button does not
+*   return to an empty page. The start is read once the router has given every route its path.
+* @param host - The host the router's context contains.
+* @param product - The standalone product, whose routes the host compiles.
+*/
+function standaloneRouter(host, product) {
+	const root = createAppRootRoute()({
+		component: StandaloneFrame,
+		notFoundComponent: HostNotFound
+	});
+	const tree = root.addChildren([...createHostRoutes(product)(root)]);
+	const routes = routeMap(tree);
+	const router = createRouter({
+		...routerOptions({
+			data: host.data,
+			host,
+			routes
+		}),
+		routeTree: tree
+	});
+	const start = startOf(product, routes);
+	if (start !== void 0 && router.history.location.pathname === "/") router.history.replace(start);
+	return {
+		router,
+		routes
+	};
+}
+//#endregion
+//#region src/standalone/app.tsx
+/**
+* Starts the standalone page of a plugin: the plugin under a real host, the plugins beside it from
+* their contracts alone, and the development panel over the page.
+*
+* @remarks
+*   The standalone layer of `vite-config-product` serves a page whose entry calls
+*   `renderStandalone` with `virtual:product` and `virtual:i18n`. The module renders React, so it
+*   is an entry of its own, apart from `./standalone`, which the build evaluates in Node.
+*/
+/**
+* Renders the standalone page once the host is ready.
+*
+* @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.
+* @throws {@link Error} Where no element is given and the document has none with the id `root`.
+*/
+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 { router, routes } = standaloneRouter(host, product);
+	const state = {
+		access: sources.access,
+		flags: flagsOf(product),
+		glyphs,
+		modes,
+		routes,
+		session: sources.session
+	};
+	await host.ready();
+	const root = createRoot(element);
+	root.render(/* @__PURE__ */ jsx(StandaloneContext, {
+		value: state,
+		children: /* @__PURE__ */ jsx(Shell, {
+			app: product.productId,
+			catalogues,
+			locales,
+			themes,
+			children: /* @__PURE__ */ jsx(HostProvider, {
+				host,
+				router,
+				children: /* @__PURE__ */ jsx(RouterProvider, { router })
+			})
+		})
+	}));
+	return root;
+}
+//#endregion
+export { renderStandalone };