@canvas-harness/core 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -635,8 +635,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);
@@ -848,8 +848,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;
@@ -1616,7 +1616,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) => {
@@ -1654,6 +1654,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) });
     }
@@ -1742,6 +1744,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;
@@ -1755,10 +1976,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;
   }
@@ -1900,6 +2127,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);
@@ -1917,6 +2146,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) {
@@ -2083,7 +2324,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;
@@ -2191,6 +2433,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;
@@ -2229,6 +2489,8 @@ subscribeFontEpoch(() => {
   renderCache.clear();
   textHashCache.clear();
 });
+subscribeMathEpoch(() => {
+});
 var getOrRenderTextBitmap = (req) => {
   const text = req.text;
   if (!text || !text.trim()) return null;
@@ -2237,10 +2499,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;
@@ -2249,7 +2511,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);
@@ -2305,12 +2568,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) => {
@@ -2362,10 +2625,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);
@@ -4221,11 +4484,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) {
@@ -4239,13 +4502,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) {
@@ -5070,6 +5333,10 @@ var createRenderer = (opts) => {
     staticDirty = true;
     loop.requestFrame();
   });
+  const unsubMathEpoch = subscribeMathEpoch(() => {
+    staticDirty = true;
+    loop.requestFrame();
+  });
   return {
     start() {
       loop.start();
@@ -5119,6 +5386,7 @@ var createRenderer = (opts) => {
       unsubSelection();
       unsubInteraction();
       unsubFontEpoch();
+      unsubMathEpoch();
       assetCache.dispose();
     }
   };
@@ -6196,6 +6464,7 @@ exports.autoRouteControls = autoRouteControls;
 exports.blobToDataUri = blobToDataUri;
 exports.clampEffectiveScale = clampEffectiveScale;
 exports.clampZoom = clampZoom;
+exports.clearMathCache = clearMathCache;
 exports.clearMeasureCache = clearMeasureCache;
 exports.clearSurface = clearSurface;
 exports.clearTextBitmapCache = clearTextBitmapCache;
@@ -6238,6 +6507,10 @@ exports.getContext = getContext;
 exports.getDpr = getDpr;
 exports.getFontEpoch = getFontEpoch;
 exports.getMarkdownLineHeightPx = getMarkdownLineHeightPx;
+exports.getMathBitmap = getMathBitmap;
+exports.getMathCacheSize = getMathCacheSize;
+exports.getMathEpoch = getMathEpoch;
+exports.getMathJax = getMathJax;
 exports.getOrRenderTextBitmap = getOrRenderTextBitmap;
 exports.getPointAndTangentAtArcLength = getPointAndTangentAtArcLength;
 exports.getTextBitmapCacheSize = getTextBitmapCacheSize;
@@ -6271,6 +6544,7 @@ exports.nodeIntersectsRect = nodeIntersectsRect;
 exports.nodeLocalToWorld = nodeLocalToWorld;
 exports.notePenActive = notePenActive;
 exports.notePenInactive = notePenInactive;
+exports.onMathJaxReady = onMathJaxReady;
 exports.opSchemas = opSchemas;
 exports.opSchemasAsAnthropicTools = opSchemasAsAnthropicTools;
 exports.paintBackground = paintBackground;
@@ -6309,6 +6583,7 @@ exports.sideOf = sideOf;
 exports.sizeSurface = sizeSurface;
 exports.storeToJSON = storeToJSON;
 exports.subscribeFontEpoch = subscribeFontEpoch;
+exports.subscribeMathEpoch = subscribeMathEpoch;
 exports.tangentAtArcLength = tangentAtArcLength;
 exports.toImageBlob = toImageBlob;
 exports.toSerialized = toSerialized;