@bison-lab/payload-core 3.9.0 → 3.11.0

package/dist/admin.mjs

@@ -1,9 +1,10 @@
 "use client";
-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 { a as colorDocFromState, i as SYSTEM_COLOR_KEYS, n as pageEditorLooks, r as pageEditorTokens, s as stateFromColorDoc } from "./looks-BbL309kO.mjs";
+import { FieldDescription, FieldError, FieldLabel, useConfig, useField, useForm, useFormFields } from "@payloadcms/ui";
+import { GREY_SCALES, SHADE_STEPS, contrastForeground, contrastRatio, createColorScale, deriveDarkPalette, deriveLightPalette, hexToHSL, hslToString, includedShadeSteps, isThemeHex, presetHints, setColorScaleInclude } from "@bison-lab/tokens";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 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";
@@ -40,7 +41,7 @@ const ColorField = ({ field, path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-color-field",
 				precedence: "default",
-				children: CSS$3
+				children: CSS$4
 			}),
 			/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: hexId,
@@ -99,7 +100,7 @@ const ColorField = ({ field, path, readOnly }) => {
 		]
 	});
 };
-const CSS$3 = `
+const CSS$4 = `
 .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}
@@ -246,12 +247,12 @@ const SYSTEM_COLOR_COPY = {
 	},
 	success: {
 		label: "Success",
-		hint: "Theme chrome for confirmations. Not offered as a page-editor fill.",
+		hint: "Success messages and confirmations",
 		group: "status"
 	},
 	destructive: {
 		label: "Destructive",
-		hint: "Theme chrome for errors and dangerous actions. Not offered as a page-editor fill.",
+		hint: "Errors, dangerous actions, and destructive confirmations",
 		group: "status"
 	}
 };
@@ -312,10 +313,6 @@ function destructiveHueWarning(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})`;
 }
@@ -348,33 +345,138 @@ function readabilityRatioLine(sample, target = 7) {
 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/colors-layout.ts
+/**
+* Theme Colors tab chrome. Payload group-in-group draws a left gutter;
+* the mockup does not. Brand cards sit two-up. Light / Dark lives on the
+* cards only — the field list stays Payload chrome.
+*/
+const THEME_COLORS_LAYOUT_CSS = `
+.group-field--gutter:has(.bl-scale-field),
+.group-field--gutter:has(.bl-section-heading),
+.group-field--gutter:has(.bl-grey),
+.group-field--gutter:has(.bl-library){
+  border-left:none;
+  padding-left:0;
+}
+.render-fields:has(> .bl-scale-field),
+.render-fields:has(> .field-type.bl-scale-field){
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
+  gap:1rem;
+  align-items:start;
+}
+.render-fields:has(> .bl-scale-field) > .bl-section-heading,
+.render-fields:has(> .field-type.bl-scale-field) > .bl-section-heading,
+.render-fields:has(> .bl-scale-field) > :has(.bl-section-heading),
+.render-fields:has(> .field-type.bl-scale-field) > :has(.bl-section-heading),
+.render-fields:has(> .bl-scale-field) > .bl-library,
+.render-fields:has(> .field-type.bl-scale-field) > .field-type.bl-library,
+.render-fields:has(> .bl-scale-field) > :has(.bl-library),
+.render-fields:has(> .field-type.bl-scale-field) > :has(.bl-library),
+.render-fields:has(> .bl-scale-field) > :has(.bl-grey),
+.render-fields:has(> .field-type.bl-scale-field) > :has(.bl-grey){
+  grid-column:1/-1;
+}
+@media (max-width:860px){
+  .render-fields:has(> .bl-scale-field),
+  .render-fields:has(> .field-type.bl-scale-field){
+    grid-template-columns:1fr;
+  }
+}
+`;
+//#endregion
+//#region src/admin/portal.tsx
+/** Theme overlays must leave Payload's transformed/clipped admin tree. */
+function ThemePortal({ children }) {
+	if (typeof document === "undefined") return null;
+	return createPortal(children, document.body);
+}
+//#endregion
 //#region src/admin/preview-mode.tsx
 const ATTR = "data-bl-theme-preview";
 const EVENT = "bl-theme-preview";
+const PREVIEW_VARS = [
+	"--bl-preview-bg",
+	"--bl-preview-card",
+	"--bl-preview-border",
+	"--bl-preview-text",
+	"--bl-preview-muted",
+	"--bl-preview-input"
+];
+/** Brand hexes do not affect grey-driven surfaces; derive still requires them. */
+const PREVIEW_BRAND = {
+	primary: "#111111",
+	secondary: "#111111",
+	success: "#111111"
+};
+let currentMode = "light";
 function readMode() {
-	if (typeof document === "undefined") return "light";
-	return document.documentElement.getAttribute(ATTR) === "dark" ? "dark" : "light";
+	return currentMode;
 }
-function setThemePreviewMode(mode) {
+/** Drop leftovers from the old html-wide preview so Payload chrome stays Payload. */
+function clearDocumentPreview() {
 	if (typeof document === "undefined") return;
-	document.documentElement.setAttribute(ATTR, mode);
-	window.dispatchEvent(new Event(EVENT));
+	document.documentElement.removeAttribute(ATTR);
+	for (const name of PREVIEW_VARS) document.documentElement.style.removeProperty(name);
+}
+function setThemePreviewMode(mode) {
+	currentMode = mode;
+	clearDocumentPreview();
+	if (typeof window !== "undefined") window.dispatchEvent(new Event(EVENT));
 }
 function useThemePreviewMode() {
 	const [mode, setMode] = useState(readMode);
 	useEffect(() => {
+		clearDocumentPreview();
 		const sync = () => setMode(readMode());
+		sync();
 		window.addEventListener(EVENT, sync);
 		return () => window.removeEventListener(EVENT, sync);
 	}, []);
 	return mode;
 }
+function previewVarsFor(grey, mode) {
+	const palette = mode === "dark" ? deriveDarkPalette({
+		...PREVIEW_BRAND,
+		grey
+	}) : deriveLightPalette({
+		...PREVIEW_BRAND,
+		grey
+	});
+	return {
+		"--bl-preview-bg": `hsl(${palette.background})`,
+		"--bl-preview-card": `hsl(${palette.card})`,
+		"--bl-preview-border": `hsl(${palette.border})`,
+		"--bl-preview-text": `hsl(${palette.foreground})`,
+		"--bl-preview-muted": `hsl(${palette["muted-foreground"]})`,
+		"--bl-preview-input": `hsl(${palette.input})`
+	};
+}
+function useGreyScale() {
+	return useFormFields(([fields]) => {
+		const value = fields["colors.greyScale"]?.value;
+		return value === "gray" || value === "zinc" || value === "neutral" || value === "stone" || value === "slate" ? value : "slate";
+	});
+}
+/**
+* Light / Dark + the live grey family, applied on each Theme field canvas.
+* Never writes to `documentElement` — nav, tabs, and Publish stay Payload.
+*/
+function usePreviewCanvas() {
+	const mode = useThemePreviewMode();
+	return {
+		mode,
+		className: "bl-preview-canvas",
+		style: previewVarsFor(useGreyScale(), mode)
+	};
+}
 function ThemePreviewToggle() {
 	const mode = useThemePreviewMode();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bl-preview-toggle",
 		role: "group",
-		"aria-label": "Preview colors in",
+		"aria-label": "Preview theme in",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-on": mode === "light" ? "" : void 0,
@@ -391,7 +493,7 @@ function ThemePreviewToggle() {
 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}
+.bl-preview-toggle button[data-on]{background:var(--theme-text,#0f172a);color:var(--theme-bg,#fff)}
 `;
 //#endregion
 //#region src/admin/readability-list.tsx
