@goodfellow-cms/admin 0.2.0 → 0.3.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 { 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, deleteCollectionChanges, demoContentStore, demoStore, domainZone, 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.3.0"),
 		...config.registries
 	}), [registry, config.registries]);
 	const favicon = state.status === "ready" ? state.content.settings.favicon : void 0;
@@ -837,6 +403,8 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 	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);
@@ -1050,6 +618,7 @@ function useAiSettings(providers) {
 				else storage.clear();
 			}
 			savePreferences({
+				...preferences,
 				provider,
 				models: {
 					...preferences.models,
@@ -1061,6 +630,17 @@ function useAiSettings(providers) {
 		});
 	}, [])];
 }
+/** 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
+		});
+	}, [])];
+}
 //#endregion
 //#region src/router.tsx
 function parseHash(hash) {
@@ -1170,6 +750,13 @@ 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.",
 	"account.signedInAs": "Signed in as {name}",
@@ -1496,6 +1083,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 +1093,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",
@@ -1612,6 +1209,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}",
@@ -1733,6 +1334,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 +1390,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",
@@ -2293,6 +1909,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 +1988,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 +2030,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 +2083,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 +2146,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,56 +2612,201 @@ function PublishFailure({ failure }) {
 	});
 }
 //#endregion
-//#region src/ai-panel.tsx
-const usePuck$1 = createUsePuck();
-const claudeModelLabels = {
-	"claude-opus-5-5": "ai.model.claude-opus-5-5",
-	"claude-sonnet-5-5": "ai.model.claude-sonnet-5-5",
-	"claude-haiku-4-5": "ai.model.claude-haiku-4-5"
+//#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;
+	}
 };
-function siteSummary(content, media) {
-	return {
-		title: content.settings.title,
-		description: content.settings.description,
-		language: content.settings.language,
-		pages: allPages(content).slice(0, 200).map((page) => {
-			const entry = (page.entry && content.collections.find((collection) => collection.id === page.entry?.collection))?.entries.find((candidate) => candidate.slug === page.entry?.slug);
-			return {
-				path: page.path,
-				title: entry ? entryTitle(entry) : pageTitle(page)
-			};
-		}),
-		collections: content.collections.map((collection) => ({
-			id: collection.id,
-			name: collection.settings.name,
-			fields: collection.settings.fields.map(({ name, label }) => ({
-				name,
-				label
-			}))
-		})),
-		images: siteImages(media),
-		contact: content.settings.contact
-	};
-}
-function newId(type) {
-	return `${type}-${crypto.randomUUID()}`;
-}
-function problemKey(error) {
-	if (error instanceof AiError) return `ai.error.${error.problem}`;
-	if (error instanceof SyntaxError) return "ai.error.answer";
-	return "ai.error.service";
+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));
 }
-function ServiceSettings({ providers, settings, onChange }) {
-	const t = useStrings();
-	const info = PROVIDERS[settings.provider];
-	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;
-	useEffect(() => {
-		let cancelled = false;
-		const controller = new AbortController();
-		setModels(PROVIDERS[provider].models ?? []);
+/**
+* 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 = {
+	"claude-opus-5-5": "ai.model.claude-opus-5-5",
+	"claude-sonnet-5-5": "ai.model.claude-sonnet-5-5",
+	"claude-haiku-4-5": "ai.model.claude-haiku-4-5"
+};
+function siteSummary(content, media, stockPhotos) {
+	return {
+		title: content.settings.title,
+		description: content.settings.description,
+		language: content.settings.language,
+		pages: allPages(content).slice(0, 200).map((page) => {
+			const entry = (page.entry && content.collections.find((collection) => collection.id === page.entry?.collection))?.entries.find((candidate) => candidate.slug === page.entry?.slug);
+			return {
+				path: page.path,
+				title: entry ? entryTitle(entry) : pageTitle(page)
+			};
+		}),
+		collections: content.collections.map((collection) => ({
+			id: collection.id,
+			name: collection.settings.name,
+			fields: collection.settings.fields.map(({ name, label }) => ({
+				name,
+				label
+			}))
+		})),
+		images: siteImages(media),
+		contact: content.settings.contact,
+		...stockPhotos && { stockPhotos }
+	};
+}
+function newId(type) {
+	return `${type}-${crypto.randomUUID()}`;
+}
+function problemKey(error) {
+	if (error instanceof AiError) return `ai.error.${error.problem}`;
+	if (error instanceof SyntaxError) return "ai.error.answer";
+	return "ai.error.service";
+}
+function ServiceSettings({ providers, settings, onChange }) {
+	const t = useStrings();
+	const info = PROVIDERS[settings.provider];
+	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;
+	useEffect(() => {
+		let cancelled = false;
+		const controller = new AbortController();
+		setModels(PROVIDERS[provider].models ?? []);
 		const timer = setTimeout(() => {
 			listModels({
 				provider,
@@ -3089,12 +2919,15 @@ 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 } = 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 [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);
@@ -3181,11 +3014,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 +3084,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 +3099,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 +3144,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 +3171,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 +3220,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")
 					}) })
 				]
@@ -3339,6 +3242,23 @@ function AiPanel({ context }) {
 		]
 	});
 }
+/** 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;
+}
 function SparkleIcon() {
 	return /* @__PURE__ */ jsxs("svg", {
 		width: "20",
@@ -3363,98 +3283,7 @@ function aiPlugin(context, label) {
 		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);
-}
-/** 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
+		render: () => /* @__PURE__ */ jsx(AiPanel, { context })
 	};
 }
 //#endregion
@@ -3515,7 +3344,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 +3372,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 +3402,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 +3433,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 +3508,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 +3569,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 +3808,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";
@@ -4270,7 +4118,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 +4127,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 +4436,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 +5136,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
@@ -5492,12 +5341,248 @@ function createDemoStore(siteUrl, base) {
 	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")
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+/**
+* Shows the sign-in screen until someone is signed in to the git host, then
+* renders its children with the connected backend.
+*/
+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
+		});
+	});
+}
+//#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 +5604,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")
 			}),
@@ -5580,69 +5665,7 @@ function OwnerTokenActive({ onForget }) {
 				children: t("owner.token.forget")
 			})
 		]
-	});
-}
-//#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
@@ -5933,7 +5956,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 +6525,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 +6538,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 +6789,7 @@ function GeneralTab({ draft, errors, formsError, onChange }) {
 				onChange: (src) => onChange({
 					...draft,
 					logo: {
+						...draft.logo,
 						alt: draft.logo?.alt ?? "",
 						src
 					}
@@ -6754,11 +6801,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 +6890,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,6 +6933,16 @@ 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: [
@@ -6849,31 +6950,112 @@ function ThemeTab({ draft, errors, onChange }) {
 				className: "gfa-section-title",
 				children: t("theme.colors")
 			}),
-			/* @__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(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("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 +7069,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 +7085,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 +7338,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 +7420,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 +7459,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 +7744,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 +8846,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
@@ -8948,147 +9158,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
@@ -9665,6 +9836,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, {
@@ -9689,7 +9864,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();