f1ow 0.1.5 → 1.0.0

package/dist/f1ow.umd.cjs

@@ -886,6 +886,58 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     result.push(points[points.length - 2], points[points.length - 1]);
     return result;
   }
+  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 len2 = Math.sqrt(dx * dx + dy * dy);
+    if (len2 === 0) return { x: mx, y: my };
+    const nx = -dy / len2;
+    const ny = dx / len2;
+    const offset = len2 * 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 quadBezierTangent(p0, cp, p2, t) {
+    const mt = 1 - t;
+    return {
+      x: 2 * mt * (cp.x - p0.x) + 2 * t * (p2.x - cp.x),
+      y: 2 * mt * (cp.y - p0.y) + 2 * t * (p2.y - cp.y)
+    };
+  }
+  function curveArrowPrev(start, cp, end, atEnd) {
+    if (atEnd) {
+      const tan = quadBezierTangent(start, cp, end, 1);
+      const len2 = Math.sqrt(tan.x * tan.x + tan.y * tan.y) || 1;
+      return { x: end.x - tan.x / len2 * 20, y: end.y - tan.y / len2 * 20 };
+    } else {
+      const tan = quadBezierTangent(start, cp, end, 0);
+      const len2 = Math.sqrt(tan.x * tan.x + tan.y * tan.y) || 1;
+      return { x: start.x + tan.x / len2 * 20, y: start.y + tan.y / len2 * 20 };
+    }
+  }
+  function curvatureFromDragPoint(start, end, dragWorld) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const len2 = Math.sqrt(dx * dx + dy * dy);
+    if (len2 === 0) return CURVE_RATIO;
+    const nx = -dy / len2;
+    const ny = dx / len2;
+    const mx = (start.x + end.x) / 2;
+    const my = (start.y + end.y) / 2;
+    const vx = dragWorld.x - mx;
+    const vy = dragWorld.y - my;
+    const projDist = vx * nx + vy * ny;
+    return 2 * projDist / len2;
+  }
   const CONNECTABLE_TYPES = /* @__PURE__ */ new Set(["rectangle", "ellipse", "diamond", "text", "image"]);
   function isConnectable(el) {
     return CONNECTABLE_TYPES.has(el.type);
@@ -1312,6 +1364,71 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
   }
+  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 urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
   let nanoid = (size = 21) => {
     let id = "";
@@ -1836,7 +1953,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function toSet(arr) {
     return new Set(arr);
   }
-  const ZOOM_STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5];
+  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));
@@ -2581,58 +2698,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return [];
     }
   }
-  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 len2 = Math.sqrt(dx * dx + dy * dy);
-    if (len2 === 0) return { x: mx, y: my };
-    const nx = -dy / len2;
-    const ny = dx / len2;
-    const offset = len2 * 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 quadBezierTangent(p0, cp, p2, t) {
-    const mt = 1 - t;
-    return {
-      x: 2 * mt * (cp.x - p0.x) + 2 * t * (p2.x - cp.x),
-      y: 2 * mt * (cp.y - p0.y) + 2 * t * (p2.y - cp.y)
-    };
-  }
-  function curveArrowPrev(start, cp, end, atEnd) {
-    if (atEnd) {
-      const tan = quadBezierTangent(start, cp, end, 1);
-      const len2 = Math.sqrt(tan.x * tan.x + tan.y * tan.y) || 1;
-      return { x: end.x - tan.x / len2 * 20, y: end.y - tan.y / len2 * 20 };
-    } else {
-      const tan = quadBezierTangent(start, cp, end, 0);
-      const len2 = Math.sqrt(tan.x * tan.x + tan.y * tan.y) || 1;
-      return { x: start.x + tan.x / len2 * 20, y: start.y + tan.y / len2 * 20 };
-    }
-  }
-  function curvatureFromDragPoint(start, end, dragWorld) {
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    const len2 = Math.sqrt(dx * dx + dy * dy);
-    if (len2 === 0) return CURVE_RATIO;
-    const nx = -dy / len2;
-    const ny = dx / len2;
-    const mx = (start.x + end.x) / 2;
-    const my = (start.y + end.y) / 2;
-    const vx = dragWorld.x - mx;
-    const vy = dragWorld.y - my;
-    const projDist = vx * nx + vy * ny;
-    return 2 * projDist / len2;
-  }
   const selectTool = {
     name: "select",
     onMouseDown(e, pos, ctx) {
@@ -3335,7 +3400,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       width: dims.width,
       height: dims.height,
       rotation: 0,
-      style: { ...style, fillColor: "transparent" },
+      style: { ...style, fillColor: "transparent", strokeColor: "transparent", strokeWidth: 0 },
       isLocked: false,
       isVisible: true,
       boundElements: null,
@@ -5587,7 +5652,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     );
   };
   const FreeDrawShape = React.memo(FreeDrawShape$1);
-  const LINE_HEIGHT = 1.18;
+  const LABEL_PADDING_H = 8;
+  const LABEL_PADDING_V = 4;
+  const LABEL_CORNER = 4;
+  const LABEL_LINE_HEIGHT = 1.18;
+  const LABEL_MIN_WIDTH = 10;
+  let _measureCanvas$1 = null;
+  function getMeasureCtx() {
+    if (!_measureCanvas$1) {
+      _measureCanvas$1 = document.createElement("canvas");
+    }
+    return _measureCanvas$1.getContext("2d");
+  }
+  function measureLabelText(text, fontSize, fontFamily) {
+    const ctx = getMeasureCtx();
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    const metrics = ctx.measureText(text || " ");
+    return {
+      width: Math.ceil(metrics.width),
+      height: Math.ceil(fontSize * LABEL_LINE_HEIGHT)
+    };
+  }
+  function computePillSize(textWidth, textHeight) {
+    return {
+      width: Math.max(LABEL_MIN_WIDTH, textWidth) + LABEL_PADDING_H * 2,
+      height: textHeight + LABEL_PADDING_V * 2
+    };
+  }
+  const LINE_HEIGHT = LABEL_LINE_HEIGHT;
   const TextShape$1 = ({
     element,
     isSelected,
@@ -5604,6 +5696,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const { id, x, y, width, height, rotation, style, text, containerId, textAlign, verticalAlign, isLocked } = element;
     const textRef = React.useRef(null);
     const isEditingRef = React.useRef(false);
+    const [isEditingState, setIsEditingState] = React.useState(false);
     const autoEditDoneRef = React.useRef(false);
     const isBound = !!containerId;
     const isDraggable = !isBound && !isLocked && !isGrouped;
@@ -5612,36 +5705,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return allElements.find((el) => el.id === containerId) ?? null;
     }, [containerId, allElements]);
     const boundPos = React.useMemo(() => {
-      var _a, _b;
       if (!container) return { x, y };
-      if (container.type === "arrow" || container.type === "line") {
-        const conn = container;
-        const pts = conn.points;
-        const startPt = { x: pts[0], y: pts[1] };
-        const endPt = { x: pts[pts.length - 2], y: pts[pts.length - 1] };
-        let midX, midY;
-        if (conn.lineType === "curved") {
-          const cp = computeCurveControlPoint(startPt, endPt, conn.curvature ?? CURVE_RATIO);
-          const mid = quadBezierAt(startPt, cp, endPt, 0.5);
-          midX = conn.x + mid.x;
-          midY = conn.y + mid.y;
-        } else {
-          midX = conn.x + (startPt.x + endPt.x) / 2;
-          midY = conn.y + (startPt.y + endPt.y) / 2;
-        }
-        const textWidth2 = Math.max(80, width || 80);
-        const textHeight = ((_a = textRef.current) == null ? void 0 : _a.height()) ?? height;
-        return {
-          x: midX - textWidth2 / 2,
-          y: midY - textHeight / 2,
-          width: textWidth2
-        };
-      }
       const PADDING2 = 4;
       const cw = container.width - PADDING2 * 2;
       const textWidth = Math.max(20, cw);
       const bx = container.x + PADDING2;
-      const textActualHeight = ((_b = textRef.current) == null ? void 0 : _b.height()) ?? height;
+      const textActualHeight = height;
       let by;
       if (verticalAlign === "top") {
         by = container.y + PADDING2;
@@ -5651,7 +5720,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         by = container.y + (container.height - textActualHeight) / 2;
       }
       return { x: bx, y: by, width: textWidth };
-    }, [container, x, y, height, verticalAlign]);
+    }, [container, x, y, width, height, verticalAlign]);
     const syncSize = React.useCallback(() => {
       const node = textRef.current;
       if (!node || isEditingRef.current) return;
@@ -5673,8 +5742,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         onChange(id, updates);
       }
     }, [id, height, width, isBound, onChange]);
