@bison-lab/payload-core 3.9.0 → 3.10.0

package/dist/admin.mjs

@@ -4,6 +4,7 @@ import { FieldDescription, FieldError, FieldLabel, useField, useForm, useFormFie
 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 { 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}
@@ -351,9 +352,16 @@ const READABILITY_PUBLISH_NOTE = "You can still publish. To improve a color, dar
 //#region src/admin/preview-mode.tsx
 const ATTR = "data-bl-theme-preview";
 const EVENT = "bl-theme-preview";
+function adminIsDark() {
+	if (typeof document === "undefined") return false;
+	const root = document.documentElement;
+	return root.getAttribute("data-theme") === "dark" || root.getAttribute("data-theme-pref") === "dark" || root.classList.contains("dark");
+}
 function readMode() {
 	if (typeof document === "undefined") return "light";
-	return document.documentElement.getAttribute(ATTR) === "dark" ? "dark" : "light";
+	const set = document.documentElement.getAttribute(ATTR);
+	if (set === "dark" || set === "light") return set;
+	return adminIsDark() ? "dark" : "light";
 }
 function setThemePreviewMode(mode) {
 	if (typeof document === "undefined") return;
@@ -361,9 +369,10 @@ function setThemePreviewMode(mode) {
 	window.dispatchEvent(new Event(EVENT));
 }
 function useThemePreviewMode() {
-	const [mode, setMode] = useState(readMode);
+	const [mode, setMode] = useState("light");
 	useEffect(() => {
 		const sync = () => setMode(readMode());
+		sync();
 		window.addEventListener(EVENT, sync);
 		return () => window.removeEventListener(EVENT, sync);
 	}, []);
@@ -374,24 +383,36 @@ function ThemePreviewToggle() {
 	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"
+		"aria-label": "Preview fills in",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "bl-preview-toggle__label",
+			children: "Preview fills"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "bl-preview-toggle__pills",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-pressed": mode === "light",
+				onClick: () => setThemePreviewMode("light"),
+				children: "Light"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-pressed": mode === "dark",
+				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}
+.bl-preview-toggle{display:inline-flex;align-items:center;gap:.6rem}
+.bl-preview-toggle__label{font-size:12px;font-weight:600;color:#a1a1aa}
+.bl-preview-toggle__pills{display:inline-flex;padding:3px;border:1px solid #3f3f46;border-radius:10px;background:#18181b}
+.bl-preview-toggle__pills button{min-height:2rem;padding:.25rem .8rem;border:0;border-radius:7px;background:transparent;color:#d4d4d8;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
+.bl-preview-toggle__pills button[aria-pressed=true]{background:#f4f4f5;color:#18181b;box-shadow:0 1px 2px rgba(0,0,0,.25)}
+html[data-theme=light] .bl-preview-toggle__label{color:#52525b}
+html[data-theme=light] .bl-preview-toggle__pills{border-color:#d4d4d8;background:#e4e4e7}
+html[data-theme=light] .bl-preview-toggle__pills button{color:#3f3f46}
+html[data-theme=light] .bl-preview-toggle__pills button[aria-pressed=true]{background:#fff;color:#18181b;box-shadow:0 1px 2px rgba(15,23,42,.12)}
 `;
 //#endregion
 //#region src/admin/readability-list.tsx
@@ -429,25 +450,6 @@ function ReadabilityDetail({ item, target = 7 }) {
 		]
 	});
 }
-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}
@@ -541,13 +543,20 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 				}), 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]
+				}) : null] }), /* @__PURE__ */ jsxs("div", {
+					className: "bl-scale-card__head-actions",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "bl-scale-card__mark",
+						style: { background: state.hex },
+						"aria-hidden": "true"
+					}), 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",
@@ -647,7 +656,39 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 						onClick: () => toggleStep(step),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "bl-scale-card__chip",
-							style: { background: hslCss(state.scale[step]) }
+							style: { background: hslCss(state.scale[step]) },
+							children: source ? null : /* @__PURE__ */ jsx("span", {
+								className: "bl-scale-card__intent",
+								"data-intent": on ? "exclude" : "include",
+								"aria-hidden": "true",
+								children: on ? /* @__PURE__ */ jsxs("svg", {
+									viewBox: "0 0 24 24",
+									width: "16",
+									height: "16",
+									children: [/* @__PURE__ */ jsx("circle", {
+										cx: "12",
+										cy: "12",
+										r: "8",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2.4"
+									}), /* @__PURE__ */ jsx("path", {
+										d: "M7.2 16.8 16.8 7.2",
+										stroke: "currentColor",
+										strokeWidth: "2.4"
+									})]
+								}) : /* @__PURE__ */ jsx("svg", {
+									viewBox: "0 0 24 24",
+									width: "16",
+									height: "16",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M12 6v12M6 12h12",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2.6"
+									})
+								})
+							})
 						}), /* @__PURE__ */ jsx("span", {
 							className: "bl-scale-card__step-label",
 							children: step
@@ -655,7 +696,7 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 					}, step);
 				})
 			}),
-			open && warning ? /* @__PURE__ */ jsx("div", {
+			open && warning ? createPortal(/* @__PURE__ */ jsx("div", {
 				className: "bl-scale-card__modal",
 				role: "dialog",
 				"aria-modal": "true",
@@ -687,7 +728,7 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 						})
 					]
 				})
-			}) : null
+			}), document.body) : null
 		]
 	});
 }
@@ -702,6 +743,8 @@ const COLOR_SCALE_CARD_CSS = `
 .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__head-actions{display:flex;align-items:center;gap:.5rem}
+.bl-scale-card__mark{display:block;width:2.5rem;height:2.5rem;border-radius:8px;border:1px solid rgba(15,23,42,.12);flex:none}
 .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)}
@@ -715,27 +758,27 @@ const COLOR_SCALE_CARD_CSS = `
 .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__regen{width:100%;margin-top:.85rem;min-height:2.25rem;border:0;border-radius:8px;background:#0f172a;color:#fff;font:inherit;font-weight:600;cursor:pointer}
+.bl-scale-card__regen:disabled{background:#1e293b;color:#f8fafc;opacity:1;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__chip{position:relative;display:block;width:100%;height:2.15rem;border-radius:6px;overflow:hidden}
+.bl-scale-card__intent{position:absolute;top:3px;right:3px;width:1.15rem;height:1.15rem;border-radius:999px;display:grid;place-items:center;opacity:0;color:#be123c;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.28);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
+.bl-scale-card__intent[data-intent=include]{color:#047857}
+.bl-scale-card__step:hover:not(:disabled) .bl-scale-card__chip{transform:translateY(-1px)}
+.bl-scale-card__step:hover:not(:disabled) .bl-scale-card__intent{opacity:1}
 .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-source] .bl-scale-card__chip{box-shadow:0 0 0 2px var(--theme-elevation-800,#0f172a)}
+.bl-scale-card__step[data-excluded]{opacity:.55}
 .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__modal{position:fixed;inset:0;z-index:100000;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
@@ -803,7 +846,7 @@ const SYSTEM_COLOR_KEYS = [
 	"destructive"
 ];
 function themeColorKeys(doc) {
-	const custom = (doc?.colors?.library ?? []).map((row) => row.key?.trim()).filter((key) => Boolean(key));
+	const custom = (Array.isArray(doc?.colors?.library) ? doc.colors.library : []).map((row) => row.key?.trim()).filter((key) => Boolean(key));
 	return [...SYSTEM_COLOR_KEYS, ...custom];
 }
 /**
@@ -813,7 +856,7 @@ function themeColorKeys(doc) {
 * has `key`.
 */
 function deleteLibraryColor(doc, key, replacement) {
-	const library = [...doc.colors?.library ?? []];
+	const library = [...Array.isArray(doc.colors?.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);
@@ -841,7 +884,7 @@ function slugify(value) {
 */
 const LibraryField = ({ path, readOnly }) => {
 	const { value, setValue } = useField({ path });
-	const rows = value ?? [];
+	const rows = Array.isArray(value) ? value : [];
 	const [adding, setAdding] = useState(false);
 	const [name, setName] = useState("");
 	const [hex, setHex] = useState("#E07A5F");
@@ -884,7 +927,7 @@ 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",
@@ -997,12 +1040,13 @@ const LibraryField = ({ path, readOnly }) => {
 		]
 	});
 };
-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__list{display:grid;gap:.85rem}
+.bl-library__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
+@media (max-width:860px){.bl-library__list{grid-template-columns:1fr}}
 .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}
@@ -1217,7 +1261,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 +1387,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}
@@ -1690,57 +1734,12 @@ const GREY_SCALE_FIELD_CSS = `
 `;
 //#endregion
 //#region src/admin/contrast-report.tsx
-function hexAt(fields, path) {
-	const value = fields[path]?.value;
-	return typeof value === "string" ? value : "";
-}
 /**
-* Fill + automatic label only. Target 7:1, Light and Dark. No gray
-* ContrastStrip. Warnings do not block save.
+* Contrast used to be a Colors-tab list. Readability now lives on each
+* color card: Needs attention opens a popup. This field stays in the
+* schema so `contrastTarget` is still a Theme option; it paints nothing.
 */
-const ContrastReport = ({ field }) => {
-	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 {
-			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 = 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-readability",
-				precedence: "default",
-				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,
-			warnings.length > 0 ? /* @__PURE__ */ jsx(ReadabilityList, {
-				warnings,
-				target
-			}) : /* @__PURE__ */ jsx("p", { children: "Enter hex colours to measure the automatic label on each fill." })
-		]
-	});
-};
+const ContrastReport = () => null;
 //#endregion
 //#region src/admin/section-heading.tsx
 /**
@@ -1755,14 +1754,14 @@ const SectionHeading = ({ field }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-section-heading",
 				precedence: "default",
-				children: CSS
+				children: CSS$1
 			}),
 			/* @__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}
@@ -1770,6 +1769,10 @@ const CSS = `
 `;
 //#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 +1792,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;
@@ -1924,13 +1927,24 @@ const PUBLISH_CONFIRM_CSS = `
 .bl-publish__actions button:disabled{opacity:.45;cursor:not-allowed}
 `;
 //#endregion
-//#region src/admin/publish-child.tsx
-const LABELS = {
+//#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/publish-child.tsx
 function asColor(value) {
 	if (value && typeof value === "object") return value;
 	if (typeof value === "string") return { hex: value };
@@ -1942,7 +1956,7 @@ function formDoc(fields) {
 				hex: fields[`colors.brand.${key}.hex`]?.value,
 				sourceStep: fields[`colors.brand.${key}.sourceStep`]?.value
 			}])),
-			library: fields["colors.library"]?.value ?? [],
+			library: libraryRows(fields["colors.library"]?.value),
 			greyScale: fields["colors.greyScale"]?.value
 		},
 		typography: {
@@ -1966,7 +1980,7 @@ function publishedDoc(fields) {
 }
 function shortsFrom(doc) {
 	const brand = doc.colors?.brand ?? {};
-	const custom = doc.colors?.library ?? [];
+	const custom = libraryRows(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;
@@ -1977,13 +1991,12 @@ 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.
+* Publish for the open Theme tab. Lives in Payload's document Save
+* slot (`ThemeSaveButton`) so the header matches a Pages document.
+* Sets `publishChild` then submits; `beforeChange` writes only that slice.
 */
-const PublishChild = ({ field }) => {
-	const child = (field.admin?.custom)?.child;
-	const label = isThemeChild(child) ? LABELS[child] : "Theme";
+function ThemePublishControls({ child }) {
+	const label = THEME_TAB_LABELS[child];
 	const { submit } = useForm();
 	const publishChild = useField({ path: "publishChild" });
 	const snapshot = useFormFields(([fields]) => {
@@ -1995,10 +2008,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 +2021,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,7 +2031,7 @@ 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;gap:.75rem}.bl-publish-child__button{min-height:2.25rem;padding:.4rem 1rem;border:0;border-radius:8px;background:#a80063;color:#fff;font:inherit;font-weight:600;cursor:pointer}`
 			}),
 			child === "colors" ? /* @__PURE__ */ jsx(ThemePreviewToggle, {}) : null,
 			/* @__PURE__ */ jsxs("button", {
@@ -2040,17 +2052,81 @@ const PublishChild = ({ field }) => {
 			}) : null
 		]
 	});
+}
+/** @deprecated Theme publish is the document Save button */
+const PublishChild = ({ field }) => {
+	const child = (field.admin?.custom)?.child;
+	return /* @__PURE__ */ jsx(ThemePublishControls, { child: isThemeChild(child) ? child : "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.
+* Payload's document Save slot — the same control row as Pages'
+* "Publish changes". Theme has no drafts; this publishes only the
+* open field tab. The tab is read after mount so SSR matches.
 */
-function HiddenSaveButton() {
-	return null;
+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 });
 }
+/** Import-map alias — Theme still points `SaveButton` at this name. */
+const HiddenSaveButton = ThemeSaveButton;
+//#endregion
+//#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
-export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, LibraryField, PairingField, PublishChild, SectionHeading };
+export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, PairingField, PublishChild, SectionHeading, ThemeSaveButton };
 
 //# sourceMappingURL=admin.mjs.map