@vanduo-oss/vd3-cbun 1.1.0 → 1.3.0

package/dist/draw/index.cjs

@@ -0,0 +1,2248 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/draw/index.js
+var index_exports = {};
+__export(index_exports, {
+  BRUSH_PRESETS: () => BRUSH_PRESETS,
+  DRAW_SHAPE_TYPES: () => DRAW_SHAPE_TYPES,
+  DRAW_TOOLS: () => DRAW_TOOLS,
+  VD_DRAW_VERSION: () => VD_DRAW_VERSION,
+  VdDraw: () => VdDraw2,
+  VdDrawCore: () => VdDraw
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/draw/vue.js
+var import_vue = require("vue");
+
+// src/draw/shapes.js
+var VD_DRAW_VERSION = "1.1.0";
+var DRAW_TOOLS = Object.freeze([
+  "select",
+  "hand",
+  "draw",
+  "eraser",
+  "rectangle",
+  "ellipse",
+  "line",
+  "text",
+  "sticky"
+]);
+var DRAW_SHAPE_TYPES = Object.freeze([
+  "rectangle",
+  "ellipse",
+  "line",
+  "freehand",
+  "text",
+  "sticky"
+]);
+var BRUSH_PRESETS = Object.freeze({
+  pen: {
+    size: 6,
+    thinning: 0.55,
+    smoothing: 0.5,
+    streamline: 0.5,
+    taperStart: 0,
+    taperEnd: 14,
+    opacity: 1,
+    blend: "normal"
+  },
+  pencil: {
+    size: 4,
+    thinning: 0.7,
+    smoothing: 0.35,
+    streamline: 0.35,
+    taperStart: 4,
+    taperEnd: 10,
+    opacity: 0.92,
+    blend: "normal"
+  },
+  marker: {
+    size: 14,
+    thinning: 0.15,
+    smoothing: 0.55,
+    streamline: 0.5,
+    taperStart: 0,
+    taperEnd: 0,
+    opacity: 0.85,
+    blend: "normal"
+  },
+  highlighter: {
+    size: 22,
+    thinning: 0,
+    smoothing: 0.6,
+    streamline: 0.55,
+    taperStart: 0,
+    taperEnd: 0,
+    opacity: 0.4,
+    blend: "multiply"
+  },
+  calligraphy: {
+    size: 12,
+    thinning: 0.6,
+    smoothing: 0.4,
+    streamline: 0.3,
+    taperStart: 8,
+    taperEnd: 12,
+    opacity: 1,
+    nibAngle: -0.7,
+    blend: "normal"
+  }
+});
+var DEFAULT_BRUSH = "pen";
+var POINT_TYPES = Object.freeze(["line", "freehand"]);
+var MIN_SCALE = 0.2;
+var MAX_SCALE = 4;
+var DEFAULT_GRID_SIZE = 20;
+var DEFAULT_STROKE_WIDTH = 2;
+var MAX_SHAPES = 1e4;
+var MAX_POINTS_PER_SHAPE = 1e5;
+var idCounter = 0;
+function createId(prefix = "sh") {
+  idCounter += 1;
+  return `${prefix}_${idCounter.toString(36)}${(idCounter * 2654435761).toString(36).slice(-4)}`;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function round(value) {
+  return Math.round((Number(value) || 0) * 100) / 100;
+}
+function deepClone(value) {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(value);
+    } catch {
+    }
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function roundPoint(p) {
+  const out = [round(p[0]), round(p[1])];
+  if (p.length >= 3 && p[2] != null) out.push(clamp(Number(p[2]) || 0, 0, 1));
+  return out;
+}
+function isPointShape(shape) {
+  return POINT_TYPES.includes(shape.type);
+}
+function shapeBounds(shape) {
+  if (isPointShape(shape)) {
+    const pts = shape.points || [];
+    if (!pts.length) return { x: shape.x || 0, y: shape.y || 0, w: 0, h: 0 };
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const [px, py] of pts) {
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
+  return { x: shape.x || 0, y: shape.y || 0, w: shape.w || 0, h: shape.h || 0 };
+}
+function boundsOfShapes(shapes) {
+  if (!shapes || !shapes.length) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const shape of shapes) {
+    const b = shapeBounds(shape);
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function boundsIntersect(a, b) {
+  return !(a.x + a.w < b.x || b.x + b.w < a.x || a.y + a.h < b.y || b.y + b.h < a.y);
+}
+function distanceToShape(shape, x, y) {
+  if (isPointShape(shape)) {
+    const pts = shape.points || [];
+    if (pts.length === 1) return Math.hypot(pts[0][0] - x, pts[0][1] - y);
+    let min = Infinity;
+    for (let i = 1; i < pts.length; i += 1) {
+      min = Math.min(min, pointToSegment(x, y, pts[i - 1], pts[i]));
+    }
+    return min;
+  }
+  const b = shapeBounds(shape);
+  const dx = Math.max(b.x - x, 0, x - (b.x + b.w));
+  const dy = Math.max(b.y - y, 0, y - (b.y + b.h));
+  return Math.hypot(dx, dy);
+}
+function pointToSegment(px, py, a, b) {
+  const vx = b[0] - a[0];
+  const vy = b[1] - a[1];
+  const wx = px - a[0];
+  const wy = py - a[1];
+  const c1 = vx * wx + vy * wy;
+  if (c1 <= 0) return Math.hypot(px - a[0], py - a[1]);
+  const c2 = vx * vx + vy * vy;
+  if (c2 <= c1) return Math.hypot(px - b[0], py - b[1]);
+  const t = c1 / c2;
+  return Math.hypot(px - (a[0] + t * vx), py - (a[1] + t * vy));
+}
+function translateShape(shape, dx, dy) {
+  const next = deepClone(shape);
+  if (isPointShape(next)) {
+    next.points = (next.points || []).map((p) => roundPoint([p[0] + dx, p[1] + dy, p[2]]));
+  } else {
+    next.x = round((next.x || 0) + dx);
+    next.y = round((next.y || 0) + dy);
+  }
+  return next;
+}
+function scaleShape(shape, ox, oy, sx, sy) {
+  const next = deepClone(shape);
+  const avg = (Math.abs(sx) + Math.abs(sy)) * 0.5;
+  if (isPointShape(next)) {
+    next.points = (next.points || []).map(
+      (p) => roundPoint([ox + (p[0] - ox) * sx, oy + (p[1] - oy) * sy, p[2]])
+    );
+    if (typeof next.size === "number") next.size = round(Math.max(1, next.size * avg));
+    if (typeof next.strokeWidth === "number") next.strokeWidth = round(next.strokeWidth * avg);
+  } else {
+    next.x = round(ox + ((next.x || 0) - ox) * sx);
+    next.y = round(oy + ((next.y || 0) - oy) * sy);
+    next.w = round(Math.max(1, (next.w || 0) * sx));
+    next.h = round(Math.max(1, (next.h || 0) * sy));
+  }
+  return next;
+}
+function resizeHandlePositions(bounds) {
+  const { x, y, w, h: h2 } = bounds;
+  const mx = x + w / 2;
+  const my = y + h2 / 2;
+  return [
+    { key: "nw", x, y },
+    { key: "n", x: mx, y },
+    { key: "ne", x: x + w, y },
+    { key: "e", x: x + w, y: my },
+    { key: "se", x: x + w, y: y + h2 },
+    { key: "s", x: mx, y: y + h2 },
+    { key: "sw", x, y: y + h2 },
+    { key: "w", x, y: my }
+  ];
+}
+function pointsToPath(points) {
+  if (!points || !points.length) return "";
+  const [first, ...rest] = points;
+  let d = `M ${round(first[0])} ${round(first[1])}`;
+  for (const [px, py] of rest) d += ` L ${round(px)} ${round(py)}`;
+  return d;
+}
+function simplifyPoints(points, min = 1.2) {
+  if (!points || points.length <= 2) return (points || []).map(roundPoint);
+  const out = [roundPoint(points[0])];
+  for (let i = 1; i < points.length; i += 1) {
+    const p = points[i];
+    const last = out[out.length - 1];
+    if (Math.hypot(p[0] - last[0], p[1] - last[1]) >= min || i === points.length - 1)
+      out.push(roundPoint(p));
+  }
+  return out;
+}
+function streamlinePoints(points, streamline) {
+  const first = points[0];
+  const out = [[first[0], first[1], first[2] == null ? 0.5 : clamp(first[2], 0, 1)]];
+  if (points.length < 2) return out;
+  const factor = clamp(1 - (streamline == null ? 0.5 : streamline), 0.15, 1);
+  for (let i = 1; i < points.length; i += 1) {
+    const prev = out[out.length - 1];
+    const p = points[i];
+    out.push([
+      prev[0] + (p[0] - prev[0]) * factor,
+      prev[1] + (p[1] - prev[1]) * factor,
+      p[2] == null ? 0.5 : clamp(p[2], 0, 1)
+    ]);
+  }
+  return out;
+}
+function circlePolygon(cx, cy, r, segments = 16) {
+  const pts = [];
+  for (let i = 0; i < segments; i += 1) {
+    const a = i / segments * Math.PI * 2;
+    pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+  }
+  return pts;
+}
+function velocityPressure(segmentLength) {
+  return clamp(1 - segmentLength / 28, 0.25, 1);
+}
+function strokeOutline(rawPoints, options = {}) {
+  const points = (rawPoints || []).filter((p) => Array.isArray(p) && p.length >= 2);
+  if (points.length === 0) return [];
+  const size = Math.max(1, options.size == null ? 8 : options.size);
+  const thinning = options.thinning == null ? 0.5 : options.thinning;
+  const taperStart = options.taperStart || 0;
+  const taperEnd = options.taperEnd || 0;
+  const nibAngle = options.nibAngle;
+  const pts = streamlinePoints(points, options.streamline);
+  if (pts.length === 1) return circlePolygon(pts[0][0], pts[0][1], size / 2);
+  const segLen = [];
+  let total = 0;
+  for (let i = 1; i < pts.length; i += 1) {
+    const d = Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+    segLen.push(d);
+    total += d;
+  }
+  const hasPressure = points.some((p) => p.length >= 3 && p[2] != null && p[2] > 0 && p[2] !== 0.5);
+  const left = [];
+  const right = [];
+  let run = 0;
+  for (let i = 0; i < pts.length; i += 1) {
+    const p = pts[i];
+    const prev = pts[i - 1] || p;
+    const next = pts[i + 1] || p;
+    let dx = next[0] - prev[0];
+    let dy = next[1] - prev[1];
+    const len = Math.hypot(dx, dy) || 1;
+    dx /= len;
+    dy /= len;
+    const nx = -dy;
+    const ny = dx;
+    const pressure = hasPressure ? p[2] : velocityPressure(segLen[i - 1] == null ? segLen[i] || 0 : segLen[i - 1]);
+    let radius = size / 2 * (thinning === 0 ? 1 : 1 - thinning + thinning * pressure);
+    if (typeof nibAngle === "number") {
+      radius *= 0.35 + 0.65 * Math.abs(Math.sin(Math.atan2(dy, dx) - nibAngle));
+    }
+    if (i > 0) run += segLen[i - 1];
+    if (taperStart > 0) radius *= clamp(run / taperStart, 0, 1);
+    if (taperEnd > 0) radius *= clamp((total - run) / taperEnd, 0, 1);
+    radius = Math.max(0.1, radius);
+    left.push([p[0] + nx * radius, p[1] + ny * radius]);
+    right.push([p[0] - nx * radius, p[1] - ny * radius]);
+  }
+  return [...left, ...right.reverse()];
+}
+function pointsToBrushPath(outline) {
+  if (!outline || outline.length < 3) {
+    if (outline && outline.length) {
+      const [x, y] = outline[0];
+      return `M ${round(x - 1)} ${round(y)} a 1 1 0 1 0 2 0 a 1 1 0 1 0 -2 0 Z`;
+    }
+    return "";
+  }
+  let d = `M ${round(outline[0][0])} ${round(outline[0][1])}`;
+  for (let i = 1; i < outline.length; i += 1) {
+    const prev = outline[i - 1];
+    const cur = outline[i];
+    const mx = (prev[0] + cur[0]) / 2;
+    const my = (prev[1] + cur[1]) / 2;
+    d += ` Q ${round(prev[0])} ${round(prev[1])} ${round(mx)} ${round(my)}`;
+  }
+  return `${d} Z`;
+}
+function brushStrokePath(shape) {
+  const preset = BRUSH_PRESETS[shape.brush] || BRUSH_PRESETS[DEFAULT_BRUSH];
+  return pointsToBrushPath(
+    strokeOutline(shape.points || [], {
+      ...preset,
+      size: shape.size == null ? preset.size : shape.size
+    })
+  );
+}
+function coerceNumber(value, fallback = 0) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+function coercePoints(raw) {
+  if (!Array.isArray(raw)) return [];
+  const pts = [];
+  const limit = Math.min(raw.length, MAX_POINTS_PER_SHAPE);
+  for (let i = 0; i < limit; i += 1) {
+    const p = raw[i];
+    if (Array.isArray(p) && p.length >= 2 && Number.isFinite(Number(p[0])) && Number.isFinite(Number(p[1]))) {
+      const pt = [round(Number(p[0])), round(Number(p[1]))];
+      if (p.length >= 3 && Number.isFinite(Number(p[2]))) pt.push(clamp(Number(p[2]), 0, 1));
+      pts.push(pt);
+    }
+  }
+  return pts;
+}
+function normalizeShape(raw, usedIds) {
+  if (!raw || typeof raw !== "object") return null;
+  const type = DRAW_SHAPE_TYPES.includes(raw.type) ? raw.type : "rectangle";
+  let id = typeof raw.id === "string" && raw.id ? raw.id : createId(type.slice(0, 2));
+  if (usedIds) {
+    while (usedIds.has(id)) id = createId(type.slice(0, 2));
+    usedIds.add(id);
+  }
+  const groupId = typeof raw.groupId === "string" && raw.groupId ? raw.groupId : void 0;
+  const color = typeof raw.color === "string" ? raw.color : typeof raw.stroke === "string" ? raw.stroke : void 0;
+  if (type === "freehand") {
+    const points = coercePoints(raw.points);
+    if (points.length < 1) return null;
+    const brush = BRUSH_PRESETS[raw.brush] ? raw.brush : DEFAULT_BRUSH;
+    const preset = BRUSH_PRESETS[brush];
+    const size = raw.size != null ? Math.max(1, coerceNumber(raw.size, preset.size)) : raw.strokeWidth != null ? Math.max(1, coerceNumber(raw.strokeWidth, DEFAULT_STROKE_WIDTH) * 2) : preset.size;
+    const shape2 = {
+      id,
+      type: "freehand",
+      brush,
+      points,
+      size: round(size),
+      opacity: raw.opacity == null ? preset.opacity : clamp(coerceNumber(raw.opacity, preset.opacity), 0, 1)
+    };
+    if (color) shape2.color = color;
+    if (groupId) shape2.groupId = groupId;
+    return shape2;
+  }
+  const base = {
+    id,
+    type,
+    strokeWidth: raw.strokeWidth == null ? DEFAULT_STROKE_WIDTH : coerceNumber(raw.strokeWidth, DEFAULT_STROKE_WIDTH),
+    opacity: raw.opacity == null ? 1 : clamp(coerceNumber(raw.opacity, 1), 0, 1)
+  };
+  if (color) base.color = color;
+  if (typeof raw.fill === "string") base.fill = raw.fill;
+  if (groupId) base.groupId = groupId;
+  if (type === "line") {
+    const points = coercePoints(raw.points);
+    if (points.length < 2) return null;
+    return {
+      ...base,
+      points,
+      arrowStart: Boolean(raw.arrowStart),
+      arrowEnd: raw.arrowEnd == null ? true : Boolean(raw.arrowEnd)
+    };
+  }
+  const shape = {
+    ...base,
+    x: round(coerceNumber(raw.x, 0)),
+    y: round(coerceNumber(raw.y, 0)),
+    w: round(Math.max(1, coerceNumber(raw.w, 100))),
+    h: round(Math.max(1, coerceNumber(raw.h, 80))),
+    rotation: coerceNumber(raw.rotation, 0)
+  };
+  if (type === "text" || type === "sticky")
+    shape.text = typeof raw.text === "string" ? raw.text : "";
+  return shape;
+}
+function normalizeViewport(raw) {
+  const vp = raw && typeof raw === "object" ? raw : {};
+  return {
+    x: coerceNumber(vp.x, 0),
+    y: coerceNumber(vp.y, 0),
+    scale: clamp(coerceNumber(vp.scale, 1), MIN_SCALE, MAX_SCALE)
+  };
+}
+function normalizeDocument(data) {
+  let raw = data;
+  if (typeof raw === "string") {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      raw = {};
+    }
+  }
+  if (!raw || typeof raw !== "object") raw = {};
+  const usedIds = /* @__PURE__ */ new Set();
+  const rawShapes = Array.isArray(raw.shapes) ? raw.shapes : [];
+  const shapes = [];
+  const shapeLimit = Math.min(rawShapes.length, MAX_SHAPES);
+  for (let i = 0; i < shapeLimit; i += 1) {
+    const shape = normalizeShape(rawShapes[i], usedIds);
+    if (shape) shapes.push(shape);
+  }
+  const groupCounts = /* @__PURE__ */ new Map();
+  for (const s of shapes)
+    if (s.groupId) groupCounts.set(s.groupId, (groupCounts.get(s.groupId) || 0) + 1);
+  for (const s of shapes) if (s.groupId && groupCounts.get(s.groupId) < 2) delete s.groupId;
+  return {
+    version: VD_DRAW_VERSION,
+    viewport: normalizeViewport(raw.viewport),
+    shapes
+  };
+}
+
+// src/draw/core.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var WORLD_EXTENT = 8e3;
+var HANDLE_SIZE = 8;
+var SNAP_THRESHOLD = 6;
+var DRAG_THRESHOLD = 3;
+var ERASER_RADIUS = 12;
+var COALESCE_REASONS = /* @__PURE__ */ new Set(["shape:style", "shape:text", "shape:nudge"]);
+var ICON_PATHS = {
+  select: "M168,132.69,214.08,115l.33-.13A16,16,0,0,0,213,85.07L52.92,32.8A15.95,15.95,0,0,0,32.8,52.92L85.07,213a15.82,15.82,0,0,0,14.41,11l.78,0a15.84,15.84,0,0,0,14.61-9.59l.13-.33L132.69,168,184,219.31a16,16,0,0,0,22.63,0l12.68-12.68a16,16,0,0,0,0-22.63ZM195.31,208,144,156.69a16,16,0,0,0-26,4.93c0,.11-.09.22-.13.32l-17.65,46L48,48l159.85,52.2-45.95,17.64-.32.13a16,16,0,0,0-4.93,26h0L208,195.31Z",
+  hand: "M188,48a27.75,27.75,0,0,0-12,2.71V44a28,28,0,0,0-54.65-8.6A28,28,0,0,0,80,60v64l-3.82-6.13a28,28,0,0,0-48.6,27.82c16,33.77,28.93,57.72,43.72,72.69C86.24,233.54,103.2,240,128,240a88.1,88.1,0,0,0,88-88V76A28,28,0,0,0,188,48Zm12,104a72.08,72.08,0,0,1-72,72c-20.38,0-33.51-4.88-45.33-16.85C69.44,193.74,57.26,171,41.9,138.58a6.36,6.36,0,0,0-.3-.58,12,12,0,0,1,20.79-12,1.76,1.76,0,0,0,.14.23l18.67,30A8,8,0,0,0,96,152V60a12,12,0,0,1,24,0v60a8,8,0,0,0,16,0V44a12,12,0,0,1,24,0v76a8,8,0,0,0,16,0V76a12,12,0,0,1,24,0Z",
+  draw: "M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z",
+  eraser: "M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z",
+  rectangle: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z",
+  ellipse: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z",
+  line: "M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z",
+  text: "M208,56V88a8,8,0,0,1-16,0V64H136V192h24a8,8,0,0,1,0,16H96a8,8,0,0,1,0-16h24V64H64V88a8,8,0,0,1-16,0V56a8,8,0,0,1,8-8H200A8,8,0,0,1,208,56Z",
+  sticky: "M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z",
+  undo: "M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z",
+  redo: "M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z",
+  duplicate: "M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z",
+  delete: "M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z",
+  grid: "M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,80H136V56h64ZM120,56v64H56V56ZM56,136h64v64H56Zm144,64H136V136h64v64Z"
+};
+var TOOL_BUTTONS = [
+  { tool: "select", label: "Select" },
+  { tool: "hand", label: "Pan" },
+  { tool: "draw", label: "Brush" },
+  { tool: "eraser", label: "Eraser" },
+  { tool: "rectangle", label: "Rectangle" },
+  { tool: "ellipse", label: "Ellipse" },
+  { tool: "line", label: "Arrow" },
+  { tool: "text", label: "Text" },
+  { tool: "sticky", label: "Sticky note" }
+];
+var ACTION_BUTTONS = [
+  { action: "undo", label: "Undo" },
+  { action: "redo", label: "Redo" },
+  { action: "duplicate", label: "Duplicate" },
+  { action: "delete", label: "Delete / clear" }
+];
+var BRUSH_ORDER = ["pen", "pencil", "marker", "highlighter", "calligraphy"];
+var BRUSH_LABELS = {
+  pen: "Pen",
+  pencil: "Pencil",
+  marker: "Marker",
+  highlighter: "Highlighter",
+  calligraphy: "Calligraphy"
+};
+var SWATCHES = [
+  "#1f2720",
+  "#495057",
+  "#e03131",
+  "#f08c00",
+  "#f2c200",
+  "#2f9e44",
+  "#1971c2",
+  "#7048e8",
+  "#e64980",
+  "#ffffff"
+];
+function createSvgEl(name, attrs) {
+  const el = document.createElementNS(SVG_NS, name);
+  if (attrs) for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
+  return el;
+}
+function createIcon(name) {
+  const svg = createSvgEl("svg", {
+    viewBox: "0 0 256 256",
+    "aria-hidden": "true",
+    focusable: "false"
+  });
+  svg.classList.add("vd-draw-icon");
+  svg.setAttribute("fill", "currentColor");
+  svg.appendChild(createSvgEl("path", { d: ICON_PATHS[name] || "" }));
+  return svg;
+}
+function clearChildren(node) {
+  if (node) node.replaceChildren();
+}
+function hasWindow() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function toHex6(color) {
+  if (typeof color !== "string") return null;
+  const value = color.trim();
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) return value.toLowerCase();
+  const short = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(value);
+  if (short)
+    return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
+  return null;
+}
+var VdDraw = class {
+  constructor(options = {}) {
+    const opts = options || {};
+    this.element = this._resolveElement(opts.element ?? opts.target);
+    if (!this.element) throw new Error("VdDraw: a target `element` is required");
+    this.readonly = Boolean(opts.readonly);
+    this.tool = DRAW_TOOLS.includes(opts.tool) ? opts.tool : "draw";
+    this.gridSize = Number.isFinite(opts.gridSize) ? opts.gridSize : DEFAULT_GRID_SIZE;
+    this.showGrid = opts.showGrid == null ? true : Boolean(opts.showGrid);
+    this.snap = opts.snap == null ? true : Boolean(opts.snap);
+    this.autoFit = Boolean(opts.autoFit);
+    this.historyEnabled = opts.history == null ? true : Boolean(opts.history);
+    this.historyLimit = Number.isFinite(opts.historyLimit) ? opts.historyLimit : 100;
+    this.style = {
+      color: typeof opts.color === "string" ? opts.color : "#1f2720",
+      opacity: Number.isFinite(opts.opacity) ? clamp(opts.opacity, 0.05, 1) : 1,
+      size: Number.isFinite(opts.brushSize) ? opts.brushSize : BRUSH_PRESETS[DEFAULT_BRUSH].size,
+      brush: BRUSH_PRESETS[opts.brush] ? opts.brush : DEFAULT_BRUSH
+    };
+    this.recentColors = [];
+    this.documentData = normalizeDocument(opts.data);
+    this.selectedIds = /* @__PURE__ */ new Set();
+    this.interaction = null;
+    this.clipboard = [];
+    this.textEditor = null;
+    this.destroyed = false;
+    this.history = [];
+    this.historyIndex = -1;
+    this.isApplyingHistory = false;
+    this.lastReason = null;
+    this.lastTargetKey = null;
+    this.listeners = /* @__PURE__ */ new Map();
+    this._buildShell();
+    if (typeof opts.color !== "string") this.style.color = this._resolveInk();
+    this._bindEvents();
+    this._resetHistory();
+    this.render();
+    this._syncStylePanel();
+    this._scheduleReady();
+  }
+  _resolveElement(target) {
+    if (!target) return null;
+    if (typeof target === "string") return hasWindow() ? document.querySelector(target) : null;
+    return target;
+  }
+  _resolveInk() {
+    if (!hasWindow()) return "#1f2720";
+    try {
+      const v = getComputedStyle(this.svg).getPropertyValue("--vd-draw-ink").trim();
+      return v || "#1f2720";
+    } catch {
+      return "#1f2720";
+    }
+  }
+  // ── Shell ──────────────────────────────────────────────────────────────
+  _buildShell() {
+    const host = this.element;
+    host.classList.add("vd-draw-host");
+    clearChildren(host);
+    const shell = document.createElement("div");
+    shell.className = "vd-draw-shell";
+    this.toolbarEl = document.createElement("div");
+    this.toolbarEl.className = "vd-draw-toolbar";
+    this.toolbarEl.setAttribute("role", "toolbar");
+    this.toolbarEl.setAttribute("aria-label", "Drawing tools");
+    this.panelEl = document.createElement("div");
+    this.panelEl.className = "vd-draw-panel";
+    if (!this.readonly) {
+      this._buildToolbar();
+      this._buildStylePanel();
+    }
+    this.canvasEl = document.createElement("div");
+    this.canvasEl.className = "vd-draw-canvas";
+    this.canvasEl.tabIndex = 0;
+    this.svg = createSvgEl("svg", { class: "vd-draw-svg" });
+    this.svg.setAttribute("width", "100%");
+    this.svg.setAttribute("height", "100%");
+    const defs = createSvgEl("defs");
+    const gs = this.gridSize;
+    this.gridPattern = createSvgEl("pattern", {
+      id: this._svgId("grid"),
+      width: gs,
+      height: gs,
+      patternUnits: "userSpaceOnUse"
+    });
+    this.gridPatternPath = createSvgEl("path", {
+      d: `M ${gs} 0 L 0 0 0 ${gs}`,
+      fill: "none",
+      stroke: "var(--vd-draw-grid)",
+      "stroke-width": 1
+    });
+    this.gridPattern.appendChild(this.gridPatternPath);
+    defs.appendChild(this.gridPattern);
+    const marker = createSvgEl("marker", {
+      id: this._svgId("arrow"),
+      viewBox: "0 0 10 10",
+      refX: 8,
+      refY: 5,
+      markerWidth: 7,
+      markerHeight: 7,
+      orient: "auto-start-reverse"
+    });
+    marker.appendChild(
+      createSvgEl("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--vd-draw-shape-stroke)" })
+    );
+    defs.appendChild(marker);
+    this.svg.appendChild(defs);
+    this.world = createSvgEl("g", { class: "vd-draw-world" });
+    this.gridLayer = createSvgEl("rect", {
+      class: "vd-draw-grid-rect",
+      x: -WORLD_EXTENT,
+      y: -WORLD_EXTENT,
+      width: WORLD_EXTENT * 2,
+      height: WORLD_EXTENT * 2,
+      fill: `url(#${this._svgId("grid")})`
+    });
+    if (!this.showGrid) this.gridLayer.style.display = "none";
+    this.shapesLayer = createSvgEl("g", { class: "vd-draw-shapes" });
+    this.guidesLayer = createSvgEl("g", { class: "vd-draw-guides" });
+    this.overlayLayer = createSvgEl("g", { class: "vd-draw-overlay" });
+    this.marqueeLayer = createSvgEl("g", { class: "vd-draw-marquee" });
+    this.world.append(
+      this.gridLayer,
+      this.shapesLayer,
+      this.guidesLayer,
+      this.overlayLayer,
+      this.marqueeLayer
+    );
+    this.svg.appendChild(this.world);
+    this.canvasEl.appendChild(this.svg);
+    this.textLayer = document.createElement("div");
+    this.textLayer.className = "vd-draw-text-layer";
+    this.canvasEl.appendChild(this.textLayer);
+    shell.append(this.toolbarEl, this.panelEl, this.canvasEl);
+    host.appendChild(shell);
+  }
+  _buildToolbar() {
+    clearChildren(this.toolbarEl);
+    const makeBtn = (name, label, attr, value, active) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "vd-draw-tool";
+      btn.setAttribute(attr, value);
+      btn.setAttribute("aria-label", label);
+      btn.setAttribute("title", label);
+      if (active) btn.setAttribute("aria-pressed", "true");
+      btn.appendChild(createIcon(name));
+      return btn;
+    };
+    const tools = document.createElement("div");
+    tools.className = "vd-draw-toolbar-group";
+    for (const t of TOOL_BUTTONS)
+      tools.appendChild(makeBtn(t.tool, t.label, "data-tool", t.tool, t.tool === this.tool));
+    const actions = document.createElement("div");
+    actions.className = "vd-draw-toolbar-group";
+    for (const a of ACTION_BUTTONS)
+      actions.appendChild(makeBtn(a.action, a.label, "data-action", a.action, false));
+    this.toolbarEl.append(tools, actions);
+  }
+  _panelGroup(labelText, className = "") {
+    const group = document.createElement("div");
+    group.className = `vd-draw-panel-group${className ? ` ${className}` : ""}`;
+    const label = document.createElement("span");
+    label.className = "vd-draw-panel-label";
+    label.textContent = labelText;
+    group.appendChild(label);
+    return group;
+  }
+  _rangeInput(min, max, step, styleKey) {
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = String(min);
+    input.max = String(max);
+    input.step = String(step);
+    input.setAttribute("data-style", styleKey);
+    input.setAttribute("aria-label", styleKey);
+    return input;
+  }
+  _buildStylePanel() {
+    clearChildren(this.panelEl);
+    const brushGroup = this._panelGroup("Brush");
+    for (const key of BRUSH_ORDER) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "vd-draw-brush";
+      btn.setAttribute("data-brush", key);
+      btn.setAttribute("title", BRUSH_LABELS[key]);
+      btn.textContent = BRUSH_LABELS[key];
+      brushGroup.appendChild(btn);
+    }
+    const colorGroup = this._panelGroup("Color", "vd-draw-swatches-group");
+    for (const color of SWATCHES) {
+      const sw = document.createElement("button");
+      sw.type = "button";
+      sw.className = "vd-draw-swatch";
+      sw.setAttribute("data-swatch", color);
+      sw.setAttribute("aria-label", `Color ${color}`);
+      sw.setAttribute("title", color);
+      sw.style.setProperty("--sw", color);
+      colorGroup.appendChild(sw);
+    }
+    this.colorInput = document.createElement("input");
+    this.colorInput.type = "color";
+    this.colorInput.className = "vd-draw-color-input";
+    this.colorInput.setAttribute("data-style", "color");
+    this.colorInput.setAttribute("aria-label", "Custom color");
+    this.colorInput.setAttribute("title", "Custom color");
+    colorGroup.appendChild(this.colorInput);
+    const sizeGroup = this._panelGroup("Size");
+    this.sizeInput = this._rangeInput(1, 40, 1, "size");
+    this.sizeValue = document.createElement("span");
+    this.sizeValue.className = "vd-draw-value";
+    sizeGroup.append(this.sizeInput, this.sizeValue);
+    const opacityGroup = this._panelGroup("Opacity");
+    this.opacityInput = this._rangeInput(0.1, 1, 0.05, "opacity");
+    this.opacityValue = document.createElement("span");
+    this.opacityValue.className = "vd-draw-value";
+    opacityGroup.append(this.opacityInput, this.opacityValue);
+    const gridGroup = this._panelGroup("Grid");
+    this.gridToggle = document.createElement("button");
+    this.gridToggle.type = "button";
+    this.gridToggle.className = "vd-draw-tool";
+    this.gridToggle.setAttribute("data-grid", "toggle");
+    this.gridToggle.setAttribute("aria-label", "Toggle grid");
+    this.gridToggle.setAttribute("title", "Toggle grid");
+    this.gridToggle.appendChild(createIcon("grid"));
+    this.gridSizeInput = this._rangeInput(4, 128, 4, "grid");
+    this.gridSizeInput.title = "Grid cell size";
+    gridGroup.append(this.gridToggle, this.gridSizeInput);
+    this.recentGroup = this._panelGroup("Recent", "vd-draw-swatches-group");
+    this.recentEl = document.createElement("span");
+    this.recentEl.className = "vd-draw-recent";
+    this.recentGroup.appendChild(this.recentEl);
+    this.panelEl.append(
+      brushGroup,
+      colorGroup,
+      sizeGroup,
+      opacityGroup,
+      gridGroup,
+      this.recentGroup
+    );
+  }
+  _svgId(suffix) {
+    if (!this._idBase) this._idBase = createId("draw");
+    return `${this._idBase}-${suffix}`;
+  }
+  _syncToolbar() {
+    if (this.readonly || !this.toolbarEl) return;
+    for (const btn of this.toolbarEl.querySelectorAll("[data-tool]")) {
+      if (btn.getAttribute("data-tool") === this.tool) btn.setAttribute("aria-pressed", "true");
+      else btn.removeAttribute("aria-pressed");
+    }
+  }
+  _syncStylePanel() {
+    if (this.readonly || !this.panelEl) return;
+    for (const btn of this.panelEl.querySelectorAll("[data-brush]")) {
+      if (btn.getAttribute("data-brush") === this.style.brush)
+        btn.setAttribute("aria-pressed", "true");
+      else btn.removeAttribute("aria-pressed");
+    }
+    if (this.colorInput) {
+      const hex = toHex6(this.style.color);
+      if (hex) this.colorInput.value = hex;
+    }
+    if (this.sizeInput) this.sizeInput.value = String(this.style.size);
+    if (this.sizeValue) this.sizeValue.textContent = `${Math.round(this.style.size)}px`;
+    if (this.opacityInput) this.opacityInput.value = String(this.style.opacity);
+    if (this.opacityValue)
+      this.opacityValue.textContent = `${Math.round(this.style.opacity * 100)}%`;
+    if (this.gridToggle) {
+      if (this.showGrid) this.gridToggle.setAttribute("aria-pressed", "true");
+      else this.gridToggle.removeAttribute("aria-pressed");
+    }
+    if (this.gridSizeInput) this.gridSizeInput.value = String(this.gridSize);
+    for (const sw of this.panelEl.querySelectorAll(".vd-draw-swatch[data-swatch]")) {
+      if (sw.getAttribute("data-swatch") === this.style.color)
+        sw.setAttribute("aria-pressed", "true");
+      else sw.removeAttribute("aria-pressed");
+    }
+    if (this.recentEl && this.recentGroup) {
+      clearChildren(this.recentEl);
+      for (const color of this.recentColors) {
+        const sw = document.createElement("button");
+        sw.type = "button";
+        sw.className = "vd-draw-swatch";
+        sw.setAttribute("data-swatch", color);
+        sw.setAttribute("aria-label", `Recent color ${color}`);
+        sw.setAttribute("title", color);
+        sw.style.setProperty("--sw", color);
+        this.recentEl.appendChild(sw);
+      }
+      this.recentGroup.style.display = this.recentColors.length ? "" : "none";
+    }
+  }
+  // ── Events ─────────────────────────────────────────────────────────────
+  _bindEvents() {
+    this._onPointerDown = this._handlePointerDown.bind(this);
+    this._onPointerMove = this._handlePointerMove.bind(this);
+    this._onPointerUp = this._handlePointerUp.bind(this);
+    this._onWheel = this._handleWheel.bind(this);
+    this._onKeyDown = this._handleKeyDown.bind(this);
+    this._onToolbarClick = this._handleToolbarClick.bind(this);
+    this._onPanelClick = this._handlePanelClick.bind(this);
+    this._onPanelInput = this._handlePanelInput.bind(this);
+    this._onResize = this._handleResize.bind(this);
+    this.canvasEl.addEventListener("pointerdown", this._onPointerDown);
+    this.canvasEl.addEventListener("pointermove", this._onPointerMove);
+    this.canvasEl.addEventListener("pointerup", this._onPointerUp);
+    this.canvasEl.addEventListener("pointercancel", this._onPointerUp);
+    this.canvasEl.addEventListener("wheel", this._onWheel, { passive: false });
+    this.canvasEl.addEventListener("keydown", this._onKeyDown);
+    this.toolbarEl.addEventListener("click", this._onToolbarClick);
+    this.panelEl.addEventListener("click", this._onPanelClick);
+    this.panelEl.addEventListener("input", this._onPanelInput);
+    window.addEventListener("pointerup", this._onPointerUp);
+    window.addEventListener("resize", this._onResize);
+  }
+  _unbindEvents() {
+    this.canvasEl.removeEventListener("pointerdown", this._onPointerDown);
+    this.canvasEl.removeEventListener("pointermove", this._onPointerMove);
+    this.canvasEl.removeEventListener("pointerup", this._onPointerUp);
+    this.canvasEl.removeEventListener("pointercancel", this._onPointerUp);
+    this.canvasEl.removeEventListener("wheel", this._onWheel);
+    this.canvasEl.removeEventListener("keydown", this._onKeyDown);
+    this.toolbarEl.removeEventListener("click", this._onToolbarClick);
+    this.panelEl.removeEventListener("click", this._onPanelClick);
+    this.panelEl.removeEventListener("input", this._onPanelInput);
+    window.removeEventListener("pointerup", this._onPointerUp);
+    window.removeEventListener("resize", this._onResize);
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+    this.listeners.get(event).add(callback);
+    return this;
+  }
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
+    return this;
+  }
+  emit(event, payload) {
+    const set = this.listeners.get(event);
+    if (set) for (const cb of set) cb(payload);
+  }
+  // ── Coordinate transforms ───────────────────────────────────────────────
+  _clientToLocal(clientX, clientY) {
+    const rect = this.canvasEl.getBoundingClientRect();
+    return { x: clientX - rect.left, y: clientY - rect.top };
+  }
+  _localToWorld(lx, ly) {
+    const vp = this.documentData.viewport;
+    return { x: (lx - vp.x) / vp.scale, y: (ly - vp.y) / vp.scale };
+  }
+  _clientToWorld(clientX, clientY) {
+    const local = this._clientToLocal(clientX, clientY);
+    return this._localToWorld(local.x, local.y);
+  }
+  scaleAround(factor, lx, ly) {
+    const vp = this.documentData.viewport;
+    const next = clamp(vp.scale * factor, MIN_SCALE, MAX_SCALE);
+    const applied = next / vp.scale;
+    vp.x = lx - (lx - vp.x) * applied;
+    vp.y = ly - (ly - vp.y) * applied;
+    vp.scale = next;
+    return this;
+  }
+  // ── Viewport ─────────────────────────────────────────────────────────────
+  setViewport(patch) {
+    const vp = this.documentData.viewport;
+    if (patch && typeof patch === "object") {
+      if (Number.isFinite(patch.x)) vp.x = patch.x;
+      if (Number.isFinite(patch.y)) vp.y = patch.y;
+      if (Number.isFinite(patch.scale)) vp.scale = clamp(patch.scale, MIN_SCALE, MAX_SCALE);
+    }
+    this.render({ scene: false });
+    this._emitViewportChange("viewport:set");
+    return this;
+  }
+  zoomIn() {
+    return this._zoomAtCentre(1.2);
+  }
+  zoomOut() {
+    return this._zoomAtCentre(1 / 1.2);
+  }
+  _zoomAtCentre(factor) {
+    const rect = this.canvasEl.getBoundingClientRect();
+    this.scaleAround(factor, rect.width / 2, rect.height / 2);
+    this.render({ scene: false });
+    this._emitViewportChange("viewport:zoom");
+    return this;
+  }
+  resetView() {
+    this.documentData.viewport = { x: 0, y: 0, scale: 1 };
+    this.render({ scene: false });
+    this._emitViewportChange("viewport:reset");
+    return this;
+  }
+  fitView() {
+    const bounds = boundsOfShapes(this.documentData.shapes);
+    const rect = this.canvasEl.getBoundingClientRect();
+    if (!bounds || bounds.w === 0 || bounds.h === 0 || !rect.width || !rect.height) return this;
+    const pad = 40;
+    const scale = clamp(
+      Math.min((rect.width - pad * 2) / bounds.w, (rect.height - pad * 2) / bounds.h),
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    const vp = this.documentData.viewport;
+    vp.scale = scale;
+    vp.x = (rect.width - bounds.w * scale) / 2 - bounds.x * scale;
+    vp.y = (rect.height - bounds.h * scale) / 2 - bounds.y * scale;
+    this.render({ scene: false });
+    this._emitViewportChange("viewport:fit");
+    return this;
+  }
+  _emitViewportChange(reason) {
+    this.emit("viewport", {
+      reason,
+      viewport: { ...this.documentData.viewport },
+      document: this.toJSON()
+    });
+  }
+  // ── Grid ─────────────────────────────────────────────────────────────────
+  setGridSize(size) {
+    if (!Number.isFinite(size)) return this;
+    this.gridSize = clamp(Math.round(size), 4, 128);
+    if (this.gridPattern) {
+      this.gridPattern.setAttribute("width", String(this.gridSize));
+      this.gridPattern.setAttribute("height", String(this.gridSize));
+      this.gridPatternPath.setAttribute("d", `M ${this.gridSize} 0 L 0 0 0 ${this.gridSize}`);
+    }
+    this._syncStylePanel();
+    return this;
+  }
+  setGridVisible(visible) {
+    this.showGrid = Boolean(visible);
+    if (this.gridLayer) this.gridLayer.style.display = this.showGrid ? "" : "none";
+    this._syncStylePanel();
+    return this;
+  }
+  toggleGrid() {
+    return this.setGridVisible(!this.showGrid);
+  }
+  // ── Tool + current style ─────────────────────────────────────────────────
+  setTool(tool) {
+    if (!DRAW_TOOLS.includes(tool)) return this;
+    this.tool = tool;
+    this._syncToolbar();
+    return this;
+  }
+  setColor(color) {
+    if (typeof color !== "string") return this;
+    this.style.color = color;
+    this._pushRecent(color);
+    this._syncStylePanel();
+    return this;
+  }
+  setOpacity(opacity) {
+    if (Number.isFinite(opacity)) this.style.opacity = clamp(opacity, 0.05, 1);
+    this._syncStylePanel();
+    return this;
+  }
+  setBrushSize(size) {
+    if (Number.isFinite(size)) this.style.size = clamp(size, 1, 200);
+    this._syncStylePanel();
+    return this;
+  }
+  setBrush(brush) {
+    if (BRUSH_PRESETS[brush]) this.style.brush = brush;
+    this._syncStylePanel();
+    return this;
+  }
+  _pushRecent(color) {
+    this.recentColors = [color, ...this.recentColors.filter((c) => c !== color)].slice(0, 8);
+  }
+  _shapeStrokeWidth() {
+    return clamp(round(this.style.size / 3), 1, 14);
+  }
+  // ── Shape CRUD ─────────────────────────────────────────────────────────
+  getShape(id) {
+    return this.documentData.shapes.find((s) => s.id === id) || null;
+  }
+  addShape(partial = {}) {
+    const type = DRAW_SHAPE_TYPES.includes(partial.type) ? partial.type : "rectangle";
+    const s = this.style;
+    let shape;
+    if (type === "freehand") {
+      const points = Array.isArray(partial.points) ? partial.points.map((p) => this._roundPoint(p)) : [];
+      shape = {
+        id: partial.id || createId("fh"),
+        type: "freehand",
+        brush: BRUSH_PRESETS[partial.brush] ? partial.brush : s.brush,
+        color: partial.color || s.color,
+        size: partial.size == null ? s.size : partial.size,
+        opacity: partial.opacity == null ? s.opacity : partial.opacity,
+        points
+      };
+    } else if (type === "line") {
+      const points = Array.isArray(partial.points) ? partial.points.map(([x, y]) => [round(x), round(y)]) : [];
+      shape = {
+        id: partial.id || createId("ln"),
+        type: "line",
+        points,
+        color: partial.color || s.color,
+        strokeWidth: partial.strokeWidth == null ? this._shapeStrokeWidth() : partial.strokeWidth,
+        opacity: partial.opacity == null ? s.opacity : partial.opacity,
+        arrowStart: Boolean(partial.arrowStart),
+        arrowEnd: partial.arrowEnd == null ? true : Boolean(partial.arrowEnd)
+      };
+    } else {
+      shape = {
+        id: partial.id || createId(type.slice(0, 2)),
+        type,
+        x: round(partial.x ?? 0),
+        y: round(partial.y ?? 0),
+        w: round(Math.max(1, partial.w ?? 100)),
+        h: round(Math.max(1, partial.h ?? 80)),
+        rotation: partial.rotation ?? 0,
+        color: partial.color || s.color,
+        strokeWidth: partial.strokeWidth == null ? this._shapeStrokeWidth() : partial.strokeWidth,
+        opacity: partial.opacity == null ? s.opacity : partial.opacity
+      };
+      if (partial.fill) shape.fill = partial.fill;
+      if (type === "text" || type === "sticky")
+        shape.text = typeof partial.text === "string" ? partial.text : "";
+    }
+    this.documentData.shapes.push(shape);
+    this.render();
+    this._emitChange("shape:add", { shape: deepClone(shape), shapeId: shape.id });
+    return shape;
+  }
+  _roundPoint(p) {
+    const out = [round(p[0]), round(p[1])];
+    if (p.length >= 3 && p[2] != null) out.push(clamp(Number(p[2]) || 0, 0, 1));
+    return out;
+  }
+  updateShape(id, patch, options = {}) {
+    const shape = this.getShape(id);
+    if (!shape || !patch) return null;
+    Object.assign(shape, patch);
+    this.render();
+    this._emitChange(options.reason || "shape:update", { shapeId: id }, options.reason ? id : null);
+    return shape;
+  }
+  removeShape(id) {
+    const idx = this.documentData.shapes.findIndex((s) => s.id === id);
+    if (idx === -1) return false;
+    this.documentData.shapes.splice(idx, 1);
+    this.selectedIds.delete(id);
+    this.render();
+    this._emitChange("shape:delete", { shapeId: id });
+    return true;
+  }
+  // ── Selection ────────────────────────────────────────────────────────────
+  getSelectedShapes() {
+    return this.documentData.shapes.filter((s) => this.selectedIds.has(s.id));
+  }
+  select(ids, { additive = false } = {}) {
+    const list = Array.isArray(ids) ? ids : ids == null ? [] : [ids];
+    if (!additive) this.selectedIds.clear();
+    for (const id of list) {
+      const shape = this.getShape(id);
+      if (shape?.groupId) {
+        for (const s of this.documentData.shapes)
+          if (s.groupId === shape.groupId) this.selectedIds.add(s.id);
+      } else if (shape) {
+        this.selectedIds.add(id);
+      }
+    }
+    this.render({ scene: false });
+    this._emitSelect();
+    return this;
+  }
+  selectAll() {
+    this.selectedIds = new Set(this.documentData.shapes.map((s) => s.id));
+    this.render({ scene: false });
+    this._emitSelect();
+    return this;
+  }
+  deselect() {
+    if (this.selectedIds.size === 0) return this;
+    this.selectedIds.clear();
+    this.render({ scene: false });
+    this._emitSelect();
+    return this;
+  }
+  selectInBounds(box, { additive = false } = {}) {
+    if (!additive) this.selectedIds.clear();
+    for (const shape of this.documentData.shapes) {
+      if (boundsIntersect(shapeBounds(shape), box)) this.selectedIds.add(shape.id);
+    }
+    for (const shape of [...this.getSelectedShapes()]) {
+      if (shape.groupId) {
+        for (const s of this.documentData.shapes)
+          if (s.groupId === shape.groupId) this.selectedIds.add(s.id);
+      }
+    }
+    this.render({ scene: false });
+    this._emitSelect();
+    return this;
+  }
+  _emitSelect() {
+    this.emit("select", {
+      ids: [...this.selectedIds],
+      shapes: this.getSelectedShapes().map((s) => deepClone(s))
+    });
+  }
+  _syncSelectionValidity() {
+    const present = new Set(this.documentData.shapes.map((s) => s.id));
+    for (const id of [...this.selectedIds]) if (!present.has(id)) this.selectedIds.delete(id);
+  }
+  // ── Manipulation ─────────────────────────────────────────────────────────
+  _replaceShape(next) {
+    const idx = this.documentData.shapes.findIndex((s) => s.id === next.id);
+    if (idx !== -1) this.documentData.shapes[idx] = next;
+  }
+  nudge(dx, dy) {
+    const selected = this.getSelectedShapes();
+    if (!selected.length) return this;
+    for (const shape of selected) this._replaceShape(translateShape(shape, dx, dy));
+    this.render();
+    this._emitChange(
+      "shape:nudge",
+      { shapeIds: [...this.selectedIds] },
+      `nudge:${[...this.selectedIds].sort().join(",")}`
+    );
+    return this;
+  }
+  setSelectionBounds(target) {
+    const selected = this.getSelectedShapes();
+    const cur = boundsOfShapes(selected);
+    if (!cur || cur.w === 0 || cur.h === 0 || !target) return this;
+    const sx = target.w / cur.w;
+    const sy = target.h / cur.h;
+    for (const shape of selected) {
+      const scaled = scaleShape(shape, cur.x, cur.y, sx, sy);
+      this._replaceShape(translateShape(scaled, target.x - cur.x, target.y - cur.y));
+    }
+    this.render();
+    this._emitChange("shape:resize", { shapeIds: [...this.selectedIds] });
+    return this;
+  }
+  deleteSelection() {
+    if (this.selectedIds.size === 0) return false;
+    const ids = [...this.selectedIds];
+    this.documentData.shapes = this.documentData.shapes.filter((s) => !this.selectedIds.has(s.id));
+    this.selectedIds.clear();
+    this.render();
+    this._emitChange("shape:delete", { shapeIds: ids });
+    return true;
+  }
+  setStyle(patch) {
+    const selected = this.getSelectedShapes();
+    if (!selected.length || !patch) return this;
+    const allowed = ["color", "fill", "strokeWidth", "opacity", "size", "brush"];
+    for (const shape of selected) {
+      for (const key of allowed) if (key in patch) shape[key] = patch[key];
+    }
+    this.render();
+    this._emitChange(
+      "shape:style",
+      { shapeIds: [...this.selectedIds] },
+      `style:${[...this.selectedIds].sort().join(",")}`
+    );
+    return this;
+  }
+  // ── Z-order ────────────────────────────────────────────────────────────
+  _reorder(mutator) {
+    if (this.selectedIds.size === 0) return this;
+    mutator();
+    this.render();
+    this._emitChange("shape:reorder", { shapeIds: [...this.selectedIds] });
+    return this;
+  }
+  bringToFront() {
+    return this._reorder(() => {
+      const sel = this.documentData.shapes.filter((s) => this.selectedIds.has(s.id));
+      const rest = this.documentData.shapes.filter((s) => !this.selectedIds.has(s.id));
+      this.documentData.shapes = [...rest, ...sel];
+    });
+  }
+  sendToBack() {
+    return this._reorder(() => {
+      const sel = this.documentData.shapes.filter((s) => this.selectedIds.has(s.id));
+      const rest = this.documentData.shapes.filter((s) => !this.selectedIds.has(s.id));
+      this.documentData.shapes = [...sel, ...rest];
+    });
+  }
+  bringForward() {
+    return this._reorder(() => {
+      const arr = this.documentData.shapes;
+      for (let i = arr.length - 2; i >= 0; i -= 1) {
+        if (this.selectedIds.has(arr[i].id) && !this.selectedIds.has(arr[i + 1].id))
+          [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
+      }
+    });
+  }
+  sendBackward() {
+    return this._reorder(() => {
+      const arr = this.documentData.shapes;
+      for (let i = 1; i < arr.length; i += 1) {
+        if (this.selectedIds.has(arr[i].id) && !this.selectedIds.has(arr[i - 1].id))
+          [arr[i], arr[i - 1]] = [arr[i - 1], arr[i]];
+      }
+    });
+  }
+  // ── Grouping ─────────────────────────────────────────────────────────────
+  group() {
+    const selected = this.getSelectedShapes();
+    if (selected.length < 2) return this;
+    const groupId = createId("grp");
+    for (const shape of selected) shape.groupId = groupId;
+    this.render();
+    this._emitChange("shape:group", { groupId, shapeIds: [...this.selectedIds] });
+    return this;
+  }
+  ungroup() {
+    const selected = this.getSelectedShapes();
+    let changed = false;
+    for (const shape of selected) {
+      if (shape.groupId) {
+        delete shape.groupId;
+        changed = true;
+      }
+    }
+    if (!changed) return this;
+    this.render();
+    this._emitChange("shape:ungroup", { shapeIds: [...this.selectedIds] });
+    return this;
+  }
+  // ── Clipboard ────────────────────────────────────────────────────────────
+  copy() {
+    this.clipboard = this.getSelectedShapes().map((s) => deepClone(s));
+    return this;
+  }
+  cut() {
+    this.copy();
+    this.deleteSelection();
+    return this;
+  }
+  paste({ offset = 16 } = {}) {
+    if (!this.clipboard.length) return this;
+    const groupRemap = /* @__PURE__ */ new Map();
+    const newIds = [];
+    for (const src of this.clipboard) {
+      const copy = translateShape(deepClone(src), offset, offset);
+      copy.id = createId(copy.type.slice(0, 2));
+      if (copy.groupId) {
+        if (!groupRemap.has(copy.groupId)) groupRemap.set(copy.groupId, createId("grp"));
+        copy.groupId = groupRemap.get(copy.groupId);
+      }
+      this.documentData.shapes.push(copy);
+      newIds.push(copy.id);
+    }
+    this.selectedIds = new Set(newIds);
+    this.render();
+    this._emitChange("shape:paste", { shapeIds: newIds });
+    this._emitSelect();
+    return this;
+  }
+  duplicate() {
+    this.copy();
+    this.paste();
+    return this;
+  }
+  // ── Snapping ─────────────────────────────────────────────────────────────
+  _computeSnap(movingBounds, movingIds) {
+    if (!this.snap) return { dx: 0, dy: 0, guides: [] };
+    const threshold = SNAP_THRESHOLD / this.documentData.viewport.scale;
+    const targetsX = [
+      movingBounds.x,
+      movingBounds.x + movingBounds.w / 2,
+      movingBounds.x + movingBounds.w
+    ];
+    const targetsY = [
+      movingBounds.y,
+      movingBounds.y + movingBounds.h / 2,
+      movingBounds.y + movingBounds.h
+    ];
+    let bestX = null;
+    let bestY = null;
+    const guides = [];
+    for (const other of this.documentData.shapes) {
+      if (movingIds.has(other.id)) continue;
+      const b = shapeBounds(other);
+      for (const t of targetsX)
+        for (const l of [b.x, b.x + b.w / 2, b.x + b.w]) {
+          const d = l - t;
+          if (Math.abs(d) <= threshold && (!bestX || Math.abs(d) < Math.abs(bestX.d)))
+            bestX = { d, at: l };
+        }
+      for (const t of targetsY)
+        for (const l of [b.y, b.y + b.h / 2, b.y + b.h]) {
+          const d = l - t;
+          if (Math.abs(d) <= threshold && (!bestY || Math.abs(d) < Math.abs(bestY.d)))
+            bestY = { d, at: l };
+        }
+    }
+    if (bestX) guides.push({ x1: bestX.at, y1: -WORLD_EXTENT, x2: bestX.at, y2: WORLD_EXTENT });
+    if (bestY) guides.push({ x1: -WORLD_EXTENT, y1: bestY.at, x2: WORLD_EXTENT, y2: bestY.at });
+    return { dx: bestX ? bestX.d : 0, dy: bestY ? bestY.d : 0, guides };
+  }
+  // ── Export ───────────────────────────────────────────────────────────────
+  _resolvedColors() {
+    const cs = hasWindow() ? getComputedStyle(this.svg) : null;
+    const read = (name, fallback) => {
+      const v = cs?.getPropertyValue(name)?.trim();
+      return v || fallback;
+    };
+    return {
+      ink: read("--vd-draw-ink", "#1f2720"),
+      shapeStroke: read("--vd-draw-shape-stroke", "#245f52"),
+      text: read("--vd-draw-text", "#1f2720"),
+      sticky: read("--vd-draw-sticky-fill", "#fdf3c4")
+    };
+  }
+  toSVG() {
+    const shapes = this.documentData.shapes;
+    const bounds = boundsOfShapes(shapes) || { x: 0, y: 0, w: 100, h: 100 };
+    const pad = 20;
+    const vb = {
+      x: bounds.x - pad,
+      y: bounds.y - pad,
+      w: Math.max(1, bounds.w) + pad * 2,
+      h: Math.max(1, bounds.h) + pad * 2
+    };
+    const colors = this._resolvedColors();
+    const svg = createSvgEl("svg", {
+      xmlns: SVG_NS,
+      width: round(vb.w),
+      height: round(vb.h),
+      viewBox: `${round(vb.x)} ${round(vb.y)} ${round(vb.w)} ${round(vb.h)}`
+    });
+    for (const shape of shapes) {
+      const el = this._renderShapeEl(shape, { standalone: true, colors });
+      if (el) svg.appendChild(el);
+    }
+    return new XMLSerializer().serializeToString(svg);
+  }
+  toPNG({ scale = 2 } = {}) {
+    const markup = this.toSVG();
+    const bounds = boundsOfShapes(this.documentData.shapes) || { w: 100, h: 100 };
+    const pad = 20;
+    const w = Math.max(1, (bounds.w || 100) + pad * 2);
+    const h2 = Math.max(1, (bounds.h || 100) + pad * 2);
+    return new Promise((resolve, reject) => {
+      try {
+        const img = new Image();
+        const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.ceil(w * scale);
+          canvas.height = Math.ceil(h2 * scale);
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("VdDraw: 2D canvas context unavailable"));
+            return;
+          }
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          resolve(canvas.toDataURL("image/png"));
+        };
+        img.onerror = () => reject(new Error("VdDraw: failed to rasterize SVG"));
+        img.src = url;
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+  // ── History ──────────────────────────────────────────────────────────────
+  _resetHistory() {
+    this.history = [this.toJSON()];
+    this.historyIndex = 0;
+    this.lastReason = null;
+    this.lastTargetKey = null;
+  }
+  _recordHistory(reason, targetKey) {
+    if (!this.historyEnabled || this.isApplyingHistory) return;
+    const snapshot = this.toJSON();
+    const coalesce = COALESCE_REASONS.has(reason) && reason === this.lastReason && targetKey != null && targetKey === this.lastTargetKey && this.historyIndex >= 0 && // Only coalesce onto the TOP of the stack. Without this guard a
+    // coalescing edit made right after an undo overwrites an earlier
+    // (non-top) snapshot, corrupting the redo branch and losing base state.
+    // Mirrors the flowchart core's canCoalesce guard.
+    this.historyIndex === this.history.length - 1;
+    if (coalesce) {
+      this.history[this.historyIndex] = snapshot;
+    } else {
+      this.history = this.history.slice(0, this.historyIndex + 1);
+      this.history.push(snapshot);
+      this.historyIndex = this.history.length - 1;
+      if (this.history.length > this.historyLimit + 1) {
+        this.history.shift();
+        this.historyIndex -= 1;
+      }
+    }
+    this.lastReason = reason;
+    this.lastTargetKey = targetKey ?? null;
+  }
+  _emitChange(reason, extra = {}, targetKey = null) {
+    this._recordHistory(reason, targetKey);
+    this._syncSelectionValidity();
+    this.emit("change", { reason, document: this.toJSON(), ...extra });
+  }
+  canUndo() {
+    return this.historyIndex > 0;
+  }
+  canRedo() {
+    return this.historyIndex < this.history.length - 1;
+  }
+  undo() {
+    if (!this.canUndo()) return this;
+    this.historyIndex -= 1;
+    this._applySnapshot(this.history[this.historyIndex], "undo");
+    return this;
+  }
+  redo() {
+    if (!this.canRedo()) return this;
+    this.historyIndex += 1;
+    this._applySnapshot(this.history[this.historyIndex], "redo");
+    return this;
+  }
+  clearHistory() {
+    this._resetHistory();
+    this.emit("history", { reason: "clear", canUndo: false, canRedo: false });
+    return this;
+  }
+  _applySnapshot(snapshot, reason) {
+    this.isApplyingHistory = true;
+    const viewport = { ...this.documentData.viewport };
+    this.documentData = deepClone(snapshot);
+    this.documentData.viewport = viewport;
+    this._syncSelectionValidity();
+    this.render();
+    this.emit("change", { reason, document: this.toJSON() });
+    this.emit("history", { reason, canUndo: this.canUndo(), canRedo: this.canRedo() });
+    this.isApplyingHistory = false;
+  }
+  // ── Serialization ──────────────────────────────────────────────────────
+  toJSON() {
+    return deepClone({
+      version: VD_DRAW_VERSION,
+      viewport: this.documentData.viewport,
+      shapes: this.documentData.shapes
+    });
+  }
+  load(data) {
+    this.documentData = normalizeDocument(data);
+    this.selectedIds.clear();
+    this._resetHistory();
+    this.render();
+    this._emitChange("load");
+    this._emitSelect();
+    return this;
+  }
+  clear() {
+    if (!this.documentData.shapes.length) return this;
+    this.documentData.shapes = [];
+    this.selectedIds.clear();
+    this.render();
+    this._emitChange("clear");
+    return this;
+  }
+  // ── Text editing ─────────────────────────────────────────────────────────
+  startTextEdit(id) {
+    const shape = this.getShape(id);
+    if (!shape || shape.type !== "text" && shape.type !== "sticky" || this.readonly) return false;
+    this.stopTextEdit({ commit: false });
+    const editor = document.createElement("textarea");
+    editor.className = "vd-draw-text-editor";
+    editor.value = shape.text || "";
+    this.textEditor = { id, el: editor };
+    this._positionTextEditor(shape, editor);
+    this.textLayer.appendChild(editor);
+    editor.focus();
+    editor.addEventListener("blur", () => this.stopTextEdit({ commit: true }));
+    editor.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.stopTextEdit({ commit: false });
+    });
+    return true;
+  }
+  _positionTextEditor(shape, editor) {
+    const vp = this.documentData.viewport;
+    editor.style.left = `${vp.x + shape.x * vp.scale}px`;
+    editor.style.top = `${vp.y + shape.y * vp.scale}px`;
+    editor.style.width = `${shape.w * vp.scale}px`;
+    editor.style.height = `${shape.h * vp.scale}px`;
+  }
+  stopTextEdit({ commit = true } = {}) {
+    if (!this.textEditor) return;
+    const { id, el } = this.textEditor;
+    const value = el.value;
+    this.textEditor = null;
+    el.remove();
+    if (commit) {
+      const shape = this.getShape(id);
+      if (shape && shape.text !== value) {
+        shape.text = value;
+        this.render();
+        this._emitChange("shape:text", { shapeId: id }, `text:${id}`);
+      }
+    }
+  }
+  // ── Pointer interaction ──────────────────────────────────────────────────
+  _capture(pointerId) {
+    if (typeof this.canvasEl.setPointerCapture === "function") {
+      try {
+        this.canvasEl.setPointerCapture(pointerId);
+      } catch {
+      }
+    }
+  }
+  _handleToolbarClick(event) {
+    const toolBtn = event.target.closest("[data-tool]");
+    if (toolBtn) {
+      this.setTool(toolBtn.getAttribute("data-tool"));
+      return;
+    }
+    const actionBtn = event.target.closest("[data-action]");
+    if (!actionBtn) return;
+    const action = actionBtn.getAttribute("data-action");
+    if (action === "undo") this.undo();
+    else if (action === "redo") this.redo();
+    else if (action === "duplicate") this.duplicate();
+    else if (action === "delete") {
+      if (this.selectedIds.size) this.deleteSelection();
+      else this.clear();
+    }
+  }
+  _handlePanelClick(event) {
+    const brushBtn = event.target.closest("[data-brush]");
+    if (brushBtn) {
+      this.setBrush(brushBtn.getAttribute("data-brush"));
+      if (this.tool !== "draw") this.setTool("draw");
+      return;
+    }
+    const gridBtn = event.target.closest("[data-grid]");
+    if (gridBtn) {
+      this.toggleGrid();
+      return;
+    }
+    const swatch = event.target.closest("[data-swatch]");
+    if (swatch) this.setColor(swatch.getAttribute("data-swatch"));
+  }
+  _handlePanelInput(event) {
+    const kind = event.target.getAttribute?.("data-style");
+    if (kind === "color") this.setColor(event.target.value);
+    else if (kind === "size") this.setBrushSize(Number(event.target.value));
+    else if (kind === "opacity") this.setOpacity(Number(event.target.value));
+    else if (kind === "grid") this.setGridSize(Number(event.target.value));
+  }
+  _handlePointerDown(event) {
+    if (this.destroyed || event.button != null && event.button !== 0) return;
+    this.canvasEl.focus();
+    this.stopTextEdit({ commit: true });
+    const world = this._clientToWorld(event.clientX, event.clientY);
+    const shapeTarget = event.target.closest("[data-shape-id]");
+    const handleTarget = event.target.closest("[data-handle]");
+    if (this.tool === "hand") {
+      this.interaction = this._beginPan(event);
+      this._capture(event.pointerId);
+      return;
+    }
+    if (this.tool === "eraser" && !this.readonly) {
+      this.interaction = { kind: "erase", pointerId: event.pointerId, erased: /* @__PURE__ */ new Set() };
+      this._capture(event.pointerId);
+      this._applyErase(world);
+      return;
+    }
+    if (this.tool === "select") {
+      if (handleTarget && this.selectedIds.size) {
+        this.interaction = {
+          kind: "resize",
+          pointerId: event.pointerId,
+          handle: handleTarget.getAttribute("data-handle"),
+          startBounds: boundsOfShapes(this.getSelectedShapes()),
+          originals: this.getSelectedShapes().map((s) => deepClone(s)),
+          start: world,
+          moved: false
+        };
+        this._capture(event.pointerId);
+        return;
+      }
+      if (shapeTarget) {
+        const id = shapeTarget.getAttribute("data-shape-id");
+        if (!this.selectedIds.has(id)) this.select(id, { additive: event.shiftKey });
+        this.interaction = {
+          kind: "move",
+          pointerId: event.pointerId,
+          start: world,
+          originals: this.getSelectedShapes().map((s) => deepClone(s)),
+          moved: false
+        };
+        this._capture(event.pointerId);
+        return;
+      }
+      if (!event.shiftKey) this.deselect();
+      this.interaction = {
+        kind: "marquee",
+        pointerId: event.pointerId,
+        start: world,
+        additive: event.shiftKey
+      };
+      this._capture(event.pointerId);
+      return;
+    }
+    if (this.readonly) return;
+    this.interaction = this._beginCreate(this.tool, world, event);
+    this._capture(event.pointerId);
+  }
+  _beginPan(event) {
+    return {
+      kind: "pan",
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startX: this.documentData.viewport.x,
+      startY: this.documentData.viewport.y
+    };
+  }
+  _beginCreate(tool, world, event) {
+    const pressure = event.pressure || 0.5;
+    if (tool === "draw") {
+      const shape2 = {
+        id: createId("fh"),
+        type: "freehand",
+        brush: this.style.brush,
+        color: this.style.color,
+        size: this.style.size,
+        opacity: this.style.opacity,
+        points: [[round(world.x), round(world.y), pressure]]
+      };
+      this.documentData.shapes.push(shape2);
+      return { kind: "freehand", pointerId: event.pointerId, shapeId: shape2.id };
+    }
+    if (tool === "line") {
+      const shape2 = {
+        id: createId("ln"),
+        type: "line",
+        points: [
+          [round(world.x), round(world.y)],
+          [round(world.x), round(world.y)]
+        ],
+        arrowEnd: true,
+        arrowStart: false,
+        color: this.style.color,
+        strokeWidth: this._shapeStrokeWidth(),
+        opacity: this.style.opacity
+      };
+      this.documentData.shapes.push(shape2);
+      return { kind: "create-line", pointerId: event.pointerId, shapeId: shape2.id };
+    }
+    const type = tool;
+    const shape = {
+      id: createId(type.slice(0, 2)),
+      type,
+      x: round(world.x),
+      y: round(world.y),
+      w: 1,
+      h: 1,
+      rotation: 0,
+      color: this.style.color,
+      strokeWidth: this._shapeStrokeWidth(),
+      opacity: this.style.opacity
+    };
+    if (type === "text" || type === "sticky") shape.text = "";
+    this.documentData.shapes.push(shape);
+    return { kind: "create-box", pointerId: event.pointerId, shapeId: shape.id, start: world };
+  }
+  _applyErase(world) {
+    const it = this.interaction;
+    if (!it || it.kind !== "erase") return;
+    const threshold = ERASER_RADIUS / this.documentData.viewport.scale;
+    let changed = false;
+    for (const shape of this.documentData.shapes) {
+      if (it.erased.has(shape.id)) continue;
+      if (distanceToShape(shape, world.x, world.y) <= threshold) {
+        it.erased.add(shape.id);
+        changed = true;
+      }
+    }
+    if (changed) this.render({ scene: true, overlay: false });
+  }
+  _handlePointerMove(event) {
+    const it = this.interaction;
+    if (!it) return;
+    if (it.kind === "pan") {
+      const vp = this.documentData.viewport;
+      vp.x = it.startX + (event.clientX - it.startClientX);
+      vp.y = it.startY + (event.clientY - it.startClientY);
+      this.render({ scene: false });
+      return;
+    }
+    const world = this._clientToWorld(event.clientX, event.clientY);
+    if (it.kind === "erase") {
+      this._applyErase(world);
+      return;
+    }
+    if (it.kind === "move") {
+      const dx = world.x - it.start.x;
+      const dy = world.y - it.start.y;
+      if (Math.hypot(dx, dy) * this.documentData.viewport.scale > DRAG_THRESHOLD) it.moved = true;
+      for (const orig of it.originals) this._replaceShape(translateShape(orig, dx, dy));
+      const movingIds = new Set(it.originals.map((s) => s.id));
+      const snap = this._computeSnap(boundsOfShapes(this.getSelectedShapes()), movingIds);
+      if (snap.dx || snap.dy)
+        for (const orig of it.originals)
+          this._replaceShape(translateShape(orig, dx + snap.dx, dy + snap.dy));
+      this._renderGuides(snap.guides);
+      this.render({ scene: true, guides: false });
+      return;
+    }
+    if (it.kind === "resize") {
+      const t = this._resizeBounds(
+        it.startBounds,
+        it.handle,
+        world.x - it.start.x,
+        world.y - it.start.y
+      );
+      const sx = it.startBounds.w === 0 ? 1 : t.w / it.startBounds.w;
+      const sy = it.startBounds.h === 0 ? 1 : t.h / it.startBounds.h;
+      for (const orig of it.originals) {
+        const scaled = scaleShape(orig, it.startBounds.x, it.startBounds.y, sx, sy);
+        this._replaceShape(translateShape(scaled, t.x - it.startBounds.x, t.y - it.startBounds.y));
+      }
+      it.moved = true;
+      this.render();
+      return;
+    }
+    if (it.kind === "marquee") {
+      it.current = world;
+      this._renderMarquee(it.start, world);
+      return;
+    }
+    if (it.kind === "freehand") {
+      const shape = this.getShape(it.shapeId);
+      if (shape) {
+        shape.points.push([round(world.x), round(world.y), event.pressure || 0.5]);
+        this.render({ scene: true });
+      }
+      return;
+    }
+    if (it.kind === "create-line") {
+      const shape = this.getShape(it.shapeId);
+      if (shape) {
+        shape.points[1] = [round(world.x), round(world.y)];
+        this.render({ scene: true });
+      }
+      return;
+    }
+    if (it.kind === "create-box") {
+      const shape = this.getShape(it.shapeId);
+      if (shape) {
+        shape.x = round(Math.min(it.start.x, world.x));
+        shape.y = round(Math.min(it.start.y, world.y));
+        shape.w = round(Math.max(1, Math.abs(world.x - it.start.x)));
+        shape.h = round(Math.max(1, Math.abs(world.y - it.start.y)));
+        this.render({ scene: true });
+      }
+    }
+  }
+  _resizeBounds(start, handle, dx, dy) {
+    let { x, y, w, h: h2 } = start;
+    if (handle.includes("e")) w = Math.max(1, start.w + dx);
+    if (handle.includes("s")) h2 = Math.max(1, start.h + dy);
+    if (handle.includes("w")) {
+      w = Math.max(1, start.w - dx);
+      x = start.x + (start.w - w);
+    }
+    if (handle.includes("n")) {
+      h2 = Math.max(1, start.h - dy);
+      y = start.y + (start.h - h2);
+    }
+    return { x, y, w, h: h2 };
+  }
+  _handlePointerUp(event) {
+    const it = this.interaction;
+    if (!it) return;
+    this.interaction = null;
+    if (typeof this.canvasEl.releasePointerCapture === "function" && this.canvasEl.hasPointerCapture?.(event.pointerId)) {
+      try {
+        this.canvasEl.releasePointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    this._renderGuides([]);
+    clearChildren(this.marqueeLayer);
+    if (it.kind === "pan") {
+      this._emitViewportChange("viewport:pan");
+      return;
+    }
+    if (it.kind === "erase") {
+      if (it.erased.size) {
+        const ids = [...it.erased];
+        this.documentData.shapes = this.documentData.shapes.filter((s) => !it.erased.has(s.id));
+        this.render();
+        this._emitChange("shape:erase", { shapeIds: ids });
+      }
+      return;
+    }
+    if (it.kind === "move" && it.moved) {
+      this.render();
+      this._emitChange("shape:move", { shapeIds: [...this.selectedIds] });
+      return;
+    }
+    if (it.kind === "resize" && it.moved) {
+      this.render();
+      this._emitChange("shape:resize", { shapeIds: [...this.selectedIds] });
+      return;
+    }
+    if (it.kind === "marquee") {
+      const box = this._boxFromPoints(it.start, it.current || it.start);
+      this.selectInBounds(box, { additive: it.additive });
+      return;
+    }
+    if (it.kind === "freehand" || it.kind === "create-line" || it.kind === "create-box") {
+      const shape = this.getShape(it.shapeId);
+      if (!shape) return;
+      if (it.kind === "freehand") shape.points = simplifyPoints(shape.points);
+      const b = shapeBounds(shape);
+      if (it.kind !== "freehand" && b.w < 2 && b.h < 2 && shape.type !== "text" && shape.type !== "sticky") {
+        this.documentData.shapes = this.documentData.shapes.filter((s) => s.id !== it.shapeId);
+        this.render();
+        return;
+      }
+      if (shape.type === "text" || shape.type === "sticky") {
+        if (b.w < 2 && b.h < 2) {
+          shape.w = shape.type === "sticky" ? 160 : 120;
+          shape.h = shape.type === "sticky" ? 120 : 40;
+        }
+      }
+      if (it.kind !== "freehand") {
+        this.select(shape.id);
+        this.setTool("select");
+      }
+      this.render();
+      this._emitChange("shape:add", { shape: deepClone(shape), shapeId: shape.id });
+      if (shape.type === "text" || shape.type === "sticky") this.startTextEdit(shape.id);
+    }
+  }
+  _boxFromPoints(a, b) {
+    return {
+      x: Math.min(a.x, b.x),
+      y: Math.min(a.y, b.y),
+      w: Math.abs(a.x - b.x),
+      h: Math.abs(a.y - b.y)
+    };
+  }
+  _handleWheel(event) {
+    event.preventDefault();
+    const local = this._clientToLocal(event.clientX, event.clientY);
+    const factor = event.deltaY < 0 ? 1.1 : 1 / 1.1;
+    this.scaleAround(factor, local.x, local.y);
+    this.render({ scene: false });
+    this._emitViewportChange("viewport:zoom");
+  }
+  _handleKeyDown(event) {
+    if (this.textEditor) return;
+    const meta = event.metaKey || event.ctrlKey;
+    if (meta && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      if (event.shiftKey) this.redo();
+      else this.undo();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "y") {
+      event.preventDefault();
+      this.redo();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      this.selectAll();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "c") {
+      this.copy();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "v") {
+      this.paste();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "d") {
+      event.preventDefault();
+      this.duplicate();
+      return;
+    }
+    if (this.readonly) return;
+    if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      this.deleteSelection();
+      return;
+    }
+    const nudgeMap = {
+      ArrowLeft: [-1, 0],
+      ArrowRight: [1, 0],
+      ArrowUp: [0, -1],
+      ArrowDown: [0, 1]
+    };
+    if (nudgeMap[event.key] && this.selectedIds.size) {
+      event.preventDefault();
+      const step = event.shiftKey ? 10 : 1;
+      const [dx, dy] = nudgeMap[event.key];
+      this.nudge(dx * step, dy * step);
+    }
+  }
+  _handleResize() {
+    if (this.destroyed) return;
+    this.render({ scene: false });
+  }
+  // ── Rendering ────────────────────────────────────────────────────────────
+  render(flags = {}) {
+    if (this.destroyed) return;
+    const { scene = true, overlay = true } = flags;
+    const vp = this.documentData.viewport;
+    this.world.setAttribute("transform", `matrix(${vp.scale} 0 0 ${vp.scale} ${vp.x} ${vp.y})`);
+    if (scene) {
+      clearChildren(this.shapesLayer);
+      const erasing = this.interaction && this.interaction.kind === "erase" ? this.interaction.erased : null;
+      for (const shape of this.documentData.shapes) {
+        if (erasing && erasing.has(shape.id)) continue;
+        const el = this._renderShapeEl(shape, {});
+        if (el) this.shapesLayer.appendChild(el);
+      }
+    }
+    if (overlay) this._renderOverlay();
+  }
+  // Colors are applied via inline `style` (which wins over the CSS class rules
+  // and serializes self-contained), so a picked color always renders.
+  _renderShapeEl(shape, { standalone = false, colors = null }) {
+    let el = null;
+    const setOpacity = (node) => {
+      if (shape.opacity != null && shape.opacity !== 1)
+        node.setAttribute("opacity", String(shape.opacity));
+    };
+    if (shape.type === "freehand") {
+      el = createSvgEl("path", { d: brushStrokePath(shape) });
+      el.classList.add("vd-draw-ink");
+      el.style.stroke = "none";
+      const fill = shape.color || (standalone && colors ? colors.ink : "");
+      if (fill) el.style.fill = fill;
+      if (shape.opacity != null && shape.opacity !== 1)
+        el.style.fillOpacity = String(shape.opacity);
+      const preset = BRUSH_PRESETS[shape.brush];
+      if (preset && preset.blend && preset.blend !== "normal") el.style.mixBlendMode = preset.blend;
+    } else if (shape.type === "rectangle") {
+      el = createSvgEl("rect", { x: shape.x, y: shape.y, width: shape.w, height: shape.h, rx: 4 });
+      el.classList.add("vd-draw-shape");
+      this._applyShapeStroke(el, shape, standalone, colors);
+      setOpacity(el);
+    } else if (shape.type === "ellipse") {
+      el = createSvgEl("ellipse", {
+        cx: shape.x + shape.w / 2,
+        cy: shape.y + shape.h / 2,
+        rx: shape.w / 2,
+        ry: shape.h / 2
+      });
+      el.classList.add("vd-draw-shape");
+      this._applyShapeStroke(el, shape, standalone, colors);
+      setOpacity(el);
+    } else if (shape.type === "line") {
+      el = createSvgEl("path", { d: pointsToPath(shape.points) });
+      el.classList.add("vd-draw-shape");
+      this._applyShapeStroke(el, shape, standalone, colors);
+      setOpacity(el);
+      if (shape.arrowEnd) el.setAttribute("marker-end", `url(#${this._svgId("arrow")})`);
+      if (shape.arrowStart) el.setAttribute("marker-start", `url(#${this._svgId("arrow")})`);
+    } else if (shape.type === "text" || shape.type === "sticky") {
+      el = createSvgEl("g");
+      setOpacity(el);
+      if (shape.type === "sticky") {
+        const bg = createSvgEl("rect", {
+          x: shape.x,
+          y: shape.y,
+          width: shape.w,
+          height: shape.h,
+          rx: 4
+        });
+        bg.classList.add("vd-draw-sticky");
+        if (shape.fill) bg.style.fill = shape.fill;
+        else if (standalone && colors) bg.style.fill = colors.sticky;
+        el.appendChild(bg);
+      }
+      const text = createSvgEl("text", { x: shape.x + 6, y: shape.y + 18 });
+      text.classList.add("vd-draw-text");
+      const fill = shape.color || (standalone && colors ? colors.text : "");
+      if (fill) text.style.fill = fill;
+      text.textContent = shape.text || "";
+      el.appendChild(text);
+    }
+    if (el && !standalone) el.setAttribute("data-shape-id", shape.id);
+    return el;
+  }
+  _applyShapeStroke(el, shape, standalone, colors) {
+    const stroke = shape.color || (standalone && colors ? colors.shapeStroke : "");
+    if (stroke) el.style.stroke = stroke;
+    if (shape.strokeWidth != null) el.setAttribute("stroke-width", String(shape.strokeWidth));
+    el.style.fill = shape.fill ? shape.fill : "none";
+  }
+  _renderOverlay() {
+    clearChildren(this.overlayLayer);
+    const selected = this.getSelectedShapes();
+    if (!selected.length || this.readonly) return;
+    const bounds = boundsOfShapes(selected);
+    if (!bounds) return;
+    const box = createSvgEl("rect", {
+      class: "vd-draw-selection-box",
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.w,
+      height: bounds.h,
+      fill: "none"
+    });
+    box.setAttribute("vector-effect", "non-scaling-stroke");
+    this.overlayLayer.appendChild(box);
+    const scale = this.documentData.viewport.scale || 1;
+    const r = HANDLE_SIZE / scale / 2;
+    for (const handle of resizeHandlePositions(bounds)) {
+      const dot = createSvgEl("rect", {
+        class: "vd-draw-handle",
+        x: handle.x - r,
+        y: handle.y - r,
+        width: r * 2,
+        height: r * 2,
+        "data-handle": handle.key
+      });
+      dot.setAttribute("vector-effect", "non-scaling-stroke");
+      this.overlayLayer.appendChild(dot);
+    }
+  }
+  _renderMarquee(a, b) {
+    clearChildren(this.marqueeLayer);
+    const box = this._boxFromPoints(a, b);
+    const rect = createSvgEl("rect", {
+      class: "vd-draw-marquee-rect",
+      x: box.x,
+      y: box.y,
+      width: box.w,
+      height: box.h
+    });
+    rect.setAttribute("vector-effect", "non-scaling-stroke");
+    this.marqueeLayer.appendChild(rect);
+  }
+  _renderGuides(guides) {
+    clearChildren(this.guidesLayer);
+    for (const g of guides || []) {
+      const line = createSvgEl("line", {
+        class: "vd-draw-guide",
+        x1: g.x1,
+        y1: g.y1,
+        x2: g.x2,
+        y2: g.y2
+      });
+      line.setAttribute("vector-effect", "non-scaling-stroke");
+      this.guidesLayer.appendChild(line);
+    }
+  }
+  // ── Ready + lifecycle ────────────────────────────────────────────────────
+  _scheduleReady() {
+    const fire = () => {
+      if (this.destroyed || this._ready) return;
+      this._ready = true;
+      if (this.autoFit) this.fitView();
+      this.emit("ready", this);
+    };
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(fire);
+    else setTimeout(fire, 0);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.stopTextEdit({ commit: false });
+    this._unbindEvents();
+    this.listeners.clear();
+    if (this.element) this.element.replaceChildren();
+  }
+};
+
+// src/draw/vue.js
+var FORWARDED_EVENTS = ["change", "select", "viewport", "ready"];
+var VdDraw2 = (0, import_vue.defineComponent)({
+  name: "VdDraw",
+  props: {
+    /** Drawing document — `{ shapes, viewport }`. */
+    data: { type: Object, default: () => ({}) },
+    /** Render as a non-editable viewer (no toolbar, no editing). */
+    readonly: { type: Boolean, default: false },
+    /** Active tool — updated live without recreating the editor. */
+    tool: { type: String, default: "draw" },
+    /** Background grid size in px. */
+    gridSize: { type: Number, default: void 0 },
+    /** Show the background grid — updated live (default true). */
+    showGrid: { type: Boolean, default: true },
+    /** Snap shapes to nearby edges/centres while moving/resizing. */
+    snap: { type: Boolean, default: true },
+    /** Fit the view to content once the editor reports a measurable size. */
+    autoFit: { type: Boolean, default: false },
+    /** Enable the built-in undo/redo history (default true). */
+    history: { type: Boolean, default: true },
+    /** Maximum number of history entries to retain. */
+    historyLimit: { type: Number, default: void 0 }
+  },
+  emits: ["change", "select", "viewport", "ready"],
+  setup(props, { emit, expose }) {
+    const el = (0, import_vue.ref)(null);
+    let instance = null;
+    const create = () => {
+      instance = new VdDraw({
+        element: el.value,
+        data: props.data,
+        readonly: props.readonly,
+        tool: props.tool,
+        gridSize: props.gridSize,
+        showGrid: props.showGrid,
+        snap: props.snap,
+        autoFit: props.autoFit,
+        history: props.history,
+        historyLimit: props.historyLimit
+      });
+      FORWARDED_EVENTS.forEach((name) => {
+        instance.on(name, (payload) => emit(name, payload));
+      });
+    };
+    (0, import_vue.onMounted)(() => {
+      if (typeof window === "undefined" || !el.value) return;
+      create();
+    });
+    (0, import_vue.watch)(
+      () => props.data,
+      (next) => {
+        if (instance && typeof instance.load === "function") instance.load(next);
+      },
+      { deep: true }
+    );
+    (0, import_vue.watch)(
+      () => props.tool,
+      (next) => instance?.setTool(next)
+    );
+    (0, import_vue.watch)(
+      () => props.showGrid,
+      (next) => instance?.setGridVisible(next)
+    );
+    (0, import_vue.watch)(
+      () => [
+        props.readonly,
+        props.gridSize,
+        props.snap,
+        props.autoFit,
+        props.history,
+        props.historyLimit
+      ],
+      () => {
+        if (!instance) return;
+        instance.destroy();
+        create();
+      }
+    );
+    (0, import_vue.onBeforeUnmount)(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    expose({
+      getInstance: () => instance,
+      setTool: (tool) => instance?.setTool(tool),
+      undo: () => instance?.undo(),
+      redo: () => instance?.redo(),
+      canUndo: () => Boolean(instance?.canUndo()),
+      canRedo: () => Boolean(instance?.canRedo()),
+      toSVG: () => instance?.toSVG(),
+      toPNG: (options) => instance?.toPNG(options)
+    });
+    return () => (0, import_vue.h)("div", { ref: el, class: "vd-draw" });
+  }
+});
+//# sourceMappingURL=index.cjs.map