@bison-lab/payload-core 3.7.0 → 3.9.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 { a as THEME_COLOR_FIELD, c as headingSelectValue, i as validateThemeHex, n as docFromConfig, o as THEME_CONTRAST_REPORT, r as themeConfigFromDoc, s as THEME_FONT_FIELD, t as THEME_SLUG } from "./types-DWwL-JEr.mjs";
+import { S as headingSelectValue, _ as THEME_LIBRARY_FIELD, a as SYSTEM_COLOR_KEYS, b as THEME_SAVE_BUTTON, 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_PAIRING_FIELD, x as THEME_SECTION_HEADING, y as THEME_PUBLISH_FIELD } from "./identity-D1X0Om4Z.mjs";
 import { seoPlugin as seoPlugin$1 } from "@payloadcms/plugin-seo";
 import { catalog } from "@bison-lab/fonts";
-import { presetHints } from "@bison-lab/tokens";
+import { 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
@@ -79,8 +79,129 @@ function firstImageIn(blocks, field = "image") {
 	}
 }
 //#endregion
+//#region src/theme/appearance-labels.ts
+/**
+* Named choices the Appearance child shows. Values stay the token presets;
+* labels match the mock workflow (Soft → pill, Gentle → minimal, Balanced
+* → default, Follow device → system). No rem, ms, or CSS variable tables.
+*/
+const APPEARANCE_CHOICES = {
+	defaultTheme: {
+		light: {
+			label: "Light",
+			hint: "Always opens in light mode"
+		},
+		dark: {
+			label: "Dark",
+			hint: "Always opens in dark mode"
+		},
+		system: {
+			label: "Follow device",
+			hint: "Matches the visitor’s system setting"
+		}
+	},
+	radius: {
+		sharp: {
+			label: "Sharp",
+			hint: "Crisp and structured"
+		},
+		subtle: {
+			label: "Subtle",
+			hint: "Clean with a little softness"
+		},
+		rounded: {
+			label: "Rounded",
+			hint: "Friendly and contemporary"
+		},
+		pill: {
+			label: "Soft",
+			hint: "Very rounded and expressive"
+		}
+	},
+	shadow: {
+		flat: {
+			label: "Flat",
+			hint: "Minimal visual depth"
+		},
+		subtle: {
+			label: "Subtle",
+			hint: "Light separation between surfaces"
+		},
+		elevated: {
+			label: "Elevated",
+			hint: "More noticeable layering and depth"
+		}
+	},
+	motion: {
+		snappy: {
+			label: "Quick",
+			hint: "Fast and responsive"
+		},
+		smooth: {
+			label: "Smooth",
+			hint: "Balanced and natural"
+		},
+		minimal: {
+			label: "Gentle",
+			hint: "Slower and more relaxed"
+		}
+	},
+	density: {
+		compact: {
+			label: "Compact",
+			hint: "Fits more content on screen"
+		},
+		default: {
+			label: "Balanced",
+			hint: "Comfortable for most sites"
+		},
+		spacious: {
+			label: "Spacious",
+			hint: "More breathing room and larger controls"
+		}
+	}
+};
+//#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
+* different child never goes live. A first save (no stored row) still
+* writes only the named child; `getPublishedTheme` fills the rest from
+* the seed.
+*/
+function publishThemeChild(stored, incoming, child) {
+	if (child === "colors") return {
+		...stored,
+		colors: incoming.colors
+	};
+	if (child === "typography") return {
+		...stored,
+		typography: incoming.typography
+	};
+	if (child === "appearance") return {
+		...stored,
+		appearance: incoming.appearance
+	};
+	return {
+		...stored,
+		logo: incoming.logo,
+		favicon: incoming.favicon,
+		logoMark: incoming.logoMark
+	};
+}
+function isThemeChild(value) {
+	return typeof value === "string" && THEME_CHILDREN.includes(value);
+}
+//#endregion
 //#region src/theme/global.ts
