@bison-lab/payload-core 0.1.0 → 3.8.0

package/README.md

@@ -1,23 +1,32 @@
 # `@bison-lab/payload-core`
 
-Site-agnostic Payload CMS configuration for Bison Lab sites. Today: the SEO
-tab on a collection and the metadata reader for the pages it describes. The
-rest of the shared CMS layer (access matrix, collection factories, slug field)
-joins it here as it is extracted.
+Site-agnostic Payload CMS configuration for Bison Lab sites: the SEO tab on
+a collection, the Theme Global, and the readers a page route and a root
+layout use. The rest of the shared CMS layer (access matrix, collection
+factories, slug field) joins it here as it is extracted.
+
+Full guide: <https://payload.bisonlab.ai/site/seo/>
 
 ```bash
-pnpm add @bison-lab/payload-core @payloadcms/plugin-seo
+pnpm add @bison-lab/payload-core @payloadcms/plugin-seo @bison-lab/tokens @bison-lab/fonts
 ```
 
-Peers: `payload` and `@payloadcms/plugin-seo`. Pin the plugin to the same
-version as `payload`; Payload releases them in lockstep.
+Peers: `payload` and `@payloadcms/plugin-seo` are required. `@bison-lab/tokens`
+and `@bison-lab/fonts` are needed to adopt the Theme Global; `@payloadcms/ui`
+and `react` are needed for its admin fields; `@bison-lab/ui` and
+`@payloadcms/live-preview-react` are needed for the live theme preview.
+Pin the plugin to the same version as `payload`; Payload releases them in
+lockstep.
 
-## Two entry points, and why
+## Five entry points, and why
 
-| Import                             | Contents                                                                       | Runs where                                                      |
-| ---------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------- |
-| `@bison-lab/payload-core`          | `seoPlugin`, `noIndexField`, `SHARE_IMAGE_SIZE`, title and text helpers, types | Node. What `payload.config.ts` imports; it loads the plugin.    |
-| `@bison-lab/payload-core/metadata` | `pageMetadata`, the title helpers, the same types                              | Server. What a page route imports; it does not load the plugin. |
+| Import                             | Contents                                                                                         | Runs where                                                                 |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| `@bison-lab/payload-core`          | `seoPlugin`, `createTheme`, `seedTheme`, import-map strings, title and text helpers, types       | Node. What `payload.config.ts` imports; it loads the plugin.               |
+| `@bison-lab/payload-core/metadata` | `pageMetadata`, the title helpers, the same types                                                | Server. What a page route imports; it does not load the plugin.            |
+| `@bison-lab/payload-core/theme`    | `getPublishedTheme`, `themeConfigFromDoc`, `themeHead`                                           | Server. What a root layout imports; it does not load the plugin or React.  |
+| `@bison-lab/payload-core/admin`    | `ColorField`, `FontField`, `ContrastReport`                                                      | Admin. Referenced by import-map string; `generate:importmap` writes it.    |
+| `@bison-lab/payload-core/react`    | `ThemePreview`                                                                                   | Client. What the theme-preview route imports; it loads ui and live-preview. |
 
 ## What editors get
 
@@ -114,15 +123,120 @@ carry through Next's metadata merge.
 
 The sitemap is the site's: filter `meta.noIndex` out of it.
 
