@goodfellow-cms/admin 0.6.0 → 0.8.0

package/dist/editor.js

@@ -1,11 +1,12 @@
-import { Ft as storedEntryFields, G as READY_MESSAGE, Pt as storedData, R as createMediaPreviews, Rt as editedMarkdown, a as AdminContext, at as findPage, b as MediaChooser, ct as mediaUrl, et as StringsProvider, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, l as useSiteContent, rt as useStrings, s as useAdmin, t as SCHEDULE_PROP, u as setThemeChoice, w as SETTINGS_SECTIONS, y as MediaChoiceContext, z as showMediaInPreview, zt as formattedHtml } from "./entry-values-BrY3L0Ai.js";
-import { r as createChannel } from "./plugin-protocol-DkvBDqsF.js";
-import { COLOR_SCHEME_ATTRIBUTE, DRAWN_SLOT_ELEMENT, MEDIA_DIR, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, contentInLanguage, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isEventLike, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, renderedProblems, shownOccurrence, sitePages, themeToCss, todayIn, wallClock, weekdayName, weekdayOf } from "@goodfellow-cms/core";
-import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { J as editedMarkdown, U as storedData, W as storedEntryFields, Y as formattedHtml, g as mediaUrl, i as showMediaInPreview, n as createMediaPreviews, o as createChannel } from "./plugin-protocol-BgYL9WSm.js";
+import { J as EditorTextContext, T as SETTINGS_SECTIONS, Y as useEditorText, a as AdminContext, b as MediaChoiceContext, d as setThemeChoice, g as ScheduleFields, i as usePreviewStyles, it as StringsProvider, l as useSiteContent, lt as findPage, p as useDarkMode, q as READY_MESSAGE, s as useAdmin, st as useStrings, t as SCHEDULE_PROP, x as MediaChooser } from "./entry-values-Bu8ljnoX.js";
+import { COLOR_SCHEME_ATTRIBUTE, DEFAULT_THEME_COLORS, DRAWN_SLOT_ELEMENT, FONT_SIZES, MEDIA_DIR, MINIMUM_CONTRAST, RADII, SCREEN_SIZES, SIDES, SPACING_STEPS, TEXT_ALIGNS, THEME_COLORS, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, colorSlug, contentInLanguage, contrastRatio, customLength, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isCustomColor, isEventLike, isOwnersOnlyField, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, readBlockStyle, renderedProblems, shownOccurrence, sitePages, themeColorOf, themeToCss, todayIn, wallClock, weekdayName, weekdayOf, withBlockStyle } from "@goodfellow-cms/core";
+import { Box } from "lucide-react";
+import { createContext, createElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { PageBody, PageContent, SiteProvider, adminSite, applyEntry, createPuckConfig, createPuckConfigs, cx, isTableField, mediaFieldKind, preparePage, siteMetadata, tableCells } from "@goodfellow-cms/react";
-import { AutoField, FieldLabel, Puck, Render, RichTextMenu, createUsePuck, legacySideBarPlugin, migrate, registerOverlayPortal, resolveAllData, useGetPuck } from "@puckeditor/core";
+import { PageBody, PageContent, SiteProvider, adminSite, applyEntry, blockIcon, blockKeywords, createPuckConfig, createPuckConfigs, cx, isStyleField, isTableField, mediaFieldKind, preparePage, siteMetadata, tableCells } from "@goodfellow-cms/react";
+import { AutoField, Drawer, FieldLabel, Puck, Render, RichTextMenu, createUsePuck, legacySideBarPlugin, migrate, registerOverlayPortal, resolveAllData, useGetPuck } from "@puckeditor/core";
 import { createPortal, flushSync } from "react-dom";
 const CANVAS = `.gf-canvas`;
 const CANVAS_CONTAINER = "gf-canvas";
@@ -299,6 +300,128 @@ function SharePreview({ path }) {
 	});
 }
 //#endregion
