caracms 0.0.0-stage → 0.2.0

package/src/editor/client/block-list/link.ts

@@ -0,0 +1,71 @@
+/**
+ * The block list's link to the rest of the editor: which block row is hovered, and
+ * where the add-block picker is open. One pair of stores per editor (a WeakMap, so
+ * the server render's editors don't share anything with the browser's).
+ *
+ * ## The hover hook (for the preview link)
+ *
+ *   blockHover(editor)                Store<string | null>: the hovered block's key
+ *   setBlockHover(editor, key | null)
+ *
+ * The block list sets it while the pointer is over a row (or a row has keyboard
+ * focus) and draws a row as hovered (`.hov`) whenever it holds that row's key, so it
+ * works both ways: the preview's overlays can read it to outline the block on the
+ * page (`data-cms-block` = `editor.doc.indexOf(key)`), and set it when the pointer
+ * is over a block on the page to light up its row.
+ *
+ * **Selected** is `editor.view.block` (the block level's block, kept when you go
+ * back up to the list), drawn as `.is-current`.
+ *
+ * ## The picker
+ *
+ *   pickerAt(editor)                  Store<number | null>: the index a picked block goes in, or closed
+ *   openPicker(editor, at)            opens it on the document level (the "Add block" row, the empty
+ *                                     page, and later the preview's insert points)
+ *   closePicker(editor)
+ */
+import type { Editor } from '../editor.ts';
+import { createStore, type Store } from '../state/store.ts';
+
+interface Link {
+	hover: Store<string | null>;
+	picker: Store<number | null>;
+}
+
+const links = new WeakMap<Editor, Link>();
+
+function link(editor: Editor): Link {
+	let found = links.get(editor);
+	if (!found) {
+		found = { hover: createStore<string | null>(null), picker: createStore<number | null>(null) };
+		const made = found;
+		// Another document opened: nothing is hovered, and the picker closes.
+		editor.doc.subscribe((_, change) => {
+			if (change.kind === 'load') {
+				made.hover.set(null);
+				made.picker.set(null);
+			}
+			if (change.kind === 'remove' && made.hover.get() === change.key) made.hover.set(null);
+		});
+		// The picker belongs to the document level: leaving it (up, or into a block) closes it.
+		editor.view.subscribe((view) => {
+			if (view.level !== 'document' && made.picker.get() !== null) made.picker.set(null);
+		});
+		links.set(editor, found);
+	}
+	return found;
+}
+
+export const blockHover = (editor: Editor): Store<string | null> => link(editor).hover;
+export const setBlockHover = (editor: Editor, key: string | null) => link(editor).hover.set(key);
+
+export const pickerAt = (editor: Editor): Store<number | null> => link(editor).picker;
+
+export function openPicker(editor: Editor, at: number) {
+	const length = editor.doc.get().document.blocks.length;
+	editor.setPop(null);
+	editor.goTo('document');
+	link(editor).picker.set(Math.max(0, Math.min(length, Math.trunc(at))));
+}
+
+export const closePicker = (editor: Editor) => link(editor).picker.set(null);

package/src/editor/client/block-list/reorder.ts

