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

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-BIFYeEeS.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-BEER5hHp.js";
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-DCjiFfQW.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-BIFYeEeS.js";
-import "../configuration.context-DP4p1cIe.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-iuZu-ie0.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-BEER5hHp.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-DCjiFfQW.js";
 export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

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

@@ -1,2 +1,2 @@
-import { _ as parseThemeCss, i as exportCss } from "../theme-model-DtYPxNvH.js";
+import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
 export { exportCss, parseThemeCss };

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

@@ -3,6 +3,8 @@ 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;
 }
 /** 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,283 @@
-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, 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";
+//#endregion
+//#region src/app-canvas/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 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) {
+	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);
+		chunks.push(Buffer.from(chunk));
+	}
+	try {
+		return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+	} catch {
+		throw new StorageError("Expected JSON canvas data.", 400);
+	}
+}
+/** Fixed-path development persistence only. Never commits or pushes repository changes. */
+async function configureCanvasStorage(server, filename = "povio.canvas.json") {
+	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.");
+	const guard = async () => {
+		if (await realpath(parent) !== parent) throw new StorageError("Canvas 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);
+		} 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/canvas`,
+		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-canvas-token"] !== connection.token) throw new StorageError("Invalid canvas 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("Canvas storage requires the app's origin.", 403);
+		if (req.method === "GET") {
+			await pending;
+			const current = await readCurrent();
+			let manifest = null;
+			if (current.text !== null) try {
+				manifest = decodeManifest(JSON.parse(current.text));
+			} catch {
+				throw new StorageError("Repository canvas file is invalid. Correct it before saving.", 409);
+			}
+			return respond$1(res, 200, {
+				manifest,
+				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);
+		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 write = pending.then(async () => {
+			if ((await readCurrent()).revision !== body.revision) throw new StorageError("Canvas file changed. Reload its saved layout 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 canvas file." }));
+	});
+	return {
+		connection,
+		isStorageFile: (path) => path === filePath || path.startsWith(`${filePath}.povio-`)
+	};
+}
+//#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,10 +383,12 @@ async function readCss(request) {
 function uiConfigurator(options = {}) {
 	let connection;
 	let pendingWrite = Promise.resolve();
+	let canvasStorage;
 	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);
 			const root = await realpath(server.config.root);
 			const configuredFile = resolve(server.config.root, options.themeFile ?? "src/styles/theme.css");
 			const themeFile = await realpath(configuredFile);
@@ -157,6 +436,9 @@ function uiConfigurator(options = {}) {
 				});
 			});
 		},
+		handleHotUpdate(context) {
+			if (canvasStorage?.isStorageFile(context.file)) return [];
+		},
 		transformIndexHtml() {
 			if (!connection) return;
 			return [{
@@ -166,7 +448,14 @@ function uiConfigurator(options = {}) {
 					content: JSON.stringify(connection)
 				},
 				injectTo: "head"
-			}];
+			}, ...canvasStorage ? [{
+				tag: "meta",
+				attrs: {
+					name: canvasStorageMetaName,
+					content: JSON.stringify(canvasStorage.connection)
+				},
+				injectTo: "head"
+			}] : []];
 		}
 	};
 }

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

@@ -1,4 +1,4 @@
-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 CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-iuZu-ie0.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;

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-CTlq-hrG.js";
-import { _ as parseThemeCss, i as exportCss } from "../theme-model-DtYPxNvH.js";
+import { f as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-CBU0G6rb.js";
+import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
 export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };

package/dist/{configuration.context-DP4p1cIe.d.ts → configuration.context-iuZu-ie0.d.ts}

@@ -902,6 +902,8 @@ interface ConfigurationContextValue {
   inheritedOverrides: UIOverrides.Config | null | undefined;
   draft: UIConfiguration;
   active: UIConfiguration;
+  currentConfiguration: UIConfiguration;
+  replaceConfiguration: (value: UIConfiguration, closeEditor?: boolean) => void;
   setPreviewConfiguration: React.Dispatch<React.SetStateAction<UIConfiguration | null>>;
   setDraft: React.Dispatch<React.SetStateAction<UIConfiguration>>;
   isOpen: boolean;
@@ -911,6 +913,18 @@ interface ConfigurationContextValue {
   cancel: () => void;
   apply: () => void;
   revision: number;
+  /** Opens the configurator (floating, if closed) on a token's row, e.g. from an inspector outside the modal. */
+  revealToken: (name: string) => void;
+  /** The pending reveal; the open editor focuses it and then calls `clearTokenRequest`. */
+  tokenRequest: {
+    name: string;
+    id: number;
+  } | null;
+  clearTokenRequest: () => void;
+  /** True while a host such as the App Canvas shows the components, so the configurator omits its own preview. */
+  componentsHosted: boolean;
+  /** Registers such a host; call the returned function when it unmounts. */
+  hostComponents: () => () => void;
 }
 interface UIConfigurationProviderProps extends PropsWithChildren {
   /** The application's base theme. Use parseThemeCss with your Tailwind theme source. */

package/dist/groups-oQmSeqXn.js

@@ -0,0 +1,18 @@
+//#region src/configurator/gallery/groups.ts
+/** Gallery sections, kept apart from the demos so a host can list them without loading every component. */
+const galleryGroups = [
+	"Buttons",
+	"Inputs",
+	"Selection",
+	"Files",
+	"Feedback",
+	"Text",
+	"Navigation",
+	"Overlays",
+	"Data"
+];
+/** One App Canvas artboard per section, after the composed layouts. */
+const layoutsArtboard = "Layouts";
+const componentArtboards = [layoutsArtboard, ...galleryGroups];
+//#endregion
+export { galleryGroups as n, layoutsArtboard as r, componentArtboards as t };