f1ow 0.1.5 → 1.0.0

package/dist/f1ow.js

@@ -2,7 +2,7 @@ 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 { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useCallback, useRef, useMemo, createContext, useContext, useState, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
+import React, { useCallback, useRef, useMemo, createContext, useContext, useState, useEffect, forwardRef, createElement, useImperativeHandle, useLayoutEffect } from "react";
 import { Shape, Rect, Ellipse, Line, Group as Group$1, Path, Text, Image as Image$2, Transformer, Circle as Circle$1, Stage, Layer } from "react-konva";
 import Konva from "konva";
 import { create } from "zustand";
@@ -873,6 +873,58 @@ function simplifyElbowPath(points) {
   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);
@@ -1299,6 +1351,71 @@ function syncBoundElements(connectorId, connectorType, oldBinding, newBinding, e
     }
   }
 }
+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 = "";
@@ -1823,7 +1940,7 @@ function batchElementUpdates(elements, updates) {
 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));
@@ -2568,58 +2685,6 @@ function getStrokeDash(style, strokeWidth) {
       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) {
@@ -3322,7 +3387,7 @@ function createImageElement(src, naturalWidth, naturalHeight, x, y, style = { ..
     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,
@@ -5574,7 +5639,34 @@ const FreeDrawShape = ({ element, isSelected, isGrouped, onSelect, onChange, onD
   );
 };
 const FreeDrawShape$1 = React.memo(FreeDrawShape);
-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 = ({
   element,
   isSelected,
@@ -5591,6 +5683,7 @@ const TextShape = ({
   const { id, x, y, width, height, rotation, style, text, containerId, textAlign, verticalAlign, isLocked } = element;
   const textRef = useRef(null);
   const isEditingRef = useRef(false);
+  const [isEditingState, setIsEditingState] = useState(false);
   const autoEditDoneRef = useRef(false);
   const isBound = !!containerId;
   const isDraggable = !isBound && !isLocked && !isGrouped;
@@ -5599,36 +5692,12 @@ const TextShape = ({
     return allElements.find((el) => el.id === containerId) ?? null;
   }, [containerId, allElements]);
   const boundPos = 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;
@@ -5638,7 +5707,7 @@ const TextShape = ({
       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 = useCallback(() => {
     const node = textRef.current;
     if (!node || isEditingRef.current) return;
@@ -5660,8 +5729,14 @@ const TextShape = ({
       onChange(id, updates);
     }
   }, [id, height, width, isBound, onChange]);
+  const syncSizeInitRef = useRef(true);
   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 = useCallback(() => {
     const textNode = textRef.current;
@@ -5669,6 +5744,7 @@ const TextShape = ({
     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();
@@ -5691,7 +5767,7 @@ const TextShape = ({
       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");
@@ -5765,7 +5841,8 @@ const TextShape = ({
       }
       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);
@@ -5778,6 +5855,7 @@ const TextShape = ({
     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);
@@ -5793,9 +5871,7 @@ const TextShape = ({
       }
       onEditEnd == null ? void 0 : onEditEnd(id, isEmpty);
     };
-    const handleBlur = () => {
-      finishEdit();
-    };
+    const handleBlur = () => finishEdit();
     const handleKeyDown = (e) => {
       e.stopPropagation();
       if (e.key === "Escape") {
@@ -5846,7 +5922,7 @@ const TextShape = ({
       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,
@@ -5896,6 +5972,263 @@ const TextShape = ({
   );
 };
 const TextShape$1 = React.memo(TextShape);
+const TextLabel = ({
+  element,
+  connector,
+  onChange,
+  autoEdit,
+  onEditStart,
+  onEditEnd
+}) => {
+  const { id, x, y, width, height, style, text } = element;
+  const labelFontSize = style.fontSize * 0.9;
+  const textRef = useRef(null);
+  const bgRectRef = useRef(null);
+  const isEditingRef = useRef(false);
+  const [isEditingState, setIsEditingState] = useState(false);
+  const autoEditDoneRef = useRef(false);
+  const boundPos = 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 = 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 = useRef(true);
+  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 = 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]);
+  useEffect(() => {
+    if (!autoEdit) {
+      autoEditDoneRef.current = false;
+    }
+  }, [autoEdit]);
+  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__ */ jsxs(
+    Group$1,
+    {
+      x: (effectiveX ?? 0) - LABEL_PADDING_H,
+      y: (effectiveY ?? 0) - LABEL_PADDING_V,
+      visible: isVisible,
+      opacity: labelOpacity,
+      listening: false,
+      perfectDrawEnabled: false,
+      children: [
+        /* @__PURE__ */ jsx(
+          Rect,
+          {
+            ref: bgRectRef,
+            width: labelW,
+            height: labelH,
+            fill: "#f8f9fa",
+            cornerRadius: LABEL_CORNER,
+            listening: false,
+            perfectDrawEnabled: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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$1 = React.memo(TextLabel);
+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 = ({
   element,
   isSelected,
@@ -5908,8 +6241,8 @@ const ImageShape = ({
   onDragSnap
 }) => {
   const { id, x, y, width, height, rotation, src, style, crop, cornerRadius, scaleMode, isLocked } = element;
-  const [image, setImage] = useState(null);
-  const [loadError, setLoadError] = useState(false);
+  const [image, setImage] = useState(() => _imgCache.get(src) ?? null);
+  const [loadError, setLoadError] = useState(() => !src);
   const [liveSize, setLiveSize] = useState({ w: width, h: height });
   useEffect(() => {
     setLiveSize({ w: width, h: height });
@@ -5922,21 +6255,17 @@ const ImageShape = ({
       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 = useCallback((e) => {
     let nx = e.target.x(), ny = e.target.y();
@@ -6078,13 +6407,14 @@ const ImageShape = ({
       shadowBlur: isSelected ? 6 : 0,
       shadowOpacity: isSelected ? 0.5 : 0,
       children: [
-        scaleMode === "fit" && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           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__ */ jsx(
@@ -6176,7 +6506,22 @@ const CanvasElementRenderer = ({
       return /* @__PURE__ */ jsx(ArrowShape$1, { element, isSelected, isEditing, isGrouped, onSelect, onChange, onDragMove, onDoubleClick, gridSnap, allElements });
     case "freedraw":
       return /* @__PURE__ */ jsx(FreeDrawShape$1, { 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__ */ jsx(
+          TextLabel$1,
+          {
+            element,
+            connector: connContainer,
+            onChange,
+            autoEdit: autoEditText,
+            onEditStart: onTextEditStart,
+            onEditEnd: onTextEditEnd
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
         TextShape$1,
         {
@@ -6193,6 +6538,7 @@ const CanvasElementRenderer = ({
           gridSnap
         }
       );
+    }
     case "image":
       return /* @__PURE__ */ jsx(ImageShape$1, { element, isSelected, isGrouped, onSelect, onChange, onDragMove, onDoubleClick, gridSnap, onDragSnap });
     default:
@@ -6529,6 +6875,23 @@ const LinearElementHandles = ({
   const isCurved = "lineType" in element && element.lineType === "curved";
   const isElbow = "lineType" in element && element.lineType === "elbow";
   const endpointsOnly = isCurved || isElbow;
+  const labelRect = 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 = useCallback(
     (idx) => idx === 0 || idx === pairs.length - 1,
     [pairs.length]
@@ -6708,6 +7071,12 @@ const LinearElementHandles = ({
     !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__ */ jsx(
         Circle$1,
@@ -6764,6 +7133,12 @@ const LinearElementHandles = ({
       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__ */ jsx(
         Circle$1,
         {
@@ -8363,28 +8738,6 @@ const ArrowheadLineIcon = ({ arrowhead, end, color }) => {
   ] }) });
 };
 const SvgIcon = ({ children, color, size = 12 }) => /* @__PURE__ */ 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__ */ jsxs(SvgIcon, { color, children: [
-    /* @__PURE__ */ jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
-    /* @__PURE__ */ 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__ */ jsx("polyline", { points: "12 12 12 18" }),
-    /* @__PURE__ */ jsx("polyline", { points: "9 15 12 18 15 15" })
-  ] }),
-  sendBackward: (color) => /* @__PURE__ */ jsxs(SvgIcon, { color, children: [
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
-  ] }),
-  bringForward: (color) => /* @__PURE__ */ jsxs(SvgIcon, { color, children: [
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-    /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
-  ] }),
-  bringToFront: (color) => /* @__PURE__ */ jsxs(SvgIcon, { color, children: [
-    /* @__PURE__ */ jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
-    /* @__PURE__ */ 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__ */ jsx("polyline", { points: "12 18 12 12" }),
-    /* @__PURE__ */ jsx("polyline", { points: "9 15 12 12 15 15" })
-  ] })
-};
 const ActionIcons = {
   duplicate: (color) => /* @__PURE__ */ jsxs(SvgIcon, { color, children: [
     /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
@@ -8418,10 +8771,6 @@ const StylePanel = ({ theme }) => {
   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);
@@ -8914,31 +9263,22 @@ const StylePanel = ({ theme }) => {
         {
           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…"
         }
@@ -8946,27 +9286,6 @@ const StylePanel = ({ theme }) => {
     ] }),
     hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("hr", { style: dividerStyle }),
-      /* @__PURE__ */ jsx(PanelSection, { label: "Layers", theme, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(PanelSection, { label: "Actions", theme, children: /* @__PURE__ */ jsxs(ButtonRow, { columns: 4, children: [
         /* @__PURE__ */ jsx(
           PanelButton,
@@ -9664,48 +9983,14 @@ function computeAlignGuides(movingBounds, others, excludeIds, threshold = SNAP_T
   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 = useCallback(() => {
+    const { selectedIds, elements } = useCanvasStore.getState();
     if (selectedIds.length === 0) return;
     setClipboard(gatherElementsForCopy(selectedIds, elements));
-  }, [selectedIds, elements]);
-  const pasteElements = 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 = 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);
@@ -9715,7 +10000,7 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
       });
       pushHistory();
     },
-    [selectedIds, elements, updateElement, pushHistory]
+    []
   );
   useEffect(() => {
     if (!enabled) return;
@@ -9723,6 +10008,8 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
       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",
@@ -9740,30 +10027,29 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
         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);
@@ -9801,75 +10087,75 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
               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;
       }
@@ -9877,14 +10163,14 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
         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;
@@ -9893,7 +10179,7 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
         }
       }
       if (isCmd && e.key === "c") {
-        if (selectedIds.length > 0) {
+        if (store.selectedIds.length > 0) {
           e.preventDefault();
           copyElements();
         }
@@ -9903,34 +10189,31 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
         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;
       }
@@ -9940,46 +10223,20 @@ function useKeyboardShortcuts(enabled = true, containerRef) {
           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) {
@@ -10941,6 +11198,70 @@ function disposeExportWorkerManager() {
     _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",
@@ -11661,6 +11982,86 @@ const CursorOverlay = ({
   }) });
 };
 const CursorOverlay$1 = React.memo(CursorOverlay);
+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__ */ 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 = 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__ */ jsx("div", { style: CONTAINER_STYLE, children: visibleElements.map((el) => /* @__PURE__ */ jsx(
+    AnnotationItem,
+    {
+      element: el,
+      viewport,
+      renderAnnotation
+    },
+    el.id
+  )) });
+});
 Konva.showWarnings = false;
 function arraysShallowEqual(a, b) {
   if (a.length !== b.length) return false;
@@ -11687,9 +12088,11 @@ const StaticElementsLayer = ({
   onGroupDragEnd
 }) => {
   const layerRef = useRef(null);
-  useEffect(() => {
+  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(() => {
@@ -11708,7 +12111,6 @@ const StaticElementsLayer = ({
     });
     return () => {
       cancelAnimationFrame(rafId);
-      layer.clearCache();
     };
   }, [elements, viewportScale, autoEditTextId]);
   const { ungrouped, groups } = useMemo(() => {
@@ -11859,6 +12261,7 @@ const FlowCanvas = forwardRef((props, ref) => {
     className,
     contextMenuItems: contextMenuItemsProp,
     renderContextMenu,
+    renderAnnotation,
     collaboration: collaborationConfig,
     workerConfig,
     customElementTypes
@@ -11917,7 +12320,9 @@ const FlowCanvas = forwardRef((props, ref) => {
   const { isDraggingPoint: isLinearDragging, elementId: linearEditId } = linearEdit;
   const prevResolvedRef = useRef([]);
   const resolvedElements = 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") {
@@ -11926,10 +12331,18 @@ const FlowCanvas = forwardRef((props, ref) => {
       }
       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;
       }
@@ -11939,10 +12352,31 @@ const FlowCanvas = forwardRef((props, ref) => {
           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) {
@@ -11974,7 +12408,7 @@ const FlowCanvas = forwardRef((props, ref) => {
   const prevStaticRef = useRef([]);
   const prevInteractiveRef = useRef([]);
   const { staticElements, interactiveElements } = 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);
@@ -11988,6 +12422,32 @@ const FlowCanvas = forwardRef((props, ref) => {
           }
         }
       }
+      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;
       }
@@ -12146,7 +12606,6 @@ const FlowCanvas = forwardRef((props, ref) => {
       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;
@@ -12312,6 +12771,12 @@ const FlowCanvas = forwardRef((props, ref) => {
       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) {
@@ -12319,7 +12784,7 @@ const FlowCanvas = forwardRef((props, ref) => {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [readOnly, contextMenu, isSpacePanning]
+    [readOnly, contextMenu, isSpacePanning, editingTextId]
   );
   const handleMouseMoveCore = useCallback((e) => {
     if (spaceKeyRef.current) return;
@@ -12366,7 +12831,7 @@ const FlowCanvas = forwardRef((props, ref) => {
       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,
@@ -12376,13 +12841,14 @@ const FlowCanvas = forwardRef((props, ref) => {
     },
     [viewport, setViewport]
   );
-  const handleStageDragEnd = useCallback(
+  const handleStageDragMove = 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 = useCallback(
     (id) => {
       var _a;
@@ -12430,6 +12896,32 @@ const FlowCanvas = forwardRef((props, ref) => {
     useCanvasStore.getState().batchUpdateElements(updates);
   }, []);
   const unboundConnectorIdsRef = useRef(/* @__PURE__ */ new Set());
+  const syncBoundTextNodes = 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 = useCallback(
     (id, updates) => {
       if (readOnly) return;
@@ -12440,6 +12932,12 @@ const FlowCanvas = forwardRef((props, ref) => {
       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;
@@ -12466,12 +12964,19 @@ const FlowCanvas = forwardRef((props, ref) => {
       }
       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 = useCallback(
     (id, bounds) => {
@@ -12503,39 +13008,11 @@ const FlowCanvas = forwardRef((props, ref) => {
     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) {
@@ -12560,46 +13037,22 @@ const FlowCanvas = forwardRef((props, ref) => {
       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);
             }
           }
         }
@@ -12630,41 +13083,15 @@ const FlowCanvas = forwardRef((props, ref) => {
       }));
       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();
     },
@@ -12695,24 +13122,12 @@ const FlowCanvas = forwardRef((props, ref) => {
         }
         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,
@@ -12738,7 +13153,7 @@ const FlowCanvas = forwardRef((props, ref) => {
       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;
         }
@@ -12766,7 +13181,7 @@ const FlowCanvas = forwardRef((props, ref) => {
         update(id, {
           boundElements: [...currentBound, { id: textId, type: "text" }]
         });
-        setSel([textId]);
+        setSel([textId, id]);
         setAutoEditTextId(textId);
         return;
       }
@@ -12817,11 +13232,17 @@ const FlowCanvas = forwardRef((props, ref) => {
     (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, {
@@ -12834,6 +13255,11 @@ const FlowCanvas = forwardRef((props, ref) => {
       } else {
         useCanvasStore.getState().pushHistory();
       }
+      if (containerId && currentSel.includes(containerId)) {
+        setSel([containerId]);
+      } else if (containerId) {
+        setSel(currentSel.filter((sid) => sid !== id));
+      }
     },
     [onElementDelete]
   );
@@ -12901,6 +13327,7 @@ const FlowCanvas = forwardRef((props, ref) => {
   );
   const contextMenuItems = useMemo(() => {
     var _a;
+    if (!contextMenu) return [];
     const hasSelection = selectedIds.length > 0;
     const isMac = navigator.platform.includes("Mac");
     const mod = isMac ? "⌘" : "Ctrl+";
@@ -13202,6 +13629,7 @@ const FlowCanvas = forwardRef((props, ref) => {
             onMouseMove: handleMouseMove,
             onMouseUp: handleMouseUp,
             onWheel: handleWheel,
+            onDragMove: handleStageDragMove,
             onDragEnd: handleStageDragEnd,
             onTouchStart: handleMouseDown,
             onTouchMove: handleMouseMove,
@@ -13263,6 +13691,10 @@ const FlowCanvas = forwardRef((props, ref) => {
                     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;
@@ -13378,6 +13810,16 @@ const FlowCanvas = forwardRef((props, ref) => {
             theme
           }
         )),
+        renderAnnotation && /* @__PURE__ */ jsx(
+          AnnotationsOverlay,
+          {
+            elements: resolvedElements,
+            viewport,
+            containerWidth: dimensions.width,
+            containerHeight: dimensions.height,
+            renderAnnotation
+          }
+        ),
         showStatusBar && /* @__PURE__ */ jsx(StatusBar, { theme })
       ]
     }
@@ -13385,9 +13827,17 @@ const FlowCanvas = forwardRef((props, ref) => {
 });
 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__ */ jsxs(
     "div",
     {
@@ -13592,6 +14042,11 @@ function getSharedSpatialSoA() {
 }
 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) {
@@ -13664,7 +14119,7 @@ function midpoint(a, b) {
     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)];
 }
@@ -15298,6 +15753,11 @@ export {
   ExportWorkerManager,
   FILL_COLORS,
   FlowCanvas,
+  LABEL_CORNER,
+  LABEL_LINE_HEIGHT,
+  LABEL_MIN_WIDTH,
+  LABEL_PADDING_H,
+  LABEL_PADDING_V,
   LINE_TYPES,
   OperationLog,
   ROUGHNESS_CONFIGS,
@@ -15335,6 +15795,7 @@ export {
   computeElbowRoute,
   computeFixedPoint,
   computeImageElementDimensions,
+  computePillSize,
   computeZoomToFit,
   createCollaborationProvider,
   createImageElement,
@@ -15399,6 +15860,7 @@ export {
   isValidFractionalIndex,
   isWorkerSupported,
   loadImage,
+  measureLabelText,
   normalizeRect,
   onStatusChange,
   opAdd,