@@ -0,0 +1,105 @@
+/**
+ * Reordering rows by drag and by keys (M2's keys rule): the block list's mechanism,
+ * shared with M5a's list field (Decision 5: rows reorder "as blocks do").
+ *
+ * - `useRowDrag`: HTML drag and drop over a list of rows. The lifted row turns into
+ *   a ghost a frame later (so the drag image is the real row); the drop lands before
+ *   or after the row under the pointer, by its middle; the drop line is full width
+ *   (the row's `drop-before` / `drop-after` class, never a side rail).
+ * - `rowKeyAction`: what a key on a focused row does: ⌥↑/⌥↓ move it, ⌫ removes it,
+ *   ↑/↓ move focus between rows.
+ */
+import { useState, type DragEvent, type KeyboardEvent } from 'react';
+
+export interface RowDrag {
+	key: string;
+	/** Where it would land: before or after this row. */
+	drop: { key: string; after: boolean } | null;
+	/** The lifted row is drawn as a ghost (a frame later, so the drag image is the real row). */
+	ghost: boolean;
+}
+
+export interface RowDragApi {
+	drag: RowDrag | null;
+	cancel(): void;
+	/** On a row's `dragstart`. */
+	start(event: DragEvent, key: string): void;
+	/** On the list's `dragover`. */
+	over(event: DragEvent): void;
+	/** On the list's `drop`. Moves the dragged row by `onMove(key, toIndex)`. */
+	drop(event: DragEvent): void;
+	/** The row's drag classes: `is-ghost`, `drop-before`, `drop-after`. */
+	classes(key: string): string;
+}
+
+export function useRowDrag(options: {
+	/** The row element an event is in (its key read by `keyOf`), or null. */
+	rowOf: (target: Element) => HTMLElement | null;
+	keyOf: (row: HTMLElement) => string;
+	indexOf: (key: string) => number;
+	onMove: (key: string, to: number) => void;
+	onStart?: () => void;
+}): RowDragApi {
+	const [drag, setDrag] = useState<RowDrag | null>(null);
+	return {
+		drag,
+		cancel: () => setDrag(null),
+		start(event, key) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData('text/plain', key);
+			options.onStart?.();
+			setDrag({ key, drop: null, ghost: false });
+			requestAnimationFrame(() => setDrag((d) => (d && d.key === key ? { ...d, ghost: true } : d)));
+		},
+		over(event) {
+			if (!drag) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = 'move';
+			const row = options.rowOf(event.target as Element);
+			if (!row) return;
+			const box = row.getBoundingClientRect();
+			const drop = { key: options.keyOf(row), after: event.clientY - box.top > box.height / 2 };
+			if (drag.drop?.key !== drop.key || drag.drop.after !== drop.after) setDrag({ ...drag, drop });
+		},
+		drop(event) {
+			if (!drag?.drop) return;
+			event.preventDefault();
+			const from = options.indexOf(drag.key);
+			let to = options.indexOf(drag.drop.key) + (drag.drop.after ? 1 : 0);
+			if (from < to) to -= 1;
+			setDrag(null);
+			options.onMove(drag.key, to);
+		},
+		classes(key) {
+			if (!drag) return '';
+			const lifted = drag.key === key;
+			return [lifted && drag.ghost ? 'is-ghost' : '', drag.drop?.key === key && !lifted ? (drag.drop.after ? 'drop-after' : 'drop-before') : ''].filter(Boolean).join(' ');
+		},
+	};
+}
+
+export type RowKeyAction = { kind: 'move'; to: number } | { kind: 'remove' } | { kind: 'focus'; to: number } | null;
+
+/**
+ * A key on a focused row at `index` of `count` (M2's keys rule): ⌥↑/⌥↓ move it,
+ * ⌫ (or Delete) removes it, ↑/↓ move focus. Calls preventDefault for what it takes.
+ * Null for any other key, or a move or focus past either end.
+ */
+export function rowKeyAction(event: KeyboardEvent, index: number, count: number): RowKeyAction {
+	if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+		event.preventDefault();
+		const to = index + (event.key === 'ArrowUp' ? -1 : 1);
+		return to < 0 || to >= count ? null : { kind: 'move', to };
+	}
+	if ((event.key === 'Backspace' || event.key === 'Delete') && !event.metaKey && !event.ctrlKey && !event.altKey) {
+		event.preventDefault();
+		return { kind: 'remove' };
+	}
+	if (!event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+		const to = index + (event.key === 'ArrowDown' ? 1 : -1);
+		if (to < 0 || to >= count) return null;
+		event.preventDefault();
+		return { kind: 'focus', to };
+	}
+	return null;
+}

package/src/editor/client/block-list/summary.ts

