@goodfellow-cms/admin 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,11 +1,11 @@
-import { BODY_CODE_FILE, COLLECTIONS_DIR, CURRENT_VERSION, CUSTOM_CSS_FILE, ConflictError, ContentError, DEFAULT_THEME_COLORS, DEMO_CONTENT_PATH, DomainError, EditorsError, FIELD_TYPES, FOOTER_FILE, GOODFELLOW_REGISTRY, HEADER_FILE, HEAD_CODE_FILE, HeadCodeError, INSTALLED_RECORD_FILE, MEDIA_DIR, MENUS_FILE, NPM_REGISTRY, REDIRECTS_FILE, REDIRECT_LINK_PLACEHOLDER, REDIRECT_MESSAGE, RegistryError, SITE_FILE, SLUG_PLACEHOLDER, SignInError, THEME_COLORS, TITLE_FIELD, UPDATES_FILE, UpdatesError, VERSION_PACKAGE, WEEKDAYS, addressPatternProblem, allPages, availableBlocks, availableUpdates, blockUses, canFormatMarkdown, checkRecords, cleanEventValue, collectionFileSchema, collectionSettingsFile, compareReleases, credentialStorage, datePart, demoContentStore, demoStore, domainZone, entryAddress, entryFile, entryTitle, escapeStyleText, eventValueProblem, findEntry, formTarget, formatDate, formatOccurrence, goodfellowRegistryUrl, googleFontsUrl, isAddressSegment, isAllDay, isDemoStore, isEmptyValue, isEventLike, isReservedPagePath, loadSiteContent, markdownToHtml, menusFileSchema, normalizeDomain, normalizePagePath, pagePathToFile, pageView, parseDemoContent, parseHeadCode, parseInstalledRecord, parseUpdateSettings, planBlockChanges, recordsInPlace, redirectFrom, redirectProblems, registrarName, releaseVersions, serializeContent, serializeMarkdownEntry, shownOccurrence, sitePages, siteSettingsSchema, siteVersion, storedCode, storedRedirects, themeToCss, todayIn, trimChars, updateSettingsFile, wallClock, weekdayName, weekdayOf, writeChanges } from "@goodfellow-cms/core";
+import { APP_API_HEADER, CODE_THEMES, COLLECTIONS_DIR, COLOR_SCHEME_ATTRIBUTE, ConflictError, ContentError, DEFAULT_CODE_THEMES, DEFAULT_DARK_THEME_COLORS, DEFAULT_THEME_COLORS, DEMO_CONTENT_PATH, DomainError, EditorsError, FIELD_TYPES, FOOTER_FILE, GOODFELLOW_REGISTRY, HEADER_FILE, HeadCodeError, INSTALLED_RECORD_FILE, MEDIA_DIR, NPM_REGISTRY, REDIRECT_LINK_PLACEHOLDER, REDIRECT_MESSAGE, RegistryError, SignInError, THEME_COLORS, TITLE_FIELD, UPDATES_FILE, UpdatesError, VERSION_PACKAGE, WEEKDAYS, addressPatternFor, addressPatternProblem, allPages, availableBlocks, availableUpdates, blockUses, canFormatMarkdown, checkEntrySlug, checkPageAddress, checkRecords, cleanEventValue, codeFileChanges, collectionFileChange, collectionFileChange as collectionFileChange$1, collectionFileSchema, compareReleases, credentialStorage, customCssFileChange, datePart, decodeBase64, deleteCollectionChanges, demoContentStore, demoStore, domainZone, encodeBase64Bytes, entryAddress, entryFileChange, entryFileChange as entryFileChange$1, entryTitle, escapeStyleText, eventValueProblem, findEntry, findSitePage, formTarget, formatDate, formatOccurrence, goodfellowRegistryUrl, googleFontsUrl, isAddressSegment, isAllDay, isDemoStore, isEmptyValue, isEventLike, isReservedPagePath, layoutFileChange, loadSiteContent, markdownToHtml, mediaFileChange, menusFileChange, menusFileSchema, moveEntryChanges, movePageChanges, newCollectionSettings, newPageData, normalizeDomain, pageFileChange, pageTitle, pageView, parseDemoContent, parseHeadCode, parseInstalledRecord, parseUpdateSettings, planBlockChanges, recordsInPlace, redirectFrom, redirectProblems, redirectsFileChange, registrarName, releaseVersions, serializeContent, shownOccurrence, sitePages, siteSettingsFileChange, siteSettingsSchema, siteVersion, slugify, storedCss, storedData, storedEntryFields, storedRedirects, themeToCss, todayIn, trimChars, uniqueName, updateSettingsFileChange, wallClock, weekdayName, weekdayOf, withoutCredits, writeChanges } from "@goodfellow-cms/core";
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
-import { PageBody, SiteProvider, applyEntry, createPuckConfig, cx, mediaFieldKind, preparePage, siteMetadata } from "@goodfellow-cms/react";
+import { PageBody, SiteProvider, applyEntry, createPuckConfig, createPuckConfigs, cx, mediaFieldKind, preparePage, siteMetadata } from "@goodfellow-cms/react";
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AiError, CLAUDE_MODELS, PROVIDERS, PROVIDER_IDS, buildRequest, listModels, manualPrompt, parseAnswer, runRequest, toContent, toValues } from "@goodfellow-cms/ai";
+import { AiError, CLAUDE_MODELS, MAX_STOCK_PHOTOS, PROVIDERS, PROVIDER_IDS, StockPhotoError, buildRequest, downloadStockPhoto, listModels, manualPrompt, parseAnswer, pickStockPhoto, runRequest, searchStockPhotos, stockPhotoCredit, stockPhotoQueries, toContent, toValues, withStockPhotos } from "@goodfellow-cms/ai";
 import { createPortal } from "react-dom";
 import { AutoField, FieldLabel, Puck, Render, RichTextMenu, createUsePuck, legacySideBarPlugin, migrate, registerOverlayPortal, resolveAllData, useGetPuck } from "@puckeditor/core";
 //#region src/markdown-text.ts
@@ -59,439 +59,11 @@ function editedMarkdown(original, html) {
 }
 //#endregion
 //#region src/changes.ts
-/** `"Mass & Confession Times"` → `"mass-confession-times"`. */
-function slugify(text) {
-	return text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-/** The title shown for a page in lists: its own title, or its address. */
-function pageTitle(page) {
-	const title = page.content.data.root.props?.title;
-	return typeof title === "string" && title.trim() ? title.trim() : page.path;
-}
-/**
-* Checks an address typed for a page. Returns the normalized path, or why it
-* can't be used. `current` is the page's existing address, if it has one.
-*/
-function checkPageAddress(input, pages, current) {
-	let path;
-	try {
-		path = normalizePagePath(input.trim().startsWith("/") ? input.trim() : `/${input.trim()}`);
-	} catch {
-		return {
-			ok: false,
-			problem: "invalid"
-		};
-	}
-	if (isReservedPagePath(path)) return {
-		ok: false,
-		problem: "reserved"
-	};
-	if (path !== current && pages.some((page) => page.path === path)) return {
-		ok: false,
-		problem: "taken"
-	};
-	return {
-		ok: true,
-		path
-	};
-}
-/** Puck data as stored: Puck adds an empty `zones` object, which only adds noise to the file. */
-function storedData(data) {
-	if (!data.zones || Object.keys(data.zones).length > 0) return data;
-	const { zones: _empty, ...rest } = data;
-	return rest;
-}
-function pageFileChange(path, data) {
-	return {
-		path: pagePathToFile(path),
-		content: serializeContent({
-			version: CURRENT_VERSION.page,
-			data: storedData(data)
-		})
-	};
-}
-function layoutFileChange(file, data) {
-	return {
-		path: file,
-		content: serializeContent({
-			version: CURRENT_VERSION.layout,
-			data: storedData(data)
-		})
-	};
-}
-/** A new, empty page with just a title. */
-function newPageData(title) {
-	return {
-		root: { props: { title } },
-		content: []
-	};
-}
-/** Points every menu link at `from` (or inside it) to `to` instead. Returns `undefined` if no link changed. */
-function updateMenuLinks(menus, from, to) {
-	let changed = false;
-	const move = (href) => {
-		if (href === from || href.startsWith(`${from}/`)) {
-			changed = true;
-			return `${to}${href.slice(from.length)}` || "/";
-		}
-		return href;
-	};
-	const updated = Object.fromEntries(Object.entries(menus).map(([name, items]) => [name, items.map((item) => ({
-		...item,
-		href: move(item.href),
-		...item.children && { children: item.children.map((child) => ({
-			...child,
-			href: move(child.href)
-		})) }
-	}))]));
-	return changed ? updated : void 0;
-}
-function menusFileChange(menus) {
-	return {
-		path: MENUS_FILE,
-		content: serializeContent({
-			version: CURRENT_VERSION.menus,
-			menus
-		})
-	};
-}
-/** Writes the site's redirects, deleting the file once there are none and no message of its own. */
-function redirectsFileChange({ redirects, message }) {
-	const ownMessage = message?.trim();
-	return redirects.length > 0 || ownMessage ? {
-		path: REDIRECTS_FILE,
-		content: serializeContent({
-			version: CURRENT_VERSION.redirects,
-			redirects,
-			...ownMessage && { message: ownMessage }
-		})
-	} : {
-		path: REDIRECTS_FILE,
-		delete: true
-	};
-}
-/**
-* The redirects once a page moves from `from` to `to`, with one from its old
-* address: redirects to the old address go to the new one, so visitors don't
-* go through two, and one from the new address goes, since the page has it now.
-*/
-function movedPageRedirects(redirects, from, to) {
-	const at = (redirect, path) => {
-		const own = redirectFrom(redirect.from);
-		return own.ok && own.path === path;
-	};
-	return [...redirects.filter((redirect) => !at(redirect, to) && !at(redirect, from)).map((redirect) => redirect.to === from ? {
-		...redirect,
-		to
-	} : redirect), {
-		from,
-		to
-	}];
-}
-/**
-* Moves a page to a new address in one save, optionally updating menu links to
-* it, and sending visitors on from its old address (`redirects`, the site's
-* redirects as they are) unless it's the home page.
-*/
-function movePageChanges(page, to, menus, updateLinks, redirects) {
-	const changes = [{
-		path: page.file,
-		delete: true
-	}, {
-		path: pagePathToFile(to),
-		content: serializeContent({
-			...page.content,
-			version: CURRENT_VERSION.page
-		})
-	}];
-	const updatedMenus = updateLinks ? updateMenuLinks(menus, page.path, to) : void 0;
-	if (updatedMenus) changes.push(menusFileChange(updatedMenus));
-	if (redirects && page.path !== "/") changes.push(redirectsFileChange({
-		...redirects,
-		redirects: movedPageRedirects(redirects.redirects, page.path, to)
-	}));
-	return changes;
-}
-function siteSettingsFileChange(settings) {
-	return {
-		path: SITE_FILE,
-		content: serializeContent({
-			...settings,
-			version: CURRENT_VERSION.site
-		})
-	};
-}
-/** Whether fixes install each night, and the releases updates skip. */
-function updateSettingsFileChange(settings) {
-	return {
-		path: UPDATES_FILE,
-		content: updateSettingsFile(settings)
-	};
-}
-/** Custom CSS as stored: ending in one newline, or empty. */
-function storedCss(css) {
-	return css.trim() ? `${css.trimEnd()}\n` : "";
-}
-function customCssFileChange(css) {
-	const stored = storedCss(css);
-	return stored ? {
-		path: CUSTOM_CSS_FILE,
-		content: stored
-	} : {
-		path: CUSTOM_CSS_FILE,
-		delete: true
-	};
-}
-/** Writes the site's own code for the head and the end of the body, deleting a file once its code is gone. */
-function codeFileChanges(code, current = {
-	head: "",
-	body: ""
-}) {
-	const changes = [];
-	for (const [path, next, before] of [[
-		HEAD_CODE_FILE,
-		code.head,
-		current.head
-	], [
-		BODY_CODE_FILE,
-		code.body,
-		current.body
-	]]) {
-		const stored = storedCode(next);
-		if (stored === storedCode(before)) continue;
-		changes.push(stored ? {
-			path,
-			content: stored
-		} : {
-			path,
-			delete: true
-		});
-	}
-	return changes;
-}
-/** Writes a collection's settings file. */
-function collectionFileChange(id, settings) {
-	return {
-		path: collectionSettingsFile(id),
-		content: serializeContent({
-			...settings,
-			version: CURRENT_VERSION.collection,
-			template: storedData(settings.template)
-		})
-	};
-}
-/** An entry's values as stored: fields left empty are left out of the file. */
-function storedEntryFields(values) {
-	return Object.fromEntries(Object.entries(values).filter(([, value]) => !isEmptyValue(value)));
-}
-/**
-* Writes an entry's file: JSON, or in a collection of Markdown files, Markdown
-* whose body is the body field's value (Markdown already).
-*/
-function entryFileChange(collection, slug, values) {
-	const fields = storedEntryFields(values);
-	const { settings } = collection;
-	return settings.markdown ? {
-		path: entryFile(collection.id, slug, "markdown"),
-		content: serializeMarkdownEntry(settings, fields)
-	} : {
-		path: entryFile(collection.id, slug),
-		content: serializeContent({
-			version: CURRENT_VERSION.entry,
-			fields
-		})
-	};
-}
-/** A new collection's settings: a title and some text, shown by a template that lists every field. */
-function newCollectionSettings({ name, entryName, path, withEntryFields, kind = "blank", blocks = [] }) {
-	if (kind === "events") return eventsCollectionSettings({
-		name,
-		entryName,
-		path,
-		withEntryFields,
-		blocks
-	});
-	const fields = [{
-		name: TITLE_FIELD,
-		label: "Title",
-		type: "text",
-		required: true
-	}, {
-		name: "text",
-		label: "Text",
-		type: "richtext"
-	}];
-	const content = withEntryFields ? [{
-		type: "EntryField",
-		props: {
-			id: "title",
-			field: TITLE_FIELD,
-			style: "title",
-			className: "mx-auto max-w-3xl px-4 pt-12 pb-4"
-		}
-	}, {
-		type: "EntryField",
-		props: {
-			id: "text",
-			field: "text",
-			style: "text",
-			className: "mx-auto max-w-3xl px-4 pb-12"
-		}
-	}] : [];
-	return {
-		version: 1,
-		name,
-		entryName,
-		...path !== void 0 && { path },
-		fields,
-		template: {
-			root: { props: { title: `{${TITLE_FIELD}}` } },
-			content
-		}
-	};
-}
-/** A collection of events: when each happens, where, a summary, a picture and details, in calendars. */
-function eventsCollectionSettings({ name, entryName, path, withEntryFields, blocks }) {
-	const fields = [
-		{
-			name: TITLE_FIELD,
-			label: "Title",
-			type: "text",
-			required: true
-		},
-		{
-			name: "when",
-			label: "Date and time",
-			type: "event",
-			required: true
-		},
-		{
-			name: "place",
-			label: "Place",
-			type: "text",
-			hint: "Such as the hall, or an address."
-		},
-		{
-			name: "summary",
-			label: "Summary",
-			type: "textarea",
-			hint: "One or two sentences, shown in calendars and lists."
-		},
-		{
-			name: "image",
-			label: "Picture",
-			type: "image"
-		},
-		{
-			name: "text",
-			label: "Details",
-			type: "richtext"
-		}
-	];
-	const field = (id, name, style, className) => ({
-		type: "EntryField",
-		props: {
-			id,
-			field: name,
-			style,
-			className
-		}
-	});
-	const content = withEntryFields ? [
-		field("when", "when", "small", "mx-auto max-w-3xl px-4 pt-12"),
-		field("title", TITLE_FIELD, "title", "mx-auto max-w-3xl px-4 pt-2 pb-2"),
-		field("place", "place", "small", "mx-auto max-w-3xl px-4"),
-		...blocks.includes("AddToCalendar") ? [{
-			type: "AddToCalendar",
-			props: {
-				id: "add",
-				addLabel: "Add to calendar",
-				otherCalendarsLabel: "Apple Calendar and others",
-				className: "mx-auto max-w-3xl px-4 pt-4"
-			}
-		}] : [],
-		field("image", "image", "text", "mx-auto max-w-3xl px-4 pt-8"),
-		field("text", "text", "text", "mx-auto max-w-3xl px-4 py-8")
-	] : [];
-	return {
-		version: 1,
-		name,
-		entryName,
-		...path !== void 0 && { path },
-		fields,
-		sort: {
-			field: "when",
-			order: "asc"
-		},
-		calendar: {
-			when: "when",
-			place: "place",
-			summary: "summary"
-		},
-		template: {
-			root: { props: {
-				title: `{${TITLE_FIELD}}`,
-				description: "{summary}"
-			} },
-			content
-		}
-	};
-}
-/** The address pattern for entries whose addresses start with `prefix`: `/videos` → `/videos/{slug}`. */
-function addressPatternFor(prefix) {
-	const trimmed = prefix.trim().replace(/\/+$/, "");
-	return `${trimmed.startsWith("/") ? "" : "/"}${trimmed}/${SLUG_PLACEHOLDER}`;
-}
-/** A name for a collection's folder, a field or an entry that isn't taken yet: `talk`, then `talk-2`, `talk-3`… */
-function uniqueName(base, taken, fallback = "item") {
-	const used = new Set(taken);
-	const start = base || fallback;
-	if (!used.has(start)) return start;
-	for (let n = 2;; n++) if (!used.has(`${start}-${n}`)) return `${start}-${n}`;
-}
 /**
-* Checks the name an entry's file and address use. `addresses` are the
-* addresses already in use on the site; `current` is the entry's own name.
+* The file changes the admin panel saves. Most are built by core's helpers,
+* which the Claude connector shares; converting a collection's items between
+* Markdown and formatted text needs the browser's HTML handling, so it's here.
 */
-function checkEntrySlug(input, collection, addresses, current) {
-	const slug = input.trim();
-	if (!isAddressSegment(slug)) return {
-		ok: false,
-		problem: "invalid"
-	};
-	if (slug !== current?.slug && collection.entries.some((entry) => entry.slug === slug)) return {
-		ok: false,
-		problem: "taken"
-	};
-	if (collection.settings.path === void 0) return {
-		ok: true,
-		slug
-	};
-	const path = entryAddress(collection.settings.path, slug);
-	if (isReservedPagePath(path)) return {
-		ok: false,
-		problem: "reserved"
-	};
-	if (path !== current?.path && addresses.includes(path)) return {
-		ok: false,
-		problem: "taken"
-	};
-	return {
-		ok: true,
-		slug,
-		path
-	};
-}
-/** Renames an entry, which changes its address, optionally updating menu links to it. */
-function moveEntryChanges(collection, entry, slug, path, menus, updateLinks) {
-	const changes = [{
-		path: entry.file,
-		delete: true
-	}, entryFileChange(collection, slug, entry.content.fields)];
-	const updatedMenus = updateLinks && entry.path && path ? updateMenuLinks(menus, entry.path, path) : void 0;
-	if (updatedMenus) changes.push(menusFileChange(updatedMenus));
-	return changes;
-}
 /**
 * A stored value as it fits its collection's field now, or `undefined` if it
 * doesn't: the field must exist, and a choice must still be offered. Tags
@@ -544,13 +116,6 @@ function collectionSettingsChanges(collection, settings) {
 	}
 	return changes;
 }
-/** Deletes a collection and all its entries. */
-function deleteCollectionChanges(collection) {
-	return [collection.file, ...collection.entries.map((entry) => entry.file)].map((path) => ({
-		path,
-		delete: true
-	}));
-}
 //#endregion
 //#region src/media.ts
 /** Files in `public/media/` are served from `/media/` on the site. */
@@ -617,7 +182,8 @@ function uploadName(original, taken) {
 	const extension = extensionOf(original).replace(/^jpeg$/, "jpg");
 	const base = slugify(original.slice(0, original.length - extensionOf(original).length - 1) || original) || "file";
 	const names = new Set([...taken].map((name) => name.toLowerCase()));
-	return `${uniqueName(base, new Set([...names].filter((name) => name.endsWith(`.${extension}`)).map((name) => name.slice(0, -extension.length - 1))))}.${extension}`;
+	const stems = new Set([...names].filter((name) => name.endsWith(`.${extension}`)).map((name) => name.slice(0, -extension.length - 1)));
+	return `${uniqueName(base, stems)}.${extension}`;
 }
 /** Where a media file is used, by name, so editors know what deleting or replacing it affects. */
 function mediaUsage(content, url, names) {
@@ -819,7 +385,7 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 	const templateConfig = useMemo(() => createPuckConfig(config, "template"), [config]);
 	const mediaPreviews = useMemo(() => createMediaPreviews(store, siteUrl), [store, siteUrl]);
 	const registries = useMemo(() => ({
-		[GOODFELLOW_REGISTRY]: registry ?? goodfellowRegistryUrl("0.2.0"),
+		[GOODFELLOW_REGISTRY]: registry ?? goodfellowRegistryUrl("0.4.0"),
 		...config.registries
 	}), [registry, config.registries]);
 	const favicon = state.status === "ready" ? state.content.settings.favicon : void 0;
@@ -832,11 +398,14 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 	const changedPaths = useMemo(() => isGitBackend(store) ? (from, to) => store.changedPaths(from, to) : void 0, [store]);
 	const editors = isGitBackend(store) ? store.editors : void 0;
 	const updates = isGitBackend(store) ? store.updates : void 0;
+	const contentOnly = isGitBackend(store) && store.contentOnly === true;
 	const backendOwner = isGitBackend(store) ? store.ownerAccess : void 0;
 	const [ownerActive, setOwnerActive] = useState(backendOwner?.active ?? false);
 	const ownerAccess = useMemo(() => backendOwner && {
 		tokenLink: backendOwner.tokenLink,
 		active: ownerActive,
+		problem: backendOwner.problem,
+		...backendOwner.startRedirect && { startRedirect: (options) => backendOwner.startRedirect?.(options) ?? Promise.resolve() },
 		async applyToken(token) {
 			await backendOwner.applyToken(token);
 			setOwnerActive(true);
@@ -939,7 +508,8 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 		changedPaths,
 		editors,
 		ownerAccess,
-		updates
+		updates,
+		contentOnly
 	}), [
 		config,
 		pageConfig,
@@ -962,13 +532,18 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 		changedPaths,
 		editors,
 		ownerAccess,
-		updates
+		updates,
+		contentOnly
 	]);
 	return /* @__PURE__ */ jsx(AdminContext.Provider, {
 		value,
 		children
 	});
 }
+/** Whether the signed-in person may change Site Settings, blocks, and collections' settings and templates. */
+function useCanChangeSettings() {
+	return useAdmin().account?.role !== "editor";
+}
 function useAdmin() {
 	const value = useContext(AdminContext);
 	if (!value) throw new Error("useAdmin() must be used inside <Admin>.");
@@ -1050,6 +625,7 @@ function useAiSettings(providers) {
 				else storage.clear();
 			}
 			savePreferences({
+				...preferences,
 				provider,
 				models: {
 					...preferences.models,
@@ -1061,76 +637,145 @@ function useAiSettings(providers) {
 		});
 	}, [])];
 }
