@goodfellow-cms/admin 0.5.0 → 0.7.0

package/dist/editor.js

@@ -1,10 +1,12 @@
-import { A as MediaChoiceContext, Ft as editedMarkdown, It as formattedHtml, Mt as storedEntryFields, O as createMediaPreviews, Q as StringsProvider, U as createChannel, V as READY_MESSAGE, a as AdminContext, at as mediaUrl, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, j as MediaChooser, jt as storedData, k as showMediaInPreview, l as useSiteContent, rt as findPage, s as useAdmin, t as SCHEDULE_PROP, tt as useStrings, u as setThemeChoice, y as SETTINGS_SECTIONS } from "./entry-values-ocbalc9U.js";
-import { COLOR_SCHEME_ATTRIBUTE, MEDIA_DIR, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, contentInLanguage, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isEventLike, languageHome, languageLinks, mainLanguage, neverIndexed, 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 { Bt as editedMarkdown, It as storedData, Lt as storedEntryFields, R as createMediaPreviews, Vt as formattedHtml, a as AdminContext, at as useStrings, b as MediaChooser, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, l as useSiteContent, nt as StringsProvider, q as READY_MESSAGE, s as useAdmin, st as findPage, t as SCHEDULE_PROP, u as setThemeChoice, ut as mediaUrl, w as SETTINGS_SECTIONS, y as MediaChoiceContext, z as showMediaInPreview } from "./entry-values-DO01xZ9L.js";
+import { r as createChannel } from "./plugin-protocol-DkvBDqsF.js";
+import { COLOR_SCHEME_ATTRIBUTE, DEFAULT_THEME_COLORS, DRAWN_SLOT_ELEMENT, FONT_SIZES, MEDIA_DIR, MINIMUM_CONTRAST, RADII, 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, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, readBlockStyle, renderedProblems, shownOccurrence, sitePages, themeColorOf, themeToCss, todayIn, wallClock, weekdayName, weekdayOf, withBlockStyle } from "@goodfellow-cms/core";
+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, SiteProvider, adminSite, applyEntry, createPuckConfig, createPuckConfigs, cx, mediaFieldKind, preparePage, siteMetadata } 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 { Box } from "lucide-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";
@@ -298,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",
@@ -907,6 +1031,7 @@ function EntryPreview({ collection, entry, content, templateConfig, layoutConfig
 		menus: content.menus,
 		path: entry.path ?? "/",
 		collections: content.collections,
+		pages: pageLinks(content),
 		collection,
 		entry: current
 	}), [
@@ -999,9 +1124,76 @@ function entryConfig(collection, entry, content, configs) {
 * The site's code, run in the page that has loaded it: the frame that runs
 * it for the admin panel, or tests. Never imported by the admin panel's own page.
 */
+/** The block drawn in each slot's place, which only drawing has: its name can't be one of a site's. */
+const DRAWN_SLOT_BLOCK = "__goodfellow_drawn_slot__";
+/** A block that draws nothing but an empty `DRAWN_SLOT_ELEMENT` with its slot's name. */
+const drawnSlot = {
+	fields: { slot: { type: "text" } },
+	render: ({ slot }) => createElement(DRAWN_SLOT_ELEMENT, { "data-slot": String(slot ?? "") })
+};
+/** The block as it's drawn: each of its slots holding only the block that marks its place. */
+function withSlotPlaces(block, config) {
+	const fields = config?.fields ?? {};
+	const places = Object.entries(fields).filter(([, field]) => field.type === "slot").map(([slot]) => [slot, [{
+		type: DRAWN_SLOT_BLOCK,
+		props: {
+			id: `${String(block.props.id)}:${slot}`,
+			slot
+		}
+	}]]);
+	return {
+		...block,
+		props: {
+			...block.props,
+			...Object.fromEntries(places)
+		}
+	};
+}
+/** One block drawn as the site draws it, in the page at its address, as `drawBlock()` describes. */
+async function drawBlock(configs, content, { kind, path, block }) {
+	const layout = kind === "header" || kind === "footer";
+	const config = layout ? configs.layout : kind === "template" ? configs.template : configs.page;
+	if (!config.components[block.type]) throw new Error(`The site has no block called ${block.type} here.`);
+	const found = allPages(content).find((page) => page.path === path);
+	const root = layout ? (kind === "header" ? content.header : content.footer).data.root : found?.content.data.root;
+	const page = {
+		path,
+		file: found?.file ?? "",
+		content: {
+			...found?.content,
+			version: found?.content.version ?? 1,
+			data: {
+				root: root ?? { props: {} },
+				content: [withSlotPlaces(block, config.components[block.type])]
+			}
+		}
+	};
+	const prepared = await preparePage({
+		...configs,
+		page: config
+	}, content, page);
+	const container = document.createElement("div");
+	const reactRoot = createRoot(container);
+	try {
+		flushSync(() => reactRoot.render(createElement(PageContent, {
+			site: {
+				...prepared.site,
+				credits: []
+			},
+			pageConfig: prepared.pageConfig,
+			page: prepared.data
+		})));
+		const main = container.querySelector("main");
+		const zone = main?.children.length === 1 ? main.firstElementChild : null;
+		return (zone?.tagName === "DIV" && zone.attributes.length === 0 ? zone : main)?.innerHTML ?? "";
+	} finally {
+		reactRoot.unmount();
+	}
+}
 /** The site's code run here, in the page that has loaded it: the frame, or tests. */
 function localSiteCode(config) {
 	const configs = createPuckConfigs(config);
+	let drawing;
 	return {
 		async sitePages(content, today) {
 			return sitePages(content, today, config.blocks);
@@ -1039,6 +1231,17 @@ function localSiteCode(config) {
 				root.unmount();
 			}
 			return problems;
+		},
+		async drawBlock(content, target) {
+			if (typeof document === "undefined") throw new Error("Blocks are drawn only in a browser.");
+			drawing ??= createPuckConfigs({
+				...config,
+				blocks: {
+					...config.blocks,
+					[DRAWN_SLOT_BLOCK]: drawnSlot
+				}
+			});
+			return drawBlock(drawing, content, target);
 		}
 	};
 }
@@ -1070,11 +1273,11 @@ function useAdminClient() {
 	return value;
 }
 /** Media from the admin panel's page, which reads files the live site doesn't have yet from the repository. */
-function frameMediaPreviews(client, siteUrl) {
+function frameMediaPreviews(client, siteUrl, storage = () => void 0) {
 	return createMediaPreviews({ readBytes: async (path) => {
 		if (!path.startsWith(`${MEDIA_DIR}/`)) return void 0;
 		return await client.call("media.bytes", mediaUrl(path)) ?? void 0;
-	} }, siteUrl);
+	} }, siteUrl, storage);
 }
 function refused() {
 	throw new Error("The site's frame can't do this.");
@@ -1089,7 +1292,9 @@ function FrameProviders({ config, client, init, site, children }) {
 		code: localSiteCode(config)
 	}), [config]);
 	const described = useMemo(() => adminSite(config), [config]);
