@bison-lab/payload-core 3.10.0 → 3.11.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { n as documentTitle, r as titleTemplate, t as SHARE_IMAGE_SIZE } from "./share-image-C4ILz4p2.mjs";
-import { C as headingSelectValue, S as THEME_SECTION_HEADING, _ as THEME_IDENTITY_FALLBACK, a as SYSTEM_COLOR_KEYS, b as THEME_PUBLISH_FIELD, c as themeConfigFromDoc, d as THEME_APPEARANCE_FIELD, f as THEME_COLOR_FIELD, g as THEME_GREY_SCALE_FIELD, h as THEME_FONT_FIELD, i as themeColorKeys, l as validateSourceIncluded, m as THEME_CONTRAST_REPORT, n as deleteLibraryColor, o as THEME_SLUG, p as THEME_COLOR_SCALE_FIELD, r as rewriteColorToken, s as docFromConfig, t as resolveThemeIdentity, u as validateThemeHex, v as THEME_LIBRARY_FIELD, x as THEME_SAVE_BUTTON, y as THEME_PAIRING_FIELD } from "./identity-Bg-G05mb.mjs";
+import { A as THEME_IDENTITY_FALLBACK, C as THEME_APPEARANCE_FIELD, D as THEME_DOCUMENT_CONTROLS, E as THEME_CONTRAST_REPORT, F as THEME_SECTION_HEADING, I as headingSelectValue, M as THEME_PAIRING_FIELD, N as THEME_PUBLISH_FIELD, O as THEME_FONT_FIELD, P as THEME_SAVE_BUTTON, S as LOOK_FIELD, T as THEME_COLOR_SCALE_FIELD, _ as docFromConfig, a as pageEditorLooks, b as validateSourceIncluded, c as deleteLibraryColor, d as SYSTEM_COLOR_KEYS, f as THEME_APPEARANCE_SLUG, g as THEME_TYPOGRAPHY_SLUG, h as THEME_SLUG, i as PAGE_EDITOR_SYSTEM_KEYS, j as THEME_LIBRARY_FIELD, k as THEME_GREY_SCALE_FIELD, l as rewriteColorToken, m as THEME_IDENTITY_SLUG, n as colorTokenField, o as pageEditorTokens, p as THEME_COLORS_SLUG, r as lookField, s as themeLibraryFromDoc, t as resolveThemeIdentity, u as themeColorKeys, w as THEME_COLOR_FIELD, x as validateThemeHex, y as themeConfigFromDoc } from "./identity-DZOb3_Gk.mjs";
 import { seoPlugin as seoPlugin$1 } from "@payloadcms/plugin-seo";
 import { catalog } from "@bison-lab/fonts";