-function requireAccess(options) {
+function requireAccess$1(options) {
 	const read = options.access?.read;
 	const update = options.access?.update;
 	if (!read || !update) throw new Error("createTheme requires access.read and access.update. Pass the site's predicates; canManageBrand is the intended update predicate until BIS-43 moves src/platform here.");
@@ -89,28 +210,103 @@ function requireAccess(options) {
 		update
 	};
 }
-function hintSelect(name, label, hints, defaultValue) {
+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;
+}
+function namedSelect(name, label, choices, defaultValue, field) {
 	return {
 		name,
 		type: "select",
 		label,
 		required: true,
 		defaultValue,
-		options: Object.entries(hints).map(([value, { label: optionLabel, hint }]) => ({
+		options: Object.entries(choices).map(([value, { label: optionLabel, hint }]) => ({
 			label: `${optionLabel} — ${hint}`,
 			value
-		}))
+		})),
+		...field ? { admin: { components: { Field: field } } } : {}
 	};
 }
-function colorField(name, label, defaultValue) {
+const STEP_OPTIONS = SHADE_STEPS.map((step) => ({
+	label: String(step),
+	value: String(step)
+}));
+function colorScaleFields(hexDefault) {
+	const hidden = { hidden: true };
+	return [
+		{
+			name: "hex",
+			type: "text",
+			label: "Hex",
+			required: true,
+			...hexDefault ? { defaultValue: hexDefault } : {},
+			validate: validateThemeHex,
+			admin: hidden
+		},
+		{
+			name: "sourceStep",
+			type: "select",
+			label: "Source step",
+			required: true,
+			defaultValue: "500",
+			options: STEP_OPTIONS,
+			admin: hidden
+		},
+		{
+			name: "scale",
+			type: "json",
+			label: "Scale",
+			admin: hidden
+		},
+		{
+			name: "stale",
+			type: "checkbox",
+			label: "Stale",
+			defaultValue: false,
+			admin: hidden
+		},
+		{
+			name: "include",
+			type: "select",
+			label: "Include",
+			required: true,
+			defaultValue: "all",
+			options: [
+				{
+					label: "Include all",
+					value: "all"
+				},
+				{
+					label: "Source only",
+					value: "source"
+				},
+				{
+					label: "Custom",
+					value: "custom"
+				}
+			],
+			admin: hidden
+		},
+		{
+			name: "includedSteps",
+			type: "select",
+			label: "Included steps",
+			hasMany: true,
+			options: STEP_OPTIONS,
+			validate: validateSourceIncluded,
+			admin: hidden
+		}
+	];
+}
+function systemColorGroup(name, label, hexDefault) {
 	return {
 		name,
-		type: "text",
+		type: "group",
 		label,
-		required: true,
-		defaultValue,
-		validate: validateThemeHex,
-		admin: { components: { Field: THEME_COLOR_FIELD } }
+		fields: colorScaleFields(hexDefault),
+		admin: { components: { Field: THEME_COLOR_SCALE_FIELD } }
 	};
 }
 function fontField(name, label, defaultValue, fonts, fontsBaseUrl, sameAsBody) {
@@ -138,85 +334,317 @@ function fontField(name, label, defaultValue, fonts, fontsBaseUrl, sameAsBody) {
 		}
 	};
 }
+function publishField(child) {
+	return {
+		name: `publish${child[0].toUpperCase()}${child.slice(1)}`,
+		type: "ui",
+		admin: {
+			components: { Field: THEME_PUBLISH_FIELD },
+			custom: { child }
+		}
+	};
+}
 /**
-* Settings → Theme: the five brand colours, grey scale, presets, default
-* theme, body and heading fonts, and optional logo. Access is passed in
-* (`canManageBrand` for update). Drafts autosave; the public site reads
-* the published version through `getPublishedTheme`.
-*
-* `previewPath` is stored for BIS-61, which wires the live preview pane.
+* Settings → Theme children: Colors, Typography, Appearance, Identity.
+* Each child publishes itself. No draft mode: a save is live.
+* `getPublishedTheme` reads that row. There is no Theme preview pane.
 */
 function createTheme(options) {
-	const access = requireAccess(options);
-	const { seed, fonts = catalog, fontsBaseUrl = "/fonts", contrastTarget = 4.5, previewPath, logo, onPublish } = options;
-	const fields = [
+	const access = requireAccess$1(options);
+	const destructive = requireDestructive(options);
+	const { seed, fonts = catalog, fontsBaseUrl = "/fonts", contrastTarget = 7, logo, identity, onPublish } = options;
+	const tabs = [
 		{
-			name: "brand",
-			type: "group",
-			label: "Brand colours",
+			label: "Colors",
 			fields: [
-				colorField("primary", "Primary", seed.brandPrimary),
-				colorField("secondary", "Secondary", seed.brandSecondary),
-				colorField("accent", "Accent", seed.brandAccent),
-				colorField("highlight", "Highlight", seed.brandHighlight),
-				colorField("success", "Success", seed.brandSuccess)
+				publishField("colors"),
+				{
+					name: "colors",
+					type: "group",
+					label: "Colors",
+					fields: [
+						{
+							name: "brand",
+							type: "group",
+							label: "Colors",
+							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)
+							]
+						},
+						namedSelect("greyScale", "Gray family", presetHints.greyScale, seed.greyScale, THEME_GREY_SCALE_FIELD),
+						{
+							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 }
+					}
+				}
 			]
 		},
 		{
-			name: "contrast",
-			type: "ui",
-			admin: {
-				components: { Field: THEME_CONTRAST_REPORT },
-				custom: { target: contrastTarget }
-			}
+			label: "Typography",
+			fields: [{
+				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 }
+						}
+					}
+				]
+			}, publishField("typography")]
 		},
