@bison-lab/payload-core 3.8.0 → 3.9.0

package/dist/admin.mjs

@@ -1,9 +1,10 @@
 "use client";
-import { FieldDescription, FieldError, FieldLabel, useField, useFormFields } from "@payloadcms/ui";
-import { auditTheme, contrastLevelLabel, contrastVerdict, isThemeHex } from "@bison-lab/tokens";
+import { r as stateFromColorDoc, t as colorDocFromState } from "./map-BUDkX8g1.mjs";
+import { FieldDescription, FieldError, FieldLabel, useField, useForm, useFormFields } from "@payloadcms/ui";
+import { GREY_SCALES, SHADE_STEPS, contrastForeground, contrastRatio, createColorScale, hexToHSL, hslToString, includedShadeSteps, isThemeHex, presetHints, regenerateColorScale, setColorScaleInclude, updateColorScale } from "@bison-lab/tokens";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { findFont, fontFaceCss } from "@bison-lab/fonts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { findFont, fontFaceCss, isFontId } from "@bison-lab/fonts";
 //#region src/admin/color-field.tsx
 const HEX_ERROR = "Enter a six-digit hex colour like #1e3a5f";
 /**
@@ -39,7 +40,7 @@ const ColorField = ({ field, path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-color-field",
 				precedence: "default",
-				children: CSS$2
+				children: CSS$3
 			}),
 			/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: hexId,
@@ -98,7 +99,7 @@ const ColorField = ({ field, path, readOnly }) => {
 		]
 	});
 };
-const CSS$2 = `
+const CSS$3 = `
 .bl-color-field__control{display:flex;align-items:center;gap:calc(var(--base) * .4)}
 .bl-color-field__swatch{flex:none;width:calc(var(--base) * 1.6);height:calc(var(--base) * 1.6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-50)}
 .bl-color-field__picker{flex:none;width:calc(var(--base) * 2);height:calc(var(--base) * 2);padding:0;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:transparent;cursor:pointer}
@@ -108,11 +109,1007 @@ const CSS$2 = `
 .bl-color-field__hex:disabled{color:var(--theme-elevation-400)}
 `;
 //#endregion
+//#region src/theme/appearance-labels.ts
+/**
+* Named choices the Appearance child shows. Values stay the token presets;
+* labels match the mock workflow (Soft → pill, Gentle → minimal, Balanced
+* → default, Follow device → system). No rem, ms, or CSS variable tables.
+*/
+const APPEARANCE_CHOICES = {
+	defaultTheme: {
+		light: {
+			label: "Light",
+			hint: "Always opens in light mode"
+		},
+		dark: {
+			label: "Dark",
+			hint: "Always opens in dark mode"
+		},
+		system: {
+			label: "Follow device",
+			hint: "Matches the visitor’s system setting"
+		}
+	},
+	radius: {
+		sharp: {
+			label: "Sharp",
+			hint: "Crisp and structured"
+		},
+		subtle: {
+			label: "Subtle",
+			hint: "Clean with a little softness"
+		},
+		rounded: {
+			label: "Rounded",
+			hint: "Friendly and contemporary"
+		},
+		pill: {
+			label: "Soft",
+			hint: "Very rounded and expressive"
+		}
+	},
+	shadow: {
+		flat: {
+			label: "Flat",
+			hint: "Minimal visual depth"
+		},
+		subtle: {
+			label: "Subtle",
+			hint: "Light separation between surfaces"
+		},
+		elevated: {
+			label: "Elevated",
+			hint: "More noticeable layering and depth"
+		}
+	},
+	motion: {
+		snappy: {
+			label: "Quick",
+			hint: "Fast and responsive"
+		},
+		smooth: {
+			label: "Smooth",
+			hint: "Balanced and natural"
+		},
+		minimal: {
+			label: "Gentle",
+			hint: "Slower and more relaxed"
+		}
+	},
+	density: {
+		compact: {
+			label: "Compact",
+			hint: "Fits more content on screen"
+		},
+		default: {
+			label: "Balanced",
+			hint: "Comfortable for most sites"
+		},
+		spacious: {
+			label: "Spacious",
+			hint: "More breathing room and larger controls"
+		}
+	}
+};
+const APPEARANCE_FAMILY_COPY = {
+	defaultTheme: {
+		title: "Default theme",
+		hint: "Choose how the public site opens for visitors."
+	},
+	radius: {
+		title: "Corner style",
+		hint: "Controls the shape of buttons, inputs, cards, and panels across the site."
+	},
+	shadow: {
+		title: "Depth",
+		hint: "Choose how much cards and floating elements stand out from the page."
+	},
+	motion: {
+		title: "Motion",
+		hint: "Controls how quickly menus, cards, and interface transitions move."
+	},
+	density: {
+		title: "Spacing",
+		hint: "Choose how compact or roomy forms, buttons, cards, and page sections feel."
+	}
+};
+const FONT_ROLE_COPY = {
+	heading: {
+		label: "Heading font",
+		hint: "Used for page titles, section headings, and cards"
+	},
+	body: {
+		label: "Body font",
+		hint: "Used for paragraphs, navigation, forms, and buttons"
+	}
+};
+const SYSTEM_COLOR_COPY = {
+	primary: {
+		label: "Primary",
+		hint: "Primary actions and key links",
+		group: "brand"
+	},
+	secondary: {
+		label: "Secondary",
+		hint: "Supporting accents and eyebrows",
+		group: "brand"
+	},
+	accent: {
+		label: "Accent",
+		hint: "Dark brand surfaces",
+		group: "brand"
+	},
+	highlight: {
+		label: "Highlight",
+		hint: "Promotional and emphasis fills",
+		group: "brand"
+	},
+	success: {
+		label: "Success",
+		hint: "Theme chrome for confirmations. Not offered as a page-editor fill.",
+		group: "status"
+	},
+	destructive: {
+		label: "Destructive",
+		hint: "Theme chrome for errors and dangerous actions. Not offered as a page-editor fill.",
+		group: "status"
+	}
+};
+//#endregion
+//#region src/theme/readability.ts
+/** Same threshold `deriveDarkPalette` uses for brand fills. */
+const DARK_FILL_LIGHTEN_BELOW = 40;
+const DARK_FILL_LIGHTEN_BY = 25;
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function darkFill(color) {
+	if (color.l < DARK_FILL_LIGHTEN_BELOW) return {
+		...color,
+		l: clamp(color.l + DARK_FILL_LIGHTEN_BY, 0, 100)
+	};
+	return color;
+}
+function sample(fill, target) {
+	const label = contrastForeground(fill);
+	const fillCss = hslToString(fill);
+	const ratio = contrastRatio(fillCss, label);
+	return {
+		ratio,
+		shortfall: Math.max(0, Math.round((target - ratio) * 100) / 100),
+		fill: fillCss,
+		label
+	};
+}
+/**
+* Editable fill + the automatic label, Light and Dark. Target 7:1.
+* Meets only when both pass. Warnings do not block save.
+*/
+function fillLabelWarning(id, name, hex, target = 7) {
+	if (!isThemeHex(hex)) return null;
+	const lightFill = hexToHSL(hex);
+	const light = sample(lightFill, target);
+	const dark = sample(darkFill(lightFill), target);
+	return {
+		id,
+		name,
+		light,
+		dark,
+		meets: light.ratio >= target && dark.ratio >= target
+	};
+}
+/** Green/teal family. A warning at admin time, not a schema block. */
+function successHueWarning(hex) {
+	if (!isThemeHex(hex)) return null;
+	const { h } = hexToHSL(hex);
+	if (h >= 80 && h <= 180) return null;
+	return "Keep success colors recognizable — stay in a green or teal family.";
+}
+/** Red family. A warning at admin time, not a schema block. */
+function destructiveHueWarning(hex) {
+	if (!isThemeHex(hex)) return null;
+	const { h } = hexToHSL(hex);
+	if (h <= 30 || h >= 330) return null;
+	return "Keep destructive colors recognizable — stay in a red family.";
+}
+function automaticLabel(hex) {
+	if (!isThemeHex(hex)) return null;
+	return contrastForeground(hexToHSL(hex));
+}
+function hslCss(value) {
+	return `hsl(${value})`;
+}
+/** Which appearances fail, in words. Empty when both pass. */
+function hardToReadModes(item) {
+	const light = item.light.shortfall > 0;
+	const dark = item.dark.shortfall > 0;
+	if (light && dark) return "in Light and Dark";
+	if (light) return "in Light";
+	if (dark) return "in Dark";
+	return "";
+}
+function readabilityHeadline(item) {
+	return item.meets ? `Text on ${item.name} looks readable` : `Text on ${item.name} may be hard to read`;
+}
+function readabilityModesLine(item) {
+	const modes = hardToReadModes(item);
+	return modes ? `Hard to read ${modes}.` : "Looks good in Light and Dark.";
+}
+function readabilityGapPercent(sample, target = 7) {
+	if (sample.shortfall <= 0) return 0;
+	return Math.round(sample.shortfall / target * 100);
+}
+function readabilityRatioLine(sample, target = 7) {
+	const percent = readabilityGapPercent(sample, target);
+	if (percent <= 0) return "Meets the contrast we want";
+	if (percent < 10) return "A little short of the contrast we want";
+	return `About ${percent}% short of the contrast we want`;
+}
+const READABILITY_FIX = "Darken or lighten the hex, then regenerate the scale. The site picks light or dark type for you.";
+const READABILITY_PUBLISH_NOTE = "You can still publish. To improve a color, darken or lighten it and regenerate.";
+//#endregion
+//#region src/admin/preview-mode.tsx
+const ATTR = "data-bl-theme-preview";
+const EVENT = "bl-theme-preview";
+function readMode() {
+	if (typeof document === "undefined") return "light";
+	return document.documentElement.getAttribute(ATTR) === "dark" ? "dark" : "light";
+}
+function setThemePreviewMode(mode) {
+	if (typeof document === "undefined") return;
+	document.documentElement.setAttribute(ATTR, mode);
+	window.dispatchEvent(new Event(EVENT));
+}
+function useThemePreviewMode() {
+	const [mode, setMode] = useState(readMode);
+	useEffect(() => {
+		const sync = () => setMode(readMode());
+		window.addEventListener(EVENT, sync);
+		return () => window.removeEventListener(EVENT, sync);
+	}, []);
+	return mode;
+}
+function ThemePreviewToggle() {
+	const mode = useThemePreviewMode();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-preview-toggle",
+		role: "group",
+		"aria-label": "Preview colors in",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-on": mode === "light" ? "" : void 0,
+			onClick: () => setThemePreviewMode("light"),
+			children: "Light"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-on": mode === "dark" ? "" : void 0,
+			onClick: () => setThemePreviewMode("dark"),
+			children: "Dark"
+		})]
+	});
+}
+const THEME_PREVIEW_TOGGLE_CSS = `
+.bl-preview-toggle{display:inline-flex;padding:3px;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:10px;background:var(--theme-elevation-0,#fff)}
+.bl-preview-toggle button{min-height:2rem;padding:.25rem .75rem;border:0;border-radius:7px;background:transparent;color:var(--theme-elevation-600,#475569);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
+.bl-preview-toggle button[data-on]{background:var(--theme-elevation-800,#0f172a);color:#fff}
+`;
+//#endregion
+//#region src/admin/readability-list.tsx
+function ReadabilityDetail({ item, target = 7 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-readability-detail",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "bl-readability-detail__lead",
+				children: readabilityModesLine(item)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-readability-detail__modes",
+				children: [["Light", item.light], ["Dark", item.dark]].map(([mode, sample]) => /* @__PURE__ */ jsxs("figure", {
+					"data-failing": sample.shortfall > 0 ? "" : void 0,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "bl-readability__swatch",
+						style: {
+							background: hslCss(sample.fill),
+							color: hslCss(sample.label)
+						},
+						children: "Aa"
+					}), /* @__PURE__ */ jsxs("figcaption", { children: [
+						/* @__PURE__ */ jsx("strong", { children: mode }),
+						/* @__PURE__ */ jsx("span", { children: sample.shortfall > 0 ? "Hard to read" : "Looks good" }),
+						/* @__PURE__ */ jsx("span", { children: readabilityRatioLine(sample, target) })
+					] })]
+				}, mode))
+			}),
+			item.meets ? null : /* @__PURE__ */ jsx("p", {
+				className: "bl-readability-detail__fix",
+				children: READABILITY_FIX
+			})
+		]
+	});
+}
+function ReadabilityList({ warnings, target = 7 }) {
+	const failing = warnings.filter((item) => !item.meets).length;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "bl-readability",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bl-readability__head",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", { children: "Readability checks" }), /* @__PURE__ */ jsx("p", { children: "Text the site puts on each fill. Warnings do not block save." })] }), /* @__PURE__ */ jsx("span", {
+				"data-attention": failing ? "" : void 0,
+				children: failing === 0 ? "All look readable" : `${failing} may be hard to read`
+			})]
+		}), /* @__PURE__ */ jsx("ul", { children: warnings.map((item) => /* @__PURE__ */ jsxs("li", {
+			"data-failing": item.meets ? void 0 : "",
+			children: [/* @__PURE__ */ jsx("strong", { children: readabilityHeadline(item) }), /* @__PURE__ */ jsx(ReadabilityDetail, {
+				item,
+				target
+			})]
+		}, item.id)) })]
+	});
+}
+const READABILITY_LIST_CSS = `
+.bl-readability{padding:calc(var(--base,16px) * .8);border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:var(--style-radius-m,12px);background:var(--theme-elevation-0,#fff)}
+.bl-readability__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
+.bl-readability__head h2{margin:0;font-size:1rem}
+.bl-readability__head p{margin:.35rem 0 0;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-readability__head span{flex:none;font-size:12px;font-weight:600;padding:.2rem .55rem;border-radius:999px;background:var(--theme-elevation-100,#f1f5f9)}
+.bl-readability__head span[data-attention]{background:#fffbeb;color:#92400e}
+.bl-readability ul{margin:.85rem 0 0;padding:0;list-style:none}
+.bl-readability li{padding:.65rem 0;border-top:1px solid var(--theme-elevation-100,#f1f5f9)}
+.bl-readability li:first-child{border-top:0}
+.bl-readability li[data-failing]{background:#fff7ed;margin:0 -.4rem;padding:.65rem .4rem;border-radius:8px}
+.bl-readability__swatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2rem;border-radius:6px;font-weight:700;font-size:13px}
+.bl-readability strong{display:block;font-size:13px}
+.bl-readability-detail__lead{margin:0 0 .65rem;font-size:13px;color:var(--theme-elevation-600,#475569)}
+.bl-readability-detail__modes{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
+.bl-readability-detail__modes figure{display:flex;gap:.6rem;align-items:center;margin:0;padding:.55rem .6rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:10px;background:#fff}
+.bl-readability-detail__modes figure[data-failing]{border-color:#fdba74;background:#fff7ed}
+.bl-readability-detail__modes figcaption{display:flex;flex-direction:column;gap:.1rem;min-width:0}
+.bl-readability-detail__modes figcaption strong{font-size:12px}
+.bl-readability-detail__modes figcaption span{font-size:11px;color:var(--theme-elevation-500,#64748b)}
+.bl-readability-detail__fix{margin:.7rem 0 0;font-size:13px;color:var(--theme-elevation-600,#475569)}
+`;
+//#endregion
+//#region src/admin/color-scale-card.tsx
+function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onDelete, readOnly, role }) {
+	const label = automaticLabel(state.hex);
+	const warning = fillLabelWarning(id ?? name.toLowerCase(), name, state.hex);
+	const previewMode = useThemePreviewMode();
+	const preview = warning ? previewMode === "dark" ? warning.dark : warning.light : null;
+	const [open, setOpen] = useState(false);
+	const titleId = useId();
+	const hueWarning = role === "success" ? successHueWarning(state.hex) : role === "destructive" ? destructiveHueWarning(state.hex) : null;
+	const included = new Set(includedShadeSteps(state));
+	function setHex(hex) {
+		onChange(updateColorScale(state, { hex }));
+	}
+	function setStep(step) {
+		onChange(updateColorScale(state, { sourceStep: step }));
+	}
+	function toggleStep(step) {
+		if (step === state.sourceStep) return;
+		const next = new Set(included);
+		if (next.has(step)) next.delete(step);
+		else next.add(step);
+		onChange(setColorScaleInclude(state, SHADE_STEPS.filter((item) => next.has(item))));
+	}
+	return /* @__PURE__ */ jsxs("article", {
+		className: "bl-scale-card",
+		"data-preview": previewMode,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "bl-scale-card__head",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+					className: "bl-scale-card__title-row",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "bl-scale-card__title",
+							children: name
+						}),
+						required ? /* @__PURE__ */ jsx("span", {
+							className: "bl-scale-card__badge",
+							children: "Required"
+						}) : null,
+						custom ? /* @__PURE__ */ jsx("span", {
+							className: "bl-scale-card__badge",
+							children: "Optional"
+						}) : null,
+						warning ? warning.meets ? /* @__PURE__ */ jsxs("span", {
+							className: "bl-scale-card__status",
+							"data-ok": "",
+							title: `Text on ${name} looks readable`,
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "✓"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "bl-scale-card__sr",
+								children: [
+									"Text on ",
+									name,
+									" looks readable"
+								]
+							})]
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "bl-scale-card__badge bl-scale-card__badge--attention",
+							"aria-haspopup": "dialog",
+							onClick: () => setOpen(true),
+							children: "Needs attention"
+						}) : null
+					]
+				}), hint ? /* @__PURE__ */ jsx("p", {
+					className: "bl-scale-card__hint",
+					children: hint
+				}) : null] }), onDelete ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "bl-scale-card__delete",
+					disabled: readOnly,
+					onClick: onDelete,
+					children: "Delete"
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-scale-card__row",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "bl-scale-card__field",
+					children: [/* @__PURE__ */ jsx("span", { children: "Brand hex" }), /* @__PURE__ */ jsxs("span", {
+						className: "bl-scale-card__hex-wrap",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "color",
+							"aria-label": `${name} picker`,
+							disabled: readOnly,
+							value: state.hex,
+							onChange: (event) => setHex(event.target.value)
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							spellCheck: false,
+							autoComplete: "off",
+							disabled: readOnly,
+							value: state.hex,
+							onChange: (event) => {
+								const next = event.target.value.trim();
+								if (next) setHex(next);
+							}
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("label", {
+					className: "bl-scale-card__field",
+					children: [/* @__PURE__ */ jsx("span", { children: "This color is" }), /* @__PURE__ */ jsx("select", {
+						disabled: readOnly,
+						value: String(state.sourceStep),
+						onChange: (event) => setStep(Number(event.target.value)),
+						children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx("option", {
+							value: step,
+							children: step
+						}, step))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-scale-card__label-sample",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bl-scale-card__swatch",
+					style: {
+						background: preview ? hslCss(preview.fill) : state.hex,
+						color: preview ? hslCss(preview.label) : label ? hslCss(label) : void 0
+					},
+					children: "Aa"
+				}), /* @__PURE__ */ jsx("p", { children: previewMode === "dark" ? "Previewing this fill in Dark. A dark-enough hex lightens; otherwise it stays the typed color." : "The site chooses light or dark type on this fill. Darken or lighten the hex and regenerate to flip it. There is no ink picker." })]
+			}),
+			hueWarning ? /* @__PURE__ */ jsx("p", {
+				className: "bl-scale-card__warn",
+				children: hueWarning
+			}) : null,
+			state.stale ? /* @__PURE__ */ jsx("p", {
+				className: "bl-scale-card__stale",
+				children: "This scale is out of date. Regenerate to rebuild 50–950 around the hex."
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "bl-scale-card__regen",
+				disabled: readOnly || !state.stale,
+				onClick: () => onChange(regenerateColorScale(state)),
+				children: "Regenerate scale"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-scale-card__scale-head",
+				children: [/* @__PURE__ */ jsx("span", { children: "Generated scale" }), /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: readOnly,
+						onClick: () => onChange(setColorScaleInclude(state, "all")),
+						children: "Include all"
+					}),
+					" · ",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: readOnly,
+						onClick: () => onChange(setColorScaleInclude(state, "source")),
+						children: "Source only"
+					})
+				] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-scale-card__steps",
+				role: "group",
+				"aria-label": `${name} scale steps`,
+				children: SHADE_STEPS.map((step) => {
+					const source = step === state.sourceStep;
+					const on = included.has(step);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "bl-scale-card__step",
+						"data-source": source ? "" : void 0,
+						"data-excluded": on ? void 0 : "",
+						disabled: readOnly || source,
+						title: source ? `Source step ${step} cannot be excluded` : on ? `Exclude ${step} from page editors` : `Include ${step} for page editors`,
+						onClick: () => toggleStep(step),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "bl-scale-card__chip",
+							style: { background: hslCss(state.scale[step]) }
+						}), /* @__PURE__ */ jsx("span", {
+							className: "bl-scale-card__step-label",
+							children: step
+						})]
+					}, step);
+				})
+			}),
+			open && warning ? /* @__PURE__ */ jsx("div", {
+				className: "bl-scale-card__modal",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": titleId,
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-scale-card__panel",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-scale-card__panel-head",
+							children: [/* @__PURE__ */ jsx("h4", {
+								id: titleId,
+								children: readabilityHeadline(warning)
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setOpen(false),
+								"aria-label": "Close",
+								children: "×"
+							})]
+						}),
+						/* @__PURE__ */ jsx(ReadabilityDetail, { item: warning }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "bl-scale-card__panel-done",
+							onClick: () => setOpen(false),
+							children: "Keep editing this color"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+const COLOR_SCALE_CARD_CSS = `
+.bl-scale-card{padding:calc(var(--base,16px) * .8);border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:var(--style-radius-m,12px);background:var(--theme-elevation-0,#fff)}
+.bl-scale-card__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
+.bl-scale-card__title-row{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
+.bl-scale-card__title{margin:0;font-size:1rem}
+.bl-scale-card__badge{font:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;border:0;background:var(--theme-elevation-100,#f1f5f9);color:var(--theme-elevation-500,#64748b)}
+.bl-scale-card__badge--attention{background:#fff1f2;color:#be123c;cursor:pointer}
+.bl-scale-card__status{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:999px;border:0;font:inherit;font-weight:700;line-height:1}
+.bl-scale-card__status[data-ok]{background:#ecfdf5;color:#047857}
+.bl-scale-card__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.bl-scale-card__hint{margin:.35rem 0 0;color:var(--theme-elevation-500,#64748b);font-size:12px}
+.bl-scale-card__delete{border:0;background:none;color:#be123c;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
+.bl-scale-card__row{display:grid;grid-template-columns:1fr 8rem;gap:.75rem;margin-top:1rem}
+.bl-scale-card__field{display:flex;flex-direction:column;gap:.35rem;font-size:12px;font-weight:600;color:var(--theme-elevation-600,#475569)}
+.bl-scale-card__hex-wrap{display:flex;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px;overflow:hidden;background:var(--theme-input-bg,#fff)}
+.bl-scale-card__hex-wrap input[type=color]{width:2.75rem;height:2.25rem;padding:0;border:0;border-right:1px solid var(--theme-elevation-150,#e2e8f0);background:transparent;cursor:pointer}
+.bl-scale-card__hex-wrap input[type=text]{flex:1;min-width:0;border:0;padding:.4rem .7rem;font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;background:transparent;color:inherit}
+.bl-scale-card__field select{min-height:2.25rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px;padding:.35rem .5rem;background:var(--theme-input-bg,#fff);color:inherit}
+.bl-scale-card__label-sample{display:flex;gap:.75rem;align-items:center;margin-top:1rem}
+.bl-scale-card__swatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:2.25rem;border-radius:8px;border:1px solid var(--theme-elevation-150,#e2e8f0);font-weight:700}
+.bl-scale-card__label-sample p{margin:0;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-scale-card__warn,.bl-scale-card__stale{margin:.75rem 0 0;padding:.65rem .75rem;border-radius:8px;font-size:12px}
+.bl-scale-card__warn{border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46}
+.bl-scale-card__stale{border:1px solid #fde68a;background:#fffbeb;color:#92400e}
+.bl-scale-card__regen{width:100%;margin-top:.85rem;min-height:2.25rem;border:0;border-radius:8px;background:var(--theme-elevation-800,#0f172a);color:#fff;font:inherit;font-weight:600;cursor:pointer}
+.bl-scale-card__regen:disabled{opacity:.45;cursor:not-allowed}
+.bl-scale-card__scale-head{display:flex;justify-content:space-between;margin:1rem 0 .4rem;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-scale-card__scale-head button{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
+.bl-scale-card__steps{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.45rem 3px}
+.bl-scale-card__step{display:flex;flex-direction:column;align-items:center;gap:.3rem;border:0;padding:0;background:transparent;cursor:pointer}
+.bl-scale-card__chip{display:block;width:100%;height:2.15rem;border-radius:6px}
+.bl-scale-card__step-label{font-size:10px;line-height:1;color:var(--theme-elevation-600,#475569)}
+.bl-scale-card__step[data-source] .bl-scale-card__chip{box-shadow:0 0 0 2px #0f172a}
+.bl-scale-card__step[data-excluded]{opacity:.35}
+.bl-scale-card__step:disabled{cursor:default}
+.bl-scale-card__modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.45)}
+.bl-scale-card__panel{width:min(32rem,100%);padding:1.15rem 1.2rem;border-radius:16px;background:#fff;color:#0f172a}
+.bl-scale-card__panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
+.bl-scale-card__panel-head h4{margin:0;font-size:1rem}
+.bl-scale-card__panel-head button{border:0;background:none;font:inherit;font-size:1.25rem;line-height:1;color:#64748b;cursor:pointer}
+.bl-scale-card__panel-done{margin-top:1rem;min-height:2.1rem;padding:.35rem .85rem;border:0;border-radius:8px;background:#0f172a;color:#fff;font:inherit;font-weight:600;cursor:pointer}
+[data-bl-theme-preview=dark] .bl-scale-card{background:#0f172a;border-color:#334155;color:#f8fafc}
+[data-bl-theme-preview=dark] .bl-scale-card__hint,[data-bl-theme-preview=dark] .bl-scale-card__label-sample p,[data-bl-theme-preview=dark] .bl-scale-card__scale-head,[data-bl-theme-preview=dark] .bl-scale-card__step-label,[data-bl-theme-preview=dark] .bl-scale-card__field{color:#94a3b8}
+[data-bl-theme-preview=dark] .bl-scale-card__hex-wrap,[data-bl-theme-preview=dark] .bl-scale-card__field select{background:#1e293b;border-color:#334155;color:#f8fafc}
+[data-bl-theme-preview=dark] .bl-scale-card__step[data-source] .bl-scale-card__chip{box-shadow:0 0 0 2px #f8fafc}
+` + READABILITY_LIST_CSS;
+//#endregion
+//#region src/admin/color-scale-field.tsx
+const SYSTEM_ROLES = new Set(Object.keys(SYSTEM_COLOR_COPY));
+/**
+* One system (or library row) color: hex, source step, regenerate, stale,
+* include/exclude, automatic label. Writes the group's stored fields.
+*/
+const ColorScaleField = ({ field, path, readOnly }) => {
+	const hex = useField({ path: `${path}.hex` });
+	const sourceStep = useField({ path: `${path}.sourceStep` });
+	const scale = useField({ path: `${path}.scale` });
+	const stale = useField({ path: `${path}.stale` });
+	const include = useField({ path: `${path}.include` });
+	const includedSteps = useField({ path: `${path}.includedSteps` });
+	const key = path.split(".").pop() ?? "";
+	const copy = SYSTEM_ROLES.has(key) ? SYSTEM_COLOR_COPY[key] : void 0;
+	const state = stateFromColorDoc({
+		hex: hex.value,
+		sourceStep: sourceStep.value,
+		scale: scale.value,
+		stale: stale.value,
+		include: include.value === "source" || include.value === "custom" || include.value === "all" ? include.value : "all",
+		includedSteps: includedSteps.value
+	});
+	function write(next) {
+		const doc = colorDocFromState(next);
+		hex.setValue(doc.hex);
+		sourceStep.setValue(String(doc.sourceStep));
+		scale.setValue(doc.scale);
+		stale.setValue(doc.stale);
+		include.setValue(doc.include);
+		includedSteps.setValue(doc.includedSteps ?? (doc.include === "source" ? [doc.sourceStep] : [...SHADE_STEPS]));
+	}
+	const label = copy?.label ?? (typeof field.label === "string" ? field.label : key);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-scale-field",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "bl-scale-card",
+			precedence: "default",
+			children: COLOR_SCALE_CARD_CSS
+		}), /* @__PURE__ */ jsx(ColorScaleCard, {
+			id: key,
+			name: label,
+			hint: copy?.hint,
+			required: Boolean(copy) || Boolean("required" in field && field.required),
+			state: isThemeHex(state.hex) ? state : {
+				...state,
+				hex: "#000000"
+			},
+			onChange: write,
+			readOnly,
+			role: key === "success" || key === "destructive" ? key : null
+		})]
+	});
+};
+//#endregion
+//#region src/theme/types.ts
+const SYSTEM_COLOR_KEYS = [
+	"primary",
+	"secondary",
+	"accent",
+	"highlight",
+	"success",
+	"destructive"
+];
+function themeColorKeys(doc) {
+	const custom = (doc?.colors?.library ?? []).map((row) => row.key?.trim()).filter((key) => Boolean(key));
+	return [...SYSTEM_COLOR_KEYS, ...custom];
+}
+/**
+* Remove a custom color. Unused: omit `replacement` and the row is gone.
+* In use: pass another system or custom key; the caller rewrites page
+* tokens with `rewriteColorToken`. After this, no library row still
+* has `key`.
+*/
+function deleteLibraryColor(doc, key, replacement) {
+	const library = [...doc.colors?.library ?? []];
+	const index = library.findIndex((row) => row.key === key);
+	if (index === -1) throw new Error(`No custom color named ${JSON.stringify(key)}`);
+	library.splice(index, 1);
+	const next = {
+		...doc,
+		colors: {
+			...doc.colors,
+			library
+		}
+	};
+	if (replacement !== void 0) {
+		if (replacement === key) throw new Error("Replacement must be a different color");
+		if (!themeColorKeys(next).includes(replacement)) throw new Error(`Replacement ${JSON.stringify(replacement)} is not a system or remaining custom color`);
+	}
+	return next;
+}
+//#endregion
+//#region src/admin/library-field.tsx
+function slugify(value) {
+	return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+/**
+* Custom colors: the same scale controls as system colors, plus add and
+* in-use delete (one replacement scale; unused rows delete immediately).
+*/
+const LibraryField = ({ path, readOnly }) => {
+	const { value, setValue } = useField({ path });
+	const rows = value ?? [];
+	const [adding, setAdding] = useState(false);
+	const [name, setName] = useState("");
+	const [hex, setHex] = useState("#E07A5F");
+	const [pendingDelete, setPendingDelete] = useState(null);
+	const [replacement, setReplacement] = useState("");
+	function write(next) {
+		setValue(next);
+	}
+	function add() {
+		const key = slugify(name);
+		if (!key || rows.some((row) => row.key === key)) return;
+		write([...rows, {
+			key,
+			label: name.trim(),
+			...colorDocFromState(createColorScale(hex, 500))
+		}]);
+		setName("");
+		setAdding(false);
+	}
+	function remove(row, replaceWith) {
+		write(deleteLibraryColor({ colors: { library: rows } }, row.key ?? "", replaceWith).colors?.library ?? []);
+		setPendingDelete(null);
+		setReplacement("");
+	}
+	const replacements = [...SYSTEM_COLOR_KEYS.map((key) => ({
+		value: key,
+		label: key[0].toUpperCase() + key.slice(1)
+	})), ...rows.filter((row) => row.key && row.key !== pendingDelete?.key).map((row) => ({
+		value: row.key ?? "",
+		label: row.label ?? row.key ?? ""
+	}))];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-library",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-scale-card",
+				precedence: "default",
+				children: COLOR_SCALE_CARD_CSS
+			}),
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-library",
+				precedence: "default",
+				children: CSS$2
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-library__head",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", { children: "Custom colors" }), /* @__PURE__ */ jsx("p", { children: "Named scales that sit with the house colors. Page editors pick them as keys (`coral-400`)." })] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: readOnly,
+					onClick: () => setAdding(true),
+					children: "Add color"
+				})]
+			}),
+			adding ? /* @__PURE__ */ jsxs("div", {
+				className: "bl-library__add",
+				children: [
+					/* @__PURE__ */ jsxs("label", { children: ["Name", /* @__PURE__ */ jsx("input", {
+						value: name,
+						onChange: (event) => setName(event.target.value)
+					})] }),
+					/* @__PURE__ */ jsxs("label", { children: ["Hex", /* @__PURE__ */ jsx("input", {
+						value: hex,
+						onChange: (event) => setHex(event.target.value)
+					})] }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setAdding(false),
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: !slugify(name),
+						onClick: add,
+						children: "Create color scale"
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-library__list",
+				children: rows.map((row, index) => /* @__PURE__ */ jsx(ColorScaleCard, {
+					id: row.key ?? `custom-${index}`,
+					name: row.label ?? row.key ?? "Color",
+					hint: row.key ? `Key: ${row.key}` : void 0,
+					custom: true,
+					state: stateFromColorDoc(row),
+					onChange: (next) => {
+						const copy = [...rows];
+						copy[index] = {
+							...row,
+							...colorDocFromState(next)
+						};
+						write(copy);
+					},
+					onDelete: readOnly ? void 0 : () => setPendingDelete(row),
+					readOnly
+				}, row.key ?? index))
+			}),
+			pendingDelete ? /* @__PURE__ */ jsx("div", {
+				className: "bl-library__modal",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "bl-library-delete-title",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-library__panel",
+					children: [
+						/* @__PURE__ */ jsxs("h2", {
+							id: "bl-library-delete-title",
+							children: ["Delete ", pendingDelete.label ?? pendingDelete.key]
+						}),
+						/* @__PURE__ */ jsxs("p", { children: [
+							"Unused custom colors delete immediately. If this scale is in use, pick one replacement — every",
+							" ",
+							/* @__PURE__ */ jsxs("code", { children: [pendingDelete.key, "-400"] }),
+							" becomes ",
+							/* @__PURE__ */ jsxs("code", { children: [replacement || "…", "-400"] }),
+							"."
+						] }),
+						/* @__PURE__ */ jsxs("label", { children: ["Replacement scale", /* @__PURE__ */ jsxs("select", {
+							value: replacement,
+							onChange: (event) => setReplacement(event.target.value),
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "Choose a scale…"
+							}), replacements.map((option) => /* @__PURE__ */ jsx("option", {
+								value: option.value,
+								children: option.label
+							}, option.value))]
+						})] }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-library__actions",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => setPendingDelete(null),
+									children: "Cancel"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => remove(pendingDelete),
+									children: "Delete immediately"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									disabled: !replacement,
+									onClick: () => remove(pendingDelete, replacement),
+									children: "Replace & delete"
+								})
+							]
+						})
+					]
+				})
+			}) : null
+		]
+	});
+};
+const CSS$2 = `
+.bl-library__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.85rem}
+.bl-library__head h2{margin:0;font-size:1.1rem}
+.bl-library__head p{margin:.35rem 0 0;font-size:13px;color:var(--theme-elevation-500,#64748b)}
+.bl-library__head button,.bl-library__add button,.bl-library__actions button{min-height:2.1rem;padding:.35rem .75rem;border-radius:8px;border:1px solid var(--theme-elevation-150,#e2e8f0);background:var(--theme-elevation-0,#fff);font:inherit;cursor:pointer}
+.bl-library__list{display:grid;gap:.85rem}
+.bl-library__add{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:.85rem;padding:.85rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px}
+.bl-library__add label{display:flex;flex-direction:column;gap:.3rem;font-size:12px;font-weight:600}
+.bl-library__add input{min-height:2.1rem;padding:.3rem .55rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px}
+.bl-library__modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.45)}
+.bl-library__panel{width:min(28rem,100%);padding:1.2rem;border-radius:16px;background:#fff;color:#0f172a}
+.bl-library__panel h2{margin:0}
+.bl-library__panel p{margin:.5rem 0 0;color:#475569;font-size:14px}
+.bl-library__panel label{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;font-size:13px;font-weight:600}
+.bl-library__panel select{min-height:2.25rem;border:1px solid #cbd5e1;border-radius:8px;padding:.35rem .5rem}
+.bl-library__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem}
+`;
+//#endregion
+//#region src/admin/typography-pairing.tsx
+function FontRoleCard({ title, hint, required, family, preview, children }) {
+	return /* @__PURE__ */ jsxs("article", {
+		className: "bl-font-role",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "bl-font-role__head",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("p", { children: hint })] }), required ? /* @__PURE__ */ jsx("span", {
+					className: "bl-font-role__badge",
+					children: "Required"
+				}) : null]
+			}),
+			children,
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-font-role__preview",
+				children: [/* @__PURE__ */ jsx("span", { children: "Preview" }), preview === "heading" ? /* @__PURE__ */ jsx("p", {
+					className: "bl-font-role__heading",
+					style: { fontFamily: `"${family}"` },
+					children: "Advancing the work with clarity."
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "bl-font-role__body",
+					style: { fontFamily: `"${family}"` },
+					children: "Clear, comfortable text for longer reading across the site."
+				})]
+			})
+		]
+	});
+}
+function TypographyPairing({ headingFamily, bodyFamily }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "bl-pairing",
+		"aria-label": "Font pairing sample",
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx("h2", { children: "Pairing sample" }), /* @__PURE__ */ jsx("p", { children: "Heading and body from the approved catalogue. Type scale stays with the library." })] }), /* @__PURE__ */ jsxs("div", {
+			className: "bl-pairing__page",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "bl-pairing__eyebrow",
+					style: { fontFamily: `"${bodyFamily}"` },
+					children: "For visitors"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "bl-pairing__title",
+					style: { fontFamily: `"${headingFamily}"` },
+					children: "Stay in motion."
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "bl-pairing__copy",
+					style: { fontFamily: `"${bodyFamily}"` },
+					children: "Heading and body come from the catalogue. This is the pairing, not a full site preview."
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "bl-pairing__actions",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "bl-pairing__btn",
+						style: { fontFamily: `"${bodyFamily}"` },
+						children: "Primary action"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "bl-pairing__btn bl-pairing__btn--ghost",
+						style: { fontFamily: `"${bodyFamily}"` },
+						children: "Learn more"
+					})]
+				})
+			]
+		})]
+	});
+}
+const TYPOGRAPHY_PAIRING_CSS = `
+.bl-font-role{padding:1.1rem 1.15rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-0,#fff)}
+.bl-font-role__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
+.bl-font-role__head h3{margin:0;font-size:1rem}
+.bl-font-role__head p{margin:.3rem 0 0;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-font-role__badge{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;background:var(--theme-elevation-100,#f1f5f9);color:var(--theme-elevation-500,#64748b)}
+.bl-font-role__preview{margin-top:1rem;padding:.85rem .9rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-50,#f8fafc)}
+.bl-font-role__preview > span{display:block;margin-bottom:.4rem;font-size:11px;color:var(--theme-elevation-500,#64748b)}
+.bl-font-role__heading{margin:0;font-size:1.5rem;line-height:1.2;font-weight:600}
+.bl-font-role__body{margin:0;font-size:1rem;line-height:1.6;color:var(--theme-elevation-600,#475569)}
+.bl-pairing{padding:0;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-0,#fff);overflow:hidden}
+.bl-pairing > header{padding:1rem 1.15rem;border-bottom:1px solid var(--theme-elevation-150,#e2e8f0)}
+.bl-pairing > header h2{margin:0;font-size:1rem}
+.bl-pairing > header p{margin:.3rem 0 0;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-pairing__page{padding:1.35rem 1.4rem 1.5rem}
+.bl-pairing__eyebrow{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7c1fa2}
+.bl-pairing__title{margin:.5rem 0 0;font-size:2rem;line-height:1.1;font-weight:600}
+.bl-pairing__copy{margin:.75rem 0 0;max-width:36rem;font-size:1rem;line-height:1.6;color:var(--theme-elevation-600,#475569)}
+.bl-pairing__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
+.bl-pairing__btn{display:inline-flex;align-items:center;min-height:2.15rem;padding:.4rem .85rem;border-radius:8px;background:#db0082;color:#fff;font-size:14px;font-weight:600}
+.bl-pairing__btn--ghost{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
+`;
+//#endregion
 //#region src/admin/font-field.tsx
 /**
 * Listbox over the catalogue ids in `admin.custom.ids`. Each option is the
 * family name in that face, with the catalogue hint beneath. Faces load
-* from the site's font route the first time the picker opens.
+* from the site's font route for the selected family, and for every
+* catalogue id once the picker opens.
 */
 const FontField = ({ field, path, readOnly }) => {
 	const { value, setValue, showError, errorMessage } = useField({ path });
@@ -142,6 +1139,8 @@ const FontField = ({ field, path, readOnly }) => {
 	const [open, setOpen] = useState(false);
 	const [faces, setFaces] = useState(false);
 	const [active, setActive] = useState(-1);
+	const [query, setQuery] = useState("");
+	const [category, setCategory] = useState("all");
 	const typed = useRef("");
 	const typedAt = useRef(0);
 	const id = useId();
@@ -152,10 +1151,18 @@ const FontField = ({ field, path, readOnly }) => {
 		if (open) setFaces(true);
 	}, [open]);
 	const selected = options.find((option) => option.value === (value ?? "")) ?? options[0];
+	const visible = options.filter((option) => {
+		if (query && !option.family.toLowerCase().includes(query.trim().toLowerCase())) return false;
+		if (category === "all" || !option.specimen) return true;
+		return findFont(option.value)?.category === category;
+	});
+	const role = sameAsBody ? FONT_ROLE_COPY.heading : FONT_ROLE_COPY.body;
 	function choose(option) {
 		setValue(option.value);
 		setOpen(false);
 		setActive(-1);
+		setQuery("");
+		setCategory("all");
 	}
 	function onKeyDown(event) {
 		if (event.key === "ArrowDown") {
@@ -198,26 +1205,35 @@ const FontField = ({ field, path, readOnly }) => {
 		}
 	}
 	const activeId = active >= 0 && open ? `${id}-option-${active}` : void 0;
+	const faceIds = faces ? ids : isFontId(value) ? [value] : [];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "field-type bl-font-field",
 		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-pairing",
+				precedence: "default",
+				children: TYPOGRAPHY_PAIRING_CSS
+			}),
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-font-field",
 				precedence: "default",
 				children: CSS$1
 			}),