-//#endregion
-//#region src/router.tsx
-function parseHash(hash) {
-	const [path = "", query = ""] = hash.replace(/^#\/?/, "").split("?");
-	return {
-		segments: path.split("/").filter(Boolean),
-		params: new URLSearchParams(query)
-	};
-}
-function subscribe$1(onChange) {
-	window.addEventListener("hashchange", onChange);
-	return () => window.removeEventListener("hashchange", onChange);
-}
-function useRoute() {
-	return parseHash(useSyncExternalStore(subscribe$1, () => window.location.hash, () => ""));
-}
-const guards = /* @__PURE__ */ new Set();
-/** Whether any screen has unpublished changes. */
-function hasUnsavedChanges() {
-	return [...guards].some((isDirty) => isDirty());
-}
-/**
-* Registers a screen's unpublished changes, so leaving it (inside the admin
-* panel or by closing the tab) asks for confirmation first.
-*/
-function useUnsavedChanges(isDirty) {
-	useEffect(() => {
-		if (!isDirty) return;
-		const guard = () => true;
-		guards.add(guard);
-		const onBeforeUnload = (event) => event.preventDefault();
-		window.addEventListener("beforeunload", onBeforeUnload);
-		return () => {
-			guards.delete(guard);
-			window.removeEventListener("beforeunload", onBeforeUnload);
-		};
-	}, [isDirty]);
-}
-/** Goes to another screen, asking first if there are unpublished changes. Returns whether it navigated. */
-function navigate(to, confirmLeave) {
-	if (hasUnsavedChanges() && !confirmLeave()) return false;
-	guards.clear();
-	window.location.hash = to;
-	return true;
+/** Whether the editor lets the AI find openly licensed photos, remembered in this browser. On at first. */
+function useStockPhotoChoice() {
+	const [on, setOn] = useState(() => loadPreferences().stockPhotos !== false);
+	return [on, useCallback((next) => {
+		setOn(next);
+		savePreferences({
+			...loadPreferences(),
+			stockPhotos: next
+		});
+	}, [])];
 }
-/** Sections of Site Settings' General tab that links can scroll to, as `#/settings/general?section=forms`. */
-const SETTINGS_SECTIONS = {
-	contact: "contact",
-	forms: "forms"
+//#endregion
+//#region src/app-server.ts
+/** Thrown when the site's server refuses something, such as an editor changing settings only owners may change. */
+var AppServerError = class extends Error {
+	status;
+	code;
+	name = "AppServerError";
+	constructor(status, code) {
+		super(code === "owners-only" ? "Only the site's owners can change this." : code === "git" || code === "git-sign-in" ? "The site's server couldn't reach where the site is stored." : `The site's server answered ${status} (${code}).`);
+		this.status = status;
+		this.code = code;
+	}
 };
-function pageEditorHref(path) {
-	return `#/pages/edit?path=${encodeURIComponent(path)}`;
-}
-/** An in-app link that asks before leaving a screen with unpublished changes. */
-function Link({ href, confirmLeave, ...props }) {
-	return /* @__PURE__ */ jsx("a", {
-		...props,
-		href,
-		onClick: (event) => {
-			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
-			event.preventDefault();
-			navigate(href, confirmLeave);
+/** A full-stack site's API for the admin panel, at `api`, such as `/api/goodfellow`. */
+function appServer(api) {
+	const base = api.replace(/\/+$/, "");
+	async function request(endpoint, { query, body, missingIsFine = false } = {}) {
+		const search = query ? `?${new URLSearchParams(query)}` : "";
+		const response = await fetch(`${base}/${endpoint}/${search}`, {
+			method: body === void 0 ? "GET" : "POST",
+			headers: {
+				[APP_API_HEADER]: "1",
+				...body !== void 0 && { "content-type": "application/json" }
+			},
+			...body !== void 0 && { body: JSON.stringify(body) },
+			credentials: "same-origin",
+			cache: "no-store"
+		});
+		if (response.ok || response.status === 404 && missingIsFine) return response;
+		if (response.status === 409) throw new ConflictError();
+		const answer = await response.json().catch(() => ({}));
+		if (response.status === 401) throw new SignInError("invalid", "Signing in to the site has ended.");
+		throw new AppServerError(response.status, answer.error ?? "error");
+	}
+	return {
+		/** Who's signed in, and what they may do, or where to sign in. */
+		async session() {
+			return await (await request("session")).json();
+		},
+		/** The site's files through the server, as an editor signed in to it reads and publishes them. */
+		backend(session, onSignOut) {
+			let pinned;
+			const revision = async () => {
+				pinned = (await (await request("revision")).json()).revision;
+				return pinned;
+			};
+			const at = async () => pinned ?? await revision();
+			return {
+				user: session.user,
+				...session.contentOnly && { contentOnly: true },
+				revision,
+				async read(path) {
+					const response = await request("file", {
+						query: {
+							path,
+							revision: await at()
+						},
+						missingIsFine: true
+					});
+					return response.status === 404 ? void 0 : (await response.json()).content;
+				},
+				async readBytes(path) {
+					const response = await request("file", {
+						query: {
+							path,
+							revision: await at(),
+							as: "bytes"
+						},
+						missingIsFine: true
+					});
+					return response.status === 404 ? void 0 : decodeBase64((await response.json()).base64);
+				},
+				async list(dir) {
+					return (await (await request("files", { query: {
+						dir,
+						revision: await at()
+					} })).json()).files;
+				},
+				async readFiles(paths) {
+					const answer = await (await request("files", { body: {
+						paths,
+						revision: await at()
+					} })).json();
+					return new Map(Object.entries(answer.files));
+				},
+				async write(changes, { message, expectedRevision }) {
+					const saved = await (await request("write", { body: {
+						changes: changes.map((change) => "bytes" in change ? {
+							path: change.path,
+							base64: encodeBase64Bytes(change.bytes)
+						} : change),
+						message,
+						expectedRevision
+					} })).json();
+					pinned = saved.revision;
+					return saved;
+				},
+				async changedPaths(from, to) {
+					return (await (await request("changed", { query: {
+						from,
+						to
+					} })).json()).paths;
+				},
+				async deployStatus(revision) {
+					return await (await request("deploy", { query: { revision } })).json();
+				},
+				async history(path, { page = 1, perPage = 20 } = {}) {
+					return (await (await request("history", { query: {
+						path,
+						revision: await at(),
+						page: String(page),
+						perPage: String(perPage)
+					} })).json()).versions;
+				},
+				async readAt(path, revision) {
+					const response = await request("version", {
+						query: {
+							path,
+							revision
+						},
+						missingIsFine: true
+					});
+					return response.status === 404 ? void 0 : (await response.json()).content;
+				},
+				signOut: onSignOut
+			};
 		}
-	});
-}
-function collectionHref(id, tab = "entries") {
-	return tab === "entries" ? `#/collections/${id}` : `#/collections/${id}/${tab}`;
-}
-function entryEditorHref(collection, slug) {
-	return `#/collections/${collection}/edit?slug=${encodeURIComponent(slug)}`;
+	};
 }
 //#endregion
 //#region src/strings.tsx
@@ -1170,8 +815,22 @@ const defaultStrings = {
 	"signIn.error.no-access": "That account can't see this site. Make sure the token was given access to it.",
 	"signIn.error.cant-publish": "That account can see the site but isn't allowed to change it. Ask the site's owner to give it permission.",
 	"signIn.error.redirect-failed": "Signing in didn't finish. Try again.",
+	"signIn.error.not-installed": "Goodfellow isn't installed on this site on {host} yet, so editors can't sign in with {host}. If you own the site, install it now, which signs you in too. Otherwise, ask an owner to, or sign in with an access token.",
+	"signIn.error.no-address": "Signing in with {host} needs the site's address in Site settings. Sign in with an access token for now, and add the address there.",
+	"signIn.error.wrong-address": "Signing in with {host} works only at the site's own address, as Site settings give it. Sign in there, or with an access token here.",
+	"signIn.error.local-address": "Signing in with {host} works only on the published site. Sign in with an access token here.",
+	"signIn.error.not-owner": "That account isn't an owner of this site on {host}.",
+	"signIn.error.unavailable": "Signing in with {host} isn't available right now, perhaps because it's been used as much as it can be today. Sign in with an access token instead.",
+	"signIn.install": "Install Goodfellow on {host}",
 	"signIn.error.expired": "You were signed out because your sign-in expired. Sign in again to keep editing.",
 	"signIn.error.other": "Couldn't reach {host}. Check your connection and try again.",
+	"signIn.app.intro": "Sign in with your account on this site to edit it.",
+	"signIn.app.button": "Sign in",
+	"signIn.app.expired": "You've been signed out. Sign in again to keep editing.",
+	"signIn.app.notAllowed": "You're signed in, but your account isn't allowed to edit this site. Ask one of its owners to give you access.",
+	"signIn.app.error": "Couldn't reach the site. Check your connection and try again.",
+	"owners.only": "Only the site's owners can change this.",
+	"owners.onlyHint": "Ask one of them if something here needs changing.",
 	"account.signedInAs": "Signed in as {name}",
 	"account.signOut": "Sign out",
 	"deploy.building": "Updating the live site…",
@@ -1419,6 +1078,8 @@ const defaultStrings = {
 	"demo.startOver": "Start over",
 	"demo.startOverTitle": "Start over?",
 	"demo.startOverBody": "Everything you've changed in this demo, including uploads, will be undone.",
+	"blocks.contentOnly": "This site's blocks are added by its developer.",
+	"blocks.contentOnlyHint": "Its code is kept apart from its content, so adding or removing a block is done where the code is, and shows up here once the site has been rebuilt.",
 	"blocks.demo": "In this demo you can see which blocks there are, but not add or remove them: a block is added to a real site by updating its code.",
 	"markdown.formatted": "Formatted",
 	"markdown.source": "Markdown",
@@ -1496,6 +1157,7 @@ const defaultStrings = {
 	"media.pickerTitleVideo": "Choose a video",
 	"media.pickerEmpty": "Nothing has been uploaded yet. Upload a file to use it here.",
 	"media.clear": "Remove",
+	"media.credit": "Credit: {credit}",
 	"ai.label": "AI",
 	"ai.title": "Write with AI",
 	"ai.mode.add": "Describe what to add to this page, and AI will write it at the end of the page.",
@@ -1505,6 +1167,15 @@ const defaultStrings = {
 	"ai.placeholder.add": "For example: a section about our Christmas Mass schedule, with a heading, a short welcome and a button to the contact page.",
 	"ai.placeholder.edit": "For example: make it shorter and friendlier, or translate it into Spanish.",
 	"ai.placeholder.fill": "For example: Fr. Smith's homily from Sunday, about hope. Paste any notes here.",
+	"ai.photos": "Find openly licensed photos where the media library has none that fit",
+	"ai.photosHint": "Photos come from Openverse and are added to the media library. Pages that use them credit who made them, as their licenses require.",
+	"ai.photos.finding": "Finding photos…",
+	"ai.photos.message": "Add photos from Openverse: {names}",
+	"ai.photos.added": "Photos from Openverse added to the media library: {names}.",
+	"ai.photos.missing": "No photo was found for {count} of the images, so they're left empty.",
+	"ai.photos.error.busy": "Openverse has had too many requests from this computer, so some images are left empty. Try again later, or choose them from the media library.",
+	"ai.photos.error.unreachable": "Couldn't reach Openverse, so some images are left empty. Check your connection, or choose them from the media library.",
+	"ai.photos.error.publish": "The photos found couldn't be added to the media library, so their images are left empty.",
 	"ai.write": "Write it",
 	"ai.change": "Change it",
 	"ai.fill": "Fill it in",
@@ -1519,6 +1190,8 @@ const defaultStrings = {
 	"ai.provider.manual": "Copy and paste into a chat app (free)",
 	"ai.provider.custom": "Another service (OpenAI-compatible)",
 	"ai.noKey": "(free, no key needed)",
+	"ai.siteKey": "(provided by this site)",
+	"ai.siteKeyHint": "This site provides {service}, so you don't need a key of your own.",
 	"ai.baseUrl": "Address of the service's API",
 	"ai.baseUrlHint": "Such as https://example.org/v1.",
 	"ai.key": "API key",
@@ -1612,6 +1285,10 @@ const defaultStrings = {
 	"domain.error.invalid": "{host} doesn't accept this domain.",
 	"domain.error.not-ready": "The HTTPS certificate isn't ready yet. Try again in a while.",
 	"domain.error.other": "Something went wrong.",
+	"owner.signIn.title": "Sign in as an owner",
+	"owner.signIn.intro": "Inviting and removing editors, and connecting a domain, need an owner's access on {host}, which everyday sign-in doesn't have. Sign in as an owner for this tab only.",
+	"owner.signIn.button": "Sign in as an owner with {host}",
+	"owner.signIn.orToken": "Or use an owner token",
 	"owner.token.title": "Use an owner token",
 	"owner.token.intro": "Inviting and removing editors, and connecting a domain, need more access on {host} than signing in has. Create a second token for them. It's kept only until you close this tab, and stops working after a day; you can delete it on {host} sooner.",
 	"owner.token.create": "Create an owner token on {host}",
@@ -1626,6 +1303,11 @@ const defaultStrings = {
 	"settings.tab.editors": "Editors",
 	"settings.tab.updates": "Updates",
 	"updates.intro": "Goodfellow, the software the site runs on, gets fixes and new releases. Fixes install on their own each night, and only once the site has been checked to still build with them.",
+	"updates.contentOnly": "This site's code is kept apart from its content, so Goodfellow's updates are installed where the code is, by the site's own setup or its developer.",
+	"updates.code": "This site's code is kept apart from its content, at {place}, where Goodfellow's updates are installed.",
+	"updates.code.link": "See it on {host}",
+	"updates.noAccess": "Your sign-in can't see the site's code, at {place}, where its updates are installed. Ask the site's developer to give you access to it. On GitHub, an access token needs to reach it too, or with Sign in with GitHub, Goodfellow's app needs to be installed there.",
+	"updates.back.skip": "Don't install Goodfellow {version} again",
 	"updates.local": "Updates are shown in the published site's admin panel, where you sign in with GitHub or GitLab.",
 	"updates.demo": "Updates aren't installed in a demo.",
 	"updates.loading": "Checking for updates…",
@@ -1733,6 +1415,8 @@ const defaultStrings = {
 	"general.favicon": "Browser tab icon",
 	"general.logo": "Logo",
 	"general.logoAlt": "Logo description",
+	"general.logoDark": "Logo in dark mode",
+	"general.logoDarkHint": "A version of the logo that shows up on dark backgrounds, such as a white one. Leave it empty to use the same logo.",
 	"general.socialImage": "Image when shared on social media",
 	"general.contact": "Contact details",
 	"general.contactHint": "Shown wherever a Contact details block is placed, such as the footer.",
@@ -1787,7 +1471,20 @@ const defaultStrings = {
 	"theme.color.accentForeground": "Text on highlight",
 	"theme.color.border": "Borders",
 	"theme.default": "Default",
+	"theme.darkMode": "Dark mode",
+	"theme.darkModeOn": "Follow each visitor's light or dark setting",
+	"theme.darkModeHint": "Off by default, so the site is always light. When it's on, visitors whose computer or phone is set to dark see the site in the colors below.",
+	"theme.darkColors": "Colors in dark mode",
+	"theme.preview": "Preview",
+	"theme.previewLight": "Light",
+	"theme.previewDark": "Dark",
 	"theme.pickColor": "Choose a color for {name}",
+	"theme.code": "Code colors",
+	"theme.codeHint": "The colors of code in Code blocks and Markdown. Code that looks like the page uses the light colors, and the dark colors in dark mode.",
+	"theme.codeLight": "Light colors",
+	"theme.codeDark": "Dark colors",
+	"theme.codeBackground": "Show code on the subtle background color",
+	"theme.codeBackgroundHint": "Code that looks like the page sits on the site's Subtle background color instead of its colors' own background, so it matches the rest of the site. Check that it's still easy to read.",
 	"menus.intro": "Menus are lists of links. Show one anywhere with the Menu block, using its name.",
 	"menus.empty": "There are no menus yet.",
 	"menus.add": "Add menu",
@@ -1969,41 +1666,181 @@ function PublishedNotice({ onHide }) {
 	});
 }
 //#endregion
-//#region src/blocks-screen.tsx
-const fetchJson = async (url) => {
-	const response = await fetch(url);
-	if (!response.ok) throw new Error(`${url} answered ${response.status}.`);
-	return response.json();
-};
-/** What went wrong with a block registry, in plain words. */
-function problemText$1(t, problem, name) {
-	const key = `blocks.error.${problem.code}`;
-	if (problem.code === "packages") return t(key, { packages: problem.packages.join(", ") });
-	if (problem.code === "file-exists" || problem.code === "unsupported-file") return t(key, { path: problem.path });
-	return t(key, { name });
-}
-/** The places a block is used, as they're named elsewhere in the admin panel. */
-function placesText(t, uses) {
-	return uses.map((use) => {
-		if (use.kind === "page") return use.title ? `${use.title} (${use.path})` : use.path;
-		if (use.kind === "template") return t("blocks.usedTemplate", { name: use.name });
-		return t(use.kind === "header" ? "layout.header" : "layout.footer");
-	}).join(", ");
-}
-/** Says why a block that's in use can't be removed yet. */
-function InUseDialog({ name, title, onClose }) {
+//#region src/app-sign-in.tsx
+/**
+* Shows the site's own sign-in until someone is signed in to it and allowed to
+* edit, on a full-stack site whose server publishes for them (`api`), then
+* renders its children with a backend that reads and publishes through it.
+*/
+function AppSignInGate({ api, children }) {
 	const t = useStrings();
-	const { content } = useSiteContent();
-	const uses = useMemo(() => blockUses(content, name), [content, name]);
-	return /* @__PURE__ */ jsxs(Dialog, {
-		title: t("blocks.inUseTitle", { name: title }),
-		onClose,
-		children: [/* @__PURE__ */ jsx("p", { children: t("blocks.inUse", {
-			name: title,
-			places: placesText(t, uses)
-		}) }), /* @__PURE__ */ jsx("div", {
-			className: "gfa-dialog-actions",
-			children: /* @__PURE__ */ jsx(Button, {
+	const server = useMemo(() => appServer(api), [api]);
+	const [state, setState] = useState({ status: "checking" });
+	const check = useCallback(async (expired = false) => {
+		try {
+			const session = await server.session();
+			if (session.signedIn) {
+				const signOut = () => {
+					if (session.signOut) location.assign(session.signOut);
+				};
+				setState({
+					status: "signed-in",
+					session,
+					backend: server.backend(session, signOut)
+				});
+			} else setState({
+				status: "signed-out",
+				session,
+				expired
+			});
+		} catch (error) {
+			setState({
+				status: "signed-out",
+				error
+			});
+		}
+	}, [server]);
+	useEffect(() => {
+		check();
+	}, [check]);
+	if (state.status === "checking") return /* @__PURE__ */ jsx("p", {
+		className: "gfa-screen",
+		children: t("signIn.checking")
+	});
+	if (state.status === "signed-out") {
+		const { session, error, expired } = state;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "gfa-sign-in",
+			children: [/* @__PURE__ */ jsx("h1", { children: t("signIn.title") }), error !== void 0 ? /* @__PURE__ */ jsx(ErrorMessage, {
+				message: t("signIn.app.error"),
+				error,
+				action: /* @__PURE__ */ jsx(Button, {
+					onClick: () => void check(),
+					children: t("action.tryAgain")
+				})
+			}) : session?.notAllowed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: t("signIn.app.notAllowed") }), session.signOut && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", {
+				className: "gfa-button gfa-button-secondary",
+				href: session.signOut,
+				children: t("account.signOut")
+			}) })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: t(expired ? "signIn.app.expired" : "signIn.app.intro") }), session && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", {
+				className: "gfa-button gfa-button-primary",
+				href: session.signIn,
+				children: t("signIn.app.button")
+			}) })] })]
+		});
+	}
+	return children(state.backend, state.session, (error) => {
+		if (error === void 0) state.backend.signOut();
+		else check(true);
+	});
+}
+//#endregion
+//#region src/router.tsx
+function parseHash(hash) {
+	const [path = "", query = ""] = hash.replace(/^#\/?/, "").split("?");
+	return {
+		segments: path.split("/").filter(Boolean),
+		params: new URLSearchParams(query)
+	};
+}
+function subscribe$1(onChange) {
+	window.addEventListener("hashchange", onChange);
+	return () => window.removeEventListener("hashchange", onChange);
+}
+function useRoute() {
+	return parseHash(useSyncExternalStore(subscribe$1, () => window.location.hash, () => ""));
+}
+const guards = /* @__PURE__ */ new Set();
+/** Whether any screen has unpublished changes. */
+function hasUnsavedChanges() {
+	return [...guards].some((isDirty) => isDirty());
+}
+/**
+* Registers a screen's unpublished changes, so leaving it (inside the admin
+* panel or by closing the tab) asks for confirmation first.
+*/
+function useUnsavedChanges(isDirty) {
+	useEffect(() => {
+		if (!isDirty) return;
+		const guard = () => true;
+		guards.add(guard);
+		const onBeforeUnload = (event) => event.preventDefault();
+		window.addEventListener("beforeunload", onBeforeUnload);
+		return () => {
+			guards.delete(guard);
+			window.removeEventListener("beforeunload", onBeforeUnload);
+		};
+	}, [isDirty]);
+}
+/** Goes to another screen, asking first if there are unpublished changes. Returns whether it navigated. */
+function navigate(to, confirmLeave) {
+	if (hasUnsavedChanges() && !confirmLeave()) return false;
+	guards.clear();
+	window.location.hash = to;
+	return true;
+}
+/** Sections of Site Settings' General tab that links can scroll to, as `#/settings/general?section=forms`. */
+const SETTINGS_SECTIONS = {
+	contact: "contact",
+	forms: "forms"
+};
+function pageEditorHref(path) {
+	return `#/pages/edit?path=${encodeURIComponent(path)}`;
+}
+/** An in-app link that asks before leaving a screen with unpublished changes. */
+function Link({ href, confirmLeave, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		href,
+		onClick: (event) => {
+			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
+			event.preventDefault();
+			navigate(href, confirmLeave);
+		}
+	});
+}
+function collectionHref(id, tab = "entries") {
+	return tab === "entries" ? `#/collections/${id}` : `#/collections/${id}/${tab}`;
+}
+function entryEditorHref(collection, slug) {
+	return `#/collections/${collection}/edit?slug=${encodeURIComponent(slug)}`;
+}
+//#endregion
+//#region src/blocks-screen.tsx
+const fetchJson = async (url) => {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`${url} answered ${response.status}.`);
+	return response.json();
+};
+/** What went wrong with a block registry, in plain words. */
+function problemText$1(t, problem, name) {
+	const key = `blocks.error.${problem.code}`;
+	if (problem.code === "packages") return t(key, { packages: problem.packages.join(", ") });
+	if (problem.code === "file-exists" || problem.code === "unsupported-file") return t(key, { path: problem.path });
+	return t(key, { name });
+}
+/** The places a block is used, as they're named elsewhere in the admin panel. */
+function placesText(t, uses) {
+	return uses.map((use) => {
+		if (use.kind === "page") return use.title ? `${use.title} (${use.path})` : use.path;
+		if (use.kind === "template") return t("blocks.usedTemplate", { name: use.name });
+		return t(use.kind === "header" ? "layout.header" : "layout.footer");
+	}).join(", ");
+}
+/** Says why a block that's in use can't be removed yet. */
+function InUseDialog({ name, title, onClose }) {
+	const t = useStrings();
+	const { content } = useSiteContent();
+	const uses = useMemo(() => blockUses(content, name), [content, name]);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		title: t("blocks.inUseTitle", { name: title }),
+		onClose,
+		children: [/* @__PURE__ */ jsx("p", { children: t("blocks.inUse", {
+			name: title,
+			places: placesText(t, uses)
+		}) }), /* @__PURE__ */ jsx("div", {
+			className: "gfa-dialog-actions",
+			children: /* @__PURE__ */ jsx(Button, {
 				onClick: onClose,
 				children: t("action.close")
 			})
@@ -2293,6 +2130,68 @@ function AppLink(props) {
 	});
 }
 //#endregion
+//#region src/theme.ts
+const KEY = "goodfellow-admin-theme";
+const listeners = /* @__PURE__ */ new Set();
+function read() {
+	try {
+		const saved = localStorage.getItem(KEY);
+		return saved === "light" || saved === "dark" ? saved : "system";
+	} catch {
+		return "system";
+	}
+}
+let current;
+function choice() {
+	current ??= read();
+	return current;
+}
+/** Shows the choice: the stylesheet's colors follow `data-gfa-theme`, or the computer's setting without it. */
+function apply(next) {
+	const root = document.documentElement;
+	if (next === "system") delete root.dataset.gfaTheme;
+	else root.dataset.gfaTheme = next;
+}
+function setThemeChoice(next) {
+	current = next;
+	try {
+		if (next === "system") localStorage.removeItem(KEY);
+		else localStorage.setItem(KEY, next);
+	} catch {}
+	apply(next);
+	for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	const media = matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", listener);
+	return () => {
+		listeners.delete(listener);
+		media.removeEventListener("change", listener);
+	};
+}
+/** The choice, kept in this browser. */
+function useThemeChoice() {
+	return useSyncExternalStore(subscribe, choice, () => "system");
+}
+/** Applies the choice to the page while the admin panel is open. Used once, by the admin panel itself. */
+function useApplyThemeChoice() {
+	const value = useThemeChoice();
+	useEffect(() => {
+		apply(value);
+		return () => {
+			delete document.documentElement.dataset.gfaTheme;
+		};
+	}, [value]);
+}
+/** Whether the admin panel is dark at the moment, by choice or by the computer's setting. */
+function useDarkMode() {
+	return useSyncExternalStore(subscribe, () => {
+		const value = choice();
+		return value === "dark" || value === "system" && matchMedia("(prefers-color-scheme: dark)").matches;
+	}, () => false);
+}
+//#endregion
 //#region src/preview.tsx
 function upsert(doc, key, tag, setup) {
 	let element = doc.head.querySelector(`[data-gf="${key}"]`);
@@ -2310,6 +2209,7 @@ function upsert(doc, key, tag, setup) {
 * browser too, so classes typed in the editor take effect before the site is rebuilt.
 */
 function installPreviewStyles(doc, options, styles) {
+	doc.documentElement.setAttribute(COLOR_SCHEME_ATTRIBUTE, styles.theme.darkMode ? styles.scheme : "light");
 	options.stylesheets.forEach((href, index) => {
 		upsert(doc, `stylesheet-${index}`, "link", (link) => {
 			link.rel = "stylesheet";
@@ -2351,19 +2251,25 @@ function preventNavigation(doc) {
 /** Applies preview styles to a document whenever the theme or custom CSS change, and keeps its media showing. */
 function usePreviewStyles(doc, styles) {
 	const { preview, mediaPreviews } = useAdmin();
+	const dark = useDarkMode();
+	const scheme = styles.scheme ?? (dark ? "dark" : "light");
 	useEffect(() => {
 		if (!doc) return;
 		preventNavigation(doc);
-		installPreviewStyles(doc, preview, styles);
+		installPreviewStyles(doc, preview, {
+			...styles,
+			scheme
+		});
 	}, [
 		doc,
 		preview,
-		styles
+		styles,
+		scheme
 	]);
 	useEffect(() => doc ? showMediaInPreview(doc, mediaPreviews) : void 0, [doc, mediaPreviews]);
 }
 const FRAME_WIDTH = 1280;
-const EMPTY_DOCUMENT = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body></body></html>";
+const EMPTY_DOCUMENT$1 = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body></body></html>";
 /**
 * A scaled-down, read-only view of a page as it will look on a desktop screen,
 * rendered into an isolated iframe so the site's styles and the admin panel's don't mix.
@@ -2398,7 +2304,7 @@ function PreviewFrame({ title, styles, children }) {
 		className: "gfa-preview",
 		children: [/* @__PURE__ */ jsx("iframe", {
 			title,
-			srcDoc: EMPTY_DOCUMENT,
+			srcDoc: EMPTY_DOCUMENT$1,
 			onLoad: (event) => setDoc(event.currentTarget.contentDocument),
 			style: {
 				width: FRAME_WIDTH,
@@ -2461,7 +2367,7 @@ function restoreChange(content, subject) {
 		case "entry": {
 			const names = new Set(subject.collection.settings.fields.map((field) => field.name));
 			const fields = Object.entries(subject.entry.content.fields).filter(([name]) => names.has(name));
-			return entryFileChange(subject.collection, subject.entry.slug, Object.fromEntries(fields));
+			return entryFileChange$1(subject.collection, subject.entry.slug, Object.fromEntries(fields));
 		}
 	}
 }
@@ -2927,6 +2833,150 @@ function PublishFailure({ failure }) {
 	});
 }
 //#endregion
+//#region src/upload.ts
+/** Photos are made no larger than this on their longest side, which is plenty for any screen. */
+const MAX_IMAGE_SIDE = 2400;
+var UploadError = class extends Error {
+	problem;
+	file;
+	name = "UploadError";
+	constructor(problem, file, message) {
+		super(message);
+		this.problem = problem;
+		this.file = file;
+	}
+};
+const REENCODED = {
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	png: "image/png",
+	webp: "image/webp"
+};
+async function canvasBlob(canvas, type) {
+	return new Promise((resolve) => canvas.toBlob(resolve, type, .85));
+}
+/**
+* Re-saves a photo: smaller if it's larger than any screen needs, and always
+* for JPEGs, which drops details hidden in the file such as where it was taken.
+* Returns `undefined` to keep the file as it is.
+*/
+async function resized(file, extension) {
+	const type = REENCODED[extension];
+	if (!type || typeof createImageBitmap !== "function") return void 0;
+	let bitmap;
+	try {
+		bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+	} catch {
+		throw new UploadError("unreadable", file.name, `${file.name} couldn't be read as an image.`);
+	}
+	const scale = Math.min(1, MAX_IMAGE_SIDE / Math.max(bitmap.width, bitmap.height));
+	if (scale === 1 && type !== "image/jpeg") {
+		bitmap.close();
+		return;
+	}
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.round(bitmap.width * scale);
+	canvas.height = Math.round(bitmap.height * scale);
+	canvas.getContext("2d")?.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+	bitmap.close();
+	const blob = await canvasBlob(canvas, type);
+	return blob && (scale < 1 || blob.size < file.size) ? blob : void 0;
+}
+const UNSAFE_SVG_ELEMENTS = [
+	"script",
+	"foreignObject",
+	"iframe",
+	"embed",
+	"object",
+	"audio",
+	"video"
+];
+/**
+* Removes anything from an SVG that could run code if someone opens the
+* file directly: scripts, embedded pages, event handlers, and javascript:, vbscript:
+* and data: links other than images.
+*/
+function cleanSvg(text) {
+	const doc = new DOMParser().parseFromString(text, "image/svg+xml");
+	if (doc.querySelector("parsererror") || doc.documentElement.nodeName.toLowerCase() !== "svg") return void 0;
+	for (const name of UNSAFE_SVG_ELEMENTS) for (const element of [...doc.getElementsByTagName(name)]) element.remove();
+	for (const element of [doc.documentElement, ...doc.documentElement.querySelectorAll("*")]) for (const attribute of [...element.attributes]) {
+		const value = attribute.value.trim().toLowerCase();
+		if (attribute.name.toLowerCase().startsWith("on") || value.startsWith("javascript:") || value.startsWith("vbscript:") || value.startsWith("data:") && !value.startsWith("data:image/")) element.removeAttribute(attribute.name);
+	}
+	return new XMLSerializer().serializeToString(doc);
+}
+/** Checks a file chosen for upload and gets it ready: photos made web-sized, SVGs made safe. */
+async function prepareUpload(file) {
+	const extension = extensionOf(file.name);
+	if (!mediaKind(file.name)) throw new UploadError("type", file.name, `${file.name} isn't a kind of file the site can use.`);
+	let blob = file;
+	if (extension === "svg") {
+		const cleaned = cleanSvg(await file.text());
+		if (cleaned === void 0) throw new UploadError("unreadable", file.name, `${file.name} isn't a valid SVG image.`);
+		blob = new Blob([cleaned], { type: "image/svg+xml" });
+	} else blob = await resized(file, extension) ?? file;
+	if (blob.size > 26214400) throw new UploadError("size", file.name, `${file.name} is ${blob.size} bytes, over the ${MAX_UPLOAD_BYTES}-byte limit.`);
+	return {
+		name: file.name,
+		bytes: new Uint8Array(await blob.arrayBuffer()),
+		type: blob.type || file.type
+	};
+}
+//#endregion
+//#region src/stock-photos.ts
+/** The file types Openverse's downloads can come as that the media library takes. */
+const EXTENSIONS = {
+	"image/jpeg": "jpg",
+	"image/png": "png",
+	"image/webp": "webp",
+	"image/gif": "gif"
+};
+/**
+* Finds a photo for each of the AI's searches on Openverse, downloads it and
+* gets it ready to add to the media library under a name that isn't taken.
+* Searches past `MAX_STOCK_PHOTOS` find nothing.
+*/
+async function findStockPhotos(queries, options) {
+	const taken = [...options.taken];
+	const photos = [];
+	let problem;
+	for (const query of queries.slice(0, MAX_STOCK_PHOTOS)) try {
+		const photo = pickStockPhoto(await searchStockPhotos(query, options));
+		if (!photo) continue;
+		const blob = await downloadStockPhoto(photo, options);
+		const extension = EXTENSIONS[blob.type.split(";")[0]?.trim().toLowerCase() ?? ""];
+		if (!extension) continue;
+		const name = uploadName(`${slugify(query).slice(0, 40) || "photo"}.${extension}`, taken);
+		const prepared = await prepareUpload(new File([blob], name, { type: blob.type }));
+		taken.push(name);
+		photos.push({
+			query,
+			url: mediaUrl(`${MEDIA_DIR}/${name}`),
+			bytes: prepared.bytes,
+			credit: stockPhotoCredit(photo)
+		});
+	} catch (error) {
+		if (options.signal?.aborted) throw error;
+		if (error instanceof StockPhotoError) {
+			problem = error;
+			break;
+		}
+	}
+	return {
+		photos,
+		missing: queries.length - photos.length,
+		problem
+	};
+}
+/** The media files for photos found, ready to publish with their credits (see `mediaFileChange()`). */
+function stockPhotoChanges(photos) {
+	return photos.map((photo) => ({
+		path: `${MEDIA_DIR}/${fileName(photo.url)}`,
+		bytes: photo.bytes
+	}));
+}
+//#endregion
 //#region src/ai-panel.tsx
 const usePuck$1 = createUsePuck();
 const claudeModelLabels = {
@@ -2934,7 +2984,7 @@ const claudeModelLabels = {
 	"claude-sonnet-5-5": "ai.model.claude-sonnet-5-5",
 	"claude-haiku-4-5": "ai.model.claude-haiku-4-5"
 };
-function siteSummary(content, media) {
+function siteSummary(content, media, stockPhotos) {
 	return {
 		title: content.settings.title,
 		description: content.settings.description,
@@ -2955,7 +3005,8 @@ function siteSummary(content, media) {
 			}))
 		})),
 		images: siteImages(media),
-		contact: content.settings.contact
+		contact: content.settings.contact,
+		...stockPhotos && { stockPhotos }
 	};
 }
 function newId(type) {
@@ -2966,19 +3017,25 @@ function problemKey(error) {
 	if (error instanceof SyntaxError) return "ai.error.answer";
 	return "ai.error.service";
 }
-function ServiceSettings({ providers, settings, onChange }) {
+function ServiceSettings({ providers, settings, onChange, siteAi }) {
 	const t = useStrings();
 	const info = PROVIDERS[settings.provider];
+	const sitePays = siteAi?.services.includes(settings.provider) ?? false;
 	const service = serviceName(settings.provider, t);
 	const [models, setModels] = useState(info.models ?? []);
 	const listId = useRef(`gfa-ai-models-${Math.random().toString(36).slice(2)}`).current;
 	const { provider, apiKey, baseUrl } = settings;
+	const server = sitePays ? siteAi?.server : void 0;
 	useEffect(() => {
 		let cancelled = false;
 		const controller = new AbortController();
 		setModels(PROVIDERS[provider].models ?? []);
 		const timer = setTimeout(() => {
-			listModels({
+			listModels(server ? {
+				provider,
+				server,
+				model: ""
+			} : {
 				provider,
 				apiKey,
 				baseUrl,
@@ -2995,7 +3052,8 @@ function ServiceSettings({ providers, settings, onChange }) {
 	}, [
 		provider,
 		apiKey,
-		baseUrl
+		baseUrl,
+		server
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-form gfa-ai-settings",
@@ -3009,18 +3067,22 @@ function ServiceSettings({ providers, settings, onChange }) {
 					onChange: (event) => onChange({ provider: event.target.value }),
 					children: providers.map((id) => /* @__PURE__ */ jsxs("option", {
 						value: id,
-						children: [serviceName(id, t), !PROVIDERS[id].needsKey && id !== "manual" && id !== "custom" ? ` ${t("ai.noKey")}` : ""]
+						children: [serviceName(id, t), siteAi?.services.includes(id) ? ` ${t("ai.siteKey")}` : !PROVIDERS[id].needsKey && id !== "manual" && id !== "custom" ? ` ${t("ai.noKey")}` : ""]
 					}, id))
 				})
 			}),
-			settings.provider === "custom" && /* @__PURE__ */ jsx(TextField, {
+			sitePays && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("ai.siteKeyHint", { service })
+			}),
+			settings.provider === "custom" && !sitePays && /* @__PURE__ */ jsx(TextField, {
 				label: t("ai.baseUrl"),
 				hint: t("ai.baseUrlHint"),
 				type: "url",
 				value: settings.baseUrl ?? "",
 				onChange: (baseUrl) => onChange({ baseUrl })
 			}),
-			settings.provider !== "manual" && (info.needsKey || settings.provider === "custom") && /* @__PURE__ */ jsxs(Fragment, { children: [
+			settings.provider !== "manual" && !sitePays && (info.needsKey || settings.provider === "custom") && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(TextField, {
 					label: t("ai.key"),
 					hint: t("ai.keyHint", { service }),
@@ -3089,12 +3151,26 @@ function serviceName(id, t) {
 /** The AI panel: describe what to write, and it's added to the page, replaces the selected block, or fills in the fields. */
 function AiPanel({ context }) {
 	const t = useStrings();
-	const { config } = useAdmin();
+	const { config, publish, mediaPreviews, account } = useAdmin();
 	const { content, media } = useSiteContent();
 	const getPuck = useGetPuck();
 	const selected = usePuck$1((state) => state.selectedItem);
-	const providers = useMemo(() => allowedProviders(config.ai ? config.ai.providers : void 0), [config.ai]);
-	const [settings, updateSettings] = useAiSettings(providers);
+	const siteAi = account?.ai;
+	const providers = useMemo(() => {
+		const allowed = allowedProviders(config.ai ? config.ai.providers : void 0);
+		const paid = allowed.filter((id) => siteAi?.services.includes(id));
+		return [...paid, ...allowed.filter((id) => !paid.includes(id))];
+	}, [config.ai, siteAi]);
+	const [chosen, updateSettings] = useAiSettings(providers);
+	const settings = useMemo(() => siteAi?.services.includes(chosen.provider) ? {
+		...chosen,
+		apiKey: void 0,
+		baseUrl: void 0,
+		server: siteAi.server
+	} : chosen, [chosen, siteAi]);
+	const [photosChosen, choosePhotos] = useStockPhotoChoice();
+	const photosOffered = !(config.ai && config.ai.stockPhotos === false);
+	const photosAllowed = photosOffered && photosChosen;
 	const [instruction, setInstruction] = useState("");
 	const [reply, setReply] = useState("");
 	const [copied, setCopied] = useState(false);
@@ -3104,7 +3180,7 @@ function AiPanel({ context }) {
 	const service = serviceName(settings.provider, t);
 	const blockName = (block) => block ? getPuck().config.components[block.type]?.label ?? block.type : "";
 	const itemName = inSentence(context.collection?.settings.entryName ?? "");
-	const ready = settings.provider === "manual" || Boolean(settings.model) && (!PROVIDERS[settings.provider].needsKey || Boolean(settings.apiKey));
+	const ready = settings.provider === "manual" || Boolean(settings.model) && (!PROVIDERS[settings.provider].needsKey || Boolean(settings.apiKey) || Boolean(settings.server));
 	const [settingsOpen, setSettingsOpen] = useState(!ready);
 	useEffect(() => () => controller.current?.abort(), []);
 	const taskFor = (text) => {
@@ -3181,11 +3257,50 @@ function AiPanel({ context }) {
 			})
 		});
 	};
+	/**
+	* Finds the photos the AI asked for, adds them to the media library with
+	* their credits in one publish, and puts their addresses in the answer.
+	* Fields whose photo wasn't found are left empty.
+	*/
+	const addPhotos = async (answer, signal) => {
+		const queries = photosAllowed ? stockPhotoQueries(answer) : [];
+		if (queries.length === 0) return { answer: withStockPhotos(answer, /* @__PURE__ */ new Map()) };
+		setStatus({ type: "photos" });
+		const found = await findStockPhotos(queries, {
+			taken: media.map(fileName),
+			signal
+		});
+		let added = found.photos;
+		let failure;
+		if (added.length > 0 && !signal.aborted) {
+			for (const photo of added) mediaPreviews.remember(photo.url, photo.bytes);
+			const credits = {
+				...content.credits,
+				...Object.fromEntries(added.map((photo) => [photo.url, photo.credit]))
+			};
+			const result = await publish([...stockPhotoChanges(added), mediaFileChange(credits)], t("ai.photos.message", { names: added.map((photo) => fileName(photo.url)).join(", ") }));
+			if (!result.ok) {
+				failure = result.error;
+				added = [];
+			}
+		}
+		const photos = new Map(added.map((photo) => [photo.query, photo.url]));
+		const report = {
+			added: added.map((photo) => fileName(photo.url)),
+			missing: queries.length - added.length,
+			problem: found.problem,
+			failure
+		};
+		return {
+			answer: withStockPhotos(answer, photos),
+			photos: report
+		};
+	};
 	const run = async () => {
 		const text = instruction.trim();
 		if (!text) return;
 		const task = taskFor(text);
-		const request = buildRequest(task, getPuck().config, siteSummary(content, media));
+		const request = buildRequest(task, getPuck().config, siteSummary(content, media, photosAllowed));
 		if (settings.provider === "manual") {
 			setReply("");
 			setCopied(false);
@@ -3212,8 +3327,13 @@ function AiPanel({ context }) {
 				})
 			});
 			if (current.signal.aborted) return;
-			apply(task, answer);
-			setStatus({ type: "done" });
+			const filled = await addPhotos(answer, current.signal);
+			if (current.signal.aborted) return;
+			apply(task, filled.answer);
+			setStatus({
+				type: "done",
+				photos: filled.photos
+			});
 		} catch (error) {
 			if (current.signal.aborted) setStatus({ type: "idle" });
 			else setStatus({
@@ -3222,19 +3342,29 @@ function AiPanel({ context }) {
 			});
 		}
 	};
-	const applyReply = () => {
+	const applyReply = async () => {
 		if (status.type !== "manual") return;
+		controller.current?.abort();
+		const current = new AbortController();
+		controller.current = current;
+		const { task } = status;
 		try {
-			apply(status.task, parseAnswer(reply));
-			setStatus({ type: "done" });
-		} catch (error) {
+			const filled = await addPhotos(parseAnswer(reply), current.signal);
+			if (current.signal.aborted) return;
+			apply(task, filled.answer);
 			setStatus({
+				type: "done",
+				photos: filled.photos
+			});
+		} catch (error) {
+			if (current.signal.aborted) setStatus({ type: "idle" });
+			else setStatus({
 				type: "failed",
 				error
 			});
 		}
 	};
-	const working = status.type === "working";
+	const working = status.type === "working" || status.type === "photos";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-ai",
 		children: [
@@ -3257,6 +3387,17 @@ function AiPanel({ context }) {
 					onChange: (event) => setInstruction(event.target.value)
 				})
 			}),
+			photosOffered && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+				className: "gfa-checkbox",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: photosChosen,
+					onChange: (event) => choosePhotos(event.target.checked)
+				}), t("ai.photos")]
+			}), /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("ai.photosHint")
+			})] }),
 			!ready && /* @__PURE__ */ jsx("p", {
 				className: "gfa-hint",
 				children: t("ai.needsKey", { service })
@@ -3273,16 +3414,21 @@ function AiPanel({ context }) {
 					children: t("ai.stop")
 				})]
 			}),
-			working && /* @__PURE__ */ jsx("p", {
+			status.type === "working" && /* @__PURE__ */ jsx("p", {
 				className: "gfa-notice",
 				role: "status",
 				children: status.characters > 0 ? t("ai.progress", { count: String(status.characters) }) : t("ai.working")
 			}),
-			status.type === "done" && /* @__PURE__ */ jsx("p", {
-				className: "gfa-notice gfa-notice-success",
+			status.type === "photos" && /* @__PURE__ */ jsx("p", {
+				className: "gfa-notice",
 				role: "status",
-				children: t("ai.done")
+				children: t("ai.photos.finding")
 			}),
+			status.type === "done" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", {
+				className: "gfa-notice gfa-notice-success",
+				role: "status",
+				children: [t("ai.done"), status.photos?.added.length ? ` ${t("ai.photos.added", { names: status.photos.added.join(", ") })}` : null]
+			}), status.photos && /* @__PURE__ */ jsx(PhotoProblems, { report: status.photos })] }),
 			status.type === "failed" && /* @__PURE__ */ jsx(ErrorMessage, {
 				message: t(problemKey(status.error), { service }),
 				error: status.error
@@ -3317,7 +3463,7 @@ function AiPanel({ context }) {
 					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
 						variant: "primary",
 						disabled: !reply.trim(),
-						onClick: applyReply,
+						onClick: () => void applyReply(),
 						children: t("ai.manual.use")
 					}) })
 				]
@@ -3332,129 +3478,56 @@ function AiPanel({ context }) {
 				onToggle: (event) => setSettingsOpen(event.currentTarget.open),
 				children: [/* @__PURE__ */ jsx("summary", { children: t("ai.settings", { service }) }), /* @__PURE__ */ jsx(ServiceSettings, {
 					providers,
-					settings,
-					onChange: updateSettings
+					settings: chosen,
+					onChange: updateSettings,
+					...siteAi && { siteAi }
 				})]
-			})
-		]
-	});
-}
-function SparkleIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "20",
-		height: "20",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z",
-			strokeLinejoin: "round"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M19 15v4M17 17h4",
-			strokeLinecap: "round"
-		})]
-	});
-}
-/** The AI panel as a Puck plugin, shown in the editor's left-hand rail. */
-function aiPlugin(context, label) {
-	return {
-		name: "ai",
-		label,
-		icon: /* @__PURE__ */ jsx(SparkleIcon, {}),
-		render: () => /* @__PURE__ */ jsx(AiPanel, { context })
-	};
-}
-//#endregion
-//#region src/upload.ts
-/** Photos are made no larger than this on their longest side, which is plenty for any screen. */
-const MAX_IMAGE_SIDE = 2400;
-var UploadError = class extends Error {
-	problem;
-	file;
-	name = "UploadError";
-	constructor(problem, file, message) {
-		super(message);
-		this.problem = problem;
-		this.file = file;
-	}
-};
-const REENCODED = {
-	jpg: "image/jpeg",
-	jpeg: "image/jpeg",
-	png: "image/png",
-	webp: "image/webp"
-};
-async function canvasBlob(canvas, type) {
-	return new Promise((resolve) => canvas.toBlob(resolve, type, .85));
-}
-/**
-* Re-saves a photo: smaller if it's larger than any screen needs, and always
-* for JPEGs, which drops details hidden in the file such as where it was taken.
-* Returns `undefined` to keep the file as it is.
-*/
-async function resized(file, extension) {
-	const type = REENCODED[extension];
-	if (!type || typeof createImageBitmap !== "function") return void 0;
-	let bitmap;
-	try {
-		bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
-	} catch {
-		throw new UploadError("unreadable", file.name, `${file.name} couldn't be read as an image.`);
-	}
-	const scale = Math.min(1, MAX_IMAGE_SIDE / Math.max(bitmap.width, bitmap.height));
-	if (scale === 1 && type !== "image/jpeg") {
-		bitmap.close();
-		return;
-	}
-	const canvas = document.createElement("canvas");
-	canvas.width = Math.round(bitmap.width * scale);
-	canvas.height = Math.round(bitmap.height * scale);
-	canvas.getContext("2d")?.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-	bitmap.close();
-	const blob = await canvasBlob(canvas, type);
-	return blob && (scale < 1 || blob.size < file.size) ? blob : void 0;
+			})
+		]
+	});
 }
