@k2b/editor 0.0.0-stage → 0.1.0

package/src/markdown/mermaid.ts

@@ -0,0 +1,242 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import { RangeSet } from "@codemirror/state";
+import { Decoration, type EditorView, WidgetType } from "@codemirror/view";
+import mermaid, { type MermaidConfig } from "mermaid";
+import { createComponent, createSignal } from "solid-js";
+import { render } from "solid-js/web";
+import {
+  blockWidgetLineNavigationExtension,
+  type CursorZoneState,
+  cursorZoneStateField,
+  selectionIntersectsRange,
+} from "./_lib/cursor-zone-field";
+import { codeFenceLanguage } from "./lib/markdown-fences";
+import { MermaidEditorPreview, type MermaidPreviewState } from "./mermaid-preview";
+import { renderMermaid } from "./mermaid-render";
+
+const isDarkTheme = () => document.documentElement.classList.contains("dark");
+
+/** Cached SVGs carry theme colors, so a theme switch must not reuse them. */
+const svgCacheKey = (code: string) => `${isDarkTheme() ? "dark" : "light"}\n${code}`;
+
+export type MermaidOptions = {
+  /** The host's rendering policy and theme colors. */
+  configuration: (options: { dark: boolean }) => MermaidConfig;
+  /** Heading and file name used by the fullscreen/export controls. */
+  title?: (markdown: string) => string | null;
+  /** Locale of detached widget roots; omitted uses the inherited UI locale. */
+  locale?: string;
+};
+
+const svgCaches = new WeakMap<MermaidOptions["configuration"], Map<string, { svg: string; timestamp: number }>>();
+const SVG_CACHE_MAX = 50;
+
+/** Single-pass min-by-timestamp over the cache. The previous
+ *  `Array.from(...).sort()[0]` allocated + sorted the whole map
+ *  on every overflow; this is O(n) with no allocation. */
+const evictOldestSvg = (globalSvgCache: Map<string, { svg: string; timestamp: number }>): void => {
+  let oldestKey: string | undefined;
+  let oldestTs = Number.POSITIVE_INFINITY;
+  for (const [key, entry] of globalSvgCache) {
+    if (entry.timestamp < oldestTs) {
+      oldestTs = entry.timestamp;
+      oldestKey = key;
+    }
+  }
+  if (oldestKey !== undefined) globalSvgCache.delete(oldestKey);
+};
+
+interface MermaidBlockParams {
+  code: string;
+  id: string;
+  fromPos: number;
+}
+
+class MermaidWidget extends WidgetType {
+  private code: string;
+  private id: string;
+  private fromPos: number;
+  private renderTimer: ReturnType<typeof setTimeout> | null = null;
+  private dispose?: () => void;
+
+  constructor(
+    { code, id, fromPos }: MermaidBlockParams,
+    private options: MermaidOptions,
+    private globalSvgCache: Map<string, { svg: string; timestamp: number }>,
+  ) {
+    super();
+    this.code = code;
+    this.id = `mermaid-${id}`;
+    this.fromPos = fromPos;
+  }
+
+  override eq(other: MermaidWidget) {
+    return other.code === this.code && other.fromPos === this.fromPos;
+  }
+
+  override toDOM(view: EditorView) {
+    const container = document.createElement("div");
+    container.className = "cm-mermaid-widget !m-0";
+    container.setAttribute("contenteditable", "false");
+    const edit = () => {
+      view.dispatch({ selection: { anchor: this.fromPos }, scrollIntoView: true });
+      view.focus();
+    };
+    // At fit a press edits the source, as it always has. Zoomed in, a press
+    // may start a pan, so only a click without dragging edits.
+    const zoomedIn = () => container.querySelector(".k2b-zoom-pan[data-zoomed]") !== null;
+    const onControl = (event: Event) => event.target instanceof Element && event.target.closest("button") !== null;
+    container.onmousedown = (event) => {
+      if (onControl(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!zoomedIn()) edit();
+    };
+    container.onclick = (event) => {
+      if (!onControl(event) && zoomedIn()) edit();
+    };
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "rounded border border-[var(--ui-border)] bg-[var(--ui-surface)] overflow-hidden";
+    wrapper.style.height = "min(30vh, 400px)";
+    wrapper.style.minHeight = "200px";
+
+    const cached = this.globalSvgCache.get(svgCacheKey(this.code));
+    // Cache hit: show the SVG straight away and skip mermaid.render. The key is
+    // the theme plus `this.code`, so a re-render would produce the same SVG.
+    // Bump the timestamp so the LRU reflects "recently used".
+    if (cached) cached.timestamp = Date.now();
+    const [state, setState] = createSignal<MermaidPreviewState>(cached ? { kind: "ready", svg: cached.svg } : { kind: "loading" });
+    this.dispose = render(
+      () =>
+        createComponent(MermaidEditorPreview, {
+          state,
+          title: () => this.options.title?.(view.state.doc.toString()) ?? null,
+          configuration: this.options.configuration,
+          locale: this.options.locale,
+          exportSvg: () => this.renderExportSvg(),
+        }),
+      wrapper,
+    );
+    // Only schedule the expensive mermaid.render (~50–200ms Dagre layout)
+    // when there is nothing cached to display.
+    if (!cached) this.debouncedRender(setState);
+
+    container.appendChild(wrapper);
+    return container;
+  }
+
+  /** Called by CM when the widget's DOM is being removed (user
+   *  deleted the code block, scrolled it out of the viewport, or
+   *  the doc changed enough to invalidate the decoration). Without
+   *  this, the 500ms debounced timer keeps a reference to the
+   *  detached element and renders into a node that is no longer in
+   *  the document — wasted work that piles up on rapid edits. */
+  override destroy(_dom: HTMLElement) {
+    if (this.renderTimer) {
+      clearTimeout(this.renderTimer);
+      this.renderTimer = null;
+    }
+    this.dispose?.();
+    this.dispose = undefined;
+  }
+
+  private debouncedRender(setState: (state: MermaidPreviewState) => void) {
+    if (this.renderTimer) clearTimeout(this.renderTimer);
+
+    this.renderTimer = setTimeout(() => {
+      this.renderTimer = null;
+      void this.renderDiagram(setState);
+    }, 500);
+  }
+
+  private async renderDiagram(setState: (state: MermaidPreviewState) => void) {
+    try {
+      const cacheKey = svgCacheKey(this.code);
+      const renderId = `${this.id}-${Date.now()}`;
+      const { svg } = await renderMermaid(mermaid, this.options.configuration({ dark: isDarkTheme() }), renderId, this.code);
+
+      this.globalSvgCache.set(cacheKey, { svg, timestamp: Date.now() });
+
+      if (this.globalSvgCache.size > SVG_CACHE_MAX) evictOldestSvg(this.globalSvgCache);
+
+      if (this.dispose) setState({ kind: "ready", svg });
+    } catch (error) {
+      if (this.dispose) setState({ kind: "error", message: error instanceof Error ? error.message : String(error) });
+    }
+  }
+
+  /** Exports need SVG text labels: HTML labels (foreignObject) taint a canvas and
+   *  render poorly outside a browser. */
+  private async renderExportSvg(): Promise<string> {
+    const config = this.options.configuration({ dark: isDarkTheme() });
+    return (await renderMermaid(mermaid, { ...config, htmlLabels: false }, `${this.id}-export-${Date.now()}`, this.code)).svg;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override get estimatedHeight() {
+    // The frame is min(30vh, 400px), with a 200px minimum; it includes its border.
+    return Math.max(200, Math.min(window.innerHeight * 0.3, 400));
+  }
+}
+
+export const mermaidExtension = (options: MermaidOptions): Extension => {
+  let globalSvgCache = svgCaches.get(options.configuration);
+  if (!globalSvgCache) {
+    globalSvgCache = new Map();
+    svgCaches.set(options.configuration, globalSvgCache);
+  }
+  const cache = globalSvgCache;
+  const decorate = (state: EditorState): CursorZoneState => {
+    const decorations: Range<Decoration>[] = [];
+    const atomicDecorations: Range<Decoration>[] = [];
+    const ranges: { from: number; to: number }[] = [];
+    const cursor = state.selection.main;
+    let widgetId = 0;
+
+    syntaxTree(state).iterate({
+      enter: ({ type, from, to }) => {
+        if (type.name === "FencedCode") {
+          const text = state.doc.sliceString(from, to);
+          const lines = text.split("\n");
+          const language = codeFenceLanguage(lines[0] ?? "");
+
+          if (language === "mermaid") {
+            ranges.push({ from, to });
+            if (selectionIntersectsRange(cursor, from, to)) return false;
+            const code = lines.slice(1, -1).join("\n");
+            const decoration = Decoration.replace({
+              widget: new MermaidWidget(
+                {
+                  code,
+                  id: `${from}-${widgetId++}`,
+                  fromPos: from,
+                },
+                options,
+                cache,
+              ),
+              block: true,
+            }).range(from, to);
+            decorations.push(decoration);
+            atomicDecorations.push(decoration);
+          }
+        }
+      },
+    });
+
+    return {
+      decorations: decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none,
+      atomicDecorations: atomicDecorations.length > 0 ? RangeSet.of(atomicDecorations, true) : Decoration.none,
+      ranges,
+      hasSyntax: ranges.length > 0,
+    };
+  };
+
+  const mermaidField = cursorZoneStateField(decorate);
+
+  return [mermaidField, blockWidgetLineNavigationExtension(mermaidField, (value) => value.atomicDecorations)];
+};

package/src/markdown/messages.ts

@@ -0,0 +1,17 @@
+import { i18n } from "@k2b/stdlib";
+
+export const markdownMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      invalidMermaid: "Invalid Mermaid syntax",
+      showErrorDetails: "Show error details",
+      loadingDiagram: "Loading diagram...",
+    },
+    de: {
+      invalidMermaid: "Ungültige Mermaid-Syntax",
+      showErrorDetails: "Fehlerdetails anzeigen",
+      loadingDiagram: "Diagramm wird geladen…",
+    },
+  },
+});