-			faces ? /* @__PURE__ */ jsx("style", {
+			faceIds.length > 0 ? /* @__PURE__ */ jsx("style", {
 				"data-bl-font-faces": "",
-				children: fontFaceCss(ids, fontsBaseUrl)
+				children: fontFaceCss(faceIds, fontsBaseUrl)
 			}) : null,
-			/* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: buttonId,
-				label: field.label,
-				required
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-font-field__control",
-				children: [/* @__PURE__ */ jsx("button", {
+			/* @__PURE__ */ jsxs(FontRoleCard, {
+				title: typeof field.label === "string" ? field.label : role.label,
+				hint: role.hint,
+				required,
+				family: selected?.family ?? "Inter",
+				preview: sameAsBody ? "heading" : "body",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: buttonId,
+					label: field.label,
+					required
+				}), /* @__PURE__ */ jsxs("button", {
 					id: buttonId,
 					type: "button",
 					className: "bl-font-field__trigger",
@@ -227,34 +1243,94 @@ const FontField = ({ field, path, readOnly }) => {
 					"aria-controls": listId,
 					"aria-activedescendant": activeId,
 					onClick: () => setOpen((was) => !was),
-					onBlur: () => setOpen(false),
 					onKeyDown,
-					children: selected?.family ?? "Choose a font"
-				}), open ? /* @__PURE__ */ jsx("ul", {
-					id: listId,
-					role: "listbox",
-					className: "bl-font-field__menu",
-					children: options.map((option, i) => /* @__PURE__ */ jsxs("li", {
-						id: `${id}-option-${i}`,
-						role: "option",
-						"aria-selected": option.value === (value ?? ""),
-						className: "bl-font-field__option",
-						onMouseDown: (event) => {
-							event.preventDefault();
-							choose(option);
-						},
-						onMouseEnter: () => setActive(i),
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "bl-font-field__family",
-							style: option.specimen ? { fontFamily: `"${option.family}"` } : void 0,
-							children: option.family
-						}), /* @__PURE__ */ jsx("span", {
-							className: "bl-font-field__hint",
-							children: option.hint
-						})]
-					}, option.value || "same"))
-				}) : null]
+					children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+						className: "bl-font-field__selected-label",
+						children: "Selected"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "bl-font-field__selected-name",
+						style: selected?.specimen ? { fontFamily: `"${selected.family}"` } : void 0,
+						children: selected?.family ?? "Choose a font"
+					})] }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "⌄"
+					})]
+				})]
 			}),
