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

package/README.md

@@ -322,3 +322,11 @@ Then open `/_canvas` directly. `enabled` accepts a boolean or a synchronous pred
 The canvas supports named workspaces, enabled pages per workspace, and independent positions per breakpoint. The selected page's HTML layers expand directly beneath its row in the sidebar.
 
 The existing `uiConfigurator` Vite plugin also saves canvas settings to `povio.canvas.json` in the app root. Configure an alternate file with `uiConfigurator({ canvasFile: "povio.canvas.json" })`, or disable this with `canvasFile: false`. No Git commands run: review and commit this file through the normal repository workflow. Conflicting writes from different sessions are rejected instead of silently overwriting settings. Without this development-server connection, settings stay in browser storage; export/import remains available. Theme versions from the Configure UI panel save separately to `povio.themes.json` (`themeVersionsFile` option).
+
+### Fontsource font families
+
+In Configure UI, open Typography → Font families → Browse Fontsource. Search or filter the catalog, select a family to preview it, then choose Heading, Body, or Add to available fonts and click **Add font to app**. In development, this installs the verified Fontsource package with the application's existing package manager, updates its package.json and lockfile, and adds CSS imports. Variable families with a weight axis are preferred; static families load their supported weights and styles. Existing compatible packages and imports are reused.
+
+The selected role is a live theme-version change. Close keeps it in that version; **Apply theme** writes the selected version's settings to the repo. Adding a font makes its assets available to every version without changing other versions' role assignments. Package installation scripts are disabled, and no Git commit or push is performed. Catalog browsing and temporary CDN previews also work without the development installer.
+
+The Vite plugin uses `src/styles/globals.css` by default. For another CSS entrypoint, configure `uiConfigurator({ fontCssFile: "src/app.css" })`; it must exist inside the application's Vite root. Set `fontCssFile: false` to disable font installation. Restart Vite after adding or changing the plugin configuration.

