caracms 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,91 @@
+/**
+ * The drill-down pane (M2 → the drill-down sidebar): documents → a document → a
+ * block, with a collection's own level beside documents (Decision 9). The levels you
+ * came from stack above as tabs; back and Esc go up a level (App.tsx handles Esc).
+ *
+ * Each level is its own file under ./levels, rendered inside a `.side-level` (a
+ * flex column, so a level's .trail / .side-body / .side-foot sit as in the mockup), so Phase 3 (the block level) and
+ * Phase 4 (the documents, collection and document levels) can each replace theirs
+ * without touching this frame. LEVELS maps a level to its component.
+ */
+import { useEffect, useRef, type ComponentType } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import type { PaneLevel } from '../editor.ts';
+import { BlockLevel } from './levels/BlockLevel.tsx';
+import { CollectionLevel } from './levels/CollectionLevel.tsx';
+import { DocumentLevel } from './levels/DocumentLevel.tsx';
+import { DocumentsLevel } from './levels/DocumentsLevel.tsx';
+import { MediaLevel } from './levels/MediaLevel.tsx';
+import { SubmissionsLevel } from './levels/SubmissionsLevel.tsx';
+
+export const LEVELS: Record<PaneLevel, ComponentType> = {
+	documents: DocumentsLevel,
+	collection: CollectionLevel,
+	document: DocumentLevel,
+	block: BlockLevel,
+	// M5b: the library (Site-wide → Media), and a slot's picker in place of the block's fields.
+	media: MediaLevel,
+	// M6: the inbox (Site-wide → Submissions).
+	submissions: SubmissionsLevel,
+};
+
+/**
+ * Marks a `.side-body` as scrolling for a moment after each scroll, so its thin
+ * scrollbar shows while it moves as well as on hover (editor.css). Scroll events
+ * don't bubble, so the pane listens in the capture phase.
+ */
+function useScrollingMark(ref: { current: HTMLElement | null }) {
+	useEffect(() => {
+		const root = ref.current;
+		if (!root) return;
+		const timers = new Map<Element, ReturnType<typeof setTimeout>>();
+		const onScroll = (event: Event) => {
+			const el = event.target;
+			if (!(el instanceof HTMLElement) || !el.classList.contains('side-body')) return;
+			el.dataset.scrolling = '';
+			clearTimeout(timers.get(el));
+			timers.set(
+				el,
+				setTimeout(() => {
+					delete el.dataset.scrolling;
+					timers.delete(el);
+				}, 800),
+			);
+		};
+		root.addEventListener('scroll', onScroll, { capture: true, passive: true });
+		return () => {
+			root.removeEventListener('scroll', onScroll, { capture: true });
+			timers.forEach((t) => clearTimeout(t));
+		};
+	}, [ref]);
+}
+
+export function Pane() {
+	const editor = useEditor();
+	const side = useRef<HTMLElement>(null);
+	useScrollingMark(side);
+	const level = useStore(editor.view, (v) => v.level);
+	const blockKey = useStore(editor.view, (v) => v.block);
+	const hasBlock = useStore(editor.doc.state, (s) => (blockKey ? s.document.blocks.some((b) => b.key === blockKey) : false));
+	// A form (M5a) has no block level: its fields are on its document level.
+	const form = useStore(editor.doc.state, (s) => s.document.kind !== 'sections');
+	// A block that's gone (removed, or another document opened) falls back to its document.
+	const shown: PaneLevel = level === 'block' && (!hasBlock || form) ? 'document' : level;
+	const Level = LEVELS[shown];
+	const Documents = LEVELS.documents;
+	// The documents level stays mounted (hidden when it isn't shown): going up is instant,
+	// it keeps its own state (a filter, scroll), and its Pages groups are in the server's
+	// HTML as the cookie says (Decision 20; Verify 1).
+	return (
+		<aside ref={side} className="side" id="side" aria-label="Documents, blocks and fields" data-level={shown}>
+			<div className="side-level" data-pane-level="documents" hidden={shown !== 'documents'}>
+				<Documents />
+			</div>
+			{shown !== 'documents' ? (
+				<div className="side-level" data-pane-level={shown}>
+					<Level />
+				</div>
+			) : null}
+		</aside>
+	);
+}

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