+			open ? /* @__PURE__ */ jsx("div", {
+				className: "bl-font-field__modal",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-font-field__panel",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-font-field__panel-head",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: "Choose a font" }), /* @__PURE__ */ jsx("h2", { children: role.label })] }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setOpen(false),
+								"aria-label": "Close",
+								children: "×"
+							})]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "search",
+							className: "bl-font-field__search",
+							placeholder: "Search fonts…",
+							value: query,
+							onChange: (event) => setQuery(event.target.value)
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "bl-font-field__filters",
+							children: [
+								"all",
+								"sans",
+								"serif",
+								"display",
+								"mono"
+							].map((item) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-on": category === item ? "" : void 0,
+								onClick: () => setCategory(item),
+								children: item === "all" ? "All" : item === "sans" ? "Sans serif" : item === "serif" ? "Serif" : item === "display" ? "Display" : "Mono"
+							}, item))
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							id: listId,
+							role: "listbox",
+							className: "bl-font-field__menu",
+							children: visible.map((option, i) => /* @__PURE__ */ jsxs("li", {
+								id: `${id}-option-${i}`,
+								role: "option",
+								"aria-selected": option.value === (value ?? ""),
+								className: "bl-font-field__option",
+								onMouseDown: (event) => {
+									event.preventDefault();
+									choose(option);
+								},
+								onMouseEnter: () => setActive(i),
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "bl-font-field__family",
+										style: option.specimen ? { fontFamily: `"${option.family}"` } : void 0,
+										children: option.family
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "bl-font-field__hint",
+										children: option.hint
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "bl-font-field__specimen",
+										style: option.specimen ? { fontFamily: `"${option.family}"` } : void 0,
+										children: "The quick brown fox jumps over the lazy dog."
+									})
+								]
+							}, option.value || "same"))
+						})
+					]
+				})
+			}) : null,
 			/* @__PURE__ */ jsx(FieldDescription, {
 				description: field.admin?.description,
 				path
@@ -268,166 +1344,713 @@ const FontField = ({ field, path, readOnly }) => {
 	});
 };
 const CSS$1 = `
-.bl-font-field__control{position:relative}
-.bl-font-field__trigger{display:flex;align-items:center;width:100%;min-height:calc(var(--base) * 2);padding:calc(var(--base) * .25) calc(var(--base) * .6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:var(--theme-elevation-800);font:inherit;text-align:left;cursor:pointer}
-.bl-font-field__trigger:focus{border-color:var(--theme-elevation-400);outline:none;box-shadow:0 0 0 1px var(--theme-elevation-400)}
-.bl-font-field__trigger:disabled{color:var(--theme-elevation-400);cursor:not-allowed}
-.bl-font-field__menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;margin:0;padding:calc(var(--base) * .2) 0;list-style:none;max-height:18rem;overflow:auto;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0);box-shadow:0 8px 24px var(--theme-overlay)}
-.bl-font-field__option{display:flex;flex-direction:column;gap:2px;padding:calc(var(--base) * .35) calc(var(--base) * .6);cursor:pointer}
-.bl-font-field__option[aria-selected="true"],.bl-font-field__option:hover{background:var(--theme-elevation-100)}
-.bl-font-field__family{font-weight:500}
-.bl-font-field__hint{color:var(--theme-elevation-500);font-size:12px}
+.bl-font-field{margin-bottom:1rem}
+.bl-font-field .field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.bl-font-field__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:1rem;min-height:3.25rem;padding:.7rem 1rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-input-bg,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer}
+.bl-font-field__trigger:focus{border-color:var(--theme-elevation-400,#94a3b8);outline:none;box-shadow:0 0 0 1px var(--theme-elevation-400,#94a3b8)}
+.bl-font-field__trigger:disabled{color:var(--theme-elevation-400,#94a3b8);cursor:not-allowed}
+.bl-font-field__selected-label{display:block;font-size:11px;color:var(--theme-elevation-500,#64748b)}
+.bl-font-field__selected-name{display:block;margin-top:.15rem;font-weight:600}
+.bl-font-field__modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.45)}
+.bl-font-field__panel{width:min(36rem,100%);max-height:min(36rem,90vh);display:flex;flex-direction:column;padding:1.15rem 1.2rem;border-radius:16px;background:#fff;color:#0f172a}
+.bl-font-field__panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
+.bl-font-field__panel-head p{margin:0;font-size:12px;color:#64748b}
+.bl-font-field__panel-head h2{margin:.2rem 0 0;font-size:1.15rem}
+.bl-font-field__panel-head button{border:0;background:none;font:inherit;font-size:1.25rem;color:#64748b;cursor:pointer}
+.bl-font-field__search{margin-top:.9rem;min-height:2.5rem;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
+.bl-font-field__filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
+.bl-font-field__filters button{min-height:1.8rem;padding:.2rem .7rem;border:0;border-radius:999px;background:#f1f5f9;color:#475569;font:inherit;font-size:12px;cursor:pointer}
+.bl-font-field__filters button[data-on]{background:#0f172a;color:#fff}
+.bl-font-field__menu{margin:.75rem 0 0;padding:0;list-style:none;overflow:auto;max-height:18rem}
+.bl-font-field__option{display:flex;flex-direction:column;gap:2px;margin-bottom:.5rem;padding:.75rem .85rem;border:1px solid #e2e8f0;border-radius:12px;cursor:pointer}
+.bl-font-field__option[aria-selected="true"]{border-color:#7c1fa2;background:#f5f3ff}
+.bl-font-field__family{font-weight:600}
+.bl-font-field__hint{color:#64748b;font-size:12px}
+.bl-font-field__specimen{margin-top:.45rem;font-size:1.25rem;line-height:1.3}
 `;
 //#endregion
