caracms 0.3.4 → 0.5.0

package/src/editor/client/documents/dialogs.tsx

@@ -19,6 +19,7 @@
  */
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { INDEX_MESSAGE, NO_ADDRESS_MESSAGE, RESERVED_SLUG, addressProblem, slugify } from '../../../slug.ts';
+import { documentsNoun, holdsMessage } from '../../../held.ts';
 import { useEditor, useStore } from '../context.tsx';
 import type { Editor } from '../editor.ts';
 import { blockIcon } from '../block-list/summary.ts';
@@ -27,7 +28,7 @@ import { Icon } from '../shell/Icons.tsx';
 import { createStore, type Store } from '../state/store.ts';
 import type { CreateDeleteRefusal, DocRef, ListedDocument } from '../../types.ts';
 import { INSIDE_CLOSE, InsidePicker } from './InsidePicker.tsx';
-import { addressFor, andList, createDocument, deleteDocument, insideOptions, moveDocument, pagesUnder, singular } from './actions.ts';
+import { addressFor, addressesMoving, andList, createDocument, deleteDocument, insideOptions, moveDocument, pagesUnder, singular } from './actions.ts';
 import { filesLabel, inboxFor } from '../inbox/store.ts';
 import { ReplaceDialog } from '../media/ReplaceDialog.tsx';
 
@@ -43,7 +44,9 @@ export type Dialog =
 	/** M6 Decision 9: a submission's Delete…, permanent, so it asks first (the mockup's #submission-delete). */
 	| { kind: 'sub-delete'; id: string; who: string; files: number }
 	/** M6c G4 Decision 9: Replace… on a file in the library (its key). */
-	| { kind: 'replace'; key: string };
+	| { kind: 'replace'; key: string }
+	/** Arrange pages (Decision 15): leaving the screen with something arranged; `go` leaves, dropping it. */
+	| { kind: 'arrange-leave'; go: () => void };
 
 const dialogs = new WeakMap<Editor, Store<Dialog | null>>();
 
@@ -80,13 +83,21 @@ export function DocumentDialogs() {
 			return <DeleteSubmission key={dialog.id} {...dialog} />;
 		case 'replace':
 			return <ReplaceDialog key={dialog.key} fileKey={dialog.key} />;
+		case 'arrange-leave':
+			return <LeaveArrange go={dialog.go} />;
 	}
 }
 
 /** The dialog frame: the scrim, focus on its first control, Esc closing it alone, focus back where it was. */
