@vectojs/markdown 0.11.0 → 0.13.0

package/dist/Markdown.d.ts

@@ -32,6 +32,42 @@ export interface MarkdownTheme {
     /** Base font size in px. */
     fontSize?: number;
 }
+/** A simple concrete container entity for nested layouts. */
+declare class MarkdownContainer extends Entity {
+    isPointInside(_globalX: number, _globalY: number): boolean;
+    render(_r: any): void;
+}
+/**
+ * One display formula: a `$$..$$` block or a closed ```` ```math ```` fence.
+ *
+ * A named class rather than a bare {@link MarkdownContainer} because the formula
+ * needs a stable handle, and after the switch to an inline object it has none:
+ * the typeset raster lives in a `paint` closure captured by the span, so removing
+ * the `Image` entity left nothing exposing either the source or the SVG bytes.
+ * Devtools, tests, and anything auditing what a formula actually rendered all
+ * want that. `markstream-vue` reaches the same conclusion from the DOM side and
+ * publishes `data-markstream-mode` on its math node for the same reason.
+ *
+ * Deliberately carries no typeset-vs-source flag. A formula MathJax has not
+ * converted yet renders as a bare {@link CodeBlock} of its TeX, which this class
+ * does not wrap — wrapping it would put a container between `content` and a
+ * `CodeBlock` that the streamed `setCode` path locates by type. So a flag would
+ * have exactly one reachable value, which is the dead-API trap that cost CTX-0208
+ * a debugging pass. Add it together with wrapping the fallback, or not at all.
+ */
+export declare class MathBlock 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.
+     */
+    readonly formula: string;
+    /** The `data:image/svg+xml` URI of the typeset glyphs. */
+    readonly svgUri: string;
+    constructor(formula: string, svgUri: string);
+    getDevtoolsDescriptor(): DevtoolsDescriptor;
+}
 /**
  * A single self-rendering entity for fenced code blocks.
  *
@@ -545,6 +581,71 @@ export declare class Markdown extends UIComponent {
     private paragraphImage;
     /** One table cell entity, shared by the render arm and the streamed-table path. */
     private tableCellRichText;
+    /**
+     * Token types a list item's fast path can render as one `RichText`.
+     *
+     * An ALLOWLIST, deliberately, following `markstream-vue`'s
+     * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+     * type is excluded by OMISSION, so a token this renderer has never heard of
+     * falls out of the fast path automatically instead of being silently flattened
+     * to its raw text. A denylist fails the other way, and the failure is quiet —
+     * a formula painted as literal TeX rather than an error — which is why this
+     * defect survived so long.
+     *
+     * Deliberately small, because a list item's DIRECT children are far less varied
+     * than they look. Probed against marked 18.0.7: every inline construct
+     * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+     * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+     * type is `text` — so a tight item's direct child list is `text` and nothing
+     * else. Listing those inline types here would be dead code.
+     *
+     * `space` and `checkbox` are included because both are inert here. A blank line
+     * between an item's paragraph and its block sibling produces a `space`, and
+     * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+     * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+     * renders nothing on its own. Omitting `checkbox` sent every task item down the
+     * block path and moved its marker into a nested entity, which broke four
+     * task-list assertions in `Markdown.test.ts`.
+     */
+    private static readonly INLINE_ITEM_TOKENS;
+    /**
+     * Does this item consist purely of inline content?
+     *
+     * True keeps the single-`RichText` fast path, which is not merely an
+     * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+     * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+     * for its entire list. Only pay for a block container when an item holds a
+     * block.
+     *
+     * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+     * inline content from `text` to `paragraph` — adding one blank line anywhere
+     * flips `token.loose` for the whole list — so treating a single paragraph as a
+     * block would drop the fast path for every item of every loose list, the common
+     * shape in real prose, for no rendering benefit.
+     */
+    private itemIsInlineOnly;
+    /**
+     * Build a list item that holds block-level children.
+     *
+     * The item becomes a vertical `Stack`: its leading inline run (carrying the
+     * marker) first, then every remaining child rendered through the same
+     * `renderToken` the document level uses, indented to clear the marker.
+     *
+     * Recursing rather than special-casing the types we know about is the point — a
+     * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+     * second paragraph all render exactly as they would at indent 0, and a block
+     * type added later works here for free.
+     *
+     * Only the FIRST child can be the lead. Everything after it becomes a block,
+     * including a second `paragraph`: an item's two paragraphs are two blocks, and
+     * folding them into the lead run would concatenate them into one line with no
+     * separation.
+     *
+     * The lead `RichText` is emitted even when the item has no inline text, because
+     * it carries the marker — an item that is nothing but a formula still shows its
+     * bullet or ordinal.
+     */
+    private listItemBlockStack;
     private listItemSpans;
     /** Construct the `RichText` for one list item. */
     private listItemRichText;
