wiki-formant 0.79.0 → 0.81.0

package/README.md

@@ -693,12 +693,12 @@ export const X = xAccount({ siteName: 'AcuiQ', handle: '@acu_iq', posts: "a name
 addCopyButtons(el);            // every <pre> gets one, once
 sortTables(el);                // every column-headed table sorts by its headers
 hydrateTweetEmbeds(el);        // placeholders get a live src
-const off = onTweetResize(h => sizeTweetEmbeds(el, h));
+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.
 
@@ -706,7 +706,7 @@ In React, `useArticlePasses(ref, [blocks])` runs the three passes and `useTweetE
 
 `scrollTables(html)` is the one table pass that runs on the string, before render: it wraps each stored table in a `.table-scroll` box, and `base.css` lets that box scroll sideways. A table box ignores `overflow`, so a table with an address or a URL in a cell is as wide as that token whatever its column, and a scroll box added by an effect would arrive after the table had already been laid out too wide. Call it on the render path beside `injectHeadingIds`. A table already in a box keeps it, so it is safe on HTML that has been through it once. `articleHtml(html, { used, slug, anchor, links })` (`wiki-formant/headings`) is that chain: heading ids, the scroll boxes, and, given `links`, `normaliseLinks`.
 
-The embed's origin is written down once. It is both the embed host and the allow-list `onTweetResize` checks before believing a posted height, and it had been spelled out at four call sites across two repos. Any page can `postMessage`; only the embed host may size the embed.
+The embed's origin is written down once. It is both the embed host and the allow-list `onTweetResize` checks before believing a posted height, and it had been spelled out at four call sites across two repos. Any page can `postMessage`; only the embed host may size the embed. Every embed on a page posts to the same listener, so `onTweetResize` hands over the window that posted, and `sizeTweetEmbed` sizes only that one's iframe: two posts on a page had both been drawn at whichever height arrived last.
 
 ## Search
 
@@ -799,7 +799,7 @@ The bytes say what the file is, never the name or type, and SVG is refused. Ever
 
 ## Editor nodes
 
-`wiki-formant/tiptap` carries the custom nodes both wiki editors had written twice: `Iframe`, `YouTube` (the stock extension plus the paste rule it does not ship with), `TwitterEmbed`, `createMapEmbed`, `createCodeBlock` and `createTabs`. `Iframe` and `createMapEmbed` draw a frame only for an https src on `DEFAULT_IFRAME_HOSTS` (`embedSrc`), since an editor draws stored HTML where its author is signed in, and a `javascript:` src runs there under any CSP that allows inline script.
+`wiki-formant/tiptap` carries the custom nodes both wiki editors had written twice: `Iframe`, `YouTube` (the stock extension plus the paste rule it does not ship with), `TwitterEmbed`, `createMapEmbed`, `createCodeBlock` and `createTabs`. `embedNodes({ resolveMapUrl })` is the first four as one list, which an editor puts in its `nodes`: a pasted YouTube, X or map link becomes its player as it lands, and the toolbar's embed prompt has a node for every link it recognises. `resolveMapUrl` defaults to `wiki-formant/maps`', through `/api/resolve-map`. `Iframe` and `createMapEmbed` draw a frame only for an https src on `DEFAULT_IFRAME_HOSTS` (`embedSrc`), since an editor draws stored HTML where its author is signed in, and a `javascript:` src runs there under any CSP that allows inline script.
 
 ```ts
 const CodeBlock = createCodeBlock({
@@ -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/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,
@@ -432,8 +467,8 @@ pre:hover > .code-copy-btn,
 .stats-count { font-variant-numeric: tabular-nums; }
 
 /* ---- embeds ------------------------------------------------------------------
-   The players the `wiki-formant/tiptap` nodes store, filling their column at a
-   screen's proportions. The node writes a width and height onto the iframe,
+   The players the `wiki-formant/tiptap` nodes store, a video or map filling its
+   column at a screen's proportions. The node writes a width and height onto the iframe,
    which `aspect-ratio` with `height: auto` overrides. Spacing, corners,
    borders and the editor's selection ring are the site's. */
 :is(div[data-youtube-video], .map-embed) iframe {
@@ -442,3 +477,12 @@ pre:hover > .code-copy-btn,
   height: auto;
   aspect-ratio: 16 / 9;
 }
+
+/* A post on X at the width X lays it out for, as tall as it says it is
+   (`onTweetResize`), and a little before it has said. */
+.twitter-embed iframe {
+  display: block;
+  width: 550px;
+  max-width: 100%;
+  min-height: 200px;
+}

package/dist/dom.d.ts

@@ -20,13 +20,15 @@ export declare function addCopyButtons(root: ParentNode, options?: CopyButtonOpt
 /** The embed iframe's src. `dnt=true` opts the embed out of Twitter's tracking. */
 export declare const tweetEmbedSrc: (tweetId: string | number) => string;
 /**
- * Subscribe to the height the embed posts back once it has laid itself out.
+ * Subscribe to the height an embed posts back once it has laid itself out,
+ * with the window that posted it.
  *
  * The iframe renders at an unknown height and there is no other way to learn
- * it. The caller decides which iframes the height applies to; this only owns
- * the origin check and the message shape. Returns a disposer.
+ * it. Every embed on the page posts to the same listener, so the source is how
+ * a height finds its own iframe. This only owns the origin check and the
+ * message shape. Returns a disposer.
  */
-export declare function onTweetResize(resize: (height: number) => void): () => void;
+export declare function onTweetResize(resize: (height: number, source: MessageEventSource | null) => void): () => void;
 /**
  * Point every un-hydrated `[data-twitter-embed]` placeholder under `root` at
  * the real embed URL.
@@ -36,8 +38,8 @@ export declare function onTweetResize(resize: (height: number) => void): () => v
  * of the same content does not reload every embed on the page.
  */
 export declare function hydrateTweetEmbeds(root: ParentNode): void;
-/** Apply a measured height to every embed iframe under `root`. */
-export declare function sizeTweetEmbeds(root: ParentNode, height: number): void;
+/** Apply a posted height to the embed iframe under `root` that posted it, and to no other. */
+export declare function sizeTweetEmbed(root: ParentNode, height: number, source: MessageEventSource | null): void;
 export interface TabGroupClassNames {
     list?: string;
     panels?: string;

package/dist/dom.js

@@ -63,11 +63,13 @@ export const TWITTER_ORIGIN = 'https://platform.twitter.com';
 /** The embed iframe's src. `dnt=true` opts the embed out of Twitter's tracking. */
 export const tweetEmbedSrc = (tweetId) => `${TWITTER_ORIGIN}/embed/Tweet.html?id=${tweetId}&dnt=true`;
 /**
- * Subscribe to the height the embed posts back once it has laid itself out.
+ * Subscribe to the height an embed posts back once it has laid itself out,
+ * with the window that posted it.
  *
  * The iframe renders at an unknown height and there is no other way to learn
- * it. The caller decides which iframes the height applies to; this only owns
- * the origin check and the message shape. Returns a disposer.
+ * it. Every embed on the page posts to the same listener, so the source is how
+ * a height finds its own iframe. This only owns the origin check and the
+ * message shape. Returns a disposer.
  */
 export function onTweetResize(resize) {
     const handleMessage = (e) => {
@@ -78,7 +80,7 @@ export function onTweetResize(resize) {
             return;
         const height = data.params?.[0]?.height;
         if (height)
-            resize(height);
+            resize(height, e.source);
     };
     window.addEventListener('message', handleMessage);
     return () => window.removeEventListener('message', handleMessage);
@@ -104,10 +106,11 @@ export function hydrateTweetEmbeds(root) {
         }
     }
 }
-/** Apply a measured height to every embed iframe under `root`. */
-export function sizeTweetEmbeds(root, height) {
+/** Apply a posted height to the embed iframe under `root` that posted it, and to no other. */
+export function sizeTweetEmbed(root, height, source) {
     for (const iframe of Array.from(root.querySelectorAll('[data-twitter-embed] iframe'))) {
-        iframe.style.height = `${height}px`;
+        if (iframe.contentWindow === source)
+            iframe.style.height = `${height}px`;
     }
 }
 /**

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 their iframes kept sized to the posted height. */
-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

@@ -26,7 +26,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //      state on <html> before first paint. The hook keeps that attribute in
 //      sync afterwards, so CSS has one source of truth either side of hydration.
 import { railBreakpointMismatch, readRailFloating, resolveSidebarOpen, SIDEBAR_ATTRIBUTE, } from './sidebar.js';
-import { activateTabGroups, addCopyButtons, hydrateTweetEmbeds, onTweetResize, sizeTweetEmbeds, sortTables, startBeacon } from './dom.js';
+import { activateTabGroups, addCopyButtons, hydrateTweetEmbeds, onTweetResize, sizeTweetEmbed, sortTables, startBeacon } from './dom.js';
 import { comboboxAria } from './combobox.js';
 import { Component, createContext, createElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 const readStored = (key) => {
@@ -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,17 +897,8 @@ export function useArticlePasses(ref, deps) {
         activateTabGroups(root);
         addCopyButtons(root);
         sortTables(root);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-}
-/** Tweet placeholders hydrated, and their iframes kept sized to the posted height. */
-export function useTweetEmbeds(ref, deps) {
-    useEffect(() => {
-        const root = ref.current;
-        if (!root)
-            return;
         hydrateTweetEmbeds(root);
-        return onTweetResize(height => sizeTweetEmbeds(root, height));
+        return onTweetResize((height, source) => sizeTweetEmbed(root, height, source));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 }

package/dist/tiptap.d.ts

@@ -29,6 +29,14 @@ export interface MapEmbedOptions {
  * node has to already exist for the reader to see anything happen.
  */
 export declare function createMapEmbed({ resolveMapUrl }: MapEmbedOptions): TiptapNode<any, any>;
+/**
+ * Every player a pasted link becomes – a YouTube video, a post on X, a Google
+ * or Apple map – and any other allowed iframe, as one list. Each app had
+ * picked its embeds by hand, and one that left `TwitterEmbed` out kept a
+ * pasted post as a bare link. `resolveMapUrl` follows a shortened map link,
+ * through `/api/resolve-map` unless an app routes it another way.
+ */
+export declare const embedNodes: ({ resolveMapUrl }?: Partial<MapEmbedOptions>) => TiptapNode<any, any>[];
 export interface CodeBlockClassNames {
     wrapper?: string;
     /** The control cluster, positioned over the block. */
@@ -53,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;
@@ -74,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

@@ -18,7 +18,7 @@ import TiptapYoutube from '@tiptap/extension-youtube';
 import TiptapCodeBlock from '@tiptap/extension-code-block';
 import { onTweetResize, tweetEmbedSrc } from './dom.js';
 import { DEFAULT_IFRAME_HOSTS } from './headers.js';
-import { toMapEmbedUrl } from './maps.js';
+import { resolveMapUrl as resolveMapRoute, toMapEmbedUrl } from './maps.js';
 import { useClickOutside } from './react.js';
 import { cx } from './html.js';
 import { slugifyHeading, uniqueHeadingId } from './headings.js';
@@ -78,10 +78,10 @@ export const YouTube = TiptapYoutube.extend({
 function TwitterEmbedView({ node }) {
     const containerRef = useRef(null);
     // The embed posts its measured height back; `onTweetResize` owns the origin
-    // check.
-    useEffect(() => onTweetResize(height => {
+    // check, and the source keeps one tweet's height off every other.
+    useEffect(() => onTweetResize((height, source) => {
         const iframe = containerRef.current?.querySelector('iframe');
-        if (iframe)
+        if (iframe && iframe.contentWindow === source)
             iframe.style.height = `${height}px`;
     }), []);
     return (_jsx(NodeViewWrapper, { children: _jsx("div", { ref: containerRef, className: "twitter-embed", children: _jsx("iframe", { src: tweetEmbedSrc(node.attrs.tweetId), scrolling: "no", allowFullScreen: true }) }) }));
@@ -231,14 +231,38 @@ export function createMapEmbed({ resolveMapUrl }) {
         },
     });
 }
+// ---- every embed ------------------------------------------------------------
+/**
+ * Every player a pasted link becomes – a YouTube video, a post on X, a Google
+ * or Apple map – and any other allowed iframe, as one list. Each app had
+ * picked its embeds by hand, and one that left `TwitterEmbed` out kept a
+ * pasted post as a bare link. `resolveMapUrl` follows a shortened map link,
+ * through `/api/resolve-map` unless an app routes it another way.
+ */
+export const embedNodes = ({ resolveMapUrl = resolveMapRoute } = {}) => [
+    YouTube,
+    Iframe,
+    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}` }) })] }));
@@ -263,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 || [];
@@ -299,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.79.0",
+  "version": "0.81.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",