-const UNSAFE_SVG_ELEMENTS = [
-	"script",
-	"foreignObject",
-	"iframe",
-	"embed",
-	"object",
-	"audio",
-	"video"
-];
-/**
-* Removes anything from an SVG that could run code if someone opens the
-* file directly: scripts, embedded pages, event handlers, and javascript:, vbscript:
-* and data: links other than images.
-*/
-function cleanSvg(text) {
-	const doc = new DOMParser().parseFromString(text, "image/svg+xml");
-	if (doc.querySelector("parsererror") || doc.documentElement.nodeName.toLowerCase() !== "svg") return void 0;
-	for (const name of UNSAFE_SVG_ELEMENTS) for (const element of [...doc.getElementsByTagName(name)]) element.remove();
-	for (const element of [doc.documentElement, ...doc.documentElement.querySelectorAll("*")]) for (const attribute of [...element.attributes]) {
-		const value = attribute.value.trim().toLowerCase();
-		if (attribute.name.toLowerCase().startsWith("on") || value.startsWith("javascript:") || value.startsWith("vbscript:") || value.startsWith("data:") && !value.startsWith("data:image/")) element.removeAttribute(attribute.name);
-	}
-	return new XMLSerializer().serializeToString(doc);
+/** Why some of the photos the AI asked for weren't added, if any weren't. */
+function PhotoProblems({ report }) {
+	const t = useStrings();
+	if (report.failure) return /* @__PURE__ */ jsx(ErrorMessage, {
+		message: t("ai.photos.error.publish"),
+		error: report.failure
+	});
+	if (report.problem) return /* @__PURE__ */ jsx(ErrorMessage, {
+		message: t(`ai.photos.error.${report.problem.problem}`),
+		error: report.problem
+	});
+	if (report.missing > 0) return /* @__PURE__ */ jsx("p", {
+		className: "gfa-notice",
+		children: t("ai.photos.missing", { count: String(report.missing) })
+	});
+	return null;
 }
-/** Checks a file chosen for upload and gets it ready: photos made web-sized, SVGs made safe. */
-async function prepareUpload(file) {
-	const extension = extensionOf(file.name);
-	if (!mediaKind(file.name)) throw new UploadError("type", file.name, `${file.name} isn't a kind of file the site can use.`);
-	let blob = file;
-	if (extension === "svg") {
-		const cleaned = cleanSvg(await file.text());
-		if (cleaned === void 0) throw new UploadError("unreadable", file.name, `${file.name} isn't a valid SVG image.`);
-		blob = new Blob([cleaned], { type: "image/svg+xml" });
-	} else blob = await resized(file, extension) ?? file;
-	if (blob.size > 26214400) throw new UploadError("size", file.name, `${file.name} is ${blob.size} bytes, over the ${MAX_UPLOAD_BYTES}-byte limit.`);
+function SparkleIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M19 15v4M17 17h4",
+			strokeLinecap: "round"
+		})]
+	});
+}
+/** The AI panel as a Puck plugin, shown in the editor's left-hand rail. */
+function aiPlugin(context, label) {
 	return {
-		name: file.name,
-		bytes: new Uint8Array(await blob.arrayBuffer()),
-		type: blob.type || file.type
+		name: "ai",
+		label,
+		icon: /* @__PURE__ */ jsx(SparkleIcon, {}),
+		render: () => /* @__PURE__ */ jsx(AiPanel, { context })
 	};
 }
 //#endregion