@@ -0,0 +1,123 @@
+/**
+ * The block level (Phase 3; the mockup's blockView): one block's fields, with the
+ * levels you came from stacked above, and back. (The "1 of 5" stepper went in the
+ * pre-M7 polish: the block list and the preview are how you move between blocks.)
+ *
+ * The fields (Decision 12), each in a field frame (fields/FieldFrame.tsx): text,
+ * one line or several (also typed on the page), the lockup (main lines, phone
+ * lines, the warnings; edited here only) and select; and M5a's (Decision 2): rich
+ * text, link, buttons, toggle, number, date, list and reference, all edited here
+ * (M5a Decision 13). They're mounted through a field host (fields/host.tsx), the
+ * same way a fields document's form mounts them. On Phone, a block with a lockup
+ * says that changes show at every width, except a heading's phone lines.
+ *
+ * An unknown block (Decision 21) shows Phase 4's panel: what's kept, and Remove.
+ *
+ * A field is changed with `editor.doc.setField(key, field, value)`; the preview
+ * re-renders and the keeper writes it (document-store.ts).
+ */
+import { useMemo, type ReactNode } from 'react';
+import { own } from '../../../../document.ts';
+import { titleCase } from '../../../../fields.ts';
+import { UnknownBlockPanel } from '../../block-list/UnknownBlock.tsx';
+import { sharedOf } from '../../block-list/summary.ts';
+import { useEditor, useStore } from '../../context.tsx';
+import { FieldControl } from '../../fields/FieldControl.tsx';
+import { blockHost, FieldHostProvider, rawBlock } from '../../fields/host.tsx';
+import { Icon } from '../../shell/Icons.tsx';
+import { blockLabel } from '../../state/document-store.ts';
+import { CurrentHead, DocumentsTab, GlobalNotes, LevelTab, RecentStrip, Trail } from '../parts.tsx';
+import { DocNotices, ReadOnlyChip } from '../../live/notices.tsx';
+
+export function BlockLevel() {
+	const editor = useEditor();
+	const session = useStore(editor.doc.state);
+	const key = useStore(editor.view, (v) => v.block);
+	const width = useStore(editor.view, (v) => v.width);
+	// Under a lock, with held edits, or signed out: every field disabled (M4 Decision 9; the mockup's #locked-block).
+	const readOnly = useStore(editor.access, (a) => a.readOnly);
+	const documents = useStore(editor.documents);
+	const { document, entry } = session;
+	const index = document.blocks.findIndex((b) => b.key === key);
+	const block = document.blocks[index];
+	const raw = block ? rawBlock(session.base, block.source) : undefined;
+	const host = useMemo(() => (key ? blockHost(editor, key, raw, readOnly) : null), [editor, key, raw, readOnly]);
+	if (!block || !host) return null;
+	const n = document.blocks.length;
+	const title = document.title || entry.label;
+	// A shared entry that renders (M5a Decision 8) is named by its shared block, and marked Shared.
+	const shared = sharedOf(editor.site, documents, block);
+	const nameOf = (b: typeof block) => sharedOf(editor.site, documents, b)?.label ?? blockLabel(editor.site, b);
+	const fields = block.known ? Object.entries(own(editor.site.blocks, block.type)?.fields ?? {}) : [];
+	// A lockup at the top level or inside a group (`left.heading`).
+	const hasLockup = fields.some(([, f]) => f.kind === 'lockup' || (f.kind === 'group' && Object.values(f.fields).some((g) => g.kind === 'lockup')));
+	return (
+		<>
+			<Trail>
+				<DocumentsTab />
+				<LevelTab name={title} kind="Blocks" count={`${n} block${n === 1 ? '' : 's'}`} onClick={() => editor.goTo('document')} />
+				<CurrentHead
+					back={{ label: `Back to ${title}`, onClick: () => editor.goTo('document') }}
+					crumb={title}
+					title={nameOf(block)}
+					chips={
+						<>
+							{shared ? <span className="chip shared">Shared</span> : null}
+							<ReadOnlyChip />
+						</>
+					}
+				/>
+			</Trail>
+			<div className="side-body block-level" data-block-key={block.key}>
+				<GlobalNotes />
+				<DocNotices />
+				{width === 'phone' && hasLockup && !readOnly ? (
+					<div className="note phone">
+						<Icon name="phone" />
+						<div>
+							<p>Changes show at every width, except a heading's phone lines.</p>
+						</div>
+					</div>
+				) : null}
+				{!block.known ? (
+					<UnknownBlockPanel block={block} />
+				) : (
+					<Fields live={editor.mode === 'live'} readOnly={readOnly}>
+						{/* M6c (G8): the block's own help, at the top of its level. */}
+						<BlockHelp help={own(editor.site.blocks, block.type)?.help} />
+						{fields.length === 0 ? <p className="field-help">This block has nothing to set.</p> : null}
+						<FieldHostProvider host={host}>
+							{fields.map(([name, field]) => (
+								<FieldControl key={`${block.key}:${name}`} name={name} label={field.label ?? titleCase(name)} field={field} value={block.data[name]} lockupIndex={index} />
+							))}
+						</FieldHostProvider>
+					</Fields>
+				)}
+			</div>
+			<RecentStrip />
+		</>
+	);
+}
+
+/** M6c (G8): a block's help (its config's `help`), plain text at the top of its sidebar level. */
+export function BlockHelp({ help }: { help: string | undefined }) {
+	return help ? (
+		<p className="field-help block-help" data-block-help="">
+			{help}
+		</p>
+	) : null;
+}
+
+/**
+ * The fields' wrapper. Live mode (M4 Decision 9): a fieldset with no box of its own,
+ * disabled while the document is read-only, so every control in it is. Local mode: no
+ * wrapper, as in M3.
+ */
+function Fields({ live, readOnly, children }: { live: boolean; readOnly: boolean; children: ReactNode }) {
+	if (!live) return <>{children}</>;
+	return (
+		<fieldset className="ro-fields" disabled={readOnly} data-read-only={readOnly ? '' : undefined}>
+			{children}
+		</fieldset>
+	);
+}

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