+//#region src/frame/block-icon.tsx
+/** A block's icon, at the block list's size, in the text's color. */
+function BlockIconSvg({ icon }) {
+	if (!icon) return /* @__PURE__ */ jsx(Box, {
+		className: "gfa-block-icon",
+		size: 16,
+		strokeWidth: 2,
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		className: "gfa-block-icon",
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: icon.map(([shape, attributes], index) => createElement(shape, {
+			key: index,
+			...attributes
+		}))
+	});
+}
+/** Puck's block list item, with the block's icon before its name. */
+function drawerItemWithIcon(icons) {
+	return function DrawerItemWithIcon({ children, name }) {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "gfa-drawer-item",
+			children: [/* @__PURE__ */ jsx(BlockIconSvg, { icon: icons.get(name) }), children]
+		});
+	};
+}
+//#endregion
+//#region src/frame/block-search.tsx
+/** The blocks of a Puck config, with their groups and the site's keywords for them, in the list's order. */
+function searchableBlocks(config, siteConfig) {
+	const groups = /* @__PURE__ */ new Map();
+	const order = [];
+	for (const [key, category] of Object.entries(config.categories ?? {})) for (const name of category?.components ?? []) {
+		const block = String(name);
+		if (!config.components[block] || groups.has(block)) continue;
+		groups.set(block, category?.title ?? key);
+		order.push(block);
+	}
+	for (const name of Object.keys(config.components)) if (!groups.has(name)) order.push(name);
+	return order.map((name) => {
+		const block = siteConfig?.blocks[name];
+		return {
+			name,
+			label: config.components[name]?.label ?? name,
+			...groups.has(name) && { group: groups.get(name) },
+			keywords: (block && blockKeywords(block)) ?? []
+		};
+	});
+}
+/** A block's name as words: `MediaText` is "media text". */
+function nameWords(name) {
+	return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ");
+}
+/** Whether every word typed starts a word of `text`. */
+function startsWords(text, words) {
+	const lower = ` ${text.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, " ")}`;
+	return words.every((word) => lower.includes(` ${word}`));
+}
+/** The blocks `query` finds, best first: by label, then by name or keyword, then by group. */
+function searchBlocks(query, blocks) {
+	const words = query.toLowerCase().split(/[^\p{L}\p{N}]+/u).filter(Boolean);
+	if (words.length === 0) return [...blocks];
+	const rank = (block) => {
+		if (block.label.toLowerCase().startsWith(query.trim().toLowerCase())) return 0;
+		if (startsWords(block.label, words)) return 1;
+		if (startsWords(nameWords(block.name), words) || block.keywords.some((keyword) => startsWords(keyword, words))) return 2;
+		if (block.group && startsWords(`${block.group} ${block.label}`, words)) return 3;
+	};
+	return blocks.map((block, index) => ({
+		block,
+		index,
+		rank: rank(block)
+	})).filter((found) => found.rank !== void 0).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ block }) => block);
+}
+/** Puck's `drawer` override: the search box, then Puck's own list or what's found. */
+function BlockSearch({ blocks, item, children }) {
+	const t = useStrings();
+	const [query, setQuery] = useState("");
+	const id = useId();
+	const found = query.trim() ? searchBlocks(query, blocks) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-block-search",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "gfa-block-search-box",
+			children: /* @__PURE__ */ jsx("input", {
+				id,
+				type: "search",
+				className: "gfa-block-search-input",
+				"aria-label": t("editor.blockSearch"),
+				placeholder: t("editor.blockSearch"),
+				value: query,
+				onChange: (event) => setQuery(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Escape") setQuery("");
+				}
+			})
+		}), found === void 0 ? children : found.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "gfa-block-search-none",
+			role: "status",
+			children: t("editor.blockSearchNone")
+		}) : /* @__PURE__ */ jsx("section", {
+			className: "gfa-block-search-results",
+			"aria-label": t("editor.blockSearchFound"),
+			children: /* @__PURE__ */ jsx(Drawer, { children: found.map((block) => /* @__PURE__ */ jsx(Drawer.Item, {
+				name: block.name,
+				label: block.label,
+				children: item
+			}, block.name)) })
+		})]
+	});
+}
+//#endregion
 //#region src/event-field.tsx
 const EVERY_LABELS = {
 	none: "event.repeat.none",
@@ -1199,6 +1322,7 @@ function FrameProviders({ config, client, init, site, children }) {
 		drafts: {
 			kept: true,
 			names: [],
+			reviews: [],
 			open: async () => refused(),
 			publishAll: async () => refused(),
 			submit: async () => refused(),
@@ -1230,17 +1354,24 @@ function FrameProviders({ config, client, init, site, children }) {
 		kind,
 		value
 	}), [client]);
+	const text = useMemo(() => ({
+		puck: init.puck ?? {},
+		labels: init.labels ?? {}
+	}), [init.puck, init.labels]);
 	return /* @__PURE__ */ jsx(StringsProvider, {
 		strings: init.strings,
-		children: /* @__PURE__ */ jsx(AdminClientContext.Provider, {
-			value: client,
-			children: /* @__PURE__ */ jsx(FrameCodeContext.Provider, {
-				value: code,
-				children: /* @__PURE__ */ jsx(AdminContext.Provider, {
-					value: admin,
-					children: /* @__PURE__ */ jsx(MediaChoiceContext.Provider, {
-						value: chooseMedia,
-						children
+		children: /* @__PURE__ */ jsx(EditorTextContext.Provider, {
+			value: text,
+			children: /* @__PURE__ */ jsx(AdminClientContext.Provider, {
+				value: client,
+				children: /* @__PURE__ */ jsx(FrameCodeContext.Provider, {
+					value: code,
+					children: /* @__PURE__ */ jsx(AdminContext.Provider, {
+						value: admin,
+						children: /* @__PURE__ */ jsx(MediaChoiceContext.Provider, {
+							value: chooseMedia,
+							children
+						})
 					})
 				})
 			})
@@ -1248,6 +1379,121 @@ function FrameProviders({ config, client, init, site, children }) {
 	});
 }
 //#endregion
+//#region src/frame/labels.ts
+/** A label in the admin panel's language, or as it is where the table has none. */
+function translated(labels, text) {
+	return text === void 0 ? text : labels[text] ?? text;
+}
+function withFieldLabels(field, labels) {
+	return {
+		...field,
+		...field.label !== void 0 && { label: translated(labels, field.label) },
+		...typeof field.placeholder === "string" && { placeholder: translated(labels, field.placeholder) },
+		...Array.isArray(field.options) && { options: field.options.map((option) => ({
+			...option,
+			label: translated(labels, option.label) ?? option.label
+		})) },
+		...field.arrayFields && { arrayFields: withFieldsLabels(field.arrayFields, labels) },
+		...field.objectFields && { objectFields: withFieldsLabels(field.objectFields, labels) }
+	};
+}
+function withFieldsLabels(fields, labels) {
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withFieldLabels(field, labels)]));
+}
+function withComponentLabels(component, labels) {
+	if (!component) return component;
+	const { resolveFields, label } = component;
+	return {
+		...component,
+		...label !== void 0 && { label: translated(labels, label) },
+		...component.fields && { fields: withFieldsLabels(component.fields, labels) },
+		...resolveFields && { resolveFields: async (...args) => withFieldsLabels(await resolveFields(...args), labels) }
+	};
+}
+/**
+* The config with blocks' names, groups and settings' labels, choices and
+* placeholders in the admin panel's language, looked up by their English
+* wording, so a site's own blocks that word theirs the same way are
+* translated too. Only what the editor shows changes: props, choices' values
+* and what blocks render stay as they are.
+*/
+function withLabels(config, labels) {
+	if (Object.keys(labels).length === 0) return config;
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, withComponentLabels(component, labels)]));
+	const categories = config.categories && Object.fromEntries(Object.entries(config.categories).map(([name, category]) => [name, {
+		...category,
+		...category.title !== void 0 && { title: translated(labels, category.title) }
+	}]));
+	return {
+		...config,
+		components,
+		...categories && { categories },
+		...config.root && { root: withComponentLabels(config.root, labels) }
+	};
+}
+//#endregion
+//#region src/frame/owners-only.tsx
+/**
+* Block settings only owners may change (`metadata: { owners: true }`, such as
+* Custom HTML used exactly as written), shown to editors on full-stack sites
+* as they are, without a way to change them. Their server refuses such a
+* change anyway (`ownersOnlyChanges()`); this only says so up front.
+*/
+function valueLabel(field, value) {
+	const option = ("options" in field && Array.isArray(field.options) ? field.options : []).find((choice) => JSON.stringify(choice.value) === JSON.stringify(value));
+	if (option) return String(option.label);
+	return value === void 0 || value === null ? "" : String(value);
+}
+function LockedField({ field, value }) {
+	const t = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-locked-field",
+		children: [
+			field.label && /* @__PURE__ */ jsx("div", {
+				className: "gfa-locked-field-label",
+				children: field.label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "gfa-locked-field-value",
+				children: valueLabel(field, value)
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-locked-field-note",
+				children: t("owners.only")
+			})
+		]
+	});
+}
+function locked(fields) {
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => {
+		if (!isOwnersOnlyField(field)) return [name, field];
+		return [name, {
+			type: "custom",
+			...field.label !== void 0 && { label: field.label },
+			...field.metadata !== void 0 && { metadata: field.metadata },
+			render: ({ value }) => /* @__PURE__ */ jsx(LockedField, {
+				field,
+				value
+			})
+		}];
+	}));
+}
+/** The config with owners-only settings shown but not changeable, for editors who aren't owners. */
+function withOwnersOnlyLocked(config) {
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => {
+		const fields = component.fields ?? {};
+		if (!Object.values(fields).some(isOwnersOnlyField)) return [name, component];
+		return [name, {
+			...component,
+			fields: locked(fields)
+		}];
+	}));
+	return {
+		...config,
+		components
+	};
+}
+//#endregion
 //#region src/frame/page-settings.ts
 /** For pages and templates, whose settings include `noIndex`; `path` is the page's, for pages. */
 function shownSettings(original, path) {
@@ -1304,6 +1550,420 @@ function shownSettings(original, path) {
 	};
 }
 //#endregion