+## Adopting the Theme global
+
+Settings → Theme: the five brand colours, grey scale, radius, shadow, motion,
+density, default theme, body and heading fonts, and an optional logo. Whoever
+holds brand rights edits a draft; publish is deliberate. Contrast is measured
+as they type and shown; it is never enforced. `bison.config.json` is the seed
+a site starts from, not the source of truth.
+
+**1. Register the Global.** Access is required — the predicates live in the
+site's `src/platform` until they move here. Pass `canManageBrand` as
+`update`.
+
+```ts
+// payload.config.ts
+import { createTheme } from "@bison-lab/payload-core";
+import bisonConfig from "../bison.config.json";
+import { canManageBrand, isAuthenticated } from "@/platform/access";
+
+export default buildConfig({
+  globals: [
+    createTheme({
+      access: { read: isAuthenticated, update: canManageBrand },
+      seed: bisonConfig,
+      previewPath: "/theme-preview",
+      logo: { collection: "brand-assets" },
+      onPublish: async () => {
+        revalidateTag("theme");
+      },
+    }),
+  ],
+});
+```
+
+Then `payload generate:importmap` (the colour, font and contrast fields
+resolve from `@bison-lab/payload-core/admin`), `payload generate:types`, and
+`payload migrate:create`.
+
+**2. Seed the row on deploy.** A migration `up()` writes a published version
+so the site renders what `bison-theme.css` rendered before anyone opens the
+admin:
+
+```ts
+import { seedTheme } from "@bison-lab/payload-core";
+import bisonConfig from "../bison.config.json";
+
+export async function up({ payload }) {
+  await seedTheme(payload, bisonConfig);
+}
+```
+
+**3. Serve the catalogue.** A Next route around `serveFont` from
+`@bison-lab/fonts/server`, listed in `serverExternalPackages`, at the path
+you pass as `fontsBaseUrl` (default `/fonts`).
+
+**4. Render the published theme in the root layout.**
+
+```ts
+// app/layout.tsx
+import { getPublishedTheme, themeHead } from "@bison-lab/payload-core/theme";
+import bisonConfig from "../bison.config.json";
+
+const theme = await getPublishedTheme(payload, bisonConfig);
+const { css, preloads } = themeHead(theme);
+
+// <link rel="preload" as="font" type="font/woff2" crossOrigin="" href={href} />
+// <style dangerouslySetInnerHTML={{ __html: css }} />
+```
+
+If the admin layout renders the same head, the admin panel restyles too.
+
+`getPublishedTheme` reads `draft: false` and falls back to the seed when
+nothing has been published. A newer draft never reaches the public site.
+
+**5. Own the preview route.** The path is code-owned (in the site's
+`ENDPOINTS`), never a nav link, never in the sitemap, reserved from CMS
+slugs, and gated to an authenticated user. It renders `ThemePreview` with
+no site chrome. `createTheme({ previewPath })` points Payload's live-preview
+pane at that path; omit `previewPath` and the pane stays closed.
+
+```ts
+// app/theme-preview/page.tsx
+import { ThemePreview } from "@bison-lab/payload-core/react";
+import { getPublishedTheme } from "@bison-lab/payload-core/theme";
+import bisonConfig from "../../../bison.config.json";
+
+const theme = await getPublishedTheme(payload, bisonConfig);
+
+return (
+  <ThemePreview
+    theme={theme}
+    seed={bisonConfig}
+    fontsBaseUrl="/fonts"
+    serverURL={absoluteSiteUrl}
+  />
+);
+```
+
+`ThemePreview` rebuilds the stylesheet in the browser from each live-preview
+message. A half-typed hex keeps the last complete theme so the iframe does
+not go blank. The light / dark toggle sets `data-theme` on the preview root,
+not the document. Pages that later grow a live-preview pane should import
+`THEME_PREVIEW_BREAKPOINTS` from `@bison-lab/payload-core` so the toolbars
+match.
+
 ## No generated types
 
 The package cannot import a site's `payload-types`, so the shapes it reads
-(`SeoMeta`, `SeoImageDoc`, `SeoPage`) are hand-written and structural. A
-generated `Page` and `Media` are assignable to them; nothing carries an index
-signature, since an interface will not assign to a type that has one.
+(`SeoMeta`, `SeoImageDoc`, `SeoPage`, `ThemeDoc`) are hand-written and
+structural. A generated `Page`, `Media` or Theme Global is assignable to
+them; nothing carries an index signature, since an interface will not assign
+to a type that has one.
 
 ## Changing a field
 
-`noIndexField` and the plugin's own fields are columns in every consuming
-site. A change to them is a schema change: say "run `payload migrate:create`"
-in the changeset.
+`noIndexField`, the plugin's own fields, and the Theme Global fields are
+columns in every consuming site. A change to them is a schema change: say
+"run `payload migrate:create`" in the changeset.

