@bison-lab/payload-core 3.22.0 → 3.25.0

package/dist/admin.mjs

@@ -4,8 +4,11 @@ import { ArrayField, Button, CheckboxInput, FieldDescription, FieldError, FieldL
 import { GREY_SCALES, SHADE_STEPS, contrastForeground, contrastRatio, createColorScale, deriveDarkPalette, deriveLightPalette, hexToHSL, hslToString, includedShadeSteps, isThemeHex, presetHints, setColorScaleInclude } from "@bison-lab/tokens";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button as Button$1, Dialog, Field, Input, KitProvider, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@bison-lab/admin-ui";
+import { HexColorPicker } from "react-colorful";
 import { createPortal } from "react-dom";
 import { findFont, fontFaceCss, isFontId } from "@bison-lab/fonts";
+import "payload";
 //#region src/admin/color-field.tsx
 const HEX_ERROR = "Enter a six-digit hex colour like #1e3a5f";
 /**
@@ -41,7 +44,7 @@ const ColorField = ({ field, path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-color-field",
 				precedence: "default",
-				children: CSS$4
+				children: CSS$5
 			}),
 			/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: hexId,
@@ -100,7 +103,7 @@ const ColorField = ({ field, path, readOnly }) => {
 		]
 	});
 };
-const CSS$4 = `
+const CSS$5 = `
 .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}
@@ -345,6 +348,123 @@ 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/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/brand-hex-field.tsx
+/** Keep a leading # and at most six hex digits. Drop everything else. */
+function filterThemeHexInput(raw) {
+	const trimmed = raw.trim();
+	if (trimmed === "") return "";
+	return `#${trimmed.replace(/^#/, "").replace(/[^0-9a-fA-F]/g, "").slice(0, 6)}`;
+}
+function BrandHexField({ name, value, onChange, readOnly, placeholder = "#DB0082", picker = "dialog" }) {
+	const [draft, setDraft] = useState(value);
+	const [open, setOpen] = useState(false);
+	const [pickerDraft, setPickerDraft] = useState(value);
+	useEffect(() => {
+		setDraft(value);
+	}, [value]);
+	function typeHex(next) {
+		const filtered = filterThemeHexInput(next);
+		setDraft(filtered);
+		if (isThemeHex(filtered)) onChange(filtered);
+	}
+	function openPicker() {
+		setPickerDraft(isThemeHex(draft) ? draft : value);
+		setOpen(true);
+	}
+	function applyPicker() {
+		if (!isThemeHex(pickerDraft)) return;
+		onChange(pickerDraft);
+		setDraft(pickerDraft);
+		setOpen(false);
+	}
+	const input = /* @__PURE__ */ jsx(Input, {
+		"aria-label": `${name} hex`,
+		value: draft,
+		placeholder,
+		spellCheck: false,
+		autoComplete: "off",
+		disabled: readOnly,
+		onChange: (event) => typeHex(event.target.value),
+		onBlur: () => {
+			if (!isThemeHex(draft)) setDraft(value);
+		}
+	});
+	return /* @__PURE__ */ jsxs(KitProvider, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: "bl-brand-hex",
+			precedence: "default",
+			children: CSS$4
+		}),
+		picker === "inline" ? /* @__PURE__ */ jsxs("div", {
+			className: "bl-brand-hex bl-brand-hex--inline",
+			children: [/* @__PURE__ */ jsx(HexColorPicker, {
+				color: isThemeHex(draft) ? draft : "#000000",
+				onChange: (hex) => {
+					setDraft(hex);
+					onChange(hex);
+				}
+			}), /* @__PURE__ */ jsxs(Field, {
+				as: "div",
+				children: [/* @__PURE__ */ jsx(Label, { children: "Hex" }), input]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "bl-brand-hex",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "bl-brand-hex__swatch",
+				"aria-label": `${name} picker`,
+				disabled: readOnly,
+				style: { background: isThemeHex(draft) ? draft : "transparent" },
+				onClick: openPicker
+			}), input]
+		}),
+		picker === "dialog" ? /* @__PURE__ */ jsx(ThemePortal, { children: /* @__PURE__ */ jsx("div", {
+			className: "bl-theme-dialog",
+			children: /* @__PURE__ */ jsx(Dialog, {
+				open,
+				title: `Pick ${name}`,
+				onCancel: () => setOpen(false),
+				confirmLabel: "Apply",
+				onConfirm: applyPicker,
+				confirmDisabled: !isThemeHex(pickerDraft),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-brand-hex bl-brand-hex--inline",
+					children: [/* @__PURE__ */ jsx(HexColorPicker, {
+						color: isThemeHex(pickerDraft) ? pickerDraft : "#000000",
+						onChange: setPickerDraft
+					}), /* @__PURE__ */ jsxs(Field, {
+						as: "div",
+						children: [/* @__PURE__ */ jsx(Label, { children: "Hex" }), /* @__PURE__ */ jsx(Input, {
+							"aria-label": `${name} picker hex`,
+							value: pickerDraft,
+							placeholder,
+							spellCheck: false,
+							autoComplete: "off",
+							onChange: (event) => setPickerDraft(filterThemeHexInput(event.target.value))
+						})]
+					})]
+				})
+			})
+		}) }) : null
+	] });
+}
+const CSS$4 = `
+.bl-brand-hex{display:flex;align-items:stretch;gap:8px;min-width:0}
+.bl-brand-hex--inline{flex-direction:column;gap:12px}
+.bl-brand-hex .react-colorful{width:100%;height:200px}
+.bl-brand-hex__swatch{flex:none;width:38px;border:1px solid #3a3d46;border-radius:8px;padding:0;cursor:pointer;background:#1d1f24}
+.bl-brand-hex__swatch:disabled{opacity:.5;cursor:not-allowed}
+.bl-brand-hex .bl-nav-kit__input{font-family:var(--font-mono,ui-monospace,monospace)}
+.bl-theme-dialog .bl-nav-kit__modal{z-index:10000}
+`;
+//#endregion
 //#region src/admin/colors-layout.ts
 /**
 * Theme Colors tab chrome. Payload group-in-group draws a left gutter;
@@ -386,13 +506,6 @@ const THEME_COLORS_LAYOUT_CSS = `
 }
 `;
 //#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";
@@ -410,7 +523,11 @@ const PREVIEW_BRAND = {
 	secondary: "#111111",
 	success: "#111111"
 };
-let currentMode = "light";
+function readDocumentTheme() {
+	if (typeof document === "undefined") return "light";
+	return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+}
+let currentMode = readDocumentTheme();
 function readMode() {
 	return currentMode;
 }
@@ -450,7 +567,10 @@ function previewVarsFor(grey, mode) {
 		"--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})`
+		"--bl-preview-input": `hsl(${palette.input})`,
+		"--theme-elevation-0": `hsl(${palette.card})`,
+		"--theme-elevation-150": `hsl(${palette.border})`,
+		"--theme-elevation-800": `hsl(${palette.foreground})`
 	};
 }
 function useGreyScale() {
@@ -471,30 +591,6 @@ function usePreviewCanvas() {
 		style: previewVarsFor(useGreyScale(), mode)
 	};
 }
-function ThemePreviewToggle() {
-	const mode = useThemePreviewMode();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "bl-preview-toggle",
-		role: "group",
-		"aria-label": "Preview theme in",
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-on": mode === "light" ? "" : void 0,
-			onClick: () => setThemePreviewMode("light"),
-			children: "Light"
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-on": mode === "dark" ? "" : void 0,
-			onClick: () => setThemePreviewMode("dark"),
-			children: "Dark"
-		})]
-	});
-}
-const THEME_PREVIEW_TOGGLE_CSS = `
-.bl-preview-toggle{display:inline-flex;padding:3px;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:10px;background:var(--theme-elevation-0,#fff)}
-.bl-preview-toggle button{min-height:2rem;padding:.25rem .75rem;border:0;border-radius:7px;background:transparent;color:var(--theme-elevation-600,#475569);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
-.bl-preview-toggle button[data-on]{background:var(--theme-text,#0f172a);color:var(--theme-bg,#fff)}
-`;
 //#endregion
 //#region src/admin/readability-list.tsx
 function ReadabilityDetail({ item, target = 7 }) {
@@ -614,13 +710,9 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 	const canvas = usePreviewCanvas();
 	const [attentionOpen, setAttentionOpen] = useState(false);
 	const [shakeStep, setShakeStep] = useState(null);
-	const [hexDraft, setHexDraft] = useState(state.hex);
 	const titleId = useId();
 	const included = new Set(includedShadeSteps(state));
 	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));
 	}
@@ -638,211 +730,182 @@ function ColorScaleCard({ id, name, hint, required, custom, state, onChange, onD
 		else next.add(step);
 		onChange(setColorScaleInclude(state, SHADE_STEPS.filter((item) => next.has(item))));
 	}
-	return /* @__PURE__ */ jsxs("article", {
-		className: `bl-scale-card ${canvas.className}`,
-		"data-preview": canvas.mode,
-		style: canvas.style,
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "bl-scale-card__head",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-					className: "bl-scale-card__title-row",
-					children: [
-						/* @__PURE__ */ jsx("h3", {
-							className: "bl-scale-card__title",
-							children: name
+	return /* @__PURE__ */ jsx(KitProvider, {
+		accent: id === "primary" && isThemeHex(state.hex) ? state.hex : void 0,
+		children: /* @__PURE__ */ jsxs("article", {
+			className: `bl-scale-card ${canvas.className}`,
+			"data-preview": canvas.mode,
+			style: canvas.style,
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "bl-scale-card__head",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "bl-scale-card__title-row",
+						children: [
+							/* @__PURE__ */ jsx("h3", {
+								className: "bl-scale-card__title",
+								children: name
+							}),
+							required ? /* @__PURE__ */ jsx(Badge, { children: "Required" }) : null,
+							custom ? /* @__PURE__ */ jsx(Badge, { children: "Optional" }) : null,
+							warning && !warning.meets ? /* @__PURE__ */ jsx(Badge, {
+								as: "button",
+								variant: "danger",
+								"aria-haspopup": "dialog",
+								onClick: () => setAttentionOpen(true),
+								children: "Needs attention"
+							}) : null
+						]
+					}), hint ? /* @__PURE__ */ jsx("p", {
+						className: "bl-scale-card__hint",
+						children: hint
+					}) : null] }), onDelete ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "bl-scale-card__delete",
+						disabled: readOnly,
+						onClick: onDelete,
+						children: "Delete"
+					}) : null]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "bl-scale-card__row",
+					children: [/* @__PURE__ */ jsxs(Field, {
+						as: "div",
+						children: [/* @__PURE__ */ jsx(Label, { children: "Brand hex" }), /* @__PURE__ */ jsx(BrandHexField, {
+							name,
+							value: state.hex,
+							onChange: commitHex,
+							readOnly
+						})]
+					}), /* @__PURE__ */ jsxs(Field, {
+						as: "div",
+						children: [/* @__PURE__ */ jsx(Label, { children: "This color is" }), /* @__PURE__ */ jsxs(Select, {
+							value: String(state.sourceStep),
+							onValueChange: (value) => commitStep(Number(value)),
+							disabled: readOnly,
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								"aria-label": "This color is",
+								children: /* @__PURE__ */ jsx(SelectValue, {})
+							}), /* @__PURE__ */ jsx(SelectContent, { children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx(SelectItem, {
+								value: String(step),
+								children: step
+							}, step)) })]
+						})]
+					})]
+				}),
+				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
 						}),