-//#region src/admin/contrast-report.tsx
-function fieldValue(fields, path) {
-	return fields[path]?.value;
+//#region src/admin/pairing-field.tsx
+/**
+* Pairing sample only — no weight, letter-spacing, line-height, or health
+* scores. Faces load from the site's font route.
+*/
+const PairingField = ({ field }) => {
+	const fontsBaseUrl = (field.admin?.custom ?? {}).fontsBaseUrl ?? "/fonts";
+	const { body, heading } = useFormFields(([fields]) => {
+		const record = fields;
+		return {
+			body: String(record["typography.body"]?.value ?? ""),
+			heading: String(record["typography.heading"]?.value ?? "")
+		};
+	});
+	const headingId = heading || body;
+	const bodyFont = findFont(body);
+	const headingFont = findFont(headingId);
+	const ids = [body, headingId].filter(Boolean);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-pairing-field",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-pairing",
+				precedence: "default",
+				children: TYPOGRAPHY_PAIRING_CSS
+			}),
+			ids.length > 0 ? /* @__PURE__ */ jsx("style", {
+				"data-bl-font-faces": "",
+				children: fontFaceCss(ids, fontsBaseUrl)
+			}) : null,
+			/* @__PURE__ */ jsx(TypographyPairing, {
+				headingFamily: headingFont?.family ?? "Georgia",
+				bodyFamily: bodyFont?.family ?? "system-ui"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/admin/appearance-choices.tsx
+function ChoicePreview({ family, value }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "bl-appearance__preview",
+		"data-family": family,
+		"data-value": value,
+		"aria-hidden": "true",
+		children: family === "defaultTheme" && value === "system" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "bl-appearance__pane bl-appearance__pane--light",
+			children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("b", {})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "bl-appearance__pane bl-appearance__pane--dark",
+			children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("b", {})]
+		})] }) : family === "motion" ? /* @__PURE__ */ jsx("span", { className: "bl-appearance__dot" }) : family === "shadow" ? /* @__PURE__ */ jsx("div", { className: "bl-appearance__lift" }) : family === "radius" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("b", { children: "Button" }),
+			/* @__PURE__ */ jsx("i", { className: "bl-appearance__input" }),
+			/* @__PURE__ */ jsx("i", { className: "bl-appearance__card" })
+		] }) : family === "density" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("b", {}),
+			/* @__PURE__ */ jsx("i", { className: "bl-appearance__input" }),
+			/* @__PURE__ */ jsx("i", { className: "bl-appearance__card" })
+		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("i", {}),
+			/* @__PURE__ */ jsx("i", {}),
+			/* @__PURE__ */ jsx("b", {})
+		] })
+	});
 }
