wiki-formant 0.80.0 → 0.82.0

package/README.md

@@ -698,7 +698,7 @@ const off = onTweetResize((h, source) => sizeTweetEmbed(el, h, source));
 
 `addCopyButton` was **byte-identical** in two BlockRenderers, down to the SVG path data. Its idempotence guard now lives inside the function rather than in a `pre:not(:has(…))` at the call site, where it can be — and was — retyped.
 
-In React, `useArticlePasses(ref, [blocks])` runs the three passes and `useTweetEmbeds(ref, [html])` the embed pair, from `wiki-formant/react`. Three renderers had the effect written out and disagreed on its dependencies: two ran once on mount, so a page swapped in without a remount kept its old tables unsortable.
+In React, `useArticlePasses(ref, [blocks])` (`wiki-formant/react`) runs them all, the embed pair included. Three renderers had the effect written out and disagreed on its dependencies: two ran once on mount, so a page swapped in without a remount kept its old tables unsortable.
 
 `activateTabGroups` turns stored `[data-tabs]` markup into a working tab group. The editor persists tabs as nested divs, which is the right thing to store — it survives a markdown twin, a plain HTML render and a reader with JavaScript off, all of which show every tab in order. Making one of them pressable is a reader-side job, and it sits beside the other passes rather than inside a component.
 
