@canvas-harness/core 0.1.0 → 0.1.2

package/dist/index.js

@@ -633,8 +633,8 @@ var EdgeGeometryCache = class {
    * Caller is responsible for passing the current store-managed version.
    */
   get(edge, version, getNode) {
-    const cached = this.entries.get(edge.id);
-    if (cached && cached.version === version) return cached.geom;
+    const cached2 = this.entries.get(edge.id);
+    if (cached2 && cached2.version === version) return cached2.geom;
     const geom = computeEdgeGeometry(edge, getNode);
     if (geom) this.entries.set(edge.id, { version, geom });
     else this.entries.delete(edge.id);
@@ -846,8 +846,8 @@ var mixHex = (a, b, t) => {
 };
 var darkenCache = /* @__PURE__ */ new Map();
 var darkenHex = (hex) => {
-  const cached = darkenCache.get(hex);
-  if (cached !== void 0) return cached;
+  const cached2 = darkenCache.get(hex);
+  if (cached2 !== void 0) return cached2;
   const result = mixHex(hex, "#000000", TONE_BLEND);
   darkenCache.set(hex, result);
   return result;
@@ -1614,7 +1614,7 @@ var buildPath = (type, x, y, w, h, radius) => {
 };
 
 // src/text/tokens.ts
-var INLINE_PATTERN = /(\*\*[^*]+\*\*|==[^=\s](?:[^=]*?[^=\s])?==|`[^`]+`|\*[^*]+\*|__[^_]+__|~~[^~]+~~|_[^_]+_|\[[^\]]+\]\([^)]+\))/g;
+var INLINE_PATTERN = /(\$[^$\n]+?\$|\*\*[^*]+\*\*|==[^=\s](?:[^=]*?[^=\s])?==|`[^`]+`|\*[^*]+\*|__[^_]+__|~~[^~]+~~|_[^_]+_|\[[^\]]+\]\([^)]+\))/g;
 var HR_LINE_PATTERN = /^[ \t]*---[ \t]*$/;
 var DOUBLE_HR_LINE_PATTERN = /^[ \t]*===[ \t]*$/;
 var transformSymbols = (value) => value.replace(/<=>|<->|<-|->|\[\]|\[[vx]\]/gi, (match) => {
@@ -1652,6 +1652,8 @@ var tokenizeInline = (segment) => {
       tokens.push({ type: "link", content: transformSymbols(match.slice(1, splitIndex)) });
     } else if (match.startsWith("`") && match.endsWith("`")) {
       tokens.push({ type: "code", content: match.slice(1, -1) });
+    } else if (match.startsWith("$") && match.endsWith("$")) {
+      tokens.push({ type: "math", content: match.slice(1, -1) });
     } else {
       tokens.push({ type: "text", content: transformSymbols(match) });
     }
@@ -1740,6 +1742,225 @@ var DEFAULT_HIGHLIGHT_COLOR_DARK = "#6b5a23";
 var LINK_COLOR = "#2563eb";
 var CODE_BG_COLOR = "rgba(148, 163, 184, 0.18)";
 
+// src/text/math/loader.ts
+var cached = null;
+var loadPromise2 = null;
+var loadFailed = false;
+var readyCallbacks2 = /* @__PURE__ */ new Set();
+var getMathJax = () => {
+  if (cached) return cached;
+  if (loadFailed) return null;
+  if (!loadPromise2) {
+    loadPromise2 = loadMathJax().then((instance) => {
+      if (instance) {
+        cached = instance;
+        for (const cb of readyCallbacks2) cb();
+      } else {
+        loadFailed = true;
+      }
+      readyCallbacks2.clear();
+      return cached;
+    }).catch((err) => {
+      console.warn("[math] failed to load MathJax:", err);
+      loadFailed = true;
+      readyCallbacks2.clear();
+      return null;
+    });
+  }
+  return null;
+};
+var onMathJaxReady = (cb) => {
+  if (cached) return;
+  if (loadFailed) return;
+  readyCallbacks2.add(cb);
+};
+var loadMathJax = async () => {
+  if (typeof window === "undefined") return null;
+  const winAny = window;
+  winAny.MathJax = {
+    ...winAny.MathJax ?? {},
+    startup: { typeset: false },
+    options: {
+      enableMenu: false,
+      enableEnrichment: false,
+      enableSpeech: false,
+      enableComplexity: false,
+      sre: { speech: "none" }
+    },
+    // `fontCache: 'none'` inlines every glyph as a raw <path>
+    // (slightly bigger SVG, no <use> references). Required for SVGs
+    // we extract to a Blob URL and rasterize via <img> — `<use>`
+    // refs to <defs> elsewhere in the page wouldn't resolve.
+    // `linebreaks: { inline: false }` keeps the whole formula in one
+    // <svg> element (v4 defaults to true for long inline math).
+    svg: {
+      scale: 1,
+      fontCache: "none",
+      linebreaks: { inline: false }
+    }
+  };
+  const VENDOR_URL = "https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js";
+  await new Promise((resolve, reject) => {
+    const existing = document.querySelector(
+      `script[src="${VENDOR_URL}"]`
+    );
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener("error", () => reject(new Error("MathJax CDN load failed")), {
+        once: true
+      });
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = VENDOR_URL;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("MathJax CDN load failed"));
+    document.head.appendChild(script);
+  });
+  const mj = winAny.MathJax;
+  if (!mj) throw new Error("MathJax did not install on window after import");
+  if (typeof mj.tex2svgPromise !== "function") {
+    throw new Error("MathJax loaded but tex2svgPromise is missing \u2014 wrong bundle?");
+  }
+  await mj.startup?.promise;
+  return mj;
+};
+
+// src/text/math/cache.ts
+var normalizeSize = (px) => Math.max(8, Math.round(px));
+var cache3 = /* @__PURE__ */ new Map();
+var compileQueue = [];
+var compileScheduled = false;
+var mathEpoch = 0;
+var epochSubscribers = /* @__PURE__ */ new Set();
+var getMathEpoch = () => mathEpoch;
+var subscribeMathEpoch = (cb) => {
+  epochSubscribers.add(cb);
+  return () => {
+    epochSubscribers.delete(cb);
+  };
+};
+var bumpMathEpoch = () => {
+  mathEpoch += 1;
+  for (const cb of epochSubscribers) cb();
+};
+var getMathBitmap = (source, color, sizePx) => {
+  const size = normalizeSize(sizePx);
+  const key = `${size}:${color}:${source}`;
+  const existing = cache3.get(key);
+  if (existing) {
+    if (existing.state === "ready") return existing.bitmap;
+    return null;
+  }
+  cache3.set(key, { state: "pending" });
+  compileQueue.push({ key, source, color, sizePx: size });
+  scheduleCompile();
+  return null;
+};
+var scheduleCompile = () => {
+  if (compileScheduled) return;
+  compileScheduled = true;
+  if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") {
+    void drainQueue();
+    return;
+  }
+  requestAnimationFrame(() => {
+    void drainQueue();
+  });
+};
+var drainQueue = async () => {
+  compileScheduled = false;
+  if (compileQueue.length === 0) return;
+  const mj = getMathJax();
+  if (!mj) {
+    onMathJaxReady(() => scheduleCompile());
+    return;
+  }
+  const FRAME_BUDGET_MS = 4;
+  const start = performance.now();
+  let didResolve = false;
+  while (compileQueue.length > 0 && performance.now() - start < FRAME_BUDGET_MS) {
+    const item = compileQueue.shift();
+    if (cache3.get(item.key)?.state !== "pending") continue;
+    try {
+      const bitmap = await compileOne(mj, item.source, item.color, item.sizePx);
+      cache3.set(item.key, { state: "ready", bitmap });
+      didResolve = true;
+    } catch (err) {
+      cache3.set(item.key, { state: "error", err });
+      console.warn(`[math] failed to compile "${item.source}":`, err);
+    }
+  }
+  if (didResolve) bumpMathEpoch();
+  if (compileQueue.length > 0) scheduleCompile();
+};
+var compileOne = async (mj, source, color, sizePx) => {
+  const svgElement = await mj.tex2svgPromise(source, { display: false, em: sizePx, ex: sizePx / 2 });
+  let markup = mj.startup.adaptor.serializeXML ? mj.startup.adaptor.serializeXML(svgElement) : mj.startup.adaptor.outerHTML(svgElement);
+  const svgMatch = /<svg[\s\S]*?<\/svg>/.exec(markup);
+  if (svgMatch) markup = svgMatch[0];
+  markup = markup.replace(/\sdata-semantic-[a-z0-9-]+="[^"]*"/g, "").replace(/\sdata-speech-[a-z0-9-]+="[^"]*"/g, "").replace(/\sdata-mml-node="[^"]*"/g, "").replace(/\sdata-latex="[^"]*"/g, "").replace(/\sdata-braille[a-z0-9-]*="[^"]*"/g, "").replace(/\saria-[a-z0-9-]+="[^"]*"/g, "").replace(/\srole="[^"]*"/g, "").replace(/\sfocusable="[^"]*"/g, "").replace(/\stabindex="[^"]*"/g, "").replace(/\shas-speech="[^"]*"/g, "");
+  if (!markup.includes('xmlns="http://www.w3.org/2000/svg"')) {
+    markup = markup.replace(/^<svg\b/, '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  markup = markup.replace(/currentColor/gi, color);
+  const dims = parseSvgDims(markup, sizePx);
+  const blob = new Blob([markup], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  try {
+    let img;
+    try {
+      img = await loadImage(url);
+    } catch (e) {
+      console.warn(`[math] SVG failed to load for "${source}":
+${markup}`);
+      throw e;
+    }
+    const rasterW = Math.max(1, Math.ceil(dims.width * 2));
+    const rasterH = Math.max(1, Math.ceil(dims.height * 2));
+    const bitmap = await createImageBitmap(img, {
+      resizeWidth: rasterW,
+      resizeHeight: rasterH,
+      resizeQuality: "high"
+    });
+    return {
+      bitmap,
+      width: dims.width,
+      height: dims.height,
+      baselineOffset: dims.baselineOffset
+    };
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+};
+var loadImage = (src) => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.onload = () => resolve(img);
+  img.onerror = (e) => reject(e);
+  img.src = src;
+});
+var parseSvgDims = (markup, sizePx) => {
+  const exToPx = sizePx / 2;
+  const widthMatch = /<svg[^>]*\bwidth="([0-9.]+)ex"/.exec(markup);
+  const heightMatch = /<svg[^>]*\bheight="([0-9.]+)ex"/.exec(markup);
+  const vAlignMatch = /vertical-align:\s*(-?[0-9.]+)ex/.exec(markup);
+  const widthEx = widthMatch ? Number.parseFloat(widthMatch[1]) : 2;
+  const heightEx = heightMatch ? Number.parseFloat(heightMatch[1]) : 2;
+  const vAlignEx = vAlignMatch ? Number.parseFloat(vAlignMatch[1]) : 0;
+  const width = widthEx * exToPx;
+  const height = heightEx * exToPx;
+  const descent = Math.abs(vAlignEx) * exToPx;
+  const baselineOffset = height - descent;
+  return { width, height, baselineOffset };
+};
+var clearMathCache = () => {
+  cache3.clear();
+  compileQueue.length = 0;
+  compileScheduled = false;
+};
+var getMathCacheSize = () => cache3.size;
+
 // src/text/measure.ts
 var MAX_WIDTH_CACHE_SIZE = 5e3;
 var measureCanvas = typeof document !== "undefined" ? document.createElement("canvas") : null;
@@ -1753,10 +1974,16 @@ var getCanvasFont = (opts) => {
 };
 var measureText = (opts) => {
   if (!opts.text) return 0;
+  if (opts.type === "math") {
+    const fontSizePx = FONT_SIZE_MAP[opts.fontSize];
+    const bitmap = getMathBitmap(opts.text, DEFAULT_TEXT_COLOR, fontSizePx);
+    if (bitmap) return bitmap.width;
+    return Math.max(8, opts.text.length * fontSizePx * 0.55 + fontSizePx);
+  }
   const font = getCanvasFont(opts);
   const key = `${font}|${opts.text}`;
-  const cached = widthCache.get(key);
-  if (cached !== void 0) return cached;
+  const cached2 = widthCache.get(key);
+  if (cached2 !== void 0) return cached2;
   if (!measureCtx) {
     return opts.text.length * FONT_SIZE_MAP[opts.fontSize] * 0.55;
   }
@@ -1898,6 +2125,8 @@ var layoutTokens = (tokens, opts) => {
     currentRuns.push({ text: chunk, type });
     cursorX += chunkWidth;
   };
+  const fontSizePx = FONT_SIZE_MAP[opts.fontSize];
+  const mathColor = opts.textColor || DEFAULT_TEXT_COLOR;
   for (const token of tokens) {
     if (token.type === "code-block") {
       pushCodeBlock(token.content);
@@ -1915,6 +2144,18 @@ var layoutTokens = (tokens, opts) => {
       pushRule(true);
       continue;
     }
+    if (token.type === "math") {
+      const bitmap = getMathBitmap(token.content, mathColor, fontSizePx);
+      const width = bitmap ? bitmap.width : (
+        // Placeholder: roughly proportional to source length so wrap
+        // doesn't dramatically shift on resolve. Capped at maxWidth.
+        Math.min(maxWidth, token.content.length * fontSizePx * 0.55 + fontSizePx)
+      );
+      if (cursorX > 0 && cursorX + width > maxWidth) pushLine();
+      currentRuns.push({ text: token.content, type: "math" });
+      cursorX += width;
+      continue;
+    }
     for (const chunk of splitChunks(token.content)) pushChunk(chunk, token.type);
   }
   if (currentRuns.length > 0 || lines.length === 0) {
@@ -2081,7 +2322,8 @@ var drawTextToCanvas = (ctx, opts) => {
     width: opts.width,
     fontFamily: opts.fontFamily,
     fontSize: opts.fontSize,
-    textStyle: opts.textStyle
+    textStyle: opts.textStyle,
+    textColor: opts.textColor
   });
   ctx.textBaseline = "alphabetic";
   ctx.fillStyle = opts.textColor || DEFAULT_TEXT_COLOR;
@@ -2189,6 +2431,24 @@ var drawTextToCanvas = (ctx, opts) => {
         fontSize: opts.fontSize,
         textStyle: opts.textStyle
       });
+      if (run.type === "math") {
+        const mathColor = opts.textColor || DEFAULT_TEXT_COLOR;
+        const bitmap = getMathBitmap(run.text, mathColor, fontSizePx);
+        if (bitmap) {
+          ctx.drawImage(bitmap.bitmap, x, y - bitmap.baselineOffset, runWidth, bitmap.height);
+        } else {
+          ctx.save();
+          ctx.fillStyle = "rgba(148, 163, 184, 0.18)";
+          ctx.fillRect(x, y - fontSizePx + 2, runWidth, fontSizePx);
+          ctx.fillStyle = "#94a3b8";
+          ctx.font = `italic ${Math.max(8, fontSizePx * 0.75)}px system-ui, sans-serif`;
+          ctx.textBaseline = "alphabetic";
+          ctx.fillText("\u2026", x + runWidth / 2 - 4, y - 2);
+          ctx.restore();
+        }
+        x += runWidth;
+        continue;
+      }
       if (run.type === "highlight") {
         ctx.save();
         ctx.fillStyle = opts.highlightColor || DEFAULT_HIGHLIGHT_COLOR;
@@ -2227,6 +2487,8 @@ subscribeFontEpoch(() => {
   renderCache.clear();
   textHashCache.clear();
 });
+subscribeMathEpoch(() => {
+});
 var getOrRenderTextBitmap = (req) => {
   const text = req.text;
   if (!text || !text.trim()) return null;
@@ -2235,10 +2497,10 @@ var getOrRenderTextBitmap = (req) => {
   const renderScale = resolveRenderScale(1, quantZoom, req.isMoving);
   const epoch = getFontEpoch();
   const key = makeKey(req, quantZoom, quantDpr, renderScale, epoch);
-  const cached = renderCache.get(key);
-  if (cached) {
-    cached.lastUsed = Date.now();
-    return { canvas: cached.canvas, width: cached.width, height: cached.height };
+  const cached2 = renderCache.get(key);
+  if (cached2) {
+    cached2.lastUsed = Date.now();
+    return { canvas: cached2.canvas, width: cached2.width, height: cached2.height };
   }
   const entry = drawIntoNewCanvas(req, quantDpr, renderScale);
   if (!entry) return null;
@@ -2247,7 +2509,8 @@ var getOrRenderTextBitmap = (req) => {
   return { canvas: entry.canvas, width: entry.width, height: entry.height };
 };
 var makeKey = (req, zoom, dpr, scale, epoch) => {
-  return `${epoch}:${cachedTextHash(req.text)}:${req.width}:${req.height}:${zoom}:${dpr}:${scale}:${req.align}:${req.fontFamily}:${req.fontSize}:${req.textStyle}:${req.textColor}:${req.highlightColor}`;
+  const mathSuffix = req.text.includes("$") ? `:m${getMathEpoch()}` : "";
+  return `${epoch}:${cachedTextHash(req.text)}:${req.width}:${req.height}:${zoom}:${dpr}:${scale}:${req.align}:${req.fontFamily}:${req.fontSize}:${req.textStyle}:${req.textColor}:${req.highlightColor}${mathSuffix}`;
 };
 var cachedTextHash = (value) => {
   const hit = textHashCache.get(value);
@@ -2303,12 +2566,12 @@ var clearTextBitmapCache = () => {
 };
 var getTextBitmapCacheSize = () => renderCache.size;
 var FREEHAND_CACHE_MAX = 500;
-var cache3 = /* @__PURE__ */ new Map();
+var cache4 = /* @__PURE__ */ new Map();
 var remember = (key, path) => {
-  cache3.set(key, path);
-  if (cache3.size > FREEHAND_CACHE_MAX) {
-    const oldest = cache3.keys().next().value;
-    if (oldest !== void 0) cache3.delete(oldest);
+  cache4.set(key, path);
+  if (cache4.size > FREEHAND_CACHE_MAX) {
+    const oldest = cache4.keys().next().value;
+    if (oldest !== void 0) cache4.delete(oldest);
   }
 };
 var signaturePoints = (samples) => {
@@ -2360,10 +2623,10 @@ var outlineToPath2D = (ring) => {
 var getOrBuildFreehandPath = (samples, strokeWidth, seed) => {
   if (samples.length < 2) return null;
   const cacheKey = `${seed}|${strokeWidth.toFixed(2)}|${signaturePoints(samples)}`;
-  const hit = cache3.get(cacheKey);
+  const hit = cache4.get(cacheKey);
   if (hit) {
-    cache3.delete(cacheKey);
-    cache3.set(cacheKey, hit);
+    cache4.delete(cacheKey);
+    cache4.set(cacheKey, hit);
     return hit;
   }
   const pts = buildPressurePoints(samples);
@@ -4219,11 +4482,11 @@ var paintPlaceholder = (ctx, w, h, label) => {
     ctx.fillText(label, w / 2, h / 2);
   }
 };
-var paintImageNode = (ctx, node, cache4, theme) => {
+var paintImageNode = (ctx, node, cache5, theme) => {
   if (node.w <= 0 || node.h <= 0) return;
   const data = node.data;
   if (!data?.src) return;
-  const bitmap = cache4.getImage(data.src);
+  const bitmap = cache5.getImage(data.src);
   const opacity = resolveOpacity(node.style, theme);
   const needsScope = opacity !== 1;
   if (needsScope) {
@@ -4237,13 +4500,13 @@ var paintImageNode = (ctx, node, cache4, theme) => {
   }
   if (needsScope) ctx.restore();
 };
-var paintIconNode = (ctx, node, cache4, scale, theme) => {
+var paintIconNode = (ctx, node, cache5, scale, theme) => {
   if (node.w <= 0 || node.h <= 0) return;
   const data = node.data;
   if (!data?.src) return;
   const sizePx = Math.max(node.w, node.h) * scale;
   const color = node.style?.iconColor;
-  const bitmap = cache4.getIcon(data.src, color, sizePx);
+  const bitmap = cache5.getIcon(data.src, color, sizePx);
   const opacity = resolveOpacity(node.style, theme);
   const needsScope = opacity !== 1;
   if (needsScope) {
@@ -4606,16 +4869,18 @@ var applyCameraTransform = (surface, camera) => {
 };
 var worldViewport = (surface, camera) => viewportWorldRect(camera, surface.cssWidth, surface.cssHeight);
 var drawWithNodeTransform = (ctx, node, fn) => {
-  ctx.save();
   if (node.angle === 0) {
     ctx.translate(node.x, node.y);
-  } else {
-    const cx = node.x + node.w / 2;
-    const cy = node.y + node.h / 2;
-    ctx.translate(cx, cy);
-    ctx.rotate(node.angle);
-    ctx.translate(-node.w / 2, -node.h / 2);
+    fn();
+    ctx.translate(-node.x, -node.y);
+    return;
   }
+  ctx.save();
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  ctx.translate(cx, cy);
+  ctx.rotate(node.angle);
+  ctx.translate(-node.w / 2, -node.h / 2);
   fn();
   ctx.restore();
 };
@@ -4637,6 +4902,12 @@ var createRenderer = (opts) => {
   let interactiveDirty = false;
   let overlaySet = /* @__PURE__ */ new Set();
   let lastDrawn = 0;
+  let sortedNodeIdsCache = null;
+  let sortedEdgeIdsCache = null;
+  const invalidateSortedCaches = () => {
+    sortedNodeIdsCache = null;
+    sortedEdgeIdsCache = null;
+  };
   const requestRepaint = () => {
     staticDirty = true;
     loop.requestFrame();
@@ -4766,7 +5037,9 @@ var createRenderer = (opts) => {
       }
       if (def.renderCanvas) {
         drawWithNodeTransform(staticSurface.ctx, node, () => {
+          staticSurface.ctx.save();
           def.renderCanvas(staticSurface.ctx, node, renderEnv);
+          staticSurface.ctx.restore();
         });
         drawn++;
       }
@@ -4799,11 +5072,19 @@ var createRenderer = (opts) => {
       }
     }
     if (def.drawPlaceholder) {
-      drawWithNodeTransform(ctx, node, () => def.drawPlaceholder(ctx, node, env));
+      drawWithNodeTransform(ctx, node, () => {
+        ctx.save();
+        def.drawPlaceholder(ctx, node, env);
+        ctx.restore();
+      });
       return true;
     }
     if (def.renderCanvas) {
-      drawWithNodeTransform(ctx, node, () => def.renderCanvas(ctx, node, env));
+      drawWithNodeTransform(ctx, node, () => {
+        ctx.save();
+        def.renderCanvas(ctx, node, env);
+        ctx.restore();
+      });
       return true;
     }
     return false;
@@ -4870,14 +5151,23 @@ var createRenderer = (opts) => {
       isMoving: isMoving2
     });
   };
+  const getSortedEdgeIds = () => {
+    if (sortedEdgeIdsCache) return sortedEdgeIdsCache;
+    const all = store.getAllEdges();
+    sortedEdgeIdsCache = all.slice().sort((a, b) => a.z - b.z || (a.id < b.id ? -1 : 1)).map((e) => e.id);
+    return sortedEdgeIdsCache;
+  };
   const visibleEdges = (viewport) => {
     const ids = store.querySpatial({ rect: viewport }).edges;
+    if (ids.length === 0) return [];
+    const visibleSet = new Set(ids);
+    const sorted = getSortedEdgeIds();
     const result = [];
-    for (const id of ids) {
+    for (const id of sorted) {
+      if (!visibleSet.has(id)) continue;
       const e = store.getEdge(id);
       if (e) result.push(e);
     }
-    result.sort((a, b) => a.z - b.z || (a.id < b.id ? -1 : 1));
     return result;
   };
   const paintInteractive = () => {
@@ -5025,21 +5315,31 @@ var createRenderer = (opts) => {
     }
     return m;
   };
+  const getSortedNodeIds = () => {
+    if (sortedNodeIdsCache) return sortedNodeIdsCache;
+    const all = store.getAllNodes();
+    sortedNodeIdsCache = all.slice().sort((a, b) => a.z - b.z || (a.id < b.id ? -1 : 1)).map((n) => n.id);
+    return sortedNodeIdsCache;
+  };
   const visibleNodes = (camera, viewport) => {
     const ids = store.querySpatial({ rect: viewport }).nodes;
+    if (ids.length === 0) return [];
+    const visibleSet = new Set(ids);
+    const sorted = getSortedNodeIds();
     const result = [];
     const minWorldSize = MIN_ON_SCREEN_SIZE_PX / camera.z;
-    for (const id of ids) {
+    for (const id of sorted) {
+      if (!visibleSet.has(id)) continue;
       const n = store.getNode(id);
       if (!n) continue;
       if (n.w < minWorldSize && n.h < minWorldSize) continue;
       if (intersectsViewport(n, viewport)) result.push(n);
     }
-    result.sort((a, b) => a.z - b.z || (a.id < b.id ? -1 : 1));
     return result;
   };
   const loop = createFrameLoop({ draw: drawFrame });
   const onStoreChange = () => {
+    invalidateSortedCaches();
     staticDirty = true;
     interactiveDirty = true;
     loop.requestFrame();
@@ -5068,6 +5368,10 @@ var createRenderer = (opts) => {
     staticDirty = true;
     loop.requestFrame();
   });
+  const unsubMathEpoch = subscribeMathEpoch(() => {
+    staticDirty = true;
+    loop.requestFrame();
+  });
   return {
     start() {
       loop.start();
@@ -5117,6 +5421,7 @@ var createRenderer = (opts) => {
       unsubSelection();
       unsubInteraction();
       unsubFontEpoch();
+      unsubMathEpoch();
       assetCache.dispose();
     }
   };
@@ -6149,6 +6454,6 @@ var installedExtensions = (store) => {
 // src/index.ts
 var VERSION = "0.0.0";
 
-export { BEZIER_SEGMENTS, CODE_BG_COLOR, CODE_BLOCK_MARGIN_Y, CODE_BLOCK_PADDING_X, CONTENT_HEIGHT_BUFFER, CONTENT_PADDING, DEFAULT_BACKGROUND, DEFAULT_CAMERA, DEFAULT_HIGHLIGHT_COLOR, DEFAULT_HIGHLIGHT_COLOR_DARK, DEFAULT_MINIMAP_MAX_NODES, DEFAULT_STYLE, DEFAULT_TEXT_COLOR, EDGE_HANDLE_SLOP_PX, EDGE_HIT_SLOP_PX, EdgeGeometryCache, FONT_FAMILY_MAP, FONT_SIZE_MAP, LINE_HEIGHT_MAP, LINK_COLOR, MAX_IMAGE_BYTES, MAX_SVG_BYTES, MAX_ZOOM, MIN_ZOOM, PALM_REJECTION_GRACE_MS, RESIZE_HANDLES, RESIZE_HANDLE_SIZE_PX, ROTATE_HANDLE_OFFSET_PX, ROTATE_HANDLE_RADIUS_PX, SCHEMA_VERSION, UniformGrid, VERSION, applyCameraTransform, applySvgColor, arrowheadLength, asBatchId, asClientId, asEdgeId, asGroupId, asNodeId, attachSync, autoRouteControls, blobToDataUri, clampEffectiveScale, clampZoom, clearMeasureCache, clearSurface, clearTextBitmapCache, clipSamples, computeAutoFitHeight, computeEdgeGeometry, copy, createCanvasStore, createDefaultTextareaEditor, createFrameLoop, createPalmRejectionState, createRenderer, cubicBezier, cubicBezierTangent, cut, defineExtension, defineNode, deserializeClipboard, detectConflicts, downscaleImageBlob, drawArrowhead, drawEdge, drawMinimapViewport, drawShape, drawTextToCanvas, drawWithNodeTransform, edgeAABBFromSamples, edgeLabelBoundsWorld, emptyPresenceState, estimateMarkdownContentHeight, exportSelection, exportSelectionSvg, exportViewport, extractSvgDimensions, fromSerialized, fullVisibleClipResult, getCanvasFont, getContentHeight, getContext, getDpr, getFontEpoch, getMarkdownLineHeightPx, getOrRenderTextBitmap, getPointAndTangentAtArcLength, getTextBitmapCacheSize, handleEnter, handleWorldPositions, hitTestAny, hitTestEdge, hitTestHandles, hitTestPoint, hitTestRotateHandle, idleInteractionState, inflateRect, insertLink, installExtension, installedExtensions, inverseBatch, inverseOp, isAttached, isCanvasHarnessClipboard, isDrawablePrimitive, isMoving, isNodeRemoteEditing, layoutTokens, makeIdGenerator, marqueeNodes, measureText, midpointToCubicControls, minimapScreenToWorld, nodeAABB, nodeIntersectsRect, nodeLocalToWorld, notePenActive, notePenInactive, opSchemas, opSchemasAsAnthropicTools, paintBackground, panByScreen, paste, pointInNode, projectEndToWorld, projectToNodeBoundary, quantizeDpr, quantizeZoom, randomClientId, rectContainsPoint, rectFromPoints, rectsIntersect, registerMigrator, renderMinimapContent, resolveColor, resolveOpacity, resolveRenderScale, resolveStrokeWidth, rotateHandleWorldPosition, rotateVecByAngle, sampleBezier, sampleSelfLoop, samplesFor, sanitizeSvg, sceneBounds, screenToWorld, selfLoopGeometry, serializeSelection, setupSurface, shouldAutoFit, shouldRejectTouch, sideNormalLocal, sideOf, sizeSurface, storeToJSON, subscribeFontEpoch, tangentAtArcLength, toImageBlob, toSerialized, toggleBold, toggleCode, toggleItalic, toggleStrike, toggleUnderline, tokenize, unionRects, validateImageInput, validateSvgMarkup, viewportWorldRect, withAutoFitHeight, worldToNodeLocal, worldToScreen, worldViewport, worldViewportFromCamera, zoomAtScreenPoint };
+export { BEZIER_SEGMENTS, CODE_BG_COLOR, CODE_BLOCK_MARGIN_Y, CODE_BLOCK_PADDING_X, CONTENT_HEIGHT_BUFFER, CONTENT_PADDING, DEFAULT_BACKGROUND, DEFAULT_CAMERA, DEFAULT_HIGHLIGHT_COLOR, DEFAULT_HIGHLIGHT_COLOR_DARK, DEFAULT_MINIMAP_MAX_NODES, DEFAULT_STYLE, DEFAULT_TEXT_COLOR, EDGE_HANDLE_SLOP_PX, EDGE_HIT_SLOP_PX, EdgeGeometryCache, FONT_FAMILY_MAP, FONT_SIZE_MAP, LINE_HEIGHT_MAP, LINK_COLOR, MAX_IMAGE_BYTES, MAX_SVG_BYTES, MAX_ZOOM, MIN_ZOOM, PALM_REJECTION_GRACE_MS, RESIZE_HANDLES, RESIZE_HANDLE_SIZE_PX, ROTATE_HANDLE_OFFSET_PX, ROTATE_HANDLE_RADIUS_PX, SCHEMA_VERSION, UniformGrid, VERSION, applyCameraTransform, applySvgColor, arrowheadLength, asBatchId, asClientId, asEdgeId, asGroupId, asNodeId, attachSync, autoRouteControls, blobToDataUri, clampEffectiveScale, clampZoom, clearMathCache, clearMeasureCache, clearSurface, clearTextBitmapCache, clipSamples, computeAutoFitHeight, computeEdgeGeometry, copy, createCanvasStore, createDefaultTextareaEditor, createFrameLoop, createPalmRejectionState, createRenderer, cubicBezier, cubicBezierTangent, cut, defineExtension, defineNode, deserializeClipboard, detectConflicts, downscaleImageBlob, drawArrowhead, drawEdge, drawMinimapViewport, drawShape, drawTextToCanvas, drawWithNodeTransform, edgeAABBFromSamples, edgeLabelBoundsWorld, emptyPresenceState, estimateMarkdownContentHeight, exportSelection, exportSelectionSvg, exportViewport, extractSvgDimensions, fromSerialized, fullVisibleClipResult, getCanvasFont, getContentHeight, getContext, getDpr, getFontEpoch, getMarkdownLineHeightPx, getMathBitmap, getMathCacheSize, getMathEpoch, getMathJax, getOrRenderTextBitmap, getPointAndTangentAtArcLength, getTextBitmapCacheSize, handleEnter, handleWorldPositions, hitTestAny, hitTestEdge, hitTestHandles, hitTestPoint, hitTestRotateHandle, idleInteractionState, inflateRect, insertLink, installExtension, installedExtensions, inverseBatch, inverseOp, isAttached, isCanvasHarnessClipboard, isDrawablePrimitive, isMoving, isNodeRemoteEditing, layoutTokens, makeIdGenerator, marqueeNodes, measureText, midpointToCubicControls, minimapScreenToWorld, nodeAABB, nodeIntersectsRect, nodeLocalToWorld, notePenActive, notePenInactive, onMathJaxReady, opSchemas, opSchemasAsAnthropicTools, paintBackground, panByScreen, paste, pointInNode, projectEndToWorld, projectToNodeBoundary, quantizeDpr, quantizeZoom, randomClientId, rectContainsPoint, rectFromPoints, rectsIntersect, registerMigrator, renderMinimapContent, resolveColor, resolveOpacity, resolveRenderScale, resolveStrokeWidth, rotateHandleWorldPosition, rotateVecByAngle, sampleBezier, sampleSelfLoop, samplesFor, sanitizeSvg, sceneBounds, screenToWorld, selfLoopGeometry, serializeSelection, setupSurface, shouldAutoFit, shouldRejectTouch, sideNormalLocal, sideOf, sizeSurface, storeToJSON, subscribeFontEpoch, subscribeMathEpoch, tangentAtArcLength, toImageBlob, toSerialized, toggleBold, toggleCode, toggleItalic, toggleStrike, toggleUnderline, tokenize, unionRects, validateImageInput, validateSvgMarkup, viewportWorldRect, withAutoFitHeight, worldToNodeLocal, worldToScreen, worldViewport, worldViewportFromCamera, zoomAtScreenPoint };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map