wiki-formant 0.50.0 → 0.51.0

package/README.md

@@ -668,16 +668,19 @@ The language list defaults to `CODE_LANGS` and `DEFAULT_LANG` from `wiki-formant
 
 `createHeadingIds({ slug })` decorates each heading in the editor with the id its published copy will carry, through `uniqueHeadingId` — the dedupe `injectHeadingIds` uses — so a rail listing headings mid-edit links to the anchors readers will get. `uploadImageTo('/api/upload')` is the `uploadImage` two editors had written identically.
 
-`toolbarActions([...])` picks the formatting commands, in order, with the labels a screen reader announces — two toolbars titled buttons with the internal key, so one said "codeBlock". Render each through `ToolbarButton` (named, and `aria-pressed`, since these are toggles), and run a table command with `runTableAction`. Upload and embed stay with the caller; they are the parts that differ.
-
-`useUrlPrompt(editor, { resolveMapUrl })` is the link and embed address field under a toolbar, in place of a `window.prompt` that blocks the page and cannot show the link the cursor is in. Three editors had written it and one still used the prompt; only one copy both opened a link field on the current address and unlinked on an emptied one. The hook carries both, closes the field when the editor it serves changes (a toolbar shared between blocks would otherwise apply it to the wrong one), and leaves the markup to you.
+`toolbarActions([...])` picks the formatting commands, in order, with the labels a screen reader announces — two toolbars titled buttons with the internal key, so one said "codeBlock". `WikiToolbar` lays them out the way three wikis had each assembled them by hand: the format buttons, Remove link while the cursor is in a link, upload and embed, the insert buttons, and the table controls while the cursor is in a table. Every button is a `ToolbarButton` (named, and `aria-pressed`, since these are toggles); the link button opens the address field and reads as on while it is open. Which buttons, icons and classes are yours; a toolbar shaped differently builds from `ToolbarButton` and `runTableAction` directly.
 
 ```tsx
-const url = useUrlPrompt(editor, { resolveMapUrl });
-<ToolbarButton label="Link" pressed={url.kind === 'link'} onPress={() => url.toggle('link')}>…</ToolbarButton>
-{url.kind && <input autoFocus value={url.value} onChange={e => url.setValue(e.target.value)} onKeyDown={url.onKeyDown} />}
+<WikiToolbar editor={editor} isActive={isActive} prompt={url} actions={FORMAT} trailing={INSERT} onUpload={triggerUpload} embed
+  icons={{ ...ICONS, unlink: <Unlink />, upload: <Upload />, embed: <Globe /> }}
+  classNames={{ toolbar: 'toolbar', button: 'toolbar-btn', pressed: 'toolbar-btn-on', divider: 'toolbar-divider' }} />
+<UrlPromptField prompt={url} classNames={{ row: 'row', input: 'input', apply: 'btn', cancel: 'btn-quiet' }} />
 ```
 
+`useUrlPrompt(editor, { resolveMapUrl })` is the link and embed address field under a toolbar, in place of a `window.prompt` that blocks the page and cannot show the link the cursor is in. Three editors had written it and one still used the prompt; only one copy both opened a link field on the current address and unlinked on an emptied one. The hook carries both, closes the field when the editor it serves changes (a toolbar shared between blocks would otherwise apply it to the wrong one), and leaves the markup to you.
+
+`UrlPromptField` is its markup: an address input on which Enter applies and Escape closes, and Apply and Cancel.
+
 A link is stored as its `href` and the `link` class, nothing else. Stock Tiptap writes `target="_blank" rel="noopener noreferrer nofollow"` onto every link, internal ones included, which on a site throws away its own link equity and opens in-site navigation in new tabs. Whether a link is external depends on the host serving the page, so `normaliseLinks` decides it at render time. A legacy link loses both attributes the next time its page is saved.
 
 The redirect resolves through the wiki's own route, because the editor cannot read it cross-origin. `resolveMapUrl` is the client half and `resolveMapHandler` the whole route: exact shortener hosts, one hop, an allowlisted landing host, a timeout, and your sign-in check as `authorize`. One of the two copies it replaced matched `goo.gl` as a substring and followed every redirect for anyone who asked.
@@ -686,6 +689,36 @@ The redirect resolves through the wiki's own route, because the editor cannot re
 export const GET = resolveMapHandler({ authorize: async () => !!(await currentUser()) });
 ```
 
