@vectojs/markdown 0.18.1 → 0.19.0

package/dist/index.mjs

@@ -554,11 +554,13 @@ var DEFAULT_THEME = {
   syntaxStringColor: "#86efac",
   syntaxCommentColor: "#64748b",
   syntaxNumberColor: "#fbbf24",
+  codeLangColor: "#64748b",
   bodyFont: "Inter, system-ui, sans-serif",
   codeFont: 'ui-monospace, "JetBrains Mono", "Fira Code", monospace',
   fontSize: 16,
   headingSizes: [32, 28, 24, 20, 18, 16],
   codeFontSize: 15,
+  codeLangFontSize: 12,
   tableFontSize: 14,
   footnoteMarkerScale: 0.75,
   subscriptScale: 0.75,
@@ -593,6 +595,12 @@ function resolveTheme(theme) {
   if (theme?.footnoteColor === void 0) {
     merged.footnoteColor = merged.linkColor;
   }
+  if (theme?.codeLangColor === void 0) {
+    merged.codeLangColor = merged.syntaxCommentColor;
+  }
+  if (theme?.codeLangFontSize === void 0) {
+    merged.codeLangFontSize = Math.max(1, merged.codeFontSize - 3);
+  }
   return merged;
 }
 function headingSize(theme, depth) {
@@ -932,14 +940,215 @@ var KEYWORD_SETS = {
     "static"
   ])
 };
+KEYWORD_SETS["bash"] = /* @__PURE__ */ new Set([
+  // Shell builtins and control words. Deliberately not the whole of coreutils:
+  // a keyword table that includes every command name colors an entire script
+  // uniformly, which reads worse than coloring only the control flow.
+  "if",
+  "then",
+  "else",
+  "elif",
+  "fi",
+  "for",
+  "while",
+  "until",
+  "do",
+  "done",
+  "case",
+  "esac",
+  "in",
+  "function",
+  "return",
+  "exit",
+  "break",
+  "continue",
+  "local",
+  "export",
+  "readonly",
+  "declare",
+  "unset",
+  "shift",
+  "source",
+  "alias",
+  "set",
+  "trap",
+  "echo",
+  "cd",
+  "sudo",
+  "true",
+  "false"
+]);
+KEYWORD_SETS["json"] = /* @__PURE__ */ new Set(["true", "false", "null"]);
+KEYWORD_SETS["css"] = /* @__PURE__ */ new Set([
+  "important",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "auto",
+  "none",
+  "var",
+  "calc"
+]);
+KEYWORD_SETS["html"] = /* @__PURE__ */ new Set([
+  // Tag names are the meaningful tokens a reader scans for. The tokenizer is
+  // word-based, so `<div>` yields the word `div`.
+  "html",
+  "head",
+  "body",
+  "title",
+  "meta",
+  "link",
+  "script",
+  "style",
+  "div",
+  "span",
+  "p",
+  "a",
+  "img",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "tr",
+  "td",
+  "th",
+  "form",
+  "input",
+  "button",
+  "label",
+  "select",
+  "option",
+  "textarea",
+  "header",
+  "footer",
+  "nav",
+  "main",
+  "section",
+  "article",
+  "aside",
+  "canvas",
+  "svg",
+  "template",
+  "slot"
+]);
 KEYWORD_SETS["javascript"] = KEYWORD_SETS["js"];
 KEYWORD_SETS["typescript"] = KEYWORD_SETS["ts"];
 KEYWORD_SETS["python"] = KEYWORD_SETS["py"];
 KEYWORD_SETS["rs"] = KEYWORD_SETS["rust"];
