@goodfellow-cms/admin 0.8.0 → 0.10.0

package/dist/editor.js

@@ -1,11 +1,12 @@
-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 { $ as formattedHtml, K as storedData, Q as editedMarkdown, _ as mediaUrl, a as showMediaInPreview, q as storedEntryFields, r as createMediaPreviews, s as createChannel, t as installCustomFonts } from "./custom-font-faces-DCan2jgW.js";
+import { C as MediaChoiceContext, D as MediaThumb, G as isForwardedShortcut, H as READY_MESSAGE, J as shortcutFor, K as isTyping, X as SETTINGS_SECTIONS, c as AdminContext, f as useSiteContent, g as useDarkMode, i as usePreviewStyles, lt as Button, m as setThemeChoice, ot as EditorTextContext, rt as syncedBlockEditorHref, s as withBlocksInPlace, st as useEditorText, t as SCHEDULE_PROP, u as useAdmin, w as MediaChooser, y as ScheduleFields, yt as findPage } from "./entry-values-CAPB0igb.js";
+import { i as useStrings, t as StringsProvider } from "./strings-CgC6pd6k.js";
+import { COLOR_SCHEME_ATTRIBUTE, DEFAULT_THEME_COLORS, DRAWN_SLOT_ELEMENT, FONT_SIZES, MEDIA_DIR, MINIMUM_CONTRAST, RADII, SCREEN_SIZES, SIDES, SPACING_STEPS, SYNCED_BLOCK, SYNCED_BLOCK_PROP, TEXT_ALIGNS, THEME_COLORS, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, colorSlug, contentInLanguage, contrastRatio, customFonts, customLength, datePart, describedIn, entryTitle, escapeCellText, escapeStyleText, expandSyncedBlocks, findEntry, findSyncedBlock, focusPosition, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isCustomColor, isEventLike, isOwnersOnlyField, isSafeUrl, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, readBlockStyle, renderedProblems, shownOccurrence, sitePages, syncedBlockIn, tableCellHtml, 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 { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, 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, blockIcon, blockKeywords, createPuckConfig, createPuckConfigs, cx, isStyleField, isTableField, mediaFieldKind, preparePage, siteMetadata, tableCells } from "@goodfellow-cms/react";
+import { PageBody, PageContent, SiteProvider, adminSite, applyEntry, blockIcon, blockKeywords, createPuckConfig, createPuckConfigs, cx, isStyleField, isTableField, mediaFieldKind, pageHeadings, 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`;
@@ -190,14 +191,16 @@ function installSiteCss(css) {
 }
 /**
 * The theme, fonts, custom CSS and Tailwind for the canvas, as the site
-* shows them, light or dark as `scheme` says.
+* shows them, light or dark as `scheme` says. The site's own fonts come from
+* their bytes, through `media`, since the frame can't load the site's files.
 */
-function useCanvasStyles(preview, styles) {
+function useCanvasStyles(preview, styles, media) {
 	const { theme, customCss, scheme } = styles;
 	useEffect(() => scopeTailwindOutput(), []);
 	useEffect(() => {
 		document.documentElement.setAttribute(COLOR_SCHEME_ATTRIBUTE, theme.darkMode ? scheme : "light");
-		styleElement("theme").textContent = escapeStyleText(scopeCss(themeToCss(theme)));
+		styleElement("theme").textContent = escapeStyleText(scopeCss(themeToCss(theme, void 0, { fontFaces: false })));
+		installCustomFonts(document, customFonts(theme), (url) => media.bytes(url));
 		const fonts = googleFontsUrl(theme);
 		const link = document.head.querySelector("link[data-gf=\"fonts\"]");
 		if (fonts) {
@@ -207,7 +210,11 @@ function useCanvasStyles(preview, styles) {
 			element.href = fonts;
 			if (!link) document.head.append(element);
 		} else link?.remove();
-	}, [theme, scheme]);
+	}, [
+		theme,
+		scheme,
+		media
+	]);
 	useEffect(() => {
 		const text = escapeStyleText(`${preview.themeCss}\n${customCss}`);
 		const current = document.head.querySelector("style[data-gf=\"tailwind\"]");
@@ -234,7 +241,8 @@ const usePuck$2 = createUsePuck();
 /**
 * How the page looks when a link to it is shared, such as in a message or on
 * social media: its title, description and image as link previews show them,
-* from the page's settings or else Site Settings', updated as they're edited.
+* from the page's settings or else Site Settings', updated as they're edited,
+* with the picture large over the title or small beside it, as its settings say.
 */
 function SharePreview({ path }) {
 	const t = useStrings();
@@ -265,7 +273,7 @@ function SharePreview({ path }) {
 				children: t("sharePreview.title")
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "gfa-share-card",
+				className: head.card === "summary" ? "gfa-share-card gfa-share-card-small" : "gfa-share-card",
 				children: [image ? /* @__PURE__ */ jsx("img", {
 					src: image,
 					alt: "",
@@ -709,6 +717,135 @@ function EventField({ id, label, hint, value, onChange, language, timeZone }) {
 	});
 }
 //#endregion
+//#region src/item-fields.tsx
+/**
+* The item editor's controls for links to items and for several images: a
+* searchable list of another collection's items, and a list of images to add
+* to, order and take out.
+*/
+/** How many matches the item picker lists at once; searching narrows the rest. */
+const SHOWN_MATCHES = 50;
+/** The items a link can name: the collection's own, never translations, which links reach through the item they translate. */
+function linkableItems(collection) {
+	return (collection?.entries ?? []).filter((entry) => entry.content.translationOf === void 0).map((entry) => ({
+		slug: entry.slug,
+		title: entryTitle(entry)
+	})).sort((a, b) => a.title.localeCompare(b.title));
+}
+/** Chooses one item, or several, of a collection, by searching their titles. */
+function ItemPicker({ id, collection, multiple, value, onChange }) {
+	const t = useStrings();
+	const listId = useId();
+	const [search, setSearch] = useState("");
+	const items = linkableItems(collection);
+	const chosen = typeof value === "string" ? value ? [value] : [] : Array.isArray(value) ? value.map(String) : [];
+	const name = collection?.settings.name ?? "";
+	const titleOf = (slug) => items.find((item) => item.slug === slug)?.title ?? slug;
+	const words = search.trim().toLowerCase();
+	const matches = items.filter((item) => !chosen.includes(item.slug) && (!words || item.title.toLowerCase().includes(words)));
+	const set = (next) => onChange(multiple ? next.length > 0 ? next : void 0 : next[0]);
+	if (!collection) return /* @__PURE__ */ jsx("p", {
+		className: "gfa-puck-hint",
+		children: t("editEntry.items.missing")
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "gfa-puck-hint",
+		children: t("editEntry.items.empty", { name })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-item-picker",
+		children: [chosen.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "gfa-item-picker-chosen",
+			children: chosen.map((slug) => /* @__PURE__ */ jsxs("li", {
+				className: "gfa-chosen-row",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "gfa-chosen-row-name",
+					children: titleOf(slug)
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-label": t("editEntry.items.remove", { title: titleOf(slug) }),
+					onClick: () => set(chosen.filter((other) => other !== slug)),
+					children: "×"
+				})]
+			}, slug))
+		}), (multiple || chosen.length === 0) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+			id,
+			type: "search",
+			className: "gfa-puck-input",
+			placeholder: t("editEntry.items.search", { name }),
+			"aria-controls": listId,
+			value: search,
+			onChange: (event) => setSearch(event.target.value)
+		}), /* @__PURE__ */ jsxs("ul", {
+			id: listId,
+			className: "gfa-item-picker-matches",
+			children: [matches.slice(0, SHOWN_MATCHES).map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => {
+					set([...chosen, item.slug]);
+					setSearch("");
+				},
+				children: item.title
+			}) }, item.slug)), matches.length === 0 && /* @__PURE__ */ jsx("li", {
+				className: "gfa-puck-hint",
+				children: t("editEntry.items.none", { name })
+			})]
+		})] })]
+	});
+}
+/** Several images, in order: each can move up or down or be taken out, and the media chooser adds more. */
+function ImagesField({ value, onChange }) {
+	const t = useStrings();
+	const images = Array.isArray(value) ? value.filter((item) => typeof item === "string" && !!item) : [];
+	const set = (next) => onChange(next.length > 0 ? next : void 0);
+	const move = (index, by) => {
+		const next = [...images];
+		const [moved] = next.splice(index, 1);
+		next.splice(index + by, 0, moved);
+		set(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-images-field",
+		children: [images.length > 0 && /* @__PURE__ */ jsx("ul", { children: images.map((src, index) => /* @__PURE__ */ jsxs("li", {
+			className: "gfa-chosen-row",
+			children: [
+				/* @__PURE__ */ jsx(MediaThumb, {
+					url: src,
+					className: "gfa-images-field-thumb"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "gfa-chosen-row-name",
+					children: src.slice(src.lastIndexOf("/") + 1)
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					disabled: index === 0,
+					"aria-label": t("editEntry.images.up"),
+					onClick: () => move(index, -1),
+					children: "↑"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					disabled: index === images.length - 1,
+					"aria-label": t("editEntry.images.down"),
+					onClick: () => move(index, 1),
+					children: "↓"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-label": t("editEntry.images.remove"),
+					onClick: () => set(images.filter((_, other) => other !== index)),
+					children: "×"
+				})
+			]
+		}, src)) }), /* @__PURE__ */ jsx(MediaChooser, {
+			value: "",
+			kind: "image",
+			onChange: (src) => src && !images.includes(src) && set([...images, src])
+		})]
+	});
+}
+//#endregion
 //#region src/markdown-field.tsx
 /**
 * Puck's formatted editor, without what Markdown can't store: underlining and
@@ -839,7 +976,7 @@ function Hint({ text }) {
 	}) : null;
 }
 /** What the AI assistant is told a field holds, since it can't tell from a custom field. */
-function aiHint(field, markdown) {
+function aiHint(field, markdown, collections) {
 	const description = field.hint;
 	if (markdown) return {
 		type: "string",
@@ -864,6 +1001,25 @@ function aiHint(field, markdown) {
 			options: field.options ?? [],
 			description
 		};
+		case "yesno": return {
+			type: "boolean",
+			description
+		};
+		case "item": {
+			const options = linkableItems(collections.find((candidate) => candidate.id === field.collection)).slice(0, MAX_AI_ITEMS).map((item) => ({
+				value: item.slug,
+				label: item.title
+			}));
+			if (options.length === 0) return void 0;
+			return {
+				type: field.multiple ? "choices" : "choice",
+				options,
+				description
+			};
+		}
+		case "images":
+		case "file":
+		case "group": return;
 		case "link": return {
 			type: "string",
 			description: [description, "A web address or a page address such as /about"].filter(Boolean).join(". ")
@@ -878,16 +1034,102 @@ function aiHint(field, markdown) {
 		};
 	}
 }
+/** The most items the assistant is offered to link to, so a large collection doesn't fill its request. */
+const MAX_AI_ITEMS = 200;
 /** The Puck field for one of a collection's fields, shown in the editor's sidebar. */
-function puckField(field, collection, settings) {
+function puckField(field, collection, content) {
 	const markdown = collection.settings.markdown?.body === field.name;
-	const control = fieldControl(field, markdown, settings);
-	return field.type === "event" ? control : {
+	const control = fieldControl(field, markdown, content);
+	const ai = field.type === "event" ? void 0 : aiHint(field, markdown, content.collections);
+	return ai ? {
 		...control,
-		metadata: { ai: aiHint(field, markdown) }
-	};
+		metadata: { ai }
+	} : control;
+}
+/** A text field for an address, with the media chooser below it. */
+function addressControl(label, hint, kind) {
+	return { render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+		label,
+		children: [
+			/* @__PURE__ */ jsx(AutoField, {
+				id,
+				field: { type: "text" },
+				value: typeof value === "string" ? value : "",
+				onChange
+			}),
+			/* @__PURE__ */ jsx(MediaChooser, {
+				value: typeof value === "string" ? value : "",
+				kind,
+				onChange
+			}),
+			/* @__PURE__ */ jsx(Hint, { text: hint })
+		]
+	}) };
+}
+/** A checkbox for a yes or no field, which stores nothing when it's off. */
+function YesNo({ id, label, hint, value, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-puck-field",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "gfa-checkbox",
+			children: [/* @__PURE__ */ jsx("input", {
+				id,
+				type: "checkbox",
+				checked: value === true,
+				onChange: (event) => onChange(event.target.checked ? true : void 0)
+			}), label]
+		}), /* @__PURE__ */ jsx(Hint, { text: hint })]
+	});
+}
+/** One of a repeating group's fields, as the group's rows show it. */
+function groupFieldControl(field) {
+	switch (field.type) {
+		case "textarea": return {
+			type: "textarea",
+			label: field.label
+		};
+		case "number": return {
+			type: "number",
+			label: field.label
+		};
+		case "date": return {
+			type: "custom",
+			label: field.label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(FieldLabel, {
+				label: field.label,
+				children: /* @__PURE__ */ jsx("input", {
+					id,
+					type: "date",
+					className: "gfa-puck-input",
+					value: typeof value === "string" ? value : "",
+					onChange: (event) => onChange(event.target.value)
+				})
+			})
+		};
+		case "yesno": return {
+			type: "custom",
+			label: field.label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(YesNo, {
+				id,
+				label: field.label,
+				value,
+				onChange
+			})
+		};
+		case "image":
+		case "link": return {
+			type: "custom",
+			label: field.label,
+			...addressControl(field.label, void 0, field.type === "image" ? "image" : "file")
+		};
+		default: return {
+			type: "text",
+			label: field.label
+		};
+	}
 }
-function fieldControl(field, markdown, settings) {
+function fieldControl(field, markdown, content) {
+	const { settings } = content;
 	const label = field.required ? `${field.label} *` : field.label;
 	if (markdown) return {
 		type: "custom",
@@ -965,6 +1207,59 @@ function fieldControl(field, markdown, settings) {
 				});
 			}
 		};
+		case "yesno": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(YesNo, {
+				id,
+				label,
+				hint: field.hint,
+				value,
+				onChange
+			})
+		};
+		case "item": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				el: "div",
+				children: [/* @__PURE__ */ jsx(ItemPicker, {
+					id,
+					collection: content.collections.find((candidate) => candidate.id === field.collection),
+					multiple: field.multiple === true,
+					value,
+					onChange
+				}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+			})
+		};
+		case "images": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				el: "div",
+				children: [/* @__PURE__ */ jsx(ImagesField, {
+					value,
+					onChange
+				}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+			})
+		};
+		case "file": return {
+			type: "custom",
+			label,
+			...addressControl(label, field.hint, "file")
+		};
+		case "group": {
+			const subFields = field.fields ?? [];
+			const first = subFields[0]?.name;
+			return {
+				type: "array",
+				label,
+				arrayFields: Object.fromEntries(subFields.map((sub) => [sub.name, groupFieldControl(sub)])),
+				getItemSummary: (row, index) => first && typeof row?.[first] === "string" && row[first] || `${(index ?? 0) + 1}`
+			};
+		}
 		case "event": return {
 			type: "custom",
 			label,
@@ -1041,12 +1336,11 @@ function EntryPreview({ collection, entry, content, templateConfig, layoutConfig
 		current
 	]);
 	const metadata = useMemo(() => siteMetadata(site), [site]);
-	const applied = useMemo(() => applyEntry(migrate(collection.settings.template), templateConfig, collection, current, content.settings.language, content.settings.timeZone), [
+	const applied = useMemo(() => applyEntry(expandSyncedBlocks(migrate(collection.settings.template), content, content.settings.language), templateConfig, collection, current, content.settings.language, content.settings.timeZone, content.collections), [
 		collection,
 		templateConfig,
 		current,
-		content.settings.language,
-		content.settings.timeZone
+		content
 	]);
 	const [resolved, setResolved] = useState(applied);
 	useEffect(() => {
@@ -1076,8 +1370,8 @@ function EntryPreview({ collection, entry, content, templateConfig, layoutConfig
 		value: site,
 		children: /* @__PURE__ */ jsx(SiteFrame, {
 			layoutConfig,
-			header: content.header.data,
-			footer: content.footer.data,
+			header: expandSyncedBlocks(content.header.data, content, content.settings.language),
+			footer: expandSyncedBlocks(content.footer.data, content, content.settings.language),
 			site,
 			className: typeof className === "string" ? className : void 0,
 			children: /* @__PURE__ */ jsx(Render, {
@@ -1104,7 +1398,7 @@ function entryConfig(collection, entry, content, configs) {
 	return {
 		components: {},
 		root: {
-			fields: Object.fromEntries([...collection.settings.fields.map((field) => [field.name, puckField(field, collection, content.settings)]), [SCHEDULE_PROP, scheduleField(content)]]),
+			fields: Object.fromEntries([...collection.settings.fields.map((field) => [field.name, puckField(field, collection, content)]), [SCHEDULE_PROP, scheduleField(content)]]),
 			render: () => /* @__PURE__ */ jsx("div", {
 				className: "gf-canvas",
 				children: /* @__PURE__ */ jsx(EntryPreview, {
@@ -1149,25 +1443,56 @@ function withSlotPlaces(block, config) {
 		}
 	};
 }
-/** 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 }) {
+/** The config a target's block is in, and the page it's on, with that block alone. */
+function targetPage(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])]
+	return {
+		config,
+		page: {
+			path,
+			file: found?.file ?? "",
+			content: {
+				...found?.content,
+				version: found?.content.version ?? 1,
+				data: {
+					root: root ?? { props: {} },
+					content: [withSlotPlaces(block, config.components[block.type])]
+				}
 			}
 		}
 	};
+}
+/** A copy of fields as JSON, as the site's description has them: what they say, without the code in them. */
+function fieldsAsJson(fields) {
+	return JSON.parse(JSON.stringify(fields ?? {}));
+}
+/** A block's fields as its props make them, as `blockFields()` describes. */
+async function blockFields(configs, content, target) {
+	const { config, page } = targetPage(configs, content, target);
+	const component = config.components[target.block.type];
+	const fields = component.fields ?? {};
+	if (!component.resolveFields) return fieldsAsJson(fields);
+	const prepared = await preparePage({
+		...configs,
+		page: config
+	}, content, page);
+	return fieldsAsJson(await component.resolveFields(target.block, {
+		changed: {},
+		fields,
+		lastFields: fields,
+		lastData: null,
+		metadata: siteMetadata(prepared.site),
+		appState: {},
+		parent: null
+	}));
+}
+/** One block drawn as the site draws it, in the page at its address, as `drawBlock()` describes. */
+async function drawBlock(configs, content, target) {
+	const { config, page } = targetPage(configs, content, target);
 	const prepared = await preparePage({
 		...configs,
 		page: config
@@ -1242,6 +1567,9 @@ function localSiteCode(config) {
 				}
 			});
 			return drawBlock(drawing, content, target);
+		},
+		async blockFields(content, target) {
+			return blockFields(configs, content, target);
 		}
 	};
 }
@@ -1289,6 +1617,7 @@ function FrameProviders({ config, client, init, site, children }) {
 		pageConfig: createPuckConfig(config, "page"),
 		layoutConfig: createPuckConfig(config, "layout"),
 		templateConfig: createPuckConfig(config, "template"),
+		syncedConfig: createPuckConfig(config, "synced"),
 		code: localSiteCode(config)
 	}), [config]);
 	const described = useMemo(() => adminSite(config), [config]);
@@ -1495,20 +1824,33 @@ function withOwnersOnlyLocked(config) {
 }
 //#endregion
 //#region src/frame/page-settings.ts
+/** What each setting is where a page leaves it out, which the editor shows as chosen. */
+const SHOWN_DEFAULTS = {
+	noIndex: false,
+	noFollow: false,
+	noSnippet: false,
+	card: "auto"
+};
 /** For pages and templates, whose settings include `noIndex`; `path` is the page's, for pages. */
 function shownSettings(original, path) {
 	const fixed = path !== void 0 && neverIndexed(path);
 	const originalRoot = original.root;
-	const originalValue = originalRoot.props?.noIndex;
+	const originalProps = originalRoot.props ?? {};
 	return {
 		show(data) {
 			const root = data.root;
+			const missing = Object.entries(SHOWN_DEFAULTS).filter(([name]) => root.props?.[name] === void 0);
+			if (missing.length === 0 && !fixed) return data;
+			const props = {
+				...root.props,
+				...Object.fromEntries(missing)
+			};
 			if (fixed) return {
 				...data,
 				root: {
 					...root,
 					props: {
-						...root.props,
+						...props,
 						noIndex: true
 					},
 					readOnly: {
@@ -1517,32 +1859,29 @@ function shownSettings(original, path) {
 					}
 				}
 			};
-			if (root.props?.noIndex !== void 0) return data;
 			return {
 				...data,
 				root: {
 					...root,
-					props: {
-						...root.props,
-						noIndex: false
-					}
+					props
 				}
 			};
 		},
 		keep(data) {
 			const root = data.root;
-			const { noIndex, ...props } = root.props ?? {};
-			const kept = fixed || originalValue === void 0 && noIndex === false ? originalValue : noIndex;
+			const props = { ...root.props };
+			for (const [name, value] of Object.entries(SHOWN_DEFAULTS)) {
+				const kept = fixed && name === "noIndex" || originalProps[name] === void 0 && props[name] === value ? originalProps[name] : props[name];
+				if (kept === void 0) delete props[name];
+				else props[name] = kept;
+			}
 			const { readOnly: _shown, ...rest } = root;
 			const readOnly = fixed ? originalRoot.readOnly : root.readOnly;
 			return {
 				...data,
 				root: {
 					...rest,
-					props: kept === void 0 ? props : {
-						...props,
-						noIndex: kept
-					},
+					props,
 					...readOnly && { readOnly }
 				}
 			};
@@ -1964,16 +2303,230 @@ function withStyleFields(config, colors) {
 	};
 }
 //#endregion
+//#region src/frame/synced-block.tsx
+/**
+* Synced blocks on the editor's canvas: a placed Synced block draws the
+* synced block's own blocks in its place, read-only, with a link to edit it,
+* since they're kept once for every page that places them. Builds put them
+* in place before rendering (`expandSyncedBlocks()`); the editor keeps the
+* placement, which is what the page saves.
+*/
+function SyncedBlockDrawing({ name, config, drawing }) {
+	const t = useStrings();
+	const block = name ? findSyncedBlock(drawing.content, name) : void 0;
+	if (!block) return /* @__PURE__ */ jsx("div", {
+		className: "gfa-synced-block gfa-synced-block-missing",
+		children: /* @__PURE__ */ jsx("p", { children: name ? t("synced.missing", { name }) : t("synced.choose") })
+	});
+	const shown = syncedBlockIn(block, drawing.language);
+	const href = syncedBlockEditorHref(block.name, drawing.main ? void 0 : drawing.language);
+	const data = {
+		root: { props: {} },
+		content: shown.data.content
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-synced-block",
+		"data-gf-synced-block": block.name,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "gfa-synced-block-bar",
+			children: [/* @__PURE__ */ jsx("span", { children: t("synced.label", { title: shown.title }) }), /* @__PURE__ */ jsx("a", {
+				href,
+				ref: (element) => registerOverlayPortal(element, { disableDrag: true }),
+				onClick: (event) => {
+					event.preventDefault();
+					drawing.navigate(href);
+				},
+				children: t("synced.edit")
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			inert: true,
+			children: /* @__PURE__ */ jsx(Render, {
+				config,
+				data,
+				metadata: drawing.metadata
+			})
+		})]
+	});
+}
+/**
+* The config with its Synced block drawing the synced block it places, from
+* the blocks of the same config, whose own Synced block draws nothing, since
+* a synced block can't place another.
+*/
+function withSyncedBlockDrawing(config, drawing) {
+	const component = config.components[SYNCED_BLOCK];
+	if (!component) return config;
+	return {
+		...config,
+		components: {
+			...config.components,
+			[SYNCED_BLOCK]: {
+				...component,
+				render: (props) => /* @__PURE__ */ jsx(SyncedBlockDrawing, {
+					name: typeof props[SYNCED_BLOCK_PROP] === "string" ? props[SYNCED_BLOCK_PROP] : "",
+					config,
+					drawing
+				})
+			}
+		}
+	};
+}
+//#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.
+* own render, since blocks can't bring their own editing code. Each cell is
+* a small box of formatted text: bold, italics, links and line breaks, with
+* what's pasted kept to those (`tableCellHtml()`).
 */
 const MAX_ROWS = 100;
 const MAX_COLUMNS = 12;
+/** One cell, as formatted text. What it holds comes from the cell's value, except while it's being typed in. */
+function RichCell({ value, label, readOnly, onChange, onFocus }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const cell = ref.current;
+		if (!cell || document.activeElement === cell) return;
+		const html = tableCellHtml(value);
+		if (cell.innerHTML !== html) cell.innerHTML = html;
+	}, [value]);
+	const changed = () => {
+		if (ref.current) onChange(tableCellHtml(ref.current.innerHTML));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "textbox",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-multiline": "true",
+		"aria-readonly": readOnly || void 0,
+		contentEditable: !readOnly,
+		suppressContentEditableWarning: true,
+		className: "gfa-input gfa-table-field-cell gfa-table-field-rich",
+		onInput: changed,
+		onFocus: () => ref.current && onFocus(ref.current),
+		onKeyDown: (event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				document.execCommand("insertLineBreak");
+			} else if ((event.ctrlKey || event.metaKey) && (event.key === "b" || event.key === "i")) {
+				event.preventDefault();
+				document.execCommand(event.key === "b" ? "bold" : "italic");
+			}
+		},
+		onPaste: (event) => {
+			event.preventDefault();
+			const html = event.clipboardData.getData("text/html");
+			const text = event.clipboardData.getData("text/plain");
+			document.execCommand("insertHTML", false, html ? tableCellHtml(html) : escapeCellText(text));
+		}
+	});
+}
+/** Bold, italics and links for the cell last typed in. */
+function CellToolbar({ cell, readOnly }) {
+	const t = useStrings();
+	const [linking, setLinking] = useState();
+	const disabled = readOnly || !cell;
+	const command = (name, argument) => {
+		cell?.focus();
+		document.execCommand(name, false, argument);
+	};
+	const startLink = () => {
+		const selection = document.getSelection();
+		const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : void 0;
+		setLinking({
+			range: range && cell?.contains(range.commonAncestorContainer) ? range : void 0,
+			address: ""
+		});
+	};
+	const applyLink = (event) => {
+		event.preventDefault();
+		const address = linking?.address.trim() ?? "";
+		if (cell && linking?.range && address && isSafeUrl(address)) {
+			cell.focus();
+			const selection = document.getSelection();
+			selection?.removeAllRanges();
+			selection?.addRange(linking.range);
+			document.execCommand("createLink", false, address);
+		}
+		setLinking(void 0);
+	};
+	const keep = (event) => event.preventDefault();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-table-field-toolbar",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gfa-table-field-tool",
+				disabled,
+				onMouseDown: keep,
+				onClick: () => command("bold"),
+				children: /* @__PURE__ */ jsx("strong", { children: t("table.bold") })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gfa-table-field-tool",
+				disabled,
+				onMouseDown: keep,
+				onClick: () => command("italic"),
+				children: /* @__PURE__ */ jsx("em", { children: t("table.italic") })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gfa-table-field-tool",
+				disabled,
+				onMouseDown: keep,
+				onClick: startLink,
+				children: t("table.link")
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gfa-table-field-tool",
+				disabled,
+				onMouseDown: keep,
+				onClick: () => command("unlink"),
+				children: t("table.unlink")
+			}),
+			linking && /* @__PURE__ */ jsxs("form", {
+				className: "gfa-table-field-link",
+				onSubmit: applyLink,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						className: "gfa-input",
+						"aria-label": t("table.linkAddress"),
+						placeholder: "/about",
+						value: linking.address,
+						autoFocus: true,
+						onChange: (event) => setLinking({
+							...linking,
+							address: event.target.value
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: "gfa-button gfa-button-secondary",
+						disabled: !linking.range,
+						children: t("table.linkApply")
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-button gfa-button-secondary",
+						onClick: () => setLinking(void 0),
+						children: t("action.cancel")
+					}),
+					!linking.range && /* @__PURE__ */ jsx("p", {
+						className: "gfa-hint",
+						children: t("table.linkSelect")
+					})
+				]
+			})
+		]
+	});
+}
 function TableCellsField({ value, onChange, readOnly, label }) {
 	const t = useStrings();
+	const [active, setActive] = useState();
 	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));
@@ -1984,20 +2537,24 @@ function TableCellsField({ value, onChange, readOnly, label }) {
 				className: "gfa-table-field-label",
 				children: label
 			}),
+			/* @__PURE__ */ jsx(CellToolbar, {
+				cell: active?.isConnected ? active : void 0,
+				readOnly
+			}),
 			/* @__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",
+					children: [cells.map((cell, column) => /* @__PURE__ */ jsx(RichCell, {
 						value: cell,
 						readOnly,
-						"aria-label": t("table.cell", {
+						label: t("table.cell", {
 							row: String(row + 1),
 							column: String(column + 1)
 						}),
-						onChange: (event) => set(row, column, event.target.value)
+						onChange: (html) => set(row, column, html),
+						onFocus: setActive
 					}, column)), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: "gfa-table-field-remove",
@@ -2128,9 +2685,12 @@ function canvasConfig(kind, config, layoutConfig, header, footer, site) {
 		children: kind === "header" ? /* @__PURE__ */ jsx("header", {
 			className: "gf-header",
 			children
-		}) : /* @__PURE__ */ jsx("footer", {
+		}) : kind === "footer" ? /* @__PURE__ */ jsx("footer", {
 			className: "gf-footer",
 			children
+		}) : /* @__PURE__ */ jsx("main", {
+			className: "gf-main",
+			children
 		})
 	});
 	return {
@@ -2250,6 +2810,13 @@ function Bridge({ channel, settings }) {
 						content: [...previous.content, ...change.blocks]
 					})
 				});
+				else if (change.type === "detach") {
+					if (!getSelectorForId(change.id)) throw new Error("The block being changed is no longer on the page.");
+					dispatch({
+						type: "setData",
+						data: (previous) => withBlocksInPlace(previous, change.id, change.blocks)
+					});
+				}
 			})
 		];
 		return () => {
@@ -2279,7 +2846,7 @@ const READ_ONLY = {
 };
 function FrameEditor({ open, onOpened }) {
 	const client = useAdminClient();
-	const { config: siteConfig, pageConfig, layoutConfig, templateConfig } = useFrameCode();
+	const { config: siteConfig, pageConfig, layoutConfig, templateConfig, syncedConfig } = useFrameCode();
 	const { preview, mediaPreviews } = useAdmin();
 	const { content: loaded } = useSiteContent();
 	const { kind, path, title, data } = open;
@@ -2306,7 +2873,7 @@ function FrameEditor({ open, onOpened }) {
 		loaded.settings.theme,
 		loaded.customCss,
 		dark
-	]));
+	]), mediaPreviews);
 	useEffect(() => showMediaInPreview(document, mediaPreviews), [mediaPreviews]);
 	useEffect(() => {
 		const onClick = (event) => {
@@ -2339,9 +2906,13 @@ function FrameEditor({ open, onOpened }) {
 		siteConfig.blocks
 	]);
 	const [view, setView] = useState(() => viewOf(initialData));
+	const headingsOf = useCallback((next) => kind === "entry" || kind === "header" || kind === "footer" ? [] : pageHeadings(next, { components: siteConfig.blocks }), [kind, siteConfig.blocks]);
+	const [headings, setHeadings] = useState(() => headingsOf(initialData));
 	const updateView = (next) => {
 		const found = viewOf(next);
 		setView((current) => current?.block === found?.block ? current : found);
+		const listed = headingsOf(next);
+		setHeadings((current) => JSON.stringify(current) === JSON.stringify(listed) ? current : listed);
 	};
 	const adminLink = useCallback((place) => {
 		const href = ADMIN_PLACES[place];
@@ -2354,6 +2925,16 @@ function FrameEditor({ open, onOpened }) {
 			}
 		};
 	}, [client]);
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			const shortcut = shortcutFor(event, isTyping(event.target));
+			if (!isForwardedShortcut(shortcut)) return;
+			event.preventDefault();
+			client.call("shortcut", shortcut).catch(() => {});
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [client]);
 	const callPlugin = useCallback((plugin, method, ...args) => client.call("plugin.call", {
 		plugin,
 		method,
@@ -2367,10 +2948,14 @@ function FrameEditor({ open, onOpened }) {
 		pages: pageLinks(content),
 		collection,
 		...view && { view },
+		...headings.length > 0 && { headings },
 		...languages && {
 			languages,
 			home: languageHome(loaded, language)
 		},
+		...content.descriptions && { descriptions: Object.fromEntries(Object.entries(content.descriptions).map(([url, description]) => [url, describedIn(description, content.settings.language)])) },
+		...content.focus && { focus: Object.fromEntries(Object.entries(content.focus).map(([url, point]) => [url, focusPosition(point)])) },
+		...loaded.syncedBlocks && { syncedBlocks: loaded.syncedBlocks },
 		adminLink,
 		callPlugin
 	}), [
@@ -2380,12 +2965,26 @@ function FrameEditor({ open, onOpened }) {
 		path,
 		collection,
 		view,
+		headings,
 		languages,
 		adminLink,
 		callPlugin
 	]);
 	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
 	const { puck: dictionary, labels } = useEditorText();
+	const metadata = useMemo(() => siteMetadata(site), [site]);
+	const drawn = useCallback((config) => withSyncedBlockDrawing(config, {
+		content: loaded,
+		language,
+		main: language === mainLanguage(loaded.settings),
+		metadata,
+		navigate: (href) => void client.call("navigate", href)
+	}), [
+		loaded,
+		language,
+		metadata,
+		client
+	]);
 	const config = useMemo(() => {
 		if (kind === "entry") {
 			if (!collection || !entry) throw new Error("The item isn't in the site.");
@@ -2394,17 +2993,21 @@ function FrameEditor({ open, onOpened }) {
 				layoutConfig
 			}), labels);
 		}
-		return withLabels(withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site)), labels);
+		return withLabels(withTableFields(canvasConfig(kind, drawn(kind === "page" ? pageConfig : kind === "template" ? templateConfig : kind === "synced" ? syncedConfig : layoutConfig), layoutConfig, expandSyncedBlocks(content.header.data, loaded, language), expandSyncedBlocks(content.footer.data, loaded, language), site)), labels);
 	}, [
 		kind,
 		collection,
 		entry,
 		pageConfig,
 		templateConfig,
+		syncedConfig,
 		layoutConfig,
 		content,
+		loaded,
+		language,
 		site,
-		labels
+		labels,
+		drawn
 	]);
 	const described = useMemo(() => describeConfig(config), [config]);
 	const puckConfig = useMemo(() => {
@@ -2470,7 +3073,7 @@ function FrameEditor({ open, onOpened }) {
 			children: /* @__PURE__ */ jsx(Puck, {
 				config: puckConfig,
 				data: initialData,
-				metadata: siteMetadata(site),
+				metadata,
 				headerTitle: title,
 				dictionary,
 				height: "100%",
@@ -2580,7 +3183,8 @@ function CodeService({ channel }) {
 			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.drawBlock", ({ content, target }) => code.drawBlock(content, target))
+			channel.handle("code.drawBlock", ({ content, target }) => code.drawBlock(content, target)),
+			channel.handle("code.blockFields", ({ content, target }) => code.blockFields(content, target))
 		];
 		return () => {
 			for (const stop of stops) stop();