@@ -786,3 +887,4 @@ export declare class Markdown extends UIComponent {
     /** Structural — children draw themselves. */
     render(_r: IRenderer): void;
 }
+export {};

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
   Markdown: () => Markdown,
+  MathBlock: () => MathBlock,
   codeAtlas: () => codeAtlas,
   codeAtlasStats: () => codeAtlasStats,
   isMathJaxReady: () => isMathJaxReady,
@@ -871,6 +872,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",
@@ -1531,7 +1559,7 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class extends import_ui.UIComponent {
+var Markdown = class _Markdown extends import_ui.UIComponent {
   content;
   maxWidth;
   theme;
@@ -2580,6 +2608,109 @@ var Markdown = class extends import_ui.UIComponent {
       onLinkClick: this.onLinkClick
     });
   }
+  /**
+   * Token types a list item's fast path can render as one `RichText`.
+   *
+   * An ALLOWLIST, deliberately, following `markstream-vue`'s
+   * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+   * type is excluded by OMISSION, so a token this renderer has never heard of
+   * falls out of the fast path automatically instead of being silently flattened
+   * to its raw text. A denylist fails the other way, and the failure is quiet —
+   * a formula painted as literal TeX rather than an error — which is why this
+   * defect survived so long.
+   *
+   * Deliberately small, because a list item's DIRECT children are far less varied
+   * than they look. Probed against marked 18.0.7: every inline construct
+   * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+   * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+   * type is `text` — so a tight item's direct child list is `text` and nothing
+   * else. Listing those inline types here would be dead code.
+   *
+   * `space` and `checkbox` are included because both are inert here. A blank line
+   * between an item's paragraph and its block sibling produces a `space`, and
+   * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+   * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+   * renders nothing on its own. Omitting `checkbox` sent every task item down the
+   * block path and moved its marker into a nested entity, which broke four
+   * task-list assertions in `Markdown.test.ts`.
+   */
+  static INLINE_ITEM_TOKENS = /* @__PURE__ */ new Set([
+    "text",
+    "space",
+    "checkbox"
+  ]);
+  /**
+   * Does this item consist purely of inline content?
+   *
+   * True keeps the single-`RichText` fast path, which is not merely an
+   * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+   * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+   * for its entire list. Only pay for a block container when an item holds a
+   * block.
+   *
+   * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+   * inline content from `text` to `paragraph` — adding one blank line anywhere
+   * flips `token.loose` for the whole list — so treating a single paragraph as a
+   * block would drop the fast path for every item of every loose list, the common
+   * shape in real prose, for no rendering benefit.
+   */
+  itemIsInlineOnly(item) {
+    const children = item.tokens;
+    if (!children || children.length === 0) return true;
+    if (children.length === 1 && children[0].type === "paragraph") return true;
+    return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
+  }
+  /**
+   * Build a list item that holds block-level children.
+   *
+   * The item becomes a vertical `Stack`: its leading inline run (carrying the
+   * marker) first, then every remaining child rendered through the same
+   * `renderToken` the document level uses, indented to clear the marker.
+   *
+   * Recursing rather than special-casing the types we know about is the point — a
+   * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+   * second paragraph all render exactly as they would at indent 0, and a block
+   * type added later works here for free.
+   *
+   * Only the FIRST child can be the lead. Everything after it becomes a block,
+   * including a second `paragraph`: an item's two paragraphs are two blocks, and
+   * folding them into the lead run would concatenate them into one line with no
+   * separation.
+   *
+   * The lead `RichText` is emitted even when the item has no inline text, because
+   * it carries the marker — an item that is nothing but a formula still shows its
+   * bullet or ordinal.
+   */
+  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 first = children[0];
+    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const leadToken = {
+      ...token,
+      items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
+    };
+    stack.add(this.listItemRichText(leadToken, index, availableWidth, t));
+    const indent = Math.round(t.fontSize);
+    const childMetrics = {
+      marginBefore: 0,
+      marginAfter: 0,
+      indentStart: indent,
+      availableWidth: Math.max(1, availableWidth - indent)
+    };
+    for (let i = leadChildren.length; i < children.length; i++) {
+      const el = this.renderTokenWithMetrics(children[i], childMetrics);
+      if (!el) continue;
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
+      stack.add(wrapper);
+    }
+    return stack;
+  }
   listItemSpans(token, index) {
     const item = token.items[index];
     const num = Number(token.start ?? 1) + index;
@@ -2659,18 +2790,23 @@ var Markdown = class 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;
+      if (isStack !== !this.itemIsInlineOnly(newToken.items[i])) return false;
     }
     const availableWidth = this.activeBlockMetrics?.availableWidth ?? this.maxWidth;
     const t = this.theme;
     const tailEntity = stack.children[lastRetained];
     if (oldToken.items[lastRetained].text !== newToken.items[lastRetained].text) {
+      if (!this.itemIsInlineOnly(newToken.items[lastRetained])) return false;
       if (!("setSpans" in tailEntity)) return false;
       tailEntity.setSpans(
         this.listItemSpans(newToken, lastRetained)
       );
     }
     for (let i = oldToken.items.length; i < newToken.items.length; i++) {
-      stack.add(this.listItemRichText(newToken, i, availableWidth, t));
+      stack.add(
+        this.itemIsInlineOnly(newToken.items[i]) ? this.listItemRichText(newToken, i, availableWidth, t) : this.listItemBlockStack(newToken, i, availableWidth, t)
+      );
     }
     const last = stack.children.at(-1);
     if (last) stack.resizeLastChild(last);