+## Block editor
+
+`wiki-formant/block-editor` is the block list an author edits and the fields of the core types. Three wikis had written it, 500 to 700 lines each, and had drifted: one dropped a stored code language its list did not name, one let a typed count run past the row cap, one named every remove button "Remove", one never marked the block being edited. The behaviour is here once; the look arrives as a kit.
+
+```tsx
+const KIT: BlockEditorKit = {
+  classNames: { list: 'stack', card: 'block-card', action: 'icon-btn', input: 'input', row: 'row', … },
+  icons: { add: <Plus />, up: <ChevronUp />, down: <ChevronDown />, duplicate: <Copy />, remove: <Trash2 /> },
+  Choice: ToggleGroup,   // optional: a <select> otherwise
+  Menu: PopoverMenu,     // optional: an inline panel otherwise
+};
+const SCHEMA: BlockSchema<Block> = {
+  meta: type => BLOCK_META[type], create: createBlock, duplicate: duplicateBlock,
+  types: PAGE_TYPES, nestedTypes: ATOMIC_TYPES, single: ['infobox'],
+  renderBody: (block, onUpdate) => {
+    switch (block.type) {
+      case 'codeTabs': return <CodeTabsFields block={block} onUpdate={onUpdate} />;
+      case 'columns': return <ColumnsFields block={block} onUpdate={onUpdate} />;
+      case 'daoTimeline': return <DaoTimelineEdit block={block} onUpdate={onUpdate} />;
+      …
+    }
+  },
+};
+<BlockEditor blocks={blocks} onChange={setBlocks} schema={SCHEMA} kit={KIT} />
+```
+
+The dispatch stays a `switch` over the wiki's own union, so a new type is a compile error there. `CodeTabsFields`, `StatsFields`, `ReferencesFields`, `LinkGridFields`, `BannerFields`, `PageListFields`, `ColumnsFields` and `InfoboxFields` take the core blocks `wiki-formant/blocks` declares; the two containers hold the same list, offering `nestedTypes`. `Field`, `Choice` and `LimitField` are exported for a wiki's own editors, so its native types wear the same kit. A card is marked `data-selected` while it is being edited and `data-nested` inside a container; a type the build does not know is shown by its raw type and carried through untouched. Keep the kit and the schema stable — a module constant or a `useMemo` — since both reach every card through context, and a fresh one re-renders every card on every keystroke.
+
+The core blocks are `ContentBlock`, `CodeTabsBlock`, `StatsBlock`, `LinkGridBlock`, `ReferencesBlock`, `BannerBlock`, `ColumnsBlock<A>` and `InfoboxBlock<A>`, `A` being the wiki's atomic union. A wiki builds its union from them beside its own `recentPages` and `pageList`, which hold its own page rows or a section, and its native types.
+
 ## Analytics
 
 Page views and events, counted in the site's own Postgres instead of a hosted

package/dist/block-editor.d.ts

@@ -0,0 +1,203 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+import { type BannerBlock, type CodeTabsBlock, type ColumnsBlock, type InfoboxBlock, type LinkGridBlock, type ReferencesBlock, type StatsBlock } from './blocks.js';
+export interface BlockEditorClassNames {
+    /** A page's block list. */
+    list?: string;
+    /** A column's or an infobox's. */
+    nestedList?: string;
+    /** The line an empty list shows. */
+    empty?: string;
+    /** A block. It carries `data-selected` while it is the one being edited, and `data-nested` inside a container. */
+    card?: string;
+    cardHead?: string;
+    cardLabel?: string;
+    cardActions?: string;
+    /** Every icon button: a card's actions, add-below, remove. */
+    action?: string;
+    /** The Add block button at the foot of a list. */
+    addBlock?: string;
+    /** The default `Add` button: Add tab, Add link. */
+    add?: string;
+    /** The default `Menu`'s wrapper and panel. */
+    menuAnchor?: string;
+    menu?: string;
+    menuItem?: string;
+    menuText?: string;
+    menuHint?: string;
+    /** A vertical group of fields. */
+    stack?: string;
+    /** A row of inputs ending in a remove button. */
+    row?: string;
+    /** A group inside a block: a link group, a column. */
+    nest?: string;
+    /** What holds the columns of a columns block. */
+    columns?: string;
+    /** The default `Field`'s label. */
+    field?: string;
+    input?: string;
+    /** Added to a code tab's language select. */
+    lang?: string;
+    /** Added to a code tab's textarea. */
+    code?: string;
+    /** Added to a stat's figure input. */
+    figure?: string;
+    /** Added to a count input. */
+    number?: string;
+    /** Row numbers, hints and notes. */
+    muted?: string;
+}
+export interface BlockEditorIcons {
+    add: ReactNode;
+    up: ReactNode;
+    down: ReactNode;
+    duplicate: ReactNode;
+    remove: ReactNode;
+}
+export interface FieldProps {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}
+/** One of a few values: a toggle group, a chip row or a select. */
+export interface ChoiceProps {
+    label: string;
+    value: string;
+    options: ReadonlyArray<{
+        value: string;
+        label: string;
+    }>;
+    onChange: (value: string) => void;
+}
+/**
+ * The add-block menu around its trigger. `trigger` is the button the editor
+ * drew; a popover takes it as its anchor, an inline panel renders it first.
+ */
+export interface MenuProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactElement;
+    /** The icon in a block's head that adds under it, rather than the list's foot button. */
+    below: boolean;
+    children: ReactNode;
+}
+export interface AddProps {
+    onPress: () => void;
+    children: ReactNode;
+}
+export interface BlockEditorKit {
+    classNames: BlockEditorClassNames;
+    icons: BlockEditorIcons;
+    Field?: ComponentType<FieldProps>;
+    Choice?: ComponentType<ChoiceProps>;
+    Menu?: ComponentType<MenuProps>;
+    Add?: ComponentType<AddProps>;
+}
+export type EditableBlock = {
+    id: string;
+    type: string;
+};
+export interface BlockMeta {
+    label: string;
+    icon?: ReactNode;
+    /** The line under the label in the add menu. */
+    hint?: string;
+}
+export interface BlockSchema<B extends EditableBlock> {
+    /** Undefined for a type this build does not know: it is shown by its raw type and kept as it is. */
+    meta: (type: B['type']) => BlockMeta | undefined;
+    create: (type: B['type']) => B;
+    /** A copy with fresh ids at every level. */
+    duplicate: (block: B) => B;
+    /**
+     * A block's fields. The wiki's own `switch`, so it stays exhaustive over its
+     * union. Null for a type with no fields here: the card says it is kept as is.
+     */
+    renderBody: (block: B, onUpdate: (next: B) => void) => ReactNode;
+    /** What a page's add menus offer, in their order. */
+    types: readonly B['type'][];
+    /** What a column's and an infobox's offer: never a container. */
+    nestedTypes: readonly B['type'][];
+    /** Types a list holds at most one of, such as an infobox an article lifts into its rail. */
+    single?: readonly B['type'][];
+}
+export interface BlockEditorProps<B extends EditableBlock> {
+    blocks: B[];
+    onChange: (blocks: B[]) => void;
+    schema: BlockSchema<B>;
+    kit: BlockEditorKit;
+}
+/**
+ * A page's blocks, edited: each in a card with its add-below, move, duplicate
+ * and delete controls, and an add menu at the foot. Columns and infoboxes hold
+ * the same list, offering `nestedTypes`.
+ */
+export declare function BlockEditor<B extends EditableBlock>({ blocks, onChange, schema, kit }: BlockEditorProps<B>): import("react").JSX.Element;
+/** A labelled field in the kit's style, for a wiki's own block editors as well as these. */
+export declare function Field(props: FieldProps): import("react").JSX.Element;
+/** One of a few values in the kit's style; a `<select>` when the kit has none. */
+export declare function Choice(props: ChoiceProps): import("react").JSX.Element;
+/** A count clamped to 1…`MAX_BLOCK_ROWS`, the cap the write path enforces. */
+export declare function LimitField({ label, value, onChange }: {
+    label?: string;
+    value: number | undefined;
+    onChange: (n: number) => void;
+}): import("react").JSX.Element;
+/**
+ * `code` is source text, never HTML: every view escapes it. A stored language
+ * outside `langs` stays selectable rather than reading as the first option and
+ * being overwritten on the next save.
+ */
+export declare function CodeTabsFields({ block, onUpdate, langs, defaultLang, }: {
+    block: CodeTabsBlock;
+    onUpdate: (block: CodeTabsBlock) => void;
+    langs?: readonly string[];
+    defaultLang?: string;
+}): import("react").JSX.Element;
+export declare function StatsFields({ block, onUpdate, hint }: {
+    block: StatsBlock;
+    onUpdate: (block: StatsBlock) => void;
+    hint?: string;
+}): import("react").JSX.Element;
+/** `title` is the heading a references block shows when it stores none, and `noun` what one row is called. */
+export declare function ReferencesFields({ block, onUpdate, title, noun, hint, }: {
+    block: ReferencesBlock;
+    onUpdate: (block: ReferencesBlock) => void;
+    title?: string;
+    noun?: string;
+    hint?: string;
+}): import("react").JSX.Element;
+export declare function LinkGridFields({ block, onUpdate }: {
+    block: LinkGridBlock;
+    onUpdate: (block: LinkGridBlock) => void;
+}): import("react").JSX.Element;
+export declare function BannerFields({ block, onUpdate }: {
+    block: BannerBlock;
+    onUpdate: (block: BannerBlock) => void;
+}): import("react").JSX.Element;
+/** A page a page list can pick. `detail` is shown after the title, such as its section. */
+export interface PageOption {
+    id: string;
+    title: string;
+    detail?: string;
+}
+/**
+ * The picked pages in their order, each movable and removable. With `pages`
+ * the rest are offered in a picker; without, an id is typed in.
+ */
+export declare function PageListFields<B extends {
+    pageIds: string[];
+}>({ block, onUpdate, pages }: {
+    block: B;
+    onUpdate: (block: B) => void;
+    pages?: readonly PageOption[];
+}): import("react").JSX.Element;
+/** Two to four columns, each a block list offering the schema's `nestedTypes`. */
+export declare function ColumnsFields<A extends EditableBlock>({ block, onUpdate }: {
+    block: ColumnsBlock<A>;
+    onUpdate: (block: ColumnsBlock<A>) => void;
+}): import("react").JSX.Element;
+/** An infobox's blocks, offering the schema's `nestedTypes`. */
+export declare function InfoboxFields<A extends EditableBlock>({ block, onUpdate }: {
+    block: InfoboxBlock<A>;
+    onUpdate: (block: InfoboxBlock<A>) => void;
+}): import("react").JSX.Element;