package/src/markdown/named-blocks.ts

@@ -0,0 +1,84 @@
+import { type Extension, type Range, RangeSet } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import {
+  blockWidgetLineNavigationExtension,
+  type CursorZoneState,
+  cursorZoneStateField,
+  selectionIntersectsRange,
+} from "./_lib/cursor-zone-field";
+import { extractNamedBlocks } from "./lib/named-blocks";
+
+class NamedBlockHandleWidget extends WidgetType {
+  constructor(
+    private name: string,
+    private fromPos: number,
+  ) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const el = document.createElement("div");
+    el.className = "cm-named-block-handle md-block-handle";
+    el.setAttribute("contenteditable", "false");
+    el.textContent = `@${this.name}`;
+    el.onmousedown = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      view.dispatch({ selection: { anchor: this.fromPos }, scrollIntoView: true });
+      view.focus();
+    };
+    return el;
+  }
+
+  override eq(other: WidgetType) {
+    return other instanceof NamedBlockHandleWidget && other.name === this.name && other.fromPos === this.fromPos;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+}
+
+export const namedBlocksExtension = (): Extension => {
+  const stateField = cursorZoneStateField((state): CursorZoneState => {
+    const decorations: Range<Decoration>[] = [];
+    const atomicDecorations: Range<Decoration>[] = [];
+    const ranges: { from: number; to: number }[] = [];
+    const cursor = state.selection.main;
+    const text = state.doc.toString();
+
+    for (const block of extractNamedBlocks(text)) {
+      const prevLine = state.doc.lineAt(Math.max(block.handleStart - 1, 0));
+      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 (selectionIntersectsRange(cursor, sourceVisibleRange.from, sourceVisibleRange.to)) continue;
+      const handleDecoration = Decoration.replace({
+        widget: new NamedBlockHandleWidget(block.name, block.handleStart),
+        block: true,
+      }).range(block.handleStart, block.handleEnd);
+      decorations.push(handleDecoration);
+      atomicDecorations.push(handleDecoration);
+    }
+
+    return {
+      decorations: decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none,
+      atomicDecorations: atomicDecorations.length > 0 ? RangeSet.of(atomicDecorations, true) : Decoration.none,
+      ranges,
+      hasSyntax: decorations.length > 0,
+    };
+  });
+
+  return [
+    stateField,
+    blockWidgetLineNavigationExtension(stateField, (value) => value.atomicDecorations),
+    EditorView.theme({
+      ".cm-named-block-handle": {
+        margin: "0 !important",
+      },
+    }),
+  ];
+};

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

