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

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

@@ -1,154 +1,23 @@
 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
-	};
-}
+import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+//#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-protocol.ts
-const canvasStorageMetaName = "povio-ui-canvas-storage";
-//#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 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 +26,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(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 +60,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 +82,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 +90,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 +111,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,14 +140,257 @@ 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-model.ts
 const declarations = (source) => Object.fromEntries([...source.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]));
 const selectorDeclarations = (source, selector) => Object.assign({}, ...[...source.matchAll(selector)].map((match) => declarations(match[1])));
@@ -384,17 +497,21 @@ 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.");
+			if (options.configurationFile !== false) componentStorage = await configureComponentConfigurationStorage(server, options.configurationFile ?? join(dirname(file), "ui-configuration.json"));
 			const endpoint = `${new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/")}__povio_ui/theme`;
 			connection = {
 				endpoint,
@@ -436,26 +553,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"
+				}] : []
+			];
 		}
 	};
 }

package/dist/config/ui-configurator.d.ts

@@ -1,8 +1,20 @@
-import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-iuZu-ie0.js";
+import { t as UIOverrides } from "../uiOverrides.context-DEp139He.js";
+import { n as UIConfigOptions } from "../uiConfig.context-BksnNQyw.js";
+import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-3I7-wBII.js";
 import { a as parseThemeCss, i as exportCss, n as ThemeEdits, r as Tokens, t as Mode } from "../theme-model-T1zIdBg8.js";
 //#region src/configurator/UIConfigurator.d.ts
 declare function UIConfigurationModal(): import("react").JSX.Element | null;
 //#endregion
+//#region src/configurator/component-configuration.d.ts
+/**
+ * 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.
+ */
+declare function resolveUIConfiguration(file: unknown, baseOverrides?: UIOverrides.Config | null): {
+  config: Partial<Pick<UIConfigOptions, "button" | "input" | "renderStaticInput">>;
+  overrides: Partial<UIOverrides.Options>;
+};
+//#endregion
 //#region src/configurator/ColorModeSwitch.d.ts
 interface ColorModeSwitchProps {
   value: Mode;
@@ -12,4 +24,4 @@ interface ColorModeSwitchProps {
 /** Controlled color-mode switch, shared by configurators and application settings. */
 declare function ColorModeSwitch({ value, onChange, label }: ColorModeSwitchProps): import("react").JSX.Element;
 //#endregion
-export { ColorModeSwitch, type ColorModeSwitchProps, type CvaDefinition, type CvaEdits, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, UIConfigurationProvider, type UIConfigurationProviderProps, exportCss, parseThemeCss, useUIConfiguration };
+export { ColorModeSwitch, type ColorModeSwitchProps, type CvaDefinition, type CvaEdits, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, UIConfigurationProvider, type UIConfigurationProviderProps, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/config/ui-configurator.js

@@ -1,3 +1,3 @@
-import { f as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-CBU0G6rb.js";
+import { d as useUIConfiguration, i as resolveUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-DekPXjv9.js";
 import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
-export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };
+export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };