@vectojs/markdown 0.12.0 → 0.14.0

package/dist/index.js

@@ -30,14 +30,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BlockAffordanceButton: () => BlockAffordanceButton,
+  BlockWithAffordances: () => BlockWithAffordances,
   CodeBlock: () => CodeBlock,
   Markdown: () => Markdown,
+  MathBlock: () => MathBlock,
   codeAtlas: () => codeAtlas,
   codeAtlasStats: () => codeAtlasStats,
+  escapeCsvField: () => escapeCsvField,
+  escapeMarkdownTableCell: () => escapeMarkdownTableCell,
+  extensionForLanguage: () => extensionForLanguage,
   isMathJaxReady: () => isMathJaxReady,
+  mimeForLanguage: () => mimeForLanguage,
   parseFrontMatterFields: () => parseFrontMatterFields,
   preloadMathJax: () => preloadMathJax,
-  scanFrontMatter: () => scanFrontMatter
+  scanFrontMatter: () => scanFrontMatter,
+  tableContentOf: () => tableContentOf,
+  tableToCsv: () => tableToCsv,
+  tableToMarkdown: () => tableToMarkdown
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -455,7 +465,251 @@ function createStreamController(host, options = {}) {
 }
 
 // src/Markdown.ts
+var import_ui2 = require("@vectojs/ui");
+
+// src/blockAffordances.ts
 var import_ui = require("@vectojs/ui");