@@ -0,0 +1,115 @@
+/**
+ * A collection's own level (Decision 9; the mockup's #collection and
+ * #collection-empty): the documents level stacked above, a header with the
+ * collection's name, count and **+ New**, its own filter, and the list. An empty
+ * collection's empty state lives here.
+ *
+ * Nesting is Pages only: a collection here is a flat list, alphabetical by title
+ * (the reader's order). **+ New** (M5a Decision 11) opens the New dialog
+ * (documents/dialogs.tsx). Shared blocks (M5a; the mockup's #shared-list) have their
+ * own level here too: each row says where it's used, and + New asks for a block type
+ * and a name.
+ *
+ * Pre-M7 polish: the stage shows the same collection as a table (collections/
+ * CollectionTable.tsx). The list here is one view with it: the same find (either box),
+ * the table's filters and its order.
+ */
+import { useEditor, useStore } from '../../context.tsx';
+import { Icon } from '../../shell/Icons.tsx';
+import { DocRow } from '../../nav/DocRow.tsx';
+import { tableColumns, viewRows } from '../../collections/table.ts';
+import { useRefIndex, useTableView } from '../../collections/CollectionTable.tsx';
+import { CurrentHead, DocumentsTab, GlobalNotes, RecentStrip, Trail } from '../parts.tsx';
+import { usedOnLine } from '../../block-list/summary.ts';
+import { PAGELESS_SUB, singular } from '../../documents/actions.ts';
+import { openDialog } from '../../documents/dialogs.tsx';
+
+
+export function CollectionLevel() {
+	const editor = useEditor();
+	const name = useStore(editor.view, (v) => v.collection);
+	const documents = useStore(editor.documents);
+	// One view with the stage's table (pre-M7 polish): the same find, filters and order.
+	const [view, update] = useTableView(name ?? '');
+	const refs = useRefIndex();
+	const query = view.query;
+	const setQuery = (q: string) => update({ query: q });
+	const signedOut = useStore(editor.access, (a) => a.signedOut);
+	const collection = editor.site.collections.find((c) => c.name === name);
+	if (!collection) return null;
+	const docs = documents.filter((d) => d.collection === collection.name);
+	const shown = viewRows(docs, tableColumns(collection), view, refs);
+	const what = collection.label;
+	const shared = collection.kind === 'shared';
+	const one = singular(collection);
+	const readOnly = !!signedOut;
+	const create = () => openDialog(editor, shared ? { kind: 'new-shared' } : { kind: 'new', collection: collection.name });
+	return (
+		<>
+			<Trail>
+				<DocumentsTab />
+				<CurrentHead
+					back={{ label: 'Back to documents', onClick: () => editor.goTo('documents') }}
+					title={collection.label}
+					chips={<span className="n-chip">{docs.length}</span>}
+					sub={shared ? undefined : collection.urlBase === null ? PAGELESS_SUB : <span className="mono">{`${editor.site.host}${collection.urlBase}…`}</span>}
+					menu={
+						<button type="button" className="btn sm" data-act="new-document" disabled={readOnly} onClick={create}>
+							<Icon name="plus" size="sm" />
+							New
+						</button>
+					}
+				/>
+			</Trail>
+			<div className="side-body" data-collection={collection.name}>
+				<GlobalNotes />
+				{docs.length === 0 ? (
+					<div className="empty" data-empty="collection">
+						<b>{shared ? 'No shared blocks yet' : `Nothing in ${what} yet`}</b>
+						{!shared && collection.urlBase === null ? <span>No pages of their own.</span> : null}
+						<button type="button" className="btn sm" disabled={readOnly} onClick={create}>
+							<Icon name="plus" size="sm" />
+							{shared ? 'New shared block' : `New ${one}`}
+						</button>
+					</div>
+				) : (
+					<>
+						<div className="find" style={{ marginTop: 0 }}>
+							<Icon name="search" />
+							<input
+								className="input"
+								type="search"
+								placeholder={shared ? 'Find a shared block' : `Find in ${what}`}
+								aria-label={shared ? 'Find a shared block' : `Find in ${what}`}
+								data-filter="collection"
+								autoComplete="off"
+								spellCheck={false}
+								value={query}
+								onChange={(e) => setQuery(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter') {
+										const first = shown.find((d) => !d.warning);
+										if (first) void editor.openDocument({ collection: first.collection, path: first.path });
+									} else if (e.key === 'Escape' && query) {
+										e.preventDefault();
+										setQuery('');
+									}
+								}}
+							/>
+						</div>
+						<div id="coll-list">
+							{shown.length ? (
+								shown.map((d) => <DocRow key={d.path} doc={d} extra={shared ? <span>{usedOnLine(d)}</span> : null} />)
+							) : (
+								<p className="no-hits" role="status">
+									<b>{Object.keys(view.filters).length > 0 ? `Nothing in ${what} matches the table's filters` : `Nothing in ${what} called “${query.trim()}”`}</b>
+								</p>
+							)}
+						</div>
+					</>
+				)}
+			</div>
+			<RecentStrip />
+		</>
+	);
+}

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