@@ -431,7 +533,7 @@ function ReadabilityDetail({ item, target = 7 }) {
 }
 function ReadabilityList({ warnings, target = 7 }) {
 	const failing = warnings.filter((item) => !item.meets).length;
-	return /* @__PURE__ */ jsxs("aside", {
+	return /* @__PURE__ */ jsxs("section", {
 		className: "bl-readability",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "bl-readability__head",
@@ -472,31 +574,74 @@ const READABILITY_LIST_CSS = `
 `;
 //#endregion
 //#region src/admin/color-scale-card.tsx
+const STATUS_COPY = {
+	success: {
+		title: "Keep success colors recognizable",
+		body: "Success states should stay in a green or teal family so users can quickly recognize positive outcomes and confirmations.",
+		drift: "This color may no longer read as a success state."
+	},
+	destructive: {
+		title: "Keep destructive colors recognizable",
+		body: "Destructive actions should stay in a red or crimson family so users can quickly recognize errors and dangerous actions.",
+		drift: "This color may no longer read as a destructive or error state."
+	}
+};
+function IncludeMark({ on }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "bl-scale-card__status",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			children: on ? /* @__PURE__ */ jsx("path", {
+				d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2.4",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}) : /* @__PURE__ */ jsx("path", {
+				d: "M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2.4",
+				strokeLinecap: "round"
+			})
+		})
+	});
+}
 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 canvas = usePreviewCanvas();
+	const [attentionOpen, setAttentionOpen] = useState(false);
+	const [shakeStep, setShakeStep] = useState(null);
+	const [hexDraft, setHexDraft] = useState(state.hex);
 	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 }));
+	const hueDrift = role === "success" ? Boolean(successHueWarning(state.hex)) : role === "destructive" ? Boolean(destructiveHueWarning(state.hex)) : false;
+	useEffect(() => {
+		setHexDraft(state.hex);
+	}, [state.hex]);
+	function commitHex(hex) {
+		onChange(createColorScale(hex, state.sourceStep, state.include));
 	}
-	function setStep(step) {
-		onChange(updateColorScale(state, { sourceStep: step }));
+	function commitStep(step) {
+		onChange(createColorScale(state.hex, step, state.include));
 	}
 	function toggleStep(step) {
-		if (step === state.sourceStep) return;
+		if (step === state.sourceStep) {
+			setShakeStep(step);
+			window.setTimeout(() => setShakeStep((was) => was === step ? null : was), 180);
+			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,
+		className: `bl-scale-card ${canvas.className}`,
+		"data-preview": canvas.mode,
+		style: canvas.style,
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "bl-scale-card__head",
@@ -515,26 +660,11 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 							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", {
+						warning && !warning.meets ? /* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: "bl-scale-card__badge bl-scale-card__badge--attention",
 							"aria-haspopup": "dialog",
-							onClick: () => setOpen(true),
+							onClick: () => setAttentionOpen(true),
 							children: "Needs attention"
 						}) : null
 					]
@@ -551,7 +681,7 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "bl-scale-card__row",
-				children: [/* @__PURE__ */ jsxs("label", {
+				children: [/* @__PURE__ */ jsxs("div", {
 					className: "bl-scale-card__field",
 					children: [/* @__PURE__ */ jsx("span", { children: "Brand hex" }), /* @__PURE__ */ jsxs("span", {
 						className: "bl-scale-card__hex-wrap",
@@ -559,17 +689,32 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 							type: "color",
 							"aria-label": `${name} picker`,
 							disabled: readOnly,
-							value: state.hex,
-							onChange: (event) => setHex(event.target.value)
+							value: isThemeHex(state.hex) ? state.hex : "#000000",
+							onPointerDown: (event) => {
+								const input = event.currentTarget;
+								if (typeof input.showPicker !== "function") return;
+								event.preventDefault();
+								try {
+									input.showPicker();
+								} catch {
+									input.click();
+								}
+							},
+							onChange: (event) => commitHex(event.target.value)
 						}), /* @__PURE__ */ jsx("input", {
 							type: "text",
 							spellCheck: false,
 							autoComplete: "off",
 							disabled: readOnly,
-							value: state.hex,
+							"aria-label": `${name} hex`,
+							value: hexDraft,
 							onChange: (event) => {
 								const next = event.target.value.trim();
-								if (next) setHex(next);
+								setHexDraft(next);
+								if (isThemeHex(next)) commitHex(next);
+							},
+							onBlur: () => {
+								if (!isThemeHex(hexDraft)) setHexDraft(state.hex);
 							}
 						})]
 					})]
@@ -578,7 +723,7 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 					children: [/* @__PURE__ */ jsx("span", { children: "This color is" }), /* @__PURE__ */ jsx("select", {
 						disabled: readOnly,
 						value: String(state.sourceStep),
-						onChange: (event) => setStep(Number(event.target.value)),
+						onChange: (event) => commitStep(Number(event.target.value)),
 						children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx("option", {
 							value: step,
 							children: step
@@ -586,49 +731,29 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 					})]
 				})]
 			}),
-			/* @__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."
+			role ? /* @__PURE__ */ jsxs("div", {
+				className: "bl-scale-card__family",
+				"data-role": role,
+				"data-drift": hueDrift ? "" : void 0,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bl-scale-card__family-mark",
+					"aria-hidden": "true",
+					children: "!"
+				}), /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "bl-scale-card__family-title",
+						children: STATUS_COPY[role].title
+					}),
+					/* @__PURE__ */ jsx("p", { children: STATUS_COPY[role].body }),
+					hueDrift ? /* @__PURE__ */ jsx("p", {
+						className: "bl-scale-card__family-drift",
+						children: STATUS_COPY[role].drift
+					}) : null
+				] })]
 			}) : 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"