@@ -0,0 +1,118 @@
+/**
+ * What a block row says about its block, pure for the unit tests:
+ *
+ *   blockSummary(site, block)   a known block's first lockup or text; an unknown block's
+ *                               type and what's kept
+ *   keptSummary(data)           an unknown block's top-level keys, each with a short preview of
+ *                               its value (Decision 21): `Heading: “Kind words” · Quotes: 3 items`
+ *   blockIcon(type)             the sprite's block icon for a type, if it has one
+ *   fieldsSummary(block)        the picker's line under a type: its fields' labels
+ */
+import { own, sharedEntryOf } from '../../../document.ts';
+import { parseField, titleCase, type Field } from '../../../fields.ts';
+import { richTextPlain, type RichTextValue } from '../../../rich-text.ts';
+import type { EditorBlock, EditorSite, ListedDocument } from '../../types.ts';
+
+/**
+ * A page's shared entry (M5a Decision 8) as listed, when it renders: the shared block
+ * exists and its type is one the site knows. Null for a block that isn't an entry, and
+ * for an entry that's skipped (no such shared block, or a type the code doesn't know).
+ */
+export function sharedOf(site: Pick<EditorSite, 'blocks'>, documents: readonly ListedDocument[], block: Pick<EditorBlock, 'known' | 'data' | 'shared'>): ListedDocument | null {
+	const name = sharedEntryOf(block);
+	if (name === undefined) return null;
+	const found = documents.find((d) => d.collection === 'shared' && d.path === name && !d.warning);
+	return found && found.blockType && own(site.blocks, found.blockType) ? found : null;
+}
+
+/** "Used on 4 pages" (N counts documents of every collection), or "Not on any page yet". */
+export const usedOnLine = (doc: Pick<ListedDocument, 'usedOn'>) => {
+	const n = doc.usedOn?.length ?? 0;
+	return n ? `Used on ${n} page${n === 1 ? '' : 's'}` : 'Not on any page yet';
+};
+
+/** A short preview of a value. */
+export function previewValue(value: unknown, max = 24): string {
+	if (value === null || value === undefined) return 'empty';
+	if (typeof value === 'string') {
+		const flat = value.replace(/\s+/g, ' ').trim();
+		if (!flat) return 'empty';
+		return `“${flat.length > max ? `${flat.slice(0, max - 1).trimEnd()}…` : flat}”`;
+	}
+	if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+	if (Array.isArray(value)) {
+		if (value.length === 0) return 'empty';
+		if (value.every((v) => typeof v === 'string')) return previewValue(value.join(' / '), max);
+		return `${value.length} item${value.length === 1 ? '' : 's'}`;
+	}
+	if (typeof value === 'object') {
+		const n = Object.keys(value as object).length;
+		return n === 0 ? 'empty' : `${n} field${n === 1 ? '' : 's'}`;
+	}
+	return String(value);
+}
+
+/** An unknown block's kept keys (its `data` is its raw keys minus `type`), each with a preview. */
+export function keptSummary(data: Record<string, unknown>): { key: string; label: string; preview: string }[] {
+	return Object.entries(data).map(([key, value]) => ({ key, label: titleCase(key), preview: previewValue(value) }));
+}
+
+export function keptLine(data: Record<string, unknown>): string {
+	const kept = keptSummary(data);
+	return kept.length ? kept.map((k) => `${k.label}: ${k.preview}`).join(' · ') : 'Nothing but its type';
+}
+
+/**
+ * The row's second line. A shared-block entry (M5a Decision 8) names its shared block.
+ * M6 Decision 17: a block that picks one of the site's `forms` (a select of their ids, the
+ * Form block) adds the form: "Get in touch · Contact form".
+ */
+export function blockSummary(site: Pick<EditorSite, 'blocks'>, block: EditorBlock, forms: readonly { id: string; label: string }[] = []): string {
+	const shared = sharedEntryOf(block);
+	if (shared !== undefined) return `Shared block · ${shared}`;
+	if (!block.known) return `${block.type || 'No type'} · ${keptLine(block.data)}`;
+	const fields = own(site.blocks, block.type)?.fields ?? {};
+	const ids = forms.map((f) => f.id).sort().join('\n');
+	const picker = ids ? Object.entries(fields).find(([, f]) => f.kind === 'select' && f.options.map((o) => o.value).sort().join('\n') === ids) : undefined;
+	if (picker) {
+		const chosen = forms.find((f) => f.id === block.data[picker[0]]);
+		const first = firstText(fields, block);
+		return `${first ? `${first} · ` : ''}${chosen ? `${chosen.label} form` : 'No form chosen'}`;
+	}
+	return firstText(fields, block) ?? 'Nothing in it yet';
+}
+
+function firstText(fields: Record<string, Field>, block: Pick<EditorBlock, 'data'>): string | null {
+	for (const [key, field] of Object.entries(fields)) {
+		const value = block.data[key];
+		// A group's own first text (a two-column block's left heading).
+		if (field.kind === 'group' && value && typeof value === 'object') {
+			const inner = firstText(field.fields, { data: value as Record<string, unknown> });
+			if (inner) return inner;
+		}
+		if (field.kind === 'lockup' && value && typeof value === 'object') {
+			const lines = (value as { lines?: string[] }).lines ?? [];
+			if (lines.length) return lines.join(' / ');
+		}
+		if (field.kind === 'text' && typeof value === 'string' && value.trim()) return value.replace(/\s+/g, ' ').trim();
+		// M9 Decision 11: a rich heading's words, without its bold.
+		if (field.kind === 'richText' && field.heading) {
+			const words = richTextPlain(parseField(field, value) as RichTextValue).replace(/\s+/g, ' ').trim();
+			if (words) return words;
+		}
+	}
+	return null;
+}
+
+/** The block icons the shell's sprite has (shell/Icons.tsx, `b-*`). */
+const SPRITE = new Set(['hero', 'head', 'tm', 'cases', 'cta', 'footer', 'team', 'quote', 'gallery', 'video', 'form', 'faq']);
+
+export function blockIcon(block: { type: string; known: boolean }): string {
+	if (!block.known) return 'b-unknown';
+	return SPRITE.has(block.type) ? `b-${block.type}` : 'b-tm';
+}
+
+export function fieldsSummary(schema: { fields: Record<string, { label?: string }> } | undefined): string {
+	const labels = Object.entries(schema?.fields ?? {}).map(([key, f]) => f.label ?? titleCase(key));
+	return labels.length ? labels.join(', ') : 'Nothing to set';
+}