@@ -810,19 +810,26 @@ const CodeBlock = createCodeBlock({
 
 The language list defaults to `CODE_LANGS` and `DEFAULT_LANG` from `wiki-formant/blocks`, which two wikis had typed identically; a wiki with its own passes `langs` and `defaultLang`. The ones that take config take it because that is exactly where the two copies differed — class tokens, the language list, and the API route a shortened map URL has to be resolved through. Injecting them is what lets one wiki keep `text-jupiter` and the other `text-accent` without either forking the node, and it keeps this file from dragging an icon library in behind it.
 
-`createTabs` returns `TabGroup` and `TabItem` together: `tabGroup`'s content expression is `tabItem+`, so registering one without the other leaves a node type the schema cannot satisfy. A pasted short map link inserts immediately with `about:blank` and swaps its `src` when the redirect resolves — pasting must not block on a network hop, and the node has to exist for the reader to see anything happen.
+Both node views draw in default classes (`code-block…`, `tabs-editor`, `tab-button`…) that `base.css` styles plainly enough for any site, the editor's rule showing the tab the writer picked included; pass `classNames` and `icons` to draw them your own way. `createTabs` returns `TabGroup` and `TabItem` together: `tabGroup`'s content expression is `tabItem+`, so registering one without the other leaves a node type the schema cannot satisfy. A pasted short map link inserts immediately with `about:blank` and swaps its `src` when the redirect resolves — pasting must not block on a network hop, and the node has to exist for the reader to see anything happen.
 
 `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". `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.
+`WikiToolbar` shows what the editor can do and nothing else: each command whose node, mark or command the editor's extensions include, so an app's buttons follow from its nodes and no app keeps a second list. They come in groups – undo and redo; bold, italic, inline code and link; the three headings; lists, quote and code block; then upload (given `onUpload`), embed (where there are embed nodes), table, tabs and divider – with Remove link after Link while the cursor is in a link, and the table controls while it is in a table. Four apps had each listed buttons by hand: one had no numbered list, one had a code-block node and no button for it, and only one had undo. Every button is a `ToolbarButton`, named and `aria-pressed`; the icons, the classes and anything after the buttons (`children`) are yours.
 
 ```tsx
-<WikiToolbar editor={editor} isActive={isActive} prompt={url} actions={FORMAT} trailing={INSERT} onUpload={triggerUpload} embed
+<WikiToolbar editor={editor} prompt={url} onUpload={triggerUpload}
   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' }} />
 ```
 
+`WikiLine` is a one-line field – a title, a heading, a caption, a button – edited in the element that shows it. Its schema is the line and the `marks` it may keep (`bold`, `italic`, `link`), so a typed "- " makes no list and a pasted heading runs into the line; its value is that HTML, or plain text with no marks. It has its own undo, and `onFocus` hands over its editor, so one `WikiToolbar` can drive whichever field was last touched. `base.css` gives it a placeholder from `data-placeholder`.
+
+```tsx
+<WikiLine as="h1" value={title} onChange={setTitle} placeholder="The page's title" />
+<WikiLine as="p" marks={['bold', 'italic', 'link']} value={note} onChange={setNote} placeholder="A note" />
+```
+
 `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.

package/bin/check-pages.mjs

@@ -27,6 +27,11 @@
 // URLs come from /sitemap.xml, so a route the sitemap omits is not checked —
 // which is the right default, since an unlisted route is one nobody asked a
 // crawler to read.
+//
+// Once per site it also checks the icon. miow.me changed its icon in October
+// 2026 and every address of it 404'd at /favicon.ico, the one place a client
+// that never reads the page's <link rel="icon"> looks; so /favicon.ico must
+// answer an image, and the same image the home page declares.
 import { outlineIssues } from '../dist/headings.js';
 import { readSitemap } from '../dist/indexnow.js';
 import { decodeEntities } from '../dist/markdown.js';
@@ -125,6 +130,36 @@ for (const url of checked) {
   if (descriptionOf(page.body) === null) faults.push({ url, fault: 'noDescription', detail: '' });
 }
 
+// The icon, once per site: what the home page declares (a page that declares
+// none is shown /favicon.ico) against what /favicon.ico answers, redirects
+// followed.
+const iconHref = html => {
+  for (const tag of html.match(/<link\b[^>]*>/gi) ?? []) {
+    if (/\brel=["'](?:shortcut )?icon["']/i.test(tag)) return decodeEntities(tag.match(/\bhref=["']([^"']+)["']/i)?.[1] ?? '');
+  }
+  return '';
+};
+const image = async url => {
+  try {
+    const res = await fetch(url, { headers: { 'user-agent': UA } });
+    const type = res.headers.get('content-type') ?? '';
+    return res.ok && /^image\//i.test(type) ? Buffer.from(await res.arrayBuffer()) : `${res.status} ${type}`.trim();
+  } catch (e) {
+    return e.message;
+  }
+};
+{
+  const home = await get(`${site}/`).catch(() => ({ body: '' }));
+  const declared = new URL(iconHref(home.body) || '/favicon.ico', `${site}/`).href;
+  const favicon = await image(`${site}/favicon.ico`);
+  const shown = declared === `${site}/favicon.ico` ? favicon : await image(declared);
+  if (!Buffer.isBuffer(favicon)) faults.push({ url: `${site}/favicon.ico`, fault: 'noFavicon', detail: favicon });
+  if (!Buffer.isBuffer(shown)) faults.push({ url: declared, fault: 'iconDead', detail: shown });
+  else if (Buffer.isBuffer(favicon) && !favicon.equals(shown)) {
+    faults.push({ url: `${site}/favicon.ico`, fault: 'faviconStale', detail: `not the icon the home page declares, ${declared.replace(site, '')}` });
+  }
+}
+
 // Reported once per title rather than once per page, or a shared title on forty
 // routes drowns everything else.
 for (const [title, sharing] of titles) {
@@ -149,7 +184,7 @@ if (JSON_OUT) {
   const byFault = new Map();
   for (const f of faults) byFault.set(f.fault, [...(byFault.get(f.fault) ?? []), f]);
   console.log(`check-pages: ${checked.length} of ${urls.length} sitemap URLs on ${site}\n`);
-  if (!faults.length) console.log('  clean — one h1 per page, no skipped levels, every title inside the budget.');
+  if (!faults.length) console.log('  clean — one h1 per page, no skipped levels, every title inside the budget, and /favicon.ico the icon the page declares.');
   else if (!failing.length) console.log('  no failures; everything below is advisory.\n');
   for (const [fault, list] of [...byFault].sort((a, b) => b[1].length - a[1].length)) {
     console.log(`  ${fault} (${list.length})${ADVISORY.has(fault) ? '  — advisory, does not fail' : ''}`);

package/dist/base.css

@@ -180,6 +180,41 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
    stands in for the group rather than every tab at once. */
 .tab-panel:not(.active) { display: none; }
 [data-tabs]:not([data-tabs-init]) [data-tab-item] ~ [data-tab-item] { display: none; }
+.tabs-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+.tab-button { font: inherit; color: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.4em 0.8em; cursor: pointer; }
+.tab-button.active { border-bottom-color: currentColor; }
+
+/* ---- editor node views (createCodeBlock, createTabs) ---------------------------
+   Their default classes, drawn plainly enough to sit on any site; an app that
+   passes its own classes styles them itself. The tab editor shows the tab the
+   writer picked, which the stored-group rule above would otherwise hide. */
+.code-block { position: relative; }
+.code-block-control { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1; font-size: 0.8rem; }
+:is(.code-block-button, .code-block-option, .tab-title, .tab-remove, .tab-add) { font: inherit; color: inherit; background: none; border: 0; }
+:is(.code-block-button, .code-block-option, .tab-remove, .tab-add) { padding: 0.15em 0.5em; cursor: pointer; }
+.code-block-menu { position: absolute; right: 0; display: grid; max-height: 16rem; overflow: auto; background: Canvas; color: CanvasText; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 0.4rem; }
+.code-block-option { text-align: left; }
+.code-block-option.active { font-weight: 600; }
+.tabs-editor { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 0.5rem; }
+.tabs-editor .tabs-list { align-items: center; padding: 0.4rem; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
+.tabs-editor .tab-button { display: inline-flex; align-items: center; padding: 0.15em 0.3em; border-bottom: 0; border-radius: 0.3rem; }
+.tabs-editor .tab-button.active { background: color-mix(in srgb, currentColor 10%, transparent); }
+.tab-title { width: 7em; outline: none; }
+.tab-remove, .tab-add { opacity: 0.7; }
+.tabs-content { padding: 1rem; }
+.tabs-editor [data-tab-item] { display: none; }
+[data-tabs][data-active-tab='0'] .tabs-editor [data-tab-item]:nth-of-type(1),
+[data-tabs][data-active-tab='1'] .tabs-editor [data-tab-item]:nth-of-type(2),
+[data-tabs][data-active-tab='2'] .tabs-editor [data-tab-item]:nth-of-type(3),
+[data-tabs][data-active-tab='3'] .tabs-editor [data-tab-item]:nth-of-type(4),
+[data-tabs][data-active-tab='4'] .tabs-editor [data-tab-item]:nth-of-type(5),
+[data-tabs][data-active-tab='5'] .tabs-editor [data-tab-item]:nth-of-type(6),
+[data-tabs][data-active-tab='6'] .tabs-editor [data-tab-item]:nth-of-type(7),
+[data-tabs][data-active-tab='7'] .tabs-editor [data-tab-item]:nth-of-type(8) { display: block; }
+
+/* ---- one-line fields (WikiLine) --------------------------------------------- */
+[data-wiki-line] { outline: none; cursor: text; white-space: pre-wrap; }
+[data-wiki-line]:is(:empty, :has(> .ProseMirror-trailingBreak))::before { content: attr(data-placeholder); opacity: 0.6; }
 
 /* ---- table scroll boxes (scrollTables, React tables) -----------------------
    A table wider than its column scrolls inside its own box, at every width,

package/dist/editor.d.ts

@@ -1,4 +1,4 @@
-import type { AnyExtension, Editor } from '@tiptap/core';
+import { type AnyExtension, type Editor } from '@tiptap/core';
 import { type ChangeEvent, type KeyboardEvent, type ReactNode, type RefObject } from 'react';
 /**
  * Re-exported so the COMMAND AUGMENTATIONS reach consumers.
@@ -37,18 +37,18 @@ export declare const TABLE_ACTIONS: ReadonlyArray<[command: string, label: strin
 export type ActiveDescriptor = string | [string, Record<string, unknown>];
 /** Run one of `TABLE_ACTIONS` — the one place the command name is looked up untyped. */
 export declare function runTableAction(editor: Editor, command: string): void;
-export type ToolbarKey = 'bold' | 'italic' | 'code' | 'link' | 'h2' | 'h3' | 'h4' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'divider' | 'table' | 'tabs';
+export type ToolbarKey = 'undo' | 'redo' | 'bold' | 'italic' | 'code' | 'link' | 'h2' | 'h3' | 'h4' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'divider' | 'table' | 'tabs';
 export interface ToolbarAction {
     key: ToolbarKey;
     /** What a screen reader announces and a tooltip shows. */
     label: string;
+    /** The node, mark or command the editor needs for the button to show. */
+    needs: string;
     active?: ActiveDescriptor;
     /** Absent on `link`, which needs a URL: call `withUrl` once you have one. */
     run?: (editor: Editor) => void;
     withUrl?: (editor: Editor, url: string) => void;
 }
-/** The actions a toolbar shows, in the order it shows them. */
-export declare function toolbarActions(keys: readonly ToolbarKey[]): ToolbarAction[];
 /**
  * A toolbar button that says what it is and whether it is on. `aria-pressed`
  * is right here, unlike on a facet link: this is a toggle.
@@ -61,50 +61,43 @@ export declare function ToolbarButton({ label, pressed, onPress, className, chil
     children: ReactNode;
 }): import("react").JSX.Element;
 export interface WikiToolbarProps {
-    editor: Editor;
-    /** `useWikiEditor`'s `isActive`. */
-    isActive: (a?: ActiveDescriptor) => boolean;
+    /** The editor it drives; with none it shows only `children`. */
+    editor: Editor | null;
     /** `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`. */
+    /** Shows the upload button where the editor takes images: `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;
-    };
+    icons: Partial<Record<ToolbarKey | 'unlink' | 'upload' | 'embed', ReactNode>>;
     classNames?: {
         toolbar?: string;
         button?: string;
         /** Added to a button that is on. */
         pressed?: string;
+        /** Drawn between groups, and before the table controls. */
         divider?: string;
         /** A table control, which is a word rather than an icon. */
         tableButton?: string;
         /** Added to the table controls that delete. */
         danger?: string;
     };
+    /** After the buttons: a hint, or controls of the app's own. */
+    children?: ReactNode;
 }
 /**
- * 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.
+ * The formatting bar. It shows what the editor can do and nothing else: every
+ * command whose node, mark or command the editor has (`supports`), grouped,
+ * then upload where it takes images and embed where it has embed nodes, then
+ * the table controls while the cursor is in a table. Remove link follows Link
+ * while the cursor is in a link. The same bar drives a whole article, a one-line
+ * field and an editor shared between blocks; which icons and classes are the
+ * caller's. Every button is a `ToolbarButton`, named and `aria-pressed`.
  */
