canvu-react 0.3.5

package/dist/tldraw.js

@@ -0,0 +1,1941 @@
+import getStroke from 'perfect-freehand';
+
+// src/math/rect.ts
+function normalizeRect(r) {
+  const x0 = r.width >= 0 ? r.x : r.x + r.width;
+  const y0 = r.height >= 0 ? r.y : r.y + r.height;
+  return {
+    x: x0,
+    y: y0,
+    width: Math.abs(r.width),
+    height: Math.abs(r.height)
+  };
+}
+
+// src/scene/custom-shape.ts
+function expandCustomShapeTemplate(template, width, height) {
+  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
+}
+function resolveCustomInner(content, size) {
+  if ("render" in content) {
+    return content.render(size);
+  }
+  return expandCustomShapeTemplate(content.svg, size.width, size.height);
+}
+function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
+  const b = normalizeRect(bounds);
+  const sx = b.width / intrinsic.width;
+  const sy = b.height / intrinsic.height;
+  return `<g transform="scale(${sx},${sy})">${inner}</g>`;
+}
+function createCustomShapeItem(id, bounds, content) {
+  const r = normalizeRect(bounds);
+  const intrinsic = { width: r.width, height: r.height };
+  const inner = resolveCustomInner(content, intrinsic);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "custom",
+    customIntrinsicSize: intrinsic,
+    customInnerSvg: inner,
+    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
+  };
+}
+
+// src/scene/freehand-path.ts
+function dedupeFreehandPoints(points, minDist) {
+  if (points.length <= 2) {
+    return points.map((p) => ({ ...p }));
+  }
+  const minSq = minDist * minDist;
+  const first = points[0];
+  if (!first) return [];
+  const out = [{ ...first }];
+  for (let i = 1; i < points.length - 1; i++) {
+    const p = points[i];
+    const last = out[out.length - 1];
+    if (!p || !last) continue;
+    const dx = p.x - last.x;
+    const dy = p.y - last.y;
+    if (dx * dx + dy * dy >= minSq) {
+      out.push({ ...p });
+    }
+  }
+  const end = points[points.length - 1];
+  const lastKept = out[out.length - 1];
+  if (!end || !lastKept) return out;
+  if ((end.x - lastKept.x) ** 2 + (end.y - lastKept.y) ** 2 > 1e-12) {
+    out.push({ ...end });
+  }
+  return out;
+}
+function smoothFreehandPointsToPathD(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) {
+    const p = points[0];
+    if (!p) return "";
+    return `M ${p.x} ${p.y}`;
+  }
+  if (n === 2) {
+    const a = points[0];
+    const b = points[1];
+    if (!a || !b) return "";
+    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  }
+  const p0 = points[0];
+  if (!p0) return "";
+  let d = `M ${p0.x} ${p0.y}`;
+  let i = 1;
+  for (; i < n - 2; i++) {
+    const pi = points[i];
+    const pi1 = points[i + 1];
+    if (!pi || !pi1) continue;
+    const xc = (pi.x + pi1.x) / 2;
+    const yc = (pi.y + pi1.y) / 2;
+    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
+  }
+  const pLast = points[i];
+  const pEnd = points[i + 1];
+  if (!pLast || !pEnd) return d;
+  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
+  return d;
+}
+function outlineStrokeToClosedPathD(outline) {
+  const len = outline.length;
+  if (len === 0) return "";
+  const first = outline[0];
+  if (!first) return "";
+  if (len < 3) {
+    let d2 = `M ${first[0]} ${first[1]}`;
+    for (let i = 1; i < len; i++) {
+      const pt = outline[i];
+      if (!pt) continue;
+      d2 += ` L ${pt[0]} ${pt[1]}`;
+    }
+    return `${d2} Z`;
+  }
+  let d = `M ${first[0]} ${first[1]} Q`;
+  for (let i = 0; i < len; i++) {
+    const p0 = outline[i];
+    const p1 = outline[(i + 1) % len];
+    if (!p0 || !p1) continue;
+    d += ` ${p0[0]} ${p0[1]} ${(p0[0] + p1[0]) / 2} ${(p0[1] + p1[1]) / 2}`;
+  }
+  return `${d} Z`;
+}
+
+// src/scene/text-svg.ts
+function escapeSvgTextContent(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeHtmlText(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+var DEFAULT_TEXT_FONT_SIZE = 18;
+var LINE_HEIGHT_RATIO = 22 / 18;
+var FIRST_LINE_BASELINE_RATIO = 24 / 18;
+var PLACEHOLDER = "Tap to type";
+var MIN_TEXT_BOX_W = 40;
+var MIN_TEXT_BOX_H = 36;
+var TEXT_PAD_X = 4;
+var MAX_TEXT_MEASURE_CACHE_ENTRIES = 2e3;
+var sharedMeasureContext;
+var textMeasureCache = /* @__PURE__ */ new Map();
+function getSharedMeasureContext() {
+  if (sharedMeasureContext !== void 0) {
+    return sharedMeasureContext;
+  }
+  if (typeof document === "undefined") {
+    sharedMeasureContext = null;
+    return sharedMeasureContext;
+  }
+  const canvas = document.createElement("canvas");
+  sharedMeasureContext = canvas.getContext("2d");
+  return sharedMeasureContext;
+}
+function textMeasureCacheKey(content, fontSize) {
+  return `${fontSize}
+${content}`;
+}
+function cacheMeasuredBounds(key, bounds) {
+  if (textMeasureCache.size >= MAX_TEXT_MEASURE_CACHE_ENTRIES) {
+    textMeasureCache.clear();
+  }
+  textMeasureCache.set(key, bounds);
+}
+function lineHeightFor(fontSize) {
+  return fontSize * LINE_HEIGHT_RATIO;
+}
+function firstLineBaselineY(fontSize) {
+  return fontSize * FIRST_LINE_BASELINE_RATIO;
+}
+function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const cacheKey = textMeasureCacheKey(content, fontSize);
+  const cached = textMeasureCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const lh = lineHeightFor(fontSize);
+  const baselineY = firstLineBaselineY(fontSize);
+  const trimmed = content.trim();
+  const lines = trimmed.length === 0 ? [PLACEHOLDER] : content.split("\n");
+  let maxInnerW = 0;
+  const ctx = getSharedMeasureContext();
+  if (ctx) {
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    for (const line of lines) {
+      const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
+      maxInnerW = Math.max(maxInnerW, ctx.measureText(toMeasure).width);
+    }
+  }
+  if (maxInnerW === 0) {
+    for (const line of lines) {
+      const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
+      maxInnerW = Math.max(maxInnerW, toMeasure.length * fontSize * 0.52);
+    }
+  }
+  const minW = Math.max(MIN_TEXT_BOX_W, TEXT_PAD_X * 2 + fontSize);
+  const width = Math.max(minW, TEXT_PAD_X * 2 + maxInnerW);
+  const height = Math.max(
+    MIN_TEXT_BOX_H,
+    baselineY + (lines.length - 1) * lh + Math.max(8, fontSize * 0.35)
+  );
+  const measured = { width, height };
+  cacheMeasuredBounds(cacheKey, measured);
+  return measured;
+}
+function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const lh = lineHeightFor(fontSize);
+  const y0 = firstLineBaselineY(fontSize);
+  const trimmed = content.trim();
+  if (trimmed.length === 0) {
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
+  }
+  const lines = content.split("\n");
+  if (lines.length === 1) {
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
+  }
+  const parts = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? "";
+    if (i === 0) {
+      parts.push(`<tspan x="4">${escapeSvgTextContent(line)}</tspan>`);
+    } else {
+      parts.push(`<tspan x="4" dy="${lh}">${escapeSvgTextContent(line)}</tspan>`);
+    }
+  }
+  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${parts.join("")}</text>`;
+}
+function buildTextFixedBoundsSvg(content, width, height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  const w = Math.max(1, width);
+  const h = Math.max(1, height);
+  const lh = lineHeightFor(fontSize);
+  const trimmed = content.trim();
+  if (trimmed.length === 0) {
+    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
+  }
+  const body = escapeHtmlText(content);
+  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
+}
+
+// src/scene/shape-builders.ts
+var DEFAULT_STROKE_STYLE = {
+  stroke: "#2563eb",
+  strokeWidth: 2
+};
+function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware = false) {
+  const sw = style.strokeWidth;
+  const base = {
+    last: strokeComplete,
+    simulatePressure: true
+  };
+  if (toolKind === "draw" || toolKind === "pencil") {
+    if (pressureAware && toolKind === "draw") {
+      return {
+        ...base,
+        size: Math.max(2, sw * 1.05),
+        thinning: 0.42,
+        smoothing: 0.56,
+        streamline: 0.18,
+        simulatePressure: false
+      };
+    }
+    return {
+      ...base,
+      size: Math.max(2, sw * 1.18),
+      thinning: 0.12,
+      smoothing: 0.72,
+      streamline: 0.42,
+      simulatePressure: false
+    };
+  }
+  if (toolKind === "brush") {
+    return {
+      ...base,
+      size: Math.max(4, sw * 1.22),
+      thinning: 0.52,
+      smoothing: 0.64,
+      streamline: 0.68
+    };
+  }
+  return {
+    ...base,
+    size: Math.max(6, sw * 1.08),
+    thinning: 0.08,
+    smoothing: 0.88,
+    streamline: 0.84,
+    simulatePressure: false
+  };
+}
+function resolveStrokeStyle(item) {
+  return {
+    stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
+    strokeWidth: item.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
+    strokeOpacity: item.strokeOpacity
+  };
+}
+function strokeOpacityAttr(style) {
+  return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
+}
+function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
+}
+function buildEllipseSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  const rx = width / 2;
+  const ry = height / 2;
+  return `<ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
+}
+function buildLineSvg(line, style = DEFAULT_STROKE_STYLE) {
+  return `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
+}
+function computeStraightArrowGeometry(line, strokeWidth) {
+  const dx = line.x2 - line.x1;
+  const dy = line.y2 - line.y1;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-6) return null;
+  const ux = dx / len;
+  const uy = dy / len;
+  const headLength = Math.min(Math.max(strokeWidth * 4.2, 12), len * 0.38);
+  const headAngle = Math.PI / 6;
+  const cos = Math.cos(headAngle);
+  const sin = Math.sin(headAngle);
+  const rx1 = ux * cos - uy * sin;
+  const ry1 = ux * sin + uy * cos;
+  const rx2 = ux * cos + uy * sin;
+  const ry2 = -ux * sin + uy * cos;
+  return {
+    shaftEndX: line.x2,
+    shaftEndY: line.y2,
+    headTipX: line.x2,
+    headTipY: line.y2,
+    headLeftX: line.x2 - rx1 * headLength,
+    headLeftY: line.y2 - ry1 * headLength,
+    headRightX: line.x2 - rx2 * headLength,
+    headRightY: line.y2 - ry2 * headLength
+  };
+}
+function buildArrowSvg(itemId, line, style = DEFAULT_STROKE_STYLE) {
+  const geometry = computeStraightArrowGeometry(line, style.strokeWidth);
+  if (!geometry) {
+    return buildLineSvg(line, style);
+  }
+  const op = strokeOpacityAttr(style);
+  return `
+		<line x1="${line.x1}" y1="${line.y1}" x2="${geometry.shaftEndX}" y2="${geometry.shaftEndY}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round"${op} />
+		<path d="M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />
+	`;
+}
+function buildDrawDotSvg(r, style = DEFAULT_STROKE_STYLE) {
+  const op = style.strokeOpacity != null ? ` fill-opacity="${style.strokeOpacity}"` : "";
+  return `<circle cx="${r}" cy="${r}" r="${r}" fill="${style.stroke}" shape-rendering="geometricPrecision"${op} />`;
+}
+function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
+  if (pathPointsLocal.length === 0) return null;
+  if (pathPointsLocal.length === 1) {
+    const p = pathPointsLocal[0];
+    if (!p) return null;
+    const r = Math.max(0.5, style.strokeWidth / 2);
+    return {
+      kind: "circle",
+      cx: p.x,
+      cy: p.y,
+      r,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const minDist = Math.min(0.25, Math.max(0.02, style.strokeWidth * 0.02));
+  const pts = dedupeFreehandPoints(pathPointsLocal, minDist);
+  if (pts.length === 0) return null;
+  if (pts.length === 1) {
+    const p = pts[0];
+    if (!p) return null;
+    const r = Math.max(0.5, style.strokeWidth / 2);
+    return {
+      kind: "circle",
+      cx: p.x,
+      cy: p.y,
+      r,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const hasPressure = toolKind === "draw" && pts.some((p) => p.pressure != null && Number.isFinite(p.pressure));
+  if (toolKind === "draw" && !hasPressure) {
+    const d2 = smoothFreehandPointsToPathD(pts);
+    return {
+      kind: "strokePath",
+      d: d2,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      strokeOpacity: style.strokeOpacity
+    };
+  }
+  const input = hasPressure ? pts.map(
+    (p) => [p.x, p.y, Math.min(1, Math.max(0, p.pressure ?? 0.5))]
+  ) : pts.map((p) => [p.x, p.y]);
+  const opts = perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure);
+  let outline = [];
+  try {
+    const raw = getStroke(input, opts);
+    outline = raw.map(([x, y]) => [x, y]);
+  } catch {
+    outline = [];
+  }
+  if (outline.length >= 3) {
+    const d2 = outlineStrokeToClosedPathD(outline);
+    return {
+      kind: "fillPath",
+      d: d2,
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  const d = smoothFreehandPointsToPathD(pts);
+  return {
+    kind: "strokePath",
+    d,
+    stroke: style.stroke,
+    strokeWidth: style.strokeWidth,
+    strokeOpacity: style.strokeOpacity
+  };
+}
+function freehandPayloadToSvgString(payload) {
+  if (payload.kind === "circle") {
+    const op2 = payload.fillOpacity != null ? ` fill-opacity="${payload.fillOpacity}"` : "";
+    return `<circle cx="${payload.cx}" cy="${payload.cy}" r="${payload.r}" fill="${payload.fill}" shape-rendering="geometricPrecision"${op2} />`;
+  }
+  if (payload.kind === "fillPath") {
+    const op2 = payload.fillOpacity != null ? ` fill-opacity="${payload.fillOpacity}"` : "";
+    return `<path d="${payload.d}" fill="${payload.fill}" fill-rule="nonzero" stroke="none"${op2} shape-rendering="geometricPrecision" />`;
+  }
+  const op = strokeOpacityAttr({
+    stroke: payload.stroke,
+    strokeWidth: payload.strokeWidth,
+    strokeOpacity: payload.strokeOpacity
+  });
+  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />`;
+}
+function buildFreehandPathSvg(pathPointsLocal, style, toolKind, strokeComplete = true) {
+  const payload = computeFreehandSvgPayload(
+    pathPointsLocal,
+    style,
+    toolKind,
+    strokeComplete
+  );
+  if (!payload) return "";
+  return freehandPayloadToSvgString(payload);
+}
+function lineEndpointsToLocal(bounds, worldEndA, worldEndB) {
+  const b = normalizeRect(bounds);
+  return {
+    x1: worldEndA.x - b.x,
+    y1: worldEndA.y - b.y,
+    x2: worldEndB.x - b.x,
+    y2: worldEndB.y - b.y
+  };
+}
+function rebuildItemSvg(item) {
+  const style = resolveStrokeStyle(item);
+  const k = item.toolKind;
+  if (k === "rect") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildRectSvg(b.width, b.height, style)
+    };
+  }
+  if (k === "ellipse") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildEllipseSvg(b.width, b.height, style)
+    };
+  }
+  if ((k === "line" || k === "arrow") && item.line) {
+    const line = item.line;
+    const childrenSvg = k === "arrow" ? buildArrowSvg(item.id, line, style) : buildLineSvg(line, style);
+    return { ...item, childrenSvg };
+  }
+  if (k === "text" && item.text !== void 0) {
+    const fs = item.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    if (item.textFixedBounds) {
+      const b2 = normalizeRect(item.bounds);
+      return {
+        ...item,
+        x: b2.x,
+        y: b2.y,
+        bounds: b2,
+        childrenSvg: buildTextFixedBoundsSvg(
+          item.text,
+          b2.width,
+          b2.height,
+          style.stroke,
+          fs
+        )
+      };
+    }
+    const m = measureTextBoundsLocal(item.text, fs);
+    const b = normalizeRect({
+      x: item.x,
+      y: item.y,
+      width: m.width,
+      height: m.height
+    });
+    return {
+      ...item,
+      x: b.x,
+      y: b.y,
+      bounds: b,
+      childrenSvg: buildTextSvg(item.text, b.width, b.height, style.stroke, fs)
+    };
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    return {
+      ...item,
+      childrenSvg: buildFreehandPathSvg(item.pathPointsLocal, style, k)
+    };
+  }
+  if (k === "draw") {
+    const b = normalizeRect(item.bounds);
+    const r = Math.min(b.width, b.height) / 2;
+    return {
+      ...item,
+      childrenSvg: buildDrawDotSvg(r, style)
+    };
+  }
+  if (k === "image" && item.imageRasterHref && item.imageIntrinsicSize) {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildRasterImageChildrenSvg(
+        item.imageRasterHref,
+        item.imageIntrinsicSize,
+        b
+      )
+    };
+  }
+  if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      x: b.x,
+      y: b.y,
+      bounds: b,
+      childrenSvg: buildCustomShapeChildrenSvg(
+        item.customInnerSvg,
+        item.customIntrinsicSize,
+        b
+      )
+    };
+  }
+  return item;
+}
+function createLineItem(id, bounds, line, toolKind, style, arrowBind) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind,
+    line: { ...line },
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...{},
+    childrenSvg: ""
+  });
+}
+function escapeSvgAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function buildRasterImageChildrenSvg(dataUrl, intrinsic, bounds) {
+  const r = normalizeRect(bounds);
+  const iw = Math.max(1e-6, intrinsic.width);
+  const ih = Math.max(1e-6, intrinsic.height);
+  const href = escapeSvgAttr(dataUrl);
+  const arB = r.width / Math.max(1e-9, r.height);
+  const arI = iw / ih;
+  if (Math.abs(arB - arI) < 1e-3) {
+    const s2 = r.width / iw;
+    return `<g transform="scale(${s2})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
+  }
+  const s = Math.min(r.width / iw, r.height / ih);
+  const tx = (r.width - iw * s) / 2;
+  const ty = (r.height - ih * s) / 2;
+  return `<g transform="translate(${tx}, ${ty}) scale(${s})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
+}
+function createImageItem(id, bounds, imageRasterHref, imageIntrinsicSize) {
+  const r = normalizeRect(bounds);
+  const iw = Math.max(1e-6, imageIntrinsicSize.width);
+  const ih = Math.max(1e-6, imageIntrinsicSize.height);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "image",
+    imageRasterHref,
+    imageIntrinsicSize: { width: iw, height: ih },
+    childrenSvg: buildRasterImageChildrenSvg(
+      imageRasterHref,
+      { width: iw, height: ih },
+      r
+    )
+  };
+}
+
+// src/plugins/tldraw/index.ts
+var IDENTITY_MATRIX = {
+  a: 1,
+  b: 0,
+  c: 0,
+  d: 1,
+  e: 0,
+  f: 0
+};
+var TL_COLORS = {
+  black: "#1d1d1d",
+  gray: "#6b7280",
+  grey: "#6b7280",
+  "light-gray": "#9ca3af",
+  "dark-gray": "#374151",
+  blue: "#3b82f6",
+  "light-blue": "#93c5fd",
+  green: "#22c55e",
+  "light-green": "#86efac",
+  "dark-green": "#16a34a",
+  red: "#ef4444",
+  "light-red": "#fca5a5",
+  "dark-red": "#dc2626",
+  violet: "#8b5cf6",
+  "light-violet": "#c4b5fd",
+  "dark-violet": "#7c3aed",
+  yellow: "#eab308",
+  orange: "#f97316",
+  "light-orange": "#fdba74"
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+  return isRecord(value) ? value : void 0;
+}
+function asArray(value) {
+  return Array.isArray(value) ? value : void 0;
+}
+function getString(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function getNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function resolveColor(value) {
+  if (!value) return "#1d1d1d";
+  return TL_COLORS[value] ?? value;
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeHtmlText2(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function formatNumber(value) {
+  if (!Number.isFinite(value)) return "0";
+  const rounded = Math.round(value * 100) / 100;
+  return Number.isInteger(rounded) ? String(rounded) : String(rounded);
+}
+function multiplyMatrix(left, right) {
+  return {
+    a: left.a * right.a + left.c * right.b,
+    b: left.b * right.a + left.d * right.b,
+    c: left.a * right.c + left.c * right.d,
+    d: left.b * right.c + left.d * right.d,
+    e: left.a * right.e + left.c * right.f + left.e,
+    f: left.b * right.e + left.d * right.f + left.f
+  };
+}
+function translationMatrix(x, y) {
+  return { a: 1, b: 0, c: 0, d: 1, e: x, f: y };
+}
+function rotationMatrix(radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  return { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 };
+}
+function applyMatrix(matrix, point) {
+  return {
+    x: matrix.a * point.x + matrix.c * point.y + matrix.e,
+    y: matrix.b * point.x + matrix.d * point.y + matrix.f
+  };
+}
+function matrixRotation(matrix) {
+  return Math.atan2(matrix.b, matrix.a);
+}
+function opacityToUnit(value) {
+  const numeric = getNumber(value);
+  if (numeric == null) return 1;
+  return numeric > 1 ? clamp01(numeric / 100) : clamp01(numeric);
+}
+function sizeToStrokePx(size, base = 2) {
+  if (size === "s") return base * 0.75;
+  if (size === "l") return base * 1.5;
+  if (size === "xl") return base * 2.25;
+  return base;
+}
+function sizeToFontPx(size) {
+  if (size === "s") return 14;
+  if (size === "l") return 24;
+  if (size === "xl") return 32;
+  return 18;
+}
+function dashArrayForStyle(dash, strokeWidth) {
+  if (!dash || dash === "solid") return void 0;
+  if (dash === "dotted") {
+    return `${formatNumber(Math.max(1.25, strokeWidth))} ${formatNumber(Math.max(2.5, strokeWidth * 2.2))}`;
+  }
+  if (dash === "dashed") {
+    return `${formatNumber(Math.max(5, strokeWidth * 4))} ${formatNumber(Math.max(3, strokeWidth * 2.2))}`;
+  }
+  if (dash === "draw") {
+    return `${formatNumber(Math.max(3, strokeWidth * 2.4))} ${formatNumber(Math.max(2.4, strokeWidth * 1.6))}`;
+  }
+  return dash;
+}
+function fillAttrs(fill, stroke) {
+  if (!fill || fill === "none") return 'fill="none"';
+  if (fill === "solid") return `fill="${stroke}" fill-opacity="0.16"`;
+  if (fill === "semi") return `fill="${stroke}" fill-opacity="0.1"`;
+  if (fill === "pattern") return `fill="${stroke}" fill-opacity="0.07"`;
+  return `fill="${resolveColor(fill)}" fill-opacity="0.16"`;
+}
+function strokeAttrs(style) {
+  const dashArray = dashArrayForStyle(style.dash, style.strokeWidth);
+  const dashAttr = dashArray ? ` stroke-dasharray="${dashArray}"` : "";
+  const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
+  const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
+  return `stroke="${style.stroke}" stroke-width="${formatNumber(style.strokeWidth)}"${dashAttr}${lineCap}${lineJoin}`;
+}
+function wrapOpacity(svg, opacity) {
+  if (opacity >= 0.999) return svg;
+  return `<g opacity="${formatNumber(opacity)}">${svg}</g>`;
+}
+function buildForeignObjectTextSvg(options) {
+  const x = options.x ?? 0;
+  const y = options.y ?? 0;
+  const w = Math.max(1, options.width);
+  const h = Math.max(1, options.height);
+  const padding = options.padding ?? 0;
+  const align = options.align === "end" || options.align === "right" ? "right" : options.align === "middle" || options.align === "center" ? "center" : "left";
+  const justify = align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start";
+  const vertical = options.verticalAlign === "end" || options.verticalAlign === "bottom" ? "flex-end" : options.verticalAlign === "middle" || options.verticalAlign === "center" ? "center" : "flex-start";
+  const lineHeight = options.fontSize * (options.lineHeightRatio ?? 1.25);
+  const weight = options.fontWeight != null ? `font-weight:${options.fontWeight};` : "";
+  const fontStyle = options.italic ? "font-style:italic;" : "";
+  const background = options.background ? `background:${options.background};` : "";
+  const radius = options.borderRadius != null ? `border-radius:${formatNumber(options.borderRadius)}px;` : "";
+  return `<foreignObject x="${formatNumber(x)}" y="${formatNumber(y)}" width="${formatNumber(w)}" height="${formatNumber(h)}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${formatNumber(padding)}px;display:flex;align-items:${vertical};justify-content:${justify};text-align:${align};white-space:pre-wrap;word-break:break-word;overflow:hidden;color:${options.color};font-size:${formatNumber(options.fontSize)}px;line-height:${formatNumber(lineHeight)}px;font-family:system-ui,sans-serif;${weight}${fontStyle}${background}${radius}">${escapeHtmlText2(options.text)}</div></foreignObject>`;
+}
+function richTextToPlainText(value) {
+  const parts = [];
+  function walk(node) {
+    if (typeof node === "string") {
+      parts.push(node);
+      return;
+    }
+    if (Array.isArray(node)) {
+      for (const child of node) walk(child);
+      return;
+    }
+    const record = asRecord(node);
+    if (!record) return;
+    const type = getString(record.type);
+    if (type === "hardBreak") {
+      parts.push("\n");
+      return;
+    }
+    const text = getString(record.text);
+    if (text) parts.push(text);
+    const content = asArray(record.content);
+    if (content) {
+      const before = parts.length;
+      for (const child of content) walk(child);
+      if (parts.length > before && (type === "paragraph" || type === "heading" || type === "blockquote" || type === "listItem") && parts[parts.length - 1] !== "\n") {
+        parts.push("\n");
+      }
+    }
+  }
+  walk(value);
+  return parts.join("").replace(/\n{3,}/g, "\n\n").trimEnd();
+}
+function extractPlainText(props) {
+  const direct = getString(props.text);
+  if (direct != null) return direct;
+  const plain = getString(props.plainText);
+  if (plain != null) return plain;
+  const rich = richTextToPlainText(props.richText);
+  if (rich) return rich;
+  return "";
+}
+function numberOr(value, fallback) {
+  return getNumber(value) ?? fallback;
+}
+function decodeBase64Bytes(base64) {
+  if (!base64) return new Uint8Array();
+  const uint8ArrayCtor = Uint8Array;
+  if (typeof uint8ArrayCtor.fromBase64 === "function") {
+    return uint8ArrayCtor.fromBase64(base64);
+  }
+  if (typeof atob === "function") {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index++) {
+      bytes[index] = binary.charCodeAt(index);
+    }
+    return bytes;
+  }
+  const globalBuffer = globalThis.Buffer;
+  if (globalBuffer) {
+    return new Uint8Array(globalBuffer.from(base64, "base64"));
+  }
+  return new Uint8Array();
+}
+function float16BitsToNumber(bits) {
+  const sign = (bits & 32768) !== 0 ? -1 : 1;
+  const exponent = bits >> 10 & 31;
+  const fraction = bits & 1023;
+  if (exponent === 0) {
+    if (fraction === 0) return sign === -1 ? -0 : 0;
+    return sign * (fraction / 1024) * 2 ** -14;
+  }
+  if (exponent === 31) {
+    return fraction === 0 ? sign * Infinity : Number.NaN;
+  }
+  return sign * (1 + fraction / 1024) * 2 ** (exponent - 15);
+}
+function getFloat16(dataView, offset) {
+  const native = dataView;
+  if (typeof native.getFloat16 === "function") {
+    return native.getFloat16(offset, true);
+  }
+  return float16BitsToNumber(dataView.getUint16(offset, true));
+}
+function isUsableDecodedPoints(points) {
+  return points.length > 0 && points.every(
+    (point) => Number.isFinite(point.x) && Number.isFinite(point.y) && (point.pressure == null || Number.isFinite(point.pressure))
+  );
+}
+function decodeDrawPathAsDeltaPoints(path) {
+  const bytes = decodeBase64Bytes(path);
+  if (bytes.length < 12 || (bytes.length - 12) % 6 !== 0) return [];
+  const dataView = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  let x = dataView.getFloat32(0, true);
+  let y = dataView.getFloat32(4, true);
+  let z = dataView.getFloat32(8, true);
+  const points = [{ x, y, pressure: clamp01(z) }];
+  for (let offset = 12; offset < bytes.length; offset += 6) {
+    x += getFloat16(dataView, offset);
+    y += getFloat16(dataView, offset + 2);
+    z += getFloat16(dataView, offset + 4);
+    points.push({ x, y, pressure: clamp01(z) });
+  }
+  return isUsableDecodedPoints(points) ? points : [];
+}
+function decodeDrawPathAsLegacyPoints(path) {
+  const bytes = decodeBase64Bytes(path);
+  if (bytes.length === 0 || bytes.length % 6 !== 0) return [];
+  const dataView = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const points = [];
+  for (let offset = 0; offset < bytes.length; offset += 6) {
+    points.push({
+      x: getFloat16(dataView, offset),
+      y: getFloat16(dataView, offset + 2),
+      pressure: clamp01(getFloat16(dataView, offset + 4))
+    });
+  }
+  return isUsableDecodedPoints(points) ? points : [];
+}
+function decodeDrawPath(path) {
+  const deltaPoints = decodeDrawPathAsDeltaPoints(path);
+  return deltaPoints.length > 0 ? deltaPoints : decodeDrawPathAsLegacyPoints(path);
+}
+function unwrapStoredRecord(value) {
+  const record = asRecord(value);
+  if (!record) return null;
+  const state = asRecord(record.state);
+  return state ?? record;
+}
+function inferPageIdFromSession(input) {
+  if (!isRecord(input) || !("session" in input)) return void 0;
+  const session = asRecord(input.session);
+  if (!session) return void 0;
+  const direct = getString(session.currentPageId) ?? getString(session.pageId);
+  if (direct) return direct;
+  const pageState = asRecord(session.pageState);
+  if (!pageState) return void 0;
+  return getString(pageState.pageId) ?? getString(pageState.currentPageId);
+}
+function recordsFromDocument(document2) {
+  const snapshot = asRecord(document2);
+  if (!snapshot) return [];
+  if (isRecord(snapshot.store)) {
+    return Object.values(snapshot.store);
+  }
+  return Object.values(snapshot).map((value) => unwrapStoredRecord(value)).filter((value) => value != null);
+}
+function normalizeSnapshot(input, options) {
+  const rawInput = asRecord(input) ?? {};
+  let records = [];
+  if (Array.isArray(rawInput.documents)) {
+    records = rawInput.documents.map((value) => unwrapStoredRecord(value)).filter((value) => value != null);
+  } else if (isRecord(rawInput.store)) {
+    records = Object.values(rawInput.store);
+  } else if ("document" in rawInput) {
+    records = recordsFromDocument(rawInput.document);
+  }
+  const recordsMap = /* @__PURE__ */ new Map();
+  const shapes = /* @__PURE__ */ new Map();
+  const assets = /* @__PURE__ */ new Map();
+  const bindings = /* @__PURE__ */ new Map();
+  const pages = /* @__PURE__ */ new Map();
+  for (const record of records) {
+    const raw = asRecord(record);
+    const id = raw ? getString(raw.id) : void 0;
+    const typeName = raw ? getString(raw.typeName) : void 0;
+    if (!id || !typeName) continue;
+    recordsMap.set(id, record);
+    if (typeName === "shape") {
+      shapes.set(id, record);
+      continue;
+    }
+    if (typeName === "asset") {
+      assets.set(id, record);
+      continue;
+    }
+    if (typeName === "binding") {
+      bindings.set(id, record);
+      continue;
+    }
+    if (typeName === "page") {
+      pages.set(id, record);
+    }
+  }
+  const selectedPageId = options.pageId ?? inferPageIdFromSession(input) ?? pages.keys().next().value ?? Array.from(shapes.values()).find((shape) => shape.parentId.startsWith("page:"))?.parentId;
+  return {
+    records: recordsMap,
+    shapes,
+    assets,
+    bindings,
+    pages,
+    selectedPageId,
+    options,
+    localBoundsCache: /* @__PURE__ */ new Map(),
+    worldMatrixCache: /* @__PURE__ */ new Map(),
+    rootPageCache: /* @__PURE__ */ new Map()
+  };
+}
+function normalizePoint(value) {
+  if (Array.isArray(value)) {
+    const [x2, y2, pressure2] = value;
+    const px = getNumber(x2);
+    const py = getNumber(y2);
+    if (px == null || py == null) return null;
+    return {
+      x: px,
+      y: py,
+      ...getNumber(pressure2) != null ? { pressure: clamp01(getNumber(pressure2) ?? 0.5) } : {}
+    };
+  }
+  const record = asRecord(value);
+  if (!record) return null;
+  const x = getNumber(record.x);
+  const y = getNumber(record.y);
+  if (x == null || y == null) return null;
+  const pressure = getNumber(record.pressure) ?? getNumber(record.z);
+  return {
+    x,
+    y,
+    ...pressure != null ? { pressure: clamp01(pressure) } : {},
+    ...getString(record.index) ? { index: getString(record.index) } : {}
+  };
+}
+function collectStrokePoints(props) {
+  const segments = asArray(props.segments) ?? [];
+  const points = [];
+  const scaleX = getNumber(props.scaleX) ?? getNumber(props.scale) ?? 1;
+  const scaleY = getNumber(props.scaleY) ?? getNumber(props.scale) ?? 1;
+  for (const segment of segments) {
+    const record = asRecord(segment);
+    const encodedPath = record ? getString(record.path) : void 0;
+    const rawPoints = record ? asArray(record.points) ?? [] : [];
+    const segmentIsAbsolute = Boolean(encodedPath);
+    const decodedPoints = rawPoints.length > 0 ? rawPoints.map((value) => normalizePoint(value)).filter((value) => value != null) : encodedPath ? decodeDrawPath(encodedPath) : [];
+    const previous = points[points.length - 1];
+    for (let index = 0; index < decodedPoints.length; index++) {
+      const point = decodedPoints[index];
+      if (!point) continue;
+      const scaledPoint = {
+        x: point.x * scaleX,
+        y: point.y * scaleY,
+        ...point.pressure != null ? { pressure: point.pressure } : {}
+      };
+      if (index === 0 && previous && !segmentIsAbsolute) {
+        points.push({
+          x: previous.x + scaledPoint.x,
+          y: previous.y + scaledPoint.y,
+          ...scaledPoint.pressure != null ? { pressure: scaledPoint.pressure } : {}
+        });
+      } else {
+        points.push(scaledPoint);
+      }
+    }
+  }
+  return points;
+}
+function collectLinePoints(props) {
+  const pointsRecord = asRecord(props.points);
+  if (pointsRecord) {
+    const points = Object.values(pointsRecord).map((value) => normalizePoint(value)).filter((value) => value != null).sort((left, right) => (left.index ?? "").localeCompare(right.index ?? ""));
+    if (points.length > 0) return points;
+  }
+  const arrayPoints = asArray(props.points);
+  if (arrayPoints) {
+    const points = arrayPoints.map((value) => normalizePoint(value)).filter((value) => value != null);
+    if (points.length > 0) return points;
+  }
+  const start = normalizePoint(props.start);
+  const end = normalizePoint(props.end);
+  if (start && end) return [start, end];
+  return [];
+}
+function freehandPadding(strokeWidth) {
+  return Math.max(strokeWidth * 0.75 + 4, strokeWidth / 2 + 6);
+}
+function boundsFromPoints(points, padding = 0) {
+  if (points.length === 0) return null;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const point of points) {
+    minX = Math.min(minX, point.x);
+    minY = Math.min(minY, point.y);
+    maxX = Math.max(maxX, point.x);
+    maxY = Math.max(maxY, point.y);
+  }
+  return {
+    x: minX - padding,
+    y: minY - padding,
+    width: Math.max(maxX - minX + padding * 2, 1),
+    height: Math.max(maxY - minY + padding * 2, 1)
+  };
+}
+function computeArrowRoute(props) {
+  const start = normalizePoint(props.start);
+  const end = normalizePoint(props.end);
+  if (!start || !end) return null;
+  const kind = getString(props.kind);
+  const bend = getNumber(props.bend) ?? 0;
+  if (kind === "elbow") {
+    const t = Math.max(0.1, Math.min(0.9, getNumber(props.elbowMidPoint) ?? 0.5));
+    const midX = start.x + (end.x - start.x) * t;
+    const p1 = { x: midX, y: start.y };
+    const p2 = { x: midX, y: end.y };
+    return {
+      kind: "polyline",
+      points: [start, p1, p2, end],
+      startRef: p1,
+      endRef: p2
+    };
+  }
+  if (kind === "arc" || Math.abs(bend) > 0.5) {
+    const midX = (start.x + end.x) / 2;
+    const midY = (start.y + end.y) / 2;
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy) || 1;
+    const nx = -dy / length;
+    const ny = dx / length;
+    const control = { x: midX + nx * bend, y: midY + ny * bend };
+    return {
+      kind: "quadratic",
+      points: [start, end],
+      control,
+      startRef: control,
+      endRef: control
+    };
+  }
+  return {
+    kind: "line",
+    points: [start, end],
+    startRef: end,
+    endRef: start
+  };
+}
+function defaultShapeRect(type, props) {
+  const w = getNumber(props.w);
+  const h = getNumber(props.h);
+  if (type === "image" || type === "video") {
+    return { x: 0, y: 0, width: w ?? 240, height: h ?? 160 };
+  }
+  if (type === "bookmark") {
+    return { x: 0, y: 0, width: w ?? 320, height: h ?? 180 };
+  }
+  if (type === "embed") {
+    return { x: 0, y: 0, width: w ?? 360, height: h ?? 220 };
+  }
+  if (type === "frame") {
+    return { x: 0, y: 0, width: w ?? 360, height: h ?? 240 };
+  }
+  if (type === "note") {
+    return { x: 0, y: 0, width: w ?? 220, height: h ?? 180 };
+  }
+  return { x: 0, y: 0, width: w ?? 120, height: h ?? 90 };
+}
+function resolveShapeLocalBounds(snapshot, shapeId, stack = /* @__PURE__ */ new Set()) {
+  const cached = snapshot.localBoundsCache.get(shapeId);
+  if (cached) return cached;
+  if (stack.has(shapeId)) return { x: 0, y: 0, width: 120, height: 90 };
+  stack.add(shapeId);
+  const shape = snapshot.shapes.get(shapeId);
+  if (!shape) {
+    stack.delete(shapeId);
+    return { x: 0, y: 0, width: 120, height: 90 };
+  }
+  const props = asRecord(shape.props) ?? {};
+  const strokeWidth = sizeToStrokePx(
+    getString(props.size),
+    shape.type === "highlight" ? 16 : 2.5
+  );
+  let bounds = null;
+  if (shape.type === "draw" || shape.type === "highlight") {
+    bounds = boundsFromPoints(
+      collectStrokePoints(props),
+      freehandPadding(strokeWidth)
+    );
+  } else if (shape.type === "line") {
+    bounds = boundsFromPoints(
+      collectLinePoints(props),
+      Math.max(6, strokeWidth * 2.5)
+    );
+  } else if (shape.type === "arrow") {
+    const route = computeArrowRoute(props);
+    if (route) {
+      const routePoints = [...route.points, route.startRef, route.endRef];
+      if (route.control) routePoints.push(route.control);
+      bounds = boundsFromPoints(routePoints, Math.max(10, strokeWidth * 5));
+    }
+  } else if (shape.type === "text") {
+    const text = extractPlainText(props);
+    const fontSize = getNumber(props.fontSize) ?? sizeToFontPx(getString(props.size));
+    const w = getNumber(props.w);
+    const h = getNumber(props.h);
+    bounds = w != null && h != null ? { x: 0, y: 0, width: Math.max(1, w), height: Math.max(1, h) } : { x: 0, y: 0, ...measureTextBoundsLocal(text, fontSize) };
+  } else if (shape.type === "group") {
+    const childRects = Array.from(snapshot.shapes.values()).filter((candidate) => candidate.parentId === shape.id).map((candidate) => {
+      const childBounds = resolveShapeLocalBounds(snapshot, candidate.id, stack);
+      return {
+        x: candidate.x + childBounds.x,
+        y: candidate.y + childBounds.y,
+        width: childBounds.width,
+        height: childBounds.height
+      };
+    });
+    if (childRects.length > 0) {
+      const points = [];
+      for (const rect of childRects) {
+        points.push({ x: rect.x, y: rect.y });
+        points.push({ x: rect.x + rect.width, y: rect.y + rect.height });
+      }
+      bounds = boundsFromPoints(points, 0);
+    }
+  }
+  if (!bounds) {
+    bounds = defaultShapeRect(shape.type, props);
+  }
+  const normalized = normalizeRect(bounds);
+  snapshot.localBoundsCache.set(shapeId, normalized);
+  stack.delete(shapeId);
+  return normalized;
+}
+function resolveShapeWorldMatrix(snapshot, shapeId, stack = /* @__PURE__ */ new Set()) {
+  const cached = snapshot.worldMatrixCache.get(shapeId);
+  if (cached) return cached;
+  if (stack.has(shapeId)) return IDENTITY_MATRIX;
+  stack.add(shapeId);
+  const shape = snapshot.shapes.get(shapeId);
+  if (!shape) {
+    stack.delete(shapeId);
+    return IDENTITY_MATRIX;
+  }
+  const localBounds = resolveShapeLocalBounds(snapshot, shapeId, stack);
+  const cx = localBounds.x + localBounds.width / 2;
+  const cy = localBounds.y + localBounds.height / 2;
+  const localMatrix = multiplyMatrix(
+    translationMatrix(shape.x, shape.y),
+    multiplyMatrix(
+      translationMatrix(cx, cy),
+      multiplyMatrix(
+        rotationMatrix(shape.rotation ?? 0),
+        translationMatrix(-cx, -cy)
+      )
+    )
+  );
+  const parentShape = snapshot.shapes.get(shape.parentId);
+  const world = parentShape ? multiplyMatrix(
+    resolveShapeWorldMatrix(snapshot, parentShape.id, stack),
+    localMatrix
+  ) : localMatrix;
+  snapshot.worldMatrixCache.set(shapeId, world);
+  stack.delete(shapeId);
+  return world;
+}
+function resolveRootPageId(snapshot, shapeId) {
+  const cached = snapshot.rootPageCache.get(shapeId);
+  if (cached !== void 0) return cached ?? void 0;
+  const visited = /* @__PURE__ */ new Set();
+  let current = snapshot.shapes.get(shapeId);
+  while (current && !visited.has(current.id)) {
+    visited.add(current.id);
+    if (snapshot.pages.has(current.parentId) || current.parentId.startsWith("page:")) {
+      snapshot.rootPageCache.set(shapeId, current.parentId);
+      return current.parentId;
+    }
+    current = snapshot.shapes.get(current.parentId);
+  }
+  snapshot.rootPageCache.set(shapeId, null);
+  return void 0;
+}
+function shouldIncludeShape(snapshot, shape) {
+  if (!snapshot.selectedPageId) return true;
+  const rootPageId = resolveRootPageId(snapshot, shape.id);
+  if (!rootPageId) return snapshot.pages.size === 0;
+  return rootPageId === snapshot.selectedPageId;
+}
+function buildItemPlacement(snapshot, shape, localBounds) {
+  const world = resolveShapeWorldMatrix(snapshot, shape.id);
+  const itemMatrix = multiplyMatrix(
+    world,
+    translationMatrix(localBounds.x, localBounds.y)
+  );
+  const origin = applyMatrix(itemMatrix, { x: 0, y: 0 });
+  return {
+    x: origin.x,
+    y: origin.y,
+    rotation: matrixRotation(itemMatrix),
+    bounds: {
+      x: origin.x,
+      y: origin.y,
+      width: Math.max(1, localBounds.width),
+      height: Math.max(1, localBounds.height)
+    }
+  };
+}
+function buildItemBase(snapshot, shape, localBounds) {
+  const placement = buildItemPlacement(snapshot, shape, localBounds);
+  return {
+    id: shape.id,
+    x: placement.x,
+    y: placement.y,
+    bounds: placement.bounds,
+    rotation: placement.rotation,
+    locked: shape.isLocked
+  };
+}
+function shapeOpacity(shape) {
+  const props = asRecord(shape.props) ?? {};
+  return clamp01((shape.opacity ?? 1) * opacityToUnit(props.opacity));
+}
+function shapeStrokeColor(shape) {
+  const props = asRecord(shape.props) ?? {};
+  return resolveColor(getString(props.color));
+}
+function createCustomImportedItem(snapshot, shape, localBounds, innerSvg, style) {
+  const base = buildItemBase(snapshot, shape, localBounds);
+  const custom = createCustomShapeItem(shape.id, base.bounds, { svg: innerSvg });
+  return {
+    ...custom,
+    ...base,
+    ...style?.stroke ? { stroke: style.stroke } : {},
+    ...style?.strokeWidth != null ? { strokeWidth: style.strokeWidth } : {}
+  };
+}
+function polygonPath(points) {
+  if (points.length === 0) return "";
+  let path = `M${formatNumber(points[0]?.x ?? 0)} ${formatNumber(points[0]?.y ?? 0)}`;
+  for (let index = 1; index < points.length; index++) {
+    const point = points[index];
+    if (!point) continue;
+    path += ` L${formatNumber(point.x)} ${formatNumber(point.y)}`;
+  }
+  return `${path} Z`;
+}
+function cloudPath(width, height) {
+  const r = Math.min(width, height) * 0.15;
+  return `M${formatNumber(r)} ${formatNumber(height * 0.3)} Q0 ${formatNumber(height * 0.1)} ${formatNumber(width * 0.15)} ${formatNumber(height * 0.05)} Q${formatNumber(width * 0.3)} 0 ${formatNumber(width * 0.45)} ${formatNumber(height * 0.1)} Q${formatNumber(width * 0.7)} 0 ${formatNumber(width * 0.8)} ${formatNumber(height * 0.15)} Q${formatNumber(width)} ${formatNumber(height * 0.2)} ${formatNumber(width * 0.9)} ${formatNumber(height * 0.5)} Q${formatNumber(width)} ${formatNumber(height * 0.7)} ${formatNumber(width * 0.85)} ${formatNumber(height * 0.8)} Q${formatNumber(width * 0.7)} ${formatNumber(height)} ${formatNumber(width * 0.5)} ${formatNumber(height * 0.9)} Q${formatNumber(width * 0.3)} ${formatNumber(height)} ${formatNumber(width * 0.15)} ${formatNumber(height * 0.85)} Q0 ${formatNumber(height * 0.8)} ${formatNumber(r * 0.5)} ${formatNumber(height * 0.6)} Q0 ${formatNumber(height * 0.5)} ${formatNumber(r)} ${formatNumber(height * 0.3)} Z`;
+}
+function geoPath(geo, width, height) {
+  if (geo === "diamond" || geo === "rhombus") {
+    return polygonPath([
+      { x: width / 2, y: 0 },
+      { x: width, y: height / 2 },
+      { x: width / 2, y: height },
+      { x: 0, y: height / 2 }
+    ]);
+  }
+  if (geo === "triangle") {
+    return polygonPath([
+      { x: width / 2, y: 0 },
+      { x: width, y: height },
+      { x: 0, y: height }
+    ]);
+  }
+  if (geo === "trapezoid") {
+    return polygonPath([
+      { x: width * 0.2, y: 0 },
+      { x: width * 0.8, y: 0 },
+      { x: width, y: height },
+      { x: 0, y: height }
+    ]);
+  }
+  if (geo === "hexagon") {
+    return polygonPath([
+      { x: width * 0.25, y: 0 },
+      { x: width * 0.75, y: 0 },
+      { x: width, y: height / 2 },
+      { x: width * 0.75, y: height },
+      { x: width * 0.25, y: height },
+      { x: 0, y: height / 2 }
+    ]);
+  }
+  if (geo === "star") {
+    const cx = width / 2;
+    const cy = height / 2;
+    const rOut = Math.min(width, height) / 2;
+    const rIn = rOut * 0.45;
+    const points = [];
+    for (let index = 0; index < 5; index++) {
+      const outer = index * 2 * Math.PI / 5 - Math.PI / 2;
+      const inner = outer + Math.PI / 5;
+      points.push({
+        x: cx + rOut * Math.cos(outer),
+        y: cy + rOut * Math.sin(outer)
+      });
+      points.push({ x: cx + rIn * Math.cos(inner), y: cy + rIn * Math.sin(inner) });
+    }
+    return polygonPath(points);
+  }
+  if (geo === "cloud") {
+    return cloudPath(width, height);
+  }
+  if (geo === "arrow-right") {
+    return polygonPath([
+      { x: 0, y: height * 0.25 },
+      { x: width * 0.62, y: height * 0.25 },
+      { x: width * 0.62, y: 0 },
+      { x: width, y: height / 2 },
+      { x: width * 0.62, y: height },
+      { x: width * 0.62, y: height * 0.75 },
+      { x: 0, y: height * 0.75 }
+    ]);
+  }
+  if (geo === "arrow-left") {
+    return polygonPath([
+      { x: width, y: height * 0.25 },
+      { x: width * 0.38, y: height * 0.25 },
+      { x: width * 0.38, y: 0 },
+      { x: 0, y: height / 2 },
+      { x: width * 0.38, y: height },
+      { x: width * 0.38, y: height * 0.75 },
+      { x: width, y: height * 0.75 }
+    ]);
+  }
+  if (geo === "check-box") {
+    return `M0 0 H${formatNumber(width)} V${formatNumber(height)} H0 Z M${formatNumber(width * 0.2)} ${formatNumber(height * 0.56)} L${formatNumber(width * 0.42)} ${formatNumber(height * 0.78)} L${formatNumber(width * 0.82)} ${formatNumber(height * 0.24)}`;
+  }
+  if (geo === "x-box") {
+    return `M0 0 H${formatNumber(width)} V${formatNumber(height)} H0 Z M${formatNumber(width * 0.22)} ${formatNumber(height * 0.22)} L${formatNumber(width * 0.78)} ${formatNumber(height * 0.78)} M${formatNumber(width * 0.78)} ${formatNumber(height * 0.22)} L${formatNumber(width * 0.22)} ${formatNumber(height * 0.78)}`;
+  }
+  return null;
+}
+function renderGeoShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const geo = getString(props.geo) ?? "rectangle";
+  const stroke = shapeStrokeColor(shape);
+  const strokeWidth = sizeToStrokePx(getString(props.size));
+  const dash = getString(props.dash);
+  const text = extractPlainText(props);
+  const fontSize = getNumber(props.fontSize) ?? sizeToFontPx(getString(props.size));
+  const customPath = geoPath(geo, width, height);
+  const shapeMarkup = geo === "ellipse" || geo === "oval" ? `<ellipse cx="${formatNumber(width / 2)}" cy="${formatNumber(height / 2)}" rx="${formatNumber(width / 2)}" ry="${formatNumber(height / 2)}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : customPath ? `<path d="${customPath}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="8" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
+  const textMarkup = text ? buildForeignObjectTextSvg({
+    width,
+    height,
+    text,
+    fontSize,
+    color: stroke,
+    padding: 10,
+    align: getString(props.align),
+    verticalAlign: getString(props.verticalAlign)
+  }) : "";
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(`${shapeMarkup}${textMarkup}`, shapeOpacity(shape)),
+    { stroke, strokeWidth }
+  );
+}
+function renderTextShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const text = extractPlainText(props);
+  const stroke = shapeStrokeColor(shape);
+  const fontSize = getNumber(props.fontSize) ?? sizeToFontPx(getString(props.size));
+  const hasFixedBounds = getNumber(props.w) != null && getNumber(props.h) != null;
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const base = buildItemBase(snapshot, shape, localBounds);
+  const childrenSvg = hasFixedBounds ? wrapOpacity(
+    buildForeignObjectTextSvg({
+      width: localBounds.width,
+      height: localBounds.height,
+      text,
+      fontSize,
+      color: stroke,
+      padding: 4,
+      align: getString(props.textAlign) ?? getString(props.align),
+      verticalAlign: getString(props.verticalAlign)
+    }),
+    shapeOpacity(shape)
+  ) : wrapOpacity(
+    buildTextSvg(text, localBounds.width, localBounds.height, stroke, fontSize),
+    shapeOpacity(shape)
+  );
+  return {
+    ...base,
+    toolKind: "text",
+    stroke,
+    text,
+    textFontSize: fontSize,
+    ...hasFixedBounds ? { textFixedBounds: true } : {},
+    childrenSvg
+  };
+}
+function renderStrokeShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const points = collectStrokePoints(props);
+  if (points.length === 0) return null;
+  const stroke = shapeStrokeColor(shape);
+  const toolKind = shape.type === "highlight" ? "marker" : "draw";
+  const strokeWidth = shape.type === "highlight" ? sizeToStrokePx(getString(props.size), 16) : sizeToStrokePx(getString(props.size), 2.5);
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const base = buildItemBase(snapshot, shape, localBounds);
+  const opacity = shapeOpacity(shape) * (shape.type === "highlight" ? 0.45 : 1);
+  const pathPointsLocal = points.map((point) => ({
+    x: point.x - localBounds.x,
+    y: point.y - localBounds.y,
+    ...point.pressure != null ? { pressure: point.pressure } : {}
+  }));
+  const style = {
+    stroke,
+    strokeWidth,
+    ...opacity < 0.999 ? { strokeOpacity: opacity } : {}
+  };
+  return {
+    ...base,
+    toolKind,
+    stroke,
+    strokeWidth,
+    ...style.strokeOpacity != null ? { strokeOpacity: style.strokeOpacity } : {},
+    pathPointsLocal,
+    childrenSvg: buildFreehandPathSvg(pathPointsLocal, style, toolKind)
+  };
+}
+function polylinePath(points) {
+  if (points.length === 0) return "";
+  let path = `M${formatNumber(points[0]?.x ?? 0)} ${formatNumber(points[0]?.y ?? 0)}`;
+  for (let index = 1; index < points.length; index++) {
+    const point = points[index];
+    if (!point) continue;
+    path += ` L${formatNumber(point.x)} ${formatNumber(point.y)}`;
+  }
+  return path;
+}
+function buildArrowHeadSvg(options) {
+  const type = options.type;
+  if (!type || type === "none") return "";
+  const dx = options.tip.x - options.from.x;
+  const dy = options.tip.y - options.from.y;
+  const length = Math.hypot(dx, dy);
+  if (length < 1e-6) return "";
+  const ux = dx / length;
+  const uy = dy / length;
+  const headLength = Math.max(10, options.strokeWidth * 4.5);
+  const headWidth = Math.max(7, options.strokeWidth * 3);
+  const bx = options.tip.x - ux * headLength;
+  const by = options.tip.y - uy * headLength;
+  const px = -uy;
+  const py = ux;
+  const left = { x: bx + px * (headWidth / 2), y: by + py * (headWidth / 2) };
+  const right = { x: bx - px * (headWidth / 2), y: by - py * (headWidth / 2) };
+  if (type === "triangle") {
+    return `<polygon points="${formatNumber(options.tip.x)},${formatNumber(options.tip.y)} ${formatNumber(left.x)},${formatNumber(left.y)} ${formatNumber(right.x)},${formatNumber(right.y)}" fill="${options.stroke}" />`;
+  }
+  if (type === "dot") {
+    return `<circle cx="${formatNumber(options.tip.x)}" cy="${formatNumber(options.tip.y)}" r="${formatNumber(Math.max(3, options.strokeWidth * 1.5))}" fill="${options.stroke}" />`;
+  }
+  if (type === "diamond") {
+    const mid = {
+      x: options.tip.x - ux * (headLength / 2),
+      y: options.tip.y - uy * (headLength / 2)
+    };
+    return `<polygon points="${formatNumber(options.tip.x)},${formatNumber(options.tip.y)} ${formatNumber(left.x)},${formatNumber(left.y)} ${formatNumber(mid.x - ux * (headLength / 2))},${formatNumber(mid.y - uy * (headLength / 2))} ${formatNumber(right.x)},${formatNumber(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linejoin="round" />`;
+  }
+  if (type === "bar") {
+    return `<line x1="${formatNumber(left.x)}" y1="${formatNumber(left.y)}" x2="${formatNumber(right.x)}" y2="${formatNumber(right.y)}" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linecap="round" />`;
+  }
+  return `<path d="M ${formatNumber(left.x)} ${formatNumber(left.y)} L ${formatNumber(options.tip.x)} ${formatNumber(options.tip.y)} L ${formatNumber(right.x)} ${formatNumber(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linecap="round" stroke-linejoin="round" />`;
+}
+function renderLineShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const points = collectLinePoints(props);
+  if (points.length < 2) return null;
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const stroke = shapeStrokeColor(shape);
+  const strokeWidth = sizeToStrokePx(getString(props.size));
+  const dash = getString(props.dash);
+  const opacity = shapeOpacity(shape);
+  const simple = points.length === 2 && (getString(props.spline) == null || getString(props.spline) === "line") && (!dash || dash === "solid");
+  if (simple) {
+    const start = points[0];
+    const end = points[1];
+    if (!start || !end) return null;
+    const placement = buildItemPlacement(snapshot, shape, localBounds);
+    const line = lineEndpointsToLocal(
+      placement.bounds,
+      {
+        x: placement.x + (start.x - localBounds.x),
+        y: placement.y + (start.y - localBounds.y)
+      },
+      {
+        x: placement.x + (end.x - localBounds.x),
+        y: placement.y + (end.y - localBounds.y)
+      }
+    );
+    const item = createLineItem(shape.id, placement.bounds, line, "line", {
+      stroke,
+      strokeWidth,
+      ...opacity < 0.999 ? { strokeOpacity: opacity } : {}
+    });
+    return {
+      ...item,
+      rotation: buildItemBase(snapshot, shape, localBounds).rotation,
+      locked: shape.isLocked
+    };
+  }
+  const translated = points.map((point) => ({
+    ...point,
+    x: point.x - localBounds.x,
+    y: point.y - localBounds.y
+  }));
+  const inner = `<path d="${polylinePath(translated)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, opacity),
+    { stroke, strokeWidth }
+  );
+}
+function renderArrowShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const route = computeArrowRoute(props);
+  if (!route) return null;
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const stroke = shapeStrokeColor(shape);
+  const strokeWidth = sizeToStrokePx(getString(props.size));
+  const dash = getString(props.dash);
+  const opacity = shapeOpacity(shape);
+  const translate = (point) => ({
+    x: point.x - localBounds.x,
+    y: point.y - localBounds.y
+  });
+  const translatedPoints = route.points.map(translate);
+  const translatedStartRef = translate(route.startRef);
+  const translatedEndRef = translate(route.endRef);
+  const shaft = route.kind === "quadratic" && route.control ? `<path d="M${formatNumber(translatedPoints[0]?.x ?? 0)} ${formatNumber(translatedPoints[0]?.y ?? 0)} Q${formatNumber(route.control.x - localBounds.x)} ${formatNumber(route.control.y - localBounds.y)} ${formatNumber(translatedPoints[1]?.x ?? 0)} ${formatNumber(translatedPoints[1]?.y ?? 0)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<path d="${polylinePath(translatedPoints)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
+  const startPoint = translatedPoints[0];
+  const endPoint = translatedPoints[translatedPoints.length - 1];
+  if (!startPoint || !endPoint) return null;
+  const inner = `${shaft}${buildArrowHeadSvg({ tip: startPoint, from: translatedStartRef, type: getString(props.arrowheadStart), stroke, strokeWidth })}${buildArrowHeadSvg({ tip: endPoint, from: translatedEndRef, type: getString(props.arrowheadEnd), stroke, strokeWidth })}`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, opacity),
+    { stroke, strokeWidth }
+  );
+}
+function resolveAsset(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const assetId = getString(props.assetId);
+  if (!assetId) return void 0;
+  return snapshot.assets.get(assetId);
+}
+function resolveAssetUrl(snapshot, shape, asset) {
+  if (!asset) return void 0;
+  const custom = snapshot.options.assetUrlResolver?.(asset, shape);
+  if (custom) return custom;
+  const props = asRecord(asset.props) ?? {};
+  return getString(props.src) ?? getString(asRecord(shape.props)?.url);
+}
+function renderMissingAssetPlaceholder(snapshot, shape, kind, detail) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="12" fill="#f4f4f5" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
+		<path d="M${formatNumber(width * 0.18)} ${formatNumber(height * 0.7)} L${formatNumber(width * 0.38)} ${formatNumber(height * 0.48)} L${formatNumber(width * 0.56)} ${formatNumber(height * 0.62)} L${formatNumber(width * 0.76)} ${formatNumber(height * 0.32)} L${formatNumber(width * 0.84)} ${formatNumber(height * 0.4)} L${formatNumber(width * 0.84)} ${formatNumber(height * 0.82)} L${formatNumber(width * 0.18)} ${formatNumber(height * 0.82)} Z" fill="#d4d4d8" stroke="#a1a1aa" stroke-width="1" />
+		<circle cx="${formatNumber(width * 0.34)}" cy="${formatNumber(height * 0.34)}" r="${formatNumber(Math.max(6, Math.min(width, height) * 0.05))}" fill="#a1a1aa" />
+		${buildForeignObjectTextSvg({ x: 10, y: height * 0.04, width: width - 20, height: height * 0.28, text: kind, fontSize: 15, color: "#18181b", fontWeight: 700, align: "center", verticalAlign: "middle" })}
+		${buildForeignObjectTextSvg({ x: 14, y: height * 0.78, width: width - 28, height: height * 0.16, text: detail, fontSize: 12, color: "#52525b", align: "center", verticalAlign: "middle" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke: shapeStrokeColor(shape),
+      strokeWidth: sizeToStrokePx(getString(props.size))
+    }
+  );
+}
+function renderImageShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const asset = resolveAsset(snapshot, shape);
+  const src = resolveAssetUrl(snapshot, shape, asset);
+  const shapeBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  if (!src) {
+    return renderMissingAssetPlaceholder(
+      snapshot,
+      shape,
+      "Image asset missing",
+      asset ? asset.id : getString(props.assetId) ?? "asset unavailable"
+    );
+  }
+  const assetProps = asRecord(asset?.props) ?? {};
+  const intrinsicWidth = getNumber(assetProps.w) ?? getNumber(props.w) ?? shapeBounds.width;
+  const intrinsicHeight = getNumber(assetProps.h) ?? getNumber(props.h) ?? shapeBounds.height;
+  const base = buildItemBase(snapshot, shape, shapeBounds);
+  const image = createImageItem(shape.id, base.bounds, src, {
+    width: Math.max(1, intrinsicWidth),
+    height: Math.max(1, intrinsicHeight)
+  });
+  return {
+    ...image,
+    ...base,
+    childrenSvg: wrapOpacity(image.childrenSvg, shapeOpacity(shape)),
+    locked: shape.isLocked,
+    rotation: base.rotation
+  };
+}
+function renderVideoShape(snapshot, shape) {
+  const asset = resolveAsset(snapshot, shape);
+  const src = resolveAssetUrl(snapshot, shape, asset);
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const label = getString(asRecord(asset?.props)?.name) ?? "Video";
+  const subtitle = src ?? getString(props.assetId) ?? "Playback not supported in this importer";
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="14" fill="#18181b" stroke="#3f3f46" stroke-width="1.5" />
+		<rect x="${formatNumber(width * 0.04)}" y="${formatNumber(height * 0.08)}" width="${formatNumber(width * 0.92)}" height="${formatNumber(height * 0.66)}" rx="10" fill="#27272a" />
+		<circle cx="${formatNumber(width * 0.5)}" cy="${formatNumber(height * 0.41)}" r="${formatNumber(Math.min(width, height) * 0.12)}" fill="#fafafa" fill-opacity="0.92" />
+		<polygon points="${formatNumber(width * 0.48)},${formatNumber(height * 0.35)} ${formatNumber(width * 0.48)},${formatNumber(height * 0.47)} ${formatNumber(width * 0.57)},${formatNumber(height * 0.41)}" fill="#18181b" />
+		${buildForeignObjectTextSvg({ x: 16, y: height * 0.76, width: width - 32, height: height * 0.12, text: label, fontSize: 15, color: "#fafafa", fontWeight: 700 })}
+		${buildForeignObjectTextSvg({ x: 16, y: height * 0.88, width: width - 32, height: height * 0.08, text: subtitle, fontSize: 11, color: "#d4d4d8" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke: shapeStrokeColor(shape),
+      strokeWidth: sizeToStrokePx(getString(props.size))
+    }
+  );
+}
+function renderNoteShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const noteColor = resolveColor(getString(props.color) ?? "yellow");
+  const labelColor = resolveColor(getString(props.labelColor) ?? "#18181b");
+  const text = extractPlainText(props);
+  const fold = Math.min(width, height) * 0.14;
+  const fontSize = sizeToFontPx(getString(props.size)) + numberOr(props.fontSizeAdjustment, 0);
+  const inner = `
+		<path d="M0 0 H${formatNumber(width - fold)} L${formatNumber(width)} ${formatNumber(fold)} V${formatNumber(height)} H0 Z" fill="${noteColor}" fill-opacity="0.22" stroke="${noteColor}" stroke-width="1.5" />
+		<path d="M${formatNumber(width - fold)} 0 V${formatNumber(fold)} H${formatNumber(width)}" fill="${noteColor}" fill-opacity="0.3" stroke="${noteColor}" stroke-width="1.5" />
+		${buildForeignObjectTextSvg({ x: 12, y: 12, width: width - 24, height: height - 24, text, fontSize, color: labelColor, padding: 4, align: getString(props.align), verticalAlign: getString(props.verticalAlign) })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke: noteColor,
+      strokeWidth: 1.5
+    }
+  );
+}
+function renderBookmarkShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const title = getString(props.title) ?? getString(props.label) ?? "Bookmark";
+  const url = getString(props.url) ?? "URL unavailable";
+  const description = getString(props.description) ?? getString(props.hostname) ?? "Imported from tldraw";
+  const stroke = shapeStrokeColor(shape);
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="16" fill="#ffffff" stroke="${stroke}" stroke-width="1.5" />
+		<rect x="16" y="16" width="${formatNumber(Math.max(56, width * 0.22))}" height="${formatNumber(Math.max(56, height * 0.32))}" rx="12" fill="${stroke}" fill-opacity="0.12" />
+		<path d="M${formatNumber(width * 0.11)} ${formatNumber(height * 0.25)} H${formatNumber(width * 0.18)}" stroke="${stroke}" stroke-width="3" stroke-linecap="round" />
+		${buildForeignObjectTextSvg({ x: width * 0.28, y: 16, width: width * 0.64, height: height * 0.22, text: title, fontSize: 17, color: "#111827", fontWeight: 700 })}
+		${buildForeignObjectTextSvg({ x: width * 0.28, y: height * 0.24, width: width * 0.64, height: height * 0.14, text: url, fontSize: 12, color: stroke })}
+		${buildForeignObjectTextSvg({ x: 16, y: height * 0.46, width: width - 32, height: height * 0.42, text: description, fontSize: 13, color: "#4b5563" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke,
+      strokeWidth: 1.5
+    }
+  );
+}
+function renderEmbedShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const stroke = shapeStrokeColor(shape);
+  const title = getString(props.title) ?? getString(props.embedTitle) ?? "Embed";
+  const url = getString(props.url) ?? getString(props.src) ?? "Embedded content";
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="16" fill="#0f172a" stroke="${stroke}" stroke-width="1.5" />
+		<rect x="16" y="16" width="${formatNumber(width - 32)}" height="${formatNumber(height * 0.62)}" rx="12" fill="#111827" stroke="#334155" stroke-width="1" />
+		<circle cx="${formatNumber(width * 0.14)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#ef4444" />
+		<circle cx="${formatNumber(width * 0.18)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#f59e0b" />
+		<circle cx="${formatNumber(width * 0.22)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#22c55e" />
+		${buildForeignObjectTextSvg({ x: 18, y: height * 0.72, width: width - 36, height: height * 0.11, text: title, fontSize: 16, color: "#f8fafc", fontWeight: 700 })}
+		${buildForeignObjectTextSvg({ x: 18, y: height * 0.84, width: width - 36, height: height * 0.08, text: url, fontSize: 11, color: "#cbd5e1" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke,
+      strokeWidth: 1.5
+    }
+  );
+}
+function renderFrameShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const stroke = shapeStrokeColor(shape);
+  const title = (getString(props.name) ?? getString(props.title) ?? extractPlainText(props)) || "Frame";
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="14" fill="none" stroke="${stroke}" stroke-width="2" stroke-dasharray="10 6" />
+		<rect x="12" y="10" width="${formatNumber(Math.min(width - 24, Math.max(88, width * 0.34)))}" height="28" rx="8" fill="#ffffff" stroke="${stroke}" stroke-width="1.5" />
+		${buildForeignObjectTextSvg({ x: 16, y: 12, width: Math.min(width - 32, Math.max(80, width * 0.3)), height: 24, text: title, fontSize: 13, color: "#111827", fontWeight: 700, verticalAlign: "middle" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke,
+      strokeWidth: 2
+    }
+  );
+}
+function renderAnnotationShape(snapshot, shape) {
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const radius = Math.min(width, height) / 2;
+  const fill = shape.type === "annotationBubble" ? "#3b82f6" : resolveColor(getString(props.color) ?? "#ef4444");
+  const text = shape.type === "label" ? extractPlainText(props) : String(getNumber(props.number) ?? "");
+  const inner = `
+		<circle cx="${formatNumber(width / 2)}" cy="${formatNumber(height / 2)}" r="${formatNumber(radius)}" fill="${fill}" stroke="#ffffff" stroke-width="2" />
+		<text x="${formatNumber(width / 2)}" y="${formatNumber(height / 2 + 4)}" fill="#ffffff" font-size="10" font-weight="700" text-anchor="middle" dominant-baseline="central">${escapeXml(text)}</text>
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke: fill,
+      strokeWidth: 2
+    }
+  );
+}
+function renderUnsupportedShape(snapshot, shape, reason) {
+  snapshot.options.onUnsupportedShape?.(shape, reason);
+  const props = asRecord(shape.props) ?? {};
+  const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
+  const width = localBounds.width;
+  const height = localBounds.height;
+  const inner = `
+		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="12" fill="#fafafa" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
+		${buildForeignObjectTextSvg({ x: 12, y: 14, width: width - 24, height: 28, text: shape.type, fontSize: 14, color: "#111827", fontWeight: 700, verticalAlign: "middle" })}
+		${buildForeignObjectTextSvg({ x: 12, y: 50, width: width - 24, height: Math.max(20, height - 62), text: reason, fontSize: 12, color: "#52525b" })}
+	`;
+  return createCustomImportedItem(
+    snapshot,
+    shape,
+    localBounds,
+    wrapOpacity(inner, shapeOpacity(shape)),
+    {
+      stroke: shapeStrokeColor(shape),
+      strokeWidth: sizeToStrokePx(getString(props.size))
+    }
+  );
+}
+function shapeToItem(snapshot, shape) {
+  if (!shouldIncludeShape(snapshot, shape)) return null;
+  if (shape.type === "group") return null;
+  if (shape.type === "geo") return renderGeoShape(snapshot, shape);
+  if (shape.type === "text") return renderTextShape(snapshot, shape);
+  if (shape.type === "draw" || shape.type === "highlight") {
+    return renderStrokeShape(snapshot, shape);
+  }
+  if (shape.type === "line") return renderLineShape(snapshot, shape);
+  if (shape.type === "arrow") return renderArrowShape(snapshot, shape);
+  if (shape.type === "image") return renderImageShape(snapshot, shape);
+  if (shape.type === "video") return renderVideoShape(snapshot, shape);
+  if (shape.type === "note") return renderNoteShape(snapshot, shape);
+  if (shape.type === "bookmark") return renderBookmarkShape(snapshot, shape);
+  if (shape.type === "embed") return renderEmbedShape(snapshot, shape);
+  if (shape.type === "frame") return renderFrameShape(snapshot, shape);
+  if (shape.type === "annotationBubble" || shape.type === "label") {
+    return renderAnnotationShape(snapshot, shape);
+  }
+  return renderUnsupportedShape(
+    snapshot,
+    shape,
+    "Unsupported tldraw shape rendered as placeholder."
+  );
+}
+function tldrawSnapshotToItems(input, options = {}) {
+  const snapshot = normalizeSnapshot(input, options);
+  const shapes = Array.from(snapshot.shapes.values()).sort(
+    (left, right) => (left.index ?? "").localeCompare(right.index ?? "")
+  );
+  const items = [];
+  for (const shape of shapes) {
+    const item = shapeToItem(snapshot, shape);
+    if (item) items.push(item);
+  }
+  return items;
+}
+function itemsToTldrawSnapshot(items) {
+  const documents = [];
+  for (const item of items) {
+    const type = item.toolKind ?? "draw";
+    const props = {
+      w: item.bounds.width,
+      h: item.bounds.height,
+      color: item.stroke ?? "#1d1d1d"
+    };
+    if (item.strokeWidth) {
+      props.size = item.strokeWidth <= 1.5 ? "s" : item.strokeWidth >= 4 ? "l" : "m";
+    }
+    if (item.strokeOpacity != null) {
+      props.opacity = Math.round(item.strokeOpacity * 100);
+    }
+    if (type === "rect" || type === "ellipse") {
+      props.geo = type === "ellipse" ? "ellipse" : "rectangle";
+      props.fill = "none";
+    } else if (type === "draw" || type === "marker") {
+      props.segments = [
+        { points: (item.pathPointsLocal ?? []).map((point) => [point.x, point.y]) }
+      ];
+    } else if (type === "text") {
+      props.text = item.text ?? "";
+      props.fontSize = item.textFontSize ?? 16;
+    } else if (type === "arrow" || type === "line") {
+      props.start = { x: item.line?.x1 ?? 0, y: item.line?.y1 ?? 0 };
+      props.end = { x: item.line?.x2 ?? 10, y: item.line?.y2 ?? 10 };
+      props.arrowheadEnd = type === "arrow" ? "triangle" : "none";
+    } else {
+      continue;
+    }
+    documents.push({
+      id: item.id,
+      typeName: "shape",
+      type,
+      x: item.x,
+      y: item.y,
+      rotation: item.rotation ?? 0,
+      index: "a1",
+      parentId: "page:page",
+      opacity: item.strokeOpacity ?? 1,
+      isLocked: item.locked ?? false,
+      props,
+      meta: {}
+    });
+  }
+  return { documents, schema: { storeVersion: 1, recordVersion: 0 }, clock: 0 };
+}
+
+export { itemsToTldrawSnapshot, tldrawSnapshotToItems };
+//# sourceMappingURL=tldraw.js.map
+//# sourceMappingURL=tldraw.js.map