-function isCompleteBrand(values) {
-	return isThemeHex(values.primary) && isThemeHex(values.secondary) && isThemeHex(values.accent) && isThemeHex(values.highlight) && isThemeHex(values.success) && typeof values.greyScale === "string";
+function AppearanceChoices({ values, onChange, readOnly }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-appearance",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "bl-appearance__intro",
+			children: [/* @__PURE__ */ jsx("h2", { children: "Set the overall feel of your site" }), /* @__PURE__ */ jsx("p", { children: "Choose how rounded, elevated, animated, and spacious the interface feels. You don’t manage the technical values — the system handles those." })]
+		}), Object.keys(APPEARANCE_CHOICES).map((family) => {
+			const choices = APPEARANCE_CHOICES[family];
+			const copy = APPEARANCE_FAMILY_COPY[family];
+			return /* @__PURE__ */ jsxs("fieldset", {
+				className: "bl-appearance__family",
+				children: [
+					/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsx("strong", { children: copy.title }), /* @__PURE__ */ jsx("span", { children: copy.hint })] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "bl-appearance__choices",
+						"data-family": family,
+						children: Object.entries(choices).map(([value, item]) => {
+							const selected = values[family] === value;
+							return /* @__PURE__ */ jsxs("label", {
+								className: "bl-appearance__choice",
+								"data-selected": selected ? "" : void 0,
+								children: [
+									/* @__PURE__ */ jsx("input", {
+										type: "radio",
+										name: family,
+										value,
+										checked: selected,
+										disabled: readOnly,
+										onChange: () => onChange(family, value)
+									}),
+									/* @__PURE__ */ jsx(ChoicePreview, {
+										family,
+										value
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "bl-appearance__copy",
+										children: [/* @__PURE__ */ jsxs("strong", { children: [item.label, selected ? /* @__PURE__ */ jsx("em", {
+											"aria-hidden": "true",
+											children: "✓"
+										}) : null] }), /* @__PURE__ */ jsx("span", { children: item.hint })]
+									})
+								]
+							}, value);
+						})
+					}),
+					family === "motion" ? /* @__PURE__ */ jsx("p", {
+						className: "bl-appearance__note",
+						children: "Visitors who prefer reduced motion will still see fewer animations automatically."
+					}) : null
+				]
+			}, family);
+		})]
+	});
 }
