@povio/ui 5.0.0-rc.3 → 5.0.0-rc.4

package/dist/config/ui-configurator.js

@@ -4,9 +4,9 @@ import { t as Check } from "../check-DYMBkp_Z.js";
 import { t as ChevronDown } from "../chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "../chevron-right-3nKJR5Bb.js";
 import { t as Info } from "../info-iUmX3uDk.js";
-import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "../CheckboxCheckmark-usHsolNj.js";
+import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition, u as Minus } from "../CheckboxCheckmark-CpC3wlMs.js";
 import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
-import { t as X } from "../x-B6vfz8Ps.js";
+import { t as Upload } from "../upload-CXU83BJ4.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { n as StyleMergeUtils, r as cva, t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
 import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "../utils-Czcqspm7.js";
@@ -16,12 +16,12 @@ import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$
 import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "../Heading-nI1_VOaE.js";
 import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "../Text-D2MPZ3sY.js";
 import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "../Form-DlQcyN1f.js";
-import { t as Checkbox } from "../Checkbox-BU0d702K.js";
+import { t as Checkbox } from "../Checkbox-CV1ILXXO.js";
 import { a as $928221da08ecbc62$export$dca12b0bb56e4fc, i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "../ListBox-CL8Ar4Q_.js";
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "../Modal-w60dVQcb.js";
-import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "../RadioGroup-B7_pNwn9.js";
+import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "../RadioGroup-DOw3PRoX.js";
 import { n as switchDefinition, t as Switch } from "../Switch-CqnGEdeD.js";
-import { n as textAreaWrapperDefinition, t as TextArea } from "../TextArea-DqHDiRGJ.js";
+import { n as textAreaWrapperDefinition, t as TextArea } from "../TextArea-D8WkKsGn.js";
 import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "../breadcrumbs.cva-7zzdDhVR.js";
 import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "../dropdownMenu.cva-DvEmX0bs.js";
 import { i as tooltipTextDefinition, n as tooltipPointerHorizontalDefinition, r as tooltipPointerVerticalDefinition, t as tooltipDefinition } from "../tooltip.cva-BIzlOXHH.js";
@@ -30,7 +30,7 @@ import { a as buttonSizeDefinition, i as buttonIconSizeDefinition, n as buttonCo
 import { r as badgeButtonDefinition } from "../badgeButton.cva-CvN4CTx5.js";
 import { BadgeButton } from "../components/badge-button.js";
 import { n as formFieldErrorDefinition } from "../FormFieldError-DeOHHLo2.js";
-import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition } from "../FormField-U_-d4V_g.js";
+import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition } from "../FormField-B99dLt8o.js";
 import { n as tagDefinition, t as Tag } from "../Tag-DPg5sL1Z.js";
 import { a as inputSizeDefinition, i as inputSideDefinition, n as inputClearClassDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "../input.cva-DJA8ovm_.js";
 import { t as popoverDefinition } from "../popover.cva-Bhud1wnp.js";
@@ -44,10 +44,10 @@ import { a as stepperSeparatorDefinition, i as stepperNumberDefinition, n as ste
 import { i as dialogOverlayDefinition, n as dialogMainDefinition, t as dialogContentDefinition } from "../dialog.cva-COhDZaVl.js";
 import { i as alertDefinition, n as statusIconDefinition, r as statusSeparatorDefinition, t as Alert } from "../Alert-CnvEb1D_.js";
 import { a as toastDefinition, i as toastContainerDefinition } from "../toast.cva-C_L_RffH.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "../table.cva-BikE8qJH.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "../table.cva-DlMT-zLD.js";
 import { t as linkDefinition } from "../link.cva-DMTHZiJG.js";
 import { t as tooltipWrapperTriggerDefinition } from "../tooltipWrapper.cva-BBQ4ic3D.js";
-import { a as groupFor, c as labelFor, d as runtimeCss, f as toHex, i as generateShades, l as parseThemeCss, m as validToken, n as emptyTheme, o as groups, p as toRgb, r as exportCss, s as isRgb, t as baseColorNames, u as previewTokens } from "../theme-model-C-QMCksE.js";
+import { C as validToken, S as toRgb, _ as parseThemeCss, a as generateShades, b as spacingLevels, c as isFontSizeToken, d as layoutKindFor, f as layoutKinds, g as listedLayoutToken, h as linkedLayoutTokens, i as exportCss, l as isRgb, m as layoutScales, n as controlHeightCounterpart, o as groupFor, p as layoutLevelFor, r as emptyTheme, s as groups, t as baseColorNames, u as labelFor, v as previewTokens, x as toHex, y as runtimeCss } from "../theme-model-DtYPxNvH.js";
 import $ahdqC$react, { Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -492,7 +492,7 @@ function UIConfigurationProvider(t0) {
 	if ($[0] !== applied) {
 		t1 = () => {
 			setDraft(structuredClone(applied));
-			setRevision(_temp$5);
+			setRevision(_temp$6);
 			setOpen(true);
 		};
 		$[0] = applied;
@@ -602,7 +602,7 @@ function UIConfigurationProvider(t0) {
 	} else t10 = $[33];
 	return t10;
 }
-function _temp$5(value) {
+function _temp$6(value) {
 	return value + 1;
 }
 function useUIConfiguration() {
@@ -630,7 +630,7 @@ function CvaPreview(t0) {
 		component = slot.split(".")[0];
 		const props = {
 			...definition?.config.defaultVariants,
-			...Object.fromEntries(Object.entries(variants).filter(_temp$4).map(_temp2$1))
+			...Object.fromEntries(Object.entries(variants).filter(_temp$5).map(_temp2$2))
 		};
 		const classes = (key, t4) => {
 			const extra = t4 === void 0 ? {} : t4;
@@ -761,7 +761,7 @@ function CvaPreview(t0) {
 				sample = /* @__PURE__ */ jsx("a", {
 					className: exact,
 					href: "#preview",
-					onClick: _temp3$1,
+					onClick: _temp3$2,
 					children: "Example link"
 				});
 				break bb0;
@@ -1272,7 +1272,7 @@ function CvaPreview(t0) {
 				children: [/* @__PURE__ */ jsx("option", {
 					value: "",
 					children: "Default"
-				}), Object.keys(options).map(_temp4$1)]
+				}), Object.keys(options).map(_temp4$2)]
 			})] }, name_1);
 		});
 		$[56] = setVariants;
@@ -1389,17 +1389,17 @@ function CvaPreview(t0) {
 	} else t13 = $[83];
 	return t13;
 }