-import { SHADE_STEPS, presetHints } from "@bison-lab/tokens";
+import { DESTRUCTIVE_SCALE_HEX, SHADE_STEPS, presetHints } from "@bison-lab/tokens";
 //#region src/seo/fields.ts
 /**
 * The index switch, last in the SEO tab. Off by default: a page is public
@@ -163,12 +163,6 @@ const APPEARANCE_CHOICES = {
 };
 //#endregion
 //#region src/theme/publish.ts
-const THEME_CHILDREN = [
-	"colors",
-	"typography",
-	"appearance",
-	"identity"
-];
 /**
 * Publishing a child writes that slice only. Other responsibilities stay
 * as they already are on the stored document. Unsaved form state on a
@@ -196,11 +190,52 @@ function publishThemeChild(stored, incoming, child) {
 		logoMark: incoming.logoMark
 	};
 }
-function isThemeChild(value) {
-	return typeof value === "string" && THEME_CHILDREN.includes(value);
+function sliceFromTheme(theme, child) {
+	if (child === "colors") return { colors: theme.colors };
+	if (child === "typography") return { typography: theme.typography };
+	if (child === "appearance") return { appearance: theme.appearance };
+	return {
+		logo: theme.logo,
+		favicon: theme.favicon,
+		logoMark: theme.logoMark
+	};
+}
+function colorHex(color) {
+	if (typeof color === "string") return color;
+	return color?.hex ?? void 0;
+}
+/**
+* A Theme page is a real Global. Hydrate from the store only when this
+* page has never been saved — otherwise afterRead would overwrite the form.
+*/
+function hasThemeSlice(doc, child) {
+	if (!doc) return false;
+	if (child === "colors") return Boolean(colorHex(doc.colors?.brand?.primary));
+	if (child === "typography") return Boolean(doc.typography?.body);
+	if (child === "appearance") return Boolean(doc.appearance?.radius);
+	return Boolean(doc.logo || doc.favicon || doc.logoMark);
+}
+/**
+* Save on a Theme page writes that slice onto the hidden `theme` row.
+* Other children stay as stored.
+*/
+async function persistThemeChild(payload, incoming, child) {
+	const next = publishThemeChild(await payload.findGlobal({
+		slug: "theme",
+		draft: false,
+		overrideAccess: true
+	}) ?? {}, incoming, child);
+	await payload.updateGlobal({
+		slug: THEME_SLUG,
+		data: next,
+		draft: false
+	});
+	return next;
 }
 //#endregion
 //#region src/theme/global.ts
+/** Same value as tokens `SUCCESS_SCALE_HEX`. Inlined so an older tokens peer still boots. */
+const LIBRARY_SUCCESS_HEX = "#22c55e";
 function requireAccess$1(options) {
 	const read = options.access?.read;
 	const update = options.access?.update;
@@ -211,9 +246,7 @@ function requireAccess$1(options) {
 	};
 }
 function requireDestructive(options) {
-	const hex = options.destructive ?? options.seed.brandDestructive;
-	if (!hex) throw new Error("createTheme requires a destructive hex: pass options.destructive or seed.brandDestructive. There is no package default.");
-	return hex;
+	return options.destructive ?? options.seed.brandDestructive ?? DESTRUCTIVE_SCALE_HEX;
 }
 function namedSelect(name, label, choices, defaultValue, field) {
 	return {
@@ -306,7 +339,10 @@ function systemColorGroup(name, label, hexDefault) {
 		type: "group",
 		label,
 		fields: colorScaleFields(hexDefault),
-		admin: { components: { Field: THEME_COLOR_SCALE_FIELD } }
+		admin: {
+			components: { Field: THEME_COLOR_SCALE_FIELD },
+			hideGutter: true
+		}
 	};
 }
 function fontField(name, label, defaultValue, fonts, fontsBaseUrl, sameAsBody) {
@@ -334,205 +370,265 @@ function fontField(name, label, defaultValue, fonts, fontsBaseUrl, sameAsBody) {
 		}
 	};
 }