package/dist/admin.d.mts

@@ -0,0 +1,28 @@
+
+import { SelectFieldClientComponent, TextFieldClientComponent, UIFieldClientComponent } from "payload";
+
+//#region src/admin/color-field.d.ts
+/**
+ * Swatch, native colour input, and hex text, kept in step. `#rrggbb` on
+ * blur; the field's `validate` refuses anything else on save.
+ */
+declare const ColorField: TextFieldClientComponent;
+//#endregion
+//#region src/admin/font-field.d.ts
+/**
+ * Listbox over the catalogue ids in `admin.custom.ids`. Each option is the
+ * family name in that face, with the catalogue hint beneath. Faces load
+ * from the site's font route the first time the picker opens.
+ */
+declare const FontField: SelectFieldClientComponent;
+//#endregion
+//#region src/admin/contrast-report.d.ts
+/**
+ * Reads the five brand colours and grey scale from the form, runs
+ * `auditTheme` client-side, and paints its own rows. Warn only: nothing
+ * here touches validity.
+ */
+declare const ContrastReport: UIFieldClientComponent;
+//#endregion
+export { ColorField, ContrastReport, FontField };
+//# sourceMappingURL=admin.d.mts.map

package/dist/admin.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin.d.mts","names":[],"sources":["../src/admin/color-field.tsx","../src/admin/font-field.tsx","../src/admin/contrast-report.tsx"],"mappings":";;;;;;AAWA;;cAAa,UAAA,EAAY,wBAAA;;;;;AAAzB;;;cCGa,SAAA,EAAW,0BAAA;;;;;ADHxB;;;cEqEa,cAAA,EAAgB,sBAAA"}

package/dist/admin.mjs