@@ -0,0 +1,84 @@
+import { EditorState, type Range, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, WidgetType } from "@codemirror/view";
+import { noteScroller } from "./note-scroller";
+
+// The smallest note page that reproduces the WebKit jump: a page scroller under
+// a size container, CodeMirror inside it, and a block widget that parses an SVG
+// `viewBox` while CodeMirror builds the lines it scrolled to, as the notice icon does.
+
+class IconWidget extends WidgetType {
+  override eq() {
+    return true;
+  }
+
+  override toDOM() {
+    const element = document.createElement("div");
+    element.style.height = "60px";
+    // Parsed from markup like the notice card's icon; WebKit lays the page out while it parses the viewBox.
+    element.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20"></svg>';
+    return element;
+  }
+
+  override get estimatedHeight() {
+    return 60;
+  }
+}
+
+const icons = (state: EditorState): DecorationSet => {
+  const ranges: Range<Decoration>[] = [];
+  for (const match of state.doc.toString().matchAll(/^:::icon$/gm))
+    ranges.push(Decoration.replace({ widget: new IconWidget(), block: true }).range(match.index, match.index + match[0].length));
+  return Decoration.set(ranges);
+};
+
+const iconField = StateField.define<DecorationSet>({
+  create: icons,
+  update: (value, tr) => (tr.docChanged ? icons(tr.state) : value),
+  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"),
+).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" } })] }),
+});
+
+const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+const harness = {
+  settle: async () => {
+    for (let index = 0; index < 5; index++) await frame();
+  },
+  /** Scrolls the page so the line sits in the middle, then reports where the page scroller ends up. */
+  scrollTo: async (text: string) => {
+    const from = view.state.doc.toString().indexOf(text);
+    const top = view.documentTop + view.lineBlockAt(from).top - port.getBoundingClientRect().top;
+    const target = port.scrollTop + top - port.clientHeight / 2;
+    port.scrollTop = target;
+    const written = port.scrollTop;
+    for (let index = 0; index < 4; index++) await frame();
+    return { written, scrollTop: port.scrollTop };
+  },
+  /** 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();
+    port.scrollTop = port.scrollHeight;
+    for (let index = 0; index < 4; index++) await frame();
+    const before = port.scrollHeight - port.clientHeight - port.scrollTop;
+    view.dispatch({ changes: { from: 0, to: length } });
+    for (let index = 0; index < 4; index++) await frame();
+    return { before, after: port.scrollHeight - port.clientHeight - port.scrollTop };
+  },
+};
+
+export type NoteScrollerHarness = typeof harness;
+Object.assign(window, { harness });

package/src/markdown/note-scroller.ts

@@ -0,0 +1,57 @@
+import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+
+/**
+ * The note page's arrangement: CodeMirror grows inside the page's scroll area
+ * and insets the text by 1rem, also on a phone. The reading column centers in
+ * the rest.
+ */
+const noteScrollerTheme = EditorView.theme({
+  ".cm-editor": { minHeight: "100%" },
+  ".cm-scroller": { width: "100%", minHeight: "100%", padding: "1rem" },
+  // The page scrolls, not CodeMirror. Clipping sideways makes the scroller no
+  // scroll container, so CodeMirror cannot shift the text sideways to follow
+  // a caret behind spaces that hang past the column (see `richFontCSS`).
+  "&.cm-editor .cm-scroller": { overflowX: "clip", overflowY: "visible" },
+});
+
+/**
+ * CodeMirror builds the lines it scrolled to in several DOM steps and locks the
+ * content's height only for the last one. A layout between the earlier steps
+ * sees a note shorter than its height map, and the page scroller clamps its
+ * position to that height. WebKit runs such a layout when a widget parses an
+ * SVG `viewBox` or path (the notice icon does) while the page has a size
+ * container, which every app area is. This holds the height for the whole DOM
+ * update. WebKit's layout during the update uses the content's style from
+ * before it, so the lock is resolved at once; releasing it with the update
+ * keeps CodeMirror's own measuring and scroll correction as they were.
+ */
+const lockHeightWhileRendering = ViewPlugin.fromClass(
+  class {
+    constructor(private readonly view: EditorView) {}
+
+    // Plugins update right before CodeMirror's DOM update, with the height it knows from its height map.
+    // CSS pixels, as in CodeMirror's own lock.
+    update({ view }: ViewUpdate) {
+      const content = view.contentDOM;
+      content.style.minHeight = `${view.contentHeight / view.scaleY}px`;
+      void getComputedStyle(content).minHeight;
+      // An update that draws nothing ends without `docViewUpdate`.
+      queueMicrotask(() => this.release());
+    }
+
+    docViewUpdate() {
+      this.release();
+    }
+
+    destroy() {
+      this.release();
+    }
+
+    private release() {
+      this.view.contentDOM.style.removeProperty("min-height");
+    }
+  },
+);
+
+/** The page scrolls the note; CodeMirror only renders it. */
+export const noteScroller = [noteScrollerTheme, lockHeightWhileRendering];

package/src/markdown/notebook-charts.tsx

@@ -0,0 +1,142 @@
+import { i18n } from "@k2b/stdlib";
+import { CopyButton, IconButton, LocaleProvider, prepareChartSnapshot, toast } from "@k2b/ui";
+import { type ChartTooltip, inspectChart } from "@k2b/ui/chart-inspection";
+import { createSignal, onCleanup, Show } from "solid-js";
+import { render } from "solid-js/web";
+import { type ChartInput, type ChartTable, chartMarkKey, chartReferenceMark, chartRenderOptions, chartRows, chartTooltip } from "../charts";
+import { chartTableText } from "./chart-copy";
+import { type MarkdownChartOptions, notebookChartTableHtml } from "./lib/chart-blocks";
+
+export const notebookChartMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      interactiveChart: "Interactive chart. Use arrow keys to read values and Escape to close.",
+      showTable: "Show as table",
+      copyData: "Copy data",
+      copyFailed: "Could not copy the chart data. Try again or select the values in the table.",
+    },
+    de: {
+      interactiveChart: "Interaktives Diagramm. Mit den Pfeiltasten Werte lesen, mit Escape schließen.",
+      showTable: "Als Tabelle",
+      copyData: "Daten kopieren",
+      copyFailed: "Die Daten konnten nicht kopiert werden. Versuche es erneut oder markiere die Werte in der Tabelle.",
+    },
+  },
+});
+
+type Drawn = { tooltips: Map<string, ChartTooltip>; table: ChartTable };
+
+const readInput = (figure: HTMLElement, options: Pick<MarkdownChartOptions, "schema">): ChartInput | null => {
+  try {
+    const result = options.schema.safeParse(JSON.parse(figure.dataset.chart ?? "null"));
+    return result.success ? result.data : null;
+  } catch {
+    return null;
+  }
+};
+
+/** The same drawing as the server's (`renderNotebookChartFigure`), for the tooltips and table of its marks. */
+const draw = (input: ChartInput, locale: string): Drawn => {
+  const rows = chartRows(input, locale);
+  const snapshot = prepareChartSnapshot(chartRenderOptions(input, locale, { legend: "outside" }), {
+    key: ({ datum }) => chartMarkKey(datum),
+    tooltip: ({ datum }) => {
+      const row = rows.add(datum);
+      return chartTooltip(rows.columns(), row);
+    },
+    reference: ({ datum }) => chartReferenceMark(input, datum),
+  });
+  return { tooltips: new Map(snapshot.marks.map((mark) => [mark.key, mark.tooltip])), table: rows.table() };
+};
+
+function ChartControls(props: { figure: HTMLElement; viewport: HTMLElement; drawn: () => Drawn; locale: string; onView: () => void }) {
+  const t = () => notebookChartMessages.resolve([props.locale]).t;
+  const [table, setTable] = createSignal(false);
+  let host: HTMLElement | undefined;
+  const toggle = () => {
+    const next = !table();
+    props.onView();
+    host?.remove();
+    host = undefined;
+    if (next) {
+      // The note's own table markup, as the PDF prints it below the figure.
+      const label = props.figure.querySelector(".notebook-book-chart__title")?.textContent ?? "";
+      const scratch = document.createElement("div");
+      scratch.innerHTML = notebookChartTableHtml(props.drawn().table, { label, className: "notebook-book-chart__table" });
+      const element = scratch.firstElementChild;
+      if (!(element instanceof HTMLElement)) return;
+      // The table scrolls inside the chart's frame; as the drawing's tab stop is hidden, the scroll area takes it.
+      element.tabIndex = 0;
+      element.setAttribute("role", "region");
+      element.setAttribute("aria-label", label);
+      host = element;
+      props.viewport.append(host);
+      props.figure.dataset.view = "table";
+    } else delete props.figure.dataset.view;
+    setTable(next);
+  };
+  onCleanup(() => host?.remove());
+  return (
+    <LocaleProvider locale={props.locale}>
+      <CopyButton
+        text={chartTableText(props.drawn().table)}
+        label={t().copyData}
+        iconOnly
+        size="sm"
+        variant="ghost"
+        onCopyError={() => toast.error(t().copyFailed)}
+      />
+      <IconButton label={t().showTable} size="sm" variant="ghost" aria-pressed={table()} onClick={toggle}>
+        <Show when={table()} fallback={<i class="ti ti-table" aria-hidden="true" />}>
+          <i class="ti ti-chart-bar" aria-hidden="true" />
+        </Show>
+      </IconButton>
+    </LocaleProvider>
+  );
+}
+
+/**
+ * Adds the shared chart inspection (tooltips by pointer, tap and keyboard), the table view and Copy data to every
+ * server-drawn `:::chart` figure under `root`. The server's SVG stays in place, and the controls fill the box the
+ * frame reserves for them, so nothing moves. A figure without valid chart data keeps its static drawing, whose marks
+ * still carry their values as SVG titles. Returns the cleanup that restores the static figures.
+ */
+export function enhanceNotebookCharts(root: HTMLElement, locale: string, options: Pick<MarkdownChartOptions, "schema">): () => void {
+  const cleanups: (() => void)[] = [];
+  for (const figure of root.querySelectorAll<HTMLElement>("figure.notebook-book-chart[data-chart]:not([data-enhanced])")) {
+    const chart = figure.querySelector<HTMLElement>(".notebook-book-chart__viewport > .k2b-chart");
+    const viewport = chart?.parentElement;
+    const actions = figure.querySelector<HTMLElement>(".notebook-book-chart__actions");
+    const kind = chart?.dataset.chartKind;
+    const input = readInput(figure, options);
+    if (!chart || !viewport || !actions || !input || kind !== input.kind) continue;
+    let drawn: Drawn | undefined;
+    // The drawing waits for the first tooltip, table or copy: a note can hold many charts nobody inspects.
+    const lazy = () => (drawn ??= draw(input, locale));
+    const t = notebookChartMessages.resolve([locale]).t;
+    // The group is named by its title; the description tells how to read its values.
+    chart.setAttribute("role", "group");
+    chart.setAttribute("aria-label", figure.querySelector(".notebook-book-chart__title")?.textContent ?? "");
+    chart.setAttribute("aria-description", t.interactiveChart);
+    chart.dataset.interactive = "true";
+    const inspection = inspectChart(chart, {
+      kind: input.kind,
+      format: ({ datum }) => lazy().tooltips.get(chartMarkKey(datum)) ?? { rows: [] },
+    });
+    const dispose = render(
+      () => <ChartControls figure={figure} viewport={viewport} drawn={lazy} locale={locale} onView={inspection.close} />,
+      actions,
+    );
+    figure.dataset.enhanced = "true";
+    cleanups.push(() => {
+      dispose();
+      inspection.destroy();
+      // The inspector removes its geometry properties, but the browser keeps an empty style attribute.
+      if (!chart.getAttribute("style")) chart.removeAttribute("style");
+      for (const name of ["role", "aria-label", "aria-description", "data-interactive"]) chart.removeAttribute(name);
+      for (const name of ["data-enhanced", "data-view"]) figure.removeAttribute(name);
+    });
+  }
+  return () => cleanups.splice(0).forEach((cleanup) => cleanup());
+}

