caracms 0.4.0 → 0.5.0

package/src/editor/client/pane/levels/ArrangeLevel.tsx

@@ -0,0 +1,342 @@
+/**
+ * Arrange pages (notes/2026-10-25-arrange-pages.md, Decision 16; the mockup's
+ * notes/mockups/arrange-pages.html): the pane while the arrange screen has the stage.
+ * Arranging, it lists what's been arranged so far and has Cancel and Review…, off with its
+ * reason while a new group is empty or a name is half typed (Decision 9). After Review…,
+ * the review: every old → new address, a holder's documents as one count line with a
+ * disclosure, the "goes: no pages left" line, the one tick (Decision 3), or the order-only
+ * panel (Decision 21); then Back and Apply. A refused Apply shows here, named.
+ */
+import { useEditor, useStore } from '../../context.tsx';
+import { arrangeFor, type ArrangeNote } from '../../arrange/store.ts';
+import { plural, whereOrder, type Entry, type Plan } from '../../arrange/model.ts';
+import { Avatar } from '../../live/marks.tsx';
+import { Icon } from '../../shell/Icons.tsx';
+import { LevelTab, Trail } from '../parts.tsx';
+
+/** Text and bold parts in turn (model.ts → Change), as spans and <b>s. */
+function Words({ parts }: { parts: string[] }) {
+	return <>{parts.map((p, i) => (i % 2 ? <b key={i}>{p}</b> : p))}</>;
+}
+
+export function ArrangeLevel() {
+	const editor = useEditor();
+	const arrange = arrangeFor(editor);
+	const s = useStore(arrange.state);
+	const brand = useStore(editor.brand, (b) => b.name);
+	const count = useStore(editor.documents, (d) => d.length);
+	const plan = arrange.plan();
+	const reviewing = s.mode !== 'arrange';
+	const busy = s.mode === 'applying';
+	const sub = plan.orderOnly ? 'The order only' : `${plan.lead} ${plan.verb} address`;
+	return (
+		<>
+			<Trail>
+				<LevelTab name={brand} count={String(count)} onClick={() => arrange.leave()} />
+				{reviewing ? <LevelTab name="Arrange pages" onClick={() => arrange.back()} /> : null}
+				<div className="cur">
+					<div className="cur-row">
+						{reviewing ? (
+							<button type="button" className="ib" aria-label="Back to arranging" disabled={busy} onClick={() => arrange.back()}>
+								<Icon name="chev-l" />
+							</button>
+						) : (
+							<button type="button" className="ib" aria-label="Back to documents" onClick={() => arrange.leave()}>
+								<Icon name="chev-l" />
+							</button>
+						)}
+						<div className="cur-title">
+							<span className="t">
+								<span>{reviewing ? 'Review' : 'Arrange pages'}</span>
+							</span>
+							<span className="sub">{reviewing ? sub : 'Nothing changes until you apply'}</span>
+						</div>
+					</div>
+				</div>
+			</Trail>
+			{reviewing ? <Review plan={plan} /> : <Arranging plan={plan} />}
+		</>
+	);
+}
+
+function Arranging({ plan }: { plan: Plan }) {
+	const editor = useEditor();
+	const arrange = arrangeFor(editor);
+	useStore(arrange.state);
+	const why = arrange.blocked();
+	const items = plan.changes;
+	return (
+		<>
+			<div className="side-body" data-arrange="changes">
+				<h3 className="sec-h">
+					Changes{items.length ? <> <span className="n">{items.length}</span></> : null}
+				</h3>
+				{items.length ? (
+					<ul className="chg">
+						{items.map((it, i) => (
+							<li key={i} className={it.muted ? 'is-muted' : undefined}>
+								<Icon name={it.icon} />
+								<span>
+									<Words parts={it.parts} />
+								</span>
+							</li>
+						))}
+					</ul>
+				) : (
+					<p className="arr-none">None yet. Drag a row on the right to start.</p>
+				)}
+				<p className="fixed-line">
+					<Icon name="clock" />
+					<span>Kept only in this tab until you apply. Leaving or reloading the page drops it.</span>
+				</p>
+			</div>
+			<div className="arr-foot">
+				{why ? (
+					<p className="why" id="rv-why">
+						<Icon name="warn" />
+						<span>
+							<Words parts={why} />
+						</span>
+					</p>
+				) : null}
+				<div className="acts">
+					<button type="button" className="btn" data-act="cancel" onClick={() => arrange.leave()}>
+						Cancel
+					</button>
+					<button type="button" className="btn ink" data-act="review" disabled={!!why} aria-describedby={why ? 'rv-why' : undefined} onClick={() => arrange.review()}>
+						Review…
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+function Note({ note }: { note: ArrangeNote }) {
+	if (note.kind === 'lock') {
+		return (
+			<div className="note lock" role="alert" data-note="arrange-lock">
+				{note.person ? <Avatar person={note.person} size="sm" /> : <Icon name="lock" />}
+				<div>
+					<b>{note.error}</b>
+					<p>So nothing was applied. It frees up when they close it, or a few minutes after they stop typing. Then apply again.</p>
+				</div>
+			</div>
+		);
+	}
+	if (note.kind === 'underneath') {
+		return (
+			<div className="note warn" role="alert" data-note="arrange-underneath">
+				<Icon name="warn" />
+				<div>
+					<b>Something changed since you opened this</b>
+					{[...note.lines, ...note.clashes].map((line, i) => (
+						<p key={i}>{line}</p>
+					))}
+					<p>{note.clashes.length ? 'Nothing was applied. Go back and arrange it again.' : 'Nothing was applied. The list below is worked out again on the site as it is now: check it, then apply.'}</p>
+				</div>
+			</div>
+		);
+	}
+	if (note.kind === 'refused') {
+		return (
+			<div className="note warn" role="alert" data-note="arrange-refused">
+				<Icon name="warn" />
+				<div>
+					<b>Nothing was applied</b>
+					<p>{note.error}</p>
+				</div>
+			</div>
+		);
+	}
+	return (
+		<div className="note danger" role="alert" data-note="arrange-failed">
+			<Icon name="warn" />
+			<div>
+				<b>Couldn’t apply this</b>
+				<p>{note.error} Nothing on the site changed, and your arrangement is still here. Try again.</p>
+			</div>
+		</div>
+	);
+}
+
+function Review({ plan }: { plan: Plan }) {
+	const editor = useEditor();
+	const arrange = arrangeFor(editor);
+	const s = useStore(arrange.state);
+	const busy = s.mode === 'applying';
+	const where = whereOrder(plan);
+	const clashed = s.note?.kind === 'underneath' && s.note.clashes.length > 0;
+	const publish = editor.mode === 'live' ? ' Goes live at the next Publish.' : '';
+	return (
+		<>
+			<div className="side-body" data-arrange="review">
+				{s.note ? <Note note={s.note} /> : null}
+				{plan.orderOnly ? (
+					<div className="panel" data-review="order-only">
+						<h3>No address changes; the order of the Pages tree changes</h3>
+						<p>
+							{where ? `${where[0]!.toUpperCase()}${where.slice(1)}. ` : ''}Only the editor’s Pages tree reads this order: the site’s menus stay as they are in Site Settings.
+						</p>
+					</div>
+				) : (
+					<>
+						<p className="rv-lead">
+							{plan.lead} {plan.verb} address
+							<small>
+								Each page takes what’s under it.{plan.reorders.length ? ` The order changes ${where} too.` : ''}
+							</small>
+						</p>
+						<h3 className="sec-h">Old → new address</h3>
+						<ul className="rv">
+							{plan.entries.map((e, i) => (
+								<ReviewEntry key={`${e.t}:${e.id}:${i}`} entry={e} />
+							))}
+						</ul>
+						<p className="fixed-line">
+							<Icon name="shared" />
+							<span>Links to these pages from the site’s own pages change to the new addresses.</span>
+						</p>
+						{plan.live ? (
+							<div className="rv-tick">
+								<label className="check">
+									<input type="checkbox" id="rv-tick" checked={s.tick} disabled={busy} aria-describedby="rv-tick-h" onChange={(e) => arrange.setTick(e.target.checked)} />
+									<span>Leave redirects from the old addresses</span>
+								</label>
+								<p className="field-help" id="rv-tick-h">
+									{s.tick ? `Anyone with an old address lands on its page’s new one.${publish}` : 'Nothing will be at the old addresses: links to them from elsewhere will find no page.'}
+								</p>
+							</div>
+						) : null}
+					</>
+				)}
+			</div>
+			<div className="arr-foot">
+				{busy ? (
+					<>
+						<div className="progress" aria-hidden="true" />
+						<p className="busy" role="status">
+							Applying: {plan.orderOnly ? 'saving the order' : `moving ${plan.lead}`}…
+						</p>
+					</>
+				) : null}
+				<div className="acts">
+					<button type="button" className="btn" data-act="back" disabled={busy} onClick={() => arrange.back()}>
+						Back
+					</button>
+					<button type="button" className="btn ink" data-act="apply" disabled={busy || clashed} onClick={() => void arrange.apply()}>
+						{busy ? 'Applying…' : 'Apply'}
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+function Move({ from, to }: { from: string; to: string }) {
+	return (
+		<div className="mv">
+			<span className="fr">{from}</span>
+			<span aria-hidden="true">→</span>
+			<span className="sr">becomes</span>
+			<span className="to">{to}</span>
+		</div>
+	);
+}
+
+function ReviewEntry({ entry: e }: { entry: Entry }) {
+	const editor = useEditor();
+	const arrange = arrangeFor(editor);
+	const s = useStore(arrange.state);
+	const style = { ['--in' as string]: e.ind };
+	const linked = (id: string) => ({ onMouseEnter: () => arrange.setLinked(id), onMouseLeave: () => arrange.setLinked(null) });
+	if (e.t === 'newgroup') {
+		return (
+			<li className="rv-e is-grp" style={style} data-link={e.id} {...linked(e.id)}>
+				<Icon name="folder" />
+				<div className="t">
+					<span>{e.label}</span>
+					<span className="chip select">New group</span>
+				</div>
+			</li>
+		);
+	}
+	if (e.t === 'rename' || e.t === 'groupmove') {
+		return (
+			<li className="rv-e is-grp" style={style} data-link={e.id} {...linked(e.id)}>
+				<Icon name="folder" />
+				<div className="t">
+					<span>{e.t === 'rename' ? `${e.from} is renamed ${e.to}` : `${e.label} moves ${e.dest ? `into ${e.dest}` : 'to the top level'}`}</span>
+				</div>
+				<Move from={e.fromA} to={e.toA} />
+			</li>
+		);
+	}
+	if (e.t === 'gone') {
+		return (
+			<li className="rv-e is-gone" style={style} data-link={e.id} data-review="gone" {...linked(e.id)}>
+				<Icon name="folder" />
+				<div className="t">
+					<span>{e.label} goes: no pages left in it</span>
+				</div>
+			</li>
+		);
+	}
+	if (e.t === 'joined') {
+		return (
+			<li className="rv-e is-grp" style={style} data-link={e.id} data-review="joined" {...linked(e.id)}>
+				<Icon name="folder" />
+				<div className="t">
+					<span>{e.how === 'drop' ? `${e.into} becomes ${e.label}’s own page` : `${e.label} joins ${e.into}: its pages go under it`}</span>
+				</div>
+			</li>
+		);
+	}
+	if (e.t === 'held') {
+		const open = s.openHeld.includes(e.id);
+		const added = e.held.docs.filter((d) => s.addedDocs.includes(d.path)).length;
+		return (
+			<li className="rv-e is-held" style={style} data-link={`held:${e.id}`} data-review="held" {...linked(`held:${e.id}`)}>
+				<Icon name={e.held.icon} />
+				<div className="t">
+					<span>and its {plural(e.held.docs.length, e.held.one, e.held.many)}</span>
+					{added ? <span className="chip warn">{added} added since</span> : null}
+					<button type="button" className="linkbtn subtle rv-more" aria-expanded={open} onClick={() => arrange.toggleHeld(e.id)}>
+						{open ? 'Hide' : 'Show each'} <Icon name="chev-r" size="xs" />
+					</button>
+				</div>
+				<Move from={e.from} to={e.to} />
+				{open ? (
+					<ol className="rv-docs" aria-label={`Each of ${e.holder}’s ${e.held.many}, at its new address`}>
+						{/* Added since you opened this, first (Decision 10). */}
+						{[...e.held.docs.filter((d) => s.addedDocs.includes(d.path)), ...e.held.docs.filter((d) => !s.addedDocs.includes(d.path))].map((d) => (
+							<li key={d.path} className={s.addedDocs.includes(d.path) ? 'is-new' : undefined} title={s.addedDocs.includes(d.path) ? 'Added since you opened this' : undefined}>
+								{e.base}/{d.path}
+							</li>
+						))}
+					</ol>
+				) : null}
+			</li>
+		);
+	}
+	if (e.t !== 'move' && e.t !== 'carried') return null;
+	return (
+		<li className={`rv-e${e.t === 'carried' ? ' is-carried' : ''}`} style={style} data-link={e.id} data-review={e.t} {...linked(e.id)}>
+			<Icon name="page" />
+			<div className="t">
+				<span>{e.label}</span>
+				{e.vis === 'hidden' ? (
+					<span className="chip warn" title="The page it goes under is hidden, so the public site stops showing it">
+						Will be hidden
+					</span>
+				) : e.vis === 'shown' ? (
+					<span className="chip live" title="It leaves the hidden page it was under, so the public site shows it">
+						Will be shown
+					</span>
+				) : null}
+				{s.added.includes(e.id) ? <span className="chip warn">Added since you opened this</span> : null}
+			</div>
+			<Move from={e.from} to={e.to} />
+		</li>
+	);
+}

package/src/editor/client/pane/levels/DocumentsLevel.tsx

@@ -35,6 +35,7 @@ import { openDialog } from '../../documents/dialogs.tsx';
 import { Bubble } from '../../live/marks.tsx';
 import { searchDocuments } from '../../nav/search.ts';
 import { treeRows, type TreeRow } from '../../nav/tree.ts';
+import { arrangeSite } from '../../arrange/store.ts';
 import type { EditorCollection, ListedDocument } from '../../../types.ts';
 import { CurrentHead, GlobalNotes, RecentStrip, Trail } from '../parts.tsx';
 
@@ -144,6 +145,15 @@ function PagesSection({ collection, documents, all }: { collection: EditorCollec
 			<div className="grp-h">
 				{collection.label} <span className="n">{documents.length}</span>
 				<span className="sp" />
+				{/* Arrange pages (Decision 2): the deliberate place to order, nest and group; nothing drags in the sidebar. */}
+				{collection.name === arrangeSite(editor).collection ? (
+					<>
+						<button type="button" className="linkbtn subtle" data-act="open-arrange" onClick={() => editor.openArrange()}>
+							Arrange pages…
+						</button>
+						<span style={{ width: 6 }} />
+					</>
+				) : null}
 				<button type="button" className="linkbtn" data-act="new-page" onClick={() => openDialog(editor, { kind: 'new', collection: collection.name })}>
 					<Icon name="plus" size="xs" />
 					New page

package/src/editor/client/shell/Stage.tsx

@@ -18,6 +18,7 @@ import { Icon } from './Icons.tsx';
 import { LibraryStage } from '../media/LibraryStage.tsx';
 import { InboxStage } from '../inbox/InboxStage.tsx';
 import { CollectionTable, useTableCollection } from '../collections/CollectionTable.tsx';
+import { ArrangeStage } from '../arrange/ArrangeStage.tsx';
 
 export function useFrameScale(width: Width): number | null {
 	const editor = useEditor();
@@ -41,8 +42,10 @@ export function Stage() {
 	const inbox = useStore(editor.view, (v) => v.level === 'submissions');
 	// Pre-M7 polish: a flat collection's level shows its documents as a table, full width, in place of the preview.
 	const tableOf = useTableCollection();
-	const table = !!tableOf;
-	const aside = !table && (settingsAside || library || inbox);
+	// Arrange pages (Decision 16): the arrange screen takes the preview's place.
+	const arrange = useStore(editor.view, (v) => v.level === 'arrange');
+	const table = !!tableOf && !arrange;
+	const aside = !table && !arrange && (settingsAside || library || inbox);
 	const showing = useStore(editor.previewStatus, (s) => s.showing);
 	const documents = useStore(editor.documents);
 	const back = documents.find((d) => d.collection === showing.collection && d.path === showing.path);
@@ -76,7 +79,7 @@ export function Stage() {
 		return () => clearTimeout(timer);
 	}, [painted]);
 
-	const className = ['stage', !painted && 'unpainted', fading && 'painting', aside && 'is-aside', table && 'is-table'].filter(Boolean).join(' ');
+	const className = ['stage', !painted && 'unpainted', fading && 'painting', aside && 'is-aside', table && 'is-table', arrange && 'is-arrange'].filter(Boolean).join(' ');
 	return (
 		<main ref={stage} className={className} id="stage" aria-label="Preview of the page" data-painted={painted ? 'true' : 'false'}>
 			{/* Before the frames, as the mockup's: over the held page while a document has none of its own (Site Settings). */}
@@ -99,6 +102,7 @@ export function Stage() {
 			<div className="stage-table" inert={!table} data-stage-table={table ? '' : undefined}>
 				{tableOf ? <CollectionTable collection={tableOf} /> : null}
 			</div>
+			{arrange ? <ArrangeStage /> : null}
 			{WIDTHS.map((w) => {
 				const box = layout?.[w];
 				const on = w === width;
@@ -111,7 +115,7 @@ export function Stage() {
 						style={box ? { left: box.left, top: box.top, width: box.width, height: box.height } : undefined}
 					>
 						<iframe
-							inert={aside || table || undefined}
+							inert={aside || table || arrange || undefined}
 							ref={(el) => {
 								iframes.current[w] = el;
 							}}

package/src/editor/routes/admin.astro

@@ -55,7 +55,7 @@ const html = renderEditor(props);
 const json = JSON.stringify(props).replace(/</g, '\\u003c');
 const { brand } = props.site;
 // M6: the inbox names itself (it has no document of its own).
-const title = `${props.inbox ? 'Submissions' : props.opened.document.title || props.opened.entry.label} · ${brand.name}`;
+const title = `${props.inbox ? 'Submissions' : props.arrange ? 'Arrange pages' : props.opened.document.title || props.opened.entry.label} · ${brand.name}`;
 const accent = `--accent:${brand.accent};--accent-ink:${brand.accentInk};--accent-edge:${brand.accentEdge}`;
 ---
 

package/src/editor/routes/arrange.ts

@@ -0,0 +1,17 @@
+/**
+ * POST /_caracms/arrange: ArrangeRequest → `{ ok: true }`, or `{ error, code }` as the move
+ * route refuses (arrange pages, Contracts; shapes: ../types.ts → ArrangeRequest). The rules
+ * are in ../server/arrange.ts; the store is the mode's (server/mode.ts), as for move: on
+ * disk in local mode, autosaves under this tab's locks in live mode, where the request
+ * carries `X-Caracms-Tab` and the guard has checked the session (its `/_caracms/` prefix rule).
+ */
+import type { APIRoute } from 'astro';
+import { site } from 'virtual:caracms/config';
+import { personOf } from '../../live/locals.ts';
+import { handleArrange } from '../server/arrange.ts';
+import { editorStore } from '../server/mode.ts';
+
+export const prerender = false;
+
+/** POST, and every other method (405). */
+export const ALL: APIRoute = async ({ request, locals }) => handleArrange(request, await editorStore(site), { person: personOf(locals) });

package/src/editor/server/admin-props.ts

@@ -8,7 +8,7 @@ import { relative } from 'node:path';
 import type { Brand, ResolvedSite } from '../../config.ts';
 import { DocumentError } from '../../content.ts';
 import { heldBases, withHeldBases } from '../../held.ts';
-import { inboxFromAddress, refFromAddress } from '../addresses.ts';
+import { inboxFromAddress, isArrangeAddress, refFromAddress } from '../addresses.ts';
 import { handleSubmissions, SUBMISSIONS_PREFIX, submissionsSetupQuick, type SubmissionResponse, type SubmissionsListResponse } from '../../forms/inbox.ts';
 import { ENDPOINTS, type AdminProps, type DocRef, type EditorSite, type ListedDocument, type LiveProps, type MediaSetup, type EditorForm, type Person, type StatusResponse } from '../types.ts';
 import { parseUiState, UI_COOKIE, unsentCookieName, withOpenAncestors, withRecent, withSide } from '../ui-state.ts';
@@ -89,7 +89,9 @@ export async function adminProps(input: {
 	// M6 Decision 9: /admin/submissions[/<id>] opens the editor on the inbox, over Home.
 	const inbox = inboxFromAddress(url.pathname);
 	if (inbox === 'bad') return { ok: false, status: 404, message: `There's no submission at ${url.pathname}.` };
-	const ref = inbox ? editor.home : refFromAddress(url.pathname, editor.collections.map((c) => c.name), editor.home);
+	// Arrange pages (Decision 15): /admin/arrange opens the arrange screen, over Home, with nothing arranged.
+	const arrange = isArrangeAddress(url.pathname);
+	const ref = inbox || arrange ? editor.home : refFromAddress(url.pathname, editor.collections.map((c) => c.name), editor.home);
 	if (!ref) return { ok: false, status: 404, message: `There's no document at ${url.pathname}.` };
 	try {
 		const opened = await store.read(ref.collection, ref.path);
@@ -102,7 +104,7 @@ export async function adminProps(input: {
 		const submissions = await submissionsSetupQuick({ site });
 		// The inbox's first page (and the submission the address names) in the first paint: no empty list that fills in.
 		const inboxFirst = inbox && submissions.unread !== null ? await inboxFirstPaint(site, url, inbox.id, input.person ?? null) : null;
-		return { ok: true, props: { site: editor, documents, opened, ui, unsent, live, media: mediaSetup(), inbox, submissions, forms: formsOf(site), inboxFirst } };
+		return { ok: true, props: { site: editor, documents, opened, ui, unsent, live, media: mediaSetup(), inbox, ...(arrange ? { arrange } : {}), submissions, forms: formsOf(site), inboxFirst } };
 	} catch (error) {
 		if (error instanceof DocumentError) return { ok: false, status: error.code === 'not-found' ? 404 : 400, message: error.message };
 		throw error;