@povio/ui 5.0.0-rc.12 → 5.0.0-rc.14

package/dist/{UIConfigurator-CBU0G6rb.js → UIConfigurator-CjAW1SJY.js}

@@ -3,7 +3,6 @@ import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as Check } from "./check-DYMBkp_Z.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
-import { a as tableHeaderTextDefinition, c as GripVertical, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
 import { t as Info } from "./info-iUmX3uDk.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition, u as Minus } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
@@ -19,6 +18,7 @@ import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "./Heading-nI1_VO
 import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "./Text-D2MPZ3sY.js";
 import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "./Form-DlQcyN1f.js";
 import { t as Checkbox } from "./Checkbox-D3f2Plbc.js";
+import { t as $aa5f63badbfee5df$exports } from "./intlStrings-chfsan9H.js";
 import { a as $928221da08ecbc62$export$dca12b0bb56e4fc, i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CL8Ar4Q_.js";
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-w60dVQcb.js";
 import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "./RadioGroup-efBKgTYA.js";
@@ -46,10 +46,11 @@ import { a as stepperSeparatorDefinition, i as stepperNumberDefinition, n as ste
 import { i as dialogOverlayDefinition, n as dialogMainDefinition, t as dialogContentDefinition } from "./dialog.cva-COhDZaVl.js";
 import { i as alertDefinition, n as statusIconDefinition, r as statusSeparatorDefinition, t as Alert } from "./Alert-CnvEb1D_.js";
 import { a as toastDefinition, i as toastContainerDefinition } from "./toast.cva-C_L_RffH.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { t as tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva-BBQ4ic3D.js";
-import { C as toRgb, S as toHex, _ as listedLayoutToken, a as generateShades, b as runtimeCss, c as isEditableToken, d as labelFor, f as layoutKindFor, g as linkedLayoutTokens, h as layoutScales, i as exportCss, l as isFontSizeToken, m as layoutLevelFor, n as controlHeightCounterpart, o as groupFor, p as layoutKinds, r as emptyTheme, s as groups, t as baseColorNames, u as isRgb, w as validToken, x as spacingLevels, y as previewTokens } from "./theme-model-DtTsIxou.js";
-import $ahdqC$react, { Fragment, Suspense, createContext, lazy, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { C as toRgb, S as toHex, _ as listedLayoutToken, a as generateShades, b as runtimeCss, c as isEditableToken, d as labelFor, f as layoutKindFor, g as linkedLayoutTokens, h as layoutScales, i as exportCss, l as isFontSizeToken, m as layoutLevelFor, n as controlHeightCounterpart, o as groupFor, p as layoutKinds, r as emptyTheme, s as groups, t as baseColorNames, u as isRgb, v as parseThemeCss, w as validToken, x as spacingLevels, y as previewTokens } from "./theme-model-DtTsIxou.js";
+import $ahdqC$react, { Fragment, Suspense, createContext, lazy, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "react-aria/mergeProps";
@@ -58,8 +59,8 @@ import { filterDOMProps } from "react-aria/filterDOMProps";
 import { useFocusRing } from "react-aria/useFocusRing";
 import { createHideableComponent } from "react-aria/private/collections/Hidden";
 import { createPortal } from "react-dom";
-import "react-aria/useLocalizedStringFormatter";
-import "react-aria/useListFormatter";
+import { useLocalizedStringFormatter } from "react-aria/useLocalizedStringFormatter";
+import { useListFormatter } from "react-aria/useListFormatter";
 import { HiddenSelect, useSelect } from "react-aria/useSelect";
 import { useSelectState } from "react-stately/useSelectState";
 import { UNSAFE_PortalProvider } from "react-aria";
@@ -70,7 +71,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$9 = {
+const __iconData$10 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -88,8 +89,8 @@ const __iconData$9 = {
 		}]
 	]
 };
-__iconData$9.node;
-const ArrowDownToLine = createLucideIcon(__iconData$9);
+__iconData$10.node;
+const ArrowDownToLine = createLucideIcon(__iconData$10);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -98,7 +99,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$9 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -109,8 +110,8 @@ const __iconData$8 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$8.node;
-const ChevronsUpDown = createLucideIcon(__iconData$8);
+__iconData$9.node;
+const ChevronsUpDown = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.mjs
 /**
@@ -119,7 +120,7 @@ const ChevronsUpDown = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$8 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -137,8 +138,8 @@ const __iconData$7 = {
 		}]
 	]
 };
-__iconData$7.node;
-const ExternalLink = createLucideIcon(__iconData$7);
+__iconData$8.node;
+const ExternalLink = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
 /**
@@ -147,7 +148,7 @@ const ExternalLink = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$7 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -155,8 +156,8 @@ const __iconData$6 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$6.node;
-const Moon = createLucideIcon(__iconData$6);
+__iconData$7.node;
+const Moon = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.mjs
 /**
@@ -165,7 +166,7 @@ const Moon = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$6 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -180,8 +181,29 @@ const __iconData$5 = {
 		key: "1pudct"
 	}]]
 };
+__iconData$6.node;
+const PanelTop = createLucideIcon(__iconData$6);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pencil.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$5 = {
+	name: "pencil",
+	size: 24,
+	node: [["path", {
+		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+		key: "1a8usu"
+	}], ["path", {
+		d: "m15 5 4 4",
+		key: "1mk7zo"
+	}]]
+};
 __iconData$5.node;
-const PanelTop = createLucideIcon(__iconData$5);
+const Pencil = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pin.mjs
 /**
@@ -246,58 +268,6 @@ const __iconData$2 = {
 __iconData$2.node;
 const RotateCcw = createLucideIcon(__iconData$2);
 //#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sliders-horizontal.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$1 = {
-	name: "sliders-horizontal",
-	size: 24,
-	node: [
-		["path", {
-			d: "M10 5H3",
-			key: "1qgfaw"
-		}],
-		["path", {
-			d: "M12 19H3",
-			key: "yhmn1j"
-		}],
-		["path", {
-			d: "M14 3v4",
-			key: "1sua03"
-		}],
-		["path", {
-			d: "M16 17v4",
-			key: "1q0r14"
-		}],
-		["path", {
-			d: "M21 12h-9",
-			key: "1o4lsq"
-		}],
-		["path", {
-			d: "M21 19h-5",
-			key: "1rlt1p"
-		}],
-		["path", {
-			d: "M21 5h-7",
-			key: "1oszz2"
-		}],
-		["path", {
-			d: "M8 10v4",
-			key: "tgpxqk"
-		}],
-		["path", {
-			d: "M8 12H3",
-			key: "a7s4jb"
-		}]
-	]
-};
-__iconData$1.node;
-const SlidersHorizontal = createLucideIcon(__iconData$1);
-//#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sun.mjs
 /**
 * @license lucide-react v1.43.0 - ISC
@@ -305,7 +275,7 @@ const SlidersHorizontal = createLucideIcon(__iconData$1);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData = {
+const __iconData$1 = {
 	name: "sun",
 	size: 24,
 	node: [
@@ -349,10 +319,50 @@ const __iconData = {
 		}]
 	]
 };
+__iconData$1.node;
+const Sun = createLucideIcon(__iconData$1);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/trash.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "trash",
+	size: 24,
+	node: [
+		["path", {
+			d: "M10 11v6",
+			key: "nco0om"
+		}],
+		["path", {
+			d: "M14 11v6",
+			key: "outv1u"
+		}],
+		["path", {
+			d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+			key: "miytrc"
+		}],
+		["path", {
+			d: "M3 6h18",
+			key: "d0wm0j"
+		}],
+		["path", {
+			d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+			key: "e791ji"
+		}]
+	],
+	aliases: ["trash-2"]
+};
 __iconData.node;
-const Sun = createLucideIcon(__iconData);
+const Trash = createLucideIcon(__iconData);
 //#endregion
 //#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Select.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
 const $c8bb816105474884$export$7540cee5be7dc19b = /*#__PURE__*/ createContext(null);
 const $c8bb816105474884$export$ef445b55be0601bd = /*#__PURE__*/ createContext(null);
 const $c8bb816105474884$export$ef9b1a59e592288f = /*#__PURE__*/ createHideableComponent(function Select(props, ref) {
@@ -473,6 +483,68 @@ function $c8bb816105474884$var$SelectInner({ props, selectRef: ref, collection }
 	})));
 }
 const $c8bb816105474884$export$f8f745c04421623f = /*#__PURE__*/ createContext(null);
+const $c8bb816105474884$export$e288731fd71264f0 = /*#__PURE__*/ createHideableComponent(function SelectValue(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $c8bb816105474884$export$f8f745c04421623f);
+	let state = useContext($c8bb816105474884$export$ef445b55be0601bd);
+	let { placeholder } = $7230ffa83bc0c2cf$export$fabf2dc03a41866e($c8bb816105474884$export$7540cee5be7dc19b);
+	let rendered = state.selectedItems.map((item) => {
+		let rendered = item.props?.children;
+		if (typeof rendered === "function") rendered = rendered({
+			isHovered: false,
+			isPressed: false,
+			isSelected: false,
+			isFocused: false,
+			isFocusVisible: false,
+			isDisabled: false,
+			selectionMode: "single",
+			selectionBehavior: "toggle"
+		});
+		return rendered;
+	});
+	let formatter = useListFormatter();
+	let textValue = useMemo(() => state.selectedItems.map((item) => item?.textValue), [state.selectedItems]);
+	let selectionMode = state.selectionManager.selectionMode;
+	let selectedText = useMemo(() => selectionMode === "single" ? textValue[0] ?? "" : formatter.format(textValue), [
+		selectionMode,
+		formatter,
+		textValue
+	]);
+	let defaultChildren = useMemo(() => {
+		if (selectionMode === "single") return rendered[0];
+		let parts = formatter.formatToParts(textValue);
+		if (parts.length === 0) return null;
+		let index = 0;
+		return parts.map((part) => {
+			if (part.type === "element") return /*#__PURE__*/ $ahdqC$react.createElement(Fragment, { key: index }, rendered[index++]);
+			else return part.value;
+		});
+	}, [
+		selectionMode,
+		formatter,
+		textValue,
+		rendered
+	]);
+	let stringFormatter = useLocalizedStringFormatter($parcel$interopDefault($aa5f63badbfee5df$exports), "react-aria-components");
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...props,
+		defaultChildren: defaultChildren ?? placeholder ?? stringFormatter.format("selectPlaceholder"),
+		defaultClassName: "react-aria-SelectValue",
+		values: {
+			selectedItem: state.selectedItems[0]?.value ?? null,
+			selectedItems: useMemo(() => state.selectedItems.map((item) => item.value ?? null), [state.selectedItems]),
+			selectedText,
+			isPlaceholder: state.selectedItems.length === 0,
+			state
+		}
+	});
+	let DOMProps = filterDOMProps(props, { global: true });
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.span, {
+		ref,
+		...DOMProps,
+		...renderProps,
+		"data-placeholder": state.selectedItems.length === 0 || void 0
+	}, /*#__PURE__*/ $ahdqC$react.createElement($efe09c6d1c304b50$export$9afb8bc826b033ea.Provider, { value: void 0 }, renderProps.children));
+});
 //#endregion
 //#region src/configurator/cva-definitions.ts
 const cvaDefinitions = {
@@ -623,7 +695,7 @@ function UIConfigurationProvider(t0) {
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = () => {
-			setComponentHosts(_temp$7);
+			setComponentHosts(_temp$8);
 			return () => setComponentHosts(_temp2$5);
 		};
 		$[0] = t1;
@@ -631,12 +703,14 @@ function UIConfigurationProvider(t0) {
 	const hostComponents = t1;
 	let t2;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = (value, t3) => {
-			if (t3 === void 0 ? false : t3) setOpen(false);
+		t2 = (value, t3, t4) => {
+			const closeEditor = t3 === void 0 ? false : t3;
+			const remount = t4 === void 0 ? true : t4;
+			if (closeEditor) setOpen(false);
 			setApplied(structuredClone(value));
 			setDraft(structuredClone(value));
 			setPreviewConfiguration(null);
-			setRevision(_temp3$4);
+			if (remount) setRevision(_temp3$4);
 		};
 		$[1] = t2;
 	} else t2 = $[1];
@@ -657,7 +731,7 @@ function UIConfigurationProvider(t0) {
 	let t4;
 	if ($[4] !== isOpen || $[5] !== open) {
 		t4 = () => {
-			if (isOpen) setRevision(_temp5$2);
+			if (isOpen) setRevision(_temp5$3);
 			else open();
 			setFloating(true);
 		};
@@ -809,7 +883,7 @@ function UIConfigurationProvider(t0) {
 	} else t17 = $[49];
 	return t17;
 }
-function _temp5$2(value_1) {
+function _temp5$3(value_1) {
 	return value_1 + 1;
 }
 function _temp4$4(value_0) {
@@ -821,7 +895,7 @@ function _temp3$4(current) {
 function _temp2$5(count_0) {
 	return count_0 - 1;
 }
-function _temp$7(count) {
+function _temp$8(count) {
 	return count + 1;
 }
 function useUIConfiguration() {
@@ -830,6 +904,360 @@ function useUIConfiguration() {
 	return context;
 }
 //#endregion
+//#region src/configurator/theme-writer-protocol.ts
+/** Shared by the browser configurator and the isolated Node Vite entry. */
+const themeWriterMetaName = "povio-ui-theme-writer";
+const themeWriterTokenHeader = "x-povio-ui-theme-token";
+//#endregion
+//#region src/configurator/theme-writer-client.ts
+function getThemeWriter() {
+	if (typeof document === "undefined") return null;
+	const content = document.querySelector(`meta[name="${themeWriterMetaName}"]`)?.content;
+	if (!content) return null;
+	try {
+		const connection = JSON.parse(content);
+		if (typeof connection.endpoint === "string" && connection.endpoint.startsWith("/") && !connection.endpoint.startsWith("//") && typeof connection.token === "string" && typeof connection.file === "string") return connection;
+	} catch {}
+	return null;
+}
+async function saveThemeCss(connection, css) {
+	const response = await fetch(connection.endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			[themeWriterTokenHeader]: connection.token
+		},
+		body: JSON.stringify({ css })
+	});
+	if (!response.ok) {
+		const result = await response.json().catch(() => null);
+		throw new Error(result?.error ?? `Theme save failed (${response.status}).`);
+	}
+}
+//#endregion
+//#region src/configurator/fontsource-client.ts
+const validId = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+let catalog;
+/** One metadata request per page, not one font download per search result. */
+function loadFontsourceCatalog() {
+	catalog ??= fetch("https://api.fontsource.org/v1/fonts", { signal: AbortSignal.timeout(15e3) }).then(async (response) => {
+		if (!response.ok) throw new Error("Fontsource is unavailable. Try again.");
+		const data = await response.json();
+		if (!Array.isArray(data)) throw new Error("Fontsource returned an invalid catalog.");
+		return data.filter((font) => font && typeof font.id === "string" && font.id.length <= 100 && validId.test(font.id) && typeof font.family === "string" && typeof font.category === "string" && typeof font.variable === "boolean" && Array.isArray(font.subsets) && font.subsets.every((s) => typeof s === "string" && validId.test(s)) && typeof font.defSubset === "string" && font.subsets.includes(font.defSubset) && Array.isArray(font.weights) && font.weights.length > 0 && font.weights.every((w) => typeof w === "number" && w > 0 && w <= 1e3) && Array.isArray(font.styles) && (font.styles.includes("normal") || font.styles.includes("italic")) && font.type !== "icons").sort((a, b) => a.family.localeCompare(b.family));
+	}).catch((error) => {
+		catalog = void 0;
+		throw error;
+	});
+	return catalog;
+}
+function fontsourceWriter() {
+	const writer = getThemeWriter();
+	const fonts = writer?.fontsource;
+	return fonts && typeof fonts.endpoint === "string" && fonts.endpoint.startsWith("/") && !fonts.endpoint.startsWith("//") && typeof fonts.cssFile === "string" ? {
+		...fonts,
+		token: writer.token
+	} : null;
+}
+async function addFontsourceFamily(id) {
+	const writer = fontsourceWriter();
+	if (!writer) throw new Error("Adding fonts requires the Povio UI Vite plugin in a development server.");
+	const response = await fetch(writer.endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			[themeWriterTokenHeader]: writer.token
+		},
+		body: JSON.stringify({ id })
+	});
+	const result = await response.json();
+	if (!response.ok) throw new Error(result.error ?? "Could not add this font to the app.");
+	if (typeof result.family !== "string" || typeof result.packageName !== "string" || !Array.isArray(result.imports)) throw new Error("The font installer returned an invalid response.");
+	return result;
+}
+/** The static preview is temporary; installed variable families use their full range. */
+function fontsourcePreview(font) {
+	const subset = font.subsets.includes("latin") ? "latin" : font.defSubset;
+	const weight = font.weights.includes(400) ? 400 : font.weights[0];
+	const style = font.styles.includes("normal") ? "normal" : "italic";
+	return {
+		alias: `Povio Fontsource preview ${font.id}`,
+		weight,
+		style,
+		url: `https://cdn.jsdelivr.net/fontsource/fonts/${font.id}@latest/${subset}-${weight}-${style}.woff2`
+	};
+}
+//#endregion
+//#region src/configurator/FontsourcePicker.tsx
+function FontsourcePicker({ roles, onAdded }) {
+	const trigger = useRef(null);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const [open, setOpen] = useState(false);
+	const [fonts, setFonts] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [query, setQuery] = useState("");
+	const [limit, setLimit] = useState(30);
+	const [category, setCategory] = useState("");
+	const [variableOnly, setVariableOnly] = useState(false);
+	useEffect(() => setLimit(30), [
+		query,
+		category,
+		variableOnly
+	]);
+	const [selected, setSelected] = useState(null);
+	const [sample, setSample] = useState("The quick brown fox jumps over the lazy dog.");
+	const [previewState, setPreviewState] = useState("loading");
+	const [role, setRole] = useState(roles[0]?.token ?? "");
+	const [adding, setAdding] = useState(false);
+	const [error, setError] = useState("");
+	const [notice, setNotice] = useState("");
+	const [retry, setRetry] = useState(0);
+	const writer = fontsourceWriter();
+	useEffect(() => {
+		if (!open) return;
+		let active = true;
+		setLoading(true);
+		setError("");
+		loadFontsourceCatalog().then((value) => {
+			if (active) setFonts(value);
+		}).catch((cause) => {
+			if (active) setError(cause instanceof Error ? cause.message : "Could not load Fontsource.");
+		}).finally(() => {
+			if (active) setLoading(false);
+		});
+		return () => {
+			active = false;
+		};
+	}, [open, retry]);
+	useEffect(() => {
+		if (!open || !selected) return;
+		let active_0 = true;
+		const doc = trigger.current?.ownerDocument ?? document;
+		const preview = fontsourcePreview(selected);
+		const face = new FontFace(preview.alias, `url("${preview.url}")`, {
+			weight: String(preview.weight),
+			style: preview.style
+		});
+		setPreviewState("loading");
+		face.load().then((loaded) => {
+			if (active_0) {
+				doc.fonts.add(loaded);
+				setPreviewState("ready");
+			}
+		}).catch(() => {
+			if (active_0) setPreviewState("error");
+		});
+		return () => {
+			active_0 = false;
+			doc.fonts.delete(face);
+		};
+	}, [open, selected]);
+	const filtered = useMemo(() => fonts.filter((font) => font.family.toLowerCase().includes(query.trim().toLowerCase()) && (!category || category === font.category) && (!variableOnly || font.variable)), [
+		fonts,
+		query,
+		category,
+		variableOnly
+	]);
+	const preview_0 = selected ? fontsourcePreview(selected) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "studio-fontsource",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref: trigger,
+				type: "button",
+				className: "studio-gallery-back",
+				onClick: () => {
+					setOpen(true);
+					setError("");
+				},
+				children: "Browse Fontsource"
+			}),
+			notice && /* @__PURE__ */ jsx("span", {
+				className: "studio-fontsource-notice",
+				role: "status",
+				children: notice
+			}),
+			/* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+				triggerRef: trigger,
+				placement: "bottom start",
+				offset: 6,
+				isOpen: open,
+				onOpenChange: (value_0) => {
+					if (!adding) setOpen(value_0);
+				},
+				isKeyboardDismissDisabled: adding,
+				className: "studio-fontsource-popover",
+				children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+					"aria-label": "Fontsource font picker",
+					children: [
+						/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+							slot: "title",
+							children: "Fontsource fonts"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Close font picker",
+							disabled: adding,
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ jsx(X, { size: 13 })
+						})] }),
+						/* @__PURE__ */ jsxs("label", {
+							className: "studio-fontsource-search",
+							children: [/* @__PURE__ */ jsx(Search, { size: 13 }), /* @__PURE__ */ jsx("input", {
+								autoFocus: true,
+								"aria-label": "Search Fontsource fonts",
+								placeholder: "Find a font family…",
+								value: query,
+								onChange: (event) => setQuery(event.target.value)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "studio-fontsource-filters",
+							children: [/* @__PURE__ */ jsxs("select", {
+								"aria-label": "Font category",
+								value: category,
+								onChange: (event_0) => setCategory(event_0.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "All categories"
+								}), [...new Set(fonts.map((font_0) => font_0.category))].sort().map((name) => /* @__PURE__ */ jsx("option", {
+									value: name,
+									children: name
+								}, name))]
+							}), /* @__PURE__ */ jsxs("label", { children: [
+								/* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: variableOnly,
+									onChange: (event_1) => setVariableOnly(event_1.target.checked)
+								}),
+								" ",
+								"Variable only"
+							] })]
+						}),
+						loading ? /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: "Loading font families…"
+						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "studio-fontsource-count",
+								children: [
+									filtered.length,
+									" families",
+									filtered.length > limit ? ` · showing ${limit}` : ""
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "studio-fontsource-list",
+								role: "group",
+								"aria-label": "Fontsource families",
+								children: [filtered.slice(0, limit).map((font_1) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									disabled: adding,
+									"aria-pressed": selected?.id === font_1.id,
+									onClick: () => {
+										setSelected(font_1);
+										setError("");
+									},
+									children: [
+										/* @__PURE__ */ jsx("span", { children: font_1.family }),
+										/* @__PURE__ */ jsxs("small", { children: [font_1.category, font_1.variable ? " · variable" : ""] }),
+										selected?.id === font_1.id && /* @__PURE__ */ jsx(Check, { size: 12 })
+									]
+								}, font_1.id)), !filtered.length && !error && /* @__PURE__ */ jsx("p", { children: "No matching font families." })]
+							}),
+							filtered.length > limit && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "studio-fontsource-more",
+								onClick: () => setLimit((value_1) => value_1 + 30),
+								children: "Show more fonts"
+							})
+						] }),
+						selected && /* @__PURE__ */ jsxs("section", {
+							className: "studio-fontsource-preview",
+							"aria-label": `Preview ${selected.family}`,
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: selected.family }),
+								/* @__PURE__ */ jsx("input", {
+									"aria-label": "Font preview text",
+									value: sample,
+									onChange: (event_2) => setSample(event_2.target.value)
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "studio-fontsource-sample",
+									style: {
+										fontFamily: previewState === "ready" ? `"${preview_0.alias}", sans-serif` : "inherit",
+										fontWeight: preview_0?.weight,
+										fontStyle: preview_0?.style
+									},
+									children: sample || "Aa Bb Cc 0123456789"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "status",
+									children: previewState === "loading" ? "Loading preview…" : previewState === "error" ? "Preview could not load. You can still add this family." : ""
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "studio-fontsource-role",
+									children: ["Use for", /* @__PURE__ */ jsxs("select", {
+										"aria-label": "Use font for",
+										value: role,
+										disabled: adding,
+										onChange: (event_3) => setRole(event_3.target.value),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "",
+											children: "Add to available fonts"
+										}), roles.map((item) => /* @__PURE__ */ jsx("option", {
+											value: item.token,
+											children: item.label
+										}, item.token))]
+									})]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "studio-primary",
+									disabled: adding || !writer,
+									onClick: async () => {
+										setAdding(true);
+										setError("");
+										try {
+											const font_2 = await addFontsourceFamily(selected.id);
+											if (!mounted.current) return;
+											onAdded(font_2, role || void 0);
+											setNotice(`${font_2.family} added to the app.`);
+											setOpen(false);
+										} catch (cause_0) {
+											setError(cause_0 instanceof Error ? cause_0.message : "Could not add font.");
+										} finally {
+											setAdding(false);
+										}
+									},
+									children: adding ? "Adding font…" : "Add font to app"
+								})
+							]
+						}),
+						error && /* @__PURE__ */ jsxs("p", {
+							role: "alert",
+							children: [error, !fonts.length && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setRetry((value_2) => value_2 + 1),
+								children: "Retry"
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "studio-fontsource-help",
+							children: writer ? `Adding installs the font package and updates ${writer.cssFile}. Your theme version keeps the Heading/Body choice; Apply theme writes it to the repo.` : "Preview fonts here. Adding them to your app requires the Povio UI Vite plugin in development."
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/configurator/inspector/InspectorDetails.tsx
 /** A token as a design tool names a variable: `--text-large--line-height` → `text-large/line-height`. */
 const variableName = (token) => token.replace(/^--/, "").replace(/-base$/, "").replaceAll("--", "/");
@@ -909,7 +1337,7 @@ function InspectorDetails(t0) {
 			$[13] = onSelect;
 			$[14] = t6;
 		} else t6 = $[14];
-		t5 = snapshot.groups.map(_temp$6).filter(_temp2$4).map(t6);
+		t5 = snapshot.groups.map(_temp$7).filter(_temp2$4).map(t6);
 		$[10] = onSelect;
 		$[11] = snapshot.groups;
 		$[12] = t5;
@@ -926,7 +1354,7 @@ function InspectorDetails(t0) {
 function _temp2$4(group_0) {
 	return group_0.properties.length;
 }
-function _temp$6(group) {
+function _temp$7(group) {
 	return {
 		name: group.name,
 		properties: group.properties.filter((property) => group.name !== "Layout" || ![
@@ -951,7 +1379,7 @@ function BoxModel(t0) {
 	let t3;
 	let t4;
 	if ($[0] !== box.border || $[1] !== box.content.height || $[2] !== box.content.width || $[3] !== box.gap.column || $[4] !== box.gap.row || $[5] !== box.margin || $[6] !== box.padding || $[7] !== box.position || $[8] !== box.radius || $[9] !== onHighlight || $[10] !== onSelect || $[11] !== snapshot.groups) {
-		const properties = snapshot.groups.flatMap(_temp5$1);
+		const properties = snapshot.groups.flatMap(_temp5$2);
 		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
 		const nonzero = _temp7$1;
 		let t5;
@@ -1130,7 +1558,7 @@ function _temp7$1(value_0) {
 function _temp6$1(part) {
 	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
 }
-function _temp5$1(group) {
+function _temp5$2(group) {
 	return group.properties;
 }
 function _temp4$3(value) {
@@ -2177,120 +2605,6 @@ function PreviewInspector({ children, revision, isKnown, onSelect, onScroll }) {
 	});
 }
 //#endregion
-//#region src/configurator/ConfigurationLauncher.tsx
-function ConfigurationLauncher({ position, onOpen }) {
-	const ref = useRef(null);
-	const gesture = useRef(null);
-	const dragged = useRef(false);
-	const pending = useRef(null);
-	const frame = useRef(null);
-	const place = useCallback((next) => {
-		const element = ref.current;
-		if (!element) return;
-		const left = Math.max(8, Math.min(next.left, window.innerWidth - element.offsetWidth - 8));
-		const top = Math.max(8, Math.min(next.top, window.innerHeight - element.offsetHeight - 8));
-		position.current = {
-			left,
-			top
-		};
-		element.style.left = `${left}px`;
-		element.style.top = `${top}px`;
-	}, [position]);
-	function finish() {
-		if (frame.current !== null) cancelAnimationFrame(frame.current);
-		frame.current = null;
-		if (pending.current) place(pending.current);
-		pending.current = null;
-		gesture.current = null;
-	}
-	useLayoutEffect(() => {
-		const element_0 = ref.current;
-		if (!element_0) return;
-		const resize = () => place(position.current ?? {
-			left: window.innerWidth - element_0.offsetWidth - 24,
-			top: window.innerHeight - element_0.offsetHeight - 24
-		});
-		resize();
-		window.addEventListener("resize", resize);
-		return () => {
-			window.removeEventListener("resize", resize);
-			if (frame.current !== null) cancelAnimationFrame(frame.current);
-			if (pending.current) position.current = pending.current;
-		};
-	}, [place, position]);
-	return /* @__PURE__ */ jsxs("button", {
-		ref,
-		type: "button",
-		className: "studio-floating-launcher",
-		"aria-label": "Open Povio UI configuration",
-		title: "Open Povio UI · Drag to move",
-		onClick: (event) => {
-			if (dragged.current && event.detail !== 0) {
-				dragged.current = false;
-				return;
-			}
-			onOpen();
-		},
-		onPointerDown: (event_0) => {
-			if (event_0.button !== 0) return;
-			const rect = event_0.currentTarget.getBoundingClientRect();
-			dragged.current = false;
-			gesture.current = {
-				x: event_0.clientX,
-				y: event_0.clientY,
-				left: rect.left,
-				top: rect.top,
-				pointerId: event_0.pointerId
-			};
-			event_0.currentTarget.setPointerCapture(event_0.pointerId);
-		},
-		onPointerMove: (event_1) => {
-			const start = gesture.current;
-			if (!start || start.pointerId !== event_1.pointerId) return;
-			const x = event_1.clientX - start.x;
-			const y = event_1.clientY - start.y;
-			if (!dragged.current && Math.hypot(x, y) < 5) return;
-			dragged.current = true;
-			pending.current = {
-				left: start.left + x,
-				top: start.top + y
-			};
-			if (frame.current !== null) return;
-			frame.current = requestAnimationFrame(() => {
-				frame.current = null;
-				if (pending.current) place(pending.current);
-			});
-		},
-		onPointerUp: (event_2) => {
-			if (gesture.current?.pointerId !== event_2.pointerId) return;
-			finish();
-			if (event_2.currentTarget.hasPointerCapture(event_2.pointerId)) event_2.currentTarget.releasePointerCapture(event_2.pointerId);
-		},
-		onPointerCancel: finish,
-		onLostPointerCapture: finish,
-		onKeyDown: (event_3) => {
-			const move = {
-				ArrowLeft: [-1, 0],
-				ArrowRight: [1, 0],
-				ArrowUp: [0, -1],
-				ArrowDown: [0, 1]
-			}[event_3.key];
-			if (!move || !position.current) return;
-			event_3.preventDefault();
-			const step = event_3.shiftKey ? 40 : 10;
-			place({
-				left: position.current.left + move[0] * step,
-				top: position.current.top + move[1] * step
-			});
-		},
-		children: [
-			/* @__PURE__ */ jsx(SlidersHorizontal, { size: 18 }),
-			/* @__PURE__ */ jsx("span", { children: "Povio UI" }),
-			/* @__PURE__ */ jsx(GripVertical, { size: 16 })
-		]
-	});
-}
-//#endregion
 //#region src/configurator/useStudioPopout.ts
 const StudioPopoutContext = createContext(false);
 /** Keep the popup's styles current without copying scripts or starting a second app. */
@@ -2635,6 +2949,7 @@ function useStudioWindow(bounds, enabled = true) {
 			onLostPointerCapture: move.onLostPointerCapture,
 			onPointerCancel: move.onPointerCancel,
 			onPointerDown(event_5) {
+				if (!event_5.currentTarget.contains(event_5.target)) return;
 				if (event_5.target.closest("button, input, select, textarea, a, label, [role='tab']")) return;
 				move.onPointerDown(event_5);
 			}
@@ -2662,7 +2977,7 @@ function CvaPreview(t0) {
 		component = slot.split(".")[0];
 		const props = {
 			...definition?.config.defaultVariants,
-			...Object.fromEntries(Object.entries(variants).filter(_temp$5).map(_temp2$3))
+			...Object.fromEntries(Object.entries(variants).filter(_temp$6).map(_temp2$3))
 		};
 		const classes = (key, t4) => {
 			const extra = t4 === void 0 ? {} : t4;
@@ -3431,7 +3746,7 @@ function _temp2$3(t0) {
 	const [name, value_0] = t0;
 	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
 }
-function _temp$5(t0) {
+function _temp$6(t0) {
 	const [, value] = t0;
 	return value !== "";
 }
@@ -3587,7 +3902,7 @@ function ClassField(t0) {
 			onFocus,
 			onChange: t4,
 			onBlur: t5,
-			onKeyDown: _temp$4
+			onKeyDown: _temp$5
 		});
 		$[10] = label;
 		$[11] = onFocus;
@@ -3608,7 +3923,7 @@ function ClassField(t0) {
 	} else t7 = $[17];
 	return t7;
 }
-function _temp$4(event_0) {
+function _temp$5(event_0) {
 	if (event_0.key === "Enter" && !event_0.nativeEvent.isComposing) {
 		event_0.preventDefault();
 		event_0.currentTarget.parentElement?.focus();
@@ -3823,7 +4138,7 @@ function CvaEditor(t0) {
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
 									children: "None"
-								}), Object.keys(options).map(_temp5)]
+								}), Object.keys(options).map(_temp5$1)]
 							})]
 						}),
 						Object.entries(options).map((t20) => {
@@ -3925,7 +4240,7 @@ function _temp6(t0) {
 	const [key_3] = t0;
 	return key_3 !== "className";
 }
-function _temp5(value_1) {
+function _temp5$1(value_1) {
 	return /* @__PURE__ */ jsx("option", {
 		value: value_1,
 		children: value_1
@@ -3947,35 +4262,340 @@ function _temp2$2(key) {
 	return key.split(".")[0];
 }
 //#endregion
-//#region src/configurator/theme-writer-protocol.ts
-/** Shared by the browser configurator and the isolated Node Vite entry. */
-const themeWriterMetaName = "povio-ui-theme-writer";
-const themeWriterTokenHeader = "x-povio-ui-theme-token";
-//#endregion
-//#region src/configurator/theme-writer-client.ts
-function getThemeWriter() {
+//#region src/configurator/theme-versions.ts
+const themeVersionsMetaName = "povio-ui-theme-versions";
+function createThemeVersion(name, id, configuration) {
+	return {
+		id,
+		name: name.trim() || "Theme",
+		...configuration ? { configuration: structuredClone(configuration) } : {}
+	};
+}
+function createThemeVersions() {
+	return {
+		version: 1,
+		versions: [createThemeVersion("Default", "default")],
+		activeVersionId: "default"
+	};
+}
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function safeJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value);
+	if (typeof value !== "object" || depth > 30 || ancestors.has(value)) return false;
+	if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return false;
+	ancestors.add(value);
+	const valid = Object.entries(value).every(([key, child]) => ![
+		"__proto__",
+		"prototype",
+		"constructor"
+	].includes(key) && safeJSON(child, ancestors, depth + 1));
+	ancestors.delete(value);
+	return valid;
+}
+const stringMap = (value) => isRecord(value) && Object.values(value).every((item) => typeof item === "string");
+const variantValue = (value) => value === null || typeof value === "string" || typeof value === "boolean";
+function validCvaEdits(value) {
+	return isRecord(value) && Object.entries(value).every(([slot, definition]) => {
+		if (!/^[a-zA-Z][a-zA-Z0-9]*\.[a-zA-Z][a-zA-Z0-9]*$/.test(slot) || !isRecord(definition) || !Array.isArray(definition.base) || !definition.base.every((item) => typeof item === "string") || !isRecord(definition.config)) return false;
+		const config = definition.config;
+		return isRecord(config.variants) && Object.values(config.variants).every(stringMap) && isRecord(config.defaultVariants) && Object.values(config.defaultVariants).every(variantValue) && Array.isArray(config.compoundVariants) && config.compoundVariants.every((compound) => isRecord(compound) && Object.values(compound).every((item) => variantValue(item) || Array.isArray(item) && (item.every((part) => typeof part === "string") || item.every((part) => typeof part === "boolean"))));
+	});
+}
+/** Returns an independent JSON configuration, or undefined for invalid/unset overrides. */
+function parseUIConfiguration(value) {
+	if (!isRecord(value) || !safeJSON(value) || !isRecord(value.theme) || ![
+		"light",
+		"dark",
+		"theme"
+	].every((key) => stringMap(value.theme && value.theme[key])) || !isRecord(value.config) || value.overrides !== void 0 && !validCvaEdits(value.overrides)) return void 0;
+	return JSON.parse(JSON.stringify(value));
+}
+/** Returns an independent component configuration, or undefined when invalid. */
+function parseComponentConfiguration(value) {
+	if (!isRecord(value) || !safeJSON(value) || !isRecord(value.config) || value.overrides !== void 0 && !validCvaEdits(value.overrides)) return void 0;
+	const copy = JSON.parse(JSON.stringify(value));
+	return {
+		config: copy.config ?? {},
+		overrides: copy.overrides ?? {}
+	};
+}
+/** Sanitize stored JSON text or a repository value. */
+function parseThemeVersions(input) {
+	const fallback = createThemeVersions();
+	let value = input;
+	if (typeof value === "string") try {
+		value = JSON.parse(value);
+	} catch {
+		return fallback;
+	}
+	if (!isRecord(value) || value.version !== 1 || !Array.isArray(value.versions)) return fallback;
+	const versions = [];
+	const ids = /* @__PURE__ */ new Set();
+	for (const entry of value.versions) {
+		if (!isRecord(entry) || typeof entry.id !== "string" || !entry.id.trim() || ids.has(entry.id)) continue;
+		ids.add(entry.id);
+		const configuration = parseUIConfiguration(entry.configuration);
+		versions.push({
+			id: entry.id,
+			name: typeof entry.name === "string" && entry.name.trim() ? entry.name.trim() : "Theme",
+			...configuration ? { configuration } : {}
+		});
+	}
+	if (!versions.length) return fallback;
+	return {
+		version: 1,
+		versions,
+		activeVersionId: typeof value.activeVersionId === "string" && versions.some((version) => version.id === value.activeVersionId) ? value.activeVersionId : versions[0].id
+	};
+}
+//#endregion
+//#region src/configurator/component-configuration.ts
+const emptyComponentConfiguration = () => ({
+	config: {},
+	overrides: {}
+});
+/**
+* The app's applied component settings: pass the JSON written by the configurator's Apply theme
+* and the app's code-level overrides, which stay underneath the applied variant overrides.
+*/
+function resolveUIConfiguration(file, baseOverrides) {
+	const { config, overrides } = parseComponentConfiguration(file) ?? emptyComponentConfiguration();
+	return {
+		config,
+		overrides: applyCvaEdits(baseOverrides, overrides)
+	};
+}
+/** Key-order independent JSON without empty objects, for comparing component configurations. */
+function canonicalJSON(value) {
+	const normalize = (item) => {
+		if (Array.isArray(item)) return item.map(normalize);
+		if (!item || typeof item !== "object") return item;
+		const entries = Object.keys(item).sort().flatMap((key) => {
+			const child = normalize(item[key]);
+			return child === void 0 || child && typeof child === "object" && !Array.isArray(child) && !Object.keys(child).length ? [] : [[key, child]];
+		});
+		return Object.fromEntries(entries);
+	};
+	return JSON.stringify(normalize(value));
+}
+//#endregion
+//#region src/configurator/repository-storage-protocol.ts
+const componentConfigurationMetaName = "povio-ui-component-configuration";
+const repositoryStorageTokenHeader = "x-povio-ui-storage-token";
+/** Dev-server event sent when a repository storage file changes, so other tabs reload it. */
+const repositoryStorageChangedEvent = "povio-ui:repository-storage-changed";
+//#endregion
+//#region src/configurator/useRepositoryStorage.ts
+const hot = import.meta.hot;
+function connectionFromDocument(metaName) {
 	if (typeof document === "undefined") return null;
-	const content = document.querySelector(`meta[name="${themeWriterMetaName}"]`)?.content;
-	if (!content) return null;
 	try {
-		const connection = JSON.parse(content);
-		if (typeof connection.endpoint === "string" && connection.endpoint.startsWith("/") && !connection.endpoint.startsWith("//") && typeof connection.token === "string" && typeof connection.file === "string") return connection;
-	} catch {}
-	return null;
+		const value = JSON.parse(document.querySelector(`meta[name="${metaName}"]`)?.content ?? "null");
+		return value && typeof value.endpoint === "string" && value.endpoint.startsWith("/") && !value.endpoint.startsWith("//") && typeof value.token === "string" && typeof value.file === "string" ? value : null;
+	} catch {
+		return null;
+	}
 }
-async function saveThemeCss(connection, css) {
-	const response = await fetch(connection.endpoint, {
-		method: "POST",
+/** Repo is authoritative when connected; local storage remains an offline draft cache. */
+function useRepositoryStorage({ key, metaName, field, parse, noun, enabled = true }) {
+	const Noun = `${noun[0].toUpperCase()}${noun.slice(1)}`;
+	const [connection] = useState(() => enabled ? connectionFromDocument(metaName) : null);
+	const [value, setValue] = useState(() => {
+		try {
+			return parse(localStorage.getItem(key));
+		} catch {
+			return parse(null);
+		}
+	});
+	const [ready, setReady] = useState(!connection);
+	const [status, setStatus] = useState(connection ? `Loading ${noun}…` : "Saved in this browser");
+	const [error, setError] = useState("");
+	const latest = useRef(value);
+	latest.current = value;
+	const revision = useRef(null);
+	const saved = useRef("");
+	const busy = useRef(false);
+	const paused = useRef(false);
+	const alive = useRef(true);
+	const loadGeneration = useRef(0);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const read = useCallback(async (quiet) => {
+		if (!connection) return;
+		const generation = ++loadGeneration.current;
+		if (!quiet) {
+			setReady(false);
+			setError("");
+			setStatus(`Loading ${noun}…`);
+		}
+		paused.current = false;
+		try {
+			const response = await fetch(connection.endpoint, {
+				headers: { [repositoryStorageTokenHeader]: connection.token },
+				cache: "no-store"
+			});
+			const result = await response.json();
+			if (!response.ok) throw new Error(result.error ?? `Could not read ${noun} settings.`);
+			if (!alive.current || generation !== loadGeneration.current) return;
+			revision.current = result.revision;
+			if (result[field]) {
+				const next = parse(result[field]);
+				saved.current = JSON.stringify(next);
+				latest.current = next;
+				setValue(next);
+			} else saved.current = "";
+			setStatus(`Saved to ${connection.file}`);
+			setReady(true);
+		} catch (cause) {
+			if (!alive.current || generation !== loadGeneration.current) return;
+			paused.current = true;
+			setError(cause instanceof Error ? cause.message : "Could not load repository settings.");
+			setStatus("Repository unavailable");
+			setReady(true);
+		}
+	}, [
+		connection,
+		field,
+		noun,
+		parse
+	]);
+	const load = useCallback(() => read(false), [read]);
+	useEffect(() => {
+		load();
+	}, [load]);
+	useEffect(() => {
+		if (!connection || !hot) return;
+		const changed = (change) => {
+			if (change.endpoint !== connection.endpoint || change.revision === revision.current) return;
+			if (busy.current || JSON.stringify(latest.current) !== saved.current) return;
+			read(true);
+		};
+		hot.on(repositoryStorageChangedEvent, changed);
+		return () => hot.off?.(repositoryStorageChangedEvent, changed);
+	}, [connection, read]);
+	const save = useCallback(async () => {
+		if (!connection || busy.current || paused.current || !ready) return;
+		busy.current = true;
+		try {
+			while (alive.current && !paused.current) {
+				const current = latest.current;
+				const serialized = JSON.stringify(current);
+				if (serialized === saved.current) break;
+				setStatus("Saving to repository…");
+				const response_0 = await fetch(connection.endpoint, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						[repositoryStorageTokenHeader]: connection.token
+					},
+					body: JSON.stringify({
+						[field]: current,
+						revision: revision.current
+					})
+				});
+				const result_0 = await response_0.json();
+				if (!response_0.ok) throw new Error(response_0.status === 409 ? `${Noun} file changed elsewhere. Export your draft, then reload repository settings.` : result_0.error ?? `Could not save ${noun} settings.`);
+				revision.current = result_0.revision;
+				saved.current = serialized;
+			}
+			if (alive.current) {
+				setError("");
+				setStatus(`Saved to ${connection.file}`);
+			}
+		} catch (cause_0) {
+			paused.current = true;
+			if (alive.current) {
+				setError(cause_0 instanceof Error ? cause_0.message : `Could not save ${noun} settings.`);
+				setStatus(`${Noun} not saved to repository`);
+			}
+		} finally {
+			busy.current = false;
+		}
+	}, [
+		connection,
+		field,
+		noun,
+		Noun,
+		ready
+	]);
+	useEffect(() => {
+		if (!ready) return;
+		try {
+			localStorage.setItem(key, JSON.stringify(value));
+		} catch {
+			if (!connection) setStatus(`Browser storage unavailable — export your ${noun}`);
+		}
+		if (!connection || paused.current || JSON.stringify(value) === saved.current) return;
+		setStatus("Saving to repository…");
+		const timer = setTimeout(() => {
+			save();
+		}, 350);
+		return () => clearTimeout(timer);
+	}, [
+		value,
+		key,
+		connection,
+		noun,
+		ready,
+		save
+	]);
+	return {
+		value,
+		setValue,
+		ready,
+		status,
+		error,
+		repositoryFile: connection?.file,
+		reload: load
+	};
+}
+//#endregion
+//#region src/configurator/component-configuration-client.ts
+const getComponentConfigurationWriter = () => connectionFromDocument(componentConfigurationMetaName);
+async function request(writer, init) {
+	const response = await fetch(writer.endpoint, {
+		...init,
+		cache: "no-store",
 		headers: {
-			"Content-Type": "application/json",
-			[themeWriterTokenHeader]: connection.token
-		},
-		body: JSON.stringify({ css })
+			...init?.headers,
+			[repositoryStorageTokenHeader]: writer.token
+		}
 	});
-	if (!response.ok) {
-		const result = await response.json().catch(() => null);
-		throw new Error(result?.error ?? `Theme save failed (${response.status}).`);
-	}
+	return {
+		response,
+		result: await response.json()
+	};
+}
+/** The component configuration in the repository, or null when the file does not exist yet. */
+async function readComponentConfiguration(writer) {
+	const { response, result } = await request(writer);
+	if (!response.ok) throw new Error(result.error ?? "Could not read UI configuration.");
+	return {
+		configuration: result.configuration ? parseComponentConfiguration(result.configuration) ?? null : null,
+		revision: result.revision
+	};
+}
+/** Applying is explicit, so a file changed elsewhere is re-read and overwritten once. */
+async function saveComponentConfiguration(writer, configuration, revision) {
+	const post = (current) => request(writer, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			configuration,
+			revision: current
+		})
+	});
+	let { response, result } = await post(revision);
+	if (response.status === 409) ({response, result} = await post((await readComponentConfiguration(writer)).revision));
+	if (!response.ok) throw new Error(result.error ?? "Could not save UI configuration.");
+	return result.revision;
 }
 //#endregion
 //#region src/configurator/ColorModeSwitch.tsx
@@ -4051,7 +4671,7 @@ function AlphaColorField(t0) {
 		setPercentText(null);
 		if (Number.isFinite(entered_0)) onChange(`#${color}${toAlpha(entered_0)}`);
 	};
-	const blurOnEnter = _temp$3;
+	const blurOnEnter = _temp$4;
 	const t1 = `#${color}`;
 	let t2;
 	if ($[0] !== t1 || $[1] !== value) {
@@ -4153,7 +4773,7 @@ function AlphaColorField(t0) {
 		]
 	});
 }
-function _temp$3(event) {
+function _temp$4(event) {
 	if (event.key === "Enter" && !event.nativeEvent.isComposing) event.currentTarget.blur();
 }
 //#endregion
@@ -4251,7 +4871,7 @@ function PaletteSelect(t0) {
 		} else t6 = $[14];
 		let t7;
 		if ($[15] !== options) {
-			t7 = paletteFamilies(options).map(_temp$2);
+			t7 = paletteFamilies(options).map(_temp$3);
 			$[15] = options;
 			$[16] = t7;
 		} else t7 = $[16];
@@ -4412,7 +5032,7 @@ function _temp2$1(t0) {
 		})]
 	}, name_0);
 }
-function _temp$2(t0) {
+function _temp$3(t0) {
 	const { family: name, steps } = t0;
 	return /* @__PURE__ */ jsx("optgroup", {
 		label: `Base palette / ${name}`,
@@ -4585,7 +5205,7 @@ function useLoadedFonts() {
 	const [revision, setRevision] = useState(0);
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => setRevision(_temp$1);
+		t1 = () => setRevision(_temp$2);
 		$[1] = t1;
 	} else t1 = $[1];
 	const refresh = t1;
@@ -4596,13 +5216,13 @@ function useLoadedFonts() {
 			document.fonts.ready.then(() => {
 				if (!active) return;
 				const root = getComputedStyle(document.documentElement);
-				const families = [...new Set([...document.fonts].map(_temp2))];
-				setFonts(families.map((family) => {
-					const base = `--font-${family.split(/\s+/)[0].toLowerCase()}-base`;
-					const value_0 = unquote(root.getPropertyValue(base)) === family ? `var(${base}), sans-serif` : `"${family}", sans-serif`;
-					const group = uploadedFamilies.has(family) ? "Uploaded fonts" : "Loaded fonts";
+				const families = [...new Set([...document.fonts].map(_temp2))].filter(_temp3);
+				setFonts(families.map((family_0) => {
+					const base = `--font-${family_0.split(/\s+/)[0].toLowerCase()}-base`;
+					const value_0 = unquote(root.getPropertyValue(base)) === family_0 ? `var(${base}), sans-serif` : `"${family_0}", sans-serif`;
+					const group = uploadedFamilies.has(family_0) ? "Uploaded fonts" : "Loaded fonts";
 					return {
-						name: `loaded:${family}`,
+						name: `loaded:${family_0}`,
 						label: familyName(value_0),
 						value: value_0,
 						group
@@ -4631,10 +5251,13 @@ function useLoadedFonts() {
 	return t4;
 }
 /** Families added through the upload button in this page session. */
+function _temp3(family) {
+	return !family.startsWith("Povio Fontsource preview ");
+}
 function _temp2(face) {
 	return unquote(face.family);
 }
-function _temp$1(value) {
+function _temp$2(value) {
 	return value + 1;
 }
 const uploadedFamilies = /* @__PURE__ */ new Set();
@@ -4809,7 +5432,7 @@ function FontRoleCard(t0) {
 	} else t11 = $[21];
 	let t12;
 	if ($[22] !== options) {
-		t12 = new Set(options.map(_temp3));
+		t12 = new Set(options.map(_temp4));
 		$[22] = options;
 		$[23] = t12;
 	} else t12 = $[23];
@@ -4823,7 +5446,7 @@ function FontRoleCard(t0) {
 	if ($[26] !== options || $[27] !== t13) {
 		t14 = t13.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
 			label: group_0,
-			children: options.filter((option_1) => option_1.group === group_0).map(_temp4)
+			children: options.filter((option_1) => option_1.group === group_0).map(_temp5)
 		}, group_0));
 		$[26] = options;
 		$[27] = t13;
@@ -4885,13 +5508,13 @@ function FontRoleCard(t0) {
 	} else t17 = $[45];
 	return t17;
 }
-function _temp4(option_2) {
+function _temp5(option_2) {
 	return /* @__PURE__ */ jsx("option", {
 		value: option_2.name,
 		children: option_2.label
 	}, option_2.name);
 }
-function _temp3(t0) {
+function _temp4(t0) {
 	const { group } = t0;
 	return group;
 }
@@ -5266,7 +5889,7 @@ function ShadesGenerator(t0) {
 	if ($[2] !== initial || $[3] !== steps || $[4] !== text || $[5] !== title) {
 		const hex = text.trim().replace(/^#/, "");
 		base = /^[0-9a-f]{6}$/i.test(hex) ? toRgb(`#${hex}`) : /^[0-9a-f]{3}$/i.test(hex) ? toRgb(`#${hex.replace(/./g, "$&$&")}`) : null;
-		shades = base ? generateShades(base, steps.map(_temp)) : null;
+		shades = base ? generateShades(base, steps.map(_temp$1)) : null;
 		pending = !!shades && base !== initial;
 		t8 = "studio-shades";
 		t9 = "group";
@@ -5437,13 +6060,13 @@ function ShadesGenerator(t0) {
 	} else t18 = $[51];
 	return t18;
 }
-function _temp(t0) {
+function _temp$1(t0) {
 	const { step } = t0;
 	return step;
 }
 //#endregion
 //#region src/configurator/ComponentPreview.tsx
-const ComponentGallery = lazy(() => import("./ComponentGallery-D4U5hXZL.js"));
+const ComponentGallery = lazy(() => import("./ComponentGallery-CzKU899_.js"));
 /** Every component, styled by a configuration; the configurator's preview and the App Canvas Components view. */
 function ComponentPreview(t0) {
 	const $ = c(14);
@@ -5503,6 +6126,543 @@ function ComponentPreview(t0) {
 	return t8;
 }
 //#endregion
+//#region src/configurator/ThemeVersionControls.tsx
+/** Switches, creates, renames and deletes theme versions from the configurator's title row. */
+function ThemeVersionControls(t0) {
+	const $ = c(84);
+	const { state } = t0;
+	const { themes, setThemes, active, ready, error, status } = state;
+	const createTrigger = useRef(null);
+	const editTrigger = useRef(null);
+	const [action, setAction] = useState(null);
+	const [name, setName] = useState("");
+	const disabled = !ready;
+	let t1;
+	if ($[0] !== active.name) {
+		t1 = (next) => {
+			setName(next === "create" ? `${active.name} copy` : active.name);
+			setAction(next);
+		};
+		$[0] = active.name;
+		$[1] = t1;
+	} else t1 = $[1];
+	const open = t1;
+	const title = action === "create" ? "New theme version" : action === "delete" ? "Delete theme version?" : "Edit theme version";
+	let t2;
+	if ($[2] !== action || $[3] !== active.configuration || $[4] !== active.id || $[5] !== disabled || $[6] !== name || $[7] !== setThemes) {
+		t2 = () => {
+			if (disabled || !action) return;
+			if (action !== "delete" && !name.trim()) return;
+			if (action === "create") {
+				const created = createThemeVersion(name, crypto.randomUUID(), active.configuration);
+				setThemes((current) => ({
+					...current,
+					versions: [...current.versions, created],
+					activeVersionId: created.id
+				}));
+			} else if (action === "delete") setThemes((current_0) => {
+				if (current_0.versions.length < 2) return current_0;
+				const remaining = current_0.versions.filter((version) => version.id !== active.id);
+				return {
+					...current_0,
+					versions: remaining,
+					activeVersionId: remaining[0].id
+				};
+			});
+			else setThemes((current_1) => ({
+				...current_1,
+				versions: current_1.versions.map((version_0) => version_0.id === active.id ? {
+					...version_0,
+					name: name.trim()
+				} : version_0)
+			}));
+			setAction(null);
+		};
+		$[2] = action;
+		$[3] = active.configuration;
+		$[4] = active.id;
+		$[5] = disabled;
+		$[6] = name;
+		$[7] = setThemes;
+		$[8] = t2;
+	} else t2 = $[8];
+	const save = t2;
+	let t3;
+	if ($[9] !== setThemes) {
+		t3 = (id) => {
+			if (id !== null) setThemes((current_2) => ({
+				...current_2,
+				activeVersionId: String(id)
+			}));
+		};
+		$[9] = setThemes;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs($7705c033048f6da7$export$353f5b6fc5456de1, {
+			className: "studio-version-trigger",
+			children: [/* @__PURE__ */ jsx($c8bb816105474884$export$e288731fd71264f0, {}), /* @__PURE__ */ jsx(ChevronDown, {
+				size: 12,
+				"aria-hidden": "true"
+			})]
+		});
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== themes.versions) {
+		t5 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+			className: "studio-version-popover",
+			placement: "bottom start",
+			children: /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
+				className: "studio-version-list",
+				items: themes.versions,
+				children: _temp
+			})
+		});
+		$[12] = themes.versions;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== active.id || $[15] !== disabled || $[16] !== t3 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs($c8bb816105474884$export$ef9b1a59e592288f, {
+			"aria-label": "Theme version",
+			className: "studio-version-select",
+			selectedKey: active.id,
+			isDisabled: disabled,
+			onSelectionChange: t3,
+			children: [t4, t5]
+		});
+		$[14] = active.id;
+		$[15] = disabled;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== open) {
+		t7 = () => open("create");
+		$[19] = open;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Plus, { size: 14 });
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== disabled || $[23] !== t7) {
+		t9 = /* @__PURE__ */ jsx("button", {
+			ref: createTrigger,
+			type: "button",
+			className: "studio-version-action",
+			"aria-label": "Add theme version",
+			title: "Add theme version",
+			disabled,
+			onClick: t7,
+			children: t8
+		});
+		$[22] = disabled;
+		$[23] = t7;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== open) {
+		t10 = () => open("rename");
+		$[25] = open;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(Pencil, { size: 14 });
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== disabled || $[29] !== t10) {
+		t12 = /* @__PURE__ */ jsx("button", {
+			ref: editTrigger,
+			type: "button",
+			className: "studio-version-action",
+			"aria-label": "Edit theme version",
+			title: "Edit theme version",
+			disabled,
+			onClick: t10,
+			children: t11
+		});
+		$[28] = disabled;
+		$[29] = t10;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== error) {
+		t13 = error && /* @__PURE__ */ jsx("p", {
+			className: "studio-version-error",
+			role: "alert",
+			children: error
+		});
+		$[31] = error;
+		$[32] = t13;
+	} else t13 = $[32];
+	const t14 = action === "create" ? createTrigger : editTrigger;
+	const t15 = action !== null;
+	let t16;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = (isOpen) => {
+			if (!isOpen) setAction(null);
+		};
+		$[33] = t16;
+	} else t16 = $[33];
+	const t17 = action === "delete" ? "alertdialog" : "dialog";
+	let t18;
+	if ($[34] !== save) {
+		t18 = (event) => {
+			event.preventDefault();
+			save();
+		};
+		$[34] = save;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== title) {
+		t19 = /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+			slot: "title",
+			children: title
+		});
+		$[36] = title;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close theme version dialog",
+			onClick: () => setAction(null),
+			children: /* @__PURE__ */ jsx(X, { size: 12 })
+		});
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== t19) {
+		t21 = /* @__PURE__ */ jsxs("header", {
+			className: "studio-version-dialog-heading",
+			children: [t19, t20]
+		});
+		$[39] = t19;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== action || $[42] !== active.name || $[43] !== name) {
+		t22 = action === "delete" ? /* @__PURE__ */ jsxs("p", { children: [
+			"Delete “",
+			active.name,
+			"” and its saved theme?"
+		] }) : /* @__PURE__ */ jsxs("label", { children: ["Version name", /* @__PURE__ */ jsx("input", {
+			autoFocus: true,
+			value: name,
+			maxLength: 80,
+			placeholder: "Version name",
+			onChange: (event_0) => setName(event_0.target.value),
+			required: true
+		})] });
+		$[41] = action;
+		$[42] = active.name;
+		$[43] = name;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== action || $[46] !== active.name) {
+		t23 = action === "create" && /* @__PURE__ */ jsxs("p", {
+			className: "studio-version-hint",
+			children: [
+				"Starts as a copy of “",
+				active.name,
+				"”."
+			]
+		});
+		$[45] = action;
+		$[46] = active.name;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== action || $[49] !== themes.versions) {
+		t24 = action === "rename" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "studio-version-delete",
+			disabled: themes.versions.length < 2,
+			onClick: () => setAction("delete"),
+			children: [/* @__PURE__ */ jsx(Trash, { size: 12 }), " Delete version"]
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			autoFocus: action === "delete",
+			onClick: () => action === "delete" ? setAction("rename") : setAction(null),
+			children: action === "delete" ? "Back" : "Cancel"
+		});
+		$[48] = action;
+		$[49] = themes.versions;
+		$[50] = t24;
+	} else t24 = $[50];
+	const t25 = action === "delete" ? "is-danger" : "is-primary";
+	let t26;
+	if ($[51] !== action || $[52] !== disabled || $[53] !== name) {
+		t26 = disabled || action !== "delete" && !name.trim();
+		$[51] = action;
+		$[52] = disabled;
+		$[53] = name;
+		$[54] = t26;
+	} else t26 = $[54];
+	const t27 = action === "create" ? "Create version" : action === "delete" ? "Delete" : "Save";
+	let t28;
+	if ($[55] !== t25 || $[56] !== t26 || $[57] !== t27) {
+		t28 = /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			className: t25,
+			disabled: t26,
+			children: t27
+		});
+		$[55] = t25;
+		$[56] = t26;
+		$[57] = t27;
+		$[58] = t28;
+	} else t28 = $[58];
+	let t29;
+	if ($[59] !== t24 || $[60] !== t28) {
+		t29 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-version-dialog-actions",
+			children: [t24, t28]
+		});
+		$[59] = t24;
+		$[60] = t28;
+		$[61] = t29;
+	} else t29 = $[61];
+	let t30;
+	if ($[62] !== t18 || $[63] !== t21 || $[64] !== t22 || $[65] !== t23 || $[66] !== t29) {
+		t30 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: t18,
+			children: [
+				t21,
+				t22,
+				t23,
+				t29
+			]
+		});
+		$[62] = t18;
+		$[63] = t21;
+		$[64] = t22;
+		$[65] = t23;
+		$[66] = t29;
+		$[67] = t30;
+	} else t30 = $[67];
+	let t31;
+	if ($[68] !== action || $[69] !== t17 || $[70] !== t30 || $[71] !== title) {
+		t31 = /* @__PURE__ */ jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+			"aria-label": title,
+			role: t17,
+			children: t30
+		}, action);
+		$[68] = action;
+		$[69] = t17;
+		$[70] = t30;
+		$[71] = title;
+		$[72] = t31;
+	} else t31 = $[72];
+	let t32;
+	if ($[73] !== t14 || $[74] !== t15 || $[75] !== t31) {
+		t32 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+			triggerRef: t14,
+			placement: "bottom start",
+			offset: 6,
+			className: "studio-version-popover studio-version-dialog",
+			isOpen: t15,
+			onOpenChange: t16,
+			children: t31
+		});
+		$[73] = t14;
+		$[74] = t15;
+		$[75] = t31;
+		$[76] = t32;
+	} else t32 = $[76];
+	let t33;
+	if ($[77] !== status || $[78] !== t12 || $[79] !== t13 || $[80] !== t32 || $[81] !== t6 || $[82] !== t9) {
+		t33 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-version-picker",
+			title: status,
+			children: [
+				t6,
+				t9,
+				t12,
+				t13,
+				t32
+			]
+		});
+		$[77] = status;
+		$[78] = t12;
+		$[79] = t13;
+		$[80] = t32;
+		$[81] = t6;
+		$[82] = t9;
+		$[83] = t33;
+	} else t33 = $[83];
+	return t33;
+}
+function _temp(version_1) {
+	return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
+		id: version_1.id,
+		textValue: version_1.name,
+		className: "studio-version-item",
+		children: version_1.name
+	});
+}
+//#endregion
+//#region src/configurator/useThemeVersions.ts
+/** The editor only needs differences from the repository base theme. */
+function withoutDefaults(value, defaults) {
+	const differing = (mode) => Object.fromEntries(Object.entries(value.theme[mode]).filter(([name, item]) => item !== defaults[mode][name]));
+	return {
+		...value,
+		theme: {
+			light: differing("light"),
+			dark: differing("dark"),
+			theme: differing("theme")
+		}
+	};
+}
+/**
+* Named theme versions kept in `povio.themes.json` (or this browser when no writer is connected).
+* Loads the active version into the configuration and records every edit back into it.
+*/
+function useThemeVersions(t0) {
+	const $ = c(26);
+	const enabled = t0 === void 0 ? true : t0;
+	let t1;
+	if ($[0] !== enabled) {
+		t1 = {
+			key: "povio-ui-theme-versions",
+			metaName: themeVersionsMetaName,
+			field: "themes",
+			parse: parseThemeVersions,
+			noun: "theme versions",
+			enabled
+		};
+		$[0] = enabled;
+		$[1] = t1;
+	} else t1 = $[1];
+	const storage = useRepositoryStorage(t1);
+	const { value: themes, setValue: setThemes, ready } = storage;
+	let t2;
+	if ($[2] !== themes.activeVersionId || $[3] !== themes.versions) {
+		t2 = themes.versions.find((version) => version.id === themes.activeVersionId) ?? themes.versions[0];
+		$[2] = themes.activeVersionId;
+		$[3] = themes.versions;
+		$[4] = t2;
+	} else t2 = $[4];
+	const active = t2;
+	const { currentConfiguration, replaceConfiguration, defaults } = useUIConfiguration();
+	const loaded = useRef(null);
+	const t3 = active.id;
+	let t4;
+	if ($[5] !== defaults) {
+		t4 = JSON.stringify(defaults);
+		$[5] = defaults;
+		$[6] = t4;
+	} else t4 = $[6];
+	const key = `${t3}:${t4}`;
+	let t5;
+	if ($[7] !== active.configuration) {
+		t5 = JSON.stringify(active.configuration);
+		$[7] = active.configuration;
+		$[8] = t5;
+	} else t5 = $[8];
+	const saved = t5;
+	let t6;
+	let t7;
+	if ($[9] !== active.configuration || $[10] !== active.id || $[11] !== currentConfiguration || $[12] !== defaults || $[13] !== enabled || $[14] !== key || $[15] !== ready || $[16] !== replaceConfiguration || $[17] !== saved || $[18] !== setThemes) {
+		t6 = () => {
+			if (!enabled || !ready) return;
+			if (!loaded.current || loaded.current.key !== key || loaded.current.saved !== saved) {
+				const value = active.configuration ?? (loaded.current ? emptyConfiguration() : currentConfiguration);
+				const sameValues = !!loaded.current && loaded.current.versionId === active.id && loaded.current.saved === saved;
+				loaded.current = {
+					key,
+					versionId: active.id,
+					saved
+				};
+				replaceConfiguration(withoutDefaults(value, defaults), false, !sameValues);
+				return;
+			}
+			const snapshot = {
+				...currentConfiguration,
+				theme: {
+					light: {
+						...defaults.light,
+						...currentConfiguration.theme.light
+					},
+					dark: {
+						...defaults.dark,
+						...currentConfiguration.theme.dark
+					},
+					theme: {
+						...defaults.theme,
+						...currentConfiguration.theme.theme
+					}
+				}
+			};
+			const serialized = JSON.stringify(snapshot);
+			if (serialized === saved) return;
+			loaded.current.saved = serialized;
+			setThemes((current) => ({
+				...current,
+				versions: current.versions.map((version_0) => version_0.id === active.id ? {
+					...version_0,
+					configuration: structuredClone(snapshot)
+				} : version_0)
+			}));
+		};
+		t7 = [
+			enabled,
+			ready,
+			key,
+			saved,
+			active.id,
+			active.configuration,
+			defaults,
+			currentConfiguration,
+			replaceConfiguration,
+			setThemes
+		];
+		$[9] = active.configuration;
+		$[10] = active.id;
+		$[11] = currentConfiguration;
+		$[12] = defaults;
+		$[13] = enabled;
+		$[14] = key;
+		$[15] = ready;
+		$[16] = replaceConfiguration;
+		$[17] = saved;
+		$[18] = setThemes;
+		$[19] = t6;
+		$[20] = t7;
+	} else {
+		t6 = $[19];
+		t7 = $[20];
+	}
+	useLayoutEffect(t6, t7);
+	let t8;
+	if ($[21] !== active || $[22] !== setThemes || $[23] !== storage || $[24] !== themes) {
+		t8 = {
+			...storage,
+			themes,
+			setThemes,
+			active
+		};
+		$[21] = active;
+		$[22] = setThemes;
+		$[23] = storage;
+		$[24] = themes;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
+}
+//#endregion
 //#region src/configurator/UIConfigurator.tsx
 const colorNamespaces = {
 	surface: "Surfaces",
@@ -5817,7 +6977,7 @@ function PopoutOverlay(t0) {
 	} else t3 = $[5];
 	return t3;
 }
-function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating, onPopout, onDock, onMinimize, popupBlocked }) {
+function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating, onPopout, onDock, popupBlocked, themeVersions }) {
 	const Overlay = poppedOut || floating ? PopoutOverlay : $8b8d26808cb8cb53$export$8948f78d83984c69;
 	const Surface = poppedOut || floating ? "div" : $8b8d26808cb8cb53$export$2b77a92f1a5ad772;
 	const studioWindow = useStudioWindow(windowBounds, !poppedOut);
@@ -5837,6 +6997,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 	const [mode, setMode] = useState(remembered.mode ?? "light");
 	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
 	const [loadedFonts, refreshLoadedFonts] = useLoadedFonts();
+	const [fontsourceFamilies, setFontsourceFamilies] = useState([]);
 	const [editorWidth, setEditorWidth] = useState(remembered.editorWidth);
 	const [confirmingReset, setConfirmingReset] = useState(false);
 	const [nothingToReset, setNothingToReset] = useState(false);
@@ -5864,6 +7025,23 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 	useEffect(() => {
 		setThemeWriter(getThemeWriter());
 	}, []);
+	const [componentWriter, setComponentWriter] = useState(null);
+	const [repositoryComponents, setRepositoryComponents] = useState(null);
+	useEffect(() => {
+		const writer = getComponentConfigurationWriter();
+		setComponentWriter(writer);
+		if (!writer) return;
+		let alive = true;
+		readComponentConfiguration(writer).then(({ configuration, revision: revision_0 }) => {
+			if (alive) setRepositoryComponents({
+				json: canonicalJSON(configuration ?? emptyComponentConfiguration()),
+				revision: revision_0
+			});
+		}).catch(() => {});
+		return () => {
+			alive = false;
+		};
+	}, []);
 	const [exportTab, setExportTab] = useState(remembered.exportTab ?? "css");
 	const editorRef = useRef(null);
 	const previewRef = useRef(null);
@@ -5901,6 +7079,18 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 	const exportRef = useRef(null);
 	const changedCount = Object.keys(draft.overrides ?? {}).length + Object.values(draft.theme).reduce((count, tokens) => count + Object.keys(tokens).length, 0) + Object.values(draft.config).reduce((count_0, value) => count_0 + (typeof value === "object" && value !== null ? Object.keys(value).length : 1), 0);
 	const config = inherited;
+	const components = {
+		config: draft.config,
+		overrides: draft.overrides ?? {}
+	};
+	const componentsJson = canonicalJSON(components);
+	const componentsDiffer = !!componentWriter && !!repositoryComponents && componentsJson !== repositoryComponents.json;
+	const themeCss = exportCss(draft.theme, defaults);
+	const themeDiffers = [
+		"light",
+		"dark",
+		"theme"
+	].some((mode_0) => Object.keys(parseThemeCss(themeCss)[mode_0]).length > 0);
 	const exportText = exportTab === "css" ? exportCss(draft.theme, defaults) : exportTab === "overrides" ? exportCvaEdits(draft.overrides) : `import { UIConfig } from "@povio/ui/ui-config";\n\nconst config = ${JSON.stringify(draft.config, null, 2)} satisfies Partial<UIConfig.Options>;\n\n// Wrap your application:\n// <UIConfig.Provider config={config}>{children}</UIConfig.Provider>\n`;
 	const changeSection = (next) => {
 		if (compactPreview && bodyRef.current?.parentElement) bodyRef.current.parentElement.scrollTop = 0;
@@ -6174,6 +7364,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		const options = [
 			...themeFonts,
 			...loadedFonts.filter((font) => !themeFonts.some(({ value: value_11 }) => value_11 === font.value)),
+			...fontsourceFamilies.filter((font_0) => !loadedFonts.some((loaded) => loaded.label === font_0.label)),
 			...systemFonts
 		];
 		const roleLabels = {
@@ -6196,6 +7387,23 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 						highlighted: highlightedToken === name_24
 					}, `${revision}-${resetRevision}-${name_24}`))
 				}),
