@povio/ui 4.0.3 → 5.0.0-rc.10

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

@@ -0,0 +1,62 @@
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BEER5hHp.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { createRoute, notFound, useRouter, useRouterState } from "@tanstack/react-router";
+//#region src/app-canvas/tanstack.tsx
+/** Use with createFileRoute('/_canvas') for file-based TanStack Router apps. */
+function appCanvasRouteOptions({ enabled, canvas }) {
+	return {
+		beforeLoad: () => {
+			if (!(typeof enabled === "function" ? enabled() : enabled)) throw notFound();
+		},
+		component: function CanvasRoutePage() {
+			return /* @__PURE__ */ jsx(AppCanvasPage, {
+				...canvas,
+				router: useRouter()
+			});
+		}
+	};
+}
+/** Add this child to the existing root route before creating a code-based router. */
+function createAppCanvasRoute({ getParentRoute, ...options }) {
+	return createRoute({
+		getParentRoute,
+		path: APP_CANVAS_PATH,
+		...appCanvasRouteOptions(options)
+	});
+}
+/** Mount once under the existing router and UIConfigurationProvider, beside Outlet. */
+function AppCanvasBridge() {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp };
+		$[0] = t0;
+	} else t0 = $[0];
+	const href = useRouterState(t0);
+	let t1;
+	if ($[1] !== href) {
+		t1 = /* @__PURE__ */ jsx(AppCanvasFrameBridge, { href });
+		$[1] = href;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+/** Hide existing configurator launchers on the canvas page; its editor is already included. */
+function _temp(state) {
+	return state.location.href;
+}
+function useIsAppCanvasPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp2 };
+		$[0] = t0;
+	} else t0 = $[0];
+	return useRouterState(t0);
+}
+function _temp2(state) {
+	return state.location.pathname.replace(/\/$/, "") === APP_CANVAS_PATH;
+}
+//#endregion
+export { APP_CANVAS_PATH, AppCanvasBridge, AppCanvasPage, appCanvasRouteOptions, createAppCanvasRoute, useIsAppCanvasPage };

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

@@ -0,0 +1,12 @@
+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";
+//#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 }: {
+  href?: string;
+}): null;
+//#endregion
+//#region src/app-canvas/protocol.d.ts
+declare const isAppCanvasFrame: () => boolean;
+//#endregion
+export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, type AppCanvasPageProps, type AppCanvasProps, type CanvasBreakpoint, type CanvasPage, type CanvasPosition, type CanvasRouteExample, type CanvasRouter, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

package/dist/config/app-canvas.js

@@ -0,0 +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";
+export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

package/dist/config/confirmation.d.ts

@@ -1,2 +1,2 @@
-import { t as Confirmation } from "../confirmation.context-fKfUTsLF.js";
+import { t as Confirmation } from "../confirmation.context-BOeEVczb.js";
 export { Confirmation };

package/dist/config/link-context.d.ts

@@ -1,3 +1,3 @@
-import { n as LinkNavigationProps } from "../Link-DS9-0Ijl.js";
-import { t as LinkContext } from "../link.context-C5ZgwVM5.js";
+import { n as LinkNavigationProps } from "../Link-Ow9H7kNv.js";
+import { t as LinkContext } from "../link.context-D5qyz9Rf.js";
 export { LinkContext, type LinkNavigationProps };

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

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

package/dist/config/ui-config.js

@@ -1,2 +1,2 @@
-import { t as UIConfig } from "../uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
 export { UIConfig };

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

@@ -0,0 +1,2 @@
+import { a as parseThemeCss, i as exportCss, n as ThemeEdits, r as Tokens } from "../theme-model-T1zIdBg8.js";
+export { type ThemeEdits, type Tokens, exportCss, parseThemeCss };

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

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

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

@@ -0,0 +1,10 @@
+import { Plugin } from "vite";
+//#region src/configurator/vite.d.ts
+interface UIConfiguratorPluginOptions {
+  /** CSS file relative to this app's Vite root. Must exist inside that root. */
+  themeFile?: string;
+}
+/** Adds the configurator's Save theme action to this app's development server. */
+declare function uiConfigurator(options?: UIConfiguratorPluginOptions): Plugin;
+//#endregion
+export { type UIConfiguratorPluginOptions, uiConfigurator };

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 };