package/dist/{AppCanvasPage-DtWEvs_Y.js → AppCanvasPage-vta1j5YQ.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { _ as Moon, a as inspectElement, c as HighlightOverlay, d as useUIConfiguration, f as Trash, g as Pencil, h as Pin, l as InspectorDetails, m as Plus, p as Sun, r as useRepositoryStorage, s as getBoxHighlights, t as UIConfigurationModal } from "./UIConfigurator-DekPXjv9.js";
+import { _ as Moon, a as inspectElement, c as HighlightOverlay, d as useUIConfiguration, f as Trash, g as Pencil, h as Pin, l as InspectorDetails, m as Plus, p as Sun, r as useRepositoryStorage, s as getBoxHighlights, t as UIConfigurationModal } from "./UIConfigurator-CjAW1SJY.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
@@ -3030,18 +3030,25 @@ function startCanvasDocument(doc, options) {
 	doc.addEventListener("load", schedule, true);
 	doc.fonts?.ready.then(schedule);
 	const focusDescriptor = Object.getOwnPropertyDescriptor(win.HTMLElement.prototype, "focus");
-	const elementFocus = focusDescriptor.value;
+	const elementFocus = win.HTMLElement.prototype.focus;
 	const windowFocusDescriptor = Object.getOwnPropertyDescriptor(win, "focus");
-	const windowFocus = windowFocusDescriptor?.value;
+	const windowFocus = win.focus;
 	Object.defineProperty(win.HTMLElement.prototype, "focus", {
-		...focusDescriptor,
+		configurable: focusDescriptor.configurable,
+		enumerable: focusDescriptor.enumerable,
+		writable: true,
 		value(focusOptions) {
 			if (doc.hasFocus()) elementFocus.call(this, focusOptions);
 		}
 	});
-	win.focus = () => {
-		if (doc.hasFocus()) windowFocus?.call(win);
-	};
+	Object.defineProperty(win, "focus", {
+		configurable: windowFocusDescriptor?.configurable ?? true,
+		enumerable: windowFocusDescriptor?.enumerable ?? true,
+		writable: true,
+		value() {
+			if (doc.hasFocus()) windowFocus.call(win);
+		}
+	});
 	refresh();
 	return {
 		refresh,
@@ -3140,7 +3147,7 @@ function AppCanvasFrameBridge({ href }) {
 const APP_CANVAS_PATH = "/_canvas";
 /** Must match `componentsFrameParam`; kept inline so the canvas page does not load the gallery eagerly. */
 const componentsParam = "povio-components";
-const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-CbgJJv-3.js"));
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-D6Mh_G3q.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
 	const $ = c(24);

package/dist/{CanvasComponentsFrame-CbgJJv-3.js → CanvasComponentsFrame-D6Mh_G3q.js}

@@ -1,4 +1,4 @@
-import { ComponentArtboard } from "./ComponentGallery-COqEqqN6.js";
+import { ComponentArtboard } from "./ComponentGallery-CzKU899_.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/app-canvas/CanvasComponentsFrame.tsx

package/dist/{ComponentGallery-COqEqqN6.js → ComponentGallery-CzKU899_.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { o as inspectTokens } from "./UIConfigurator-DekPXjv9.js";
+import { o as inspectTokens } from "./UIConfigurator-CjAW1SJY.js";
 import { n as ArrowLeft } from "./DropdownMenu-5jmtgLXd.js";
 import { i as ArrowRight } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { n as Italic, r as Bold, t as Underline } from "./underline-66hmELxa.js";

package/dist/{UIConfigurator-DekPXjv9.js → UIConfigurator-CjAW1SJY.js}

@@ -731,7 +731,7 @@ function UIConfigurationProvider(t0) {
 	let t4;
 	if ($[4] !== isOpen || $[5] !== open) {
 		t4 = () => {
-			if (isOpen) setRevision(_temp5$2);
+			if (isOpen) setRevision(_temp5$3);
 			else open();
 			setFloating(true);
 		};
@@ -883,7 +883,7 @@ function UIConfigurationProvider(t0) {
 	} else t17 = $[49];
 	return t17;
 }
-function _temp5$2(value_1) {
+function _temp5$3(value_1) {
 	return value_1 + 1;
 }
 function _temp4$4(value_0) {
@@ -904,6 +904,360 @@ function useUIConfiguration() {
 	return context;
 }
 //#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";
+const themeWriterTokenHeader = "x-povio-ui-theme-token";
+//#endregion
+//#region src/configurator/theme-writer-client.ts
+function getThemeWriter() {
+	if (typeof document === "undefined") return null;
+	const content = document.querySelector(`meta[name="${themeWriterMetaName}"]`)?.content;
+	if (!content) return null;
+	try {
+		const connection = JSON.parse(content);
+		if (typeof connection.endpoint === "string" && connection.endpoint.startsWith("/") && !connection.endpoint.startsWith("//") && typeof connection.token === "string" && typeof connection.file === "string") return connection;
+	} catch {}
+	return null;
+}
+async function saveThemeCss(connection, css) {
+	const response = await fetch(connection.endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			[themeWriterTokenHeader]: connection.token
+		},
+		body: JSON.stringify({ css })
+	});
+	if (!response.ok) {
+		const result = await response.json().catch(() => null);
+		throw new Error(result?.error ?? `Theme save failed (${response.status}).`);
+	}
+}
+//#endregion
+//#region src/configurator/fontsource-client.ts
+const validId = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+let catalog;
+/** One metadata request per page, not one font download per search result. */
+function loadFontsourceCatalog() {
+	catalog ??= fetch("https://api.fontsource.org/v1/fonts", { signal: AbortSignal.timeout(15e3) }).then(async (response) => {
+		if (!response.ok) throw new Error("Fontsource is unavailable. Try again.");
+		const data = await response.json();
+		if (!Array.isArray(data)) throw new Error("Fontsource returned an invalid catalog.");
+		return data.filter((font) => font && typeof font.id === "string" && font.id.length <= 100 && validId.test(font.id) && typeof font.family === "string" && typeof font.category === "string" && typeof font.variable === "boolean" && Array.isArray(font.subsets) && font.subsets.every((s) => typeof s === "string" && validId.test(s)) && typeof font.defSubset === "string" && font.subsets.includes(font.defSubset) && Array.isArray(font.weights) && font.weights.length > 0 && font.weights.every((w) => typeof w === "number" && w > 0 && w <= 1e3) && Array.isArray(font.styles) && (font.styles.includes("normal") || font.styles.includes("italic")) && font.type !== "icons").sort((a, b) => a.family.localeCompare(b.family));
+	}).catch((error) => {
+		catalog = void 0;
+		throw error;
+	});
+	return catalog;
+}
+function fontsourceWriter() {
+	const writer = getThemeWriter();
+	const fonts = writer?.fontsource;
+	return fonts && typeof fonts.endpoint === "string" && fonts.endpoint.startsWith("/") && !fonts.endpoint.startsWith("//") && typeof fonts.cssFile === "string" ? {
+		...fonts,
+		token: writer.token
+	} : null;
+}
+async function addFontsourceFamily(id) {
+	const writer = fontsourceWriter();
+	if (!writer) throw new Error("Adding fonts requires the Povio UI Vite plugin in a development server.");
+	const response = await fetch(writer.endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			[themeWriterTokenHeader]: writer.token
+		},
+		body: JSON.stringify({ id })
+	});
+	const result = await response.json();
+	if (!response.ok) throw new Error(result.error ?? "Could not add this font to the app.");
+	if (typeof result.family !== "string" || typeof result.packageName !== "string" || !Array.isArray(result.imports)) throw new Error("The font installer returned an invalid response.");
+	return result;
+}
+/** The static preview is temporary; installed variable families use their full range. */
+function fontsourcePreview(font) {
+	const subset = font.subsets.includes("latin") ? "latin" : font.defSubset;
+	const weight = font.weights.includes(400) ? 400 : font.weights[0];
+	const style = font.styles.includes("normal") ? "normal" : "italic";
+	return {
+		alias: `Povio Fontsource preview ${font.id}`,
+		weight,
+		style,
+		url: `https://cdn.jsdelivr.net/fontsource/fonts/${font.id}@latest/${subset}-${weight}-${style}.woff2`
+	};
+}
+//#endregion
+//#region src/configurator/FontsourcePicker.tsx
+function FontsourcePicker({ roles, onAdded }) {
+	const trigger = useRef(null);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const [open, setOpen] = useState(false);
+	const [fonts, setFonts] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [query, setQuery] = useState("");
+	const [limit, setLimit] = useState(30);
+	const [category, setCategory] = useState("");
+	const [variableOnly, setVariableOnly] = useState(false);
+	useEffect(() => setLimit(30), [
+		query,
+		category,
+		variableOnly
+	]);
+	const [selected, setSelected] = useState(null);
+	const [sample, setSample] = useState("The quick brown fox jumps over the lazy dog.");
+	const [previewState, setPreviewState] = useState("loading");
+	const [role, setRole] = useState(roles[0]?.token ?? "");
+	const [adding, setAdding] = useState(false);
+	const [error, setError] = useState("");
+	const [notice, setNotice] = useState("");
+	const [retry, setRetry] = useState(0);
+	const writer = fontsourceWriter();
+	useEffect(() => {
+		if (!open) return;
+		let active = true;
+		setLoading(true);
+		setError("");
+		loadFontsourceCatalog().then((value) => {
+			if (active) setFonts(value);
+		}).catch((cause) => {
+			if (active) setError(cause instanceof Error ? cause.message : "Could not load Fontsource.");
+		}).finally(() => {
+			if (active) setLoading(false);
+		});
+		return () => {
+			active = false;
+		};
+	}, [open, retry]);
+	useEffect(() => {
+		if (!open || !selected) return;
+		let active_0 = true;
+		const doc = trigger.current?.ownerDocument ?? document;
+		const preview = fontsourcePreview(selected);
+		const face = new FontFace(preview.alias, `url("${preview.url}")`, {
+			weight: String(preview.weight),
+			style: preview.style
+		});
+		setPreviewState("loading");
+		face.load().then((loaded) => {
+			if (active_0) {
+				doc.fonts.add(loaded);
+				setPreviewState("ready");
+			}
+		}).catch(() => {
+			if (active_0) setPreviewState("error");
+		});
+		return () => {
+			active_0 = false;
+			doc.fonts.delete(face);
+		};
+	}, [open, selected]);
+	const filtered = useMemo(() => fonts.filter((font) => font.family.toLowerCase().includes(query.trim().toLowerCase()) && (!category || category === font.category) && (!variableOnly || font.variable)), [
+		fonts,
+		query,
+		category,
+		variableOnly
+	]);
+	const preview_0 = selected ? fontsourcePreview(selected) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "studio-fontsource",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref: trigger,
+				type: "button",
+				className: "studio-gallery-back",
+				onClick: () => {
+					setOpen(true);
+					setError("");
+				},
+				children: "Browse Fontsource"
+			}),
+			notice && /* @__PURE__ */ jsx("span", {
+				className: "studio-fontsource-notice",
+				role: "status",
+				children: notice
+			}),
+			/* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+				triggerRef: trigger,
+				placement: "bottom start",
+				offset: 6,
+				isOpen: open,
+				onOpenChange: (value_0) => {
+					if (!adding) setOpen(value_0);
+				},
+				isKeyboardDismissDisabled: adding,
+				className: "studio-fontsource-popover",
+				children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+					"aria-label": "Fontsource font picker",
+					children: [
+						/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+							slot: "title",
+							children: "Fontsource fonts"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Close font picker",
+							disabled: adding,
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ jsx(X, { size: 13 })
+						})] }),
+						/* @__PURE__ */ jsxs("label", {
+							className: "studio-fontsource-search",
+							children: [/* @__PURE__ */ jsx(Search, { size: 13 }), /* @__PURE__ */ jsx("input", {
+								autoFocus: true,
+								"aria-label": "Search Fontsource fonts",
+								placeholder: "Find a font family…",
+								value: query,
+								onChange: (event) => setQuery(event.target.value)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "studio-fontsource-filters",
+							children: [/* @__PURE__ */ jsxs("select", {
+								"aria-label": "Font category",
+								value: category,
+								onChange: (event_0) => setCategory(event_0.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "All categories"
+								}), [...new Set(fonts.map((font_0) => font_0.category))].sort().map((name) => /* @__PURE__ */ jsx("option", {
+									value: name,
+									children: name
+								}, name))]
+							}), /* @__PURE__ */ jsxs("label", { children: [
+								/* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: variableOnly,
+									onChange: (event_1) => setVariableOnly(event_1.target.checked)
+								}),
+								" ",
+								"Variable only"
+							] })]
+						}),
+						loading ? /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: "Loading font families…"
+						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "studio-fontsource-count",
+								children: [
+									filtered.length,
+									" families",
+									filtered.length > limit ? ` · showing ${limit}` : ""
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "studio-fontsource-list",
+								role: "group",
+								"aria-label": "Fontsource families",
+								children: [filtered.slice(0, limit).map((font_1) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									disabled: adding,
+									"aria-pressed": selected?.id === font_1.id,
+									onClick: () => {
+										setSelected(font_1);
+										setError("");
+									},
+									children: [
+										/* @__PURE__ */ jsx("span", { children: font_1.family }),
+										/* @__PURE__ */ jsxs("small", { children: [font_1.category, font_1.variable ? " · variable" : ""] }),
+										selected?.id === font_1.id && /* @__PURE__ */ jsx(Check, { size: 12 })
+									]
+								}, font_1.id)), !filtered.length && !error && /* @__PURE__ */ jsx("p", { children: "No matching font families." })]
+							}),
+							filtered.length > limit && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "studio-fontsource-more",
+								onClick: () => setLimit((value_1) => value_1 + 30),
+								children: "Show more fonts"
+							})
+						] }),
+						selected && /* @__PURE__ */ jsxs("section", {
+							className: "studio-fontsource-preview",
+							"aria-label": `Preview ${selected.family}`,
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: selected.family }),
+								/* @__PURE__ */ jsx("input", {
+									"aria-label": "Font preview text",
+									value: sample,
+									onChange: (event_2) => setSample(event_2.target.value)
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "studio-fontsource-sample",
+									style: {
+										fontFamily: previewState === "ready" ? `"${preview_0.alias}", sans-serif` : "inherit",
+										fontWeight: preview_0?.weight,
+										fontStyle: preview_0?.style
+									},
+									children: sample || "Aa Bb Cc 0123456789"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "status",
+									children: previewState === "loading" ? "Loading preview…" : previewState === "error" ? "Preview could not load. You can still add this family." : ""
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "studio-fontsource-role",
+									children: ["Use for", /* @__PURE__ */ jsxs("select", {
+										"aria-label": "Use font for",
+										value: role,
+										disabled: adding,
+										onChange: (event_3) => setRole(event_3.target.value),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "",
+											children: "Add to available fonts"
+										}), roles.map((item) => /* @__PURE__ */ jsx("option", {
+											value: item.token,
+											children: item.label
+										}, item.token))]
+									})]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "studio-primary",
+									disabled: adding || !writer,
+									onClick: async () => {
+										setAdding(true);
+										setError("");
+										try {
+											const font_2 = await addFontsourceFamily(selected.id);
+											if (!mounted.current) return;
+											onAdded(font_2, role || void 0);
+											setNotice(`${font_2.family} added to the app.`);
+											setOpen(false);
+										} catch (cause_0) {
+											setError(cause_0 instanceof Error ? cause_0.message : "Could not add font.");
+										} finally {
+											setAdding(false);
+										}
+									},
+									children: adding ? "Adding font…" : "Add font to app"
+								})
+							]
+						}),
+						error && /* @__PURE__ */ jsxs("p", {
+							role: "alert",
+							children: [error, !fonts.length && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setRetry((value_2) => value_2 + 1),
+								children: "Retry"
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "studio-fontsource-help",
+							children: writer ? `Adding installs the font package and updates ${writer.cssFile}. Your theme version keeps the Heading/Body choice; Apply theme writes it to the repo.` : "Preview fonts here. Adding them to your app requires the Povio UI Vite plugin in development."
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/configurator/inspector/InspectorDetails.tsx
 /** A token as a design tool names a variable: `--text-large--line-height` → `text-large/line-height`. */
 const variableName = (token) => token.replace(/^--/, "").replace(/-base$/, "").replaceAll("--", "/");
@@ -1025,7 +1379,7 @@ function BoxModel(t0) {
 	let t3;
 	let t4;
 	if ($[0] !== box.border || $[1] !== box.content.height || $[2] !== box.content.width || $[3] !== box.gap.column || $[4] !== box.gap.row || $[5] !== box.margin || $[6] !== box.padding || $[7] !== box.position || $[8] !== box.radius || $[9] !== onHighlight || $[10] !== onSelect || $[11] !== snapshot.groups) {
-		const properties = snapshot.groups.flatMap(_temp5$1);
+		const properties = snapshot.groups.flatMap(_temp5$2);
 		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
 		const nonzero = _temp7$1;
 		let t5;
@@ -1204,7 +1558,7 @@ function _temp7$1(value_0) {
 function _temp6$1(part) {
 	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
 }
-function _temp5$1(group) {
+function _temp5$2(group) {
 	return group.properties;
 }
 function _temp4$3(value) {
@@ -3784,7 +4138,7 @@ function CvaEditor(t0) {
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
 									children: "None"
-								}), Object.keys(options).map(_temp5)]
+								}), Object.keys(options).map(_temp5$1)]
 							})]
 						}),
 						Object.entries(options).map((t20) => {
@@ -3886,7 +4240,7 @@ function _temp6(t0) {
 	const [key_3] = t0;
 	return key_3 !== "className";
 }
-function _temp5(value_1) {
+function _temp5$1(value_1) {
 	return /* @__PURE__ */ jsx("option", {
 		value: value_1,
 		children: value_1
@@ -3908,37 +4262,6 @@ function _temp2$2(key) {
 	return key.split(".")[0];
 }
 //#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";
-const themeWriterTokenHeader = "x-povio-ui-theme-token";
-//#endregion
-//#region src/configurator/theme-writer-client.ts
-function getThemeWriter() {
-	if (typeof document === "undefined") return null;
-	const content = document.querySelector(`meta[name="${themeWriterMetaName}"]`)?.content;
-	if (!content) return null;
-	try {
-		const connection = JSON.parse(content);
-		if (typeof connection.endpoint === "string" && connection.endpoint.startsWith("/") && !connection.endpoint.startsWith("//") && typeof connection.token === "string" && typeof connection.file === "string") return connection;
-	} catch {}
-	return null;
-}
-async function saveThemeCss(connection, css) {
-	const response = await fetch(connection.endpoint, {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			[themeWriterTokenHeader]: connection.token
-		},
-		body: JSON.stringify({ css })
-	});
-	if (!response.ok) {
-		const result = await response.json().catch(() => null);
-		throw new Error(result?.error ?? `Theme save failed (${response.status}).`);
-	}
-}
-//#endregion
 //#region src/configurator/theme-versions.ts
 const themeVersionsMetaName = "povio-ui-theme-versions";
 function createThemeVersion(name, id, configuration) {
@@ -4893,13 +5216,13 @@ function useLoadedFonts() {
 			document.fonts.ready.then(() => {
 				if (!active) return;
 				const root = getComputedStyle(document.documentElement);
-				const families = [...new Set([...document.fonts].map(_temp2))];
-				setFonts(families.map((family) => {
-					const base = `--font-${family.split(/\s+/)[0].toLowerCase()}-base`;
-					const value_0 = unquote(root.getPropertyValue(base)) === family ? `var(${base}), sans-serif` : `"${family}", sans-serif`;
-					const group = uploadedFamilies.has(family) ? "Uploaded fonts" : "Loaded fonts";
+				const families = [...new Set([...document.fonts].map(_temp2))].filter(_temp3);
+				setFonts(families.map((family_0) => {
+					const base = `--font-${family_0.split(/\s+/)[0].toLowerCase()}-base`;
+					const value_0 = unquote(root.getPropertyValue(base)) === family_0 ? `var(${base}), sans-serif` : `"${family_0}", sans-serif`;
+					const group = uploadedFamilies.has(family_0) ? "Uploaded fonts" : "Loaded fonts";
 					return {
-						name: `loaded:${family}`,
+						name: `loaded:${family_0}`,
 						label: familyName(value_0),
 						value: value_0,
 						group
@@ -4928,6 +5251,9 @@ function useLoadedFonts() {
 	return t4;
 }
 /** Families added through the upload button in this page session. */
+function _temp3(family) {
+	return !family.startsWith("Povio Fontsource preview ");
+}
 function _temp2(face) {
 	return unquote(face.family);
 }
@@ -5106,7 +5432,7 @@ function FontRoleCard(t0) {
 	} else t11 = $[21];
 	let t12;
 	if ($[22] !== options) {
-		t12 = new Set(options.map(_temp3));
+		t12 = new Set(options.map(_temp4));
 		$[22] = options;
 		$[23] = t12;
 	} else t12 = $[23];
@@ -5120,7 +5446,7 @@ function FontRoleCard(t0) {
 	if ($[26] !== options || $[27] !== t13) {
 		t14 = t13.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
 			label: group_0,
-			children: options.filter((option_1) => option_1.group === group_0).map(_temp4)
+			children: options.filter((option_1) => option_1.group === group_0).map(_temp5)
 		}, group_0));
 		$[26] = options;
 		$[27] = t13;
@@ -5182,13 +5508,13 @@ function FontRoleCard(t0) {
 	} else t17 = $[45];
 	return t17;
 }
-function _temp4(option_2) {
+function _temp5(option_2) {
 	return /* @__PURE__ */ jsx("option", {
 		value: option_2.name,
 		children: option_2.label
 	}, option_2.name);
 }
-function _temp3(t0) {
+function _temp4(t0) {
 	const { group } = t0;
 	return group;
 }
@@ -5740,7 +6066,7 @@ function _temp$1(t0) {
 }
 //#endregion
 //#region src/configurator/ComponentPreview.tsx
-const ComponentGallery = lazy(() => import("./ComponentGallery-COqEqqN6.js"));
+const ComponentGallery = lazy(() => import("./ComponentGallery-CzKU899_.js"));
 /** Every component, styled by a configuration; the configurator's preview and the App Canvas Components view. */
 function ComponentPreview(t0) {
 	const $ = c(14);
@@ -6671,6 +6997,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 	const [mode, setMode] = useState(remembered.mode ?? "light");
 	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
 	const [loadedFonts, refreshLoadedFonts] = useLoadedFonts();
+	const [fontsourceFamilies, setFontsourceFamilies] = useState([]);
 	const [editorWidth, setEditorWidth] = useState(remembered.editorWidth);
 	const [confirmingReset, setConfirmingReset] = useState(false);
 	const [nothingToReset, setNothingToReset] = useState(false);
@@ -7037,6 +7364,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		const options = [
 			...themeFonts,
 			...loadedFonts.filter((font) => !themeFonts.some(({ value: value_11 }) => value_11 === font.value)),
+			...fontsourceFamilies.filter((font_0) => !loadedFonts.some((loaded) => loaded.label === font_0.label)),
 			...systemFonts
 		];
 		const roleLabels = {
@@ -7059,6 +7387,23 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 						highlighted: highlightedToken === name_24
 					}, `${revision}-${resetRevision}-${name_24}`))
 				}),
+				/* @__PURE__ */ jsx(FontsourcePicker, {
+					roles: roles.map(([token_0]) => ({
+						token: token_0,
+						label: roleLabels[token_0] ?? labelFor(token_0).replace(/^font /, "")
+					})),
+					onAdded: (font_1, role) => {
+						const value_13 = `${JSON.stringify(font_1.family)}, sans-serif`;
+						setFontsourceFamilies((current_12) => [...current_12.filter((item) => item.name !== `fontsource:${font_1.packageName}`), {
+							name: `fontsource:${font_1.packageName}`,
+							label: font_1.family,
+							value: value_13,
+							group: "Fontsource fonts"
+						}]);
+						refreshLoadedFonts();
+						if (role) setToken(role, value_13);
+					}
+				}),
 				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
 				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_2) => renderToken(entry_2))] })
 			]
@@ -7242,8 +7587,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											role: "tab",
 											"aria-selected": !searching && tab_0 === activeSectionTab,
 											disabled: searching,
-											onClick: () => setSectionTabs((current_12) => ({
-												...current_12,
+											onClick: () => setSectionTabs((current_13) => ({
+												...current_13,
 												[section]: tab_0
 											})),
 											children: [tab_0, groupChanged([...groupedEntries].filter(([key_14]) => tabFor(key_14) === tab_0).flatMap(([, group_6]) => group_6.entries)) && /* @__PURE__ */ jsx("span", {
@@ -7431,10 +7776,10 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											children: [/* @__PURE__ */ jsxs("span", { children: ["Use static inputs until interaction", /* @__PURE__ */ jsx("small", { children: "Reduce work when rendering large forms." })] }), /* @__PURE__ */ jsx("input", {
 												type: "checkbox",
 												checked: config.renderStaticInput,
-												onChange: (event_5) => setDraft((current_13) => ({
-													...current_13,
+												onChange: (event_5) => setDraft((current_14) => ({
+													...current_14,
 													config: {
-														...current_13.config,
+														...current_14.config,
 														renderStaticInput: event_5.target.checked
 													}
 												}))

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-vta1j5YQ.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.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-vta1j5YQ.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.js

@@ -1,3 +1,3 @@
-import { d as useUIConfiguration, i as resolveUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-DekPXjv9.js";
+import { d as useUIConfiguration, i as resolveUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal, u as UIConfigurationProvider } from "../UIConfigurator-CjAW1SJY.js";
 import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
 export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, resolveUIConfiguration, useUIConfiguration };

package/dist/styles/configurator.css

@@ -3692,3 +3692,205 @@
   outline: 2px solid #555;
   outline-offset: 1px;
 }
+/* Fontsource browsing stays compact even when the preview theme changes. */
+.studio-fontsource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+}
+.studio-fontsource-notice {
+  color: #777;
+  font-size: 10px;
+}
+.studio-fontsource-popover {
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(680px, calc(100dvh - 24px));
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  background: #fff;
+  color: #303036;
+  box-shadow: 0 8px 32px #24202d26;
+  font:
+    11px/1.4 Inter,
+    system-ui,
+    sans-serif;
+  z-index: 10020;
+}
+.studio-fontsource-popover * {
+  box-sizing: border-box;
+}
+.studio-fontsource-popover [role="dialog"] {
+  outline: none;
+}
+.studio-fontsource-popover header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.studio-fontsource-popover h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+.studio-fontsource-popover button,
+.studio-fontsource-popover input,
+.studio-fontsource-popover select {
+  font: inherit;
+  color: inherit;
+}
+.studio-fontsource-popover button {
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 4px 7px;
+  background: #fff;
+  cursor: pointer;
+}
+.studio-fontsource-popover button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.studio-fontsource-popover header button {
+  display: grid;
+  place-items: center;
+  padding: 3px;
+  border: 0;
+}
+.studio-fontsource-popover input:not([type="checkbox"]),
+.studio-fontsource-popover select {
+  min-width: 0;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 6px 7px;
+  background: #fafafa;
+}
+.studio-fontsource-popover :focus-visible {
+  outline: 2px solid #7655d7;
+  outline-offset: 1px;
+}
+.studio-fontsource-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.studio-fontsource-search svg {
+  position: absolute;
+  left: 8px;
+  color: #888;
+}
+.studio-fontsource-popover .studio-fontsource-search input {
+  padding-left: 27px;
+}
+.studio-fontsource-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-filters select {
+  flex: 1;
+}
+.studio-fontsource-filters label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.studio-fontsource-filters input {
+  margin: 0;
+  accent-color: #7655d7;
+}
+.studio-fontsource-count {
+  display: block;
+  margin: 8px 0 3px;
+  font-size: 10px;
+  color: #888;
+}
+.studio-fontsource-list {
+  display: grid;
+  gap: 2px;
+  max-height: 180px;
+  overflow: auto;
+  padding: 3px;
+  margin-inline: -3px;
+}
+.studio-fontsource-list button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  text-align: left;
+  border-color: transparent;
+  padding: 5px 7px;
+}
+.studio-fontsource-list small {
+  grid-column: 1;
+  color: #888;
+  font-size: 9px;
+}
+.studio-fontsource-list svg {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+}
+.studio-fontsource-list button:hover {
+  background: #f6f4fa;
+}
+.studio-fontsource-list button[aria-pressed="true"] {
+  color: #6540c2;
+  background: #eee8ff;
+}
+.studio-fontsource-preview {
+  border-top: 1px solid #eee;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.studio-fontsource-preview > strong {
+  display: block;
+  margin-bottom: 6px;
+}
+.studio-fontsource-sample {
+  margin: 10px 0;
+  font-size: 26px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.studio-fontsource-preview > [role="status"] {
+  color: #888;
+  font-size: 10px;
+}
+.studio-fontsource-role {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-role select {
+  flex: 1;
+}
+.studio-fontsource-popover .studio-primary {
+  width: 100%;
+  background: #7655d7;
+  border-color: #7655d7;
+  color: white;
+}
+.studio-fontsource-help {
+  margin: 10px 0 0;
+  color: #888;
+  font-size: 10px;
+  line-height: 1.5;
+}
+.studio-fontsource-popover [role="alert"] {
+  color: #ad2937;
+}
+.studio-fontsource-popover [role="alert"] button {
+  margin-left: 8px;
+}
+.studio-fontsource-popover .studio-fontsource-more {
+  width: 100%;
+  margin-top: 5px;
+  font-size: 10px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.13",
+  "version": "5.0.0-rc.14",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",