+				/* @__PURE__ */ jsx(FontsourcePicker, {
+					roles: roles.map(([token_0]) => ({
+						token: token_0,
+						label: roleLabels[token_0] ?? labelFor(token_0).replace(/^font /, "")
+					})),
+					onAdded: (font_1, role) => {
+						const value_13 = `${JSON.stringify(font_1.family)}, sans-serif`;
+						setFontsourceFamilies((current_12) => [...current_12.filter((item) => item.name !== `fontsource:${font_1.packageName}`), {
+							name: `fontsource:${font_1.packageName}`,
+							label: font_1.family,
+							value: value_13,
+							group: "Fontsource fonts"
+						}]);
+						refreshLoadedFonts();
+						if (role) setToken(role, value_13);
+					}
+				}),
 				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
 				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_2) => renderToken(entry_2))] })
 			]
@@ -6272,18 +7480,18 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 					/* @__PURE__ */ jsxs("header", {
 						className: "studio-topbar",
 						...poppedOut ? {} : studioWindow.dragArea,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "studio-title",
-								children: /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
-									slot: "title",
-									children: "Povio UI Configuration"
-								})
-							}),
-							/* @__PURE__ */ jsxs("nav", {
-								className: "studio-nav",
-								"aria-label": "Configuration sections",
-								children: [/* @__PURE__ */ jsxs("div", {
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "studio-title",
+							children: [/* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+								slot: "title",
+								className: "studio-visually-hidden",
+								children: "Povio UI Configuration"
+							}), /* @__PURE__ */ jsx(ThemeVersionControls, { state: themeVersions })]
+						}), /* @__PURE__ */ jsxs("nav", {
+							className: "studio-nav",
+							"aria-label": "Configuration sections",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
 									className: "studio-section-tabs",
 									children: [
 										navSections.map((group_5) => /* @__PURE__ */ jsx("button", {
@@ -6301,7 +7509,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											children: "Advanced"
 										})
 									]
-								}), !componentsHosted && /* @__PURE__ */ jsx("button", {
+								}),
+								!componentsHosted && /* @__PURE__ */ jsx("button", {
 									type: "button",
 									className: "studio-preview-tab",
 									"aria-current": compactPreview ? "page" : void 0,
@@ -6311,11 +7520,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 										if (dialog) dialog.scrollTop = 0;
 									},
 									children: "Components"
-								})]
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "studio-topbar-controls",
-								children: /* @__PURE__ */ jsxs("label", {
+								}),
+								/* @__PURE__ */ jsxs("label", {
 									className: "studio-search",
 									title: "Search tokens",
 									children: [
@@ -6342,8 +7548,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 										})
 									]
 								})
