@canvas-harness/core 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -824,17 +824,32 @@ var arrowheadLength = (kind, strokeWidth) => {
   return ARROW_BASE_LENGTH * scale;
 };
 
-// src/render/rough/constants.ts
-var ROUGH_MIN_ZOOM = 0.4;
-var ROUGH_MAX_NODES = 800;
-var ROUGH_MAX_MOVING_NODES = 5;
-var ROUGH_DEFAULTS = {
-  bowing: 2,
-  disableMultiStroke: true,
-  preserveVertices: true
+// src/render/rough/cache.ts
+var cache = /* @__PURE__ */ new Map();
+var MAX_ENTRIES = 1e3;
+var getOrBuildDrawable = (key, build) => {
+  const hit = cache.get(key);
+  if (hit !== void 0) {
+    cache.delete(key);
+    cache.set(key, hit);
+    return hit;
+  }
+  const drawable = build();
+  if (cache.size >= MAX_ENTRIES) {
+    const first = cache.keys().next().value;
+    if (first !== void 0) cache.delete(first);
+  }
+  cache.set(key, drawable);
+  return drawable;
+};
+var seedFromId = (id) => {
+  let hash = 2166136261;
+  for (let i = 0; i < id.length; i += 1) {
+    hash ^= id.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
 };
-var ROUGH_FILL_MISREGISTER_X = -3;
-var ROUGH_FILL_MISREGISTER_Y = -2;
 
 // src/render/shapes/defaults.ts
 var DEFAULT_STYLE = {
@@ -874,1495 +889,706 @@ var isFullyTransparent = (color) => {
 var dashPatternFor = (strokeStyle, width) => {
   switch (strokeStyle) {
     case "dashed":
-      return [width * 5, width * 4];
+      return [width * 3, width * 5];
     case "dotted":
-      return [width * 1.5, width * 3];
+      return [width * 1.5, width * 4];
     default:
       return [];
   }
 };
 
-// src/render/color.ts
-var TONE_BLEND = 0.2;
-var parseHex = (hex) => {
-  if (!hex.startsWith("#")) return null;
-  const h = hex.slice(1);
-  if (h.length === 3) {
-    return [
-      Number.parseInt(h[0] + h[0], 16),
-      Number.parseInt(h[1] + h[1], 16),
-      Number.parseInt(h[2] + h[2], 16)
-    ];
+// src/text/tokens.ts
+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) => {
+  const normalized = match.toLowerCase();
+  if (normalized === "->") return "\u2192";
+  if (normalized === "<-") return "\u2190";
+  if (normalized === "<->") return "\u2194";
+  if (normalized === "<=>") return "\u21D4";
+  if (normalized === "[]") return "\u2610";
+  if (normalized === "[v]") return "\u2705";
+  if (normalized === "[x]") return "\u274E";
+  return match;
+});
+var tokenizeInline = (segment) => {
+  if (!segment) return [];
+  const tokens = [];
+  let lastIndex = 0;
+  segment.replace(INLINE_PATTERN, (match, _group, offset) => {
+    const idx = offset;
+    if (idx > lastIndex) {
+      tokens.push({ type: "text", content: transformSymbols(segment.slice(lastIndex, idx)) });
+    }
+    if (match.startsWith("**") && match.endsWith("**") || match.startsWith("__") && match.endsWith("__")) {
+      tokens.push({ type: "bold", content: transformSymbols(match.slice(2, -2)) });
+    } else if (match.startsWith("*") && match.endsWith("*")) {
+      tokens.push({ type: "italic", content: transformSymbols(match.slice(1, -1)) });
+    } else if (match.startsWith("~~") && match.endsWith("~~")) {
+      tokens.push({ type: "strike", content: transformSymbols(match.slice(2, -2)) });
+    } else if (match.startsWith("==") && match.endsWith("==")) {
+      tokens.push({ type: "highlight", content: transformSymbols(match.slice(2, -2)) });
+    } else if (match.startsWith("_") && match.endsWith("_")) {
+      tokens.push({ type: "underline", content: transformSymbols(match.slice(1, -1)) });
+    } else if (match.startsWith("[") && match.includes("](") && match.endsWith(")")) {
+      const splitIndex = match.indexOf("](");
+      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(2, -2) });
+    } else {
+      tokens.push({ type: "text", content: transformSymbols(match) });
+    }
+    lastIndex = idx + match.length;
+    return match;
+  });
+  if (lastIndex < segment.length) {
+    tokens.push({ type: "text", content: transformSymbols(segment.slice(lastIndex)) });
   }
-  if (h.length === 6 || h.length === 8) {
-    return [
-      Number.parseInt(h.slice(0, 2), 16),
-      Number.parseInt(h.slice(2, 4), 16),
-      Number.parseInt(h.slice(4, 6), 16)
-    ];
+  return tokens;
+};
+var tokenizeLine = (line) => {
+  if (DOUBLE_HR_LINE_PATTERN.test(line)) return [{ type: "hr-double" }];
+  if (HR_LINE_PATTERN.test(line)) return [{ type: "hr" }];
+  return tokenizeInline(line);
+};
+var tokenizeTextBlock = (block) => {
+  if (!block) return [];
+  const tokens = [];
+  const lines = block.split("\n");
+  lines.forEach((line, index) => {
+    const lineTokens = tokenizeLine(line);
+    tokens.push(...lineTokens);
+    const isRuleLine = lineTokens.length === 1 && (lineTokens[0]?.type === "hr" || lineTokens[0]?.type === "hr-double");
+    if (index < lines.length - 1 && !isRuleLine) tokens.push({ type: "br" });
+  });
+  return tokens;
+};
+var tokenize = (input) => {
+  if (!input) return [];
+  const tokens = [];
+  let cursor = 0;
+  while (cursor < input.length) {
+    const fenceStart = input.indexOf("```", cursor);
+    if (fenceStart === -1) {
+      tokens.push(...tokenizeTextBlock(input.slice(cursor)));
+      break;
+    }
+    if (fenceStart > cursor) {
+      tokens.push(...tokenizeTextBlock(input.slice(cursor, fenceStart)));
+    }
+    const fenceEnd = input.indexOf("```", fenceStart + 3);
+    if (fenceEnd === -1) {
+      tokens.push(...tokenizeTextBlock(input.slice(fenceStart)));
+      break;
+    }
+    const fenceContent = input.slice(fenceStart + 3, fenceEnd);
+    const delimiterIndex = fenceContent.search(/[\r\n]/);
+    let codeContent = fenceContent;
+    if (delimiterIndex >= 0) {
+      codeContent = fenceContent.slice(delimiterIndex).replace(/^\r?\n/, "");
+    }
+    tokens.push({ type: "code-block", content: codeContent.replace(/\r\n/g, "\n") });
+    cursor = fenceEnd + 3;
   }
-  return null;
+  return tokens;
 };
-var toHexPair = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
-var mixHex = (a, b, t) => {
-  const A = parseHex(a);
-  const B = parseHex(b);
-  if (!A || !B) return a;
-  const p = Math.max(0, Math.min(1, t));
-  return `#${toHexPair(A[0] * (1 - p) + B[0] * p)}${toHexPair(A[1] * (1 - p) + B[1] * p)}${toHexPair(A[2] * (1 - p) + B[2] * p)}`;
+
+// src/text/defaults.ts
+var FONT_FAMILY_MAP = {
+  handwriting: '"Architects Daughter", cursive',
+  "sans-serif": '"Atkinson Hyperlegible Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+  serif: '"Lora", "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  monospace: '"Inconsolata", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  informal: '"Shantell Sans", ui-handwriting, cursive'
 };
-var darkenCache = /* @__PURE__ */ new Map();
-var darkenHex = (hex) => {
-  const cached2 = darkenCache.get(hex);
-  if (cached2 !== void 0) return cached2;
-  const result = mixHex(hex, "#000000", TONE_BLEND);
-  darkenCache.set(hex, result);
-  return result;
+var FONT_SIZE_MAP = {
+  S: 14,
+  M: 16,
+  L: 24,
+  XL: 36
+};
+var LINE_HEIGHT_MAP = {
+  S: 20,
+  M: 24,
+  L: 32,
+  XL: 40
 };
+var CODE_BLOCK_PADDING_X = 6;
+var CODE_BLOCK_MARGIN_Y = 4;
+var CONTENT_HEIGHT_BUFFER = 4;
+var CONTENT_PADDING = 6;
+var DEFAULT_TEXT_COLOR = "#1f2937";
+var DEFAULT_HIGHLIGHT_COLOR = "#fde047";
+var DEFAULT_HIGHLIGHT_COLOR_DARK = "#6b5a23";
+var LINK_COLOR = "#2563eb";
+var CODE_BG_COLOR = "rgba(148, 163, 184, 0.18)";
 
-// src/render/shapes/path-helpers.ts
-var buildRectPath = (ctx, w, h, radius) => {
-  ctx.beginPath();
-  if (radius <= 0) {
-    ctx.rect(0, 0, w, h);
-    return;
+// src/text/math/loader.ts
+var cached = null;
+var loadPromise = null;
+var loadFailed = false;
+var readyCallbacks = /* @__PURE__ */ new Set();
+var getMathJax = () => {
+  if (cached) return cached;
+  if (loadFailed) return null;
+  if (!loadPromise) {
+    loadPromise = loadMathJax().then((instance) => {
+      if (instance) {
+        cached = instance;
+        for (const cb of readyCallbacks) cb();
+      } else {
+        loadFailed = true;
+      }
+      readyCallbacks.clear();
+      return cached;
+    }).catch((err) => {
+      console.warn("[math] failed to load MathJax:", err);
+      loadFailed = true;
+      readyCallbacks.clear();
+      return null;
+    });
   }
-  ctx.roundRect(0, 0, w, h, radius);
+  return null;
 };
-var buildEllipsePath = (ctx, w, h) => {
-  const rx = w / 2;
-  const ry = h / 2;
-  ctx.beginPath();
-  ctx.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2);
+var onMathJaxReady = (cb) => {
+  if (cached) return;
+  if (loadFailed) return;
+  readyCallbacks.add(cb);
 };
-var buildDiamondPath = (ctx, w, h, radius = 0) => {
-  ctx.beginPath();
-  if (radius <= 0) {
-    ctx.moveTo(w / 2, 0);
-    ctx.lineTo(w, h / 2);
-    ctx.lineTo(w / 2, h);
-    ctx.lineTo(0, h / 2);
-    ctx.closePath();
-    return;
-  }
-  const cx = w / 2;
-  const cy = h / 2;
-  const T = { x: cx, y: 0 };
-  const R = { x: w, y: cy };
-  const B = { x: cx, y: h };
-  const L = { x: 0, y: cy };
-  const edgeLen = Math.hypot(R.x - T.x, R.y - T.y);
-  const sMax = Math.max(0, edgeLen / 2 - 0.01);
-  const s = Math.min(radius * Math.SQRT2, sMax);
-  if (s <= 1e-4) {
-    ctx.moveTo(T.x, T.y);
-    ctx.lineTo(R.x, R.y);
-    ctx.lineTo(B.x, B.y);
-    ctx.lineTo(L.x, L.y);
-    ctx.closePath();
-    return;
-  }
-  const along = (a, b, d) => {
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const len = Math.hypot(dx, dy) || 1;
-    const t = d / len;
-    return { x: a.x + dx * t, y: a.y + dy * t };
+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 TR = along(T, R, s);
-  const RT = along(R, T, s);
-  const RB = along(R, B, s);
-  const BR = along(B, R, s);
-  const BL = along(B, L, s);
-  const LB = along(L, B, s);
-  const LT = along(L, T, s);
-  const TL = along(T, L, s);
-  ctx.moveTo(TR.x, TR.y);
-  ctx.lineTo(RT.x, RT.y);
-  ctx.quadraticCurveTo(R.x, R.y, RB.x, RB.y);
-  ctx.lineTo(BR.x, BR.y);
-  ctx.quadraticCurveTo(B.x, B.y, BL.x, BL.y);
-  ctx.lineTo(LB.x, LB.y);
-  ctx.quadraticCurveTo(L.x, L.y, LT.x, LT.y);
-  ctx.lineTo(TL.x, TL.y);
-  ctx.quadraticCurveTo(T.x, T.y, TR.x, TR.y);
-  ctx.closePath();
+  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;
 };
-var thoughtCloudGeometry = (w, h) => {
-  const domeW = Math.min(w * 0.4, h * 1.2);
-  const domeH = Math.min(h * 0.45, domeW);
-  const domeAnchorX = w * 0.3;
-  const domeX = Math.max(0, Math.min(w - domeW, domeAnchorX - domeW / 2));
-  return {
-    domeX,
-    domeW,
-    domeH,
-    cx: domeX + domeW / 2,
-    cy: domeH / 2,
-    rx: domeW / 2,
-    ry: domeH / 2,
-    bodyY: domeH * 0.55
+
+// src/text/math/cache.ts
+var normalizeSize = (px) => Math.max(8, Math.round(px));
+var cache2 = /* @__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 buildThoughtCloudPath = (ctx, w, h, radius) => {
-  const g = thoughtCloudGeometry(w, h);
-  const bodyH = h - g.bodyY;
-  const r = Math.max(0, Math.min(radius, bodyH / 2, w / 2));
-  const t = g.ry > 0 ? (g.bodyY - g.cy) / g.ry : 0;
-  const inRange = Math.abs(t) < 1;
-  let xL = g.domeX;
-  let xR = g.domeX + g.domeW;
-  if (inRange) {
-    const xOffset = g.rx * Math.sqrt(1 - t * t);
-    xL = g.cx - xOffset;
-    xR = g.cx + xOffset;
+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 = cache2.get(key);
+  if (existing) {
+    if (existing.state === "ready") return existing.bitmap;
+    return null;
   }
-  xL = Math.max(r, xL);
-  xR = Math.min(w - r, xR);
-  ctx.beginPath();
-  ctx.moveTo(r, g.bodyY);
-  ctx.lineTo(xL, g.bodyY);
-  const startAngle = Math.atan2((g.bodyY - g.cy) / g.ry, (xL - g.cx) / g.rx);
-  let endAngle = Math.atan2((g.bodyY - g.cy) / g.ry, (xR - g.cx) / g.rx);
-  if (endAngle <= startAngle) endAngle += 2 * Math.PI;
-  ctx.ellipse(g.cx, g.cy, g.rx, g.ry, 0, startAngle, endAngle, false);
-  ctx.lineTo(w - r, g.bodyY);
-  ctx.quadraticCurveTo(w, g.bodyY, w, g.bodyY + r);
-  ctx.lineTo(w, h - r);
-  ctx.quadraticCurveTo(w, h, w - r, h);
-  ctx.lineTo(r, h);
-  ctx.quadraticCurveTo(0, h, 0, h - r);
-  ctx.lineTo(0, g.bodyY + r);
-  ctx.quadraticCurveTo(0, g.bodyY, r, g.bodyY);
-  ctx.closePath();
+  cache2.set(key, { state: "pending" });
+  compileQueue.push({ key, source, color, sizePx: size });
+  scheduleCompile();
+  return null;
 };
-var buildTagPath = (ctx, w, h, radius = 8) => {
-  const notch = Math.min(h * 0.5, w * 0.3);
-  const tipRadius = 6;
-  const tipX = 0;
-  const tipY = h / 2;
-  const bodyLeft = Math.max(0, Math.min(notch, w));
-  const right = w;
-  const bottom = h;
-  const rBody = Math.min(radius, h / 2, (right - bodyLeft) / 2);
-  const rJoin = Math.min(radius, h * 0.45, bodyLeft * 0.8);
-  ctx.beginPath();
-  if (bodyLeft <= 1e-3) {
-    const r = Math.min(radius, h / 2, w / 2);
-    ctx.moveTo(r, 0);
-    ctx.lineTo(w - r, 0);
-    ctx.quadraticCurveTo(w, 0, w, r);
-    ctx.lineTo(w, h - r);
-    ctx.quadraticCurveTo(w, h, w - r, h);
-    ctx.lineTo(r, h);
-    ctx.quadraticCurveTo(0, h, 0, h - r);
-    ctx.lineTo(0, r);
-    ctx.quadraticCurveTo(0, 0, r, 0);
-    ctx.closePath();
+var scheduleCompile = () => {
+  if (compileScheduled) return;
+  compileScheduled = true;
+  if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") {
+    void drainQueue();
     return;
   }
-  const pTop = { x: bodyLeft, y: rJoin };
-  const pBot = { x: bodyLeft, y: bottom - rJoin };
-  const dirX = tipX - bodyLeft;
-  const dirYTop = tipY - rJoin;
-  const dirYBot = tipY - (bottom - rJoin);
-  const lenTop = Math.hypot(dirX, dirYTop) || 1;
-  const lenBot = Math.hypot(dirX, dirYBot) || 1;
-  const maxTipRound = Math.min(lenTop, lenBot) * 0.49;
-  const t = Math.max(0, Math.min(tipRadius, maxTipRound));
-  const tipEnter = { x: tipX - dirX / lenBot * t, y: tipY - dirYBot / lenBot * t };
-  const tipExit = { x: tipX - dirX / lenTop * t, y: tipY - dirYTop / lenTop * t };
-  const k = rJoin * 0.65;
-  const topStart = { x: bodyLeft + rBody, y: 0 };
-  const botEnd = { x: bodyLeft + rBody, y: bottom };
-  ctx.moveTo(topStart.x, topStart.y);
-  ctx.lineTo(right - rBody, 0);
-  ctx.quadraticCurveTo(right, 0, right, rBody);
-  ctx.lineTo(right, bottom - rBody);
-  ctx.quadraticCurveTo(right, bottom, right - rBody, bottom);
-  ctx.lineTo(botEnd.x, botEnd.y);
-  ctx.bezierCurveTo(
-    botEnd.x - k,
-    bottom,
-    pBot.x - dirX / lenBot * k,
-    pBot.y - dirYBot / lenBot * k,
-    pBot.x,
-    pBot.y
-  );
-  ctx.lineTo(t > 0 ? tipEnter.x : tipX, t > 0 ? tipEnter.y : tipY);
-  if (t > 0) ctx.quadraticCurveTo(tipX, tipY, tipExit.x, tipExit.y);
-  ctx.lineTo(pTop.x, pTop.y);
-  ctx.bezierCurveTo(
-    pTop.x - dirX / lenTop * k,
-    pTop.y - dirYTop / lenTop * k,
-    topStart.x - k,
-    0,
-    topStart.x,
-    0
-  );
-  ctx.closePath();
+  requestAnimationFrame(() => {
+    void drainQueue();
+  });
 };
-
-// src/render/shapes/draw-shape.ts
-var ATOMIC = /* @__PURE__ */ new Set(["rect", "ellipse", "diamond", "tag", "thought-cloud"]);
-var COMPOSITE = /* @__PURE__ */ new Set([
-  "capsule",
-  "layered-rect",
-  "layered-ellipse",
-  "layered-diamond",
-  "soft-diamond"
-]);
-var isCompositePrimitive = (type) => COMPOSITE.has(type);
-var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
-var PLAIN_RECT_CORNER_THRESHOLD_PX = 1.5;
-var LAYERED_OFFSET = 12;
-var drawShape = (ctx, node, scale, theme, opts) => {
-  if (!isDrawablePrimitive(node.type)) return;
-  if (node.hidden) return;
-  if (node.w <= 0 || node.h <= 0) return;
-  if (COMPOSITE.has(node.type)) {
-    drawComposite(ctx, node, scale, theme, opts);
+var drainQueue = async () => {
+  compileScheduled = false;
+  if (compileQueue.length === 0) return;
+  const mj = getMathJax();
+  if (!mj) {
+    onMathJaxReady(() => scheduleCompile());
     return;
   }
-  drawAtomic(ctx, node.type, node.w, node.h, node.style, scale, theme, opts);
+  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 (cache2.get(item.key)?.state !== "pending") continue;
+    try {
+      const bitmap = await compileOne(mj, item.source, item.color, item.sizePx);
+      cache2.set(item.key, { state: "ready", bitmap });
+      didResolve = true;
+    } catch (err) {
+      cache2.set(item.key, { state: "error", err });
+      console.warn(`[math] failed to compile "${item.source}":`, err);
+    }
+  }
+  if (didResolve) bumpMathEpoch();
+  if (compileQueue.length > 0) scheduleCompile();
 };
-var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
-  if (w <= 0 || h <= 0) return;
-  const strokeWidth = resolveStrokeWidth(style, theme);
-  const opacity = resolveOpacity(style, theme);
-  const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
-  const stroke = resolveColor(style, "strokeColor", DEFAULT_STYLE.strokeColor, theme);
-  const fillVisible = !isFullyTransparent(fill);
-  const strokeVisible = strokeWidth > 0 && !isFullyTransparent(stroke);
-  if (!fillVisible && !strokeVisible) return;
-  const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
-  switch (type) {
-    case "rect": {
-      if (cornerRadius * scale < PLAIN_RECT_CORNER_THRESHOLD_PX) {
-        ctx.beginPath();
-        ctx.rect(0, 0, w, h);
-      } else {
-        buildRectPath(ctx, w, h, cornerRadius);
-      }
-      break;
-    }
-    case "ellipse":
-      buildEllipsePath(ctx, w, h);
-      break;
-    case "diamond":
-      buildDiamondPath(ctx, w, h, cornerRadius);
-      break;
-    case "tag":
-      buildTagPath(ctx, w, h, cornerRadius);
-      break;
-    case "thought-cloud":
-      buildThoughtCloudPath(ctx, w, h, cornerRadius);
-      break;
-  }
-  const needsScope = opacity !== 1;
-  if (needsScope) {
-    ctx.save();
-    ctx.globalAlpha = opacity;
-  }
-  if (fillVisible) {
-    ctx.fillStyle = fill;
-    ctx.fill();
-  }
-  if (strokeVisible && !opts?.skipStroke) {
-    ctx.strokeStyle = stroke;
-    ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
-    ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
-    ctx.stroke();
-  }
-  if (needsScope) ctx.restore();
-};
-var drawComposite = (ctx, node, scale, theme, opts) => {
-  const subs = compositeLayout(node);
-  for (const s of subs) {
-    ctx.save();
-    ctx.translate(s.x, s.y);
-    drawAtomic(ctx, s.atomic, s.w, s.h, s.style ?? node.style, scale, theme, opts);
-    ctx.restore();
+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"');
   }
-};
-var compositeLayout = (node) => {
-  const { w, h } = node;
-  switch (node.type) {
-    case "capsule": {
-      const circ = Math.min(h * 0.55, w * 0.28, 56);
-      const overlap = circ * 0.15;
-      const rectX = circ - overlap;
-      const rectW = Math.max(0, w - rectX);
-      const circY = (h - circ) / 2;
-      return [
-        { atomic: "ellipse", x: 0, y: circY, w: circ, h: circ },
-        { atomic: "rect", x: rectX, y: 0, w: rectW, h }
-      ];
-    }
-    case "layered-rect":
-    case "layered-ellipse":
-    case "layered-diamond": {
-      const atomic = node.type === "layered-rect" ? "rect" : node.type === "layered-ellipse" ? "ellipse" : "diamond";
-      const off = Math.min(LAYERED_OFFSET, w * 0.15, h * 0.15);
-      const back = {
-        atomic,
-        x: off,
-        y: off,
-        w,
-        h,
-        style: darkenedStyle(node.style)
-      };
-      const front = { atomic, x: 0, y: 0, w, h };
-      return [back, front];
-    }
-    case "soft-diamond": {
-      const backScale = 1.08;
-      const frontScale = 0.96;
-      const bw = w * backScale;
-      const bh = h * backScale;
-      const fw = w * frontScale;
-      const fh = h * frontScale;
-      const back = {
-        atomic: "diamond",
-        x: (w - bw) / 2,
-        y: (h - bh) / 2,
-        w: bw,
-        h: bh,
-        style: darkenedStyle(node.style)
-      };
-      const front = {
-        atomic: "diamond",
-        x: (w - fw) / 2,
-        y: (h - fh) / 2,
-        w: fw,
-        h: fh
-      };
-      return [back, front];
+  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);
   }
-  return [];
 };
-var DARKENED_NO_STYLE = {};
-var darkenedStyleCache = /* @__PURE__ */ new WeakMap();
-var darkenedStyle = (style) => {
-  if (!style) return DARKENED_NO_STYLE;
-  const hit = darkenedStyleCache.get(style);
-  if (hit) return hit;
-  const fill = style.backgroundColor;
-  const stroke = style.strokeColor;
-  const next = {
-    ...style,
-    ...fill ? { backgroundColor: darkenHex(fill) } : {},
-    ...stroke ? { strokeColor: darkenHex(stroke) } : {}
-  };
-  darkenedStyleCache.set(style, next);
-  return next;
+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 = () => {
+  cache2.clear();
+  compileQueue.length = 0;
+  compileScheduled = false;
 };
+var getMathCacheSize = () => cache2.size;
 
-// src/render/rough/cache.ts
-var cache = /* @__PURE__ */ new Map();
-var MAX_ENTRIES = 1e3;
-var getOrBuildDrawable = (key, build) => {
-  const hit = cache.get(key);
-  if (hit !== void 0) {
-    cache.delete(key);
-    cache.set(key, hit);
-    return hit;
+// src/text/measure.ts
+var MAX_WIDTH_CACHE_SIZE = 5e3;
+var measureCanvas = typeof document !== "undefined" ? document.createElement("canvas") : null;
+var measureCtx = measureCanvas?.getContext("2d") ?? null;
+var widthCache = /* @__PURE__ */ new Map();
+var getCanvasFont = (opts) => {
+  const weight = opts.type === "bold" || opts.textStyle === "bold" ? "700" : "400";
+  const italic = opts.type === "italic" || opts.textStyle === "italic" ? "italic" : "normal";
+  const family = opts.type === "code" ? FONT_FAMILY_MAP.monospace : FONT_FAMILY_MAP[opts.fontFamily];
+  return `${italic} ${weight} ${FONT_SIZE_MAP[opts.fontSize]}px ${family}`;
+};
+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 drawable = build();
-  if (cache.size >= MAX_ENTRIES) {
-    const first = cache.keys().next().value;
-    if (first !== void 0) cache.delete(first);
+  const font = getCanvasFont(opts);
+  const key = `${font}|${opts.text}`;
+  const cached2 = widthCache.get(key);
+  if (cached2 !== void 0) return cached2;
+  if (!measureCtx) {
+    return opts.text.length * FONT_SIZE_MAP[opts.fontSize] * 0.55;
   }
-  cache.set(key, drawable);
-  return drawable;
-};
-var seedFromId = (id) => {
-  let hash = 2166136261;
-  for (let i = 0; i < id.length; i += 1) {
-    hash ^= id.charCodeAt(i);
-    hash = Math.imul(hash, 16777619);
+  measureCtx.font = font;
+  const width = measureCtx.measureText(opts.text).width;
+  widthCache.set(key, width);
+  if (widthCache.size > MAX_WIDTH_CACHE_SIZE) {
+    const oldestKey = widthCache.keys().next().value;
+    if (oldestKey !== void 0) widthCache.delete(oldestKey);
   }
-  return hash >>> 0;
+  return width;
+};
+var clearMeasureCache = () => {
+  widthCache.clear();
 };
 
-// src/render/rough/loader.ts
-var cachedCtor = null;
-var loadPromise = null;
-var readyCallbacks = /* @__PURE__ */ new Set();
-var getRoughCanvasCtor = () => {
-  if (cachedCtor) return cachedCtor;
-  if (!loadPromise) {
-    loadPromise = import('roughjs/bin/canvas').then((mod) => {
-      cachedCtor = mod.RoughCanvas;
-      for (const cb of readyCallbacks) cb();
-      readyCallbacks.clear();
-      return cachedCtor;
-    }).catch((err) => {
-      console.warn("[rough] failed to load roughjs:", err);
-      return null;
-    });
-  }
-  return null;
+// src/text/layout.ts
+var splitChunks = (text) => text.split(/(\s+)/g).filter(Boolean);
+var wrapCodeLine = (line, opts, maxWidth) => {
+  const normalized = line.replace(/\t/g, "  ");
+  if (!normalized) return [""];
+  const wrapped = [];
+  let part = "";
+  for (const ch of normalized) {
+    const next = part + ch;
+    const nextWidth = measureText({
+      text: next,
+      type: "code",
+      fontFamily: opts.fontFamily,
+      fontSize: opts.fontSize,
+      textStyle: "normal"
+    });
+    if (part && nextWidth > maxWidth) {
+      wrapped.push(part);
+      part = ch;
+    } else {
+      part = next;
+    }
+  }
+  if (part) wrapped.push(part);
+  return wrapped;
 };
-var onRoughReady = (cb) => {
-  if (cachedCtor) return;
-  readyCallbacks.add(cb);
+var layoutTokens = (tokens, opts) => {
+  const maxWidth = Math.max(40, opts.width);
+  const lines = [];
+  let currentRuns = [];
+  let cursorX = 0;
+  const pushLine = () => {
+    lines.push({ kind: "text", runs: currentRuns });
+    currentRuns = [];
+    cursorX = 0;
+  };
+  const pushRule = (double) => {
+    if (currentRuns.length > 0) pushLine();
+    lines.push({ kind: "rule", double });
+  };
+  const pushCodeBlock = (content) => {
+    if (currentRuns.length > 0) pushLine();
+    const rawLines = content.split("\n");
+    const visualRuns = [];
+    const codeMaxWidth = Math.max(20, maxWidth - CODE_BLOCK_PADDING_X * 2);
+    for (const raw of rawLines) {
+      for (const part of wrapCodeLine(raw, opts, codeMaxWidth)) {
+        visualRuns.push([{ text: part, type: "code" }]);
+      }
+    }
+    if (visualRuns.length === 0) {
+      lines.push({ kind: "code-block", runs: [], isFirst: true, isLast: true });
+      return;
+    }
+    for (let index = 0; index < visualRuns.length; index++) {
+      const runs = visualRuns[index];
+      lines.push({
+        kind: "code-block",
+        runs,
+        isFirst: index === 0,
+        isLast: index === visualRuns.length - 1
+      });
+    }
+  };
+  const pushChunk = (chunk, type) => {
+    if (!chunk) return;
+    const chunkWidth = measureText({
+      text: chunk,
+      type,
+      fontFamily: opts.fontFamily,
+      fontSize: opts.fontSize,
+      textStyle: opts.textStyle
+    });
+    if (!chunk.trim()) {
+      if (cursorX === 0) return;
+      currentRuns.push({ text: chunk, type });
+      cursorX += chunkWidth;
+      return;
+    }
+    if (cursorX > 0 && cursorX + chunkWidth > maxWidth) {
+      pushLine();
+    }
+    if (chunkWidth > maxWidth && chunk.length > 1) {
+      let part = "";
+      for (const ch of chunk) {
+        const next = part + ch;
+        const nextWidth = measureText({
+          text: next,
+          type,
+          fontFamily: opts.fontFamily,
+          fontSize: opts.fontSize,
+          textStyle: opts.textStyle
+        });
+        if (cursorX > 0 && nextWidth > maxWidth) {
+          if (part) {
+            currentRuns.push({ text: part, type });
+            cursorX += measureText({
+              text: part,
+              type,
+              fontFamily: opts.fontFamily,
+              fontSize: opts.fontSize,
+              textStyle: opts.textStyle
+            });
+          }
+          pushLine();
+          part = ch;
+        } else {
+          part = next;
+        }
+      }
+      if (part) {
+        currentRuns.push({ text: part, type });
+        cursorX += measureText({
+          text: part,
+          type,
+          fontFamily: opts.fontFamily,
+          fontSize: opts.fontSize,
+          textStyle: opts.textStyle
+        });
+      }
+      return;
+    }
+    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);
+      continue;
+    }
+    if (token.type === "br") {
+      pushLine();
+      continue;
+    }
+    if (token.type === "hr") {
+      pushRule(false);
+      continue;
+    }
+    if (token.type === "hr-double") {
+      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) {
+    lines.push({ kind: "text", runs: currentRuns });
+  }
+  return lines;
 };
 
-// src/render/rough/paths.ts
-var rectPath = (x, y, w, h) => {
-  return `M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
+// src/text/font-epoch.ts
+var fontEpochListeners = /* @__PURE__ */ new Set();
+var fontEpoch = 0;
+var fontTrackingInitialized = false;
+var emitFontEpoch = () => {
+  for (const listener of fontEpochListeners) listener(fontEpoch);
 };
-var excalidrawRoundedRectPath = (x, y, w, h, radius) => {
-  const r = Math.max(0, Math.min(radius, w / 2, h / 2));
-  if (r === 0) return rectPath(x, y, w, h);
-  const x2 = x + w;
-  const y2 = y + h;
-  return [
-    `M${x + r} ${y}`,
-    `L${x2 - r} ${y}`,
-    `Q${x2} ${y}, ${x2} ${y + r}`,
-    `L${x2} ${y2 - r}`,
-    `Q${x2} ${y2}, ${x2 - r} ${y2}`,
-    `L${x + r} ${y2}`,
-    `Q${x} ${y2}, ${x} ${y2 - r}`,
-    `L${x} ${y + r}`,
-    `Q${x} ${y}, ${x + r} ${y}`,
-    "Z"
-  ].join(" ");
+var bumpFontEpoch = () => {
+  fontEpoch += 1;
+  clearMeasureCache();
+  emitFontEpoch();
 };
-var diamondPath = (x, y, w, h, radius = 0) => {
-  const cx = x + w / 2;
-  const cy = y + h / 2;
-  if (radius <= 0) {
-    return `M${cx} ${y} L${x + w} ${cy} L${cx} ${y + h} L${x} ${cy} Z`;
-  }
-  const T = { x: cx, y };
-  const R = { x: x + w, y: cy };
-  const B = { x: cx, y: y + h };
-  const L = { x, y: cy };
-  const edgeLen = Math.hypot(R.x - T.x, R.y - T.y);
-  const sMax = Math.max(0, edgeLen / 2 - 0.01);
-  const s = Math.min(radius * Math.SQRT2, sMax);
-  if (s <= 1e-4) {
-    return `M${T.x} ${T.y} L${R.x} ${R.y} L${B.x} ${B.y} L${L.x} ${L.y} Z`;
-  }
-  const along = (a, b, d) => {
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const len = Math.hypot(dx, dy) || 1;
-    const t = d / len;
-    return { x: a.x + dx * t, y: a.y + dy * t };
-  };
-  const TR = along(T, R, s);
-  const RT = along(R, T, s);
-  const RB = along(R, B, s);
-  const BR = along(B, R, s);
-  const BL = along(B, L, s);
-  const LB = along(L, B, s);
-  const LT = along(L, T, s);
-  const TL = along(T, L, s);
-  return [
-    `M${TR.x} ${TR.y}`,
-    `L${RT.x} ${RT.y}`,
-    `Q${R.x} ${R.y}, ${RB.x} ${RB.y}`,
-    `L${BR.x} ${BR.y}`,
-    `Q${B.x} ${B.y}, ${BL.x} ${BL.y}`,
-    `L${LB.x} ${LB.y}`,
-    `Q${L.x} ${L.y}, ${LT.x} ${LT.y}`,
-    `L${TL.x} ${TL.y}`,
-    `Q${T.x} ${T.y}, ${TR.x} ${TR.y}`,
-    "Z"
-  ].join(" ");
+var initFontTracking = () => {
+  if (fontTrackingInitialized) return;
+  fontTrackingInitialized = true;
+  if (typeof document === "undefined" || !("fonts" in document)) return;
+  const fontSet = document.fonts;
+  let didSettleInitialFonts = false;
+  fontSet.ready.then(() => {
+    if (didSettleInitialFonts) return;
+    didSettleInitialFonts = true;
+    bumpFontEpoch();
+  }).catch(() => {
+  });
+  fontSet.addEventListener?.("loadingdone", () => {
+    if (!didSettleInitialFonts) didSettleInitialFonts = true;
+    bumpFontEpoch();
+  });
 };
-var ellipsePath = (x, y, w, h) => {
-  const cx = x + w / 2;
-  const rx = w / 2;
-  const ry = h / 2;
-  return [
-    `M${cx} ${y}`,
-    `A${rx} ${ry} 0 1 0 ${cx} ${y + h}`,
-    `A${rx} ${ry} 0 1 0 ${cx} ${y}`,
-    "Z"
-  ].join(" ");
+var subscribeFontEpoch = (listener) => {
+  initFontTracking();
+  fontEpochListeners.add(listener);
+  return () => {
+    fontEpochListeners.delete(listener);
+  };
 };
-var thoughtCloudPath = (x, y, w, h, radius) => {
-  const domeW = Math.min(w * 0.4, h * 1.2);
-  const domeH = Math.min(h * 0.45, domeW);
-  const domeAnchorX = w * 0.3;
-  const domeX = Math.max(0, Math.min(w - domeW, domeAnchorX - domeW / 2));
-  const cx = x + domeX + domeW / 2;
-  const cy = y + domeH / 2;
-  const rx = domeW / 2;
-  const ry = domeH / 2;
-  const bodyY = y + domeH * 0.55;
-  const bodyH = y + h - bodyY;
-  const r = Math.max(0, Math.min(radius, bodyH / 2, w / 2));
-  const t = ry > 0 ? (bodyY - cy) / ry : 0;
-  let xL = x + domeX;
-  let xR = x + domeX + domeW;
-  if (Math.abs(t) < 1) {
-    const xOffset = rx * Math.sqrt(1 - t * t);
-    xL = cx - xOffset;
-    xR = cx + xOffset;
-  }
-  xL = Math.max(x + r, xL);
-  xR = Math.min(x + w - r, xR);
-  return [
-    `M${x + r} ${bodyY}`,
-    `L${xL} ${bodyY}`,
-    `A${rx} ${ry} 0 1 1 ${xR} ${bodyY}`,
-    `L${x + w - r} ${bodyY}`,
-    `Q${x + w} ${bodyY}, ${x + w} ${bodyY + r}`,
-    `L${x + w} ${y + h - r}`,
-    `Q${x + w} ${y + h}, ${x + w - r} ${y + h}`,
-    `L${x + r} ${y + h}`,
-    `Q${x} ${y + h}, ${x} ${y + h - r}`,
-    `L${x} ${bodyY + r}`,
-    `Q${x} ${bodyY}, ${x + r} ${bodyY}`,
-    "Z"
-  ].join(" ");
+var getFontEpoch = () => fontEpoch;
+
+// src/text/render-scale.ts
+var MIN_RENDER_SCALE = 0.15;
+var MAX_RENDER_SCALE = 1.5;
+var MAX_RENDER_WIDTH = 2e3;
+var MAX_RENDER_HEIGHT = 1200;
+var quantizeZoom = (value) => {
+  if (!Number.isFinite(value)) return 1;
+  return Math.max(0.1, Math.round(value * 10) / 10);
 };
-var tagPath = (x, y, w, h, radius = 8) => {
-  const notch = Math.min(h * 0.5, w * 0.3);
-  const tipRadius = 6;
-  const tipX = x;
-  const tipY = y + h / 2;
-  const bodyLeft = x + Math.max(0, Math.min(notch, w));
-  const right = x + w;
-  const bottom = y + h;
-  const rBody = Math.min(radius, h / 2, (right - bodyLeft) / 2);
-  const rJoin = Math.min(radius, h * 0.45, (bodyLeft - x) * 0.8);
-  if (bodyLeft - x <= 1e-3) {
-    return excalidrawRoundedRectPath(x, y, w, h, Math.min(radius, h / 2, w / 2));
+var quantizeDpr = (value) => {
+  if (!Number.isFinite(value)) return 1;
+  const clamped = Math.max(1, Math.min(3, value));
+  return Math.round(clamped * 4) / 4;
+};
+var resolveRenderScale = (baseScale, zoom, isMoving2) => {
+  const clampedBase = Math.max(MIN_RENDER_SCALE, Math.min(MAX_RENDER_SCALE, baseScale));
+  let idleScale = clampedBase;
+  if (zoom <= 0.4) {
+    idleScale = 0.45;
+  } else if (zoom <= 0.7) {
+    idleScale = 0.85;
+  } else if (zoom <= 1) {
+    idleScale = 1.15;
+  } else if (zoom <= 1.8) {
+    idleScale = 1.35;
+  } else {
+    idleScale = 1 + (zoom - 1.8) * 0.2;
   }
-  const pTop = { x: bodyLeft, y: y + rJoin };
-  const pBot = { x: bodyLeft, y: bottom - rJoin };
-  const dirX = tipX - bodyLeft;
-  const dirYTop = tipY - pTop.y;
-  const dirYBot = tipY - pBot.y;
-  const lenTop = Math.hypot(dirX, dirYTop) || 1;
-  const lenBot = Math.hypot(dirX, dirYBot) || 1;
-  const maxTipRound = Math.min(lenTop, lenBot) * 0.49;
-  const t = Math.max(0, Math.min(tipRadius, maxTipRound));
-  const tipEnter = { x: tipX - dirX / lenBot * t, y: tipY - dirYBot / lenBot * t };
-  const tipExit = { x: tipX - dirX / lenTop * t, y: tipY - dirYTop / lenTop * t };
-  const k = rJoin * 0.65;
-  const topStart = { x: bodyLeft + rBody, y };
-  const botEnd = { x: bodyLeft + rBody, y: bottom };
-  const parts = [
-    `M${topStart.x} ${topStart.y}`,
-    `L${right - rBody} ${y}`,
-    `Q${right} ${y}, ${right} ${y + rBody}`,
-    `L${right} ${bottom - rBody}`,
-    `Q${right} ${bottom}, ${right - rBody} ${bottom}`,
-    `L${botEnd.x} ${botEnd.y}`,
-    `C${botEnd.x - k} ${bottom}, ${pBot.x - dirX / lenBot * k} ${pBot.y - dirYBot / lenBot * k}, ${pBot.x} ${pBot.y}`,
-    `L${t > 0 ? tipEnter.x : tipX} ${t > 0 ? tipEnter.y : tipY}`
-  ];
-  if (t > 0) parts.push(`Q${tipX} ${tipY}, ${tipExit.x} ${tipExit.y}`);
-  parts.push(
-    `L${pTop.x} ${pTop.y}`,
-    `C${pTop.x - dirX / lenTop * k} ${pTop.y - dirYTop / lenTop * k}, ${topStart.x - k} ${y}, ${topStart.x} ${topStart.y}`,
-    "Z"
+  idleScale = Math.max(MIN_RENDER_SCALE, Math.min(MAX_RENDER_SCALE, idleScale));
+  if (isMoving2) {
+    let movingScale = idleScale * (zoom >= 0.4 ? 0.72 : 0.6);
+    if (zoom < 0.4) {
+      movingScale = Math.min(movingScale, 0.22);
+    } else if (zoom <= 0.7) {
+      movingScale = Math.min(movingScale, 0.4);
+    }
+    return Math.max(MIN_RENDER_SCALE, Math.min(0.65, movingScale));
+  }
+  return idleScale;
+};
+var clampEffectiveScale = (baseScale, width, height) => {
+  const limiter = Math.min(
+    1,
+    MAX_RENDER_WIDTH / Math.max(1, width * baseScale),
+    MAX_RENDER_HEIGHT / Math.max(1, height * baseScale)
   );
-  return parts.join(" ");
+  return baseScale * limiter;
 };
 
-// src/render/rough/tone-down.ts
-var TONE_BLEND2 = 0.2;
-var cache2 = /* @__PURE__ */ new Map();
-var deriveRoughStrokeColor = (stroke, fill, isDark) => {
-  if (!isFullyTransparent(stroke)) return stroke;
-  if (isFullyTransparent(fill)) return stroke;
-  const key = `${fill}|${isDark ? "d" : "l"}`;
-  const hit = cache2.get(key);
-  if (hit) return hit;
-  const next = mixHex(fill, isDark ? "#000000" : "#ffffff", TONE_BLEND2);
-  cache2.set(key, next);
-  return next;
+// src/text/estimate-height.ts
+var getLineAdvance = (line, lineHeight) => {
+  if (line.kind !== "code-block") return lineHeight;
+  let advance = lineHeight;
+  if (line.isFirst) advance += CODE_BLOCK_MARGIN_Y;
+  if (line.isLast) advance += CODE_BLOCK_MARGIN_Y;
+  return advance;
+};
+var getContentHeight = (lines, lineHeight) => Math.max(
+  lineHeight,
+  lines.reduce((sum, line) => sum + getLineAdvance(line, lineHeight), 0)
+);
+var estimateMarkdownContentHeight = ({
+  text,
+  width,
+  fontFamily = "handwriting",
+  fontSize = "M",
+  textStyle = "normal"
+}) => {
+  const normalizedText = text.trim();
+  if (!normalizedText) return 0;
+  const resolvedWidth = Math.max(40, Math.ceil(width));
+  const lines = layoutTokens(tokenize(text), {
+    width: resolvedWidth,
+    fontFamily,
+    fontSize,
+    textStyle
+  });
+  const lineHeight = LINE_HEIGHT_MAP[fontSize];
+  return getContentHeight(lines, lineHeight) + CONTENT_HEIGHT_BUFFER;
 };
+var getMarkdownLineHeightPx = (fontSize) => LINE_HEIGHT_MAP[fontSize];
 
-// src/render/rough/draw.ts
-var apparentDetail = (maxSide, zoom) => {
-  const apparent = maxSide * Math.min(1, zoom);
-  if (apparent >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9 };
-  if (apparent >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1 };
-  return { curveStepCount: 5, maxRandomnessOffset: 1.3 };
+// src/text/paint-canvas.ts
+var getLineAdvance2 = (line, lineHeight) => {
+  if (line.kind !== "code-block") return lineHeight;
+  let advance = lineHeight;
+  if (line.isFirst) advance += CODE_BLOCK_MARGIN_Y;
+  if (line.isLast) advance += CODE_BLOCK_MARGIN_Y;
+  return advance;
 };
-var drawRoughShape = (ctx, node, scale, theme) => {
-  const Ctor = getRoughCanvasCtor();
-  if (!Ctor) return false;
-  const rc = ensureRoughCanvas(ctx, Ctor);
-  if (!rc) return false;
-  const seed = node.id ? seedFromId(node.id) % 2147483646 + 1 : 1337;
-  paintAtomicRough(
-    rc,
-    ctx,
-    node.type,
-    node.w,
-    node.h,
-    node.style,
-    scale,
-    theme,
-    seed
-  );
-  return true;
+var getTextX = (opts, lineWidth) => {
+  if (opts.align === "center") return Math.floor((opts.width - lineWidth) / 2);
+  if (opts.align === "right") return Math.max(0, opts.width - lineWidth);
+  return 0;
 };
-var drawCompositeRough = (ctx, node, scale, theme) => {
-  const Ctor = getRoughCanvasCtor();
-  if (!Ctor) return false;
-  const rc = ensureRoughCanvas(ctx, Ctor);
-  if (!rc) return false;
-  const subs = compositeLayout(node);
-  const baseSeed = node.id ? seedFromId(node.id) % 2147483646 + 1 : 1337;
-  for (let i = 0; i < subs.length; i++) {
-    const s = subs[i];
-    const subStyle = s.style ?? node.style;
-    ctx.save();
-    ctx.translate(s.x, s.y);
-    ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
-    drawAtomic(ctx, s.atomic, s.w, s.h, subStyle, scale, theme, { skipStroke: true });
-    ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
-    paintAtomicRough(
-      rc,
-      ctx,
-      s.atomic,
-      s.w,
-      s.h,
-      subStyle,
-      scale,
-      theme,
-      (baseSeed + i * 7919) % 2147483646 + 1
-    );
-    ctx.restore();
-  }
-  return true;
-};
-var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
-  if (w <= 0 || h <= 0) return;
-  const rawStroke = resolveColor(style, "strokeColor", "#1f2937", theme);
-  const isDark = theme?.("mode") === "dark";
-  const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
-  const strokeColor = deriveRoughStrokeColor(rawStroke, fill, isDark);
-  const rawStrokeWidth = resolveStrokeWidth(style, theme);
-  if (rawStrokeWidth <= 0) return;
-  const roughness = style?.roughness ?? 0;
-  if (roughness <= 0) return;
-  const isNoBorderIntent = isFullyTransparent(rawStroke);
-  const effectiveStrokeStyle = isNoBorderIntent ? "solid" : style?.strokeStyle ?? "solid";
-  const strokeWidth = isNoBorderIntent ? DEFAULT_STYLE.strokeWidth : rawStrokeWidth;
-  const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
-  const radius = Math.max(0, Math.min(cornerRadius, w / 2, h / 2));
-  const dash = dashPatternFor(effectiveStrokeStyle, strokeWidth);
-  const detail = apparentDetail(Math.max(w, h), scale);
-  const cacheKey = [
-    type,
-    w.toFixed(1),
-    h.toFixed(1),
-    radius.toFixed(1),
-    strokeColor,
-    strokeWidth.toFixed(2),
-    effectiveStrokeStyle,
-    roughness.toFixed(2),
-    seed,
-    detail.curveStepCount,
-    detail.maxRandomnessOffset.toFixed(2)
-  ].join("|");
-  const drawable = getOrBuildDrawable(cacheKey, () => {
-    const pathData = buildPath(type, 0, 0, w, h, radius);
-    return rc.generator.path(pathData, {
-      ...ROUGH_DEFAULTS,
-      stroke: strokeColor,
-      strokeWidth,
-      roughness,
-      seed,
-      strokeLineDash: dash.length > 0 ? dash : void 0,
-      curveStepCount: detail.curveStepCount,
-      maxRandomnessOffset: detail.maxRandomnessOffset
-    });
-  });
-  ctx.save();
-  ctx.lineJoin = "round";
-  rc.draw(drawable);
-  ctx.restore();
-};
-var drawRoughEdge = (ctx, edge, samples, scale, theme) => {
-  const Ctor = getRoughCanvasCtor();
-  if (!Ctor) return false;
-  if (samples.length < 2) return true;
-  const style = edge.style;
-  const strokeColor = resolveColor(style, "strokeColor", "#475569", theme);
-  const strokeWidth = resolveStrokeWidth(style, theme);
-  if (strokeWidth <= 0) return true;
-  const roughness = style?.roughness ?? 0;
-  if (roughness <= 0) return true;
-  const seed = edge.id ? seedFromId(edge.id) % 2147483646 + 1 : 1337;
-  const dash = dashPatternFor(style?.strokeStyle, strokeWidth);
-  let minX = samples[0].x;
-  let maxX = samples[0].x;
-  let minY = samples[0].y;
-  let maxY = samples[0].y;
-  for (const p of samples) {
-    if (p.x < minX) minX = p.x;
-    if (p.x > maxX) maxX = p.x;
-    if (p.y < minY) minY = p.y;
-    if (p.y > maxY) maxY = p.y;
-  }
-  const detail = apparentDetail(Math.max(maxX - minX, maxY - minY), scale);
-  const cacheKey = [
-    "edge",
-    edge.id,
-    samples.length,
-    Math.round(minX),
-    Math.round(minY),
-    Math.round(maxX),
-    Math.round(maxY),
-    strokeColor,
-    strokeWidth.toFixed(2),
-    style?.strokeStyle ?? "solid",
-    roughness.toFixed(2),
-    seed,
-    detail.curveStepCount,
-    detail.maxRandomnessOffset.toFixed(2)
-  ].join("|");
-  const rc = ensureRoughCanvas(ctx, Ctor);
-  if (!rc) return false;
-  const drawable = getOrBuildDrawable(cacheKey, () => {
-    const points = samples.map((s) => [s.x, s.y]);
-    return rc.generator.linearPath(points, {
-      ...ROUGH_DEFAULTS,
-      stroke: strokeColor,
-      strokeWidth,
-      roughness,
-      seed,
-      strokeLineDash: dash.length > 0 ? dash : void 0,
-      curveStepCount: detail.curveStepCount,
-      maxRandomnessOffset: detail.maxRandomnessOffset
-    });
-  });
-  ctx.save();
-  ctx.lineJoin = "round";
-  rc.draw(drawable);
-  ctx.restore();
-  return true;
-};
-var ROUGH_CANVAS_KEY = "__roughCanvas";
-var ensureRoughCanvas = (ctx, Ctor) => {
-  const ctxWithCache = ctx;
-  if (ctxWithCache[ROUGH_CANVAS_KEY]) return ctxWithCache[ROUGH_CANVAS_KEY];
-  const rc = new Ctor(ctx.canvas);
-  ctxWithCache[ROUGH_CANVAS_KEY] = rc;
-  return rc;
-};
-var buildPath = (type, x, y, w, h, radius) => {
-  switch (type) {
-    case "rect":
-      return radius > 0 ? excalidrawRoundedRectPath(x, y, w, h, radius) : rectPath(x, y, w, h);
-    case "ellipse":
-      return ellipsePath(x, y, w, h);
-    case "diamond":
-      return diamondPath(x, y, w, h, radius);
-    case "tag":
-      return tagPath(x, y, w, h, radius);
-    case "thought-cloud":
-      return thoughtCloudPath(x, y, w, h, radius);
-  }
-};
-
-// src/text/tokens.ts
-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) => {
-  const normalized = match.toLowerCase();
-  if (normalized === "->") return "\u2192";
-  if (normalized === "<-") return "\u2190";
-  if (normalized === "<->") return "\u2194";
-  if (normalized === "<=>") return "\u21D4";
-  if (normalized === "[]") return "\u2610";
-  if (normalized === "[v]") return "\u2705";
-  if (normalized === "[x]") return "\u274E";
-  return match;
-});
-var tokenizeInline = (segment) => {
-  if (!segment) return [];
-  const tokens = [];
-  let lastIndex = 0;
-  segment.replace(INLINE_PATTERN, (match, _group, offset) => {
-    const idx = offset;
-    if (idx > lastIndex) {
-      tokens.push({ type: "text", content: transformSymbols(segment.slice(lastIndex, idx)) });
-    }
-    if (match.startsWith("**") && match.endsWith("**") || match.startsWith("__") && match.endsWith("__")) {
-      tokens.push({ type: "bold", content: transformSymbols(match.slice(2, -2)) });
-    } else if (match.startsWith("*") && match.endsWith("*")) {
-      tokens.push({ type: "italic", content: transformSymbols(match.slice(1, -1)) });
-    } else if (match.startsWith("~~") && match.endsWith("~~")) {
-      tokens.push({ type: "strike", content: transformSymbols(match.slice(2, -2)) });
-    } else if (match.startsWith("==") && match.endsWith("==")) {
-      tokens.push({ type: "highlight", content: transformSymbols(match.slice(2, -2)) });
-    } else if (match.startsWith("_") && match.endsWith("_")) {
-      tokens.push({ type: "underline", content: transformSymbols(match.slice(1, -1)) });
-    } else if (match.startsWith("[") && match.includes("](") && match.endsWith(")")) {
-      const splitIndex = match.indexOf("](");
-      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(2, -2) });
-    } else {
-      tokens.push({ type: "text", content: transformSymbols(match) });
-    }
-    lastIndex = idx + match.length;
-    return match;
-  });
-  if (lastIndex < segment.length) {
-    tokens.push({ type: "text", content: transformSymbols(segment.slice(lastIndex)) });
-  }
-  return tokens;
-};
-var tokenizeLine = (line) => {
-  if (DOUBLE_HR_LINE_PATTERN.test(line)) return [{ type: "hr-double" }];
-  if (HR_LINE_PATTERN.test(line)) return [{ type: "hr" }];
-  return tokenizeInline(line);
-};
-var tokenizeTextBlock = (block) => {
-  if (!block) return [];
-  const tokens = [];
-  const lines = block.split("\n");
-  lines.forEach((line, index) => {
-    const lineTokens = tokenizeLine(line);
-    tokens.push(...lineTokens);
-    const isRuleLine = lineTokens.length === 1 && (lineTokens[0]?.type === "hr" || lineTokens[0]?.type === "hr-double");
-    if (index < lines.length - 1 && !isRuleLine) tokens.push({ type: "br" });
-  });
-  return tokens;
-};
-var tokenize = (input) => {
-  if (!input) return [];
-  const tokens = [];
-  let cursor = 0;
-  while (cursor < input.length) {
-    const fenceStart = input.indexOf("```", cursor);
-    if (fenceStart === -1) {
-      tokens.push(...tokenizeTextBlock(input.slice(cursor)));
-      break;
-    }
-    if (fenceStart > cursor) {
-      tokens.push(...tokenizeTextBlock(input.slice(cursor, fenceStart)));
-    }
-    const fenceEnd = input.indexOf("```", fenceStart + 3);
-    if (fenceEnd === -1) {
-      tokens.push(...tokenizeTextBlock(input.slice(fenceStart)));
-      break;
-    }
-    const fenceContent = input.slice(fenceStart + 3, fenceEnd);
-    const delimiterIndex = fenceContent.search(/[\r\n]/);
-    let codeContent = fenceContent;
-    if (delimiterIndex >= 0) {
-      codeContent = fenceContent.slice(delimiterIndex).replace(/^\r?\n/, "");
-    }
-    tokens.push({ type: "code-block", content: codeContent.replace(/\r\n/g, "\n") });
-    cursor = fenceEnd + 3;
-  }
-  return tokens;
-};
-
-// src/text/defaults.ts
-var FONT_FAMILY_MAP = {
-  handwriting: '"Architects Daughter", cursive',
-  "sans-serif": '"Atkinson Hyperlegible Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-  serif: '"Lora", "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
-  monospace: '"Inconsolata", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  informal: '"Shantell Sans", ui-handwriting, cursive'
-};
-var FONT_SIZE_MAP = {
-  S: 14,
-  M: 16,
-  L: 24,
-  XL: 36
-};
-var LINE_HEIGHT_MAP = {
-  S: 20,
-  M: 24,
-  L: 32,
-  XL: 40
-};
-var CODE_BLOCK_PADDING_X = 6;
-var CODE_BLOCK_MARGIN_Y = 4;
-var CONTENT_HEIGHT_BUFFER = 4;
-var CONTENT_PADDING = 6;
-var DEFAULT_TEXT_COLOR = "#1f2937";
-var DEFAULT_HIGHLIGHT_COLOR = "#fde047";
-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;
-var measureCtx = measureCanvas?.getContext("2d") ?? null;
-var widthCache = /* @__PURE__ */ new Map();
-var getCanvasFont = (opts) => {
-  const weight = opts.type === "bold" || opts.textStyle === "bold" ? "700" : "400";
-  const italic = opts.type === "italic" || opts.textStyle === "italic" ? "italic" : "normal";
-  const family = opts.type === "code" ? FONT_FAMILY_MAP.monospace : FONT_FAMILY_MAP[opts.fontFamily];
-  return `${italic} ${weight} ${FONT_SIZE_MAP[opts.fontSize]}px ${family}`;
-};
-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 cached2 = widthCache.get(key);
-  if (cached2 !== void 0) return cached2;
-  if (!measureCtx) {
-    return opts.text.length * FONT_SIZE_MAP[opts.fontSize] * 0.55;
-  }
-  measureCtx.font = font;
-  const width = measureCtx.measureText(opts.text).width;
-  widthCache.set(key, width);
-  if (widthCache.size > MAX_WIDTH_CACHE_SIZE) {
-    const oldestKey = widthCache.keys().next().value;
-    if (oldestKey !== void 0) widthCache.delete(oldestKey);
-  }
-  return width;
-};
-var clearMeasureCache = () => {
-  widthCache.clear();
-};
-
-// src/text/layout.ts
-var splitChunks = (text) => text.split(/(\s+)/g).filter(Boolean);
-var wrapCodeLine = (line, opts, maxWidth) => {
-  const normalized = line.replace(/\t/g, "  ");
-  if (!normalized) return [""];
-  const wrapped = [];
-  let part = "";
-  for (const ch of normalized) {
-    const next = part + ch;
-    const nextWidth = measureText({
-      text: next,
-      type: "code",
-      fontFamily: opts.fontFamily,
-      fontSize: opts.fontSize,
-      textStyle: "normal"
-    });
-    if (part && nextWidth > maxWidth) {
-      wrapped.push(part);
-      part = ch;
-    } else {
-      part = next;
-    }
-  }
-  if (part) wrapped.push(part);
-  return wrapped;
-};
-var layoutTokens = (tokens, opts) => {
-  const maxWidth = Math.max(40, opts.width);
-  const lines = [];
-  let currentRuns = [];
-  let cursorX = 0;
-  const pushLine = () => {
-    lines.push({ kind: "text", runs: currentRuns });
-    currentRuns = [];
-    cursorX = 0;
-  };
-  const pushRule = (double) => {
-    if (currentRuns.length > 0) pushLine();
-    lines.push({ kind: "rule", double });
-  };
-  const pushCodeBlock = (content) => {
-    if (currentRuns.length > 0) pushLine();
-    const rawLines = content.split("\n");
-    const visualRuns = [];
-    const codeMaxWidth = Math.max(20, maxWidth - CODE_BLOCK_PADDING_X * 2);
-    for (const raw of rawLines) {
-      for (const part of wrapCodeLine(raw, opts, codeMaxWidth)) {
-        visualRuns.push([{ text: part, type: "code" }]);
-      }
-    }
-    if (visualRuns.length === 0) {
-      lines.push({ kind: "code-block", runs: [], isFirst: true, isLast: true });
-      return;
-    }
-    for (let index = 0; index < visualRuns.length; index++) {
-      const runs = visualRuns[index];
-      lines.push({
-        kind: "code-block",
-        runs,
-        isFirst: index === 0,
-        isLast: index === visualRuns.length - 1
-      });
-    }
-  };
-  const pushChunk = (chunk, type) => {
-    if (!chunk) return;
-    const chunkWidth = measureText({
-      text: chunk,
-      type,
-      fontFamily: opts.fontFamily,
-      fontSize: opts.fontSize,
-      textStyle: opts.textStyle
-    });
-    if (!chunk.trim()) {
-      if (cursorX === 0) return;
-      currentRuns.push({ text: chunk, type });
-      cursorX += chunkWidth;
-      return;
-    }
-    if (cursorX > 0 && cursorX + chunkWidth > maxWidth) {
-      pushLine();
-    }
-    if (chunkWidth > maxWidth && chunk.length > 1) {
-      let part = "";
-      for (const ch of chunk) {
-        const next = part + ch;
-        const nextWidth = measureText({
-          text: next,
-          type,
-          fontFamily: opts.fontFamily,
-          fontSize: opts.fontSize,
-          textStyle: opts.textStyle
-        });
-        if (cursorX > 0 && nextWidth > maxWidth) {
-          if (part) {
-            currentRuns.push({ text: part, type });
-            cursorX += measureText({
-              text: part,
-              type,
-              fontFamily: opts.fontFamily,
-              fontSize: opts.fontSize,
-              textStyle: opts.textStyle
-            });
-          }
-          pushLine();
-          part = ch;
-        } else {
-          part = next;
-        }
-      }
-      if (part) {
-        currentRuns.push({ text: part, type });
-        cursorX += measureText({
-          text: part,
-          type,
-          fontFamily: opts.fontFamily,
-          fontSize: opts.fontSize,
-          textStyle: opts.textStyle
-        });
-      }
-      return;
-    }
-    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);
-      continue;
-    }
-    if (token.type === "br") {
-      pushLine();
-      continue;
-    }
-    if (token.type === "hr") {
-      pushRule(false);
-      continue;
-    }
-    if (token.type === "hr-double") {
-      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) {
-    lines.push({ kind: "text", runs: currentRuns });
-  }
-  return lines;
-};
-
-// src/text/font-epoch.ts
-var fontEpochListeners = /* @__PURE__ */ new Set();
-var fontEpoch = 0;
-var fontTrackingInitialized = false;
-var emitFontEpoch = () => {
-  for (const listener of fontEpochListeners) listener(fontEpoch);
-};
-var bumpFontEpoch = () => {
-  fontEpoch += 1;
-  clearMeasureCache();
-  emitFontEpoch();
-};
-var initFontTracking = () => {
-  if (fontTrackingInitialized) return;
-  fontTrackingInitialized = true;
-  if (typeof document === "undefined" || !("fonts" in document)) return;
-  const fontSet = document.fonts;
-  let didSettleInitialFonts = false;
-  fontSet.ready.then(() => {
-    if (didSettleInitialFonts) return;
-    didSettleInitialFonts = true;
-    bumpFontEpoch();
-  }).catch(() => {
-  });
-  fontSet.addEventListener?.("loadingdone", () => {
-    if (!didSettleInitialFonts) didSettleInitialFonts = true;
-    bumpFontEpoch();
-  });
-};
-var subscribeFontEpoch = (listener) => {
-  initFontTracking();
-  fontEpochListeners.add(listener);
-  return () => {
-    fontEpochListeners.delete(listener);
-  };
-};
-var getFontEpoch = () => fontEpoch;
-
-// src/text/render-scale.ts
-var MIN_RENDER_SCALE = 0.15;
-var MAX_RENDER_SCALE = 1.5;
-var MAX_RENDER_WIDTH = 2e3;
-var MAX_RENDER_HEIGHT = 1200;
-var quantizeZoom = (value) => {
-  if (!Number.isFinite(value)) return 1;
-  return Math.max(0.1, Math.round(value * 10) / 10);
-};
-var quantizeDpr = (value) => {
-  if (!Number.isFinite(value)) return 1;
-  const clamped = Math.max(1, Math.min(3, value));
-  return Math.round(clamped * 4) / 4;
-};
-var resolveRenderScale = (baseScale, zoom, isMoving2) => {
-  const clampedBase = Math.max(MIN_RENDER_SCALE, Math.min(MAX_RENDER_SCALE, baseScale));
-  let idleScale = clampedBase;
-  if (zoom <= 0.4) {
-    idleScale = 0.45;
-  } else if (zoom <= 0.7) {
-    idleScale = 0.85;
-  } else if (zoom <= 1) {
-    idleScale = 1.15;
-  } else if (zoom <= 1.8) {
-    idleScale = 1.35;
-  } else {
-    idleScale = 1 + (zoom - 1.8) * 0.2;
-  }
-  idleScale = Math.max(MIN_RENDER_SCALE, Math.min(MAX_RENDER_SCALE, idleScale));
-  if (isMoving2) {
-    let movingScale = idleScale * (zoom >= 0.4 ? 0.72 : 0.6);
-    if (zoom < 0.4) {
-      movingScale = Math.min(movingScale, 0.22);
-    } else if (zoom <= 0.7) {
-      movingScale = Math.min(movingScale, 0.4);
-    }
-    return Math.max(MIN_RENDER_SCALE, Math.min(0.65, movingScale));
-  }
-  return idleScale;
-};
-var clampEffectiveScale = (baseScale, width, height) => {
-  const limiter = Math.min(
-    1,
-    MAX_RENDER_WIDTH / Math.max(1, width * baseScale),
-    MAX_RENDER_HEIGHT / Math.max(1, height * baseScale)
-  );
-  return baseScale * limiter;
-};
-
-// src/text/estimate-height.ts
-var getLineAdvance = (line, lineHeight) => {
-  if (line.kind !== "code-block") return lineHeight;
-  let advance = lineHeight;
-  if (line.isFirst) advance += CODE_BLOCK_MARGIN_Y;
-  if (line.isLast) advance += CODE_BLOCK_MARGIN_Y;
-  return advance;
-};
-var getContentHeight = (lines, lineHeight) => Math.max(
-  lineHeight,
-  lines.reduce((sum, line) => sum + getLineAdvance(line, lineHeight), 0)
-);
-var estimateMarkdownContentHeight = ({
-  text,
-  width,
-  fontFamily = "handwriting",
-  fontSize = "M",
-  textStyle = "normal"
-}) => {
-  const normalizedText = text.trim();
-  if (!normalizedText) return 0;
-  const resolvedWidth = Math.max(40, Math.ceil(width));
-  const lines = layoutTokens(tokenize(text), {
-    width: resolvedWidth,
-    fontFamily,
-    fontSize,
-    textStyle
-  });
-  const lineHeight = LINE_HEIGHT_MAP[fontSize];
-  return getContentHeight(lines, lineHeight) + CONTENT_HEIGHT_BUFFER;
-};
-var getMarkdownLineHeightPx = (fontSize) => LINE_HEIGHT_MAP[fontSize];
-
-// src/text/paint-canvas.ts
-var getLineAdvance2 = (line, lineHeight) => {
-  if (line.kind !== "code-block") return lineHeight;
-  let advance = lineHeight;
-  if (line.isFirst) advance += CODE_BLOCK_MARGIN_Y;
-  if (line.isLast) advance += CODE_BLOCK_MARGIN_Y;
-  return advance;
-};
-var getTextX = (opts, lineWidth) => {
-  if (opts.align === "center") return Math.floor((opts.width - lineWidth) / 2);
-  if (opts.align === "right") return Math.max(0, opts.width - lineWidth);
-  return 0;
-};
-var drawRunDecoration = (ctx, x, y, width, type, fontSize) => {
-  if (type === "underline" || type === "link") {
-    const lineY = y + 2;
-    ctx.beginPath();
-    ctx.moveTo(x, lineY);
-    ctx.lineTo(x + width, lineY);
-    ctx.lineWidth = 1;
-    ctx.stroke();
+var drawRunDecoration = (ctx, x, y, width, type, fontSize) => {
+  if (type === "underline" || type === "link") {
+    const lineY = y + 2;
+    ctx.beginPath();
+    ctx.moveTo(x, lineY);
+    ctx.lineTo(x + width, lineY);
+    ctx.lineWidth = 1;
+    ctx.stroke();
   }
   if (type === "strike") {
     const lineY = y - Math.floor(fontSize * 0.35);
@@ -2624,12 +1850,12 @@ var clearTextBitmapCache = () => {
 };
 var getTextBitmapCacheSize = () => renderCache.size;
 var FREEHAND_CACHE_MAX = 500;
-var cache4 = /* @__PURE__ */ new Map();
+var cache3 = /* @__PURE__ */ new Map();
 var remember = (key, path) => {
-  cache4.set(key, path);
-  if (cache4.size > FREEHAND_CACHE_MAX) {
-    const oldest = cache4.keys().next().value;
-    if (oldest !== void 0) cache4.delete(oldest);
+  cache3.set(key, path);
+  if (cache3.size > FREEHAND_CACHE_MAX) {
+    const oldest = cache3.keys().next().value;
+    if (oldest !== void 0) cache3.delete(oldest);
   }
 };
 var signaturePoints = (samples) => {
@@ -2681,10 +1907,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 = cache4.get(cacheKey);
+  const hit = cache3.get(cacheKey);
   if (hit) {
-    cache4.delete(cacheKey);
-    cache4.set(cacheKey, hit);
+    cache3.delete(cacheKey);
+    cache3.set(cacheKey, hit);
     return hit;
   }
   const pts = buildPressurePoints(samples);
@@ -2741,62 +1967,36 @@ var drawEdge = (ctx, edge, geom, sourceNode, targetNode, scale, theme, opts) =>
   const drawTargetArrow = targetArrowhead !== "none" && headEndWorld * scale >= ARROWHEAD_VISIBILITY_THRESHOLD_PX;
   const lineStart = drawSourceArrow ? retreatFromPoint(samples, clip.startIndex, clip.startPoint, headStartWorld, 1) : clip.startPoint;
   const lineEnd = drawTargetArrow ? retreatFromPoint(samples, clip.endIndex, clip.endPoint, headEndWorld, -1) : clip.endPoint;
-  const useRough = (opts?.roughEnabled ?? false) && (style?.roughness ?? 0) > 0;
+  const isSolidStroke = (style?.strokeStyle ?? "solid") === "solid";
+  const useRough = isSolidStroke && (opts?.roughEnabled ?? false) && (style?.roughness ?? 0) > 0;
   if (useRough) {
     const clipped = [lineStart];
     for (let i = clip.startIndex + 1; i < clip.endIndex; i++) clipped.push(samples[i]);
     clipped.push(lineEnd);
-    const isSolid = (style?.strokeStyle ?? "solid") === "solid";
-    if (isSolid) {
-      const seed = edge.id ? seedFromId(edge.id) % 2147483646 + 1 : 1337;
-      const path = getOrBuildFreehandPath(clipped, strokeWidth, seed);
-      if (path) {
-        ctx.save();
-        ctx.fillStyle = strokeColor;
-        ctx.fill(path);
-        ctx.restore();
-        if (drawSourceArrow) {
-          const tipDir = directionTowardTip(samples, clip.startIndex, clip.startPoint, 1);
-          drawArrowhead(
-            ctx,
-            sourceArrowhead,
-            clip.startPoint,
-            negateVec(tipDir),
-            strokeColor,
-            strokeWidth
-          );
-        }
-        if (drawTargetArrow) {
-          const tipDir = directionTowardTip(samples, clip.endIndex, clip.endPoint, -1);
-          drawArrowhead(ctx, targetArrowhead, clip.endPoint, tipDir, strokeColor, strokeWidth);
-        }
-        if (edge.content?.trim()) drawEdgeLabel(ctx, edge, geom, scale, theme, opts);
-        return;
+    const seed = edge.id ? seedFromId(edge.id) % 2147483646 + 1 : 1337;
+    const path = getOrBuildFreehandPath(clipped, strokeWidth, seed);
+    if (path) {
+      ctx.save();
+      ctx.fillStyle = strokeColor;
+      ctx.fill(path);
+      ctx.restore();
+      if (drawSourceArrow) {
+        const tipDir = directionTowardTip(samples, clip.startIndex, clip.startPoint, 1);
+        drawArrowhead(
+          ctx,
+          sourceArrowhead,
+          clip.startPoint,
+          negateVec(tipDir),
+          strokeColor,
+          strokeWidth
+        );
       }
-    } else {
-      const ok = drawRoughEdge(ctx, edge, clipped, scale, theme);
-      if (!ok) {
-        onRoughReady(() => {
-        });
-      } else {
-        if (drawSourceArrow) {
-          const tipDir = directionTowardTip(samples, clip.startIndex, clip.startPoint, 1);
-          drawArrowhead(
-            ctx,
-            sourceArrowhead,
-            clip.startPoint,
-            negateVec(tipDir),
-            strokeColor,
-            strokeWidth
-          );
-        }
-        if (drawTargetArrow) {
-          const tipDir = directionTowardTip(samples, clip.endIndex, clip.endPoint, -1);
-          drawArrowhead(ctx, targetArrowhead, clip.endPoint, tipDir, strokeColor, strokeWidth);
-        }
-        if (edge.content?.trim()) drawEdgeLabel(ctx, edge, geom, scale, theme, opts);
-        return;
+      if (drawTargetArrow) {
+        const tipDir = directionTowardTip(samples, clip.endIndex, clip.endPoint, -1);
+        drawArrowhead(ctx, targetArrowhead, clip.endPoint, tipDir, strokeColor, strokeWidth);
       }
+      if (edge.content?.trim()) drawEdgeLabel(ctx, edge, geom, scale, theme, opts);
+      return;
     }
   }
   ctx.save();
@@ -3429,6 +2629,7 @@ var detectConflicts = (batch, getNode, getEdge) => {
 };
 var sameValue = (a, b) => {
   if (a === b) return true;
+  if (a == null && b == null) return true;
   if (a == null || b == null) return false;
   if (typeof a !== typeof b) return false;
   if (typeof a === "object") return JSON.stringify(a) === JSON.stringify(b);
@@ -3771,12 +2972,20 @@ var createCanvasStore = (opts = {}) => {
       applyOpInternal(op);
     }
   };
+  const normalizeUndefinedToNull = (obj) => {
+    const out = {};
+    for (const key of Object.keys(obj)) {
+      const v = obj[key];
+      out[key] = v === void 0 ? null : v;
+    }
+    return out;
+  };
   const slicePrev = (current, patch) => {
     const prev = {};
     for (const key of Object.keys(patch)) {
       prev[key] = current[key];
     }
-    return prev;
+    return normalizeUndefinedToNull(prev);
   };
   const populateInitial = (scene) => {
     const seededFrameOrder = [];
@@ -3832,7 +3041,10 @@ var createCanvasStore = (opts = {}) => {
       enqueueOp({
         type: "node.update",
         id,
-        patch: resolvedPatch,
+        // Normalize both halves so explicit-clear patches (e.g.
+        // `updateNode(id, { content: undefined })`) and first-time-set
+        // prev slices both survive a JSON-serialized sync transport.
+        patch: normalizeUndefinedToNull(resolvedPatch),
         prev: slicePrev(current, resolvedPatch)
       });
     },
@@ -3910,982 +3122,1701 @@ var createCanvasStore = (opts = {}) => {
       enqueueOp({ type: "edge.add", edge: withZ });
       return withZ.id;
     },
-    updateEdge(id, patch) {
-      const current = edgeAtoms.get(id)?.value;
-      if (!current) return;
-      enqueueOp({ type: "edge.update", id, patch, prev: slicePrev(current, patch) });
+    updateEdge(id, patch) {
+      const current = edgeAtoms.get(id)?.value;
+      if (!current) return;
+      enqueueOp({
+        type: "edge.update",
+        id,
+        patch: normalizeUndefinedToNull(patch),
+        prev: slicePrev(current, patch)
+      });
+    },
+    removeEdge(id) {
+      const edge = edgeAtoms.get(id)?.value;
+      if (!edge) return;
+      enqueueOp({ type: "edge.remove", edge });
+    },
+    bringToFront(ids) {
+      this.batch(() => {
+        for (const id of ids) {
+          if (nodeAtoms.has(id)) this.updateNode(id, { z: ++topZ });
+          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: ++topZ });
+        }
+      });
+    },
+    sendToBack(ids) {
+      this.batch(() => {
+        for (const id of ids) {
+          if (nodeAtoms.has(id)) this.updateNode(id, { z: --bottomZ });
+          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: --bottomZ });
+        }
+      });
+    },
+    bringForward(ids) {
+      const targets = new Set(ids);
+      const allZ = [];
+      for (const a of nodeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
+      for (const a of edgeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
+      allZ.sort((a, b) => a - b);
+      this.batch(() => {
+        for (const id of ids) {
+          const node = nodeAtoms.get(id)?.value;
+          const edge = node ? null : edgeAtoms.get(id)?.value;
+          const currentZ = node?.z ?? edge?.z;
+          if (currentZ === void 0) continue;
+          const idx = binaryFirstGreater(allZ, currentZ);
+          const nextZ = idx >= 0 ? allZ[idx] + 1 : currentZ + 1;
+          if (node) this.updateNode(id, { z: nextZ });
+          else this.updateEdge(id, { z: nextZ });
+        }
+      });
+    },
+    sendBackward(ids) {
+      const targets = new Set(ids);
+      const allZ = [];
+      for (const a of nodeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
+      for (const a of edgeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
+      allZ.sort((a, b) => a - b);
+      this.batch(() => {
+        for (const id of ids) {
+          const node = nodeAtoms.get(id)?.value;
+          const edge = node ? null : edgeAtoms.get(id)?.value;
+          const currentZ = node?.z ?? edge?.z;
+          if (currentZ === void 0) continue;
+          const idx = binaryLastLess(allZ, currentZ);
+          const nextZ = idx >= 0 ? allZ[idx] - 1 : currentZ - 1;
+          if (node) this.updateNode(id, { z: nextZ });
+          else this.updateEdge(id, { z: nextZ });
+        }
+      });
+    },
+    upsertGroup(group) {
+      const prev = groupAtoms.get(group.id)?.value;
+      enqueueOp({ type: "group.upsert", group, prev });
+    },
+    removeGroup(id) {
+      const group = groupAtoms.get(id)?.value;
+      if (!group) return;
+      enqueueOp({ type: "group.remove", group });
+    },
+    batch(fn) {
+      signia.transact(() => {
+        startBatch();
+        try {
+          fn();
+        } finally {
+          const batch = endBatch();
+          if (batch) emitChange(batch);
+        }
+      });
+    },
+    applyOp(op, applyOpts) {
+      const origin = applyOpts?.origin ?? "local";
+      if (origin !== "local") {
+        applyOpInternal(op);
+        emitChange({
+          id: asBatchId(idGenerator()),
+          clientId,
+          ts: Date.now(),
+          origin,
+          ops: [op]
+        });
+        return;
+      }
+      enqueueOp(op);
+    },
+    applyBatch(b) {
+      signia.transact(() => {
+        if (b.origin === "remote") {
+          const conflicts = detectConflicts(
+            b,
+            (id) => nodeAtoms.get(id)?.value,
+            (id) => edgeAtoms.get(id)?.value
+          );
+          if (conflicts.length > 0) emit("conflict", { batch: b, conflicts });
+        }
+        for (const op of b.ops) applyOpInternal(op);
+        emitChange(b);
+      });
+    },
+    canUndo: () => undoStack.length > 0,
+    canRedo: () => redoStack.length > 0,
+    undo() {
+      const batch = undoStack.pop();
+      if (!batch) return false;
+      const ops = inverseBatch(batch);
+      const inverseB = {
+        id: asBatchId(idGenerator()),
+        clientId,
+        ts: Date.now(),
+        origin: "history",
+        ops
+      };
+      signia.transact(() => {
+        for (const op of ops) applyOpInternal(op);
+        emit("change", inverseB);
+      });
+      redoStack.push(batch);
+      return true;
+    },
+    redo() {
+      const batch = redoStack.pop();
+      if (!batch) return false;
+      const redoB = { ...batch, origin: "history" };
+      signia.transact(() => {
+        for (const op of redoB.ops) applyOpInternal(op);
+        emit("change", redoB);
+      });
+      undoStack.push(batch);
+      return true;
+    },
+    clearHistory() {
+      undoStack.length = 0;
+      redoStack.length = 0;
+    },
+    // reads
+    getNode: (id) => nodeAtoms.get(id)?.value,
+    getEdge: (id) => edgeAtoms.get(id)?.value,
+    getGroup: (id) => groupAtoms.get(id)?.value,
+    getAllNodes: () => nodeIdsAtom.value.map((id) => nodeAtoms.get(id).value),
+    getAllEdges: () => edgeIdsAtom.value.map((id) => edgeAtoms.get(id).value),
+    getAllGroups: () => groupIdsAtom.value.map((id) => groupAtoms.get(id).value),
+    getNodeCount: () => nodeIdsAtom.value.length,
+    getEdgeCount: () => edgeIdsAtom.value.length,
+    getGroupCount: () => groupIdsAtom.value.length,
+    getFrames: () => {
+      const out = [];
+      for (const id of frameOrderAtom.value) {
+        const n = nodeAtoms.get(id)?.value;
+        if (n && n.type === "frame") out.push(n);
+      }
+      return out;
+    },
+    setFrameOrder(ids) {
+      const valid = /* @__PURE__ */ new Set();
+      for (const a of nodeAtoms.values()) {
+        if (a.value.type === "frame") valid.add(a.value.id);
+      }
+      const filtered = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const id of ids) {
+        if (valid.has(id) && !seen.has(id)) {
+          filtered.push(id);
+          seen.add(id);
+        }
+      }
+      for (const id of valid) {
+        if (!seen.has(id)) filtered.push(id);
+      }
+      const prev = [...frameOrderAtom.value];
+      if (filtered.length === prev.length && filtered.every((id, i) => id === prev[i])) {
+        return;
+      }
+      enqueueOp({ type: "frame.reorder", ids: filtered, prev });
+    },
+    getNodesInFrame(id) {
+      const frame = nodeAtoms.get(id)?.value;
+      if (!frame || frame.type !== "frame") return [];
+      const frameAabb = nodeAABB(frame);
+      const candidates = nodeIndex.queryRect(frameAabb);
+      const out = [];
+      for (const cid of candidates) {
+        if (cid === id) continue;
+        const node = nodeAtoms.get(cid)?.value;
+        if (!node || node.type === "frame") continue;
+        const a = nodeAABB(node);
+        if (a.x >= frameAabb.x && a.y >= frameAabb.y && a.x + a.w <= frameAabb.x + frameAabb.w && a.y + a.h <= frameAabb.y + frameAabb.h) {
+          out.push(node);
+        }
+      }
+      return out;
     },
-    removeEdge(id) {
+    getEdgeGeometry(id) {
       const edge = edgeAtoms.get(id)?.value;
-      if (!edge) return;
-      enqueueOp({ type: "edge.remove", edge });
+      if (!edge) return void 0;
+      const version = edgeVersions.get(id) ?? 0;
+      return edgeGeoCache.get(edge, version, getNodeForGeo) ?? void 0;
     },
-    bringToFront(ids) {
-      this.batch(() => {
-        for (const id of ids) {
-          if (nodeAtoms.has(id)) this.updateNode(id, { z: ++topZ });
-          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: ++topZ });
-        }
-      });
+    getIncidentEdges(id) {
+      const set = incidentEdges.get(id);
+      return set ? [...set] : [];
     },
-    sendToBack(ids) {
-      this.batch(() => {
-        for (const id of ids) {
-          if (nodeAtoms.has(id)) this.updateNode(id, { z: --bottomZ });
-          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: --bottomZ });
-        }
-      });
+    getNodeTypeDef(type) {
+      return nodeTypeRegistry.get(type);
     },
-    bringForward(ids) {
-      const targets = new Set(ids);
-      const allZ = [];
-      for (const a of nodeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
-      for (const a of edgeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
-      allZ.sort((a, b) => a - b);
-      this.batch(() => {
-        for (const id of ids) {
-          const node = nodeAtoms.get(id)?.value;
-          const edge = node ? null : edgeAtoms.get(id)?.value;
-          const currentZ = node?.z ?? edge?.z;
-          if (currentZ === void 0) continue;
-          const idx = binaryFirstGreater(allZ, currentZ);
-          const nextZ = idx >= 0 ? allZ[idx] + 1 : currentZ + 1;
-          if (node) this.updateNode(id, { z: nextZ });
-          else this.updateEdge(id, { z: nextZ });
-        }
-      });
+    querySpatial(q) {
+      const rect = q.rect ?? (q.point ? { x: q.point.x, y: q.point.y, w: 0, h: 0 } : null);
+      if (!rect) return { nodes: [], edges: [] };
+      return {
+        nodes: nodeIndex.queryRect(rect),
+        edges: edgeIndex.queryRect(rect)
+      };
     },
-    sendBackward(ids) {
-      const targets = new Set(ids);
-      const allZ = [];
-      for (const a of nodeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
-      for (const a of edgeAtoms.values()) if (!targets.has(a.value.id)) allZ.push(a.value.z);
-      allZ.sort((a, b) => a - b);
-      this.batch(() => {
-        for (const id of ids) {
-          const node = nodeAtoms.get(id)?.value;
-          const edge = node ? null : edgeAtoms.get(id)?.value;
-          const currentZ = node?.z ?? edge?.z;
-          if (currentZ === void 0) continue;
-          const idx = binaryLastLess(allZ, currentZ);
-          const nextZ = idx >= 0 ? allZ[idx] - 1 : currentZ - 1;
-          if (node) this.updateNode(id, { z: nextZ });
-          else this.updateEdge(id, { z: nextZ });
-        }
-      });
+    getCamera: () => cameraAtom.value,
+    setCamera(patch) {
+      const next = { ...cameraAtom.value, ...patch };
+      cameraAtom.set(next);
+      emit("camera", next);
     },
-    upsertGroup(group) {
-      const prev = groupAtoms.get(group.id)?.value;
-      enqueueOp({ type: "group.upsert", group, prev });
+    getSelection: () => selectionAtom.value,
+    setSelection(ids) {
+      selectionAtom.set(ids);
+      emit("selection", ids);
     },
-    removeGroup(id) {
-      const group = groupAtoms.get(id)?.value;
-      if (!group) return;
-      enqueueOp({ type: "group.remove", group });
+    getInteractionState: () => interactionAtom.value,
+    setInteractionState(patch) {
+      const next = { ...interactionAtom.value, ...patch };
+      interactionAtom.set(next);
+      emit("interaction", next);
     },
-    batch(fn) {
-      signia.transact(() => {
-        startBatch();
-        try {
-          fn();
-        } finally {
-          const batch = endBatch();
-          if (batch) emitChange(batch);
+    resetInteractionState() {
+      const next = idleInteractionState();
+      interactionAtom.set(next);
+      emit("interaction", next);
+    },
+    beginEdit(id) {
+      let target = null;
+      if (nodeAtoms.has(id)) target = { kind: "node", id };
+      else if (edgeAtoms.has(id)) target = { kind: "edge", id };
+      if (!target) return;
+      const next = {
+        ...interactionAtom.value,
+        mode: "editing",
+        editingTarget: target
+      };
+      interactionAtom.set(next);
+      emit("interaction", next);
+    },
+    commitEdit(content) {
+      const state = interactionAtom.value;
+      if (state.mode !== "editing" || !state.editingTarget) return;
+      const target = state.editingTarget;
+      if (target.kind === "node") this.updateNode(target.id, { content });
+      else this.updateEdge(target.id, { content });
+      const idleState = { ...interactionAtom.value, mode: "idle", editingTarget: null };
+      interactionAtom.set(idleState);
+      emit("interaction", idleState);
+    },
+    cancelEdit() {
+      const state = interactionAtom.value;
+      if (state.mode !== "editing") return;
+      const idleState = { ...state, mode: "idle", editingTarget: null };
+      interactionAtom.set(idleState);
+      emit("interaction", idleState);
+    },
+    presence: {
+      setLocal(patch) {
+        const next = { ...localPresenceAtom.value, ...patch };
+        localPresenceAtom.set(next);
+        emit("presence", { state: next });
+      },
+      getLocal: () => localPresenceAtom.value,
+      get: (id) => remotePresence.get(id),
+      getAll: () => remotePresence,
+      applyRemote(id, state) {
+        if (state === null) {
+          if (remotePresence.delete(id)) emit("presence", { clientId: id, removed: true });
+          return;
         }
-      });
+        remotePresence.set(id, state);
+        emit("presence", { state });
+      }
+    },
+    subscribe(event, cb) {
+      subscribers[event].add(cb);
+      return () => {
+        subscribers[event].delete(cb);
+      };
+    }
+  };
+  return store;
+};
+
+// src/store/sync.ts
+var attachSync = (store, adapter) => {
+  if (!adapter.capabilities.causalOrdering && !adapter.capabilities.crdt) {
+    throw new Error(
+      "SyncAdapter must advertise capabilities.causalOrdering or capabilities.crdt. See ARCHITECTURE.md \xA710.6."
+    );
+  }
+  const unsubChange = store.subscribe("change", (batch) => {
+    if (batch.origin !== "remote") adapter.sendBatch(batch);
+  });
+  const unsubPresence = store.subscribe("presence", (e) => {
+    if ("removed" in e && e.removed) return;
+    if (e.state.clientId !== store.clientId) return;
+    const { clientId: _id, ...patch } = e.state;
+    adapter.sendPresence(patch);
+  });
+  const unsubRemoteBatch = adapter.onBatch((batch) => {
+    store.applyBatch({ ...batch, origin: "remote" });
+  });
+  const unsubRemotePresence = adapter.onPresence((clientId, state) => {
+    store.presence.applyRemote(clientId, state);
+  });
+  return () => {
+    unsubChange();
+    unsubPresence();
+    unsubRemoteBatch();
+    unsubRemotePresence();
+    adapter.destroy?.();
+  };
+};
+
+// src/store/palm-rejection.ts
+var PALM_REJECTION_GRACE_MS = 300;
+var createPalmRejectionState = () => ({
+  penActive: false,
+  lastPenUpAt: 0
+});
+var notePenActive = (state) => {
+  state.penActive = true;
+};
+var notePenInactive = (state, now) => {
+  state.penActive = false;
+  state.lastPenUpAt = now;
+};
+var shouldRejectTouch = (state, now) => {
+  if (state.penActive) return true;
+  return now - state.lastPenUpAt < PALM_REJECTION_GRACE_MS;
+};
+
+// src/codec/index.ts
+var migrators = /* @__PURE__ */ new Map();
+var registerMigrator = (fromVersion, fn) => {
+  migrators.set(fromVersion, fn);
+};
+var toSerialized = (scene) => ({
+  schemaVersion: scene.schemaVersion,
+  nodes: Object.values(scene.nodes),
+  edges: Object.values(scene.edges),
+  groups: Object.values(scene.groups),
+  camera: scene.camera,
+  selection: scene.selection,
+  ...scene.frameOrder && scene.frameOrder.length > 0 ? { frameOrder: scene.frameOrder } : {}
+});
+var fromSerialized = (raw) => {
+  let working = raw;
+  let version = working.schemaVersion ?? 0;
+  while (version < SCHEMA_VERSION) {
+    const fn = migrators.get(version);
+    if (!fn) {
+      throw new Error(
+        `Cannot migrate scene from schemaVersion ${version} to ${SCHEMA_VERSION}; no migrator registered`
+      );
+    }
+    working = fn(working);
+    version++;
+  }
+  const ser = working;
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    nodes: Object.fromEntries(ser.nodes.map((n) => [asNodeId(n.id), n])),
+    edges: Object.fromEntries(ser.edges.map((e) => [asEdgeId(e.id), e])),
+    groups: Object.fromEntries(ser.groups.map((g) => [asGroupId(g.id), g])),
+    camera: ser.camera,
+    selection: ser.selection,
+    ...ser.frameOrder ? { frameOrder: ser.frameOrder } : {}
+  };
+};
+var storeToJSON = (store) => ({
+  schemaVersion: SCHEMA_VERSION,
+  nodes: store.getAllNodes(),
+  edges: store.getAllEdges(),
+  groups: store.getAllGroups(),
+  camera: store.getCamera(),
+  selection: store.getSelection()
+});
+
+// src/render/canvas-setup.ts
+var HARD_MAX_DPR = 3;
+var defaultMaxDprForSize = (cssW, cssH) => {
+  const cssPx = cssW * cssH;
+  if (cssPx >= 25e5) return 1;
+  if (cssPx >= 15e5) return 1.5;
+  return 2;
+};
+var getDpr = (maxDpr, cssW = 0, cssH = 0) => {
+  if (typeof window === "undefined") return 1;
+  const raw = window.devicePixelRatio || 1;
+  const resolvedMax = maxDpr === void 0 && cssW > 0 && cssH > 0 ? defaultMaxDprForSize(cssW, cssH) : maxDpr ?? 1;
+  const cap = Math.max(1, Math.min(HARD_MAX_DPR, resolvedMax));
+  return Math.max(1, Math.min(cap, raw));
+};
+var setupSurface = (canvas, _maxDpr) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2d context unavailable");
+  return {
+    canvas,
+    ctx,
+    cssWidth: 0,
+    cssHeight: 0,
+    dpr: 1
+    // placeholder; `sizeSurface` writes the real value
+  };
+};
+var sizeSurface = (surface, cssW, cssH, maxDpr) => {
+  const dpr = getDpr(maxDpr, cssW, cssH);
+  if (surface.cssWidth === cssW && surface.cssHeight === cssH && surface.dpr === dpr) {
+    return false;
+  }
+  surface.cssWidth = cssW;
+  surface.cssHeight = cssH;
+  surface.dpr = dpr;
+  surface.canvas.width = Math.max(1, Math.round(cssW * dpr));
+  surface.canvas.height = Math.max(1, Math.round(cssH * dpr));
+  surface.canvas.style.width = `${cssW}px`;
+  surface.canvas.style.height = `${cssH}px`;
+  return true;
+};
+var clearSurface = (surface) => {
+  surface.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  surface.ctx.clearRect(0, 0, surface.canvas.width, surface.canvas.height);
+};
+
+// src/render/frame-loop.ts
+var createFrameLoop = ({ draw, historySize = 60 }) => {
+  let running = false;
+  let scheduled = false;
+  let frameId = 0;
+  const history = [];
+  let frames = 0;
+  let lastMs = 0;
+  let avgMs = 0;
+  const fpsWindow = [];
+  let fps = 0;
+  const tick = () => {
+    frameId = 0;
+    scheduled = false;
+    if (!running) return;
+    const t0 = performance.now();
+    draw();
+    const dur = performance.now() - t0;
+    history.push(dur);
+    if (history.length > historySize) history.shift();
+    let sum = 0;
+    for (const v of history) sum += v;
+    avgMs = sum / history.length;
+    lastMs = dur;
+    frames++;
+    fpsWindow.push(t0);
+    const cutoff = t0 - 1e3;
+    while (fpsWindow.length > 0 && fpsWindow[0] < cutoff) fpsWindow.shift();
+    fps = fpsWindow.length;
+  };
+  const schedule = () => {
+    if (scheduled || !running) return;
+    scheduled = true;
+    frameId = requestAnimationFrame(tick);
+  };
+  return {
+    start() {
+      if (running) return;
+      running = true;
+      schedule();
     },
-    applyOp(op, applyOpts) {
-      const origin = applyOpts?.origin ?? "local";
-      if (origin !== "local") {
-        applyOpInternal(op);
-        emitChange({
-          id: asBatchId(idGenerator()),
-          clientId,
-          ts: Date.now(),
-          origin,
-          ops: [op]
-        });
-        return;
+    stop() {
+      running = false;
+      if (frameId !== 0) {
+        cancelAnimationFrame(frameId);
+        frameId = 0;
       }
-      enqueueOp(op);
-    },
-    applyBatch(b) {
-      signia.transact(() => {
-        if (b.origin === "remote") {
-          const conflicts = detectConflicts(
-            b,
-            (id) => nodeAtoms.get(id)?.value,
-            (id) => edgeAtoms.get(id)?.value
-          );
-          if (conflicts.length > 0) emit("conflict", { batch: b, conflicts });
-        }
-        for (const op of b.ops) applyOpInternal(op);
-        emitChange(b);
-      });
-    },
-    canUndo: () => undoStack.length > 0,
-    canRedo: () => redoStack.length > 0,
-    undo() {
-      const batch = undoStack.pop();
-      if (!batch) return false;
-      const ops = inverseBatch(batch);
-      const inverseB = {
-        id: asBatchId(idGenerator()),
-        clientId,
-        ts: Date.now(),
-        origin: "history",
-        ops
-      };
-      signia.transact(() => {
-        for (const op of ops) applyOpInternal(op);
-        emit("change", inverseB);
-      });
-      redoStack.push(batch);
-      return true;
-    },
-    redo() {
-      const batch = redoStack.pop();
-      if (!batch) return false;
-      const redoB = { ...batch, origin: "history" };
-      signia.transact(() => {
-        for (const op of redoB.ops) applyOpInternal(op);
-        emit("change", redoB);
-      });
-      undoStack.push(batch);
-      return true;
-    },
-    clearHistory() {
-      undoStack.length = 0;
-      redoStack.length = 0;
+      scheduled = false;
     },
-    // reads
-    getNode: (id) => nodeAtoms.get(id)?.value,
-    getEdge: (id) => edgeAtoms.get(id)?.value,
-    getGroup: (id) => groupAtoms.get(id)?.value,
-    getAllNodes: () => nodeIdsAtom.value.map((id) => nodeAtoms.get(id).value),
-    getAllEdges: () => edgeIdsAtom.value.map((id) => edgeAtoms.get(id).value),
-    getAllGroups: () => groupIdsAtom.value.map((id) => groupAtoms.get(id).value),
-    getNodeCount: () => nodeIdsAtom.value.length,
-    getEdgeCount: () => edgeIdsAtom.value.length,
-    getGroupCount: () => groupIdsAtom.value.length,
-    getFrames: () => {
-      const out = [];
-      for (const id of frameOrderAtom.value) {
-        const n = nodeAtoms.get(id)?.value;
-        if (n && n.type === "frame") out.push(n);
-      }
-      return out;
+    requestFrame() {
+      schedule();
     },
-    setFrameOrder(ids) {
-      const valid = /* @__PURE__ */ new Set();
-      for (const a of nodeAtoms.values()) {
-        if (a.value.type === "frame") valid.add(a.value.id);
+    stats: () => ({ lastMs, avgMs, frames, fps })
+  };
+};
+
+// src/render/assets/cache.ts
+var MAX_ENTRIES2 = 256;
+var bucketSize = (px) => {
+  if (px <= 32) return 32;
+  if (px <= 64) return 64;
+  if (px <= 128) return 128;
+  if (px <= 256) return 256;
+  if (px <= 512) return 512;
+  return Math.ceil(px / 256) * 256;
+};
+var createAssetCache = (opts = {}) => {
+  const entries = /* @__PURE__ */ new Map();
+  let disposed = false;
+  const notify = () => {
+    if (disposed) return;
+    opts.onReady?.();
+  };
+  const touch = (key, entry) => {
+    entries.delete(key);
+    entries.set(key, entry);
+    if (entries.size > MAX_ENTRIES2) {
+      const oldestKey = entries.keys().next().value;
+      if (oldestKey !== void 0) {
+        const evicted = entries.get(oldestKey);
+        if (evicted?.kind === "icon" && evicted.bitmap) evicted.bitmap.close?.();
+        entries.delete(oldestKey);
       }
-      const filtered = [];
-      const seen = /* @__PURE__ */ new Set();
-      for (const id of ids) {
-        if (valid.has(id) && !seen.has(id)) {
-          filtered.push(id);
-          seen.add(id);
+    }
+  };
+  const startImageDecode = (key, src) => {
+    const entry = { kind: "image", state: "pending", bitmap: null };
+    touch(key, entry);
+    const img = new Image();
+    img.onload = () => {
+      if (disposed) return;
+      entry.state = "ready";
+      entry.bitmap = img;
+      notify();
+    };
+    img.onerror = (e) => {
+      if (disposed) return;
+      entry.state = "error";
+      entry.err = e;
+      notify();
+    };
+    img.src = src;
+  };
+  const startIconRaster = (key, markup, color, sizePx) => {
+    const entry = { kind: "icon", state: "pending", bitmap: null };
+    touch(key, entry);
+    const colored = color ? applySvgColor(markup, color) : markup;
+    const blob = new Blob([colored], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = async () => {
+      URL.revokeObjectURL(url);
+      if (disposed) return;
+      try {
+        const bitmap = await createImageBitmap(img, {
+          resizeWidth: sizePx,
+          resizeHeight: sizePx,
+          resizeQuality: "high"
+        });
+        if (disposed) {
+          bitmap.close?.();
+          return;
         }
+        entry.state = "ready";
+        entry.bitmap = bitmap;
+        notify();
+      } catch (e) {
+        entry.state = "error";
+        entry.err = e;
+        notify();
       }
-      for (const id of valid) {
-        if (!seen.has(id)) filtered.push(id);
-      }
-      const prev = [...frameOrderAtom.value];
-      if (filtered.length === prev.length && filtered.every((id, i) => id === prev[i])) {
-        return;
-      }
-      enqueueOp({ type: "frame.reorder", ids: filtered, prev });
-    },
-    getNodesInFrame(id) {
-      const frame = nodeAtoms.get(id)?.value;
-      if (!frame || frame.type !== "frame") return [];
-      const frameAabb = nodeAABB(frame);
-      const candidates = nodeIndex.queryRect(frameAabb);
-      const out = [];
-      for (const cid of candidates) {
-        if (cid === id) continue;
-        const node = nodeAtoms.get(cid)?.value;
-        if (!node || node.type === "frame") continue;
-        const a = nodeAABB(node);
-        if (a.x >= frameAabb.x && a.y >= frameAabb.y && a.x + a.w <= frameAabb.x + frameAabb.w && a.y + a.h <= frameAabb.y + frameAabb.h) {
-          out.push(node);
+    };
+    img.onerror = (e) => {
+      URL.revokeObjectURL(url);
+      if (disposed) return;
+      entry.state = "error";
+      entry.err = e;
+      notify();
+    };
+    img.src = url;
+  };
+  return {
+    getImage(src) {
+      const key = `img:${src}`;
+      const existing = entries.get(key);
+      if (existing && existing.kind === "image") {
+        if (existing.state === "ready") {
+          touch(key, existing);
+          return existing.bitmap;
         }
+        return null;
       }
-      return out;
-    },
-    getEdgeGeometry(id) {
-      const edge = edgeAtoms.get(id)?.value;
-      if (!edge) return void 0;
-      const version = edgeVersions.get(id) ?? 0;
-      return edgeGeoCache.get(edge, version, getNodeForGeo) ?? void 0;
-    },
-    getIncidentEdges(id) {
-      const set = incidentEdges.get(id);
-      return set ? [...set] : [];
-    },
-    getNodeTypeDef(type) {
-      return nodeTypeRegistry.get(type);
-    },
-    querySpatial(q) {
-      const rect = q.rect ?? (q.point ? { x: q.point.x, y: q.point.y, w: 0, h: 0 } : null);
-      if (!rect) return { nodes: [], edges: [] };
-      return {
-        nodes: nodeIndex.queryRect(rect),
-        edges: edgeIndex.queryRect(rect)
-      };
-    },
-    getCamera: () => cameraAtom.value,
-    setCamera(patch) {
-      const next = { ...cameraAtom.value, ...patch };
-      cameraAtom.set(next);
-      emit("camera", next);
-    },
-    getSelection: () => selectionAtom.value,
-    setSelection(ids) {
-      selectionAtom.set(ids);
-      emit("selection", ids);
-    },
-    getInteractionState: () => interactionAtom.value,
-    setInteractionState(patch) {
-      const next = { ...interactionAtom.value, ...patch };
-      interactionAtom.set(next);
-      emit("interaction", next);
-    },
-    resetInteractionState() {
-      const next = idleInteractionState();
-      interactionAtom.set(next);
-      emit("interaction", next);
-    },
-    beginEdit(id) {
-      let target = null;
-      if (nodeAtoms.has(id)) target = { kind: "node", id };
-      else if (edgeAtoms.has(id)) target = { kind: "edge", id };
-      if (!target) return;
-      const next = {
-        ...interactionAtom.value,
-        mode: "editing",
-        editingTarget: target
-      };
-      interactionAtom.set(next);
-      emit("interaction", next);
-    },
-    commitEdit(content) {
-      const state = interactionAtom.value;
-      if (state.mode !== "editing" || !state.editingTarget) return;
-      const target = state.editingTarget;
-      if (target.kind === "node") this.updateNode(target.id, { content });
-      else this.updateEdge(target.id, { content });
-      const idleState = { ...interactionAtom.value, mode: "idle", editingTarget: null };
-      interactionAtom.set(idleState);
-      emit("interaction", idleState);
-    },
-    cancelEdit() {
-      const state = interactionAtom.value;
-      if (state.mode !== "editing") return;
-      const idleState = { ...state, mode: "idle", editingTarget: null };
-      interactionAtom.set(idleState);
-      emit("interaction", idleState);
+      startImageDecode(key, src);
+      return null;
     },
-    presence: {
-      setLocal(patch) {
-        const next = { ...localPresenceAtom.value, ...patch };
-        localPresenceAtom.set(next);
-        emit("presence", { state: next });
-      },
-      getLocal: () => localPresenceAtom.value,
-      get: (id) => remotePresence.get(id),
-      getAll: () => remotePresence,
-      applyRemote(id, state) {
-        if (state === null) {
-          if (remotePresence.delete(id)) emit("presence", { clientId: id, removed: true });
-          return;
+    getIcon(markup, color, devicePixelSize) {
+      const size = bucketSize(Math.max(1, Math.ceil(devicePixelSize)));
+      const key = `icon:${size}:${color ?? ""}:${markup}`;
+      const existing = entries.get(key);
+      if (existing && existing.kind === "icon") {
+        if (existing.state === "ready") {
+          touch(key, existing);
+          return existing.bitmap;
         }
-        remotePresence.set(id, state);
-        emit("presence", { state });
+        return null;
       }
+      startIconRaster(key, markup, color, size);
+      return null;
     },
-    subscribe(event, cb) {
-      subscribers[event].add(cb);
-      return () => {
-        subscribers[event].delete(cb);
-      };
+    dispose() {
+      disposed = true;
+      for (const entry of entries.values()) {
+        if (entry.kind === "icon" && entry.bitmap) entry.bitmap.close?.();
+      }
+      entries.clear();
+    }
+  };
+};
+
+// src/render/assets/paint.ts
+var PLACEHOLDER_FILL = "#e5e7eb";
+var PLACEHOLDER_TEXT_FILL = "#94a3b8";
+var paintPlaceholder = (ctx, w, h, label) => {
+  ctx.fillStyle = PLACEHOLDER_FILL;
+  ctx.fillRect(0, 0, w, h);
+  if (w >= 32 && h >= 16) {
+    ctx.fillStyle = PLACEHOLDER_TEXT_FILL;
+    ctx.font = "11px system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, w / 2, h / 2);
+  }
+};
+var paintImageNode = (ctx, node, cache5, theme) => {
+  if (node.w <= 0 || node.h <= 0) return;
+  const data = node.data;
+  if (!data?.src) return;
+  const bitmap = cache5.getImage(data.src);
+  const opacity = resolveOpacity(node.style, theme);
+  const needsScope = opacity !== 1;
+  if (needsScope) {
+    ctx.save();
+    ctx.globalAlpha = opacity;
+  }
+  if (bitmap?.complete) {
+    ctx.drawImage(bitmap, 0, 0, node.w, node.h);
+  } else {
+    paintPlaceholder(ctx, node.w, node.h, "loading\u2026");
+  }
+  if (needsScope) ctx.restore();
+};
+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 = cache5.getIcon(data.src, color, sizePx);
+  const opacity = resolveOpacity(node.style, theme);
+  const needsScope = opacity !== 1;
+  if (needsScope) {
+    ctx.save();
+    ctx.globalAlpha = opacity;
+  }
+  if (bitmap) {
+    ctx.drawImage(bitmap, 0, 0, node.w, node.h);
+  } else {
+    paintPlaceholder(ctx, node.w, node.h, "svg\u2026");
+  }
+  if (needsScope) ctx.restore();
+};
+
+// src/render/background.ts
+var MIN_PATTERN_SCREEN_PX = 8;
+var MIN_VISIBLE_PATTERN_PX = 2;
+var paintBackground = (ctx, opts) => {
+  const bg = { ...DEFAULT_BACKGROUND, ...opts.background };
+  ctx.save();
+  ctx.fillStyle = bg.color;
+  ctx.fillRect(opts.viewport.x, opts.viewport.y, opts.viewport.w, opts.viewport.h);
+  ctx.restore();
+  if (bg.pattern === "none") return;
+  if (opts.zoom < bg.minZoom) return;
+  if (opts.zoom > bg.maxZoom) return;
+  let effectiveGap = bg.gap;
+  while (effectiveGap * opts.zoom < MIN_PATTERN_SCREEN_PX) {
+    effectiveGap *= 2;
+    if (effectiveGap > 1e6) return;
+  }
+  if (effectiveGap * opts.zoom < MIN_VISIBLE_PATTERN_PX) return;
+  const minX = Math.floor(opts.viewport.x / effectiveGap) * effectiveGap;
+  const minY = Math.floor(opts.viewport.y / effectiveGap) * effectiveGap;
+  const maxX = opts.viewport.x + opts.viewport.w;
+  const maxY = opts.viewport.y + opts.viewport.h;
+  if (bg.pattern === "dots") {
+    paintDots(ctx, minX, minY, maxX, maxY, effectiveGap, bg.patternColor, opts.zoom);
+  } else if (bg.pattern === "grid") {
+    paintGrid(ctx, minX, minY, maxX, maxY, effectiveGap, bg.patternColor, opts.zoom);
+  }
+};
+var paintDots = (ctx, minX, minY, maxX, maxY, gap, color, zoom) => {
+  const sizeWorld = Math.max(1, 1.6 / zoom);
+  const half = sizeWorld / 2;
+  ctx.save();
+  ctx.fillStyle = color;
+  for (let y = minY; y <= maxY; y += gap) {
+    for (let x = minX; x <= maxX; x += gap) {
+      ctx.fillRect(x - half, y - half, sizeWorld, sizeWorld);
     }
-  };
-  return store;
+  }
+  ctx.restore();
+};
+var paintGrid = (ctx, minX, minY, maxX, maxY, gap, color, zoom) => {
+  const lineWidth = 1 / zoom;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.beginPath();
+  for (let x = minX; x <= maxX; x += gap) {
+    ctx.moveTo(x, minY);
+    ctx.lineTo(x, maxY);
+  }
+  for (let y = minY; y <= maxY; y += gap) {
+    ctx.moveTo(minX, y);
+    ctx.lineTo(maxX, y);
+  }
+  ctx.stroke();
+  ctx.restore();
 };
 
-// src/store/sync.ts
-var attachSync = (store, adapter) => {
-  if (!adapter.capabilities.causalOrdering && !adapter.capabilities.crdt) {
-    throw new Error(
-      "SyncAdapter must advertise capabilities.causalOrdering or capabilities.crdt. See ARCHITECTURE.md \xA710.6."
-    );
+// src/hit-test/handle.ts
+var RESIZE_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var RESIZE_HANDLE_SIZE_PX = 14;
+var ROTATE_HANDLE_OFFSET_PX = 24;
+var ROTATE_HANDLE_RADIUS_PX = 9;
+var handleWorldPositions = (node) => {
+  const localCenters = {
+    nw: { x: 0, y: 0 },
+    n: { x: node.w / 2, y: 0 },
+    ne: { x: node.w, y: 0 },
+    e: { x: node.w, y: node.h / 2 },
+    se: { x: node.w, y: node.h },
+    s: { x: node.w / 2, y: node.h },
+    sw: { x: 0, y: node.h },
+    w: { x: 0, y: node.h / 2 }
+  };
+  if (node.angle === 0) {
+    const offsetX = node.x;
+    const offsetY = node.y;
+    return {
+      nw: { x: offsetX + localCenters.nw.x, y: offsetY + localCenters.nw.y },
+      n: { x: offsetX + localCenters.n.x, y: offsetY + localCenters.n.y },
+      ne: { x: offsetX + localCenters.ne.x, y: offsetY + localCenters.ne.y },
+      e: { x: offsetX + localCenters.e.x, y: offsetY + localCenters.e.y },
+      se: { x: offsetX + localCenters.se.x, y: offsetY + localCenters.se.y },
+      s: { x: offsetX + localCenters.s.x, y: offsetY + localCenters.s.y },
+      sw: { x: offsetX + localCenters.sw.x, y: offsetY + localCenters.sw.y },
+      w: { x: offsetX + localCenters.w.x, y: offsetY + localCenters.w.y }
+    };
   }
-  const unsubChange = store.subscribe("change", (batch) => {
-    if (batch.origin !== "remote") adapter.sendBatch(batch);
-  });
-  const unsubPresence = store.subscribe("presence", (e) => {
-    if ("removed" in e && e.removed) return;
-    if (e.state.clientId !== store.clientId) return;
-    const { clientId: _id, ...patch } = e.state;
-    adapter.sendPresence(patch);
-  });
-  const unsubRemoteBatch = adapter.onBatch((batch) => {
-    store.applyBatch({ ...batch, origin: "remote" });
-  });
-  const unsubRemotePresence = adapter.onPresence((clientId, state) => {
-    store.presence.applyRemote(clientId, state);
-  });
-  return () => {
-    unsubChange();
-    unsubPresence();
-    unsubRemoteBatch();
-    unsubRemotePresence();
-    adapter.destroy?.();
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  const cos = Math.cos(node.angle);
+  const sin = Math.sin(node.angle);
+  const rotate = (p) => {
+    const dx = p.x - node.w / 2;
+    const dy = p.y - node.h / 2;
+    return { x: cx + dx * cos - dy * sin, y: cy + dx * sin + dy * cos };
+  };
+  return {
+    nw: rotate(localCenters.nw),
+    n: rotate(localCenters.n),
+    ne: rotate(localCenters.ne),
+    e: rotate(localCenters.e),
+    se: rotate(localCenters.se),
+    s: rotate(localCenters.s),
+    sw: rotate(localCenters.sw),
+    w: rotate(localCenters.w)
+  };
+};
+var hitTestHandles = (node, worldPoint, cameraZ) => {
+  const halfWorld = RESIZE_HANDLE_SIZE_PX / 2 / cameraZ;
+  const positions = handleWorldPositions(node);
+  for (const h of RESIZE_HANDLES) {
+    const center = positions[h];
+    if (Math.abs(worldPoint.x - center.x) <= halfWorld && Math.abs(worldPoint.y - center.y) <= halfWorld) {
+      return h;
+    }
+  }
+  return null;
+};
+var rotateHandleWorldPosition = (node, cameraZ) => {
+  const offsetWorld = ROTATE_HANDLE_OFFSET_PX / cameraZ;
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  const localX = 0;
+  const localY = -node.h / 2 - offsetWorld;
+  const cos = Math.cos(node.angle);
+  const sin = Math.sin(node.angle);
+  return {
+    x: cx + localX * cos - localY * sin,
+    y: cy + localX * sin + localY * cos
   };
 };
+var hitTestRotateHandle = (node, worldPoint, cameraZ) => {
+  const center = rotateHandleWorldPosition(node, cameraZ);
+  const rWorld = ROTATE_HANDLE_RADIUS_PX / cameraZ;
+  const dx = worldPoint.x - center.x;
+  const dy = worldPoint.y - center.y;
+  return dx * dx + dy * dy <= rWorld * rWorld;
+};
 
-// src/store/palm-rejection.ts
-var PALM_REJECTION_GRACE_MS = 300;
-var createPalmRejectionState = () => ({
-  penActive: false,
-  lastPenUpAt: 0
-});
-var notePenActive = (state) => {
-  state.penActive = true;
+// src/render/overlay.ts
+var DEFAULT_SELECTION_COLOR = "#3b82f6";
+var SELECTION_OUTLINE_PX = 1.5;
+var MARQUEE_FILL_ALPHA = 0.08;
+var MARQUEE_STROKE_PX = 1;
+var drawSelectionOutline = (ctx, node, scale, color) => {
+  if (node.angle === 0) {
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+    ctx.beginPath();
+    ctx.rect(node.x, node.y, node.w, node.h);
+    ctx.stroke();
+    ctx.restore();
+    return;
+  }
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  const cos = Math.cos(node.angle);
+  const sin = Math.sin(node.angle);
+  const corners = [
+    { x: -node.w / 2, y: -node.h / 2 },
+    { x: node.w / 2, y: -node.h / 2 },
+    { x: node.w / 2, y: node.h / 2 },
+    { x: -node.w / 2, y: node.h / 2 }
+  ].map((p) => ({ x: cx + p.x * cos - p.y * sin, y: cy + p.x * sin + p.y * cos }));
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+  ctx.beginPath();
+  const first = corners[0];
+  ctx.moveTo(first.x, first.y);
+  for (let i = 1; i < corners.length; i++) {
+    const c = corners[i];
+    ctx.lineTo(c.x, c.y);
+  }
+  ctx.closePath();
+  ctx.stroke();
+  ctx.restore();
 };
-var notePenInactive = (state, now) => {
-  state.penActive = false;
-  state.lastPenUpAt = now;
+var drawResizeHandles = (ctx, node, scale, color) => {
+  const halfPx = RESIZE_HANDLE_SIZE_PX / 2;
+  const halfWorld = halfPx / scale;
+  const positions = handleWorldPositions(node);
+  ctx.save();
+  ctx.fillStyle = "#fff";
+  ctx.strokeStyle = color;
+  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+  for (const key of Object.keys(positions)) {
+    const p = positions[key];
+    ctx.beginPath();
+    ctx.rect(p.x - halfWorld, p.y - halfWorld, halfWorld * 2, halfWorld * 2);
+    ctx.fill();
+    ctx.stroke();
+  }
+  ctx.restore();
+};
+var drawRotateHandle = (ctx, node, scale, cameraZ, color) => {
+  const center = rotateHandleWorldPosition(node, cameraZ);
+  const radiusWorld = ROTATE_HANDLE_RADIUS_PX / scale;
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  const cos = Math.cos(node.angle);
+  const sin = Math.sin(node.angle);
+  const topMidLocalY = -node.h / 2;
+  const topMidWorld = {
+    x: cx + 0 * cos - topMidLocalY * sin,
+    y: cy + 0 * sin + topMidLocalY * cos
+  };
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+  ctx.beginPath();
+  ctx.moveTo(topMidWorld.x, topMidWorld.y);
+  ctx.lineTo(center.x, center.y);
+  ctx.stroke();
+  ctx.fillStyle = "#fff";
+  ctx.beginPath();
+  ctx.arc(center.x, center.y, radiusWorld, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+};
+var drawEdgeMidpointHandle = (ctx, midpoint, scale, color) => {
+  const radiusPx = 5;
+  const radiusWorld = radiusPx / scale;
+  ctx.save();
+  ctx.fillStyle = "#fff";
+  ctx.strokeStyle = color;
+  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+  ctx.beginPath();
+  ctx.arc(midpoint.x, midpoint.y, radiusWorld, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+};
+var drawEdgeEndpointHandles = (ctx, source, target, scale, color) => {
+  const radiusPx = 5;
+  const radiusWorld = radiusPx / scale;
+  ctx.save();
+  ctx.fillStyle = "#fff";
+  ctx.strokeStyle = color;
+  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
+  for (const p of [source, target]) {
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, radiusWorld, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+  }
+  ctx.restore();
 };
-var shouldRejectTouch = (state, now) => {
-  if (state.penActive) return true;
-  return now - state.lastPenUpAt < PALM_REJECTION_GRACE_MS;
+var drawMarquee = (ctx, rect, scale, color) => {
+  ctx.save();
+  ctx.globalAlpha = MARQUEE_FILL_ALPHA;
+  ctx.fillStyle = color;
+  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.globalAlpha = 1;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = MARQUEE_STROKE_PX / scale;
+  ctx.setLineDash([4 / scale, 3 / scale]);
+  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.restore();
 };
 
-// src/codec/index.ts
-var migrators = /* @__PURE__ */ new Map();
-var registerMigrator = (fromVersion, fn) => {
-  migrators.set(fromVersion, fn);
-};
-var toSerialized = (scene) => ({
-  schemaVersion: scene.schemaVersion,
-  nodes: Object.values(scene.nodes),
-  edges: Object.values(scene.edges),
-  groups: Object.values(scene.groups),
-  camera: scene.camera,
-  selection: scene.selection,
-  ...scene.frameOrder && scene.frameOrder.length > 0 ? { frameOrder: scene.frameOrder } : {}
-});
-var fromSerialized = (raw) => {
-  let working = raw;
-  let version = working.schemaVersion ?? 0;
-  while (version < SCHEMA_VERSION) {
-    const fn = migrators.get(version);
-    if (!fn) {
-      throw new Error(
-        `Cannot migrate scene from schemaVersion ${version} to ${SCHEMA_VERSION}; no migrator registered`
-      );
-    }
-    working = fn(working);
-    version++;
+// src/render/paint-frame.ts
+var FRAME_BORDER_PX = 1.5;
+var FRAME_BORDER_COLOR_DEFAULT = "#94a3b8";
+var FRAME_FILL_DEFAULT = "rgba(148, 163, 184, 0.06)";
+var FRAME_LABEL_FONT_PX = 12;
+var FRAME_LABEL_GAP_PX = 6;
+var FRAME_LABEL_COLOR = "#64748b";
+var paintFrameNode = (ctx, node, scale, theme) => {
+  if (node.w <= 0 || node.h <= 0) return;
+  const opacity = resolveOpacity(node.style, theme);
+  const needsScope = opacity !== 1;
+  if (needsScope) {
+    ctx.save();
+    ctx.globalAlpha = opacity;
   }
-  const ser = working;
-  return {
-    schemaVersion: SCHEMA_VERSION,
-    nodes: Object.fromEntries(ser.nodes.map((n) => [asNodeId(n.id), n])),
-    edges: Object.fromEntries(ser.edges.map((e) => [asEdgeId(e.id), e])),
-    groups: Object.fromEntries(ser.groups.map((g) => [asGroupId(g.id), g])),
-    camera: ser.camera,
-    selection: ser.selection,
-    ...ser.frameOrder ? { frameOrder: ser.frameOrder } : {}
-  };
+  const fill = node.style?.backgroundColor ?? (theme ? theme("frame.background") : void 0) ?? FRAME_FILL_DEFAULT;
+  ctx.fillStyle = fill;
+  ctx.fillRect(0, 0, node.w, node.h);
+  const stroke = resolveColor(node.style, "strokeColor", FRAME_BORDER_COLOR_DEFAULT, theme);
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = FRAME_BORDER_PX / scale;
+  ctx.setLineDash([]);
+  ctx.strokeRect(0, 0, node.w, node.h);
+  const labelPx = FRAME_LABEL_FONT_PX / scale;
+  const gapPx = FRAME_LABEL_GAP_PX / scale;
+  const label = node.content?.trim() || "Frame";
+  ctx.fillStyle = FRAME_LABEL_COLOR;
+  ctx.textBaseline = "bottom";
+  ctx.textAlign = "left";
+  ctx.font = `500 ${labelPx}px system-ui, -apple-system, sans-serif`;
+  ctx.fillText(label, 0, -gapPx);
+  if (needsScope) ctx.restore();
 };
-var storeToJSON = (store) => ({
-  schemaVersion: SCHEMA_VERSION,
-  nodes: store.getAllNodes(),
-  edges: store.getAllEdges(),
-  groups: store.getAllGroups(),
-  camera: store.getCamera(),
-  selection: store.getSelection()
-});
 
-// src/render/canvas-setup.ts
-var HARD_MAX_DPR = 3;
-var defaultMaxDprForSize = (cssW, cssH) => {
-  const cssPx = cssW * cssH;
-  if (cssPx >= 25e5) return 1;
-  if (cssPx >= 15e5) return 1.5;
-  return 2;
+// src/render/rough/constants.ts
+var ROUGH_MIN_ZOOM = 0.4;
+var ROUGH_MAX_NODES = 800;
+var ROUGH_MAX_MOVING_NODES = 5;
+var ROUGH_DEFAULTS = {
+  bowing: 2,
+  disableMultiStroke: true,
+  preserveVertices: true
 };
-var getDpr = (maxDpr, cssW = 0, cssH = 0) => {
-  if (typeof window === "undefined") return 1;
-  const raw = window.devicePixelRatio || 1;
-  const resolvedMax = maxDpr === void 0 && cssW > 0 && cssH > 0 ? defaultMaxDprForSize(cssW, cssH) : maxDpr ?? 1;
-  const cap = Math.max(1, Math.min(HARD_MAX_DPR, resolvedMax));
-  return Math.max(1, Math.min(cap, raw));
+var ROUGH_FILL_MISREGISTER_X = -3;
+var ROUGH_FILL_MISREGISTER_Y = -2;
+
+// src/render/color.ts
+var TONE_BLEND = 0.2;
+var parseHex = (hex) => {
+  if (!hex.startsWith("#")) return null;
+  const h = hex.slice(1);
+  if (h.length === 3) {
+    return [
+      Number.parseInt(h[0] + h[0], 16),
+      Number.parseInt(h[1] + h[1], 16),
+      Number.parseInt(h[2] + h[2], 16)
+    ];
+  }
+  if (h.length === 6 || h.length === 8) {
+    return [
+      Number.parseInt(h.slice(0, 2), 16),
+      Number.parseInt(h.slice(2, 4), 16),
+      Number.parseInt(h.slice(4, 6), 16)
+    ];
+  }
+  return null;
 };
-var setupSurface = (canvas, _maxDpr) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas 2d context unavailable");
-  return {
-    canvas,
-    ctx,
-    cssWidth: 0,
-    cssHeight: 0,
-    dpr: 1
-    // placeholder; `sizeSurface` writes the real value
-  };
+var toHexPair = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+var mixHex = (a, b, t) => {
+  const A = parseHex(a);
+  const B = parseHex(b);
+  if (!A || !B) return a;
+  const p = Math.max(0, Math.min(1, t));
+  return `#${toHexPair(A[0] * (1 - p) + B[0] * p)}${toHexPair(A[1] * (1 - p) + B[1] * p)}${toHexPair(A[2] * (1 - p) + B[2] * p)}`;
 };
-var sizeSurface = (surface, cssW, cssH, maxDpr) => {
-  const dpr = getDpr(maxDpr, cssW, cssH);
-  if (surface.cssWidth === cssW && surface.cssHeight === cssH && surface.dpr === dpr) {
-    return false;
+var darkenCache = /* @__PURE__ */ new Map();
+var darkenHex = (hex) => {
+  const cached2 = darkenCache.get(hex);
+  if (cached2 !== void 0) return cached2;
+  const result = mixHex(hex, "#000000", TONE_BLEND);
+  darkenCache.set(hex, result);
+  return result;
+};
+
+// src/render/shapes/path-helpers.ts
+var buildRectPath = (ctx, w, h, radius) => {
+  ctx.beginPath();
+  if (radius <= 0) {
+    ctx.rect(0, 0, w, h);
+    return;
   }
-  surface.cssWidth = cssW;
-  surface.cssHeight = cssH;
-  surface.dpr = dpr;
-  surface.canvas.width = Math.max(1, Math.round(cssW * dpr));
-  surface.canvas.height = Math.max(1, Math.round(cssH * dpr));
-  surface.canvas.style.width = `${cssW}px`;
-  surface.canvas.style.height = `${cssH}px`;
-  return true;
+  ctx.roundRect(0, 0, w, h, radius);
 };
-var clearSurface = (surface) => {
-  surface.ctx.setTransform(1, 0, 0, 1, 0, 0);
-  surface.ctx.clearRect(0, 0, surface.canvas.width, surface.canvas.height);
+var buildEllipsePath = (ctx, w, h) => {
+  const rx = w / 2;
+  const ry = h / 2;
+  ctx.beginPath();
+  ctx.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2);
 };
-
-// src/render/frame-loop.ts
-var createFrameLoop = ({ draw, historySize = 60 }) => {
-  let running = false;
-  let scheduled = false;
-  let frameId = 0;
-  const history = [];
-  let frames = 0;
-  let lastMs = 0;
-  let avgMs = 0;
-  const fpsWindow = [];
-  let fps = 0;
-  const tick = () => {
-    frameId = 0;
-    scheduled = false;
-    if (!running) return;
-    const t0 = performance.now();
-    draw();
-    const dur = performance.now() - t0;
-    history.push(dur);
-    if (history.length > historySize) history.shift();
-    let sum = 0;
-    for (const v of history) sum += v;
-    avgMs = sum / history.length;
-    lastMs = dur;
-    frames++;
-    fpsWindow.push(t0);
-    const cutoff = t0 - 1e3;
-    while (fpsWindow.length > 0 && fpsWindow[0] < cutoff) fpsWindow.shift();
-    fps = fpsWindow.length;
-  };
-  const schedule = () => {
-    if (scheduled || !running) return;
-    scheduled = true;
-    frameId = requestAnimationFrame(tick);
+var buildDiamondPath = (ctx, w, h, radius = 0) => {
+  ctx.beginPath();
+  if (radius <= 0) {
+    ctx.moveTo(w / 2, 0);
+    ctx.lineTo(w, h / 2);
+    ctx.lineTo(w / 2, h);
+    ctx.lineTo(0, h / 2);
+    ctx.closePath();
+    return;
+  }
+  const cx = w / 2;
+  const cy = h / 2;
+  const T = { x: cx, y: 0 };
+  const R = { x: w, y: cy };
+  const B = { x: cx, y: h };
+  const L = { x: 0, y: cy };
+  const edgeLen = Math.hypot(R.x - T.x, R.y - T.y);
+  const sMax = Math.max(0, edgeLen / 2 - 0.01);
+  const s = Math.min(radius * Math.SQRT2, sMax);
+  if (s <= 1e-4) {
+    ctx.moveTo(T.x, T.y);
+    ctx.lineTo(R.x, R.y);
+    ctx.lineTo(B.x, B.y);
+    ctx.lineTo(L.x, L.y);
+    ctx.closePath();
+    return;
+  }
+  const along = (a, b, d) => {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const t = d / len;
+    return { x: a.x + dx * t, y: a.y + dy * t };
   };
+  const TR = along(T, R, s);
+  const RT = along(R, T, s);
+  const RB = along(R, B, s);
+  const BR = along(B, R, s);
+  const BL = along(B, L, s);
+  const LB = along(L, B, s);
+  const LT = along(L, T, s);
+  const TL = along(T, L, s);
+  ctx.moveTo(TR.x, TR.y);
+  ctx.lineTo(RT.x, RT.y);
+  ctx.quadraticCurveTo(R.x, R.y, RB.x, RB.y);
+  ctx.lineTo(BR.x, BR.y);
+  ctx.quadraticCurveTo(B.x, B.y, BL.x, BL.y);
+  ctx.lineTo(LB.x, LB.y);
+  ctx.quadraticCurveTo(L.x, L.y, LT.x, LT.y);
+  ctx.lineTo(TL.x, TL.y);
+  ctx.quadraticCurveTo(T.x, T.y, TR.x, TR.y);
+  ctx.closePath();
+};
+var thoughtCloudGeometry = (w, h) => {
+  const domeW = Math.min(w * 0.4, h * 1.2);
+  const domeH = Math.min(h * 0.45, domeW);
+  const domeAnchorX = w * 0.3;
+  const domeX = Math.max(0, Math.min(w - domeW, domeAnchorX - domeW / 2));
   return {
-    start() {
-      if (running) return;
-      running = true;
-      schedule();
-    },
-    stop() {
-      running = false;
-      if (frameId !== 0) {
-        cancelAnimationFrame(frameId);
-        frameId = 0;
-      }
-      scheduled = false;
-    },
-    requestFrame() {
-      schedule();
-    },
-    stats: () => ({ lastMs, avgMs, frames, fps })
+    domeX,
+    domeW,
+    domeH,
+    cx: domeX + domeW / 2,
+    cy: domeH / 2,
+    rx: domeW / 2,
+    ry: domeH / 2,
+    bodyY: domeH * 0.55
   };
 };
-
-// src/render/assets/cache.ts
-var MAX_ENTRIES2 = 256;
-var bucketSize = (px) => {
-  if (px <= 32) return 32;
-  if (px <= 64) return 64;
-  if (px <= 128) return 128;
-  if (px <= 256) return 256;
-  if (px <= 512) return 512;
-  return Math.ceil(px / 256) * 256;
+var buildThoughtCloudPath = (ctx, w, h, radius) => {
+  const g = thoughtCloudGeometry(w, h);
+  const bodyH = h - g.bodyY;
+  const r = Math.max(0, Math.min(radius, bodyH / 2, w / 2));
+  const t = g.ry > 0 ? (g.bodyY - g.cy) / g.ry : 0;
+  const inRange = Math.abs(t) < 1;
+  let xL = g.domeX;
+  let xR = g.domeX + g.domeW;
+  if (inRange) {
+    const xOffset = g.rx * Math.sqrt(1 - t * t);
+    xL = g.cx - xOffset;
+    xR = g.cx + xOffset;
+  }
+  xL = Math.max(r, xL);
+  xR = Math.min(w - r, xR);
+  ctx.beginPath();
+  ctx.moveTo(r, g.bodyY);
+  ctx.lineTo(xL, g.bodyY);
+  const startAngle = Math.atan2((g.bodyY - g.cy) / g.ry, (xL - g.cx) / g.rx);
+  let endAngle = Math.atan2((g.bodyY - g.cy) / g.ry, (xR - g.cx) / g.rx);
+  if (endAngle <= startAngle) endAngle += 2 * Math.PI;
+  ctx.ellipse(g.cx, g.cy, g.rx, g.ry, 0, startAngle, endAngle, false);
+  ctx.lineTo(w - r, g.bodyY);
+  ctx.quadraticCurveTo(w, g.bodyY, w, g.bodyY + r);
+  ctx.lineTo(w, h - r);
+  ctx.quadraticCurveTo(w, h, w - r, h);
+  ctx.lineTo(r, h);
+  ctx.quadraticCurveTo(0, h, 0, h - r);
+  ctx.lineTo(0, g.bodyY + r);
+  ctx.quadraticCurveTo(0, g.bodyY, r, g.bodyY);
+  ctx.closePath();
 };
-var createAssetCache = (opts = {}) => {
-  const entries = /* @__PURE__ */ new Map();
-  let disposed = false;
-  const notify = () => {
-    if (disposed) return;
-    opts.onReady?.();
-  };
-  const touch = (key, entry) => {
-    entries.delete(key);
-    entries.set(key, entry);
-    if (entries.size > MAX_ENTRIES2) {
-      const oldestKey = entries.keys().next().value;
-      if (oldestKey !== void 0) {
-        const evicted = entries.get(oldestKey);
-        if (evicted?.kind === "icon" && evicted.bitmap) evicted.bitmap.close?.();
-        entries.delete(oldestKey);
-      }
-    }
-  };
-  const startImageDecode = (key, src) => {
-    const entry = { kind: "image", state: "pending", bitmap: null };
-    touch(key, entry);
-    const img = new Image();
-    img.onload = () => {
-      if (disposed) return;
-      entry.state = "ready";
-      entry.bitmap = img;
-      notify();
-    };
-    img.onerror = (e) => {
-      if (disposed) return;
-      entry.state = "error";
-      entry.err = e;
-      notify();
-    };
-    img.src = src;
-  };
-  const startIconRaster = (key, markup, color, sizePx) => {
-    const entry = { kind: "icon", state: "pending", bitmap: null };
-    touch(key, entry);
-    const colored = color ? applySvgColor(markup, color) : markup;
-    const blob = new Blob([colored], { type: "image/svg+xml" });
-    const url = URL.createObjectURL(blob);
-    const img = new Image();
-    img.onload = async () => {
-      URL.revokeObjectURL(url);
-      if (disposed) return;
-      try {
-        const bitmap = await createImageBitmap(img, {
-          resizeWidth: sizePx,
-          resizeHeight: sizePx,
-          resizeQuality: "high"
-        });
-        if (disposed) {
-          bitmap.close?.();
-          return;
-        }
-        entry.state = "ready";
-        entry.bitmap = bitmap;
-        notify();
-      } catch (e) {
-        entry.state = "error";
-        entry.err = e;
-        notify();
-      }
-    };
-    img.onerror = (e) => {
-      URL.revokeObjectURL(url);
-      if (disposed) return;
-      entry.state = "error";
-      entry.err = e;
-      notify();
-    };
-    img.src = url;
-  };
-  return {
-    getImage(src) {
-      const key = `img:${src}`;
-      const existing = entries.get(key);
-      if (existing && existing.kind === "image") {
-        if (existing.state === "ready") {
-          touch(key, existing);
-          return existing.bitmap;
-        }
-        return null;
-      }
-      startImageDecode(key, src);
-      return null;
-    },
-    getIcon(markup, color, devicePixelSize) {
-      const size = bucketSize(Math.max(1, Math.ceil(devicePixelSize)));
-      const key = `icon:${size}:${color ?? ""}:${markup}`;
-      const existing = entries.get(key);
-      if (existing && existing.kind === "icon") {
-        if (existing.state === "ready") {
-          touch(key, existing);
-          return existing.bitmap;
-        }
-        return null;
-      }
-      startIconRaster(key, markup, color, size);
-      return null;
-    },
-    dispose() {
-      disposed = true;
-      for (const entry of entries.values()) {
-        if (entry.kind === "icon" && entry.bitmap) entry.bitmap.close?.();
-      }
-      entries.clear();
-    }
-  };
+var buildTagPath = (ctx, w, h, radius = 8) => {
+  const notch = Math.min(h * 0.5, w * 0.3);
+  const tipRadius = 6;
+  const tipX = 0;
+  const tipY = h / 2;
+  const bodyLeft = Math.max(0, Math.min(notch, w));
+  const right = w;
+  const bottom = h;
+  const rBody = Math.min(radius, h / 2, (right - bodyLeft) / 2);
+  const rJoin = Math.min(radius, h * 0.45, bodyLeft * 0.8);
+  ctx.beginPath();
+  if (bodyLeft <= 1e-3) {
+    const r = Math.min(radius, h / 2, w / 2);
+    ctx.moveTo(r, 0);
+    ctx.lineTo(w - r, 0);
+    ctx.quadraticCurveTo(w, 0, w, r);
+    ctx.lineTo(w, h - r);
+    ctx.quadraticCurveTo(w, h, w - r, h);
+    ctx.lineTo(r, h);
+    ctx.quadraticCurveTo(0, h, 0, h - r);
+    ctx.lineTo(0, r);
+    ctx.quadraticCurveTo(0, 0, r, 0);
+    ctx.closePath();
+    return;
+  }
+  const pTop = { x: bodyLeft, y: rJoin };
+  const pBot = { x: bodyLeft, y: bottom - rJoin };
+  const dirX = tipX - bodyLeft;
+  const dirYTop = tipY - rJoin;
+  const dirYBot = tipY - (bottom - rJoin);
+  const lenTop = Math.hypot(dirX, dirYTop) || 1;
+  const lenBot = Math.hypot(dirX, dirYBot) || 1;
+  const maxTipRound = Math.min(lenTop, lenBot) * 0.49;
+  const t = Math.max(0, Math.min(tipRadius, maxTipRound));
+  const tipEnter = { x: tipX - dirX / lenBot * t, y: tipY - dirYBot / lenBot * t };
+  const tipExit = { x: tipX - dirX / lenTop * t, y: tipY - dirYTop / lenTop * t };
+  const k = rJoin * 0.65;
+  const topStart = { x: bodyLeft + rBody, y: 0 };
+  const botEnd = { x: bodyLeft + rBody, y: bottom };
+  ctx.moveTo(topStart.x, topStart.y);
+  ctx.lineTo(right - rBody, 0);
+  ctx.quadraticCurveTo(right, 0, right, rBody);
+  ctx.lineTo(right, bottom - rBody);
+  ctx.quadraticCurveTo(right, bottom, right - rBody, bottom);
+  ctx.lineTo(botEnd.x, botEnd.y);
+  ctx.bezierCurveTo(
+    botEnd.x - k,
+    bottom,
+    pBot.x - dirX / lenBot * k,
+    pBot.y - dirYBot / lenBot * k,
+    pBot.x,
+    pBot.y
+  );
+  ctx.lineTo(t > 0 ? tipEnter.x : tipX, t > 0 ? tipEnter.y : tipY);
+  if (t > 0) ctx.quadraticCurveTo(tipX, tipY, tipExit.x, tipExit.y);
+  ctx.lineTo(pTop.x, pTop.y);
+  ctx.bezierCurveTo(
+    pTop.x - dirX / lenTop * k,
+    pTop.y - dirYTop / lenTop * k,
+    topStart.x - k,
+    0,
+    topStart.x,
+    0
+  );
+  ctx.closePath();
 };
 
-// src/render/assets/paint.ts
-var PLACEHOLDER_FILL = "#e5e7eb";
-var PLACEHOLDER_TEXT_FILL = "#94a3b8";
-var paintPlaceholder = (ctx, w, h, label) => {
-  ctx.fillStyle = PLACEHOLDER_FILL;
-  ctx.fillRect(0, 0, w, h);
-  if (w >= 32 && h >= 16) {
-    ctx.fillStyle = PLACEHOLDER_TEXT_FILL;
-    ctx.font = "11px system-ui, sans-serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(label, w / 2, h / 2);
-  }
-};
-var paintImageNode = (ctx, node, cache5, theme) => {
+// src/render/shapes/draw-shape.ts
+var ATOMIC = /* @__PURE__ */ new Set(["rect", "ellipse", "diamond", "tag", "thought-cloud"]);
+var COMPOSITE = /* @__PURE__ */ new Set([
+  "capsule",
+  "layered-rect",
+  "layered-ellipse",
+  "layered-diamond",
+  "soft-diamond"
+]);
+var isCompositePrimitive = (type) => COMPOSITE.has(type);
+var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
+var PLAIN_RECT_CORNER_THRESHOLD_PX = 1.5;
+var LAYERED_OFFSET = 12;
+var drawShape = (ctx, node, scale, theme, opts) => {
+  if (!isDrawablePrimitive(node.type)) return;
+  if (node.hidden) return;
   if (node.w <= 0 || node.h <= 0) return;
-  const data = node.data;
-  if (!data?.src) return;
-  const bitmap = cache5.getImage(data.src);
-  const opacity = resolveOpacity(node.style, theme);
-  const needsScope = opacity !== 1;
-  if (needsScope) {
-    ctx.save();
-    ctx.globalAlpha = opacity;
-  }
-  if (bitmap?.complete) {
-    ctx.drawImage(bitmap, 0, 0, node.w, node.h);
-  } else {
-    paintPlaceholder(ctx, node.w, node.h, "loading\u2026");
+  if (COMPOSITE.has(node.type)) {
+    drawComposite(ctx, node, scale, theme, opts);
+    return;
   }
-  if (needsScope) ctx.restore();
+  drawAtomic(ctx, node.type, node.w, node.h, node.style, scale, theme, opts);
 };
-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 = cache5.getIcon(data.src, color, sizePx);
-  const opacity = resolveOpacity(node.style, theme);
+var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
+  if (w <= 0 || h <= 0) return;
+  const strokeWidth = resolveStrokeWidth(style, theme);
+  const opacity = resolveOpacity(style, theme);
+  const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
+  const stroke = resolveColor(style, "strokeColor", DEFAULT_STYLE.strokeColor, theme);
+  const fillVisible = !isFullyTransparent(fill);
+  const strokeVisible = strokeWidth > 0 && !isFullyTransparent(stroke);
+  if (!fillVisible && !strokeVisible) return;
+  const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
+  switch (type) {
+    case "rect": {
+      if (cornerRadius * scale < PLAIN_RECT_CORNER_THRESHOLD_PX) {
+        ctx.beginPath();
+        ctx.rect(0, 0, w, h);
+      } else {
+        buildRectPath(ctx, w, h, cornerRadius);
+      }
+      break;
+    }
+    case "ellipse":
+      buildEllipsePath(ctx, w, h);
+      break;
+    case "diamond":
+      buildDiamondPath(ctx, w, h, cornerRadius);
+      break;
+    case "tag":
+      buildTagPath(ctx, w, h, cornerRadius);
+      break;
+    case "thought-cloud":
+      buildThoughtCloudPath(ctx, w, h, cornerRadius);
+      break;
+  }
   const needsScope = opacity !== 1;
   if (needsScope) {
     ctx.save();
     ctx.globalAlpha = opacity;
   }
-  if (bitmap) {
-    ctx.drawImage(bitmap, 0, 0, node.w, node.h);
-  } else {
-    paintPlaceholder(ctx, node.w, node.h, "svg\u2026");
+  if (fillVisible) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (strokeVisible && !opts?.skipStroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
+    ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
+    ctx.stroke();
   }
   if (needsScope) ctx.restore();
 };
-
-// src/render/background.ts
-var MIN_PATTERN_SCREEN_PX = 8;
-var MIN_VISIBLE_PATTERN_PX = 2;
-var paintBackground = (ctx, opts) => {
-  const bg = { ...DEFAULT_BACKGROUND, ...opts.background };
-  ctx.save();
-  ctx.fillStyle = bg.color;
-  ctx.fillRect(opts.viewport.x, opts.viewport.y, opts.viewport.w, opts.viewport.h);
-  ctx.restore();
-  if (bg.pattern === "none") return;
-  if (opts.zoom < bg.minZoom) return;
-  if (opts.zoom > bg.maxZoom) return;
-  let effectiveGap = bg.gap;
-  while (effectiveGap * opts.zoom < MIN_PATTERN_SCREEN_PX) {
-    effectiveGap *= 2;
-    if (effectiveGap > 1e6) return;
-  }
-  if (effectiveGap * opts.zoom < MIN_VISIBLE_PATTERN_PX) return;
-  const minX = Math.floor(opts.viewport.x / effectiveGap) * effectiveGap;
-  const minY = Math.floor(opts.viewport.y / effectiveGap) * effectiveGap;
-  const maxX = opts.viewport.x + opts.viewport.w;
-  const maxY = opts.viewport.y + opts.viewport.h;
-  if (bg.pattern === "dots") {
-    paintDots(ctx, minX, minY, maxX, maxY, effectiveGap, bg.patternColor, opts.zoom);
-  } else if (bg.pattern === "grid") {
-    paintGrid(ctx, minX, minY, maxX, maxY, effectiveGap, bg.patternColor, opts.zoom);
+var drawComposite = (ctx, node, scale, theme, opts) => {
+  const subs = compositeLayout(node);
+  for (const s of subs) {
+    ctx.save();
+    ctx.translate(s.x, s.y);
+    drawAtomic(ctx, s.atomic, s.w, s.h, s.style ?? node.style, scale, theme, opts);
+    ctx.restore();
   }
 };
-var paintDots = (ctx, minX, minY, maxX, maxY, gap, color, zoom) => {
-  const sizeWorld = Math.max(1, 1.6 / zoom);
-  const half = sizeWorld / 2;
-  ctx.save();
-  ctx.fillStyle = color;
-  for (let y = minY; y <= maxY; y += gap) {
-    for (let x = minX; x <= maxX; x += gap) {
-      ctx.fillRect(x - half, y - half, sizeWorld, sizeWorld);
+var compositeLayout = (node) => {
+  const { w, h } = node;
+  switch (node.type) {
+    case "capsule": {
+      const circ = Math.min(h * 0.55, w * 0.28, 56);
+      const overlap = circ * 0.15;
+      const rectX = circ - overlap;
+      const rectW = Math.max(0, w - rectX);
+      const circY = (h - circ) / 2;
+      return [
+        { atomic: "ellipse", x: 0, y: circY, w: circ, h: circ },
+        { atomic: "rect", x: rectX, y: 0, w: rectW, h }
+      ];
+    }
+    case "layered-rect":
+    case "layered-ellipse":
+    case "layered-diamond": {
+      const atomic = node.type === "layered-rect" ? "rect" : node.type === "layered-ellipse" ? "ellipse" : "diamond";
+      const off = Math.min(LAYERED_OFFSET, w * 0.15, h * 0.15);
+      const back = {
+        atomic,
+        x: off,
+        y: off,
+        w,
+        h,
+        style: darkenedStyle(node.style)
+      };
+      const front = { atomic, x: 0, y: 0, w, h };
+      return [back, front];
+    }
+    case "soft-diamond": {
+      const backScale = 1.08;
+      const frontScale = 0.96;
+      const bw = w * backScale;
+      const bh = h * backScale;
+      const fw = w * frontScale;
+      const fh = h * frontScale;
+      const back = {
+        atomic: "diamond",
+        x: (w - bw) / 2,
+        y: (h - bh) / 2,
+        w: bw,
+        h: bh,
+        style: darkenedStyle(node.style)
+      };
+      const front = {
+        atomic: "diamond",
+        x: (w - fw) / 2,
+        y: (h - fh) / 2,
+        w: fw,
+        h: fh
+      };
+      return [back, front];
     }
   }
-  ctx.restore();
-};
-var paintGrid = (ctx, minX, minY, maxX, maxY, gap, color, zoom) => {
-  const lineWidth = 1 / zoom;
-  ctx.save();
-  ctx.strokeStyle = color;
-  ctx.lineWidth = lineWidth;
-  ctx.beginPath();
-  for (let x = minX; x <= maxX; x += gap) {
-    ctx.moveTo(x, minY);
-    ctx.lineTo(x, maxY);
-  }
-  for (let y = minY; y <= maxY; y += gap) {
-    ctx.moveTo(minX, y);
-    ctx.lineTo(maxX, y);
-  }
-  ctx.stroke();
-  ctx.restore();
-};
-
-// src/hit-test/handle.ts
-var RESIZE_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
-var RESIZE_HANDLE_SIZE_PX = 14;
-var ROTATE_HANDLE_OFFSET_PX = 24;
-var ROTATE_HANDLE_RADIUS_PX = 9;
-var handleWorldPositions = (node) => {
-  const localCenters = {
-    nw: { x: 0, y: 0 },
-    n: { x: node.w / 2, y: 0 },
-    ne: { x: node.w, y: 0 },
-    e: { x: node.w, y: node.h / 2 },
-    se: { x: node.w, y: node.h },
-    s: { x: node.w / 2, y: node.h },
-    sw: { x: 0, y: node.h },
-    w: { x: 0, y: node.h / 2 }
-  };
-  if (node.angle === 0) {
-    const offsetX = node.x;
-    const offsetY = node.y;
-    return {
-      nw: { x: offsetX + localCenters.nw.x, y: offsetY + localCenters.nw.y },
-      n: { x: offsetX + localCenters.n.x, y: offsetY + localCenters.n.y },
-      ne: { x: offsetX + localCenters.ne.x, y: offsetY + localCenters.ne.y },
-      e: { x: offsetX + localCenters.e.x, y: offsetY + localCenters.e.y },
-      se: { x: offsetX + localCenters.se.x, y: offsetY + localCenters.se.y },
-      s: { x: offsetX + localCenters.s.x, y: offsetY + localCenters.s.y },
-      sw: { x: offsetX + localCenters.sw.x, y: offsetY + localCenters.sw.y },
-      w: { x: offsetX + localCenters.w.x, y: offsetY + localCenters.w.y }
-    };
-  }
-  const cx = node.x + node.w / 2;
-  const cy = node.y + node.h / 2;
-  const cos = Math.cos(node.angle);
-  const sin = Math.sin(node.angle);
-  const rotate = (p) => {
-    const dx = p.x - node.w / 2;
-    const dy = p.y - node.h / 2;
-    return { x: cx + dx * cos - dy * sin, y: cy + dx * sin + dy * cos };
-  };
-  return {
-    nw: rotate(localCenters.nw),
-    n: rotate(localCenters.n),
-    ne: rotate(localCenters.ne),
-    e: rotate(localCenters.e),
-    se: rotate(localCenters.se),
-    s: rotate(localCenters.s),
-    sw: rotate(localCenters.sw),
-    w: rotate(localCenters.w)
+  return [];
+};
+var DARKENED_NO_STYLE = {};
+var darkenedStyleCache = /* @__PURE__ */ new WeakMap();
+var darkenedStyle = (style) => {
+  if (!style) return DARKENED_NO_STYLE;
+  const hit = darkenedStyleCache.get(style);
+  if (hit) return hit;
+  const fill = style.backgroundColor;
+  const stroke = style.strokeColor;
+  const next = {
+    ...style,
+    ...fill ? { backgroundColor: darkenHex(fill) } : {},
+    ...stroke ? { strokeColor: darkenHex(stroke) } : {}
   };
+  darkenedStyleCache.set(style, next);
+  return next;
 };
-var hitTestHandles = (node, worldPoint, cameraZ) => {
-  const halfWorld = RESIZE_HANDLE_SIZE_PX / 2 / cameraZ;
-  const positions = handleWorldPositions(node);
-  for (const h of RESIZE_HANDLES) {
-    const center = positions[h];
-    if (Math.abs(worldPoint.x - center.x) <= halfWorld && Math.abs(worldPoint.y - center.y) <= halfWorld) {
-      return h;
-    }
+
+// src/render/rough/loader.ts
+var cachedCtor = null;
+var loadPromise2 = null;
+var readyCallbacks2 = /* @__PURE__ */ new Set();
+var getRoughCanvasCtor = () => {
+  if (cachedCtor) return cachedCtor;
+  if (!loadPromise2) {
+    loadPromise2 = import('roughjs/bin/canvas').then((mod) => {
+      cachedCtor = mod.RoughCanvas;
+      for (const cb of readyCallbacks2) cb();
+      readyCallbacks2.clear();
+      return cachedCtor;
+    }).catch((err) => {
+      console.warn("[rough] failed to load roughjs:", err);
+      return null;
+    });
   }
   return null;
 };
-var rotateHandleWorldPosition = (node, cameraZ) => {
-  const offsetWorld = ROTATE_HANDLE_OFFSET_PX / cameraZ;
-  const cx = node.x + node.w / 2;
-  const cy = node.y + node.h / 2;
-  const localX = 0;
-  const localY = -node.h / 2 - offsetWorld;
-  const cos = Math.cos(node.angle);
-  const sin = Math.sin(node.angle);
-  return {
-    x: cx + localX * cos - localY * sin,
-    y: cy + localX * sin + localY * cos
-  };
-};
-var hitTestRotateHandle = (node, worldPoint, cameraZ) => {
-  const center = rotateHandleWorldPosition(node, cameraZ);
-  const rWorld = ROTATE_HANDLE_RADIUS_PX / cameraZ;
-  const dx = worldPoint.x - center.x;
-  const dy = worldPoint.y - center.y;
-  return dx * dx + dy * dy <= rWorld * rWorld;
+var onRoughReady = (cb) => {
+  if (cachedCtor) return;
+  readyCallbacks2.add(cb);
 };
 
-// src/render/overlay.ts
-var DEFAULT_SELECTION_COLOR = "#3b82f6";
-var SELECTION_OUTLINE_PX = 1.5;
-var MARQUEE_FILL_ALPHA = 0.08;
-var MARQUEE_STROKE_PX = 1;
-var drawSelectionOutline = (ctx, node, scale, color) => {
-  if (node.angle === 0) {
-    ctx.save();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-    ctx.beginPath();
-    ctx.rect(node.x, node.y, node.w, node.h);
-    ctx.stroke();
-    ctx.restore();
-    return;
+// src/render/rough/paths.ts
+var rectPath = (x, y, w, h) => {
+  return `M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
+};
+var excalidrawRoundedRectPath = (x, y, w, h, radius) => {
+  const r = Math.max(0, Math.min(radius, w / 2, h / 2));
+  if (r === 0) return rectPath(x, y, w, h);
+  const x2 = x + w;
+  const y2 = y + h;
+  return [
+    `M${x + r} ${y}`,
+    `L${x2 - r} ${y}`,
+    `Q${x2} ${y}, ${x2} ${y + r}`,
+    `L${x2} ${y2 - r}`,
+    `Q${x2} ${y2}, ${x2 - r} ${y2}`,
+    `L${x + r} ${y2}`,
+    `Q${x} ${y2}, ${x} ${y2 - r}`,
+    `L${x} ${y + r}`,
+    `Q${x} ${y}, ${x + r} ${y}`,
+    "Z"
+  ].join(" ");
+};
+var diamondPath = (x, y, w, h, radius = 0) => {
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  if (radius <= 0) {
+    return `M${cx} ${y} L${x + w} ${cy} L${cx} ${y + h} L${x} ${cy} Z`;
   }
-  const cx = node.x + node.w / 2;
-  const cy = node.y + node.h / 2;
-  const cos = Math.cos(node.angle);
-  const sin = Math.sin(node.angle);
-  const corners = [
-    { x: -node.w / 2, y: -node.h / 2 },
-    { x: node.w / 2, y: -node.h / 2 },
-    { x: node.w / 2, y: node.h / 2 },
-    { x: -node.w / 2, y: node.h / 2 }
-  ].map((p) => ({ x: cx + p.x * cos - p.y * sin, y: cy + p.x * sin + p.y * cos }));
-  ctx.save();
-  ctx.strokeStyle = color;
-  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-  ctx.beginPath();
-  const first = corners[0];
-  ctx.moveTo(first.x, first.y);
-  for (let i = 1; i < corners.length; i++) {
-    const c = corners[i];
-    ctx.lineTo(c.x, c.y);
+  const T = { x: cx, y };
+  const R = { x: x + w, y: cy };
+  const B = { x: cx, y: y + h };
+  const L = { x, y: cy };
+  const edgeLen = Math.hypot(R.x - T.x, R.y - T.y);
+  const sMax = Math.max(0, edgeLen / 2 - 0.01);
+  const s = Math.min(radius * Math.SQRT2, sMax);
+  if (s <= 1e-4) {
+    return `M${T.x} ${T.y} L${R.x} ${R.y} L${B.x} ${B.y} L${L.x} ${L.y} Z`;
   }
-  ctx.closePath();
-  ctx.stroke();
-  ctx.restore();
+  const along = (a, b, d) => {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const t = d / len;
+    return { x: a.x + dx * t, y: a.y + dy * t };
+  };
+  const TR = along(T, R, s);
+  const RT = along(R, T, s);
+  const RB = along(R, B, s);
+  const BR = along(B, R, s);
+  const BL = along(B, L, s);
+  const LB = along(L, B, s);
+  const LT = along(L, T, s);
+  const TL = along(T, L, s);
+  return [
+    `M${TR.x} ${TR.y}`,
+    `L${RT.x} ${RT.y}`,
+    `Q${R.x} ${R.y}, ${RB.x} ${RB.y}`,
+    `L${BR.x} ${BR.y}`,
+    `Q${B.x} ${B.y}, ${BL.x} ${BL.y}`,
+    `L${LB.x} ${LB.y}`,
+    `Q${L.x} ${L.y}, ${LT.x} ${LT.y}`,
+    `L${TL.x} ${TL.y}`,
+    `Q${T.x} ${T.y}, ${TR.x} ${TR.y}`,
+    "Z"
+  ].join(" ");
 };
-var drawResizeHandles = (ctx, node, scale, color) => {
-  const halfPx = RESIZE_HANDLE_SIZE_PX / 2;
-  const halfWorld = halfPx / scale;
-  const positions = handleWorldPositions(node);
-  ctx.save();
-  ctx.fillStyle = "#fff";
-  ctx.strokeStyle = color;
-  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-  for (const key of Object.keys(positions)) {
-    const p = positions[key];
-    ctx.beginPath();
-    ctx.rect(p.x - halfWorld, p.y - halfWorld, halfWorld * 2, halfWorld * 2);
-    ctx.fill();
-    ctx.stroke();
+var ellipsePath = (x, y, w, h) => {
+  const cx = x + w / 2;
+  const rx = w / 2;
+  const ry = h / 2;
+  return [
+    `M${cx} ${y}`,
+    `A${rx} ${ry} 0 1 0 ${cx} ${y + h}`,
+    `A${rx} ${ry} 0 1 0 ${cx} ${y}`,
+    "Z"
+  ].join(" ");
+};
+var thoughtCloudPath = (x, y, w, h, radius) => {
+  const domeW = Math.min(w * 0.4, h * 1.2);
+  const domeH = Math.min(h * 0.45, domeW);
+  const domeAnchorX = w * 0.3;
+  const domeX = Math.max(0, Math.min(w - domeW, domeAnchorX - domeW / 2));
+  const cx = x + domeX + domeW / 2;
+  const cy = y + domeH / 2;
+  const rx = domeW / 2;
+  const ry = domeH / 2;
+  const bodyY = y + domeH * 0.55;
+  const bodyH = y + h - bodyY;
+  const r = Math.max(0, Math.min(radius, bodyH / 2, w / 2));
+  const t = ry > 0 ? (bodyY - cy) / ry : 0;
+  let xL = x + domeX;
+  let xR = x + domeX + domeW;
+  if (Math.abs(t) < 1) {
+    const xOffset = rx * Math.sqrt(1 - t * t);
+    xL = cx - xOffset;
+    xR = cx + xOffset;
+  }
+  xL = Math.max(x + r, xL);
+  xR = Math.min(x + w - r, xR);
+  return [
+    `M${x + r} ${bodyY}`,
+    `L${xL} ${bodyY}`,
+    `A${rx} ${ry} 0 1 1 ${xR} ${bodyY}`,
+    `L${x + w - r} ${bodyY}`,
+    `Q${x + w} ${bodyY}, ${x + w} ${bodyY + r}`,
+    `L${x + w} ${y + h - r}`,
+    `Q${x + w} ${y + h}, ${x + w - r} ${y + h}`,
+    `L${x + r} ${y + h}`,
+    `Q${x} ${y + h}, ${x} ${y + h - r}`,
+    `L${x} ${bodyY + r}`,
+    `Q${x} ${bodyY}, ${x + r} ${bodyY}`,
+    "Z"
+  ].join(" ");
+};
+var tagPath = (x, y, w, h, radius = 8) => {
+  const notch = Math.min(h * 0.5, w * 0.3);
+  const tipRadius = 6;
+  const tipX = x;
+  const tipY = y + h / 2;
+  const bodyLeft = x + Math.max(0, Math.min(notch, w));
+  const right = x + w;
+  const bottom = y + h;
+  const rBody = Math.min(radius, h / 2, (right - bodyLeft) / 2);
+  const rJoin = Math.min(radius, h * 0.45, (bodyLeft - x) * 0.8);
+  if (bodyLeft - x <= 1e-3) {
+    return excalidrawRoundedRectPath(x, y, w, h, Math.min(radius, h / 2, w / 2));
   }
-  ctx.restore();
+  const pTop = { x: bodyLeft, y: y + rJoin };
+  const pBot = { x: bodyLeft, y: bottom - rJoin };
+  const dirX = tipX - bodyLeft;
+  const dirYTop = tipY - pTop.y;
+  const dirYBot = tipY - pBot.y;
+  const lenTop = Math.hypot(dirX, dirYTop) || 1;
+  const lenBot = Math.hypot(dirX, dirYBot) || 1;
+  const maxTipRound = Math.min(lenTop, lenBot) * 0.49;
+  const t = Math.max(0, Math.min(tipRadius, maxTipRound));
+  const tipEnter = { x: tipX - dirX / lenBot * t, y: tipY - dirYBot / lenBot * t };
+  const tipExit = { x: tipX - dirX / lenTop * t, y: tipY - dirYTop / lenTop * t };
+  const k = rJoin * 0.65;
+  const topStart = { x: bodyLeft + rBody, y };
+  const botEnd = { x: bodyLeft + rBody, y: bottom };
+  const parts = [
+    `M${topStart.x} ${topStart.y}`,
+    `L${right - rBody} ${y}`,
+    `Q${right} ${y}, ${right} ${y + rBody}`,
+    `L${right} ${bottom - rBody}`,
+    `Q${right} ${bottom}, ${right - rBody} ${bottom}`,
+    `L${botEnd.x} ${botEnd.y}`,
+    `C${botEnd.x - k} ${bottom}, ${pBot.x - dirX / lenBot * k} ${pBot.y - dirYBot / lenBot * k}, ${pBot.x} ${pBot.y}`,
+    `L${t > 0 ? tipEnter.x : tipX} ${t > 0 ? tipEnter.y : tipY}`
+  ];
+  if (t > 0) parts.push(`Q${tipX} ${tipY}, ${tipExit.x} ${tipExit.y}`);
+  parts.push(
+    `L${pTop.x} ${pTop.y}`,
+    `C${pTop.x - dirX / lenTop * k} ${pTop.y - dirYTop / lenTop * k}, ${topStart.x - k} ${y}, ${topStart.x} ${topStart.y}`,
+    "Z"
+  );
+  return parts.join(" ");
 };
-var drawRotateHandle = (ctx, node, scale, cameraZ, color) => {
-  const center = rotateHandleWorldPosition(node, cameraZ);
-  const radiusWorld = ROTATE_HANDLE_RADIUS_PX / scale;
-  const cx = node.x + node.w / 2;
-  const cy = node.y + node.h / 2;
-  const cos = Math.cos(node.angle);
-  const sin = Math.sin(node.angle);
-  const topMidLocalY = -node.h / 2;
-  const topMidWorld = {
-    x: cx + 0 * cos - topMidLocalY * sin,
-    y: cy + 0 * sin + topMidLocalY * cos
-  };
-  ctx.save();
-  ctx.strokeStyle = color;
-  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-  ctx.beginPath();
-  ctx.moveTo(topMidWorld.x, topMidWorld.y);
-  ctx.lineTo(center.x, center.y);
-  ctx.stroke();
-  ctx.fillStyle = "#fff";
-  ctx.beginPath();
-  ctx.arc(center.x, center.y, radiusWorld, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.stroke();
-  ctx.restore();
+
+// src/render/rough/tone-down.ts
+var TONE_BLEND2 = 0.2;
+var cache4 = /* @__PURE__ */ new Map();
+var deriveRoughStrokeColor = (stroke, fill, isDark) => {
+  if (!isFullyTransparent(stroke)) return stroke;
+  if (isFullyTransparent(fill)) return stroke;
+  const key = `${fill}|${isDark ? "d" : "l"}`;
+  const hit = cache4.get(key);
+  if (hit) return hit;
+  const next = mixHex(fill, isDark ? "#000000" : "#ffffff", TONE_BLEND2);
+  cache4.set(key, next);
+  return next;
 };
-var drawEdgeMidpointHandle = (ctx, midpoint, scale, color) => {
-  const radiusPx = 5;
-  const radiusWorld = radiusPx / scale;
-  ctx.save();
-  ctx.fillStyle = "#fff";
-  ctx.strokeStyle = color;
-  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-  ctx.beginPath();
-  ctx.arc(midpoint.x, midpoint.y, radiusWorld, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.stroke();
-  ctx.restore();
+
+// src/render/rough/draw.ts
+var apparentDetail = (maxSide, zoom) => {
+  const apparent = maxSide * Math.min(1, zoom);
+  if (apparent >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9 };
+  if (apparent >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1 };
+  return { curveStepCount: 5, maxRandomnessOffset: 1.3 };
 };
-var drawEdgeEndpointHandles = (ctx, source, target, scale, color) => {
-  const radiusPx = 5;
-  const radiusWorld = radiusPx / scale;
-  ctx.save();
-  ctx.fillStyle = "#fff";
-  ctx.strokeStyle = color;
-  ctx.lineWidth = SELECTION_OUTLINE_PX / scale;
-  for (const p of [source, target]) {
-    ctx.beginPath();
-    ctx.arc(p.x, p.y, radiusWorld, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
+var drawRoughShape = (ctx, node, scale, theme) => {
+  const Ctor = getRoughCanvasCtor();
+  if (!Ctor) return false;
+  const rc = ensureRoughCanvas(ctx, Ctor);
+  if (!rc) return false;
+  const seed = node.id ? seedFromId(node.id) % 2147483646 + 1 : 1337;
+  paintAtomicRough(
+    rc,
+    ctx,
+    node.type,
+    node.w,
+    node.h,
+    node.style,
+    scale,
+    theme,
+    seed
+  );
+  return true;
+};
+var drawCompositeRough = (ctx, node, scale, theme) => {
+  const Ctor = getRoughCanvasCtor();
+  if (!Ctor) return false;
+  const rc = ensureRoughCanvas(ctx, Ctor);
+  if (!rc) return false;
+  const subs = compositeLayout(node);
+  const baseSeed = node.id ? seedFromId(node.id) % 2147483646 + 1 : 1337;
+  for (let i = 0; i < subs.length; i++) {
+    const s = subs[i];
+    const subStyle = s.style ?? node.style;
+    ctx.save();
+    ctx.translate(s.x, s.y);
+    ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
+    drawAtomic(ctx, s.atomic, s.w, s.h, subStyle, scale, theme, { skipStroke: true });
+    ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
+    paintAtomicRough(
+      rc,
+      ctx,
+      s.atomic,
+      s.w,
+      s.h,
+      subStyle,
+      scale,
+      theme,
+      (baseSeed + i * 7919) % 2147483646 + 1
+    );
+    ctx.restore();
   }
-  ctx.restore();
+  return true;
 };
-var drawMarquee = (ctx, rect, scale, color) => {
+var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
+  if (w <= 0 || h <= 0) return;
+  const rawStroke = resolveColor(style, "strokeColor", "#1f2937", theme);
+  const isDark = theme?.("mode") === "dark";
+  const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
+  const strokeColor = deriveRoughStrokeColor(rawStroke, fill, isDark);
+  const rawStrokeWidth = resolveStrokeWidth(style, theme);
+  if (rawStrokeWidth <= 0) return;
+  const roughness = style?.roughness ?? 0;
+  if (roughness <= 0) return;
+  const isNoBorderIntent = isFullyTransparent(rawStroke);
+  const effectiveStrokeStyle = isNoBorderIntent ? "solid" : style?.strokeStyle ?? "solid";
+  const strokeWidth = isNoBorderIntent ? DEFAULT_STYLE.strokeWidth : rawStrokeWidth;
+  const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
+  const radius = Math.max(0, Math.min(cornerRadius, w / 2, h / 2));
+  const dash = dashPatternFor(effectiveStrokeStyle, strokeWidth);
+  const detail = apparentDetail(Math.max(w, h), scale);
+  const cacheKey = [
+    type,
+    w.toFixed(1),
+    h.toFixed(1),
+    radius.toFixed(1),
+    strokeColor,
+    strokeWidth.toFixed(2),
+    effectiveStrokeStyle,
+    roughness.toFixed(2),
+    seed,
+    detail.curveStepCount,
+    detail.maxRandomnessOffset.toFixed(2)
+  ].join("|");
+  const drawable = getOrBuildDrawable(cacheKey, () => {
+    const pathData = buildPath(type, 0, 0, w, h, radius);
+    return rc.generator.path(pathData, {
+      ...ROUGH_DEFAULTS,
+      stroke: strokeColor,
+      strokeWidth,
+      roughness,
+      seed,
+      strokeLineDash: dash.length > 0 ? dash : void 0,
+      curveStepCount: detail.curveStepCount,
+      maxRandomnessOffset: detail.maxRandomnessOffset
+    });
+  });
   ctx.save();
-  ctx.globalAlpha = MARQUEE_FILL_ALPHA;
-  ctx.fillStyle = color;
-  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
-  ctx.globalAlpha = 1;
-  ctx.strokeStyle = color;
-  ctx.lineWidth = MARQUEE_STROKE_PX / scale;
-  ctx.setLineDash([4 / scale, 3 / scale]);
-  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.lineJoin = "round";
+  rc.draw(drawable);
   ctx.restore();
 };
-
-// src/render/paint-frame.ts
-var FRAME_BORDER_PX = 1.5;
-var FRAME_BORDER_COLOR_DEFAULT = "#94a3b8";
-var FRAME_FILL_DEFAULT = "rgba(148, 163, 184, 0.06)";
-var FRAME_LABEL_FONT_PX = 12;
-var FRAME_LABEL_GAP_PX = 6;
-var FRAME_LABEL_COLOR = "#64748b";
-var paintFrameNode = (ctx, node, scale, theme) => {
-  if (node.w <= 0 || node.h <= 0) return;
-  const opacity = resolveOpacity(node.style, theme);
-  const needsScope = opacity !== 1;
-  if (needsScope) {
-    ctx.save();
-    ctx.globalAlpha = opacity;
+var ROUGH_CANVAS_KEY = "__roughCanvas";
+var ensureRoughCanvas = (ctx, Ctor) => {
+  const ctxWithCache = ctx;
+  if (ctxWithCache[ROUGH_CANVAS_KEY]) return ctxWithCache[ROUGH_CANVAS_KEY];
+  const rc = new Ctor(ctx.canvas);
+  ctxWithCache[ROUGH_CANVAS_KEY] = rc;
+  return rc;
+};
+var buildPath = (type, x, y, w, h, radius) => {
+  switch (type) {
+    case "rect":
+      return radius > 0 ? excalidrawRoundedRectPath(x, y, w, h, radius) : rectPath(x, y, w, h);
+    case "ellipse":
+      return ellipsePath(x, y, w, h);
+    case "diamond":
+      return diamondPath(x, y, w, h, radius);
+    case "tag":
+      return tagPath(x, y, w, h, radius);
+    case "thought-cloud":
+      return thoughtCloudPath(x, y, w, h, radius);
   }
-  const fill = node.style?.backgroundColor ?? (theme ? theme("frame.background") : void 0) ?? FRAME_FILL_DEFAULT;
-  ctx.fillStyle = fill;
-  ctx.fillRect(0, 0, node.w, node.h);
-  const stroke = resolveColor(node.style, "strokeColor", FRAME_BORDER_COLOR_DEFAULT, theme);
-  ctx.strokeStyle = stroke;
-  ctx.lineWidth = FRAME_BORDER_PX / scale;
-  ctx.setLineDash([]);
-  ctx.strokeRect(0, 0, node.w, node.h);
-  const labelPx = FRAME_LABEL_FONT_PX / scale;
-  const gapPx = FRAME_LABEL_GAP_PX / scale;
-  const label = node.content?.trim() || "Frame";
-  ctx.fillStyle = FRAME_LABEL_COLOR;
-  ctx.textBaseline = "bottom";
-  ctx.textAlign = "left";
-  ctx.font = `500 ${labelPx}px system-ui, -apple-system, sans-serif`;
-  ctx.fillText(label, 0, -gapPx);
-  if (needsScope) ctx.restore();
 };
 
 // src/render/shapes/content-bounds.ts