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

package/dist/config/ui-configurator-vite.js

@@ -1,154 +1,26 @@
+import { createRequire } from "node:module";
 import { createHash, randomUUID } from "node:crypto";
-import { lstat, readFile, realpath, rename, unlink, writeFile } from "node:fs/promises";
-import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
-//#region src/app-canvas/manifest.ts
-function createCanvasWorkspace(name, id) {
-	return {
-		id,
-		name: name.trim() || "Workspace",
-		enabledPages: null,
-		positions: {}
-	};
-}
-function createCanvasManifest() {
-	return {
-		version: 2,
-		workspaces: [createCanvasWorkspace("All pages", "default")],
-		activeWorkspaceId: "default",
-		examples: {},
-		breakpoint: "desktop"
-	};
-}
-function isRecord(value) {
-	return value !== null && typeof value === "object" && !Array.isArray(value);
-}
-function isJSON(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;
-	ancestors.add(value);
-	const valid = Object.values(value).every((child) => isJSON(child, ancestors, depth + 1));
-	ancestors.delete(value);
-	return valid;
-}
-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 parseCanvasConfiguration(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));
-}
-function parsePositions(input) {
-	return Object.fromEntries(Object.entries(isRecord(input) ? input : {}).flatMap(([breakpoint, entries]) => {
-		if (!isRecord(entries)) return [];
-		return [[breakpoint, Object.fromEntries(Object.entries(entries).flatMap(([id, point]) => isRecord(point) && typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y) ? [[id, {
-			x: point.x,
-			y: point.y
-		}]] : []))]];
-	}));
-}
-/** Sanitize either stored JSON text or an imported value, migrating v1 positions into the default workspace. */
-function parseCanvasManifest(input) {
-	const fallback = createCanvasManifest();
-	let value = input;
-	if (typeof value === "string") try {
-		value = JSON.parse(value);
-	} catch {
-		return fallback;
-	}
-	if (!isRecord(value) || value.version !== 1 && value.version !== 2) return fallback;
-	const examples = Object.fromEntries(Object.entries(isRecord(value.examples) ? value.examples : {}).flatMap(([id, example]) => {
-		if (!isRecord(example)) return [];
-		const clean = {};
-		if (typeof example.title === "string") clean.title = example.title;
-		if (isRecord(example.params)) clean.params = Object.fromEntries(Object.entries(example.params).filter((entry) => typeof entry[1] === "string"));
-		if (isRecord(example.search)) clean.search = Object.fromEntries(Object.entries(example.search).filter(([, item]) => isJSON(item)));
-		return [[id, clean]];
-	}));
-	const workspaces = [];
-	const ids = /* @__PURE__ */ new Set();
-	if (value.version === 1) workspaces.push({
-		...createCanvasWorkspace("All pages", "default"),
-		positions: parsePositions(value.positions)
-	});
-	else if (Array.isArray(value.workspaces)) for (const entry of value.workspaces) {
-		if (!isRecord(entry) || typeof entry.id !== "string" || !entry.id.trim() || ids.has(entry.id)) continue;
-		ids.add(entry.id);
-		const configuration = parseCanvasConfiguration(entry.configuration);
-		workspaces.push({
-			id: entry.id,
-			name: typeof entry.name === "string" && entry.name.trim() ? entry.name.trim() : "Workspace",
-			enabledPages: Array.isArray(entry.enabledPages) ? [...new Set(entry.enabledPages.filter((id) => typeof id === "string" && id.length > 0))] : null,
-			positions: parsePositions(entry.positions),
-			...configuration ? { configuration } : {}
-		});
-	}
-	if (!workspaces.length) workspaces.push(createCanvasWorkspace("All pages", "default"));
-	return {
-		version: 2,
-		workspaces,
-		activeWorkspaceId: typeof value.activeWorkspaceId === "string" && workspaces.some((workspace) => workspace.id === value.activeWorkspaceId) ? value.activeWorkspaceId : workspaces[0].id,
-		examples,
-		breakpoint: typeof value.breakpoint === "string" && value.breakpoint.length > 0 ? value.breakpoint : fallback.breakpoint
-	};
-}
-//#endregion
-//#region src/app-canvas/storage-protocol.ts
-const canvasStorageMetaName = "povio-ui-canvas-storage";
+import { access, lstat, readFile, realpath, rename, unlink, writeFile } from "node:fs/promises";
+import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+//#region src/configurator/repository-storage-protocol.ts
+const componentConfigurationMetaName = "povio-ui-component-configuration";
+/** 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/app-canvas/storage-vite.ts
+//#region src/configurator/repository-storage-vite.ts
 var StorageError = class extends Error {
 	constructor(message, status) {
 		super(message);
 		this.status = status;
 	}
 };
-const maxBytes = 262144;
-const inside = (root, path) => {
+const inside$1 = (root, path) => {
 	const rel = relative(root, path);
 	return !!rel && !isAbsolute(rel) && rel !== ".." && !rel.startsWith(`..${sep}`);
 };
-const record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
-function validPositions(value) {
-	return record(value) && Object.values(value).every((entries) => record(entries) && Object.values(entries).every((position) => record(position) && typeof position.x === "number" && Number.isFinite(position.x) && typeof position.y === "number" && Number.isFinite(position.y)));
-}
-function decodeManifest(value) {
-	if (!record(value) || ![1, 2].includes(Number(value.version)) || typeof value.breakpoint !== "string" || !record(value.examples)) throw new StorageError("Invalid canvas manifest.", 400);
-	if (value.version === 1) {
-		if (!validPositions(value.positions)) throw new StorageError("Invalid canvas positions.", 400);
-	} else if (value.version !== 2 || !Array.isArray(value.workspaces) || !value.workspaces.length || typeof value.activeWorkspaceId !== "string" || !value.workspaces.every((workspace) => record(workspace) && typeof workspace.id === "string" && workspace.id.length > 0 && typeof workspace.name === "string" && (workspace.enabledPages === null || Array.isArray(workspace.enabledPages) && workspace.enabledPages.every((id) => typeof id === "string")) && validPositions(workspace.positions) && (workspace.configuration === void 0 || parseCanvasConfiguration(workspace.configuration) !== void 0))) throw new StorageError("Invalid canvas workspaces.", 400);
-	if (!Object.values(value.examples).every((example) => record(example) && (example.title === void 0 || typeof example.title === "string") && (example.params === void 0 || record(example.params) && Object.values(example.params).every((param) => typeof param === "string")) && (example.search === void 0 || record(example.search)))) throw new StorageError("Invalid canvas examples.", 400);
-	if (value.version === 2) {
-		const workspaces = value.workspaces;
-		if (new Set(workspaces.map((workspace) => workspace.id)).size !== workspaces.length || !workspaces.some((workspace) => workspace.id === value.activeWorkspaceId)) throw new StorageError("Invalid canvas workspace identity.", 400);
-	}
-	return parseCanvasManifest(value);
-}
+const record$2 = (value) => !!value && typeof value === "object" && !Array.isArray(value);
 const revisionOf = (text) => createHash("sha256").update(text).digest("hex");
 const respond$1 = (res, status, body) => {
 	res.writeHead(status, {
@@ -157,32 +29,33 @@ const respond$1 = (res, status, body) => {
 	});
 	res.end(JSON.stringify(body));
 };
-async function readBody(req) {
+async function readBody(req, label, maxBytes) {
 	let size = 0;
 	const chunks = [];
 	for await (const chunk of req) {
 		size += Buffer.byteLength(chunk);
-		if (size > maxBytes) throw new StorageError("Canvas manifest exceeds 256 KB.", 413);
+		if (size > maxBytes) throw new StorageError(`${label} file exceeds ${maxBytes / 1024} KB.`, 413);
 		chunks.push(Buffer.from(chunk));
 	}
 	try {
 		return JSON.parse(Buffer.concat(chunks).toString("utf8"));
 	} catch {
-		throw new StorageError("Expected JSON canvas data.", 400);
+		throw new StorageError(`Expected JSON ${label.toLowerCase()} data.`, 400);
 	}
 }
 /** Fixed-path development persistence only. Never commits or pushes repository changes. */