package/src/markdown/pretty-table-messages.ts

@@ -0,0 +1,33 @@
+import { i18n } from "@k2b/stdlib";
+
+export const prettyTableMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      showNotesWithTag: ({ tag }: { tag: string }) => `Show notes with #${tag}`,
+      suggestion: ({ value }: { value: string }) => `Suggestion: ${value}`,
+      formulaName: "Formula",
+      parseError: "Invalid formula",
+      unknownFunction: ({ name }: { name: string }) => `Unknown function “${name}”`,
+      unknownColumn: ({ name }: { name: string }) => `Unknown column “${name}”`,
+      wrongArgumentCount: ({ name }: { name: string }) => `${name} received the wrong number of arguments`,
+      nonNumeric: ({ name }: { name: string }) => `${name} requires a numeric value`,
+      divisionByZero: ({ name }: { name: string }) => `${name} cannot divide by zero`,
+      typeError: ({ name }: { name: string }) => `${name} received an incompatible value`,
+      circularReference: ({ name }: { name: string }) => `Circular reference involving “${name}”`,
+    },
+    de: {
+      showNotesWithTag: ({ tag }) => `Notizen mit #${tag} anzeigen`,
+      suggestion: ({ value }) => `Vorschlag: ${value}`,
+      formulaName: "Die Formel",
+      parseError: "Ungültige Formel",
+      unknownFunction: ({ name }) => `Unbekannte Funktion „${name}“`,
+      unknownColumn: ({ name }) => `Unbekannte Spalte „${name}“`,
+      wrongArgumentCount: ({ name }) => `${name} hat die falsche Anzahl an Argumenten erhalten`,
+      nonNumeric: ({ name }) => `${name} benötigt einen Zahlenwert`,
+      divisionByZero: ({ name }) => `${name} kann nicht durch null teilen`,
+      typeError: ({ name }) => `${name} hat einen ungeeigneten Wert erhalten`,
+      circularReference: ({ name }) => `Zirkelbezug mit „${name}“`,
+    },
+  },
+});