-export declare function WikiToolbar({ editor, isActive, prompt, actions, trailing, onUpload, embed, icons, classNames: c }: WikiToolbarProps): import("react").JSX.Element;
+export declare function WikiToolbar({ editor, prompt, onUpload, icons, classNames: c, children }: WikiToolbarProps): import("react").JSX.Element;
 export interface UrlPromptFieldProps {
     prompt: UrlPromptState;
+    /** The link field's placeholder, where the wiki's own paths differ from a full address. */
     placeholders?: {
         link?: string;
-        embed?: string;
     };
     classNames?: {
         row?: string;
@@ -170,14 +163,31 @@ export interface WikiEditorState {
     handleFileChange: (e: ChangeEvent<HTMLInputElement>) => Promise<void>;
     /** Open the file picker — what an upload toolbar button calls. */
     triggerUpload: () => void;
-    isActive: (a?: ActiveDescriptor) => boolean;
 }
 /**
- * The editor, its upload plumbing and the state a toolbar reads.
- *
- * The toolbar itself stays with the consumer: the two wikis differ on which
- * buttons exist, which icon set draws them, and whether a link is entered in a
- * `window.prompt` or an inline field. Those are real differences. What they had
- * no business differing on is everything below.
+ * The editor and its upload plumbing. `WikiToolbar` given the editor draws
+ * the buttons its extensions allow; the icons and classes are the app's.
  */
 export declare function useWikiEditor({ value, onChange, placeholder, nodes, proseClass, uploadImage, debounceMs, }: WikiEditorOptions): WikiEditorState;
+/** What a one-line field may keep. With none, its value is plain text. */
+export type LineMark = 'bold' | 'italic' | 'link';
+export interface WikiLineProps {
+    as: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div' | 'small' | 'figcaption';
+    value: string;
+    onChange: (value: string) => void;
+    /** Shown while it is empty, and its accessible name. */
+    placeholder: string;
+    marks?: readonly LineMark[];
+    className?: string;
+    /** The editor, as it takes focus: what a toolbar shared between fields claims. */
+    onFocus?: (editor: Editor) => void;
+}
+/**
+ * One line of words – a title, a heading, a caption, a button – edited in the
+ * element that shows it, so it reads as the page draws it. Its schema is the
+ * line and the `marks` it may keep, so nothing else can get in: no list from a
+ * typed "- ", no heading from a paste. Its value is that HTML, or plain text
+ * when it keeps no marks. It has its own undo, and `WikiToolbar` given its
+ * editor shows undo and its marks. `base.css` gives it its placeholder.
+ */
+export declare function WikiLine({ as: Tag, value, onChange, placeholder, marks, className, onFocus }: WikiLineProps): import("react").JSX.Element;

package/dist/editor.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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,
@@ -30,7 +30,8 @@ import TiptapTableCell from '@tiptap/extension-table-cell';
 import TiptapTableHeader from '@tiptap/extension-table-header';
 import Placeholder from '@tiptap/extension-placeholder';
 import { useEditor } from '@tiptap/react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Editor as TiptapEditor, Node as TiptapNode } from '@tiptap/core';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { toMapEmbedUrl } from './maps.js';
 import { cx } from './html.js';
 /** The view and the editor's type, so a consumer imports nothing from `@tiptap/*` itself. */
@@ -157,47 +158,57 @@ function insertEmbed(editor, url, { resolveMapUrl }) {
 }
 /** The table controls, shown only while the selection is inside a table. */
 export const TABLE_ACTIONS = [
-    ['addColumnAfter', '+Col'],
-    ['addRowAfter', '+Row'],
-    ['deleteColumn', '-Col', true],
-    ['deleteRow', '-Row', true],
-    ['deleteTable', '-Tbl', true],
+    ['addColumnAfter', 'Add column'],
+    ['addRowAfter', 'Add row'],
+    ['deleteColumn', 'Remove column', true],
+    ['deleteRow', 'Remove row', true],
+    ['deleteTable', 'Remove table', true],
 ];
 /** Run one of `TABLE_ACTIONS` — the one place the command name is looked up untyped. */
 export function runTableAction(editor, command) {
     const chain = editor.chain().focus();
     chain[command]?.().run();
 }
+const heading = (level, label) => ({
+    key: `h${level}`,
+    label,
+    needs: 'heading',
+    active: ['heading', { level }],
+    run: e => e.chain().focus().toggleHeading({ level }).run(),
+});
 /**
- * The formatting commands, labelled. Three toolbars ran these identically and
- * two titled their buttons with the internal key — a screen reader said
- * "codeBlock", and inline code and code block shared one icon and one name.
- * Upload and embed stay with the caller: they are the parts that differ.
+ * The formatting commands, labelled, in toolbar order. Three toolbars ran these
+ * identically and two titled their buttons with the internal key – a screen
+ * reader said "codeBlock", and inline code and code block shared one icon and
+ * one name.
  *
  * @internal
  */
 export const TOOLBAR_ACTIONS = [
-    { key: 'bold', label: 'Bold', active: 'bold', run: e => e.chain().focus().toggleBold().run() },
-    { key: 'italic', label: 'Italic', active: 'italic', run: e => e.chain().focus().toggleItalic().run() },
-    { key: 'code', label: 'Inline code', active: 'code', run: e => e.chain().focus().toggleCode().run() },
-    { key: 'link', label: 'Link', active: 'link', withUrl: (e, href) => e.chain().focus().setLink({ href }).run() },
-    { key: 'h2', label: 'Heading 2', active: ['heading', { level: 2 }], run: e => e.chain().focus().toggleHeading({ level: 2 }).run() },
-    { key: 'h3', label: 'Heading 3', active: ['heading', { level: 3 }], run: e => e.chain().focus().toggleHeading({ level: 3 }).run() },
-    { key: 'h4', label: 'Heading 4', active: ['heading', { level: 4 }], run: e => e.chain().focus().toggleHeading({ level: 4 }).run() },
-    { key: 'bulletList', label: 'Bulleted list', active: 'bulletList', run: e => e.chain().focus().toggleBulletList().run() },
-    { key: 'orderedList', label: 'Numbered list', active: 'orderedList', run: e => e.chain().focus().toggleOrderedList().run() },
-    { key: 'blockquote', label: 'Quote', active: 'blockquote', run: e => e.chain().focus().toggleBlockquote().run() },
-    { key: 'codeBlock', label: 'Code block', active: 'codeBlock', run: e => e.chain().focus().toggleCodeBlock().run() },
-    { key: 'divider', label: 'Divider', run: e => e.chain().focus().setHorizontalRule().run() },
+    { key: 'undo', label: 'Undo', needs: 'undo', run: e => e.chain().focus().undo().run() },
+    { key: 'redo', label: 'Redo', needs: 'redo', run: e => e.chain().focus().redo().run() },
+    { key: 'bold', label: 'Bold', needs: 'bold', active: 'bold', run: e => e.chain().focus().toggleBold().run() },
+    { key: 'italic', label: 'Italic', needs: 'italic', active: 'italic', run: e => e.chain().focus().toggleItalic().run() },
+    { key: 'code', label: 'Inline code', needs: 'code', active: 'code', run: e => e.chain().focus().toggleCode().run() },
+    { key: 'link', label: 'Link', needs: 'link', active: 'link', withUrl: (e, href) => e.chain().focus().setLink({ href }).run() },
+    heading(2, 'Heading'),
+    heading(3, 'Subheading'),
+    heading(4, 'Small heading'),
+    { key: 'bulletList', label: 'Bulleted list', needs: 'bulletList', active: 'bulletList', run: e => e.chain().focus().toggleBulletList().run() },
+    { key: 'orderedList', label: 'Numbered list', needs: 'orderedList', active: 'orderedList', run: e => e.chain().focus().toggleOrderedList().run() },
+    { key: 'blockquote', label: 'Quote', needs: 'blockquote', active: 'blockquote', run: e => e.chain().focus().toggleBlockquote().run() },
+    { key: 'codeBlock', label: 'Code block', needs: 'codeBlock', active: 'codeBlock', run: e => e.chain().focus().toggleCodeBlock().run() },
     {
         key: 'table',
         label: 'Table',
+        needs: 'table',
         active: 'table',
         run: e => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
     },
     {
         key: 'tabs',
         label: 'Tabs',
+        needs: 'tabGroup',
         active: 'tabGroup',
         // Two, not one: a group of one is a heading with extra steps, and the node
         // refuses to delete its last tab anyway.
@@ -210,10 +221,43 @@ export const TOOLBAR_ACTIONS = [
         })
             .run(),
     },
+    { key: 'divider', label: 'Divider', needs: 'horizontalRule', run: e => e.chain().focus().setHorizontalRule().run() },
 ];
-/** The actions a toolbar shows, in the order it shows them. */
-export function toolbarActions(keys) {
-    return keys.flatMap(key => TOOLBAR_ACTIONS.filter(a => a.key === key));
+/** The groups the toolbar draws, a divider between each. Upload and embed lead the last. */
+const GROUPS = [
+    ['undo', 'redo'],
+    ['bold', 'italic', 'code', 'link'],
+    ['h2', 'h3', 'h4'],
+    ['bulletList', 'orderedList', 'blockquote', 'codeBlock'],
+    ['table', 'tabs', 'divider'],
+];
+/**
+ * Whether the editor can do what an action does: its schema has the node or
+ * mark, or it has the command, and a heading button's level is one the editor
+ * allows. What a toolbar shows follows from the extensions an editor was
+ * built with, so no app keeps a list of buttons beside its list of nodes.
+ *
+ * @internal
+ */
+export function supports(editor, { key, needs }) {
+    const { nodes, marks } = editor.schema;
+    if (needs === 'heading') {
+        const levels = editor.extensionManager.extensions.find(e => e.name === 'heading')?.options.levels;
+        return !!nodes.heading && !!levels?.includes(Number(key.slice(1)));
+    }
+    return !!(nodes[needs] || marks[needs] || needs in editor.commands);
+}
+/** The editor redrawn on every change, for a toolbar whose editor is not the component's own. */
+function useTransactions(editor) {
+    const [, redraw] = useReducer((n) => n + 1, 0);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.on('transaction', redraw);
+        return () => {
+            editor.off('transaction', redraw);
+        };
+    }, [editor]);
 }
 /**
  * A toolbar button that says what it is and whether it is on. `aria-pressed`
@@ -223,19 +267,35 @@ 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.
+ * The formatting bar. It shows what the editor can do and nothing else: every
+ * command whose node, mark or command the editor has (`supports`), grouped,
+ * then upload where it takes images and embed where it has embed nodes, then
+ * the table controls while the cursor is in a table. Remove link follows Link
+ * while the cursor is in a link. The same bar drives a whole article, a one-line
+ * field and an editor shared between blocks; which icons and classes are the
+ * caller's. Every button is a `ToolbarButton`, named and `aria-pressed`.
  */