-function LevelIcon({ level }) {
-	if (level === "fail") return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		width: "14",
-		height: "14",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			d: "M8 1.5 1.5 14h13L8 1.5zm0 4.2c.4 0 .7.3.7.8v3.2c0 .4-.3.8-.7.8s-.8-.4-.8-.8V6.5c0-.5.4-.8.8-.8zm0 6.3a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6z"
-		})
+const APPEARANCE_CHOICES_CSS = `
+.bl-appearance{display:flex;flex-direction:column;gap:1.25rem}
+.bl-appearance__intro h2{margin:0;font-size:1.1rem}
+.bl-appearance__intro p{margin:.35rem 0 0;font-size:13px;color:var(--theme-elevation-500,#64748b);max-width:40rem}
+.bl-appearance__family{margin:0;padding:1rem 1.1rem 1.15rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-0,#fff)}
+.bl-appearance__family legend{padding:0;margin-bottom:.85rem}
+.bl-appearance__family legend strong{display:block;font-size:14px}
+.bl-appearance__family legend span{display:block;margin-top:.25rem;font-size:12px;color:var(--theme-elevation-500,#64748b);font-weight:400}
+.bl-appearance__choices{display:grid;gap:.6rem}
+.bl-appearance__choices[data-family=defaultTheme],.bl-appearance__choices[data-family=shadow],.bl-appearance__choices[data-family=motion],.bl-appearance__choices[data-family=density]{grid-template-columns:repeat(3,minmax(0,1fr))}
+.bl-appearance__choices[data-family=radius]{grid-template-columns:repeat(4,minmax(0,1fr))}
+.bl-appearance__choice{display:flex;flex-direction:column;gap:.65rem;padding:.75rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-0,#fff);cursor:pointer}
+.bl-appearance__choice[data-selected]{box-shadow:inset 0 0 0 2px #0f172a;border-color:#0f172a}
+.bl-appearance__choice input{position:absolute;opacity:0;pointer-events:none}
+.bl-appearance__copy{display:flex;flex-direction:column;gap:.2rem}
+.bl-appearance__copy strong{display:flex;justify-content:space-between;align-items:center;gap:.4rem;font-size:14px}
+.bl-appearance__copy em{font-style:normal}
+.bl-appearance__copy span{font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-appearance__note{margin:.75rem 0 0;font-size:12px;color:var(--theme-elevation-500,#64748b)}
+.bl-appearance__preview{--bl-preview-brand:#db0082;--bl-preview-radius:8px;border-radius:10px;background:#f8fafc;overflow:hidden}
+.bl-appearance__preview[data-family=defaultTheme]{display:grid;min-height:5.5rem;padding:.65rem}
+.bl-appearance__preview[data-family=defaultTheme][data-value=system]{grid-template-columns:1fr 1fr;padding:0}
+.bl-appearance__preview[data-family=defaultTheme][data-value=dark]{background:#020617}
+.bl-appearance__pane{display:flex;flex-direction:column;gap:.45rem;padding:.65rem}
+.bl-appearance__pane--dark{background:#020617}
+.bl-appearance__pane i,.bl-appearance__preview[data-family=defaultTheme] > i{display:block;height:.4rem;width:42%;border-radius:99px;background:#0f172a}
+.bl-appearance__pane i + i,.bl-appearance__preview[data-family=defaultTheme] > i + i{width:64%;background:#cbd5e1}
+.bl-appearance__pane--dark i{background:#fff}
+.bl-appearance__pane--dark i + i{background:#334155}
+.bl-appearance__preview[data-family=defaultTheme][data-value=dark] > i{background:#fff}
+.bl-appearance__preview[data-family=defaultTheme][data-value=dark] > i + i{background:#334155}
+.bl-appearance__pane b,.bl-appearance__preview[data-family=defaultTheme] > b{display:block;height:1.6rem;margin-top:auto;border-radius:6px;background:var(--bl-preview-brand)}
+.bl-appearance__pane--dark b{background:var(--bl-preview-brand)}
+.bl-appearance__preview[data-family=radius]{display:flex;flex-direction:column;gap:.45rem;padding:.65rem;background:#fff}
+.bl-appearance__preview[data-family=radius] b{display:grid;place-items:center;height:1.85rem;background:var(--bl-preview-brand);color:#fff;font-size:10px;font-weight:600;border-radius:var(--bl-preview-radius)}
+.bl-appearance__input{display:block;height:1.85rem;border:1px solid #cbd5e1;background:#f8fafc;border-radius:var(--bl-preview-radius)}
+.bl-appearance__card{display:block;height:2.4rem;border:1px solid #e2e8f0;background:#fff;border-radius:var(--bl-preview-radius)}
+.bl-appearance__preview[data-value=sharp]{--bl-preview-radius:0}
+.bl-appearance__preview[data-value=subtle]{--bl-preview-radius:6px}
+.bl-appearance__preview[data-value=rounded]{--bl-preview-radius:12px}
+.bl-appearance__preview[data-value=pill]{--bl-preview-radius:999px}
+.bl-appearance__preview[data-value=pill] .bl-appearance__card{--bl-preview-radius:1.25rem}
+.bl-appearance__preview[data-family=shadow]{display:grid;place-items:center;min-height:6.5rem;padding:.85rem}
+.bl-appearance__lift{width:100%;height:3.5rem;border-radius:10px;background:#fff}
+.bl-appearance__preview[data-value=flat] .bl-appearance__lift{border:1px solid #e2e8f0}
+.bl-appearance__preview[data-value=subtle] .bl-appearance__lift{box-shadow:0 1px 2px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.06)}
+.bl-appearance__preview[data-value=elevated] .bl-appearance__lift{box-shadow:0 10px 30px rgba(15,23,42,.12)}
+.bl-appearance__preview[data-family=motion]{display:flex;align-items:center;min-height:4.5rem;padding:0 .85rem}
+.bl-appearance__dot{width:1.15rem;height:1.15rem;border-radius:999px;background:var(--bl-preview-brand);animation:bl-appear-dot 1.8s ease-in-out infinite}
+.bl-appearance__preview[data-value=snappy] .bl-appearance__dot{animation-duration:1s}
+.bl-appearance__preview[data-value=minimal] .bl-appearance__dot{animation-duration:2.5s}
+@keyframes bl-appear-dot{0%,100%{transform:translateX(0)}50%{transform:translateX(4.5rem)}}
+.bl-appearance__preview[data-family=density]{display:flex;flex-direction:column;background:#f8fafc}
+.bl-appearance__preview[data-value=compact]{gap:.4rem;padding:.55rem}
+.bl-appearance__preview[data-value=default]{gap:.65rem;padding:.8rem}
+.bl-appearance__preview[data-value=spacious]{gap:.9rem;padding:1.05rem}
+.bl-appearance__preview[data-family=density] b{display:block;height:1.7rem;background:var(--bl-preview-brand);border-radius:6px}
+.bl-appearance__preview[data-value=compact] b,.bl-appearance__preview[data-value=compact] .bl-appearance__input{height:1.45rem}
+.bl-appearance__preview[data-value=spacious] b,.bl-appearance__preview[data-value=spacious] .bl-appearance__input{height:2.1rem}
+@media (max-width:720px){
+  .bl-appearance__choices[data-family=defaultTheme],.bl-appearance__choices[data-family=shadow],.bl-appearance__choices[data-family=motion],.bl-appearance__choices[data-family=density],.bl-appearance__choices[data-family=radius]{grid-template-columns:1fr}
+}
+@media (prefers-reduced-motion:reduce){
+  .bl-appearance__dot{animation:none}
+}
+`;
+//#endregion
+//#region src/admin/appearance-field.tsx
+/**
+* Named appearance choices. Soft → pill, Gentle → minimal, Balanced →
+* default, Follow device → system. No rem or ms.
+*/
+const AppearanceField = ({ path, readOnly }) => {
+	const defaultTheme = useField({ path: `${path}.defaultTheme` });
+	const radius = useField({ path: `${path}.radius` });
+	const shadow = useField({ path: `${path}.shadow` });
+	const motion = useField({ path: `${path}.motion` });
+	const density = useField({ path: `${path}.density` });
+	const fields = {
+		defaultTheme,
+		radius,
+		shadow,
+		motion,
+		density
+	};
+	function onChange(name, value) {
+		fields[name].setValue(value);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-appearance-field",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "bl-appearance",
+			precedence: "default",
+			children: APPEARANCE_CHOICES_CSS
+		}), /* @__PURE__ */ jsx(AppearanceChoices, {
+			values: {
+				defaultTheme: defaultTheme.value ?? "system",
+				radius: radius.value ?? "rounded",
+				shadow: shadow.value ?? "subtle",
+				motion: motion.value ?? "smooth",
+				density: density.value ?? "default"
+			},
+			onChange,
+			readOnly
+		})]
 	});
-	if (level === "aa-large") return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		width: "14",
-		height: "14",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			d: "M3 8h10v1.5H3z"
-		})
+};
+//#endregion
+//#region src/admin/grey-scale-field.tsx
+const FAMILIES = Object.keys(presetHints.greyScale);
+const SWATCHES = [
+	"50",
+	"200",
+	"400",
+	"700",
+	"950"
+];
+function GreyScaleChoices({ value, onChange, readOnly }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "bl-grey",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "bl-grey__head",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", { children: "Gray family" }), /* @__PURE__ */ jsx("p", { children: "Choose the neutral family used for page backgrounds, cards, borders, inputs, and muted text." })] }), /* @__PURE__ */ jsx("span", {
+				className: "bl-grey__badge",
+				children: "Required"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "bl-grey__choices",
+			children: FAMILIES.map((id) => {
+				const copy = presetHints.greyScale[id];
+				const selected = value === id;
+				return /* @__PURE__ */ jsxs("label", {
+					className: "bl-grey__choice",
+					"data-selected": selected ? "" : void 0,
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "radio",
+							name: "greyScale",
+							value: id,
+							checked: selected,
+							disabled: readOnly,
+							onChange: () => onChange(id)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "bl-grey__ramp",
+							"aria-hidden": "true",
+							children: SWATCHES.map((step) => /* @__PURE__ */ jsx("i", { style: { background: `hsl(${GREY_SCALES[id][step]})` } }, step))
+						}),
+						/* @__PURE__ */ jsxs("strong", { children: [copy.label, selected ? /* @__PURE__ */ jsx("em", {
+							"aria-hidden": "true",
+							children: "✓"
+						}) : null] }),
+						/* @__PURE__ */ jsx("span", { children: copy.hint })
+					]
+				}, id);
+			})
+		})]
 	});
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		width: "14",
-		height: "14",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			d: "M8 1.2a6.8 6.8 0 1 1 0 13.6A6.8 6.8 0 0 1 8 1.2zm3.1 4.3L7.2 9.4 5 7.2l-.9.9 3.1 3.1 4.8-4.8-.9-.9z"
-		})
+}
+/**
+* Visual picker over the five grey-scale presets. Replaces the stock select
+* on Colors; the stored value is still `colors.greyScale`.
+*/
+const GreyScaleField = ({ path, readOnly }) => {
+	const { value, setValue } = useField({ path });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-grey-field",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "bl-grey",
+			precedence: "default",
+			children: GREY_SCALE_FIELD_CSS
+		}), /* @__PURE__ */ jsx(GreyScaleChoices, {
+			value: value ?? "slate",
+			onChange: setValue,
+			readOnly
+		})]
 	});