-					})
-				] })]
+				children: [/* @__PURE__ */ jsx("span", { children: "Generated scale" }), /* @__PURE__ */ jsxs("span", { children: [SHADE_STEPS.length, " shades"] })]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "bl-scale-card__steps",
@@ -642,12 +767,22 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 						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]) }
+						"data-shake": shakeStep === step ? "" : void 0,
+						disabled: readOnly,
+						"aria-pressed": on,
+						"aria-label": source ? `Source step ${step} cannot be excluded` : on ? `Shade ${step}, available — click to exclude from the palette` : `Shade ${step}, excluded — click to include in the palette`,
+						title: source ? `Source step ${step} cannot be excluded` : on ? "Available to page editors — click to exclude" : "Excluded from page editors — click to include",
+						onClick: (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							toggleStep(step);
+						},
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "bl-scale-card__chip-wrap",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "bl-scale-card__chip",
+								style: { backgroundColor: hslCss(state.scale[step]) }
+							}), /* @__PURE__ */ jsx(IncludeMark, { on })]
 						}), /* @__PURE__ */ jsx("span", {
 							className: "bl-scale-card__step-label",
 							children: step
@@ -655,13 +790,32 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 					}, step);
 				})
 			}),
-			open && warning ? /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-scale-card__editors",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: "Available to page editors" }), /* @__PURE__ */ jsxs("p", { children: [
+					included.size,
+					" of ",
+					SHADE_STEPS.length,
+					" shades available · Choose which shades editors can select when building pages."
+				] })] }), /* @__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"
+				})] })]
+			}),
+			attentionOpen && warning ? /* @__PURE__ */ jsx(ThemePortal, { children: /* @__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);
+					if (event.target === event.currentTarget) setAttentionOpen(false);
 				},
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "bl-scale-card__panel",
@@ -673,7 +827,7 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 								children: readabilityHeadline(warning)
 							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
-								onClick: () => setOpen(false),
+								onClick: () => setAttentionOpen(false),
 								"aria-label": "Close",
 								children: "×"
 							})]
@@ -682,67 +836,90 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: "bl-scale-card__panel-done",
-							onClick: () => setOpen(false),
+							onClick: () => setAttentionOpen(false),
 							children: "Keep editing this color"
 						})
 					]
 				})
-			}) : null
+			}) }) : 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{padding:calc(var(--base,16px) * .8);border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:var(--style-radius-m,12px);background:var(--bl-preview-card,var(--theme-elevation-0,#fff));color:var(--bl-preview-text,inherit)}
 .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{font:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;border:0;background:#e2e8f0;color:#0f172a}
 .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__hint{margin:.35rem 0 0;color:var(--bl-preview-muted,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__field{display:flex;flex-direction:column;gap:.35rem;font-size:12px;font-weight:600;color:var(--bl-preview-muted,var(--theme-elevation-600,#475569))}
+.bl-scale-card__hex-wrap{display:flex;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:8px;background:var(--bl-preview-card,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(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:8px 0 0 8px;background:transparent;cursor:pointer;color-scheme:light;appearance:none;-webkit-appearance:none}
+.bl-scale-card__hex-wrap input[type=color]::-webkit-color-swatch-wrapper{padding:0}
+.bl-scale-card__hex-wrap input[type=color]::-webkit-color-swatch{border:0;border-radius:0;width:100%;height:100%}
+.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;border-radius:0 8px 8px 0}
+.bl-scale-card__field select{min-height:2.25rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:8px;padding:.35rem .5rem;background:var(--bl-preview-card,var(--theme-input-bg,#fff));color:inherit}
+.bl-scale-card__family{display:flex;gap:.75rem;align-items:flex-start;margin-top:1rem;padding:.75rem .85rem;border-radius:8px}
+.bl-scale-card__family[data-role=success]{border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46}
+.bl-scale-card__family[data-role=destructive]{border:1px solid #fecdd3;background:#fff1f2;color:#9f1239}
+.bl-scale-card__family[data-drift]{box-shadow:0 0 0 2px #fbbf24}
+.bl-scale-card__family-mark{flex:none;width:1.25rem;height:1.25rem;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700}
+.bl-scale-card__family[data-role=success] .bl-scale-card__family-mark{background:#d1fae5;color:#047857}
+.bl-scale-card__family[data-role=destructive] .bl-scale-card__family-mark{background:#ffe4e6;color:#be123c}
+.bl-scale-card__family-title{font-size:12px;font-weight:600}
+.bl-scale-card__family p{margin:.25rem 0 0;font-size:11px;line-height:1.45;opacity:.85}
+.bl-scale-card__family-drift{font-weight:600;opacity:1}
+.bl-scale-card__scale-head{display:flex;justify-content:space-between;margin:1rem 0 .4rem;font-size:12px;color:var(--bl-preview-muted,var(--theme-elevation-500,#64748b))}
 .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__chip-wrap{position:relative;display:block;width:100%}
+.bl-scale-card__chip{display:block;width:100%;height:2.15rem;border-radius:6px;overflow:hidden}
+.bl-scale-card__status{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;display:grid;place-items:center;pointer-events:none;background:rgba(255,255,255,.94);color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,.18)}
+.bl-scale-card__status svg{display:block;width:10px;height:10px}
 .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[data-excluded] .bl-scale-card__chip{opacity:.28;background-image:linear-gradient(45deg,transparent 44%,rgba(15,23,42,.8) 45%,rgba(15,23,42,.8) 55%,transparent 56%)}
+.bl-scale-card__step[data-excluded] .bl-scale-card__status{color:#991b1b;background:rgba(255,255,255,.96)}
+.bl-scale-card__step[data-excluded] .bl-scale-card__step-label{opacity:.35}
+@keyframes bl-scale-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
+.bl-scale-card__step[data-shake]{animation:bl-scale-shake .18s}
 .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__editors{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;align-items:flex-end;margin-top:.75rem;padding:.65rem .75rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:8px;background:var(--bl-preview-bg,var(--theme-elevation-50,#f8fafc))}
+.bl-scale-card__editors > div > div{font-size:12px;font-weight:600;color:var(--bl-preview-text,var(--theme-elevation-700,#334155))}
+.bl-scale-card__editors p{margin:.2rem 0 0;font-size:11px;color:var(--bl-preview-muted,var(--theme-elevation-500,#64748b))}
+.bl-scale-card__editors button{border:0;background:none;padding:0;margin-left:.75rem;font:inherit;font-size:12px;font-weight:600;color:var(--theme-success-500,#1587ba);text-decoration:underline;cursor:pointer}
+.bl-scale-card__editors span{display:flex;gap:0}
+.bl-scale-card__modal{position:fixed;inset:0;z-index:10000;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;color-scheme:light}
 .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;
+.bl-scale-card[data-preview=dark] .bl-scale-card__step[data-source] .bl-scale-card__chip{box-shadow:0 0 0 2px var(--bl-preview-text,#fafafa)}
+` + READABILITY_LIST_CSS + THEME_COLORS_LAYOUT_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.
+* Payload's hasMany select often stores a count on the field path and the
+* chosen values at `path.0`, `path.1`, … — same shape as an array field.
+*/
+function includedStepsFromForm(path, value, getDataByPath) {
+	if (Array.isArray(value)) return value;
+	const stored = getDataByPath?.(path);
+	if (Array.isArray(stored)) return stored;
+	const count = typeof value === "number" ? value : typeof stored === "number" ? stored : 0;
+	if (count <= 0) return void 0;
+	const steps = Array.from({ length: count }, (_, index) => getDataByPath?.(`${path}.${index}`));
+	if (steps.every((step) => step == null)) return void 0;
+	return steps.filter((step) => step != null).map(String);
+}
+/**
+* One system (or library row) color: hex, source step, include/exclude.
+* Writes the group's stored fields. A committed hex or step rebuilds the scale.
 */
 const ColorScaleField = ({ field, path, readOnly }) => {
 	const hex = useField({ path: `${path}.hex` });
@@ -751,15 +928,17 @@ const ColorScaleField = ({ field, path, readOnly }) => {
 	const stale = useField({ path: `${path}.stale` });
 	const include = useField({ path: `${path}.include` });
 	const includedSteps = useField({ path: `${path}.includedSteps` });
+	const { getDataByPath } = useForm();
 	const key = path.split(".").pop() ?? "";
 	const copy = SYSTEM_ROLES.has(key) ? SYSTEM_COLOR_COPY[key] : void 0;
+	const stepList = includedStepsFromForm(`${path}.includedSteps`, includedSteps.value, getDataByPath);
 	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
+		includedSteps: stepList
 	});
 	function write(next) {
 		const doc = colorDocFromState(next);
@@ -768,7 +947,7 @@ const ColorScaleField = ({ field, path, readOnly }) => {
 		scale.setValue(doc.scale);
 		stale.setValue(doc.stale);
 		include.setValue(doc.include);
-		includedSteps.setValue(doc.includedSteps ?? (doc.include === "source" ? [doc.sourceStep] : [...SHADE_STEPS]));
+		includedSteps.setValue((doc.includedSteps ?? (doc.include === "source" ? [doc.sourceStep] : [...SHADE_STEPS])).map(String));
 	}
 	const label = copy?.label ?? (typeof field.label === "string" ? field.label : key);
 	return /* @__PURE__ */ jsxs("div", {
@@ -793,17 +972,17 @@ const ColorScaleField = ({ field, path, readOnly }) => {
 	});
 };
 //#endregion
-//#region src/theme/types.ts
-const SYSTEM_COLOR_KEYS = [
-	"primary",
-	"secondary",
-	"accent",
-	"highlight",
-	"success",
-	"destructive"
-];
+//#region src/theme/library.ts
+/**
+* Payload's array form state stores the row count (`0`, `2`, …), not the
+* rows. A custom Field that treats that number as the list will throw
+* `rows.filter is not a function` on an empty Theme library.
+*/
+function asLibraryRows(value) {
+	return Array.isArray(value) ? value : [];
+}
 function themeColorKeys(doc) {
-	const custom = (doc?.colors?.library ?? []).map((row) => row.key?.trim()).filter((key) => Boolean(key));
+	const custom = asLibraryRows(doc?.colors?.library).map((row) => row.key?.trim()).filter((key) => Boolean(key));
 	return [...SYSTEM_COLOR_KEYS, ...custom];
 }
 /**
@@ -813,7 +992,7 @@ function themeColorKeys(doc) {
 * has `key`.
 */
 function deleteLibraryColor(doc, key, replacement) {
-	const library = [...doc.colors?.library ?? []];
+	const library = [...asLibraryRows(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);
@@ -836,43 +1015,42 @@ 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).
+* Custom colors: the same scale controls as system colors. A row that is
+* not referenced on a page deletes immediately. Rewriting in-use tokens
+* (`rewriteColorToken`) waits on a site usage lookup — Theme cannot see
+* page assignments by itself.
 */
-const LibraryField = ({ path, readOnly }) => {
-	const { value, setValue } = useField({ path });
-	const rows = value ?? [];
+const LibraryField = ({ field, path, readOnly }) => {
+	const dataPath = typeof field.admin?.custom?.dataPath === "string" ? field.admin.custom.dataPath : path;
+	const { value, setValue } = useField({
+		path: dataPath,
+		hasRows: true
+	});
+	const { getDataByPath } = useForm();
+	const rows = asLibraryRows(value).length > 0 ? asLibraryRows(value) : asLibraryRows(getDataByPath?.(dataPath));
 	const [adding, setAdding] = useState(false);
 	const [name, setName] = useState("");
-	const [hex, setHex] = useState("#E07A5F");
-	const [pendingDelete, setPendingDelete] = useState(null);
-	const [replacement, setReplacement] = useState("");
+	const [hex, setHex] = useState("");
+	const [sourceStep, setSourceStep] = useState(500);
 	function write(next) {
 		setValue(next);
 	}
 	function add() {
 		const key = slugify(name);
-		if (!key || rows.some((row) => row.key === key)) return;
+		if (!key || !isThemeHex(hex) || rows.some((row) => row.key === key)) return;
 		write([...rows, {
 			key,
 			label: name.trim(),
-			...colorDocFromState(createColorScale(hex, 500))
+			...colorDocFromState(createColorScale(hex, sourceStep))
 		}]);
 		setName("");
+		setHex("");
+		setSourceStep(500);
 		setAdding(false);
 	}
-	function remove(row, replaceWith) {
-		write(deleteLibraryColor({ colors: { library: rows } }, row.key ?? "", replaceWith).colors?.library ?? []);
-		setPendingDelete(null);
-		setReplacement("");
+	function remove(row) {
+		write(deleteLibraryColor({ colors: { library: rows } }, row.key ?? "").colors?.library ?? []);
 	}
-	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: [
@@ -884,41 +1062,80 @@ const LibraryField = ({ path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-library",
 				precedence: "default",
-				children: CSS$2
+				children: CSS$3
 			}),
 			/* @__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", {
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", { children: "Additional colors" }), /* @__PURE__ */ jsx("p", { children: "Add optional named colors for special sections, campaigns, or components." })] }), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					disabled: readOnly,
-					onClick: () => setAdding(true),
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						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,
+			adding ? /* @__PURE__ */ jsx(ThemePortal, { children: /* @__PURE__ */ jsx("div", {
+				className: "bl-library__modal",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "bl-library-add-title",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setAdding(false);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-library__panel",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-library__panel-head",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+								id: "bl-library-add-title",
+								children: "New color"
+							}), /* @__PURE__ */ jsx("p", { children: "Give it a useful name, enter your brand hex, then say which scale step that hex is." })] }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setAdding(false),
+								"aria-label": "Close",
+								children: "×"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", { children: ["Name", /* @__PURE__ */ jsx("input", {
+							value: name,
+							placeholder: "e.g. Coral",
+							onChange: (event) => setName(event.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("label", { children: ["Brand hex", /* @__PURE__ */ jsx("input", {
+							value: hex,
+							placeholder: "#DB0082",
+							spellCheck: false,
+							autoComplete: "off",
+							onChange: (event) => setHex(event.target.value.trim())
+						})] }),
+						/* @__PURE__ */ jsxs("label", { children: ["This color is", /* @__PURE__ */ jsx("select", {
+							value: String(sourceStep),
+							onChange: (event) => setSourceStep(Number(event.target.value)),
+							children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx("option", {
+								value: step,
+								children: step
+							}, step))
+						})] }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-library__actions",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setAdding(false),
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								disabled: !slugify(name) || !isThemeHex(hex),
+								onClick: add,
+								children: "Create color scale"
+							})]
+						})
+					]
+				})
+			}) }) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "bl-library__list",
 				children: rows.map((row, index) => /* @__PURE__ */ jsx(ColorScaleCard, {
@@ -935,84 +1152,30 @@ const LibraryField = ({ path, readOnly }) => {
 						};
 						write(copy);
 					},
-					onDelete: readOnly ? void 0 : () => setPendingDelete(row),
+					onDelete: readOnly ? void 0 : () => remove(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 = `
+const CSS$3 = `
 .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__head p{margin:.35rem 0 0;font-size:13px;color:color-mix(in srgb,var(--theme-text,#f8fafc) 92%,transparent)}
+.bl-library__head 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);color:var(--theme-text,#0f172a);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__modal{position:fixed;inset:0;z-index:10000;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;color-scheme:light;box-shadow:0 24px 48px rgba(15,23,42,.22)}
+.bl-library__panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
+.bl-library__panel-head button{border:0;background:none;font:inherit;font-size:1.25rem;line-height:1;color:#94a3b8;cursor:pointer}
 .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__panel input,.bl-library__panel select{min-height:2.25rem;border:1px solid #cbd5e1;border-radius:8px;padding:.35rem .5rem;background:#fff;color:#0f172a}
 .bl-library__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem}
+.bl-library__actions button:last-child{border:0;background:#0f172a;color:#fff;font-weight:600}
+.bl-library__actions button:last-child:disabled{opacity:.4;cursor:not-allowed}
 `;
 //#endregion
 //#region src/admin/typography-pairing.tsx
@@ -1082,23 +1245,23 @@ function TypographyPairing({ headingFamily, bodyFamily }) {
 	});
 }
 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{padding:1.1rem 1.15rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-card,var(--theme-elevation-0,#fff));color:var(--bl-preview-text,inherit)}
 .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__head p{margin:.3rem 0 0;font-size:12px;color:var(--bl-preview-muted,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:#e2e8f0;color:#0f172a}
+.bl-font-role__preview{margin-top:1rem;padding:.85rem .9rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-bg,var(--theme-elevation-50,#f8fafc))}
+.bl-font-role__preview > span{display:block;margin-bottom:.4rem;font-size:11px;color:var(--bl-preview-muted,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-font-role__body{margin:0;font-size:1rem;line-height:1.6;color:var(--bl-preview-muted,var(--theme-elevation-600,#475569))}
+.bl-pairing{padding:0;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-card,var(--theme-elevation-0,#fff));color:var(--bl-preview-text,inherit);overflow:hidden}
+.bl-pairing > header{padding:1rem 1.15rem;border-bottom:1px solid var(--bl-preview-border,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 > header p{margin:.3rem 0 0;font-size:12px;color:var(--bl-preview-muted,var(--theme-elevation-500,#64748b))}
+.bl-pairing__page{padding:1.35rem 1.4rem 1.5rem;background:var(--bl-preview-bg,transparent)}
 .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__copy{margin:.75rem 0 0;max-width:36rem;font-size:1rem;line-height:1.6;color:var(--bl-preview-muted,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}
@@ -1206,8 +1369,11 @@ const FontField = ({ field, path, readOnly }) => {
 	}
 	const activeId = active >= 0 && open ? `${id}-option-${active}` : void 0;
 	const faceIds = faces ? ids : isFontId(value) ? [value] : [];
+	const canvas = usePreviewCanvas();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "field-type bl-font-field",
+		className: `field-type bl-font-field ${canvas.className}`,
+		"data-preview": canvas.mode,
+		style: canvas.style,
 		children: [
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-pairing",
@@ -1217,7 +1383,7 @@ const FontField = ({ field, path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-font-field",
 				precedence: "default",
-				children: CSS$1
+				children: CSS$2
 			}),
 			faceIds.length > 0 ? /* @__PURE__ */ jsx("style", {
 				"data-bl-font-faces": "",
@@ -1343,7 +1509,7 @@ const FontField = ({ field, path, readOnly }) => {
 		]
 	});
 };
-const CSS$1 = `
+const CSS$2 = `
 .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}
@@ -1351,7 +1517,7 @@ const CSS$1 = `
 .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__modal{position:fixed;inset:0;z-index:10000;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}
@@ -1387,8 +1553,11 @@ const PairingField = ({ field }) => {
 	const bodyFont = findFont(body);
 	const headingFont = findFont(headingId);
 	const ids = [body, headingId].filter(Boolean);
+	const canvas = usePreviewCanvas();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "field-type bl-pairing-field",
+		className: `field-type bl-pairing-field ${canvas.className}`,
+		"data-preview": canvas.mode,
+		style: canvas.style,
 		children: [
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-pairing",
@@ -1490,18 +1659,18 @@ function AppearanceChoices({ values, onChange, readOnly }) {
 	});
 }
 const APPEARANCE_CHOICES_CSS = `
-.bl-appearance{display:flex;flex-direction:column;gap:1.25rem}
+.bl-appearance{display:flex;flex-direction:column;gap:1.25rem;color:var(--bl-preview-text,inherit)}
 .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__intro p{margin:.35rem 0 0;font-size:13px;color:var(--bl-preview-muted,var(--theme-elevation-500,#64748b));max-width:40rem}
+.bl-appearance__family{margin:0;padding:1rem 1.1rem 1.15rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-card,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__family legend span{display:block;margin-top:.25rem;font-size:12px;color:var(--bl-preview-muted,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{display:flex;flex-direction:column;gap:.65rem;padding:.75rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-bg,var(--theme-elevation-0,#fff));cursor:pointer}
+.bl-appearance__choice[data-selected]{box-shadow:inset 0 0 0 2px var(--bl-preview-text,#0f172a);border-color:var(--bl-preview-text,#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}
@@ -1574,11 +1743,14 @@ const AppearanceField = ({ path, readOnly }) => {
 		motion,
 		density
 	};
+	const canvas = usePreviewCanvas();
 	function onChange(name, value) {
 		fields[name].setValue(value);
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "field-type bl-appearance-field",
+		className: `field-type bl-appearance-field ${canvas.className}`,
+		"data-preview": canvas.mode,
+		style: canvas.style,
 		children: [/* @__PURE__ */ jsx("style", {
 			href: "bl-appearance",
 			precedence: "default",
@@ -1607,53 +1779,63 @@ const SWATCHES = [
 	"950"
 ];
 function GreyScaleChoices({ value, onChange, readOnly }) {
+	const canvas = usePreviewCanvas();
 	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);
+		className: `bl-grey ${canvas.className}`,
+		"data-preview": canvas.mode,
+		style: canvas.style,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-grey__section",
+				children: [/* @__PURE__ */ jsx("h2", { children: "Neutrals" }), /* @__PURE__ */ jsx("p", { children: "Choose the gray family used for backgrounds, borders, cards, inputs, and muted text." })]
+			}),
+			/* @__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. Readability for these system neutrals is handled automatically." })] }), /* @__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);
+				})
 			})
-		})]
+		]
 	});
 }
 /**
 * 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 });
+const GreyScaleField = ({ field, path, readOnly }) => {
+	const { value, setValue } = useField({ path: typeof field.admin?.custom?.dataPath === "string" ? field.admin.custom.dataPath : path });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "field-type bl-grey-field",
 		children: [/* @__PURE__ */ jsx("style", {
@@ -1669,23 +1851,22 @@ const GreyScaleField = ({ path, 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__section{margin:1.25rem 0 .85rem}
+.bl-grey__section h2{margin:0;font-size:1.1rem}
+.bl-grey__section p{margin:.35rem 0 0;max-width:40rem;font-size:13px;color:color-mix(in srgb,var(--theme-text,#f8fafc) 92%,transparent)}
+.bl-grey__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:0;padding:1.1rem 1.15rem .85rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-bottom:0;border-radius:12px 12px 0 0;background:var(--bl-preview-card,var(--theme-elevation-0,#fff));color:var(--bl-preview-text,inherit)}
 .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__head p{margin:.35rem 0 0;max-width:40rem;font-size:13px;color:var(--bl-preview-muted,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:#e2e8f0;color:#0f172a}
+.bl-grey__choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;padding:0 1.15rem 1.15rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-top:0;border-radius:0 0 12px 12px;background:var(--bl-preview-card,var(--theme-elevation-0,#fff));color:var(--bl-preview-text,inherit)}
+.bl-grey__choice{display:flex;flex-direction:column;gap:.45rem;padding:.75rem;border:1px solid var(--bl-preview-border,var(--theme-elevation-150,#e2e8f0));border-radius:12px;background:var(--bl-preview-bg,var(--theme-elevation-0,#fff));color:inherit;cursor:pointer}
+.bl-grey__choice[data-selected]{box-shadow:inset 0 0 0 2px var(--bl-preview-text,#0f172a);border-color:var(--bl-preview-text,#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}
+.bl-grey__choice > span{font-size:12px;color:var(--bl-preview-muted,var(--theme-elevation-500,#64748b))}
 @media (max-width:720px){.bl-grey__choices{grid-template-columns:1fr}}
 `;
 //#endregion
@@ -1730,6 +1911,11 @@ const ContrastReport = ({ field }) => {
 				precedence: "default",
 				children: READABILITY_LIST_CSS
 			}),
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-theme-colors-layout",
+				precedence: "default",
+				children: THEME_COLORS_LAYOUT_CSS
+			}),
 			stale ? /* @__PURE__ */ jsx("p", {
 				className: "bl-contrast-report__stale",
 				children: "Showing the last complete audit while a colour is being typed."
@@ -1755,21 +1941,30 @@ const SectionHeading = ({ field }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-section-heading",
 				precedence: "default",
-				children: CSS
+				children: CSS$1
+			}),
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-theme-colors-layout",
+				precedence: "default",
+				children: THEME_COLORS_LAYOUT_CSS
 			}),
 			/* @__PURE__ */ jsx("h2", { children: custom.title }),
 			custom.hint ? /* @__PURE__ */ jsx("p", { children: custom.hint }) : null
 		]
 	});
 };