-							})
-						]
+							]
+						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						ref: bodyRef,
@@ -6381,8 +7587,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											role: "tab",
 											"aria-selected": !searching && tab_0 === activeSectionTab,
 											disabled: searching,
-											onClick: () => setSectionTabs((current_12) => ({
-												...current_12,
+											onClick: () => setSectionTabs((current_13) => ({
+												...current_13,
 												[section]: tab_0
 											})),
 											children: [tab_0, groupChanged([...groupedEntries].filter(([key_14]) => tabFor(key_14) === tab_0).flatMap(([, group_6]) => group_6.entries)) && /* @__PURE__ */ jsx("span", {
@@ -6570,10 +7776,10 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											children: [/* @__PURE__ */ jsxs("span", { children: ["Use static inputs until interaction", /* @__PURE__ */ jsx("small", { children: "Reduce work when rendering large forms." })] }), /* @__PURE__ */ jsx("input", {
 												type: "checkbox",
 												checked: config.renderStaticInput,
-												onChange: (event_5) => setDraft((current_13) => ({
-													...current_13,
+												onChange: (event_5) => setDraft((current_14) => ({
+													...current_14,
 													config: {
-														...current_13.config,
+														...current_14.config,
 														renderStaticInput: event_5.target.checked
 													}
 												}))
@@ -6758,19 +7964,43 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 							}),
 							/* @__PURE__ */ jsx("button", {
 								className: "studio-primary",
-								"aria-label": "Close UI configuration",
-								onClick: apply,
-								children: "Close"
+								disabled: !(themeWriter && themeDiffers || componentsDiffer) || savingTheme || !!Object.keys(invalidFields).length,
+								title: !themeWriter && !componentWriter ? "Applying needs the uiConfigurator Vite plugin" : themeWriter && themeDiffers || componentsDiffer ? `Write this version to ${[themeWriter && themeDiffers && themeWriter.file, componentsDiffer && componentWriter?.file].filter(Boolean).join(" and ")}` : "The repository already matches this version",
+								onClick: async () => {
+									setSavingTheme(true);
+									setMessage("");
+									const written = [];
+									try {
+										if (themeWriter && themeDiffers) {
+											await saveThemeCss(themeWriter, themeCss);
+											written.push(themeWriter.file);
+										}
+										if (componentsDiffer && componentWriter && repositoryComponents) {
+											const revision_1 = await saveComponentConfiguration(componentWriter, components, repositoryComponents.revision);
+											setRepositoryComponents({
+												json: componentsJson,
+												revision: revision_1
+											});
+											written.push(componentWriter.file);
+										}
+										setMessage(`Applied to ${written.join(" and ")}.`);
+									} catch (error_0) {
+										setMessage(error_0 instanceof Error ? error_0.message : "Could not apply theme.");
+									} finally {
+										setSavingTheme(false);
+									}
+								},
+								children: savingTheme ? "Applying…" : "Apply theme"
 							})
 						]
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "studio-window-minimize",
-						"aria-label": "Minimize UI configuration",
-						title: "Minimize to floating button",
-						onClick: onMinimize,
-						children: /* @__PURE__ */ jsx(Minus, { size: 17 })
+						className: "studio-window-close",
+						"aria-label": "Close UI configuration",
+						title: "Close",
+						onClick: apply,
+						children: /* @__PURE__ */ jsx(X, { size: 17 })
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -6785,8 +8015,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 						className: "studio-window-grip",
 						"aria-label": "Move UI configuration",
 						title: "Drag to move, or use arrow keys",
-						...studioWindow.move,
-						children: /* @__PURE__ */ jsx(GripVertical, { size: 20 })
+						...studioWindow.move
 					}), windowEdges.map((edge) => /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: `studio-window-resize studio-window-resize-${edge}`,
@@ -6847,12 +8076,8 @@ const floatingDefault = {
 };
 const hostedFloatingWidth = 360;
 function UIConfigurationModal() {
-	const { isOpen, revision, open, openFloating, floating, componentsHosted } = useUIConfiguration();
-	const [minimized, setMinimized] = useState(false);
-	const [hasLauncher, setHasLauncher] = useState(false);
-	const restorePopout = useRef(false);
-	const launcherPosition = useRef(null);
-	useEffect(() => setMinimized(false), [revision]);
+	const { isOpen, revision, floating, componentsHosted } = useUIConfiguration();
+	const themeVersions = useThemeVersions();
 	const memory = useRef({});
 	const windowBounds = useRef(null);
 	const floatingBounds = useRef(floatingDefault);
@@ -6860,39 +8085,17 @@ function UIConfigurationModal() {
 		...floatingDefault,
 		width: hostedFloatingWidth
 	};
-	const popout = useStudioPopout(isOpen && !minimized);
-	if ((!isOpen || minimized) && hasLauncher && !componentsHosted) return createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
-		position: launcherPosition,
-		onOpen: () => {
-			setMinimized(false);
-			if (!isOpen) {
-				if (floating) openFloating();
-				else open();
-			}
-			if (restorePopout.current) popout.open();
-		}
-	}), document.body);
-	if (!isOpen || minimized) return null;
+	const popout = useStudioPopout(isOpen);
+	if (!isOpen) return null;
 	const content = /* @__PURE__ */ jsx(ConfigurationModalContent, {
 		memory,
 		windowBounds: floating ? floatingBounds : windowBounds,
 		floating,
 		poppedOut: !!popout.popup,
-		onPopout: () => {
-			restorePopout.current = true;
-			popout.open();
-		},
-		onDock: () => {
-			restorePopout.current = false;
-			popout.dock();
-		},
-		onMinimize: () => {
-			restorePopout.current = !!popout.popup;
-			setHasLauncher(true);
-			setMinimized(true);
-			popout.dock();
-		},
-		popupBlocked: popout.blocked
+		onPopout: popout.open,
+		onDock: popout.dock,
+		popupBlocked: popout.blocked,
+		themeVersions
 	}, revision);
 	return popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
 		value: true,
@@ -6903,4 +8106,4 @@ function UIConfigurationModal() {
 	}), popout.popup.document.body) : floating ? createPortal(content, document.body) : content;
 }
 //#endregion
-export { inspectElement as a, HighlightOverlay as c, emptyConfiguration as d, useUIConfiguration as f, Moon as g, Pin as h, saveThemeCss as i, InspectorDetails as l, Plus as m, ColorModeSwitch as n, inspectTokens as o, Sun as p, getThemeWriter as r, getBoxHighlights as s, UIConfigurationModal as t, UIConfigurationProvider as u };
+export { Moon as _, inspectElement as a, HighlightOverlay as c, useUIConfiguration as d, Trash as f, Pencil as g, Pin as h, resolveUIConfiguration as i, InspectorDetails as l, Plus as m, ColorModeSwitch as n, inspectTokens as o, Sun as p, useRepositoryStorage as r, getBoxHighlights as s, UIConfigurationModal as t, UIConfigurationProvider as u };