+    const syncSizeInitRef = React.useRef(true);
     React.useEffect(() => {
-      requestAnimationFrame(syncSize);
+      if (syncSizeInitRef.current) {
+        syncSizeInitRef.current = false;
+        if (text && height > 0) return;
+      }
+      const id2 = requestAnimationFrame(syncSize);
+      return () => cancelAnimationFrame(id2);
     }, [text, style.fontSize, style.fontFamily, syncSize]);
     const openEditor = React.useCallback(() => {
       const textNode = textRef.current;
@@ -5682,6 +5757,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const stage = textNode.getStage();
       if (!stage) return;
       isEditingRef.current = true;
+      setIsEditingState(true);
       onEditStart == null ? void 0 : onEditStart(id);
       const stageContainer = stage.container();
       const absTransform = textNode.getAbsoluteTransform().copy();
@@ -5704,7 +5780,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         containerScreenH = container.height * stageScaleX;
       }
       const nodeWidth = textNode.width();
-      const screenWidth = isBound ? containerScreenW - PADDING_SCREEN * 2 : Math.max(nodeWidth, 100) * stageScaleX;
+      const screenWidth = isBound ? containerScreenW - PADDING_SCREEN * 2 : Math.max(nodeWidth, 60) * stageScaleX;
       const screenLeft = isBound ? containerScreenLeft + PADDING_SCREEN : absPos.x;
       const originalText = text;
       const textarea = document.createElement("textarea");
@@ -5778,7 +5854,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         if (!isBound) {
           textarea.style.width = "auto";
-          textarea.style.width = `${Math.max(textarea.scrollWidth, 100 * stageScaleX)}px`;
+          const minW = 100 * stageScaleX;
+          textarea.style.width = `${Math.max(textarea.scrollWidth, minW)}px`;
         }
       };
       textarea.addEventListener("input", autoGrow);
@@ -5791,6 +5868,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const finishEdit = () => {
         if (!isEditingRef.current) return;
         isEditingRef.current = false;
+        setIsEditingState(false);
         const newText = cancelled ? originalText : textarea.value;
         const isEmpty = newText.trim() === "";
         textarea.removeEventListener("input", autoGrow);
@@ -5806,9 +5884,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         onEditEnd == null ? void 0 : onEditEnd(id, isEmpty);
       };
-      const handleBlur = () => {
-        finishEdit();
-      };
+      const handleBlur = () => finishEdit();
       const handleKeyDown = (e) => {
         e.stopPropagation();
         if (e.key === "Escape") {
@@ -5859,7 +5935,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         wrap: isBound ? "word" : "none",
         rotation: isBound ? (container == null ? void 0 : container.rotation) ?? rotation : rotation,
         transformsEnabled: (isBound ? (container == null ? void 0 : container.rotation) ?? rotation : rotation) ? "all" : "position",
-        visible: !(autoEdit && !isEditingRef.current && !text),
+        visible: !isEditingState && !(autoEdit && !text),
         opacity: text ? style.opacity : isBound ? 0 : 0.4,
         draggable: isDraggable,
         listening: !isBound,
@@ -5909,6 +5985,263 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     );
   };
   const TextShape = React.memo(TextShape$1);