+};
+const GREY_SCALE_FIELD_CSS = `
+.bl-grey{margin:0 0 1.75rem}
+.bl-grey__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.85rem}
+.bl-grey__head h2{margin:0;font-size:1.1rem}
+.bl-grey__head p{margin:.35rem 0 0;max-width:40rem;font-size:13px;color:var(--theme-elevation-500,#64748b)}
+.bl-grey__badge{font:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;background:var(--theme-elevation-100,#f1f5f9);color:var(--theme-elevation-500,#64748b)}
+.bl-grey__choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
+.bl-grey__choice{display:flex;flex-direction:column;gap:.45rem;padding:.75rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:12px;background:var(--theme-elevation-0,#fff);cursor:pointer}
+.bl-grey__choice[data-selected]{box-shadow:inset 0 0 0 2px #0f172a;border-color:#0f172a}
+.bl-grey__choice input{position:absolute;opacity:0;pointer-events:none}
+.bl-grey__ramp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
+.bl-grey__ramp i{display:block;height:2rem;border-radius:6px}
+.bl-grey__choice strong{display:flex;justify-content:space-between;align-items:center;gap:.4rem;font-size:14px}
+.bl-grey__choice em{font-style:normal}
+.bl-grey__choice > span{font-size:12px;color:var(--theme-elevation-500,#64748b)}
+[data-bl-theme-preview=dark] .bl-grey__head p,[data-bl-theme-preview=dark] .bl-grey__choice > span{color:#94a3b8}
+[data-bl-theme-preview=dark] .bl-grey__choice{background:#0f172a;border-color:#334155;color:#f8fafc}
+[data-bl-theme-preview=dark] .bl-grey__choice[data-selected]{box-shadow:inset 0 0 0 2px #f8fafc;border-color:#f8fafc}
+[data-bl-theme-preview=dark] .bl-grey__badge{background:#1e293b;color:#94a3b8}
+@media (max-width:720px){.bl-grey__choices{grid-template-columns:1fr}}
+`;
+//#endregion
+//#region src/admin/contrast-report.tsx
+function hexAt(fields, path) {
+	const value = fields[path]?.value;
+	return typeof value === "string" ? value : "";
 }
 /**
-* Reads the five brand colours and grey scale from the form, runs
-* `auditTheme` client-side, and paints its own rows. Warn only: nothing
-* here touches validity.
+* Fill + automatic label only. Target 7:1, Light and Dark. No gray
+* ContrastStrip. Warnings do not block save.
 */
 const ContrastReport = ({ field }) => {
-	const target = Number((field.admin?.custom)?.target) || 4.5;
-	const values = useFormFields(([fields]) => {
+	const target = Number((field.admin?.custom)?.target) || 7;
+	const hexes = useFormFields(([fields]) => {
 		const record = fields;
+		const system = Object.fromEntries(SYSTEM_COLOR_KEYS.map((key) => [key, hexAt(record, `colors.brand.${key}.hex`)]));
+		const library = record["colors.library"]?.value;
 		return {
-			primary: fieldValue(record, "brand.primary"),
-			secondary: fieldValue(record, "brand.secondary"),
-			accent: fieldValue(record, "brand.accent"),
-			highlight: fieldValue(record, "brand.highlight"),
-			success: fieldValue(record, "brand.success"),
-			greyScale: fieldValue(record, "greyScale")
+			system,
+			custom: Array.isArray(library) ? library.flatMap((row, index) => {
+				const hex = typeof row === "object" && row && "hex" in row ? String(row.hex ?? "") : "";
+				const name = typeof row === "object" && row && "label" in row ? String(row.label ?? row.key ?? "Custom") : "Custom";
+				return hex ? [{
+					id: `library-${index}`,
+					name,
+					hex
+				}] : [];
+			}) : []
 		};
 	});
 	const last = useRef(null);
-	const complete = isCompleteBrand(values);
-	if (complete) last.current = auditTheme({
-		brandPrimary: values.primary,
-		brandSecondary: values.secondary,
-		brandAccent: values.accent,
-		brandHighlight: values.highlight,
-		brandSuccess: values.success,
-		greyScale: values.greyScale
-	}, { target });
-	const checks = last.current;
-	const stale = Boolean(checks) && !complete;
-	const failing = checks?.filter((check) => !check.meetsTarget).length ?? 0;
-	const summary = !checks ? "Enter five hex colours to measure contrast." : failing === 0 ? `Every pairing meets ${target}:1` : `${failing} of ${checks.length} pairings below ${target}:1`;
+	const complete = SYSTEM_COLOR_KEYS.every((key) => isThemeHex(hexes.system[key]));
+	if (complete) last.current = [...SYSTEM_COLOR_KEYS.map((key) => fillLabelWarning(key, SYSTEM_COLOR_COPY[key].label, hexes.system[key], target)), ...hexes.custom.map((row) => fillLabelWarning(row.id, row.name, row.hex, target))].filter((item) => item !== null);
+	const warnings = last.current ?? [];
+	const stale = Boolean(last.current) && !complete;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "field-type bl-contrast-report",
 		children: [
 			/* @__PURE__ */ jsx("style", {
-				href: "bl-contrast-report",
+				href: "bl-readability",
 				precedence: "default",
-				children: CSS
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "bl-contrast-report__summary",
-				children: summary
+				children: READABILITY_LIST_CSS
 			}),
 			stale ? /* @__PURE__ */ jsx("p", {
 				className: "bl-contrast-report__stale",
 				children: "Showing the last complete audit while a colour is being typed."
 			}) : null,
-			checks ? /* @__PURE__ */ jsx("ul", {
-				className: "bl-contrast-report__list",
-				children: checks.flatMap((check) => ["light", "dark"].map((mode) => {
-					const sample = check[mode];
-					const failingRow = sample.ratio < check.target;
-					const verdict = contrastVerdict(sample, check.target);
-					return /* @__PURE__ */ jsxs("li", {
-						className: "bl-contrast-report__row",
-						"data-failing": failingRow ? "" : void 0,
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: "bl-contrast-report__swatch",
-								style: {
-									color: `hsl(${sample.foreground})`,
-									backgroundColor: `hsl(${sample.background})`
-								},
-								children: "Aa"
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "bl-contrast-report__ratio",
-								children: [sample.ratio.toFixed(2), ":1"]
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "bl-contrast-report__level",
-								children: [/* @__PURE__ */ jsx(LevelIcon, { level: sample.level }), contrastLevelLabel(sample.level)]
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "bl-contrast-report__verdict",
-								children: verdict.text
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "bl-contrast-report__label",
-								children: [
-									check.label,
-									" (",
-									mode === "light" ? "Light" : "Dark",
-									")"
-								]
-							})
-						]
-					}, `${check.id}-${mode}`);
-				}))
-			}) : null
+			warnings.length > 0 ? /* @__PURE__ */ jsx(ReadabilityList, {
+				warnings,
+				target
+			}) : /* @__PURE__ */ jsx("p", { children: "Enter hex colours to measure the automatic label on each fill." })
+		]
+	});
+};
+//#endregion
+//#region src/admin/section-heading.tsx
+/**
+* Unnamed UI heading between Theme fields. No document path.
+*/
+const SectionHeading = ({ field }) => {
+	const custom = field.admin?.custom ?? {};
+	if (!custom.title) return null;
+	return /* @__PURE__ */ jsxs("header", {
+		className: "bl-section-heading",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-section-heading",
+				precedence: "default",
+				children: CSS
+			}),
+			/* @__PURE__ */ jsx("h2", { children: custom.title }),
+			custom.hint ? /* @__PURE__ */ jsx("p", { children: custom.hint }) : null
 		]
 	});
 };
 const CSS = `
-.bl-contrast-report{margin:calc(var(--base) * .6) 0}
-.bl-contrast-report__summary{margin:0 0 calc(var(--base) * .3);font-weight:600}
-.bl-contrast-report__stale{margin:0 0 calc(var(--base) * .3);color:var(--theme-elevation-500);font-size:12px}
-.bl-contrast-report__list{margin:0;padding:0;list-style:none;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0)}
-.bl-contrast-report__row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--base) * .4);padding:calc(var(--base) * .35) calc(var(--base) * .6);border-top:1px solid var(--theme-elevation-100)}
-.bl-contrast-report__row:first-child{border-top:0}
-.bl-contrast-report__row[data-failing]{background:var(--theme-error-50)}
-.bl-contrast-report__swatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:1.75rem;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);font-weight:600}
-.bl-contrast-report__ratio{width:4.5rem;font-variant-numeric:tabular-nums}
-.bl-contrast-report__level{display:inline-flex;align-items:center;gap:4px;width:5.5rem}
-.bl-contrast-report__verdict{width:6rem;font-weight:600}
-.bl-contrast-report__label{flex:1;min-width:12rem;color:var(--theme-elevation-500)}
+.bl-section-heading{margin:1.25rem 0 .65rem}
+.bl-section-heading:first-child{margin-top:0}
+.bl-section-heading h2{margin:0;font-size:1.1rem}
+.bl-section-heading p{margin:.35rem 0 0;font-size:13px;color:var(--theme-elevation-500,#64748b);max-width:40rem}
+`;
+//#endregion
+//#region src/theme/changes.ts
+function colorLine(name, before, after) {
+	const a = before && typeof before === "object" ? before : { hex: before };
+	const b = after && typeof after === "object" ? after : { hex: after };
+	const left = a;
+	const right = b;
+	if (left.hex === right.hex && String(left.sourceStep) === String(right.sourceStep)) return null;
+	return `${name}: ${String(left.hex ?? "—")} → ${String(right.hex ?? "—")}`;
+}
+/**
+* Human lines for the Publish confirmation. Only this child's
+* differences; other responsibilities are not listed.
+*/
+function themeChildChanges(child, published, incoming) {
+	if (child === "colors") {
+		const lines = [];
+		for (const key of SYSTEM_COLOR_KEYS) {
+			const line = colorLine(key[0].toUpperCase() + key.slice(1), published.colors?.brand?.[key], incoming.colors?.brand?.[key]);
+			if (line) lines.push(line);
+		}
+		const beforeKeys = (published.colors?.library ?? []).map((row) => row.key).join(", ");
+		const afterKeys = (incoming.colors?.library ?? []).map((row) => row.key).join(", ");
+		if (beforeKeys !== afterKeys) lines.push(`Custom colors: ${beforeKeys || "none"} → ${afterKeys || "none"}`);
+		if ((published.colors?.greyScale ?? "") !== (incoming.colors?.greyScale ?? "")) lines.push(`Gray family: ${published.colors?.greyScale ?? "—"} → ${incoming.colors?.greyScale ?? "—"}`);
+		return lines;
+	}
+	if (child === "typography") {
+		const lines = [];
+		if ((published.typography?.heading ?? "") !== (incoming.typography?.heading ?? "")) lines.push(`Heading: ${published.typography?.heading || "same as body"} → ${incoming.typography?.heading || "same as body"}`);
+		if ((published.typography?.body ?? "") !== (incoming.typography?.body ?? "")) lines.push(`Body: ${published.typography?.body ?? "—"} → ${incoming.typography?.body ?? "—"}`);
+		return lines;
+	}
+	if (child === "appearance") return [
+		"defaultTheme",
+		"radius",
+		"shadow",
+		"motion",
+		"density"
+	].flatMap((key) => {
+		const left = published.appearance?.[key] ?? "";
+		const right = incoming.appearance?.[key] ?? "";
+		return left === right ? [] : [`${key}: ${left || "—"} → ${right || "—"}`];
+	});
+	const lines = [];
+	if (uploadId(published.logo) !== uploadId(incoming.logo)) lines.push("Logo updated");
+	if (uploadId(published.favicon) !== uploadId(incoming.favicon)) lines.push("Favicon updated");
+	if (uploadId(published.logoMark) !== uploadId(incoming.logoMark)) lines.push("Mobile menu logo updated");
+	return lines;
+}
+function uploadId(value) {
+	if (value && typeof value === "object" && value.id != null) return String(value.id);
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	return "";
+}
+//#endregion
+//#region src/theme/publish.ts
+const THEME_CHILDREN = [
+	"colors",
+	"typography",
+	"appearance",
+	"identity"
+];
+function isThemeChild(value) {
+	return typeof value === "string" && THEME_CHILDREN.includes(value);
+}
+//#endregion
+//#region src/admin/publish-confirm.tsx
+const OTHER_CHILDREN = {
+	Colors: "Typography, Appearance, and Identity stay as they are.",
+	Typography: "Colors, Appearance, and Identity stay as they are.",
+	Appearance: "Colors, Typography, and Identity stay as they are.",
+	Identity: "Colors, Typography, and Appearance stay as they are."
+};
+function PublishConfirm({ childLabel, changes, shorts, onKeepEditing, onPublish, busy }) {
+	const remaining = shorts?.filter((item) => !item.meets) ?? [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "bl-publish",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "bl-publish-title",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bl-publish__panel",
+			children: [
+				/* @__PURE__ */ jsxs("h2", {
+					id: "bl-publish-title",
+					children: ["Publish ", childLabel]
+				}),
+				/* @__PURE__ */ jsxs("p", { children: [
+					"These ",
+					childLabel.toLowerCase(),
+					" changes go live now.",
+					" ",
+					OTHER_CHILDREN[childLabel] ?? "The other Theme sections stay as they are."
+				] }),
+				changes.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "bl-publish__empty",
+					children: "No changes to publish."
+				}) : /* @__PURE__ */ jsx("ul", { children: changes.map((change) => /* @__PURE__ */ jsx("li", { children: change }, change)) }),
+				remaining.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "bl-publish__shorts",
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Some colors may be hard to read" }),
+						/* @__PURE__ */ jsx("ul", { children: remaining.map((item) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "bl-publish__swatch",
+							style: {
+								background: hslCss(item.light.fill),
+								color: hslCss(item.light.label)
+							},
+							children: "Aa"
+						}), /* @__PURE__ */ jsxs("span", { children: [
+							readabilityHeadline(item).replace(/^Text on /, ""),
+							" ",
+							hardToReadModes(item),
+							"."
+						] })] }, item.id)) }),
+						/* @__PURE__ */ jsx("p", { children: READABILITY_PUBLISH_NOTE })
+					]
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "bl-publish__actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onKeepEditing,
+						children: "Keep editing"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: busy || changes.length === 0,
+						onClick: onPublish,
+						children: remaining.length > 0 ? "Publish anyway" : "Publish"
+					})]
+				})
+			]
+		})
+	});
+}
+const PUBLISH_CONFIRM_CSS = `
+.bl-publish{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.45)}
+.bl-publish__panel{width:min(36rem,100%);padding:1.25rem 1.35rem;border-radius:16px;background:#fff;color:#0f172a;box-shadow:0 24px 60px rgba(15,23,42,.2)}
+.bl-publish__panel h2{margin:0}
+.bl-publish__panel p{margin:.5rem 0 0;color:#475569}
+.bl-publish__empty{font-style:italic}
+.bl-publish__panel > ul{margin:.75rem 0 0;padding-left:1.1rem}
+.bl-publish__shorts{margin-top:1rem;padding:.85rem .9rem;border-radius:10px;background:#fffbeb}
+.bl-publish__shorts strong{display:block}
+.bl-publish__shorts ul{margin:.65rem 0 0;padding:0;list-style:none}
+.bl-publish__shorts li{display:flex;gap:.65rem;align-items:center;margin-top:.45rem;font-size:13px}
+.bl-publish__swatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:1.6rem;border-radius:6px;font-weight:700;font-size:12px}
+.bl-publish__shorts p{margin:.65rem 0 0;font-size:13px}
+.bl-publish__actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.1rem}
+.bl-publish__actions button{min-height:2.25rem;padding:.4rem .9rem;border-radius:8px;border:1px solid #cbd5e1;background:#fff;font:inherit;cursor:pointer}
+.bl-publish__actions button:last-child{border:0;background:#0f172a;color:#fff;font-weight:600}
+.bl-publish__actions button:disabled{opacity:.45;cursor:not-allowed}
 `;
 //#endregion