-	const mediaPreviews = useMemo(() => frameMediaPreviews(client, init.siteUrl), [client, init.siteUrl]);
+	const storage = useRef(site.content.mediaStorage);
+	storage.current = site.content.mediaStorage;
+	const mediaPreviews = useMemo(() => frameMediaPreviews(client, init.siteUrl, () => storage.current), [client, init.siteUrl]);
 	useEffect(() => client.channel.handle("media.remember", (file) => {
 		if (typeof file?.url === "string" && file.bytes instanceof Uint8Array) mediaPreviews.remember(file.url, file.bytes);
 	}), [client, mediaPreviews]);
@@ -1117,6 +1322,7 @@ function FrameProviders({ config, client, init, site, children }) {
 		drafts: {
 			kept: true,
 			names: [],
+			reviews: [],
 			open: async () => refused(),
 			publishAll: async () => refused(),
 			submit: async () => refused(),
@@ -1124,6 +1330,7 @@ function FrameProviders({ config, client, init, site, children }) {
 		},
 		readFile: async () => refused(),
 		listFiles: async () => refused(),
+		readBytes: async () => refused(),
 		registries: {},
 		outOfReach: false,
 		contentOnly: false,
@@ -1221,6 +1428,497 @@ 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 and
+* rounded corners, 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())
+					})
+				})
+			]
+		})]
+	});
+}
+/** 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, 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)
+			}),
+			/* @__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) {
+	if (field.type !== "text" || !isStyleField(field)) return field;
+	const render = ({ value, onChange, readOnly }) => /* @__PURE__ */ jsx(StyleControls, {
+		value,
+		colors,
+		readOnly,
+		label: field.label,
+		ownAlign,
+		onChange
+	});
+	return {
+		type: "custom",
+		label: field.label,
+		metadata: field.metadata,
+		render
+	};
+}
+function withStyleFieldsIn(fields, colors) {
+	if (!fields) return fields;
+	const ownAlign = "align" in fields;
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withStyleField(field, colors, ownAlign)]));
+}
+function withStyleComponent(component, colors) {
+	if (!component) return component;
+	const { resolveFields } = component;
+	return {
+		...component,
+		...component.fields && { fields: withStyleFieldsIn(component.fields, colors) },
+		...resolveFields && { resolveFields: async (...args) => withStyleFieldsIn(await resolveFields(...args), colors) }
+	};
+}
+/** 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)]));
+	return {
+		...config,
+		components,
+		...config.root && { root: withStyleComponent(config.root, colors) }
+	};
+}
+//#endregion
+//#region src/frame/table-field.tsx
+/**
+* The grid of cells a table's field is edited in (`tableField()` in
+* `@goodfellow-cms/react`), which Puck's editor shows in place of the field's
+* own render, since blocks can't bring their own editing code.
+*/
+const MAX_ROWS = 100;
+const MAX_COLUMNS = 12;
+function TableCellsField({ value, onChange, readOnly, label }) {
+	const t = useStrings();
+	const rows = tableCells(value);
+	const width = rows[0]?.length ?? 1;
+	const set = (row, column, text) => onChange(rows.map((cells, r) => r === row ? cells.map((cell, c) => c === column ? text : cell) : cells));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-table-field",
+		children: [
+			label && /* @__PURE__ */ jsx("div", {
+				className: "gfa-table-field-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gfa-table-field-grid",
+				style: { gridTemplateColumns: `repeat(${width}, minmax(6rem, 1fr)) auto` },
+				children: [rows.map((cells, row) => /* @__PURE__ */ jsxs("div", {
+					className: "gfa-table-field-row",
+					children: [cells.map((cell, column) => /* @__PURE__ */ jsx("input", {
+						className: "gfa-input gfa-table-field-cell",
+						value: cell,
+						readOnly,
+						"aria-label": t("table.cell", {
+							row: String(row + 1),
+							column: String(column + 1)
+						}),
+						onChange: (event) => set(row, column, event.target.value)
+					}, column)), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-table-field-remove",
+						disabled: readOnly || rows.length <= 1,
+						title: t("table.removeRow"),
+						"aria-label": t("table.removeRowNumber", { row: String(row + 1) }),
+						onClick: () => onChange(rows.filter((_, r) => r !== row)),
+						children: "×"
+					})]
+				}, row)), /* @__PURE__ */ jsx("div", {
+					className: "gfa-table-field-row",
+					children: Array.from({ length: width }, (_, column) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-table-field-remove",
+						disabled: readOnly || width <= 1,
+						title: t("table.removeColumn"),
+						"aria-label": t("table.removeColumnNumber", { column: String(column + 1) }),
+						onClick: () => onChange(rows.map((cells) => cells.filter((_, c) => c !== column))),
+						children: "×"
+					}, column))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gfa-table-field-actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gfa-button gfa-button-secondary",
+					disabled: readOnly || rows.length >= MAX_ROWS,
+					onClick: () => onChange([...rows, Array(width).fill("")]),
+					children: t("table.addRow")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gfa-button gfa-button-secondary",
+					disabled: readOnly || width >= MAX_COLUMNS,
+					onClick: () => onChange(rows.map((cells) => [...cells, ""])),
+					children: t("table.addColumn")
+				})]
+			})
+		]
+	});
+}
+function withTableField(field) {
+	if (field.type === "custom" && isTableField(field)) {
+		const render = ({ value, onChange, readOnly, field: own }) => /* @__PURE__ */ jsx(TableCellsField, {
+			value,
+			onChange,
+			readOnly,
+			label: own.label
+		});
+		return {
+			...field,
+			render
+		};
+	}
+	if (field.type === "array") return {
+		...field,
+		arrayFields: withTableFieldsIn(field.arrayFields)
+	};
+	if (field.type === "object") return {
+		...field,
+		objectFields: withTableFieldsIn(field.objectFields)
+	};
+	return field;
+}
+function withTableFieldsIn(fields) {
+	return Object.fromEntries(Object.entries(fields ?? {}).map(([name, field]) => [name, withTableField(field)]));
+}
+/** The config with every table's field edited as a grid of cells. */
+function withTableFields(config) {
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, component.fields ? {
+		...component,
+		fields: withTableFieldsIn(component.fields)
+	} : component]));
+	return {
+		...config,
+		components
+	};
+}
+//#endregion
 //#region src/frame/editor.tsx
 /**
 * Puck in the site's frame, for one page, header, footer, template or item.
@@ -1412,6 +2110,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();
@@ -1489,18 +2195,25 @@ function FrameEditor({ open, onOpened }) {
 			}
 		};
 	}, [client]);
+	const callPlugin = useCallback((plugin, method, ...args) => client.call("plugin.call", {
+		plugin,
+		method,
+		args
+	}), [client]);
 	const site = useMemo(() => ({
 		settings: content.settings,
 		menus: content.menus,
 		path,
 		collections: content.collections,
+		pages: pageLinks(content),
 		collection,
 		...view && { view },
 		...languages && {
 			languages,
 			home: languageHome(loaded, language)
 		},
-		adminLink
+		adminLink,
+		callPlugin
 	}), [
 		content,
 		loaded,
@@ -1509,7 +2222,8 @@ function FrameEditor({ open, onOpened }) {
 		collection,
 		view,
 		languages,
-		adminLink
+		adminLink,
+		callPlugin
 	]);
 	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
 	const config = useMemo(() => {
@@ -1520,7 +2234,7 @@ function FrameEditor({ open, onOpened }) {
 				layoutConfig
 			});
 		}
-		return canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site);
+		return withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site));
 	}, [
 		kind,
 		collection,
@@ -1532,6 +2246,11 @@ function FrameEditor({ open, onOpened }) {
 		site
 	]);
 	const described = useMemo(() => describeConfig(config), [config]);
+	const puckConfig = useMemo(() => kind === "entry" ? config : withStyleFields(config, content.settings.theme.colors), [
+		kind,
+		config,
+		content.settings.theme.colors
+	]);
 	const told = useRef(void 0);
 	useEffect(() => {
 		if (told.current === described) return;
@@ -1549,25 +2268,42 @@ 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,
@@ -1575,6 +2311,7 @@ function FrameEditor({ open, onOpened }) {
 				iframe: { enabled: false },
 				ui,
 				...kind === "entry" && { plugins: entryPlugins },
+				...open.readOnly && { permissions: READ_ONLY },
 				overrides,
 				onChange: updateView
 			})
@@ -1676,7 +2413,8 @@ function CodeService({ channel }) {
 		const stops = [
 			channel.handle("code.sitePages", ({ content, today }) => code.sitePages(content, today)),
 			channel.handle("code.pageView", async ({ page, content, today }) => await code.pageView(page, content, today) ?? null),
-			channel.handle("code.renderedProblems", ({ content, targets, today }) => code.renderedProblems(content, targets, today))
+			channel.handle("code.renderedProblems", ({ content, targets, today }) => code.renderedProblems(content, targets, today)),
+			channel.handle("code.drawBlock", ({ content, target }) => code.drawBlock(content, target))
 		];
 		return () => {
 			for (const stop of stops) stop();