-function _temp4$1(value_2) {
+function _temp4$2(value_2) {
 	return /* @__PURE__ */ jsx("option", { children: value_2 }, value_2);
 }
-function _temp3$1(event_1) {
+function _temp3$2(event_1) {
 	return event_1.preventDefault();
 }
-function _temp2$1(t0) {
+function _temp2$2(t0) {
 	const [name, value_0] = t0;
 	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
 }
-function _temp$4(t0) {
+function _temp$5(t0) {
 	const [, value] = t0;
 	return value !== "";
 }
@@ -1447,7 +1447,7 @@ function ContextualPreview(t0) {
 					background: name_0.endsWith("-base") && (/^\d+\s+\d+\s+\d+$/.test(original_0) || original_0.startsWith("var(")) ? `rgb(${value})` : value,
 					height: 44
 				};
-				else if (section === "Typography") {
+				else if (section === "Typography" || section === "Font size") {
 					style = name_0.startsWith("--text-") ? {
 						fontSize: value,
 						lineHeight: `var(${name_0}--line-height, 1.4)`,
@@ -1555,7 +1555,7 @@ function ClassField(t0) {
 			onFocus,
 			onChange: t4,
 			onBlur: t5,
-			onKeyDown: _temp$3
+			onKeyDown: _temp$4
 		});
 		$[10] = label;
 		$[11] = onFocus;
@@ -1576,7 +1576,7 @@ function ClassField(t0) {
 	} else t7 = $[17];
 	return t7;
 }
-function _temp$3(event_0) {
+function _temp$4(event_0) {
 	if (event_0.key === "Enter" && !event_0.nativeEvent.isComposing) {
 		event_0.preventDefault();
 		event_0.currentTarget.parentElement?.focus();
@@ -1607,7 +1607,7 @@ function CvaEditor(t0) {
 	let update;
 	if ($[2] !== component || $[3] !== draft.overrides || $[4] !== inheritedOverrides || $[5] !== setDraft || $[6] !== setSlot || $[7] !== slot) {
 		slots = Object.keys(cvaDefinitions);
-		const components = [...new Set(slots.map(_temp2))];
+		const components = [...new Set(slots.map(_temp2$1))];
 		let t10;
 		if ($[20] !== inheritedOverrides || $[21] !== slot) {
 			t10 = resolveCvaDefinition(slot, inheritedOverrides);
@@ -1650,7 +1650,7 @@ function CvaEditor(t0) {
 			const next_0 = event.target.value;
 			setSlot(slots.find((key_0) => key_0.startsWith(`${next_0}.`)));
 		};
-		t5 = components.map(_temp3);
+		t5 = components.map(_temp3$1);
 		$[2] = component;
 		$[3] = draft.overrides;
 		$[4] = inheritedOverrides;
@@ -1721,7 +1721,7 @@ function CvaEditor(t0) {
 	} else t13 = $[39];
 	let t14;
 	if ($[40] !== component || $[41] !== slots) {
-		t14 = slots.filter((key_1) => key_1.startsWith(`${component}.`)).map(_temp4);
+		t14 = slots.filter((key_1) => key_1.startsWith(`${component}.`)).map(_temp4$1);
 		$[40] = component;
 		$[41] = slots;
 		$[42] = t14;
@@ -1899,19 +1899,19 @@ function _temp5(value_1) {
 		children: value_1
 	}, value_1);
 }
-function _temp4(key_2) {
+function _temp4$1(key_2) {
 	return /* @__PURE__ */ jsx("option", {
 		value: key_2,
 		children: title(key_2.split(".")[1])
 	}, key_2);
 }
-function _temp3(name) {
+function _temp3$1(name) {
 	return /* @__PURE__ */ jsx("option", {
 		value: name,
 		children: title(name)
 	}, name);
 }
-function _temp2(key) {
+function _temp2$1(key) {
 	return key.split(".")[0];
 }
 //#endregion
@@ -2019,7 +2019,7 @@ function AlphaColorField(t0) {
 		setPercentText(null);
 		if (Number.isFinite(entered_0)) onChange(`#${color}${toAlpha(entered_0)}`);
 	};
-	const blurOnEnter = _temp$2;
+	const blurOnEnter = _temp$3;
 	const t1 = `#${color}`;
 	let t2;
 	if ($[0] !== t1 || $[1] !== value) {
@@ -2121,7 +2121,7 @@ function AlphaColorField(t0) {
 		]
 	});
 }
-function _temp$2(event) {
+function _temp$3(event) {
 	if (event.key === "Enter" && !event.nativeEvent.isComposing) event.currentTarget.blur();
 }
 //#endregion
@@ -2220,7 +2220,7 @@ function PaletteSelect(t0) {
 	} else t6 = $[14];
 	let t7;
 	if ($[15] !== options) {
-		t7 = paletteFamilies(options).map(_temp$1);
+		t7 = paletteFamilies(options).map(_temp$2);
 		$[15] = options;
 		$[16] = t7;
 	} else t7 = $[16];
@@ -2271,7 +2271,7 @@ function PaletteSelect(t0) {
 	} else t10 = $[27];
 	return t10;
 }
-function _temp$1(t0) {
+function _temp$2(t0) {
 	const { family: name, steps } = t0;
 	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, {
 		id: name,
@@ -2413,6 +2413,692 @@ function PanelResizeHandle(t0) {
 	return t8;
 }
 //#endregion
+//#region src/configurator/FontRoleCard.tsx
+const unquote = (family) => family.trim().replace(/^["']|["']$/g, "");
+/** Generic stacks that are available everywhere, for apps without their own fonts. */
+const systemFonts = [
+	{
+		name: "system:sans",
+		label: "System sans-serif",
+		value: "system-ui, sans-serif",
+		group: "System fonts"
+	},
+	{
+		name: "system:serif",
+		label: "System serif",
+		value: "ui-serif, Georgia, serif",
+		group: "System fonts"
+	},
+	{
+		name: "system:mono",
+		label: "System monospace",
+		value: "ui-monospace, monospace",
+		group: "System fonts"
+	}
+];
+/**
+* The font families the app has loaded (its `@font-face` rules, such as Fontsource packages). A family with a matching
+* `--font-<name>-base` variable is referenced through it, so the theme keeps a single place that names the font.
+*/
+function useLoadedFonts() {
+	const $ = c(7);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [fonts, setFonts] = useState(t0);
+	const [revision, setRevision] = useState(0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setRevision(_temp$1);
+		$[1] = t1;
+	} else t1 = $[1];
+	const refresh = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			let active = true;
+			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";
+					return {
+						name: `loaded:${family}`,
+						label: familyName(value_0),
+						value: value_0,
+						group
+					};
+				}));
+			});
+			return () => {
+				active = false;
+			};
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== revision) {
+		t3 = [revision];
+		$[3] = revision;
+		$[4] = t3;
+	} else t3 = $[4];
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== fonts) {
+		t4 = [fonts, refresh];
+		$[5] = fonts;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+/** Families added through the upload button in this page session. */
+function _temp2(face) {
+	return unquote(face.family);
+}
+function _temp$1(value) {
+	return value + 1;
+}
+const uploadedFamilies = /* @__PURE__ */ new Set();
+const fontFileTypes = ".woff2,.woff,.ttf,.otf";
+/**
+* Registers a font file with the page through the FontFace API, so it can be picked for a role and previewed right
+* away. The family is named after the file. It lasts for this page session; the app still needs the file and an
+* `@font-face` rule for a saved theme to use it.
+*/
+function FontUpload(t0) {
+	const $ = c(8);
+	const { onUpload } = t0;
+	const inputRef = useRef(null);
+	const [message, setMessage] = useState("");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "studio-gallery-back",
+			onClick: () => inputRef.current?.click(),
+			children: [/* @__PURE__ */ jsx(Upload, {
+				size: 13,
+				"aria-hidden": "true"
+			}), "Upload font"]
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== onUpload) {
+		t2 = /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept: fontFileTypes,
+			hidden: true,
+			onChange: async (event) => {
+				const file = event.target.files?.[0];
+				event.target.value = "";
+				if (!file) return;
+				const family = file.name.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim();
+				try {
+					const face = await new FontFace(family, await file.arrayBuffer()).load();
+					document.fonts.add(face);
+					uploadedFamilies.add(family);
+					onUpload(family);
+					setMessage(`Added ${family}. Pick it for Heading or Body above.`);
+				} catch {
+					setMessage(`${file.name} is not a font this browser can read. Use WOFF2, WOFF, TTF or OTF.`);
+				}
+			}
+		});
+		$[1] = onUpload;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = message || "WOFF2, WOFF, TTF or OTF. Uploaded fonts last for this session; add the file to your app with @font-face before saving the theme.";
+	let t4;
+	if ($[3] !== t3) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "studio-font-upload-note",
+			role: "status",
+			children: t3
+		});
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== t2 || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-upload",
+			children: [
+				t1,
+				t2,
+				t4
+			]
+		});
+		$[5] = t2;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
+}
+/** The family name a font stack starts with, such as "Inter" for `var(--font-inter-base), sans-serif`. */
+function familyName(value) {
+	const first = value.split(",")[0].trim();
+	return (first.match(/^var\(--font-([\w-]+?)(?:-base)?\)$/)?.[1] ?? unquote(first)).replace(/(^|-)(\w)/g, (_, dash, letter) => `${dash ? " " : ""}${letter.toUpperCase()}`);
+}
+/**
+* A font role (heading, body) shown as a card with its family name and a sample; the whole card opens a list of the
+* theme's font families, like a design tool's font picker.
+*/
+function FontRoleCard(t0) {
+	const $ = c(44);
+	const { label, value, options, changed, onChange, onReset } = t0;
+	let t1;
+	if ($[0] !== options || $[1] !== value) {
+		let t2;
+		if ($[3] !== value) {
+			t2 = (option) => option.value === value;
+			$[3] = value;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = options.find(t2);
+		$[0] = options;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const selected = t1;
+	let t2;
+	if ($[5] !== label) {
+		t2 = /* @__PURE__ */ jsx("span", { children: label });
+		$[5] = label;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== selected?.label || $[8] !== value) {
+		t3 = selected?.label ?? familyName(value);
+		$[7] = selected?.label;
+		$[8] = value;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx("strong", { children: t3 });
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t2 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "studio-font-role-text",
+			children: [t2, t4]
+		});
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== value) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "studio-font-role-sample",
+			style: { fontFamily: value },
+			"aria-hidden": "true",
+			children: "Aa"
+		});
+		$[15] = value;
+		$[16] = t6;
+	} else t6 = $[16];
+	const t7 = `${label} font`;
+	const t8 = selected?.name ?? "";
+	let t9;
+	if ($[17] !== onChange || $[18] !== options) {
+		t9 = (event) => {
+			const option_0 = options.find((t10) => {
+				const { name } = t10;
+				return name === event.target.value;
+			});
+			if (option_0) onChange(option_0.value);
+		};
+		$[17] = onChange;
+		$[18] = options;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== selected) {
+		t10 = !selected && /* @__PURE__ */ jsx("option", {
+			value: "",
+			disabled: true,
+			children: "Custom"
+		});
+		$[20] = selected;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== options) {
+		t11 = new Set(options.map(_temp3));
+		$[22] = options;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = [...t11];
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== options || $[27] !== t12) {
+		t13 = t12.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
+			label: group_0,
+			children: options.filter((option_1) => option_1.group === group_0).map(_temp4)
+		}, group_0));
+		$[26] = options;
+		$[27] = t12;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t10 || $[30] !== t13 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+		t14 = /* @__PURE__ */ jsxs("select", {
+			className: "studio-font-role-select",
+			"aria-label": t7,
+			value: t8,
+			onChange: t9,
+			children: [t10, t13]
+		});
+		$[29] = t10;
+		$[30] = t13;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== changed || $[36] !== label || $[37] !== onReset) {
+		t15 = changed && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "studio-font-role-reset",
+			"aria-label": `Reset ${label} font`,
+			title: "Reset to the theme default",
+			onClick: onReset,
+			children: /* @__PURE__ */ jsx(RotateCcw, {
+				size: 13,
+				"aria-hidden": "true"
+			})
+		});
+		$[35] = changed;
+		$[36] = label;
+		$[37] = onReset;
+		$[38] = t15;
+	} else t15 = $[38];
+	let t16;
+	if ($[39] !== t14 || $[40] !== t15 || $[41] !== t5 || $[42] !== t6) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-role",
+			children: [
+				t5,
+				t6,
+				t14,
+				t15
+			]
+		});
+		$[39] = t14;
+		$[40] = t15;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t16;
+	} else t16 = $[43];
+	return t16;
+}
+function _temp4(option_2) {
+	return /* @__PURE__ */ jsx("option", {
+		value: option_2.name,
+		children: option_2.label
+	}, option_2.name);
+}
+function _temp3(t0) {
+	const { group } = t0;
+	return group;
+}
+//#endregion
+//#region src/configurator/LayoutScaleControl.tsx
+const copy = {
+	Radius: {
+		title: "Global rounding",
+		description: "Scales every radius from the theme defaults"
+	},
+	Spacing: {
+		title: "Global spacing",
+		description: "Scales padding and gaps from the theme defaults"
+	},
+	Sizing: {
+		title: "Global sizing",
+		description: "Scales button and input heights, avatars, icons, minimum widths and container widths"
+	},
+	"Font size": {
+		title: "Global font size",
+		description: "Scales every text style; line heights follow"
+	}
+};
+/**
+* Steps every token of a layout tab up or down together. A custom level means individual tokens were edited, so the
+* next step starts again from the theme defaults.
+*/
+function LayoutScaleControl(t0) {
+	const $ = c(50);
+	const { kind, level, onChange } = t0;
+	const { levels, defaultLevel } = layoutScales[kind];
+	const current = level ?? defaultLevel;
+	const factor = level === void 0 ? 1 : levels[level].factor;
+	const { title, description } = copy[kind];
+	let t1;
+	if ($[0] !== kind) {
+		t1 = kind.toLowerCase().replace(" ", "-");
+		$[0] = kind;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = `studio-rounding-preview studio-scale-preview-${t1}`;
+	let t3;
+	if ($[2] !== factor || $[3] !== kind) {
+		t3 = kind === "Radius" ? { borderTopLeftRadius: factor === Infinity ? "999px" : `${factor * 6}px` } : kind === "Spacing" ? { gap: `${Math.round(factor * 4)}px` } : kind === "Font size" ? { fontSize: `${Math.round(factor * 14)}px` } : { scale: String(factor) };
+		$[2] = factor;
+		$[3] = kind;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = kind === "Font size" && "Aa";
+	let t5;
+	if ($[5] !== kind) {
+		t5 = kind === "Spacing" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("i", {})] });
+		$[5] = kind;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("span", {
+			className: t2,
+			"aria-hidden": "true",
+			style: t3,
+			children: [t4, t5]
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== title) {
+		t7 = /* @__PURE__ */ jsx("strong", { children: title });
+		$[12] = title;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== description) {
+		t8 = /* @__PURE__ */ jsx("span", { children: description });
+		$[14] = description;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding-text",
+			children: [t7, t8]
+		});
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== title) {
+		t10 = title.toLowerCase();
+		$[19] = title;
+		$[20] = t10;
+	} else t10 = $[20];
+	const t11 = `Decrease ${t10}`;
+	const t12 = level === 0;
+	let t13;
+	if ($[21] !== current || $[22] !== onChange) {
+		t13 = () => onChange(current - 1);
+		$[21] = current;
+		$[22] = onChange;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Minus, {
+			size: 13,
+			"aria-hidden": "true"
+		});
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t11 || $[26] !== t12 || $[27] !== t13) {
+		t15 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t11,
+			disabled: t12,
+			onClick: t13,
+			children: t14
+		});
+		$[25] = t11;
+		$[26] = t12;
+		$[27] = t13;
+		$[28] = t15;
+	} else t15 = $[28];
+	const t16 = level === void 0 ? "Custom" : levels[level].label;
+	let t17;
+	if ($[29] !== t16) {
+		t17 = /* @__PURE__ */ jsx("output", {
+			"aria-live": "polite",
+			children: t16
+		});
+		$[29] = t16;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== title) {
+		t18 = title.toLowerCase();
+		$[31] = title;
+		$[32] = t18;
+	} else t18 = $[32];
+	const t19 = `Increase ${t18}`;
+	const t20 = level === levels.length - 1;
+	let t21;
+	if ($[33] !== current || $[34] !== onChange) {
+		t21 = () => onChange(current + 1);
+		$[33] = current;
+		$[34] = onChange;
+		$[35] = t21;
+	} else t21 = $[35];
+	let t22;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(Plus, {
+			size: 13,
+			"aria-hidden": "true"
+		});
+		$[36] = t22;
+	} else t22 = $[36];
+	let t23;
+	if ($[37] !== t19 || $[38] !== t20 || $[39] !== t21) {
+		t23 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t19,
+			disabled: t20,
+			onClick: t21,
+			children: t22
+		});
+		$[37] = t19;
+		$[38] = t20;
+		$[39] = t21;
+		$[40] = t23;
+	} else t23 = $[40];
+	let t24;
+	if ($[41] !== t15 || $[42] !== t17 || $[43] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding-stepper",
+			children: [
+				t15,
+				t17,
+				t23
+			]
+		});
+		$[41] = t15;
+		$[42] = t17;
+		$[43] = t23;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== t24 || $[46] !== t6 || $[47] !== t9 || $[48] !== title) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding",
+			role: "group",
+			"aria-label": title,
+			children: [
+				t6,
+				t9,
+				t24
+			]
+		});
+		$[45] = t24;
+		$[46] = t6;
+		$[47] = t9;
+		$[48] = title;
+		$[49] = t25;
+	} else t25 = $[49];
+	return t25;
+}
+//#endregion
+//#region src/configurator/presets.ts
+/** Both copies of a token that Tailwind reads as `--spacing-*` (padding, height) and `--container-*` (width). */
+const layoutPair = (name, value) => ({
+	[`--spacing-${name}`]: value,
+	[`--container-${name}`]: value
+});
+/** Tailwind's neutral scale, as RGB channels for one of the theme's base palettes. */
+const neutralPalette = (palette) => Object.fromEntries(Object.entries({
+	50: "250 250 250",
+	100: "245 245 245",
+	200: "229 229 229",
+	300: "212 212 212",
+	400: "161 161 161",
+	500: "115 115 115",
+	600: "82 82 82",
+	700: "64 64 64",
+	800: "38 38 38",
+	900: "23 23 23",
+	950: "10 10 10"
+}).map(([step, value]) => [`--${palette}-${step}-base`, value]));
+const themePresets = [{
+	id: "shadcn",
+	label: "shadcn/ui",
+	description: "Neutral palette, near-black primary, Geist 14px, 8px controls radius, 36px buttons and inputs.",
+	edits: {
+		light: {
+			...neutralPalette("primary"),
+			...neutralPalette("neutral"),
+			"--surface-default-background-base": "var(--neutral-10-base)",
+			"--surface-default-card-base": "var(--neutral-10-base)",
+			"--surface-default-card-foreground-base": "var(--neutral-950-base)",
+			"--surface-default-foreground-base": "var(--neutral-950-base)",
+			"--surface-default-popover-foreground-base": "var(--neutral-500-base)",
+			"--border-default-subtle-base": "var(--neutral-200-base)",
+			"--border-default-input-base": "var(--neutral-200-base)",
+			"--interactive-primary-background-base": "var(--neutral-900-base)",
+			"--interactive-primary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-subtle-primary-background-base": "var(--neutral-100-base)",
+			"--interactive-subtle-primary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-subtle-secondary-background-base": "var(--neutral-100-base)",
+			"--interactive-subtle-secondary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-ring-base": "var(--neutral-400-base)",
+			"--states-hover-opacity": "10%"
+		},
+		dark: {
+			"--surface-default-background-base": "var(--neutral-950-base)",
+			"--surface-default-card-base": "var(--neutral-900-base)",
+			"--surface-default-card-foreground-base": "var(--neutral-50-base)",
+			"--surface-default-foreground-base": "var(--neutral-50-base)",
+			"--surface-default-popover-foreground-base": "var(--neutral-400-base)",
+			"--border-default-subtle-base": "var(--neutral-800-base)",
+			"--border-default-input-base": "var(--neutral-700-base)",
+			"--interactive-primary-background-base": "var(--neutral-200-base)",
+			"--interactive-primary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-subtle-primary-background-base": "var(--neutral-800-base)",
+			"--interactive-subtle-primary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-subtle-secondary-background-base": "var(--neutral-800-base)",
+			"--interactive-subtle-secondary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-ring-base": "var(--neutral-500-base)",
+			"--states-hover-opacity": "10%"
+		},
+		theme: {
+			"--font-titles": "var(--font-geist-base, \"Geist Variable\"), sans-serif",
+			"--font-body": "var(--font-geist-base, \"Geist Variable\"), sans-serif",
+			"--text-body": "0.875rem",
+			"--text-body--line-height": "1.4286",
+			"--radius-global-rounding-xs": "0.25rem",
+			"--radius-global-rounding-s": "0.375rem",
+			"--radius-global-rounding-m": "0.5rem",
+			"--radius-global-rounding-l": "0.625rem",
+			"--radius-global-rounding-xl": "0.875rem",
+			"--radius-button-rounding-default": "0.5rem",
+			"--radius-button-rounding-small": "0.5rem",
+			"--radius-button-focus-rounding-default": "0.625rem",
+			"--radius-button-focus-rounding-small": "0.625rem",
+			"--radius-input-rounding-default": "0.5rem",
+			"--radius-floating-label-input-rounding-default": "0.5rem",
+			"--radius-list-rounding-dropdown": "0.5rem",
+			"--radius-tooltip-rounding-default": "0.5rem",
+			"--radius-badge-rounding-default": "0.5rem",
+			"--radius-toast-rounding-default": "0.5rem",
+			"--radius-modal-rounding-default": "0.625rem",
+			"--radius-alert-rounding-default": "0.625rem",
+			"--radius-file-upload-container-rounding-default": "0.625rem",
+			"--radius-file-upload-file-card-rounding-default": "0.5rem",
+			"--radius-segmented-control-rounding-segment": "0.5rem",
+			"--radius-segmented-control-rounding-segmented-control": "0.625rem",
+			...layoutPair("button-height-default", "0.4375rem"),
+			...layoutPair("button-height-small", "0.3125rem"),
+			...layoutPair("button-side-default", "1rem"),
+			...layoutPair("button-side-small", "0.75rem")
+		}
+	}
+}, {
+	id: "compact",
+	label: "Compact",
+	description: "Keeps your colors and fonts. 36px default and 28px small controls, padding and gaps at ×0.75.",
+	edits: (defaults) => ({
+		light: {},
+		dark: {},
+		theme: {
+			...layoutScales.Spacing.scale(defaults, spacingLevels.findIndex(({ factor }) => factor === .75)),
+			...layoutPair("button-height-default", "0.4375rem"),
+			...layoutPair("button-height-small", "0.1875rem")
+		}
+	})
+}];
+/**
+* A preset's edits for this theme: tokens the theme does not define are skipped, and values equal to the theme's own
+* are left out, so the result reads like edits made by hand.
+*/
+function presetEdits(preset, defaults) {
+	const edits = emptyTheme();
+	const values = typeof preset.edits === "function" ? preset.edits(defaults) : preset.edits;
+	for (const bucket of [
+		"light",
+		"dark",
+		"theme"
+	]) for (const [name, value] of Object.entries(values[bucket])) if (name in defaults[bucket] && defaults[bucket][name] !== value) edits[bucket][name] = value;
+	return edits;
+}
+/** Whether the current edits are exactly this preset applied to the theme. */
+function isPresetActive(preset, defaults, current) {
+	const expected = presetEdits(preset, defaults);
+	return [
+		"light",
+		"dark",
+		"theme"
+	].every((bucket) => {
+		const [a, b] = [expected[bucket], current[bucket]];
+		return Object.keys(a).length === Object.keys(b).length && Object.entries(a).every(([name, value]) => b[name] === value);
+	});
+}
+//#endregion
 //#region src/configurator/ShadesGenerator.tsx
 /**
 * Generates a whole base palette scale from one color, which becomes its 500 step.
@@ -2618,56 +3304,6 @@ function _temp(t0) {
 	return step;
 }
 //#endregion
-//#region src/configurator/TwLogo.tsx
-/** The TW mark (from the admin app's `LogoSmall`), cropped to its outline for the configurator's top bar. */
-const TwLogo = (props) => {
-	const $ = c(5);
-	let t0;
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M20.5919 21H13.2263V22.1988H16.1963V27.9876H17.6327V22.1988H20.5919V21Z",
-			fill: "#2B51D4"
-		});
-		t1 = /* @__PURE__ */ jsx("path", {
-			d: "M21.1681 21L24.1165 27.9876H25.8769L27.9931 22.5165L30.0997 27.9876H31.8601L34.7761 21H33.2209L30.962 26.6031L28.8145 21H27.1621L25.0145 26.6031L22.7557 21H21.1681Z",
-			fill: "#2B51D4"
-		});
-		t2 = /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: "M10.2002 19.2C10.2002 18.2059 11.0061 17.4 12.0002 17.4H36.0002C36.9943 17.4 37.8002 18.2059 37.8002 19.2V29.4C37.8002 30.3941 36.9943 31.2 36.0002 31.2H12.0002C11.0061 31.2 10.2002 30.3941 10.2002 29.4V19.2ZM12.0002 18.6H36.0002C36.3316 18.6 36.6002 18.8686 36.6002 19.2V29.4C36.6002 29.7314 36.3316 30 36.0002 30H12.0002C11.6688 30 11.4002 29.7314 11.4002 29.4V19.2C11.4002 18.8686 11.6688 18.6 12.0002 18.6Z",
-			fill: "#2B51D4"
-		});
-		$[0] = t0;
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t0 = $[0];
-		t1 = $[1];
-		t2 = $[2];
-	}
-	let t3;
-	if ($[3] !== props) {
-		t3 = /* @__PURE__ */ jsxs("svg", {
-			viewBox: "10.2 17.4 27.6 13.8",
-			fill: "none",
-			xmlns: "http://www.w3.org/2000/svg",
-			"aria-hidden": "true",
-			...props,
-			children: [
-				t0,
-				t1,
-				t2
-			]
-		});
-		$[3] = props;
-		$[4] = t3;
-	} else t3 = $[4];
-	return t3;
-};
-//#endregion
 //#region src/configurator/UIConfigurator.tsx
 const colorNamespaces = {
 	surface: "Surfaces",
@@ -2691,6 +3327,7 @@ const componentNamespaces = [
 	["avatar", "Avatars"],
 	["table", "Tables"],
 	["alert", "Alerts"],
+	["badge", "Badges"],
 	["pill", "Pills"],
 	["progress", "Progress"],
 	["slider", "Sliders"],
@@ -2726,12 +3363,46 @@ const textStylesTab = "Text styles";
 const typographyTabFor = (groupKey) => groupKey.startsWith("--text-") ? textStylesTab : groupKey;
 const baseSystemTab = "Base system";
 const semanticPaletteTab = "Semantic palette";
+/** Radius, spacing and sizing share one Layout tab, with a sub-tab each. */
+const navSections = [
+	"Colors",
+	"Typography",
+	"Layout",
+	"Effects"
+];
+const isLayoutKind = (section) => layoutKinds.includes(section);
+/** The editor section that lists a token; font sizes open in Typography, their home section. */
+function sectionFor(name) {
+	const kind = layoutKindFor(name);
+	return kind && kind !== "Font size" ? kind : groupFor(name);
+}
+/** Presets, component defaults, CVA overrides and export share one Advanced tab, with a sub-tab each. */
+const advancedSections = [
+	["Presets", "Presets"],
+	["Components", "Defaults & behavior"],
+	["Variants & overrides", "Variants & overrides"],
+	["Export", "Export"]
+];
+const isAdvancedSection = (section) => advancedSections.some(([key]) => key === section);
+/** The app's own theme, so a preset can be undone without resetting component settings. */
+const appThemePreset = {
+	id: "app",
+	label: "App theme",
+	description: "The theme defined in this app's theme.css, without edits.",
+	edits: {
+		light: {},
+		dark: {},
+		theme: {}
+	}
+};
+/** Sections that list theme tokens; Font size lists the Typography font sizes again under Layout. */
+const isTokenSection = (section) => groups.includes(section) || isLayoutKind(section);
 /** The editor group a token is listed under within its section. */
 function groupKeyFor(section, name, defaults) {
 	const textStyle = section === "Typography" ? name.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
 	return textStyle ? `--text-${textStyle}` : section === "Typography" ? name.startsWith("--font-weight-") ? "Font weights" : name.startsWith("--font-") ? "Font families" : "Letter spacing" : section === "Colors" ? baseColorNames(defaults).has(name) ? `Base system · ${name.slice(2).split("-")[0]}` : colorNamespaces[name.slice(2).split("-")[0]] ?? "Other" : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name).title : section === "Effects" ? effectToken(name).title : "tokens";
 }
-const ComponentGallery = lazy(() => import("../ComponentGallery-DIFeJqGx.js"));
+const ComponentGallery = lazy(() => import("../ComponentGallery-BWiPGUL8.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -2822,7 +3493,7 @@ function TokenField({ name, value, original, changed, onChange, onReset, onValid
 		setSyncedValue(value);
 		if (!invalid) setText(value);
 	}
-	const hasSizePresets = /^-?(?:\d*\.)?\d+(?:rem|px)$/.test(original);
+	const hasSizePresets = /^-?(?:\d*\.)?\d+(?:rem|px)$/.test(original) || !!aliasOptions?.length;
 	const literalSize = hasSizePresets ? text.trim().match(/^(-?(?:\d*\.)?\d+)(rem|px)$/) : null;
 	const rootFontSize = typeof document === "undefined" ? 16 : parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	const storedUnit = original.endsWith("px") ? "px" : "rem";
@@ -2934,7 +3605,7 @@ function TokenField({ name, value, original, changed, onChange, onReset, onValid
 							/* @__PURE__ */ jsx("option", {
 								value: "",
 								disabled: true,
-								children: "⌄"
+								children: "Choose a size"
 							}),
 							!!aliasOptions?.length && /* @__PURE__ */ jsx("optgroup", {
 								label: "Global tokens",
@@ -2980,7 +3651,8 @@ function ConfigurationModalContent({ memory }) {
 	const { defaults, draft, setDraft, isOpen, cancel, apply, revision } = useUIConfiguration();
 	const remembered = memory.current;
 	const [mode, setMode] = useState(remembered.mode ?? "light");
-	const [sizeUnit, setSizeUnit] = useState("px");
+	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
+	const [loadedFonts, refreshLoadedFonts] = useLoadedFonts();
 	const [editorWidth, setEditorWidth] = useState(remembered.editorWidth);
 	const [confirmingReset, setConfirmingReset] = useState(false);
 	const [nothingToReset, setNothingToReset] = useState(false);
@@ -3012,7 +3684,8 @@ function ConfigurationModalContent({ memory }) {
 			cvaSlot,
 			previewMode,
 			exportTab,
-			editorWidth
+			editorWidth,
+			sizeUnit
 		});
 	}, [
 		memory,
@@ -3023,7 +3696,8 @@ function ConfigurationModalContent({ memory }) {
 		cvaSlot,
 		previewMode,
 		exportTab,
-		editorWidth
+		editorWidth,
+		sizeUnit
 	]);
 	useLayoutEffect(() => {
 		const frame = requestAnimationFrame(() => {
@@ -3037,6 +3711,14 @@ function ConfigurationModalContent({ memory }) {
 	const config = inherited;
 	const exportText = exportTab === "css" ? exportCss(draft.theme, defaults) : exportTab === "overrides" ? exportCvaEdits(draft.overrides) : `import { UIConfig } from "@povio/ui/ui-config";\n\nconst config = ${JSON.stringify(draft.config, null, 2)} satisfies Partial<UIConfig.Options>;\n\n// Wrap your application:\n// <UIConfig.Provider config={config}>{children}</UIConfig.Provider>\n`;
 	const changeSection = (next) => {
+		if (isLayoutKind(next)) setSectionTabs((current) => ({
+			...current,
+			Layout: next
+		}));
+		if (isAdvancedSection(next)) setSectionTabs((current_0) => ({
+			...current_0,
+			Advanced: next
+		}));
 		setSection(next);
 		setSearch("");
 		setMessage("");
@@ -3045,7 +3727,7 @@ function ConfigurationModalContent({ memory }) {
 	const [highlightedToken, setHighlightedToken] = useState(null);
 	const isInspectable = useCallback((name) => (name in defaults.theme || name in defaults.light || name in defaults.dark) && groups.includes(groupFor(name)) && !name.startsWith("--color-"), [defaults]);
 	const describeToken = useCallback((name_0) => {
-		const section_0 = groupFor(name_0);
+		const section_0 = sectionFor(name_0);
 		const bucket = mode === "dark" && name_0 in defaults.dark ? "dark" : name_0 in defaults.light ? "light" : "theme";
 		const value_0 = draft.theme[bucket][name_0] ?? defaults[bucket][name_0];
 		return `${groupKeyFor(section_0, name_0, defaults)} · ${componentToken(name_0).label} · ${value_0}`;
@@ -3055,22 +3737,27 @@ function ConfigurationModalContent({ memory }) {
 		mode
 	]);
 	/** Opens the editor on a token picked in the inspector: its section, its group, scrolled into view and highlighted. */
-	const focusToken = useCallback((name_1) => {
-		const next_0 = groupFor(name_1);
+	const focusToken = useCallback((picked) => {
+		const name_1 = listedLayoutToken(picked, defaults);
+		const next_0 = sectionFor(name_1);
+		if (isLayoutKind(next_0)) setSectionTabs((current_1) => ({
+			...current_1,
+			Layout: next_0
+		}));
 		setSection(next_0);
 		setSearch("");
 		setMessage("");
 		const key = groupKeyFor(next_0, name_1, defaults);
-		setExpandedGroups((current) => ({
-			...current,
+		setExpandedGroups((current_2) => ({
+			...current_2,
 			[`${next_0}:${key}`]: true
 		}));
-		if (next_0 === "Typography") setSectionTabs((current_0) => ({
-			...current_0,
+		if (next_0 === "Typography") setSectionTabs((current_3) => ({
+			...current_3,
 			Typography: typographyTabFor(key)
 		}));
-		if (next_0 === "Colors") setSectionTabs((current_1) => ({
-			...current_1,
+		if (next_0 === "Colors") setSectionTabs((current_4) => ({
+			...current_4,
 			Colors: baseColorNames(defaults).has(name_1) ? baseSystemTab : semanticPaletteTab
 		}));
 		setHighlightedToken(name_1);
@@ -3085,8 +3772,8 @@ function ConfigurationModalContent({ memory }) {
 		});
 		return () => cancelAnimationFrame(frame_0);
 	}, [highlightedToken, section]);
-	const validity = (name_2, invalid, value_1 = "") => setInvalidFields((current_2) => {
-		const next_1 = { ...current_2 };
+	const validity = (name_2, invalid, value_1 = "") => setInvalidFields((current_5) => {
+		const next_1 = { ...current_5 };
 		if (invalid) next_1[name_2] = value_1;
 		else delete next_1[name_2];
 		return next_1;
@@ -3099,51 +3786,82 @@ function ConfigurationModalContent({ memory }) {
 	};
 	const setToken = (name_3, value_3) => {
 		const bucket_0 = mode === "dark" && name_3 in defaults.dark ? "dark" : name_3 in defaults.light ? "light" : "theme";
-		setDraft((current_3) => {
-			const tokens_0 = { ...current_3.theme[bucket_0] };
-			if (value_3 === void 0 || value_3 === defaults[bucket_0][name_3]) delete tokens_0[name_3];
-			else tokens_0[name_3] = value_3;
+		const linked = bucket_0 === "theme" && !value_3?.startsWith("var(") ? linkedLayoutTokens(name_3, defaults) : [];
+		setDraft((current_6) => {
+			const tokens_0 = { ...current_6.theme[bucket_0] };
+			for (const token of [name_3, ...linked]) if (value_3 === void 0 || value_3 === defaults[bucket_0][token]) delete tokens_0[token];
+			else tokens_0[token] = value_3;
 			return {
-				...current_3,
+				...current_6,
 				theme: {
-					...current_3.theme,
+					...current_6.theme,
 					[bucket_0]: tokens_0
 				}
 			};
 		});
 	};
-	const setComponent = (key_0, field, value_4) => {
-		setDraft((current_4) => ({
-			...current_4,
+	const setLayoutLevel = (kind, level) => setDraft((current_7) => {
+		const tokens_1 = { ...current_7.theme.theme };
+		for (const [name_4, value_4] of Object.entries(layoutScales[kind].scale(defaults, level))) if (value_4 === defaults.theme[name_4]) delete tokens_1[name_4];
+		else tokens_1[name_4] = value_4;
+		return {
+			...current_7,
+			theme: {
+				...current_7.theme,
+				theme: tokens_1
+			}
+		};
+	});
+	const applyPreset = (preset) => {
+		setDraft((current_8) => ({
+			...current_8,
+			theme: presetEdits(preset, defaults)
+		}));
+		setInvalidFields({});
+		setResetRevision((value_5) => value_5 + 1);
+		setMessage(`${preset.label} preset applied. Apply settings to keep it.`);
+	};
+	const setComponent = (key_0, field, value_6) => {
+		setDraft((current_9) => ({
+			...current_9,
 			config: {
-				...current_4.config,
+				...current_9.config,
 				[key_0]: {
-					...current_4.config[key_0],
-					[field]: value_4
+					...current_9.config[key_0],
+					[field]: value_6
 				}
 			}
 		}));
 	};
-	const radiusAliasOptions = Object.keys(defaults.theme).filter((name_4) => name_4.startsWith("--radius-global-rounding-")).map((name_5) => ({
-		name: name_5,
-		label: `Global ${name_5.replace("--radius-global-rounding-", "").toUpperCase()}`,
-		value: draft.theme.theme[name_5] ?? defaults.theme[name_5]
+	const radiusAliasOptions = Object.keys(defaults.theme).filter((name_5) => name_5.startsWith("--radius-global-rounding-")).map((name_6) => ({
+		name: name_6,
+		label: `Global ${name_6.replace("--radius-global-rounding-", "").toUpperCase()}`,
+		value: draft.theme.theme[name_6] ?? defaults.theme[name_6]
 	}));
+	const controlHeightAliasOptions = (name_7) => {
+		const counterpart = controlHeightCounterpart(name_7);
+		if (!counterpart || defaults.theme[name_7] !== `var(${counterpart})`) return void 0;
+		return [{
+			name: counterpart,
+			label: `Button ${counterpart.replace(/^.*-height-/, "")}`,
+			value: draft.theme.theme[counterpart] ?? defaults.theme[counterpart]
+		}];
+	};
 	const palette = baseColorNames(defaults);
-	const paletteOptions = [...palette].map((name_6) => ({
-		name: name_6,
-		value: draft.theme.light[name_6] ?? defaults.light[name_6]
+	const paletteOptions = [...palette].map((name_8) => ({
+		name: name_8,
+		value: draft.theme.light[name_8] ?? defaults.light[name_8]
 	}));
 	const sectionEntries = Object.entries({
 		...defaults.light,
 		...mode === "dark" ? defaults.dark : {},
 		...defaults.theme
-	}).filter(([name_7]) => groupFor(name_7) === section && !name_7.startsWith("--color-"));
+	}).filter(([name_9]) => (section === "Font size" ? isFontSizeToken(name_9) : section === "Spacing" || section === "Sizing" ? layoutKindFor(name_9) === section && listedLayoutToken(name_9, defaults) === name_9 : groupFor(name_9) === section) && !name_9.startsWith("--color-"));
 	const groupedEntries = /* @__PURE__ */ new Map();
 	for (const entry of sectionEntries) {
-		const [name_8] = entry;
-		const textStyle = section === "Typography" ? name_8.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
-		const key_1 = groupKeyFor(section, name_8, defaults);
+		const [name_10] = entry;
+		const textStyle = section === "Typography" ? name_10.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
+		const key_1 = groupKeyFor(section, name_10, defaults);
 		if (!groupedEntries.has(key_1)) groupedEntries.set(key_1, {
 			title: textStyle ? textStyle.replaceAll("-", " ") : key_1 === "tokens" ? "" : key_1,
 			compact: !!textStyle,
@@ -3151,28 +3869,28 @@ function ConfigurationModalContent({ memory }) {
 		});
 		groupedEntries.get(key_1).entries.push(entry);
 	}
-	const paletteStep = (name_9) => Number(name_9.match(/-(\d+)-base$/)?.[1]);
-	const isPaletteGroup = (entries) => entries.every(([name_10]) => palette.has(name_10));
+	const paletteStep = (name_11) => Number(name_11.match(/-(\d+)-base$/)?.[1]);
+	const isPaletteGroup = (entries) => entries.every(([name_12]) => palette.has(name_12));
 	for (const group of groupedEntries.values()) if (isPaletteGroup(group.entries)) group.entries.sort(([left], [right]) => paletteStep(right) - paletteStep(left));
-	const paletteValue = (name_11) => draft.theme.light[name_11] ?? defaults.light[name_11];
+	const paletteValue = (name_13) => draft.theme.light[name_13] ?? defaults.light[name_13];
 	const renderPaletteShades = (title, entries_0) => {
-		const base = paletteValue((entries_0.find(([name_12]) => paletteStep(name_12) === 500) ?? entries_0[Math.floor(entries_0.length / 2)])[0]);
+		const base = paletteValue((entries_0.find(([name_14]) => paletteStep(name_14) === 500) ?? entries_0[Math.floor(entries_0.length / 2)])[0]);
 		return /* @__PURE__ */ jsx(ShadesGenerator, {
 			title,
-			steps: entries_0.map(([name_13]) => ({
-				name: name_13,
-				step: paletteStep(name_13)
+			steps: entries_0.map(([name_15]) => ({
+				name: name_15,
+				step: paletteStep(name_15)
 			})),
 			initial: base,
 			onApply: (values) => {
-				for (const [name_14, value_5] of Object.entries(values)) setToken(name_14, value_5);
+				for (const [name_16, value_7] of Object.entries(values)) setToken(name_16, value_7);
 			}
 		}, base);
 	};
-	const tokenGroups = [...groupedEntries.entries()].filter(([key_2, group_0]) => `${key_2} ${group_0.title} ${group_0.entries.map(([name_15]) => `${name_15} ${labelFor(name_15)}`).join(" ")}`.toLowerCase().includes(search.toLowerCase().trim()));
+	const tokenGroups = [...groupedEntries.entries()].filter(([key_2, group_0]) => `${key_2} ${group_0.title} ${group_0.entries.map(([name_17]) => `${name_17} ${labelFor(name_17)}`).join(" ")}`.toLowerCase().includes(search.toLowerCase().trim()));
 	const visibleGroups = section === "Typography" ? tokenGroups : tokenGroups.map(([key_3, group_1]) => [key_3, {
 		...group_1,
-		entries: group_1.entries.filter(([name_16]) => `${group_1.title} ${name_16} ${labelFor(name_16)}`.toLowerCase().includes(search.toLowerCase().trim()))
+		entries: group_1.entries.filter(([name_18]) => `${group_1.title} ${name_18} ${labelFor(name_18)}`.toLowerCase().includes(search.toLowerCase().trim()))
 	}]).filter(([, group_2]) => group_2.entries.length);
 	const groupRank = (key_4) => key_4 === "Global" ? -1 : key_4 === "Base scale" ? 1 : 0;
 	const sectionKeys = [...groupedEntries.keys()].sort((a, b) => groupRank(a) - groupRank(b));
@@ -3187,52 +3905,97 @@ function ConfigurationModalContent({ memory }) {
 	const collapsibleKeys = sectionKeys.filter(inActiveTab);
 	const primaryGroup = collapsibleKeys[0];
 	const isExpanded = (key_8) => searching || (expandedGroups[`${section}:${key_8}`] ?? key_8 === primaryGroup);
-	const toggleGroup = (key_9) => setExpandedGroups((current_5) => ({
-		...current_5,
+	const toggleGroup = (key_9) => setExpandedGroups((current_10) => ({
+		...current_10,
 		[`${section}:${key_9}`]: !isExpanded(key_9)
 	}));
 	const allExpanded = collapsibleKeys.every(isExpanded);
-	const setAllGroups = (expanded) => setExpandedGroups((current_6) => ({
-		...current_6,
+	const setAllGroups = (expanded) => setExpandedGroups((current_11) => ({
+		...current_11,
 		...Object.fromEntries(collapsibleKeys.map((key_10) => [`${section}:${key_10}`, expanded]))
 	}));
-	const groupChanged = (entries_1) => entries_1.some(([name_17]) => {
-		const bucket_1 = mode === "dark" && name_17 in defaults.dark ? "dark" : name_17 in defaults.light ? "light" : "theme";
-		return name_17 in draft.theme[bucket_1];
+	const groupChanged = (entries_1) => entries_1.some(([name_19]) => {
+		const bucket_1 = mode === "dark" && name_19 in defaults.dark ? "dark" : name_19 in defaults.light ? "light" : "theme";
+		return name_19 in draft.theme[bucket_1];
 	});
 	/** The current font size of a text style's line height or letter spacing token. */
-	const fontSizeFor = (name_18) => {
-		const fontSizeName = name_18.match(/^(--text-.+?)--(?:line-height|letter-spacing)$/)?.[1];
+	const fontSizeFor = (name_20) => {
+		const fontSizeName = name_20.match(/^(--text-.+?)--(?:line-height|letter-spacing)$/)?.[1];
 		if (!fontSizeName) return void 0;
 		const bucket_2 = mode === "dark" && fontSizeName in defaults.dark ? "dark" : fontSizeName in defaults.light ? "light" : "theme";
 		return draft.theme[bucket_2][fontSizeName] ?? defaults[bucket_2][fontSizeName];
 	};
-	const renderToken = ([name_19, original], compact = false) => {
-		const bucket_3 = mode === "dark" && name_19 in defaults.dark ? "dark" : name_19 in defaults.light ? "light" : "theme";
-		const compactLabel = compact ? name_19.endsWith("--line-height") ? "Line height" : name_19.endsWith("--letter-spacing") ? "Letter spacing" : "Font size" : section === "Colors" ? palette.has(name_19) ? labelFor(name_19).split(" ").slice(1).join(" ") : labelFor(name_19).replace(/^(surface|border|interactive|support|states|shadow) /, "") : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name_19).label : section === "Effects" ? effectToken(name_19).label : void 0;
+	const renderToken = ([name_21, original], compact = false) => {
+		const bucket_3 = mode === "dark" && name_21 in defaults.dark ? "dark" : name_21 in defaults.light ? "light" : "theme";
+		const compactLabel = compact ? name_21.endsWith("--line-height") ? "Line height" : name_21.endsWith("--letter-spacing") ? "Letter spacing" : "Font size" : section === "Colors" ? palette.has(name_21) ? labelFor(name_21).split(" ").slice(1).join(" ") : labelFor(name_21).replace(/^(surface|border|interactive|support|states|shadow) /, "") : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name_21).label : section === "Font size" ? name_21.replace(/^--text-/, "").replaceAll("-", " ") : section === "Effects" ? effectToken(name_21).label : void 0;
 		return /* @__PURE__ */ jsx(TokenField, {
-			name: name_19,
+			name: name_21,
 			original,
 			compactLabel,
 			sizeUnit,
-			fontSize: fontSizeFor(name_19),
-			highlighted: highlightedToken === name_19,
+			fontSize: fontSizeFor(name_21),
+			highlighted: highlightedToken === name_21,
 			paletteOptions: section === "Colors" && /^var\(--[\w-]+\)$/.test(original) ? paletteOptions : void 0,
-			aliasOptions: section === "Radius" && !name_19.startsWith("--radius-global-") && componentToken(name_19).title !== "Base scale" ? radiusAliasOptions : void 0,
-			value: draft.theme[bucket_3][name_19] ?? original,
-			changed: name_19 in draft.theme[bucket_3],
-			onChange: (value_6) => {
-				setToken(name_19, value_6);
-				const lineHeight = `${name_19}--line-height`;
-				if (/^--text-[\w-]+$/.test(name_19) && !name_19.includes("--", 2) && (lineHeight in defaults.theme || lineHeight in defaults.light)) setToken(lineHeight, fontSizeLineHeight);
+			aliasOptions: section === "Radius" && !name_21.startsWith("--radius-global-") && componentToken(name_21).title !== "Base scale" ? radiusAliasOptions : controlHeightAliasOptions(name_21),
+			value: draft.theme[bucket_3][name_21] ?? original,
+			changed: name_21 in draft.theme[bucket_3],
+			onChange: (value_8) => {
+				setToken(name_21, value_8);
+				const lineHeight = `${name_21}--line-height`;
+				if (/^--text-[\w-]+$/.test(name_21) && !name_21.includes("--", 2) && (lineHeight in defaults.theme || lineHeight in defaults.light)) setToken(lineHeight, fontSizeLineHeight);
 			},
-			onReset: () => setToken(name_19),
-			invalidValue: invalidFields[`${bucket_3}:${name_19}`],
-			onValidity: (field_0, invalid_0, value_7) => validity(`${bucket_3}:${field_0}`, invalid_0, value_7)
-		}, `${revision}-${resetRevision}-${mode}-${name_19}`);
+			onReset: () => setToken(name_21),
+			invalidValue: invalidFields[`${bucket_3}:${name_21}`],
+			onValidity: (field_0, invalid_0, value_9) => validity(`${bucket_3}:${field_0}`, invalid_0, value_9)
+		}, `${revision}-${resetRevision}-${mode}-${name_21}`);
 	};
-	const showTabs = sectionTabList.length > 1 && groups.includes(section);
-	const toggleAllButton = groups.includes(section) && !flatTab && collapsibleKeys.length > 1 && /* @__PURE__ */ jsxs("button", {
+	const layoutSection = isLayoutKind(section) ? section : void 0;
+	const advancedSection = isAdvancedSection(section) ? section : void 0;
+	const lastLayoutSection = isLayoutKind(sectionTabs.Layout ?? "") ? sectionTabs.Layout : layoutKinds[0];
+	/**
+	* Font roles (heading, body) lead as picker cards; the families they choose from follow below a divider. A family
+	* token points at its own `-base` font (`--font-inter` → `--font-inter-base`); any other font token is a role.
+	*/
+	const renderFontFamilies = (entries_2) => {
+		const isFamily = ([name_22, value_10]) => value_10.includes(`var(${name_22}-base)`);
+		const families = entries_2.filter(isFamily);
+		const roles = entries_2.filter((entry_0) => !isFamily(entry_0));
+		const themeFonts = families.map(([name_23]) => ({
+			name: name_23,
+			label: familyName(name_23.replace(/^--font-/, "")),
+			value: draft.theme.theme[name_23] ?? defaults.theme[name_23],
+			group: "Theme fonts"
+		}));
+		const options = [
+			...themeFonts,
+			...loadedFonts.filter((font) => !themeFonts.some(({ value: value_11 }) => value_11 === font.value)),
+			...systemFonts
+		];
+		const roleLabels = {
+			"--font-titles": "Heading",
+			"--font-body": "Body"
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-families",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "studio-font-roles",
+					children: roles.map(([name_24, original_0]) => /* @__PURE__ */ jsx(FontRoleCard, {
+						label: roleLabels[name_24] ?? labelFor(name_24).replace(/^font /, ""),
+						value: draft.theme.theme[name_24] ?? original_0,
+						options,
+						changed: name_24 in draft.theme.theme,
+						onChange: (value_12) => setToken(name_24, value_12),
+						onReset: () => setToken(name_24)
+					}, `${revision}-${resetRevision}-${name_24}`))
+				}),
+				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
+				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_1) => renderToken(entry_1))] })
+			]
+		}, "font-families");
+	};
+	const showTabs = sectionTabList.length > 1 && isTokenSection(section);
+	const toggleAllButton = isTokenSection(section) && !flatTab && collapsibleKeys.length > 1 && /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "studio-toggle-all",
 		disabled: searching,
@@ -3242,13 +4005,13 @@ function ConfigurationModalContent({ memory }) {
 			"aria-hidden": "true"
 		}), allExpanded ? "Collapse all" : "Expand all"]
 	});
-	const selectControl = (label, key_11, field_1, options) => /* @__PURE__ */ jsxs("label", {
+	const selectControl = (label, key_11, field_1, options_0) => /* @__PURE__ */ jsxs("label", {
 		className: "studio-setting",
 		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("select", {
 			"aria-label": label,
 			value: String(config[key_11][field_1]),
 			onChange: (event) => setComponent(key_11, field_1, event.target.value),
-			children: options.map((option) => /* @__PURE__ */ jsx("option", { children: option }, option))
+			children: options_0.map((option) => /* @__PURE__ */ jsx("option", { children: option }, option))
 		})]
 	}, `${key_11}-${field_1}`);
 	return /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$8948f78d83984c69, {
@@ -3262,24 +4025,25 @@ function ConfigurationModalContent({ memory }) {
 			className: "studio-modal",
 			children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
 				className: "studio-dialog",
+				style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
 				children: [
 					/* @__PURE__ */ jsxs("header", {
 						className: "studio-topbar",
 						children: [
-							/* @__PURE__ */ jsxs("div", {
+							/* @__PURE__ */ jsx("div", {
 								className: "studio-title",
-								children: [/* @__PURE__ */ jsx(TwLogo, { className: "studio-topbar-logo" }), /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+								children: /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
 									slot: "title",
-									children: "UI configuration"
-								})]
+									children: "Povio UI Configuration"
+								})
 							}),
 							/* @__PURE__ */ jsxs("nav", {
 								className: "studio-nav",
 								"aria-label": "Configuration sections",
 								children: [
-									groups.map((group_3) => /* @__PURE__ */ jsx("button", {
-										"aria-current": section === group_3 ? "page" : void 0,
-										onClick: () => changeSection(group_3),
+									navSections.map((group_3) => /* @__PURE__ */ jsx("button", {
+										"aria-current": (group_3 === "Layout" ? isLayoutKind(section) : section === group_3) ? "page" : void 0,
+										onClick: () => changeSection(group_3 === "Layout" ? lastLayoutSection : group_3),
 										children: group_3
 									}, group_3)),
 									/* @__PURE__ */ jsx("span", {
@@ -3287,75 +4051,54 @@ function ConfigurationModalContent({ memory }) {
 										"aria-hidden": "true"
 									}),
 									/* @__PURE__ */ jsx("button", {
-										"aria-current": section === "Components" ? "page" : void 0,
-										onClick: () => changeSection("Components"),
-										children: "Defaults & behavior"
-									}),
-									/* @__PURE__ */ jsx("button", {
-										"aria-current": section === "Variants & overrides" ? "page" : void 0,
-										onClick: () => changeSection("Variants & overrides"),
-										children: "Variants & overrides"
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "studio-nav-divider",
-										"aria-hidden": "true"
-									}),
-									/* @__PURE__ */ jsx("button", {
-										"aria-current": section === "Export" ? "page" : void 0,
-										onClick: () => changeSection("Export"),
-										children: "Export"
+										"aria-current": advancedSection ? "page" : void 0,
+										onClick: () => changeSection(isAdvancedSection(sectionTabs.Advanced ?? "") ? sectionTabs.Advanced : advancedSections[0][0]),
+										children: "Advanced"
 									})
 								]
 							}),
-							/* @__PURE__ */ jsxs("div", {
+							/* @__PURE__ */ jsx("div", {
 								className: "studio-topbar-controls",
-								children: [
-									/* @__PURE__ */ jsxs("label", {
-										className: "studio-search",
-										children: [/* @__PURE__ */ jsx(Search, { size: 14 }), /* @__PURE__ */ jsx("input", {
-											"aria-label": "Search tokens",
-											placeholder: "Search tokens",
-											value: search,
-											disabled: !groups.includes(section),
-											onChange: (event_0) => setSearch(event_0.target.value)
-										})]
-									}),
-									/* @__PURE__ */ jsx("div", {
-										className: "studio-mode studio-unit-mode",
-										role: "group",
-										"aria-label": "Size units",
-										children: ["rem", "px"].map((unit) => /* @__PURE__ */ jsx("button", {
-											type: "button",
-											"aria-pressed": sizeUnit === unit,
-											onClick: () => setSizeUnit(unit),
-											children: unit
-										}, unit))
-									}),
-									/* @__PURE__ */ jsx(ColorModeSwitch, {
-										value: mode,
-										onChange: setMode
-									}),
-									/* @__PURE__ */ jsx("button", {
-										className: "studio-icon",
-										"aria-label": "Close configuration without applying",
-										onClick: () => cancel(),
-										children: /* @__PURE__ */ jsx(X, { size: 17 })
-									})
-								]
+								children: /* @__PURE__ */ jsxs("label", {
+									className: "studio-search",
+									children: [/* @__PURE__ */ jsx(Search, { size: 14 }), /* @__PURE__ */ jsx("input", {
+										"aria-label": "Search tokens",
+										placeholder: "Search tokens",
+										value: search,
+										disabled: !isTokenSection(section),
+										onChange: (event_0) => setSearch(event_0.target.value)
+									})]
+								})
 							})
 						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						ref: bodyRef,
 						className: "studio-body",
-						style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
 						children: [
 							/* @__PURE__ */ jsxs("main", {
 								ref: editorRef,
 								className: "studio-editor",
 								onScroll: (event_1) => memory.current.editorScroll = event_1.currentTarget.scrollTop,
 								children: [
-									showTabs ? /* @__PURE__ */ jsxs("div", {
+									layoutSection ? /* @__PURE__ */ jsxs("div", {
+										className: "studio-subtabs-bar",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "studio-subtabs",
+											role: "tablist",
+											"aria-label": "Layout tokens",
+											children: layoutKinds.map((kind_0) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": kind_0 === section,
+												onClick: () => changeSection(kind_0),
+												children: [kind_0, Object.keys(draft.theme.theme).some((name_25) => layoutKindFor(name_25) === kind_0) && /* @__PURE__ */ jsx("span", {
+													className: "studio-group-changed",
+													"aria-label": "has changes"
+												})]
+											}, kind_0))
+										}), toggleAllButton]
+									}) : showTabs ? /* @__PURE__ */ jsxs("div", {
 										className: "studio-subtabs-bar",
 										children: [/* @__PURE__ */ jsx("div", {
 											className: "studio-subtabs",
@@ -3366,8 +4109,8 @@ function ConfigurationModalContent({ memory }) {
 												role: "tab",
 												"aria-selected": !searching && tab_0 === activeSectionTab,
 												disabled: searching,
-												onClick: () => setSectionTabs((current_7) => ({
-													...current_7,
+												onClick: () => setSectionTabs((current_12) => ({
+													...current_12,
 													[section]: tab_0
 												})),
 												children: [tab_0, groupChanged([...groupedEntries].filter(([key_12]) => tabFor(key_12) === tab_0).flatMap(([, group_4]) => group_4.entries)) && /* @__PURE__ */ jsx("span", {
@@ -3376,20 +4119,41 @@ function ConfigurationModalContent({ memory }) {
 												})]
 											}, tab_0))
 										}), toggleAllButton]
+									}) : advancedSection ? /* @__PURE__ */ jsx("div", {
+										className: "studio-subtabs-bar",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "studio-subtabs",
+											role: "tablist",
+											"aria-label": "Advanced settings",
+											children: advancedSections.map(([key_13, label_0]) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": key_13 === section,
+												onClick: () => changeSection(key_13),
+												children: [label_0, (key_13 === "Components" ? Object.keys(draft.config).length > 0 : key_13 === "Variants & overrides" && Object.keys(draft.overrides ?? {}).length > 0) && /* @__PURE__ */ jsx("span", {
+													className: "studio-group-changed",
+													"aria-label": "has changes"
+												})]
+											}, key_13))
+										})
 									}) : /* @__PURE__ */ jsxs("div", {
 										className: "studio-editor-heading",
-										children: [/* @__PURE__ */ jsx("h2", { children: section === "Components" ? "Defaults & behavior" : section }), toggleAllButton]
+										children: [/* @__PURE__ */ jsx("h2", { children: section }), toggleAllButton]
 									}),
-									groups.includes(section) && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+									isTokenSection(section) && /* @__PURE__ */ jsxs(Fragment$1, { children: [layoutSection && !searching && /* @__PURE__ */ jsx(LayoutScaleControl, {
+										kind: layoutSection,
+										level: layoutLevelFor(defaults, draft.theme.theme, layoutSection),
+										onChange: (level_0) => setLayoutLevel(layoutSection, level_0)
+									}, layoutSection), /* @__PURE__ */ jsxs("div", {
 										className: `studio-token-list ${section !== "Typography" ? "studio-token-list-inline" : "studio-token-list-rows"}`,
-										children: [orderedGroups.map(([key_13, group_5]) => group_5.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
-											className: `studio-token-group ${group_5.compact ? "studio-type-style" : ""} ${!isExpanded(key_13) ? "is-collapsed" : ""}`,
+										children: [orderedGroups.map(([key_14, group_5]) => group_5.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
+											className: `studio-token-group ${group_5.compact ? "studio-type-style" : ""} ${!isExpanded(key_14) ? "is-collapsed" : ""}`,
 											children: [/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsxs("button", {
 												type: "button",
 												className: "studio-group-toggle",
-												"aria-expanded": isExpanded(key_13),
-												"aria-controls": `group-${section}-${key_13.replaceAll(" ", "-")}`,
-												onClick: () => toggleGroup(key_13),
+												"aria-expanded": isExpanded(key_14),
+												"aria-controls": `group-${section}-${key_14.replaceAll(" ", "-")}`,
+												onClick: () => toggleGroup(key_14),
 												children: [
 													/* @__PURE__ */ jsx(ChevronRight, {
 														size: 14,
@@ -3410,7 +4174,7 @@ function ConfigurationModalContent({ memory }) {
 													title: "Reset every shade in this palette to its default",
 													disabled: !groupChanged(group_5.entries),
 													onClick: () => {
-														for (const [name_20] of group_5.entries) setToken(name_20);
+														for (const [name_26] of group_5.entries) setToken(name_26);
 													},
 													children: /* @__PURE__ */ jsx(RotateCcw, {
 														size: 13,
@@ -3418,13 +4182,13 @@ function ConfigurationModalContent({ memory }) {
 													})
 												})
 											})] }), /* @__PURE__ */ jsxs("div", {
-												id: `group-${section}-${key_13.replaceAll(" ", "-")}`,
-												hidden: !isExpanded(key_13),
+												id: `group-${section}-${key_14.replaceAll(" ", "-")}`,
+												hidden: !isExpanded(key_14),
 												className: group_5.compact ? "studio-type-fields" : void 0,
-												children: [section === "Colors" && isPaletteGroup(group_5.entries) && renderPaletteShades(group_5.title, group_5.entries), group_5.entries.map((entry_0) => renderToken(entry_0, group_5.compact))]
+												children: [section === "Colors" && isPaletteGroup(group_5.entries) && renderPaletteShades(group_5.title, group_5.entries), group_5.entries.map((entry_2) => renderToken(entry_2, group_5.compact))]
 											})]
-										}, key_13) : group_5.entries.map((entry_1) => renderToken(entry_1))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
-									}) }),
+										}, key_14) : section === "Typography" && key_14 === "Font families" ? renderFontFamilies(group_5.entries) : group_5.entries.map((entry_3) => renderToken(entry_3))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
+									})] }),
 									section === "Variants & overrides" && /* @__PURE__ */ jsx(CvaEditor, {
 										slot: cvaSlot,
 										setSlot: (slot) => {
@@ -3433,9 +4197,63 @@ function ConfigurationModalContent({ memory }) {
 										},
 										onPreview: setCvaVariants
 									}),
+									section === "Presets" && /* @__PURE__ */ jsxs("div", {
+										className: "studio-presets",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "studio-presets-intro",
+											children: "A preset replaces your theme edits with its own. Component defaults and overrides stay as they are; Apply or Save theme keeps it, Cancel discards it."
+										}), [appThemePreset, ...themePresets].map((preset_0) => {
+											const active = isPresetActive(preset_0, defaults, draft.theme);
+											const colors = presetEdits(preset_0, defaults).light;
+											const swatch = (name_27) => `rgb(${colors[name_27] ?? defaults.light[name_27]})`;
+											return /* @__PURE__ */ jsxs("div", {
+												className: `studio-preset ${active ? "is-active" : ""}`,
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "studio-preset-swatches",
+														"aria-hidden": "true",
+														children: [
+															50,
+															200,
+															500,
+															900,
+															950
+														].map((step) => /* @__PURE__ */ jsx("i", { style: { background: swatch(`--neutral-${step}-base`) } }, step))
+													}),
+													/* @__PURE__ */ jsxs("span", {
+														className: "studio-preset-text",
+														children: [/* @__PURE__ */ jsx("strong", { children: preset_0.label }), /* @__PURE__ */ jsx("span", { children: preset_0.description })]
+													}),
+													/* @__PURE__ */ jsx("button", {
+														type: "button",
+														className: active ? void 0 : "studio-primary",
+														disabled: active,
+														onClick: () => applyPreset(preset_0),
+														children: active ? "Active" : "Apply preset"
+													})
+												]
+											}, preset_0.id);
+										})]
+									}),
 									section === "Components" && /* @__PURE__ */ jsxs("div", {
 										className: "studio-settings",
 										children: [
+											/* @__PURE__ */ jsx("h3", { children: "Editor" }),
+											/* @__PURE__ */ jsxs("label", {
+												className: "studio-setting",
+												children: [/* @__PURE__ */ jsx("span", { children: "Size units" }), /* @__PURE__ */ jsxs("select", {
+													"aria-label": "Size units",
+													value: sizeUnit,
+													onChange: (event_2) => setSizeUnit(event_2.target.value),
+													children: [/* @__PURE__ */ jsx("option", {
+														value: "px",
+														children: "px"
+													}), /* @__PURE__ */ jsx("option", {
+														value: "rem",
+														children: "rem"
+													})]
+												})]
+											}),
 											/* @__PURE__ */ jsx("h3", { children: "Buttons" }),
 											selectControl("Appearance", "button", "variant", [
 												"contained",
@@ -3471,7 +4289,7 @@ function ConfigurationModalContent({ memory }) {
 												}[field_2] }), /* @__PURE__ */ jsx("input", {
 													type: "checkbox",
 													checked: config.input[field_2],
-													onChange: (event_2) => setComponent("input", field_2, event_2.target.checked)
+													onChange: (event_3) => setComponent("input", field_2, event_3.target.checked)
 												})]
 											}, field_2)),
 											/* @__PURE__ */ jsx("h3", { children: "Rendering" }),
@@ -3480,11 +4298,11 @@ function ConfigurationModalContent({ memory }) {
 												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_3) => setDraft((current_8) => ({
-														...current_8,
+													onChange: (event_4) => setDraft((current_13) => ({
+														...current_13,
 														config: {
-															...current_8.config,
-															renderStaticInput: event_3.target.checked
+															...current_13.config,
+															renderStaticInput: event_4.target.checked
 														}
 													}))
 												})]
@@ -3581,28 +4399,34 @@ function ConfigurationModalContent({ memory }) {
 							/* @__PURE__ */ jsxs("aside", {
 								ref: previewRef,
 								className: "studio-preview",
-								onScroll: (event_4) => memory.current.previewScroll = event_4.currentTarget.scrollTop,
+								onScroll: (event_5) => memory.current.previewScroll = event_5.currentTarget.scrollTop,
 								children: [
 									/* @__PURE__ */ jsxs("div", {
 										className: "studio-preview-heading",
-										children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " LIVE PREVIEW"] }), groups.includes(section) && /* @__PURE__ */ jsxs("div", {
-											className: "studio-preview-modes",
-											role: "group",
-											"aria-label": "Preview mode",
-											children: [/* @__PURE__ */ jsx("button", {
-												type: "button",
-												"aria-pressed": previewMode === "gallery",
-												onClick: () => setPreviewMode("gallery"),
-												children: "Gallery"
-											}), /* @__PURE__ */ jsx("button", {
-												type: "button",
-												"aria-pressed": previewMode === "focused",
-												onClick: () => setPreviewMode("focused"),
-												children: "Token preview"
+										children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " LIVE PREVIEW"] }), /* @__PURE__ */ jsxs("div", {
+											className: "studio-preview-actions",
+											children: [/* @__PURE__ */ jsx(ColorModeSwitch, {
+												value: mode,
+												onChange: setMode
+											}), isTokenSection(section) && /* @__PURE__ */ jsxs("div", {
+												className: "studio-mode studio-preview-modes",
+												role: "group",
+												"aria-label": "Preview mode",
+												children: [/* @__PURE__ */ jsx("button", {
+													type: "button",
+													"aria-pressed": previewMode === "gallery",
+													onClick: () => setPreviewMode("gallery"),
+													children: "Gallery"
+												}), /* @__PURE__ */ jsx("button", {
+													type: "button",
+													"aria-pressed": previewMode === "focused",
+													onClick: () => setPreviewMode("focused"),
+													children: "Token preview"
+												})]
 											})]
 										})]
 									}),
-									section === "Variants & overrides" || groups.includes(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
+									section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
 										variants: cvaVariants,
 										setVariants: setCvaVariants,
 										section,
@@ -3630,7 +4454,7 @@ function ConfigurationModalContent({ memory }) {
 								column: 2,
 								width: editorWidth,
 								min: 260,
-								max: () => (bodyRef.current?.clientWidth ?? 0) - 320,
+								max: () => (bodyRef.current?.parentElement?.clientWidth ?? 0) - 320,
 								onResize: setEditorWidth,
 								onReset: () => setEditorWidth(void 0)
 							})