-function highlightLine(line, lang, theme) {
-  const keywords = KEYWORD_SETS[lang];
-  if (!keywords) {
-    return [{ text: line, color: theme.codeColor }];
+KEYWORD_SETS["jsx"] = KEYWORD_SETS["js"];
+KEYWORD_SETS["mjs"] = KEYWORD_SETS["js"];
+KEYWORD_SETS["cjs"] = KEYWORD_SETS["js"];
+KEYWORD_SETS["tsx"] = KEYWORD_SETS["ts"];
+KEYWORD_SETS["mts"] = KEYWORD_SETS["ts"];
+KEYWORD_SETS["cts"] = KEYWORD_SETS["ts"];
+KEYWORD_SETS["sh"] = KEYWORD_SETS["bash"];
+KEYWORD_SETS["zsh"] = KEYWORD_SETS["bash"];
+KEYWORD_SETS["shell"] = KEYWORD_SETS["bash"];
+KEYWORD_SETS["console"] = KEYWORD_SETS["bash"];
+KEYWORD_SETS["jsonc"] = KEYWORD_SETS["json"];
+KEYWORD_SETS["json5"] = KEYWORD_SETS["json"];
+KEYWORD_SETS["scss"] = KEYWORD_SETS["css"];
+KEYWORD_SETS["sass"] = KEYWORD_SETS["css"];
+KEYWORD_SETS["less"] = KEYWORD_SETS["css"];
+KEYWORD_SETS["vue"] = KEYWORD_SETS["html"];
+KEYWORD_SETS["svelte"] = KEYWORD_SETS["html"];
+KEYWORD_SETS["xml"] = KEYWORD_SETS["html"];
+KEYWORD_SETS["svg"] = KEYWORD_SETS["html"];
+var C_LIKE = {
+  lineComments: ["//"],
+  quotes: ['"', "'", "`"],
+  numbers: true,
+  blockComments: [["/*", "*/"]],
+  // A JS/TS template literal spans lines. Listed here as well as in `quotes`:
+  // `quotes` handles the common single-line case, and this carries the rest.
+  multilineStrings: ["`"]
+};
+var HASH_COMMENT = {
+  lineComments: ["#"],
+  quotes: ['"', "'"],
+  numbers: true
+};
+var LANGUAGE_SYNTAX = {
+  js: C_LIKE,
+  ts: C_LIKE,
+  // A Python docstring is the language's block comment in practice, and it is
+  // lexically a string, so it is carried as one rather than invented as a third
+  // kind. Triple delimiters are listed before the single ones so the longest
+  // match wins.
+  py: { ...HASH_COMMENT, multilineStrings: ['"""', "'''"] },
+  // Rust has `//` line comments AND `'` lifetimes. The unterminated-quote
+  // fallback already keeps a lifetime from swallowing the line, so `'` stays
+  // listed: `'a'` is a valid char literal and should color as a string.
+  rust: C_LIKE,
+  bash: HASH_COMMENT,
+  // JSON has no comments and no single-quoted strings. JSONC does have `//`,
+  // and is aliased separately below rather than sharing this entry.
+  json: { lineComments: [], quotes: ['"'], numbers: true },
+  // CSS has only block comments — which now span lines, so this entry claims
+  // them. Numbers are everywhere in CSS and coloring them is most of the visible
+  // benefit.
+  css: {
+    lineComments: [],
+    quotes: ['"', "'"],
+    numbers: true,
+    blockComments: [["/*", "*/"]]
+  },
+  // Markup: no line comments, and numbers inside attribute values are noise
+  // rather than signal. An SGML comment spans lines like any other block form.
+  html: {
+    lineComments: [],
+    quotes: ['"', "'"],
+    numbers: false,
+    blockComments: [["<!--", "-->"]]
+  }
+};
+LANGUAGE_SYNTAX["javascript"] = LANGUAGE_SYNTAX["js"];
+LANGUAGE_SYNTAX["typescript"] = LANGUAGE_SYNTAX["ts"];
+LANGUAGE_SYNTAX["python"] = LANGUAGE_SYNTAX["py"];
+LANGUAGE_SYNTAX["rs"] = LANGUAGE_SYNTAX["rust"];
+LANGUAGE_SYNTAX["jsx"] = LANGUAGE_SYNTAX["js"];
+LANGUAGE_SYNTAX["mjs"] = LANGUAGE_SYNTAX["js"];
+LANGUAGE_SYNTAX["cjs"] = LANGUAGE_SYNTAX["js"];
+LANGUAGE_SYNTAX["tsx"] = LANGUAGE_SYNTAX["ts"];
+LANGUAGE_SYNTAX["mts"] = LANGUAGE_SYNTAX["ts"];
+LANGUAGE_SYNTAX["cts"] = LANGUAGE_SYNTAX["ts"];
+LANGUAGE_SYNTAX["sh"] = LANGUAGE_SYNTAX["bash"];
+LANGUAGE_SYNTAX["zsh"] = LANGUAGE_SYNTAX["bash"];
+LANGUAGE_SYNTAX["shell"] = LANGUAGE_SYNTAX["bash"];
+LANGUAGE_SYNTAX["console"] = LANGUAGE_SYNTAX["bash"];
+LANGUAGE_SYNTAX["yaml"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["yml"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["toml"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["ini"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["dockerfile"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["makefile"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["make"] = HASH_COMMENT;
+LANGUAGE_SYNTAX["jsonc"] = { lineComments: ["//"], quotes: ['"'], numbers: true };
+LANGUAGE_SYNTAX["json5"] = { lineComments: ["//"], quotes: ['"', "'"], numbers: true };
+LANGUAGE_SYNTAX["scss"] = C_LIKE;
+LANGUAGE_SYNTAX["sass"] = C_LIKE;
+LANGUAGE_SYNTAX["less"] = C_LIKE;
+LANGUAGE_SYNTAX["glsl"] = C_LIKE;
+LANGUAGE_SYNTAX["c"] = C_LIKE;
+LANGUAGE_SYNTAX["cpp"] = C_LIKE;
+LANGUAGE_SYNTAX["go"] = C_LIKE;
+LANGUAGE_SYNTAX["java"] = C_LIKE;
+LANGUAGE_SYNTAX["kotlin"] = C_LIKE;
+LANGUAGE_SYNTAX["swift"] = C_LIKE;
+LANGUAGE_SYNTAX["vue"] = LANGUAGE_SYNTAX["html"];
+LANGUAGE_SYNTAX["svelte"] = LANGUAGE_SYNTAX["html"];
+LANGUAGE_SYNTAX["xml"] = LANGUAGE_SYNTAX["html"];
+LANGUAGE_SYNTAX["svg"] = LANGUAGE_SYNTAX["html"];
+function highlightedLanguages() {
+  return [.../* @__PURE__ */ new Set([...Object.keys(LANGUAGE_SYNTAX), ...Object.keys(KEYWORD_SETS)])].sort();
+}
+function highlightLine(line, lang, theme, carry = null) {
+  const key = lang.trim().toLowerCase().split(/[\s:,{]/)[0] ?? "";
+  const keywords = KEYWORD_SETS[key];
+  const syntax = LANGUAGE_SYNTAX[key];
+  if (!keywords && !syntax) {
+    return { segments: [{ text: line, color: theme.codeColor }], carry: null };
   }
   const segments = [];
   const KEYWORD_COLOR = theme.syntaxKeywordColor;
@@ -954,19 +1163,63 @@ function highlightLine(line, lang, theme) {
       buf = "";
     }
   };
+  const lexical = syntax ?? C_LIKE;
+  const findClose = (from, close, isString) => {
+    let j = from;
+    while (j < line.length) {
+      if (isString && line[j] === "\\") {
+        j += 2;
+        continue;
+      }
+      if (line.startsWith(close, j)) return j + close.length;
+      j++;
+    }
+    return -1;
+  };
+  if (carry) {
+    const color = carry.kind === "comment" ? COMMENT_COLOR : STRING_COLOR;
+    const end = findClose(0, carry.close, carry.kind === "string");
+    if (end === -1) {
+      if (line.length > 0) segments.push({ text: line, color });
+      return { segments, carry };
+    }
+    segments.push({ text: line.slice(0, end), color });
+    i = end;
+  }
   while (i < line.length) {
     const ch = line[i];
-    if (ch === "/" && line[i + 1] === "/") {
+    const block = lexical.blockComments?.find(([open]) => line.startsWith(open, i));
+    if (block) {
+      const [open, close] = block;
       flush(theme.codeColor);
-      segments.push({ text: line.slice(i), color: COMMENT_COLOR });
-      return segments;
+      const end = findClose(i + open.length, close, false);
+      if (end === -1) {
+        segments.push({ text: line.slice(i), color: COMMENT_COLOR });
+        return { segments, carry: { kind: "comment", close } };
+      }
+      segments.push({ text: line.slice(i, end), color: COMMENT_COLOR });
+      i = end;
+      continue;
     }
-    if (ch === "#" && (lang === "py" || lang === "python" || lang === "rust" || lang === "rs")) {
+    const comment = lexical.lineComments.find((prefix) => line.startsWith(prefix, i));
+    if (comment !== void 0) {
       flush(theme.codeColor);
       segments.push({ text: line.slice(i), color: COMMENT_COLOR });
-      return segments;
+      return { segments, carry: null };
     }
-    if (ch === '"' || ch === "'" || ch === "`") {
+    const multi = lexical.multilineStrings?.find((delim) => line.startsWith(delim, i));
+    if (multi !== void 0) {
+      flush(theme.codeColor);
+      const end = findClose(i + multi.length, multi, true);
+      if (end === -1) {
+        segments.push({ text: line.slice(i), color: STRING_COLOR });
+        return { segments, carry: { kind: "string", close: multi } };
+      }
+      segments.push({ text: line.slice(i, end), color: STRING_COLOR });
+      i = end;
+      continue;
+    }
+    if (lexical.quotes.includes(ch)) {
       const quote = ch;
       let j = i + 1;
       let closed = false;
@@ -991,7 +1244,7 @@ function highlightLine(line, lang, theme) {
       i++;
       continue;
     }
-    if (/\d/.test(ch) && (i === 0 || /[\s(,=+\-*/<>[\]{}:;]/.test(line[i - 1]))) {
+    if (lexical.numbers && /\d/.test(ch) && (i === 0 || /[\s(,=+\-*/<>[\]{}:;]/.test(line[i - 1]))) {
       flush(theme.codeColor);
       let j = i;
       while (j < line.length && /[\d._xXa-fA-F]/.test(line[j])) j++;
@@ -1006,7 +1259,9 @@ function highlightLine(line, lang, theme) {
       const word = line.slice(i, j);
       segments.push({
         text: word,
-        color: keywords.has(word) ? KEYWORD_COLOR : theme.codeColor
+        // A language may have lexical syntax but no keywords (plain YAML, TOML,
+        // a Dockerfile). Those still get comments, strings and numbers.
+        color: keywords?.has(word) ? KEYWORD_COLOR : theme.codeColor
       });
       i = j;
       continue;
@@ -1015,10 +1270,18 @@ function highlightLine(line, lang, theme) {
     i++;
   }
   flush(theme.codeColor);
-  return segments;
+  return { segments, carry: null };
 }
 var CodeBlock = class extends UIComponent {
   lines;
+  /**
+   * Lexical state ENTERING each line, index-aligned with {@link lines}.
+   *
+   * Entering rather than leaving, so a streamed append can resume tokenizing at
+   * the prefix-reuse boundary by reading one entry instead of re-scanning the
+   * document for an unclosed block comment.
+   */
+  lineCarry = [];
   grid = null;
   /** Raw (unhighlighted) lines of the last build, for prefix reuse in buildLines. */
   rawLines = null;
@@ -1026,6 +1289,19 @@ var CodeBlock = class extends UIComponent {
   source;
   /** Bumped by {@link buildLines} and {@link setSelectable}; read by `Scene`. */
   contentEpoch = 0;
+  /**
+   * Horizontal scroll offset in local px, always in `[0, maxScrollX]`.
+   *
+   * Code does not wrap, so a line wider than the box would otherwise have an
+   * unreachable tail. This offset is subtracted from BOTH the painted cell x and
+   * the projected line x in the same frame — never one without the other, or the
+   * DOM selection carriers detach from the glyphs they are supposed to cover
+   * (the defect class `5cf7119` and `ee1de6f` fixed on the vertical axis).
+   */
+  scrollXValue = 0;
+  /** Memoized widest prepared line, keyed by the grid identity it came from. */
+  contentWidthGrid = null;
+  contentWidthValue = 0;
   lang;
   theme;
   /**
@@ -1037,6 +1313,10 @@ var CodeBlock = class extends UIComponent {
   pad;
   codeFont;
   selectable;
+  /** Whether the language header band is drawn. See {@link CodeBlockOptions.showLanguage}. */
+  showLanguage;
+  /** Font of the header label, resolved once from the theme. */
+  langFont;
   /**
    * @param theme Any subset of {@link MarkdownTheme}, or the name of a built-in
    *   preset (see {@link MarkdownThemePresetName}). Accepting a partial theme
@@ -1048,7 +1328,7 @@ var CodeBlock = class extends UIComponent {
    *   be constructed directly with a preset name without going through
    *   `Markdown`.
    */
-  constructor(code, lang, maxWidth, theme, selectable = true) {
+  constructor(code, lang, maxWidth, theme, selectable = true, options = {}) {
     super();
     const resolved = resolvePresetTheme(theme);
     this.source = code;
@@ -1058,15 +1338,129 @@ var CodeBlock = class extends UIComponent {
     this.pad = resolved.codePadding;
     this.codeFont = `${resolved.codeFontSize}px ${resolved.codeFont}`;
     this.selectable = selectable;
+    this.langFont = `${resolved.codeLangFontSize}px ${resolved.codeFont}`;
+    this.showLanguage = options.showLanguage === true && this.languageLabel() !== "";
     this.lines = [];
     this.width = maxWidth;
     this.buildLines(code);
+    this.on("wheel", (e) => {
+      const max = this.maxScrollX;
+      if (max <= 0) return;
+      if (e.ctrlKey === true) return;
+      const deltaMode = e.deltaMode ?? 0;
+      let deltaX = e.deltaX ?? 0;
+      let deltaY = e.deltaY ?? 0;
+      if (deltaMode === 1) {
+        deltaX *= 16;
+        deltaY *= 16;
+      } else if (deltaMode === 2) {
+        deltaX *= this.width;
+        deltaY *= this.height;
+      }
+      const horizontal = e.shiftKey === true ? deltaY || deltaX : deltaX;
+      if (horizontal === 0) return;
+      const before = this.scrollX;
+      this.setScrollX(before + horizontal);
+      if (this.scrollX !== before) e.nativeEvent?.preventDefault?.();
+    });
+  }
+  /**
+   * The language name shown in the header, or `''` when there is nothing to show.
+   *
+   * Normalized exactly as the highlighter normalizes its lookup key, so the label
+   * and the colouring can never disagree about which language this is: a fence
+   * may be written ` ```Bash ` or carry attributes (` ```ts title="a.ts" `), and
+   * the label has to be the language, not the raw info string.
+   *
+   * Lowercased for the same reason `streamdown` lowercases its own
+   * (`lib/code-block/header.tsx:15`): the fence's capitalization is incidental,
+   * and a document mixing ` ```JS ` with ` ```js ` should not render two
+   * different-looking labels for one language.
+   */
+  languageLabel() {
+    return this.lang.trim().toLowerCase().split(/[\s:,{]/)[0] ?? "";
+  }
+  /**
+   * Height in px of the header band, or `0` when it is off.
+   *
+   * The label sits in a band of its own rather than floating over the code,
+   * because a translucent overlay above real glyphs is unreadable at small sizes
+   * and would fight the horizontal scroll: the code slides under it, so any text
+   * drawn on top would collide with a different token every frame.
+   */
+  headerHeight() {
+    if (!this.showLanguage) return 0;
+    return this.theme.codeLangFontSize + Math.round(this.pad * 0.75);
+  }
+  /**
+   * Local y of the first line of code.
+   *
+   * Everything that positions a row — the painter, the projection, the grid's
+   * own origin — goes through this, so the header offset cannot be applied to
+   * one and forgotten on another. That class of mismatch is exactly what
+   * detaches selection carriers from the glyphs they cover.
+   */
+  contentTop() {
+    return this.headerHeight() + this.pad;
+  }
+  /**
+   * Current horizontal scroll offset in local px, clamped to what the content
+   * currently allows.
+   *
+   * Clamped on READ, not only on write, because `setWidth()` may shrink the box
+   * after a scroll and is contractually forbidden from rebuilding anything. Both
+   * the painter and the projection read through here, which is what keeps the
+   * glyphs and the selection carriers on the same offset within a frame.
+   */
+  get scrollX() {
+    return Math.min(this.scrollXValue, this.maxScrollX);
+  }
+  /**
+   * Widest line's overflow past the padded box, i.e. the maximum useful
+   * {@link scrollX}. `0` when every line already fits.
+   */
+  get maxScrollX() {
+    return Math.max(0, this.contentWidth() - (this.width - this.pad * 2));
+  }
+  /**
+   * Widest prepared line, memoized against the grid that produced it.
+   *
+   * Read by {@link scrollX}, which both `render()` and `getContentProjection()`
+   * call every synced frame, so an O(lines) scan here would be an O(document) cost
+   * per frame on a long block — the exact shape the per-line projection window
+   * exists to avoid. The grid is rebuilt only when the content changes, so the
+   * cache key is identity of the grid object.
+   */
+  contentWidth() {
+    const grid = this.ensureGrid();
+    if (this.contentWidthGrid === grid) return this.contentWidthValue;
+    let widest = 0;
+    for (const line of grid.lines) {
+      if (line.width > widest) widest = line.width;
+    }
+    this.contentWidthGrid = grid;
+    this.contentWidthValue = widest;
+    return widest;
+  }
+  /**
+   * Scroll horizontally to `x`, clamped to `[0, maxScrollX]`.
+   *
+   * @returns `this` for chaining.
+   */
+  setScrollX(x) {
+    const next = Math.max(0, Math.min(this.maxScrollX, x));
+    if (next === this.scrollXValue) return this;
+    this.scrollXValue = next;
+    this.contentEpoch++;
+    this.scene?.markDirty();
+    return this;
   }
   /** Re-parse code content (e.g. for live editing). */
   setCode(code, lang) {
     if (lang !== void 0) this.lang = lang;
     this.source = code;
     this.buildLines(code);
+    this.scrollXValue = Math.min(this.scrollXValue, this.maxScrollX);
     this.scene?.markDirty();
     return this;
   }
@@ -1086,9 +1480,13 @@ var CodeBlock = class extends UIComponent {
    * Deliberately does **not** rebuild the grid or the highlight, because code does
    * not reflow: lines are placed on a fixed monospace grid at `col × cellWidth` and
    * a long line overflows rather than wrapping, so `height` is a function of line
-   * *count* alone. The width only sizes the rounded background. Anything that would
-   * change the glyph geometry — the source, the language, the font — goes through
-   * {@link setCode} and invalidates the grid there.
+   * *count* alone. The width sizes the rounded background and the clip. Anything
+   * that would change the glyph geometry — the source, the language, the font —
+   * goes through {@link setCode} and invalidates the grid there.
+   *
+   * A narrower box can leave {@link scrollX} past the new end of travel. That is
+   * resolved by clamping on read rather than by adjusting anything here, so this
+   * method keeps costing nothing.
    *
    * @returns `this` for chaining.
    */
@@ -1102,16 +1500,21 @@ var CodeBlock = class extends UIComponent {
   getContentProjection(hint) {
     if (!this.source) return null;
     const grid = this.ensureGrid();
+    const scrollX = this.scrollX;
     const rows = [];
     rows.length = grid.lines.length;
     for (let row = 0; row < grid.lines.length; row++) {
       const line = grid.lines[row];
-      const y = this.pad + row * this.lineH;
+      const y = this.contentTop() + row * this.lineH;
       if (!contentLineInHint(hint, y, this.lineH)) continue;
       rows[row] = {
         text: this.source.slice(line.sourceStart, line.sourceEnd),
         separatorAfter: this.source.slice(line.sourceEnd, line.nextSourceStart) || void 0,
-        x: this.pad,
+        // The SAME offset `render()` subtracts, read through the same clamping
+        // accessor. Cell carriers are `position: relative` inside this `absolute`
+        // line box, so shifting the line's x translates every cell of the line
+        // rigidly and selection stays over the glyphs.
+        x: this.pad - scrollX,
         y,
         baseline: this.lineH * 0.75,
         font: this.codeFont,
@@ -1131,6 +1534,12 @@ var CodeBlock = class extends UIComponent {
       // render() draws cell-by-cell (no ligatures can form); the DOM copy
       // must not ligate either or Firefox selection geometry drifts.
       ligatures: "none",
+      // `render()` clips the glyph pass to this box, so the DOM copy must too.
+      // A line wider than the box otherwise projects carriers past the entity,
+      // and the browser paints their selection highlight over whatever is drawn
+      // beside the block — measured 1580px of carrier against a 1566px viewport
+      // on a real page, the highlight running through the prose to its right.
+      clipToBounds: true,
       grid
     };
   }
@@ -1145,6 +1554,11 @@ var CodeBlock = class extends UIComponent {
    *
    * The last previously-seen line is deliberately NOT reused: a chunk usually
    * lands mid-line, so that line's text (and therefore its tokenization) changes.
+   *
+   * Prefix reuse survives multi-line constructs because {@link lineCarry} records
+   * the state ENTERING each line, so resuming at the reuse boundary needs no
+   * rescan: a carried state is a pure function of the preceding text, and that
+   * text is byte-identical over the reused prefix by construction.
    */
   buildLines(code) {
     this.contentEpoch++;
@@ -1155,18 +1569,20 @@ var CodeBlock = class extends UIComponent {
       const limit = Math.min(previous.length - 1, rawLines.length);
       while (reusable < limit && previous[reusable] === rawLines[reusable]) reusable++;
     }
-    if (reusable > 0) {
-      const next = this.lines.slice(0, reusable);
-      for (let i = reusable; i < rawLines.length; i++) {
-        next.push(highlightLine(rawLines[i], this.lang, this.theme));
-      }
-      this.lines = next;
-    } else {
-      this.lines = rawLines.map((l) => highlightLine(l, this.lang, this.theme));
+    const lines = reusable > 0 ? this.lines.slice(0, reusable) : [];
+    const carries = reusable > 0 ? this.lineCarry.slice(0, reusable) : [];
+    let carry = reusable > 0 ? this.lineCarry[reusable] ?? null : null;
+    for (let i = reusable; i < rawLines.length; i++) {
+      carries.push(carry);
+      const result = highlightLine(rawLines[i], this.lang, this.theme, carry);
+      lines.push(result.segments);
+      carry = result.carry;
     }
+    this.lines = lines;
+    this.lineCarry = carries;
     this.rawLines = rawLines;
     this.grid = null;
-    this.height = this.pad * 2 + rawLines.length * this.lineH;
+    this.height = this.contentTop() + this.pad + rawLines.length * this.lineH;
   }
   ensureGrid() {
     const cellWidth = this.cellWidth || Math.max(1, measureText("M", this.codeFont));
@@ -1180,7 +1596,15 @@ var CodeBlock = class extends UIComponent {
     }
     return this.grid;
   }
-  /** Code blocks are decorative — not interactive. */
+  /**
+   * Not hit-testable, and deliberately still not `interactive`, even though the
+   * block now consumes wheel events to scroll.
+   *
+   * The wheel arrives from the content-projection div rather than from canvas
+   * hit-testing, so no a11y shadow node is needed. Creating one would place a
+   * `pointer-events: auto` element above the transparent text mirror and swallow
+   * the mousedown that starts a native drag-selection.
+   */
   isPointInside() {
     return false;
   }
@@ -1192,8 +1616,25 @@ var CodeBlock = class extends UIComponent {
     const atlas = codeGlyphAtlas(r);
     const atlasSource = atlas?.source ?? null;
     const blit = atlas ? r.drawImageRect : void 0;
+    const header = this.headerHeight();
+    if (header > 0) {
+      r.fillText(
+        this.languageLabel(),
+        this.pad,
+        // Vertically centred in the band by its own cap height rather than by
+        // font size: `fillText` takes a baseline, so centring the em box would
+        // sit the visible letterforms low. 0.7 of the label size below the band's
+        // centre line is where a lowercase-plus-cap run reads as centred.
+        (header + this.theme.codeLangFontSize * 0.7) / 2,
+        this.langFont,
+        this.theme.codeLangColor
+      );
+    }
+    r.save();
+    r.clip(0, header, this.width, this.height - header);
+    const scrollX = this.scrollX;
     for (let row = 0; row < grid.lines.length; row++) {
-      const yBaseline = this.pad + row * this.lineH + this.lineH * 0.75;
+      const yBaseline = this.contentTop() + row * this.lineH + this.lineH * 0.75;
       const segments = this.lines[row];
       let segmentIndex = 0;
       let segmentEnd = segments[0]?.text.length ?? 0;
@@ -1207,7 +1648,8 @@ var CodeBlock = class extends UIComponent {
         const sourceText = this.source.slice(cell.sourceStart, cell.sourceEnd);
         if (cell.advance <= 0 || sourceText === " " || sourceText === "	") continue;
         const color = segments[segmentIndex]?.color ?? this.theme.codeColor;
-        const x = this.pad + cell.x;
+        const x = this.pad + cell.x - scrollX;
+        if (x + cell.advance < 0 || x > this.width) continue;
         if (blit && atlas) {
           const slot = atlas.get(this.codeFont, color, cell.glyph);
           const src = atlasSource ?? atlas.source;
@@ -1230,6 +1672,7 @@ var CodeBlock = class extends UIComponent {
         r.fillText(cell.glyph, x, yBaseline, this.codeFont, color);
       }
     }
+    r.restore();
   }
 };
 var codeAtlases = /* @__PURE__ */ new Map();
@@ -2481,6 +2924,20 @@ function defaultSaveFile(filename, content, mimeType) {
   doc.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
+function resolveBlockAffordanceConfig(config = {}) {
+  return {
+    copy: config.copy ?? true,
+    download: config.download ?? true,
+    labels: {
+      copyCode: config.labels?.copyCode ?? "Copy code",
+      downloadCode: config.labels?.downloadCode ?? "Download code",
+      copyTable: config.labels?.copyTable ?? "Copy table",
+      downloadTable: config.labels?.downloadTable ?? "Download table",
+      copied: config.labels?.copied ?? "Copied",
+      saved: config.labels?.saved ?? "Saved"
+    }
+  };
+}
 var BlockAffordanceButton = class _BlockAffordanceButton extends Button {
   constructor(label, successLabel, act, opts = {}) {
     super(label, { ...opts, onClick: () => this.run() });
@@ -2735,6 +3192,12 @@ marked.use({
     }
   ]
 });
+var MISWIRED_LAYOUT_HOOK_NAMES = [
+  "onHeightChanged",
+  "onHeightChange",
+  "onLayoutUpdate",
+  "onResize"
+];
 var markdownWorker = null;
 var workerIdCounter = 0;
 var workerInstanceCounter = 0;
@@ -2796,20 +3259,62 @@ var Markdown = class _Markdown extends UIComponent3 {
    * affordance.
    */
   blockAffordances;
+  /**
+   * Which controls a block carries and what they are called, with defaults
+   * applied.
+   *
+   * Resolved once in the constructor rather than per block: the defaults are
+   * fixed, and re-deriving them for every code fence in a long document would
+   * repeat the same six `??` fallbacks for no benefit.
+   */
+  affordanceConfig;
+  /**
+   * Whether code blocks show their language in a header band.
+   *
+   * Read when a block entity is built, exactly like {@link blockAffordances}, so
+   * it affects blocks rendered from here on rather than retroactively.
+   */
+  showCodeLanguage;
   /** 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.
+   * Called after this entity's own `width`/`height` changed because the document
+   * was re-laid-out. **This is the hook to wire up when a host has to move or
+   * resize anything positioned below the document.**
+   *
+   * Fires from three paths, all of which republish `width`/`height` from
+   * `content`:
+   *
+   * - a streamed append (`updateTokens`),
+   * - a width change ({@link setMaxWidth}),
+   * - a paragraph image whose decoded bitmap corrected the guessed aspect ratio
+   *   (`reflowAfterImageResize`) — the guess is a flat 16:10, so this one fires
+   *   on essentially every document containing an image, and a host that misses
+   *   it leaves every block below the image overlapping it.
+   *
+   * It does **not** fire from `setContent()`, which replaces the whole document
+   * and is a call the host already made, so this is a re-layout signal rather
+   * than a complete size signal.
+   *
+   * A `VirtualList` needs none of this to track a streaming row: it re-reads
+   * `height` on every mounted row each frame, so it sees this entity grow without
+   * being told. Prefer that where it applies. Reach for this callback when the
+   * host owns absolute positions of its own — a page that stacks navigation, a
+   * footer and a scroll height under the document has to recompute them here.
    *
-   * Not required for a `VirtualList` to track a streaming row's height: the list
-   * re-reads `height` on every mounted row each frame, so it sees this entity grow
-   * without being told. Prefer that over wiring this up — it fires from the append
-   * path only, **not** from `setContent()`, so it is not a complete size signal.
+   * There is no `onHeightChanged`. That name has been assigned by real callers
+   * through an `as unknown as` cast, which compiles, silences the type error and
+   * then never fires; if a layout callback appears dead, check the name first.
    */
   onLayoutUpdated;
+  /**
+   * Latch for the miswired-hook warning, so a streaming document warns once
+   * rather than on every chunk.
+   */
+  hasWarnedLayoutHookName = false;
   /**
    * The document's BODY text — everything after any front matter block.
    *
@@ -3052,6 +3557,8 @@ var Markdown = class _Markdown extends UIComponent3 {
     this.selectable = opts.selectable ?? true;
     this._userTiming = opts.userTiming ?? false;
     this.blockAffordances = opts.blockAffordances ?? false;
+    this.affordanceConfig = resolveBlockAffordanceConfig(opts.affordances);
+    this.showCodeLanguage = opts.showCodeLanguage ?? false;
     this.writeClipboard = opts.writeClipboard ?? defaultWriteClipboard;
     this.saveFile = opts.saveFile ?? defaultSaveFile;
     this.content = new Stack({
@@ -3260,7 +3767,7 @@ var Markdown = class _Markdown extends UIComponent3 {
     this.content.layout();
     this.width = this.content.width;
     this.height = this.content.height;
-    this.onLayoutUpdated?.();
+    this.notifyLayoutUpdated();
     this.scene?.markDirty();
     return this;
   }
@@ -4013,40 +4520,60 @@ var Markdown = class _Markdown extends UIComponent3 {
     const controls = make();
     return controls.length > 0 ? new BlockWithAffordances(block, controls) : block;
   }
-  /** Copy and download controls for one fenced code block. */
+  /** Copy and download controls for one fenced code block, per {@link affordanceConfig}. */
   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. */
+    const { copy, download, labels } = this.affordanceConfig;
+    const controls = [];
+    if (copy) {
+      controls.push(
+        new BlockAffordanceButton(
+          labels.copyCode,
+          labels.copied,
+          () => this.writeClipboard(source),
+          opts
+        )
+      );
+    }
+    if (download) {
+      controls.push(
+        new BlockAffordanceButton(
+          labels.downloadCode,
+          labels.saved,
+          () => this.saveFile(`code.${extensionForLanguage(lang)}`, source, mimeForLanguage(lang)),
+          opts
+        )
+      );
+    }
+    return controls;
+  }
+  /** Copy (as Markdown) and download (as CSV) controls for one table, per {@link affordanceConfig}. */
   tableAffordances(tblToken) {
+    const { copy, download, labels } = this.affordanceConfig;
     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
-      )
-    ];
+    const controls = [];
+    if (copy) {
+      controls.push(
+        new BlockAffordanceButton(
+          labels.copyTable,
+          labels.copied,
+          () => this.writeClipboard(tableToMarkdown(content)),
+          opts
+        )
+      );
+    }
+    if (download) {
+      controls.push(
+        new BlockAffordanceButton(
+          labels.downloadTable,
+          labels.saved,
+          () => this.saveFile("table.csv", tableToCsv(content), "text/csv;charset=utf-8"),
+          opts
+        )
+      );
+    }
+    return controls;
   }
   /**
    * Button styling for the affordances, derived from the document theme.
@@ -4130,7 +4657,40 @@ var Markdown = class _Markdown extends UIComponent3 {
     }
     this.width = this.content.width;
     this.height = this.content.height;
-    this.onLayoutUpdated?.();
+    this.notifyLayoutUpdated();
+  }
+  /**
+   * Publish a completed re-layout to the host.
+   *
+   * Every path that republishes `width`/`height` from `content` ends here rather
+   * than calling {@link onLayoutUpdated} directly, so the misuse check below is
+   * reached however the re-layout was triggered.
+   *
+   * The check exists because the failure it catches is silent and was found in
+   * production, not in review. A host wired its reflow to `onHeightChanged` — a
+   * name this class has never had — through an `as unknown as` cast. The cast
+   * satisfied the compiler, the callback never fired, and every post containing
+   * an image stayed laid out against the guessed 16:10 aspect ratio with a stale
+   * document scroll height. Nothing in the type system, the tests or the console
+   * said anything. A property that is *only ever assigned* has no read site to
+   * fail, so the one place that can notice is the moment we would have called it.
+   */
+  notifyLayoutUpdated() {
+    if (this.onLayoutUpdated) {
+      this.onLayoutUpdated();
+      return;
+    }
+    if (!this.hasWarnedLayoutHookName) {
+      const wrongName = MISWIRED_LAYOUT_HOOK_NAMES.find(
+        (name) => typeof this[name] === "function"
+      );
+      if (wrongName) {
+        this.hasWarnedLayoutHookName = true;
+        console.warn(
+          `[VectoJS] Markdown.${wrongName} is not a VectoJS callback and will never fire. The document just re-laid-out and nothing was notified. Assign \`onLayoutUpdated\` instead \u2014 anything positioned below the document needs it, and a paragraph image corrects its guessed aspect ratio on decode, so a missed signal leaves following blocks overlapping the image.`
+        );
+      }
+    }
   }
   /**
    * Re-derive one `MarkdownContainer`'s cached box from its children.
@@ -4941,9 +5501,7 @@ var Markdown = class _Markdown extends UIComponent3 {
     this.width = this.content.width;
     this.height = this.content.height;
     this.scene?.markDirty();
-    if (this.onLayoutUpdated) {
-      this.onLayoutUpdated();
-    }
+    this.notifyLayoutUpdated();
   }
   /**
    * Render one nested block with a temporary width/margin context while
@@ -5159,7 +5717,9 @@ var Markdown = class _Markdown extends UIComponent3 {
           }
         }
         return this.withBlockAffordances(
-          new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable),
+          new CodeBlock(codeToken.text, lang, availableWidth, t, this.selectable, {
+            showLanguage: this.showCodeLanguage
+          }),
           () => this.codeBlockAffordances(codeToken.text, lang)
         );
       }
@@ -5390,6 +5950,7 @@ export {
   extensionForLanguage,
   footnoteMarker,
   hasFencedBlockRenderer,
+  highlightedLanguages,
   isFencedBlockRendererReady,
   isMathJaxReady,
   isPresetName,
@@ -5398,6 +5959,7 @@ export {
   preloadMathJax,
   registerFencedBlockRenderer,
   renderFencedBlock,
+  resolveBlockAffordanceConfig,
   resolvePresetTheme,
   scanFrontMatter,
   tableContentOf,