@goodfellow-cms/admin 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -58,6 +58,13 @@ export declare const defaultStrings: {
   readonly "signIn.install": "Install Goodfellow on {host}";
   readonly "signIn.error.expired": "You were signed out because your sign-in expired. Sign in again to keep editing.";
   readonly "signIn.error.other": "Couldn't reach {host}. Check your connection and try again.";
+  readonly "signIn.app.intro": "Sign in with your account on this site to edit it.";
+  readonly "signIn.app.button": "Sign in";
+  readonly "signIn.app.expired": "You've been signed out. Sign in again to keep editing.";
+  readonly "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.";
+  readonly "signIn.app.error": "Couldn't reach the site. Check your connection and try again.";
+  readonly "owners.only": "Only the site's owners can change this.";
+  readonly "owners.onlyHint": "Ask one of them if something here needs changing.";
   readonly "account.signedInAs": "Signed in as {name}";
   readonly "account.signOut": "Sign out";
   readonly "deploy.building": "Updating the live site…";
@@ -305,6 +312,8 @@ export declare const defaultStrings: {
   readonly "demo.startOver": "Start over";
   readonly "demo.startOverTitle": "Start over?";
   readonly "demo.startOverBody": "Everything you've changed in this demo, including uploads, will be undone.";
+  readonly "blocks.contentOnly": "This site's blocks are added by its developer.";
+  readonly "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.";
   readonly "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.";
   readonly "markdown.formatted": "Formatted";
   readonly "markdown.source": "Markdown";
@@ -415,6 +424,8 @@ export declare const defaultStrings: {
   readonly "ai.provider.manual": "Copy and paste into a chat app (free)";
   readonly "ai.provider.custom": "Another service (OpenAI-compatible)";
   readonly "ai.noKey": "(free, no key needed)";
+  readonly "ai.siteKey": "(provided by this site)";
+  readonly "ai.siteKeyHint": "This site provides {service}, so you don't need a key of your own.";
   readonly "ai.baseUrl": "Address of the service's API";
   readonly "ai.baseUrlHint": "Such as https://example.org/v1.";
   readonly "ai.key": "API key";
@@ -526,6 +537,11 @@ export declare const defaultStrings: {
   readonly "settings.tab.editors": "Editors";
   readonly "settings.tab.updates": "Updates";
   readonly "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.";
+  readonly "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.";
+  readonly "updates.code": "This site's code is kept apart from its content, at {place}, where Goodfellow's updates are installed.";
+  readonly "updates.code.link": "See it on {host}";
+  readonly "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.";
+  readonly "updates.back.skip": "Don't install Goodfellow {version} again";
   readonly "updates.local": "Updates are shown in the published site's admin panel, where you sign in with GitHub or GitLab.";
   readonly "updates.demo": "Updates aren't installed in a demo.";
   readonly "updates.loading": "Checking for updates…";
@@ -762,6 +778,12 @@ interface AdminProps {
   store?: ContentStore;
   /** The git host the site is stored on. Defaults to the config's `backend`. */
   host?: GitHost;
+  /**
+   * The address of a full-stack site's API for the admin panel, such as
+   * `/api/goodfellow`. Editors then sign in with the site's own sign-in, and its
+   * server reads and publishes for them, so they never sign in to the git host.
+   */
+  server?: string;
   preview: PreviewOptions;
   /** The live site's address, for "View" links. Defaults to `/`. */
   siteUrl?: string;
@@ -774,7 +796,7 @@ interface AdminProps {
   registry?: string;
 }
 /** The admin panel. Render it on its own page, such as `/admin`. */
-export declare function Admin({ config, store, host, preview, siteUrl, strings, registry }: AdminProps): import("react").JSX.Element;
+export declare function Admin({ config, store, host, server, preview, siteUrl, strings, registry }: AdminProps): import("react").JSX.Element;
 /** Renders the admin panel into an element. */
 export declare function mountAdmin(element: Element, props: AdminProps): void;
 //#endregion

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { 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, createPuckConfigs, cx, mediaFieldKind, preparePage, siteMetadata } from "@goodfellow-cms/react";
@@ -385,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.3.0"),
+		[GOODFELLOW_REGISTRY]: registry ?? goodfellowRegistryUrl("0.4.0"),
 		...config.registries
 	}), [registry, config.registries]);
 	const favicon = state.status === "ready" ? state.content.settings.favicon : void 0;
@@ -398,6 +398,7 @@ 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 && {
@@ -507,7 +508,8 @@ function AdminProvider({ config, store, account, preview, siteUrl, registry, onS
 		changedPaths,
 		editors,
 		ownerAccess,
-		updates
+		updates,
+		contentOnly
 	}), [
 		config,
 		pageConfig,
@@ -530,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>.");
@@ -642,75 +649,133 @@ function useStockPhotoChoice() {
 	}, [])];
 }
 //#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"
+//#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
@@ -759,6 +824,13 @@ const defaultStrings = {
 	"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…",
@@ -1006,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",
@@ -1116,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",
@@ -1227,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…",
@@ -1585,6 +1666,146 @@ function PublishedNotice({ onHide }) {
 	});
 }
 //#endregion
+//#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 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);
@@ -2796,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,
@@ -2825,7 +3052,8 @@ function ServiceSettings({ providers, settings, onChange }) {
 	}, [
 		provider,
 		apiKey,
-		baseUrl
+		baseUrl,
+		server
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "gfa-form gfa-ai-settings",
@@ -2839,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 }),
@@ -2919,12 +3151,23 @@ 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, publish, mediaPreviews } = 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;
@@ -2937,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) => {
@@ -3235,8 +3478,9 @@ 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 }
 				})]
 			})
 		]
@@ -4073,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",
@@ -5247,13 +5492,14 @@ 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")
@@ -8957,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);
@@ -9302,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: [
@@ -9313,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") })]
 			})
 		]
 	});
@@ -9331,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(),
@@ -9341,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,
@@ -9387,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);
@@ -9403,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",
@@ -9417,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")
@@ -9480,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 })
 				}) })
@@ -9586,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
@@ -9601,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 });
@@ -9608,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,
@@ -9700,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")
@@ -9740,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";
@@ -9778,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")
@@ -9825,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,
@@ -9856,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, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/admin",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
   "keywords": [
     "goodfellow",
@@ -49,10 +49,10 @@
     "codemirror": "6.0.2",
     "turndown": "7.2.4",
     "turndown-plugin-gfm": "1.0.2",
-    "@goodfellow-cms/core": "0.3.0",
-    "@goodfellow-cms/ai": "0.3.0",
-    "@goodfellow-cms/registry": "0.3.0",
-    "@goodfellow-cms/react": "0.3.0"
+    "@goodfellow-cms/ai": "0.4.0",
+    "@goodfellow-cms/react": "0.4.0",
+    "@goodfellow-cms/registry": "0.4.0",
+    "@goodfellow-cms/core": "0.4.0"
   },
   "peerDependencies": {
     "@puckeditor/core": "0.23.0",