-						required ? /* @__PURE__ */ jsx("span", {
-							className: "bl-scale-card__badge",
-							children: "Required"
-						}) : null,
-						custom ? /* @__PURE__ */ jsx("span", {
-							className: "bl-scale-card__badge",
-							children: "Optional"
-						}) : null,
-						warning && !warning.meets ? /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "bl-scale-card__badge bl-scale-card__badge--attention",
-							"aria-haspopup": "dialog",
-							onClick: () => setAttentionOpen(true),
-							children: "Needs attention"
+						/* @__PURE__ */ jsx("p", { children: STATUS_COPY[role].body }),
+						hueDrift ? /* @__PURE__ */ jsx("p", {
+							className: "bl-scale-card__family-drift",
+							children: STATUS_COPY[role].drift
 						}) : null
-					]
-				}), hint ? /* @__PURE__ */ jsx("p", {
-					className: "bl-scale-card__hint",
-					children: hint
-				}) : null] }), onDelete ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "bl-scale-card__delete",
-					disabled: readOnly,
-					onClick: onDelete,
-					children: "Delete"
-				}) : null]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-scale-card__row",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "bl-scale-card__field",
-					children: [/* @__PURE__ */ jsx("span", { children: "Brand hex" }), /* @__PURE__ */ jsxs("span", {
-						className: "bl-scale-card__hex-wrap",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "color",
-							"aria-label": `${name} picker`,
+					] })]
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "bl-scale-card__scale-head",
+					children: [/* @__PURE__ */ jsx("span", { children: "Generated scale" }), /* @__PURE__ */ jsxs("span", { children: [SHADE_STEPS.length, " shades"] })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bl-scale-card__steps",
+					role: "group",
+					"aria-label": `${name} scale steps`,
+					children: SHADE_STEPS.map((step) => {
+						const source = step === state.sourceStep;
+						const on = included.has(step);
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "bl-scale-card__step",
+							"data-source": source ? "" : void 0,
+							"data-excluded": on ? void 0 : "",
+							"data-shake": shakeStep === step ? "" : void 0,
 							disabled: readOnly,
-							value: isThemeHex(state.hex) ? state.hex : "#000000",
-							onPointerDown: (event) => {
-								const input = event.currentTarget;
-								if (typeof input.showPicker !== "function") return;
+							"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();
-								try {
-									input.showPicker();
-								} catch {
-									input.click();
-								}
+								event.stopPropagation();
+								toggleStep(step);
 							},
-							onChange: (event) => commitHex(event.target.value)
-						}), /* @__PURE__ */ jsx("input", {
-							type: "text",
-							spellCheck: false,
-							autoComplete: "off",
-							disabled: readOnly,
-							"aria-label": `${name} hex`,
-							value: hexDraft,
-							onChange: (event) => {
-								const next = event.target.value.trim();
-								setHexDraft(next);
-								if (isThemeHex(next)) commitHex(next);
-							},
-							onBlur: () => {
-								if (!isThemeHex(hexDraft)) setHexDraft(state.hex);
-							}
-						})]
-					})]
-				}), /* @__PURE__ */ jsxs("label", {
-					className: "bl-scale-card__field",
-					children: [/* @__PURE__ */ jsx("span", { children: "This color is" }), /* @__PURE__ */ jsx("select", {
+							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
+							})]
+						}, step);
+					})
+				}),
+				/* @__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,
-						value: String(state.sourceStep),
-						onChange: (event) => commitStep(Number(event.target.value)),
-						children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx("option", {
-							value: step,
-							children: step
-						}, step))
-					})]
-				})]
-			}),
-			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__ */ jsxs("div", {
-				className: "bl-scale-card__scale-head",
-				children: [/* @__PURE__ */ jsx("span", { children: "Generated scale" }), /* @__PURE__ */ jsxs("span", { children: [SHADE_STEPS.length, " shades"] })]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "bl-scale-card__steps",
-				role: "group",
-				"aria-label": `${name} scale steps`,
-				children: SHADE_STEPS.map((step) => {
-					const source = step === state.sourceStep;
-					const on = included.has(step);
-					return /* @__PURE__ */ jsxs("button", {
+						onClick: () => onChange(setColorScaleInclude(state, "all")),
+						children: "Include all"
+					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "bl-scale-card__step",
-						"data-source": source ? "" : void 0,
-						"data-excluded": on ? void 0 : "",
-						"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
-						})]
-					}, step);
-				})
-			}),
-			/* @__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) setAttentionOpen(false);
-				},
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "bl-scale-card__panel",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "bl-scale-card__panel-head",
-							children: [/* @__PURE__ */ jsx("h4", {
-								id: titleId,
-								children: readabilityHeadline(warning)
-							}), /* @__PURE__ */ jsx("button", {
+						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) setAttentionOpen(false);
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "bl-scale-card__panel",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "bl-scale-card__panel-head",
+								children: [/* @__PURE__ */ jsx("h4", {
+									id: titleId,
+									children: readabilityHeadline(warning)
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => setAttentionOpen(false),
+									"aria-label": "Close",
+									children: "×"
+								})]
+							}),
+							/* @__PURE__ */ jsx(ReadabilityDetail, { item: warning }),
+							/* @__PURE__ */ jsx("button", {
 								type: "button",
+								className: "bl-scale-card__panel-done",
 								onClick: () => setAttentionOpen(false),
-								"aria-label": "Close",
-								children: "×"
-							})]
-						}),
-						/* @__PURE__ */ jsx(ReadabilityDetail, { item: warning }),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "bl-scale-card__panel-done",
-							onClick: () => setAttentionOpen(false),
-							children: "Keep editing this color"
-						})
-					]
-				})
-			}) }) : null
-		]
+								children: "Keep editing this color"
+							})
+						]
+					})
+				}) }) : null
+			]
+		})
 	});
 }
 const COLOR_SCALE_CARD_CSS = `
@@ -850,18 +913,10 @@ const COLOR_SCALE_CARD_CSS = `
 .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:#e2e8f0;color:#0f172a}
