@goodfellow-cms/admin 0.4.0 → 0.6.0

package/dist/editor.js

@@ -0,0 +1,1985 @@
+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 { 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 { createPortal, flushSync } from "react-dom";
+const CANVAS = `.gf-canvas`;
+const CANVAS_CONTAINER = "gf-canvas";
+/** At-rules whose blocks hold rules like the top level's, which are kept to the canvas too. */
+const GROUPS = /* @__PURE__ */ new Set([
+	"media",
+	"supports",
+	"layer",
+	"container",
+	"document",
+	"starting-style"
+]);
+/** Where `text` has a comment, string or escape starting at `index`, the index just after it. */
+function skipAtom(text, index) {
+	const char = text[index];
+	if (char === "/" && text[index + 1] === "*") {
+		const end = text.indexOf("*/", index + 2);
+		return end === -1 ? text.length : end + 2;
+	}
+	if (char === "\"" || char === "'") {
+		let at = index + 1;
+		while (at < text.length && text[at] !== char) at += text[at] === "\\" ? 2 : 1;
+		return at + 1;
+	}
+	if (char === "\\") return index + 2;
+	return index;
+}
+/** Splits a selector list at its top-level commas. */
+function splitList(list) {
+	const parts = [];
+	let depth = 0;
+	let start = 0;
+	for (let at = 0; at < list.length; at++) {
+		const skipped = skipAtom(list, at);
+		if (skipped !== at) {
+			at = skipped - 1;
+			continue;
+		}
+		const char = list[at];
+		if (char === "(" || char === "[") depth++;
+		else if (char === ")" || char === "]") depth--;
+		else if (char === "," && depth === 0) {
+			parts.push(list.slice(start, at));
+			start = at + 1;
+		}
+	}
+	parts.push(list.slice(start));
+	return parts;
+}
+/** The page itself, as selectors name it, which becomes the canvas: `:root`, `html`, `html > body` or `body`. */
+const ROOT = /^(?:(?:html|:root|:host)(?![\w-])(?:\s*>?\s*body(?![\w-]))?|body(?![\w-]))/i;
+/** Attributes, classes and pseudo-classes on the page itself, such as `[data-gf-color-scheme="dark"]`. */
+const QUALIFIERS = /^(?:\[[^\]]*\]|[.#][\w-]+|:[\w-]+(?:\((?:[^()]|\([^()]*\))*\))?)+/;
+/** A pseudo-element at the end of a selector, which `:is()` can't hold. */
+const PSEUDO_ELEMENT = /(::?(?:before|after|first-line|first-letter)|::[\w-]+(?:\([^)]*\))?)+$/i;
+/** One selector, kept to the canvas. */
+function scopeSelector(selector) {
+	const trimmed = selector.trim();
+	if (!trimmed) return selector;
+	const root = trimmed.match(ROOT);
+	if (root) {
+		const rest = trimmed.slice(root[0].length);
+		const qualifiers = rest.match(QUALIFIERS)?.[0] ?? "";
+		return qualifiers ? `:root${qualifiers} ${CANVAS}${rest.slice(qualifiers.length)}` : `${CANVAS}${rest}`;
+	}
+	const pseudo = trimmed.match(PSEUDO_ELEMENT);
+	const base = pseudo ? trimmed.slice(0, pseudo.index).trim() : trimmed;
+	const after = pseudo ? pseudo[0] : "";
+	return base ? `${CANVAS} :is(${base})${after}` : `${CANVAS} ${after}`;
+}
+/** A media query on the page's width alone, as one on the canvas's, or `undefined` for any other. */
+function widthQuery(prelude) {
+	const query = prelude.replace(/^@media\s+/i, "").replace(/^(?:only\s+)?screen\s+and\s+/i, "").trim();
+	if (query.includes(",")) return void 0;
+	const features = query.split(/\s+and\s+/i);
+	return features.every((feature) => /^\(\s*(?:(?:min-|max-)?width\s*:[^()]+|[^()]*\bwidth\b[^()]*)\)$/i.test(feature.trim())) ? `@container ${CANVAS_CONTAINER} ${features.map((feature) => feature.trim()).join(" and ")}` : void 0;
+}
+/** The site's CSS, kept to the canvas. */
+function scopeCss(css) {
+	let out = "";
+	const stack = ["group"];
+	let start = 0;
+	let at = 0;
+	while (at < css.length) {
+		const skipped = skipAtom(css, at);
+		if (skipped !== at) {
+			at = skipped;
+			continue;
+		}
+		const char = css[at];
+		if (char === "{") {
+			const raw = css.slice(start, at);
+			const lead = raw.match(/^\s*/)?.[0] ?? "";
+			const prelude = raw.replace(/\/\*[\s\S]*?\*\//g, "").trim();
+			if (stack[stack.length - 1] === "group") {
+				if (prelude.startsWith("@")) {
+					const name = prelude.slice(1).match(/^[\w-]+/)?.[0]?.toLowerCase() ?? "";
+					const container = name === "media" ? widthQuery(prelude) : void 0;
+					out += `${lead}${container ?? prelude}{`;
+					stack.push(GROUPS.has(name) ? "group" : "other");
+				} else {
+					out += `${lead}${splitList(prelude).map(scopeSelector).join(", ")}{`;
+					stack.push("other");
+				}
+			} else {
+				out += `${raw}{`;
+				stack.push("other");
+			}
+			at += 1;
+			start = at;
+			continue;
+		}
+		if (char === "}" || char === ";") {
+			if (char === "}" && stack.length > 1) stack.pop();
+			out += css.slice(start, at + 1);
+			at += 1;
+			start = at;
+			continue;
+		}
+		at += 1;
+	}
+	out += css.slice(start);
+	return `${CANVAS}{container:${CANVAS_CONTAINER}/inline-size}\n${out}`;
+}
+//#endregion
+//#region src/frame/canvas-styles.ts
+/**
+* The site's styles in the editor's frame, kept to its canvas: the site's
+* compiled CSS, the theme, and what Tailwind makes in the browser for classes
+* typed in the editor and for custom CSS, so none of it restyles Puck.
+*/
+function styleElement(key) {
+	let element = document.head.querySelector(`style[data-gf="${key}"]`);
+	if (!element) {
+		element = document.createElement("style");
+		element.dataset.gf = key;
+		document.head.append(element);
+	}
+	return element;
+}
+/** What `@tailwindcss/browser` writes, which starts with its licence. */
+function isTailwindOutput(node) {
+	return node instanceof HTMLStyleElement && !node.dataset.gf && node.getAttribute("type") === null && (node.textContent ?? "").startsWith("/*! tailwindcss");
+}
+/**
+* Keeps Tailwind's own output from applying, since it styles the whole page,
+* and puts a copy of it kept to the canvas in its place, as it changes.
+*/
+function scopeTailwindOutput() {
+	const watched = /* @__PURE__ */ new WeakSet();
+	const copy = styleElement("tailwind-scoped");
+	const follow = (output) => {
+		if (watched.has(output)) return;
+		watched.add(output);
+		output.media = "not all";
+		const update = () => {
+			copy.textContent = scopeCss(output.textContent ?? "");
+		};
+		update();
+		new MutationObserver(update).observe(output, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+	};
+	const find = () => {
+		for (const element of document.head.querySelectorAll("style")) if (isTailwindOutput(element)) follow(element);
+	};
+	const observer = new MutationObserver(find);
+	observer.observe(document.head, {
+		childList: true,
+		subtree: true,
+		characterData: true
+	});
+	find();
+	return () => observer.disconnect();
+}
+/** The site's compiled CSS, kept to the canvas, once. */
+function installSiteCss(css) {
+	styleElement("site").textContent = escapeStyleText(scopeCss(css.join("\n")));
+}
+/**
+* The theme, fonts, custom CSS and Tailwind for the canvas, as the site
+* shows them, light or dark as `scheme` says.
+*/
+function useCanvasStyles(preview, styles) {
+	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)));
+		const fonts = googleFontsUrl(theme);
+		const link = document.head.querySelector("link[data-gf=\"fonts\"]");
+		if (fonts) {
+			const element = link ?? document.createElement("link");
+			element.rel = "stylesheet";
+			element.dataset.gf = "fonts";
+			element.href = fonts;
+			if (!link) document.head.append(element);
+		} else link?.remove();
+	}, [theme, scheme]);
+	useEffect(() => {
+		const text = escapeStyleText(`${preview.themeCss}\n${customCss}`);
+		const current = document.head.querySelector("style[data-gf=\"tailwind\"]");
+		if (current?.textContent === text) return;
+		current?.remove();
+		const element = document.createElement("style");
+		element.type = "text/tailwindcss";
+		element.dataset.gf = "tailwind";
+		element.textContent = text;
+		document.head.append(element);
+	}, [preview.themeCss, customCss]);
+	useEffect(() => {
+		const url = preview.tailwindBrowserUrl;
+		if (!url || document.head.querySelector("script[data-gf=\"tailwind-browser\"]")) return;
+		const script = document.createElement("script");
+		script.dataset.gf = "tailwind-browser";
+		script.src = url;
+		document.head.append(script);
+	}, [preview.tailwindBrowserUrl]);
+}
+//#endregion
+//#region src/share-preview.tsx
+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.
+*/
+function SharePreview({ path }) {
+	const t = useStrings();
+	const { mediaPreviews } = useAdmin();
+	const { content } = useSiteContent();
+	const page = {
+		path,
+		file: "",
+		content: {
+			version: 1,
+			data: {
+				root: usePuck$2((state) => state.appState.data.root),
+				content: []
+			}
+		}
+	};
+	const head = getPageHead(content.settings, page);
+	const { url } = content.settings;
+	const host = url ? new URL(url).hostname : void 0;
+	const image = head.socialImage ? mediaPreviews.resolve(head.socialImage) : void 0;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "gfa-share-preview",
+		"aria-labelledby": "gfa-share-preview-title",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				id: "gfa-share-preview-title",
+				className: "gfa-label",
+				children: t("sharePreview.title")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gfa-share-card",
+				children: [image ? /* @__PURE__ */ jsx("img", {
+					src: image,
+					alt: "",
+					className: "gfa-share-image"
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "gfa-share-image gfa-share-no-image",
+					children: t("sharePreview.noImage")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "gfa-share-text",
+					children: [
+						host && /* @__PURE__ */ jsx("span", {
+							className: "gfa-share-host",
+							children: host
+						}),
+						/* @__PURE__ */ jsx("strong", { children: head.title }),
+						head.description && /* @__PURE__ */ jsx("span", {
+							className: "gfa-share-description",
+							children: head.description
+						})
+					]
+				})]
+			}),
+			!url && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("sharePreview.noAddress")
+			}),
+			head.noIndex && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("sharePreview.hidden")
+			})
+		]
+	});
+}
+//#endregion
+//#region src/event-field.tsx
+const EVERY_LABELS = {
+	none: "event.repeat.none",
+	day: "event.repeat.day",
+	week: "event.repeat.week",
+	month: "event.repeat.month",
+	year: "event.repeat.year"
+};
+const INTERVAL_LABELS = {
+	day: "event.interval.days",
+	week: "event.interval.weeks",
+	month: "event.interval.months",
+	year: "event.interval.years"
+};
+const NTH = {
+	1: "event.nth.1",
+	2: "event.nth.2",
+	3: "event.nth.3",
+	4: "event.nth.4",
+	5: "event.nth.5"
+};
+const DEFAULT_TIME = "09:00";
+function timeOf(value) {
+	return value && !isAllDay(value) ? value.slice(11, 16) : "";
+}
+/**
+* An event field: when it starts and ends, whether it's all day, and how it
+* repeats, with dates it skips. Times are the site's own, in its time zone.
+*/
+function EventField({ id, label, hint, value, onChange, language, timeZone }) {
+	const t = useStrings();
+	const event = isEventLike(value) ? value : void 0;
+	const [skipDate, setSkipDate] = useState("");
+	const start = event?.start ?? "";
+	const allDay = start ? isAllDay(start) : false;
+	const startDate = datePart(start);
+	const repeat = event?.repeat;
+	const update = (changes) => {
+		const next = {
+			...event ?? { start: "" },
+			...changes
+		};
+		if (!next.start) return onChange(void 0);
+		onChange(cleanEventValue(next));
+	};
+	const updateRepeat = (changes) => {
+		if (changes === void 0) return update({ repeat: void 0 });
+		update({ repeat: {
+			every: repeat?.every ?? "week",
+			...repeat,
+			...changes
+		} });
+	};
+	const setStartDate = (date) => {
+		if (!date) return update({
+			start: "",
+			end: void 0
+		});
+		const time = allDay ? "" : `T${timeOf(start) || DEFAULT_TIME}`;
+		let end = event?.end;
+		if (end && startDate) {
+			const shift = (wallClock(date) ?? 0) - (wallClock(startDate) ?? 0);
+			const moved = new Date((wallClock(end) ?? 0) + shift).toISOString();
+			end = allDay ? moved.slice(0, 10) : moved.slice(0, 16);
+		}
+		update({
+			start: `${date}${time}`,
+			end
+		});
+	};
+	const setAllDay = (checked) => {
+		if (!startDate) return;
+		const endDate = event?.end ? datePart(event.end) : void 0;
+		if (checked) update({
+			start: startDate,
+			end: endDate && endDate !== startDate ? endDate : void 0
+		});
+		else update({
+			start: `${startDate}T${DEFAULT_TIME}`,
+			end: endDate ? `${endDate}T10:00` : void 0
+		});
+	};
+	const setEnd = (date, time) => {
+		if (!date && !time) return update({ end: void 0 });
+		const day = date || startDate;
+		update({ end: allDay ? day : `${day}T${time || timeOf(start) || DEFAULT_TIME}` });
+	};
+	const weekday = startDate ? weekdayOf(startDate) : "mo";
+	const nth = startDate ? Math.ceil(Number(startDate.slice(8)) / 7) : 1;
+	const shown = event?.start ? shownOccurrence(event, todayIn(timeZone)) : void 0;
+	const days = repeat?.days?.length ? repeat.days : [weekday];
+	return /* @__PURE__ */ jsx(FieldLabel, {
+		label,
+		el: "div",
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			className: "gfa-event-field",
+			id,
+			"aria-label": label,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "gfa-event-row",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "gfa-event-part",
+						children: [/* @__PURE__ */ jsx("span", { children: t("event.starts") }), /* @__PURE__ */ jsx("input", {
+							type: "date",
+							className: "gfa-puck-input",
+							value: startDate,
+							onChange: (change) => setStartDate(change.target.value)
+						})]
+					}), !allDay && startDate && /* @__PURE__ */ jsxs("label", {
+						className: "gfa-event-part",
+						children: [/* @__PURE__ */ jsx("span", { children: t("event.time") }), /* @__PURE__ */ jsx("input", {
+							type: "time",
+							className: "gfa-puck-input",
+							value: timeOf(start),
+							onChange: (change) => change.target.value && update({ start: `${startDate}T${change.target.value}` })
+						})]
+					})]
+				}),
+				startDate && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "gfa-checkbox",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: allDay,
+							onChange: (change) => setAllDay(change.target.checked)
+						}), t("event.allDay")]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "gfa-event-row",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "gfa-event-part",
+							children: [/* @__PURE__ */ jsx("span", { children: t("event.ends") }), /* @__PURE__ */ jsx("input", {
+								type: "date",
+								className: "gfa-puck-input",
+								value: event?.end ? datePart(event.end) : "",
+								min: startDate,
+								onChange: (change) => setEnd(change.target.value, timeOf(event?.end))
+							})]
+						}), !allDay && /* @__PURE__ */ jsxs("label", {
+							className: "gfa-event-part",
+							children: [/* @__PURE__ */ jsx("span", { children: t("event.time") }), /* @__PURE__ */ jsx("input", {
+								type: "time",
+								className: "gfa-puck-input",
+								value: timeOf(event?.end),
+								onChange: (change) => setEnd(event?.end ? datePart(event.end) : "", change.target.value)
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "gfa-event-part",
+						children: [/* @__PURE__ */ jsx("span", { children: t("event.repeats") }), /* @__PURE__ */ jsx("select", {
+							className: "gfa-puck-input",
+							value: repeat?.every ?? "none",
+							onChange: (change) => change.target.value === "none" ? updateRepeat(void 0) : updateRepeat({ every: change.target.value }),
+							children: [
+								"none",
+								"day",
+								"week",
+								"month",
+								"year"
+							].map((every) => /* @__PURE__ */ jsx("option", {
+								value: every,
+								children: t(EVERY_LABELS[every])
+							}, every))
+						})]
+					}),
+					repeat && /* @__PURE__ */ jsxs("div", {
+						className: "gfa-event-repeat",
+						children: [
+							/* @__PURE__ */ jsxs("label", {
+								className: "gfa-event-part gfa-event-interval",
+								children: [/* @__PURE__ */ jsx("span", { children: t(INTERVAL_LABELS[repeat.every]) }), /* @__PURE__ */ jsx("input", {
+									type: "number",
+									min: 1,
+									className: "gfa-puck-input",
+									value: repeat.interval ?? 1,
+									onChange: (change) => {
+										const interval = Math.max(1, Math.round(Number(change.target.value) || 1));
+										updateRepeat({ interval });
+									}
+								})]
+							}),
+							repeat.every === "week" && /* @__PURE__ */ jsxs("fieldset", {
+								className: "gfa-event-days",
+								children: [/* @__PURE__ */ jsx("legend", { children: t("event.onDays") }), WEEKDAYS.map((day) => /* @__PURE__ */ jsxs("label", {
+									className: "gfa-checkbox",
+									children: [/* @__PURE__ */ jsx("input", {
+										type: "checkbox",
+										checked: days.includes(day),
+										onChange: (change) => {
+											const chosen = change.target.checked ? [...days, day] : days.filter((d) => d !== day);
+											if (chosen.length > 0) updateRepeat({ days: chosen });
+										}
+									}), weekdayName(day, language)]
+								}, day))]
+							}),
+							repeat.every === "month" && /* @__PURE__ */ jsxs("label", {
+								className: "gfa-event-part",
+								children: [/* @__PURE__ */ jsx("span", { children: t("event.monthlyOn") }), /* @__PURE__ */ jsxs("select", {
+									className: "gfa-puck-input",
+									value: repeat.on ?? "date",
+									onChange: (change) => updateRepeat({ on: change.target.value }),
+									children: [
+										/* @__PURE__ */ jsx("option", {
+											value: "date",
+											children: t("event.monthly.date", { day: String(Number(startDate.slice(8))) })
+										}),
+										nth <= 4 && /* @__PURE__ */ jsx("option", {
+											value: "weekday",
+											children: t("event.monthly.weekday", {
+												nth: t(NTH[nth] ?? "event.nth.1"),
+												weekday: weekdayName(weekday, language, "long")
+											})
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: "last",
+											children: t("event.monthly.last", { weekday: weekdayName(weekday, language, "long") })
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								className: "gfa-event-part",
+								children: [/* @__PURE__ */ jsx("span", { children: t("event.until") }), /* @__PURE__ */ jsx("input", {
+									type: "date",
+									className: "gfa-puck-input",
+									value: repeat.until ?? "",
+									min: startDate,
+									onChange: (change) => updateRepeat({ until: change.target.value || void 0 })
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "gfa-event-part",
+								children: [
+									/* @__PURE__ */ jsx("span", { children: t("event.skip") }),
+									(repeat.skip ?? []).length > 0 && /* @__PURE__ */ jsx("ul", {
+										className: "gfa-event-skips",
+										children: (repeat.skip ?? []).map((date) => /* @__PURE__ */ jsxs("li", {
+											className: "gfa-event-skip",
+											children: [/* @__PURE__ */ jsx("span", { children: formatDate(date, language, "medium") }), /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "gfa-button gfa-button-ghost",
+												onClick: () => updateRepeat({ skip: (repeat.skip ?? []).filter((d) => d !== date) }),
+												children: t("menus.remove")
+											})]
+										}, date))
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "gfa-event-row",
+										children: [/* @__PURE__ */ jsx("input", {
+											type: "date",
+											"aria-label": t("event.skipDate"),
+											className: "gfa-puck-input",
+											value: skipDate,
+											min: startDate,
+											onChange: (change) => setSkipDate(change.target.value)
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "gfa-button",
+											disabled: !skipDate,
+											onClick: () => {
+												updateRepeat({ skip: [...repeat.skip ?? [], skipDate] });
+												setSkipDate("");
+											},
+											children: t("event.addSkip")
+										})]
+									})
+								]
+							})
+						]
+					}),
+					shown && /* @__PURE__ */ jsx("p", {
+						className: "gfa-puck-hint",
+						role: "status",
+						children: t(repeat ? "event.next" : "event.when", { when: formatOccurrence(shown, language) })
+					})
+				] }),
+				hint && /* @__PURE__ */ jsx("p", {
+					className: "gfa-puck-hint",
+					children: hint
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/markdown-field.tsx
+/**
+* Puck's formatted editor, without what Markdown can't store: underlining and
+* alignment. Links, pictures and tables are edited in the Markdown tab.
+*/
+const formattedField = {
+	type: "richtext",
+	options: { underline: false },
+	renderMenu: () => /* @__PURE__ */ jsxs(RichTextMenu, { children: [
+		/* @__PURE__ */ jsxs(RichTextMenu.Group, { children: [/* @__PURE__ */ jsx(RichTextMenu.HeadingSelect, {}), /* @__PURE__ */ jsx(RichTextMenu.ListSelect, {})] }),
+		/* @__PURE__ */ jsxs(RichTextMenu.Group, { children: [
+			/* @__PURE__ */ jsx(RichTextMenu.Bold, {}),
+			/* @__PURE__ */ jsx(RichTextMenu.Italic, {}),
+			/* @__PURE__ */ jsx(RichTextMenu.Strikethrough, {}),
+			/* @__PURE__ */ jsx(RichTextMenu.InlineCode, {})
+		] }),
+		/* @__PURE__ */ jsxs(RichTextMenu.Group, { children: [
+			/* @__PURE__ */ jsx(RichTextMenu.Blockquote, {}),
+			/* @__PURE__ */ jsx(RichTextMenu.CodeBlock, {}),
+			/* @__PURE__ */ jsx(RichTextMenu.HorizontalRule, {})
+		] })
+	] })
+};
+/**
+* The body of an entry stored as Markdown: edited formatted, or as Markdown.
+* Markdown the formatted editor can't show without losing something, such as
+* a table, is only offered as Markdown.
+*/
+function MarkdownField({ id, label, hint, value, onChange }) {
+	const t = useStrings();
+	const formattable = canFormatMarkdown(value);
+	const [tab, setTab] = useState(formattable ? "formatted" : "markdown");
+	const start = useRef(value);
+	const [html, setHtml] = useState(() => formattedHtml(value));
+	const choose = (next) => {
+		if (next === "formatted") {
+			start.current = value;
+			setHtml(formattedHtml(value));
+		}
+		setTab(next);
+	};
+	const current = formattable ? tab : "markdown";
+	return /* @__PURE__ */ jsxs(FieldLabel, {
+		label,
+		el: "div",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "gfa-markdown-tabs",
+				role: "tablist",
+				"aria-label": label,
+				children: ["formatted", "markdown"].map((name) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "tab",
+					className: "gfa-tab",
+					"aria-selected": current === name,
+					disabled: name === "formatted" && !formattable,
+					onClick: () => choose(name),
+					children: t(name === "formatted" ? "markdown.formatted" : "markdown.source")
+				}, name))
+			}),
+			current === "formatted" ? /* @__PURE__ */ jsx("div", {
+				className: "gfa-markdown-formatted",
+				children: /* @__PURE__ */ jsx(AutoField, {
+					id,
+					field: formattedField,
+					value: html,
+					onChange: (next) => {
+						const nextHtml = typeof next === "string" ? next : "";
+						setHtml(nextHtml);
+						onChange(editedMarkdown(start.current, nextHtml));
+					}
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("textarea", {
+				id,
+				"aria-label": label,
+				className: "gfa-puck-input gfa-markdown-source",
+				value,
+				spellCheck: true,
+				onChange: (event) => onChange(event.target.value)
+			}), !formattable && /* @__PURE__ */ jsx("p", {
+				className: "gfa-puck-hint",
+				children: t("markdown.sourceOnly")
+			})] }),
+			hint && /* @__PURE__ */ jsx("p", {
+				className: "gfa-puck-hint",
+				children: hint
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frame/site-frame.tsx
+/** The site's header and footer, read-only, around a page's content, the way the live site shows them. */
+function SiteFrame({ layoutConfig, header, footer, site, className, children }) {
+	const metadata = siteMetadata(site);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		header.content.length > 0 && /* @__PURE__ */ jsx("header", {
+			className: "gf-header",
+			inert: true,
+			children: /* @__PURE__ */ jsx(Render, {
+				config: layoutConfig,
+				data: header,
+				metadata
+			})
+		}),
+		/* @__PURE__ */ jsx("main", {
+			className: cx("gf-main", className),
+			children
+		}),
+		footer.content.length > 0 && /* @__PURE__ */ jsx("footer", {
+			className: "gf-footer",
+			inert: true,
+			children: /* @__PURE__ */ jsx(Render, {
+				config: layoutConfig,
+				data: footer,
+				metadata
+			})
+		})
+	] });
+}
+//#endregion
+//#region src/frame/entry-fields.tsx
+const usePuck$1 = createUsePuck();
+function Hint({ text }) {
+	return text ? /* @__PURE__ */ jsx("p", {
+		className: "gfa-puck-hint",
+		children: text
+	}) : null;
+}
+/** What the AI assistant is told a field holds, since it can't tell from a custom field. */
+function aiHint(field, markdown) {
+	const description = field.hint;
+	if (markdown) return {
+		type: "string",
+		description: [description, "Formatted text, written in Markdown"].filter(Boolean).join(". ")
+	};
+	switch (field.type) {
+		case "number": return {
+			type: "number",
+			description
+		};
+		case "date": return {
+			type: "date",
+			description
+		};
+		case "select": return {
+			type: "choice",
+			options: field.options ?? [],
+			description
+		};
+		case "tags": return {
+			type: "choices",
+			options: field.options ?? [],
+			description
+		};
+		case "link": return {
+			type: "string",
+			description: [description, "A web address or a page address such as /about"].filter(Boolean).join(". ")
+		};
+		case "image": return {
+			type: "string",
+			description: [description, "An image address. Leave empty unless one is given"].filter(Boolean).join(". ")
+		};
+		default: return {
+			type: "string",
+			description
+		};
+	}
+}
+/** The Puck field for one of a collection's fields, shown in the editor's sidebar. */
+function puckField(field, collection, settings) {
+	const markdown = collection.settings.markdown?.body === field.name;
+	const control = fieldControl(field, markdown, settings);
+	return field.type === "event" ? control : {
+		...control,
+		metadata: { ai: aiHint(field, markdown) }
+	};
+}
+function fieldControl(field, markdown, settings) {
+	const label = field.required ? `${field.label} *` : field.label;
+	if (markdown) return {
+		type: "custom",
+		label,
+		render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(MarkdownField, {
+			id,
+			label,
+			hint: field.hint,
+			value: typeof value === "string" ? value : "",
+			onChange
+		})
+	};
+	switch (field.type) {
+		case "richtext": return {
+			type: "richtext",
+			label
+		};
+		case "select": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				children: [/* @__PURE__ */ jsx(AutoField, {
+					id,
+					field: {
+						type: "select",
+						options: [{
+							label: "",
+							value: ""
+						}, ...field.options ?? []]
+					},
+					value: value ?? "",
+					onChange
+				}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+			})
+		};
+		case "number": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				children: [/* @__PURE__ */ jsx(AutoField, {
+					id,
+					field: { type: "number" },
+					value,
+					onChange: (next) => onChange(typeof next === "number" && Number.isFinite(next) ? next : void 0)
+				}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+			})
+		};
+		case "tags": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => {
+				const chosen = Array.isArray(value) ? value : [];
+				return /* @__PURE__ */ jsxs(FieldLabel, {
+					label,
+					el: "div",
+					children: [/* @__PURE__ */ jsx("fieldset", {
+						id,
+						className: "gfa-tags-field",
+						"aria-label": label,
+						children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs("label", {
+							className: "gfa-checkbox",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: chosen.includes(option.value),
+								onChange: (event) => {
+									const next = event.target.checked ? [...chosen, option.value] : chosen.filter((tag) => tag !== option.value);
+									const ordered = (field.options ?? []).map((candidate) => candidate.value).filter((tag) => next.includes(tag));
+									onChange(ordered.length > 0 ? ordered : void 0);
+								}
+							}), option.label]
+						}, option.value))
+					}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+				});
+			}
+		};
+		case "event": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsx(EventField, {
+				id,
+				label,
+				hint: field.hint,
+				value,
+				onChange,
+				language: settings.language,
+				timeZone: settings.timeZone
+			})
+		};
+		case "date": return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				children: [/* @__PURE__ */ jsx("input", {
+					id,
+					type: "date",
+					className: "gfa-puck-input",
+					value: typeof value === "string" ? value : "",
+					onChange: (event) => onChange(event.target.value)
+				}), /* @__PURE__ */ jsx(Hint, { text: field.hint })]
+			})
+		};
+		default: return {
+			type: "custom",
+			label,
+			render: ({ value, onChange, id }) => /* @__PURE__ */ jsxs(FieldLabel, {
+				label,
+				children: [
+					/* @__PURE__ */ jsx(AutoField, {
+						id,
+						field: { type: field.type === "textarea" ? "textarea" : "text" },
+						value: typeof value === "string" ? value : "",
+						onChange
+					}),
+					(field.type === "image" || field.type === "link") && /* @__PURE__ */ jsx(MediaChooser, {
+						value: typeof value === "string" ? value : "",
+						kind: field.type === "image" ? "image" : "file",
+						onChange
+					}),
+					/* @__PURE__ */ jsx(Hint, { text: field.hint })
+				]
+			})
+		};
+	}
+}
+/** The entry's page as it will look, with the values being edited filled into the collection's template. */
+function EntryPreview({ collection, entry, content, templateConfig, layoutConfig }) {
+	const t = useStrings();
+	const values = usePuck$1((state) => state.appState.data.root.props);
+	const current = useMemo(() => ({
+		...entry,
+		content: {
+			version: 1,
+			fields: storedEntryFields(values ?? {})
+		}
+	}), [entry, values]);
+	const site = useMemo(() => ({
+		settings: content.settings,
+		menus: content.menus,
+		path: entry.path ?? "/",
+		collections: content.collections,
+		pages: pageLinks(content),
+		collection,
+		entry: current
+	}), [
+		content,
+		entry.path,
+		collection,
+		current
+	]);
+	const metadata = useMemo(() => siteMetadata(site), [site]);
+	const applied = useMemo(() => applyEntry(migrate(collection.settings.template), templateConfig, collection, current, content.settings.language, content.settings.timeZone), [
+		collection,
+		templateConfig,
+		current,
+		content.settings.language,
+		content.settings.timeZone
+	]);
+	const [resolved, setResolved] = useState(applied);
+	useEffect(() => {
+		let cancelled = false;
+		resolveAllData(applied, templateConfig, metadata).then((data) => {
+			if (!cancelled) setResolved(data);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		applied,
+		templateConfig,
+		metadata
+	]);
+	if (!collection.settings.path) return /* @__PURE__ */ jsx("p", {
+		style: {
+			maxWidth: "36rem",
+			margin: "4rem auto",
+			padding: "0 1rem",
+			textAlign: "center"
+		},
+		children: t("editEntry.noPage", { name: collection.settings.name })
+	});
+	const className = resolved.root.props?.className;
+	return /* @__PURE__ */ jsx(SiteProvider, {
+		value: site,
+		children: /* @__PURE__ */ jsx(SiteFrame, {
+			layoutConfig,
+			header: content.header.data,
+			footer: content.footer.data,
+			site,
+			className: typeof className === "string" ? className : void 0,
+			children: /* @__PURE__ */ jsx(Render, {
+				config: templateConfig,
+				data: resolved,
+				metadata
+			})
+		})
+	});
+}
+/** The item's schedule, last in its fields, which the AI assistant leaves alone. */
+function scheduleField(content) {
+	return {
+		type: "custom",
+		render: ({ value, onChange }) => /* @__PURE__ */ jsx(ScheduleFields, {
+			value: value ?? {},
+			onChange,
+			content
+		})
+	};
+}
+/** The item editor's Puck config: no blocks, only the item's values, with its page as the canvas. */
+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)]]),
+			render: () => /* @__PURE__ */ jsx("div", {
+				className: "gf-canvas",
+				children: /* @__PURE__ */ jsx(EntryPreview, {
+					collection,
+					entry,
+					content,
+					templateConfig: configs.templateConfig,
+					layoutConfig: configs.layoutConfig
+				})
+			})
+		}
+	};
+}
+//#endregion
+//#region src/frame/local-code.ts
+/**
+* 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);
+		},
+		async pageView(page, content, today) {
+			return pageView(page, content, today, config.blocks);
+		},
+		async renderedProblems(content, targets, today) {
+			if (targets.length === 0 || typeof document === "undefined") return [];
+			const container = document.createElement("div");
+			const root = createRoot(container);
+			const problems = [];
+			try {
+				for (const { page, file } of targets.slice(0, 10)) try {
+					const view = pageView(page, content, today, config.blocks);
+					const prepared = await preparePage(configs, content, view ? {
+						...page,
+						view
+					} : page);
+					flushSync(() => root.render(createElement(PageBody, {
+						site: prepared.site,
+						pageConfig: prepared.pageConfig,
+						layoutConfig: prepared.layoutConfig,
+						page: prepared.data,
+						header: prepared.header,
+						footer: prepared.footer
+					})));
+					problems.push(...renderedProblems({
+						html: container.innerHTML,
+						path: page.path,
+						file
+					}));
+				} catch {}
+			} finally {
+				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);
+		}
+	};
+}
+//#endregion
+//#region src/frame/frame-site.tsx
+/**
+* What components in the site's frames share: the site's code, the
+* connection to the admin panel's page, and a stand-in for the admin panel's
+* context with what its components use there, which can't publish or read the
+* repository.
+*/
+const FrameCodeContext = createContext(null);
+function useFrameCode() {
+	const value = useContext(FrameCodeContext);
+	if (!value) throw new Error("useFrameCode() must be used in the site's frame.");
+	return value;
+}
+function adminClient(channel) {
+	return {
+		call: (method, ...params) => channel.call(method, params[0]),
+		emit: (name, payload) => channel.emit(name, payload),
+		channel
+	};
+}
+const AdminClientContext = createContext(null);
+function useAdminClient() {
+	const value = useContext(AdminClientContext);
+	if (!value) throw new Error("useAdminClient() must be used in the site's frame.");
+	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, 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, storage);
+}
+function refused() {
+	throw new Error("The site's frame can't do this.");
+}
+/** Everything the frame's components need, around them. */
+function FrameProviders({ config, client, init, site, children }) {
+	const code = useMemo(() => ({
+		config,
+		pageConfig: createPuckConfig(config, "page"),
+		layoutConfig: createPuckConfig(config, "layout"),
+		templateConfig: createPuckConfig(config, "template"),
+		code: localSiteCode(config)
+	}), [config]);
+	const described = useMemo(() => adminSite(config), [config]);
+	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]);
+	const { timing, visibility, syncProblem } = site.schedule;
+	const admin = useMemo(() => ({
+		site: described,
+		blocks: code.templateConfig.components,
+		code: code.code,
+		preview: init.preview,
+		siteUrl: init.siteUrl,
+		state: {
+			status: "ready",
+			content: site.content,
+			revision: "",
+			media: site.media
+		},
+		account: {
+			user: { login: "" },
+			hostName: init.hostName,
+			redirectAddressesListed: false
+		},
+		mediaPreviews,
+		reload: async () => refused(),
+		publish: async () => refused(),
+		drafts: {
+			kept: true,
+			names: [],
+			open: async () => refused(),
+			publishAll: async () => refused(),
+			submit: async () => refused(),
+			discard: async () => refused()
+		},
+		readFile: async () => refused(),
+		listFiles: async () => refused(),
+		readBytes: async () => refused(),
+		registries: {},
+		outOfReach: false,
+		contentOnly: false,
+		...timing && { scheduledBuilds: {
+			timing: async () => timing,
+			sync: void 0
+		} },
+		...visibility && { repositoryVisibility: async () => visibility },
+		...syncProblem && { scheduleSyncProblem: syncProblem }
+	}), [
+		described,
+		code,
+		init,
+		site,
+		mediaPreviews,
+		timing,
+		visibility,
+		syncProblem
+	]);
+	const chooseMedia = useMemo(() => (kind, value) => client.call("media.choose", {
+		kind,
+		value
+	}), [client]);
+	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
+					})
+				})
+			})
+		})
+	});
+}
+//#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) {
+	const fixed = path !== void 0 && neverIndexed(path);
+	const originalRoot = original.root;
+	const originalValue = originalRoot.props?.noIndex;
+	return {
+		show(data) {
+			const root = data.root;
+			if (fixed) return {
+				...data,
+				root: {
+					...root,
+					props: {
+						...root.props,
+						noIndex: true
+					},
+					readOnly: {
+						...root.readOnly,
+						noIndex: true
+					}
+				}
+			};
+			if (root.props?.noIndex !== void 0) return data;
+			return {
+				...data,
+				root: {
+					...root,
+					props: {
+						...root.props,
+						noIndex: false
+					}
+				}
+			};
+		},
+		keep(data) {
+			const root = data.root;
+			const { noIndex, ...props } = root.props ?? {};
+			const kept = fixed || originalValue === void 0 && noIndex === false ? originalValue : noIndex;
+			const { readOnly: _shown, ...rest } = root;
+			const readOnly = fixed ? originalRoot.readOnly : root.readOnly;
+			return {
+				...data,
+				root: {
+					...rest,
+					props: kept === void 0 ? props : {
+						...props,
+						noIndex: kept
+					},
+					...readOnly && { readOnly }
+				}
+			};
+		}
+	};
+}
+//#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.
+* Its own header isn't shown: the admin panel's page draws the title, Undo,
+* Redo and Publish outside the frame, and asks this one for what to show.
+*/
+const usePuck = createUsePuck();
+/** Where in the admin panel blocks' notes link to. */
+const ADMIN_PLACES = {
+	settings: "#/settings/general",
+	"contact-settings": `#/settings/general?section=${SETTINGS_SECTIONS.contact}`,
+	"forms-settings": `#/settings/general?section=${SETTINGS_SECTIONS.forms}`,
+	"theme-settings": "#/settings/theme",
+	"language-settings": "#/settings/languages"
+};
+/** 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 }) {
+	const kind = mediaFieldKind(field);
+	if (!kind || readOnly) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-media-puck-field",
+		children: [children, /* @__PURE__ */ jsx(MediaChooser, {
+			value: typeof value === "string" ? value : "",
+			kind,
+			onChange: (url) => onChange(url)
+		})]
+	});
+}
+/**
+* Wraps the editor's canvas the way the live site wraps it, so custom CSS
+* targeting `.gf-header`, `.gf-main` or `.gf-footer` previews correctly, in
+* `.gf-canvas`, which the site's CSS is scoped to. Pages also show the site's
+* header and footer, read-only, for context.
+*/
+function canvasConfig(kind, config, layoutConfig, header, footer, site) {
+	const render = kind === "page" || kind === "template" ? ({ children, className }) => /* @__PURE__ */ jsx("div", {
+		className: "gf-canvas",
+		children: /* @__PURE__ */ jsx(SiteFrame, {
+			layoutConfig,
+			header,
+			footer,
+			site,
+			className,
+			children
+		})
+	}) : ({ children }) => /* @__PURE__ */ jsx("div", {
+		className: "gf-canvas",
+		children: kind === "header" ? /* @__PURE__ */ jsx("header", {
+			className: "gf-header",
+			children
+		}) : /* @__PURE__ */ jsx("footer", {
+			className: "gf-footer",
+			children
+		})
+	});
+	return {
+		...config,
+		root: {
+			...config.root,
+			render
+		}
+	};
+}
+/** Puck's fields and blocks as JSON, for the AI assistant in the admin panel's page. */
+function describeConfig(config) {
+	return JSON.parse(JSON.stringify({
+		components: Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, {
+			label: component.label,
+			fields: component.fields ?? {},
+			defaultProps: component.defaultProps
+		}])),
+		root: { fields: config.root?.fields ?? {} }
+	}));
+}
+/**
+* Tells the admin panel's page what Puck shows, as it changes, and does what it
+* asks: Undo, Redo, the sidebars, and the AI assistant's changes. Rendered in
+* place of Puck's header, so it's inside Puck.
+*/
+function Bridge({ channel, settings }) {
+	const getPuck = useGetPuck();
+	const data = usePuck((state) => state.appState.data);
+	const selected = usePuck((state) => state.selectedItem);
+	const past = usePuck((state) => state.history.hasPast);
+	const future = usePuck((state) => state.history.hasFuture);
+	const ui = usePuck((state) => state.appState.ui);
+	useEffect(() => {
+		const state = {
+			data: settings.keep(data),
+			selected: selected ?? null,
+			past,
+			future,
+			leftSideBarVisible: ui.leftSideBarVisible,
+			rightSideBarVisible: ui.rightSideBarVisible,
+			leftSideBarWidth: ui.leftSideBarWidth,
+			rightSideBarWidth: ui.rightSideBarWidth
+		};
+		channel.emit("editor.state", state);
+	}, [
+		channel,
+		settings,
+		data,
+		selected,
+		past,
+		future,
+		ui
+	]);
+	useEffect(() => {
+		const stops = [
+			channel.handle("editor.data", () => settings.keep(getPuck().appState.data)),
+			channel.handle("editor.undo", () => getPuck().history.back()),
+			channel.handle("editor.redo", () => getPuck().history.forward()),
+			channel.handle("editor.ui", (changes) => {
+				const next = {};
+				if (typeof changes?.leftSideBarVisible === "boolean") next.leftSideBarVisible = changes.leftSideBarVisible;
+				if (typeof changes?.rightSideBarVisible === "boolean") next.rightSideBarVisible = changes.rightSideBarVisible;
+				getPuck().dispatch({
+					type: "setUi",
+					ui: next
+				});
+			}),
+			channel.handle("editor.apply", (change) => {
+				const { appState, dispatch, getSelectorForId } = getPuck();
+				if (change.type === "root") {
+					const { root } = settings.show({
+						...appState.data,
+						root: {
+							...appState.data.root,
+							props: change.props
+						}
+					});
+					dispatch({
+						type: "replaceRoot",
+						root
+					});
+				} else if (change.type === "translate") dispatch({
+					type: "setData",
+					data: (previous) => settings.show({
+						...previous,
+						root: {
+							...previous.root,
+							props: {
+								...previous.root.props,
+								...change.props
+							}
+						},
+						content: change.content
+					})
+				});
+				else if (change.type === "replace") {
+					const selector = getSelectorForId(change.id);
+					if (!selector) throw new Error("The block being changed is no longer on the page.");
+					dispatch({
+						type: "replace",
+						destinationIndex: selector.index,
+						destinationZone: selector.zone,
+						data: {
+							...change.block,
+							props: {
+								...change.block.props,
+								id: change.id
+							}
+						},
+						ui: { itemSelector: selector }
+					});
+				} else if (change.type === "append") dispatch({
+					type: "setData",
+					data: (previous) => ({
+						...previous,
+						content: [...previous.content, ...change.blocks]
+					})
+				});
+			})
+		];
+		return () => {
+			for (const stop of stops) stop();
+		};
+	}, [
+		channel,
+		settings,
+		getPuck
+	]);
+	return null;
+}
+/** The item editor's sidebars: no blocks, so the left one starts closed; the fields' one starts wider. */
+const ENTRY_UI = {
+	leftSideBarVisible: false,
+	rightSideBarWidth: 520
+};
+const entryPlugins = [legacySideBarPlugin()];
+/** Puck, set up for one page, header, footer, template or item: site context, previews and the bridge. */
+function FrameEditor({ open, onOpened }) {
+	const client = useAdminClient();
+	const { config: siteConfig, pageConfig, layoutConfig, templateConfig } = useFrameCode();
+	const { preview, mediaPreviews } = useAdmin();
+	const { content: loaded } = useSiteContent();
+	const { kind, path, title, data } = open;
+	const collection = open.collection ? loaded.collections.find((candidate) => candidate.id === open.collection) : void 0;
+	const language = open.language ?? (kind === "page" ? pathLanguage(loaded.settings, path) : mainLanguage(loaded.settings));
+	const content = useMemo(() => contentInLanguage(loaded, language), [loaded, language]);
+	const languages = useMemo(() => {
+		if (!hasLanguages(loaded.settings)) return void 0;
+		const page = kind === "page" ? allPages(loaded).find((candidate) => candidate.path === path) : void 0;
+		const home = loaded.pages.find((candidate) => candidate.path === "/");
+		const shown = page ?? home;
+		return shown ? languageLinks(loaded, shown) : void 0;
+	}, [
+		loaded,
+		kind,
+		path
+	]);
+	const dark = useDarkMode();
+	useCanvasStyles(preview, useMemo(() => ({
+		theme: loaded.settings.theme,
+		customCss: loaded.customCss,
+		scheme: dark ? "dark" : "light"
+	}), [
+		loaded.settings.theme,
+		loaded.customCss,
+		dark
+	]));
+	useEffect(() => showMediaInPreview(document, mediaPreviews), [mediaPreviews]);
+	useEffect(() => {
+		const onClick = (event) => {
+			if (event.target?.closest?.(".gf-canvas a[href]")) event.preventDefault();
+		};
+		document.addEventListener("click", onClick);
+		return () => document.removeEventListener("click", onClick);
+	}, []);
+	const migrated = useMemo(() => migrate(data), [data]);
+	const settings = useMemo(() => kind === "page" || kind === "template" ? shownSettings(migrated, kind === "page" ? path : void 0) : {
+		show: (shown) => shown,
+		keep: (kept) => kept
+	}, [
+		migrated,
+		kind,
+		path
+	]);
+	const initialData = useMemo(() => settings.show(migrated), [settings, migrated]);
+	const viewOf = useCallback((next) => kind === "page" && path ? pageView({
+		path,
+		file: "",
+		content: {
+			version: 1,
+			data: storedData(next)
+		}
+	}, content, todayIn(content.settings.timeZone), siteConfig.blocks) : void 0, [
+		kind,
+		path,
+		content,
+		siteConfig.blocks
+	]);
+	const [view, setView] = useState(() => viewOf(initialData));
+	const updateView = (next) => {
+		const found = viewOf(next);
+		setView((current) => current?.block === found?.block ? current : found);
+	};
+	const adminLink = useCallback((place) => {
+		const href = ADMIN_PLACES[place];
+		return {
+			href,
+			ref: (element) => registerOverlayPortal(element, { disableDrag: true }),
+			onClick: (event) => {
+				event.preventDefault();
+				client.call("navigate", href);
+			}
+		};
+	}, [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,
+		callPlugin
+	}), [
+		content,
+		loaded,
+		language,
+		path,
+		collection,
+		view,
+		languages,
+		adminLink,
+		callPlugin
+	]);
+	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
+	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, {
+				templateConfig,
+				layoutConfig
+			});
+		}
+		return withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site));
+	}, [
+		kind,
+		collection,
+		entry,
+		pageConfig,
+		templateConfig,
+		layoutConfig,
+		content,
+		site
+	]);
+	const described = useMemo(() => describeConfig(config), [config]);
+	const told = useRef(void 0);
+	useEffect(() => {
+		if (told.current === described) return;
+		told.current = described;
+		onOpened({
+			config: described,
+			data: migrated
+		});
+	}, [
+		described,
+		migrated,
+		onOpened
+	]);
+	const ui = useMemo(() => ({
+		...kind === "entry" ? ENTRY_UI : {},
+		...open.ui
+	}), [kind, open.ui]);
+	const overrides = useMemo(() => ({
+		header: () => /* @__PURE__ */ jsx(Bridge, {
+			channel: client.channel,
+			settings
+		}),
+		fieldTypes: { text: TextFieldWithMedia },
+		...kind === "page" && path && { fields: ({ children, itemSelector }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, !itemSelector && /* @__PURE__ */ jsx(SharePreview, { path })] }) }
+	}), [
+		client,
+		settings,
+		kind,
+		path
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `gfa-editor-puck gfa-editor-for-${kind}`,
+		children: /* @__PURE__ */ jsx(SiteProvider, {
+			value: site,
+			children: /* @__PURE__ */ jsx(Puck, {
+				config,
+				data: initialData,
+				metadata: siteMetadata(site),
+				headerTitle: title,
+				height: "100%",
+				iframe: { enabled: false },
+				ui,
+				...kind === "entry" && { plugins: entryPlugins },
+				overrides,
+				onChange: updateView
+			})
+		})
+	});
+}
+//#endregion
+//#region src/frame/render.tsx
+/**
+* A page of the site shown in a frame, as the live site would show it: for
+* Site Settings' and Version history's previews, an item's preview and the
+* preview page tools take screenshots with.
+*/
+/** Styles for before a page is shown, which aren't put in the page. */
+const NOTHING_SHOWN = {
+	theme: {
+		colors: {},
+		fonts: {}
+	},
+	customCss: ""
+};
+function FrameRender({ channel }) {
+	const { code, pageConfig, layoutConfig, templateConfig } = useFrameCode();
+	const [shown, setShown] = useState();
+	const rendered = useRef(void 0);
+	useEffect(() => channel.handle("render.show", async (show) => {
+		const { content } = show;
+		const today = todayIn(content.settings.timeZone);
+		const match = await findPage(code, content, today, show.path);
+		if (!match) return {
+			ok: false,
+			problem: `The site has no page at ${show.path}.`
+		};
+		const prepared = await preparePage({
+			page: pageConfig,
+			layout: layoutConfig,
+			template: templateConfig
+		}, content, match.page);
+		await new Promise((done) => {
+			rendered.current = done;
+			setShown({
+				show,
+				prepared
+			});
+		});
+		return {
+			ok: true,
+			status: match.status,
+			height: document.documentElement.scrollHeight
+		};
+	}), [
+		channel,
+		code,
+		pageConfig,
+		layoutConfig,
+		templateConfig
+	]);
+	const styles = useMemo(() => shown && {
+		theme: shown.show.content.settings.theme,
+		customCss: shown.show.content.customCss,
+		...shown.show.scheme && { scheme: shown.show.scheme }
+	}, [shown]);
+	usePreviewStyles(styles ? document : void 0, styles ?? NOTHING_SHOWN);
+	useEffect(() => {
+		if (!shown) return;
+		requestAnimationFrame(() => requestAnimationFrame(() => {
+			rendered.current?.();
+			rendered.current = void 0;
+		}));
+	}, [shown]);
+	useEffect(() => {
+		let last = 0;
+		const observer = new ResizeObserver(() => {
+			const height = document.documentElement.scrollHeight;
+			if (height === last) return;
+			last = height;
+			channel.emit("render.height", height);
+		});
+		observer.observe(document.body);
+		return () => observer.disconnect();
+	}, [channel]);
+	if (!shown) return null;
+	const { prepared } = shown;
+	return createPortal(/* @__PURE__ */ jsx(PageBody, {
+		site: prepared.site,
+		pageConfig: prepared.pageConfig,
+		layoutConfig: prepared.layoutConfig,
+		page: prepared.data,
+		header: prepared.header,
+		footer: prepared.footer
+	}), document.body);
+}
+//#endregion
+//#region src/frame/app.tsx
+/** Answers for the site's code, for the admin panel's screens. */
+function CodeService({ channel }) {
+	const { code } = useFrameCode();
+	useEffect(() => {
+		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.drawBlock", ({ content, target }) => code.drawBlock(content, target))
+		];
+		return () => {
+			for (const stop of stops) stop();
+		};
+	}, [channel, code]);
+	return null;
+}
+/** Which editor is open: another one starts Puck afresh. */
+function editorKey(open) {
+	return JSON.stringify([
+		open.kind,
+		open.path,
+		open.collection,
+		open.entry,
+		open.language
+	]);
+}
+/** Opens an editor when the admin panel's page asks, and tells it Puck's config once it's open. */
+function EditorService({ channel }) {
+	const [opened, setOpened] = useState();
+	useEffect(() => channel.handle("editor.open", (open) => new Promise((resolve) => {
+		setOpened({
+			open,
+			told: resolve
+		});
+	})), [channel]);
+	const onOpened = useCallback((editor) => opened?.told(editor), [opened]);
+	useEffect(() => channel.handle("editor.viewport", (width) => {
+		const style = document.documentElement.style;
+		if (typeof width === "number" && width > 0) style.setProperty("--gf-canvas-width", `${Math.round(width)}px`);
+		else style.removeProperty("--gf-canvas-width");
+	}), [channel]);
+	return opened ? /* @__PURE__ */ jsx(FrameEditor, {
+		open: opened.open,
+		onOpened
+	}, editorKey(opened.open)) : null;
+}
+function FrameApp({ config, channel, init, onReady }) {
+	const [site, setSite] = useState(init);
+	const client = useState(() => adminClient(channel))[0];
+	useEffect(() => {
+		const stops = [channel.handle("site", (next) => setSite(next)), channel.handle("theme", (theme) => setThemeChoice(theme))];
+		return () => {
+			for (const stop of stops) stop();
+		};
+	}, [channel]);
+	const ready = useRef(onReady);
+	useEffect(() => ready.current(), []);
+	return /* @__PURE__ */ jsxs(FrameProviders, {
+		config,
+		client,
+		init,
+		site,
+		children: [
+			init.mode === "editor" && /* @__PURE__ */ jsx(EditorService, { channel }),
+			init.mode === "render" && /* @__PURE__ */ jsx(FrameRender, { channel }),
+			init.mode === "code" && /* @__PURE__ */ jsx(CodeService, { channel })
+		]
+	});
+}
+function mountEditorFrame(config, element, options = {}) {
+	document.documentElement.classList.add("gfa-frame");
+	let container = element;
+	if (!container) {
+		container = document.createElement("div");
+		container.id = "goodfellow-frame";
+		document.body.append(container);
+	}
+	const root = createRoot(container);
+	let connected = false;
+	const onMessage = (event) => {
+		const port = event.ports[0];
+		if (connected || event.source !== window.parent || !port) return;
+		if (event.data?.type !== "goodfellow:connect") return;
+		connected = true;
+		window.removeEventListener("message", onMessage);
+		const channel = createChannel(port);
+		channel.handle("init", (given) => new Promise((resolve) => {
+			const init = options.tailwindBrowserUrl ? {
+				...given,
+				preview: {
+					...given.preview,
+					tailwindBrowserUrl: options.tailwindBrowserUrl
+				}
+			} : given;
+			setThemeChoice(init.theme);
+			document.documentElement.classList.add(`gfa-frame-${init.mode}`);
+			if (init.siteCss) installSiteCss(init.siteCss);
+			root.render(/* @__PURE__ */ jsx(FrameApp, {
+				config,
+				channel,
+				init,
+				onReady: resolve
+			}));
+		}));
+	};
+	window.addEventListener("message", onMessage);
+	window.parent.postMessage(READY_MESSAGE, "*");
+}
+//#endregion
+export { mountEditorFrame };