-async function configureCanvasStorage(server, filename = "povio.canvas.json") {
+async function configureRepositoryStorage(server, { filename, route, field, label, decode, maxBytes = 262144 }) {
+	const noun = label.toLowerCase();
 	const root = await realpath(server.config.root);
 	const filePath = resolve(root, filename);
 	const parent = dirname(filePath);
-	if (!inside(root, filePath) || !filePath.endsWith(".json")) throw new Error("Povio UI canvasFile must be a JSON file inside this app's Vite root.");
+	if (!inside$1(root, filePath) || !filePath.endsWith(".json")) throw new Error(`Povio UI ${noun} file must be a JSON file inside this app's Vite root.`);
 	const guard = async () => {
-		if (await realpath(parent) !== parent) throw new StorageError("Canvas file parent cannot be a symbolic link.", 409);
+		if (await realpath(parent) !== parent) throw new StorageError(`${label} file parent cannot be a symbolic link.`, 409);
 		try {
 			const stat = await lstat(filePath);
-			if (stat.isSymbolicLink() || !stat.isFile()) throw new StorageError("Canvas file must be a regular file, not a symbolic link.", 409);
-			if (stat.size > maxBytes) throw new StorageError("Canvas manifest exceeds 256 KB.", 413);
+			if (stat.isSymbolicLink() || !stat.isFile()) throw new StorageError(`${label} file must be a regular file, not a symbolic link.`, 409);
+			if (stat.size > maxBytes) throw new StorageError(`${label} file exceeds ${maxBytes / 1024} KB.`, 413);
 		} catch (error) {
 			if (error.code !== "ENOENT") throw error;
 		}
@@ -190,7 +63,7 @@ async function configureCanvasStorage(server, filename = "povio.canvas.json") {
 	await guard();
 	const file = relative(root, filePath).split(sep).join("/");
 	const connection = {
-		endpoint: `${new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/")}__povio_ui/canvas`,
+		endpoint: `${new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/")}__povio_ui/${route}`,
 		token: randomUUID(),
 		file
 	};
@@ -212,7 +85,7 @@ async function configureCanvasStorage(server, filename = "povio.canvas.json") {
 		}
 	};
 	const handle = async (req, res) => {
-		if (req.headers["x-povio-canvas-token"] !== connection.token) throw new StorageError("Invalid canvas storage token.", 403);
+		if (req.headers["x-povio-ui-storage-token"] !== connection.token) throw new StorageError(`Invalid ${noun} storage token.`, 403);
 		const origin = req.headers.origin;
 		let validOrigin = true;
 		if (origin) try {
@@ -220,18 +93,18 @@ async function configureCanvasStorage(server, filename = "povio.canvas.json") {
 		} catch {
 			validOrigin = false;
 		}
-		if (!validOrigin || req.headers["sec-fetch-site"] === "cross-site") throw new StorageError("Canvas storage requires the app's origin.", 403);
+		if (!validOrigin || req.headers["sec-fetch-site"] === "cross-site") throw new StorageError(`${label} storage requires the app's origin.`, 403);
 		if (req.method === "GET") {
 			await pending;
 			const current = await readCurrent();
-			let manifest = null;
+			let value = null;
 			if (current.text !== null) try {
-				manifest = decodeManifest(JSON.parse(current.text));
+				value = decode(JSON.parse(current.text));
 			} catch {
-				throw new StorageError("Repository canvas file is invalid. Correct it before saving.", 409);
+				throw new StorageError(`Repository ${noun} file is invalid. Correct it before saving.`, 409);
 			}
 			return respond$1(res, 200, {
-				manifest,
+				[field]: value,
 				revision: current.revision,
 				file
 			});
@@ -241,13 +114,13 @@ async function configureCanvasStorage(server, filename = "povio.canvas.json") {
 			throw new StorageError("Use GET or POST.", 405);
 		}
 		if (!req.headers["content-type"]?.startsWith("application/json")) throw new StorageError("Expected application/json.", 415);
-		const body = await readBody(req);
-		if (!record(body) || !(body.revision === null || typeof body.revision === "string")) throw new StorageError("Expected manifest and revision.", 400);
-		const manifest = decodeManifest(body.manifest);
-		const text = `${JSON.stringify(manifest, null, 2)}\n`;
-		if (Buffer.byteLength(text) > maxBytes) throw new StorageError("Canvas manifest exceeds 256 KB.", 413);
+		const body = await readBody(req, label, maxBytes);
+		if (!record$2(body) || !(body.revision === null || typeof body.revision === "string")) throw new StorageError(`Expected ${field} and revision.`, 400);
+		const value = decode(body[field]);
+		const text = `${JSON.stringify(value, null, 2)}\n`;
+		if (Buffer.byteLength(text) > maxBytes) throw new StorageError(`${label} file exceeds ${maxBytes / 1024} KB.`, 413);
 		const write = pending.then(async () => {
-			if ((await readCurrent()).revision !== body.revision) throw new StorageError("Canvas file changed. Reload its saved layout before saving again.", 409);
+			if ((await readCurrent()).revision !== body.revision) throw new StorageError(`${label} file changed. Reload it before saving again.`, 409);
 			const temporary = `${filePath}.povio-${randomUUID()}.tmp`;
 			try {
 				await writeFile(temporary, text, {
@@ -270,11 +143,479 @@ async function configureCanvasStorage(server, filename = "povio.canvas.json") {
 	};
 	server.middlewares.use((req, res, next) => {
 		if (req.url?.split("?")[0] !== connection.endpoint) return next();
-		handle(req, res).catch((error) => respond$1(res, error instanceof StorageError ? error.status : 500, { error: error instanceof Error ? error.message : "Could not access canvas file." }));
+		handle(req, res).catch((error) => respond$1(res, error instanceof StorageError ? error.status : 500, { error: error instanceof Error ? error.message : `Could not access ${noun} file.` }));
 	});
+	const isFile = (path) => resolve(path) === filePath;
 	return {
 		connection,
-		isStorageFile: (path) => path === filePath || path.startsWith(`${filePath}.povio-`)
+		isFile,
+		isStorageFile: (path) => isFile(path) || resolve(path).startsWith(`${filePath}.povio-`),
+		revisionOf
+	};
+}
+//#endregion
+//#region src/app-canvas/manifest.ts
+function createCanvasWorkspace(name, id) {
+	return {
+		id,
+		name: name.trim() || "Workspace",
+		enabledPages: null,
+		positions: {}
+	};
+}
+function createCanvasManifest() {
+	return {
+		version: 2,
+		workspaces: [createCanvasWorkspace("All pages", "default")],
+		activeWorkspaceId: "default",
+		examples: {},
+		breakpoint: "desktop"
+	};
+}
+function isRecord$1(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isJSON(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;
+	ancestors.add(value);
+	const valid = Object.values(value).every((child) => isJSON(child, ancestors, depth + 1));
+	ancestors.delete(value);
+	return valid;
+}
+function parsePositions(input) {
+	return Object.fromEntries(Object.entries(isRecord$1(input) ? input : {}).flatMap(([breakpoint, entries]) => {
+		if (!isRecord$1(entries)) return [];
+		return [[breakpoint, Object.fromEntries(Object.entries(entries).flatMap(([id, point]) => isRecord$1(point) && typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y) ? [[id, {
+			x: point.x,
+			y: point.y
+		}]] : []))]];
+	}));
+}
+/** Sanitize either stored JSON text or an imported value, migrating v1 positions into the default workspace. */
+function parseCanvasManifest(input) {
+	const fallback = createCanvasManifest();
+	let value = input;
+	if (typeof value === "string") try {
+		value = JSON.parse(value);
+	} catch {
+		return fallback;
+	}
+	if (!isRecord$1(value) || value.version !== 1 && value.version !== 2) return fallback;
+	const examples = Object.fromEntries(Object.entries(isRecord$1(value.examples) ? value.examples : {}).flatMap(([id, example]) => {
+		if (!isRecord$1(example)) return [];
+		const clean = {};
+		if (typeof example.title === "string") clean.title = example.title;
+		if (isRecord$1(example.params)) clean.params = Object.fromEntries(Object.entries(example.params).filter((entry) => typeof entry[1] === "string"));
+		if (isRecord$1(example.search)) clean.search = Object.fromEntries(Object.entries(example.search).filter(([, item]) => isJSON(item)));
+		return [[id, clean]];
+	}));
+	const workspaces = [];
+	const ids = /* @__PURE__ */ new Set();
+	if (value.version === 1) workspaces.push({
+		...createCanvasWorkspace("All pages", "default"),
+		positions: parsePositions(value.positions)
+	});
+	else if (Array.isArray(value.workspaces)) for (const entry of value.workspaces) {
+		if (!isRecord$1(entry) || typeof entry.id !== "string" || !entry.id.trim() || ids.has(entry.id)) continue;
+		ids.add(entry.id);
+		workspaces.push({
+			id: entry.id,
+			name: typeof entry.name === "string" && entry.name.trim() ? entry.name.trim() : "Workspace",
+			enabledPages: Array.isArray(entry.enabledPages) ? [...new Set(entry.enabledPages.filter((id) => typeof id === "string" && id.length > 0))] : null,
+			positions: parsePositions(entry.positions)
+		});
+	}
+	if (!workspaces.length) workspaces.push(createCanvasWorkspace("All pages", "default"));
+	return {
+		version: 2,
+		workspaces,
+		activeWorkspaceId: typeof value.activeWorkspaceId === "string" && workspaces.some((workspace) => workspace.id === value.activeWorkspaceId) ? value.activeWorkspaceId : workspaces[0].id,
+		examples,
+		breakpoint: typeof value.breakpoint === "string" && value.breakpoint.length > 0 ? value.breakpoint : fallback.breakpoint
+	};
+}
+//#endregion
+//#region src/app-canvas/storage-vite.ts
+const record$1 = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function validPositions(value) {
+	return record$1(value) && Object.values(value).every((entries) => record$1(entries) && Object.values(entries).every((position) => record$1(position) && typeof position.x === "number" && Number.isFinite(position.x) && typeof position.y === "number" && Number.isFinite(position.y)));
+}
+function decodeManifest(value) {
+	if (!record$1(value) || ![1, 2].includes(Number(value.version)) || typeof value.breakpoint !== "string" || !record$1(value.examples)) throw new StorageError("Invalid canvas manifest.", 400);
+	if (value.version === 1) {
+		if (!validPositions(value.positions)) throw new StorageError("Invalid canvas positions.", 400);
+	} else if (value.version !== 2 || !Array.isArray(value.workspaces) || !value.workspaces.length || typeof value.activeWorkspaceId !== "string" || !value.workspaces.every((workspace) => record$1(workspace) && typeof workspace.id === "string" && workspace.id.length > 0 && typeof workspace.name === "string" && (workspace.enabledPages === null || Array.isArray(workspace.enabledPages) && workspace.enabledPages.every((id) => typeof id === "string")) && validPositions(workspace.positions))) throw new StorageError("Invalid canvas workspaces.", 400);
+	if (!Object.values(value.examples).every((example) => record$1(example) && (example.title === void 0 || typeof example.title === "string") && (example.params === void 0 || record$1(example.params) && Object.values(example.params).every((param) => typeof param === "string")) && (example.search === void 0 || record$1(example.search)))) throw new StorageError("Invalid canvas examples.", 400);
+	if (value.version === 2) {
+		const workspaces = value.workspaces;
+		if (new Set(workspaces.map((workspace) => workspace.id)).size !== workspaces.length || !workspaces.some((workspace) => workspace.id === value.activeWorkspaceId)) throw new StorageError("Invalid canvas workspace identity.", 400);
+	}
+	return parseCanvasManifest(value);
+}
+/** Fixed-path development persistence for canvas workspaces. Never commits or pushes repository changes. */
+function configureCanvasStorage(server, filename = "povio.canvas.json") {
+	return configureRepositoryStorage(server, {
+		filename,
+		route: "canvas",
+		field: "manifest",
+		label: "Canvas",
+		decode: decodeManifest
+	});
+}
+//#endregion
+//#region src/app-canvas/storage-protocol.ts
+const canvasStorageMetaName = "povio-ui-canvas-storage";
+//#endregion
+//#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/theme-versions-vite.ts
+const record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function decodeThemeVersions(value) {
+	if (!record(value) || value.version !== 1 || !Array.isArray(value.versions) || !value.versions.length || typeof value.activeVersionId !== "string" || !value.versions.every((version) => record(version) && typeof version.id === "string" && version.id.length > 0 && typeof version.name === "string" && (version.configuration === void 0 || parseUIConfiguration(version.configuration) !== void 0))) throw new StorageError("Invalid theme versions.", 400);
+	const ids = value.versions.map((version) => version.id);
+	if (new Set(ids).size !== ids.length || !ids.includes(value.activeVersionId)) throw new StorageError("Invalid theme version identity.", 400);
+	return parseThemeVersions(value);
+}
+/** Theme versions shared through the repository, separate from canvas layout. Never commits or pushes. */
+function configureThemeVersionsStorage(server, filename = "povio.themes.json") {
+	return configureRepositoryStorage(server, {
+		filename,
+		route: "themes",
+		field: "themes",
+		label: "Theme versions",
+		decode: decodeThemeVersions,
+		maxBytes: 4194304
+	});
+}
+//#endregion
+//#region src/configurator/component-configuration-vite.ts
+/** The component settings Apply theme writes beside the theme CSS. Hot updates reach the app like the CSS. */
+function configureComponentConfigurationStorage(server, filename) {
+	return configureRepositoryStorage(server, {
+		filename,
+		route: "configuration",
+		field: "configuration",
+		label: "UI configuration",
+		decode: (value) => {
+			const configuration = parseComponentConfiguration(value);
+			if (!configuration) throw new StorageError("Invalid UI configuration.", 400);
+			return configuration;
+		}
+	});
+}
+//#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";
+//#endregion
+//#region src/configurator/fontsource-vite.ts
+const execute = promisify(execFile);
+const fontId = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const versionPattern = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/;
+var FontError = class extends Error {
+	constructor(message, status = 400) {
+		super(message);
+		this.status = status;
+	}
+};
+const dependencies = {
+	fetch: (...args) => globalThis.fetch(...args),
+	install: async (command, args, cwd) => {
+		await execute(command, args, {
+			cwd,
+			shell: false,
+			timeout: 18e4,
+			maxBuffer: 1048576,
+			env: {
+				...process.env,
+				npm_config_ignore_scripts: "true",
+				YARN_ENABLE_SCRIPTS: "false"
+			}
+		});
+	}
+};
+const exists = async (file) => {
+	try {
+		await access(file);
+		return true;
+	} catch {
+		return false;
+	}
+};
+const inside = (root, file) => {
+	const path = relative(root, file);
+	return !!path && !isAbsolute(path) && path !== ".." && !path.startsWith(`..${sep}`);
+};
+async function manager(root) {
+	let directory = root;
+	while (true) {
+		let declared = "";
+		try {
+			declared = JSON.parse(await readFile(resolve(directory, "package.json"), "utf8")).packageManager ?? "";
+		} catch {}
+		if (/^(bun|npm|pnpm|yarn)@/.test(declared)) return {
+			name: declared.split("@")[0],
+			modernYarn: /^yarn@[2-9]/.test(declared)
+		};
+		for (const [file, name] of [
+			["bun.lock", "bun"],
+			["bun.lockb", "bun"],
+			["pnpm-lock.yaml", "pnpm"],
+			["package-lock.json", "npm"],
+			["yarn.lock", "yarn"]
+		]) if (await exists(resolve(directory, file))) return {
+			name,
+			modernYarn: name === "yarn" && (await readFile(resolve(directory, file), "utf8")).includes("__metadata:")
+		};
+		const parent = dirname(directory);
+		if (parent === directory) break;
+		directory = parent;
+	}
+	throw new FontError("No existing package manager was detected. Add a lockfile or packageManager field first.", 409);
+}
+async function metadata(fetcher, url) {
+	const response = await fetcher(url, {
+		redirect: "error",
+		signal: AbortSignal.timeout(2e4)
+	});
+	if (!response.ok) throw new FontError(response.status === 404 ? "Fontsource font/package was not found." : "Fontsource metadata could not be loaded.", response.status === 404 ? 400 : 502);
+	return response.json();
+}
+/** Internal service factory: injection is for server tests, never a plugin/client execution option. */
+async function createFontsourceInstaller(rootInput, cssName, deps = dependencies) {
+	const root = await realpath(rootInput), css = resolve(root, cssName), packageFile = resolve(root, "package.json");
+	if (!inside(root, css) || !css.endsWith(".css")) throw new FontError("fontCssFile must be a CSS file inside the app root.");
+	if (!await exists(css) || !await exists(packageFile)) return void 0;
+	const guard = async () => {
+		if (await realpath(css) !== css || await realpath(packageFile) !== packageFile) throw new FontError("Font CSS and package.json must not use symbolic links.", 409);
+	};
+	await guard();
+	let pending = Promise.resolve();
+	const install = (id) => {
+		const task = pending.then(async () => {
+			if (typeof id !== "string" || id.length > 100 || !fontId.test(id)) throw new FontError("Expected a valid Fontsource font ID.");
+			await guard();
+			const font = await metadata(deps.fetch, `https://api.fontsource.org/v1/fonts/${id}`);
+			if (font.id !== id || typeof font.family !== "string" || !font.family.trim() || !Array.isArray(font.weights) || !Array.isArray(font.styles)) throw new FontError("Invalid Fontsource font metadata.", 502);
+			let variable = false;
+			if (font.variable) variable = !!(await metadata(deps.fetch, `https://api.fontsource.org/v1/variable/${id}`)).axes?.wght;
+			const packageName = `${variable ? "@fontsource-variable" : "@fontsource"}/${id}`;
+			const registry = await metadata(deps.fetch, `https://registry.npmjs.org/${encodeURIComponent(packageName)}/latest`);
+			if (registry.name !== packageName || typeof registry.version !== "string" || !versionPattern.test(registry.version)) throw new FontError("Invalid npm package version metadata.", 502);
+			const weights = font.weights.filter((weight) => typeof weight === "number" && Number.isInteger(weight) && weight >= 1 && weight <= 1e3);
+			const styles = ["normal", "italic"].filter((style) => font.styles.includes(style));
+			if (!weights.length || !styles.length) throw new FontError("This font has no supported styles.");
+			const imports = variable ? styles.map((style) => `${packageName}/wght${style === "italic" ? "-italic" : ""}.css`) : weights.flatMap((weight) => styles.map((style) => `${packageName}/${weight}${style === "italic" ? "-italic" : ""}.css`));
+			const require = createRequire(packageFile);
+			const installed = async (exact = false) => {
+				try {
+					const declared = JSON.parse(await readFile(packageFile, "utf8"));
+					if (!declared.dependencies?.[packageName] && !declared.devDependencies?.[packageName]) return false;
+					const pkg = JSON.parse(await readFile(require.resolve(`${packageName}/package.json`), "utf8"));
+					if (exact && pkg.version !== registry.version) return false;
+					if (!versionPattern.test(pkg.version) || pkg.version.split(".")[0] !== registry.version.split(".")[0]) return false;
+					await Promise.all(imports.map((item) => access(require.resolve(item))));
+					return true;
+				} catch {
+					return false;
+				}
+			};
+			const alreadyInstalled = await installed();
+			if (!alreadyInstalled) {
+				const pm = await manager(root);
+				const spec = `${packageName}@${registry.version}`;
+				const args = pm.name === "npm" ? [
+					"install",
+					"--save-exact",
+					"--ignore-scripts",
+					spec
+				] : pm.name === "yarn" ? [
+					"add",
+					"--exact",
+					...pm.modernYarn ? [] : ["--ignore-scripts"],
+					spec
+				] : [
+					"add",
+					"--exact",
+					"--ignore-scripts",
+					spec
+				];
+				if (pm.name === "pnpm") args[1] = "--save-exact";
+				try {
+					await deps.install(pm.name, args, root);
+				} catch {
+					throw new FontError("Font installation failed. Existing CSS imports were left unchanged.", 502);
+				}
+				if (!await installed(true)) throw new FontError("Installed font files could not be verified. CSS imports were left unchanged.", 502);
+			}
+			await guard();
+			const source = await readFile(css, "utf8");
+			const existing = new Set([...source.matchAll(/@import\s+(?:url\(\s*)?["']([^"']+)["']/g)].map((match) => match[1]));
+			const missing = imports.filter((item) => !existing.has(item));
+			if (missing.length) {
+				const additions = missing.map((item) => `@import "${item}";`).join("\n");
+				const charset = source.match(/^(?:\uFEFF)?@charset\s+["'][^"']+["'];\s*/i)?.[0] ?? "";
+				const next = `${charset}${additions}\n${source.slice(charset.length)}`;
+				const temporary = `${css}.fontsource-${randomUUID()}.tmp`;
+				try {
+					await writeFile(temporary, next, { flag: "wx" });
+					await guard();
+					await rename(temporary, css);
+				} finally {
+					await unlink(temporary).catch(() => {});
+				}
+			}
+			return {
+				family: `${font.family}${variable ? " Variable" : ""}`,
+				packageName,
+				imports,
+				alreadyInstalled
+			};
+		});
+		pending = task.then(() => {}, () => {});
+		return task;
+	};
+	return {
+		cssFile: relative(root, css).split(sep).join("/"),
+		install
+	};
+}
+async function configureFontsource(server, cssName, token, base) {
+	const installer = await createFontsourceInstaller(server.config.root, cssName);
+	if (!installer) return void 0;
+	const endpoint = `${base}__povio_ui/fontsource`;
+	server.middlewares.use((req, res, next) => {
+		if (req.url?.split("?")[0] !== endpoint) return next();
+		handle(req, res).catch((error) => respond(res, error instanceof FontError ? error.status : 500, { error: error instanceof Error ? error.message : "Could not install font." }));
+	});
+	function respond(res, status, body) {
+		res.writeHead(status, {
+			"Content-Type": "application/json",
+			"Cache-Control": "no-store"
+		});
+		res.end(JSON.stringify(body));
+	}
+	async function handle(req, res) {
+		if (req.method !== "POST") throw new FontError("Use POST to install a font.", 405);
+		if (req.headers["x-povio-ui-theme-token"] !== token) throw new FontError("Invalid theme token.", 403);
+		if (req.headers["sec-fetch-site"] === "cross-site") throw new FontError("Font installation requires the app origin.", 403);
+		if (req.headers.origin) {
+			let sameOrigin = false;
+			try {
+				sameOrigin = new URL(req.headers.origin).origin === `${server.config.server.https ? "https" : "http"}://${req.headers.host}`;
+			} catch {}
+			if (!sameOrigin) throw new FontError("Font installation requires the app origin.", 403);
+		}
+		if (!req.headers["content-type"]?.startsWith("application/json")) throw new FontError("Expected application/json.", 415);
+		let size = 0;
+		const chunks = [];
+		for await (const chunk of req) {
+			size += Buffer.byteLength(chunk);
+			if (size > 1024) throw new FontError("Font request is too large.", 413);
+			chunks.push(Buffer.from(chunk));
+		}
+		let data;
+		try {
+			data = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+		} catch {
+			throw new FontError("Expected JSON containing a font ID.");
+		}
+		const id = data && typeof data === "object" && !Array.isArray(data) ? data.id : void 0;
+		respond(res, 200, await installer.install(id));
+	}
+	return {
+		endpoint,
+		cssFile: installer.cssFile
 	};
 }
 //#endregion
@@ -347,10 +688,6 @@ function updateThemeSource(source, exportedCss) {
 	return source;
 }
 //#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";
-//#endregion
 //#region src/configurator/vite.ts
 var ThemeWriteError = class extends Error {
 	constructor(message, status) {
@@ -384,24 +721,30 @@ function uiConfigurator(options = {}) {
 	let connection;
 	let pendingWrite = Promise.resolve();
 	let canvasStorage;
+	let themeVersionsStorage;
+	let componentStorage;
 	return {
 		name: "vite-plugin-povio-ui-configurator",
 		apply: (_config, environment) => environment.command === "serve" && !environment.isPreview,
 		async configureServer(server) {
 			if (options.canvasFile !== false) canvasStorage = await configureCanvasStorage(server, options.canvasFile);
+			if (options.themeVersionsFile !== false) themeVersionsStorage = await configureThemeVersionsStorage(server, options.themeVersionsFile);
 			const root = await realpath(server.config.root);
 			const configuredFile = resolve(server.config.root, options.themeFile ?? "src/styles/theme.css");
 			const themeFile = await realpath(configuredFile);
 			const file = relative(root, themeFile);
 			if (!file || isAbsolute(file) || file === ".." || file.startsWith(`..${sep}`)) throw new Error("Povio UI themeFile must be inside this app's Vite root.");
 			if (!themeFile.endsWith(".css")) throw new Error("Povio UI themeFile must be a CSS file.");
-			const endpoint = `${new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/")}__povio_ui/theme`;
+			if (options.configurationFile !== false) componentStorage = await configureComponentConfigurationStorage(server, options.configurationFile ?? join(dirname(file), "ui-configuration.json"));
+			const base = new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/");
+			const endpoint = `${base}__povio_ui/theme`;
 			connection = {
 				endpoint,
 				token: randomUUID(),
 				file: file.split(sep).join("/")
 			};
 			const token = connection.token;
+			if (options.fontCssFile !== false) connection.fontsource = await configureFontsource(server, options.fontCssFile ?? "src/styles/globals.css", token, base);
 			const save = async (request, response) => {
 				if (request.method !== "POST") {
 					response.setHeader("Allow", "POST");
@@ -436,26 +779,59 @@ function uiConfigurator(options = {}) {
 				});
 			});
 		},
-		handleHotUpdate(context) {
-			if (canvasStorage?.isStorageFile(context.file)) return [];
+		async handleHotUpdate(context) {
+			const storage = [canvasStorage, themeVersionsStorage].find((item) => item?.isStorageFile(context.file));
+			if (!storage) return;
+			if (storage.isFile(context.file)) {
+				const text = await Promise.resolve(context.read()).catch(() => null);
+				const change = {
+					endpoint: storage.connection.endpoint,
+					revision: text ? storage.revisionOf(text) : null
+				};
+				context.server.ws.send({
+					type: "custom",
+					event: repositoryStorageChangedEvent,
+					data: change
+				});
+			}
+			return [];
 		},
 		transformIndexHtml() {
 			if (!connection) return;
-			return [{
-				tag: "meta",
-				attrs: {
-					name: themeWriterMetaName,
-					content: JSON.stringify(connection)
-				},
-				injectTo: "head"
-			}, ...canvasStorage ? [{
-				tag: "meta",
-				attrs: {
-					name: canvasStorageMetaName,
-					content: JSON.stringify(canvasStorage.connection)
+			return [
+				{
+					tag: "meta",
+					attrs: {
+						name: themeWriterMetaName,
+						content: JSON.stringify(connection)
+					},
+					injectTo: "head"
 				},
-				injectTo: "head"
-			}] : []];
+				...canvasStorage ? [{
+					tag: "meta",
+					attrs: {
+						name: canvasStorageMetaName,
+						content: JSON.stringify(canvasStorage.connection)
+					},
+					injectTo: "head"
+				}] : [],
+				...componentStorage ? [{
+					tag: "meta",
+					attrs: {
+						name: componentConfigurationMetaName,
+						content: JSON.stringify(componentStorage.connection)
+					},
+					injectTo: "head"
+				}] : [],
+				...themeVersionsStorage ? [{
+					tag: "meta",
+					attrs: {
+						name: themeVersionsMetaName,
+						content: JSON.stringify(themeVersionsStorage.connection)
+					},
+					injectTo: "head"
+				}] : []
+			];
 		}
 	};
 }