-		hintSelect("greyScale", "Grey scale", presetHints.greyScale, seed.greyScale),
-		hintSelect("radius", "Radius", presetHints.radius, seed.radius),
-		hintSelect("shadow", "Shadow", presetHints.shadow, seed.shadow),
-		hintSelect("motion", "Motion", presetHints.motion, seed.motion),
-		hintSelect("density", "Density", presetHints.density, seed.density),
-		hintSelect("defaultTheme", "Default theme", presetHints.defaultTheme, seed.defaultTheme),
 		{
-			name: "fonts",
-			type: "group",
-			label: "Fonts",
-			fields: [fontField("body", "Body", seed.fontBody, fonts, fontsBaseUrl, false), fontField("heading", "Heading", headingSelectValue(seed.fontHeading), fonts, fontsBaseUrl, true)]
+			label: "Appearance",
+			fields: [{
+				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 } }
+			}, publishField("appearance")]
 		}
 	];
-	if (logo) fields.push({
-		name: "logo",
-		type: "upload",
-		relationTo: logo.collection,
-		label: "Logo"
-	}, {
-		name: "logoMark",
-		type: "upload",
-		relationTo: logo.collection,
-		label: "Logo mark"
+	if (logo) tabs.push({
+		label: "Identity",
+		fields: [
+			{
+				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." }
+			},
+			{
+				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." }
+			},
+			publishField("identity")
+		]
 	});
+	const fields = [{
+		type: "tabs",
+		tabs
+	}, {
+		name: "publishChild",
+		type: "text",
+		admin: { hidden: true }
+	}];
 	return {
 		slug: THEME_SLUG,
 		label: "Theme",
 		admin: {
 			group: "Settings",
 			custom: {
-				previewPath,
 				contrastTarget,
-				fontsBaseUrl
-			}
+				fontsBaseUrl,
+				identityFallback: identity?.fallback
+			},
+			components: { elements: { SaveButton: THEME_SAVE_BUTTON } }
+		},
+		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);
+			}]
+		}
+	};
+}
+//#endregion
+//#region src/brand-assets/sanitize.ts
+const DANGEROUS_TAGS = [
+	"script",
+	"foreignObject",
+	"iframe",
+	"embed",
+	"object"
+];
+/**
+* Strips the SVG features a lockup does not need and an attacker would
+* use: script, foreignObject, iframe/embed/object, event handlers,
+* javascript: / data:text/html URLs, and xml-stylesheet. Internal `#`
+* refs and ordinary drawing elements stay.
+*/
+function sanitizeSvg(source) {
+	if (!/<svg[\s>]/i.test(source)) throw new Error("Not an SVG");
+	let out = source.replace(/<\?xml-stylesheet[\s\S]*?\?>/gi, "");
+	for (const tag of DANGEROUS_TAGS) {
+		out = out.replace(new RegExp(`<${tag}\\b[^>]*>[\\s\\S]*?<\\/${tag}\\s*>`, "gi"), "");
+		out = out.replace(new RegExp(`<${tag}\\b[^>]*\\/>`, "gi"), "");
+	}
+	out = out.replace(/\s+on[a-z][a-z0-9-]*\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+	out = out.replace(/((?:href|src|xlink:href)\s*=\s*)(["'])\s*(?:javascript:|data:text\/html)[^"']*\2/gi, "$1$2$2");
+	return out;
+}
+function isSvgUpload(file) {
+	if (file.mimetype === "image/svg+xml") return true;
+	if (typeof file.name === "string" && file.name.toLowerCase().endsWith(".svg")) return true;
+	return false;
+}
+//#endregion
+//#region src/brand-assets/collection.ts
+const BRAND_ASSETS_SLUG = "brand-assets";
+/** SVG preferred; PNG allowed. ICO is for the favicon slot. */
+const BRAND_ASSETS_MIME_TYPES = [
+	"image/svg+xml",
+	"image/png",
+	"image/x-icon",
+	"image/vnd.microsoft.icon"
+];
+function requireAccess(options) {
+	const read = options.access?.read;
+	const update = options.access?.update;
+	if (!read || !update) throw new Error("createBrandAssets requires access.read and access.update. Pass the site's predicates; canManageBrand is the intended update predicate until BIS-43 moves src/platform here.");
+	return {
+		read,
+		update
+	};
+}
+/**
+* Locked cupboard for lockup and mark. Not ordinary Media — only a brand
+* manager writes it. Theme's `logo` / `logoMark` point here when the site
+* passes this slug as `logo.collection`.
+*/
+function createBrandAssets(options) {
+	const access = requireAccess(options);
+	return {
+		slug: options.slug ?? "brand-assets",
+		labels: {
+			singular: "Brand asset",
+			plural: "Brand assets"
+		},
+		admin: {
+			group: "Settings",
+			useAsTitle: "label",
+			description: "Logo, favicon, and mobile-menu mark. SVG preferred; PNG and ICO allowed."
+		},
+		upload: {
+			mimeTypes: [...BRAND_ASSETS_MIME_TYPES],
+			crop: false,
+			focalPoint: false
 		},
-		versions: { drafts: { autosave: { interval: 800 } } },
+		versions: true,
 		access: {
 			read: access.read,
+			create: access.update,
 			update: access.update,
+			delete: access.update,
 			readVersions: access.update
 		},
-		fields,
-		hooks: { afterChange: [async ({ doc }) => {
-			if (!onPublish) return;
-			const themeDoc = doc;
-			if (themeDoc._status !== "published") return;
-			await onPublish(themeConfigFromDoc(themeDoc, seed), themeDoc);
+		fields: [
+			{
+				name: "label",
+				type: "text",
+				label: "Label"
+			},
+			{
+				name: "notes",
+				type: "textarea",
+				label: "Usage notes"
+			},
+			{
+				name: "alt",
+				type: "text",
+				label: "Alt text",
+				required: true
+			}
+		],
+		hooks: { beforeOperation: [({ req, operation }) => {
+			if (operation !== "create" && operation !== "update") return;
+			const file = req.file;
+			if (!file || !isSvgUpload(file)) return;
+			file.data = Buffer.from(sanitizeSvg(file.data.toString("utf8")), "utf8");
 		}] }
 	};
 }
@@ -234,6 +662,32 @@ async function seedTheme(payload, seed) {
 	});
 }
 //#endregion
-export { DESCRIPTION_LENGTH, SHARE_IMAGE_SIZE, THEME_COLOR_FIELD, THEME_CONTRAST_REPORT, THEME_FONT_FIELD, THEME_SLUG, createTheme, documentTitle, firstImageIn, noIndexField, seedTheme, seoPlugin, titleTemplate, truncateAtWord };
+//#region src/theme/preview.ts
+/**
+* Device sizes the Theme (and, later, Pages) live-preview toolbar offers.
+* One list so the panes match.
+*/
+const THEME_PREVIEW_BREAKPOINTS = [
+	{
+		label: "Mobile",
+		name: "mobile",
+		width: 375,
+		height: 667
+	},
+	{
+		label: "Tablet",
+		name: "tablet",
+		width: 768,
+		height: 1024
+	},
+	{
+		label: "Desktop",
+		name: "desktop",
+		width: 1440,
+		height: 900
+	}
+];
+//#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_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 };
 
 //# sourceMappingURL=index.mjs.map