+//#region src/frame/style-field.tsx
+/**
+* A block's Style field (`classNameField` in `@goodfellow-cms/react`), which
+* Puck's editor shows as controls for its look in place of a box of classes:
+* text alignment, size and color, background, space inside and around it,
+* rounded corners and the sizes of screen it's hidden on, written into its `className` as Tailwind classes
+* (`withBlockStyle()` in `@goodfellow-cms/core`), with any other classes kept.
+*/
+/** A color's value to show and compare: a theme color's, or the editor's own. */
+function shownColor(value, colors) {
+	if (!value) return void 0;
+	const theme = themeColorOf(value);
+	return theme ? colors[theme] ?? DEFAULT_THEME_COLORS[theme] : value;
+}
+/**
+* A choice from a scale, or a size of the editor's own: the scale's steps,
+* "As the block has it" and "Your own…", which shows a box for a length.
+*/
+function ScaleChoice({ label, value, steps, stepLabel, readOnly, onChange }) {
+	const t = useStrings();
+	const id = useId();
+	const custom = value !== void 0 && !steps.includes(value);
+	const [ownChosen, setOwnChosen] = useState(custom);
+	const [typed, setTyped] = useState(custom ? value : "");
+	useEffect(() => {
+		if (value !== void 0 && !steps.includes(value)) {
+			setOwnChosen(true);
+			setTyped(value);
+		}
+	}, [value, steps]);
+	const own = custom || ownChosen;
+	const invalid = own && typed.trim() !== "" && customLength(typed) === void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-style-choice",
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: "gfa-style-label",
+				htmlFor: id,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("select", {
+				id,
+				className: "gfa-input",
+				disabled: readOnly,
+				value: own ? "custom" : value ?? "",
+				onChange: (event) => {
+					const chosen = event.target.value;
+					if (chosen === "custom") {
+						setOwnChosen(true);
+						const length = customLength(typed);
+						if (length) onChange(length);
+						return;
+					}
+					setOwnChosen(false);
+					onChange(chosen === "" ? void 0 : chosen);
+				},
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: t("style.default")
+					}),
+					steps.map((step) => /* @__PURE__ */ jsx("option", {
+						value: step,
+						children: stepLabel(step)
+					}, step)),
+					/* @__PURE__ */ jsx("option", {
+						value: "custom",
+						children: t("style.custom")
+					})
+				]
+			}),
+			own && /* @__PURE__ */ jsx("input", {
+				className: "gfa-input",
+				value: typed,
+				readOnly,
+				"aria-label": `${label}: ${t("style.customLength")}`,
+				placeholder: t("style.customLength"),
+				"aria-invalid": invalid,
+				onChange: (event) => {
+					setTyped(event.target.value);
+					const length = customLength(event.target.value);
+					if (length) onChange(length);
+				}
+			}),
+			invalid && /* @__PURE__ */ jsx("p", {
+				className: "gfa-error-text",
+				children: t("style.customLengthInvalid")
+			})
+		]
+	});
+}
+/** Spacing steps as people read them: `4` is 16px. */
+function spacingLabel(t, step) {
+	return step === "0" ? t("style.none") : `${Number(step) * 4}px`;
+}
+/** Space on every side at once, or on each side. */
+function SidesChoice({ label, sides, readOnly, onChange }) {
+	const t = useStrings();
+	const values = SIDES.map((side) => sides?.[side]);
+	const same = values.every((value) => value === values[0]);
+	const [each, setEach] = useState(!same);
+	useEffect(() => {
+		if (!same) setEach(true);
+	}, [same]);
+	const set = (next) => {
+		const kept = Object.fromEntries(Object.entries(next).filter(([, value]) => value !== void 0));
+		onChange(Object.keys(kept).length > 0 ? kept : void 0);
+	};
+	const stepLabel = (step) => spacingLabel(t, step);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "gfa-style-group",
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "gfa-style-label",
+				children: label
+			}),
+			each ? /* @__PURE__ */ jsx("div", {
+				className: "gfa-style-sides",
+				children: SIDES.map((side) => /* @__PURE__ */ jsx(ScaleChoice, {
+					label: t(`style.side.${side}`),
+					value: sides?.[side],
+					steps: SPACING_STEPS,
+					stepLabel,
+					readOnly,
+					onChange: (value) => set({
+						...sides,
+						[side]: value
+					})
+				}, side))
+			}) : /* @__PURE__ */ jsx(ScaleChoice, {
+				label: t("style.allSides"),
+				value: values[0],
+				steps: SPACING_STEPS,
+				stepLabel,
+				readOnly,
+				onChange: (value) => set(Object.fromEntries(SIDES.map((side) => [side, value])))
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "gfa-style-check",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: each,
+					disabled: readOnly || each && !same,
+					onChange: (event) => setEach(event.target.checked)
+				}), t("style.eachSide")]
+			})
+		]
+	});
+}
+/** The theme's colors as swatches, a color of the editor's own, and back to the block's. */
+function ColorChoice({ label, value, colors, readOnly, onChange }) {
+	const t = useStrings();
+	const own = value !== void 0 && isCustomColor(value);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "gfa-style-group",
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "gfa-style-label",
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "gfa-style-swatches",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gfa-style-swatch gfa-style-swatch-none",
+					"aria-pressed": value === void 0,
+					disabled: readOnly,
+					title: t("style.colorDefault"),
+					"aria-label": t("style.colorDefault"),
+					onClick: () => onChange(void 0)
+				}),
+				THEME_COLORS.map((color) => {
+					const slug = colorSlug(color);
+					const name = t(`theme.color.${color}`);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-style-swatch",
+						style: { background: colors[color] ?? DEFAULT_THEME_COLORS[color] },
+						"aria-pressed": value === slug,
+						disabled: readOnly,
+						title: name,
+						"aria-label": name,
+						onClick: () => onChange(slug)
+					}, color);
+				}),
+				/* @__PURE__ */ jsx("label", {
+					className: "gfa-style-swatch gfa-style-swatch-own",
+					title: t("style.colorCustom"),
+					children: /* @__PURE__ */ jsx("input", {
+						type: "color",
+						value: own ? value : "#000000",
+						disabled: readOnly,
+						"aria-label": `${label}: ${t("style.colorCustom")}`,
+						onChange: (event) => onChange(event.target.value.toLowerCase())
+					})
+				})
+			]
+		})]
+	});
+}
+/** The sizes of screen a block is hidden on, a box for each. */
+function HiddenOnChoice({ hiddenOn, readOnly, onChange }) {
+	const t = useStrings();
+	const hidden = new Set(hiddenOn);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "gfa-style-group",
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "gfa-style-label",
+				children: t("style.hiddenOn")
+			}),
+			SCREEN_SIZES.map((size) => /* @__PURE__ */ jsxs("label", {
+				className: "gfa-style-check",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: hidden.has(size),
+					disabled: readOnly,
+					onChange: (event) => {
+						const next = SCREEN_SIZES.filter((candidate) => candidate === size ? event.target.checked : hidden.has(candidate));
+						onChange(next.length > 0 ? next : void 0);
+					}
+				}), t(`style.hiddenOn.${size}`)]
+			}, size)),
+			hidden.size > 0 && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t(hidden.size === SCREEN_SIZES.length ? "style.hiddenOnAll" : "style.hiddenOnHint")
+			})
+		]
+	});
+}
+/** Other classes, kept as typed while the box has focus, so a class isn't taken into the controls halfway. */
+function OtherClasses({ other, readOnly, onChange }) {
+	const t = useStrings();
+	const id = useId();
+	const joined = other.join(" ");
+	const [typed, setTyped] = useState(joined);
+	const [focused, setFocused] = useState(false);
+	useEffect(() => {
+		if (!focused) setTyped(joined);
+	}, [joined, focused]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-style-choice",
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: "gfa-style-label",
+				htmlFor: id,
+				children: t("style.other")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id,
+				className: "gfa-input gfa-code",
+				value: typed,
+				readOnly,
+				spellCheck: false,
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onChange: (event) => {
+					setTyped(event.target.value);
+					onChange(event.target.value.split(/\s+/).filter(Boolean));
+				}
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("style.otherHint")
+			})
+		]
+	});
+}
+function StyleControls({ value, colors, readOnly, label, ownAlign, block, onChange }) {
+	const t = useStrings();
+	const { style, other } = readBlockStyle(value);
+	const set = (next) => onChange(withBlockStyle(other, next));
+	const change = (key, next) => {
+		const { [key]: _old, ...rest } = style;
+		set(next === void 0 ? rest : {
+			...rest,
+			[key]: next
+		});
+	};
+	const text = shownColor(style.color, colors);
+	const background = shownColor(style.background, colors);
+	const ratio = text && background ? contrastRatio(text, background) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-style-field",
+		children: [
+			label && /* @__PURE__ */ jsx("div", {
+				className: "gfa-style-title",
+				children: label
+			}),
+			!ownAlign && /* @__PURE__ */ jsxs("fieldset", {
+				className: "gfa-style-group",
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "gfa-style-label",
+					children: t("style.align")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "gfa-style-segments",
+					children: [void 0, ...TEXT_ALIGNS].map((align) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-style-segment",
+						"aria-pressed": style.align === align,
+						disabled: readOnly,
+						onClick: () => change("align", align),
+						children: t(`style.align.${align ?? "default"}`)
+					}, align ?? "default"))
+				})]
+			}),
+			/* @__PURE__ */ jsx(ScaleChoice, {
+				label: t("style.fontSize"),
+				value: style.fontSize,
+				steps: FONT_SIZES,
+				stepLabel: (step) => t(`style.fontSize.${step}`),
+				readOnly,
+				onChange: (size) => change("fontSize", size)
+			}),
+			/* @__PURE__ */ jsx(ColorChoice, {
+				label: t("style.color"),
+				value: style.color,
+				colors,
+				readOnly,
+				onChange: (color) => change("color", color)
+			}),
+			/* @__PURE__ */ jsx(ColorChoice, {
+				label: t("style.background"),
+				value: style.background,
+				colors,
+				readOnly,
+				onChange: (color) => change("background", color)
+			}),
+			ratio !== void 0 && ratio < MINIMUM_CONTRAST && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint gfa-style-warning",
+				role: "status",
+				children: t("style.contrast")
+			}),
+			/* @__PURE__ */ jsx(SidesChoice, {
+				label: t("style.padding"),
+				sides: style.padding,
+				readOnly,
+				onChange: (sides) => change("padding", sides)
+			}),
+			/* @__PURE__ */ jsx(SidesChoice, {
+				label: t("style.margin"),
+				sides: style.margin,
+				readOnly,
+				onChange: (sides) => change("margin", sides)
+			}),
+			/* @__PURE__ */ jsx(ScaleChoice, {
+				label: t("style.radius"),
+				value: style.radius,
+				steps: RADII,
+				stepLabel: (step) => t(`style.radius.${step}`),
+				readOnly,
+				onChange: (radius) => change("radius", radius)
+			}),
+			(block || style.hiddenOn) && /* @__PURE__ */ jsx(HiddenOnChoice, {
+				hiddenOn: style.hiddenOn,
+				readOnly,
+				onChange: (hiddenOn) => change("hiddenOn", hiddenOn)
+			}),
+			/* @__PURE__ */ jsx(OtherClasses, {
+				other,
+				readOnly,
+				onChange: (next) => onChange(withBlockStyle(next, style))
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gfa-button gfa-button-secondary",
+				disabled: readOnly || Object.keys(style).length === 0 && other.length === 0,
+				onClick: () => onChange(""),
+				children: t("style.reset")
+			})
+		]
+	});
+}
+function withStyleField(field, colors, ownAlign, block) {
+	if (field.type !== "text" || !isStyleField(field)) return field;
+	const render = ({ value, onChange, readOnly }) => /* @__PURE__ */ jsx(StyleControls, {
+		value,
+		colors,
+		readOnly,
+		label: field.label,
+		ownAlign,
+		block,
+		onChange
+	});
+	return {
+		type: "custom",
+		label: field.label,
+		metadata: field.metadata,
+		render
+	};
+}
+function withStyleFieldsIn(fields, colors, block) {
+	if (!fields) return fields;
+	const ownAlign = "align" in fields;
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withStyleField(field, colors, ownAlign, block)]));
+}
+function withStyleComponent(component, colors, block) {
+	if (!component) return component;
+	const { resolveFields } = component;
+	return {
+		...component,
+		...component.fields && { fields: withStyleFieldsIn(component.fields, colors, block) },
+		...resolveFields && { resolveFields: async (...args) => withStyleFieldsIn(await resolveFields(...args), colors, block) }
+	};
+}
+/** The config with every block's Style field, and the page's, drawn as a style's controls. */
+function withStyleFields(config, colors) {
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, withStyleComponent(component, colors, true)]));
+	return {
+		...config,
+		components,
+		...config.root && { root: withStyleComponent(config.root, colors, false) }
+	};
+}
+//#endregion
 //#region src/frame/table-field.tsx
 /**
 * The grid of cells a table's field is edited in (`tableField()` in
@@ -1430,7 +2090,8 @@ const ADMIN_PLACES = {
 	"contact-settings": `#/settings/general?section=${SETTINGS_SECTIONS.contact}`,
 	"forms-settings": `#/settings/general?section=${SETTINGS_SECTIONS.forms}`,
 	"theme-settings": "#/settings/theme",
-	"language-settings": "#/settings/languages"
+	"language-settings": "#/settings/languages",
+	"comments-settings": "#/settings/comments"
 };
 /** Puck's text field, with the media library's chooser below it for fields that hold a media address. */
 function TextFieldWithMedia({ field, value, onChange, readOnly, children }) {
@@ -1608,6 +2269,14 @@ const ENTRY_UI = {
 };
 const entryPlugins = [legacySideBarPlugin()];
 /** Puck, set up for one page, header, footer, template or item: site context, previews and the bridge. */
+/** Puck's permissions for something shown without editing: nothing can be changed, added, moved or removed. */
+const READ_ONLY = {
+	drag: false,
+	duplicate: false,
+	delete: false,
+	edit: false,
+	insert: false
+};
 function FrameEditor({ open, onOpened }) {
 	const client = useAdminClient();
 	const { config: siteConfig, pageConfig, layoutConfig, templateConfig } = useFrameCode();
@@ -1716,15 +2385,16 @@ function FrameEditor({ open, onOpened }) {
 		callPlugin
 	]);
 	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
+	const { puck: dictionary, labels } = useEditorText();
 	const config = useMemo(() => {
 		if (kind === "entry") {
 			if (!collection || !entry) throw new Error("The item isn't in the site.");
-			return entryConfig(collection, entry.entry, content, {
+			return withLabels(entryConfig(collection, entry.entry, content, {
 				templateConfig,
 				layoutConfig
-			});
+			}), labels);
 		}
-		return withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site));
+		return withLabels(withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site)), labels);
 	}, [
 		kind,
 		collection,
@@ -1733,9 +2403,19 @@ function FrameEditor({ open, onOpened }) {
 		templateConfig,
 		layoutConfig,
 		content,
-		site
+		site,
+		labels
 	]);
 	const described = useMemo(() => describeConfig(config), [config]);