+var LANGUAGE_EXTENSIONS = {
+  bash: "sh",
+  c: "c",
+  cpp: "cpp",
+  cs: "cs",
+  css: "css",
+  diff: "diff",
+  dockerfile: "dockerfile",
+  go: "go",
+  graphql: "graphql",
+  haskell: "hs",
+  html: "html",
+  java: "java",
+  javascript: "js",
+  js: "js",
+  json: "json",
+  jsonc: "jsonc",
+  jsx: "jsx",
+  kotlin: "kt",
+  latex: "tex",
+  lua: "lua",
+  make: "mk",
+  markdown: "md",
+  md: "md",
+  nix: "nix",
+  php: "php",
+  python: "py",
+  py: "py",
+  ruby: "rb",
+  rust: "rs",
+  rs: "rs",
+  scss: "scss",
+  sh: "sh",
+  shell: "sh",
+  sql: "sql",
+  svelte: "svelte",
+  swift: "swift",
+  tex: "tex",
+  toml: "toml",
+  ts: "ts",
+  tsx: "tsx",
+  typescript: "ts",
+  vue: "vue",
+  xml: "xml",
+  yaml: "yaml",
+  yml: "yaml",
+  zig: "zig",
+  zsh: "sh"
+};
+function extensionForLanguage(lang) {
+  const first = lang.trim().toLowerCase().split(/[\s:,{]/)[0] ?? "";
+  return LANGUAGE_EXTENSIONS[first] ?? "txt";
+}
+function mimeForLanguage(lang) {
+  const ext = extensionForLanguage(lang);
+  if (ext === "json" || ext === "jsonc") return "application/json";
+  if (ext === "html") return "text/html";
+  if (ext === "css") return "text/css";
+  if (ext === "xml" || ext === "svelte" || ext === "vue") return "text/plain";
+  return "text/plain";
+}
+function escapeCsvField(value) {
+  let needsQuoting = false;
+  let hasQuote = false;
+  for (const char of value) {
+    if (char === '"') {
+      hasQuote = true;
+      needsQuoting = true;
+      break;
+    }
+    if (char === "," || char === "\n" || char === "\r") needsQuoting = true;
+  }
+  if (!needsQuoting) return value;
+  return hasQuote ? `"${value.replace(/"/g, '""')}"` : `"${value}"`;
+}
+function escapeMarkdownTableCell(cell) {
+  let needsEscaping = false;
+  for (const char of cell) {
+    if (char === "\\" || char === "|") {
+      needsEscaping = true;
+      break;
+    }
+  }
+  if (!needsEscaping) return cell;
+  return cell.replace(/\\/g, "\\\\").replace(/\|/g, "\\|");
+}
+function tableToCsv(table) {
+  const lines = [table.headers.map(escapeCsvField).join(",")];
+  for (const row of table.rows) lines.push(row.map(escapeCsvField).join(","));
+  return `\uFEFF${lines.join("\r\n")}`;
+}
+function tableToMarkdown(table) {
+  const header = `| ${table.headers.map(escapeMarkdownTableCell).join(" | ")} |`;
+  const divider = `| ${table.headers.map((_cell, index) => {
+    switch (table.align[index]) {
+      case "left":
+        return ":---";
+      case "center":
+        return ":---:";
+      case "right":
+        return "---:";
+      default:
+        return "---";
+    }
+  }).join(" | ")} |`;
+  const body = table.rows.map(
+    (row) => `| ${table.headers.map((_cell, index) => escapeMarkdownTableCell(row[index] ?? "")).join(" | ")} |`
+  );
+  return [header, divider, ...body].join("\n");
+}
+function defaultWriteClipboard(text) {
+  const clipboard = globalThis.navigator?.clipboard;
+  clipboard?.writeText?.(text);
+}
+function defaultSaveFile(filename, content, mimeType) {
+  const doc = globalThis.document;
+  if (!doc?.body) return;
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const anchor = doc.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  doc.body.appendChild(anchor);
+  anchor.click();
+  doc.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+var BlockAffordanceButton = class _BlockAffordanceButton extends import_ui.Button {
+  constructor(label, successLabel, act, opts = {}) {
+    super(label, { ...opts, onClick: () => this.run() });
+    this.act = act;
+    this.restingLabel = label;
+    this.successLabel = successLabel;
+    this.width = Math.max(this.width, (0, import_ui.measureText)(successLabel, this.font) + 24);
+  }
+  act;
+  /** How long the confirmation label stays up, in ms. */
+  static FEEDBACK_MS = 1600;
+  restingLabel;
+  successLabel;
+  feedbackTimer;
+  /**
+   * Runs the action, then shows the confirmation.
+   *
+   * The action runs first and a throw propagates: a clipboard write the browser
+   * rejected must not be reported as a success.
+   */
+  run() {
+    this.act();
+    this.setTransientLabel(this.successLabel);
+    if (this.feedbackTimer !== void 0) clearTimeout(this.feedbackTimer);
+    this.feedbackTimer = setTimeout(() => {
+      this.setTransientLabel(this.restingLabel);
+      this.feedbackTimer = void 0;
+    }, _BlockAffordanceButton.FEEDBACK_MS);
+  }
+  setTransientLabel(label) {
+    this.label = label;
+    this.textWidth = (0, import_ui.measureText)(label, this.font);
+    this.scene?.markDirty();
+  }
+  /**
+   * The label a reader hears is the one they see, transient confirmation
+   * included, so an AT user gets the same feedback a sighted user does.
+   */
+  getA11yAttributes() {
+    return { ...super.getA11yAttributes(), label: this.label };
+  }
+  /** Clears the pending revert so a destroyed block leaves no timer behind. */
+  destroy() {
+    if (this.feedbackTimer !== void 0) {
+      clearTimeout(this.feedbackTimer);
+      this.feedbackTimer = void 0;
+    }
+    super.destroy();
+  }
+};
+var BlockWithAffordances = class _BlockWithAffordances extends import_ui.UIComponent {
+  constructor(block, controls) {
+    super();
+    this.block = block;
+    this.controls = controls;
+    this.add(block);
+    for (const control of controls) this.add(control);
+    this.layoutAffordances();
+  }
+  block;
+  controls;
+  /** Gap between the block's edges and the controls, in px. */
+  static INSET = 8;
+  /** Gap between adjacent controls, in px. */
+  static GAP = 6;
+  /**
+   * Places the controls right-aligned along the block's top edge.
+   *
+   * Laid out right-to-left from the block's right edge so the first control in
+   * the list ends up leftmost, which keeps DOM order (and therefore tab order and
+   * the a11y reading order) matching the visual order.
+   */
+  layoutAffordances() {
+    this.width = this.block.width;
+    this.height = this.block.height;
+    let right = this.block.width - _BlockWithAffordances.INSET;
+    for (let i = this.controls.length - 1; i >= 0; i--) {
+      const control = this.controls[i];
+      control.x = right - control.width;
+      control.y = _BlockWithAffordances.INSET;
+      right = control.x - _BlockWithAffordances.GAP;
+    }
+  }
+  /**
+   * Re-places the controls after the block's own box changed.
+   *
+   * Called by the owner when a block is resized or its content grew; the controls
+   * are anchored to the right edge, so a width change moves them.
+   */
+  refreshAffordances() {
+    this.layoutAffordances();
+    this.scene?.markDirty();
+  }
+  /** The wrapper is a pass-through: its size is the block's size. */
+  getLayoutControlledProperties() {
+    return ["x", "y"];
+  }
+  /**
+   * Projected as a group so assistive technology reports one labelled region
+   * containing the block and its controls, rather than two unrelated siblings.
+   */
+  getA11yAttributes() {
+    return { role: "group", pointerEvents: "none" };
+  }
+  render() {
+  }
+};
+function tableContentOf(token) {
+  return {
+    headers: token.header.map((cell) => cell.text),
+    rows: token.rows.map((row) => row.map((cell) => cell.text)),
+    align: token.align
+  };
+}
 
 // src/frontMatter.ts
 var OPEN_RE = /^---[ \t]*\r?\n/;
@@ -700,7 +954,59 @@ function isFenceClosed(raw) {
   return false;
 }
 function paragraphHasImage(token) {
-  return token.tokens?.some((child) => child.type === "image") === true;
+  return containsImage(token.tokens);
+}
+function containsImage(tokens) {
+  if (!tokens) return false;
+  for (const token of tokens) {
+    if (token.type === "image") return true;
+    if (containsImage(token.tokens)) return true;
+  }
+  return false;
+}
+function imagesOf(tokens) {
+  const images = [];
+  for (const token of tokens ?? []) {
+    if (token.type === "image") {
+      images.push(token);
+      continue;
+    }
+    images.push(...imagesOf(token.tokens));
+  }
+  return images;
+}
+function stripImages(token) {
+  const children = token.tokens;
+  if (!children) return token;
+  const kept = [];
+  for (const child of children) {
+    if (child.type === "image") continue;
+    const grandchildren = child.tokens;
+    if (grandchildren && containsImage(grandchildren)) {
+      const stripped = stripImages(child);
+      const remaining = stripped.tokens;
+      if (remaining && remaining.length > 0) kept.push(stripped);
+      continue;
+    }
+    kept.push(child);
+  }
+  return { ...token, tokens: kept };
+}
+function liftNestedImages(tokens) {
+  const lifted = [];
+  for (const token of tokens) {
+    if (token.type === "image") {
+      lifted.push(token);
+      continue;
+    }
+    const children = token.tokens;
+    if (children && containsImage(children)) {
+      lifted.push(...liftNestedImages(children));
+      continue;
+    }
+    lifted.push(token);
+  }
+  return lifted;
 }
 function lastIndexOfImage(tokens) {
   for (let i = tokens.length - 1; i >= 0; i--) {
@@ -711,7 +1017,7 @@ function lastIndexOfImage(tokens) {
 function expectedImageParagraphChildren(tokens) {
   let children = 0;
   let inTextRun = false;
-  for (const token of tokens) {
+  for (const token of liftNestedImages(tokens)) {
     if (token.type === "image") {
       children++;
       inTextRun = false;
@@ -871,6 +1177,33 @@ var MarkdownContainer = class extends import_core.Entity {
   render(_r) {
   }
 };
+var MathBlock = class extends MarkdownContainer {
+  /**
+   * The TeX source, exactly as written between the delimiters.
+   *
+   * Also the projected text and the accessible name, so this is the one string a
+   * reader can find, select, and copy.
+   */
+  formula;
+  /** The `data:image/svg+xml` URI of the typeset glyphs. */
+  svgUri;
+  constructor(formula, svgUri) {
+    super();
+    this.formula = formula;
+    this.svgUri = svgUri;
+  }
+  getDevtoolsDescriptor() {
+    return {
+      kind: "MathBlock",
+      groups: [
+        {
+          label: "Math",
+          fields: [{ label: "formula", value: this.formula, readOnly: true }]
+        }
+      ]
+    };
+  }
+};
 var KEYWORD_SETS = {
   js: /* @__PURE__ */ new Set([
     "const",
@@ -1120,7 +1453,7 @@ function highlightLine(line, lang, theme) {
   flush(theme.codeColor);
   return segments;
 }
-var CodeBlock = class extends import_ui.UIComponent {
+var CodeBlock = class extends import_ui2.UIComponent {
   lines;
   grid = null;
   /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
@@ -1253,7 +1586,7 @@ var CodeBlock = class extends import_ui.UIComponent {
     this.height = this.pad * 2 + rawLines.length * this.lineH;
   }
   ensureGrid() {
-    const cellWidth = this.cellWidth || Math.max(1, (0, import_ui.measureText)("M", this.codeFont));
+    const cellWidth = this.cellWidth || Math.max(1, (0, import_ui2.measureText)("M", this.codeFont));
     if (!this.grid || this.grid.source !== this.source || this.grid.font !== this.codeFont || this.grid.cellWidth !== cellWidth) {
       this.grid = (0, import_core.prepareContentGrid)(this.source, {
         font: this.codeFont,
@@ -1522,7 +1855,7 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
   if (spans.length === 0) {
     spans.push({ text: decodeEntities(fallbackText) });
   }
-  return new import_ui.RichText(spans, {
+  return new import_ui2.RichText(spans, {
     font,
     color,
     maxWidth,
@@ -1531,12 +1864,24 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class _Markdown extends import_ui.UIComponent {
+var Markdown = class _Markdown extends import_ui2.UIComponent {
   content;
   maxWidth;
   theme;
   onLinkClick;
   selectable;
+  /**
+   * Whether code blocks and tables carry copy / download controls.
+   *
+   * Read when a block entity is built, so it affects blocks rendered from here on
+   * rather than retroactively; a document does not rebuild to gain or lose an
+   * affordance.
+   */
+  blockAffordances;
+  /** Clipboard writer used by the copy controls. */
+  writeClipboard;
+  /** File saver used by the download controls. */
+  saveFile;
   activeBlockMetrics = null;
   /**
    * Called after a streamed append has re-laid-out the document.
@@ -1761,7 +2106,10 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     this.onLinkClick = opts.onLinkClick;
     this.selectable = opts.selectable ?? true;
     this._userTiming = opts.userTiming ?? false;
-    this.content = new import_ui.Stack({ direction: "vertical", gap: 16 });
+    this.blockAffordances = opts.blockAffordances ?? false;
+    this.writeClipboard = opts.writeClipboard ?? defaultWriteClipboard;
+    this.saveFile = opts.saveFile ?? defaultSaveFile;
+    this.content = new import_ui2.Stack({ direction: "vertical", gap: 16 });
     this.add(this.content);
     this.rawMarkdown = "";
     this.setTokens([]);
@@ -1980,15 +2328,15 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     switch (token.type) {
       case "heading":
       case "paragraph": {
-        if (entity instanceof import_ui.RichText) {
+        if (entity instanceof import_ui2.RichText) {
           entity.setMaxWidth(availableWidth);
           return;
         }
-        if (entity instanceof import_ui.Stack) {
+        if (entity instanceof import_ui2.Stack) {
           entity.maxWidth = availableWidth;
           for (const run of entity.children) {
-            if (run instanceof import_ui.RichText) run.setMaxWidth(availableWidth);
-            else if (run instanceof import_ui.Image) this.refitParagraphImage(run, availableWidth);
+            if (run instanceof import_ui2.RichText) run.setMaxWidth(availableWidth);
+            else if (run instanceof import_ui2.Image) this.refitParagraphImage(run, availableWidth);
           }
           entity.layout();
         }
@@ -2001,11 +2349,11 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
       }
       case "blockquote": {
         const bqToken = token;
-        const innerStack = entity.children.find((c) => c instanceof import_ui.Stack);
+        const innerStack = entity.children.find((c) => c instanceof import_ui2.Stack);
         const border = entity.children.find((c) => c instanceof QuoteBorder);
         const indentStart = Math.min(16, availableWidth);
         const childWidth = Math.max(0, availableWidth - indentStart);
-        if (innerStack instanceof import_ui.Stack && bqToken.tokens) {
+        if (innerStack instanceof import_ui2.Stack && bqToken.tokens) {
           let index = 0;
           for (const inner of bqToken.tokens) {
             if (!this.producesEntity(inner)) continue;
@@ -2028,15 +2376,15 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
         return;
       }
       case "list": {
-        if (!(entity instanceof import_ui.Stack)) return;
+        if (!(entity instanceof import_ui2.Stack)) return;
         for (const item of entity.children) {
-          if (item instanceof import_ui.RichText) item.setMaxWidth(availableWidth);
+          if (item instanceof import_ui2.RichText) item.setMaxWidth(availableWidth);
         }
         entity.layout();
         return;
       }
       case "table": {
-        if (entity instanceof import_ui.Table) entity.setWidth(availableWidth);
+        if (entity instanceof import_ui2.Table) entity.setWidth(availableWidth);
         return;
       }
       case "hr": {
@@ -2044,7 +2392,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
         return;
       }
       default: {
-        if (entity instanceof import_ui.Text) entity.setMaxWidth(availableWidth);
+        if (entity instanceof import_ui2.Text) entity.setMaxWidth(availableWidth);
         return;
       }
     }
@@ -2515,7 +2863,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
   }
   /** One text run of an image-bearing paragraph, as both paths build it. */
   inlineRunRichText(tokens, availableWidth, t) {
-    return new import_ui.RichText(this.inlineRunSpans(tokens, t), {
+    return new import_ui2.RichText(this.inlineRunSpans(tokens, t), {
       font: `${t.fontSize}px ${t.bodyFont}`,
       color: t.textColor,
       maxWidth: availableWidth,
@@ -2549,10 +2897,77 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
    * policy for a zero-dimension source is a separate decision from notifying
    * the scene, which is the actual defect here.
    */
+  /**
+   * Wraps a block in its copy / download controls, or returns it untouched.
+   *
+   * The controls are built lazily through `make` so a document with
+   * `blockAffordances` off pays nothing — not the closures, not the measurement
+   * `BlockAffordanceButton` does in its constructor.
+   */
+  withBlockAffordances(block, make) {
+    if (!this.blockAffordances) return block;
+    const controls = make();
+    return controls.length > 0 ? new BlockWithAffordances(block, controls) : block;
+  }
+  /** Copy and download controls for one fenced code block. */
+  codeBlockAffordances(source, lang) {
+    const opts = this.affordanceButtonOptions();
+    return [
+      new BlockAffordanceButton("Copy code", "Copied", () => this.writeClipboard(source), opts),
+      new BlockAffordanceButton(
+        "Download code",
+        "Saved",
+        () => this.saveFile(`code.${extensionForLanguage(lang)}`, source, mimeForLanguage(lang)),
+        opts
+      )
+    ];
+  }
+  /** Copy (as Markdown) and download (as CSV) controls for one table. */
+  tableAffordances(tblToken) {
+    const content = tableContentOf(tblToken);
+    const opts = this.affordanceButtonOptions();
+    return [
+      // Markdown rather than CSV for the clipboard: the reader copied it out of a
+      // Markdown document and the overwhelmingly likely destination is another
+      // one. CSV is what the download is for, where a spreadsheet is the target.
+      new BlockAffordanceButton(
+        "Copy table",
+        "Copied",
+        () => this.writeClipboard(tableToMarkdown(content)),
+        opts
+      ),
+      new BlockAffordanceButton(
+        "Download table",
+        "Saved",
+        () => this.saveFile("table.csv", tableToCsv(content), "text/csv;charset=utf-8"),
+        opts
+      )
+    ];
+  }
+  /**
+   * Button styling for the affordances, derived from the document theme.
+   *
+   * Themed rather than hardcoded so a light-theme document does not get the dark
+   * default palette. `focusColor` is set explicitly from the theme's accent
+   * because `Button`'s default cyan is tuned for the dark palette and reads as
+   * off-brand elsewhere — while a focus ring is the one affordance a keyboard
+   * user cannot do without.
+   */
+  affordanceButtonOptions() {
+    return {
+      font: `600 12px ${this.theme.bodyFont}`,
+      padding: 6,
+      radius: 6,
+      bg: this.theme.codeBgColor,
+      hoverBg: this.theme.tableHeaderBgColor,
+      color: this.theme.textColor,
+      focusColor: this.theme.codeColor
+    };
+  }
   paragraphImage(imgToken, availableWidth) {
     const initialWidth = Math.min(800, availableWidth);
     const initialHeight = Math.round(initialWidth * 0.6);
-    const img = new import_ui.Image(imgToken.href, {
+    const img = new import_ui2.Image(imgToken.href, {
       width: initialWidth,
       height: initialHeight,
       alt: imgToken.text,
@@ -2571,7 +2986,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
   }
   /** One table cell entity, shared by the render arm and the streamed-table path. */
   tableCellRichText(cell, header, t) {
-    return new import_ui.RichText(this.tableCellSpans(cell, t), {
+    return new import_ui2.RichText(this.tableCellSpans(cell, t), {
       font: `${t.fontSize - 2}px ${t.bodyFont}`,
       color: header ? t.headingColor : t.textColor,
       baseStyle: header ? { bold: true } : void 0,
@@ -2629,6 +3044,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
   itemIsInlineOnly(item) {
     const children = item.tokens;
     if (!children || children.length === 0) return true;
+    if (containsImage(children)) return false;
     if (children.length === 1 && children[0].type === "paragraph") return true;
     return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
   }
@@ -2656,9 +3072,12 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
   listItemBlockStack(token, index, availableWidth, t) {
     const item = token.items[index];
     const children = item.tokens ?? [];
-    const stack = new import_ui.Stack({ direction: "vertical", gap: 4 });
+    const stack = new import_ui2.Stack({ direction: "vertical", gap: 4 });
     const first = children[0];
-    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const firstIsInline = Boolean(first) && (first.type === "text" || first.type === "paragraph");
+    const leadHasImage = firstIsInline && containsImage(first.tokens);
+    const leadChildren = firstIsInline ? [leadHasImage ? stripImages(first) : first] : [];
+    const leadImages = leadHasImage ? imagesOf(first.tokens) : [];
     const leadToken = {
       ...token,
       items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
@@ -2671,6 +3090,13 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
       indentStart: indent,
       availableWidth: Math.max(1, availableWidth - indent)
     };
+    for (const image of leadImages) {
+      const el = this.paragraphImage(image, childMetrics.availableWidth);
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      stack.add(wrapper);
+    }
     for (let i = leadChildren.length; i < children.length; i++) {
       const el = this.renderTokenWithMetrics(children[i], childMetrics);
       if (!el) continue;
@@ -2718,7 +3144,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
   }
   /** Construct the `RichText` for one list item. */
   listItemRichText(token, index, availableWidth, t) {
-    return new import_ui.RichText(this.listItemSpans(token, index), {
+    return new import_ui2.RichText(this.listItemSpans(token, index), {
       font: `${t.fontSize}px ${t.bodyFont}`,
       color: t.textColor,
       maxWidth: availableWidth,
@@ -2753,7 +3179,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
    *   and keep stale spans. Bail when `loose` flips.
    */
   updateStreamedList(stack, oldToken, newToken) {
-    if (!(stack instanceof import_ui.Stack)) return false;
+    if (!(stack instanceof import_ui2.Stack)) return false;
     if (newToken.items.length < oldToken.items.length || oldToken.items.length === 0) return false;
     if (oldToken.ordered !== newToken.ordered) return false;
     if ((oldToken.start ?? 1) !== (newToken.start ?? 1)) return false;
@@ -2762,7 +3188,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     const lastRetained = oldToken.items.length - 1;
     for (let i = 0; i < lastRetained; i++) {
       if (oldToken.items[i].text !== newToken.items[i].text) return false;
-      const isStack = stack.children[i] instanceof import_ui.Stack;
+      const isStack = stack.children[i] instanceof import_ui2.Stack;
       if (isStack !== !this.itemIsInlineOnly(newToken.items[i])) return false;
     }
     const availableWidth = this.activeBlockMetrics?.availableWidth ?? this.maxWidth;
@@ -2821,7 +3247,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
    * *token runs* split at the last image, never token index against child index.
    */
   updateImageParagraph(entity, oldToken, newToken) {
-    if (!(entity instanceof import_ui.Stack)) return false;
+    if (!(entity instanceof import_ui2.Stack)) return false;
     const oldTokens = oldToken.tokens;
     const newTokens = newToken.tokens;
     if (!oldTokens || !newTokens) return false;
@@ -2846,7 +3272,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
       entity.add(this.inlineRunRichText(newTail, availableWidth, t));
     } else {
       const tailEntity = entity.children[entity.children.length - 1];
-      if (!(tailEntity instanceof import_ui.RichText)) return false;
+      if (!(tailEntity instanceof import_ui2.RichText)) return false;
       tailEntity.setSpans(this.inlineRunSpans(newTail, t));
     }
     const last = entity.children[entity.children.length - 1];
@@ -2878,7 +3304,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
    * (its keys are `text`/`tokens`/`header`/`align`).
    */
   updateStreamedTable(entity, oldToken, newToken) {
-    if (!(entity instanceof import_ui.Table)) return false;
+    if (!(entity instanceof import_ui2.Table)) return false;
     if (oldToken.header.length !== newToken.header.length) return false;
     for (let c = 0; c < oldToken.header.length; c++) {
       if (oldToken.header[c].text !== newToken.header[c].text) return false;
@@ -2899,7 +3325,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     if (lastRetained >= 0) {
       for (let c = 0; c < oldToken.header.length; c++) {
         const cell = entity.rows[lastRetained]?.[c];
-        if (!(cell instanceof import_ui.RichText)) return false;
+        if (!(cell instanceof import_ui2.RichText)) return false;
       }
     }
     const t = this.theme;
@@ -2932,7 +3358,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     const newTail = newInner[tail];
     if (oldTail.type !== newTail.type) return false;
     const innerStack = container.children[1];
-    if (!(innerStack instanceof import_ui.Stack)) return false;
+    if (!(innerStack instanceof import_ui2.Stack)) return false;
     const wrapper = innerStack.children.at(-1);
     if (!wrapper || wrapper.children.length !== 1) return false;
     const entity = wrapper.children[0];
@@ -3393,23 +3819,40 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     if (!mathData) return null;
     const intrinsicW = exToPx(mathData.widthEx, t.fontSize);
     const intrinsicH = exToPx(mathData.heightEx, t.fontSize);
-    const mathImg = new import_ui.Image(mathData.uri, {
-      width: Math.min(availableWidth, intrinsicW),
-      height: intrinsicH * Math.min(1, availableWidth / intrinsicW),
-      alt: formula,
-      // The SVG decodes asynchronously and Image paints a placeholder until it
-      // lands. Without this an `onDemand` scene, which repaints only when marked
-      // dirty, leaves the formula a blank slab forever.
-      onLoad: () => {
-        this.scene?.markDirty();
+    const scale = Math.min(1, availableWidth / intrinsicW);
+    const width = intrinsicW * scale;
+    const height = intrinsicH * scale;
+    const uri = mathData.uri;
+    const math = new import_ui2.RichText(
+      [
+        {
+          text: import_core.OBJECT_REPLACEMENT,
+          object: {
+            width,
+            height,
+            // The TeX source is what a reader copies and what a screen reader
+            // announces. KaTeX's dual-layer contract carries the same string in an
+            // `<annotation encoding="application/x-tex">`; here the projection is
+            // the semantic layer, so one copy of the source serves both.
+            alt: formula,
+            paint: (surface, box) => paintInlineMath(uri, surface, box)
+          }
+        }
+      ],
+      {
+        font: `${t.fontSize}px ${t.bodyFont}`,
+        color: t.textColor,
+        maxWidth: availableWidth,
+        selectable: this.selectable
       }
-    });
-    const wrapper = new MarkdownContainer();
-    mathImg.x = 16;
-    mathImg.y = 8;
-    wrapper.add(mathImg);
-    wrapper.width = mathImg.width + 16;
-    wrapper.height = mathImg.height + 16;
+    );
+    this.subscribeInlineMathRepaint();
+    const wrapper = new MathBlock(formula, uri);
+    math.x = 16;
+    math.y = 8;
+    wrapper.add(math);
+    wrapper.width = width + 16;
+    wrapper.height = height + 16;
     return wrapper;
   }
   renderToken(token) {
@@ -3459,7 +3902,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
             this.onLinkClick
           );
         }
-        const stack = new import_ui.Stack({
+        const stack = new import_ui2.Stack({
           direction: "vertical",
           gap: 16,
           maxWidth: availableWidth
@@ -3471,7 +3914,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
             currentTokens = [];
           }
         };
-        for (const child of pToken.tokens) {
+        for (const child of liftNestedImages(pToken.tokens)) {
           if (child.type === "image") {
             flushText();
             stack.add(this.paragraphImage(child, availableWidth));
@@ -3499,12 +3942,15 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
           const mathBlock = this.renderDisplayMath(codeToken.text, availableWidth);
           if (mathBlock) return mathBlock;
         }
-        return new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable);
+        return this.withBlockAffordances(
+          new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable),
+          () => this.codeBlockAffordances(codeToken.text, lang)
+        );
       }
       // ── Blockquotes ──────────────────────────────────────────────────
       case "blockquote": {
         const bqToken = token;
-        const innerStack = new import_ui.Stack({ direction: "vertical", gap: 8 });
+        const innerStack = new import_ui2.Stack({ direction: "vertical", gap: 8 });
         const indentStart = Math.min(16, availableWidth);
         const childMetrics = {
           marginBefore: 0,
@@ -3540,7 +3986,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
       // ── Lists ────────────────────────────────────────────────
       case "list": {
         const listToken = token;
-        const listStack = new import_ui.Stack({ direction: "vertical", gap: 6 });
+        const listStack = new import_ui2.Stack({ direction: "vertical", gap: 6 });
         for (let i = 0; i < listToken.items.length; i++) {
           listStack.add(
             this.itemIsInlineOnly(listToken.items[i]) ? this.listItemRichText(listToken, i, availableWidth, t) : this.listItemBlockStack(listToken, i, availableWidth, t)
@@ -3555,21 +4001,24 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
         const rows = tblToken.rows.map(
           (row) => row.map((cell) => this.tableCellRichText(cell, false, t))
         );
-        return new import_ui.Table({
-          headers,
-          rows,
-          // `| :--- | :---: | ---: |` already resolves to this on the token; it
-          // was previously discarded, so every column rendered left-aligned.
-          align: tblToken.align,
-          width: availableWidth,
-          textColor: t.textColor,
-          headerTextColor: t.headingColor,
-          font: `${t.fontSize - 2}px ${t.bodyFont}`,
-          borderColor: t.hrColor,
-          bg: t.tableBgColor,
-          headerBg: t.tableHeaderBgColor,
-          selectable: this.selectable
-        });
+        return this.withBlockAffordances(
+          new import_ui2.Table({
+            headers,
+            rows,
+            // `| :--- | :---: | ---: |` already resolves to this on the token; it
+            // was previously discarded, so every column rendered left-aligned.
+            align: tblToken.align,
+            width: availableWidth,
+            textColor: t.textColor,
+            headerTextColor: t.headingColor,
+            font: `${t.fontSize - 2}px ${t.bodyFont}`,
+            borderColor: t.hrColor,
+            bg: t.tableBgColor,
+            headerBg: t.tableHeaderBgColor,
+            selectable: this.selectable
+          }),
+          () => this.tableAffordances(tblToken)
+        );
       }
       // ── Horizontal rule ──────────────────────────────────────────────
       case "hr":
@@ -3588,7 +4037,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
       // ── Fallback ─────────────────────────────────────────────────────
       default:
         if ("text" in token) {
-          return new import_ui.Text(token.text, {
+          return new import_ui2.Text(token.text, {
             font: bodyFont,
             color: t.textColor,
             maxWidth: availableWidth,
@@ -3605,12 +4054,22 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BlockAffordanceButton,
+  BlockWithAffordances,
   CodeBlock,
   Markdown,
+  MathBlock,
   codeAtlas,
   codeAtlasStats,
+  escapeCsvField,
+  escapeMarkdownTableCell,
+  extensionForLanguage,
   isMathJaxReady,
+  mimeForLanguage,
   parseFrontMatterFields,
   preloadMathJax,
-  scanFrontMatter
+  scanFrontMatter,
+  tableContentOf,
+  tableToCsv,
+  tableToMarkdown
 });