-const CSS = `
+const CSS$1 = `
 .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}
+.bl-section-heading p{margin:.35rem 0 0;font-size:13px;color:color-mix(in srgb,var(--theme-text,#f8fafc) 92%,transparent);max-width:40rem}
 `;
 //#endregion
 //#region src/theme/changes.ts
+/** Payload may hand an empty array field as `{}`. `.map` on that crashes the Theme form. */
+function libraryRows(value) {
+	return Array.isArray(value) ? value : [];
+}
 function colorLine(name, before, after) {
 	const a = before && typeof before === "object" ? before : { hex: before };
 	const b = after && typeof after === "object" ? after : { hex: after };
@@ -1789,8 +1984,8 @@ function themeChildChanges(child, published, incoming) {
 			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(", ");
+		const beforeKeys = libraryRows(published.colors?.library).map((row) => row.key).join(", ");
+		const afterKeys = libraryRows(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;
@@ -1844,7 +2039,7 @@ const OTHER_CHILDREN = {
 };
 function PublishConfirm({ childLabel, changes, shorts, onKeepEditing, onPublish, busy }) {
 	const remaining = shorts?.filter((item) => !item.meets) ?? [];
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ThemePortal, { children: /* @__PURE__ */ jsx("div", {
 		className: "bl-publish",
 		role: "dialog",
 		"aria-modal": "true",
@@ -1892,10 +2087,12 @@ function PublishConfirm({ childLabel, changes, shorts, onKeepEditing, onPublish,
 					className: "bl-publish__actions",
 					children: [/* @__PURE__ */ jsx("button", {
 						type: "button",
+						className: "bl-publish__cancel",
 						onClick: onKeepEditing,
-						children: "Keep editing"
+						children: "Cancel"
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
+						className: "bl-publish__go",
 						disabled: busy || changes.length === 0,
 						onClick: onPublish,
 						children: remaining.length > 0 ? "Publish anyway" : "Publish"
@@ -1903,24 +2100,25 @@ function PublishConfirm({ childLabel, changes, shorts, onKeepEditing, onPublish,
 				})
 			]
 		})
-	});
+	}) });
 }
 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{position:fixed;inset:0;z-index:10000;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;color-scheme:light;box-shadow:0 24px 60px rgba(15,23,42,.2)}
+.bl-publish__panel h2{margin:0;color:#0f172a}
 .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__empty{font-style:italic;color:#64748b}
+.bl-publish__panel > ul{margin:.75rem 0 0;padding-left:1.1rem;color:#0f172a}
+.bl-publish__shorts{margin-top:1rem;padding:.85rem .9rem;border-radius:10px;background:#fffbeb;color:#0f172a}
 .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__shorts li{display:flex;gap:.65rem;align-items:center;margin-top:.45rem;font-size:13px;color:#0f172a}
 .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__shorts p{margin:.65rem 0 0;font-size:13px;color:#475569}
 .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{min-height:2.25rem;padding:.4rem .9rem;border-radius:8px;font:inherit;cursor:pointer}
+.bl-publish__cancel{border:1px solid #cbd5e1;background:#fff;color:#0f172a}
+.bl-publish__go{border:0;background:#0f172a;color:#fff;font-weight:600}
 .bl-publish__actions button:disabled{opacity:.45;cursor:not-allowed}
 `;
 //#endregion
@@ -1942,7 +2140,7 @@ function formDoc(fields) {
 				hex: fields[`colors.brand.${key}.hex`]?.value,
 				sourceStep: fields[`colors.brand.${key}.sourceStep`]?.value
 			}])),