package/src/editor/client/collections/CollectionGrid.tsx

@@ -0,0 +1,143 @@
+/**
+ * M6c (G5): a flat collection's documents as a grid of cards over the stage, beside
+ * the table (CollectionTable.tsx draws the head, the find, filters, order and the
+ * switch; the rows here are the same view's: viewRows). Mockup: m6c-downloads-grid.html
+ * → #grid, #grid-text, #grid-loading.
+ *
+ * A card is the sidebar's row grown up: its picture, the title with the row's marks,
+ * and up to two captions (table.ts → captionColumns). The picture arrives already
+ * cropped to the collection's ratio by the server, signed, in the listing
+ * (`doc.card`, editor/server/cards.ts): the box holds the ratio before it lands (no
+ * layout shift, no skeleton) and the image fades in once, when it has loaded. No
+ * picture: the text card, the title set in the picture's place. Someone's lock is a
+ * chip on the picture; the open document is a wash with a full ring (no side rails).
+ */
+import type { CSSProperties } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import { docIcon } from '../nav/DocRow.tsx';
+import { Avatar, DocMarksView } from '../live/marks.tsx';
+import { displayName } from '../live/format.ts';
+import { fmtDur } from '../fields/MediaField.tsx';
+import { docId, type CardPicture, type EditorAnyCollection, type ListedDocument } from '../../types.ts';
+import { ratioValue } from '../../../cards.ts';
+import { cellText, type RefIndex, type TableColumn } from './table.ts';
+
+export function CollectionGrid(props: {
+	collection: EditorAnyCollection;
+	rows: readonly ListedDocument[];
+	captions: readonly TableColumn[];
+	currentId: string;
+	edited: (ms: number) => string;
+	/** Every listed document, for a reference caption's title (table.ts → refIndex). */
+	refs: RefIndex;
+	open: (doc: ListedDocument) => void;
+}) {
+	const ratio = props.collection.view?.ratio ?? '4:3';
+	const style = { '--card-ratio': String(ratioValue(ratio)) } as CSSProperties;
+	return (
+		<div className="cgrid" data-ratio={ratio} style={style}>
+			{props.rows.map((d) => (
+				<Card key={d.path} doc={d} collection={props.collection} captions={props.captions} current={docId(d) === props.currentId} edited={props.edited} refs={props.refs} open={props.open} />
+			))}
+		</div>
+	);
+}
+
+function Card(props: { doc: ListedDocument; collection: EditorAnyCollection; captions: readonly TableColumn[]; current: boolean; edited: (ms: number) => string; refs: RefIndex; open: (doc: ListedDocument) => void }) {
+	const editor = useEditor();
+	const { doc } = props;
+	const id = `card-${docId(doc).replace(/[^a-zA-Z0-9-]/g, '-')}`;
+	const live = editor.mode === 'live';
+	return (
+		<button
+			type="button"
+			className={['card', props.current ? 'is-current' : '', doc.warning ? 'is-warned' : ''].filter(Boolean).join(' ')}
+			data-doc={docId(doc)}
+			aria-current={props.current ? 'page' : undefined}
+			aria-labelledby={`${id}-t`}
+			aria-describedby={props.captions.length ? `${id}-c` : undefined}
+			title={doc.warning?.message}
+			onClick={() => props.open(doc)}
+		>
+			<span className="card-pic">
+				{doc.card ? <Picture card={doc.card} /> : (
+					<span className="ph tcard" data-card="text">
+						<Icon name={docIcon(props.collection)} />
+						<span className="tc-t">{doc.label}</span>
+					</span>
+				)}
+				{live ? <CardLock file={doc.file} /> : null}
+			</span>
+			<span className="card-txt">
+				<span className="card-t" id={`${id}-t`}>
+					<span className="nm">{doc.label}</span>
+					<span className="meta">
+						{doc.warning ? (
+							<span className="wmark" data-warning={doc.warning.code} title={doc.warning.message}>
+								<Icon name="warn" size="xs" />
+								<span className="sr">, can't be opened: {doc.warning.message}</span>
+							</span>
+						) : null}
+						{live ? <DocMarksView file={doc.file} compact lock={false} /> : null}
+						{live ? <CardLock file={doc.file} sr /> : null}
+					</span>
+				</span>
+				{props.captions.length ? (
+					<span id={`${id}-c`} className="card-cs">
+						{props.captions.map((c) => {
+							const text = cellText(doc, c, props.edited, props.refs);
+							return text ? (
+								<span key={c.key} className={`card-c${c.kind === 'address' ? ' mono' : ''}`}>
+									{c.kind === 'edited' ? `Edited ${text}` : text}
+								</span>
+							) : null;
+						})}
+					</span>
+				) : null}
+			</span>
+		</button>
+	);
+}
+
+/** The picture: an `<img>` at the card's ratio from the listing's signed URLs, which fades in once it has loaded (at once if it already had). */
+function Picture({ card }: { card: CardPicture }) {
+	return (
+		<span className="ph" data-card={card.kind}>
+			<img
+				key={card.src}
+				className="ph-img card-img"
+				src={card.src}
+				srcSet={`${card.src} 1x, ${card.src2x} 2x`}
+				alt={card.alt}
+				loading="lazy"
+				decoding="async"
+				style={card.kind === 'image' && card.position ? { objectPosition: card.position } : undefined}
+				ref={(img) => {
+					if (img?.complete && img.naturalWidth > 0) img.classList.add('in', 'now');
+				}}
+				onLoad={(e) => e.currentTarget.classList.add('in')}
+			/>
+			{card.kind === 'clip' ? (
+				<span className="pbadge" title="A clip’s poster">
+					<Icon name="play" />
+					{fmtDur(card.duration)}
+				</span>
+			) : null}
+		</span>
+	);
+}
+
+/** Someone else's lock, said on the picture's top right (`sr`: said only to a screen reader, in the title's marks, so the card's name carries it). */
+function CardLock({ file, sr = false }: { file: string; sr?: boolean }) {
+	const editor = useEditor();
+	const editing = useStore(editor.marks, (all) => all.get(file)?.editing ?? null);
+	if (!editing) return null;
+	if (sr) return <span className="sr">, {displayName(editing)} is editing</span>;
+	return (
+		<span className="chip lock card-lock" data-mark="editing" aria-hidden="true">
+			<Avatar person={editing} size="sm" />
+			{displayName(editing)} is editing
+		</span>
+	);
+}