-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));
+export function WikiToolbar({ editor, prompt, onUpload, icons, classNames: c = {}, children }) {
+    useTransactions(editor);
+    if (!editor || editor.isDestroyed) {
+        return (_jsx("div", { className: c.toolbar, role: "toolbar", "aria-label": "Text formatting", children: children }));
+    }
+    const button = (a) => {
+        const pressed = (!!a.active && (typeof a.active === 'string' ? editor.isActive(a.active) : editor.isActive(...a.active))) || (a.key === 'link' && prompt.kind === 'link');
+        return (_jsx(ToolbarButton, { label: a.label, pressed: a.active ? pressed : undefined, onPress: () => (a.run ? a.run(editor) : prompt.toggle('link')), className: cx(c.button, pressed && c.pressed), children: icons[a.key] }, a.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)))] }))] }));
+    const extra = {
+        link: editor.isActive('link') && (_jsx(ToolbarButton, { label: "Remove link", onPress: () => editor.chain().focus().extendMarkRange('link').unsetLink().run(), className: c.button, children: icons.unlink }, "unlink")),
+    };
+    const insert = [
+        onUpload && editor.schema.nodes.image && (_jsx(ToolbarButton, { label: "Picture", onPress: onUpload, className: c.button, children: icons.upload }, "upload")),
+        (editor.schema.nodes.youtube || editor.schema.nodes.iframe) && (_jsx(ToolbarButton, { label: "Video, post or map", pressed: prompt.kind === 'embed', onPress: () => prompt.toggle('embed'), className: cx(c.button, prompt.kind === 'embed' && c.pressed), children: icons.embed }, "embed")),
+    ].filter(Boolean);
+    const groups = GROUPS.map((keys, i) => [
+        ...(i === GROUPS.length - 1 ? insert : []),
+        ...keys.flatMap(key => TOOLBAR_ACTIONS.filter(a => a.key === key && supports(editor, a)).flatMap(a => [button(a), extra[a.key]])),
+    ].filter(Boolean)).filter(g => g.length);
+    return (_jsxs("div", { className: c.toolbar, role: "toolbar", "aria-label": "Text formatting", children: [groups.map((g, i) => (_jsxs(Fragment, { children: [i > 0 && c.divider && _jsx("span", { className: c.divider, "aria-hidden": true }), g] }, i))), 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)))] })), children] }));
 }
 /**
  * The address field under a toolbar, open while `prompt.kind` is set: Enter
@@ -245,7 +305,7 @@ 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" })] }));
+    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)') : 'A YouTube, X, Google Maps or Apple Maps link', 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
@@ -335,12 +395,8 @@ export function uploadImageTo(endpoint) {
     };
 }
 /**
- * The editor, its upload plumbing and the state a toolbar reads.
- *
- * The toolbar itself stays with the consumer: the two wikis differ on which
- * buttons exist, which icon set draws them, and whether a link is entered in a
- * `window.prompt` or an inline field. Those are real differences. What they had
- * no business differing on is everything below.
+ * The editor and its upload plumbing. `WikiToolbar` given the editor draws
+ * the buttons its extensions allow; the icons and classes are the app's.
  */
 export function useWikiEditor({ value, onChange, placeholder = '', nodes = [], proseClass, uploadImage, debounceMs = 150, }) {
     const fileInputRef = useRef(null);
@@ -413,6 +469,77 @@ export function useWikiEditor({ value, onChange, placeholder = '', nodes = [], p
             fileInputRef.current.value = '';
     }, [editor, uploadImage]);
     const triggerUpload = useCallback(() => fileInputRef.current?.click(), []);
-    const isActive = useCallback((a) => a ? Boolean(Array.isArray(a) ? editor?.isActive(a[0], a[1]) : editor?.isActive(a)) : false, [editor]);
-    return { editor, fileInputRef, isUploading, handleFileChange, triggerUpload, isActive };
+    return { editor, fileInputRef, isUploading, handleFileChange, triggerUpload };
+}
+// A line's whole document is the line, so Enter has nowhere to go.
+const LineDoc = TiptapNode.create({
+    name: 'doc',
+    topNode: true,
+    content: 'text*',
+    addKeyboardShortcuts: () => ({ Enter: () => true, 'Shift-Enter': () => true }),
+});
+/** A paste as one line: its blocks and breaks run on with a space, before the schema keeps only the marks the line takes. */
+const pastedLine = (html) => cleanPastedHtml(html).replace(/<\/(p|h[1-6]|li|div|blockquote|tr|td|th)>|<br\s*\/?>/gi, ' ');
+/**
+ * One line of words – a title, a heading, a caption, a button – edited in the
+ * element that shows it, so it reads as the page draws it. Its schema is the
+ * line and the `marks` it may keep, so nothing else can get in: no list from a
+ * typed "- ", no heading from a paste. Its value is that HTML, or plain text
+ * when it keeps no marks. It has its own undo, and `WikiToolbar` given its
+ * editor shows undo and its marks. `base.css` gives it its placeholder.
+ */
+export function WikiLine({ as: Tag, value, onChange, placeholder, marks = [], className, onFocus }) {
+    const ref = useRef(null);
+    const [editor, setEditor] = useState(null);
+    const latest = useRef({ onChange, onFocus });
+    useEffect(() => {
+        latest.current = { onChange, onFocus };
+    });
+    const key = marks.join();
+    const out = (e) => (key ? e.getHTML() : e.getText()).replace(/\s+/g, ' ');
+    const content = (v) => (key ? v : { type: 'doc', content: v ? [{ type: 'text', text: v }] : [] });
+    // Mounted on the element itself: the element is the editable root.
+    useLayoutEffect(() => {
+        const has = (m) => key.split(',').includes(m);
+        const e = new TiptapEditor({
+            element: { mount: ref.current },
+            extensions: [
+                LineDoc,
+                StarterKit.configure({
+                    document: false,
+                    paragraph: false,
+                    heading: false,
+                    blockquote: false,
+                    bulletList: false,
+                    orderedList: false,
+                    listItem: false,
+                    codeBlock: false,
+                    code: false,
+                    horizontalRule: false,
+                    hardBreak: false,
+                    strike: false,
+                    dropcursor: false,
+                    gapcursor: false,
+                    ...(has('bold') ? {} : { bold: false }),
+                    ...(has('italic') ? {} : { italic: false }),
+                }),
+                ...(has('link') ? [wikiLink] : []),
+            ],
+            content: content(value),
+            editorProps: { transformPastedHTML: pastedLine, transformPastedText: t => t.replace(/\s+/g, ' ') },
+            onUpdate: ({ editor }) => latest.current.onChange(out(editor)),
+            onFocus: ({ editor }) => latest.current.onFocus?.(editor),
+        });
+        setEditor(e);
+        return () => e.destroy();
+        // The value is read once here; the effect below takes later ones.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key]);
+    // Take a change from outside, never one the field itself just reported.
+    useEffect(() => {
+        if (editor && !editor.isFocused && out(editor) !== value)
+            editor.commands.setContent(content(value));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, value]);
+    return _jsx(Tag, { ref: ref, className: className, "data-wiki-line": "", "data-placeholder": placeholder, "aria-label": placeholder });
 }

package/dist/react.d.ts

@@ -479,14 +479,13 @@ export declare function isRailLinkActive(activePath: string, href: string, tree?
 export type { WikiLinkComponent, WikiLinkProps } from './react-server.js';
 /**
  * The `wiki-formant/dom` passes over a rendered article: tab groups, copy
- * buttons, sortable tables. All three renderers ran the same three in an
- * effect, and they disagreed on when: two ran it once on mount, so a page
- * swapped in without a remount kept its old tables unsortable. Each pass is
- * idempotent, so running on every `deps` change is safe.
+ * buttons, sortable tables, and each post on X hydrated and kept at the height
+ * it posts. All three renderers ran the same passes in an effect, and they
+ * disagreed on when: two ran it once on mount, so a page swapped in without a
+ * remount kept its old tables unsortable. Each pass is idempotent, so running
+ * on every `deps` change is safe.
  */
 export declare function useArticlePasses(ref: RefObject<HTMLElement | null>, deps: DependencyList): void;
-/** Tweet placeholders hydrated, and each iframe kept at the height it posts. */
-export declare function useTweetEmbeds(ref: RefObject<HTMLElement | null>, deps: DependencyList): void;
 /**
  * Counts the page views of the app it is mounted in: place it once, in the root
  * layout. `endpoint` is the route that hands the beacon to `collect`.

package/dist/react.js

@@ -883,10 +883,11 @@ const decodePath = (path) => {
 // ---- rendered-article passes --------------------------------------------------
 /**
  * The `wiki-formant/dom` passes over a rendered article: tab groups, copy
- * buttons, sortable tables. All three renderers ran the same three in an
- * effect, and they disagreed on when: two ran it once on mount, so a page
- * swapped in without a remount kept its old tables unsortable. Each pass is
- * idempotent, so running on every `deps` change is safe.
+ * buttons, sortable tables, and each post on X hydrated and kept at the height
+ * it posts. All three renderers ran the same passes in an effect, and they
+ * disagreed on when: two ran it once on mount, so a page swapped in without a
+ * remount kept its old tables unsortable. Each pass is idempotent, so running
+ * on every `deps` change is safe.
  */
 export function useArticlePasses(ref, deps) {
     useEffect(() => {
@@ -896,15 +897,6 @@ export function useArticlePasses(ref, deps) {
         activateTabGroups(root);
         addCopyButtons(root);
         sortTables(root);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-}
-/** Tweet placeholders hydrated, and each iframe kept at the height it posts. */
-export function useTweetEmbeds(ref, deps) {
-    useEffect(() => {
-        const root = ref.current;
-        if (!root)
-            return;
         hydrateTweetEmbeds(root);
         return onTweetResize((height, source) => sizeTweetEmbed(root, height, source));
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/tiptap.d.ts

@@ -61,7 +61,7 @@ export interface CodeBlockOptions {
     };
 }
 /** A code block whose language is pickable from a dropdown. */
-export declare function createCodeBlock({ langs, defaultLang, classNames, icons, }?: CodeBlockOptions): TiptapNode<import("@tiptap/extension-code-block").CodeBlockOptions, any>;
+export declare function createCodeBlock({ langs, defaultLang, classNames: own, icons, }?: CodeBlockOptions): TiptapNode<import("@tiptap/extension-code-block").CodeBlockOptions, any>;
 export interface TabsClassNames {
     editor?: string;
     list?: string;
@@ -82,12 +82,7 @@ export interface TabsOptions {
     /** Names a newly added tab. Receives the 1-based position. */
     tabLabel?: (index: number) => string;
 }
-/**
- * A tab group and its items, which must be registered together — `tabGroup`'s
- * content expression is `tabItem+`, so registering one without the other leaves
- * a node type the schema cannot satisfy.
- */
-export declare function createTabs({ classNames, icons, tabLabel, }?: TabsOptions): {
+export declare function createTabs({ classNames: own, icons: ownIcons, tabLabel, }?: TabsOptions): {
     TabGroup: TiptapNode<any, any>;
     TabItem: TiptapNode<any, any>;
 };

package/dist/tiptap.js

@@ -245,14 +245,24 @@ export const embedNodes = ({ resolveMapUrl = resolveMapRoute } = {}) => [
     TwitterEmbed,
     createMapEmbed({ resolveMapUrl }),
 ];
+/** The classes `base.css` draws a code block's language picker with, each replaceable. */
+const CODE_BLOCK_CLASSES = {
+    wrapper: 'code-block',
+    control: 'code-block-control',
+    button: 'code-block-button',
+    dropdown: 'code-block-menu',
+    option: 'code-block-option',
+    optionActive: 'active',
+};
 /** A code block whose language is pickable from a dropdown. */
-export function createCodeBlock({ langs = CODE_LANGS, defaultLang = DEFAULT_LANG, classNames = {}, icons = {}, } = {}) {
+export function createCodeBlock({ langs = CODE_LANGS, defaultLang = DEFAULT_LANG, classNames: own = {}, icons = {}, } = {}) {
+    const classNames = { ...CODE_BLOCK_CLASSES, ...own };
     function CodeBlockView({ node, updateAttributes, }) {
         const [open, setOpen] = useState(false);
         const close = useCallback(() => setOpen(false), []);
         const dropdownRef = useClickOutside(close);
         const lang = node.attrs.language || defaultLang;
-        return (_jsxs(NodeViewWrapper, { className: classNames.wrapper, children: [_jsxs("div", { ref: dropdownRef, className: classNames.control, children: [_jsxs("button", { type: "button", onClick: () => setOpen(!open), className: classNames.button, children: [icons.lang, _jsx("span", { children: lang }), icons.chevron?.(open)] }), open && (_jsx("div", { className: classNames.dropdown, children: langs.map(l => (_jsxs("button", { type: "button", onClick: () => {
+        return (_jsxs(NodeViewWrapper, { className: classNames.wrapper, children: [_jsxs("div", { ref: dropdownRef, className: classNames.control, children: [_jsxs("button", { type: "button", onClick: () => setOpen(!open), className: classNames.button, "aria-label": `Language: ${lang}`, "aria-expanded": open, children: [icons.lang, _jsx("span", { children: lang }), icons.chevron?.(open)] }), open && (_jsx("div", { className: classNames.dropdown, children: langs.map(l => (_jsxs("button", { type: "button", onClick: () => {
                                     updateAttributes({ language: l });
                                     setOpen(false);
                                 }, className: cx(classNames.option, l === lang && classNames.optionActive), children: [l, l === lang && icons.selected] }, l))) }))] }), _jsx("pre", { children: _jsx(NodeViewContent, { as: "code", className: `language-${lang}` }) })] }));
@@ -277,7 +287,20 @@ export function createCodeBlock({ langs = CODE_LANGS, defaultLang = DEFAULT_LANG
  * content expression is `tabItem+`, so registering one without the other leaves
  * a node type the schema cannot satisfy.
  */
-export function createTabs({ classNames = {}, icons = {}, tabLabel = i => `Tab ${i}`, } = {}) {
+/** The classes `base.css` draws the tab editor with, each replaceable. */
+const TABS_CLASSES = {
+    editor: 'tabs-editor',
+    list: 'tabs-list',
+    tab: 'tab-button',
+    tabActive: 'active',
+    title: 'tab-title',
+    remove: 'tab-remove',
+    add: 'tab-add',
+    content: 'tabs-content',
+};
+export function createTabs({ classNames: own = {}, icons: ownIcons = {}, tabLabel = i => `Tab ${i}`, } = {}) {
+    const classNames = { ...TABS_CLASSES, ...own };
+    const icons = { add: '+', remove: '×', ...ownIcons };
     function TabGroupView({ node, getPos, editor, updateAttributes, }) {
         const activeTab = node.attrs.activeTab ?? 0;
         const tabs = node.content.content || [];
@@ -313,7 +336,7 @@ export function createTabs({ classNames = {}, icons = {}, tabLabel = i => `Tab $
             tr.setNodeMarkup(posOf(index), undefined, { title });
             editor.view.dispatch(tr);
         };
-        return (_jsx(NodeViewWrapper, { "data-tabs": "", "data-active-tab": activeTab, children: _jsxs("div", { className: classNames.editor, children: [_jsxs("div", { className: classNames.list, children: [tabs.map((tab, i) => (_jsxs("div", { className: cx(classNames.tab, activeTab === i && classNames.tabActive), children: [_jsx("input", { type: "text", value: tab.attrs.title, onChange: e => renameTab(i, e.target.value), onClick: () => setActiveTab(i), className: classNames.title }), tabs.length > 1 && (_jsx("button", { type: "button", onClick: () => removeTab(i), className: classNames.remove, children: icons.remove }))] }, i))), _jsx("button", { type: "button", onClick: addTab, className: classNames.add, children: icons.add })] }), _jsx("div", { className: classNames.content, children: _jsx(NodeViewContent, {}) })] }) }));
+        return (_jsx(NodeViewWrapper, { "data-tabs": "", "data-active-tab": activeTab, children: _jsxs("div", { className: classNames.editor, children: [_jsxs("div", { className: classNames.list, children: [tabs.map((tab, i) => (_jsxs("div", { className: cx(classNames.tab, activeTab === i && classNames.tabActive), children: [_jsx("input", { type: "text", value: tab.attrs.title, onChange: e => renameTab(i, e.target.value), onClick: () => setActiveTab(i), className: classNames.title, "aria-label": "Tab name" }), tabs.length > 1 && (_jsx("button", { type: "button", onClick: () => removeTab(i), className: classNames.remove, "aria-label": "Remove this tab", title: "Remove this tab", children: icons.remove }))] }, i))), _jsx("button", { type: "button", onClick: addTab, className: classNames.add, "aria-label": "Add a tab", title: "Add a tab", children: icons.add })] }), _jsx("div", { className: classNames.content, children: _jsx(NodeViewContent, {}) })] }) }));
     }
     const TabGroup = TiptapNode.create({
         name: 'tabGroup',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.80.0",
+  "version": "0.82.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",