-			library: fields["colors.library"]?.value ?? [],
+			library: Array.isArray(fields["colors.library"]?.value) ? fields["colors.library"]?.value : [],
 			greyScale: fields["colors.greyScale"]?.value
 		},
 		typography: {
@@ -1977,13 +2175,13 @@ function shortsFrom(doc) {
 	})];
 }
 /**
-* 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.
+* Per-child Publish. Lives in the document Save slot so Payload's
+* `--doc-controls-height` row is the action row, not an empty gap.
+* Sets `publishChild` then submits; `beforeChange` writes only that slice.
+* On Colors, remaining automatic-label shorts open in this modal only.
 */
-const PublishChild = ({ field }) => {
-	const child = (field.admin?.custom)?.child;
-	const label = isThemeChild(child) ? LABELS[child] : "Theme";
+function ThemePublishActions({ child }) {
+	const label = LABELS[child];
 	const { submit } = useForm();
 	const publishChild = useField({ path: "publishChild" });
 	const snapshot = useFormFields(([fields]) => {
@@ -1995,10 +2193,9 @@ const PublishChild = ({ field }) => {
 	});
 	const [open, setOpen] = useState(false);
 	const [busy, setBusy] = useState(false);
-	const changes = useMemo(() => isThemeChild(child) ? themeChildChanges(child, snapshot.published, snapshot.incoming) : [], [child, snapshot]);
+	const changes = useMemo(() => 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 {
@@ -2009,7 +2206,7 @@ const PublishChild = ({ field }) => {
 		}
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "field-type bl-publish-child",
+		className: "bl-publish-child",
 		children: [
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-publish",
@@ -2019,9 +2216,9 @@ const PublishChild = ({ field }) => {
 			/* @__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}`
+				children: `${THEME_PREVIEW_TOGGLE_CSS}.bl-publish-child{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.bl-publish-child__button{min-height:2.25rem;padding:.4rem 1rem;border:0;border-radius:8px;background:var(--theme-text,#0f172a);color:var(--theme-bg,#fff);font:inherit;font-weight:600;cursor:pointer}`
 			}),
-			child === "colors" ? /* @__PURE__ */ jsx(ThemePreviewToggle, {}) : null,
+			child !== "identity" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ThemePreviewToggle, {}) }) : null,
 			/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "bl-publish-child__button",
@@ -2040,17 +2237,175 @@ const PublishChild = ({ field }) => {
 			}) : null
 		]
 	});