+	const puckConfig = useMemo(() => {
+		const styled = kind === "entry" ? config : withStyleFields(config, content.settings.theme.colors);
+		return open.ownersOnlyLocked ? withOwnersOnlyLocked(styled) : styled;
+	}, [
+		kind,
+		config,
+		content.settings.theme.colors,
+		open.ownersOnlyLocked
+	]);
 	const told = useRef(void 0);
 	useEffect(() => {
 		if (told.current === described) return;
@@ -1753,32 +2433,51 @@ function FrameEditor({ open, onOpened }) {
 		...kind === "entry" ? ENTRY_UI : {},
 		...open.ui
 	}), [kind, open.ui]);
+	const searchable = useMemo(() => searchableBlocks(config, siteConfig), [config, siteConfig]);
+	const drawerItem = useMemo(() => {
+		const icons = /* @__PURE__ */ new Map();
+		for (const [name, block] of Object.entries(siteConfig.blocks)) {
+			const icon = blockIcon(block);
+			if (icon) icons.set(name, icon);
+		}
+		return drawerItemWithIcon(icons);
+	}, [siteConfig]);
 	const overrides = useMemo(() => ({
 		header: () => /* @__PURE__ */ jsx(Bridge, {
 			channel: client.channel,
 			settings
 		}),
+		drawer: ({ children }) => /* @__PURE__ */ jsx(BlockSearch, {
+			blocks: searchable,
+			item: drawerItem,
+			children
+		}),
+		drawerItem,
 		fieldTypes: { text: TextFieldWithMedia },
 		...kind === "page" && path && { fields: ({ children, itemSelector }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, !itemSelector && /* @__PURE__ */ jsx(SharePreview, { path })] }) }
 	}), [
 		client,
 		settings,
 		kind,
-		path
+		path,
+		searchable,
+		drawerItem
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: `gfa-editor-puck gfa-editor-for-${kind}`,
 		children: /* @__PURE__ */ jsx(SiteProvider, {
 			value: site,
 			children: /* @__PURE__ */ jsx(Puck, {
-				config,
+				config: puckConfig,
 				data: initialData,
 				metadata: siteMetadata(site),
 				headerTitle: title,
+				dictionary,
 				height: "100%",
 				iframe: { enabled: false },
 				ui,
 				...kind === "entry" && { plugins: entryPlugins },
+				...open.readOnly && { permissions: READ_ONLY },
 				overrides,
 				onChange: updateView
 			})
@@ -1896,7 +2595,8 @@ function editorKey(open) {
 		open.path,
 		open.collection,
 		open.entry,
-		open.language
+		open.language,
+		open.reopened
 	]);
 }
 /** Opens an editor when the admin panel's page asks, and tells it Puck's config once it's open. */