@povio/ui 5.0.0-rc.1 → 5.0.0-rc.10

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

@@ -0,0 +1,174 @@
+import { randomUUID } from "node:crypto";
+import { readFile, realpath, writeFile } from "node:fs/promises";
+import { isAbsolute, relative, resolve, sep } from "node:path";
+//#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])));
+const parseThemeCss = (themeSource) => ({
+	light: selectorDeclarations(themeSource, /:root\s*\{([^}]+)\}/g),
+	dark: selectorDeclarations(themeSource, /\.dark\s*\{([^}]+)\}/g),
+	theme: declarations([...themeSource.matchAll(/@theme(?:\s+static)?\s*\{([^}]+)\}/g)].map((match) => match[1]).join("\n"))
+});
+const emptyTheme = () => ({
+	light: {},
+	dark: {},
+	theme: {}
+});
+//#endregion
+//#region src/configurator/theme-source.ts
+const maskComments = (css) => css.replace(/\/\*[\s\S]*?\*\//g, (comment) => " ".repeat(comment.length));
+const blocks = () => /(:root|\.dark|@theme(?:\s+static)?)\s*\{([^{}]*)\}/g;
+const bucketFor = (selector) => selector === ":root" ? "light" : selector === ".dark" ? "dark" : "theme";
+/** Accept only the flat token blocks produced by the configurator's CSS export. */
+function readExport(css) {
+	const clean = maskComments(css);
+	const edits = emptyTheme();
+	let end = 0;
+	for (const match of clean.matchAll(blocks())) {
+		if (clean.slice(end, match.index).trim()) throw new Error("Expected a configurator CSS export.");
+		const tokens = edits[bucketFor(match[1])];
+		let declarationEnd = 0;
+		for (const declaration of match[2].matchAll(/(--[\w-]+)\s*:\s*([^;{}]+);/g)) {
+			if (match[2].slice(declarationEnd, declaration.index).trim()) throw new Error("Invalid theme declaration.");
+			const value = declaration[2].trim();
+			if (!value || /[<>]/.test(value)) throw new Error("Invalid theme value.");
+			tokens[declaration[1]] = value;
+			declarationEnd = declaration.index + declaration[0].length;
+		}
+		if (match[2].slice(declarationEnd).trim()) throw new Error("Invalid theme declaration.");
+		end = match.index + match[0].length;
+	}
+	if (clean.slice(end).trim()) throw new Error("Expected a configurator CSS export.");
+	return edits;
+}
+/** Update declarations without replacing imports, layers, selectors, or inline theme blocks. */
+function updateThemeSource(source, exportedCss) {
+	const edits = readExport(exportedCss);
+	const masked = maskComments(source);
+	const defaults = parseThemeCss(masked);
+	for (const bucket of [
+		"light",
+		"dark",
+		"theme"
+	]) for (const name of Object.keys(edits[bucket])) if (!Object.hasOwn(defaults[bucket], name)) throw new Error(`Unknown ${bucket} theme token: ${name}`);
+	const replacements = [];
+	for (const match of masked.matchAll(blocks())) {
+		const editsForBlock = edits[bucketFor(match[1])];
+		const bodyStart = match.index + match[0].indexOf("{") + 1;
+		for (const declaration of match[2].matchAll(/(--[\w-]+\s*:\s*)([^;]+);/g)) {
+			const name = declaration[1].split(":")[0].trim();
+			if (!Object.hasOwn(editsForBlock, name)) continue;
+			const start = bodyStart + declaration.index + declaration[1].length;
+			replacements.push({
+				start,
+				end: start + declaration[2].trimEnd().length,
+				value: editsForBlock[name]
+			});
+		}
+	}
+	for (const { start, end, value } of replacements.reverse()) source = source.slice(0, start) + value + source.slice(end);
+	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) {
+		super(message);
+		this.status = status;
+	}
+};
+const respond = (response, status, result) => {
+	response.writeHead(status, {
+		"Content-Type": "application/json",
+		"Cache-Control": "no-store"
+	});
+	response.end(JSON.stringify(result));
+};
+async function readCss(request) {
+	const chunks = [];
+	let size = 0;
+	for await (const chunk of request) {
+		size += Buffer.byteLength(chunk);
+		if (size > 262144) throw new ThemeWriteError("Theme export is too large.", 413);
+		chunks.push(Buffer.from(chunk));
+	}
+	try {
+		const body = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+		if (typeof body?.css === "string") return body.css;
+	} catch {}
+	throw new ThemeWriteError("Expected JSON containing a CSS export.", 400);
+}
+/** Adds the configurator's Save theme action to this app's development server. */
+function uiConfigurator(options = {}) {
+	let connection;
+	let pendingWrite = Promise.resolve();
+	return {
+		name: "vite-plugin-povio-ui-configurator",
+		apply: (_config, environment) => environment.command === "serve" && !environment.isPreview,
+		async configureServer(server) {
+			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`;
+			connection = {
+				endpoint,
+				token: randomUUID(),
+				file: file.split(sep).join("/")
+			};
+			const token = connection.token;
+			const save = async (request, response) => {
+				if (request.method !== "POST") {
+					response.setHeader("Allow", "POST");
+					throw new ThemeWriteError("Use POST to save a theme.", 405);
+				}
+				if (request.headers["x-povio-ui-theme-token"] !== token) throw new ThemeWriteError("Invalid theme token.", 403);
+				const origin = request.headers.origin;
+				if (origin && new URL(origin).host !== request.headers.host) throw new ThemeWriteError("Theme saves must come from this app's origin.", 403);
+				if (!request.headers["content-type"]?.startsWith("application/json")) throw new ThemeWriteError("Expected application/json.", 415);
+				const css = await readCss(request);
+				const write = pendingWrite.then(async () => {
+					if (await realpath(configuredFile) !== themeFile) throw new ThemeWriteError("The theme file moved. Restart the dev server before saving.", 409);
+					const source = await readFile(themeFile, "utf8");
+					let updated;
+					try {
+						updated = updateThemeSource(source, css);
+					} catch (error) {
+						throw new ThemeWriteError(error instanceof Error ? error.message : "Invalid theme export.", 400);
+					}
+					if (updated !== source) await writeFile(themeFile, updated, "utf8");
+				});
+				pendingWrite = write.catch(() => {});
+				await write;
+				respond(response, 200, { file: connection.file });
+			};
+			server.middlewares.use((request, response, next) => {
+				if (request.url?.split("?")[0] !== endpoint) return next();
+				save(request, response).catch((error) => {
+					const status = error instanceof ThemeWriteError ? error.status : 500;
+					const message = error instanceof Error ? error.message : "Could not save theme.";
+					respond(response, status, { error: message });
+				});
+			});
+		},
+		transformIndexHtml() {
+			if (!connection) return;
+			return [{
+				tag: "meta",
+				attrs: {
+					name: themeWriterMetaName,
+					content: JSON.stringify(connection)
+				},
+				injectTo: "head"
+			}];
+		}
+	};
+}
+//#endregion
+export { uiConfigurator };

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

@@ -0,0 +1,15 @@
+import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-DP4p1cIe.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/ColorModeSwitch.d.ts
+interface ColorModeSwitchProps {
+  value: Mode;
+  onChange: (mode: Mode) => void;
+  label?: string;
+}
+/** 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 };

package/dist/config/ui-configurator.js

@@ -0,0 +1,3 @@
+import { c as UIConfigurationProvider, l as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal } from "../UIConfigurator-CTlq-hrG.js";
+import { _ as parseThemeCss, i as exportCss } from "../theme-model-DtYPxNvH.js";
+export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };

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

@@ -1,2 +1,2 @@
-import { t as UIOverrides } from "../uiOverrides.context-C3xb4Ttq.js";
+import { t as UIOverrides } from "../uiOverrides.context-DEp139He.js";
 export { UIOverrides };

package/dist/config/ui-overrides.js

@@ -1,2 +1,2 @@
-import { t as UIOverrides } from "../uiOverrides.context-Bfm2n-n8.js";
+import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
 export { UIOverrides };

package/dist/config/ui-router.js

@@ -1,2 +1,2 @@
-import { t as UIRouter } from "../router.context-B0jTMtE0.js";
+import { t as UIRouter } from "../router.context-B4FvsTim.js";
 export { UIRouter };