-.bl-scale-card__badge--attention{background:#fff1f2;color:#be123c;cursor:pointer}
 .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(--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__row{display:grid;grid-template-columns:1fr 8rem;gap:.75rem;margin-top:1rem;align-items:start}
+.bl-scale-card__row .bl-nav-kit__field{margin-bottom:0}
 .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}
@@ -1122,63 +1177,52 @@ const LibraryField = ({ field, path, readOnly }) => {
 				})]
 			}),
 			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",
+				className: "bl-theme-dialog",
+				children: /* @__PURE__ */ jsx(KitProvider, { children: /* @__PURE__ */ jsxs(Dialog, {
+					open: true,
+					title: "New color",
+					onCancel: () => {
+						setAdding(false);
+						setName("");
+						setHex("");
+						setSourceStep(500);
+					},
+					confirmLabel: "Create color scale",
+					onConfirm: add,
+					confirmDisabled: !slugify(name) || !isThemeHex(hex),
 					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", {
+						/* @__PURE__ */ jsx("p", { children: "Give it a useful name, enter your brand hex, then say which scale step that hex is." }),
+						/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Name" }), /* @__PURE__ */ jsx(Input, {
+							"aria-label": "Name",
 							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"
+						/* @__PURE__ */ jsxs(Field, {
+							as: "div",
+							children: [/* @__PURE__ */ jsx(Label, { children: "Brand hex" }), /* @__PURE__ */ jsx(BrandHexField, {
+								name: "Brand",
+								value: hex,
+								onChange: setHex,
+								picker: "inline"
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Field, {
+							as: "div",
+							children: [/* @__PURE__ */ jsx(Label, { children: "This color is" }), /* @__PURE__ */ jsxs(Select, {
+								value: String(sourceStep),
+								onValueChange: (value) => setSourceStep(Number(value)),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									"aria-label": "This color is",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: SHADE_STEPS.map((step) => /* @__PURE__ */ jsx(SelectItem, {
+									value: String(step),
+									children: step
+								}, step)) })]
 							})]
 						})
 					]
-				})
+				}) })
 			}) }) : null,
 			replacing ? /* @__PURE__ */ jsx(ThemePortal, { children: /* @__PURE__ */ jsx("div", {
 				className: "bl-library__modal",
@@ -1278,26 +1322,24 @@ const CSS$3 = `
 .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 label,.bl-library__field{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;font-size:13px;font-weight:600}
 .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__usages{margin:1rem 0 0;padding-left:1.1rem;color:#475569;font-size:13px;font-weight:400}
 .bl-library__usages li{margin:.25rem 0}
 .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}
+.bl-theme-dialog .bl-nav-kit__modal{z-index:10000}
 `;
 //#endregion
 //#region src/admin/typography-pairing.tsx
 function FontRoleCard({ title, hint, required, family, preview, children }) {
-	return /* @__PURE__ */ jsxs("article", {
+	return /* @__PURE__ */ jsx(KitProvider, { children: /* @__PURE__ */ jsxs("article", {
 		className: "bl-font-role",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "bl-font-role__head",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("p", { children: hint })] }), required ? /* @__PURE__ */ jsx("span", {
-					className: "bl-font-role__badge",
-					children: "Required"
-				}) : null]
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("p", { children: hint })] }), required ? /* @__PURE__ */ jsx(Badge, { children: "Required" }) : null]
 			}),
 			children,
 			/* @__PURE__ */ jsxs("div", {
@@ -1313,7 +1355,7 @@ function FontRoleCard({ title, hint, required, family, preview, children }) {
 				})]
 			})
 		]