@@ -3515,7 +3588,7 @@ const uploadProblems = {
 function useUploadMedia() {
 	const t = useStrings();
 	const { publish, mediaPreviews } = useAdmin();
-	const { media } = useSiteContent();
+	const { content, media } = useSiteContent();
 	return async (files, replace) => {
 		const taken = media.map(fileName);
 		const changes = [];
@@ -3543,7 +3616,8 @@ function useUploadMedia() {
 		}
 		for (const upload of uploads) mediaPreviews.remember(upload.url, upload.bytes);
 		const names = changes.map((change) => fileName(change.path)).join(", ");
-		const result = await publish(changes, replace ? t("media.replaceMessage", { name: names }) : t("media.uploadMessage", { names }));
+		const credits = replace ? withoutCredits(content.credits, [mediaUrl(replace)]) : void 0;
+		const result = await publish(credits ? [...changes, credits] : changes, replace ? t("media.replaceMessage", { name: names }) : t("media.uploadMessage", { names }));
 		if (!result.ok) return {
 			ok: false,
 			message: t(result.reason === "conflict" ? "publish.conflict" : "publish.error"),
@@ -3572,10 +3646,11 @@ function DeleteMediaDialog({ url, onClose }) {
 		const path = mediaPath(url);
 		if (!path) return;
 		setBusy(true);
+		const credits = withoutCredits(content.credits, [url]);
 		const result = await publish([{
 			path,
 			delete: true
-		}], t("media.deleteMessage", { name }));
+		}, ...credits ? [credits] : []], t("media.deleteMessage", { name }));
 		setBusy(false);
 		if (result.ok) onClose();
 		else setFailure(result);
@@ -3602,6 +3677,21 @@ function DeleteMediaDialog({ url, onClose }) {
 		]
 	});
 }