+}
+/** @deprecated Alias — Theme pages use ThemePublishActions; tabbed Save used this name. */
+const ThemePublishControls = ThemePublishActions;
+const PublishChild = ({ field }) => {
+	const child = (field.admin?.custom)?.child;
+	if (!isThemeChild(child)) return null;
+	return /* @__PURE__ */ jsx(ThemePublishActions, { child });
+};
+//#endregion
+//#region src/admin/theme-tab.ts
+const THEME_TAB_LABELS = {
+	colors: "Colors",
+	typography: "Typography",
+	appearance: "Appearance",
+	identity: "Identity"
 };
+/**
+* The selected Payload field tab on Theme. Defaults to Colors when the
+* tabs have not painted yet (SSR, first paint).
+*/
+function readActiveThemeTab(root = typeof document === "undefined" ? null : document) {
+	if (!root) return "colors";
+	const text = (root.querySelector(".tabs-field__tab-button[aria-selected=\"true\"]") ?? root.querySelector(".tabs-field__tab-button--active") ?? root.querySelector("[role=\"tab\"][aria-selected=\"true\"]"))?.textContent?.replace(/\s+/g, " ").trim();
+	return THEME_CHILDREN.find((id) => THEME_TAB_LABELS[id] === text) ?? "colors";
+}
 //#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.