+  const TextLabel$1 = ({
+    element,
+    connector,
+    onChange,
+    autoEdit,
+    onEditStart,
+    onEditEnd
+  }) => {
+    const { id, x, y, width, height, style, text } = element;
+    const labelFontSize = style.fontSize * 0.9;
+    const textRef = React.useRef(null);
+    const bgRectRef = React.useRef(null);
+    const isEditingRef = React.useRef(false);
+    const [isEditingState, setIsEditingState] = React.useState(false);
+    const autoEditDoneRef = React.useRef(false);
+    const boundPos = React.useMemo(() => {
+      const textWidth = Math.max(LABEL_MIN_WIDTH, width || 60);
+      const pos = computeConnectorLabelPosition(connector, textWidth, height);
+      return { x: pos.x, y: pos.y, width: textWidth };
+    }, [connector, width, height]);
+    const effectiveX = boundPos.x;
+    const effectiveY = boundPos.y;
+    const syncSize = React.useCallback(() => {
+      const node = textRef.current;
+      if (!node || isEditingRef.current) return;
+      const measuredHeight = node.height();
+      const updates = {};
+      let needsUpdate = false;
+      if (Math.abs(measuredHeight - height) > 1) {
+        updates.height = measuredHeight;
+        needsUpdate = true;
+      }
+      const measuredWidth = measureLabelText(text || " ", labelFontSize, style.fontFamily).width;
+      if (Math.abs(measuredWidth - width) > 1) {
+        updates.width = measuredWidth;
+        needsUpdate = true;
+      }
+      if (needsUpdate) {
+        onChange(id, updates);
+      }
+    }, [id, text, height, width, labelFontSize, style.fontFamily, onChange]);
+    const syncSizeInitRef = React.useRef(true);
+    React.useEffect(() => {
+      if (syncSizeInitRef.current) {
+        syncSizeInitRef.current = false;
+        if (text && height > 0) return;
+      }
+      const rafId = requestAnimationFrame(syncSize);
+      return () => cancelAnimationFrame(rafId);
+    }, [text, labelFontSize, style.fontFamily, syncSize]);
+    const openEditor = React.useCallback(() => {
+      var _a;
+      const textNode = textRef.current;
+      if (!textNode || isEditingRef.current) return;
+      const stage = textNode.getStage();
+      if (!stage) return;
+      isEditingRef.current = true;
+      setIsEditingState(true);
+      onEditStart == null ? void 0 : onEditStart(id);
+      const stageContainer = stage.container();
+      const absTransform = textNode.getAbsoluteTransform().copy();
+      const absPos = absTransform.point({ x: 0, y: 0 });
+      const stageScaleX = stage.scaleX();
+      const screenFontSize = labelFontSize * stageScaleX;
+      const nodeWidth = textNode.width();
+      const scaledPadH = LABEL_PADDING_H * stageScaleX;
+      const scaledPadV = LABEL_PADDING_V * stageScaleX;
+      const initMeasured = measureLabelText(text || " ", labelFontSize, style.fontFamily);
+      const initPillW = Math.max(LABEL_MIN_WIDTH, initMeasured.width) * stageScaleX + scaledPadH * 2;
+      const initPillH = initMeasured.height * stageScaleX + scaledPadV * 2;
+      const connMidScreenX = absPos.x + nodeWidth * stageScaleX / 2;
+      const connMidScreenY = absPos.y + textNode.height() * stageScaleX / 2;
+      const originalText = text;
+      const textarea = document.createElement("textarea");
+      stageContainer.appendChild(textarea);
+      textarea.value = text;
+      textarea.style.position = "absolute";
+      textarea.style.top = `${connMidScreenY - initPillH / 2}px`;
+      textarea.style.left = `${connMidScreenX - initPillW / 2}px`;
+      textarea.style.width = `${initPillW}px`;
+      textarea.style.height = `${initPillH}px`;
+      textarea.style.fontSize = `${screenFontSize}px`;
+      textarea.style.fontFamily = style.fontFamily;
+      textarea.style.color = style.strokeColor;
+      textarea.style.lineHeight = `${LABEL_LINE_HEIGHT}`;
+      textarea.style.border = "none";
+      textarea.style.margin = "0";
+      textarea.style.outline = "none";
+      textarea.style.resize = "none";
+      textarea.style.overflow = "hidden";
+      textarea.style.zIndex = "1000";
+      textarea.rows = 1;
+      textarea.style.minHeight = `${Math.max(20, screenFontSize * LABEL_LINE_HEIGHT)}px`;
+      textarea.style.boxSizing = "border-box";
+      textarea.style.transformOrigin = "left top";
+      textarea.style.letterSpacing = "normal";
+      textarea.style.caretColor = style.strokeColor;
+      textarea.style.background = "#f8f9fa";
+      textarea.style.borderRadius = `${LABEL_CORNER * stageScaleX}px`;
+      textarea.style.padding = `${scaledPadV}px ${scaledPadH}px`;
+      textarea.style.textAlign = "center";
+      textarea.style.whiteSpace = "nowrap";
+      textarea.style.wordBreak = "normal";
+      const autoGrow = () => {
+        const currentText = textarea.value || " ";
+        const measured = measureLabelText(currentText, labelFontSize, style.fontFamily);
+        const newTextW = Math.max(LABEL_MIN_WIDTH, measured.width) * stageScaleX;
+        const pillW = newTextW + scaledPadH * 2;
+        const pillH = measured.height * stageScaleX + scaledPadV * 2;
+        textarea.style.width = `${pillW}px`;
+        textarea.style.height = `${pillH}px`;
+        textarea.style.left = `${connMidScreenX - pillW / 2}px`;
+        textarea.style.top = `${connMidScreenY - pillH / 2}px`;
+      };
+      textarea.addEventListener("input", autoGrow);
+      requestAnimationFrame(autoGrow);
+      textNode.hide();
+      (_a = bgRectRef.current) == null ? void 0 : _a.hide();
+      stage.batchDraw();
+      textarea.focus();
+      textarea.select();
+      let cancelled = false;
+      const finishEdit = () => {
+        var _a2;
+        if (!isEditingRef.current) return;
+        isEditingRef.current = false;
+        setIsEditingState(false);
+        const newText = cancelled ? originalText : textarea.value;
+        const isEmpty = newText.trim() === "";
+        textarea.removeEventListener("input", autoGrow);
+        textarea.removeEventListener("blur", handleBlur);
+        textarea.removeEventListener("keydown", handleKeyDown);
+        if (textarea.parentNode) {
+          textarea.parentNode.removeChild(textarea);
+        }
+        textNode.show();
+        (_a2 = bgRectRef.current) == null ? void 0 : _a2.show();
+        stage.batchDraw();
+        if (!cancelled) {
+          const measured = measureLabelText(newText || " ", labelFontSize, style.fontFamily);
+          onChange(id, {
+            text: newText,
+            width: measured.width,
+            height: measured.height
+          });
+        }
+        onEditEnd == null ? void 0 : onEditEnd(id, isEmpty);
+      };
+      const handleBlur = () => finishEdit();
+      const handleKeyDown = (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          cancelled = true;
+          textarea.blur();
+        }
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          textarea.blur();
+        }
+        if (e.key === "Tab") {
+          e.preventDefault();
+          textarea.blur();
+        }
+      };
+      textarea.addEventListener("blur", handleBlur);
+      textarea.addEventListener("keydown", handleKeyDown);
+    }, [id, text, style, onChange, onEditStart, onEditEnd]);
+    React.useEffect(() => {
+      if (!autoEdit) {
+        autoEditDoneRef.current = false;
+      }
+    }, [autoEdit]);
+    React.useEffect(() => {
+      if (autoEdit && !autoEditDoneRef.current && textRef.current) {
+        autoEditDoneRef.current = true;
+        openEditor();
+      }
+    }, [autoEdit, openEditor]);
+    const pillTextW = Math.max(LABEL_MIN_WIDTH, width || 60);
+    const labelW = pillTextW + LABEL_PADDING_H * 2;
+    const labelH = height + LABEL_PADDING_V * 2;
+    const isVisible = !isEditingState && !(autoEdit && !text);
+    const labelOpacity = text ? style.opacity : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactKonva.Group,
+      {
+        x: (effectiveX ?? 0) - LABEL_PADDING_H,
+        y: (effectiveY ?? 0) - LABEL_PADDING_V,
+        visible: isVisible,
+        opacity: labelOpacity,
+        listening: false,
+        perfectDrawEnabled: false,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Rect,
+            {
+              ref: bgRectRef,
+              width: labelW,
+              height: labelH,
+              fill: "#f8f9fa",
+              cornerRadius: LABEL_CORNER,
+              listening: false,
+              perfectDrawEnabled: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Text,
+            {
+              ref: textRef,
+              id,
+              x: LABEL_PADDING_H,
+              y: LABEL_PADDING_V,
+              text: text || "",
+              fontSize: labelFontSize,
+              fontFamily: style.fontFamily,
+              fill: style.strokeColor,
+              lineHeight: LABEL_LINE_HEIGHT,
+              wrap: "none",
+              listening: false,
+              perfectDrawEnabled: false,
+              onDblClick: openEditor,
+              onDblTap: openEditor
+            }
+          )
+        ]
+      }
+    );
+  };
+  const TextLabel = React.memo(TextLabel$1);
+  const IMAGE_CACHE_LIMIT = 50;
+  const _imgCache = /* @__PURE__ */ new Map();
+  function cachedLoadImage(src, onLoad, onError) {
+    const cached = _imgCache.get(src);
+    if (cached) {
+      onLoad(cached);
+      return () => {
+      };
+    }
+    const img = new window.Image();
+    if (!src.startsWith("data:")) {
+      img.crossOrigin = "anonymous";
+    }
+    img.onload = () => {
+      if (_imgCache.size >= IMAGE_CACHE_LIMIT) {
+        const oldest = _imgCache.keys().next().value;
+        if (oldest !== void 0) _imgCache.delete(oldest);
+      }
+      _imgCache.set(src, img);
+      onLoad(img);
+    };
+    img.onerror = () => onError();
+    img.src = src;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }
   const ImageShape$1 = ({
     element,
     isSelected,
@@ -5921,8 +6254,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onDragSnap
   }) => {
     const { id, x, y, width, height, rotation, src, style, crop, cornerRadius, scaleMode, isLocked } = element;
-    const [image, setImage] = React.useState(null);
-    const [loadError, setLoadError] = React.useState(false);
+    const [image, setImage] = React.useState(() => _imgCache.get(src) ?? null);
+    const [loadError, setLoadError] = React.useState(() => !src);
     const [liveSize, setLiveSize] = React.useState({ w: width, h: height });
     React.useEffect(() => {
       setLiveSize({ w: width, h: height });
@@ -5935,21 +6268,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         setLoadError(true);
         return;
       }
-      const img = new window.Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        setImage(img);
-        setLoadError(false);
-      };
-      img.onerror = () => {
-        setImage(null);
-        setLoadError(true);
-      };
-      img.src = src;
-      return () => {
-        img.onload = null;
-        img.onerror = null;
-      };
+      return cachedLoadImage(
+        src,
+        (img) => {
+          setImage(img);
+          setLoadError(false);
+        },
+        () => {
+          setImage(null);
+          setLoadError(true);
+        }
+      );
     }, [src]);
     const handleDragMove = React.useCallback((e) => {
       let nx = e.target.x(), ny = e.target.y();
@@ -6091,13 +6420,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         shadowBlur: isSelected ? 6 : 0,
         shadowOpacity: isSelected ? 0.5 : 0,
         children: [
-          scaleMode === "fit" && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             reactKonva.Rect,
             {
               width: rw,
               height: rh,
-              fill: style.fillColor === "transparent" ? void 0 : style.fillColor,
-              cornerRadius
+              fill: scaleMode === "fit" ? style.fillColor === "transparent" ? void 0 : style.fillColor : "transparent",
+              cornerRadius,
+              perfectDrawEnabled: false
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6189,7 +6519,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return /* @__PURE__ */ jsxRuntime.jsx(ArrowShape, { element, isSelected, isEditing, isGrouped, onSelect, onChange, onDragMove, onDoubleClick, gridSnap, allElements });
       case "freedraw":
         return /* @__PURE__ */ jsxRuntime.jsx(FreeDrawShape, { element, isSelected, isGrouped, onSelect, onChange, onDragMove, onDoubleClick, gridSnap, onDragSnap });
-      case "text":
+      case "text": {
+        const connContainer = element.containerId && allElements ? allElements.find((el) => el.id === element.containerId) : null;
+        const isConnectorLabel = connContainer && (connContainer.type === "arrow" || connContainer.type === "line");
+        if (isConnectorLabel) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TextLabel,
+            {
+              element,
+              connector: connContainer,
+              onChange,
+              autoEdit: autoEditText,
+              onEditStart: onTextEditStart,
+              onEditEnd: onTextEditEnd
+            }
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           TextShape,
           {
@@ -6206,6 +6551,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             gridSnap
           }
         );
+      }
       case "image":
         return /* @__PURE__ */ jsxRuntime.jsx(ImageShape, { element, isSelected, isGrouped, onSelect, onChange, onDragMove, onDoubleClick, gridSnap, onDragSnap });
       default:
@@ -6542,6 +6888,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const isCurved = "lineType" in element && element.lineType === "curved";
     const isElbow = "lineType" in element && element.lineType === "elbow";
     const endpointsOnly = isCurved || isElbow;
+    const labelRect = React.useMemo(() => {
+      if (!element.boundElements) return null;
+      for (const be of element.boundElements) {
+        if (be.type !== "text") continue;
+        const txt = allElements.find((e) => e.id === be.id);
+        if (!txt || !txt.text) continue;
+        const textW = Math.max(LABEL_MIN_WIDTH, txt.width || 60);
+        const textH = txt.height || 30;
+        return {
+          x: txt.x - LABEL_PADDING_H,
+          y: txt.y - LABEL_PADDING_V,
+          w: textW + LABEL_PADDING_H * 2,
+          h: textH + LABEL_PADDING_V * 2
+        };
+      }
+      return null;
+    }, [element.boundElements, allElements]);
     const isEndpoint = React.useCallback(
       (idx) => idx === 0 || idx === pairs.length - 1,
       [pairs.length]
@@ -6721,6 +7084,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       !endpointsOnly && pairs.length >= 2 && pairs.slice(0, -1).map((pt, segIdx) => {
         const next = pairs[segIdx + 1];
         const mid = midpoint$1(pt, next);
+        if (labelRect) {
+          const wx = x + mid.x, wy = y + mid.y;
+          if (wx >= labelRect.x && wx <= labelRect.x + labelRect.w && wy >= labelRect.y && wy <= labelRect.y + labelRect.h) {
+            return null;
+          }
+        }
         const isHovered = hoveredMidpointIndex === segIdx;
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactKonva.Circle,
@@ -6777,6 +7146,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const curvature = element.curvature ?? CURVE_RATIO;
         const cp = computeCurveControlPoint(localStart, localEnd, curvature);
         const curveMid = quadBezierAt(localStart, cp, localEnd, 0.5);
+        if (labelRect) {
+          const wx = x + curveMid.x, wy = y + curveMid.y;
+          if (wx >= labelRect.x && wx <= labelRect.x + labelRect.w && wy >= labelRect.y && wy <= labelRect.y + labelRect.h) {
+            return null;
+          }
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactKonva.Circle,
           {
@@ -8376,28 +8751,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ] }) });
   };
   const SvgIcon = ({ children, color, size = 12 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children });
-  const LayerIcons = {
-    sendToBack: (color) => /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { color, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z", opacity: "0.3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 12 12 18" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 15 12 18 15 15" })
-    ] }),
-    sendBackward: (color) => /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { color, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "19 12 12 19 5 12" })
-    ] }),
-    bringForward: (color) => /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { color, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5 12 12 5 19 12" })
-    ] }),
-    bringToFront: (color) => /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { color, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z", opacity: "0.3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 18 12 12" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 15 12 12 15 15" })
-    ] })
-  };
   const ActionIcons = {
     duplicate: (color) => /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { color, children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
@@ -8431,10 +8784,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const toggleLockElements = useCanvasStore((s) => s.toggleLockElements);
     const deleteElements = useCanvasStore((s) => s.deleteElements);
     const duplicateElements = useCanvasStore((s) => s.duplicateElements);
-    const bringToFront = useCanvasStore((s) => s.bringToFront);
-    const sendToBack = useCanvasStore((s) => s.sendToBack);
-    const bringForward = useCanvasStore((s) => s.bringForward);
-    const sendBackward = useCanvasStore((s) => s.sendBackward);
     const activeTool = useCanvasStore((s) => s.activeTool);
     const currentLineType = useCanvasStore((s) => s.currentLineType);
     const setCurrentLineType = useCanvasStore((s) => s.setCurrentLineType);
@@ -8927,31 +9276,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           {
             theme,
             style: { width: "100%", padding: "5px 0", borderRadius: 4 },
-            onClick: () => {
-              const input = document.createElement("input");
-              input.type = "file";
-              input.accept = "image/*";
-              input.onchange = async () => {
-                var _a;
-                const file = (_a = input.files) == null ? void 0 : _a[0];
+            onClick: async () => {
+              const targetId = selectedImage.id;
+              try {
+                const files = await openImageFilePicker();
+                const file = files[0];
                 if (!file) return;
-                const reader = new FileReader();
-                reader.onload = () => {
-                  const dataURL = reader.result;
-                  const img = new window.Image();
-                  img.onload = () => {
-                    updateElement(selectedImage.id, {
-                      src: dataURL,
-                      naturalWidth: img.naturalWidth,
-                      naturalHeight: img.naturalHeight
-                    });
-                    pushHistory();
-                  };
-                  img.src = dataURL;
-                };
-                reader.readAsDataURL(file);
-              };
-              input.click();
+                const dataURL = await fileToDataURL(file);
+                const img = await loadImage(dataURL);
+                updateElement(targetId, {
+                  src: dataURL,
+                  naturalWidth: img.naturalWidth,
+                  naturalHeight: img.naturalHeight
+                });
+                pushHistory();
+              } catch {
+              }
             },
             children: "Replace Image…"
           }
@@ -8959,27 +9299,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] }),
       hasSelection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("hr", { style: dividerStyle }),
