f1ow 1.0.0 → 1.1.0

package/dist/f1ow-collaboration.js

@@ -0,0 +1,3804 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import { create } from "zustand";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Group, Rect, Line, Text } from "react-konva";
+let _doc = null;
+let _provider = null;
+let _config = null;
+let _statusListeners = /* @__PURE__ */ new Set();
+function createCollaborationProvider(config) {
+  if (_provider) {
+    destroyCollaborationProvider();
+  }
+  _config = config;
+  _doc = new Y.Doc();
+  _provider = new WebsocketProvider(
+    config.serverUrl,
+    config.roomName,
+    _doc,
+    {
+      connect: true,
+      params: config.authToken ? { token: config.authToken } : void 0
+    }
+  );
+  _provider.awareness.setLocalState({
+    user: config.user,
+    cursor: null,
+    selectedIds: []
+  });
+  _provider.on("status", (event) => {
+    const status = event.status;
+    for (const listener of _statusListeners) {
+      listener(status);
+    }
+  });
+  return { doc: _doc, provider: _provider };
+}
+function destroyCollaborationProvider() {
+  if (_provider) {
+    _provider.awareness.setLocalState(null);
+    _provider.disconnect();
+    _provider.destroy();
+    _provider = null;
+  }
+  if (_doc) {
+    _doc.destroy();
+    _doc = null;
+  }
+  _config = null;
+}
+function getYDoc() {
+  return _doc;
+}
+function getYProvider() {
+  return _provider;
+}
+function getYElements() {
+  return _doc == null ? void 0 : _doc.getMap("elements");
+}
+function getCollaborationConfig() {
+  return _config;
+}
+function isCollaborationActive() {
+  return _provider !== null && _provider.wsconnected;
+}
+function onStatusChange(listener) {
+  _statusListeners.add(listener);
+  return () => {
+    _statusListeners.delete(listener);
+  };
+}
+function updateAwareness(update) {
+  if (!_provider) return;
+  const current = _provider.awareness.getLocalState();
+  _provider.awareness.setLocalState({
+    ...current,
+    ...update
+  });
+}
+function getRemoteAwareness() {
+  if (!_provider) return /* @__PURE__ */ new Map();
+  const all = _provider.awareness.getStates();
+  const localId = _provider.awareness.clientID;
+  const remote = /* @__PURE__ */ new Map();
+  for (const [clientId, state] of all) {
+    if (clientId !== localId && state && state.user) {
+      remote.set(clientId, state);
+    }
+  }
+  return remote;
+}
+const yjsProvider = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createCollaborationProvider,
+  destroyCollaborationProvider,
+  getCollaborationConfig,
+  getRemoteAwareness,
+  getYDoc,
+  getYElements,
+  getYProvider,
+  isCollaborationActive,
+  onStatusChange,
+  updateAwareness
+}, Symbol.toStringTag, { value: "Module" }));
+const DEFAULT_STYLE = {
+  strokeColor: "#1e1e1e",
+  fillColor: "transparent",
+  strokeWidth: 2,
+  opacity: 1,
+  strokeStyle: "solid",
+  roughness: 0,
+  fontSize: 20,
+  fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+  freehandStyle: "standard"
+};
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 5;
+const SHAPE_MARGIN = 20;
+const EXIT_FACE_MARGIN = 25;
+const MIN_STUB_LENGTH = 36;
+const BOUNDS_MARGIN = 40;
+const BEND_PENALTY = 1e4;
+const AMBIGUOUS_AXIS_DELTA = 24;
+const AMBIGUOUS_RATIO = 1.5;
+function dirVec(dir) {
+  switch (dir) {
+    case "up":
+      return { x: 0, y: -1 };
+    case "down":
+      return { x: 0, y: 1 };
+    case "left":
+      return { x: -1, y: 0 };
+    case "right":
+      return { x: 1, y: 0 };
+  }
+}
+function isVerticalDir(dir) {
+  return dir === "up" || dir === "down";
+}
+function horizontalDir(dx) {
+  return dx >= 0 ? "right" : "left";
+}
+function verticalDir(dy) {
+  return dy >= 0 ? "down" : "up";
+}
+function alternateAxisDir(primary, dx, dy) {
+  return isVerticalDir(primary) ? horizontalDir(dx) : verticalDir(dy);
+}
+function getElbowDirectionPreference(shape, targetPoint, targetShape, targetBinding) {
+  const cx = shape.x + shape.width / 2;
+  const cy = shape.y + shape.height / 2;
+  const dx = targetPoint.x - cx;
+  const dy = targetPoint.y - cy;
+  const hDir = horizontalDir(dx);
+  const vDir = verticalDir(dy);
+  if (targetShape) {
+    const shapeRight = shape.x + shape.width;
+    const shapeBottom = shape.y + shape.height;
+    const targetRight = targetShape.x + targetShape.width;
+    const targetBottom = targetShape.y + targetShape.height;
+    const gapX = shapeRight < targetShape.x ? targetShape.x - shapeRight : targetRight < shape.x ? shape.x - targetRight : 0;
+    const gapY = shapeBottom < targetShape.y ? targetShape.y - shapeBottom : targetBottom < shape.y ? shape.y - targetBottom : 0;
+    const targetBindingHasAxis = Boolean(
+      (targetBinding == null ? void 0 : targetBinding.isPrecise) && !(targetBinding.fixedPoint[0] === 0.5 && targetBinding.fixedPoint[1] === 0.5)
+    );
+    if (targetBindingHasAxis && gapX > 0 && gapY > 0) {
+      const targetDir = directionFromFixedPoint(targetBinding.fixedPoint);
+      return targetDir === "left" || targetDir === "right" ? { primary: hDir } : { primary: vDir };
+    }
+    if (gapX > 0 && gapY === 0) {
+      return { primary: hDir };
+    }
+    if (gapY > 0 && gapX === 0) {
+      return { primary: vDir };
+    }
+    if (gapX > 0 && gapY > 0) {
+      const primary = gapX < gapY ? hDir : vDir;
+      const alternate = alternateAxisDir(primary, dx, dy);
+      return Math.abs(gapX - gapY) <= AMBIGUOUS_AXIS_DELTA ? { primary, alternate } : { primary };
+    }
+    const overlapX = Math.max(0, Math.min(shapeRight, targetRight) - Math.max(shape.x, targetShape.x));
+    const overlapY = Math.max(0, Math.min(shapeBottom, targetBottom) - Math.max(shape.y, targetShape.y));
+    if (overlapX > overlapY) {
+      return Math.abs(overlapX - overlapY) <= AMBIGUOUS_AXIS_DELTA ? { primary: vDir, alternate: hDir } : { primary: vDir };
+    }
+    if (overlapY > overlapX) {
+      return Math.abs(overlapY - overlapX) <= AMBIGUOUS_AXIS_DELTA ? { primary: hDir, alternate: vDir } : { primary: hDir };
+    }
+  }
+  const hw = (shape.width || 1) / 2;
+  const hh = (shape.height || 1) / 2;
+  const normDx = Math.abs(dx) / hw;
+  const normDy = Math.abs(dy) / hh;
+  if (normDx > normDy * 3) {
+    return { primary: hDir };
+  }
+  if (normDy > normDx * 3) {
+    return { primary: vDir };
+  }
+  const dominant = Math.max(normDx, normDy) / Math.max(1e-6, Math.min(normDx, normDy));
+  return dominant <= AMBIGUOUS_RATIO ? { primary: vDir, alternate: hDir } : { primary: vDir };
+}
+function directionFromFixedPoint(fp) {
+  const [fx, fy] = fp;
+  const dTop = fy;
+  const dBottom = 1 - fy;
+  const dLeft = fx;
+  const dRight = 1 - fx;
+  const min = Math.min(dTop, dBottom, dLeft, dRight);
+  if (min === dTop) return "up";
+  if (min === dBottom) return "down";
+  if (min === dLeft) return "left";
+  return "right";
+}
+function directionFromPoints(from, to) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx >= 0 ? "right" : "left";
+  }
+  return dy >= 0 ? "down" : "up";
+}
+function directionFromShapeToPoint(shape, targetPoint) {
+  const cx = shape.x + shape.width / 2;
+  const cy = shape.y + shape.height / 2;
+  const dx = targetPoint.x - cx;
+  const dy = targetPoint.y - cy;
+  const hw = shape.width / 2 || 1;
+  const hh = shape.height / 2 || 1;
+  const normDx = dx / hw;
+  const normDy = dy / hh;
+  if (Math.abs(normDx) >= Math.abs(normDy)) {
+    return dx >= 0 ? "right" : "left";
+  }
+  return dy >= 0 ? "down" : "up";
+}
+function rectRight(r) {
+  return r.left + r.width;
+}
+function rectBottom(r) {
+  return r.top + r.height;
+}
+function rectContains(r, p) {
+  return p.x > r.left && p.x < rectRight(r) && p.y > r.top && p.y < rectBottom(r);
+}
+function rectInflate(r, h, v) {
+  return {
+    left: r.left - h,
+    top: r.top - v,
+    width: r.width + h * 2,
+    height: r.height + v * 2
+  };
+}
+function inflateExcludingFace(r, margin, face) {
+  const exitM = Math.min(margin, EXIT_FACE_MARGIN);
+  const l = face === "left" ? exitM : margin;
+  const ri = face === "right" ? exitM : margin;
+  const t = face === "up" ? exitM : margin;
+  const b = face === "down" ? exitM : margin;
+  return {
+    left: r.left - l,
+    top: r.top - t,
+    width: r.width + l + ri,
+    height: r.height + t + b
+  };
+}
+function inflateExcludingFaces(r, margin, faces) {
+  const faceSet = new Set(faces);
+  const exitM = Math.min(margin, EXIT_FACE_MARGIN);
+  const l = faceSet.has("left") ? exitM : margin;
+  const ri = faceSet.has("right") ? exitM : margin;
+  const t = faceSet.has("up") ? exitM : margin;
+  const b = faceSet.has("down") ? exitM : margin;
+  return {
+    left: r.left - l,
+    top: r.top - t,
+    width: r.width + l + ri,
+    height: r.height + t + b
+  };
+}
+function rectUnion(a, b) {
+  const left = Math.min(a.left, b.left);
+  const top = Math.min(a.top, b.top);
+  const right = Math.max(rectRight(a), rectRight(b));
+  const bottom = Math.max(rectBottom(a), rectBottom(b));
+  return { left, top, width: right - left, height: bottom - top };
+}
+function bboxToRect(b) {
+  return { left: b.x, top: b.y, width: b.width, height: b.height };
+}
+function getShapeBBox(el) {
+  const rotation = el.rotation || 0;
+  if (rotation === 0) {
+    return { x: el.x, y: el.y, width: el.width, height: el.height };
+  }
+  const cx = el.x + el.width / 2;
+  const cy = el.y + el.height / 2;
+  const hw = el.width / 2;
+  const hh = el.height / 2;
+  const rad = rotation * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const corners = [
+    { x: -hw, y: -hh },
+    { x: hw, y: -hh },
+    { x: hw, y: hh },
+    { x: -hw, y: hh }
+  ].map((c) => ({
+    x: cx + c.x * cos - c.y * sin,
+    y: cy + c.x * sin + c.y * cos
+  }));
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const c of corners) {
+    if (c.x < minX) minX = c.x;
+    if (c.y < minY) minY = c.y;
+    if (c.x > maxX) maxX = c.x;
+    if (c.y > maxY) maxY = c.y;
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function oppositeDir(d) {
+  switch (d) {
+    case "left":
+      return "right";
+    case "right":
+      return "left";
+    case "up":
+      return "down";
+    case "down":
+      return "up";
+  }
+}
+function getMoveDir(from, to) {
+  if (to.x < from.x) return "left";
+  if (to.x > from.x) return "right";
+  if (to.y < from.y) return "up";
+  if (to.y > from.y) return "down";
+  return null;
+}
+function isBend(a, b) {
+  if (a === null || b === null) return false;
+  const axisA = a === "left" || a === "right" ? "h" : "v";
+  const axisB = b === "left" || b === "right" ? "h" : "v";
+  return axisA !== axisB;
+}
+class PathNode {
+  constructor(pt) {
+    __publicField(this, "adjacent", /* @__PURE__ */ new Map());
+    this.pt = pt;
+  }
+}
+class PathGraph {
+  constructor() {
+    __publicField(this, "idx", {});
+  }
+  add(p) {
+    const xs = String(p.x), ys = String(p.y);
+    if (!(xs in this.idx)) this.idx[xs] = {};
+    if (!(ys in this.idx[xs])) this.idx[xs][ys] = new PathNode(p);
+  }
+  get(p) {
+    var _a;
+    const xs = String(p.x), ys = String(p.y);
+    return ((_a = this.idx[xs]) == null ? void 0 : _a[ys]) ?? null;
+  }
+  has(p) {
+    return this.get(p) !== null;
+  }
+  /** Create a bidirectional edge between two points */
+  connect(a, b) {
+    const na = this.get(a), nb = this.get(b);
+    if (!na || !nb) return;
+    const d = Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+    na.adjacent.set(nb, d);
+    nb.adjacent.set(na, d);
+  }
+}
+class MinHeap {
+  constructor() {
+    __publicField(this, "data", []);
+  }
+  get size() {
+    return this.data.length;
+  }
+  push(item, priority) {
+    this.data.push({ item, priority });
+    this.bubbleUp(this.data.length - 1);
+  }
+  pop() {
+    if (this.data.length === 0) return void 0;
+    const top = this.data[0];
+    const end = this.data.pop();
+    if (this.data.length > 0) {
+      this.data[0] = end;
+      this.sinkDown(0);
+    }
+    return top.item;
+  }
+  bubbleUp(i) {
+    while (i > 0) {
+      const parent = i - 1 >> 1;
+      if (this.data[parent].priority <= this.data[i].priority) break;
+      [this.data[parent], this.data[i]] = [this.data[i], this.data[parent]];
+      i = parent;
+    }
+  }
+  sinkDown(i) {
+    const len = this.data.length;
+    while (true) {
+      let s = i;
+      const l = 2 * i + 1, r = 2 * i + 2;
+      if (l < len && this.data[l].priority < this.data[s].priority) s = l;
+      if (r < len && this.data[r].priority < this.data[s].priority) s = r;
+      if (s === i) break;
+      [this.data[s], this.data[i]] = [this.data[i], this.data[s]];
+      i = s;
+    }
+  }
+}
+function astarSearch(graph, origin, destination) {
+  const srcNode = graph.get(origin);
+  const destNode = graph.get(destination);
+  if (!srcNode || !destNode) return null;
+  const h = (p) => Math.abs(p.x - destination.x) + Math.abs(p.y - destination.y);
+  const skey = (node, dir) => `${node.pt.x},${node.pt.y},${dir ?? "n"}`;
+  const bestG = /* @__PURE__ */ new Map();
+  const parentOf = /* @__PURE__ */ new Map();
+  const open = new MinHeap();
+  const startState = { node: srcNode, dir: null, g: 0 };
+  const startKey = skey(srcNode, null);
+  bestG.set(startKey, 0);
+  parentOf.set(startKey, null);
+  open.push(startState, h(srcNode.pt));
+  while (open.size > 0) {
+    const cur = open.pop();
+    const curKey = skey(cur.node, cur.dir);
+    if (cur.g > (bestG.get(curKey) ?? Infinity)) continue;
+    if (cur.node === destNode) {
+      const path = [];
+      let state = cur;
+      while (state) {
+        path.push(state.node.pt);
+        const pk = skey(state.node, state.dir);
+        state = parentOf.get(pk);
+        if (state === null || state === void 0) break;
+      }
+      if (path[path.length - 1] !== srcNode.pt) {
+        path.push(srcNode.pt);
+      }
+      path.reverse();
+      return path;
+    }
+    for (const [adj, weight] of cur.node.adjacent) {
+      const dir = getMoveDir(cur.node.pt, adj.pt);
+      if (dir === null) continue;
+      const isBackward = cur.dir !== null && dir === oppositeDir(cur.dir);
+      const turning = isBend(cur.dir, dir);
+      const penalty = isBackward ? BEND_PENALTY * 3 : turning ? BEND_PENALTY : 0;
+      const newG = cur.g + weight + penalty;
+      const adjKey = skey(adj, dir);
+      if (newG < (bestG.get(adjKey) ?? Infinity)) {
+        bestG.set(adjKey, newG);
+        parentOf.set(adjKey, cur);
+        open.push(
+          { node: adj, dir, g: newG },
+          newG + h(adj.pt)
+        );
+      }
+    }
+  }
+  return null;
+}
+function deduplicatePoints(points) {
+  const map = /* @__PURE__ */ new Map();
+  const result = [];
+  for (const p of points) {
+    let ys = map.get(p.x);
+    if (!ys) {
+      ys = /* @__PURE__ */ new Set();
+      map.set(p.x, ys);
+    }
+    if (!ys.has(p.y)) {
+      ys.add(p.y);
+      result.push(p);
+    }
+  }
+  return result;
+}
+function generateGridSpots(verticals, horizontals, bounds, obstacles) {
+  const bL = bounds.left, bR = rectRight(bounds), bT = bounds.top, bB = rectBottom(bounds);
+  const allXs = [.../* @__PURE__ */ new Set([bL, ...verticals.filter((v) => v >= bL && v <= bR), bR])].sort((a, b) => a - b);
+  const allYs = [.../* @__PURE__ */ new Set([bT, ...horizontals.filter((h) => h >= bT && h <= bB), bB])].sort((a, b) => a - b);
+  const insideObstacle = (p) => obstacles.some((o) => rectContains(o, p));
+  const points = [];
+  for (const y of allYs) {
+    for (const x of allXs) {
+      const p = { x, y };
+      if (!insideObstacle(p)) {
+        points.push(p);
+      }
+    }
+  }
+  return points;
+}
+function segmentCrossesObstacle(a, b, obstacles) {
+  if (a.y === b.y) {
+    const y = a.y;
+    const x1 = Math.min(a.x, b.x);
+    const x2 = Math.max(a.x, b.x);
+    for (const obs of obstacles) {
+      if (obs.top < y && y < rectBottom(obs) && obs.left < x2 && rectRight(obs) > x1) {
+        return true;
+      }
+    }
+  } else if (a.x === b.x) {
+    const x = a.x;
+    const y1 = Math.min(a.y, b.y);
+    const y2 = Math.max(a.y, b.y);
+    for (const obs of obstacles) {
+      if (obs.left < x && x < rectRight(obs) && obs.top < y2 && rectBottom(obs) > y1) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function buildGraph(spots, obstacles) {
+  const graph = new PathGraph();
+  const xSet = /* @__PURE__ */ new Set();
+  const ySet = /* @__PURE__ */ new Set();
+  for (const p of spots) {
+    graph.add(p);
+    xSet.add(p.x);
+    ySet.add(p.y);
+  }
+  const hotXs = [...xSet].sort((a, b) => a - b);
+  const hotYs = [...ySet].sort((a, b) => a - b);
+  for (let i = 0; i < hotYs.length; i++) {
+    for (let j = 0; j < hotXs.length; j++) {
+      const cur = { x: hotXs[j], y: hotYs[i] };
+      if (!graph.has(cur)) continue;
+      for (let k = j - 1; k >= 0; k--) {
+        const left = { x: hotXs[k], y: hotYs[i] };
+        if (graph.has(left)) {
+          if (!segmentCrossesObstacle(left, cur, obstacles)) {
+            graph.connect(left, cur);
+          }
+          break;
+        }
+      }
+      for (let k = i - 1; k >= 0; k--) {
+        const up = { x: hotXs[j], y: hotYs[k] };
+        if (graph.has(up)) {
+          if (!segmentCrossesObstacle(up, cur, obstacles)) {
+            graph.connect(up, cur);
+          }
+          break;
+        }
+      }
+    }
+  }
+  return graph;
+}
+function simplifyPointPath(points) {
+  if (points.length <= 2) return points;
+  const result = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1], cur = points[i], next = points[i + 1];
+    const collinearX = prev.x === cur.x && cur.x === next.x;
+    const collinearY = prev.y === cur.y && cur.y === next.y;
+    if (collinearX || collinearY) continue;
+    if (prev.x === cur.x && prev.y === cur.y) continue;
+    result.push(cur);
+  }
+  result.push(points[points.length - 1]);
+  return result;
+}
+function countBends(path) {
+  if (path.length <= 2) return 0;
+  let bends = 0;
+  for (let i = 1; i < path.length - 1; i++) {
+    const prev = path[i - 1], cur = path[i], next = path[i + 1];
+    const sameX = prev.x === cur.x && cur.x === next.x;
+    const sameY = prev.y === cur.y && cur.y === next.y;
+    if (!sameX && !sameY) bends++;
+  }
+  return bends;
+}
+function totalPathLength(path) {
+  let len = 0;
+  for (let i = 1; i < path.length; i++) {
+    len += Math.abs(path[i].x - path[i - 1].x) + Math.abs(path[i].y - path[i - 1].y);
+  }
+  return len;
+}
+function pickBestRoute(candidates) {
+  let best = candidates[0];
+  let bestBends = countBends(best);
+  let bestLen = totalPathLength(best);
+  for (let i = 1; i < candidates.length; i++) {
+    const bends = countBends(candidates[i]);
+    const len = totalPathLength(candidates[i]);
+    if (bends < bestBends || bends === bestBends && len < bestLen) {
+      best = candidates[i];
+      bestBends = bends;
+      bestLen = len;
+    }
+  }
+  return best;
+}
+function segmentLength(a, b) {
+  return Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+}
+function interiorShortSegmentPenalty(path) {
+  if (path.length <= 3) return 0;
+  const threshold = MIN_STUB_LENGTH * 0.75;
+  let penalty = 0;
+  for (let i = 1; i < path.length - 2; i++) {
+    const len = segmentLength(path[i], path[i + 1]);
+    if (len < threshold) {
+      penalty += threshold - len;
+    }
+  }
+  return penalty;
+}
+function segmentRectClearance(a, b, rect) {
+  if (a.x === b.x) {
+    const x = a.x;
+    const minY = Math.min(a.y, b.y);
+    const maxY = Math.max(a.y, b.y);
+    const dx2 = x < rect.left ? rect.left - x : x > rectRight(rect) ? x - rectRight(rect) : 0;
+    const dy2 = maxY < rect.top ? rect.top - maxY : minY > rectBottom(rect) ? minY - rectBottom(rect) : 0;
+    return Math.hypot(dx2, dy2);
+  }
+  const y = a.y;
+  const minX = Math.min(a.x, b.x);
+  const maxX = Math.max(a.x, b.x);
+  const dy = y < rect.top ? rect.top - y : y > rectBottom(rect) ? y - rectBottom(rect) : 0;
+  const dx = maxX < rect.left ? rect.left - maxX : minX > rectRight(rect) ? minX - rectRight(rect) : 0;
+  return Math.hypot(dx, dy);
+}
+function routeInteriorClearance(path, obstacles) {
+  if (path.length <= 3 || obstacles.length === 0) return Number.POSITIVE_INFINITY;
+  const rects = obstacles.map(bboxToRect);
+  let best = Number.POSITIVE_INFINITY;
+  for (let i = 1; i < path.length - 2; i++) {
+    for (const rect of rects) {
+      best = Math.min(best, segmentRectClearance(path[i], path[i + 1], rect));
+    }
+  }
+  return best;
+}
+function buildDirectionPairCandidates(startPref, endPref) {
+  const startDirs = startPref.alternate ? [startPref.primary, startPref.alternate] : [startPref.primary];
+  const endDirs = endPref.alternate ? [endPref.primary, endPref.alternate] : [endPref.primary];
+  const unique = /* @__PURE__ */ new Map();
+  for (let i = 0; i < startDirs.length; i++) {
+    for (let j = 0; j < endDirs.length; j++) {
+      const candidate = {
+        startDir: startDirs[i],
+        endDir: endDirs[j],
+        preferencePenalty: i + j
+      };
+      const key = `${candidate.startDir}|${candidate.endDir}`;
+      const existing = unique.get(key);
+      if (!existing || candidate.preferencePenalty < existing.preferencePenalty) {
+        unique.set(key, candidate);
+      }
+    }
+  }
+  return [...unique.values()].sort((a, b) => a.preferencePenalty - b.preferencePenalty);
+}
+function isBetterScoredElbowRoute(candidate, current) {
+  if (candidate.bends !== current.bends) {
+    return candidate.bends < current.bends;
+  }
+  if (Math.abs(candidate.shortSegmentPenalty - current.shortSegmentPenalty) > 0.5) {
+    return candidate.shortSegmentPenalty < current.shortSegmentPenalty;
+  }
+  if (Math.abs(candidate.clearance - current.clearance) > 1) {
+    return candidate.clearance > current.clearance;
+  }
+  if (Math.abs(candidate.length - current.length) > 0.5) {
+    return candidate.length < current.length;
+  }
+  return candidate.preferencePenalty < current.preferencePenalty;
+}
+function selectElbowDirectionPair(args) {
+  const {
+    startWorld,
+    endWorld,
+    startBinding,
+    endBinding,
+    startShape,
+    endShape,
+    intermediateObstacles = [],
+    minStubLength
+  } = args;
+  const isCenterBinding = (binding) => !binding.isPrecise || binding.fixedPoint[0] === 0.5 && binding.fixedPoint[1] === 0.5;
+  const startPref = startBinding && isCenterBinding(startBinding) ? getElbowDirectionPreference(startShape ?? { x: startWorld.x, y: startWorld.y, width: 1, height: 1 }, endWorld, endShape, endBinding) : { primary: startBinding ? directionFromFixedPoint(startBinding.fixedPoint) : directionFromPoints(startWorld, endWorld) };
+  const endPref = endBinding && isCenterBinding(endBinding) ? getElbowDirectionPreference(endShape ?? { x: endWorld.x, y: endWorld.y, width: 1, height: 1 }, startWorld, startShape, startBinding) : { primary: endBinding ? directionFromFixedPoint(endBinding.fixedPoint) : directionFromPoints(endWorld, startWorld) };
+  const candidates = buildDirectionPairCandidates(startPref, endPref);
+  if (candidates.length === 1) {
+    return { startDir: candidates[0].startDir, endDir: candidates[0].endDir };
+  }
+  const clearanceObstacles = [
+    ...startShape ? [startShape] : [],
+    ...endShape ? [endShape] : [],
+    ...intermediateObstacles
+  ];
+  let best = null;
+  for (const candidate of candidates) {
+    const path = computeElbowRoute(
+      startWorld,
+      endWorld,
+      candidate.startDir,
+      candidate.endDir,
+      startShape,
+      endShape,
+      minStubLength,
+      intermediateObstacles
+    );
+    const scored = {
+      ...candidate,
+      path,
+      bends: countBends(path),
+      length: totalPathLength(path),
+      shortSegmentPenalty: interiorShortSegmentPenalty(path),
+      clearance: routeInteriorClearance(path, clearanceObstacles)
+    };
+    if (!best || isBetterScoredElbowRoute(scored, best)) {
+      best = scored;
+    }
+  }
+  return best ? { startDir: best.startDir, endDir: best.endDir } : { startDir: startPref.primary, endDir: endPref.primary };
+}
+function findRouteWithObstacles(start, end, startDir, endDir, obstacles, margin) {
+  let bounds = {
+    left: Math.min(start.x, end.x),
+    top: Math.min(start.y, end.y),
+    width: Math.abs(end.x - start.x) || 1,
+    height: Math.abs(end.y - start.y) || 1
+  };
+  for (const obs of obstacles) {
+    bounds = rectUnion(bounds, obs);
+  }
+  bounds = rectInflate(bounds, BOUNDS_MARGIN, BOUNDS_MARGIN);
+  const verticals = [];
+  const horizontals = [];
+  for (const obs of obstacles) {
+    verticals.push(obs.left, rectRight(obs));
+    horizontals.push(obs.top, rectBottom(obs));
+    verticals.push(obs.left + obs.width / 2);
+    horizontals.push(obs.top + obs.height / 2);
+  }
+  verticals.push(start.x, end.x);
+  horizontals.push(start.y, end.y);
+  const sv = dirVec(startDir);
+  const ev = dirVec(endDir);
+  let origin = {
+    x: start.x + sv.x * margin,
+    y: start.y + sv.y * margin
+  };
+  let destination = {
+    x: end.x + ev.x * margin,
+    y: end.y + ev.y * margin
+  };
+  origin = clearAntennaPoint(origin, startDir, obstacles);
+  destination = clearAntennaPoint(destination, endDir, obstacles);
+  verticals.push(origin.x, destination.x);
+  horizontals.push(origin.y, destination.y);
+  verticals.push((start.x + end.x) / 2);
+  horizontals.push((start.y + end.y) / 2);
+  const gridSpots = generateGridSpots(verticals, horizontals, bounds, obstacles);
+  const allSpots = deduplicatePoints([origin, destination, ...gridSpots]);
+  const graph = buildGraph(allSpots, obstacles);
+  const pathPoints = astarSearch(graph, origin, destination);
+  if (pathPoints) {
+    const fullPath = [start, ...pathPoints, end];
+    return simplifyPointPath(fullPath);
+  }
+  return null;
+}
+function computeElbowRoute(start, end, startDir, endDir, startBBox, endBBox, minStubLength, intermediateObstacles) {
+  if (start.x === end.x && start.y === end.y) {
+    return [start, end];
+  }
+  const shapeA = startBBox ? bboxToRect(startBBox) : { left: start.x, top: start.y, width: 0, height: 0 };
+  const shapeB = endBBox ? bboxToRect(endBBox) : { left: end.x, top: end.y, width: 0, height: 0 };
+  const inflationMargin = SHAPE_MARGIN;
+  const antennaMargin = Math.max(MIN_STUB_LENGTH, minStubLength ?? 0);
+  const intermediateRects = (intermediateObstacles ?? []).map(
+    (bbox) => rectInflate(bboxToRect(bbox), inflationMargin, inflationMargin)
+  );
+  const inflA_std = startBBox ? inflateExcludingFace(shapeA, inflationMargin, startDir) : rectInflate(shapeA, inflationMargin, inflationMargin);
+  const inflB_std = endBBox ? inflateExcludingFace(shapeB, inflationMargin, endDir) : rectInflate(shapeB, inflationMargin, inflationMargin);
+  const facesA = [startDir];
+  const facesB = [endDir];
+  let hasRelaxedConfig = false;
+  if (startBBox) {
+    const faceTowardEnd = directionFromShapeToPoint(startBBox, end);
+    if (faceTowardEnd !== startDir) {
+      facesA.push(faceTowardEnd);
+      hasRelaxedConfig = true;
+    }
+  }
+  if (endBBox) {
+    const faceTowardStart = directionFromShapeToPoint(endBBox, start);
+    if (faceTowardStart !== endDir) {
+      facesB.push(faceTowardStart);
+      hasRelaxedConfig = true;
+    }
+  }
+  const inflA_rlx = startBBox ? inflateExcludingFaces(shapeA, inflationMargin, facesA) : rectInflate(shapeA, inflationMargin, inflationMargin);
+  const inflB_rlx = endBBox ? inflateExcludingFaces(shapeB, inflationMargin, facesB) : rectInflate(shapeB, inflationMargin, inflationMargin);
+  const candidates = [];
+  const route1 = findRouteWithObstacles(
+    start,
+    end,
+    startDir,
+    endDir,
+    [inflA_std, inflB_std, ...intermediateRects],
+    antennaMargin
+  );
+  if (route1) candidates.push(route1);
+  if (hasRelaxedConfig) {
+    const route2 = findRouteWithObstacles(
+      start,
+      end,
+      startDir,
+      endDir,
+      [inflA_rlx, inflB_rlx, ...intermediateRects],
+      antennaMargin
+    );
+    if (route2) candidates.push(route2);
+  }
+  if (candidates.length > 0) {
+    return pickBestRoute(candidates);
+  }
+  if (intermediateRects.length > 0) {
+    const routeFallback = findRouteWithObstacles(
+      start,
+      end,
+      startDir,
+      endDir,
+      [inflA_std, inflB_std],
+      antennaMargin
+    );
+    if (routeFallback) return routeFallback;
+  }
+  if (intermediateRects.length > 0) {
+    const halfMargin = Math.max(4, inflationMargin / 2);
+    const halfIntermediateRects = (intermediateObstacles ?? []).map(
+      (bbox) => rectInflate(bboxToRect(bbox), halfMargin, halfMargin)
+    );
+    const inflA_half = startBBox ? inflateExcludingFace(shapeA, halfMargin, startDir) : rectInflate(shapeA, halfMargin, halfMargin);
+    const inflB_half = endBBox ? inflateExcludingFace(shapeB, halfMargin, endDir) : rectInflate(shapeB, halfMargin, halfMargin);
+    const routeRelaxed = findRouteWithObstacles(
+      start,
+      end,
+      startDir,
+      endDir,
+      [inflA_half, inflB_half, ...halfIntermediateRects],
+      antennaMargin
+    );
+    if (routeRelaxed) {
+      return routeRelaxed;
+    }
+  }
+  return simplifyPointPath(fallbackRoute(start, end, startDir, endDir, antennaMargin));
+}
+function clearAntennaPoint(pt, dir, obstacles) {
+  let { x, y } = pt;
+  for (let pass = 0; pass < obstacles.length; pass++) {
+    let allClear = true;
+    for (const obs of obstacles) {
+      if (x <= obs.left || x >= rectRight(obs) || y <= obs.top || y >= rectBottom(obs)) {
+        continue;
+      }
+      allClear = false;
+      switch (dir) {
+        case "left":
+          x = obs.left - 1;
+          break;
+        case "right":
+          x = rectRight(obs) + 1;
+          break;
+        case "up":
+          y = obs.top - 1;
+          break;
+        case "down":
+          y = rectBottom(obs) + 1;
+          break;
+      }
+    }
+    if (allClear) break;
+  }
+  return { x, y };
+}
+function fallbackRoute(start, end, startDir, endDir, margin) {
+  const stub = Math.max(margin, SHAPE_MARGIN);
+  const sv = dirVec(startDir);
+  const ev = dirVec(endDir);
+  const s1 = { x: start.x + sv.x * stub, y: start.y + sv.y * stub };
+  const e1 = { x: end.x + ev.x * stub, y: end.y + ev.y * stub };
+  if (isVerticalDir(startDir) === isVerticalDir(endDir)) {
+    if (isVerticalDir(startDir)) {
+      const midY = (s1.y + e1.y) / 2;
+      return [start, s1, { x: s1.x, y: midY }, { x: e1.x, y: midY }, e1, end];
+    } else {
+      const midX = (s1.x + e1.x) / 2;
+      return [start, s1, { x: midX, y: s1.y }, { x: midX, y: e1.y }, e1, end];
+    }
+  } else {
+    if (isVerticalDir(startDir)) {
+      return [start, s1, { x: s1.x, y: e1.y }, e1, end];
+    } else {
+      return [start, s1, { x: e1.x, y: s1.y }, e1, end];
+    }
+  }
+}
+const OBSTACLE_TYPES = /* @__PURE__ */ new Set(["rectangle", "ellipse", "diamond", "text", "image"]);
+function collectElbowIntermediateObstacles(startWorld, endWorld, allElements, excludeIds) {
+  const obstacles = [];
+  const routeMinX = Math.min(startWorld.x, endWorld.x) - BOUNDS_MARGIN * 3;
+  const routeMaxX = Math.max(startWorld.x, endWorld.x) + BOUNDS_MARGIN * 3;
+  const routeMinY = Math.min(startWorld.y, endWorld.y) - BOUNDS_MARGIN * 3;
+  const routeMaxY = Math.max(startWorld.y, endWorld.y) + BOUNDS_MARGIN * 3;
+  for (const el of allElements) {
+    if (!OBSTACLE_TYPES.has(el.type)) continue;
+    if (excludeIds.has(el.id)) continue;
+    if (!el.isVisible) continue;
+    const bbox = getShapeBBox(el);
+    if (bbox.x + bbox.width < routeMinX || bbox.x > routeMaxX || bbox.y + bbox.height < routeMinY || bbox.y > routeMaxY) {
+      continue;
+    }
+    obstacles.push(bbox);
+  }
+  return obstacles;
+}
+const CURVE_RATIO = 0.2;
+function computeCurveControlPoint(start, end, ratio = CURVE_RATIO) {
+  const mx = (start.x + end.x) / 2;
+  const my = (start.y + end.y) / 2;
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return { x: mx, y: my };
+  const nx = -dy / len;
+  const ny = dx / len;
+  const offset = len * ratio;
+  return { x: mx + nx * offset, y: my + ny * offset };
+}
+function quadBezierAt(p0, cp, p2, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * p0.x + 2 * mt * t * cp.x + t * t * p2.x,
+    y: mt * mt * p0.y + 2 * mt * t * cp.y + t * t * p2.y
+  };
+}
+function toRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+function rotatePoint(px, py, angle) {
+  if (angle === 0) return { x: px, y: py };
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return { x: px * cos - py * sin, y: px * sin + py * cos };
+}
+function worldToLocal(el, wp) {
+  const cx = el.x + el.width / 2;
+  const cy = el.y + el.height / 2;
+  const dx = wp.x - cx;
+  const dy = wp.y - cy;
+  const angle = toRad(el.rotation || 0);
+  if (angle === 0) return { x: dx, y: dy };
+  return rotatePoint(dx, dy, -angle);
+}
+function localToWorld(el, lp) {
+  const cx = el.x + el.width / 2;
+  const cy = el.y + el.height / 2;
+  const angle = toRad(el.rotation || 0);
+  const rotated = rotatePoint(lp.x, lp.y, angle);
+  return { x: cx + rotated.x, y: cy + rotated.y };
+}
+function anchorToFixedPoint(anchor) {
+  switch (anchor) {
+    case "n":
+      return [0.5, 0];
+    case "s":
+      return [0.5, 1];
+    case "e":
+      return [1, 0.5];
+    case "w":
+      return [0, 0.5];
+    case "ne":
+      return [1, 0];
+    case "nw":
+      return [0, 0];
+    case "se":
+      return [1, 1];
+    case "sw":
+      return [0, 1];
+    case "center":
+      return [0.5, 0.5];
+    case "auto":
+      return [0.5, 0.5];
+    // caller should resolve via nearest
+    default:
+      return [0.5, 0.5];
+  }
+}
+function resolvePort(el, portId) {
+  if (!el.ports) return null;
+  const port = el.ports.find((p) => p.id === portId);
+  return port ? port.ratio : null;
+}
+function resolveBindingPoint(binding, element) {
+  if (binding.portId) {
+    const portFp = resolvePort(element, binding.portId);
+    if (portFp) return { fixedPoint: portFp, snapMode: "port" };
+  }
+  if (binding.anchor && binding.anchor !== "auto") {
+    return { fixedPoint: anchorToFixedPoint(binding.anchor), snapMode: "anchor" };
+  }
+  const mode = binding.fixedPoint[0] === 0.5 && binding.fixedPoint[1] === 0.5 ? "center" : "edge";
+  return { fixedPoint: binding.fixedPoint, snapMode: mode };
+}
+function getEdgePointFromFixedPoint(el, fixedPoint, gap = 0, toward) {
+  const localTargetX = (fixedPoint[0] - 0.5) * el.width;
+  const localTargetY = (fixedPoint[1] - 0.5) * el.height;
+  if (localTargetX === 0 && localTargetY === 0) {
+    if (toward) {
+      return getEdgePoint(el, toward, gap);
+    }
+    return localToWorld(el, { x: 0, y: 0 });
+  }
+  const worldTarget = localToWorld(el, { x: localTargetX, y: localTargetY });
+  return getEdgePoint(el, worldTarget, gap);
+}
+function getEdgePoint(el, toward, gap = 0) {
+  const local = worldToLocal(el, toward);
+  const lx = local.x;
+  const ly = local.y;
+  if (lx === 0 && ly === 0) {
+    if (el.width >= el.height) {
+      return localToWorld(el, { x: el.width / 2 + gap, y: 0 });
+    }
+    return localToWorld(el, { x: 0, y: -(el.height / 2 + gap) });
+  }
+  let edgeLocal;
+  switch (el.type) {
+    case "ellipse": {
+      const a = el.width / 2;
+      const b = el.height / 2;
+      const angle = Math.atan2(ly, lx);
+      edgeLocal = {
+        x: (a + gap) * Math.cos(angle),
+        y: (b + gap) * Math.sin(angle)
+      };
+      break;
+    }
+    case "diamond": {
+      const hw = el.width / 2;
+      const hh = el.height / 2;
+      const angle = Math.atan2(ly, lx);
+      const cosA = Math.cos(angle);
+      const sinA = Math.sin(angle);
+      const absCos = Math.abs(cosA);
+      const absSin = Math.abs(sinA);
+      const t = 1 / (absCos / hw + absSin / hh);
+      const ex = t * cosA;
+      const ey = t * sinA;
+      if (gap === 0) {
+        edgeLocal = { x: ex, y: ey };
+      } else {
+        const nx = (cosA >= 0 ? 1 : -1) / hw;
+        const ny = (sinA >= 0 ? 1 : -1) / hh;
+        const nLen = Math.sqrt(nx * nx + ny * ny);
+        edgeLocal = {
+          x: ex + nx / nLen * gap,
+          y: ey + ny / nLen * gap
+        };
+      }
+      break;
+    }
+    default: {
+      const hw = el.width / 2;
+      const hh = el.height / 2;
+      const angle = Math.atan2(ly, lx);
+      const absTanAngle = Math.abs(Math.tan(angle));
+      let ex, ey;
+      if (absTanAngle <= hh / hw) {
+        ex = lx > 0 ? hw : -hw;
+        ey = ex * Math.tan(angle);
+      } else {
+        ey = ly > 0 ? hh : -hh;
+        ex = ey / Math.tan(angle);
+      }
+      if (gap === 0) {
+        edgeLocal = { x: ex, y: ey };
+      } else {
+        if (absTanAngle <= hh / hw) {
+          edgeLocal = { x: ex + (lx > 0 ? gap : -gap), y: ey };
+        } else {
+          edgeLocal = { x: ex, y: ey + (ly > 0 ? gap : -gap) };
+        }
+      }
+      break;
+    }
+  }
+  return localToWorld(el, edgeLocal);
+}
+function recomputeBoundPoints(connector, allElements) {
+  const { startBinding, endBinding } = connector;
+  if (!startBinding && !endBinding) return null;
+  const elementMap = new Map(allElements.map((el) => [el.id, el]));
+  const pts = connector.points;
+  const pointCount = pts.length / 2;
+  let startPt = {
+    x: connector.x + pts[0],
+    y: connector.y + pts[1]
+  };
+  let endPt = {
+    x: connector.x + pts[pts.length - 2],
+    y: connector.y + pts[pts.length - 1]
+  };
+  const startEl = startBinding ? elementMap.get(startBinding.elementId) : void 0;
+  const endEl = endBinding ? elementMap.get(endBinding.elementId) : void 0;
+  const isElbow = connector.lineType === "elbow";
+  const getAnchorDir = (binding, el) => {
+    if (binding.isPrecise) {
+      const { fixedPoint: resolvedFp } = resolveBindingPoint(binding, el);
+      return getEdgePointFromFixedPoint(el, resolvedFp, 0);
+    }
+    return { x: el.x + el.width / 2, y: el.y + el.height / 2 };
+  };
+  const getPreciseEdgePoint = (binding, el, toward) => {
+    const { fixedPoint: resolvedFp } = resolveBindingPoint(binding, el);
+    return getEdgePointFromFixedPoint(el, resolvedFp, binding.gap, toward);
+  };
+  const directionStartRef = startBinding && startEl ? startBinding.isPrecise ? getPreciseEdgePoint(startBinding, startEl, endPt) : { x: startEl.x + startEl.width / 2, y: startEl.y + startEl.height / 2 } : startPt;
+  const directionEndRef = endBinding && endEl ? endBinding.isPrecise ? getPreciseEdgePoint(endBinding, endEl, startPt) : { x: endEl.x + endEl.width / 2, y: endEl.y + endEl.height / 2 } : endPt;
+  const elbowDirectionPair = isElbow ? (() => {
+    const excludeIds = /* @__PURE__ */ new Set();
+    if (startBinding == null ? void 0 : startBinding.elementId) excludeIds.add(startBinding.elementId);
+    if (endBinding == null ? void 0 : endBinding.elementId) excludeIds.add(endBinding.elementId);
+    return selectElbowDirectionPair({
+      startWorld: directionStartRef,
+      endWorld: directionEndRef,
+      startBinding,
+      endBinding,
+      startShape: startEl ?? null,
+      endShape: endEl ?? null,
+      intermediateObstacles: collectElbowIntermediateObstacles(directionStartRef, directionEndRef, allElements, excludeIds)
+    });
+  })() : null;
+  const getElbowFaceEdgePoint = (el, gap, preferredDir) => {
+    const cx = el.x + el.width / 2;
+    const cy = el.y + el.height / 2;
+    const far = Math.max(el.width, el.height) * 10;
+    let target;
+    switch (preferredDir) {
+      case "up":
+        target = { x: cx, y: cy - far };
+        break;
+      case "down":
+        target = { x: cx, y: cy + far };
+        break;
+      case "left":
+        target = { x: cx - far, y: cy };
+        break;
+      case "right":
+        target = { x: cx + far, y: cy };
+        break;
+    }
+    return getEdgePoint(el, target, gap);
+  };
+  const getCenterEdgePoint = isElbow ? (el, _toward, gap, preferredDir) => getElbowFaceEdgePoint(el, gap, preferredDir) : getEdgePoint;
+  if (startBinding && startEl && endBinding && endEl) {
+    if (startBinding.isPrecise) {
+      startPt = getPreciseEdgePoint(startBinding, startEl, endPt);
+    } else {
+      const endAnchor = getAnchorDir(endBinding, endEl);
+      startPt = getCenterEdgePoint(startEl, endAnchor, startBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.startDir) ?? "right");
+    }
+    if (endBinding.isPrecise) {
+      endPt = getPreciseEdgePoint(endBinding, endEl, startPt);
+    } else {
+      const startAnchor = getAnchorDir(startBinding, startEl);
+      endPt = getCenterEdgePoint(endEl, startAnchor, endBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.endDir) ?? "left");
+    }
+    if (startBinding.isPrecise) {
+      startPt = getPreciseEdgePoint(startBinding, startEl, endPt);
+    } else if (!startBinding.isPrecise) {
+      startPt = getCenterEdgePoint(startEl, endPt, startBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.startDir) ?? "right");
+    }
+    if (endBinding.isPrecise) {
+      endPt = getPreciseEdgePoint(endBinding, endEl, startPt);
+    } else if (!endBinding.isPrecise) {
+      endPt = getCenterEdgePoint(endEl, startPt, endBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.endDir) ?? "left");
+    }
+  } else {
+    if (startBinding && startEl) {
+      if (startBinding.isPrecise) {
+        startPt = getPreciseEdgePoint(startBinding, startEl, endPt);
+      } else {
+        startPt = getCenterEdgePoint(startEl, endPt, startBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.startDir) ?? "right");
+      }
+    }
+    if (endBinding && endEl) {
+      if (endBinding.isPrecise) {
+        endPt = getPreciseEdgePoint(endBinding, endEl, startPt);
+      } else {
+        endPt = getCenterEdgePoint(endEl, startPt, endBinding.gap, (elbowDirectionPair == null ? void 0 : elbowDirectionPair.endDir) ?? "left");
+      }
+    }
+  }
+  const newPoints = [0, 0];
+  for (let i = 1; i < pointCount - 1; i++) {
+    const worldX = connector.x + pts[i * 2];
+    const worldY = connector.y + pts[i * 2 + 1];
+    newPoints.push(worldX - startPt.x, worldY - startPt.y);
+  }
+  newPoints.push(endPt.x - startPt.x, endPt.y - startPt.y);
+  const dx = endPt.x - startPt.x;
+  const dy = endPt.y - startPt.y;
+  return {
+    x: startPt.x,
+    y: startPt.y,
+    points: newPoints,
+    width: Math.abs(dx),
+    height: Math.abs(dy)
+  };
+}
+function findConnectorsForElement(elementId, elements) {
+  return elements.filter((el) => {
+    var _a, _b;
+    if (el.type !== "line" && el.type !== "arrow") return false;
+    const c = el;
+    return ((_a = c.startBinding) == null ? void 0 : _a.elementId) === elementId || ((_b = c.endBinding) == null ? void 0 : _b.elementId) === elementId;
+  });
+}
+function clearBindingsForDeletedElements(deletedIds, elements) {
+  return elements.map((el) => {
+    let changed = false;
+    if (el.boundElements && el.boundElements.length > 0) {
+      const filtered = el.boundElements.filter((be) => !deletedIds.has(be.id));
+      if (filtered.length !== el.boundElements.length) {
+        el = { ...el, boundElements: filtered.length > 0 ? filtered : null };
+        changed = true;
+      }
+    }
+    if (el.type !== "line" && el.type !== "arrow") return el;
+    const c = el;
+    let startBinding = c.startBinding;
+    let endBinding = c.endBinding;
+    if (startBinding && deletedIds.has(startBinding.elementId)) {
+      startBinding = null;
+      changed = true;
+    }
+    if (endBinding && deletedIds.has(endBinding.elementId)) {
+      endBinding = null;
+      changed = true;
+    }
+    return changed ? { ...el, startBinding, endBinding } : el;
+  });
+}
+function computeConnectorLabelPosition(connector, textWidth, textHeight) {
+  const pts = connector.points;
+  const startPt = { x: pts[0], y: pts[1] };
+  const endPt = { x: pts[pts.length - 2], y: pts[pts.length - 1] };
+  let midX;
+  let midY;
+  if (connector.lineType === "curved") {
+    const curvature = connector.curvature ?? CURVE_RATIO;
+    const cp = computeCurveControlPoint(startPt, endPt, curvature);
+    const mid = quadBezierAt(startPt, cp, endPt, 0.5);
+    midX = connector.x + mid.x;
+    midY = connector.y + mid.y;
+  } else if (connector.lineType === "elbow" && pts.length >= 4) {
+    const segCount = pts.length / 2 - 1;
+    let totalLen = 0;
+    for (let i = 0; i < segCount; i++) {
+      const dx = pts[(i + 1) * 2] - pts[i * 2];
+      const dy = pts[(i + 1) * 2 + 1] - pts[i * 2 + 1];
+      totalLen += Math.sqrt(dx * dx + dy * dy);
+    }
+    const half = totalLen / 2;
+    let walked = 0;
+    midX = connector.x + (startPt.x + endPt.x) / 2;
+    midY = connector.y + (startPt.y + endPt.y) / 2;
+    for (let i = 0; i < segCount; i++) {
+      const ax = pts[i * 2], ay = pts[i * 2 + 1];
+      const bx = pts[(i + 1) * 2], by = pts[(i + 1) * 2 + 1];
+      const dx = bx - ax, dy = by - ay;
+      const segLen = Math.sqrt(dx * dx + dy * dy);
+      if (walked + segLen >= half && segLen > 0) {
+        const t = (half - walked) / segLen;
+        midX = connector.x + ax + dx * t;
+        midY = connector.y + ay + dy * t;
+        break;
+      }
+      walked += segLen;
+    }
+  } else {
+    midX = connector.x + (startPt.x + endPt.x) / 2;
+    midY = connector.y + (startPt.y + endPt.y) / 2;
+  }
+  return {
+    x: midX - textWidth / 2,
+    y: midY - textHeight / 2
+  };
+}
+function syncConnectorLabels(connectorIds, elMap) {
+  const updates = [];
+  for (const connId of connectorIds) {
+    const conn = elMap.get(connId);
+    if (!conn || conn.type !== "arrow" && conn.type !== "line") continue;
+    if (!conn.boundElements) continue;
+    const connector = conn;
+    for (const be of conn.boundElements) {
+      if (be.type !== "text") continue;
+      const txt = elMap.get(be.id);
+      if (!txt) continue;
+      const textW = Math.max(10, txt.width || 60);
+      const textH = txt.height || 30;
+      const pos = computeConnectorLabelPosition(connector, textW, textH);
+      updates.push({ id: txt.id, updates: { x: pos.x, y: pos.y } });
+    }
+  }
+  return updates;
+}
+const BOUND_TEXT_PADDING = 4;
+const CONTAINER_TYPES = /* @__PURE__ */ new Set([
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "image"
+]);
+function computeBoundTextPosition(container, text) {
+  const tw = Math.max(20, container.width - BOUND_TEXT_PADDING * 2);
+  let ty;
+  if (text.verticalAlign === "top") {
+    ty = container.y + BOUND_TEXT_PADDING;
+  } else if (text.verticalAlign === "bottom") {
+    ty = container.y + container.height - text.height - BOUND_TEXT_PADDING;
+  } else {
+    ty = container.y + (container.height - text.height) / 2;
+  }
+  return { x: container.x + BOUND_TEXT_PADDING, y: ty, width: tw };
+}
+function syncAfterDrag(movedIds, elements, skipIds) {
+  const elMap = /* @__PURE__ */ new Map();
+  for (const el of elements) elMap.set(el.id, el);
+  const updates = [];
+  const processedConnectors = /* @__PURE__ */ new Set();
+  for (const id of movedIds) {
+    const connectors = findConnectorsForElement(id, elements);
+    for (const conn of connectors) {
+      if (processedConnectors.has(conn.id)) continue;
+      processedConnectors.add(conn.id);
+      const freshConn = elMap.get(conn.id);
+      if (!freshConn) continue;
+      const recomputed = recomputeBoundPoints(freshConn, elements);
+      if (recomputed) updates.push({ id: freshConn.id, updates: recomputed });
+    }
+    const el = elMap.get(id);
+    if ((el == null ? void 0 : el.boundElements) && CONTAINER_TYPES.has(el.type)) {
+      for (const be of el.boundElements) {
+        if (be.type !== "text") continue;
+        const txt = elMap.get(be.id);
+        if (!txt) continue;
+        updates.push({ id: be.id, updates: computeBoundTextPosition(el, txt) });
+      }
+    }
+  }
+  if (processedConnectors.size > 0 && updates.length > 0) {
+    const tempMap = new Map(elMap);
+    for (const u of updates) {
+      const existing = tempMap.get(u.id);
+      if (existing) {
+        tempMap.set(u.id, { ...existing, ...u.updates });
+      }
+    }
+    const labelUpdates = syncConnectorLabels(
+      processedConnectors,
+      tempMap
+    );
+    for (const lu of labelUpdates) {
+      updates.push(lu);
+    }
+  }
+  return { updates, processedConnectorIds: processedConnectors };
+}
+let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let nanoid = (size = 21) => {
+  let id = "";
+  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id;
+};
+function generateId() {
+  return nanoid(12);
+}
+const BUILTIN_TYPES = /* @__PURE__ */ new Set([
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "line",
+  "arrow",
+  "freedraw",
+  "text",
+  "image"
+]);
+const VALID_TEXT_ALIGNS = /* @__PURE__ */ new Set(["left", "center", "right"]);
+const VALID_VERTICAL_ALIGNS = /* @__PURE__ */ new Set(["top", "middle", "bottom"]);
+const VALID_IMAGE_SCALES = /* @__PURE__ */ new Set(["fit", "fill", "stretch"]);
+const VALID_LINE_TYPES = /* @__PURE__ */ new Set(["sharp", "curved", "elbow"]);
+class ElementRegistryClass {
+  constructor() {
+    __publicField(this, "customs", /* @__PURE__ */ new Map());
+  }
+  // ── Registration ──────────────────────────────────────────
+  /**
+   * Register a custom element type.
+   *
+   * @throws If the type already exists and `allowOverride` is not `true`.
+   */
+  register(config) {
+    if (BUILTIN_TYPES.has(config.type) && !config.allowOverride) {
+      throw new Error(
+        `[f1ow] Cannot register custom element type "${config.type}" — it conflicts with a built-in type. Set allowOverride: true if you intentionally want to replace the built-in validator.`
+      );
+    }
+    if (this.customs.has(config.type) && !config.allowOverride) {
+      throw new Error(
+        `[f1ow] Element type "${config.type}" is already registered. Set allowOverride: true to replace the existing registration.`
+      );
+    }
+    this.customs.set(config.type, config);
+  }
+  // ── Queries ───────────────────────────────────────────────
+  /** Returns `true` if the type is known (built-in or custom). */
+  isRegistered(type) {
+    return BUILTIN_TYPES.has(type) || this.customs.has(type);
+  }
+  /** Retrieve the custom config for a type (undefined for built-in types). */
+  getCustomConfig(type) {
+    return this.customs.get(type);
+  }
+  /** All registered type names, built-in first then custom. */
+  getRegisteredTypes() {
+    return [...BUILTIN_TYPES, ...this.customs.keys()];
+  }
+  // ── Validation ────────────────────────────────────────────
+  /**
+   * Validate a full element before it enters the canvas store.
+   *
+   * Checks:
+   * 1. Non-null object with required base fields (id, type, x, y, w, h, rotation, style)
+   * 2. `type` is a known/registered type
+   * 3. Type-specific field checks for all 8 built-in types
+   * 4. Custom `validate` callback (custom types only)
+   */
+  validateElement(element) {
+    if (!element || typeof element !== "object" || Array.isArray(element)) {
+      return { valid: false, error: "Element must be a non-null object" };
+    }
+    const el = element;
+    if (typeof el.id !== "string" || el.id.trim() === "") {
+      return { valid: false, error: "Element id must be a non-empty string" };
+    }
+    const id = el.id;
+    if (typeof el.type !== "string" || !this.isRegistered(el.type)) {
+      return {
+        valid: false,
+        error: `Unknown element type "${el.type}". Valid types: ${this.getRegisteredTypes().join(", ")}`
+      };
+    }
+    if (typeof el.x !== "number" || !isFinite(el.x)) {
+      return { valid: false, error: `"${id}": x must be a finite number` };
+    }
+    if (typeof el.y !== "number" || !isFinite(el.y)) {
+      return { valid: false, error: `"${id}": y must be a finite number` };
+    }
+    if (typeof el.width !== "number" || !isFinite(el.width) || el.width < 0) {
+      return { valid: false, error: `"${id}": width must be a non-negative finite number` };
+    }
+    if (typeof el.height !== "number" || !isFinite(el.height) || el.height < 0) {
+      return { valid: false, error: `"${id}": height must be a non-negative finite number` };
+    }
+    if (typeof el.rotation !== "number" || !isFinite(el.rotation)) {
+      return { valid: false, error: `"${id}": rotation must be a finite number` };
+    }
+    const styleCheck = this._validateStyle(id, el.style);
+    if (!styleCheck.valid) return styleCheck;
+    if (BUILTIN_TYPES.has(el.type)) {
+      const typeCheck = this._validateBuiltinFields(el);
+      if (!typeCheck.valid) return typeCheck;
+    }
+    const customCfg = this.customs.get(el.type);
+    if (customCfg == null ? void 0 : customCfg.validate) {
+      let result;
+      try {
+        result = customCfg.validate(el);
+      } catch (err) {
+        const name = customCfg.displayName ?? customCfg.type;
+        return {
+          valid: false,
+          error: `Custom element "${name}" validator threw for "${id}": ${err instanceof Error ? err.message : String(err)}`
+        };
+      }
+      if (result !== true) {
+        const name = customCfg.displayName ?? customCfg.type;
+        return {
+          valid: false,
+          error: `Custom element "${name}" validation failed for "${id}": ${result}`
+        };
+      }
+    }
+    return { valid: true };
+  }
+  /**
+   * Validate a partial update before it is applied to an existing element.
+   *
+   * Prevents overwriting immutable fields (`id` and `type`), and checks
+   * numeric fields for finiteness.
+   */
+  validateUpdate(updates) {
+    if ("id" in updates) {
+      return { valid: false, error: "Cannot overwrite element id via updateElement" };
+    }
+    if ("type" in updates) {
+      return {
+        valid: false,
+        error: "Cannot overwrite element type via updateElement — use convertElementType instead"
+      };
+    }
+    for (const key of ["x", "y", "width", "height", "rotation"]) {
+      if (key in updates) {
+        const v = updates[key];
+        if (typeof v !== "number" || !isFinite(v)) {
+          return { valid: false, error: `Update field "${key}" must be a finite number, got: ${v}` };
+        }
+      }
+    }
+    return { valid: true };
+  }
+  // ── Defaults ──────────────────────────────────────────────
+  /**
+   * Merge custom `defaults` into the element.
+   * Existing fields on the element take priority — defaults only fill gaps.
+   * Only active when the element's type has a custom config with `defaults`.
+   */
+  applyDefaults(element) {
+    const type = element.type;
+    if (!type) return element;
+    const cfg = this.customs.get(type);
+    if (!(cfg == null ? void 0 : cfg.defaults)) return element;
+    return { ...cfg.defaults, ...element };
+  }
+  // ── Private helpers ───────────────────────────────────────
+  _validateStyle(id, style) {
+    if (!style || typeof style !== "object" || Array.isArray(style)) {
+      return { valid: false, error: `"${id}": missing or invalid style object` };
+    }
+    const s = style;
+    if (typeof s.strokeColor !== "string") {
+      return { valid: false, error: `"${id}": style.strokeColor must be a string` };
+    }
+    if (typeof s.fillColor !== "string") {
+      return { valid: false, error: `"${id}": style.fillColor must be a string` };
+    }
+    if (typeof s.strokeWidth !== "number" || !isFinite(s.strokeWidth) || s.strokeWidth < 0) {
+      return { valid: false, error: `"${id}": style.strokeWidth must be a non-negative number` };
+    }
+    if (typeof s.opacity !== "number" || !isFinite(s.opacity) || s.opacity < 0 || s.opacity > 1) {
+      return { valid: false, error: `"${id}": style.opacity must be between 0 and 1` };
+    }
+    if (typeof s.fontSize !== "number" || !isFinite(s.fontSize) || s.fontSize <= 0) {
+      return { valid: false, error: `"${id}": style.fontSize must be a positive number` };
+    }
+    return { valid: true };
+  }
+  _validateBuiltinFields(el) {
+    const type = el.type;
+    const id = el.id;
+    switch (type) {
+      case "rectangle":
+        if (typeof el.cornerRadius !== "number" || !isFinite(el.cornerRadius) || el.cornerRadius < 0) {
+          return {
+            valid: false,
+            error: `rectangle "${id}": cornerRadius must be a non-negative number`
+          };
+        }
+        break;
+      case "line":
+      case "arrow": {
+        if (!Array.isArray(el.points) || el.points.length < 4 || el.points.some((p) => typeof p !== "number" || !isFinite(p))) {
+          return {
+            valid: false,
+            error: `${type} "${id}": points must be an array of at least 4 finite numbers [x1,y1,x2,y2,...]`
+          };
+        }
+        if (typeof el.lineType !== "string" || !VALID_LINE_TYPES.has(el.lineType)) {
+          return {
+            valid: false,
+            error: `${type} "${id}": lineType must be one of ${[...VALID_LINE_TYPES].join(" | ")}`
+          };
+        }
+        break;
+      }
+      case "freedraw": {
+        if (!Array.isArray(el.points) || el.points.length < 2 || el.points.some((p) => typeof p !== "number" || !isFinite(p))) {
+          return {
+            valid: false,
+            error: `freedraw "${id}": points must be an array of at least 2 finite numbers`
+          };
+        }
+        break;
+      }
+      case "text": {
+        if (typeof el.text !== "string") {
+          return { valid: false, error: `text "${id}": text must be a string` };
+        }
+        if (!VALID_TEXT_ALIGNS.has(el.textAlign)) {
+          return {
+            valid: false,
+            error: `text "${id}": textAlign must be one of ${[...VALID_TEXT_ALIGNS].join(" | ")}`
+          };
+        }
+        if (!VALID_VERTICAL_ALIGNS.has(el.verticalAlign)) {
+          return {
+            valid: false,
+            error: `text "${id}": verticalAlign must be one of ${[...VALID_VERTICAL_ALIGNS].join(" | ")}`
+          };
+        }
+        break;
+      }
+      case "image": {
+        if (typeof el.src !== "string" || el.src.trim() === "") {
+          return { valid: false, error: `image "${id}": src must be a non-empty string` };
+        }
+        if (!VALID_IMAGE_SCALES.has(el.scaleMode)) {
+          return {
+            valid: false,
+            error: `image "${id}": scaleMode must be one of ${[...VALID_IMAGE_SCALES].join(" | ")}`
+          };
+        }
+        break;
+      }
+    }
+    return { valid: true };
+  }
+}
+const elementRegistry = new ElementRegistryClass();
+function deepCloneElement(el) {
+  const clone = { ...el };
+  if (clone.style) clone.style = { ...clone.style };
+  if (clone.boundElements) clone.boundElements = clone.boundElements.map((be) => ({ ...be }));
+  if (clone.startBinding) clone.startBinding = { ...clone.startBinding };
+  if (clone.endBinding) clone.endBinding = { ...clone.endBinding };
+  if (clone.groupIds) clone.groupIds = [...clone.groupIds];
+  if (Array.isArray(clone.points)) {
+    clone.points = [...clone.points];
+  }
+  if (Array.isArray(clone.pressures)) {
+    clone.pressures = [...clone.pressures];
+  }
+  if (clone.crop) clone.crop = { ...clone.crop };
+  return clone;
+}
+function cloneAndRemapElements(originals, allElements, offset = 20) {
+  const originalIds = new Set(originals.map((el) => el.id));
+  const extraTextIds = /* @__PURE__ */ new Set();
+  for (const el of originals) {
+    if (el.boundElements) {
+      for (const be of el.boundElements) {
+        if (be.type === "text" && !originalIds.has(be.id)) {
+          extraTextIds.add(be.id);
+        }
+      }
+    }
+  }
+  const toDuplicate = [
+    ...originals,
+    ...allElements.filter((el) => extraTextIds.has(el.id))
+  ];
+  const idMap = /* @__PURE__ */ new Map();
+  for (const el of toDuplicate) {
+    idMap.set(el.id, generateId());
+  }
+  const groupIdMap = /* @__PURE__ */ new Map();
+  for (const el of toDuplicate) {
+    if (el.groupIds) {
+      for (const gid of el.groupIds) {
+        if (!groupIdMap.has(gid)) {
+          groupIdMap.set(gid, generateId());
+        }
+      }
+    }
+  }
+  const clones = toDuplicate.map((el) => {
+    const newId = idMap.get(el.id);
+    const dup = deepCloneElement(el);
+    dup.id = newId;
+    dup.x = el.x + offset;
+    dup.y = el.y + offset;
+    if (dup.containerId && idMap.has(dup.containerId)) {
+      dup.containerId = idMap.get(dup.containerId);
+    } else if (dup.containerId) {
+      dup.containerId = null;
+    }
+    if (dup.boundElements) {
+      dup.boundElements = dup.boundElements.map(
+        (be) => idMap.has(be.id) ? { ...be, id: idMap.get(be.id) } : null
+      ).filter(Boolean);
+      if (dup.boundElements.length === 0) dup.boundElements = null;
+    }
+    if (dup.startBinding && idMap.has(dup.startBinding.elementId)) {
+      dup.startBinding = { ...dup.startBinding, elementId: idMap.get(dup.startBinding.elementId) };
+    } else if (dup.startBinding) {
+      dup.startBinding = null;
+    }
+    if (dup.endBinding && idMap.has(dup.endBinding.elementId)) {
+      dup.endBinding = { ...dup.endBinding, elementId: idMap.get(dup.endBinding.elementId) };
+    } else if (dup.endBinding) {
+      dup.endBinding = null;
+    }
+    if (dup.groupIds && dup.groupIds.length > 0) {
+      dup.groupIds = dup.groupIds.map((gid) => groupIdMap.get(gid) ?? gid);
+    }
+    return dup;
+  });
+  const selectedCloneIds = clones.filter((c) => {
+    var _a;
+    const origId = (_a = [...idMap.entries()].find(([, v]) => v === c.id)) == null ? void 0 : _a[0];
+    return origId ? originalIds.has(origId) : false;
+  }).map((c) => c.id);
+  return { clones, idMap, selectedCloneIds };
+}
+function getElementAABB(el) {
+  if ((el.type === "line" || el.type === "arrow") && "points" in el) {
+    const pts = el.points;
+    let minX = 0, maxX = 0, minY = 0, maxY = 0;
+    for (let i = 0; i < pts.length; i += 2) {
+      const px = pts[i];
+      const py = pts[i + 1];
+      if (px < minX) minX = px;
+      if (px > maxX) maxX = px;
+      if (py < minY) minY = py;
+      if (py > maxY) maxY = py;
+    }
+    return {
+      minX: el.x + minX,
+      minY: el.y + minY,
+      maxX: el.x + maxX,
+      maxY: el.y + maxY
+    };
+  }
+  if (el.type === "freedraw" && "points" in el) {
+    if (el.isComplete === false) {
+      const pts = el.points;
+      let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+      for (let i = 0; i < pts.length; i += 2) {
+        const px = pts[i];
+        const py = pts[i + 1];
+        if (px < minX) minX = px;
+        if (px > maxX) maxX = px;
+        if (py < minY) minY = py;
+        if (py > maxY) maxY = py;
+      }
+      if (minX === Infinity) {
+        return { minX: el.x, minY: el.y, maxX: el.x + 1, maxY: el.y + 1 };
+      }
+      return { minX, minY, maxX, maxY };
+    }
+    return {
+      minX: el.x,
+      minY: el.y,
+      maxX: el.x + el.width,
+      maxY: el.y + el.height
+    };
+  }
+  return {
+    minX: el.x,
+    minY: el.y,
+    maxX: el.x + el.width,
+    maxY: el.y + el.height
+  };
+}
+const ZOOM_STEPS = [0.1, 0.25, 0.33, 0.5, 0.67, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5];
+const DEFAULT_ANIMATION_DURATION = 280;
+function zoomAtPoint({ viewport, point, targetScale }) {
+  const clampedScale = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, targetScale));
+  const wx = (point.x - viewport.x) / viewport.scale;
+  const wy = (point.y - viewport.y) / viewport.scale;
+  return {
+    scale: clampedScale,
+    x: point.x - wx * clampedScale,
+    y: point.y - wy * clampedScale
+  };
+}
+function getNextZoomStep(currentScale) {
+  for (const step of ZOOM_STEPS) {
+    if (step > currentScale + 0.01) return step;
+  }
+  return MAX_ZOOM;
+}
+function getPrevZoomStep(currentScale) {
+  for (let i = ZOOM_STEPS.length - 1; i >= 0; i--) {
+    if (ZOOM_STEPS[i] < currentScale - 0.01) return ZOOM_STEPS[i];
+  }
+  return MIN_ZOOM;
+}
+function getElementsBounds(elements) {
+  if (elements.length === 0) return null;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const el of elements) {
+    const bb = getElementAABB(el);
+    if (bb.minX < minX) minX = bb.minX;
+    if (bb.minY < minY) minY = bb.minY;
+    if (bb.maxX > maxX) maxX = bb.maxX;
+    if (bb.maxY > maxY) maxY = bb.maxY;
+  }
+  return { minX, minY, maxX, maxY };
+}
+function computeZoomToFit(bounds, stageWidth, stageHeight, options = {}) {
+  const padding = options.padding ?? 50;
+  const maxZoom = options.maxZoom ?? 2;
+  const bbW = bounds.maxX - bounds.minX;
+  const bbH = bounds.maxY - bounds.minY;
+  if (bbW === 0 && bbH === 0) {
+    return {
+      scale: 1,
+      x: stageWidth / 2 - bounds.minX,
+      y: stageHeight / 2 - bounds.minY
+    };
+  }
+  const scaleX = (stageWidth - padding * 2) / (bbW || 1);
+  const scaleY = (stageHeight - padding * 2) / (bbH || 1);
+  const scale = Math.min(Math.min(scaleX, scaleY), maxZoom);
+  const clampedScale = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, scale));
+  const centerX = (bounds.minX + bounds.maxX) / 2;
+  const centerY = (bounds.minY + bounds.maxY) / 2;
+  return {
+    scale: clampedScale,
+    x: stageWidth / 2 - centerX * clampedScale,
+    y: stageHeight / 2 - centerY * clampedScale
+  };
+}
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+let activeAnimationId = null;
+function animateViewport(from, to, setViewport, duration = DEFAULT_ANIMATION_DURATION) {
+  if (activeAnimationId !== null) {
+    cancelAnimationFrame(activeAnimationId);
+    activeAnimationId = null;
+  }
+  const startTime = performance.now();
+  const tick = (now) => {
+    const elapsed = now - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    const eased = easeOutCubic(progress);
+    const interpolated = {
+      x: from.x + (to.x - from.x) * eased,
+      y: from.y + (to.y - from.y) * eased,
+      scale: from.scale + (to.scale - from.scale) * eased
+    };
+    setViewport(interpolated);
+    if (progress < 1) {
+      activeAnimationId = requestAnimationFrame(tick);
+    } else {
+      activeAnimationId = null;
+      setViewport(to);
+    }
+  };
+  activeAnimationId = requestAnimationFrame(tick);
+  return () => {
+    if (activeAnimationId !== null) {
+      cancelAnimationFrame(activeAnimationId);
+      activeAnimationId = null;
+    }
+  };
+}
+function cancelViewportAnimation() {
+  if (activeAnimationId !== null) {
+    cancelAnimationFrame(activeAnimationId);
+    activeAnimationId = null;
+  }
+}
+const GEOMETRY_KEYS = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "ports",
+  "points",
+  "cornerRadius",
+  "radiusX",
+  "radiusY"
+]);
+function expandWithBoundChildren(ids, elements) {
+  const idSet = new Set(ids);
+  for (const el of elements) {
+    if (el.type === "text" && el.containerId && idSet.has(el.containerId)) {
+      idSet.add(el.id);
+    }
+  }
+  return idSet;
+}
+const MAX_HISTORY = 100;
+function cloneElement(el) {
+  if (el.type === "image" && "src" in el) {
+    const { src, ...rest } = el;
+    const cloned = structuredClone(rest);
+    cloned.src = src;
+    return cloned;
+  }
+  return structuredClone(el);
+}
+function orderOf(elements) {
+  return elements.map((el) => el.id);
+}
+function sameOrder(a, b) {
+  return a.length === b.length && a.every((id, index) => id === b[index]);
+}
+function restoreOrder(elements, order) {
+  const byId = new Map(elements.map((el) => [el.id, el]));
+  const ordered = [];
+  for (const id of order) {
+    const el = byId.get(id);
+    if (el) {
+      ordered.push(el);
+      byId.delete(id);
+    }
+  }
+  for (const el of elements) {
+    if (byId.has(el.id)) ordered.push(el);
+  }
+  return ordered;
+}
+function validSelectedIds(selectedIds, elements) {
+  const existingIds = new Set(elements.map((el) => el.id));
+  return selectedIds.filter((id) => existingIds.has(id));
+}
+function selectedEditableElements(ids, elements) {
+  const idSet = new Set(ids);
+  return elements.filter((el) => idSet.has(el.id) && !el.isLocked);
+}
+function elementBounds(el) {
+  if ((el.type === "line" || el.type === "arrow" || el.type === "freedraw") && el.points.length >= 2) {
+    let minLocalX = Infinity;
+    let minLocalY = Infinity;
+    let maxLocalX = -Infinity;
+    let maxLocalY = -Infinity;
+    for (let i = 0; i < el.points.length; i += 2) {
+      minLocalX = Math.min(minLocalX, el.points[i]);
+      minLocalY = Math.min(minLocalY, el.points[i + 1]);
+      maxLocalX = Math.max(maxLocalX, el.points[i]);
+      maxLocalY = Math.max(maxLocalY, el.points[i + 1]);
+    }
+    return {
+      minX: el.x + minLocalX,
+      minY: el.y + minLocalY,
+      maxX: el.x + maxLocalX,
+      maxY: el.y + maxLocalY
+    };
+  }
+  return {
+    minX: el.x,
+    minY: el.y,
+    maxX: el.x + el.width,
+    maxY: el.y + el.height
+  };
+}
+function boundsOf(elements) {
+  if (elements.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const el of elements) {
+    const bounds = elementBounds(el);
+    minX = Math.min(minX, bounds.minX);
+    minY = Math.min(minY, bounds.minY);
+    maxX = Math.max(maxX, bounds.maxX);
+    maxY = Math.max(maxY, bounds.maxY);
+  }
+  return { minX, minY, maxX, maxY };
+}
+function normalizeRotation(rotation) {
+  return (rotation % 360 + 360) % 360;
+}
+function flipPoints(points, min, max, axisOffset) {
+  if (!points) return void 0;
+  return points.map((value, index) => index % 2 === axisOffset ? min + max - value : value);
+}
+function syncMovedElements(ids, get) {
+  const state = get();
+  const sync = syncAfterDrag(ids, state.elements);
+  if (sync.updates.length > 0) {
+    state.batchUpdateElements(sync.updates);
+  }
+}
+function createCanvasStore() {
+  return create((set, get) => ({
+    // ─── Initial State ────────────────────────────────────────
+    elements: [],
+    selectedIds: [],
+    activeTool: "select",
+    currentStyle: { ...DEFAULT_STYLE },
+    currentLineType: "sharp",
+    currentStartArrowhead: null,
+    currentEndArrowhead: "arrow",
+    viewport: { x: 0, y: 0, scale: 1 },
+    isDrawing: false,
+    drawStart: null,
+    history: [],
+    historyIndex: -1,
+    _historyBaseline: /* @__PURE__ */ new Map(),
+    _historyOrderBaseline: [],
+    _historyPaused: false,
+    showGrid: false,
+    // ─── Element Actions ──────────────────────────────────────
+    addElement: (element) => {
+      const validation = elementRegistry.validateElement(element);
+      if (!validation.valid) {
+        return;
+      }
+      const finalElement = elementRegistry.applyDefaults(element);
+      set((state) => ({
+        elements: [...state.elements, finalElement]
+      }));
+      get().pushHistory();
+    },
+    updateElement: (id, updates) => {
+      const updateValidation = elementRegistry.validateUpdate(updates);
+      if (!updateValidation.valid) {
+        return;
+      }
+      const hasGeometryChange = Object.keys(updates).some((k) => GEOMETRY_KEYS.has(k));
+      set((state) => {
+        const elements = state.elements;
+        const idx = elements.findIndex((el) => el.id === id);
+        if (idx === -1) return state;
+        const base = elements[idx];
+        const versionBump = hasGeometryChange ? { version: (base.version ?? 0) + 1 } : {};
+        const updated = { ...base, ...updates, ...versionBump };
+        if (updated === base) return state;
+        const next = elements.slice();
+        next[idx] = updated;
+        return { elements: next };
+      });
+    },
+    batchUpdateElements: (batchUpdates) => {
+      if (batchUpdates.length === 0) return;
+      if (batchUpdates.length === 1) {
+        get().updateElement(batchUpdates[0].id, batchUpdates[0].updates);
+        return;
+      }
+      const validUpdates = batchUpdates.filter(({ id, updates }) => {
+        const v = elementRegistry.validateUpdate(updates);
+        if (!v.valid) {
+          return false;
+        }
+        return true;
+      });
+      if (validUpdates.length === 0) return;
+      set((state) => {
+        const elements = state.elements;
+        const idxMap = /* @__PURE__ */ new Map();
+        for (let i = 0; i < elements.length; i++) {
+          idxMap.set(elements[i].id, i);
+        }
+        let next = null;
+        for (const { id, updates } of validUpdates) {
+          const idx = idxMap.get(id);
+          if (idx === void 0) continue;
+          const src = next ? next[idx] : elements[idx];
+          const hasGeometryChange = Object.keys(updates).some((k) => GEOMETRY_KEYS.has(k));
+          const versionBump = hasGeometryChange ? { version: (src.version ?? 0) + 1 } : {};
+          const updated = { ...src, ...updates, ...versionBump };
+          if (updated === src) continue;
+          if (!next) next = elements.slice();
+          next[idx] = updated;
+        }
+        return next ? { elements: next } : state;
+      });
+    },
+    deleteElements: (ids) => {
+      const deletedSet = new Set(ids);
+      const { elements: current } = get();
+      for (const el of current) {
+        if (deletedSet.has(el.id) && el.boundElements) {
+          for (const be of el.boundElements) {
+            if (be.type === "text") {
+              deletedSet.add(be.id);
+            }
+          }
+        }
+      }
+      for (const el of current) {
+        if (el.type === "text" && "containerId" in el && el.containerId && deletedSet.has(el.containerId)) {
+          deletedSet.add(el.id);
+        }
+      }
+      set((state) => {
+        const remaining = state.elements.filter((el) => !deletedSet.has(el.id));
+        const cleaned = clearBindingsForDeletedElements(deletedSet, remaining);
+        return {
+          elements: cleaned,
+          selectedIds: state.selectedIds.filter((id) => !deletedSet.has(id))
+        };
+      });
+      get().pushHistory();
+    },
+    setElements: (elements) => {
+      if (elements === get().elements) return;
+      const valid = elements.filter((el) => {
+        const result = elementRegistry.validateElement(el);
+        if (!result.valid && false) ;
+        return result.valid;
+      });
+      const baseline = /* @__PURE__ */ new Map();
+      for (const el of valid) {
+        baseline.set(el.id, el);
+      }
+      set({ elements: valid, _historyBaseline: baseline, _historyOrderBaseline: orderOf(valid) });
+    },
+    duplicateElements: (ids) => {
+      const { elements } = get();
+      const originals = elements.filter((el) => ids.includes(el.id));
+      const { clones, selectedCloneIds } = cloneAndRemapElements(originals, elements);
+      set((state) => ({
+        elements: [...state.elements, ...clones],
+        selectedIds: selectedCloneIds.length > 0 ? selectedCloneIds : clones.map((d) => d.id)
+      }));
+      get().pushHistory();
+    },
+    convertElementType: (ids, targetType) => {
+      const shapeTypes = /* @__PURE__ */ new Set(["rectangle", "ellipse", "diamond"]);
+      if (!shapeTypes.has(targetType)) return;
+      set((state) => ({
+        elements: state.elements.map((el) => {
+          if (!ids.includes(el.id)) return el;
+          if (!shapeTypes.has(el.type)) return el;
+          if (el.type === targetType) return el;
+          const { cornerRadius: _cr, ...sharedFields } = el;
+          const base = { ...sharedFields, type: targetType };
+          if (targetType === "rectangle") {
+            return { ...base, cornerRadius: 0 };
+          }
+          return base;
+        })
+      }));
+      get().pushHistory();
+    },
+    bringToFront: (ids) => {
+      set((state) => {
+        const fullIds = expandWithBoundChildren(ids, state.elements);
+        const others = state.elements.filter((el) => !fullIds.has(el.id));
+        const targets = state.elements.filter((el) => fullIds.has(el.id));
+        return { elements: [...others, ...targets] };
+      });
+      get().pushHistory();
+    },
+    sendToBack: (ids) => {
+      set((state) => {
+        const fullIds = expandWithBoundChildren(ids, state.elements);
+        const others = state.elements.filter((el) => !fullIds.has(el.id));
+        const targets = state.elements.filter((el) => fullIds.has(el.id));
+        return { elements: [...targets, ...others] };
+      });
+      get().pushHistory();
+    },
+    bringForward: (ids) => {
+      set((state) => {
+        const elems = [...state.elements];
+        const idSet = expandWithBoundChildren(ids, state.elements);
+        for (let i = elems.length - 2; i >= 0; i--) {
+          if (idSet.has(elems[i].id) && !idSet.has(elems[i + 1].id)) {
+            [elems[i], elems[i + 1]] = [elems[i + 1], elems[i]];
+          }
+        }
+        return { elements: elems };
+      });
+      get().pushHistory();
+    },
+    sendBackward: (ids) => {
+      set((state) => {
+        const elems = [...state.elements];
+        const idSet = expandWithBoundChildren(ids, state.elements);
+        for (let i = 1; i < elems.length; i++) {
+          if (idSet.has(elems[i].id) && !idSet.has(elems[i - 1].id)) {
+            [elems[i], elems[i - 1]] = [elems[i - 1], elems[i]];
+          }
+        }
+        return { elements: elems };
+      });
+      get().pushHistory();
+    },
+    // ─── Transforms ──────────────────────────────────────────
+    alignElements: (ids, mode) => {
+      const movedIds = [];
+      set((state) => {
+        const targets = selectedEditableElements(ids, state.elements);
+        if (targets.length < 2) return state;
+        const bounds = boundsOf(targets);
+        if (!bounds) return state;
+        const centerX = (bounds.minX + bounds.maxX) / 2;
+        const centerY = (bounds.minY + bounds.maxY) / 2;
+        const targetIds = new Set(targets.map((el) => el.id));
+        const targetBounds = new Map(targets.map((el) => [el.id, elementBounds(el)]));
+        let changed = false;
+        const elements = state.elements.map((el) => {
+          if (!targetIds.has(el.id)) return el;
+          const elBounds = targetBounds.get(el.id);
+          if (!elBounds) return el;
+          let x = el.x;
+          let y = el.y;
+          if (mode === "left") x += bounds.minX - elBounds.minX;
+          if (mode === "centerH") x += centerX - (elBounds.minX + elBounds.maxX) / 2;
+          if (mode === "right") x += bounds.maxX - elBounds.maxX;
+          if (mode === "top") y += bounds.minY - elBounds.minY;
+          if (mode === "centerV") y += centerY - (elBounds.minY + elBounds.maxY) / 2;
+          if (mode === "bottom") y += bounds.maxY - elBounds.maxY;
+          if (x === el.x && y === el.y) return el;
+          changed = true;
+          movedIds.push(el.id);
+          return { ...el, x, y, version: (el.version ?? 0) + 1 };
+        });
+        return changed ? { elements } : state;
+      });
+      if (movedIds.length > 0) {
+        syncMovedElements(movedIds, get);
+        get().pushHistory();
+      }
+    },
+    rotateElements: (ids, deltaDegrees) => {
+      const movedIds = [];
+      set((state) => {
+        const idSet = new Set(ids);
+        let changed = false;
+        const elements = state.elements.map((el) => {
+          if (!idSet.has(el.id) || el.isLocked) return el;
+          const rotation = normalizeRotation((el.rotation ?? 0) + deltaDegrees);
+          if (rotation === el.rotation) return el;
+          changed = true;
+          movedIds.push(el.id);
+          return { ...el, rotation, version: (el.version ?? 0) + 1 };
+        });
+        return changed ? { elements } : state;
+      });
+      if (movedIds.length > 0) {
+        syncMovedElements(movedIds, get);
+        get().pushHistory();
+      }
+    },
+    flipElements: (ids, axis) => {
+      const movedIds = [];
+      set((state) => {
+        const targets = selectedEditableElements(ids, state.elements);
+        if (targets.length === 0) return state;
+        const bounds = boundsOf(targets);
+        if (!bounds) return state;
+        const targetIds = new Set(targets.map((el) => el.id));
+        const targetBounds = new Map(targets.map((el) => [el.id, elementBounds(el)]));
+        let changed = false;
+        const elements = state.elements.map((el) => {
+          if (!targetIds.has(el.id)) return el;
+          const elBounds = targetBounds.get(el.id);
+          if (!elBounds) return el;
+          const updates = {};
+          if (axis === "horizontal") {
+            updates.x = el.x + bounds.minX + bounds.maxX - elBounds.minX - elBounds.maxX;
+            if (el.type === "line" || el.type === "arrow" || el.type === "freedraw") {
+              updates.points = flipPoints(el.points, elBounds.minX - el.x, elBounds.maxX - el.x, 0);
+            }
+          } else {
+            updates.y = el.y + bounds.minY + bounds.maxY - elBounds.minY - elBounds.maxY;
+            if (el.type === "line" || el.type === "arrow" || el.type === "freedraw") {
+              updates.points = flipPoints(el.points, elBounds.minY - el.y, elBounds.maxY - el.y, 1);
+            }
+          }
+          changed = true;
+          movedIds.push(el.id);
+          return { ...el, ...updates, version: (el.version ?? 0) + 1 };
+        });
+        return changed ? { elements } : state;
+      });
+      if (movedIds.length > 0) {
+        syncMovedElements(movedIds, get);
+        get().pushHistory();
+      }
+    },
+    // ─── Lock ─────────────────────────────────────────────────
+    toggleLockElements: (ids) => {
+      set((state) => ({
+        elements: state.elements.map(
+          (el) => ids.includes(el.id) ? { ...el, isLocked: !el.isLocked } : el
+        )
+      }));
+      get().pushHistory();
+    },
+    // ─── Grouping ─────────────────────────────────────────────
+    groupElements: (ids) => {
+      if (ids.length < 2) return;
+      const groupId = generateId();
+      const idSet = new Set(ids);
+      const { elements } = get();
+      for (const el of elements) {
+        if (idSet.has(el.id) && el.boundElements) {
+          for (const be of el.boundElements) {
+            if (be.type === "text") {
+              idSet.add(be.id);
+            }
+          }
+        }
+      }
+      set((state) => ({
+        elements: state.elements.map(
+          (el) => idSet.has(el.id) ? { ...el, groupIds: [...el.groupIds ?? [], groupId] } : el
+        )
+      }));
+      get().pushHistory();
+    },
+    ungroupElements: (ids) => {
+      var _a;
+      const { elements } = get();
+      const selected = elements.filter((el) => ids.includes(el.id));
+      const groupIdsToRemove = /* @__PURE__ */ new Set();
+      for (const el of selected) {
+        if ((_a = el.groupIds) == null ? void 0 : _a.length) {
+          groupIdsToRemove.add(el.groupIds[el.groupIds.length - 1]);
+        }
+      }
+      if (groupIdsToRemove.size === 0) return;
+      set((state) => ({
+        elements: state.elements.map((el) => {
+          var _a2;
+          if (!((_a2 = el.groupIds) == null ? void 0 : _a2.length)) return el;
+          const filtered = el.groupIds.filter((g) => !groupIdsToRemove.has(g));
+          return {
+            ...el,
+            groupIds: filtered.length > 0 ? filtered : void 0
+          };
+        })
+      }));
+      get().pushHistory();
+    },
+    // ─── Selection ────────────────────────────────────────────
+    setSelectedIds: (ids) => set({ selectedIds: ids }),
+    clearSelection: () => set({ selectedIds: [] }),
+    // ─── Tool ─────────────────────────────────────────────────
+    setActiveTool: (tool) => set((state) => ({
+      activeTool: tool,
+      // Keep selection when switching back to 'select' (e.g. after creating an element)
+      selectedIds: tool === "select" ? state.selectedIds : []
+    })),
+    setCurrentStyle: (style) => set((state) => ({
+      currentStyle: { ...state.currentStyle, ...style }
+    })),
+    setCurrentLineType: (lineType) => set({ currentLineType: lineType }),
+    setCurrentStartArrowhead: (arrowhead) => set({ currentStartArrowhead: arrowhead }),
+    setCurrentEndArrowhead: (arrowhead) => set({ currentEndArrowhead: arrowhead }),
+    // ─── Viewport ─────────────────────────────────────────────
+    setViewport: (viewport) => {
+      cancelViewportAnimation();
+      set((state) => ({
+        viewport: { ...state.viewport, ...viewport }
+      }));
+    },
+    zoomIn: (center, options) => {
+      const { viewport } = get();
+      const targetScale = getNextZoomStep(viewport.scale);
+      const pt = center ?? { x: 400, y: 300 };
+      const target = zoomAtPoint({ viewport, point: pt, targetScale });
+      if (options == null ? void 0 : options.animate) {
+        animateViewport(viewport, target, (v) => set((s) => ({ viewport: { ...s.viewport, ...v } })));
+      } else {
+        cancelViewportAnimation();
+        set({ viewport: target });
+      }
+    },
+    zoomOut: (center, options) => {
+      const { viewport } = get();
+      const targetScale = getPrevZoomStep(viewport.scale);
+      const pt = center ?? { x: 400, y: 300 };
+      const target = zoomAtPoint({ viewport, point: pt, targetScale });
+      if (options == null ? void 0 : options.animate) {
+        animateViewport(viewport, target, (v) => set((s) => ({ viewport: { ...s.viewport, ...v } })));
+      } else {
+        cancelViewportAnimation();
+        set({ viewport: target });
+      }
+    },
+    resetZoom: (options) => {
+      const { viewport } = get();
+      const target = { x: 0, y: 0, scale: 1 };
+      if (options == null ? void 0 : options.animate) {
+        animateViewport(viewport, target, (v) => set((s) => ({ viewport: { ...s.viewport, ...v } })));
+      } else {
+        cancelViewportAnimation();
+        set({ viewport: target });
+      }
+    },
+    zoomToFit: (stageWidth, stageHeight, ids, options) => {
+      const { elements, viewport } = get();
+      const targets = ids ? elements.filter((e) => ids.includes(e.id)) : elements;
+      const bounds = getElementsBounds(targets);
+      if (!bounds) return;
+      const target = computeZoomToFit(bounds, stageWidth, stageHeight, {
+        padding: options == null ? void 0 : options.padding,
+        maxZoom: options == null ? void 0 : options.maxZoom
+      });
+      if (options == null ? void 0 : options.animate) {
+        animateViewport(viewport, target, (v) => set((s) => ({ viewport: { ...s.viewport, ...v } })));
+      } else {
+        cancelViewportAnimation();
+        set({ viewport: target });
+      }
+    },
+    zoomToSelection: (stageWidth, stageHeight, options) => {
+      const { elements, selectedIds, viewport } = get();
+      if (selectedIds.length === 0) return;
+      const targets = elements.filter((e) => selectedIds.includes(e.id));
+      const bounds = getElementsBounds(targets);
+      if (!bounds) return;
+      const target = computeZoomToFit(bounds, stageWidth, stageHeight, {
+        padding: (options == null ? void 0 : options.padding) ?? 80,
+        maxZoom: (options == null ? void 0 : options.maxZoom) ?? 2
+      });
+      if (options == null ? void 0 : options.animate) {
+        animateViewport(viewport, target, (v) => set((s) => ({ viewport: { ...s.viewport, ...v } })));
+      } else {
+        cancelViewportAnimation();
+        set({ viewport: target });
+      }
+    },
+    // ─── Drawing ──────────────────────────────────────────────
+    setIsDrawing: (isDrawing) => set({ isDrawing }),
+    setDrawStart: (point) => set({ drawStart: point }),
+    // ─── History (Diff-based) ───────────────────────────────────
+    pushHistory: (mark) => {
+      const { elements, _historyBaseline, _historyOrderBaseline, _historyPaused } = get();
+      if (_historyPaused) return;
+      const diffs = [];
+      const currentMap = /* @__PURE__ */ new Map();
+      for (const el of elements) {
+        currentMap.set(el.id, el);
+      }
+      const currentOrder = orderOf(elements);
+      const orderChanged = !sameOrder(_historyOrderBaseline, currentOrder);
+      for (const el of elements) {
+        const baseline = _historyBaseline.get(el.id);
+        if (!baseline) {
+          diffs.push({ type: "add", elementId: el.id, after: cloneElement(el) });
+        } else if (baseline !== el) {
+          diffs.push({
+            type: "modify",
+            elementId: el.id,
+            before: cloneElement(baseline),
+            after: cloneElement(el)
+          });
+        }
+      }
+      for (const [id, baseline] of _historyBaseline) {
+        if (!currentMap.has(id)) {
+          diffs.push({ type: "delete", elementId: id, before: cloneElement(baseline) });
+        }
+      }
+      if (diffs.length === 0 && !orderChanged) return;
+      set((state) => {
+        const newHistory = state.history.slice(0, state.historyIndex + 1);
+        newHistory.push({
+          diffs,
+          beforeOrder: orderChanged ? _historyOrderBaseline : void 0,
+          afterOrder: orderChanged ? currentOrder : void 0,
+          mark,
+          timestamp: Date.now()
+        });
+        if (newHistory.length > MAX_HISTORY) {
+          newHistory.shift();
+        }
+        return {
+          history: newHistory,
+          historyIndex: newHistory.length - 1,
+          // Update baseline to current state
+          _historyBaseline: new Map(currentMap),
+          _historyOrderBaseline: currentOrder
+        };
+      });
+    },
+    undo: () => {
+      const { historyIndex, history } = get();
+      if (historyIndex < 0) return;
+      const entry = history[historyIndex];
+      set((state) => {
+        let elements = [...state.elements];
+        for (let i = entry.diffs.length - 1; i >= 0; i--) {
+          const diff = entry.diffs[i];
+          switch (diff.type) {
+            case "add":
+              elements = elements.filter((el) => el.id !== diff.elementId);
+              break;
+            case "modify":
+              elements = elements.map(
+                (el) => el.id === diff.elementId ? cloneElement(diff.before) : el
+              );
+              break;
+            case "delete":
+              elements.push(cloneElement(diff.before));
+              break;
+          }
+        }
+        if (entry.beforeOrder) {
+          elements = restoreOrder(elements, entry.beforeOrder);
+        }
+        const newBaseline = /* @__PURE__ */ new Map();
+        for (const el of elements) {
+          newBaseline.set(el.id, el);
+        }
+        return {
+          historyIndex: historyIndex - 1,
+          elements,
+          selectedIds: validSelectedIds(state.selectedIds, elements),
+          _historyBaseline: newBaseline,
+          _historyOrderBaseline: orderOf(elements)
+        };
+      });
+    },
+    redo: () => {
+      const { historyIndex, history } = get();
+      if (historyIndex >= history.length - 1) return;
+      const newIndex = historyIndex + 1;
+      const entry = history[newIndex];
+      set((state) => {
+        let elements = [...state.elements];
+        for (const diff of entry.diffs) {
+          switch (diff.type) {
+            case "add":
+              elements.push(cloneElement(diff.after));
+              break;
+            case "modify":
+              elements = elements.map(
+                (el) => el.id === diff.elementId ? cloneElement(diff.after) : el
+              );
+              break;
+            case "delete":
+              elements = elements.filter((el) => el.id !== diff.elementId);
+              break;
+          }
+        }
+        if (entry.afterOrder) {
+          elements = restoreOrder(elements, entry.afterOrder);
+        }
+        const newBaseline = /* @__PURE__ */ new Map();
+        for (const el of elements) {
+          newBaseline.set(el.id, el);
+        }
+        return {
+          historyIndex: newIndex,
+          elements,
+          selectedIds: validSelectedIds(state.selectedIds, elements),
+          _historyBaseline: newBaseline,
+          _historyOrderBaseline: orderOf(elements)
+        };
+      });
+    },
+    squashHistory: (count = 2) => {
+      set((state) => {
+        var _a, _b;
+        if (state.history.length < count) return state;
+        const startIdx = Math.max(0, state.history.length - count);
+        const toSquash = state.history.slice(startIdx);
+        const netDiffs = /* @__PURE__ */ new Map();
+        for (const entry of toSquash) {
+          for (const diff of entry.diffs) {
+            const existing = netDiffs.get(diff.elementId);
+            if (!existing) {
+              netDiffs.set(diff.elementId, { ...diff });
+            } else {
+              if (diff.type === "delete") {
+                if (existing.type === "add") {
+                  netDiffs.delete(diff.elementId);
+                } else {
+                  netDiffs.set(diff.elementId, {
+                    type: "delete",
+                    elementId: diff.elementId,
+                    before: existing.before
+                  });
+                }
+              } else if (diff.type === "modify") {
+                netDiffs.set(diff.elementId, {
+                  type: existing.type === "add" ? "add" : "modify",
+                  elementId: diff.elementId,
+                  before: existing.before,
+                  after: diff.after
+                });
+              }
+            }
+          }
+        }
+        const squashed = {
+          diffs: Array.from(netDiffs.values()),
+          beforeOrder: (_a = toSquash.find((entry) => entry.beforeOrder)) == null ? void 0 : _a.beforeOrder,
+          afterOrder: (_b = [...toSquash].reverse().find((entry) => entry.afterOrder)) == null ? void 0 : _b.afterOrder,
+          mark: toSquash[toSquash.length - 1].mark,
+          timestamp: Date.now()
+        };
+        const newHistory = [...state.history.slice(0, startIdx), squashed];
+        return {
+          history: newHistory,
+          historyIndex: newHistory.length - 1
+        };
+      });
+    },
+    pauseHistory: () => set({ _historyPaused: true }),
+    resumeHistory: () => set({ _historyPaused: false }),
+    canUndo: () => get().historyIndex >= 0,
+    canRedo: () => {
+      const { historyIndex, history } = get();
+      return historyIndex < history.length - 1;
+    },
+    // ─── Grid ─────────────────────────────────────────────────
+    toggleGrid: () => set((state) => ({ showGrid: !state.showGrid }))
+  }));
+}
+const useCanvasStore = createCanvasStore();
+const SYNC_FIELDS = [
+  "id",
+  "type",
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "isLocked",
+  "isVisible",
+  "sortOrder",
+  "version"
+];
+const STYLE_FIELDS = [
+  "strokeColor",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "strokeStyle",
+  "roughness",
+  "fontSize",
+  "fontFamily"
+];
+function elementToYMap(el, yMap) {
+  const elRecord = el;
+  for (const field of SYNC_FIELDS) {
+    const value = elRecord[field];
+    if (value !== void 0) {
+      yMap.set(field, value);
+    }
+  }
+  if (el.style) {
+    for (const sf of STYLE_FIELDS) {
+      yMap.set(`style.${sf}`, el.style[sf]);
+    }
+  }
+  if (el.boundElements) {
+    yMap.set("boundElements", JSON.stringify(el.boundElements));
+  } else {
+    yMap.set("boundElements", null);
+  }
+  if (el.ports) {
+    yMap.set("ports", JSON.stringify(el.ports));
+  }
+  if ("lineStyle" in el && el.lineStyle) {
+    yMap.set("lineStyle", JSON.stringify(el.lineStyle));
+  }
+  if (el.ports) {
+    yMap.set("ports", JSON.stringify(el.ports));
+  }
+  if ("lineStyle" in el && el.lineStyle) {
+    yMap.set("lineStyle", JSON.stringify(el.lineStyle));
+  }
+  if (el.groupIds) {
+    yMap.set("groupIds", JSON.stringify(el.groupIds));
+  }
+  switch (el.type) {
+    case "rectangle":
+      yMap.set("cornerRadius", el.cornerRadius);
+      break;
+    case "line":
+    case "arrow":
+      yMap.set("points", JSON.stringify(el.points));
+      yMap.set("lineType", el.lineType);
+      if (el.curvature !== void 0) yMap.set("curvature", el.curvature);
+      yMap.set("startBinding", el.startBinding ? JSON.stringify(el.startBinding) : null);
+      yMap.set("endBinding", el.endBinding ? JSON.stringify(el.endBinding) : null);
+      if (el.type === "arrow") {
+        yMap.set("startArrowhead", el.startArrowhead);
+        yMap.set("endArrowhead", el.endArrowhead);
+      }
+      break;
+    case "freedraw":
+      yMap.set("points", JSON.stringify(el.points));
+      break;
+    case "text":
+      yMap.set("text", el.text);
+      yMap.set("containerId", el.containerId);
+      yMap.set("textAlign", el.textAlign);
+      yMap.set("verticalAlign", el.verticalAlign);
+      break;
+    case "image":
+      yMap.set("src", el.src);
+      yMap.set("naturalWidth", el.naturalWidth);
+      yMap.set("naturalHeight", el.naturalHeight);
+      yMap.set("scaleMode", el.scaleMode);
+      yMap.set("crop", el.crop ? JSON.stringify(el.crop) : null);
+      yMap.set("cornerRadius", el.cornerRadius);
+      yMap.set("alt", el.alt);
+      break;
+  }
+}
+function yMapToElement(yMap) {
+  const type = yMap.get("type");
+  const id = yMap.get("id");
+  if (!type || !id) return null;
+  const style = {};
+  for (const sf of STYLE_FIELDS) {
+    const val = yMap.get(`style.${sf}`);
+    if (val !== void 0) {
+      style[sf] = val;
+    }
+  }
+  const base = {
+    id,
+    type,
+    x: yMap.get("x") ?? 0,
+    y: yMap.get("y") ?? 0,
+    width: yMap.get("width") ?? 100,
+    height: yMap.get("height") ?? 100,
+    rotation: yMap.get("rotation") ?? 0,
+    isLocked: yMap.get("isLocked") ?? false,
+    isVisible: yMap.get("isVisible") ?? true,
+    version: yMap.get("version") ?? 0,
+    style,
+    boundElements: safeParseJSON(yMap.get("boundElements")) ?? null,
+    groupIds: safeParseJSON(yMap.get("groupIds")) ?? void 0,
+    sortOrder: yMap.get("sortOrder") ?? void 0,
+    ports: safeParseJSON(yMap.get("ports")) ?? void 0
+  };
+  switch (type) {
+    case "rectangle":
+      base.cornerRadius = yMap.get("cornerRadius") ?? 0;
+      break;
+    case "line":
+    case "arrow":
+      base.points = safeParseJSON(yMap.get("points")) ?? [0, 0, 100, 0];
+      base.lineType = yMap.get("lineType") ?? "sharp";
+      base.curvature = yMap.get("curvature") ?? void 0;
+      base.startBinding = safeParseJSON(yMap.get("startBinding"));
+      base.endBinding = safeParseJSON(yMap.get("endBinding"));
+      if (type === "arrow") {
+        base.startArrowhead = yMap.get("startArrowhead") ?? null;
+        base.endArrowhead = yMap.get("endArrowhead") ?? "arrow";
+      }
+      {
+        const ls = safeParseJSON(yMap.get("lineStyle"));
+        if (ls) base.lineStyle = ls;
+      }
+      break;
+    case "freedraw":
+      base.points = safeParseJSON(yMap.get("points")) ?? [];
+      break;
+    case "text":
+      base.text = yMap.get("text") ?? "";
+      base.containerId = yMap.get("containerId") ?? null;
+      base.textAlign = yMap.get("textAlign") ?? "center";
+      base.verticalAlign = yMap.get("verticalAlign") ?? "middle";
+      break;
+    case "image":
+      base.src = yMap.get("src") ?? "";
+      base.naturalWidth = yMap.get("naturalWidth") ?? 0;
+      base.naturalHeight = yMap.get("naturalHeight") ?? 0;
+      base.scaleMode = yMap.get("scaleMode") ?? "fit";
+      base.crop = safeParseJSON(yMap.get("crop")) ?? null;
+      base.cornerRadius = yMap.get("cornerRadius") ?? 0;
+      base.alt = yMap.get("alt") ?? "";
+      break;
+  }
+  return base;
+}
+function safeParseJSON(json) {
+  if (json == null) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+let _isApplyingRemote = false;
+let _isApplyingLocal = false;
+let _unsubscribe = null;
+let _yObserverCleanup = null;
+let _syncTimer = null;
+let _lastElements = [];
+function startSync(debounceMs = 50) {
+  const doc = getYDoc();
+  const yElements = getYElements();
+  if (!doc || !yElements) {
+    console.warn("[SyncBridge] Cannot start sync — no Yjs doc");
+    return;
+  }
+  stopSync();
+  if (yElements.size > 0) {
+    _isApplyingRemote = true;
+    const elements = yMapCollectionToElements(yElements);
+    useCanvasStore.getState().setElements(elements);
+    _lastElements = elements;
+    _isApplyingRemote = false;
+  } else {
+    const localElements = useCanvasStore.getState().elements;
+    if (localElements.length > 0) {
+      _isApplyingLocal = true;
+      doc.transact(() => {
+        for (const el of localElements) {
+          const yMap = new Y.Map();
+          elementToYMap(el, yMap);
+          yElements.set(el.id, yMap);
+        }
+      }, "local-init");
+      _isApplyingLocal = false;
+    }
+    _lastElements = localElements;
+  }
+  const yObserver = (events, transaction) => {
+    if (transaction.origin === "local-sync" || transaction.origin === "local-init") return;
+    if (_isApplyingLocal) return;
+    _isApplyingRemote = true;
+    const store = useCanvasStore.getState();
+    let elements = [..._lastElements];
+    let changed = false;
+    for (const [key, change] of events.keys) {
+      if (change.action === "add" || change.action === "update") {
+        const yMap = yElements.get(key);
+        if (yMap) {
+          const el = yMapToElement(yMap);
+          if (el) {
+            const idx = elements.findIndex((e) => e.id === key);
+            if (idx >= 0) {
+              elements[idx] = el;
+            } else {
+              elements.push(el);
+            }
+            changed = true;
+          }
+        }
+      } else if (change.action === "delete") {
+        elements = elements.filter((e) => e.id !== key);
+        changed = true;
+      }
+    }
+    if (changed) {
+      elements.sort((a, b) => {
+        if (a.sortOrder && b.sortOrder) {
+          return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+        }
+        return 0;
+      });
+      store.setElements(elements);
+      _lastElements = elements;
+    }
+    _isApplyingRemote = false;
+  };
+  let _deepObserverTimer = null;
+  const _dirtyElementIds = /* @__PURE__ */ new Set();
+  const deepObserver = (events) => {
+    if (_isApplyingLocal) return;
+    for (const event of events) {
+      let target = event.target;
+      while (target && !(target instanceof Y.Map && target.parent === yElements)) {
+        target = target.parent;
+      }
+      if (target instanceof Y.Map) {
+        const id = target.get("id");
+        if (id) _dirtyElementIds.add(id);
+      }
+    }
+    if (_deepObserverTimer) clearTimeout(_deepObserverTimer);
+    _deepObserverTimer = setTimeout(() => {
+      if (_dirtyElementIds.size === 0 || _isApplyingLocal) return;
+      _isApplyingRemote = true;
+      let elements = [..._lastElements];
+      let changed = false;
+      for (const id of _dirtyElementIds) {
+        const yMap = yElements.get(id);
+        if (!yMap) continue;
+        const el = yMapToElement(yMap);
+        if (!el) continue;
+        const idx = elements.findIndex((e) => e.id === id);
+        if (idx >= 0) {
+          elements[idx] = el;
+          changed = true;
+        }
+      }
+      _dirtyElementIds.clear();
+      if (changed) {
+        useCanvasStore.getState().setElements(elements);
+        _lastElements = elements;
+      }
+      _isApplyingRemote = false;
+    }, 16);
+  };
+  yElements.observe(yObserver);
+  yElements.observeDeep(deepObserver);
+  _yObserverCleanup = () => {
+    yElements.unobserve(yObserver);
+    yElements.unobserveDeep(deepObserver);
+    if (_deepObserverTimer) clearTimeout(_deepObserverTimer);
+    _dirtyElementIds.clear();
+  };
+  _unsubscribe = useCanvasStore.subscribe(
+    (state) => {
+      if (_isApplyingRemote) return;
+      if (state.elements === _lastElements) return;
+      if (_syncTimer) clearTimeout(_syncTimer);
+      _syncTimer = setTimeout(() => {
+        syncLocalToYjs(state.elements, yElements, doc);
+      }, debounceMs);
+    }
+  );
+}
+function stopSync() {
+  if (_unsubscribe) {
+    _unsubscribe();
+    _unsubscribe = null;
+  }
+  if (_yObserverCleanup) {
+    _yObserverCleanup();
+    _yObserverCleanup = null;
+  }
+  if (_syncTimer) {
+    clearTimeout(_syncTimer);
+    _syncTimer = null;
+  }
+  _lastElements = [];
+}
+function syncLocalToYjs(elements, yElements, doc) {
+  _isApplyingLocal = true;
+  _lastElements = elements;
+  const localMap = /* @__PURE__ */ new Map();
+  for (const el of elements) {
+    localMap.set(el.id, el);
+  }
+  doc.transact(() => {
+    for (const [id] of yElements.entries()) {
+      if (!localMap.has(id)) {
+        yElements.delete(id);
+      }
+    }
+    for (const el of elements) {
+      let yMap = yElements.get(el.id);
+      if (!yMap) {
+        yMap = new Y.Map();
+        elementToYMap(el, yMap);
+        yElements.set(el.id, yMap);
+      } else {
+        updateYMapFromElement(el, yMap);
+      }
+    }
+  }, "local-sync");
+  _isApplyingLocal = false;
+}
+function updateYMapFromElement(el, yMap) {
+  const elRecord = el;
+  for (const field of SYNC_FIELDS) {
+    const value = elRecord[field];
+    if (value !== yMap.get(field)) {
+      yMap.set(field, value);
+    }
+  }
+  if (el.style) {
+    for (const sf of STYLE_FIELDS) {
+      const val = el.style[sf];
+      if (val !== yMap.get(`style.${sf}`)) {
+        yMap.set(`style.${sf}`, val);
+      }
+    }
+  }
+  const beJson = el.boundElements ? JSON.stringify(el.boundElements) : null;
+  if (beJson !== yMap.get("boundElements")) {
+    yMap.set("boundElements", beJson);
+  }
+  switch (el.type) {
+    case "rectangle":
+      if (el.cornerRadius !== yMap.get("cornerRadius")) {
+        yMap.set("cornerRadius", el.cornerRadius);
+      }
+      break;
+    case "line":
+    case "arrow": {
+      const ptsJson = JSON.stringify(el.points);
+      if (ptsJson !== yMap.get("points")) yMap.set("points", ptsJson);
+      if (el.lineType !== yMap.get("lineType")) yMap.set("lineType", el.lineType);
+      if (el.curvature !== yMap.get("curvature")) yMap.set("curvature", el.curvature);
+      const sbJson = el.startBinding ? JSON.stringify(el.startBinding) : null;
+      if (sbJson !== yMap.get("startBinding")) yMap.set("startBinding", sbJson);
+      const ebJson = el.endBinding ? JSON.stringify(el.endBinding) : null;
+      if (ebJson !== yMap.get("endBinding")) yMap.set("endBinding", ebJson);
+      if (el.type === "arrow") {
+        if (el.startArrowhead !== yMap.get("startArrowhead")) yMap.set("startArrowhead", el.startArrowhead);
+        if (el.endArrowhead !== yMap.get("endArrowhead")) yMap.set("endArrowhead", el.endArrowhead);
+      }
+      break;
+    }
+    case "freedraw": {
+      const fpJson = JSON.stringify(el.points);
+      if (fpJson !== yMap.get("points")) yMap.set("points", fpJson);
+      break;
+    }
+    case "text":
+      if (el.text !== yMap.get("text")) yMap.set("text", el.text);
+      if (el.containerId !== yMap.get("containerId")) yMap.set("containerId", el.containerId);
+      if (el.textAlign !== yMap.get("textAlign")) yMap.set("textAlign", el.textAlign);
+      if (el.verticalAlign !== yMap.get("verticalAlign")) yMap.set("verticalAlign", el.verticalAlign);
+      break;
+    case "image":
+      if (el.src !== yMap.get("src")) yMap.set("src", el.src);
+      if (el.naturalWidth !== yMap.get("naturalWidth")) yMap.set("naturalWidth", el.naturalWidth);
+      if (el.naturalHeight !== yMap.get("naturalHeight")) yMap.set("naturalHeight", el.naturalHeight);
+      if (el.scaleMode !== yMap.get("scaleMode")) yMap.set("scaleMode", el.scaleMode);
+      const cropJson = el.crop ? JSON.stringify(el.crop) : null;
+      if (cropJson !== yMap.get("crop")) yMap.set("crop", cropJson);
+      if (el.cornerRadius !== yMap.get("cornerRadius")) yMap.set("cornerRadius", el.cornerRadius);
+      if (el.alt !== yMap.get("alt")) yMap.set("alt", el.alt);
+      break;
+  }
+}
+function yMapCollectionToElements(yElements) {
+  const elements = [];
+  for (const [, yMap] of yElements.entries()) {
+    const el = yMapToElement(yMap);
+    if (el) elements.push(el);
+  }
+  elements.sort((a, b) => {
+    if (a.sortOrder && b.sortOrder) {
+      return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+    }
+    return 0;
+  });
+  return elements;
+}
+const syncBridge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  startSync,
+  stopSync
+}, Symbol.toStringTag, { value: "Module" }));
+class CollaborationManager {
+  constructor() {
+    // Provider state
+    __publicField(this, "_doc", null);
+    __publicField(this, "_provider", null);
+    __publicField(this, "_config", null);
+    // Sync state
+    __publicField(this, "_isApplyingRemote", false);
+    __publicField(this, "_isApplyingLocal", false);
+    __publicField(this, "_lastElements", []);
+    __publicField(this, "_syncTimer", null);
+    __publicField(this, "_deepTimer", null);
+    __publicField(this, "_dirtyIds", /* @__PURE__ */ new Set());
+    __publicField(this, "_storeUnsub", null);
+    __publicField(this, "_yObserverCleanup", null);
+    // Status listeners
+    __publicField(this, "_statusListeners", /* @__PURE__ */ new Set());
+  }
+  // ─── Provider Lifecycle ───────────────────────────────────
+  get doc() {
+    return this._doc;
+  }
+  get provider() {
+    return this._provider;
+  }
+  get config() {
+    return this._config;
+  }
+  get isActive() {
+    return this._provider !== null && this._provider.wsconnected;
+  }
+  /**
+   * Connect to a collaboration room.
+   * If already connected, disconnects first.
+   */
+  connect(config) {
+    this.dispose();
+    this._config = config;
+    this._doc = new Y.Doc();
+    this._provider = new WebsocketProvider(
+      config.serverUrl,
+      config.roomName,
+      this._doc,
+      {
+        connect: true,
+        params: config.authToken ? { token: config.authToken } : void 0
+      }
+    );
+    this._provider.awareness.setLocalState({
+      user: config.user,
+      cursor: null,
+      selectedIds: []
+    });
+    this._provider.on("status", (event) => {
+      const status = event.status;
+      for (const listener of this._statusListeners) {
+        listener(status);
+      }
+    });
+    return { doc: this._doc, provider: this._provider };
+  }
+  /**
+   * Get the shared Y.Map for elements.
+   */
+  getYElements() {
+    var _a;
+    return (_a = this._doc) == null ? void 0 : _a.getMap("elements");
+  }
+  // ─── Awareness ────────────────────────────────────────────
+  updateAwareness(update) {
+    if (!this._provider) return;
+    const current = this._provider.awareness.getLocalState();
+    this._provider.awareness.setLocalState({ ...current, ...update });
+  }
+  getRemoteAwareness() {
+    if (!this._provider) return /* @__PURE__ */ new Map();
+    const all = this._provider.awareness.getStates();
+    const localId = this._provider.awareness.clientID;
+    const remote = /* @__PURE__ */ new Map();
+    for (const [clientId, state] of all) {
+      if (clientId !== localId && state && state.user) {
+        remote.set(clientId, state);
+      }
+    }
+    return remote;
+  }
+  // ─── Status Listeners ─────────────────────────────────────
+  onStatusChange(listener) {
+    this._statusListeners.add(listener);
+    return () => {
+      this._statusListeners.delete(listener);
+    };
+  }
+  // ─── Sync Bridge ─────────────────────────────────────────
+  /**
+   * Start bidirectional sync between Yjs and the provided store.
+   */
+  startSync(store, debounceMs = 50) {
+    const doc = this._doc;
+    const yElements = this.getYElements();
+    if (!doc || !yElements) {
+      console.warn("[CollaborationManager] Cannot start sync — not connected");
+      return;
+    }
+    this.stopSync();
+    if (yElements.size > 0) {
+      this._isApplyingRemote = true;
+      const elements = this._yMapCollectionToElements(yElements);
+      store.setElements(elements);
+      this._lastElements = elements;
+      this._isApplyingRemote = false;
+    } else {
+      const localElements = store.getState().elements;
+      if (localElements.length > 0) {
+        this._isApplyingLocal = true;
+        doc.transact(() => {
+          for (const el of localElements) {
+            const yMap = new Y.Map();
+            elementToYMap(el, yMap);
+            yElements.set(el.id, yMap);
+          }
+        }, "local-init");
+        this._isApplyingLocal = false;
+      }
+      this._lastElements = localElements;
+    }
+    const yObserver = (events, transaction) => {
+      if (transaction.origin === "local-sync" || transaction.origin === "local-init") return;
+      if (this._isApplyingLocal) return;
+      this._isApplyingRemote = true;
+      let elements = [...this._lastElements];
+      let changed = false;
+      for (const [key, change] of events.keys) {
+        if (change.action === "add" || change.action === "update") {
+          const yMap = yElements.get(key);
+          if (yMap) {
+            const el = yMapToElement(yMap);
+            if (el) {
+              const idx = elements.findIndex((e) => e.id === key);
+              if (idx >= 0) elements[idx] = el;
+              else elements.push(el);
+              changed = true;
+            }
+          }
+        } else if (change.action === "delete") {
+          elements = elements.filter((e) => e.id !== key);
+          changed = true;
+        }
+      }
+      if (changed) {
+        elements.sort((a, b) => {
+          if (a.sortOrder && b.sortOrder) {
+            return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+          }
+          return 0;
+        });
+        store.setElements(elements);
+        this._lastElements = elements;
+      }
+      this._isApplyingRemote = false;
+    };
+    const deepObserver = (events) => {
+      if (this._isApplyingLocal) return;
+      for (const event of events) {
+        let target = event.target;
+        while (target && !(target instanceof Y.Map && target.parent === yElements)) {
+          target = target.parent;
+        }
+        if (target instanceof Y.Map) {
+          const id = target.get("id");
+          if (id) this._dirtyIds.add(id);
+        }
+      }
+      if (this._deepTimer) clearTimeout(this._deepTimer);
+      this._deepTimer = setTimeout(() => {
+        if (this._dirtyIds.size === 0 || this._isApplyingLocal) return;
+        this._isApplyingRemote = true;
+        let elements = [...this._lastElements];
+        let changed = false;
+        for (const id of this._dirtyIds) {
+          const yMap = yElements.get(id);
+          if (!yMap) continue;
+          const el = yMapToElement(yMap);
+          if (!el) continue;
+          const idx = elements.findIndex((e) => e.id === id);
+          if (idx >= 0) {
+            elements[idx] = el;
+            changed = true;
+          }
+        }
+        this._dirtyIds.clear();
+        if (changed) {
+          store.setElements(elements);
+          this._lastElements = elements;
+        }
+        this._isApplyingRemote = false;
+      }, 16);
+    };
+    yElements.observe(yObserver);
+    yElements.observeDeep(deepObserver);
+    this._yObserverCleanup = () => {
+      yElements.unobserve(yObserver);
+      yElements.unobserveDeep(deepObserver);
+      if (this._deepTimer) clearTimeout(this._deepTimer);
+      this._dirtyIds.clear();
+    };
+    this._storeUnsub = store.subscribe((state) => {
+      if (this._isApplyingRemote) return;
+      if (state.elements === this._lastElements) return;
+      if (this._syncTimer) clearTimeout(this._syncTimer);
+      this._syncTimer = setTimeout(() => {
+        this._syncLocalToYjs(state.elements, yElements, doc);
+      }, debounceMs);
+    });
+  }
+  stopSync() {
+    var _a, _b;
+    (_a = this._storeUnsub) == null ? void 0 : _a.call(this);
+    this._storeUnsub = null;
+    (_b = this._yObserverCleanup) == null ? void 0 : _b.call(this);
+    this._yObserverCleanup = null;
+    if (this._syncTimer) {
+      clearTimeout(this._syncTimer);
+      this._syncTimer = null;
+    }
+    this._lastElements = [];
+  }
+  // ─── Dispose ──────────────────────────────────────────────
+  dispose() {
+    this.stopSync();
+    if (this._provider) {
+      this._provider.awareness.setLocalState(null);
+      this._provider.disconnect();
+      this._provider.destroy();
+      this._provider = null;
+    }
+    if (this._doc) {
+      this._doc.destroy();
+      this._doc = null;
+    }
+    this._config = null;
+    this._statusListeners.clear();
+  }
+  // ─── Private ──────────────────────────────────────────────
+  _syncLocalToYjs(elements, yElements, doc) {
+    this._isApplyingLocal = true;
+    this._lastElements = elements;
+    const localMap = /* @__PURE__ */ new Map();
+    for (const el of elements) localMap.set(el.id, el);
+    doc.transact(() => {
+      for (const [id] of yElements.entries()) {
+        if (!localMap.has(id)) yElements.delete(id);
+      }
+      for (const el of elements) {
+        let yMap = yElements.get(el.id);
+        if (!yMap) {
+          yMap = new Y.Map();
+          elementToYMap(el, yMap);
+          yElements.set(el.id, yMap);
+        } else {
+          this._updateYMapFromElement(el, yMap);
+        }
+      }
+    }, "local-sync");
+    this._isApplyingLocal = false;
+  }
+  _updateYMapFromElement(el, yMap) {
+    const SYNC_FIELDS2 = [
+      "id",
+      "type",
+      "x",
+      "y",
+      "width",
+      "height",
+      "rotation",
+      "isLocked",
+      "isVisible",
+      "sortOrder"
+    ];
+    const STYLE_FIELDS2 = [
+      "strokeColor",
+      "fillColor",
+      "strokeWidth",
+      "opacity",
+      "strokeStyle",
+      "roughness",
+      "fontSize",
+      "fontFamily"
+    ];
+    const elRecord = el;
+    for (const field of SYNC_FIELDS2) {
+      const value = elRecord[field];
+      if (value !== yMap.get(field)) yMap.set(field, value);
+    }
+    if (el.style) {
+      for (const sf of STYLE_FIELDS2) {
+        const val = el.style[sf];
+        if (val !== yMap.get(`style.${sf}`)) yMap.set(`style.${sf}`, val);
+      }
+    }
+    const beJson = el.boundElements ? JSON.stringify(el.boundElements) : null;
+    if (beJson !== yMap.get("boundElements")) yMap.set("boundElements", beJson);
+    switch (el.type) {
+      case "rectangle":
+        if (el.cornerRadius !== yMap.get("cornerRadius")) yMap.set("cornerRadius", el.cornerRadius);
+        break;
+      case "line":
+      case "arrow": {
+        const ptsJson = JSON.stringify(el.points);
+        if (ptsJson !== yMap.get("points")) yMap.set("points", ptsJson);
+        if (el.lineType !== yMap.get("lineType")) yMap.set("lineType", el.lineType);
+        if (el.curvature !== yMap.get("curvature")) yMap.set("curvature", el.curvature);
+        const sbJson = el.startBinding ? JSON.stringify(el.startBinding) : null;
+        if (sbJson !== yMap.get("startBinding")) yMap.set("startBinding", sbJson);
+        const ebJson = el.endBinding ? JSON.stringify(el.endBinding) : null;
+        if (ebJson !== yMap.get("endBinding")) yMap.set("endBinding", ebJson);
+        if (el.type === "arrow") {
+          if (el.startArrowhead !== yMap.get("startArrowhead")) yMap.set("startArrowhead", el.startArrowhead);
+          if (el.endArrowhead !== yMap.get("endArrowhead")) yMap.set("endArrowhead", el.endArrowhead);
+        }
+        break;
+      }
+      case "freedraw": {
+        const fpJson = JSON.stringify(el.points);
+        if (fpJson !== yMap.get("points")) yMap.set("points", fpJson);
+        break;
+      }
+      case "text":
+        if (el.text !== yMap.get("text")) yMap.set("text", el.text);
+        if (el.containerId !== yMap.get("containerId")) yMap.set("containerId", el.containerId);
+        if (el.textAlign !== yMap.get("textAlign")) yMap.set("textAlign", el.textAlign);
+        if (el.verticalAlign !== yMap.get("verticalAlign")) yMap.set("verticalAlign", el.verticalAlign);
+        break;
+      case "image":
+        if (el.src !== yMap.get("src")) yMap.set("src", el.src);
+        if (el.naturalWidth !== yMap.get("naturalWidth")) yMap.set("naturalWidth", el.naturalWidth);
+        if (el.naturalHeight !== yMap.get("naturalHeight")) yMap.set("naturalHeight", el.naturalHeight);
+        if (el.scaleMode !== yMap.get("scaleMode")) yMap.set("scaleMode", el.scaleMode);
+        const cropJson = el.crop ? JSON.stringify(el.crop) : null;
+        if (cropJson !== yMap.get("crop")) yMap.set("crop", cropJson);
+        if (el.cornerRadius !== yMap.get("cornerRadius")) yMap.set("cornerRadius", el.cornerRadius);
+        if (el.alt !== yMap.get("alt")) yMap.set("alt", el.alt);
+        break;
+    }
+  }
+  _yMapCollectionToElements(yElements) {
+    const elements = [];
+    for (const [, yMap] of yElements.entries()) {
+      const el = yMapToElement(yMap);
+      if (el) elements.push(el);
+    }
+    elements.sort((a, b) => {
+      if (a.sortOrder && b.sortOrder) {
+        return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+      }
+      return 0;
+    });
+    return elements;
+  }
+}
+function dataUrlToBlobUrl(dataUrl) {
+  const commaIdx = dataUrl.indexOf(",");
+  if (commaIdx === -1) throw new Error("Invalid data URL");
+  const meta = dataUrl.slice(5, commaIdx);
+  const isBase64 = meta.endsWith(";base64");
+  const encoded = dataUrl.slice(commaIdx + 1);
+  let bytes;
+  if (isBase64) {
+    const binary = atob(encoded);
+    bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+  } else {
+    const text = decodeURIComponent(encoded);
+    bytes = new TextEncoder().encode(text);
+  }
+  const blob = new Blob([bytes], { type: "application/javascript" });
+  return URL.createObjectURL(blob);
+}
+function createWorker(viteWorkerUrl, config) {
+  if (typeof Worker === "undefined") return null;
+  try {
+    const raw = typeof viteWorkerUrl === "function" ? viteWorkerUrl() : viteWorkerUrl;
+    const urlString = raw instanceof URL ? raw.href : String(raw);
+    if (urlString.startsWith("data:")) {
+      const blobUrl = dataUrlToBlobUrl(urlString);
+      return new Worker(blobUrl);
+    }
+    return new Worker(raw instanceof URL ? raw : urlString, { type: "module" });
+  } catch (err) {
+    console.warn("[workerFactory] Worker creation failed, using sync fallback:", err);
+    return null;
+  }
+}
+class SyncWorkerAdapter {
+  constructor(callbacks) {
+    __publicField(this, "_worker", null);
+    __publicField(this, "_callbacks");
+    this._callbacks = callbacks;
+  }
+  /**
+   * Initialize and connect the sync worker.
+   * Uses Vite's `?worker` import syntax for bundling.
+   */
+  connect(config, syncDebounceMs) {
+    this.dispose();
+    this._worker = createWorker(
+      () => "__worker_stub__"
+    );
+    if (!this._worker) {
+      console.warn("[SyncWorkerBridge] Worker creation failed, collaboration disabled");
+      this._callbacks.onStatus("disconnected");
+      return;
+    }
+    this._worker.onmessage = (e) => {
+      const msg = e.data;
+      switch (msg.type) {
+        case "status":
+          this._callbacks.onStatus(msg.status);
+          break;
+        case "remote-update":
+          this._callbacks.onRemoteUpdate(msg.elements);
+          break;
+        case "peers":
+          this._callbacks.onPeers(msg.peers);
+          break;
+        case "error":
+          this._callbacks.onError(msg.message);
+          break;
+      }
+    };
+    this._worker.onerror = (err) => {
+      this._callbacks.onError(`Worker error: ${err.message}`);
+    };
+    this._post({ type: "connect", config, syncDebounceMs });
+  }
+  disconnect() {
+    this._post({ type: "disconnect" });
+  }
+  sendLocalUpdate(elements) {
+    this._post({ type: "local-update", elements });
+  }
+  sendAwareness(update) {
+    this._post({
+      type: "awareness",
+      cursor: update.cursor ?? null,
+      selectedIds: update.selectedIds,
+      activeTool: update.activeTool
+    });
+  }
+  dispose() {
+    if (this._worker) {
+      this._worker.terminate();
+      this._worker = null;
+    }
+  }
+  _post(msg) {
+    var _a;
+    (_a = this._worker) == null ? void 0 : _a.postMessage(msg);
+  }
+}
+let _modulesPromise = null;
+function loadCollabModules() {
+  if (!_modulesPromise) {
+    _modulesPromise = Promise.all([
+      Promise.resolve().then(() => yjsProvider),
+      Promise.resolve().then(() => syncBridge)
+    ]).then(([yjsProvider2, syncBridge2]) => ({ yjsProvider: yjsProvider2, syncBridge: syncBridge2 }));
+  }
+  return _modulesPromise;
+}
+function useCollaboration(config) {
+  const [connectionStatus, setConnectionStatus] = useState("disconnected");
+  const [peers, setPeers] = useState([]);
+  const configRef = useRef(config);
+  configRef.current = config;
+  const throttleRef = useRef((config == null ? void 0 : config.awarenessThrottleMs) ?? 100);
+  const lastCursorUpdateRef = useRef(0);
+  const modulesRef = useRef(null);
+  useEffect(() => {
+    if (!config) {
+      const loaded = modulesRef.current;
+      if (loaded) {
+        loaded.yjsProvider.destroyCollaborationProvider();
+        loaded.syncBridge.stopSync();
+      }
+      setConnectionStatus("disconnected");
+      setPeers([]);
+      return;
+    }
+    let cancelled = false;
+    let cleanup = null;
+    loadCollabModules().then((mods) => {
+      if (cancelled) return;
+      modulesRef.current = mods;
+      const { createCollaborationProvider: createCollaborationProvider2, onStatusChange: onStatusChange2, getRemoteAwareness: getRemoteAwareness2, updateAwareness: updateAwareness2 } = mods.yjsProvider;
+      const { startSync: startSync2, stopSync: stopSync2 } = mods.syncBridge;
+      const { provider } = createCollaborationProvider2(config);
+      startSync2(config.syncDebounceMs ?? 50);
+      const unsubStatus = onStatusChange2(setConnectionStatus);
+      const awarenessHandler = () => {
+        const remote = getRemoteAwareness2();
+        setPeers(Array.from(remote.values()));
+      };
+      provider.awareness.on("change", awarenessHandler);
+      const unsubStore = useCanvasStore.subscribe((state, prevState) => {
+        if (state.selectedIds !== prevState.selectedIds) {
+          updateAwareness2({ selectedIds: state.selectedIds });
+        }
+        if (state.activeTool !== prevState.activeTool) {
+          updateAwareness2({ activeTool: state.activeTool });
+        }
+      });
+      cleanup = () => {
+        unsubStatus();
+        unsubStore();
+        provider.awareness.off("change", awarenessHandler);
+        stopSync2();
+        mods.yjsProvider.destroyCollaborationProvider();
+      };
+    }).catch((err) => {
+      console.error(
+        "[f1ow] Failed to load collaboration modules. Ensure `yjs` and `y-websocket` are installed when collaboration is enabled.",
+        err
+      );
+      setConnectionStatus("disconnected");
+    });
+    return () => {
+      cancelled = true;
+      if (cleanup) cleanup();
+      setConnectionStatus("disconnected");
+      setPeers([]);
+    };
+  }, [
+    // Re-create if server/room/user changes
+    config == null ? void 0 : config.serverUrl,
+    config == null ? void 0 : config.roomName,
+    config == null ? void 0 : config.user.id,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    config == null ? void 0 : config.syncDebounceMs
+  ]);
+  const updateCursor = useCallback((position) => {
+    var _a;
+    const now = Date.now();
+    if (now - lastCursorUpdateRef.current < throttleRef.current) return;
+    lastCursorUpdateRef.current = now;
+    (_a = modulesRef.current) == null ? void 0 : _a.yjsProvider.updateAwareness({ cursor: position });
+  }, []);
+  const disconnect = useCallback(() => {
+    var _a;
+    const provider = (_a = modulesRef.current) == null ? void 0 : _a.yjsProvider.getYProvider();
+    if (provider) provider.disconnect();
+  }, []);
+  const reconnect = useCallback(() => {
+    var _a;
+    const provider = (_a = modulesRef.current) == null ? void 0 : _a.yjsProvider.getYProvider();
+    if (provider) provider.connect();
+  }, []);
+  return {
+    isConnected: connectionStatus === "connected",
+    connectionStatus,
+    peers,
+    disconnect,
+    reconnect,
+    updateCursor
+  };
+}
+const CURSOR_POINTS = [0, 0, 0, 18, 4.5, 14.5, 9, 20, 12, 18, 7.5, 12.5, 14, 12.5, 0, 0];
+const LABEL_FONT_SIZE = 12;
+const LABEL_FONT_FAMILY = "system-ui, -apple-system, sans-serif";
+const LABEL_PADDING_X = 6;
+const LABEL_PADDING_Y = 4;
+const LABEL_OFFSET_X = 14;
+const LABEL_OFFSET_Y = 18;
+const _measureCanvas = {
+  ctx: null,
+  cache: /* @__PURE__ */ new Map()
+};
+function measureTextWidth(text) {
+  const cached = _measureCanvas.cache.get(text);
+  if (cached !== void 0) return cached;
+  if (!_measureCanvas.ctx) {
+    try {
+      const canvas = document.createElement("canvas");
+      _measureCanvas.ctx = canvas.getContext("2d");
+    } catch {
+    }
+  }
+  let width;
+  if (_measureCanvas.ctx) {
+    _measureCanvas.ctx.font = `${LABEL_FONT_SIZE}px ${LABEL_FONT_FAMILY}`;
+    width = _measureCanvas.ctx.measureText(text).width;
+  } else {
+    width = text.length * 7;
+  }
+  if (_measureCanvas.cache.size > 200) {
+    _measureCanvas.cache.clear();
+  }
+  _measureCanvas.cache.set(text, width);
+  return width;
+}
+function isInViewport(wx, wy, viewport, stageW, stageH, margin) {
+  const sx = (wx - viewport.x) * viewport.scale;
+  const sy = (wy - viewport.y) * viewport.scale;
+  return sx >= -margin && sx <= stageW + margin && sy >= -margin && sy <= stageH + margin;
+}
+function isElementInViewport(el, viewport, stageW, stageH, margin) {
+  const cx = el.x + el.width / 2;
+  const cy = el.y + el.height / 2;
+  const halfDiag = Math.sqrt(el.width * el.width + el.height * el.height) / 2;
+  return isInViewport(cx, cy, viewport, stageW, stageH, margin + halfDiag * viewport.scale);
+}
+const CursorOverlay = ({
+  peers,
+  viewport,
+  stageWidth,
+  stageHeight,
+  elements
+}) => {
+  const elementMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const el of elements) map.set(el.id, el);
+    return map;
+  }, [elements]);
+  const invScale = 1 / viewport.scale;
+  const CULL_MARGIN = 150;
+  return /* @__PURE__ */ jsx(Fragment, { children: peers.map((peer) => {
+    if (!peer.cursor && peer.selectedIds.length === 0) return null;
+    const { user } = peer;
+    return /* @__PURE__ */ jsxs(Group, { children: [
+      peer.selectedIds.map((selId) => {
+        const el = elementMap.get(selId);
+        if (!el) return null;
+        if (!isElementInViewport(el, viewport, stageWidth, stageHeight, CULL_MARGIN)) {
+          return null;
+        }
+        const pad = 3 * invScale;
+        return /* @__PURE__ */ jsx(
+          Rect,
+          {
+            x: el.x + el.width / 2,
+            y: el.y + el.height / 2,
+            offsetX: el.width / 2 + pad,
+            offsetY: el.height / 2 + pad,
+            width: el.width + pad * 2,
+            height: el.height + pad * 2,
+            rotation: el.rotation ?? 0,
+            stroke: user.color,
+            strokeWidth: 2 * invScale,
+            dash: [6 * invScale, 4 * invScale],
+            cornerRadius: 3 * invScale,
+            listening: false,
+            perfectDrawEnabled: false
+          },
+          selId
+        );
+      }),
+      peer.cursor && isInViewport(
+        peer.cursor.x,
+        peer.cursor.y,
+        viewport,
+        stageWidth,
+        stageHeight,
+        CULL_MARGIN
+      ) && /* @__PURE__ */ jsxs(
+        Group,
+        {
+          x: peer.cursor.x,
+          y: peer.cursor.y,
+          scaleX: invScale,
+          scaleY: invScale,
+          listening: false,
+          children: [
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                points: CURSOR_POINTS,
+                fill: user.color,
+                stroke: "#ffffff",
+                strokeWidth: 1,
+                closed: true,
+                perfectDrawEnabled: false
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Rect,
+              {
+                x: LABEL_OFFSET_X,
+                y: LABEL_OFFSET_Y,
+                width: measureTextWidth(user.name) + LABEL_PADDING_X * 2,
+                height: LABEL_FONT_SIZE + LABEL_PADDING_Y * 2,
+                fill: user.color,
+                cornerRadius: 4,
+                listening: false,
+                perfectDrawEnabled: false
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                x: LABEL_OFFSET_X + LABEL_PADDING_X,
+                y: LABEL_OFFSET_Y + LABEL_PADDING_Y,
+                text: user.name,
+                fontSize: LABEL_FONT_SIZE,
+                fontFamily: LABEL_FONT_FAMILY,
+                fill: "#ffffff",
+                listening: false,
+                perfectDrawEnabled: false
+              }
+            )
+          ]
+        }
+      )
+    ] }, user.id);
+  }) });
+};
+const CursorOverlay_default = React.memo(CursorOverlay);
+export {
+  CollaborationManager,
+  CursorOverlay_default as CursorOverlay,
+  STYLE_FIELDS,
+  SYNC_FIELDS,
+  SyncWorkerAdapter,
+  createCollaborationProvider,
+  destroyCollaborationProvider,
+  elementToYMap,
+  getRemoteAwareness,
+  getYDoc,
+  getYElements,
+  getYProvider,
+  isCollaborationActive,
+  onStatusChange,
+  startSync,
+  stopSync,
+  updateAwareness,
+  useCollaboration,
+  yMapToElement
+};