+* Light/Dark preview for Colors, Typography, and Appearance. Lives in
+* `beforeDocumentControls` so Payload's Save stays in the Save slot.
+* Save writes that page's slice onto the stored Theme row.
+*/
+function ThemeDocumentControls() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: "bl-doc-controls",
+		precedence: "default",
+		children: THEME_PREVIEW_TOGGLE_CSS
+	}), /* @__PURE__ */ jsx(ThemePreviewToggle, {})] });
+}
+/**
+* Import-map Save slot used by the older single-Global Theme. Theme pages
+* keep Payload's Save and put Light/Dark in `ThemeDocumentControls`.
 */
+function ThemeSaveButton() {
+	const [child, setChild] = useState("colors");
+	useEffect(() => {
+		const sync = () => setChild(readActiveThemeTab());
+		sync();
+		const target = document.querySelector(".tabs-field") ?? document.body;
+		const observer = new MutationObserver(sync);
+		observer.observe(target, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["aria-selected", "class"],
+			childList: true
+		});
+		target.addEventListener("click", sync);
+		return () => {
+			observer.disconnect();
+			target.removeEventListener("click", sync);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(ThemePublishControls, { child });
+}
+/** @deprecated Import map alias — ThemeDocumentControls is the Save-adjacent slot. */
 function HiddenSaveButton() {
-	return null;
+	return /* @__PURE__ */ jsx(ThemeDocumentControls, {});
 }
 //#endregion
-export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, LibraryField, PairingField, PublishChild, SectionHeading };
+//#region src/admin/identity-fallback.tsx
+/**
+* Identity child when the site has not registered a cupboard yet.
+* Shows the fallback lockup and mark; uploads wait on `logo.collection`.
+*/
+const IdentityFallback = ({ field }) => {
+	const fallback = (field.admin?.custom)?.fallback;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "bl-identity-fallback",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-identity-fallback",
+				precedence: "default",
+				children: CSS
+			}),
+			/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx("h2", { children: "Site identity" }), /* @__PURE__ */ jsx("p", { children: "Today's lockup and mark until a brand editor uploads replacements." })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-identity-fallback__grid",
+				children: [fallback?.lockup ? /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("img", {
+					src: fallback.lockup.url,
+					alt: fallback.lockup.alt
+				}), /* @__PURE__ */ jsx("figcaption", { children: "Lockup" })] }) : null, fallback?.mark ? /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("img", {
+					src: fallback.mark.url,
+					alt: fallback.mark.alt
+				}), /* @__PURE__ */ jsx("figcaption", { children: "Mark" })] }) : null]
+			})
+		]
+	});
+};
+const CSS = `
+.bl-identity-fallback header h2{margin:0;font-size:1.1rem}
+.bl-identity-fallback header p{margin:.35rem 0 1rem;color:var(--theme-elevation-600,#475569)}
+.bl-identity-fallback__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
+.bl-identity-fallback figure{margin:0;padding:1rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:10px;background:var(--theme-elevation-50,#f8fafc)}
+.bl-identity-fallback img{display:block;max-width:100%;height:4rem;object-fit:contain}
+.bl-identity-fallback figcaption{margin-top:.5rem;font-size:.8rem;color:var(--theme-elevation-600,#475569)}
+`;
+//#endregion
+//#region src/admin/look-field.tsx
+/**
+* Loads the Theme global and offers page-editor looks or included steps.
+* A custom scale published on Colors appears here on the next load.
+*/
+const LookField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const { config } = useConfig();
+	const mode = (field.admin?.custom)?.mode ?? "look";
+	const [options, setOptions] = useState(mode === "token" ? pageEditorTokens(null) : pageEditorLooks(null));
+	const id = useId();
+	const required = Boolean(field.required);
+	useEffect(() => {
+		const serverURL = config.serverURL ?? "";
+		const api = config.routes?.api ?? "/api";
+		const controller = new AbortController();
+		fetch(`${serverURL}${api}/globals/theme?depth=0`, {
+			signal: controller.signal,
+			credentials: "include"
+		}).then((response) => response.ok ? response.json() : null).then((doc) => {
+			setOptions(mode === "token" ? pageEditorTokens(doc) : pageEditorLooks(doc));
+		}).catch(() => {});
+		return () => controller.abort();
+	}, [
+		config.routes?.api,
+		config.serverURL,
+		mode
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type",
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("select", {
+				id,
+				disabled: readOnly,
+				value: value ?? "",
+				onChange: (event) => setValue(event.target.value || void 0),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: required ? "Select…" : "None"
+				}), options.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				path,
+				showError,
+				message: errorMessage
+			})
+		]
+	});
+};
+//#endregion
+export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, LookField, PairingField, PublishChild, SectionHeading, ThemeDocumentControls, ThemeSaveButton };
 
 //# sourceMappingURL=admin.mjs.map