caracms 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,299 @@
+/**
+ * Site Settings' publish-time keys (M6 Decision 14; the mockup's #settings-m6), after
+ * Editor branding. Unlike the sections above they act on the live site.
+ *
+ * - **Search and sharing**: the defaults (`seo`): a title (the home page's, and the
+ *   fallback's brand), a description, a share image with no alt input. M5a's soft limits.
+ * - **Google tag** (`googleTag`, Decision 16): one ID, checked as it's typed with the
+ *   server's own rule (seo.ts → googleTagKind). A pasted Google script, or anything else
+ *   with an ID in it, offers "Use G-…" (googleTagIn); anything that isn't an ID says
+ *   nothing goes on the site.
+ * - **Form emails** (`formRecipients`): one list per form in the config, labelled by the
+ *   form's label. Addresses are trimmed, a duplicate isn't added, and an invalid one is
+ *   kept as typed with an amber "Gets no email" (the email skips it, as the server's
+ *   check does: rules.ts → looksLikeEmail). Removing one has Undo.
+ * - **Redirects** (`redirects`, pre-M7 item 8): each old address and where it goes, removable.
+ */
+import { useState } from 'react';
+import { looksLikeEmail } from '../../../../forms/rules.ts';
+import { parseRedirects, type Redirect } from '../../../../redirects.ts';
+import { sameAddress } from '../../../../slug.ts';
+import { googleTagIn, googleTagKind, SEO_DESCRIPTION_SOFT_LIMIT, SEO_TITLE_SOFT_LIMIT } from '../../../../seo.ts';
+import { useEditor, useStore } from '../../context.tsx';
+import { useHost } from '../../fields/host.tsx';
+import { DESC_WHY, ShareImage, SoftText, TITLE_WHY } from '../../fields/SeoGroup.tsx';
+import { Icon } from '../../shell/Icons.tsx';
+import type { EditorForm } from '../../../types.ts';
+
+const asObject = (v: unknown): Record<string, unknown> => (v && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : {});
+const str = (v: unknown) => (typeof v === 'string' ? v : '');
+
+export function SettingsM6({ data }: { data: Record<string, unknown> }) {
+	const editor = useEditor();
+	const host = useHost();
+	const brand = useStore(editor.brand, (b) => b.name);
+	const seo = asObject(data.seo);
+	const name = str(asObject(data.brand).name).trim() || brand;
+	return (
+		<>
+			<section className="set-sec" data-sec="seo">
+				<h3>Search and sharing</h3>
+				<p className="lead">Defaults for pages that don’t set their own.</p>
+				<SoftText
+					scope={host.scope}
+					name="seo.title"
+					label="Default title"
+					value={str(seo.title)}
+					max={SEO_TITLE_SOFT_LIMIT}
+					placeholder={name}
+					help={`Blank is “${name}”. Other pages show their own title, then “· ${name}”.`}
+					overWhy={TITLE_WHY}
+					disabled={host.readOnly}
+					onChange={(v) => host.set('seo.title', v)}
+				/>
+				<SoftText
+					scope={host.scope}
+					name="seo.description"
+					label="Default description"
+					value={str(seo.description)}
+					max={SEO_DESCRIPTION_SOFT_LIMIT}
+					multiline
+					overWhy={DESC_WHY}
+					disabled={host.readOnly}
+					onChange={(v) => host.set('seo.description', v.replace(/\n+/g, ' '))}
+				/>
+				<ShareImage name="seo.image" label="Default share image" value={seo.image ?? null} help="1200 × 630." />
+			</section>
+			<GoogleTag value={str(data.googleTag)} />
+			<section className="set-sec" data-sec="forms">
+				<h3>Form emails</h3>
+				<p className="lead">Every message is also kept in Submissions.</p>
+				{editor.forms.length ? (
+					editor.forms.map((form) => <Recipients key={form.id} form={form} list={recipientsOf(data, form.id)} />)
+				) : (
+					<p className="field-help">No forms yet.</p>
+				)}
+			</section>
+			<Redirects list={parseRedirects(data.redirects)} />
+		</>
+	);
+}
+
+/**
+ * Pre-M7 item 8: the redirects that changing a page's address adds (`redirects`), each
+ * "from, to", removable with Undo. One whose old address has a page again (it shows
+ * instead), or whose new one has none, says so on a warning wash.
+ */
+function Redirects({ list }: { list: Redirect[] }) {
+	const editor = useEditor();
+	const host = useHost();
+	const documents = useStore(editor.documents);
+	const has = (url: string) => documents.some((d) => d.url !== null && sameAddress(d.url) === sameAddress(url));
+	return (
+		<section className="set-sec" data-sec="redirects">
+			<h3>Redirects</h3>
+			<p className="lead">Old addresses that send visitors to new ones.</p>
+			{list.length ? (
+				<div className="eds" data-path="redirects">
+					{list.map((r, i) => {
+						const why = has(r.from) ? 'A page is at this address now, so the page shows instead.' : !has(r.to) ? 'No page is at the address it goes to.' : null;
+						return (
+							<div key={`${i}:${r.from}`} className={`ed${why ? ' is-confirm' : ''}`} data-redirect={r.from}>
+								<span className="tile" aria-hidden="true">
+									<Icon name="arrow-r" size="sm" />
+								</span>
+								<span className="t">
+									<b>{r.from}</b>
+									<small>
+										to <span className="mono">{r.to}</span>
+									</small>
+								</span>
+								<button type="button" className="ib" aria-label={`Remove the redirect from ${r.from}`} disabled={host.readOnly} onClick={() => host.removeItem('redirects', i, `Removed the redirect from ${r.from}`)}>
+									<Icon name="x" size="sm" />
+								</button>
+								{why ? (
+									<div className="ed-q" data-why="redirect">
+										{why}
+									</div>
+								) : null}
+							</div>
+						);
+					})}
+				</div>
+			) : (
+				<p className="field-help">None yet.</p>
+			)}
+		</section>
+	);
+}
+
+const recipientsOf = (data: Record<string, unknown>, id: string): string[] => {
+	const list = asObject(data.formRecipients)[id];
+	return Array.isArray(list) ? list.filter((x): x is string => typeof x === 'string') : [];
+};
+
+/** What the tag field says under it, by the server's own rule (googleTagKind), as it's typed. */
+export function googleTagMessage(raw: string): { bad: boolean; text: string; kind: 'blank' | 'ok' | 'bad'; fix: string | null } {
+	const v = raw.trim();
+	if (!v) return { bad: false, kind: 'blank', text: 'Blank: the site has no tag.', fix: null };
+	const kind = googleTagKind(v);
+	if (kind) return { bad: false, kind: 'ok', text: `${kind === 'gtm' ? 'Loads Google Tag Manager' : 'Loads Google Analytics'} on the live site`, fix: null };
+	const fix = googleTagIn(v);
+	const text = /<script|googletagmanager|gtag\(/i.test(v)
+		? 'Paste only the ID (G-… or GTM-…), not the script.'
+		: /^UA-/i.test(v)
+			? 'UA- IDs are Universal Analytics, which Google has switched off. Use the G- ID from Google Analytics 4.'
+			: 'IDs start G- or GTM-.';
+	return { bad: true, kind: 'bad', text, fix };
+}
+
+function GoogleTag({ value }: { value: string }) {
+	const host = useHost();
+	const msg = googleTagMessage(value);
+	return (
+		<section className="set-sec" data-sec="gtag">
+			<h3>Google tag</h3>
+			<p className="lead">Live site only.</p>
+			<div className="field gtag" data-field="googleTag" data-ff="googleTag">
+				<div className="field-head">
+					<label htmlFor="set-gtag">Tag ID</label>
+				</div>
+				<input
+					className="input mono"
+					id="set-gtag"
+					data-path="googleTag"
+					value={value}
+					placeholder="G-XXXXXXXXXX or GTM-XXXXXXX"
+					autoComplete="off"
+					spellCheck={false}
+					aria-describedby="gtag-w"
+					aria-invalid={msg.bad ? 'true' : undefined}
+					disabled={host.readOnly}
+					onChange={(e) => host.set('googleTag', e.target.value.replace(/\n+/g, ' '))}
+				/>
+				<div id="gtag-w" data-gtag={msg.kind}>
+					{msg.kind === 'blank' ? (
+						<p className="field-help" style={{ marginTop: 'var(--space-1-5)' }}>
+							{msg.text}
+						</p>
+					) : msg.kind === 'ok' ? (
+						<p className="field-ok">
+							<Icon name="check" size="xs" />
+							{msg.text}
+						</p>
+					) : (
+						<p className="field-warn">
+							<Icon name="warn" size="sm" />
+							<span>
+								{msg.text}
+								{msg.fix ? (
+									<button type="button" className="linkbtn" data-act="gtag-fix" disabled={host.readOnly} onClick={() => host.set('googleTag', msg.fix)}>
+										Use {msg.fix}
+									</button>
+								) : null}
+							</span>
+						</p>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function Recipients({ form, list }: { form: EditorForm; list: string[] }) {
+	const editor = useEditor();
+	const host = useHost();
+	const [adding, setAdding] = useState('');
+	const [why, setWhy] = useState('');
+	const n = list.filter(looksLikeEmail).length;
+	const path = `formRecipients.${form.id}`;
+	const typed = adding.trim();
+	// Checked as it's typed: once it has an @, an address that won't get email says so before it's added.
+	const typedBad = typed.includes('@') && !looksLikeEmail(typed);
+	const add = () => {
+		if (!typed || host.readOnly) return;
+		if (list.some((x) => x.trim().toLowerCase() === typed.toLowerCase())) {
+			setWhy(`${typed} is already on the list.`);
+			setAdding('');
+			return;
+		}
+		host.set(path, [...list, typed]);
+		setAdding('');
+		setWhy('');
+		editor.announce(looksLikeEmail(typed) ? `Added ${typed}.` : `Added ${typed}. It isn't a whole email address, so it gets no email.`);
+	};
+	return (
+		<div className="field rcpt" data-field={`rcpt-${form.id}`} data-ff={path}>
+			<div className="field-head">
+				<span className="field-label">{form.label} form</span>
+				<span className="field-meta">{n ? `${n} address${n === 1 ? '' : 'es'}` : 'No one'}</span>
+			</div>
+			{list.length ? (
+				<div className="eds" data-path={path}>
+					{list.map((value, i) => {
+						const bad = !looksLikeEmail(value);
+						return (
+							<div key={`${i}:${value}`} className={`ed${bad ? ' is-confirm' : ''}`} data-recipient={value} data-warned={bad ? '' : undefined}>
+								<span className="tile" aria-hidden="true">
+									<Icon name={bad ? 'warn' : 'mail'} size="sm" />
+								</span>
+								<span className="t">
+									<b>{value}</b>
+									{bad ? <small style={{ color: 'var(--status-warning)' }}>Gets no email</small> : <small>Gets every message</small>}
+								</span>
+								<button type="button" className="ib" aria-label={`Remove ${value}`} disabled={host.readOnly} onClick={() => host.removeItem(path, i, `Removed ${value}`)}>
+									<Icon name="x" size="sm" />
+								</button>
+								{bad ? (
+									<div className="ed-q" style={{ color: 'var(--status-warning)' }} data-why="recipient">
+										Not a full address; gets no email.
+									</div>
+								) : null}
+							</div>
+						);
+					})}
+				</div>
+			) : (
+				<div className="list-empty">No one yet.</div>
+			)}
+			<form
+				className="ed-add"
+				data-form="rcpt"
+				data-fid={form.id}
+				onSubmit={(e) => {
+					e.preventDefault();
+					add();
+				}}
+			>
+				<input
+					className="input"
+					data-rcpt={form.id}
+					value={adding}
+					placeholder="name@example.com"
+					aria-label={`Add an address for the ${form.label} form’s email`}
+					autoComplete="off"
+					spellCheck={false}
+					aria-describedby={typedBad ? `rcpt-${form.id}-w` : undefined}
+					onChange={(e) => {
+						setAdding(e.target.value);
+						if (why) setWhy('');
+					}}
+				/>
+				<button className="btn" type="submit">
+					Add
+				</button>
+			</form>
+			{typedBad ? (
+				<p className="field-warn" id={`rcpt-${form.id}-w`}>
+					<Icon name="warn" size="sm" />
+					<span>That isn’t a whole email address yet, so it would get no email.</span>
+				</p>
+			) : why ? (
+				<p className="field-warn quiet">
+					<Icon name="check" size="sm" />
+					<span>{why}</span>
+				</p>
+			) : null}
+		</div>
+	);
+}

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

@@ -0,0 +1,185 @@
+/**
+ * The inbox level, Site-wide → Submissions (M6 Decision 9; the mockup's #submissions,
+ * #submissions-older, #submissions-empty, #submissions-off): `view.level === 'submissions'`.
+ *
+ * - **The list**, newest first, 50 at a time with Older (by cursor). A row: the unread
+ *   mark (a dot and a heavier name, never a side rail), who sent it, when (the site's
+ *   zone: "14:12" today, then "Yesterday" or "Tue 13 Oct"), a one-line snippet, the
+ *   form, the file count, and **Email failed** when its email failed. The open one has
+ *   the selection's wash and ring.
+ * - **A row opens the submission** on a sheet over the dimmed page (inbox/InboxStage.tsx),
+ *   with the list kept here; the address follows (`/admin/submissions/<id>`).
+ * - **Not set up** (the production server has no bucket): the amber note naming the
+ *   variables, since a live form then fails for visitors.
+ * - Last-known rows while the list is read again (on opening, and on intent from the
+ *   Site-wide row); the first paint of `/admin/submissions` has them (admin-props.ts).
+ *
+ * Everything a visitor typed is React text: never HTML.
+ */
+import { Fragment, useEffect } from 'react';
+import { useEditor, useStore } from '../../context.tsx';
+import { inboxFor, filesLabel, rowTime } from '../../inbox/store.ts';
+import { Icon } from '../../shell/Icons.tsx';
+import type { SubmissionRow } from '../../../types.ts';
+import { CurrentHead, DocumentsTab, GlobalNotes, RecentStrip, Trail } from '../parts.tsx';
+
+/** Where the inbox's not-set-up note and the documents level read whether it's off. */
+export function useSubmissionsOff() {
+	const editor = useEditor();
+	return useStore(editor.submissions, (s) => (s.unread === null ? s : null));
+}
+
+export function SubmissionsLevel() {
+	const editor = useEditor();
+	const inbox = inboxFor(editor);
+	const rows = useStore(inbox.list, (l) => l.rows);
+	const older = useStore(inbox.list, (l) => l.older);
+	const olderLoading = useStore(inbox.list, (l) => l.olderLoading);
+	const error = useStore(inbox.list, (l) => l.error);
+	const unread = useStore(editor.submissions, (s) => s.unread ?? 0);
+	const off = useSubmissionsOff();
+	const openId = useStore(editor.view, (v) => v.inbox?.id ?? null);
+	const timeZone = editor.timeZone();
+
+	// The list read again on opening (last known stays on screen meanwhile); the open one read, and marked read.
+	useEffect(() => {
+		void inbox.load();
+	}, [inbox]);
+	useEffect(() => {
+		if (openId) void inbox.show(openId);
+	}, [inbox, openId]);
+
+	let body;
+	if (off) body = <SubmissionsOffNote off={off} />;
+	else if (rows && rows.length === 0)
+		body = (
+			<div className="empty">
+				<b>No messages yet</b>
+				<button type="button" className="linkbtn" style={{ marginTop: 'var(--space-1)' }} data-act="open-settings" onClick={() => void editor.openDocument({ collection: 'settings', path: settingsPath(editor) })}>
+					Who gets the email
+				</button>
+			</div>
+		);
+	else if (rows)
+		body = (
+			<>
+				<div className="srows">
+					{rows.map((row) => (
+						<Row key={row.id} row={row} current={row.id === openId} timeZone={timeZone} onOpen={() => editor.openInbox(row.id)} />
+					))}
+				</div>
+				{older || rows.length > 50 ? (
+					<div className="subs-foot">
+						{older ? (
+							<button type="button" className="btn sm block" data-act="subs-older" disabled={olderLoading} onClick={() => void inbox.loadOlder()}>
+								Older
+							</button>
+						) : (
+							<p className="kb-hint">No older messages.</p>
+						)}
+					</div>
+				) : null}
+			</>
+		);
+	return (
+		<>
+			<Trail>
+				<DocumentsTab />
+				<CurrentHead
+					back={{ label: 'Back to documents', onClick: () => editor.goTo('documents') }}
+					title="Submissions"
+					chips={unread && !off ? <span className="n-chip">{unread} unread</span> : null}
+				/>
+			</Trail>
+			<div className="side-body" data-inbox="">
+				<GlobalNotes />
+				{error && !off ? (
+					<div className="note warn tight" role="status" data-note="inbox-error">
+						<Icon name="warn" />
+						<div>
+							<p>{error}</p>
+						</div>
+					</div>
+				) : null}
+				{body}
+			</div>
+			<RecentStrip />
+		</>
+	);
+}
+
+const settingsPath = (editor: ReturnType<typeof useEditor>) => editor.documents.get().find((d) => d.collection === 'settings')?.path ?? 'site-settings';
+
+function Row({ row, current, timeZone, onOpen }: { row: SubmissionRow; current: boolean; timeZone: string; onOpen: () => void }) {
+	const unread = row.readAt === null;
+	const failed = row.emailStatus === 'failed';
+	const time = rowTime(row.receivedAt, timeZone);
+	const label = [row.name, `${row.formLabel} form`, time, unread ? 'unread' : '', row.files ? filesLabel(row.files) : '', failed ? 'email failed' : ''].filter(Boolean).join(', ');
+	return (
+		<button
+			type="button"
+			className={`srow${unread ? ' is-unread' : ''}${current ? ' is-current' : ''}`}
+			data-id={row.id}
+			aria-current={current ? 'true' : undefined}
+			aria-label={label}
+			onClick={onOpen}
+		>
+			<span className="ud" aria-hidden="true" />
+			<span>
+				<span className="l1">
+					<span className="who">{row.name}</span>
+					<span className="tm">{time}</span>
+				</span>
+				<span className="sn">{row.snippet ? row.snippet : <span style={{ color: 'var(--text-subtle)' }}>No message</span>}</span>
+				<span className="l3">
+					<span>{row.formLabel}</span>
+					{row.files ? (
+						<span>
+							<Icon name="attach" />
+							{filesLabel(row.files)}
+						</span>
+					) : null}
+					{failed ? (
+						<span className="chip danger">
+							<Icon name="warn" size="xs" />
+							Email failed
+						</span>
+					) : null}
+				</span>
+			</span>
+		</button>
+	);
+}
+
+/** `submissions-off`: the amber note naming what's missing, or why the count couldn't be read. */
+export function SubmissionsOffNote({ off }: { off: { error: string; code: string; missing: string[] } }) {
+	return (
+		<div className="note warn tight" role="status" data-note="submissions-off">
+			<Icon name="inbox" />
+			<div>
+				{off.code === 'submissions-unset' ? (
+					<>
+						<b>Submissions aren’t set up on this server yet</b>
+						<p>
+							It needs{' '}
+							{off.missing.length
+								? off.missing.map((v, i) => (
+										<Fragment key={v}>
+											{i === 0 ? '' : i === off.missing.length - 1 ? ' and ' : ', '}
+											<span className="mono">{v}</span>
+										</Fragment>
+									))
+								: 'its bucket’s variables'}
+							. Until then, forms can’t take messages.
+						</p>
+					</>
+				) : (
+					<>
+						<b>Submissions can’t be read just now</b>
+						<p>{off.error}</p>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,179 @@
+/**
+ * Pieces every pane level is built from (the mockup's sidebar components): the
+ * trail with the stacked level tabs, the current level's header, the notes every
+ * level shows, and the Recent strip at the foot. A level is
+ *
+ *   <>
+ *     <Trail>{level tabs}<CurrentHead … /></Trail>
+ *     <div className="side-body"><GlobalNotes />…</div>
+ *     <RecentStrip />
+ *   </>
+ */
+import type { ReactNode } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import { docId } from '../../types.ts';
+import { useTooLong } from '../nav/DocRow.tsx';
+import { DocMarksView } from '../live/marks.tsx';
+import { OfflineExtras } from '../live/session.tsx';
+
+export function Trail({ children }: { children: ReactNode }) {
+	return <div className="trail">{children}</div>;
+}
+
+/** A stacked level tab: the level you came from (`.lv`). */
+export function LevelTab({ name, kind, count, onClick }: { name: string; kind: string; count?: string; onClick: () => void }) {
+	return (
+		<button type="button" className="lv" onClick={onClick}>
+			<b>{name}</b>
+			<span>· {kind}</span>
+			{count !== undefined ? <span className="n">{count}</span> : null}
+		</button>
+	);
+}
+
+/** The documents level's tab, for the levels below it. */
+export function DocumentsTab() {
+	const editor = useEditor();
+	const count = useStore(editor.documents, (d) => d.length);
+	const name = useStore(editor.brand, (b) => b.name);
+	return <LevelTab name={name} kind="Documents" count={String(count)} onClick={() => editor.goTo('documents')} />;
+}
+
+/** The current level's header (`.cur`): back, a crumb, the title, chips, a sub line, a menu and extras. */
+export function CurrentHead(props: {
+	back?: { label: string; onClick: () => void };
+	crumb?: string;
+	title: ReactNode;
+	chips?: ReactNode;
+	sub?: ReactNode;
+	menu?: ReactNode;
+	extra?: ReactNode;
+	lead?: ReactNode;
+}) {
+	return (
+		<div className="cur">
+			<div className="cur-row">
+				{props.back ? (
+					<button type="button" className="ib boxed" aria-label={props.back.label} onClick={props.back.onClick}>
+						<Icon name="chev-l" />
+					</button>
+				) : null}
+				{props.lead}
+				<div className="cur-title">
+					<span className="t">
+						{props.crumb ? <span className="crumbp">{props.crumb} /</span> : null}
+						<span>{props.title}</span>
+						{props.chips}
+					</span>
+					{props.sub ? <span className="sub">{props.sub}</span> : null}
+				</div>
+				{props.menu}
+			</div>
+			{props.extra}
+		</div>
+	);
+}
+
+/**
+ * Notes every level shows above its content: "Can't reach the server" (Decision 6),
+ * or, when the server answered a write with a refusal (a 4xx: the edits don't fit
+ * their base, the file was renamed or deleted while open), its own message. M3
+ * retries with the next change or a reload (no timer), so M4's countdown, "Try now"
+ * and unsent count are slots without data.
+ */
+export function GlobalNotes() {
+	const editor = useEditor();
+	const state = useStore(editor.keep, (k) => k.state);
+	const error = useStore(editor.keep, (k) => k.error);
+	if (state === 'refused') {
+		return (
+			<div className="note danger" role="alert" data-note="refused">
+				<Icon name="warn" />
+				<div>
+					<b>The server didn't keep your latest changes</b>
+					<p>It said: {error ?? 'the write was refused.'}</p>
+					<p>Held in this browser.</p>
+				</div>
+			</div>
+		);
+	}
+	if (state !== 'offline') return null;
+	if (editor.mode === 'live') return <LiveOffline />;
+	return (
+		<div className="note danger" role="alert" data-note="offline">
+			<Icon name="offline" />
+			<div>
+				<b>Can't reach the server</b>
+				<p>Changes are only in this tab. Keep it open.</p>
+				{/* M4: "Trying again in 12 s." and the unsent count. */}
+				<p data-slot="retry-countdown" hidden />
+				{/* M4: "Try now". */}
+				<div className="acts" data-slot="try-now" hidden />
+			</div>
+		</div>
+	);
+}
+
+/** Live mode's offline note (the mockup's #offline): the unsent count, the countdown and Try now. */
+function LiveOffline() {
+	const editor = useEditor();
+	const n = useStore(editor.keep, (k) => k.unsent ?? 0);
+	return (
+		<div className="note danger" role="alert" data-note="offline">
+			<Icon name="offline" />
+			<div>
+				<b>Can't reach the server</b>
+				<p data-unsent={n}>
+					{n > 0
+						? `${n} change${n === 1 ? '' : 's'} only in this tab. Keep it open.`
+						: 'Keep this tab open.'}
+				</p>
+				<OfflineExtras />
+			</div>
+		</div>
+	);
+}
+
+/** The Recent strip at the foot of the pane (per browser, from the cookie: Decision 20). */
+export function RecentStrip() {
+	const editor = useEditor();
+	const recent = useStore(editor.ui, (u) => u.recent);
+	const documents = useStore(editor.documents);
+	const current = useStore(editor.doc.state, (s) => docId(s.ref));
+	const items = recent
+		.map((id) => documents.find((d) => docId(d) === id))
+		.filter((d): d is NonNullable<typeof d> => !!d && !d.warning)
+		.slice(0, 5);
+	return (
+		<div className="side-foot">
+			<span className="lbl">Recent</span>
+			<div className="rchips">
+				{items.map((d) => (
+					<button
+						key={docId(d)}
+						type="button"
+						className={`rchip${docId(d) === current ? ' is-current' : ''}`}
+						onClick={() => void editor.openDocument({ collection: d.collection, path: d.path })}
+					>
+						{d.label}
+						{docId(d) === current ? <RecentMark /> : null}
+						{editor.mode === 'live' ? <DocMarksView file={d.file} compact /> : null}
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function RecentMark() {
+	return useTooLong(true) ? (
+		<span className="wmark" title="Too long for mobile">
+			<Icon name="phone" size="xs" />
+			<span className="sr">, too long for mobile</span>
+		</span>
+	) : null;
+}
+
+/** A document's parent label for crumbs (`Services`): see nav/search.ts. */
+export { parentLabel } from '../nav/search.ts';