@pixerate/editor 0.80.0 → 0.82.0

package/dist/canvas/index.js

@@ -63,6 +63,15 @@ import {
   overlaps,
   placeBeside
 } from "../chunk-VHZCXHS4.js";
+import {
+  CAPTURE_EXCLUDE_SELECTOR,
+  CAPTURE_OVERLAY_SELECTORS,
+  rasterizeElement
+} from "../chunk-O2W2SP3C.js";
+import {
+  createCaptureToolProvider,
+  unionCaptureRects
+} from "../chunk-REOJJIY3.js";
 import {
   DEFAULT_ARRANGE_SHORTCUTS,
   matchArrangeShortcut
@@ -854,17 +863,17 @@ function readStyleSize(style) {
   };
   return { width: read("width"), height: read("height") };
 }
-function withStyleSize(style, size) {
+function withStyleSize(style, size2) {
   if (!style) return style ?? void 0;
   if (typeof style === "object") {
     const next2 = { ...style };
-    if (size.width !== void 0 && "width" in next2) next2.width = size.width;
-    if (size.height !== void 0 && "height" in next2) next2.height = size.height;
+    if (size2.width !== void 0 && "width" in next2) next2.width = size2.width;
+    if (size2.height !== void 0 && "height" in next2) next2.height = size2.height;
     return next2;
   }
   let next = style;
   for (const prop of ["width", "height"]) {
-    const value = size[prop];
+    const value = size2[prop];
     if (value === void 0) continue;
     next = next.replace(
       new RegExp(`((?:^|;)\\s*${prop}\\s*:\\s*)[^;]+`, "i"),
@@ -1009,9 +1018,9 @@ function alignNodes(nodes, ids, edge, options = {}) {
 }
 function distributeAxis(items, horizontal, mode, gapOverride, targets) {
   const start = (r) => horizontal ? r.x : r.y;
-  const size = (r) => horizontal ? r.width : r.height;
+  const size2 = (r) => horizontal ? r.width : r.height;
   const sorted = [...items].sort(
-    (a, b) => start(a.rect) + size(a.rect) / 2 - (start(b.rect) + size(b.rect) / 2)
+    (a, b) => start(a.rect) + size2(a.rect) / 2 - (start(b.rect) + size2(b.rect) / 2)
   );
   const first = sorted[0].rect;
   const last = sorted[sorted.length - 1].rect;
@@ -1022,19 +1031,19 @@ function distributeAxis(items, horizontal, mode, gapOverride, targets) {
     targets.set(item.node.id, horizontal ? { ...current, x: value } : { ...current, y: value });
   };
   if (mode === "centres") {
-    const c0 = start(first) + size(first) / 2;
-    const c1 = start(last) + size(last) / 2;
+    const c0 = start(first) + size2(first) / 2;
+    const c1 = start(last) + size2(last) / 2;
     const step = (c1 - c0) / (n3 - 1);
-    sorted.forEach((item, i) => set(item, c0 + step * i - size(item.rect) / 2));
+    sorted.forEach((item, i) => set(item, c0 + step * i - size2(item.rect) / 2));
     return;
   }
-  const span = start(last) + size(last) - start(first);
-  const total = sorted.reduce((sum, item) => sum + size(item.rect), 0);
+  const span = start(last) + size2(last) - start(first);
+  const total = sorted.reduce((sum, item) => sum + size2(item.rect), 0);
   const gap = gapOverride ?? (span - total) / (n3 - 1);
   let cursor = start(first);
   for (const item of sorted) {
     set(item, cursor);
-    cursor += size(item.rect) + gap;
+    cursor += size2(item.rect) + gap;
   }
 }
 function distributeNodes(nodes, ids, axis, mode = "gaps", options = {}) {
@@ -1175,9 +1184,9 @@ function invertNodeUpdates(nodes, updates) {
     if (update.position) back.position = { ...node.position };
     if (update.zIndex !== void 0) back.zIndex = typeof node.zIndex === "number" ? node.zIndex : 0;
     if (update.width !== void 0 || update.height !== void 0) {
-      const size = getNodeSize(node);
-      if (update.width !== void 0) back.width = size.width;
-      if (update.height !== void 0) back.height = size.height;
+      const size2 = getNodeSize(node);
+      if (update.width !== void 0) back.width = size2.width;
+      if (update.height !== void 0) back.height = size2.height;
     }
     inverse.push(back);
   }
@@ -1247,7 +1256,7 @@ function spacingCandidate(rects, moving, horizontal, tolerance) {
   const end = (r) => horizontal ? r.x + r.width : r.y + r.height;
   const crossStart = (r) => horizontal ? r.y : r.x;
   const crossEnd = (r) => horizontal ? r.y + r.height : r.x + r.width;
-  const size = end(moving) - start(moving);
+  const size2 = end(moving) - start(moving);
   const inLane = (r, lane2) => crossStart(r) < crossEnd(lane2) && crossEnd(r) > crossStart(lane2);
   const lane = rects.filter((r) => inLane(r, moving));
   if (lane.length === 0) return null;
@@ -1273,13 +1282,13 @@ function spacingCandidate(rects, moving, horizontal, tolerance) {
   if (before && after) {
     const b = before;
     const a = after;
-    const pos = (end(b) + start(a) - size) / 2;
+    const pos = (end(b) + start(a) - size2) / 2;
     if (pos >= end(b)) {
       candidates.push({
         pos,
         guides: (p) => [
           segment(end(b), p, crossMid(b, moving)),
-          segment(p + size, start(a), crossMid(a, moving))
+          segment(p + size2, start(a), crossMid(a, moving))
         ]
       });
     }
@@ -1301,8 +1310,8 @@ function spacingCandidate(rects, moving, horizontal, tolerance) {
     if (next) {
       const gap = start(next) - end(a);
       candidates.push({
-        pos: start(a) - gap - size,
-        guides: (p) => [segment(p + size, start(a), crossMid(a, moving)), segment(end(a), start(next), crossMid(a, next))]
+        pos: start(a) - gap - size2,
+        guides: (p) => [segment(p + size2, start(a), crossMid(a, moving)), segment(end(a), start(next), crossMid(a, next))]
       });
     }
   }
@@ -1325,7 +1334,7 @@ function computeSnapGuides(moving, targets, options = {}) {
   const eps = 0.5 / zoom;
   const snapAxis = (horizontal) => {
     const start = horizontal ? moving.x : moving.y;
-    const size = horizontal ? moving.width : moving.height;
+    const size2 = horizontal ? moving.width : moving.height;
     const edgeAxis = horizontal ? index.edgeX : index.edgeY;
     const centreAxis = horizontal ? index.centreX : index.centreY;
     let delta = null;
@@ -1334,9 +1343,9 @@ function computeSnapGuides(moving, targets, options = {}) {
     };
     if (useEdges) {
       consider(nearest(edgeAxis, start, tolerance));
-      consider(nearest(edgeAxis, start + size, tolerance));
+      consider(nearest(edgeAxis, start + size2, tolerance));
     }
-    if (useCentres) consider(nearest(centreAxis, start + size / 2, tolerance));
+    if (useCentres) consider(nearest(centreAxis, start + size2 / 2, tolerance));
     const spacing = useSpacing ? spacingCandidate(index.rects, moving, horizontal, tolerance) : null;
     if (spacing && (delta === null || Math.abs(spacing.delta) < Math.abs(delta) - eps)) {
       return { delta: spacing.delta, spacing };
@@ -1353,14 +1362,14 @@ function computeSnapGuides(moving, targets, options = {}) {
   const guides = [];
   const alignmentGuides = (horizontal) => {
     const start = horizontal ? snapped.x : snapped.y;
-    const size = horizontal ? snapped.width : snapped.height;
+    const size2 = horizontal ? snapped.width : snapped.height;
     const lines = [];
     if (useEdges) {
       const axis = horizontal ? index.edgeX : index.edgeY;
-      lines.push({ value: start, kind: "edge", axis }, { value: start + size, kind: "edge", axis });
+      lines.push({ value: start, kind: "edge", axis }, { value: start + size2, kind: "edge", axis });
     }
     if (useCentres) {
-      lines.push({ value: start + size / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
+      lines.push({ value: start + size2 / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
     }
     for (const line4 of lines) {
       const aligned = matches(line4.axis, line4.value, eps);
@@ -1762,22 +1771,22 @@ var CanvasScenesStore = class {
 function createCanvasScenesStore(options) {
   return new CanvasScenesStore(options);
 }
-function fitViewportToRect(rect2, size, options = {}) {
+function fitViewportToRect(rect2, size2, options = {}) {
   const { padding = 0.1, minZoom = 0.1, maxZoom = 2 } = options;
   const paddedWidth = Math.max(rect2.width * (1 + padding * 2), 1);
   const paddedHeight = Math.max(rect2.height * (1 + padding * 2), 1);
-  const raw = Math.min(size.width / paddedWidth, size.height / paddedHeight);
+  const raw = Math.min(size2.width / paddedWidth, size2.height / paddedHeight);
   const zoom = Math.min(maxZoom, Math.max(minZoom, raw));
   const cx = rect2.x + rect2.width / 2;
   const cy = rect2.y + rect2.height / 2;
-  return { x: size.width / 2 - cx * zoom, y: size.height / 2 - cy * zoom, zoom };
+  return { x: size2.width / 2 - cx * zoom, y: size2.height / 2 - cy * zoom, zoom };
 }
-function fitViewportToNodes(nodes, size, ids, options = {}) {
+function fitViewportToNodes(nodes, size2, ids, options = {}) {
   const lookup = createNodeLookup(nodes);
   const wanted = ids ? new Set(ids) : null;
   const rects = nodes.filter((n3) => wanted ? wanted.has(n3.id) : true).map((n3) => getNodeRect(n3, lookup, options));
   const bounds = boundsOf(rects);
-  return bounds ? fitViewportToRect(bounds, size, options) : null;
+  return bounds ? fitViewportToRect(bounds, size2, options) : null;
 }
 
 // src/canvas/shapeNodes.ts
@@ -1800,18 +1809,18 @@ function getNodeShape(node) {
 function shapeNodeToPolygon(node, lookup, options = {}) {
   const shape = getNodeShape(node);
   if (!shape) return null;
-  const size = getNodeSize(node, options);
+  const size2 = getNodeSize(node, options);
   const origin = node.parentId && lookup ? getAbsolutePosition(node, lookup) : node.position;
-  const { rings, fillRule } = shapeToPolygon(shape, size, { tolerance: options.tolerance });
+  const { rings, fillRule } = shapeToPolygon(shape, size2, { tolerance: options.tolerance });
   return {
     rings: rings.map((ring) => ring.map(([x, y]) => [x + origin.x, y + origin.y])),
     fillRule
   };
 }
-function shapeToBezierPath(shape, size) {
-  const { width: w, height: h } = size;
+function shapeToBezierPath(shape, size2) {
+  const { width: w, height: h } = size2;
   if (!(w > 0) || !(h > 0)) return { path: [], fillRule: "nonzero" };
-  const svg = getShapeSvg({ ...shape, rotation: 0 }, size);
+  const svg = getShapeSvg({ ...shape, rotation: 0 }, size2);
   let path = toBezierPath(svg.d);
   if (shape.kind === "path" && shape.viewBox) {
     const vb = shape.viewBox;
@@ -1836,9 +1845,9 @@ function shapeToBezierPath(shape, size) {
 function shapeNodeToBezierPath(node, lookup, options = {}) {
   const shape = getNodeShape(node);
   if (!shape) return null;
-  const size = getNodeSize(node, options);
+  const size2 = getNodeSize(node, options);
   const origin = node.parentId && lookup ? getAbsolutePosition(node, lookup) : node.position;
-  const { path, fillRule } = shapeToBezierPath(shape, size);
+  const { path, fillRule } = shapeToBezierPath(shape, size2);
   return { path: transformBezierPath(path, [1, 0, 0, 1, origin.x, origin.y]), fillRule };
 }
 var idCounter = 0;
@@ -2233,8 +2242,8 @@ function snapResize(rect2, handle, targets, options = {}) {
     const fixed = horizontal ? dir < 0 ? x1 : x0 : dir < 0 ? y1 : y0;
     const min = (horizontal ? options.minWidth : options.minHeight) ?? 0;
     const valid = (t) => {
-      const size = dir < 0 ? fixed - t : t - fixed;
-      return Number.isFinite(size) && size > 1e-9 && size >= min;
+      const size2 = dir < 0 ? fixed - t : t - fixed;
+      return Number.isFinite(size2) && size2 > 1e-9 && size2 >= min;
     };
     let best = null;
     const consider = (values, kind) => {
@@ -2351,8 +2360,8 @@ function snapNodeResize(nodes, id, rect2, handle, options = {}) {
 }
 function getResizingNodeRect(node, lookup, options = {}) {
   const { x, y } = node.parentId ? getAbsolutePosition(node, lookup) : node.position;
-  const size = getNodeSize(node, options);
-  return { x, y, width: node.width ?? size.width, height: node.height ?? size.height };
+  const size2 = getNodeSize(node, options);
+  return { x, y, width: node.width ?? size2.width, height: node.height ?? size2.height };
 }
 
 // src/canvas/autoLayout.ts
@@ -2408,15 +2417,15 @@ var LayoutState = class {
   constructor(nodes, options = {}) {
     this.measure = options.measure ?? {};
     for (const node of nodes) {
-      const size = this.measure.size?.(node) ?? getNodeSize(node, options.rectOptions);
+      const size2 = this.measure.size?.(node) ?? getNodeSize(node, options.rectOptions);
       const box = {
         id: node.id,
         node,
         parent: node.parentId,
         x: finite(node.position?.x),
         y: finite(node.position?.y),
-        w: finite(size.width),
-        h: finite(size.height),
+        w: finite(size2.width),
+        h: finite(size2.height),
         kids: []
       };
       this.boxes.set(node.id, box);
@@ -2911,9 +2920,9 @@ function trackContent(cells, sizes, tracks, n3, gap, columns, hug) {
 }
 function trackRanges(start, sizes, gap) {
   let x = start;
-  return sizes.map((size) => {
-    const r = [x, x + size];
-    x += size + gap;
+  return sizes.map((size2) => {
+    const r = [x, x + size2];
+    x += size2 + gap;
     return r;
   });
 }
@@ -3908,14 +3917,14 @@ function createCanvasAutoLayoutController(options) {
      * Resizes node `id` (its children follow their constraints) and lays out around it,
      * as one step.
      */
-    resizeNode(id, size) {
+    resizeNode(id, size2) {
       const nodes = options.getNodes();
       const node = nodes.find((n3) => n3.id === id);
       if (!node) return [];
       const old = getNodeSize(node, options.rectOptions);
       const update = { id };
-      if (size.width !== void 0) update.width = size.width;
-      if (size.height !== void 0) update.height = size.height;
+      if (size2.width !== void 0) update.width = size2.width;
+      if (size2.height !== void 0) update.height = size2.height;
       const resized = applyNodeUpdates(nodes, [update]);
       const constrained = mergeNodeUpdates([update], applyConstraints(resized, id, old, layoutOptions()));
       return run("Resize", identity, identity, () => [id], constrained);
@@ -6538,9 +6547,9 @@ function rootReference(g, comp) {
 }
 function fixMeasured(node, old) {
   const measured2 = old?.measured ?? node.measured;
-  const size = sizeOf(node);
-  const w = size.width ?? size.styleWidth;
-  const h = size.height ?? size.styleHeight;
+  const size2 = sizeOf(node);
+  const w = size2.width ?? size2.styleWidth;
+  const h = size2.height ?? size2.styleHeight;
   if (!measured2) {
     if (node.measured === void 0) return node;
     const next = { ...node };
@@ -6648,17 +6657,17 @@ function buildInstance(g, instId, opts, taken) {
       const sizing = getLayoutSizing(next, axis);
       return sizing === "hug" && !!getAutoLayout(next) || sizing === "fill" && flows;
     };
-    const size = { ...sizeOf(next) };
+    const size2 = { ...sizeOf(next) };
     const oldSize = sizeOf(o);
     if (derived("width")) {
-      size.width = oldSize.width;
-      size.styleWidth = oldSize.styleWidth;
+      size2.width = oldSize.width;
+      size2.styleWidth = oldSize.styleWidth;
     }
     if (derived("height")) {
-      size.height = oldSize.height;
-      size.styleHeight = oldSize.styleHeight;
+      size2.height = oldSize.height;
+      size2.styleHeight = oldSize.styleHeight;
     }
-    return writeOverrideGroup(next, "size", size);
+    return writeOverrideGroup(next, "size", size2);
   };
   const instanceRoot = (look, place2, old2, id, parentId, sourceId, instance, previousComponent, topLevel) => {
     const reference = rootReference(g, look);
@@ -7699,10 +7708,10 @@ function addCanvasVariant(nodes, setId, options = {}) {
   });
   if (autoLayout && !options.position) after = relayoutSet(after, setId, options);
   else {
-    const size = getNodeSize(edit.set);
-    const w = Math.max(size.width, position.x + width + VARIANT_GAP);
-    const h = Math.max(size.height, position.y + height + VARIANT_GAP);
-    if (w !== size.width || h !== size.height) after = applyNodeUpdates(after, [{ id: setId, width: w, height: h }]);
+    const size2 = getNodeSize(edit.set);
+    const w = Math.max(size2.width, position.x + width + VARIANT_GAP);
+    const h = Math.max(size2.height, position.y + height + VARIANT_GAP);
+    if (w !== size2.width || h !== size2.height) after = applyNodeUpdates(after, [{ id: setId, width: w, height: h }]);
   }
   return done(nodes, after, [id], options);
 }
@@ -8692,11 +8701,11 @@ function diagramGroupSize(groupId, graph, positions, sizes, meta, pad = 24, titl
   let maxX = 0;
   let maxY = 0;
   for (const id of members) {
-    const size = sizes[id] ?? (graph.groups.some((g) => g.id === id) ? diagramGroupSize(id, graph, positions, sizes, meta, pad, titleH) : { width: DEFAULT_DIAGRAM_NODE_WIDTH, height: DEFAULT_DIAGRAM_NODE_HEIGHT });
-    sizes[id] = size;
+    const size2 = sizes[id] ?? (graph.groups.some((g) => g.id === id) ? diagramGroupSize(id, graph, positions, sizes, meta, pad, titleH) : { width: DEFAULT_DIAGRAM_NODE_WIDTH, height: DEFAULT_DIAGRAM_NODE_HEIGHT });
+    sizes[id] = size2;
     const [x, y] = positions[id] ?? [gx, gy];
-    maxX = Math.max(maxX, x - gx + size.width);
-    maxY = Math.max(maxY, y - gy + size.height);
+    maxX = Math.max(maxX, x - gx + size2.width);
+    maxY = Math.max(maxY, y - gy + size2.height);
   }
   return { width: maxX + pad, height: maxY + pad };
 }
@@ -8743,7 +8752,7 @@ function mermaidFlowNodes(graph, layout2, options = {}) {
     return { x: x - px2, y: y - py };
   };
   const groups = graph.groups.map((g) => {
-    const size = sizes[g.id] ?? { width: 240, height: 160 };
+    const size2 = sizes[g.id] ?? { width: 240, height: 160 };
     return {
       id: g.id,
       type: "mermaid-group",
@@ -8755,9 +8764,9 @@ function mermaidFlowNodes(graph, layout2, options = {}) {
         resolvedStyles: resolveMermaidStyles(g.classes, g.styles, graph.classDefs),
         editable
       },
-      width: size.width,
-      height: size.height,
-      style: { width: size.width, height: size.height },
+      width: size2.width,
+      height: size2.height,
+      style: { width: size2.width, height: size2.height },
       draggable: editable && !g.data?.locked,
       selectable: editable,
       connectable: editable && !g.data?.locked,
@@ -8765,7 +8774,7 @@ function mermaidFlowNodes(graph, layout2, options = {}) {
     };
   });
   const nodes = graph.nodes.map((n3) => {
-    const size = sizes[n3.id] ?? { width: 160, height: 56 };
+    const size2 = sizes[n3.id] ?? { width: 160, height: 56 };
     return {
       id: n3.id,
       type: "mermaid-node",
@@ -8777,9 +8786,9 @@ function mermaidFlowNodes(graph, layout2, options = {}) {
         resolvedStyles: resolveMermaidStyles(n3.classes, n3.styles, graph.classDefs),
         editable
       },
-      width: size.width,
-      height: size.height,
-      style: { width: size.width, height: size.height },
+      width: size2.width,
+      height: size2.height,
+      style: { width: size2.width, height: size2.height },
       draggable: editable && !n3.data?.locked,
       selectable: editable,
       connectable: editable && !n3.data?.locked && !n3.data?.synthetic,
@@ -8833,11 +8842,11 @@ function diagramLayoutBounds(layout2) {
   let maxX = -Infinity;
   let maxY = -Infinity;
   for (const [id, [x, y]] of Object.entries(layout2.positions)) {
-    const size = layout2.sizes[id] ?? { width: 0, height: 0 };
+    const size2 = layout2.sizes[id] ?? { width: 0, height: 0 };
     minX = Math.min(minX, x);
     minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x + size.width);
-    maxY = Math.max(maxY, y + size.height);
+    maxX = Math.max(maxX, x + size2.width);
+    maxY = Math.max(maxY, y + size2.height);
   }
   if (minX === Infinity) return null;
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
@@ -8867,9 +8876,9 @@ function blendDiagramLayout(from, to, t) {
     positions[id] = origin ? [mix2(origin[0], x, t), mix2(origin[1], y, t)] : [x, y];
   }
   const sizes = {};
-  for (const [id, size] of Object.entries(to.sizes)) {
+  for (const [id, size2] of Object.entries(to.sizes)) {
     const origin = from.sizes[id];
-    sizes[id] = origin ? { width: mix2(origin.width, size.width, t), height: mix2(origin.height, size.height, t) } : size;
+    sizes[id] = origin ? { width: mix2(origin.width, size2.width, t), height: mix2(origin.height, size2.height, t) } : size2;
   }
   return { positions, sizes };
 }
@@ -8989,8 +8998,8 @@ var DIAGRAM_TITLE_TARGET = "::title";
 function sceneColor(theme, i) {
   return theme.palette[(i % theme.palette.length + theme.palette.length) % theme.palette.length];
 }
-function estimateTextWidth2(text2, size) {
-  return text2.length * size * 0.58;
+function estimateTextWidth2(text2, size2) {
+  return text2.length * size2 * 0.58;
 }
 
 // src/canvas/mermaid/families/pie.ts
@@ -9383,13 +9392,13 @@ var TITLE_SIZE2 = 32;
 function actorColor(theme, slot) {
   return sceneColor(theme, M3.sectionColours + slot);
 }
-function wrapLines(text2, size, max) {
+function wrapLines(text2, size2, max) {
   const lines = [];
   for (const para of text2.replace(/<br\s*\/?>/gi, "\n").split("\n")) {
     let line4 = "";
     for (const word of para.split(/\s+/).filter(Boolean)) {
       const next = line4 ? `${line4} ${word}` : word;
-      if (line4 && estimateTextWidth2(next, size) > max) {
+      if (line4 && estimateTextWidth2(next, size2) > max) {
         lines.push(line4);
         line4 = word;
       } else line4 = next;
@@ -9399,13 +9408,13 @@ function wrapLines(text2, size, max) {
   return lines;
 }
 function boxLabel(key, role, target, text2, box, fill) {
-  let size = M3.fontSize;
-  let lines = wrapLines(text2, size, box.width - 10);
+  let size2 = M3.fontSize;
+  let lines = wrapLines(text2, size2, box.width - 10);
   if (lines.length > 2) {
-    size = 13;
-    lines = wrapLines(text2, size, box.width - 8);
+    size2 = 13;
+    lines = wrapLines(text2, size2, box.width - 8);
   }
-  const lineHeight = size * 1.15;
+  const lineHeight = size2 * 1.15;
   const max = Math.max(1, Math.floor(box.height / lineHeight));
   if (lines.length > max) lines = [...lines.slice(0, max - 1), `${lines[max - 1]}\u2026`];
   const top = box.y + box.height / 2 - lines.length * lineHeight / 2 + lineHeight / 2;
@@ -9419,7 +9428,7 @@ function boxLabel(key, role, target, text2, box, fill) {
     text: line4,
     anchor: "middle",
     baseline: "middle",
-    size,
+    size: size2,
     fill
   }));
 }
@@ -10148,7 +10157,7 @@ var c4Scene = ({ graph, layout: layout2, theme }) => {
     } else marks.push({ kind: "rect", key: `element:${node.id}`, role: "element", ...common, x, y, width: w, height: h, radius: 12 });
     let top = y + geo.textCenter.y - geo.textHeight / 2;
     for (const section of geo.sections) {
-      const size = section.part === "label" ? NAME_SIZE : section.part === "tech" ? TYPE_SIZE : DESCR_SIZE;
+      const size2 = section.part === "label" ? NAME_SIZE : section.part === "tech" ? TYPE_SIZE : DESCR_SIZE;
       const lh = section.fontSize * LINE_HEIGHT2;
       section.lines.forEach((line4, i) => {
         if (!line4) return;
@@ -10162,7 +10171,7 @@ var c4Scene = ({ graph, layout: layout2, theme }) => {
           text: line4,
           anchor: "middle",
           baseline: "middle",
-          size,
+          size: size2,
           weight: section.bold ? 700 : void 0,
           fill: fg
         });
@@ -10316,8 +10325,8 @@ var ARCH_GLYPHS = {
   ],
   blank: []
 };
-function iconMarks(key, target, icon, x, y, size, theme) {
-  const s = size / 80;
+function iconMarks(key, target, icon, x, y, size2, theme) {
+  const s = size2 / 80;
   if (!icon)
     return [
       {
@@ -10332,7 +10341,7 @@ function iconMarks(key, target, icon, x, y, size, theme) {
         dash: "8"
       }
     ];
-  const marks = [{ kind: "rect", key: `icon:${key}`, role: "icon", target, x, y, width: size, height: size, fill: ICON_BG }];
+  const marks = [{ kind: "rect", key: `icon:${key}`, role: "icon", target, x, y, width: size2, height: size2, fill: ICON_BG }];
   const glyph = ARCH_GLYPHS[icon];
   if (glyph) {
     glyph.forEach(
@@ -10356,7 +10365,7 @@ function iconMarks(key, target, icon, x, y, size, theme) {
   const shown = lines.slice(0, Math.max(1, Math.floor(72 * s / (font * 1.2))));
   const lh = font * 1.2;
   shown.forEach(
-    (text2, i) => marks.push({ kind: "text", key: `icon-name:${key}:${i}`, role: "icon-name", target, x: x + size / 2, y: y + size / 2 + (i - (shown.length - 1) / 2) * lh, text: text2, anchor: "middle", baseline: "middle", size: font, fill: ICON_FG })
+    (text2, i) => marks.push({ kind: "text", key: `icon-name:${key}:${i}`, role: "icon-name", target, x: x + size2 / 2, y: y + size2 / 2 + (i - (shown.length - 1) / 2) * lh, text: text2, anchor: "middle", baseline: "middle", size: font, fill: ICON_FG })
   );
   return marks;
 }
@@ -11186,10 +11195,10 @@ async function rasterizeSvg(svg, options) {
   const doc = options.document ?? globalThis.document;
   const ImageCtor = doc?.defaultView?.Image ?? globalThis.Image;
   if (!doc || typeof doc.createElement !== "function" || !ImageCtor) throw new Error(NO_DOM);
-  const size = rasterSize(options.width, options.height, options.scale, options.maxSize);
+  const size2 = rasterSize(options.width, options.height, options.scale, options.maxSize);
   const canvas = doc.createElement("canvas");
-  canvas.width = size.width;
-  canvas.height = size.height;
+  canvas.width = size2.width;
+  canvas.height = size2.height;
   let context = null;
   try {
     context = canvas.getContext("2d");
@@ -11206,12 +11215,12 @@ async function rasterizeSvg(svg, options) {
   const background = options.background ?? "#ffffff";
   if (background !== "transparent") {
     context.fillStyle = background;
-    context.fillRect(0, 0, size.width, size.height);
+    context.fillRect(0, 0, size2.width, size2.height);
   }
-  context.drawImage(image, 0, 0, size.width, size.height);
+  context.drawImage(image, 0, 0, size2.width, size2.height);
   const url = canvas.toDataURL("image/png");
   if (!url.startsWith("data:image/png")) throw new Error("This canvas cannot export PNG (toDataURL returned no image).");
-  return { data: url.slice(url.indexOf(",") + 1), mimeType: "image/png", width: size.width, height: size.height };
+  return { data: url.slice(url.indexOf(",") + 1), mimeType: "image/png", width: size2.width, height: size2.height };
 }
 function diagramFileName(doc, extension2) {
   const base = (doc.graph.title ?? "").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "").slice(0, 60);
@@ -11385,6 +11394,122 @@ function isAgentCursor(cursor) {
   }
   return false;
 }
+
+// src/canvas/capture.ts
+var CANVAS_CAPTURE_VIEWPORT_SELECTOR = ".xyflow__viewport, .react-flow__viewport, .svelte-flow__viewport";
+var CANVAS_CAPTURE_CHROME_SELECTORS = [
+  CAPTURE_EXCLUDE_SELECTOR,
+  ".react-flow__panel",
+  ".svelte-flow__panel",
+  ".react-flow__minimap",
+  ".svelte-flow__minimap",
+  ".react-flow__controls",
+  ".svelte-flow__controls",
+  ".react-flow__attribution",
+  ".svelte-flow__attribution"
+];
+var CANVAS_CAPTURE_OVERLAY_SELECTORS = [
+  ...CAPTURE_OVERLAY_SELECTORS,
+  ".react-flow__nodesselection",
+  ".svelte-flow__nodesselection",
+  ".react-flow__selection",
+  ".svelte-flow__selection",
+  ".react-flow__resize-control",
+  ".svelte-flow__resize-control"
+];
+var size = (node) => ({
+  width: node.measured?.width ?? node.width ?? 0,
+  height: node.measured?.height ?? node.height ?? 0
+});
+function canvasNodeCaptureRect(node, nodes) {
+  if (node.hidden) return null;
+  let x = node.position.x;
+  let y = node.position.y;
+  const seen = /* @__PURE__ */ new Set([node.id]);
+  let parentId = node.parentId ?? node.parentNode;
+  while (parentId && !seen.has(parentId)) {
+    seen.add(parentId);
+    const parent = nodes.find((n3) => n3.id === parentId);
+    if (!parent) break;
+    x += parent.position.x;
+    y += parent.position.y;
+    parentId = parent.parentId ?? parent.parentNode;
+  }
+  const { width, height } = size(node);
+  return { x, y, width, height };
+}
+function createCanvasCaptureSurface(options) {
+  const getElement = () => (typeof options.element === "function" ? options.element() : options.element) ?? null;
+  const nodeRect = (node, nodes) => (options.getNodeRect ?? canvasNodeCaptureRect)(node, nodes);
+  const rectsOf = (nodes, pick) => nodes.filter(pick).map((n3) => nodeRect(n3, nodes)).filter((r) => !!r && r.width > 0 && r.height > 0);
+  const viewportSelector = options.viewportSelector ?? CANVAS_CAPTURE_VIEWPORT_SELECTOR;
+  const viewport = () => {
+    const el = getElement();
+    const vp = options.getViewport();
+    if (!el || !el.clientWidth || !el.clientHeight || !(vp.zoom > 0)) return null;
+    return { x: -vp.x / vp.zoom, y: -vp.y / vp.zoom, width: el.clientWidth / vp.zoom, height: el.clientHeight / vp.zoom };
+  };
+  return {
+    units: "canvas units",
+    viewport,
+    content: () => unionCaptureRects(rectsOf(options.getNodes(), () => true)),
+    selection: () => {
+      const nodes = options.getNodes();
+      const selected = (n3) => !!n3.selected && !n3.hidden;
+      return { rect: unionCaptureRects(rectsOf(nodes, selected)), ids: nodes.filter(selected).map((n3) => n3.id) };
+    },
+    items: {
+      region: "nodes",
+      noun: "node",
+      source: "the canvas state",
+      bounds: (ids) => {
+        const nodes = options.getNodes();
+        const missing = ids.filter((id) => !nodes.some((n3) => n3.id === id));
+        return { rect: unionCaptureRects(rectsOf(nodes, (n3) => ids.includes(n3.id))), missing };
+      }
+    },
+    overlays: "selection boxes, resize handles and agent cursors",
+    maxScale: options.maxScale ?? 2,
+    render: (request) => {
+      const el = getElement();
+      if (!el || !el.isConnected) throw new Error("The canvas is not mounted, so there is nothing to capture.");
+      const rasterize = options.rasterize ?? rasterizeElement;
+      const exclude = [
+        ...options.chromeSelectors ?? CANVAS_CAPTURE_CHROME_SELECTORS,
+        ...request.includeOverlays ? [] : options.overlaySelectors ?? CANVAS_CAPTURE_OVERLAY_SELECTORS
+      ];
+      const common = { pixelWidth: request.width, pixelHeight: request.height, format: request.format, quality: request.quality, background: options.background };
+      if (request.region === "viewport") {
+        return rasterize(el, { ...common, width: el.clientWidth, height: el.clientHeight, exclude });
+      }
+      const zoom = request.scale;
+      return rasterize(el, {
+        ...common,
+        width: request.width,
+        height: request.height,
+        exclude,
+        prepare: (clone) => {
+          const vpEl = clone.querySelector(viewportSelector);
+          if (!vpEl) throw new Error(`The canvas has no viewport element (${viewportSelector}); pass viewportSelector.`);
+          vpEl.style.transform = `translate(${-request.rect.x * zoom}px, ${-request.rect.y * zoom}px) scale(${zoom})`;
+          vpEl.style.transformOrigin = "0 0";
+          for (let node = vpEl; node && node !== clone; node = node.parentElement) {
+            for (const sibling of Array.from(node.parentElement?.children ?? [])) {
+              if (sibling !== node) sibling.remove();
+            }
+          }
+        }
+      });
+    }
+  };
+}
+function createCanvasCaptureToolProvider(options) {
+  return createCaptureToolProvider(createCanvasCaptureSurface(options), {
+    subject: "the canvas",
+    ...options,
+    id: options.id ?? "canvas-capture"
+  });
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -11395,6 +11520,9 @@ export {
   AnimationEditError,
   AnimationPlayer,
   BUILTIN_FAMILY_SCENES,
+  CANVAS_CAPTURE_CHROME_SELECTORS,
+  CANVAS_CAPTURE_OVERLAY_SELECTORS,
+  CANVAS_CAPTURE_VIEWPORT_SELECTOR,
   CANVAS_COMPONENT_DRAG_TYPE,
   CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
@@ -11478,6 +11606,7 @@ export {
   canOffsetShapeNodes,
   canOutlineShapeNodeStrokes,
   canvasHeight,
+  canvasNodeCaptureRect,
   centerNodes,
   centre,
   clampAnimationValue,
@@ -11502,6 +11631,8 @@ export {
   createCanvasAnimationController,
   createCanvasArrangeController,
   createCanvasAutoLayoutController,
+  createCanvasCaptureSurface,
+  createCanvasCaptureToolProvider,
   createCanvasComponent,
   createCanvasComponentsController,
   createCanvasDrawController,