-export { ColorField, ContrastReport, FontField };
+//#region src/admin/publish-child.tsx
+const LABELS = {
+	colors: "Colors",
+	typography: "Typography",
+	appearance: "Appearance",
+	identity: "Identity"
+};
+function asColor(value) {
+	if (value && typeof value === "object") return value;
+	if (typeof value === "string") return { hex: value };
+}
+function formDoc(fields) {
+	return {
+		colors: {
+			brand: Object.fromEntries(SYSTEM_COLOR_KEYS.map((key) => [key, {
+				hex: fields[`colors.brand.${key}.hex`]?.value,
+				sourceStep: fields[`colors.brand.${key}.sourceStep`]?.value
+			}])),
+			library: fields["colors.library"]?.value ?? [],
+			greyScale: fields["colors.greyScale"]?.value
+		},
+		typography: {
+			body: fields["typography.body"]?.value,
+			heading: fields["typography.heading"]?.value
+		},
+		appearance: {
+			defaultTheme: fields["appearance.defaultTheme"]?.value,
+			radius: fields["appearance.radius"]?.value,
+			shadow: fields["appearance.shadow"]?.value,
+			motion: fields["appearance.motion"]?.value,
+			density: fields["appearance.density"]?.value
+		},
+		logo: fields.logo?.value,
+		favicon: fields.favicon?.value,
+		logoMark: fields.logoMark?.value
+	};
+}
+function publishedDoc(fields) {
+	return formDoc(Object.fromEntries(Object.entries(fields).map(([path, field]) => [path, { value: field?.initialValue }])));
+}
+function shortsFrom(doc) {
+	const brand = doc.colors?.brand ?? {};
+	const custom = doc.colors?.library ?? [];
+	return [...SYSTEM_COLOR_KEYS.flatMap((key) => {
+		const hex = asColor(brand[key])?.hex;
+		const warning = typeof hex === "string" ? fillLabelWarning(key, SYSTEM_COLOR_COPY[key].label, hex) : null;
+		return warning ? [warning] : [];
+	}), ...custom.flatMap((row, index) => {
+		const warning = row.hex ? fillLabelWarning(`library-${index}`, row.label ?? row.key ?? "Custom", row.hex) : null;
+		return warning ? [warning] : [];
+	})];
+}
+/**
+* Per-child Publish. Sets `publishChild` then submits; `beforeChange`
+* writes only that slice. Confirmation lists this child's changes and,
+* on Colors, remaining automatic-label shorts.
+*/
+const PublishChild = ({ field }) => {
+	const child = (field.admin?.custom)?.child;
+	const label = isThemeChild(child) ? LABELS[child] : "Theme";
+	const { submit } = useForm();
+	const publishChild = useField({ path: "publishChild" });
+	const snapshot = useFormFields(([fields]) => {
+		const record = fields;
+		return {
+			incoming: formDoc(record),
+			published: publishedDoc(record)
+		};
+	});
+	const [open, setOpen] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const changes = useMemo(() => isThemeChild(child) ? themeChildChanges(child, snapshot.published, snapshot.incoming) : [], [child, snapshot]);
+	const shorts = child === "colors" ? shortsFrom(snapshot.incoming) : void 0;
+	async function publish() {
+		if (!isThemeChild(child)) return;
+		setBusy(true);
+		publishChild.setValue(child);
+		try {
+			await submit();
+			setOpen(false);
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-publish-child",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-publish",
+				precedence: "default",
+				children: PUBLISH_CONFIRM_CSS
+			}),
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-publish-child",
+				precedence: "default",
+				children: `${THEME_PREVIEW_TOGGLE_CSS}.bl-publish-child{position:sticky;top:0;z-index:15;display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:.65rem 0;background:var(--theme-bg,#fff)}.bl-publish-child__button{min-height:2.25rem;padding:.4rem 1rem;border:0;border-radius:8px;background:var(--theme-elevation-800,#0f172a);color:#fff;font:inherit;font-weight:600;cursor:pointer}`
+			}),
+			child === "colors" ? /* @__PURE__ */ jsx(ThemePreviewToggle, {}) : null,
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "bl-publish-child__button",
+				onClick: () => setOpen(true),
+				children: ["Publish ", label]
+			}),
+			open ? /* @__PURE__ */ jsx(PublishConfirm, {
+				childLabel: label,
+				changes,
+				shorts,
+				busy,
+				onKeepEditing: () => setOpen(false),
+				onPublish: () => {
+					publish();
+				}
+			}) : null
+		]
+	});
+};
+//#endregion
+//#region src/admin/save-button.tsx
+/**
+* Theme children publish themselves. The stock Save would write every
+* dirty tab at once, so it is hidden.
+*/
+function HiddenSaveButton() {
+	return null;
+}
+//#endregion
+export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, LibraryField, PairingField, PublishChild, SectionHeading };
 
 //# sourceMappingURL=admin.mjs.map