@@ -0,0 +1,433 @@
+"use client";
+import { FieldDescription, FieldError, FieldLabel, useField, useFormFields } from "@payloadcms/ui";
+import { auditTheme, contrastLevelLabel, contrastVerdict, isThemeHex } from "@bison-lab/tokens";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { findFont, fontFaceCss } from "@bison-lab/fonts";
+//#region src/admin/color-field.tsx
+const HEX_ERROR = "Enter a six-digit hex colour like #1e3a5f";
+/**
+* Swatch, native colour input, and hex text, kept in step. `#rrggbb` on
+* blur; the field's `validate` refuses anything else on save.
+*/
+const ColorField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const [text, setText] = useState(value ?? "");
+	const [localError, setLocalError] = useState(null);
+	const id = useId();
+	const hexId = `${id}-hex`;
+	const pickerId = `${id}-picker`;
+	const required = Boolean(field.required);
+	const valid = isThemeHex(value);
+	const message = localError ?? errorMessage;
+	const show = Boolean(localError) || showError;
+	useEffect(() => {
+		setText(value ?? "");
+	}, [value]);
+	function commit(next) {
+		const trimmed = next.trim();
+		if (isThemeHex(trimmed)) {
+			setValue(trimmed);
+			setLocalError(null);
+			return;
+		}
+		setLocalError(HEX_ERROR);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-color-field",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-color-field",
+				precedence: "default",
+				children: CSS$2
+			}),
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: hexId,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-color-field__control",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "bl-color-field__swatch",
+						"aria-hidden": "true",
+						style: { background: valid ? value : "transparent" }
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: pickerId,
+						type: "color",
+						className: "bl-color-field__picker",
+						disabled: readOnly,
+						value: valid ? value : "#000000",
+						"aria-label": `${typeof field.label === "string" ? field.label : "Colour"} picker`,
+						onChange: (event) => {
+							setValue(event.target.value);
+							setText(event.target.value);
+							setLocalError(null);
+						}
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: hexId,
+						type: "text",
+						className: "bl-color-field__hex",
+						spellCheck: false,
+						autoComplete: "off",
+						disabled: readOnly,
+						value: text,
+						onChange: (event) => {
+							setText(event.target.value);
+							if (isThemeHex(event.target.value.trim())) {
+								setValue(event.target.value.trim());
+								setLocalError(null);
+							}
+						},
+						onBlur: () => commit(text)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				path,
+				showError: show,
+				message
+			})
+		]
+	});
+};
+const CSS$2 = `
+.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}
+.bl-color-field__picker:disabled{cursor:not-allowed;opacity:.6}
+.bl-color-field__hex{flex:1;min-width:0;min-height:calc(var(--base) * 2);padding:calc(var(--base) * .25) calc(var(--base) * .6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:var(--theme-elevation-800);font-family:var(--font-mono);font-size:13px}
+.bl-color-field__hex:focus{border-color:var(--theme-elevation-400);outline:none;box-shadow:0 0 0 1px var(--theme-elevation-400)}
+.bl-color-field__hex:disabled{color:var(--theme-elevation-400)}
+`;
+//#endregion
+//#region src/admin/font-field.tsx
+/**
+* Listbox over the catalogue ids in `admin.custom.ids`. Each option is the
+* family name in that face, with the catalogue hint beneath. Faces load
+* from the site's font route the first time the picker opens.
+*/
+const FontField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const custom = field.admin?.custom ?? {};
+	const ids = custom.ids ?? [];
+	const fontsBaseUrl = custom.fontsBaseUrl ?? "/fonts";
+	const sameAsBody = Boolean(custom.sameAsBody);
+	const options = useMemo(() => {
+		const fromCatalogue = ids.flatMap((id) => {
+			const font = findFont(id);
+			if (!font) return [];
+			return [{
+				value: font.id,
+				family: font.family,
+				hint: font.hint,
+				specimen: true
+			}];
+		});
+		if (!sameAsBody) return fromCatalogue;
+		return [{
+			value: "",
+			family: "Same as body",
+			hint: "Use the body family for headings",
+			specimen: false
+		}, ...fromCatalogue];
+	}, [ids, sameAsBody]);
+	const [open, setOpen] = useState(false);
+	const [faces, setFaces] = useState(false);
+	const [active, setActive] = useState(-1);
+	const typed = useRef("");
+	const typedAt = useRef(0);
+	const id = useId();
+	const buttonId = `${id}-button`;
+	const listId = `${id}-list`;
+	const required = Boolean(field.required);
+	useEffect(() => {
+		if (open) setFaces(true);
+	}, [open]);
+	const selected = options.find((option) => option.value === (value ?? "")) ?? options[0];
+	function choose(option) {
+		setValue(option.value);
+		setOpen(false);
+		setActive(-1);
+	}
+	function onKeyDown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (!open) {
+				setOpen(true);
+				setActive(0);
+				return;
+			}
+			setActive((i) => options.length ? (i + 1) % options.length : -1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) {
+				setOpen(true);
+				setActive(options.length - 1);
+				return;
+			}
+			setActive((i) => options.length ? i <= 0 ? options.length - 1 : i - 1 : -1);
+		} else if (event.key === "Enter") {
+			if (!open) return;
+			event.preventDefault();
+			const pick = options[active] ?? options[0];
+			if (pick) choose(pick);
+		} else if (event.key === "Escape") {
+			if (!open) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+			setActive(-1);
+		} else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			const now = Date.now();
+			typed.current = now - typedAt.current > 600 ? event.key : typed.current + event.key;
+			typedAt.current = now;
+			const needle = typed.current.toLowerCase();
+			const index = options.findIndex((option) => option.family.toLowerCase().startsWith(needle));
+			if (index >= 0) {
+				if (!open) setOpen(true);
+				setActive(index);
+			}
+		}
+	}
+	const activeId = active >= 0 && open ? `${id}-option-${active}` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-font-field",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-font-field",
+				precedence: "default",
+				children: CSS$1
+			}),
+			faces ? /* @__PURE__ */ jsx("style", {
+				"data-bl-font-faces": "",
+				children: fontFaceCss(ids, fontsBaseUrl)
+			}) : null,
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: buttonId,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-font-field__control",
+				children: [/* @__PURE__ */ jsx("button", {
+					id: buttonId,
+					type: "button",
+					className: "bl-font-field__trigger",
+					disabled: readOnly,
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-controls": listId,
+					"aria-activedescendant": activeId,
+					onClick: () => setOpen((was) => !was),
+					onBlur: () => setOpen(false),
+					onKeyDown,
+					children: selected?.family ?? "Choose a font"
+				}), open ? /* @__PURE__ */ jsx("ul", {
+					id: listId,
+					role: "listbox",
+					className: "bl-font-field__menu",
+					children: options.map((option, i) => /* @__PURE__ */ jsxs("li", {
+						id: `${id}-option-${i}`,
+						role: "option",
+						"aria-selected": option.value === (value ?? ""),
+						className: "bl-font-field__option",
+						onMouseDown: (event) => {
+							event.preventDefault();
+							choose(option);
+						},
+						onMouseEnter: () => setActive(i),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "bl-font-field__family",
+							style: option.specimen ? { fontFamily: `"${option.family}"` } : void 0,
+							children: option.family
+						}), /* @__PURE__ */ jsx("span", {
+							className: "bl-font-field__hint",
+							children: option.hint
+						})]
+					}, option.value || "same"))
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				path,
+				showError,
+				message: errorMessage
+			})
+		]
+	});
+};
+const CSS$1 = `
+.bl-font-field__control{position:relative}
+.bl-font-field__trigger{display:flex;align-items:center;width:100%;min-height:calc(var(--base) * 2);padding:calc(var(--base) * .25) calc(var(--base) * .6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:var(--theme-elevation-800);font:inherit;text-align:left;cursor:pointer}
+.bl-font-field__trigger:focus{border-color:var(--theme-elevation-400);outline:none;box-shadow:0 0 0 1px var(--theme-elevation-400)}
+.bl-font-field__trigger:disabled{color:var(--theme-elevation-400);cursor:not-allowed}
+.bl-font-field__menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;margin:0;padding:calc(var(--base) * .2) 0;list-style:none;max-height:18rem;overflow:auto;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0);box-shadow:0 8px 24px var(--theme-overlay)}
+.bl-font-field__option{display:flex;flex-direction:column;gap:2px;padding:calc(var(--base) * .35) calc(var(--base) * .6);cursor:pointer}
+.bl-font-field__option[aria-selected="true"],.bl-font-field__option:hover{background:var(--theme-elevation-100)}
+.bl-font-field__family{font-weight:500}
+.bl-font-field__hint{color:var(--theme-elevation-500);font-size:12px}
+`;
+//#endregion
+//#region src/admin/contrast-report.tsx
+function fieldValue(fields, path) {
+	return fields[path]?.value;
+}
+function isCompleteBrand(values) {
+	return isThemeHex(values.primary) && isThemeHex(values.secondary) && isThemeHex(values.accent) && isThemeHex(values.highlight) && isThemeHex(values.success) && typeof values.greyScale === "string";
+}
+function LevelIcon({ level }) {
+	if (level === "fail") return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "14",
+		height: "14",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M8 1.5 1.5 14h13L8 1.5zm0 4.2c.4 0 .7.3.7.8v3.2c0 .4-.3.8-.7.8s-.8-.4-.8-.8V6.5c0-.5.4-.8.8-.8zm0 6.3a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6z"
+		})
+	});
+	if (level === "aa-large") return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "14",
+		height: "14",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M3 8h10v1.5H3z"
+		})
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "14",
+		height: "14",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M8 1.2a6.8 6.8 0 1 1 0 13.6A6.8 6.8 0 0 1 8 1.2zm3.1 4.3L7.2 9.4 5 7.2l-.9.9 3.1 3.1 4.8-4.8-.9-.9z"
+		})
+	});
+}
+/**
+* Reads the five brand colours and grey scale from the form, runs
+* `auditTheme` client-side, and paints its own rows. Warn only: nothing
+* here touches validity.
+*/
+const ContrastReport = ({ field }) => {
+	const target = Number((field.admin?.custom)?.target) || 4.5;
+	const values = useFormFields(([fields]) => {
+		const record = fields;
+		return {
+			primary: fieldValue(record, "brand.primary"),
+			secondary: fieldValue(record, "brand.secondary"),
+			accent: fieldValue(record, "brand.accent"),
+			highlight: fieldValue(record, "brand.highlight"),
+			success: fieldValue(record, "brand.success"),
+			greyScale: fieldValue(record, "greyScale")
+		};
+	});
+	const last = useRef(null);
+	const complete = isCompleteBrand(values);
+	if (complete) last.current = auditTheme({
+		brandPrimary: values.primary,
+		brandSecondary: values.secondary,
+		brandAccent: values.accent,
+		brandHighlight: values.highlight,
+		brandSuccess: values.success,
+		greyScale: values.greyScale
+	}, { target });
+	const checks = last.current;
+	const stale = Boolean(checks) && !complete;
+	const failing = checks?.filter((check) => !check.meetsTarget).length ?? 0;
+	const summary = !checks ? "Enter five hex colours to measure contrast." : failing === 0 ? `Every pairing meets ${target}:1` : `${failing} of ${checks.length} pairings below ${target}:1`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-contrast-report",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-contrast-report",
+				precedence: "default",
+				children: CSS
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "bl-contrast-report__summary",
+				children: summary
+			}),
+			stale ? /* @__PURE__ */ jsx("p", {
+				className: "bl-contrast-report__stale",
+				children: "Showing the last complete audit while a colour is being typed."
+			}) : null,
+			checks ? /* @__PURE__ */ jsx("ul", {
+				className: "bl-contrast-report__list",
+				children: checks.flatMap((check) => ["light", "dark"].map((mode) => {
+					const sample = check[mode];
+					const failingRow = sample.ratio < check.target;
+					const verdict = contrastVerdict(sample, check.target);
+					return /* @__PURE__ */ jsxs("li", {
+						className: "bl-contrast-report__row",
+						"data-failing": failingRow ? "" : void 0,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "bl-contrast-report__swatch",
+								style: {
+									color: `hsl(${sample.foreground})`,
+									backgroundColor: `hsl(${sample.background})`
+								},
+								children: "Aa"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "bl-contrast-report__ratio",
+								children: [sample.ratio.toFixed(2), ":1"]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "bl-contrast-report__level",
+								children: [/* @__PURE__ */ jsx(LevelIcon, { level: sample.level }), contrastLevelLabel(sample.level)]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "bl-contrast-report__verdict",
+								children: verdict.text
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "bl-contrast-report__label",
+								children: [
+									check.label,
+									" (",
+									mode === "light" ? "Light" : "Dark",
+									")"
+								]
+							})
+						]
+					}, `${check.id}-${mode}`);
+				}))
+			}) : null
+		]
+	});
+};
+const CSS = `
+.bl-contrast-report{margin:calc(var(--base) * .6) 0}
+.bl-contrast-report__summary{margin:0 0 calc(var(--base) * .3);font-weight:600}
+.bl-contrast-report__stale{margin:0 0 calc(var(--base) * .3);color:var(--theme-elevation-500);font-size:12px}
+.bl-contrast-report__list{margin:0;padding:0;list-style:none;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0)}
+.bl-contrast-report__row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--base) * .4);padding:calc(var(--base) * .35) calc(var(--base) * .6);border-top:1px solid var(--theme-elevation-100)}
+.bl-contrast-report__row:first-child{border-top:0}
+.bl-contrast-report__row[data-failing]{background:var(--theme-error-50)}
+.bl-contrast-report__swatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:1.75rem;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);font-weight:600}
+.bl-contrast-report__ratio{width:4.5rem;font-variant-numeric:tabular-nums}
+.bl-contrast-report__level{display:inline-flex;align-items:center;gap:4px;width:5.5rem}
+.bl-contrast-report__verdict{width:6rem;font-weight:600}
+.bl-contrast-report__label{flex:1;min-width:12rem;color:var(--theme-elevation-500)}
+`;
+//#endregion
+export { ColorField, ContrastReport, FontField };
+
+//# sourceMappingURL=admin.mjs.map