+/** Who made a photo and its license, which pages that use it show. */
+function MediaCredit({ credit }) {
+	const t = useStrings();
+	const text = [credit.creator, credit.license].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsx("span", {
+		className: "gfa-media-credit",
+		title: [credit.title, credit.source].filter(Boolean).join(" · "),
+		children: credit.sourceUrl ? /* @__PURE__ */ jsx("a", {
+			href: credit.sourceUrl,
+			target: "_blank",
+			rel: "noreferrer",
+			children: t("media.credit", { credit: text })
+		}) : t("media.credit", { credit: text })
+	});
+}
 /** Lets files be dropped onto an area to upload them. */
 function DropZone({ onFiles, children }) {
 	const t = useStrings();
@@ -3662,7 +3752,7 @@ function useUploads() {
 /** Every uploaded image and file, with buttons to upload, replace and delete them. */
 function MediaScreen() {
 	const t = useStrings();
-	const { media } = useSiteContent();
+	const { content, media } = useSiteContent();
 	const { status, run } = useUploads();
 	const [query, setQuery] = useState("");
 	const [deleting, setDeleting] = useState(null);
@@ -3723,6 +3813,7 @@ function MediaScreen() {
 								title: url,
 								children: fileName(url)
 							}),
+							content.credits?.[url] && /* @__PURE__ */ jsx(MediaCredit, { credit: content.credits[url] }),
 							/* @__PURE__ */ jsxs("div", {
 								className: "gfa-media-actions",
 								children: [
@@ -3961,7 +4052,8 @@ function TextFieldWithMedia({ field, value, onChange, readOnly, children }) {
 const ADMIN_PLACES = {
 	settings: "#/settings/general",
 	"contact-settings": `#/settings/general?section=${SETTINGS_SECTIONS.contact}`,
-	"forms-settings": `#/settings/general?section=${SETTINGS_SECTIONS.forms}`
+	"forms-settings": `#/settings/general?section=${SETTINGS_SECTIONS.forms}`,
+	"theme-settings": "#/settings/theme"
 };
 /** Where Puck remembers the sidebars' widths for every editor. */
 const PUCK_WIDTHS = "puck-sidebar-widths";
@@ -4225,10 +4317,11 @@ function inSentence(word) {
 /** The tabs shared by a collection's screens, above the screen itself. */
 function CollectionLayout({ collection, tab, children }) {
 	const t = useStrings();
+	const owner = useCanChangeSettings();
 	const tabs = [
 		["entries", "collection.tab.entries"],
-		...collection.settings.path ? [["template", "collection.tab.template"]] : [],
-		["settings", "collection.tab.settings"]
+		...owner && collection.settings.path ? [["template", "collection.tab.template"]] : [],
+		...owner ? [["settings", "collection.tab.settings"]] : []
 	];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-layout-screen",
@@ -4270,7 +4363,8 @@ function NewEntryDialog({ collection, onClose }) {
 	const [failure, setFailure] = useState(null);
 	const { settings } = collection;
 	const entry = inSentence(settings.entryName);
-	const check = checkEntrySlug(settings.path ? slug : uniqueName(slugify(title), collection.entries.map((existing) => existing.slug), slugify(settings.entryName)), collection, allPages(content).map((page) => page.path));
+	const name = settings.path ? slug : uniqueName(slugify(title), collection.entries.map((existing) => existing.slug), slugify(settings.entryName));
+	const check = checkEntrySlug(name, collection, allPages(content).map((page) => page.path));
 	const titleError = submitted && !title.trim() ? t("field.required") : void 0;
 	const slugError = submitted && !check.ok ? t(nameErrors[check.problem]) : void 0;
 	const onSubmit = async (event) => {
@@ -4278,7 +4372,7 @@ function NewEntryDialog({ collection, onClose }) {
 		setSubmitted(true);
 		if (!title.trim() || !check.ok) return;
 		setBusy(true);
-		const result = await publish([entryFileChange(collection, check.slug, { title: title.trim() })], t("newEntry.message", {
+		const result = await publish([entryFileChange$1(collection, check.slug, { title: title.trim() })], t("newEntry.message", {
 			entry,
 			title: title.trim()
 		}));
@@ -4587,7 +4681,7 @@ function TemplateScreen({ collection }) {
 			collection,
 			notice: /* @__PURE__ */ jsx(TemplateHelp, { collection }),
 			toChanges: (data) => ({
-				changes: [collectionFileChange(collection.id, {
+				changes: [collectionFileChange$1(collection.id, {
 					...settings,
 					template: data
 				})],
@@ -5287,7 +5381,7 @@ function NewCollectionDialog({ onClose }) {
 			kind,
 			blocks: Object.keys(config.blocks)
 		});
-		const changes = [collectionFileChange(id, settings)];
+		const changes = [collectionFileChange$1(id, settings)];
 		if (setsTimeZone) changes.push(siteSettingsFileChange({
 			...content.settings,
 			timeZone: ownTimeZone
@@ -5398,106 +5492,343 @@ function NewCollectionDialog({ onClose }) {
 function CollectionsScreen() {
 	const t = useStrings();
 	const { content } = useSiteContent();
+	const owner = useCanChangeSettings();
 	const [creating, setCreating] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-screen",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "gfa-screen-header",
-				children: [/* @__PURE__ */ jsx("h1", { children: t("collections.title") }), /* @__PURE__ */ jsx(Button, {
+				children: [/* @__PURE__ */ jsx("h1", { children: t("collections.title") }), owner && /* @__PURE__ */ jsx(Button, {
 					variant: "primary",
 					onClick: () => setCreating(true),
 					children: t("collections.new")
 				})]
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "gfa-hint",
-				children: t("collections.intro")
-			}),
-			content.collections.length === 0 ? /* @__PURE__ */ jsx("p", { children: t("collections.empty") }) : /* @__PURE__ */ jsxs("table", {
-				className: "gfa-table",
-				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", { children: t("collections.column.name") }),
-					/* @__PURE__ */ jsx("th", { children: t("collections.column.count") }),
-					/* @__PURE__ */ jsx("th", { children: t("collections.column.address") })
-				] }) }), /* @__PURE__ */ jsx("tbody", { children: content.collections.map((collection) => /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
-						href: collectionHref(collection.id),
-						className: "gfa-link-strong",
-						children: collection.settings.name
-					}) }),
-					/* @__PURE__ */ jsx("td", { children: collection.entries.length }),
-					/* @__PURE__ */ jsx("td", { children: collection.settings.path ? /* @__PURE__ */ jsx("code", { children: collection.settings.path }) : /* @__PURE__ */ jsx("span", {
-						className: "gfa-hint",
-						children: t("collections.noPages")
-					}) })
-				] }, collection.id)) })]
-			}),
-			creating && /* @__PURE__ */ jsx(NewCollectionDialog, { onClose: () => setCreating(false) })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("collections.intro")
+			}),
+			content.collections.length === 0 ? /* @__PURE__ */ jsx("p", { children: t("collections.empty") }) : /* @__PURE__ */ jsxs("table", {
+				className: "gfa-table",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", { children: t("collections.column.name") }),
+					/* @__PURE__ */ jsx("th", { children: t("collections.column.count") }),
+					/* @__PURE__ */ jsx("th", { children: t("collections.column.address") })
+				] }) }), /* @__PURE__ */ jsx("tbody", { children: content.collections.map((collection) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
+						href: collectionHref(collection.id),
+						className: "gfa-link-strong",
+						children: collection.settings.name
+					}) }),
+					/* @__PURE__ */ jsx("td", { children: collection.entries.length }),
+					/* @__PURE__ */ jsx("td", { children: collection.settings.path ? /* @__PURE__ */ jsx("code", { children: collection.settings.path }) : /* @__PURE__ */ jsx("span", {
+						className: "gfa-hint",
+						children: t("collections.noPages")
+					}) })
+				] }, collection.id)) })]
+			}),
+			creating && /* @__PURE__ */ jsx(NewCollectionDialog, { onClose: () => setCreating(false) })
+		]
+	});
+}
+//#endregion
+//#region src/demo.ts
+const DATABASE = "goodfellow-demo";
+const TABLE = "changes";
+function request(pending) {
+	return new Promise((resolve, reject) => {
+		pending.onsuccess = () => resolve(pending.result);
+		pending.onerror = () => reject(pending.error);
+	});
+}
+/**
+* Keeps a demo visitor's changes in the browser's IndexedDB, which can hold
+* uploads too large for local storage. `key` tells apart demos served from the
+* same address, such as two GitHub Pages sites of one account.
+*/
+function browserDemoStorage(key) {
+	let database;
+	const open = () => {
+		database ??= new Promise((resolve, reject) => {
+			const opening = indexedDB.open(DATABASE, 1);
+			opening.onupgradeneeded = () => opening.result.createObjectStore(TABLE);
+			opening.onsuccess = () => resolve(opening.result);
+			opening.onerror = () => reject(opening.error);
+		});
+		return database;
+	};
+	const table = async (mode) => (await open()).transaction(TABLE, mode).objectStore(TABLE);
+	return {
+		load: async () => await request((await table("readonly")).get(key)),
+		save: async (changes) => {
+			await request((await table("readwrite")).put(changes, key));
+		},
+		clear: async () => {
+			await request((await table("readwrite")).delete(key));
+		}
+	};
+}
+/**
+* The store a demo admin panel uses: the site's content, read from `base` or
+* from the copy the build put beside the admin panel, with the visitor's
+* changes kept in their browser.
+*/
+function createDemoStore(siteUrl, base) {
+	const root = trimChars(siteUrl, "/", { start: false });
+	const content = base ?? demoContentStore(async () => {
+		const response = await fetch(`${root}/${DEMO_CONTENT_PATH}`);
+		if (!response.ok) throw new Error(`The demo's content couldn't be loaded (${response.status}).`);
+		return parseDemoContent(await response.text());
+	}, async (path) => {
+		const response = await fetch(`${root}${mediaUrl(path)}`);
+		return response.ok ? new Uint8Array(await response.arrayBuffer()) : void 0;
+	});
+	return demoStore(content, browserDemoStorage(new URL(`${root}/`, location.href).href));
+}
+//#endregion
+//#region src/sign-in.tsx
+function errorMessage(error) {
+	if (error instanceof SignInError) return `signIn.error.${error.problem}`;
+	return "signIn.error.other";
+}
+/** Problems with signing in by going to the host, which signing in with a token gets around. */
+const REDIRECT_PROBLEMS = /* @__PURE__ */ new Set([
+	"not-installed",
+	"no-address",
+	"wrong-address",
+	"local-address",
+	"unavailable"
+]);
+/**
+* Explains why signing in didn't work. Where Goodfellow isn't installed yet,
+* `onInstall` offers to install it, which signs the person in too; otherwise
+* it links to where it's fixed.
+*/
+function SignInProblem({ error, host, expired, onInstall }) {
+	const t = useStrings();
+	const link = error instanceof SignInError ? error.link : void 0;
+	const installable = onInstall && error instanceof SignInError && error.problem === "not-installed";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ErrorMessage, {
+		message: expired && error instanceof SignInError && error.problem === "invalid" ? t("signIn.error.expired") : t(errorMessage(error), { host }),
+		error
+	}), installable ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		onClick: onInstall,
+		children: t("signIn.install", { host })
+	}) }) : link && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("a", {
+		href: link,
+		target: "_blank",
+		rel: "noreferrer",
+		children: t("signIn.install", { host })
+	}) })] });
+}
+function SignInScreen({ host, error, onSignedIn }) {
+	const t = useStrings();
+	const [token, setToken] = useState("");
+	const [remember, setRemember] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(error);
+	const values = { host: host.name };
+	const redirectFailed = failure instanceof SignInError && REDIRECT_PROBLEMS.has(failure.problem);
+	const redirect = async (options) => {
+		setBusy(true);
+		setFailure(void 0);
+		try {
+			await host.startRedirect(remember, options);
+		} catch (caught) {
+			setFailure(caught);
+			setBusy(false);
+		}
+	};
+	const onSubmit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setFailure(void 0);
+		try {
+			onSignedIn(await host.signInWithToken(token, remember));
+		} catch (caught) {
+			setFailure(caught);
+			setBusy(false);
+		}
+	};
+	const remembered = /* @__PURE__ */ jsxs("label", {
+		className: "gfa-checkbox",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			checked: remember,
+			onChange: (event) => setRemember(event.target.checked)
+		}), /* @__PURE__ */ jsxs("span", { children: [t("signIn.remember"), /* @__PURE__ */ jsx("span", {
+			className: "gfa-hint gfa-block",
+			children: t("signIn.rememberHint")
+		})] })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-sign-in",
+		children: [
+			/* @__PURE__ */ jsx("h1", { children: t("signIn.title") }),
+			/* @__PURE__ */ jsx("p", { children: t("signIn.intro", values) }),
+			failure !== void 0 && /* @__PURE__ */ jsx(SignInProblem, {
+				error: failure,
+				host: host.name,
+				expired: error === failure,
+				onInstall: () => void redirect({ install: true })
+			}),
+			host.canRedirect && /* @__PURE__ */ jsxs("div", {
+				className: "gfa-form",
+				children: [remembered, /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					disabled: busy,
+					onClick: () => void redirect(),
+					children: t("signIn.redirect", values)
+				})]
+			}),
+			host.tokenLinks && host.tokenLinks.length > 0 && /* @__PURE__ */ jsxs("details", {
+				className: "gfa-sign-in-token",
+				open: !host.canRedirect || redirectFailed,
+				children: [/* @__PURE__ */ jsx("summary", { children: t(host.canRedirect ? "signIn.orToken" : "signIn.token.title") }), /* @__PURE__ */ jsxs("form", {
+					className: "gfa-form",
+					onSubmit,
+					children: [
+						/* @__PURE__ */ jsxs("ol", {
+							className: "gfa-steps",
+							children: [/* @__PURE__ */ jsxs("li", { children: [
+								/* @__PURE__ */ jsx("p", { children: t("signIn.token.step1", values) }),
+								/* @__PURE__ */ jsx("ul", {
+									className: "gfa-token-links",
+									children: host.tokenLinks.map((link) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+										href: link.url,
+										target: "_blank",
+										rel: "noreferrer",
+										children: t(link.label, values)
+									}), link.hint && /* @__PURE__ */ jsx("p", {
+										className: "gfa-hint",
+										children: t(link.hint, values)
+									})] }, link.url))
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "gfa-hint",
+									children: t("signIn.token.chooseSite", values)
+								})
+							] }), /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("p", { children: t("signIn.token.step2") }), /* @__PURE__ */ jsx(TextField, {
+								label: t("signIn.token.label"),
+								type: "password",
+								autoComplete: "off",
+								spellCheck: false,
+								value: token,
+								onChange: setToken
+							})] })]
+						}),
+						!host.canRedirect && remembered,
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							variant: "primary",
+							disabled: busy || !token.trim(),
+							children: busy ? t("signIn.checking") : t("signIn.submit")
+						})
+					]
+				})]
+			})
 		]
 	});
 }
