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

package/dist/components/query-select.js

@@ -1,8 +1,8 @@
 import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "../import-BE0r63d8.js";
 import { t as FieldController } from "../form.binding-CG1RPv6o.js";
-import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-B7DEm75m.js";
-import { t as Select } from "../Select-CgIhoWgk.js";
+import { t as getStaticInputFocusTarget } from "../useStaticInputHandoff-DKsxpVck.js";
+import { t as Select } from "../Select-tNlFSbAC.js";
 import { n as getQueryItems, r as getSelectionIdsToResolve, t as useQueryAutocomplete } from "../useQueryAutocomplete-CraXvRm_.js";
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/select.js

@@ -1,2 +1,2 @@
-import { t as Select } from "../Select-CgIhoWgk.js";
+import { t as Select } from "../Select-tNlFSbAC.js";
 export { Select };

package/dist/components/text-area.js

@@ -1,2 +1,2 @@
-import { t as TextArea } from "../TextArea-uPffb457.js";
+import { t as TextArea } from "../TextArea-DuvFUjts.js";
 export { TextArea };

package/dist/components/time-picker.js

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../TimePicker-DN-i98z5.js";
+import { t as TimePicker } from "../TimePicker-CBkiE-Yq.js";
 export { TimePicker };

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-BZ2mrKY4.js";
+import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-U9SxNwjS.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-DtWEvs_Y.js";
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BnyCHO3I.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,4 +1,4 @@
-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 { 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-U9SxNwjS.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. */

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-DtWEvs_Y.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-BnyCHO3I.js";
 export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

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

@@ -12,6 +12,8 @@ interface UIConfiguratorPluginOptions {
    * `ui-configuration.json` beside the theme file. Import it with `resolveUIConfiguration`. false disables it.
    */
   configurationFile?: string | false;
+  /** Existing app CSS entrypoint for installed Fontsource imports. false disables font installation. */
+  fontCssFile?: 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,9 @@
+import { createRequire } from "node:module";
 import { createHash, randomUUID } from "node:crypto";
-import { lstat, readFile, realpath, rename, unlink, writeFile } from "node:fs/promises";
+import { access, lstat, readFile, realpath, rename, unlink, writeFile } from "node:fs/promises";
 import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
 //#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. */
@@ -13,7 +16,7 @@ var StorageError = class extends Error {
 		this.status = status;
 	}
 };
-const inside = (root, path) => {
+const inside$1 = (root, path) => {
 	const rel = relative(root, path);
 	return !!rel && !isAbsolute(rel) && rel !== ".." && !rel.startsWith(`..${sep}`);
 };
@@ -46,7 +49,7 @@ async function configureRepositoryStorage(server, { filename, route, field, labe
 	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.`);
+	if (!inside$1(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 {
@@ -391,6 +394,231 @@ function configureComponentConfigurationStorage(server, filename) {
 	});
 }
 //#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/fontsource-vite.ts
+const execute = promisify(execFile);
+const fontId = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const versionPattern = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/;
+var FontError = class extends Error {
+	constructor(message, status = 400) {
+		super(message);
+		this.status = status;
+	}
+};
+const dependencies = {
+	fetch: (...args) => globalThis.fetch(...args),
+	install: async (command, args, cwd) => {
+		await execute(command, args, {
+			cwd,
+			shell: false,
+			timeout: 18e4,
+			maxBuffer: 1048576,
+			env: {
+				...process.env,
+				npm_config_ignore_scripts: "true",
+				YARN_ENABLE_SCRIPTS: "false"
+			}
+		});
+	}
+};
+const exists = async (file) => {
+	try {
+		await access(file);
+		return true;
+	} catch {
+		return false;
+	}
+};
+const inside = (root, file) => {
+	const path = relative(root, file);
+	return !!path && !isAbsolute(path) && path !== ".." && !path.startsWith(`..${sep}`);
+};
+async function manager(root) {
+	let directory = root;
+	while (true) {
+		let declared = "";
+		try {
+			declared = JSON.parse(await readFile(resolve(directory, "package.json"), "utf8")).packageManager ?? "";
+		} catch {}
+		if (/^(bun|npm|pnpm|yarn)@/.test(declared)) return {
+			name: declared.split("@")[0],
+			modernYarn: /^yarn@[2-9]/.test(declared)
+		};
+		for (const [file, name] of [
+			["bun.lock", "bun"],
+			["bun.lockb", "bun"],
+			["pnpm-lock.yaml", "pnpm"],
+			["package-lock.json", "npm"],
+			["yarn.lock", "yarn"]
+		]) if (await exists(resolve(directory, file))) return {
+			name,
+			modernYarn: name === "yarn" && (await readFile(resolve(directory, file), "utf8")).includes("__metadata:")
+		};
+		const parent = dirname(directory);
+		if (parent === directory) break;
+		directory = parent;
+	}
+	throw new FontError("No existing package manager was detected. Add a lockfile or packageManager field first.", 409);
+}
+async function metadata(fetcher, url) {
+	const response = await fetcher(url, {
+		redirect: "error",
+		signal: AbortSignal.timeout(2e4)
+	});
+	if (!response.ok) throw new FontError(response.status === 404 ? "Fontsource font/package was not found." : "Fontsource metadata could not be loaded.", response.status === 404 ? 400 : 502);
+	return response.json();
+}
+/** Internal service factory: injection is for server tests, never a plugin/client execution option. */
+async function createFontsourceInstaller(rootInput, cssName, deps = dependencies) {
+	const root = await realpath(rootInput), css = resolve(root, cssName), packageFile = resolve(root, "package.json");
+	if (!inside(root, css) || !css.endsWith(".css")) throw new FontError("fontCssFile must be a CSS file inside the app root.");
+	if (!await exists(css) || !await exists(packageFile)) return void 0;
+	const guard = async () => {
+		if (await realpath(css) !== css || await realpath(packageFile) !== packageFile) throw new FontError("Font CSS and package.json must not use symbolic links.", 409);
+	};
+	await guard();
+	let pending = Promise.resolve();
+	const install = (id) => {
+		const task = pending.then(async () => {
+			if (typeof id !== "string" || id.length > 100 || !fontId.test(id)) throw new FontError("Expected a valid Fontsource font ID.");
+			await guard();
+			const font = await metadata(deps.fetch, `https://api.fontsource.org/v1/fonts/${id}`);
+			if (font.id !== id || typeof font.family !== "string" || !font.family.trim() || !Array.isArray(font.weights) || !Array.isArray(font.styles)) throw new FontError("Invalid Fontsource font metadata.", 502);
+			let variable = false;
+			if (font.variable) variable = !!(await metadata(deps.fetch, `https://api.fontsource.org/v1/variable/${id}`)).axes?.wght;
+			const packageName = `${variable ? "@fontsource-variable" : "@fontsource"}/${id}`;
+			const registry = await metadata(deps.fetch, `https://registry.npmjs.org/${encodeURIComponent(packageName)}/latest`);
+			if (registry.name !== packageName || typeof registry.version !== "string" || !versionPattern.test(registry.version)) throw new FontError("Invalid npm package version metadata.", 502);
+			const weights = font.weights.filter((weight) => typeof weight === "number" && Number.isInteger(weight) && weight >= 1 && weight <= 1e3);
+			const styles = ["normal", "italic"].filter((style) => font.styles.includes(style));
+			if (!weights.length || !styles.length) throw new FontError("This font has no supported styles.");
+			const imports = variable ? styles.map((style) => `${packageName}/wght${style === "italic" ? "-italic" : ""}.css`) : weights.flatMap((weight) => styles.map((style) => `${packageName}/${weight}${style === "italic" ? "-italic" : ""}.css`));
+			const require = createRequire(packageFile);
+			const installed = async (exact = false) => {
+				try {
+					const declared = JSON.parse(await readFile(packageFile, "utf8"));
+					if (!declared.dependencies?.[packageName] && !declared.devDependencies?.[packageName]) return false;
+					const pkg = JSON.parse(await readFile(require.resolve(`${packageName}/package.json`), "utf8"));
+					if (exact && pkg.version !== registry.version) return false;
+					if (!versionPattern.test(pkg.version) || pkg.version.split(".")[0] !== registry.version.split(".")[0]) return false;
+					await Promise.all(imports.map((item) => access(require.resolve(item))));
+					return true;
+				} catch {
+					return false;
+				}
+			};
+			const alreadyInstalled = await installed();
+			if (!alreadyInstalled) {
+				const pm = await manager(root);
+				const spec = `${packageName}@${registry.version}`;
+				const args = pm.name === "npm" ? [
+					"install",
+					"--save-exact",
+					"--ignore-scripts",
+					spec
+				] : pm.name === "yarn" ? [
+					"add",
+					"--exact",
+					...pm.modernYarn ? [] : ["--ignore-scripts"],
+					spec
+				] : [
+					"add",
+					"--exact",
+					"--ignore-scripts",
+					spec
+				];
+				if (pm.name === "pnpm") args[1] = "--save-exact";
+				try {
+					await deps.install(pm.name, args, root);
+				} catch {
+					throw new FontError("Font installation failed. Existing CSS imports were left unchanged.", 502);
+				}
+				if (!await installed(true)) throw new FontError("Installed font files could not be verified. CSS imports were left unchanged.", 502);
+			}
+			await guard();
+			const source = await readFile(css, "utf8");
+			const existing = new Set([...source.matchAll(/@import\s+(?:url\(\s*)?["']([^"']+)["']/g)].map((match) => match[1]));
+			const missing = imports.filter((item) => !existing.has(item));
+			if (missing.length) {
+				const additions = missing.map((item) => `@import "${item}";`).join("\n");
+				const charset = source.match(/^(?:\uFEFF)?@charset\s+["'][^"']+["'];\s*/i)?.[0] ?? "";
+				const next = `${charset}${additions}\n${source.slice(charset.length)}`;
+				const temporary = `${css}.fontsource-${randomUUID()}.tmp`;
+				try {
+					await writeFile(temporary, next, { flag: "wx" });
+					await guard();
+					await rename(temporary, css);
+				} finally {
+					await unlink(temporary).catch(() => {});
+				}
+			}
+			return {
+				family: `${font.family}${variable ? " Variable" : ""}`,
+				packageName,
+				imports,
+				alreadyInstalled
+			};
+		});
+		pending = task.then(() => {}, () => {});
+		return task;
+	};
+	return {
+		cssFile: relative(root, css).split(sep).join("/"),
+		install
+	};
+}
+async function configureFontsource(server, cssName, token, base) {
+	const installer = await createFontsourceInstaller(server.config.root, cssName);
+	if (!installer) return void 0;
+	const endpoint = `${base}__povio_ui/fontsource`;
+	server.middlewares.use((req, res, next) => {
+		if (req.url?.split("?")[0] !== endpoint) return next();
+		handle(req, res).catch((error) => respond(res, error instanceof FontError ? error.status : 500, { error: error instanceof Error ? error.message : "Could not install font." }));
+	});
+	function respond(res, status, body) {
+		res.writeHead(status, {
+			"Content-Type": "application/json",
+			"Cache-Control": "no-store"
+		});
+		res.end(JSON.stringify(body));
+	}
+	async function handle(req, res) {
+		if (req.method !== "POST") throw new FontError("Use POST to install a font.", 405);
+		if (req.headers["x-povio-ui-theme-token"] !== token) throw new FontError("Invalid theme token.", 403);
+		if (req.headers["sec-fetch-site"] === "cross-site") throw new FontError("Font installation requires the app origin.", 403);
+		if (req.headers.origin) {
+			let sameOrigin = false;
+			try {
+				sameOrigin = new URL(req.headers.origin).origin === `${server.config.server.https ? "https" : "http"}://${req.headers.host}`;
+			} catch {}
+			if (!sameOrigin) throw new FontError("Font installation requires the app origin.", 403);
+		}
+		if (!req.headers["content-type"]?.startsWith("application/json")) throw new FontError("Expected application/json.", 415);
+		let size = 0;
+		const chunks = [];
+		for await (const chunk of req) {
+			size += Buffer.byteLength(chunk);
+			if (size > 1024) throw new FontError("Font request is too large.", 413);
+			chunks.push(Buffer.from(chunk));
+		}
+		let data;
+		try {
+			data = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+		} catch {
+			throw new FontError("Expected JSON containing a font ID.");
+		}
+		const id = data && typeof data === "object" && !Array.isArray(data) ? data.id : void 0;
+		respond(res, 200, await installer.install(id));
+	}
+	return {
+		endpoint,
+		cssFile: installer.cssFile
+	};
+}
+//#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])));
@@ -460,10 +688,6 @@ function updateThemeSource(source, exportedCss) {
 	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) {
@@ -512,13 +736,15 @@ function uiConfigurator(options = {}) {
 			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`;
+			const base = new URL(server.config.base, "http://localhost").pathname.replace(/\/?$/, "/");
+			const endpoint = `${base}__povio_ui/theme`;
 			connection = {
 				endpoint,
 				token: randomUUID(),
 				file: file.split(sep).join("/")
 			};
 			const token = connection.token;
+			if (options.fontCssFile !== false) connection.fontsource = await configureFontsource(server, options.fontCssFile ?? "src/styles/globals.css", token, base);
 			const save = async (request, response) => {
 				if (request.method !== "POST") {
 					response.setHeader("Allow", "POST");

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

@@ -3,7 +3,26 @@ 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;
+interface UIConfigurationModalProps {
+  /**
+   * Show only the editor, in the compact window the App Canvas uses: no components preview, and a 360px floating
+   * window. Open it with `openFloating`. Hosts that show the components themselves get this automatically.
+   */
+  editorOnly?: boolean;
+}
+declare function UIConfigurationModal({ editorOnly: editorOnlyProp }?: UIConfigurationModalProps): import("react").JSX.Element | null;
+//#endregion
+//#region src/configurator/PageInspector.d.ts
+interface PageInspectorProps {
+  /** While open, hovering the page inspects it and clicks pin elements instead of activating them. */
+  open: boolean;
+  onClose: () => void;
+}
+/**
+ * The App Canvas inspector for the live page: a sidebar with the box model, typography and colors of the hovered or
+ * pinned element, whose token links open the configurator on that token.
+ */
+declare function PageInspector({ open, onClose }: PageInspectorProps): import("react").ReactPortal | null;
 //#endregion
 //#region src/configurator/component-configuration.d.ts
 /**
@@ -24,4 +43,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, resolveUIConfiguration, useUIConfiguration };
+export { ColorModeSwitch, type ColorModeSwitchProps, type CvaDefinition, type CvaEdits, PageInspector, type PageInspectorProps, type ThemeEdits, type Tokens, type UIConfiguration, UIConfigurationModal, type UIConfigurationModalProps, UIConfigurationProvider, type UIConfigurationProviderProps, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/config/ui-configurator.js

@@ -1,3 +1,121 @@
-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, resolveUIConfiguration, useUIConfiguration };
+import { a as UIConfigurationModal, c as resolveUIConfiguration, i as useCanvasInspector, l as UIConfigurationProvider, n as CanvasInspectorPanel, o as ColorModeSwitch, t as CanvasInspectionOverlay, u as useUIConfiguration } from "../CanvasInspector-DdP3mHUY.js";
+import { c as isEditableToken, i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
+import { useEffect } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/configurator/PageInspector.tsx
+/** Inspector chrome, the configurator and anything a host marks are tools, never inspected or blocked. */
+const toolSelector = "[data-povio-inspector-ignore], .studio-overlay, .studio-floating-launcher";
+const isTool = (event) => event.target instanceof Element && !!event.target.closest(toolSelector);
+/**
+* The App Canvas inspector for the live page: a sidebar with the box model, typography and colors of the hovered or
+* pinned element, whose token links open the configurator on that token.
+*/
+function PageInspector(t0) {
+	const $ = c(17);
+	const { open, onClose } = t0;
+	const { defaults, revealToken } = useUIConfiguration();
+	let t1;
+	if ($[0] !== defaults) {
+		t1 = (name) => isEditableToken(name, defaults);
+		$[0] = defaults;
+		$[1] = t1;
+	} else t1 = $[1];
+	const inspector = useCanvasInspector(open, void 0, t1);
+	const { hoverPoint, selectPoint, clear } = inspector;
+	let t2;
+	let t3;
+	if ($[2] !== clear || $[3] !== hoverPoint || $[4] !== open || $[5] !== selectPoint) {
+		t2 = () => {
+			if (!open) return;
+			const move = (event) => {
+				if (!isTool(event)) hoverPoint(document, event.clientX, event.clientY);
+			};
+			const block = _temp;
+			const click = (event_1) => {
+				if (isTool(event_1)) return;
+				block(event_1);
+				selectPoint(document, event_1.clientX, event_1.clientY);
+			};
+			const key = (event_2) => {
+				if (event_2.key === "Escape" && !isTool(event_2)) clear();
+			};
+			const pressEvents = [
+				"pointerdown",
+				"mousedown",
+				"pointerup",
+				"mouseup",
+				"auxclick"
+			];
+			window.addEventListener("pointermove", move, true);
+			for (const type of pressEvents) window.addEventListener(type, block, true);
+			window.addEventListener("click", click, true);
+			window.addEventListener("keydown", key, true);
+			document.documentElement.classList.add("studio-page-inspecting");
+			return () => {
+				window.removeEventListener("pointermove", move, true);
+				for (const type_0 of pressEvents) window.removeEventListener(type_0, block, true);
+				window.removeEventListener("click", click, true);
+				window.removeEventListener("keydown", key, true);
+				document.documentElement.classList.remove("studio-page-inspecting");
+			};
+		};
+		t3 = [
+			open,
+			hoverPoint,
+			selectPoint,
+			clear
+		];
+		$[2] = clear;
+		$[3] = hoverPoint;
+		$[4] = open;
+		$[5] = selectPoint;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	if (!open) return null;
+	let t4;
+	if ($[8] !== inspector.measurement) {
+		t4 = inspector.measurement && /* @__PURE__ */ jsx(CanvasInspectionOverlay, {
+			className: "studio-page-inspection",
+			measurement: inspector.measurement,
+			width: window.innerWidth
+		});
+		$[8] = inspector.measurement;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== inspector || $[11] !== onClose || $[12] !== revealToken) {
+		t5 = /* @__PURE__ */ jsx(CanvasInspectorPanel, {
+			inspector,
+			onClose,
+			onSelectToken: revealToken,
+			className: "studio-page-inspector",
+			emptyHint: "Hover anything on the page to see its padding, margins, borders, radii and gaps."
+		});
+		$[10] = inspector;
+		$[11] = onClose;
+		$[12] = revealToken;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t4 || $[15] !== t5) {
+		t6 = createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t5] }), document.body);
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+function _temp(event_0) {
+	if (isTool(event_0)) return;
+	event_0.preventDefault();
+	event_0.stopPropagation();
+}
+//#endregion
+export { ColorModeSwitch, PageInspector, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/{datePickerValue.utils-QWR2q5Vv.js → datePickerValue.utils-BDB6KM8q.js}

@@ -4,7 +4,7 @@ import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
-import { u as getPlaceholder } from "./staticDateTimeSegments-BWea3HAt.js";
+import { u as getPlaceholder } from "./staticDateTimeSegments-Bs1_N5MR.js";
 import { useEffect, useRef } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";