@@ -3285,23 +3421,40 @@ var Markdown = class 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_ui.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) {
@@ -3434,7 +3587,9 @@ var Markdown = class extends import_ui.UIComponent {
         const listToken = token;
         const listStack = new import_ui.Stack({ direction: "vertical", gap: 6 });
         for (let i = 0; i < listToken.items.length; i++) {
-          listStack.add(this.listItemRichText(listToken, i, availableWidth, t));
+          listStack.add(
+            this.itemIsInlineOnly(listToken.items[i]) ? this.listItemRichText(listToken, i, availableWidth, t) : this.listItemBlockStack(listToken, i, availableWidth, t)
+          );
         }
         return listStack;
       }
@@ -3497,6 +3652,7 @@ var Markdown = class extends import_ui.UIComponent {
 0 && (module.exports = {
   CodeBlock,
   Markdown,
+  MathBlock,
   codeAtlas,
   codeAtlasStats,
   isMathJaxReady,

package/dist/index.mjs

@@ -839,6 +839,33 @@ var MarkdownContainer = class extends 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",
@@ -1499,7 +1526,7 @@ function renderInlineToRichText(tokens, fallbackText, font, color, maxWidth, the
     onLinkClick
   });
 }
-var Markdown = class extends UIComponent {
+var Markdown = class _Markdown extends UIComponent {
   content;
   maxWidth;
   theme;
@@ -2548,6 +2575,109 @@ var Markdown = class extends UIComponent {
       onLinkClick: this.onLinkClick
     });
   }
+  /**
+   * Token types a list item's fast path can render as one `RichText`.
+   *
+   * An ALLOWLIST, deliberately, following `markstream-vue`'s
+   * `SIMPLE_INLINE_TYPES` (`SimpleInlineRenderer/simpleInline.ts:15-31`): a block
+   * type is excluded by OMISSION, so a token this renderer has never heard of
+   * falls out of the fast path automatically instead of being silently flattened
+   * to its raw text. A denylist fails the other way, and the failure is quiet —
+   * a formula painted as literal TeX rather than an error — which is why this
+   * defect survived so long.
+   *
+   * Deliberately small, because a list item's DIRECT children are far less varied
+   * than they look. Probed against marked 18.0.7: every inline construct
+   * (`strong`, `em`, `del`, `codespan`, `link`, `image`, `br`, `escape`, `html`,
+   * `inlineMath`) arrives nested one level DEEPER, inside a container whose own
+   * type is `text` — so a tight item's direct child list is `text` and nothing
+   * else. Listing those inline types here would be dead code.
+   *
+   * `space` and `checkbox` are included because both are inert here. A blank line
+   * between an item's paragraph and its block sibling produces a `space`, and
+   * marked unshifts a `checkbox` into every TIGHT GFM task item — the box itself
+   * is drawn from `item.task`/`item.checked` by `listItemSpans`, so the token
+   * renders nothing on its own. Omitting `checkbox` sent every task item down the
+   * block path and moved its marker into a nested entity, which broke four
+   * task-list assertions in `Markdown.test.ts`.
+   */
+  static INLINE_ITEM_TOKENS = /* @__PURE__ */ new Set([
+    "text",
+    "space",
+    "checkbox"
+  ]);
+  /**
+   * Does this item consist purely of inline content?
+   *
+   * True keeps the single-`RichText` fast path, which is not merely an
+   * optimization: `updateStreamedList` reuses `stack.children[i]` by calling
+   * `setSpans` on it, so an item that becomes a `Stack` forfeits streamed reuse
+   * for its entire list. Only pay for a block container when an item holds a
+   * block.
+   *
+   * A lone `paragraph` counts as inline. A LOOSE list re-lexes every item's
+   * inline content from `text` to `paragraph` — adding one blank line anywhere
+   * flips `token.loose` for the whole list — so treating a single paragraph as a
+   * block would drop the fast path for every item of every loose list, the common
+   * shape in real prose, for no rendering benefit.
+   */
+  itemIsInlineOnly(item) {
+    const children = item.tokens;
+    if (!children || children.length === 0) return true;
+    if (children.length === 1 && children[0].type === "paragraph") return true;
+    return children.every((child) => _Markdown.INLINE_ITEM_TOKENS.has(child.type));
+  }
+  /**
+   * Build a list item that holds block-level children.
+   *
+   * The item becomes a vertical `Stack`: its leading inline run (carrying the
+   * marker) first, then every remaining child rendered through the same
+   * `renderToken` the document level uses, indented to clear the marker.
+   *
+   * Recursing rather than special-casing the types we know about is the point — a
+   * display formula, a fence, a table, a blockquote, a nested list, an `hr` and a
+   * second paragraph all render exactly as they would at indent 0, and a block
+   * type added later works here for free.
+   *
+   * Only the FIRST child can be the lead. Everything after it becomes a block,
+   * including a second `paragraph`: an item's two paragraphs are two blocks, and
+   * folding them into the lead run would concatenate them into one line with no
+   * separation.
+   *
+   * The lead `RichText` is emitted even when the item has no inline text, because
+   * it carries the marker — an item that is nothing but a formula still shows its
+   * bullet or ordinal.
+   */
+  listItemBlockStack(token, index, availableWidth, t) {
+    const item = token.items[index];
+    const children = item.tokens ?? [];
+    const stack = new Stack({ direction: "vertical", gap: 4 });
+    const first = children[0];
+    const leadChildren = first && (first.type === "text" || first.type === "paragraph") ? [first] : [];
+    const leadToken = {
+      ...token,
+      items: token.items.map((it, i) => i === index ? { ...it, tokens: leadChildren } : it)
+    };
+    stack.add(this.listItemRichText(leadToken, index, availableWidth, t));
+    const indent = Math.round(t.fontSize);
+    const childMetrics = {
+      marginBefore: 0,
+      marginAfter: 0,
+      indentStart: indent,
+      availableWidth: Math.max(1, availableWidth - indent)
+    };
+    for (let i = leadChildren.length; i < children.length; i++) {
+      const el = this.renderTokenWithMetrics(children[i], childMetrics);
+      if (!el) continue;
+      const wrapper = new MarkdownContainer();
+      el.x = indent;
+      wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
+      stack.add(wrapper);
+    }
+    return stack;
+  }
   listItemSpans(token, index) {
     const item = token.items[index];
     const num = Number(token.start ?? 1) + index;
@@ -2627,18 +2757,23 @@ var Markdown = class extends 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 Stack;
+      if (isStack !== !this.itemIsInlineOnly(newToken.items[i])) return false;
     }
     const availableWidth = this.activeBlockMetrics?.availableWidth ?? this.maxWidth;
     const t = this.theme;
     const tailEntity = stack.children[lastRetained];
     if (oldToken.items[lastRetained].text !== newToken.items[lastRetained].text) {
+      if (!this.itemIsInlineOnly(newToken.items[lastRetained])) return false;
       if (!("setSpans" in tailEntity)) return false;
       tailEntity.setSpans(
         this.listItemSpans(newToken, lastRetained)
       );
     }
     for (let i = oldToken.items.length; i < newToken.items.length; i++) {
-      stack.add(this.listItemRichText(newToken, i, availableWidth, t));
+      stack.add(
+        this.itemIsInlineOnly(newToken.items[i]) ? this.listItemRichText(newToken, i, availableWidth, t) : this.listItemBlockStack(newToken, i, availableWidth, t)
+      );
     }
     const last = stack.children.at(-1);
     if (last) stack.resizeLastChild(last);
@@ -3253,23 +3388,40 @@ var Markdown = class extends UIComponent {
     if (!mathData) return null;
     const intrinsicW = exToPx(mathData.widthEx, t.fontSize);
     const intrinsicH = exToPx(mathData.heightEx, t.fontSize);
-    const mathImg = new 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 RichText(
+      [
+        {
+          text: 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) {
@@ -3402,7 +3554,9 @@ var Markdown = class extends UIComponent {
         const listToken = token;
         const listStack = new Stack({ direction: "vertical", gap: 6 });
         for (let i = 0; i < listToken.items.length; i++) {
-          listStack.add(this.listItemRichText(listToken, i, availableWidth, t));
+          listStack.add(
+            this.itemIsInlineOnly(listToken.items[i]) ? this.listItemRichText(listToken, i, availableWidth, t) : this.listItemBlockStack(listToken, i, availableWidth, t)
+          );
         }
         return listStack;
       }
@@ -3464,6 +3618,7 @@ var Markdown = class extends UIComponent {
 export {
   CodeBlock,
   Markdown,
+  MathBlock,
   codeAtlas,
   codeAtlasStats,
   isMathJaxReady,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "publishConfig": {
     "access": "public"
   },