-	});
+	}) });
 }
 function TypographyPairing({ headingFamily, bodyFamily }) {
 	return /* @__PURE__ */ jsxs("section", {
@@ -1358,7 +1400,6 @@ const TYPOGRAPHY_PAIRING_CSS = `
 .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(--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}
@@ -1889,7 +1930,7 @@ const SWATCHES = [
 ];
 function GreyScaleChoices({ value, onChange, readOnly }) {
 	const canvas = usePreviewCanvas();
-	return /* @__PURE__ */ jsxs("section", {
+	return /* @__PURE__ */ jsx(KitProvider, { children: /* @__PURE__ */ jsxs("section", {
 		className: `bl-grey ${canvas.className}`,
 		"data-preview": canvas.mode,
 		style: canvas.style,
@@ -1900,10 +1941,7 @@ function GreyScaleChoices({ value, onChange, readOnly }) {
 			}),
 			/* @__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"
-				})]
+				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(Badge, { children: "Required" })]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "bl-grey__choices",
@@ -1937,7 +1975,7 @@ function GreyScaleChoices({ value, onChange, readOnly }) {
 				})
 			})
 		]
-	});
+	}) });
 }
 /**
 * Visual picker over the five grey-scale presets. Replaces the stock select
@@ -1966,7 +2004,6 @@ const GREY_SCALE_FIELD_CSS = `
 .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(--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)}
@@ -2325,9 +2362,8 @@ function ThemePublishActions({ child }) {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-publish-child",
 				precedence: "default",
-				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}`
+				children: `.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 !== "identity" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ThemePreviewToggle, {}) }) : null,
 			/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "bl-publish-child__button",