-/**
-* Settings → Theme. Field tabs: Colors, Typography, Appearance, Identity.
-* Publish in the Save slot writes the open tab only. No draft mode: a
-* save is live. `getPublishedTheme` reads that row. There is no Theme
-* preview pane.
-*/
-function createTheme(options) {
-	const access = requireAccess$1(options);
-	const destructive = requireDestructive(options);
-	const { seed, fonts = catalog, fontsBaseUrl = "/fonts", contrastTarget = 7, logo, identity, onPublish } = options;
-	const tabs = [
-		{
-			label: "Colors",
-			fields: [{
-				name: "colors",
+function colorsFields(seed, destructive) {
+	return [{
+		name: "colors",
+		type: "group",
+		label: false,
+		admin: {
+			hideGutter: true,
+			width: "100%"
+		},
+		fields: [
+			{
+				name: "brand",
 				type: "group",
 				label: false,
+				admin: {
+					hideGutter: true,
+					width: "100%"
+				},
 				fields: [
 					{
-						name: "brand",
-						type: "group",
-						label: false,
-						fields: [
-							{
-								name: "themeColorsHeading",
-								type: "ui",
-								admin: {
-									components: { Field: THEME_SECTION_HEADING },
-									custom: {
-										title: "Theme colors",
-										hint: "House semantic fills page editors can pick. Custom colors sit with these."
-									}
-								}
-							},
-							systemColorGroup("primary", "Primary", seed.brandPrimary),
-							systemColorGroup("secondary", "Secondary", seed.brandSecondary),
-							systemColorGroup("accent", "Accent", seed.brandAccent),
-							systemColorGroup("highlight", "Highlight", seed.brandHighlight),
-							{
-								name: "statusColorsHeading",
-								type: "ui",
-								admin: {
-									components: { Field: THEME_SECTION_HEADING },
-									custom: {
-										title: "Success and Destructive",
-										hint: "Theme chrome only. These are not offered as fills when someone is writing a page."
-									}
-								}
-							},
-							systemColorGroup("success", "Success", seed.brandSuccess),
-							systemColorGroup("destructive", "Destructive", destructive)
-						]
+						name: "themeColorsHeading",
+						type: "ui",
+						admin: {
+							components: { Field: THEME_SECTION_HEADING },
+							custom: {
+								title: "Brand colors",
+								hint: "These colors define the visual identity of the site. Adjust them freely to match the brand."
+							}
+						}
 					},
-					namedSelect("greyScale", "Gray family", presetHints.greyScale, seed.greyScale, THEME_GREY_SCALE_FIELD),
+					systemColorGroup("primary", "Primary", seed.brandPrimary),
+					systemColorGroup("secondary", "Secondary", seed.brandSecondary),
+					systemColorGroup("accent", "Accent", seed.brandAccent),
+					systemColorGroup("highlight", "Highlight", seed.brandHighlight),
 					{
-						name: "library",
-						type: "array",
-						label: "Custom colors",
-						labels: {
-							singular: "Color",
-							plural: "Colors"
-						},
-						fields: [
-							{
-								name: "key",
-								type: "text",
-								label: "Key",
-								required: true,
-								admin: { hidden: true }
-							},
-							{
-								name: "label",
-								type: "text",
-								label: "Name",
-								required: true,
-								admin: { hidden: true }
-							},
-							...colorScaleFields()
-						],
-						admin: { components: { Field: THEME_LIBRARY_FIELD } }
-					}
-				]
-			}, {
-				name: "contrast",
-				type: "ui",
-				admin: {
-					components: { Field: THEME_CONTRAST_REPORT },
-					custom: { target: contrastTarget }
-				}
-			}]
-		},
-		{
-			label: "Typography",
-			fields: [{
-				name: "typography",
-				type: "group",
-				label: false,
-				fields: [
-					fontField("heading", "Heading font", headingSelectValue(seed.fontHeading), fonts, fontsBaseUrl, true),
-					fontField("body", "Body font", seed.fontBody, fonts, fontsBaseUrl, false),
+						name: "libraryPlacement",
+						type: "ui",
+						admin: {
+							components: { Field: THEME_LIBRARY_FIELD },
+							custom: { dataPath: "colors.library" }
+						}
+					},
+					{
+						name: "greyPlacement",
+						type: "ui",
+						admin: {
+							components: { Field: THEME_GREY_SCALE_FIELD },
+							custom: { dataPath: "colors.greyScale" }
+						}
+					},
 					{
-						name: "pairing",
+						name: "statusColorsHeading",
 						type: "ui",
 						admin: {
-							components: { Field: THEME_PAIRING_FIELD },
-							custom: { fontsBaseUrl }
+							components: { Field: THEME_SECTION_HEADING },
+							custom: {
+								title: "Status colors",
+								hint: "These colors communicate meaning across the site. You can adjust them to fit your brand, but we'll help keep them recognizable as success and error states."
+							}
 						}
-					}
+					},
+					systemColorGroup("success", "Success", seed.brandSuccess || LIBRARY_SUCCESS_HEX),
+					systemColorGroup("destructive", "Destructive", destructive)
 				]
-			}]
-		},
-		{
-			label: "Appearance",
-			fields: [{
-				name: "appearance",
-				type: "group",
-				label: false,
-				fields: [
-					namedSelect("defaultTheme", "Default theme", APPEARANCE_CHOICES.defaultTheme, seed.defaultTheme),
-					namedSelect("radius", "Corner style", APPEARANCE_CHOICES.radius, seed.radius),
-					namedSelect("shadow", "Depth", APPEARANCE_CHOICES.shadow, seed.shadow),
-					namedSelect("motion", "Motion", APPEARANCE_CHOICES.motion, seed.motion),
-					namedSelect("density", "Spacing", APPEARANCE_CHOICES.density, seed.density)
-				],
-				admin: { components: { Field: THEME_APPEARANCE_FIELD } }
-			}]
-		}
-	];
-	tabs.push({
-		label: "Identity",
-		fields: logo ? [
-			{
-				name: "logo",
-				type: "upload",
-				relationTo: logo.collection,
-				label: "Logo",
-				admin: { description: "The full wordmark used in the header and footer." }
 			},
 			{
-				name: "favicon",
-				type: "upload",
-				relationTo: logo.collection,
-				label: "Favicon",
-				admin: { description: "The small icon in the browser tab. PNG or SVG." }
+				...namedSelect("greyScale", "Gray family", presetHints.greyScale, seed.greyScale, THEME_GREY_SCALE_FIELD),
+				admin: {
+					hidden: true,
+					components: { Field: THEME_GREY_SCALE_FIELD }
+				}
 			},
 			{
-				name: "logoMark",
-				type: "upload",
-				relationTo: logo.collection,
-				label: "Mobile menu logo",
-				admin: { description: "Optional. Used when the full logo is too wide for the mobile menu — typically the mark." }
+				name: "library",
+				type: "array",
+				label: "Additional colors",
+				labels: {
+					singular: "Color",
+					plural: "Colors"
+				},
+				fields: [
+					{
+						name: "key",
+						type: "text",
+						label: "Key",
+						required: true,
+						admin: { hidden: true }
+					},
+					{
+						name: "label",
+						type: "text",
+						label: "Name",
+						required: true,
+						admin: { hidden: true }
+					},
+					...colorScaleFields()
+				],
+				admin: {
+					hidden: true,
+					components: { Field: THEME_LIBRARY_FIELD },
+					width: "100%"
+				}
 			}
-		] : [{
-			name: "identityFallback",
-			type: "ui",
-			admin: {
-				components: { Field: THEME_IDENTITY_FALLBACK },
-				custom: { fallback: identity?.fallback }
+		]
+	}];
+}
+function typographyFields(seed, fonts, fontsBaseUrl) {
+	return [{
+		name: "typography",
+		type: "group",
+		label: "Typography",
+		fields: [
+			fontField("heading", "Heading font", headingSelectValue(seed.fontHeading), fonts, fontsBaseUrl, true),
+			fontField("body", "Body font", seed.fontBody, fonts, fontsBaseUrl, false),
+			{
+				name: "pairing",
+				type: "ui",
+				admin: {
+					components: { Field: THEME_PAIRING_FIELD },
+					custom: { fontsBaseUrl }
+				}
 			}
-		}]
-	});
-	const fields = [{
-		type: "tabs",
-		tabs
-	}, {
-		name: "publishChild",
-		type: "text",
-		admin: { hidden: true }
+		]
 	}];
+}
+function appearanceFields(seed) {
+	return [{
+		name: "appearance",
+		type: "group",
+		label: "Appearance",
+		fields: [
+			namedSelect("defaultTheme", "Default theme", APPEARANCE_CHOICES.defaultTheme, seed.defaultTheme),
+			namedSelect("radius", "Corner style", APPEARANCE_CHOICES.radius, seed.radius),
+			namedSelect("shadow", "Depth", APPEARANCE_CHOICES.shadow, seed.shadow),
+			namedSelect("motion", "Motion", APPEARANCE_CHOICES.motion, seed.motion),
+			namedSelect("density", "Spacing", APPEARANCE_CHOICES.density, seed.density)
+		],
+		admin: { components: { Field: THEME_APPEARANCE_FIELD } }
+	}];
+}
+function identityFields(collection) {
+	return [
+		{
+			name: "logo",
+			type: "upload",
+			relationTo: collection,
+			label: "Logo",
+			admin: { description: "The full wordmark used in the header and footer." }
+		},
+		{
+			name: "favicon",
+			type: "upload",
+			relationTo: collection,
+			label: "Favicon",
+			admin: { description: "The small icon in the browser tab. PNG or SVG." }
+		},
+		{
+			name: "logoMark",
+			type: "upload",
+			relationTo: collection,
+			label: "Mobile menu logo",
+			admin: { description: "Optional. Used when the full logo is too wide for the mobile menu — typically the mark." }
+		}
+	];
+}
+function pageHooks(child) {
 	return {
+		beforeChange: [async ({ data, req }) => {
+			if (req?.payload) await persistThemeChild(req.payload, data, child);
+			return data;
+		}],
+		afterRead: [async ({ doc, req }) => {
+			if (hasThemeSlice(doc, child)) return doc;
+			const theme = await req?.payload?.findGlobal({
+				slug: THEME_SLUG,
+				draft: false,
+				depth: child === "identity" ? 1 : 0,
+				overrideAccess: true
+			});
+			if (!theme) return doc;
+			return {
+				...doc,
+				...sliceFromTheme(theme, child)
+			};
+		}]
+	};
+}
+/**
+* Standard Payload Globals in an `admin.group: "Theme"` nav section —
+* the same pattern as Content and Settings. Each page is its own Global
+* (Save, fields, access). A hidden `theme` store is the published read
+* model `getPublishedTheme` already knows. Locking is off: these are
+* settings forms, not collaborative documents. No draft mode, no preview
+* pane.
+*/
+function createTheme(options) {
+	const access = requireAccess$1(options);
+	const destructive = requireDestructive(options);
+	const { seed, fonts = catalog, fontsBaseUrl = "/fonts", contrastTarget = 7, logo, identity, onPublish } = options;
+	const adminCustom = {
+		contrastTarget,
+		fontsBaseUrl,
+		identityFallback: identity?.fallback
+	};
+	const colorFields = colorsFields(seed, destructive);
+	const typeFields = typographyFields(seed, fonts, fontsBaseUrl);
+	const lookFields = appearanceFields(seed);
+	const markFields = logo ? identityFields(logo.collection) : [];
+	const store = {
 		slug: THEME_SLUG,
 		label: "Theme",
+		lockDocuments: false,
 		admin: {
-			group: "Settings",
-			custom: {
-				contrastTarget,
-				fontsBaseUrl,
-				identityFallback: identity?.fallback
-			},
-			components: { elements: { SaveButton: THEME_SAVE_BUTTON } }
+			hidden: true,
+			hideAPIURL: true,
+			custom: adminCustom
 		},
 		access: {
 			read: access.read,
 			update: access.update
 		},
-		fields,
-		hooks: {
-			beforeChange: [({ data, originalDoc }) => {
-				const { publishChild, ...rest } = data;
-				if (isThemeChild(publishChild)) return publishThemeChild(originalDoc ?? {}, rest, publishChild);
-				return rest;
-			}],
-			afterChange: [async ({ doc }) => {
-				if (!onPublish) return;
-				const themeDoc = doc;
-				await onPublish(themeConfigFromDoc(themeDoc, seed), themeDoc);
-			}]
-		}
+		fields: [
+			...colorFields,
+			...typeFields,
+			...lookFields,
+			...markFields
+		],
+		hooks: { afterChange: [async ({ doc }) => {
+			if (!onPublish) return;
+			const themeDoc = doc;
+			await onPublish(themeConfigFromDoc(themeDoc, seed), themeDoc);
+		}] }
 	};
+	function page(slug, label, child, fields, preview) {
+		return {
+			slug,
+			label,
+			lockDocuments: false,
+			admin: {
+				group: "Theme",
+				hideAPIURL: true,
+				custom: adminCustom,
+				components: preview ? { elements: { beforeDocumentControls: [THEME_DOCUMENT_CONTROLS] } } : void 0
+			},
+			access: {
+				read: access.read,
+				update: access.update
+			},
+			fields,
+			hooks: pageHooks(child)
+		};
+	}
+	return [
+		store,
+		page(THEME_COLORS_SLUG, "Colors", "colors", colorFields, true),
+		page(THEME_TYPOGRAPHY_SLUG, "Typography", "typography", typeFields, true),
+		page(THEME_APPEARANCE_SLUG, "Appearance", "appearance", lookFields, true),
+		...logo ? [page(THEME_IDENTITY_SLUG, "Identity", "identity", markFields, false)] : []
+	];
 }
 //#endregion
 //#region src/brand-assets/sanitize.ts
@@ -681,6 +777,6 @@ const THEME_PREVIEW_BREAKPOINTS = [
 	}
 ];
 //#endregion
-export { BRAND_ASSETS_MIME_TYPES, BRAND_ASSETS_SLUG, DESCRIPTION_LENGTH, SHARE_IMAGE_SIZE, SYSTEM_COLOR_KEYS, THEME_APPEARANCE_FIELD, THEME_COLOR_FIELD, THEME_COLOR_SCALE_FIELD, THEME_CONTRAST_REPORT, THEME_FONT_FIELD, THEME_GREY_SCALE_FIELD, THEME_IDENTITY_FALLBACK, THEME_LIBRARY_FIELD, THEME_PAIRING_FIELD, THEME_PREVIEW_BREAKPOINTS, THEME_PUBLISH_FIELD, THEME_SAVE_BUTTON, THEME_SECTION_HEADING, THEME_SLUG, createBrandAssets, createTheme, deleteLibraryColor, documentTitle, firstImageIn, noIndexField, publishThemeChild, resolveThemeIdentity, rewriteColorToken, sanitizeSvg, seedTheme, seoPlugin, themeColorKeys, titleTemplate, truncateAtWord };
+export { BRAND_ASSETS_MIME_TYPES, BRAND_ASSETS_SLUG, DESCRIPTION_LENGTH, LOOK_FIELD, PAGE_EDITOR_SYSTEM_KEYS, SHARE_IMAGE_SIZE, SYSTEM_COLOR_KEYS, THEME_APPEARANCE_FIELD, THEME_APPEARANCE_SLUG, THEME_COLORS_SLUG, THEME_COLOR_FIELD, THEME_COLOR_SCALE_FIELD, THEME_CONTRAST_REPORT, THEME_DOCUMENT_CONTROLS, THEME_FONT_FIELD, THEME_GREY_SCALE_FIELD, THEME_IDENTITY_FALLBACK, THEME_IDENTITY_SLUG, THEME_LIBRARY_FIELD, THEME_PAIRING_FIELD, THEME_PREVIEW_BREAKPOINTS, THEME_PUBLISH_FIELD, THEME_SAVE_BUTTON, THEME_SECTION_HEADING, THEME_SLUG, THEME_TYPOGRAPHY_SLUG, colorTokenField, createBrandAssets, createTheme, deleteLibraryColor, documentTitle, firstImageIn, lookField, noIndexField, pageEditorLooks, pageEditorTokens, persistThemeChild, publishThemeChild, resolveThemeIdentity, rewriteColorToken, sanitizeSvg, seedTheme, seoPlugin, themeColorKeys, themeLibraryFromDoc, titleTemplate, truncateAtWord };
 
 //# sourceMappingURL=index.mjs.map