@k2b/editor 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -69,7 +69,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.38.0",
+    "@k2b/ui": "0.39.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/Toolbar.tsx

@@ -171,6 +171,8 @@ export function Toolbar(props: ToolbarProps) {
     <div
       ref={root}
       class={props.class ?? "k2b-editor-toolbar flex min-w-0 items-center gap-2 text-dimmed"}
+      // The stylesheet sizes every control's icon here, the host's start and end controls included.
+      data-k2b-editor-toolbar=""
       style={{ "margin-bottom": lift() ? `${lift()}px` : undefined }}
       on:mousedown={(event) => event.preventDefault()}
     >

package/src/markdown/data-blocks.ts

@@ -2,6 +2,7 @@ import { type EditorState, type Extension, Prec, type Range, RangeSet, StateFiel
 import { Decoration, type DecorationSet, EditorView, keymap, WidgetType } from "@codemirror/view";
 import { holdsDecorations, refreshMarkdownDecorationsEffect, selectionIntersectsRange } from "./_lib/cursor-zone-field";
 import { type DataBlock, extractDataBlocks, namedBlockBody, renderDataBlockHtml } from "./lib/named-blocks";
+import { blockAnchorsDrawnElsewhere } from "./named-blocks";
 
 type DataBlockRange = {
   from: number;
@@ -52,8 +53,10 @@ class DataBlockWidget extends WidgetType {
 
   override get estimatedHeight() {
     const rows = Math.max(1, this.body.split("\n").filter((line) => line.trim().length > 0).length);
-    // 12px / 16px cells + 16px padding + divider; the handle and outer padding round up to 44px.
-    return 44 + rows * 33;
+    // 12px / 16px cells + 16px padding + divider per row; the anchor label (18px line), its margins and the outer
+    // padding take just under 44px. Chromium and WebKit round the rows differently (one and two rows measured
+    // 75.98 / 109.19px and 109.89px), so the base keeps the estimate at most 1px above both.
+    return 43.95 + rows * 33;
   }
 
   override ignoreEvent() {
@@ -76,6 +79,8 @@ export const dataBlocksExtension = (): Extension => {
     },
     provide(field) {
       return [
+        // The data block widget draws its anchor label together with the block.
+        blockAnchorsDrawnElsewhere.of("data"),
         EditorView.decorations.from(field, (value) => value.decorations),
         EditorView.atomicRanges.of((view) => view.state.field(field).blockWidgetDecorations),
       ];

package/src/markdown/lib/named-blocks.ts

@@ -354,7 +354,7 @@ const humanizeKey = (key: string): string =>
 export const renderDataBlockHtml = (name: string | null, src: string): string => {
   const entries = parseNamedDataBlock(src);
   const handle = name
-    ? `<div class="md-block-handle" data-block-name="${escapeHtml(name)}">@${escapeHtml(name)}</div>`
+    ? `<div class="md-block-handle" data-block-name="${escapeHtml(name)}">${escapeHtml(name)}</div>`
     : `<div class="md-data-handle-row"><div class="md-block-handle">data</div></div>`;
   const rows =
     entries.length > 0
@@ -392,7 +392,7 @@ export const renderNamedBlockHandlesMarkdown = (md: string | null | undefined):
   }
   for (const block of extractNamedBlocks(md)) {
     if (block.type === "data") continue;
-    const handle = `<div class="md-block-handle" data-block-name="${escapeHtml(block.name)}">@${escapeHtml(block.name)}</div>`;
+    const handle = `<div class="md-block-handle" data-block-name="${escapeHtml(block.name)}">${escapeHtml(block.name)}</div>`;
     replacements.push({ from: block.handleStart, to: block.handleEnd, html: handle });
   }
 

package/src/markdown/named-blocks.ts

@@ -1,4 +1,4 @@
-import { type Extension, type Range, RangeSet } from "@codemirror/state";
+import { type Extension, Facet, type Range, RangeSet } from "@codemirror/state";
 import { Decoration, EditorView, WidgetType } from "@codemirror/view";
 import {
   blockWidgetLineNavigationExtension,
@@ -8,6 +8,13 @@ import {
 } from "./_lib/cursor-zone-field";
 import { extractNamedBlocks } from "./lib/named-blocks";
 
+/**
+ * Block types whose anchor line another extension draws together with the block, such as data blocks. The anchor
+ * label leaves those lines alone; every other named block (tables, lists, …) gets the label.
+ */
+export const blockAnchorsDrawnElsewhere = Facet.define<string, ReadonlySet<string>>({ combine: (types) => new Set(types) });
+
+/** The anchor line `@name` above a block, shown as a quiet label until the caret enters the line. */
 class NamedBlockHandleWidget extends WidgetType {
   constructor(
     private name: string,
@@ -19,8 +26,9 @@ class NamedBlockHandleWidget extends WidgetType {
   override toDOM(view: EditorView) {
     const el = document.createElement("div");
     el.className = "cm-named-block-handle md-block-handle";
+    el.dataset.blockName = this.name;
     el.setAttribute("contenteditable", "false");
-    el.textContent = `@${this.name}`;
+    el.textContent = this.name;
     el.onmousedown = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -52,9 +60,7 @@ export const namedBlocksExtension = (): Extension => {
       const nextLine = state.doc.lineAt(Math.min(block.handleEnd + 1, state.doc.length));
       const sourceVisibleRange = { from: prevLine.from, to: nextLine.to };
       ranges.push(sourceVisibleRange);
-      // Table/data handles are rendered by their block widgets together
-      // with the preview so the handle and body collapse as one stable block.
-      if (block.type === "table" || block.type === "data") continue;
+      if (state.facet(blockAnchorsDrawnElsewhere).has(block.type)) continue;
       if (selectionIntersectsRange(cursor, sourceVisibleRange.from, sourceVisibleRange.to)) continue;
       const handleDecoration = Decoration.replace({
         widget: new NamedBlockHandleWidget(block.name, block.handleStart),

package/src/markdown/note-scroller.browser-harness.ts

@@ -37,19 +37,33 @@ const iconField = StateField.define<DecorationSet>({
   provide: (field) => EditorView.decorations.from(field),
 });
 
-const doc = Array.from({ length: 6 }, (_, block) =>
-  [
-    ...Array.from({ length: 35 }, (_, line) => `Paragraph ${block + 1}.${line + 1}`),
-    ":::icon",
-    `Anchor ${block + 1}`,
-    ...Array.from({ length: 35 }, (_, line) => `Following ${block + 1}.${line + 1}`),
-  ].join("\n\n"),
+const words = "Every paragraph wraps at its own width so a narrower column moves some line breaks on almost every frame".split(" ");
+// Paragraphs of different lengths, as in a real note: a column that changes width rewraps one of them on nearly every frame.
+const prose = Array.from({ length: 90 }, (_, index) =>
+  [`Paragraph ${index + 1}`, ...Array.from({ length: 30 + ((index * 37) % 50) }, (_, word) => words[(index + word) % words.length])].join(
+    " ",
+  ),
 ).join("\n\n");
 
+const wraps = new URLSearchParams(location.search).has("prose");
+const doc = wraps
+  ? prose
+  : Array.from({ length: 6 }, (_, block) =>
+      [
+        ...Array.from({ length: 35 }, (_, line) => `Paragraph ${block + 1}.${line + 1}`),
+        ":::icon",
+        `Anchor ${block + 1}`,
+        ...Array.from({ length: 35 }, (_, line) => `Following ${block + 1}.${line + 1}`),
+      ].join("\n\n"),
+    ).join("\n\n");
+
 const port = document.getElementById("port")!;
 const view = new EditorView({
   parent: port,
-  state: EditorState.create({ doc, extensions: [iconField, noteScroller, EditorView.theme({ ".cm-line": { lineHeight: "20px" } })] }),
+  state: EditorState.create({
+    doc,
+    extensions: [iconField, noteScroller, wraps ? EditorView.lineWrapping : [], EditorView.theme({ ".cm-line": { lineHeight: "20px" } })],
+  }),
 });
 
 const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));
@@ -68,6 +82,69 @@ const harness = {
     for (let index = 0; index < 4; index++) await frame();
     return { written, scrollTop: port.scrollTop };
   },
+  /**
+   * Scrolls the page so the given paragraph starts at its top edge, then sets the column width once per frame. Reports,
+   * for every painted frame, how far the reading point at the top edge moved: the line there and how far into it the
+   * edge fell before the resize.
+   *
+   * `before` happens first: `edit` inserts paragraphs at the start of the note, as another person would, without
+   * scrolling; `column` narrows the column inside the same scroller, as "Full width" does, and the reader then
+   * scrolls on to the given paragraph.
+   */
+  resizeColumn: async (text: string, widths: number[], focused: boolean, before?: "edit" | "column") => {
+    if (focused) view.focus();
+    else view.contentDOM.blur();
+    // The drawn line itself: asking the editor for coordinates would make it measure first.
+    const offset = (target = text) => {
+      const { node } = view.domAtPos(view.state.doc.toString().indexOf(target));
+      const line = (node instanceof Element ? node : node.parentElement)!.closest(".cm-line")!;
+      return Math.round(line.getBoundingClientRect().top - port.getBoundingClientRect().top);
+    };
+    // Scrolling draws the lines with their real heights, so the line reaches the edge in a few steps.
+    const reach = async (target: string) => {
+      const from = view.state.doc.toString().indexOf(target);
+      port.scrollTop += view.documentTop + view.lineBlockAt(from).top - port.getBoundingClientRect().top;
+      for (let step = 0; step < 3; step++) {
+        for (let index = 0; index < 4; index++) await frame();
+        port.scrollTop += offset(target);
+      }
+      for (let index = 0; index < 4; index++) await frame();
+    };
+    if (before === "column") {
+      await reach("Paragraph 20 ");
+      view.contentDOM.style.maxWidth = "640px";
+      for (let index = 0; index < 4; index++) await frame();
+    }
+    await reach(text);
+    if (before === "edit") {
+      view.dispatch({ changes: { from: 0, insert: `${words.join(" ")}\n\n`.repeat(3) } });
+      for (let index = 0; index < 4; index++) await frame();
+    }
+    // The reading point: the line at the top edge and how far into it the edge falls.
+    const portTop = port.getBoundingClientRect().top;
+    const content = view.contentDOM.getBoundingClientRect();
+    const hit = document.elementFromPoint(content.left + 2, portTop + 1)!.closest(".cm-line")!;
+    const pos = view.posAtDOM(hit);
+    const lineAt = () => {
+      const { node } = view.domAtPos(pos);
+      return (node instanceof Element ? node : node.parentElement)!.closest(".cm-line")!.getBoundingClientRect();
+    };
+    const share = (portTop - lineAt().top) / lineAt().height;
+    const point = () => {
+      const line = lineAt();
+      return Math.round(line.top + share * line.height - port.getBoundingClientRect().top);
+    };
+    const start = point();
+    const moved: number[] = [];
+    for (const width of widths) {
+      port.style.width = `${width}px`;
+      // Callbacks run in the order they were requested: this one reads what the last frame painted, before the editor
+      // measures again.
+      await frame();
+      moved.push(point() - start);
+    }
+    return moved;
+  },
   /** Deletes the start of the note while the focused editor sits at the bottom, as a collaborator's edit arrives. */
   deleteAboveAtBottom: async (length: number) => {
     view.focus();

package/src/markdown/note-scroller.ts

@@ -53,5 +53,96 @@ const lockHeightWhileRendering = ViewPlugin.fromClass(
   },
 );
 
+/** The nearest ancestor that scrolls vertically: the page's scroll area. */
+const scrollParent = (element: HTMLElement) => {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement)
+    if (/^(auto|scroll|overlay)$/.test(getComputedStyle(parent).overflowY)) return parent;
+  return null;
+};
+
+/**
+ * The line block at the scroller's top edge and how far into it the edge falls, in its heights, with the column and
+ * scroller widths it was read at.
+ */
+type ReadingAnchor = { width: number; port: number } & ({ from: number; within: number } | { from: null });
+
+/**
+ * A sidebar, panel or window resize changes the column width on every frame and rewraps lines above the page's top
+ * edge. CodeMirror keeps the text in place in a page scroller only while it has focus, which the drag took away, and
+ * only from the frame after the browser painted the rewrap. Either way the note jumps on every rewrap. This measures
+ * the editor in the frame the scroller resizes, before the paint, and keeps the line at the top edge where it was.
+ */
+const holdReadingPosition = ViewPlugin.fromClass(
+  class {
+    private scroller: HTMLElement | null = null;
+    private anchor: ReadingAnchor | null = null;
+    private readonly resize = new ResizeObserver(() => this.hold());
+    private readonly capture = { key: this, read: () => this.readAnchor() };
+    private readonly onScroll = () => this.view.requestMeasure(this.capture);
+
+    constructor(private readonly view: EditorView) {}
+
+    update({ view, docChanged, heightChanged, changes }: ViewUpdate) {
+      if (this.anchor?.from != null && docChanged) this.anchor.from = changes.mapPos(this.anchor.from);
+      // An edit or a block that changed its height moves the text without a scroll: read the place again.
+      if (this.scroller && (docChanged || heightChanged)) view.requestMeasure(this.capture);
+      if (this.scroller || !view.dom.isConnected) return;
+      this.scroller = scrollParent(view.dom);
+      if (!this.scroller) return;
+      this.resize.observe(this.scroller);
+      this.scroller.addEventListener("scroll", this.onScroll, { passive: true });
+      view.requestMeasure(this.capture);
+    }
+
+    destroy() {
+      this.resize.disconnect();
+      this.scroller?.removeEventListener("scroll", this.onScroll);
+    }
+
+    /**
+     * Records where the reader is. A resized scroller keeps the old place for its resize callback; a column that
+     * changed inside an unchanged scroller, such as for "Full width", is not this plugin's to hold.
+     */
+    private readAnchor() {
+      const width = this.view.contentDOM.getBoundingClientRect().width;
+      const port = this.scroller!.clientWidth;
+      const { anchor } = this;
+      if (!anchor || Math.abs(anchor.width - width) < 0.5 || anchor.port === port) this.anchor = this.measureAnchor(width);
+    }
+
+    private measureAnchor(width: number): ReadingAnchor {
+      const port = this.scroller!.clientWidth;
+      const edge = this.scroller!.getBoundingClientRect().top - this.view.documentTop;
+      // Nothing above the top edge can move while the note starts below it.
+      if (edge <= 0) return { width, port, from: null };
+      const block = this.view.lineBlockAtHeight(edge);
+      return { width, port, from: block.from, within: (edge - block.top) / Math.max(1, block.height) };
+    }
+
+    private hold() {
+      const { view, scroller, anchor } = this;
+      if (!scroller || !view.dom.isConnected) return;
+      const width = view.contentDOM.getBoundingClientRect().width;
+      if (anchor?.from != null && Math.abs(anchor.width - width) >= 0.5) {
+        // Reading the layout runs the requested measure now. A focused editor corrects part of the rewrap itself;
+        // this adds only the rest. A correction onto lines it had not drawn lands on estimated heights; the next pass
+        // draws them, and three passes settle.
+        for (let pass = 0; pass < 3; pass++) {
+          view.requestMeasure();
+          // Any layout read runs the requested measure first; the block is then at its new place.
+          view.lineBlockAtHeight(0);
+          const block = view.lineBlockAt(Math.min(anchor.from, view.state.doc.length));
+          const edge = scroller.getBoundingClientRect().top - view.documentTop;
+          // WebKit drops a fraction of a pixel from the scroll offset.
+          const delta = Math.round(block.top + anchor.within * block.height - edge);
+          if (delta === 0) break;
+          scroller.scrollTop += delta;
+        }
+      }
+      this.anchor = this.measureAnchor(width);
+    }
+  },
+);
+
 /** The page scrolls the note; CodeMirror only renders it. */
-export const noteScroller = [noteScrollerTheme, lockHeightWhileRendering];
+export const noteScroller = [noteScrollerTheme, lockHeightWhileRendering, holdReadingPosition];

package/src/markdown/pretty-table.ts

@@ -205,7 +205,7 @@ export const createPrettyTablePresentation = (data: PrettyTableData, options: Pr
 export const renderPrettyTableHtml = (data: PrettyTableData, options: PrettyTableOptions = {}): string => {
   const presentation = createPrettyTablePresentation(data, options);
   const caption = data.caption
-    ? `<div class="md-block-handle" data-block-name="${escapeHtml(data.caption)}">@${escapeHtml(data.caption)}</div>`
+    ? `<div class="md-block-handle" data-block-name="${escapeHtml(data.caption)}">${escapeHtml(data.caption)}</div>`
     : "";
   const headerHtml = data.headers.map((_, i) => `<th scope="col">${presentation.headerHtml(i)}</th>`).join("");
   // An all-empty GFM header is the approved header-off representation.

package/src/markdown/shared-tables.ts

@@ -7,9 +7,14 @@ import type { TableHost } from "@k2b/ui/text-editor";
 import { displayCell, findTables, type Table } from "@k2b/ui/text-editor/model";
 import { isFormula } from "../formula";
 import { refreshMarkdownDecorationsEffect } from "./_lib/cursor-zone-field";
-import { extractNamedBlocks } from "./lib/named-blocks";
 import { applyLigatures } from "./ligatures";
-import { createPrettyTablePresentation, formatFormulaValue, type PrettyTableData, type PrettyTableOptions } from "./pretty-table";
+import {
+  createPrettyTablePresentation,
+  formatFormulaError,
+  formatFormulaValue,
+  type PrettyTableData,
+  type PrettyTableOptions,
+} from "./pretty-table";
 import { formulaPreviewWidget } from "./tables";
 
 export type TablePresentationOptions = Omit<PrettyTableOptions, "locale"> & {
@@ -33,30 +38,6 @@ const presentationData = (table: Table): PrettyTableData => {
   return { headers: values(table.lines[0]), rows: table.lines.slice(2).map(values), align: table.align };
 };
 
-const captionDecorations = (state: EditorState): DecorationSet => {
-  const source = state.doc.toString();
-  const starts = new Set(findTables(source).map((table) => table.from));
-  return Decoration.set(
-    extractNamedBlocks(source)
-      .filter((block) => block.type === "table" && starts.has(block.blockStart))
-      .map((block) =>
-        // Keep the actual handle editable. namedBlocksExtension skips table handles;
-        // tableGrid starts on the header, so neither extension renders a second caption.
-        Decoration.mark({ class: "md-block-handle cm-notebook-table-caption", attributes: { "data-block-name": block.name } }).range(
-          block.handleStart,
-          block.handleEnd,
-        ),
-      ),
-    true,
-  );
-};
-
-const tableCaptions = StateField.define<DecorationSet>({
-  create: captionDecorations,
-  update: (value, tr) => (tr.docChanged ? captionDecorations(tr.state) : value),
-  provide: (field) => EditorView.decorations.from(field),
-});
-
 const presentationTheme = EditorView.theme({
   ".k2b-ste-table .cm-notebook-formula-editor": {
     position: "absolute",
@@ -69,23 +50,40 @@ const presentationTheme = EditorView.theme({
     zIndex: "5",
     background: "var(--k2b-surface)",
   },
+  // One flat chip right below the edited cell, above the page so the table's scroll area never cuts it.
   ".cm-notebook-active-result": {
-    position: "absolute",
-    bottom: "100%",
-    right: "0",
-    zIndex: "6",
-    padding: "2px 6px",
-    maxWidth: "18rem",
-    background: "var(--k2b-surface)",
-    border: "1px solid var(--k2b-border)",
+    position: "fixed",
+    inset: "auto",
+    margin: "0",
+    display: "flex",
+    alignItems: "baseline",
+    gap: "6px",
+    width: "max-content",
+    height: "auto",
+    maxWidth: "min(20rem, calc(100vw - 16px))",
+    overflow: "visible",
+    padding: "4px 8px",
+    border: "0",
     borderRadius: "var(--k2b-radius-control)",
-    boxShadow: "var(--k2b-shadow-float)",
-    fontSize: "12px",
+    boxShadow: "none",
+    background: "var(--k2b-surface-muted)",
+    color: "var(--k2b-text-secondary)",
+    font: "12.5px/1.4 var(--k2b-font-sans)",
+    whiteSpace: "normal",
+    overflowWrap: "anywhere",
   },
+  ".cm-notebook-active-result[data-error]": { background: "var(--k2b-danger-surface)", color: "var(--k2b-danger-text)" },
+  ".cm-notebook-active-result > .ti": { flex: "none", alignSelf: "center" },
 
   ".k2b-ste-table .k2b-ste-cell > .md-table-cell": { padding: "0", minHeight: "0" },
+  ".k2b-ste-table .k2b-ste-cell > .md-table-cell.md-formula-error": {
+    display: "inline-block",
+    padding: "0 6px",
+    borderRadius: "var(--k2b-radius-control)",
+    fontFamily: "var(--k2b-font-mono)",
+    fontSize: "12.5px",
+  },
   ".k2b-ste-table tr:has([data-notebook-total]) > td": { borderTop: "1px solid var(--ui-border-strong)", fontWeight: "600" },
-  ".cm-notebook-table-caption": { margin: "0" },
   ".cm-notebook-formula-copy": {
     display: "inline-flex",
     alignItems: "center",
@@ -143,19 +141,30 @@ const copyButton = (element: HTMLElement, value: string, locale: string): HTMLBu
   return button;
 };
 
-/** The active formula stays over its reserved cell, with the evaluated result
- * beside it. Reuse the same presentation as the inactive grid and exports. */
+/** The active formula stays over its reserved cell, with its result or error
+ * right below it, described to screen readers. Reuse the same evaluation as
+ * the inactive grid and exports. */
+let resultIds = 0;
 const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
   ViewPlugin.define((view) => {
     let cell: HTMLElement | null = null;
     let result: HTMLElement | null = null;
     let alive = true;
+    const place = () => {
+      const box = cell?.parentElement?.getBoundingClientRect();
+      if (!box || !result) return;
+      result.style.left = `${Math.max(8, Math.min(box.left, innerWidth - result.offsetWidth - 8))}px`;
+      result.style.top = `${box.bottom + 4}px`;
+    };
     const clear = () => {
       cell?.classList.remove("cm-notebook-formula-editor");
+      cell?.removeAttribute("aria-describedby");
       if (cell?.parentElement) cell.parentElement.style.removeProperty("height");
       result?.remove();
       result = null;
       cell = null;
+      removeEventListener("scroll", place, true);
+      removeEventListener("resize", place);
     };
     const paint = () =>
       queueMicrotask(() => {
@@ -181,15 +190,41 @@ const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
           parent.style.height = `${parent.getBoundingClientRect().height}px`;
           result = parent.ownerDocument.createElement("div");
           result.className = "cm-notebook-active-result";
+          result.id = `cm-notebook-active-result-${++resultIds}`;
+          result.popover = "manual";
           result.setAttribute("role", "status");
           result.contentEditable = "false";
           parent.append(result);
+          result.showPopover();
           target.classList.add("cm-notebook-formula-editor");
+          target.setAttribute("aria-describedby", result.id);
           cell = target;
+          addEventListener("scroll", place, true);
+          addEventListener("resize", place);
         }
         const locale = options.locale?.() ?? (target.ownerDocument.documentElement.lang || "en");
         const presentation = createPrettyTablePresentation(presentationData(table), { ...options, locale });
-        result.innerHTML = presentation.cellHtml(row - 1, column);
+        const evaluated = presentation.rows[row - 1]?.cells[column]?.result;
+        if (!evaluated) {
+          clear();
+          return;
+        }
+        // An error says what is wrong and what helps, on one wrapping line; a valid result shows quietly.
+        const error = evaluated.kind === "error";
+        result.toggleAttribute("data-error", error);
+        result.replaceChildren();
+        if (error) {
+          const icon = result.ownerDocument.createElement("i");
+          icon.className = "ti ti-alert-triangle";
+          icon.setAttribute("aria-hidden", "true");
+          result.append(icon);
+        }
+        const message = result.ownerDocument.createElement("span");
+        message.textContent = error
+          ? formatFormulaError(evaluated, locale).replace(/\n→ /, " · ")
+          : formatFormulaValue(evaluated.value, locale);
+        result.append(message);
+        place();
       });
     view.contentDOM.addEventListener("focusin", paint);
     view.contentDOM.addEventListener("focusout", paint);
@@ -216,7 +251,7 @@ export const createNotebookTablePresentation = (
 } => {
   const snapshots = new WeakMap<Table, { locale: string; presentation: ReturnType<typeof createPrettyTablePresentation> }>();
   return {
-    extension: [tableCaptions, presentationTheme, activeFormulaPreview(options)],
+    extension: [presentationTheme, activeFormulaPreview(options)],
     renderCell(element, _raw, table, row, column) {
       const locale = options.locale?.() ?? (element.ownerDocument.documentElement.lang || "en");
       let snapshot = snapshots.get(table);

package/src/styles.css

@@ -1,6 +1,14 @@
 /* Generate utility classes for the source package in the consuming Tailwind build. */
 @source "./**/*.{ts,tsx}";
 
+/* One icon size for every control of an editor toolbar, the host's start and end controls included, so an icon a
+   host adds matches the formatting icons without its own size class. A utility on one icon still wins. */
+@layer components {
+  [data-k2b-editor-toolbar] .k2b-button > .k2b-button__label > .ti:first-child {
+    font-size: 0.875rem;
+  }
+}
+
 /* ── Slash-command autocomplete palette ─────────────────────────────────
    The CodeMirror autocomplete tooltip is portaled outside the editor
    surface AND its theme is injected as a runtime `<style>` after this file
@@ -142,25 +150,19 @@
   display: none !important;
 }
 
+/* The anchor of a named block (`@name` in the source) reads as a quiet label above the block, in the label type of
+   form fields. The caret in its line shows the source again. */
 .md-block-handle {
   display: inline-flex;
   align-items: center;
   width: fit-content;
   max-width: 100%;
   margin: 0.35rem 0 0.15rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  background: rgb(239 246 255);
-  color: rgb(37 99 235);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: 0.6875rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.8125rem;
   font-weight: 600;
-  line-height: 1.3;
-}
-
-.dark .md-block-handle {
-  background: rgb(30 58 138 / 0.25);
-  color: rgb(147 197 253);
+  line-height: 1.125rem;
+  overflow-wrap: anywhere;
 }
 
 .md-data-handle-row {