-//#endregion
-//#region src/demo.ts
-const DATABASE = "goodfellow-demo";
-const TABLE = "changes";
-function request(pending) {
-	return new Promise((resolve, reject) => {
-		pending.onsuccess = () => resolve(pending.result);
-		pending.onerror = () => reject(pending.error);
-	});
-}
 /**
-* Keeps a demo visitor's changes in the browser's IndexedDB, which can hold
-* uploads too large for local storage. `key` tells apart demos served from the
-* same address, such as two GitHub Pages sites of one account.
+* Shows the sign-in screen until someone is signed in to the git host, then
+* renders its children with the connected backend.
 */
-function browserDemoStorage(key) {
-	let database;
-	const open = () => {
-		database ??= new Promise((resolve, reject) => {
-			const opening = indexedDB.open(DATABASE, 1);
-			opening.onupgradeneeded = () => opening.result.createObjectStore(TABLE);
-			opening.onsuccess = () => resolve(opening.result);
-			opening.onerror = () => reject(opening.error);
+function SignInGate({ host, children }) {
+	const t = useStrings();
+	const [state, setState] = useState({ status: "checking" });
+	useEffect(() => {
+		let cancelled = false;
+		host.restore().then((backend) => !cancelled && setState(backend ? {
+			status: "signed-in",
+			backend
+		} : { status: "signed-out" }), (error) => !cancelled && setState({
+			status: "signed-out",
+			error
+		}));
+		return () => {
+			cancelled = true;
+		};
+	}, [host]);
+	if (state.status === "checking") return /* @__PURE__ */ jsx("p", {
+		className: "gfa-screen",
+		children: t("signIn.checking")
+	});
+	if (state.status === "signed-out") return /* @__PURE__ */ jsx(SignInScreen, {
+		host,
+		error: state.error,
+		onSignedIn: (backend) => setState({
+			status: "signed-in",
+			backend
+		})
+	});
+	const { backend } = state;
+	return children(backend, (error) => {
+		backend.signOut();
+		setState({
+			status: "signed-out",
+			error
 		});
-		return database;
-	};
-	const table = async (mode) => (await open()).transaction(TABLE, mode).objectStore(TABLE);
-	return {
-		load: async () => await request((await table("readonly")).get(key)),
-		save: async (changes) => {
-			await request((await table("readwrite")).put(changes, key));
-		},
-		clear: async () => {
-			await request((await table("readwrite")).delete(key));
-		}
-	};
-}
-/**
-* The store a demo admin panel uses: the site's content, read from `base` or
-* from the copy the build put beside the admin panel, with the visitor's
-* changes kept in their browser.
-*/
-function createDemoStore(siteUrl, base) {
-	const root = trimChars(siteUrl, "/", { start: false });
-	const content = base ?? demoContentStore(async () => {
-		const response = await fetch(`${root}/${DEMO_CONTENT_PATH}`);
-		if (!response.ok) throw new Error(`The demo's content couldn't be loaded (${response.status}).`);
-		return parseDemoContent(await response.text());
-	}, async (path) => {
-		const response = await fetch(`${root}${mediaUrl(path)}`);
-		return response.ok ? new Uint8Array(await response.arrayBuffer()) : void 0;
 	});
-	return demoStore(content, browserDemoStorage(new URL(`${root}/`, location.href).href));
 }
 //#endregion
 //#region src/owner-token.tsx
 /**
-* Asks for the owner token that hosts such as GitHub need for changing editors
-* and Pages settings, which signing in can't. It's used for this tab only.
+* Asks an owner to sign in for changing editors and Pages settings, which
+* everyday sign-in can't, where the host can, with the owner token form below.
+* It's used for this tab only.
 */
 function OwnerTokenForm({ onReady }) {
+	const t = useStrings();
+	const { ownerAccess, account } = useAdmin();
+	const host = account?.hostName ?? "";
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(ownerAccess?.problem);
+	if (!ownerAccess) return null;
+	if (!ownerAccess.startRedirect) return /* @__PURE__ */ jsx(OwnerTokenFields, { onReady });
+	const signIn = async (options) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await ownerAccess.startRedirect?.(options);
+		} catch (caught) {
+			setError(caught);
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "gfa-form gfa-owner-token",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "gfa-section-title",
+				children: t("owner.signIn.title")
+			}),
+			/* @__PURE__ */ jsx("p", { children: t("owner.signIn.intro", { host }) }),
+			error !== void 0 && /* @__PURE__ */ jsx(SignInProblem, {
+				error,
+				host,
+				onInstall: () => void signIn({ install: true })
+			}),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				disabled: busy,
+				onClick: () => void signIn(),
+				children: t("owner.signIn.button", { host })
+			}) }),
+			/* @__PURE__ */ jsxs("details", {
+				className: "gfa-sign-in-token",
+				children: [/* @__PURE__ */ jsx("summary", { children: t("owner.signIn.orToken") }), /* @__PURE__ */ jsx(OwnerTokenFields, {
+					onReady,
+					heading: false
+				})]
+			})
+		]
+	});
+}
+/** The owner token form: where to create one, and a field to paste it into. */
+function OwnerTokenFields({ onReady, heading = true }) {
 	const t = useStrings();
 	const { ownerAccess, account } = useAdmin();
 	const host = account?.hostName ?? "";
@@ -5519,9 +5850,9 @@ function OwnerTokenForm({ onReady }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "gfa-form gfa-owner-token",
+		className: heading ? "gfa-form gfa-owner-token" : "gfa-form",
 		children: [
-			/* @__PURE__ */ jsx("h2", {
+			heading && /* @__PURE__ */ jsx("h2", {
 				className: "gfa-section-title",
 				children: t("owner.token.title")
 			}),
@@ -5583,68 +5914,6 @@ function OwnerTokenActive({ onForget }) {
 	});
 }
 //#endregion
-//#region src/theme.ts
-const KEY = "goodfellow-admin-theme";
-const listeners = /* @__PURE__ */ new Set();
-function read() {
-	try {
-		const saved = localStorage.getItem(KEY);
-		return saved === "light" || saved === "dark" ? saved : "system";
-	} catch {
-		return "system";
-	}
-}
-let current;
-function choice() {
-	current ??= read();
-	return current;
-}
-/** Shows the choice: the stylesheet's colors follow `data-gfa-theme`, or the computer's setting without it. */
-function apply(next) {
-	const root = document.documentElement;
-	if (next === "system") delete root.dataset.gfaTheme;
-	else root.dataset.gfaTheme = next;
-}
-function setThemeChoice(next) {
-	current = next;
-	try {
-		if (next === "system") localStorage.removeItem(KEY);
-		else localStorage.setItem(KEY, next);
-	} catch {}
-	apply(next);
-	for (const listener of listeners) listener();
-}
-function subscribe(listener) {
-	listeners.add(listener);
-	const media = matchMedia("(prefers-color-scheme: dark)");
-	media.addEventListener("change", listener);
-	return () => {
-		listeners.delete(listener);
-		media.removeEventListener("change", listener);
-	};
-}
-/** The choice, kept in this browser. */
-function useThemeChoice() {
-	return useSyncExternalStore(subscribe, choice, () => "system");
-}
-/** Applies the choice to the page while the admin panel is open. Used once, by the admin panel itself. */
-function useApplyThemeChoice() {
-	const value = useThemeChoice();
-	useEffect(() => {
-		apply(value);
-		return () => {
-			delete document.documentElement.dataset.gfaTheme;
-		};
-	}, [value]);
-}
-/** Whether the admin panel is dark at the moment, by choice or by the computer's setting. */
-function useDarkMode() {
-	return useSyncExternalStore(subscribe, () => {
-		const value = choice();
-		return value === "dark" || value === "system" && matchMedia("(prefers-color-scheme: dark)").matches;
-	}, () => false);
-}
-//#endregion
 //#region src/code-editor.tsx
 /** CodeMirror and its languages, loaded the first time a code editor is shown. */
 async function loadCodeMirror(language) {
@@ -5933,7 +6202,7 @@ function FontPicker({ label, value, error, onChange }) {
 		setQuery("");
 	};
 	const pick = (option) => {
-		onChange(option ? option[0] : "");
+		onChange(option ? option[0] : "", option?.[1]);
 		close();
 	};
 	const openList = () => {
@@ -6502,7 +6771,10 @@ function headCodeProblem(t, head) {
 /** Turns the form's values into settings: empty optional fields are left out rather than saved as "". */
 function cleanSettings(draft) {
 	const optional = (value) => value?.trim() ? value.trim() : void 0;
-	const colors = Object.fromEntries(Object.entries(draft.theme.colors).filter(([, value]) => value?.trim()));
+	const filled = (colors) => Object.fromEntries(Object.entries(colors ?? {}).filter(([, value]) => value?.trim()));
+	const colors = filled(draft.theme.colors);
+	const darkColors = filled(draft.theme.darkColors);
+	const darkLogo = optional(draft.logo?.darkSrc);
 	return {
 		...draft,
 		url: optional(draft.url),
@@ -6512,20 +6784,40 @@ function cleanSettings(draft) {
 		socialImage: optional(draft.socialImage),
 		logo: draft.logo?.src.trim() ? {
 			src: draft.logo.src.trim(),
-			alt: draft.logo.alt
+			alt: draft.logo.alt,
+			...darkLogo && { darkSrc: darkLogo }
 		} : void 0,
 		contact: cleanContact(draft.contact),
 		forms: cleanForms(draft.forms),
 		theme: {
 			colors,
-			fonts: {
-				heading: optional(draft.theme.fonts.heading),
-				body: optional(draft.theme.fonts.body)
-			},
-			radius: optional(draft.theme.radius)
+			fonts: cleanFonts(draft.theme.fonts),
+			radius: optional(draft.theme.radius),
+			darkMode: draft.theme.darkMode || void 0,
+			darkColors: Object.keys(darkColors).length > 0 ? darkColors : void 0,
+			code: cleanCode(draft.theme.code)
 		}
 	};
 }
+/** A font's kind is kept only with the font, which is all it's about. */
+function cleanFonts(fonts) {
+	const heading = fonts.heading?.trim() || void 0;
+	const body = fonts.body?.trim() || void 0;
+	return {
+		heading,
+		...heading && fonts.headingCategory && { headingCategory: fonts.headingCategory },
+		body,
+		...body && fonts.bodyCategory && { bodyCategory: fonts.bodyCategory }
+	};
+}
+function cleanCode(code) {
+	const cleaned = {
+		...code?.light && { light: code.light },
+		...code?.dark && { dark: code.dark },
+		...code?.background === "site" && { background: "site" }
+	};
+	return Object.keys(cleaned).length > 0 ? cleaned : void 0;
+}
 function cleanContact(contact) {
 	const entries = Object.entries(contact ?? {}).flatMap(([key, value]) => value?.trim() ? [[key, value.trim()]] : []);
 	return entries.length > 0 ? Object.fromEntries(entries) : void 0;
@@ -6743,6 +7035,7 @@ function GeneralTab({ draft, errors, formsError, onChange }) {
 				onChange: (src) => onChange({
 					...draft,
 					logo: {
+						...draft.logo,
 						alt: draft.logo?.alt ?? "",
 						src
 					}
@@ -6754,11 +7047,25 @@ function GeneralTab({ draft, errors, formsError, onChange }) {
 				onChange: (alt) => onChange({
 					...draft,
 					logo: {
+						...draft.logo,
 						src: draft.logo?.src ?? "",
 						alt
 					}
 				})
 			}),
+			draft.theme.darkMode && /* @__PURE__ */ jsx(MediaField, {
+				label: t("general.logoDark"),
+				hint: t("general.logoDarkHint"),
+				value: draft.logo?.darkSrc ?? "",
+				onChange: (darkSrc) => onChange({
+					...draft,
+					logo: {
+						src: draft.logo?.src ?? "",
+						alt: draft.logo?.alt ?? "",
+						darkSrc
+					}
+				})
+			}),
 			/* @__PURE__ */ jsx(MediaField, {
 				label: t("general.favicon"),
 				...text("favicon")
@@ -6829,7 +7136,37 @@ function GeneralTab({ draft, errors, formsError, onChange }) {
 	});
 }
 const HEX = /^#[0-9a-f]{6}$/i;
-function ThemeTab({ draft, errors, onChange }) {
+/** One set of the theme's colors: the light ones, or dark mode's. */
+function ColorGrid({ colors, defaults, errors, errorPrefix, onChange }) {
+	const t = useStrings();
+	return /* @__PURE__ */ jsx("div", {
+		className: "gfa-color-grid",
+		children: THEME_COLORS.map((name) => {
+			const value = colors[name] ?? "";
+			const shown = value || defaults[name];
+			return /* @__PURE__ */ jsx(Field, {
+				label: t(`theme.color.${name}`),
+				error: errors[`${errorPrefix}.${name}`],
+				children: (props) => /* @__PURE__ */ jsxs("div", {
+					className: "gfa-color-input",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "color",
+						"aria-label": t("theme.pickColor", { name: t(`theme.color.${name}`) }),
+						value: HEX.test(shown) ? shown : "#000000",
+						onChange: (event) => onChange(name, event.target.value)
+					}), /* @__PURE__ */ jsx("input", {
+						...props,
+						className: "gfa-input",
+						value,
+						placeholder: `${t("theme.default")}: ${defaults[name]}`,
+						onChange: (event) => onChange(name, event.target.value)
+					})]
+				})
+			}, name);
+		})
+	});
+}
+function ThemeTab({ draft, errors, previewScheme, onChange, onPreviewScheme }) {
 	const t = useStrings();
 	const { theme } = draft;
 	const setColor = (name, value) => onChange({
@@ -6842,38 +7179,129 @@ function ThemeTab({ draft, errors, onChange }) {
 			}
 		}
 	});
+	const setDarkColor = (name, value) => onChange({
+		...draft,
+		theme: {
+			...theme,
+			darkColors: {
+				...theme.darkColors,
+				[name]: value
+			}
+		}
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-form",
 		children: [
 			/* @__PURE__ */ jsx("h2", {
 				className: "gfa-section-title",
-				children: t("theme.colors")
+				children: t("theme.colors")
+			}),
+			/* @__PURE__ */ jsx(ColorGrid, {
+				colors: theme.colors,
+				defaults: DEFAULT_THEME_COLORS,
+				errors,
+				errorPrefix: "theme.colors",
+				onChange: setColor
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "gfa-section-title",
+				children: t("theme.darkMode")
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "gfa-checkbox",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: theme.darkMode === true,
+					onChange: (event) => onChange({
+						...draft,
+						theme: {
+							...theme,
+							darkMode: event.target.checked
+						}
+					})
+				}), t("theme.darkModeOn")]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("theme.darkModeHint")
+			}),
+			theme.darkMode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("fieldset", {
+				className: "gfa-choice-group",
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "gfa-label",
+					children: t("theme.preview")
+				}), ["light", "dark"].map((scheme) => /* @__PURE__ */ jsxs("label", {
+					className: "gfa-checkbox",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name: "preview-scheme",
+						checked: previewScheme === scheme,
+						onChange: () => onPreviewScheme(scheme)
+					}), t(scheme === "light" ? "theme.previewLight" : "theme.previewDark")]
+				}, scheme))]
+			}), /* @__PURE__ */ jsxs("fieldset", {
+				className: "gfa-choice-group",
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "gfa-label",
+					children: t("theme.darkColors")
+				}), /* @__PURE__ */ jsx(ColorGrid, {
+					colors: theme.darkColors ?? {},
+					defaults: DEFAULT_DARK_THEME_COLORS,
+					errors,
+					errorPrefix: "theme.darkColors",
+					onChange: setDarkColor
+				})]
+			})] }),
+			/* @__PURE__ */ jsx("h2", {
+				className: "gfa-section-title",
+				children: t("theme.code")
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "gfa-color-grid",
-				children: THEME_COLORS.map((name) => {
-					const value = theme.colors[name] ?? "";
-					const shown = value || DEFAULT_THEME_COLORS[name];
-					return /* @__PURE__ */ jsx(Field, {
-						label: t(`theme.color.${name}`),
-						error: errors[`theme.colors.${name}`],
-						children: (props) => /* @__PURE__ */ jsxs("div", {
-							className: "gfa-color-input",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "color",
-								"aria-label": t("theme.pickColor", { name: t(`theme.color.${name}`) }),
-								value: HEX.test(shown) ? shown : "#000000",
-								onChange: (event) => setColor(name, event.target.value)
-							}), /* @__PURE__ */ jsx("input", {
-								...props,
-								className: "gfa-input",
-								value,
-								placeholder: `${t("theme.default")}: ${DEFAULT_THEME_COLORS[name]}`,
-								onChange: (event) => setColor(name, event.target.value)
-							})]
-						})
-					}, name);
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("theme.codeHint")
+			}),
+			["light", "dark"].map((side) => /* @__PURE__ */ jsx(Field, {
+				label: t(side === "light" ? "theme.codeLight" : "theme.codeDark"),
+				children: (props) => /* @__PURE__ */ jsx("select", {
+					...props,
+					className: "gfa-input",
+					value: theme.code?.[side] ?? DEFAULT_CODE_THEMES[side],
+					onChange: (event) => onChange({
+						...draft,
+						theme: {
+							...theme,
+							code: {
+								...theme.code,
+								[side]: event.target.value
+							}
+						}
+					}),
+					children: Object.entries(CODE_THEMES[side]).map(([name, label]) => /* @__PURE__ */ jsx("option", {
+						value: name,
+						children: label
+					}, name))
 				})
+			}, side)),
+			/* @__PURE__ */ jsxs("label", {
+				className: "gfa-checkbox",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: theme.code?.background === "site",
+					onChange: (event) => onChange({
+						...draft,
+						theme: {
+							...theme,
+							code: {
+								...theme.code,
+								background: event.target.checked ? "site" : void 0
+							}
+						}
+					})
+				}), t("theme.codeBackground")]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t("theme.codeBackgroundHint")
 			}),
 			/* @__PURE__ */ jsx("h2", {
 				className: "gfa-section-title",
@@ -6887,13 +7315,14 @@ function ThemeTab({ draft, errors, onChange }) {
 				label: t("theme.headingFont"),
 				value: theme.fonts.heading ?? "",
 				error: errors["theme.fonts.heading"],
-				onChange: (heading) => onChange({
+				onChange: (heading, headingCategory) => onChange({
 					...draft,
 					theme: {
 						...theme,
 						fonts: {
 							...theme.fonts,
-							heading
+							heading,
+							headingCategory
 						}
 					}
 				})
@@ -6902,13 +7331,14 @@ function ThemeTab({ draft, errors, onChange }) {
 				label: t("theme.bodyFont"),
 				value: theme.fonts.body ?? "",
 				error: errors["theme.fonts.body"],
-				onChange: (body) => onChange({
+				onChange: (body, bodyCategory) => onChange({
 					...draft,
 					theme: {
 						...theme,
 						fonts: {
 							...theme.fonts,
-							body
+							body,
+							bodyCategory
 						}
 					}
 				})
@@ -7154,10 +7584,34 @@ function SettingsScreen({ tab, section }) {
 		content.collections,
 		homeView
 	]);
+	const [resolvedHome, setResolvedHome] = useState();
+	useEffect(() => {
+		if (!home) return;
+		let current = true;
+		const timer = setTimeout(() => {
+			resolveAllData(home.content.data, pageConfig, siteMetadata(previewSite)).then((data) => current && setResolvedHome(data), () => {});
+		}, 300);
+		return () => {
+			current = false;
+			clearTimeout(timer);
+		};
+	}, [
+		home,
+		pageConfig,
+		previewSite
+	]);
+	const adminDark = useDarkMode();
+	const [chosenScheme, setChosenScheme] = useState();
+	const previewScheme = chosenScheme ?? (adminDark ? "dark" : "light");
 	const previewStyles = useMemo(() => ({
 		theme: previewSettings.theme,
-		customCss: css
-	}), [previewSettings, css]);
+		customCss: css,
+		scheme: previewScheme
+	}), [
+		previewSettings,
+		css,
+		previewScheme
+	]);
 	const errors = showErrors ? validation.errors : {};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-split",
@@ -7212,7 +7666,9 @@ function SettingsScreen({ tab, section }) {
 				tab === "theme" && /* @__PURE__ */ jsx(ThemeTab, {
 					draft: settings,
 					errors,
-					onChange: setSettings
+					previewScheme,
+					onChange: setSettings,
+					onPreviewScheme: setChosenScheme
 				}),
 				tab === "menus" && /* @__PURE__ */ jsx(MenusEditor, {
 					menus,
@@ -7249,7 +7705,7 @@ function SettingsScreen({ tab, section }) {
 					site: previewSite,
 					pageConfig,
 					layoutConfig,
-					page: home.content.data,
+					page: resolvedHome ?? home.content.data,
 					header: content.header.data,
 					footer: content.footer.data
 				})
@@ -7534,7 +7990,7 @@ function ConnectedDomain({ domain, onRemoved }) {
 		className: "gfa-form",
 		children: [
 			/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: t("domain.connected", { domain }) }) }),
-			account?.canRedirect && /* @__PURE__ */ jsx("p", {
+			account?.redirectAddressesListed && /* @__PURE__ */ jsx("p", {
 				className: "gfa-notice",
 				children: t("domain.signIn", {
 					host,
@@ -8636,7 +9092,7 @@ function EntryEditor({ collection, entry }) {
 			const values = Object.fromEntries(Object.entries(next.root.props ?? {}).filter(([name]) => name !== "id"));
 			const title = typeof values.title === "string" && values.title.trim() ? values.title.trim() : entry.slug;
 			return {
-				changes: [entryFileChange(collection, entry.slug, values)],
+				changes: [entryFileChange$1(collection, entry.slug, values)],
 				message: t("editEntry.message", {
 					entry: entryName,
 					title
@@ -8747,9 +9203,10 @@ function MovePageDialog({ page, onClose }) {
 	const t = useStrings();
 	const { publish } = useAdmin();
 	const { content } = useSiteContent();
+	const owner = useCanChangeSettings();
 	const [address, setAddress] = useState(page.path);
 	const [updateLinks, setUpdateLinks] = useState(true);
-	const canRedirect = page.path !== "/";
+	const canRedirect = page.path !== "/" && owner;
 	const [redirect, setRedirect] = useState(canRedirect);
 	const [submitted, setSubmitted] = useState(false);
 	const [busy, setBusy] = useState(false);
@@ -8948,147 +9405,108 @@ function PagesScreen() {
 	});
 }
 //#endregion
-//#region src/sign-in.tsx
-function errorMessage(error) {
-	if (error instanceof SignInError) return `signIn.error.${error.problem}`;
-	return "signIn.error.other";
+//#region src/site-preview.tsx
+/**
+* The page tools such as the Claude connector take screenshots of drafts with.
+* At `/admin/#/preview`, the admin panel shows nothing and signs nobody in
+* until a script in the page calls `window.goodfellowPreview()` with a draft's
+* content files and an address; it then shows that page as the live site
+* would. Only code already running in the page can call it, so no link and no
+* other site can put content here.
+*/
+/** The admin panel's address for the preview page. */
+const PREVIEW_ROUTE = "#/preview";
+/** Whether the admin panel was opened at the preview page. */
+function isPreviewAddress(hash) {
+	return hash === PREVIEW_ROUTE;
 }
-function SignInScreen({ host, error, onSignedIn }) {
-	const t = useStrings();
-	const [token, setToken] = useState("");
-	const [remember, setRemember] = useState(false);
-	const [busy, setBusy] = useState(false);
-	const [failure, setFailure] = useState(error);
-	const values = { host: host.name };
-	const onSubmit = async (event) => {
-		event.preventDefault();
-		setBusy(true);
-		setFailure(void 0);
-		try {
-			onSignedIn(await host.signInWithToken(token, remember));
-		} catch (caught) {
-			setFailure(caught);
-			setBusy(false);
-		}
+function filesSource(files) {
+	return {
+		read: async (path) => Object.hasOwn(files, path) ? files[path] : void 0,
+		list: async (dir) => Object.keys(files).filter((path) => path.startsWith(`${dir}/`)).sort()
 	};
-	const remembered = /* @__PURE__ */ jsxs("label", {
-		className: "gfa-checkbox",
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "checkbox",
-			checked: remember,
-			onChange: (event) => setRemember(event.target.checked)
-		}), /* @__PURE__ */ jsxs("span", { children: [t("signIn.remember"), /* @__PURE__ */ jsx("span", {
-			className: "gfa-hint gfa-block",
-			children: t("signIn.rememberHint")
-		})] })]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "gfa-sign-in",
-		children: [
-			/* @__PURE__ */ jsx("h1", { children: t("signIn.title") }),
-			/* @__PURE__ */ jsx("p", { children: t("signIn.intro", values) }),
-			failure !== void 0 && /* @__PURE__ */ jsx(ErrorMessage, {
-				message: failure instanceof SignInError && failure.problem === "invalid" && error === failure ? t("signIn.error.expired") : t(errorMessage(failure), values),
-				error: failure
-			}),
-			host.canRedirect && /* @__PURE__ */ jsxs("div", {
-				className: "gfa-form",
-				children: [remembered, /* @__PURE__ */ jsx(Button, {
-					variant: "primary",
-					disabled: busy,
-					onClick: () => void host.startRedirect(remember),
-					children: t("signIn.redirect", values)
-				})]
-			}),
-			host.tokenLinks && host.tokenLinks.length > 0 && /* @__PURE__ */ jsxs("details", {
-				className: "gfa-sign-in-token",
-				open: !host.canRedirect,
-				children: [/* @__PURE__ */ jsx("summary", { children: t(host.canRedirect ? "signIn.orToken" : "signIn.token.title") }), /* @__PURE__ */ jsxs("form", {
-					className: "gfa-form",
-					onSubmit,
-					children: [
-						/* @__PURE__ */ jsxs("ol", {
-							className: "gfa-steps",
-							children: [/* @__PURE__ */ jsxs("li", { children: [
-								/* @__PURE__ */ jsx("p", { children: t("signIn.token.step1", values) }),
-								/* @__PURE__ */ jsx("ul", {
-									className: "gfa-token-links",
-									children: host.tokenLinks.map((link) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
-										href: link.url,
-										target: "_blank",
-										rel: "noreferrer",
-										children: t(link.label, values)
-									}), link.hint && /* @__PURE__ */ jsx("p", {
-										className: "gfa-hint",
-										children: t(link.hint, values)
-									})] }, link.url))
-								}),
-								/* @__PURE__ */ jsx("p", {
-									className: "gfa-hint",
-									children: t("signIn.token.chooseSite", values)
-								})
-							] }), /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("p", { children: t("signIn.token.step2") }), /* @__PURE__ */ jsx(TextField, {
-								label: t("signIn.token.label"),
-								type: "password",
-								autoComplete: "off",
-								spellCheck: false,
-								value: token,
-								onChange: setToken
-							})] })]
-						}),
-						!host.canRedirect && remembered,
-						/* @__PURE__ */ jsx(Button, {
-							type: "submit",
-							variant: "primary",
-							disabled: busy || !token.trim(),
-							children: busy ? t("signIn.checking") : t("signIn.submit")
-						})
-					]
-				})]
-			})
-		]
-	});
 }
+const EMPTY_DOCUMENT = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body></body></html>";
 /**
-* Shows the sign-in screen until someone is signed in to the git host, then
-* renders its children with the connected backend.
+* Shows a page from content handed to `window.goodfellowPreview()`, full width,
+* in an iframe as tall as the page, so the site's styles and the admin panel's
+* don't mix and a full-page screenshot shows all of it.
 */
-function SignInGate({ host, children }) {
-	const t = useStrings();
-	const [state, setState] = useState({ status: "checking" });
+function SitePreview({ config, preview }) {
+	const configs = useMemo(() => createPuckConfigs(config), [config]);
+	const [doc, setDoc] = useState(null);
+	const [shown, setShown] = useState();
+	const [height, setHeight] = useState(800);
+	const rendered = useRef(void 0);
 	useEffect(() => {
-		let cancelled = false;
-		host.restore().then((backend) => !cancelled && setState(backend ? {
-			status: "signed-in",
-			backend
-		} : { status: "signed-out" }), (error) => !cancelled && setState({
-			status: "signed-out",
-			error
-		}));
+		window.goodfellowPreview = async ({ files, path, dark }) => {
+			let content;
+			try {
+				content = await loadSiteContent(filesSource(files));
+			} catch (error) {
+				return {
+					ok: false,
+					problem: error.message
+				};
+			}
+			const match = findSitePage(content, todayIn(content.settings.timeZone), config.blocks, path);
+			if (!match) return {
+				ok: false,
+				problem: `The site has no page at ${path}.`
+			};
+			const prepared = await preparePage(configs, content, match.page);
+			await new Promise((done) => {
+				rendered.current = done;
+				setShown({
+					content,
+					prepared,
+					dark: dark === true
+				});
+			});
+			return {
+				ok: true,
+				status: match.status
+			};
+		};
 		return () => {
-			cancelled = true;
+			delete window.goodfellowPreview;
 		};
-	}, [host]);
-	if (state.status === "checking") return /* @__PURE__ */ jsx("p", {
-		className: "gfa-screen",
-		children: t("signIn.checking")
-	});
-	if (state.status === "signed-out") return /* @__PURE__ */ jsx(SignInScreen, {
-		host,
-		error: state.error,
-		onSignedIn: (backend) => setState({
-			status: "signed-in",
-			backend
-		})
-	});
-	const { backend } = state;
-	return children(backend, (error) => {
-		backend.signOut();
-		setState({
-			status: "signed-out",
-			error
+	}, [config.blocks, configs]);
+	useEffect(() => {
+		if (!doc || !shown) return;
+		installPreviewStyles(doc, preview, {
+			theme: shown.content.settings.theme,
+			customCss: shown.content.customCss,
+			scheme: shown.dark ? "dark" : "light"
 		});
-	});
+		requestAnimationFrame(() => requestAnimationFrame(() => {
+			setHeight(Math.max(doc.documentElement.scrollHeight, 200));
+			rendered.current?.();
+			rendered.current = void 0;
+		}));
+	}, [
+		doc,
+		shown,
+		preview
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("iframe", {
+		title: "Preview",
+		srcDoc: EMPTY_DOCUMENT,
+		onLoad: (event) => setDoc(event.currentTarget.contentDocument),
+		style: {
+			display: "block",
+			width: "100%",
+			height,
+			border: 0
+		}
+	}), doc && shown && createPortal(/* @__PURE__ */ jsx(PageBody, {
+		site: shown.prepared.site,
+		pageConfig: shown.prepared.pageConfig,
+		layoutConfig: shown.prepared.layoutConfig,
+		page: shown.prepared.data,
+		header: shown.prepared.header,
+		footer: shown.prepared.footer
+	}), doc.body)] });
 }
 //#endregion
 //#region src/updates-screen.tsx
@@ -9131,7 +9549,7 @@ async function previousRelease(versions, current) {
 /** The site's Goodfellow release, the fixes and releases it can update to, and its nightly update job. */
 function UpdatesScreen() {
 	const t = useStrings();
-	const { updates, demo } = useAdmin();
+	const { updates, demo, contentOnly } = useAdmin();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-screen",
 		children: [
@@ -9142,7 +9560,7 @@ function UpdatesScreen() {
 			/* @__PURE__ */ jsx(SettingsTabs, { tab: "updates" }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "gfa-form",
-				children: [/* @__PURE__ */ jsx("p", { children: t("updates.intro") }), demo ? /* @__PURE__ */ jsx("p", { children: t("updates.demo") }) : updates ? /* @__PURE__ */ jsx(UpdatesPanel, {}) : /* @__PURE__ */ jsx("p", { children: t("updates.local") })]
+				children: [/* @__PURE__ */ jsx("p", { children: t("updates.intro") }), demo ? /* @__PURE__ */ jsx("p", { children: t("updates.demo") }) : contentOnly && !updates ? /* @__PURE__ */ jsx("p", { children: t("updates.contentOnly") }) : updates ? /* @__PURE__ */ jsx(UpdatesPanel, {}) : /* @__PURE__ */ jsx("p", { children: t("updates.local") })]
 			})
 		]
 	});
@@ -9160,8 +9578,9 @@ function UpdatesPanel() {
 	const load = useCallback(async () => {
 		if (!updates) return;
 		try {
+			const code = updates.code;
 			const [packageJson, settingsText, metadata, setup, last, people] = await Promise.all([
-				versions?.readAt("package.json", revision),
+				code ? code.read("package.json").catch(() => void 0) : versions?.readAt("package.json", revision),
 				readFile(UPDATES_FILE),
 				window.fetch(`${NPM_REGISTRY}/${VERSION_PACKAGE}`, { headers: { accept: "application/vnd.npm.install-v1+json" } }).then((response) => response.ok ? response.json() : void 0).catch(() => void 0),
 				updates.setup(),
@@ -9170,7 +9589,8 @@ function UpdatesPanel() {
 			]);
 			const current = packageJson ? siteVersion(packageJson) : void 0;
 			const settings = parseUpdateSettings(settingsText);
-			const previous = current && versions ? await previousRelease(versions, current).catch(() => void 0) : void 0;
+			const history = code ?? versions;
+			const previous = current && history ? await previousRelease(history, current).catch(() => void 0) : void 0;
 			setLoaded({
 				current,
 				previous,
@@ -9216,6 +9636,20 @@ function UpdatesPanel() {
 		setBusy(false);
 	};
 	const start = (target) => act(() => updates?.start(target) ?? Promise.resolve(), () => setStarted(true));
+	/**
+	* Goes back to an older release. Where the code is kept apart from the
+	* content, the update can't change the content's settings, so the release
+	* the site leaves is skipped here, as the update does elsewhere.
+	*/
+	const goBack = (target, settings, current) => act(async () => {
+		await updates?.start(target);
+		if (!updates?.code || settings.skip.includes(current)) return;
+		const result = await publish([updateSettingsFileChange({
+			...settings,
+			skip: [...settings.skip, current]
+		})], t("updates.back.skip", { version: current }));
+		if (!result.ok) throw new SaveError(result.error);
+	}, () => setStarted(true));
 	const saveSettings = (settings, message) => act(async () => {
 		const result = await publish([updateSettingsFileChange(settings)], message);
 		if (!result.ok) throw new SaveError(result.error);
@@ -9232,7 +9666,20 @@ function UpdatesPanel() {
 	const { current, previous, settings, available, setup, last, owner } = loaded;
 	const needsToken = problem instanceof UpdatesError && problem.problem === "not-allowed" && ownerAccess;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("p", { children: current ? t("updates.current", { version: current }) : t("updates.unknownVersion") }),
+		updates.code && /* @__PURE__ */ jsxs("p", { children: [
+			t("updates.code", { place: updates.code.repo }),
+			" ",
+			/* @__PURE__ */ jsx("a", {
+				href: updates.code.webUrl,
+				target: "_blank",
+				rel: "noreferrer",
+				children: t("updates.code.link", { host })
+			})
+		] }),
+		setup === "no-access" ? /* @__PURE__ */ jsx("p", {
+			className: "gfa-notice",
+			children: t("updates.noAccess", { place: updates.code?.repo ?? "" })
+		}) : /* @__PURE__ */ jsx("p", { children: current ? t("updates.current", { version: current }) : t("updates.unknownVersion") }),
 		/* @__PURE__ */ jsx(OwnerTokenActive, { onForget: () => void load() }),
 		setup === "missing" && /* @__PURE__ */ jsx("p", {
 			className: "gfa-notice",
@@ -9246,7 +9693,7 @@ function UpdatesPanel() {
 				children: t("updates.enable")
 			})]
 		}),
-		current && setup !== "missing" && /* @__PURE__ */ jsxs(Fragment, { children: [
+		current && setup !== "missing" && setup !== "no-access" && /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("h2", {
 				className: "gfa-section-title",
 				children: t("updates.fixes.title")
@@ -9309,7 +9756,7 @@ function UpdatesPanel() {
 				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
 					disabled: busy || running,
 					onClick: () => {
-						if (window.confirm(t("updates.back.confirm", { version: previous }))) start(previous);
+						if (window.confirm(t("updates.back.confirm", { version: previous }))) goBack(previous, settings, current ?? "");
 					},
 					children: t("updates.back.button", { version: previous })
 				}) })
@@ -9415,9 +9862,32 @@ function LoadError({ error }) {
 		})]
 	});
 }
+/** Shown in place of the Blocks screen where the site's code is kept in a repository of its own. */
+function BlocksInCode() {
+	const t = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-screen",
+		children: [/* @__PURE__ */ jsx("h1", { children: t("blocks.contentOnly") }), /* @__PURE__ */ jsx("p", {
+			className: "gfa-hint",
+			children: t("blocks.contentOnlyHint")
+		})]
+	});
+}
+/** Shown in place of screens only owners use, where the site's own sign-in says someone is an editor. */
+function OwnersOnly() {
+	const t = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-screen",
+		children: [/* @__PURE__ */ jsx("h1", { children: t("owners.only") }), /* @__PURE__ */ jsx("p", {
+			className: "gfa-hint",
+			children: t("owners.onlyHint")
+		})]
+	});
+}
 function CollectionRoute({ id, sub, slug }) {
 	const t = useStrings();
 	const { content } = useSiteContent();
+	const owner = useCanChangeSettings();
 	if (sub === "edit") return /* @__PURE__ */ jsx(EntryEditorScreen, {
 		collectionId: id,
 		slug
@@ -9430,6 +9900,7 @@ function CollectionRoute({ id, sub, slug }) {
 			children: t("collection.back")
 		})]
 	});
+	if ((sub === "template" || sub === "settings") && !owner) return /* @__PURE__ */ jsx(OwnersOnly, {});
 	if (sub === "template") return /* @__PURE__ */ jsx(TemplateScreen, { collection });
 	if (sub === "settings") return /* @__PURE__ */ jsx(CollectionSettingsScreen, { collection }, collection.id);
 	return /* @__PURE__ */ jsx(EntriesScreen, { collection });
@@ -9437,8 +9908,11 @@ function CollectionRoute({ id, sub, slug }) {
 function Screen() {
 	const { segments, params } = useRoute();
 	const [section, sub, tab] = segments;
+	const owner = useCanChangeSettings();
+	const { contentOnly } = useAdmin();
+	if ((section === "blocks" || section === "settings") && !owner) return /* @__PURE__ */ jsx(OwnersOnly, {});
 	if (section === "media") return /* @__PURE__ */ jsx(MediaScreen, {});
-	if (section === "blocks") return /* @__PURE__ */ jsx(BlocksScreen, {});
+	if (section === "blocks") return contentOnly ? /* @__PURE__ */ jsx(BlocksInCode, {}) : /* @__PURE__ */ jsx(BlocksScreen, {});
 	if (section === "collections") return sub ? /* @__PURE__ */ jsx(CollectionRoute, {
 		id: sub,
 		sub: tab,
@@ -9529,7 +10003,7 @@ function AccountMenu() {
 				title: t("account.signedInAs", { name: user.login }),
 				children: user.name || user.login
 			}),
-			/* @__PURE__ */ jsx(Button, {
+			account.signOut && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				onClick: account.signOut,
 				children: t("account.signOut")
@@ -9569,7 +10043,8 @@ function versionsSection(file) {
 }
 function Shell() {
 	const t = useStrings();
-	const { state, siteUrl } = useAdmin();
+	const { state, siteUrl, contentOnly } = useAdmin();
+	const owner = useCanChangeSettings();
 	const { segments, params } = useRoute();
 	const [section] = segments;
 	const current = section === "versions" ? versionsSection(params.get("file") ?? "") : section === "layout" || section === "settings" || section === "collections" || section === "media" || section === "blocks" ? section : "pages";
@@ -9607,12 +10082,12 @@ function Shell() {
 								"aria-current": current === "layout" ? "page" : void 0,
 								children: t("nav.layout")
 							}),
-							/* @__PURE__ */ jsx(AppLink, {
+							owner && !contentOnly && /* @__PURE__ */ jsx(AppLink, {
 								href: "#/blocks",
 								"aria-current": current === "blocks" ? "page" : void 0,
 								children: t("nav.blocks")
 							}),
-							/* @__PURE__ */ jsx(AppLink, {
+							owner && /* @__PURE__ */ jsx(AppLink, {
 								href: "#/settings/general",
 								"aria-current": current === "settings" ? "page" : void 0,
 								children: t("nav.settings")
@@ -9654,7 +10129,7 @@ function MissingBackend() {
 	});
 }
 /** The admin panel. Render it on its own page, such as `/admin`. */
-function Admin({ config, store, host = config.backend, preview, siteUrl = "/", strings, registry }) {
+function Admin({ config, store, host = config.backend, server, preview, siteUrl = "/", strings, registry }) {
 	useApplyThemeChoice();
 	const demo = useMemo(() => config.demo ? createDemoStore(siteUrl, store) : void 0, [
 		config.demo,
@@ -9665,6 +10140,10 @@ function Admin({ config, store, host = config.backend, preview, siteUrl = "/", s
 		...strings,
 		"publish.done": strings?.["demo.published"] ?? defaultStrings["demo.published"]
 	} : strings, [demo, strings]);
+	if (typeof location !== "undefined" && isPreviewAddress(location.hash)) return /* @__PURE__ */ jsx(SitePreview, {
+		config,
+		preview
+	});
 	return /* @__PURE__ */ jsx(StringsProvider, {
 		strings: text,
 		children: demo ? /* @__PURE__ */ jsx(AdminProvider, {
@@ -9681,6 +10160,31 @@ function Admin({ config, store, host = config.backend, preview, siteUrl = "/", s
 			siteUrl,
 			registry,
 			children: /* @__PURE__ */ jsx(Shell, {})
+		}) : server ? /* @__PURE__ */ jsx(AppSignInGate, {
+			api: server,
+			children: (backend, session, signOut) => /* @__PURE__ */ jsx(AdminProvider, {
+				config,
+				store: backend,
+				account: {
+					user: backend.user,
+					hostName: host?.name ?? "",
+					redirectAddressesListed: false,
+					role: session.role,
+					...session.ai.length > 0 && { ai: {
+						server: new URL(`${server.replace(/\/+$/, "")}/ai`, location.href).href,
+						services: session.ai
+					} },
+					...session.signOut && { signOut: () => {
+						forgetAiKeys();
+						signOut();
+					} }
+				},
+				preview,
+				siteUrl,
+				registry,
+				onSignInError: (error) => signOut(error),
+				children: /* @__PURE__ */ jsx(Shell, {})
+			})
 		}) : host ? /* @__PURE__ */ jsx(SignInGate, {
 			host,
 			children: (backend, signOut) => /* @__PURE__ */ jsx(AdminProvider, {
@@ -9689,7 +10193,7 @@ function Admin({ config, store, host = config.backend, preview, siteUrl = "/", s
 				account: {
 					user: backend.user,
 					hostName: host.name,
-					canRedirect: host.canRedirect,
+					redirectAddressesListed: host.canRedirect && host.redirectAddressesListed === true,
 					signOut: () => {
 						forgetAiKeys();
 						signOut();