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

package/dist/config/app-canvas-tanstack.d.ts

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-BTmt8poT.js";
+import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-BZ2mrKY4.js";
 import { AnyRoute } from "@tanstack/react-router";
 //#region src/app-canvas/tanstack.d.ts
 interface AppCanvasRouteOptions {

package/dist/config/app-canvas-tanstack.js

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BsQrZ8q7.js";
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-DtWEvs_Y.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createRoute, notFound, useRouter, useRouterState } from "@tanstack/react-router";

package/dist/config/app-canvas.d.ts

@@ -1,5 +1,5 @@
-import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-BTmt8poT.js";
-import "../configuration.context-qdjDwQJj.js";
+import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-BZ2mrKY4.js";
+import "../configuration.context-3I7-wBII.js";
 //#region src/app-canvas/AppCanvasFrameBridge.d.ts
 /** Mount once inside the application's existing UIConfigurationProvider. No separate app copy or theme fork. */
 declare function AppCanvasFrameBridge({ href }: {

package/dist/config/app-canvas.js

@@ -1,2 +1,2 @@
-import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-BsQrZ8q7.js";
+import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-DtWEvs_Y.js";
 export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

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

@@ -1,3 +1,3 @@
-import { t as UIConfig } from "../uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "../uiConfig.context-BksnNQyw.js";
 import { a as DateRangeResolvedValue, i as DateRangeRelativeOption } from "../DateRangePicker-Dfptit_Z.js";
 export { type DateRangeRelativeOption, type DateRangeResolvedValue, UIConfig };

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

@@ -3,6 +3,15 @@ import { Plugin } from "vite";
 interface UIConfiguratorPluginOptions {
   /** CSS file relative to this app's Vite root. Must exist inside that root. */
   themeFile?: string;
+  /** Repository canvas JSON, relative to the Vite root. false disables storage. */
+  canvasFile?: string | false;
+  /** Repository theme versions JSON, relative to the Vite root. false disables storage. */
+  themeVersionsFile?: string | false;
+  /**
+   * Component settings JSON that Apply theme writes, relative to the Vite root; defaults to
+   * `ui-configuration.json` beside the theme file. Import it with `resolveUIConfiguration`. false disables it.
+   */
+  configurationFile?: string | false;
 }
 /** Adds the configurator's Save theme action to this app's development server. */
 declare function uiConfigurator(options?: UIConfiguratorPluginOptions): Plugin;

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

@@ -1,6 +1,396 @@
-import { randomUUID } from "node:crypto";
-import { readFile, realpath, writeFile } from "node:fs/promises";
-import { isAbsolute, relative, resolve, sep } from "node:path";
+import { createHash, randomUUID } from "node:crypto";
+import { lstat, readFile, realpath, rename, unlink, writeFile } from "node:fs/promises";
+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/configurator/repository-storage-vite.ts
+var StorageError = class extends Error {
+	constructor(message, status) {
+		super(message);
+		this.status = status;
+	}
+};
+const inside = (root, path) => {
+	const rel = relative(root, path);
+	return !!rel && !isAbsolute(rel) && rel !== ".." && !rel.startsWith(`..${sep}`);
+};
+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, {
+		"Content-Type": "application/json",
+		"Cache-Control": "no-store"
+	});
+	res.end(JSON.stringify(body));
+};
+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(`${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 ${label.toLowerCase()} data.`, 400);
+	}
+}
+/** Fixed-path development persistence only. Never commits or pushes repository changes. */
+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 ${noun} file must be a JSON file inside this app's Vite root.`);
+	const guard = async () => {
+		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(`${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;
+		}
+	};
+	await guard();
+	const file = relative(root, filePath).split(sep).join("/");
+	const connection = {
+		endpoint: `${new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/")}__povio_ui/${route}`,
+		token: randomUUID(),
+		file
+	};
+	let pending = Promise.resolve();
+	const readCurrent = async () => {
+		await guard();
+		try {
+			const text = await readFile(filePath, "utf8");
+			return {
+				text,
+				revision: revisionOf(text)
+			};
+		} catch (error) {
+			if (error.code === "ENOENT") return {
+				text: null,
+				revision: null
+			};
+			throw error;
+		}
+	};
+	const handle = async (req, res) => {
+		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 {
+			validOrigin = new URL(origin).origin === `${server.config.server.https ? "https" : "http"}://${req.headers.host}`;
+		} catch {
+			validOrigin = false;
+		}
+		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 value = null;
+			if (current.text !== null) try {
+				value = decode(JSON.parse(current.text));
+			} catch {
+				throw new StorageError(`Repository ${noun} file is invalid. Correct it before saving.`, 409);
+			}
+			return respond$1(res, 200, {
+				[field]: value,
+				revision: current.revision,
+				file
+			});
+		}
+		if (req.method !== "POST") {
+			res.setHeader("Allow", "GET, POST");
+			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, 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(`${label} file changed. Reload it before saving again.`, 409);
+			const temporary = `${filePath}.povio-${randomUUID()}.tmp`;
+			try {
+				await writeFile(temporary, text, {
+					encoding: "utf8",
+					flag: "wx",
+					mode: 384
+				});
+				await guard();
+				await rename(temporary, filePath);
+			} finally {
+				await unlink(temporary).catch(() => {});
+			}
+		});
+		pending = write.catch(() => {});
+		await write;
+		return respond$1(res, 200, {
+			revision: revisionOf(text),
+			file
+		});
+	};
+	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 ${noun} file.` }));
+	});
+	const isFile = (path) => resolve(path) === filePath;
+	return {
+		connection,
+		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])));
@@ -106,16 +496,22 @@ async function readCss(request) {
 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,
@@ -157,16 +553,59 @@ function uiConfigurator(options = {}) {
 				});
 			});
 		},
+		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)
+			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-qdjDwQJj.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 { c as UIConfigurationProvider, l as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal } from "../UIConfigurator-C_2kgJtm.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 };

package/dist/{configuration.context-qdjDwQJj.d.ts → configuration.context-3I7-wBII.d.ts}

@@ -1,6 +1,6 @@
 import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
 import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { n as ThemeEdits } from "./theme-model-T1zIdBg8.js";
 import { PropsWithChildren } from "react";
 //#region src/configurator/cva-definitions.d.ts
@@ -902,6 +902,9 @@ interface ConfigurationContextValue {
   inheritedOverrides: UIOverrides.Config | null | undefined;
   draft: UIConfiguration;
   active: UIConfiguration;
+  currentConfiguration: UIConfiguration;
+  /** Replaces applied and draft values; `remount: false` keeps the open editor (and its state) mounted. */
+  replaceConfiguration: (value: UIConfiguration, closeEditor?: boolean, remount?: boolean) => void;
   setPreviewConfiguration: React.Dispatch<React.SetStateAction<UIConfiguration | null>>;
   setDraft: React.Dispatch<React.SetStateAction<UIConfiguration>>;
   isOpen: boolean;

package/dist/{dynamicInputs-DdcsSoYu.d.ts → dynamicInputs-R5i7AT_C.d.ts}

@@ -55,7 +55,7 @@ import "./useToast-yreVCUer.js";
 import "./Badge-CBNpj823.js";
 import "./Tag-AHfV_XSf.js";
 import "./Accordion-Cup5eRZz.js";
-import "./uiConfig.context-BqKWd_MO.js";
+import "./uiConfig.context-BksnNQyw.js";
 import "./confirmation.context-BOeEVczb.js";
 import { t as ControlledDatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { t as ControlledDateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";

package/dist/index.d.ts

@@ -54,7 +54,7 @@ import { n as ToastParams, r as useToast, t as ToastOptions } from "./useToast-y
 import { n as BadgeProps, t as Badge } from "./Badge-CBNpj823.js";
 import { i as tagDefinition, n as TagProps, r as TagVariantProps, t as Tag } from "./Tag-AHfV_XSf.js";
 import { i as AccordionProps, n as AccordionItem, r as AccordionItemProps, t as Accordion } from "./Accordion-Cup5eRZz.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { t as Confirmation } from "./confirmation.context-BOeEVczb.js";
 import { r as DatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { r as DateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";
@@ -93,7 +93,7 @@ import { n as Input, t as ControlledInputProps } from "./input-CqNMORk8.js";
 import { r as TimePickerProps } from "./TimePicker-Dex9aU7D.js";
 import { n as TimePicker, t as ControlledTimePickerProps } from "./time-picker-DhnDKh97.js";
 import { n as Switch, t as ControlledSwitchProps } from "./switch-C--iWnY8.js";
-import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, d as ServiceWorkerOptions, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, f as installServiceWorker, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-DdcsSoYu.js";
+import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, d as ServiceWorkerOptions, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, f as installServiceWorker, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-R5i7AT_C.js";
 import { a as stepperDefinition, c as stepperNumberDefinition, d as stepperTitleDefinition, i as StepperVariantProps, l as stepperSeparatorDefinition, n as StepItem, o as stepperIconDefinition, r as StepperProps, s as stepperItemDefinition, t as Stepper, u as stepperSubtextDefinition } from "./Stepper-TATlHZhQ.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-1H_IxvyH.js";
 import { C as HeaderText, D as CellText, E as ColumnConfigModalProps, O as CellTextProps, S as tableRowDefinition, T as ColumnConfigModal, _ as tableCellTextDefinition, a as DynamicColumnsOptions, b as tableHeadRowDefinition, c as PaginatedTableProps, d as InfiniteTableProps, f as InfiniteTableWrapperProps, g as TableRowVariantProps, h as TableWrapperProps, i as usePagination, l as PaginatedTableWrapperProps, m as TableProps, n as useTableColumnConfig, o as dynamicColumns, p as Table, r as useSorting, s as PaginatedTable, t as useTableNav, u as InfiniteTable, v as tableDataDefinition, w as HeaderTextProps, x as tableHeaderTextDefinition, y as tableHeadDataDefinition } from "./useTableNav-Ckj5PBRk.js";