@@ -0,0 +1,93 @@
+/**
+ * The document level: the open document's blocks (the mockup's #blocks, #picker,
+ * #removed, #drag, #unknown, #empty-page). The block list is client/block-list/
+ * BlockList.tsx; the add-block picker (Picker.tsx) takes this level's place while
+ * it's open; an empty page invites adding the first block.
+ *
+ * A nested page shows its parent in front of its title ("Services / Branding").
+ * The page menu: View on the live site, Delete page… (documents/DocMenu.tsx; M5a).
+ *
+ * M5a: a list-of-fields document, a shared block and Site Settings are forms, each
+ * with its own level (FormLevel.tsx); this picks by the document's kind.
+ */
+import { useEditor, useStore } from '../../context.tsx';
+import { Icon } from '../../shell/Icons.tsx';
+import { BlockList } from '../../block-list/BlockList.tsx';
+import { openPicker, pickerAt } from '../../block-list/link.ts';
+import { Picker } from '../../block-list/Picker.tsx';
+import { CurrentHead, DocumentsTab, GlobalNotes, parentLabel, RecentStrip, Trail } from '../parts.tsx';
+import { DocNotices, ReadOnlyChip } from '../../live/notices.tsx';
+import { DocMenu } from '../../documents/DocMenu.tsx';
+import { FieldsDocumentLevel, SettingsLevel, SharedDocumentLevel } from './FormLevel.tsx';
+import { SeoGroup } from '../../fields/SeoGroup.tsx';
+import { HiddenToggle } from '../../fields/HiddenToggle.tsx';
+import { PageFields } from '../../fields/PageFields.tsx';
+
+/** The open document's level, by its kind (M5a): a section builder's blocks, or a form. */
+export function DocumentLevel() {
+	const editor = useEditor();
+	const kind = useStore(editor.doc.state, (s) => s.document.kind);
+	if (kind === 'fields') return <FieldsDocumentLevel />;
+	if (kind === 'shared') return <SharedDocumentLevel />;
+	if (kind === 'settings') return <SettingsLevel />;
+	return <SectionsLevel />;
+}
+
+function SectionsLevel() {
+	const editor = useEditor();
+	const ref = useStore(editor.doc.state, (s) => s.ref);
+	const entry = useStore(editor.doc.state, (s) => s.entry);
+	const title = useStore(editor.doc.state, (s) => s.document.title || s.entry.label);
+	const empty = useStore(editor.doc.state, (s) => s.document.blocks.length === 0);
+	const documents = useStore(editor.documents);
+	const picking = useStore(pickerAt(editor));
+	const readOnly = useStore(editor.access, (a) => a.readOnly);
+	const waiting = useStore(editor.liveState, (s) => s.status?.waiting);
+	if (picking !== null) return <Picker at={picking} />;
+	const collection = editor.site.collections.find((c) => c.name === ref.collection);
+	const url = entry.url ?? '';
+	const isNew = (waiting ?? []).some((w) => w.collection === ref.collection && w.path === ref.path && w.change === 'new' && !w.movedFrom);
+	return (
+		<>
+			<Trail>
+				<DocumentsTab />
+				<CurrentHead
+					back={{ label: 'Back to documents', onClick: () => editor.goTo('documents') }}
+					crumb={collection?.nested ? parentLabel(ref, documents) : collection?.label}
+					title={title}
+					chips={
+						<>
+							<span className="chip kind">{collection?.nested ? 'Page' : (collection?.label ?? ref.collection)}</span>
+							<ReadOnlyChip />
+							{isNew ? <span className="chip waiting">New</span> : null}
+						</>
+					}
+					sub={<span className="mono">{`${editor.site.host}${url === '/' ? '' : url}`}</span>}
+					menu={<DocMenu label="Page actions" />}
+				/>
+			</Trail>
+			<div className="side-body" data-document={`${ref.collection}/${ref.path}`}>
+				<GlobalNotes />
+				<DocNotices />
+				{empty ? (
+					<div className="empty" data-empty="page" style={{ padding: 'var(--space-4)' }}>
+						<b>No blocks yet</b>
+						<button type="button" className="btn ink" style={{ marginTop: 'var(--space-2)' }} disabled={readOnly} onClick={() => openPicker(editor, 0)}>
+							<Icon name="plus" size="sm" />
+							Add the first block
+						</button>
+					</div>
+				) : (
+					<BlockList />
+				)}
+				{/* M6c (G2): the page's own fields, when its collection has some, under its blocks. */}
+				<PageFields />
+				{/* M9 Decision 7: hidden from the site, or not. */}
+				<HiddenToggle />
+				{/* M6 Decision 13: the page's own Search and sharing, under its blocks. */}
+				<SeoGroup />
+			</div>
+			<RecentStrip />
+		</>
+	);
+}