-        /* @__PURE__ */ jsxRuntime.jsx(PanelSection, { label: "Layers", theme, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonRow, { columns: 4, children: [
-          { fn: sendToBack, icon: LayerIcons.sendToBack, tip: "Send to back" },
-          { fn: sendBackward, icon: LayerIcons.sendBackward, tip: "Send backward" },
-          { fn: bringForward, icon: LayerIcons.bringForward, tip: "Bring forward" },
-          { fn: bringToFront, icon: LayerIcons.bringToFront, tip: "Bring to front" }
-        ].map(({ fn, icon, tip }) => /* @__PURE__ */ jsxRuntime.jsx(
-          PanelButton,
-          {
-            variant: "action",
-            theme,
-            title: tip,
-            width: "100%",
-            height: 32,
-            onClick: () => {
-              fn(selectedIds);
-              pushHistory();
-            },
-            children: (hl) => icon(hl ? theme.activeToolColor : theme.textColor)
-          },
-          tip
-        )) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(PanelSection, { label: "Actions", theme, children: /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { columns: 4, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             PanelButton,
@@ -9677,48 +9996,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return result;
   }
   function useKeyboardShortcuts(enabled = true, containerRef) {
-    const setActiveTool = useCanvasStore((s) => s.setActiveTool);
-    const undo = useCanvasStore((s) => s.undo);
-    const redo = useCanvasStore((s) => s.redo);
-    const selectedIds = useCanvasStore((s) => s.selectedIds);
-    const elements = useCanvasStore((s) => s.elements);
-    const deleteElements = useCanvasStore((s) => s.deleteElements);
-    const duplicateElements = useCanvasStore((s) => s.duplicateElements);
-    const bringToFront = useCanvasStore((s) => s.bringToFront);
-    const sendToBack = useCanvasStore((s) => s.sendToBack);
-    const bringForward = useCanvasStore((s) => s.bringForward);
-    const sendBackward = useCanvasStore((s) => s.sendBackward);
-    const toggleGrid = useCanvasStore((s) => s.toggleGrid);
-    const showGrid = useCanvasStore((s) => s.showGrid);
-    const zoomIn = useCanvasStore((s) => s.zoomIn);
-    const zoomOut = useCanvasStore((s) => s.zoomOut);
-    const resetZoom = useCanvasStore((s) => s.resetZoom);
-    const zoomToFit = useCanvasStore((s) => s.zoomToFit);
-    const zoomToSelection = useCanvasStore((s) => s.zoomToSelection);
-    const clearSelection = useCanvasStore((s) => s.clearSelection);
-    const updateElement = useCanvasStore((s) => s.updateElement);
-    const addElement = useCanvasStore((s) => s.addElement);
-    const setSelectedIds = useCanvasStore((s) => s.setSelectedIds);
-    const pushHistory = useCanvasStore((s) => s.pushHistory);
-    const linearEdit = useLinearEditStore();
     const copyElements = React.useCallback(() => {
+      const { selectedIds, elements } = useCanvasStore.getState();
       if (selectedIds.length === 0) return;
       setClipboard(gatherElementsForCopy(selectedIds, elements));
-    }, [selectedIds, elements]);
-    const pasteElements = React.useCallback(() => {
-      const clip = getClipboard();
-      if (clip.length === 0) return;
-      const PASTE_OFFSET = 20;
-      const { clones, selectedCloneIds } = cloneAndRemapElements(clip, clip, PASTE_OFFSET);
-      clones.forEach((el) => addElement(el));
-      setSelectedIds(selectedCloneIds.length > 0 ? selectedCloneIds : clones.map((c) => c.id));
-      pushHistory();
-      setClipboard(
-        clip.map((el) => ({ ...el, x: el.x + PASTE_OFFSET, y: el.y + PASTE_OFFSET }))
-      );
-    }, [addElement, setSelectedIds, pushHistory]);
+    }, []);
     const nudge = React.useCallback(
       (dx, dy) => {
+        const { selectedIds, elements, updateElement, pushHistory } = useCanvasStore.getState();
         if (selectedIds.length === 0) return;
         selectedIds.forEach((id) => {
           const el = elements.find((e) => e.id === id);
@@ -9728,7 +10013,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
         pushHistory();
       },
-      [selectedIds, elements, updateElement, pushHistory]
+      []
     );
     React.useEffect(() => {
       if (!enabled) return;
@@ -9736,6 +10021,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const tag = e.target.tagName;
         if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
         const isCmd = e.metaKey || e.ctrlKey;
+        const store = useCanvasStore.getState();
+        const linearEdit = useLinearEditStore.getState();
         if (!isCmd && !e.shiftKey) {
           const toolMap = {
             v: "select",
@@ -9753,30 +10040,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           const tool = toolMap[e.key.toLowerCase()];
           if (tool) {
             e.preventDefault();
-            setActiveTool(tool);
+            store.setActiveTool(tool);
             return;
           }
         }
         if (isCmd && e.key === "z" && !e.shiftKey) {
           e.preventDefault();
-          undo();
+          store.undo();
           return;
         }
         if (isCmd && e.key === "z" && e.shiftKey) {
           e.preventDefault();
-          redo();
+          store.redo();
           return;
         }
         if (isCmd && e.key === "y") {
           e.preventDefault();
-          redo();
+          store.redo();
           return;
         }
         if ((e.key === "Delete" || e.key === "Backspace") && !isCmd) {
           if (linearEdit.isEditing && linearEdit.selectedPointIndices.length > 0) {
             e.preventDefault();
-            const { elements: elements2, updateElement: updateElement2, pushHistory: pushHistory2 } = useCanvasStore.getState();
-            const el = elements2.find((e2) => e2.id === linearEdit.elementId);
+            const el = store.elements.find((e2) => e2.id === linearEdit.elementId);
             if (el) {
               const pointCount = el.points.length / 2;
               const indicesToDelete = new Set(linearEdit.selectedPointIndices);
@@ -9814,75 +10100,75 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 if (indicesToDelete.has(pointCount - 1)) {
                   pointUpdates.endBinding = null;
                 }
-                updateElement2(el.id, pointUpdates);
-                pushHistory2();
+                store.updateElement(el.id, pointUpdates);
+                store.pushHistory();
                 linearEdit.setSelectedPoints([]);
               }
             }
             return;
           }
-          if (selectedIds.length > 0) {
+          if (store.selectedIds.length > 0) {
             e.preventDefault();
-            const unlocked = selectedIds.filter((sid) => {
-              const el = elements.find((e2) => e2.id === sid);
+            const unlocked = store.selectedIds.filter((sid) => {
+              const el = store.elements.find((e2) => e2.id === sid);
               return el && !el.isLocked;
             });
-            if (unlocked.length > 0) deleteElements(unlocked);
+            if (unlocked.length > 0) store.deleteElements(unlocked);
           }
           return;
         }
         if (isCmd && e.key === "d") {
           e.preventDefault();
-          if (selectedIds.length > 0) {
-            duplicateElements(selectedIds);
+          if (store.selectedIds.length > 0) {
+            store.duplicateElements(store.selectedIds);
           }
           return;
         }
         if (e.key === "]" && isCmd && e.shiftKey) {
           e.preventDefault();
-          bringToFront(selectedIds);
+          store.bringToFront(store.selectedIds);
           return;
         }
         if (e.key === "[" && isCmd && e.shiftKey) {
           e.preventDefault();
-          sendToBack(selectedIds);
+          store.sendToBack(store.selectedIds);
           return;
         }
         if (e.key === "]" && isCmd && !e.shiftKey) {
           e.preventDefault();
-          bringForward(selectedIds);
+          store.bringForward(store.selectedIds);
           return;
         }
         if (e.key === "[" && isCmd && !e.shiftKey) {
           e.preventDefault();
-          sendBackward(selectedIds);
+          store.sendBackward(store.selectedIds);
           return;
         }
         if (e.key === "g" && !isCmd) {
           e.preventDefault();
-          toggleGrid();
+          store.toggleGrid();
           return;
         }
         if (isCmd && (e.key === "=" || e.key === "+")) {
           e.preventDefault();
-          zoomIn();
+          store.zoomIn();
           return;
         }
         if (isCmd && e.key === "-") {
           e.preventDefault();
-          zoomOut();
+          store.zoomOut();
           return;
         }
         if (isCmd && e.key === "0") {
           e.preventDefault();
-          resetZoom();
+          store.resetZoom();
           return;
         }
         if (isCmd && e.shiftKey && e.key === "1") {
           e.preventDefault();
           if (containerRef == null ? void 0 : containerRef.current) {
             const rect = containerRef.current.getBoundingClientRect();
-            zoomToFit(rect.width, rect.height, void 0, { animate: true });
+            store.zoomToFit(rect.width, rect.height, void 0, { animate: true });
           }
           return;
         }
@@ -9890,14 +10176,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           e.preventDefault();
           if (containerRef == null ? void 0 : containerRef.current) {
             const rect = containerRef.current.getBoundingClientRect();
-            zoomToSelection(rect.width, rect.height, { animate: true });
+            store.zoomToSelection(rect.width, rect.height, { animate: true });
           }
           return;
         }
         if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key) && !isCmd) {
-          if (selectedIds.length > 0 && !linearEdit.isEditing) {
+          if (store.selectedIds.length > 0 && !linearEdit.isEditing) {
             e.preventDefault();
-            const baseStep = showGrid ? GRID_SIZE : 1;
+            const baseStep = store.showGrid ? GRID_SIZE : 1;
             const step = e.shiftKey ? baseStep * 10 : baseStep;
             const dx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
             const dy = e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0;
@@ -9906,7 +10192,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         }
         if (isCmd && e.key === "c") {
-          if (selectedIds.length > 0) {
+          if (store.selectedIds.length > 0) {
             e.preventDefault();
             copyElements();
           }
@@ -9916,34 +10202,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           return;
         }
         if (isCmd && e.key === "x") {
-          if (selectedIds.length > 0) {
+          if (store.selectedIds.length > 0) {
             e.preventDefault();
             copyElements();
-            deleteElements(selectedIds);
+            store.deleteElements(store.selectedIds);
           }
           return;
         }
         if (isCmd && e.key === "g" && !e.shiftKey) {
           e.preventDefault();
-          if (selectedIds.length >= 2) {
-            const { groupElements } = useCanvasStore.getState();
-            groupElements(selectedIds);
+          if (store.selectedIds.length >= 2) {
+            store.groupElements(store.selectedIds);
           }
           return;
         }
         if (isCmd && e.key === "g" && e.shiftKey) {
           e.preventDefault();
-          if (selectedIds.length > 0) {
-            const { ungroupElements } = useCanvasStore.getState();
-            ungroupElements(selectedIds);
+          if (store.selectedIds.length > 0) {
+            store.ungroupElements(store.selectedIds);
           }
           return;
         }
         if (isCmd && e.shiftKey && e.key === "l") {
           e.preventDefault();
-          if (selectedIds.length > 0) {
-            const { toggleLockElements } = useCanvasStore.getState();
-            toggleLockElements(selectedIds);
+          if (store.selectedIds.length > 0) {
+            store.toggleLockElements(store.selectedIds);
           }
           return;
         }
@@ -9953,46 +10236,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             linearEdit.exitEditMode();
             return;
           }
-          clearSelection();
-          setActiveTool("select");
+          store.clearSelection();
+          store.setActiveTool("select");
           return;
         }
         if (isCmd && e.key === "a") {
           e.preventDefault();
-          const { elements: elements2, setSelectedIds: setSelectedIds2 } = useCanvasStore.getState();
-          setSelectedIds2(elements2.map((el) => el.id));
+          const { elements, setSelectedIds } = useCanvasStore.getState();
+          setSelectedIds(elements.map((el) => el.id));
           return;
         }
       };
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [
-      enabled,
-      setActiveTool,
-      undo,
-      redo,
-      selectedIds,
-      elements,
-      deleteElements,
-      duplicateElements,
-      bringToFront,
-      sendToBack,
-      bringForward,
-      sendBackward,
-      toggleGrid,
-      showGrid,
-      zoomIn,
-      zoomOut,
-      resetZoom,
-      zoomToFit,
-      zoomToSelection,
-      containerRef,
-      clearSelection,
-      linearEdit,
-      nudge,
-      copyElements,
-      pasteElements
-    ]);
+    }, [enabled, containerRef, nudge, copyElements]);
   }
   function quickselect(arr, k, left = 0, right = arr.length - 1, compare = defaultCompare) {
     while (right > left) {
@@ -10954,6 +11211,70 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       _config = void 0;
     }
   }
+  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);
+        if (skipIds == null ? void 0 : skipIds.has(conn.id)) continue;
+        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;
+          if (skipIds == null ? void 0 : skipIds.has(be.id)) 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 };
+  }
   const DEFAULT_THEME = {
     canvasBackground: "#f8f9fa",
     gridColor: "#e5e5e5",
@@ -11674,6 +11995,86 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }) });
   };
   const CursorOverlay = React.memo(CursorOverlay$1);
+  const AnnotationItem = React.memo(({
+    element: el,
+    viewport,
+    renderAnnotation
+  }) => {
+    const screenX = el.x * viewport.scale + viewport.x;
+    const screenY = el.y * viewport.scale + viewport.y;
+    const screenW = el.width * viewport.scale;
+    const screenH = el.height * viewport.scale;
+    const ctx = {
+      element: el,
+      screenBounds: { x: screenX, y: screenY, width: screenW, height: screenH },
+      scale: viewport.scale
+    };
+    const annotation = renderAnnotation(ctx);
+    if (!annotation) return null;
+    const transforms = [`scale(${viewport.scale})`];
+    if (el.rotation) transforms.push(`rotate(${el.rotation}deg)`);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: screenX,
+          top: screenY,
+          width: el.width,
+          // world-space; CSS scale handles screen sizing
+          height: el.height,
+          // world-space
+          pointerEvents: "none",
+          transform: transforms.join(" "),
+          transformOrigin: "top left"
+        },
+        children: annotation
+      }
+    );
+  });
+  AnnotationItem.displayName = "AnnotationItem";
+  const CONTAINER_STYLE = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    overflow: "hidden",
+    zIndex: 10
+  };
+  const AnnotationsOverlay = React.memo(({
+    elements,
+    viewport,
+    containerWidth,
+    containerHeight,
+    renderAnnotation
+  }) => {
+    const visibleElements = React.useMemo(() => {
+      const margin = 100;
+      return elements.filter((el) => {
+        if (el.type === "text" && el.containerId) return false;
+        if (!el.isVisible) return false;
+        const sx = el.x * viewport.scale + viewport.x;
+        const sy = el.y * viewport.scale + viewport.y;
+        const sw = el.width * viewport.scale;
+        const sh = el.height * viewport.scale;
+        if (sx + sw < -margin || sy + sh < -margin) return false;
+        if (sx > containerWidth + margin || sy > containerHeight + margin) return false;
+        return true;
+      });
+    }, [elements, viewport.scale, viewport.x, viewport.y, containerWidth, containerHeight]);
+    if (visibleElements.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: CONTAINER_STYLE, children: visibleElements.map((el) => /* @__PURE__ */ jsxRuntime.jsx(
+      AnnotationItem,
+      {
+        element: el,
+        viewport,
+        renderAnnotation
+      },
+      el.id
+    )) });
+  });
   Konva.showWarnings = false;
   function arraysShallowEqual(a, b) {
     if (a.length !== b.length) return false;
@@ -11700,9 +12101,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onGroupDragEnd
   }) => {
     const layerRef = React.useRef(null);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       const layer = layerRef.current;
-      if (!layer || elements.length === 0) return;
+      if (!layer) return;
+      layer.clearCache();
+      if (elements.length === 0) return;
       const dpr2 = window.devicePixelRatio || 1;
       const cachePixelRatio = dpr2 * Math.max(1, viewportScale);
       const rafId = requestAnimationFrame(() => {
@@ -11721,7 +12124,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
       return () => {
         cancelAnimationFrame(rafId);
-        layer.clearCache();
       };
     }, [elements, viewportScale, autoEditTextId]);
     const { ungrouped, groups } = React.useMemo(() => {
@@ -11872,6 +12274,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       className,
       contextMenuItems: contextMenuItemsProp,
       renderContextMenu,
+      renderAnnotation,
       collaboration: collaborationConfig,
       workerConfig,
       customElementTypes
@@ -11930,7 +12333,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const { isDraggingPoint: isLinearDragging, elementId: linearEditId } = linearEdit;
     const prevResolvedRef = React.useRef([]);
     const resolvedElements = React.useMemo(() => {
+      var _a, _b;
       let result = null;
+      const changedConnectorIds = /* @__PURE__ */ new Set();
       for (let i = 0; i < elements.length; i++) {
         const el = elements[i];
         if (el.type !== "line" && el.type !== "arrow") {
@@ -11939,10 +12344,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         const conn = el;
         if (!conn.startBinding && !conn.endBinding) {
+          if ((_a = conn.boundElements) == null ? void 0 : _a.some((be) => be.type === "text")) {
+            changedConnectorIds.add(conn.id);
+            if (!result) result = elements.slice(0, i);
+          }
           if (result) result[i] = el;
           continue;
         }
         if (isLinearDragging && linearEditId === el.id) {
+          if ((_b = conn.boundElements) == null ? void 0 : _b.some((be) => be.type === "text")) {
+            if (!result) result = elements.slice(0, i);
+            changedConnectorIds.add(conn.id);
+          }
           if (result) result[i] = el;
           continue;
         }
@@ -11952,10 +12365,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             result = elements.slice(0, i);
           }
           result[i] = { ...conn, ...recomputed };
+          changedConnectorIds.add(conn.id);
         } else {
           if (result) result[i] = el;
         }
       }
+      if (changedConnectorIds.size > 0 && result) {
+        const patchMap = /* @__PURE__ */ new Map();
+        for (const el of result) patchMap.set(el.id, el);
+        for (const connId of changedConnectorIds) {
+          const conn = patchMap.get(connId);
+          if (!(conn == null ? void 0 : conn.boundElements)) continue;
+          for (const be of conn.boundElements) {
+            if (be.type !== "text") continue;
+            const txtIdx = result.findIndex((e) => e.id === be.id);
+            if (txtIdx === -1) continue;
+            const txt = result[txtIdx];
+            const textW = Math.max(10, txt.width || 60);
+            const textH = txt.height || 30;
+            const pos = computeConnectorLabelPosition(conn, textW, textH);
+            if (Math.abs(txt.x - pos.x) > 0.01 || Math.abs(txt.y - pos.y) > 0.01) {
+              result[txtIdx] = { ...txt, x: pos.x, y: pos.y };
+            }
+          }
+        }
+      }
       const finalResult = result ?? elements;
       const prev = prevResolvedRef.current;
       if (finalResult.length === prev.length) {
@@ -11987,7 +12421,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const prevStaticRef = React.useRef([]);
     const prevInteractiveRef = React.useRef([]);
     const { staticElements, interactiveElements } = React.useMemo(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       let effectiveSelected = drawingElementId ? /* @__PURE__ */ new Set([...selectedIdsSet, drawingElementId]) : selectedIdsSet;
       if (effectiveSelected.size > 0) {
         const expanded = new Set(effectiveSelected);
@@ -12001,6 +12435,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }
           }
         }
+        for (const el of visibleElements) {
+          if (!expanded.has(el.id)) continue;
+          if (el.boundElements) {
+            for (const be of el.boundElements) {
+              if (be.type === "text") expanded.add(be.id);
+            }
+          }
+          if (el.type === "text" && el.containerId) {
+            expanded.add(el.containerId);
+          }
+        }
+        for (const el of visibleElements) {
+          if (el.type !== "line" && el.type !== "arrow") continue;
+          if (expanded.has(el.id)) continue;
+          const conn = el;
+          const startBound = (_c = conn.startBinding) == null ? void 0 : _c.elementId;
+          const endBound = (_d = conn.endBinding) == null ? void 0 : _d.elementId;
+          if (startBound && expanded.has(startBound) || endBound && expanded.has(endBound)) {
+            expanded.add(el.id);
+            if (el.boundElements) {
+              for (const be of el.boundElements) {
+                if (be.type === "text") expanded.add(be.id);
+              }
+            }
+          }
+        }
         if (expanded.size !== effectiveSelected.size) {
           effectiveSelected = expanded;
         }
@@ -12159,7 +12619,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const files = getImageFilesFromDataTransfer(e.dataTransfer);
         if (files.length === 0) return;
         const rect = container.getBoundingClientRect();
-        stageRef.current;
         const vp = useCanvasStore.getState().viewport;
         const dropX = (e.clientX - rect.left - vp.x) / vp.scale;
         const dropY = (e.clientY - rect.top - vp.y) / vp.scale;
@@ -12325,6 +12784,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!pos) return;
         if (contextMenu) setContextMenu(null);
         if (ctx.activeTool === "hand" || isSpacePanning) return;
+        if (editingTextId) {
+          const activeEl = document.activeElement;
+          if ((activeEl == null ? void 0 : activeEl.tagName) === "TEXTAREA") {
+            activeEl.blur();
+          }
+        }
         const handler = getToolHandler(ctx.activeTool);
         handler == null ? void 0 : handler.onMouseDown(e, pos, ctx);
         if (currentElementIdRef.current) {
@@ -12332,7 +12797,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [readOnly, contextMenu, isSpacePanning]
+      [readOnly, contextMenu, isSpacePanning, editingTextId]
     );
     const handleMouseMoveCore = React.useCallback((e) => {
       if (spaceKeyRef.current) return;
@@ -12379,7 +12844,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!stage) return;
         const pointer = stage.getPointerPosition();
         if (!pointer) return;
-        const scaleBy = 1.05;
+        const scaleBy = 1.02;
         const dir2 = e.evt.deltaY > 0 ? -1 : 1;
         const targetScale = Math.min(MAX_ZOOM, Math.max(
           MIN_ZOOM,
@@ -12389,13 +12854,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       },
       [viewport, setViewport]
     );
-    const handleStageDragEnd = React.useCallback(
+    const handleStageDragMove = React.useCallback(
       (e) => {
         if (activeTool !== "hand" && !spaceKeyRef.current && !isSpacePanning) return;
         setViewport({ x: e.target.x(), y: e.target.y() });
       },
       [activeTool, setViewport, isSpacePanning]
     );
+    const handleStageDragEnd = handleStageDragMove;
     const handleElementSelect = React.useCallback(
       (id) => {
         var _a;
@@ -12443,6 +12909,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       useCanvasStore.getState().batchUpdateElements(updates);
     }, []);
     const unboundConnectorIdsRef = React.useRef(/* @__PURE__ */ new Set());
+    const syncBoundTextNodes = React.useCallback(
+      (el, newX, newY, newW, newH) => {
+        var _a, _b;
+        if (!el.boundElements || !stageRef.current) return;
+        if (!CONTAINER_TYPES.has(el.type)) return;
+        const elements2 = useCanvasStore.getState().elements;
+        const shapeW = newW ?? el.width;
+        const shapeH = newH ?? el.height;
+        for (const be of el.boundElements) {
+          if (be.type !== "text") continue;
+          const txt = elements2.find((e) => e.id === be.id);
+          if (!txt) continue;
+          const textNode = stageRef.current.findOne("#" + be.id);
+          if (!textNode) continue;
+          const textNodeH = ((_a = textNode.height) == null ? void 0 : _a.call(textNode)) ?? txt.height;
+          const pos = computeBoundTextPosition(
+            { x: newX, y: newY, width: shapeW, height: shapeH },
+            { height: textNodeH, verticalAlign: txt.verticalAlign }
+          );
+          (_b = textNode.width) == null ? void 0 : _b.call(textNode, pos.width);
+          textNode.x(pos.x);
+          textNode.y(pos.y);
+        }
+      },
+      []
+    );
     const handleElementDragMove = React.useCallback(
       (id, updates) => {
         if (readOnly) return;
@@ -12453,6 +12945,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const { elements: elements2, selectedIds: selectedIds2 } = useCanvasStore.getState();
         if (selectedIds2.length > MULTI_DRAG_STORE_SKIP_THRESHOLD) {
           isMultiDragSkippingRef.current = true;
+          const el2 = elements2.find((e) => e.id === id);
+          if (el2) {
+            const nx = updates.x ?? el2.x;
+            const ny = updates.y ?? el2.y;
+            syncBoundTextNodes(el2, nx, ny);
+          }
           return;
         }
         isMultiDragSkippingRef.current = false;
@@ -12479,12 +12977,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         if (!dragBatchRef.current) dragBatchRef.current = /* @__PURE__ */ new Map();
         dragBatchRef.current.set(id, updates);
+        if (el) {
+          const nx = updates.x ?? el.x;
+          const ny = updates.y ?? el.y;
+          const nw = updates.width;
+          const nh = updates.height;
+          syncBoundTextNodes(el, nx, ny, nw, nh);
+        }
         if (!dragFlushScheduledRef.current) {
           dragFlushScheduledRef.current = true;
           queueMicrotask(flushDragBatch);
         }
       },
-      [readOnly, flushDragBatch]
+      [readOnly, flushDragBatch, syncBoundTextNodes]
     );
     const handleDragSnap = React.useCallback(
       (id, bounds) => {
@@ -12516,39 +13021,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       store2.batchUpdateElements(entries.map(([id, upd]) => ({ id, updates: upd })));
       setAlignGuides([]);
       const freshElements = useCanvasStore.getState().elements;
-      const elMap = /* @__PURE__ */ new Map();
-      for (const el of freshElements) elMap.set(el.id, el);
-      const connectorUpdates = [];
-      const processedConnectors = /* @__PURE__ */ new Set();
-      for (const [id] of entries) {
-        unboundConnectorIdsRef.current.delete(id);
-        const connectors = findConnectorsForElement(id, freshElements);
-        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, freshElements);
-          if (recomputed) connectorUpdates.push({ id: freshConn.id, updates: recomputed });
-        }
-        const el = elMap.get(id);
-        if ((el == null ? void 0 : el.boundElements) && ["rectangle", "ellipse", "diamond", "image"].includes(el.type)) {
-          const PADDING2 = 4;
-          for (const be of el.boundElements) {
-            if (be.type !== "text") continue;
-            const txt = elMap.get(be.id);
-            if (!txt) continue;
-            const tw = Math.max(20, el.width - PADDING2 * 2);
-            let ty;
-            if (txt.verticalAlign === "top") ty = el.y + PADDING2;
-            else if (txt.verticalAlign === "bottom") ty = el.y + el.height - txt.height - PADDING2;
-            else ty = el.y + (el.height - txt.height) / 2;
-            connectorUpdates.push({ id: be.id, updates: { x: el.x + PADDING2, y: ty, width: tw } });
-          }
-        }
-      }
-      if (connectorUpdates.length > 0) {
-        useCanvasStore.getState().batchUpdateElements(connectorUpdates);
+      const movedIds = entries.map(([id]) => id);
+      for (const id of movedIds) unboundConnectorIdsRef.current.delete(id);
+      const { updates: syncUpdates } = syncAfterDrag(movedIds, freshElements);
+      if (syncUpdates.length > 0) {
+        useCanvasStore.getState().batchUpdateElements(syncUpdates);
       }
       useCanvasStore.getState().pushHistory();
       if (savedPixelRatioRef.current !== null) {
@@ -12573,46 +13050,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         setAlignGuides([]);
         unboundConnectorIdsRef.current.delete(id);
         const freshElements = useCanvasStore.getState().elements;
+        const { updates: syncUpdates } = syncAfterDrag([id], freshElements);
+        for (const su of syncUpdates) updateElement(su.id, su.updates);
         const elMap = /* @__PURE__ */ new Map();
-        for (const e of freshElements) elMap.set(e.id, e);
-        const connectors = findConnectorsForElement(id, freshElements);
-        for (const conn of connectors) {
-          const freshConn = elMap.get(conn.id);
-          if (!freshConn) continue;
-          const recomputed = recomputeBoundPoints(freshConn, freshElements);
-          if (recomputed) updateElement(freshConn.id, recomputed);
-        }
+        for (const e of useCanvasStore.getState().elements) elMap.set(e.id, e);
         const el = elMap.get(id);
-        if ((el == null ? void 0 : el.boundElements) && ["rectangle", "ellipse", "diamond", "image"].includes(el.type)) {
-          const PADDING2 = 4;
-          for (const be of el.boundElements) {
-            if (be.type !== "text") continue;
-            const txt = elMap.get(be.id);
-            if (!txt) continue;
-            const tw = Math.max(20, el.width - PADDING2 * 2);
-            let ty;
-            if (txt.verticalAlign === "top") ty = el.y + PADDING2;
-            else if (txt.verticalAlign === "bottom") ty = el.y + el.height - txt.height - PADDING2;
-            else ty = el.y + (el.height - txt.height) / 2;
-            updateElement(be.id, { x: el.x + PADDING2, y: ty, width: tw });
-          }
-        }
         if ((el == null ? void 0 : el.type) === "text") {
           const txt = el;
           if (txt.containerId) {
             const ctr = elMap.get(txt.containerId);
-            if (ctr && ["rectangle", "ellipse", "diamond", "image"].includes(ctr.type)) {
-              const PADDING2 = 4;
-              const minH = txt.height + PADDING2 * 2;
+            if (ctr && CONTAINER_TYPES.has(ctr.type)) {
+              const minH = txt.height + BOUND_TEXT_PADDING * 2;
               if (ctr.height < minH) {
                 updateElement(ctr.id, { height: minH });
                 const updatedElements = useCanvasStore.getState().elements;
-                for (const c of findConnectorsForElement(ctr.id, updatedElements)) {
-                  const fc = updatedElements.find((e) => e.id === c.id);
-                  if (!fc) continue;
-                  const r = recomputeBoundPoints(fc, updatedElements);
-                  if (r) updateElement(fc.id, r);
-                }
+                const { updates: resizeSync } = syncAfterDrag([ctr.id], updatedElements);
+                for (const su of resizeSync) updateElement(su.id, su.updates);
               }
             }
           }
@@ -12643,41 +13096,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }));
         store2.batchUpdateElements(posUpdates);
         const freshElements = useCanvasStore.getState().elements;
-        const elMap = /* @__PURE__ */ new Map();
-        for (const el of freshElements) elMap.set(el.id, el);
         const memberIds = new Set(members.map((m) => m.id));
-        const connectorUpdates = [];
-        const processedConnectors = /* @__PURE__ */ new Set();
-        for (const member of members) {
-          const connectors = findConnectorsForElement(member.id, freshElements);
-          for (const conn of connectors) {
-            if (processedConnectors.has(conn.id)) continue;
-            processedConnectors.add(conn.id);
-            if (memberIds.has(conn.id)) continue;
-            const freshConn = elMap.get(conn.id);
-            if (!freshConn) continue;
-            const recomputed = recomputeBoundPoints(freshConn, freshElements);
-            if (recomputed) connectorUpdates.push({ id: freshConn.id, updates: recomputed });
-          }
-          const el = elMap.get(member.id);
-          if ((el == null ? void 0 : el.boundElements) && ["rectangle", "ellipse", "diamond", "image"].includes(el.type)) {
-            const PADDING2 = 4;
-            for (const be of el.boundElements) {
-              if (be.type !== "text") continue;
-              if (memberIds.has(be.id)) continue;
-              const txt = elMap.get(be.id);
-              if (!txt) continue;
-              const tw = Math.max(20, el.width - PADDING2 * 2);
-              let ty;
-              if (txt.verticalAlign === "top") ty = el.y + PADDING2;
-              else if (txt.verticalAlign === "bottom") ty = el.y + el.height - txt.height - PADDING2;
-              else ty = el.y + (el.height - txt.height) / 2;
-              connectorUpdates.push({ id: be.id, updates: { x: el.x + PADDING2, y: ty, width: tw } });
-            }
-          }
-        }
-        if (connectorUpdates.length > 0) {
-          useCanvasStore.getState().batchUpdateElements(connectorUpdates);
+        const { updates: syncUpdates } = syncAfterDrag(
+          memberIds,
+          freshElements,
+          memberIds
+          // skip group-internal connectors & text (already moved)
+        );
+        if (syncUpdates.length > 0) {
+          useCanvasStore.getState().batchUpdateElements(syncUpdates);
         }
         store2.pushHistory();
       },
@@ -12708,24 +13135,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
           const textId = generateId();
           const conn = el;
-          const pts = conn.points;
-          const startPt = { x: pts[0], y: pts[1] };
-          const endPt = { x: pts[pts.length - 2], y: pts[pts.length - 1] };
-          let midX, midY;
-          if (conn.lineType === "curved") {
-            const cp = computeCurveControlPoint(startPt, endPt, conn.curvature ?? CURVE_RATIO);
-            const mid = quadBezierAt(startPt, cp, endPt, 0.5);
-            midX = conn.x + mid.x;
-            midY = conn.y + mid.y;
-          } else {
-            midX = conn.x + (startPt.x + endPt.x) / 2;
-            midY = conn.y + (startPt.y + endPt.y) / 2;
-          }
+          const labelPos = computeConnectorLabelPosition(conn, 100, 30);
           const textEl = {
             id: textId,
             type: "text",
-            x: midX,
-            y: midY,
+            x: labelPos.x,
+            y: labelPos.y,
             width: 100,
             height: 30,
             rotation: 0,
@@ -12751,7 +13166,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (el.type === "rectangle" || el.type === "ellipse" || el.type === "diamond" || el.type === "image") {
           const existingTextBinding = (_b = el.boundElements) == null ? void 0 : _b.find((be) => be.type === "text");
           if (existingTextBinding) {
-            setSel([existingTextBinding.id]);
+            setSel([existingTextBinding.id, id]);
             setAutoEditTextId(existingTextBinding.id);
             return;
           }
@@ -12779,7 +13194,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           update(id, {
             boundElements: [...currentBound, { id: textId, type: "text" }]
           });
-          setSel([textId]);
+          setSel([textId, id]);
           setAutoEditTextId(textId);
           return;
         }
@@ -12830,11 +13245,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       (id, isEmpty) => {
         setEditingTextId(null);
         setAutoEditTextId(null);
+        const {
+          elements: els,
+          selectedIds: currentSel,
+          setSelectedIds: setSel,
+          updateElement: update,
+          deleteElements: del
+        } = useCanvasStore.getState();
+        const textEl = els.find((e) => e.id === id);
+        const containerId = (textEl == null ? void 0 : textEl.type) === "text" ? textEl.containerId : null;
         if (isEmpty) {
-          const { elements: els, updateElement: update, deleteElements: del, pushHistory: push } = useCanvasStore.getState();
-          const textEl = els.find((e) => e.id === id);
-          if ((textEl == null ? void 0 : textEl.type) === "text" && textEl.containerId) {
-            const containerId = textEl.containerId;
+          if (containerId) {
             const container = els.find((e) => e.id === containerId);
             if (container == null ? void 0 : container.boundElements) {
               update(containerId, {
@@ -12847,6 +13268,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         } else {
           useCanvasStore.getState().pushHistory();
         }
+        if (containerId && currentSel.includes(containerId)) {
+          setSel([containerId]);
+        } else if (containerId) {
+          setSel(currentSel.filter((sid) => sid !== id));
+        }
       },
       [onElementDelete]
     );
@@ -12914,6 +13340,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     );
     const contextMenuItems = React.useMemo(() => {
       var _a;
+      if (!contextMenu) return [];
       const hasSelection = selectedIds.length > 0;
       const isMac = navigator.platform.includes("Mac");
       const mod = isMac ? "⌘" : "Ctrl+";
@@ -13215,6 +13642,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               onMouseMove: handleMouseMove,
               onMouseUp: handleMouseUp,
               onWheel: handleWheel,
+              onDragMove: handleStageDragMove,
               onDragEnd: handleStageDragEnd,
               onTouchStart: handleMouseDown,
               onTouchMove: handleMouseMove,
@@ -13276,6 +13704,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       if (el.type === "line" || el.type === "arrow") return false;
                       if (el.type === "text" && el.containerId) return false;
                       if (sid === editingTextId) return false;
+                      if (editingTextId) {
+                        const editingEl = resolvedElementMap.get(editingTextId);
+                        if ((editingEl == null ? void 0 : editingEl.type) === "text" && editingEl.containerId === sid) return false;
+                      }
                       return true;
                     });
                     if (transformableIds.length === 0) return null;
@@ -13391,6 +13823,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               theme
             }
           )),
+          renderAnnotation && /* @__PURE__ */ jsxRuntime.jsx(
+            AnnotationsOverlay,
+            {
+              elements: resolvedElements,
+              viewport,
+              containerWidth: dimensions.width,
+              containerHeight: dimensions.height,
+              renderAnnotation
+            }
+          ),
           showStatusBar && /* @__PURE__ */ jsxRuntime.jsx(StatusBar, { theme })
         ]
       }
@@ -13398,9 +13840,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   FlowCanvas.displayName = "FlowCanvas";
   const StatusBar = React.memo(({ theme }) => {
-    const elementCount = useCanvasStore((s) => s.elements.length);
+    const elementCount = useCanvasStore(
+      (s) => s.elements.filter((el) => !(el.type === "text" && el.containerId)).length
+    );
     const activeTool = useCanvasStore((s) => s.activeTool);
-    const selectedCount = useCanvasStore((s) => s.selectedIds.length);
+    const selectedCount = useCanvasStore((s) => {
+      const els = s.elements;
+      return s.selectedIds.filter((id) => {
+        const el = els.find((e) => e.id === id);
+        return el && !(el.type === "text" && el.containerId);
+      }).length;
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -13605,6 +14055,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   const DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
   const BASE = DIGITS.length;
+  function trimTrailingZeros(s) {
+    let end = s.length;
+    while (end > 0 && s[end - 1] === "0") end--;
+    return end === s.length ? s : s.slice(0, end);
+  }
   const SMALLEST_CHAR = DIGITS[0];
   const LARGEST_CHAR = DIGITS[BASE - 1];
   function midChar(a, b) {
@@ -13677,7 +14132,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (mid !== null) {
         return commonPrefix + mid;
       }
-      return commonPrefix + aPad[i] + incrementKey(aPad.slice(i + 1).replace(/0+$/, "") || SMALLEST_CHAR);
+      return commonPrefix + aPad[i] + incrementKey(trimTrailingZeros(aPad.slice(i + 1)) || SMALLEST_CHAR);
     }
     return a + DIGITS[Math.floor(BASE / 2)];
   }
@@ -15310,6 +15765,11 @@ void main() {
   exports2.ExportWorkerManager = ExportWorkerManager;
   exports2.FILL_COLORS = FILL_COLORS;
   exports2.FlowCanvas = FlowCanvas;
+  exports2.LABEL_CORNER = LABEL_CORNER;
+  exports2.LABEL_LINE_HEIGHT = LABEL_LINE_HEIGHT;
+  exports2.LABEL_MIN_WIDTH = LABEL_MIN_WIDTH;
+  exports2.LABEL_PADDING_H = LABEL_PADDING_H;
+  exports2.LABEL_PADDING_V = LABEL_PADDING_V;
   exports2.LINE_TYPES = LINE_TYPES;
   exports2.OperationLog = OperationLog;
   exports2.ROUGHNESS_CONFIGS = ROUGHNESS_CONFIGS;
@@ -15347,6 +15807,7 @@ void main() {
   exports2.computeElbowRoute = computeElbowRoute;
   exports2.computeFixedPoint = computeFixedPoint;
   exports2.computeImageElementDimensions = computeImageElementDimensions;
+  exports2.computePillSize = computePillSize;
   exports2.computeZoomToFit = computeZoomToFit;
   exports2.createCollaborationProvider = createCollaborationProvider;
   exports2.createImageElement = createImageElement;
@@ -15411,6 +15872,7 @@ void main() {
   exports2.isValidFractionalIndex = isValidFractionalIndex;
   exports2.isWorkerSupported = isWorkerSupported;
   exports2.loadImage = loadImage;
+  exports2.measureLabelText = measureLabelText;
   exports2.normalizeRect = normalizeRect;
   exports2.onStatusChange = onStatusChange;
   exports2.opAdd = opAdd;