-export function Frame(props: { alert?: boolean; label: string; describedBy?: string; children: ReactNode }) {
+/**
+ * `returnTo`: where focus goes when the dialog closes and no control opened it (the browser's
+ * Back, say, leaves it on the page body); otherwise it goes back to the control that did.
+ */
+export function Frame(props: { alert?: boolean; label: string; describedBy?: string; returnTo?: () => HTMLElement | null; children: ReactNode }) {
 	const editor = useEditor();
 	const box = useRef<HTMLDivElement>(null);
+	const returnTo = useRef(props.returnTo);
+	returnTo.current = props.returnTo;
 	useEffect(() => {
 		const before = document.activeElement as HTMLElement | null;
 		const first =
@@ -118,7 +129,8 @@ export function Frame(props: { alert?: boolean; label: string; describedBy?: str
 		window.addEventListener('keydown', onKey, true);
 		return () => {
 			window.removeEventListener('keydown', onKey, true);
-			if (before?.isConnected) before.focus({ preventScroll: true });
+			const opener = before?.isConnected && before !== document.body ? before : (returnTo.current?.() ?? null);
+			if (opener?.isConnected) opener.focus({ preventScroll: true });
 		};
 	}, [editor]);
 	return (
@@ -297,7 +309,18 @@ function NewDocument(props: { collection: string; inside?: string; at?: string }
 /**
  * A document's new address: for nested Pages the group it sits in ("Inside", New page's
  * select, with New group…) and the address's last part, shown whole as it's typed, with
- * New page's rules checked before asking the server. Pages under it stay where they are.
+ * New page's rules checked before asking the server.
+ *
+ * **Everything under it moves with it** (collections under pages, Decision 9): the pages
+ * under it at any depth, and the documents of a collection it (or a page under it) holds.
+ * Then the dialog lists every address that changes ("Its 1 page moves with it",
+ * "Its 24 journal entries move with it", the collection's own word for its documents), warns about a route of the site's own code under
+ * the old address (it doesn't move), and has one tick for the lot. A page with nothing
+ * under it keeps the single-page dialog.
+ *
+ * "Leave a redirect from …" ("Leave redirects from the old addresses" for several), ticked
+ * to start with, says whether the old addresses redirect; it shows only when there's one to
+ * leave (a live address, not one an earlier move since the last Publish already redirects).
  */
 function MoveDocument({ docRef }: { docRef: DocRef }) {
 	const editor = useEditor();
@@ -311,8 +334,9 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 	const [part, setPart] = useState(docRef.path.slice(slash + 1));
 	const [error, setError] = useState<string | null>(null);
 	const [busy, setBusy] = useState(false);
-	// Every page but this one: a page can't go under itself.
-	const options = useMemo(() => (collection?.nested ? insideOptions(collection, documents).filter((o) => o.path !== docRef.path) : []), [collection, documents, docRef.path]);
+	const [redirect, setRedirect] = useState(true);
+	// Every page but this one and the pages under it: a page can't go under itself.
+	const options = useMemo(() => (collection?.nested ? insideOptions(collection, documents).filter((o) => o.path !== docRef.path && !o.path.startsWith(`${docRef.path}/`)) : []), [collection, documents, docRef.path]);
 	if (!doc || !collection || !doc.url) return null;
 	const nested = collection.nested;
 	const newGroup = nested && inside === NEW_GROUP;
@@ -323,8 +347,10 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 	const url = addressFor(collection, path);
 	const base = addressFor(collection, folder ? `${folder}/` : '') ?? '/';
 	const same = path === docRef.path;
-	const others = documents.filter((d) => !(d.collection === docRef.collection && d.path === docRef.path));
-	// New page's rules, before asking the server (it applies the same).
+	const moving = addressesMoving(editor.site.collections, docRef, path, documents);
+	const many = moving.length > 1;
+	const others = documents.filter((d) => !moving.some((m) => m.doc === d));
+	// New page's rules, before asking the server (it applies the same, and checks every address that changes).
 	const local = (() => {
 		if (same) return null;
 		if (newGroup && !slugify(group)) return group.trim() ? NO_ADDRESS_MESSAGE : null;
@@ -334,21 +360,38 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 	})();
 	const shown = error ?? local;
 	const blocked = same || !last || (newGroup && !slugify(group)) || !!local || busy;
-	// Made since the last Publish: nobody has its address yet. Moved since then: its live address is the one it came from.
-	const pending = (waiting ?? []).find((w) => w.collection === docRef.collection && w.path === docRef.path && w.change === 'new');
+	// Made since the last Publish: nobody has its address yet. Moved since then: its live address is the one it came from,
+	// and its redirect from there is there already, following this move.
+	const pendingOf = (d: ListedDocument) => (waiting ?? []).find((w) => w.collection === d.collection && w.path === d.path && (w.change === 'new' || !!w.movedFrom));
+	const pending = pendingOf(doc);
 	const liveAddress = pending ? (pending.movedFrom ?? null) : doc.url;
-	const kids = nested ? pagesUnder(collection.name, docRef.path, documents) : [];
+	const choose = many ? moving.some((m) => !pendingOf(m.doc)) : !pending;
 	const host = editor.site.host;
 	const confirm = async () => {
 		if (blocked) return;
 		setBusy(true);
 		setError(null);
-		const answer = await moveDocument(editor, docRef, path, doc.label);
+		const answer = await moveDocument(editor, docRef, path, doc.label, !choose || redirect);
 		setBusy(false);
 		if (answer.ok) closeDialog(editor);
 		else setError(answer.error);
 	};
-	const intro = liveAddress ? `${liveAddress} will redirect here.${editor.mode === 'live' ? ' Goes live at the next Publish.' : ''}` : null;
+	const publish = editor.mode === 'live' ? ' Goes live at the next Publish.' : '';
+	const intro = !many && liveAddress && !choose ? `${liveAddress} will redirect here.${publish}` : null;
+	// What moves with it: the pages under it, then each held collection's documents.
+	const under = moving.filter((m) => !m.held && m.doc !== doc);
+	const heldBy = new Map<string, number>();
+	for (const m of moving) if (m.held) heldBy.set(m.doc.collection, (heldBy.get(m.doc.collection) ?? 0) + 1);
+	const labelOf = (name: string) => editor.site.collections.find((c) => c.name === name)?.label ?? name;
+	// "Its 1 page moves with it." "Its 24 journal entries move with it." "Its 2 pages and 24 journal entries move with it."
+	const heldParts = [...heldBy].map(([name, n]) => `${n} ${n === 1 ? singular({ kind: 'sections', nested: false, label: labelOf(name) }) : documentsNoun(labelOf(name))}`);
+	const parts = [...(under.length ? [`${under.length} page${under.length === 1 ? '' : 's'}`] : []), ...heldParts];
+	if (parts.length) parts[0] = `Its ${parts[0]}`;
+	const one = moving.length === 2 && parts.length === 1;
+	const withIt = `${andList(parts)} move${one ? 's' : ''} with it.`;
+	// A route of the site's own code under the old address stays where it is (Decision 10).
+	const oldBase = `${doc.url.replace(/\/+$/, '')}/`;
+	const routes = many ? (editor.site.codeRoutes ?? []).filter((r) => r.url.toLowerCase().startsWith(oldBase.toLowerCase())) : [];
 	return (
 		<Frame label="move">
 			<form
@@ -408,10 +451,49 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 						</p>
 					)}
 				</div>
-				{kids.length ? (
-					<p className="field-help" data-kids={kids.length}>
-						{andList(kids.map((k) => k.label))} stay{kids.length === 1 ? 's' : ''} where {kids.length === 1 ? 'it is' : 'they are'}, at {doc.url}/…
-					</p>
+				{many ? (
+					<div className="field" data-moving={moving.length}>
+						<p className="field-help">
+							{withIt} {same ? 'The addresses now:' : 'The new addresses:'}
+						</p>
+						<ul className="mv-list" aria-label="Every address that changes" tabIndex={0}>
+							{moving.map((m) => (
+								<li key={`${m.doc.collection}/${m.doc.path}`} className="mono" data-to={m.toUrl ?? ''}>
+									{same ? m.doc.url : (m.toUrl ?? '…')}
+								</li>
+							))}
+						</ul>
+						{routes.length ? (
+							<p className="field-help" data-routes={routes.length}>
+								<Icon name="warn" size="xs" /> {andList(routes.map((r) => r.file))} {routes.length === 1 ? 'is' : 'are'} the site’s own code under {doc.url}, so {routes.length === 1 ? 'it stays' : 'they stay'} where {routes.length === 1 ? 'it is' : 'they are'}.
+							</p>
+						) : null}
+					</div>
+				) : null}
+				{choose ? (
+					<div className="field">
+						<label className="check">
+							<input type="checkbox" id="mv-redirect" checked={redirect} aria-describedby="mv-redirect-h" onChange={(e) => setRedirect(e.target.checked)} />
+							<span>
+								{many ? (
+									'Leave redirects from the old addresses'
+								) : (
+									<>
+										Leave a redirect from <span className="mono">{doc.url}</span>
+									</>
+								)}
+							</span>
+						</label>
+						<p className="field-help" id="mv-redirect-h">
+							{many
+								? redirect
+									? `Anyone with an old address lands on the new one.${publish}`
+									: 'Nothing will be at the old addresses: links to them from elsewhere will find no page.'
+								: redirect
+									? `Anyone with the old address lands here.${publish}`
+									: `Nothing will be at ${doc.url}: links to it from elsewhere will find no page.`}
+						</p>
+					</div>
 				) : null}
 				<div className="acts">
 					<button type="button" className="btn" onClick={() => closeDialog(editor)}>
@@ -569,6 +651,24 @@ function DeleteDocument({ docRef }: { docRef: DocRef }) {
 	const doc = documents.find((d) => d.collection === docRef.collection && d.path === docRef.path);
 	const collection = editor.site.collections.find((c) => c.name === docRef.collection);
 	if (!doc || !collection) return null;
+	// Collections under pages (Decision 12): a page that holds a collection isn't deleted, and says so instead of asking.
+	const held = doc.holds ? editor.site.collections.find((c) => c.name === doc.holds && c.heldBy === collection.name) : undefined;
+	if (held) {
+		return (
+			<Frame alert label="holds" describedBy="dlg-d">
+				<div className="icon-h" style={{ background: 'var(--status-warning-wash)', color: 'var(--status-warning)' }}>
+					<Icon name="warn" />
+				</div>
+				<h2 id="dlg-h">{doc.label} can’t be deleted</h2>
+				<p id="dlg-d">{holdsMessage(doc.label, held.label)}</p>
+				<div className="acts">
+					<button type="button" className="btn ink" data-act="holds-ok" onClick={() => closeDialog(editor)}>
+						OK
+					</button>
+				</div>
+			</Frame>
+		);
+	}
 	const shared = collection.kind === 'shared';
 	const kids = collection.nested ? pagesUnder(collection.name, doc.path, documents) : [];
 	const host = editor.site.host;
@@ -680,6 +780,25 @@ function DeleteSubmission({ id, who, files }: { id: string; who: string; files:
 }
 
 /** A shared block that pages still use can't be deleted (Decision 8): where it's used, each a way there. */
+/** Arrange pages (Decision 15; the mockup's #leave): what's arranged isn't saved anywhere, so leaving asks first. */
+function LeaveArrange({ go }: { go: () => void }) {
+	const editor = useEditor();
+	return (
+		<Frame label="arrange-leave" returnTo={() => document.querySelector<HTMLElement>('[data-pane-level="arrange"] [data-act="cancel"]')}>
+			<h2 id="dlg-h">Leave without applying?</h2>
+			<p>What you’ve arranged isn’t saved anywhere: leave now and it’s gone. Nothing on the site has changed.</p>
+			<div className="acts">
+				<button type="button" className="btn" data-act="leave-stay" onClick={() => closeDialog(editor)}>
+					Keep arranging
+				</button>
+				<button type="button" className="btn ink" data-act="leave-go" onClick={go}>
+					Leave without applying
+				</button>
+			</div>
+		</Frame>
+	);
+}
+
 function InUse({ docRef, usedOn }: { docRef: DocRef; usedOn?: CreateDeleteRefusal['usedOn'] }) {
 	const editor = useEditor();
 	const documents = useStore(editor.documents);

package/src/editor/client/editor.ts

@@ -30,7 +30,8 @@
  *   editor.editHere() / useMine() / discardMine() / publish() / tryAgain() /
  *   dismissNotice(id) / signOut() / signInAgain()
  */
-import { addressOf, inboxAddress, inboxFromAddress, refFromAddress } from '../addresses.ts';
+import { ARRANGE_ADDRESS, addressOf, inboxAddress, inboxFromAddress, isArrangeAddress, refFromAddress } from '../addresses.ts';
+import { heldBases } from '../../held.ts';
 import {
 	docId,
 	ENDPOINTS,
@@ -63,7 +64,7 @@ import { createKeeper, type HeldView, type Keeper, type KeepStatus } from './sta
 import { createLiveSession, tabId, type LiveSession, type LiveState } from './state/live.ts';
 import { createStore, type Store } from './state/store.ts';
 
-export type PaneLevel = 'documents' | 'collection' | 'document' | 'block' | 'media' | 'submissions';
+export type PaneLevel = 'documents' | 'collection' | 'document' | 'block' | 'media' | 'submissions' | 'arrange';
 
 /**
  * M5b: Choose… (or Replace…, or a list's Add image) opened the library as a picker for
@@ -247,6 +248,18 @@ export interface Editor {
 	 * coming from elsewhere, replaced within the inbox.
 	 */
 	openInbox(id?: string | null, options?: { history?: 'push' | 'replace' | 'none' }): void;
+	/**
+	 * Arrange pages (Decisions 2, 15, 16): the arrange screen in the preview's place, its level
+	 * in the pane, at `/admin/arrange` (pushed when coming from elsewhere). It starts from the
+	 * listing as it is each time (client/arrange/store.ts).
+	 */
+	openArrange(options?: { history?: 'push' | 'replace' | 'none' }): void;
+	/**
+	 * Arrange pages (Decision 15): the screen's say when the tab would leave it, set by
+	 * client/arrange/store.ts. `ask(go)` returns true when it took over (anything arranged:
+	 * it asks first, then calls `go`); `up()` is Esc there. Null until the screen is first shown.
+	 */
+	arrangeGuard: { ask(go: () => void): boolean; up(): void } | null;
 
 	openDocument(ref: DocRef, options?: { history?: 'push' | 'replace' | 'none' }): Promise<void>;
 	openBlock(key: string, field?: string | null, options?: { picked?: boolean }): void;
@@ -298,6 +311,24 @@ export interface Editor {
 	timeZone(): string;
 }
 
+/**
+ * Collections under pages (Decision 7): each held collection's base, worked out again from a
+ * fresh listing (held.ts), so a holder that moved takes its collection's addresses with it in
+ * every dialog and table without a reload. The payload's own objects are updated in place.
+ */
+export function followHolders(site: Pick<EditorSite, 'collections' | 'allCollections'>, listed: readonly ListedDocument[]): void {
+	if (!site.collections.some((c) => c.heldBy)) return;
+	const bases = heldBases(Object.fromEntries(site.collections.map((c) => [c.name, c])), listed);
+	for (const b of Object.values(bases)) {
+		for (const c of [...site.collections, ...(site.allCollections ?? [])]) {
+			if (c.name !== b.collection) continue;
+			c.urlBase = b.base;
+			c.holder = b.holder ? { collection: b.holder.collection, path: b.holder.path } : null;
+			c.problem = b.problem;
+		}
+	}
+}
+
 export function createEditor(props: AdminProps, options: { client: boolean }): Editor {
 	const { site } = props;
 	const opened = props.opened;
@@ -325,6 +356,8 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 	const submissions = createStore<SubmissionsSetup>(props.submissions ?? { unread: 0 });
 	// M6: /admin/submissions[/<id>] opens on the inbox, with Home under it.
 	if (props.inbox) view.update({ level: 'submissions', inbox: { id: props.inbox.id } });
+	// Arrange pages: /admin/arrange opens on the screen, with Home under it.
+	if (props.arrange) view.update({ level: 'arrange' });
 
 	// Live mode (M4): the poll and the server calls; a tab id that lasts the tab's life.
 	const tab = liveProps ? (options.client ? tabId() : 'server') : null;
@@ -570,7 +603,8 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 
 	function setTitle() {
 		if (typeof document === 'undefined') return;
-		const what = view.get().level === 'submissions' ? 'Submissions' : doc.get().document.title || doc.get().entry.label;
+		const level = view.get().level;
+		const what = level === 'submissions' ? 'Submissions' : level === 'arrange' ? 'Arrange pages' : doc.get().document.title || doc.get().entry.label;
 		document.title = `${what} · ${brand.get().name}`;
 	}
 
@@ -599,7 +633,20 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 		submissions,
 		inboxFirst: props.inboxFirst ?? null,
 
+		arrangeGuard: null,
+
+		openArrange({ history = 'push' } = {}) {
+			view.update({ level: 'arrange', inbox: null, media: null, collection: null, block: null, field: null, picked: false, pop: null });
+			if (history !== 'none' && typeof window !== 'undefined' && location.pathname !== ARRANGE_ADDRESS) {
+				if (history === 'push') window.history.pushState({ caracms: 'arrange' }, '', ARRANGE_ADDRESS);
+				else window.history.replaceState({ caracms: 'arrange' }, '', ARRANGE_ADDRESS);
+			}
+			setTitle();
+		},
+
 		openInbox(id = null, { history } = {}) {
+			// Leaving the arrange screen with something arranged asks first (Decision 15).
+			if (editor.arrangeGuard?.ask(() => editor.openInbox(id, { history }))) return;
 			const before = view.get();
 			const within = before.level === 'submissions';
 			view.update({ level: 'submissions', inbox: { id }, block: null, field: null, picked: false, pop: null, media: null });
@@ -623,6 +670,7 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 		},
 
 		async openDocument(ref, { history = 'push' } = {}) {
+			if (editor.arrangeGuard?.ask(() => void editor.openDocument(ref, { history }))) return;
 			const current = doc.get().ref;
 			if (sameDoc(ref, current) && !view.get().opening) {
 				view.update({ level: 'document', block: null, field: null, picked: false, pop: null, inbox: null });
@@ -688,6 +736,11 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 
 		goUp() {
 			const { level, media, inbox } = view.get();
+			// Arrange pages: the review → arranging; arranging → leave (asking first when anything is arranged).
+			if (level === 'arrange') {
+				editor.arrangeGuard?.up();
+				return true;
+			}
 			const { kind } = doc.get().document;
 			// M6: the inbox: an open submission → the list; the list → documents.
 			if (level === 'submissions') {
@@ -743,7 +796,9 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 		async refreshDocuments() {
 			const response = await fetch(ENDPOINTS.documents, { headers: { Accept: 'application/json' } });
 			if (!response.ok) return;
-			documents.set((await response.json()) as ListedDocument[]);
+			const listed = (await response.json()) as ListedDocument[];
+			followHolders(site, listed);
+			documents.set(listed);
 			// M6 Decision 9: the unread count rides along (absent when it couldn't be read).
 			const unread = response.headers.get(UNREAD_HEADER);
 			if (unread !== null && /^\d+$/.test(unread)) submissions.set({ unread: Number(unread) });
@@ -961,7 +1016,10 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 					});
 			};
 			const waitingKey = (st: LiveState) => (st.status?.waiting ?? []).map((w) => `${w.file}:${w.change}`).sort().join('\n');
-			if (liveSession) stops.push(liveState.subscribe((next, previous) => next.status && previous.status && waitingKey(next) !== waitingKey(previous) && refresh()));
+			// Arrange pages (Decision 18): an order-only Apply elsewhere changes no waiting key when Site Settings was
+			// already waiting, so the saved order's stamp is watched too.
+			const orderKey = (st: LiveState) => st.status?.pageOrderStamp ?? '';
+			if (liveSession) stops.push(liveState.subscribe((next, previous) => next.status && previous.status && (waitingKey(next) !== waitingKey(previous) || orderKey(next) !== orderKey(previous)) && refresh()));
 			stops.push(keep.subscribe((next, previous) => next.state === 'kept' && previous.state !== 'kept' && refresh()));
 
 			// The cookie follows the sidebar's per-browser state (Decision 20).
@@ -970,9 +1028,23 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 
 			// Addresses (Decision 19): the address names the open document; back and forward open theirs.
 			// M6: the inbox's own address (`/admin/submissions[/<id>]`) stays as it is.
-			const canonical = view.get().level === 'submissions' ? inboxAddress(view.get().inbox?.id ?? null) : addressOf(doc.get().ref, site.home);
+			const canonical = view.get().level === 'submissions' ? inboxAddress(view.get().inbox?.id ?? null) : view.get().level === 'arrange' ? ARRANGE_ADDRESS : addressOf(doc.get().ref, site.home);
 			if (location.pathname !== canonical) history.replaceState({ caracms: id }, '', canonical + location.search);
 			const onPopState = () => {
+				if (isArrangeAddress(location.pathname)) {
+					editor.openArrange({ history: 'none' });
+					return;
+				}
+				// Back from the arrange screen with something arranged: it stays, and asks first (Decision 15).
+				if (view.get().level === 'arrange' && editor.arrangeGuard) {
+					// The screen's entry is put back while it asks; leaving steps back off it again, so the
+					// history is as a plain Back leaves it (the arrangement is gone by then, so it doesn't ask twice).
+					const asked = editor.arrangeGuard.ask(() => history.back());
+					if (asked) {
+						history.pushState({ caracms: 'arrange' }, '', ARRANGE_ADDRESS);
+						return;
+					}
+				}
 				const inbox = inboxFromAddress(location.pathname);
 				if (inbox && inbox !== 'bad') {
 					editor.openInbox(inbox.id, { history: 'none' });

package/src/editor/client/fields/HiddenToggle.tsx

@@ -7,11 +7,16 @@
  *   which can't be hidden.
  * - A page under a hidden page is hidden with it (content.ts → `hiddenBy`): the switch shows
  *   on and can't be turned off here, and its help names the page to show again.
+ * - Collections under pages (Decision 5): a page that holds a collection says so beside it,
+ *   "Holds Journal (24)" (every document, hidden ones included). Nothing here changes it:
+ *   the `holds` line is the file's, a developer's call.
  */
 import { useMemo } from 'react';
 import { useEditor, useStore } from '../context.tsx';
 import { FieldFrame } from './FieldFrame.tsx';
 import { FieldHostProvider, type FieldHost } from './host.tsx';
+import { docIcon } from '../nav/DocRow.tsx';
+import { Icon } from '../shell/Icons.tsx';
 
 const SCOPE = 'page-hidden';
 const NAME = 'hidden';
@@ -30,11 +35,14 @@ export function HiddenToggle() {
 	const collection = editor.site.collections.find((c) => c.name === ref.collection);
 	if (kind !== 'sections' || !collection?.urlBase || ref.path === 'index') return null;
 	const listed = documents.find((d) => d.collection === ref.collection && d.path === ref.path);
-	const by = listed?.hiddenBy ? documents.find((d) => d.collection === ref.collection && d.path === listed.hiddenBy) : undefined;
+	// Collections under pages (Decision 11): a held document is hidden with the page that holds its collection.
+	const byCollection = listed?.hiddenByCollection ?? ref.collection;
+	const by = listed?.hiddenBy ? documents.find((d) => d.collection === byCollection && d.path === listed.hiddenBy) : undefined;
 	const on = hidden || !!by;
+	const holds = listed?.holds ? editor.site.collections.find((c) => c.name === listed.holds && c.heldBy === ref.collection) : undefined;
 	const id = `f-${SCOPE}-${NAME}`;
 	const help = by
-		? `Hidden with ${by.label}, the page it's under. Show that page again to show this one.`
+		? `Hidden with ${by.label}, the page ${listed?.hiddenByCollection ? `that holds ${collection.label}` : "it's under"}. Show that page again to show this one.`
 		: 'Visitors get the 404 page, and it’s left out of the sitemap and the link picker. You can still edit, preview and publish it.';
 	return (
 		<div className="page-hidden" data-page-hidden={on ? 'on' : 'off'}>
@@ -46,6 +54,14 @@ export function HiddenToggle() {
 					</button>
 				</FieldFrame>
 			</FieldHostProvider>
+			{holds ? (
+				<p className="page-holds" data-holds={holds.name}>
+					<Icon name={docIcon(holds)} size="xs" />
+					<span>
+						Holds {holds.label} ({documents.filter((d) => d.collection === holds.name).length})
+					</span>
+				</p>
+			) : null}
 		</div>
 	);
 }

package/src/editor/client/nav/DocRow.tsx

@@ -26,6 +26,13 @@ export function docIcon(collection: { nested: boolean; kind?: string } | undefin
 	return 'journal';
 }
 
+/** A hidden document's mark's words: "Journal is hidden" for one hidden with the page that holds its collection (or the page it's under). */
+export function hiddenTitle(doc: ListedDocument, documents: readonly ListedDocument[]): string {
+	if (!doc.hiddenBy) return 'Hidden from the site';
+	const by = documents.find((d) => d.collection === (doc.hiddenByCollection ?? doc.collection) && d.path === doc.hiddenBy);
+	return by ? `${by.label} is hidden` : 'Hidden with the page it’s under';
+}
+
 export function DocRow(props: {
 	doc: ListedDocument;
 	crumb?: string;
@@ -84,7 +91,7 @@ export function DocRow(props: {
 					) : null}
 					{/* M9 Decision 7: hidden from the site (or under a hidden page). */}
 					{doc.hidden ? (
-						<span className="hmark" data-mark="hidden" title={doc.hiddenBy ? 'Hidden from the site with the page it’s under' : 'Hidden from the site'}>
+						<span className="hmark" data-mark="hidden" title={hiddenTitle(doc, editor.documents.get())}>
 							Hidden
 						</span>
 					) : null}

package/src/editor/client/nav/tree.ts

@@ -29,6 +29,22 @@ export type TreeRow =
 			/** Documents under it (any depth), for a bubbled mark when it's closed. */
 			under: ListedDocument[];
 	  }
+	| {
+			/**
+			 * Collections under pages (Decision 4): a collection the page above holds, as one row
+			 * (its name and count, opening its table), the first row under its holder whenever the
+			 * holder's row shows. Its documents never go in the tree.
+			 */
+			kind: 'held';
+			/** The holder's path (the row's position). */
+			path: string;
+			depth: number;
+			collection: string;
+			label: string;
+			/** Every document in it, hidden ones included (as its sidebar entry counts them). */
+			count: number;
+			files: string[];
+	  }
 	| {
 			/** A folder with no page of its own: shows or hides its children only. */
 			kind: 'group';
@@ -46,7 +62,13 @@ export type TreeRow =
  * closed group (at any depth) isn't returned. `documents` must be one collection's,
  * in the reader's order.
  */
-export function treeRows(collection: string, documents: readonly ListedDocument[], open: UiState['open']): TreeRow[] {
+export function treeRows(
+	collection: string,
+	documents: readonly ListedDocument[],
+	open: UiState['open'],
+	/** The collections pages of this one hold, each with its holder's path and its documents' files. */
+	held: readonly { collection: string; label: string; holder: string; files: string[] }[] = [],
+): TreeRow[] {
 	const paths = new Set(documents.map((d) => d.path));
 	const isOpen = (path: string) => open[groupKey(collection, path)] === true;
 	const under = (path: string) => documents.filter((d) => d.path.startsWith(`${path}/`));
@@ -88,6 +110,9 @@ export function treeRows(collection: string, documents: readonly ListedDocument[
 			key: groupKey(collection, doc.path),
 			under: kids,
 		});
+		for (const h of held) {
+			if (h.holder === doc.path) rows.push({ kind: 'held', path: doc.path, depth: segments.length, collection: h.collection, label: h.label, count: h.files.length, files: h.files });
+		}
 	}
 	return rows;
 }

package/src/editor/client/pane/Pane.tsx

@@ -17,6 +17,7 @@ import { DocumentLevel } from './levels/DocumentLevel.tsx';
 import { DocumentsLevel } from './levels/DocumentsLevel.tsx';
 import { MediaLevel } from './levels/MediaLevel.tsx';
 import { SubmissionsLevel } from './levels/SubmissionsLevel.tsx';
+import { ArrangeLevel } from './levels/ArrangeLevel.tsx';
 
 export const LEVELS: Record<PaneLevel, ComponentType> = {
 	documents: DocumentsLevel,
@@ -27,6 +28,8 @@ export const LEVELS: Record<PaneLevel, ComponentType> = {
 	media: MediaLevel,
 	// M6: the inbox (Site-wide → Submissions).
 	submissions: SubmissionsLevel,
+	// Arrange pages: the screen's controls, then its review (Decision 16).
+	arrange: ArrangeLevel,
 };
 
 /**