package/dist/block-editor.js

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// block-editor.tsx — the block list an author edits, and the fields of the core
+// block types.
+//
+// Three wikis had written this, 500 to 700 lines each, and the copies had
+// drifted the way copies do: one dropped a stored code language that was not
+// in its list, one let a typed count run past the row cap, one named every
+// remove button "Remove", one never highlighted the block being edited. The
+// behaviour lives here once. The look does not: each wiki draws its inputs,
+// toggles and menus with its own design system, so those arrive as a KIT —
+// class names, icons, and four optional components — and the markup here is
+// bare semantic HTML wearing whatever the kit says.
+//
+// The dispatch stays with the wiki. `renderBody` is a `switch` over its own
+// closed union, as S4 of the workspace's STRUCTURE.md requires, so a new block
+// type is a compile error there; its cases hand the core types to the field
+// editors below and draw its native types themselves.
+//
+// The kit and the schema reach every nested list through context, which is
+// what lets a column or an infobox hold a list without being handed the whole
+// configuration. Keep both stable — a module constant or a `useMemo` — or every
+// card re-renders on every keystroke.
+import { createContext, memo, useCallback, useContext, useMemo, useState, } from 'react';
+import { BlockActions, useBlockOperations } from './react.js';
+import { CODE_LANGS, DEFAULT_LANG, } from './blocks.js';
+import { BANNER_VARIANTS } from './text.js';
+import { MAX_BLOCK_ROWS } from './validation.js';
+import { cx } from './html.js';
+const Context = createContext(null);
+function useEditorContext() {
+    const ctx = useContext(Context);
+    if (!ctx)
+        throw new Error('A block field editor must render inside <BlockEditor>.');
+    return ctx;
+}
+/**
+ * A page's blocks, edited: each in a card with its add-below, move, duplicate
+ * and delete controls, and an add menu at the foot. Columns and infoboxes hold
+ * the same list, offering `nestedTypes`.
+ */
+export function BlockEditor({ blocks, onChange, schema, kit }) {
+    const value = useMemo(() => ({ kit, schema: schema }), [kit, schema]);
+    return (_jsx(Context.Provider, { value: value, children: _jsx(BlockList, { blocks: blocks, onChange: onChange }) }));
+}
+function BlockList({ blocks, onChange, nested = false }) {
+    const { kit, schema } = useEditorContext();
+    const c = kit.classNames;
+    const ops = useBlockOperations(blocks, onChange, schema);
+    const base = nested ? schema.nestedTypes : schema.types;
+    // A string, so the offer is recomputed — and every card re-rendered — only
+    // when a single-use type comes or goes, not on every keystroke.
+    const held = (schema.single ?? []).filter(t => blocks.some(b => b.type === t)).join(' ');
+    const offered = useMemo(() => base.filter(t => !held.split(' ').includes(t)), [base, held]);
+    const insertNew = useCallback((type) => ops.insert(schema.create(type)), [ops.insert, schema]);
+    return (_jsxs("div", { className: nested ? c.nestedList : c.list, children: [blocks.length === 0 && _jsx("p", { className: c.empty, children: nested ? 'Empty.' : 'Nothing here yet. Add the first block.' }), blocks.map((block, i) => (_jsx(BlockCard, { block: block, index: i, total: blocks.length, selected: ops.selectedIndex === i, nested: nested, offered: offered, update: ops.update, move: ops.move, duplicate: ops.duplicate, remove: ops.remove, insert: ops.insert, select: ops.setSelectedIndex }, block.id))), _jsx(InsertMenu, { types: offered, onPick: insertNew })] }));
+}
+// Memoised on the list's ref-stable callbacks, so a keystroke in one block does
+// not re-render every other block's editor.
+const BlockCard = memo(function BlockCard({ block, index, total, selected, nested, offered, update, move, duplicate, remove, insert, select }) {
+    const { kit, schema } = useEditorContext();
+    const c = kit.classNames;
+    const onUpdate = useCallback((next) => update(index, next), [update, index]);
+    const onSelect = useCallback(() => select(index), [select, index]);
+    const meta = schema.meta(block.type);
+    const label = meta?.label ?? block.type;
+    const body = meta ? schema.renderBody(block, onUpdate) : null;
+    return (_jsxs("section", { className: c.card, "data-selected": selected || undefined, "data-nested": nested || undefined, onFocusCapture: onSelect, onClick: onSelect, children: [_jsxs("div", { className: c.cardHead, children: [_jsxs("span", { className: c.cardLabel, children: [meta?.icon, label] }), _jsxs("span", { className: c.cardActions, children: [_jsx(InsertMenu, { below: true, types: offered, onPick: type => insert(schema.create(type), index + 1) }), _jsx(BlockActions, { index: index, total: total, ops: { move, duplicate, remove }, icons: kit.icons, className: c.cardActions, buttonClassName: c.action, blockLabel: label })] })] }), body ?? _jsx("p", { className: c.muted, children: "Kept as it is \u2013 this editor has no fields for it." })] }));
+});
+function InsertMenu({ types, onPick, below = false }) {
+    const { kit, schema } = useEditorContext();
+    const c = kit.classNames;
+    const [open, setOpen] = useState(false);
+    const Menu = kit.Menu ?? InlineMenu;
+    const toggle = () => setOpen(o => !o);
+    const trigger = below ? (_jsx("button", { type: "button", className: c.action, title: "Add a block below", "aria-label": "Add a block below", "aria-expanded": open, onClick: toggle, children: kit.icons.add })) : (_jsxs("button", { type: "button", className: c.addBlock, "aria-expanded": open, onClick: toggle, children: [kit.icons.add, "Add block"] }));
+    return (_jsx(Menu, { open: open, onOpenChange: setOpen, trigger: trigger, below: below, children: types.map(type => {
+            const meta = schema.meta(type);
+            return (_jsxs("button", { type: "button", className: c.menuItem, onClick: e => {
+                    // Inside a card, a pick is not also a click on the card.
+                    e.stopPropagation();
+                    onPick(type);
+                    setOpen(false);
+                }, children: [meta?.icon, _jsxs("span", { className: c.menuText, children: [_jsx("span", { children: meta?.label ?? type }), meta?.hint && _jsx("span", { className: c.menuHint, children: meta.hint })] })] }, type));
+        }) }));
+}
+function InlineMenu({ open, trigger, children }) {
+    const c = useEditorContext().kit.classNames;
+    return (_jsxs("span", { className: c.menuAnchor, children: [trigger, open && _jsx("span", { className: c.menu, children: children })] }));
+}
+// ---- the kit's parts, resolved ----------------------------------------------
+/** A labelled field in the kit's style, for a wiki's own block editors as well as these. */
+export function Field(props) {
+    const { Field: Custom, classNames: c } = useEditorContext().kit;
+    if (Custom)
+        return _jsx(Custom, { ...props });
+    return (_jsxs("label", { className: c.field, children: [_jsx("span", { children: props.label }), props.children, props.hint && _jsx("small", { className: c.muted, children: props.hint })] }));
+}
+/** One of a few values in the kit's style; a `<select>` when the kit has none. */
+export function Choice(props) {
+    const { Choice: Custom, classNames: c } = useEditorContext().kit;
+    if (Custom)
+        return _jsx(Custom, { ...props });
+    return (_jsx(Field, { label: props.label, children: _jsx("select", { className: c.input, value: props.value, onChange: e => props.onChange(e.target.value), children: props.options.map(o => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) }));
+}
+function Add({ onPress, children }) {
+    const { Add: Custom, classNames: c, icons } = useEditorContext().kit;
+    if (Custom)
+        return _jsx(Custom, { onPress: onPress, children: children });
+    return (_jsxs("button", { type: "button", className: c.add, onClick: onPress, children: [icons.add, children] }));
+}
+function Remove({ label, onPress }) {
+    const { classNames: c, icons } = useEditorContext().kit;
+    return (_jsx("button", { type: "button", className: c.action, title: label, "aria-label": label, onClick: onPress, children: icons.remove }));
+}
+/** A text input. `optional` stores an emptied field as absent rather than `''`. */
+function TextInput({ label, value, onChange, placeholder = label, optional = false, type = 'text', className, }) {
+    const c = useEditorContext().kit.classNames;
+    return (_jsx("input", { type: type, className: cx(c.input, className), "aria-label": label, placeholder: placeholder, value: value ?? '', onChange: e => onChange(optional ? e.target.value.trim() ? e.target.value : undefined : e.target.value) }));
+}
+const replaceAt = (items, i, item) => items.map((x, j) => (j === i ? item : x));
+const removeAt = (items, i) => items.filter((_, j) => j !== i);
+const newId = () => crypto.randomUUID();
+// ---- the core blocks' fields -------------------------------------------------
+/** A count clamped to 1…`MAX_BLOCK_ROWS`, the cap the write path enforces. */
+export function LimitField({ label = 'How many', value, onChange }) {
+    const c = useEditorContext().kit.classNames;
+    return (_jsx(Field, { label: label, children: _jsx("input", { type: "number", min: 1, max: MAX_BLOCK_ROWS, className: cx(c.input, c.number), value: value ?? '', onChange: e => onChange(Math.min(MAX_BLOCK_ROWS, Math.max(1, Math.floor(Number(e.target.value)) || 1))) }) }));
+}
+/**
+ * `code` is source text, never HTML: every view escapes it. A stored language
+ * outside `langs` stays selectable rather than reading as the first option and
+ * being overwritten on the next save.
+ */
+export function CodeTabsFields({ block, onUpdate, langs = CODE_LANGS, defaultLang = DEFAULT_LANG, }) {
+    const c = useEditorContext().kit.classNames;
+    const tabs = block.tabs;
+    const set = (next) => onUpdate({ ...block, tabs: next });
+    return (_jsxs("div", { className: c.stack, children: [tabs.map((tab, i) => (_jsxs("div", { className: c.stack, children: [_jsxs("div", { className: c.row, children: [_jsx(TextInput, { label: "Tab label", value: tab.label, onChange: label => set(replaceAt(tabs, i, { ...tab, label: label ?? '' })) }), _jsx("select", { "aria-label": "Language", className: cx(c.input, c.lang), value: tab.language, onChange: e => set(replaceAt(tabs, i, { ...tab, language: e.target.value })), children: [...new Set([tab.language, ...langs])].map(l => (_jsx("option", { value: l, children: l }, l))) }), _jsx(Remove, { label: `Remove tab ${tab.label || i + 1}`, onPress: () => set(removeAt(tabs, i)) })] }), _jsx("textarea", { "aria-label": "Code", placeholder: "Code", rows: 6, spellCheck: false, className: cx(c.input, c.code), value: tab.code, onChange: e => set(replaceAt(tabs, i, { ...tab, code: e.target.value })) })] }, i))), _jsx(Add, { onPress: () => set([...tabs, { label: '', language: defaultLang, code: '' }]), children: "Add tab" })] }));
+}
+export function StatsFields({ block, onUpdate, hint }) {
+    const c = useEditorContext().kit.classNames;
+    const items = block.items;
+    const set = (next) => onUpdate({ ...block, items: next });
+    return (_jsxs("div", { className: c.stack, children: [_jsx(Choice, { label: "Per row", value: String(block.columns), options: ['2', '3', '4'].map(n => ({ value: n, label: n })), onChange: n => onUpdate({ ...block, columns: Number(n) }) }), items.map((item, i) => (_jsxs("div", { className: c.row, children: [_jsx(TextInput, { label: "Figure", className: c.figure, value: item.value, onChange: value => set(replaceAt(items, i, { ...item, value: value ?? '' })) }), _jsx(TextInput, { label: "What it counts", value: item.label, onChange: label => set(replaceAt(items, i, { ...item, label: label ?? '' })) }), _jsx(Remove, { label: `Remove figure ${i + 1}`, onPress: () => set(removeAt(items, i)) })] }, item.id))), _jsx(Add, { onPress: () => set([...items, { id: newId(), value: '', label: '' }]), children: "Add figure" }), hint && _jsx("small", { className: c.muted, children: hint })] }));
+}
+/** `title` is the heading a references block shows when it stores none, and `noun` what one row is called. */
+export function ReferencesFields({ block, onUpdate, title = 'References', noun = 'reference', hint, }) {
+    const c = useEditorContext().kit.classNames;
+    const items = block.items;
+    const set = (next) => onUpdate({ ...block, items: next });
+    return (_jsxs("div", { className: c.stack, children: [_jsx(Field, { label: "Heading", children: _jsx(TextInput, { label: "Heading", placeholder: title, optional: true, value: block.title, onChange: t => onUpdate({ ...block, title: t }) }) }), items.map((item, i) => (_jsxs("div", { className: c.row, children: [_jsxs("span", { className: c.muted, children: [i + 1, "."] }), _jsx(TextInput, { label: "Title, author, publisher", value: item.text, onChange: text => set(replaceAt(items, i, { ...item, text: text ?? '' })) }), _jsx(TextInput, { label: "Address", type: "url", placeholder: "https://", optional: true, value: item.url, onChange: url => set(replaceAt(items, i, { ...item, url })) }), _jsx(Remove, { label: `Remove ${noun} ${i + 1}`, onPress: () => set(removeAt(items, i)) })] }, item.id))), _jsxs(Add, { onPress: () => set([...items, { id: newId(), text: '' }]), children: ["Add ", noun] }), hint && _jsx("small", { className: c.muted, children: hint })] }));
+}
+export function LinkGridFields({ block, onUpdate }) {
+    const c = useEditorContext().kit.classNames;
+    const groups = block.groups;
+    return (_jsxs("div", { className: c.stack, children: [_jsx(Field, { label: "Intro (optional)", children: _jsx(TextInput, { label: "Intro", placeholder: "A paragraph before the groups", optional: true, value: block.intro, onChange: intro => onUpdate({ ...block, intro }) }) }), groups.map((group, gi) => {
+                const setGroup = (next) => onUpdate({ ...block, groups: replaceAt(groups, gi, next) });
+                return (_jsxs("div", { className: cx(c.nest, c.stack), children: [_jsxs("div", { className: c.row, children: [_jsx(TextInput, { label: "Heading", value: group.heading, onChange: heading => setGroup({ ...group, heading: heading ?? '' }) }), _jsx(Remove, { label: `Remove group ${group.heading || gi + 1}`, onPress: () => onUpdate({ ...block, groups: removeAt(groups, gi) }) })] }), _jsx(TextInput, { label: "Description", placeholder: "Description (optional)", optional: true, value: group.description ?? undefined, onChange: description => setGroup({ ...group, description }) }), group.links.map((link, li) => (_jsxs("div", { className: c.row, children: [_jsx(TextInput, { label: "Label", value: link.label, onChange: label => setGroup({ ...group, links: replaceAt(group.links, li, { ...link, label: label ?? '' }) }) }), _jsx(TextInput, { label: "Address", placeholder: "/path or https://", value: link.href, onChange: href => setGroup({ ...group, links: replaceAt(group.links, li, { ...link, href: href ?? '' }) }) }), _jsx(Remove, { label: `Remove link ${link.label || li + 1}`, onPress: () => setGroup({ ...group, links: removeAt(group.links, li) }) })] }, li))), _jsx(Add, { onPress: () => setGroup({ ...group, links: [...group.links, { label: '', href: '' }] }), children: "Add link" })] }, group.id));
+            }), _jsx(Add, { onPress: () => onUpdate({ ...block, groups: [...groups, { id: newId(), heading: '', links: [] }] }), children: "Add group" })] }));
+}
+export function BannerFields({ block, onUpdate }) {
+    const c = useEditorContext().kit.classNames;
+    return (_jsxs("div", { className: c.stack, children: [_jsx(Choice, { label: "Notice", value: block.variant, options: BANNER_VARIANTS, onChange: v => onUpdate({ ...block, variant: v }) }), _jsx(Field, { label: "Custom message (optional)", children: _jsx(TextInput, { label: "Custom message", placeholder: "Empty for the standard notice", optional: true, value: block.text, onChange: text => onUpdate({ ...block, text }) }) })] }));
+}
+/**
+ * The picked pages in their order, each movable and removable. With `pages`
+ * the rest are offered in a picker; without, an id is typed in.
+ */
+export function PageListFields({ block, onUpdate, pages }) {
+    const { kit } = useEditorContext();
+    const c = kit.classNames;
+    const [typed, setTyped] = useState('');
+    const ids = block.pageIds;
+    const set = (pageIds) => onUpdate({ ...block, pageIds });
+    const byId = new Map(pages?.map(p => [p.id, p]));
+    const full = ids.length >= MAX_BLOCK_ROWS;
+    const add = (id) => {
+        if (id && !ids.includes(id) && !full)
+            set([...ids, id]);
+    };
+    const unpicked = pages?.filter(p => !ids.includes(p.id)) ?? [];
+    const ops = {
+        move: (from, to) => {
+            const next = removeAt(ids, from);
+            next.splice(to, 0, ids[from]);
+            set(next);
+        },
+        duplicate: () => { },
+        remove: (i) => set(removeAt(ids, i)),
+    };
+    return (_jsxs("div", { className: c.stack, children: [ids.map((id, i) => {
+                const page = byId.get(id);
+                return (_jsxs("div", { className: c.row, children: [_jsxs("span", { className: c.muted, children: [i + 1, "."] }), _jsxs("span", { children: [pages ? (page?.title ?? `No such page: ${id}`) : id, page?.detail && _jsxs("span", { className: c.muted, children: [" \u00B7 ", page.detail] })] }), _jsx(BlockActions, { index: i, total: ids.length, ops: ops, icons: { up: kit.icons.up, down: kit.icons.down, remove: kit.icons.remove }, className: c.cardActions, buttonClassName: c.action, blockLabel: "page" })] }, i));
+            }), pages && pages.length === 0 && _jsx("p", { className: c.muted, children: "This wiki has no pages to pick yet." }), !full && pages && unpicked.length > 0 && (_jsx(Field, { label: "Add a page", children: _jsxs("select", { className: c.input, value: "", onChange: e => add(e.target.value), children: [_jsx("option", { value: "", children: "Choose\u2026" }), unpicked.map(p => (_jsx("option", { value: p.id, children: p.detail ? `${p.title} · ${p.detail}` : p.title }, p.id)))] }) })), !full && !pages && (_jsxs("div", { className: c.row, children: [_jsx("input", { type: "text", className: c.input, "aria-label": "Page id", placeholder: "Page id", value: typed, onChange: e => setTyped(e.target.value), onKeyDown: e => {
+                            if (e.key !== 'Enter')
+                                return;
+                            e.preventDefault();
+                            add(typed.trim());
+                            setTyped('');
+                        } }), _jsx(Add, { onPress: () => {
+                            add(typed.trim());
+                            setTyped('');
+                        }, children: "Add page" })] }))] }));
+}
+const GAPS = ['sm', 'md', 'lg'].map(v => ({ value: v, label: v }));
+const ALIGNS = ['start', 'center', 'end', 'stretch'].map(v => ({ value: v, label: v }));
+const MAX_COLUMNS = 4;
+/** Two to four columns, each a block list offering the schema's `nestedTypes`. */
+export function ColumnsFields({ block, onUpdate }) {
+    const c = useEditorContext().kit.classNames;
+    const columns = block.columns;
+    return (_jsxs("div", { className: c.stack, children: [_jsxs("div", { className: c.row, children: [_jsx(Choice, { label: "Gap", value: block.gap ?? 'md', options: GAPS, onChange: gap => onUpdate({ ...block, gap: gap }) }), _jsx(Choice, { label: "Align", value: block.align ?? 'start', options: ALIGNS, onChange: align => onUpdate({ ...block, align: align }) })] }), _jsx("div", { className: c.columns, children: columns.map((column, ci) => (_jsxs("div", { className: cx(c.nest, c.stack), children: [_jsxs("div", { className: c.cardHead, children: [_jsxs("span", { className: c.cardLabel, children: ["Column ", ci + 1] }), columns.length > 1 && _jsx(Remove, { label: `Remove column ${ci + 1}`, onPress: () => onUpdate({ ...block, columns: removeAt(columns, ci) }) })] }), _jsx(BlockList, { nested: true, blocks: column.blocks, onChange: blocks => onUpdate({ ...block, columns: replaceAt(columns, ci, { ...column, blocks: blocks }) }) })] }, column.id))) }), columns.length < MAX_COLUMNS && _jsx(Add, { onPress: () => onUpdate({ ...block, columns: [...columns, { id: newId(), blocks: [] }] }), children: "Add column" })] }));
+}
+/** An infobox's blocks, offering the schema's `nestedTypes`. */
+export function InfoboxFields({ block, onUpdate }) {
+    return _jsx(BlockList, { nested: true, blocks: block.blocks, onChange: blocks => onUpdate({ ...block, blocks: blocks }) });
+}

package/dist/blocks.d.ts

@@ -1,5 +1,6 @@
 import { type RelativeTimeStyle } from './freshness.js';
 import type { BlockGroup } from './revisions.js';
+import { type BannerVariant } from './text.js';
 /**
  * The languages a code block or code tab offers, and the one a new one opens
  * on. Two wikis carried this list character for character; a wiki with its own
@@ -50,6 +51,72 @@ export interface LinkGridGroup {
     description?: string | null;
     links: readonly LinkGridLink[];
 }
+export type EditableCodeTab = CodeTab & {
+    language: string;
+};
+export type EditableStatItem = StatItem & {
+    id: string;
+    value: string;
+};
+export type EditableReferenceItem = ReferenceItem & {
+    id: string;
+    url?: string;
+};
+export type EditableLinkGridGroup = LinkGridGroup & {
+    id: string;
+    links: LinkGridLink[];
+};
+export interface ContentBlock {
+    id: string;
+    type: 'content';
+    text: string;
+}
+export interface CodeTabsBlock {
+    id: string;
+    type: 'codeTabs';
+    tabs: EditableCodeTab[];
+}
+export interface StatsBlock {
+    id: string;
+    type: 'stats';
+    items: EditableStatItem[];
+    columns: 2 | 3 | 4;
+}
+export interface LinkGridBlock {
+    id: string;
+    type: 'linkGrid';
+    intro?: string;
+    groups: EditableLinkGridGroup[];
+}
+export interface ReferencesBlock {
+    id: string;
+    type: 'references';
+    title?: string;
+    items: EditableReferenceItem[];
+}
+/** A Wikipedia-style notice. `text` replaces the variant's standard message. */
+export interface BannerBlock {
+    id: string;
+    type: 'banner';
+    variant: BannerVariant;
+    text?: string;
+}
+/** `A` is the wiki's atomic union: a container never holds another container. */
+export interface ColumnsBlock<A> {
+    id: string;
+    type: 'columns';
+    columns: {
+        id: string;
+        blocks: A[];
+    }[];
+    gap?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+export interface InfoboxBlock<A> {
+    id: string;
+    type: 'infobox';
+    blocks: A[];
+}
 export interface BlockTreeOptions<B> {
     /** Render one leaf block. Return `''` to drop it from the document. */
     atomic: (block: B) => string;

package/dist/editor.d.ts

@@ -57,6 +57,64 @@ export declare function ToolbarButton({ label, pressed, onPress, className, chil
     className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
+export interface WikiToolbarProps {
+    editor: Editor;
+    /** `useWikiEditor`'s `isActive`. */
+    isActive: (a?: ActiveDescriptor) => boolean;
+    /** `useUrlPrompt`'s state: the link button opens it, and shows pressed while it is open. */
+    prompt: UrlPromptState;
+    /** The formatting buttons, before Remove link, upload and embed. */
+    actions: readonly ToolbarAction[];
+    /** The insert buttons after them, such as table and tabs. */
+    trailing?: readonly ToolbarAction[];
+    /** Shows the upload button, which calls this: `useWikiEditor`'s `triggerUpload`. */
+    onUpload?: () => void;
+    /** Shows the embed button, which opens the prompt on an embed address. */
+    embed?: boolean;
+    icons: Partial<Record<ToolbarKey, ReactNode>> & {
+        unlink: ReactNode;
+        upload?: ReactNode;
+        embed?: ReactNode;
+    };
+    classNames?: {
+        toolbar?: string;
+        button?: string;
+        /** Added to a button that is on. */
+        pressed?: string;
+        divider?: string;
+        /** A table control, which is a word rather than an icon. */
+        tableButton?: string;
+        /** Added to the table controls that delete. */
+        danger?: string;
+    };
+}
+/**
+ * The formatting bar three wikis had each assembled from `toolbarActions`,
+ * `ToolbarButton` and `TABLE_ACTIONS`, in the same order with the same rules:
+ * a link button that needs an address and so opens the prompt, a Remove link
+ * button while the cursor is in a link, upload and embed between the format
+ * and insert groups, and the table controls while the cursor is in a table.
+ * Which buttons, which icons and which classes are the caller's.
+ */
+export declare function WikiToolbar({ editor, isActive, prompt, actions, trailing, onUpload, embed, icons, classNames: c }: WikiToolbarProps): import("react").JSX.Element;
+export interface UrlPromptFieldProps {
+    prompt: UrlPromptState;
+    placeholders?: {
+        link?: string;
+        embed?: string;
+    };
+    classNames?: {
+        row?: string;
+        input?: string;
+        apply?: string;
+        cancel?: string;
+    };
+}
+/**
+ * The address field under a toolbar, open while `prompt.kind` is set: Enter
+ * applies, Escape closes, and an emptied link address unlinks.
+ */
+export declare function UrlPromptField({ prompt, placeholders, classNames: c }: UrlPromptFieldProps): import("react").JSX.Element | null;
 export type UrlPromptKind = 'link' | 'embed';
 export interface UrlPromptState {
     /** The open field, or null. */

package/dist/editor.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // editor.tsx — the wiki rich-text editor's engine, minus its chrome.
 //
 // `tiptap.tsx` holds the custom NODES both wikis needed (iframe, tweet, map,
@@ -32,6 +32,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import { useEditor } from '@tiptap/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toMapEmbedUrl } from './maps.js';
+import { cx } from './html.js';
 // ---- paste scrubbing --------------------------------------------------------
 /**
  * Reduce pasted HTML to structure plus the three attributes that carry meaning.
@@ -219,6 +220,31 @@ export function toolbarActions(keys) {
 export function ToolbarButton({ label, pressed, onPress, className, children, }) {
     return (_jsx("button", { type: "button", title: label, "aria-label": label, "aria-pressed": pressed, className: className, onClick: onPress, children: children }));
 }
+/**
+ * The formatting bar three wikis had each assembled from `toolbarActions`,
+ * `ToolbarButton` and `TABLE_ACTIONS`, in the same order with the same rules:
+ * a link button that needs an address and so opens the prompt, a Remove link
+ * button while the cursor is in a link, upload and embed between the format
+ * and insert groups, and the table controls while the cursor is in a table.
+ * Which buttons, which icons and which classes are the caller's.
+ */
+export function WikiToolbar({ editor, isActive, prompt, actions, trailing = [], onUpload, embed, icons, classNames: c = {} }) {
+    const button = ({ key, label, active, run }) => {
+        const pressed = isActive(active) || (key === 'link' && prompt.kind === 'link');
+        return (_jsx(ToolbarButton, { label: label, pressed: active ? pressed : undefined, onPress: () => (run ? run(editor) : prompt.toggle('link')), className: cx(c.button, pressed && c.pressed), children: icons[key] }, key));
+    };
+    return (_jsxs("div", { className: c.toolbar, role: "toolbar", "aria-label": "Text formatting", children: [actions.map(button), editor.isActive('link') && (_jsx(ToolbarButton, { label: "Remove link", onPress: () => editor.chain().focus().extendMarkRange('link').unsetLink().run(), className: c.button, children: icons.unlink })), onUpload && (_jsx(ToolbarButton, { label: "Upload image", onPress: onUpload, className: c.button, children: icons.upload })), embed && (_jsx(ToolbarButton, { label: "Embed", pressed: prompt.kind === 'embed', onPress: () => prompt.toggle('embed'), className: cx(c.button, prompt.kind === 'embed' && c.pressed), children: icons.embed })), trailing.map(button), editor.isActive('table') && (_jsxs(_Fragment, { children: [_jsx("span", { className: c.divider, "aria-hidden": true }), TABLE_ACTIONS.map(([command, label, danger]) => (_jsx("button", { type: "button", className: cx(c.tableButton, danger && c.danger), onClick: () => runTableAction(editor, command), children: label }, command)))] }))] }));
+}
+/**
+ * The address field under a toolbar, open while `prompt.kind` is set: Enter
+ * applies, Escape closes, and an emptied link address unlinks.
+ */
+export function UrlPromptField({ prompt, placeholders = {}, classNames: c = {} }) {
+    if (!prompt.kind)
+        return null;
+    const link = prompt.kind === 'link';
+    return (_jsxs("div", { className: c.row, children: [_jsx("input", { autoFocus: true, type: "text", inputMode: "url", autoCapitalize: "none", className: c.input, "aria-label": link ? 'Link address' : 'Embed address', placeholder: link ? (placeholders.link ?? 'https://… (empty removes the link)') : (placeholders.embed ?? 'YouTube, X, Google or Apple Maps, or any iframe URL'), value: prompt.value, onChange: e => prompt.setValue(e.target.value), onKeyDown: prompt.onKeyDown }), _jsx("button", { type: "button", className: c.apply, onClick: prompt.apply, children: link ? 'Apply' : 'Embed' }), _jsx("button", { type: "button", className: c.cancel, onClick: prompt.close, children: "Cancel" })] }));
+}
 /**
  * What a link or embed field does with its address. A link sets or replaces
  * the link the cursor is in, across the whole link rather than the collapsed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",
@@ -208,6 +208,11 @@
       "import": "./dist/editor.js",
       "default": "./dist/editor.js"
     },
+    "./block-editor": {
+      "types": "./dist/block-editor.d.ts",
+      "import": "./dist/block-editor.js",
+      "default": "./dist/block-editor.js"
+    },
     "./link-check": {
       "types": "./dist/link-check.d.ts",
       "import": "./dist/link-check.js",