@@ -2374,16 +2410,12 @@ function readActiveThemeTab(root = typeof document === "undefined" ? null : docu
 //#endregion
 //#region src/admin/save-button.tsx
 /**
-* 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.
+* Theme used to put a Light/Dark pair here. Admin chrome now follows
+* Payload's own theme from the header sun/moon, so this slot is empty
+* and Save stays in the Save slot.
 */
 function ThemeDocumentControls() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
-		href: "bl-doc-controls",
-		precedence: "default",
-		children: THEME_PREVIEW_TOGGLE_CSS
-	}), /* @__PURE__ */ jsx(ThemePreviewToggle, {})] });
+	return null;
 }
 /**
 * Import-map Save slot used by the older single-Global Theme. Theme pages
@@ -2973,6 +3005,90 @@ const RoleSlugField = ({ field, path, readOnly }) => {
 	});
 };
 //#endregion
+//#region src/fields/slug.ts
+const SLUG_UNLOCK_WARNING = "This page is live. Changing the address will send visitors from the old URL to the new one.";
+function slugifySegment(segment) {
+	return segment.normalize("NFKD").replace(/\p{M}/gu, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+/**
+* A stored slug from whatever was typed: NFKD, hyphenated, slash segments
+* kept, so `Café / About Us` becomes `cafe/about-us`.
+*/
+function normalizeSlug(value) {
+	return value.split("/").map(slugifySegment).filter(Boolean).join("/");
+}
+//#endregion
+//#region src/admin/slug-field.tsx
+/**
+* Slug follows the title until first publish. After that it is read-only
+* until Unlock, which warns that the old address will redirect.
+*/
+const SlugField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const { value: unlock, setValue: setUnlock } = useField({ path: "slugUnlock" });
+	const title = useFormFields(([fields]) => fields.title?.value);
+	const slugLocked = Boolean(useFormFields(([fields]) => fields.slugLocked?.value));
+	const locked = Boolean(readOnly) || slugLocked && !unlock;
+	const required = Boolean(field.required);
+	const id = `field-${path.replace(/\./g, "__")}`;
+	useEffect(() => {
+		if (slugLocked || typeof title !== "string") return;
+		const next = normalizeSlug(title);
+		if (next !== (value ?? "")) setValue(next);
+	}, [
+		setValue,
+		slugLocked,
+		title,
+		value
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			fieldBaseClass,
+			"text",
+			locked && "read-only"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${fieldBaseClass}__wrap`,
+				children: [
+					/* @__PURE__ */ jsx(FieldError, {
+						message: errorMessage,
+						path,
+						showError
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id,
+						type: "text",
+						autoComplete: "off",
+						spellCheck: false,
+						readOnly: locked,
+						disabled: locked,
+						value: value ?? "",
+						onChange: (event) => {
+							if (!locked) setValue(event.target.value);
+						}
+					}),
+					slugLocked && !unlock ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						onClick: () => setUnlock(true),
+						children: "Unlock"
+					}) : null
+				]
+			}),
+			unlock ? /* @__PURE__ */ jsx("p", { children: SLUG_UNLOCK_WARNING }) : null,
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			})
+		]
+	});
+};
+//#endregion
 //#region src/admin/role-name-field.tsx
 /**
 * Role name. Letters and spaces only, so the hidden slug stays
@@ -3316,6 +3432,44 @@ const FeaturesMatrixField = (props) => {
 	});
 };
 //#endregion
+//#region src/admin/theme-kit-accent.tsx
+function primaryHex(doc) {
+	const hex = doc?.colors?.brand?.primary?.hex;
+	return typeof hex === "string" && isThemeHex(hex) ? hex : void 0;
+}
+/**
+* Site Theme primary → `--bl-kit-accent`. Saved value for the whole
+* admin; the Primary color card also writes the live hex so pickers
+* and kit chrome update as the field is edited.
+*/
+function ThemeKitAccent({ children }) {
+	const { config } = useConfig();
+	const [accent, setAccent] = useState();
+	useEffect(() => {
+		const url = `${config.serverURL}${config.routes.api}/globals/theme?depth=0`;
+		let cancelled = false;
+		function load() {
+			fetch(url, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
+				const hex = primaryHex(doc);
+				if (!cancelled && hex) setAccent(hex);
+			}).catch(() => void 0);
+		}
+		load();
+		const onVis = () => {
+			if (document.visibilityState === "visible") load();
+		};
+		document.addEventListener("visibilitychange", onVis);
+		return () => {
+			cancelled = true;
+			document.removeEventListener("visibilitychange", onVis);
+		};
+	}, [config.serverURL, config.routes.api]);
+	return /* @__PURE__ */ jsx(KitProvider, {
+		accent,
+		children
+	});
+}
+//#endregion
 //#region src/admin/document-title-actions.tsx
 /**
 * Shared document header: title on the left, primary actions on the
@@ -3357,7 +3511,7 @@ function DocumentTitleActions({ children }) {
 		});
 		return () => observer.disconnect();
 	}, []);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+	return /* @__PURE__ */ jsxs(ThemeKitAccent, { children: [/* @__PURE__ */ jsx("style", {
 		href: "bl-doc-title-actions",
 		precedence: "default",
 		children: TITLE_ACTIONS_CSS
@@ -3497,6 +3651,8 @@ function resolveAdminNav({ config, doc, visibleEntities }) {
 //#endregion
 //#region src/admin/admin-nav.tsx
 const BASE = "nav";
+/** Survives AdminNav remounting on every admin route so the first-seen walk does not flash. */
+let cachedDoc;
 function isAbortError(error) {
 	return error instanceof DOMException ? error.name === "AbortError" : error instanceof Error && error.name === "AbortError";
 }
@@ -3529,7 +3685,7 @@ function AdminNavShell({ children }) {
 */
 function AdminNav({ visibleEntities }) {
 	const { config } = useConfig();
-	const [doc, setDoc] = useState(null);
+	const [doc, setDoc] = useState(() => cachedDoc ?? null);
 	const adminRoute = config.routes.admin ?? "/admin";
 	const apiRoute = config.routes.api ?? "/api";
 	useEffect(() => {
@@ -3540,9 +3696,12 @@ function AdminNav({ visibleEntities }) {
 			signal: controller.signal
 		}).then((response) => response.ok ? response.json() : null).then((payload) => {
 			if (controller.signal.aborted) return;
+			cachedDoc = payload;
 			setDoc(payload);
 		}).catch((error) => {
 			if (isAbortError(error) || controller.signal.aborted) return;
+			if (cachedDoc !== void 0) return;
+			cachedDoc = null;
 			setDoc(null);
 		});
 		return () => controller.abort();
@@ -3669,6 +3828,6 @@ const AdminNavEntityField = ({ field, path, permissions, readOnly, schemaPath })
 	});
 };
 //#endregion
-export { AdminNav, AdminNavEntityField, AdminNavItemRowLabel, AdminNavRowLabel, AppearanceField, ColorField, ColorScaleField, ContrastReport, DocumentCreateNew, DocumentTitleActions, FeaturesMatrixField, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, LookField, PairingField, PublishChild, RoleNameField, RoleSlugField, RolesField, RolesGrantsField, RolesMatrixField, RolesRowLabel, SectionHeading, ThemeDocumentControls, ThemeSaveButton };
+export { AdminNav, AdminNavEntityField, AdminNavItemRowLabel, AdminNavRowLabel, AppearanceField, ColorField, ColorScaleField, ContrastReport, DocumentCreateNew, DocumentTitleActions, FeaturesMatrixField, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, LookField, PairingField, PublishChild, RoleNameField, RoleSlugField, RolesField, RolesGrantsField, RolesMatrixField, RolesRowLabel, SectionHeading, SlugField, ThemeDocumentControls, ThemeSaveButton, setThemePreviewMode };
 
 //# sourceMappingURL=admin.mjs.map