@fieldnotes/core 0.2.3 → 0.3.1

package/dist/index.cjs

@@ -40,24 +40,35 @@ __export(index_exports, {
   PencilTool: () => PencilTool,
   RemoveElementCommand: () => RemoveElementCommand,
   SelectTool: () => SelectTool,
+  TextTool: () => TextTool,
   ToolManager: () => ToolManager,
   UpdateElementCommand: () => UpdateElementCommand,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
+  clearStaleBindings: () => clearStaleBindings,
   createArrow: () => createArrow,
   createHtmlElement: () => createHtmlElement,
   createId: () => createId,
   createImage: () => createImage,
   createNote: () => createNote,
   createStroke: () => createStroke,
+  createText: () => createText,
   exportState: () => exportState,
+  findBindTarget: () => findBindTarget,
+  findBoundArrows: () => findBoundArrows,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
   getArrowMidpoint: () => getArrowMidpoint,
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
+  getEdgeIntersection: () => getEdgeIntersection,
+  getElementBounds: () => getElementBounds,
+  getElementCenter: () => getElementCenter,
+  isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
-  parseState: () => parseState
+  parseState: () => parseState,
+  unbindArrow: () => unbindArrow,
+  updateBoundArrow: () => updateBoundArrow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -131,8 +142,9 @@ function validateState(data) {
     validateElement(el);
     migrateElement(el);
   }
+  cleanBindings(obj["elements"]);
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -148,6 +160,20 @@ function validateElement(el) {
     throw new Error("Invalid element: missing zIndex");
   }
 }
+function cleanBindings(elements) {
+  const ids = new Set(elements.map((el) => el["id"]));
+  for (const el of elements) {
+    if (el["type"] !== "arrow") continue;
+    const fromBinding = el["fromBinding"];
+    if (fromBinding && !ids.has(fromBinding["elementId"])) {
+      el["fromBinding"] = void 0;
+    }
+    const toBinding = el["toBinding"];
+    if (toBinding && !ids.has(toBinding["elementId"])) {
+      el["toBinding"] = void 0;
+    }
+  }
+}
 function migrateElement(obj) {
   if (obj["type"] === "arrow" && typeof obj["bend"] !== "number") {
     obj["bend"] = 0;
@@ -741,6 +767,134 @@ function isNearLine(point, a, b, threshold) {
   return Math.hypot(point.x - projX, point.y - projY) <= threshold;
 }
 
+// src/elements/arrow-binding.ts
+var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html"]);
+function isBindable(element) {
+  return BINDABLE_TYPES.has(element.type);
+}
+function getElementCenter(element) {
+  if (!("size" in element)) {
+    throw new Error(`getElementCenter: element type "${element.type}" has no size`);
+  }
+  return {
+    x: element.position.x + element.size.w / 2,
+    y: element.position.y + element.size.h / 2
+  };
+}
+function getElementBounds(element) {
+  if (!("size" in element)) return null;
+  return {
+    x: element.position.x,
+    y: element.position.y,
+    w: element.size.w,
+    h: element.size.h
+  };
+}
+function getEdgeIntersection(bounds, outsidePoint) {
+  const cx = bounds.x + bounds.w / 2;
+  const cy = bounds.y + bounds.h / 2;
+  const dx = outsidePoint.x - cx;
+  const dy = outsidePoint.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const halfW = bounds.w / 2;
+  const halfH = bounds.h / 2;
+  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Infinity;
+  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Infinity;
+  const scale = Math.min(scaleX, scaleY);
+  return {
+    x: cx + dx * scale,
+    y: cy + dy * scale
+  };
+}
+function findBindTarget(point, store, threshold, excludeId) {
+  let closest = null;
+  let closestDist = Infinity;
+  for (const el of store.getAll()) {
+    if (!isBindable(el)) continue;
+    if (excludeId && el.id === excludeId) continue;
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const dist = distToBounds(point, bounds);
+    if (dist <= threshold && dist < closestDist) {
+      closest = el;
+      closestDist = dist;
+    }
+  }
+  return closest;
+}
+function distToBounds(point, bounds) {
+  const clampedX = Math.max(bounds.x, Math.min(point.x, bounds.x + bounds.w));
+  const clampedY = Math.max(bounds.y, Math.min(point.y, bounds.y + bounds.h));
+  return Math.hypot(point.x - clampedX, point.y - clampedY);
+}
+function findBoundArrows(elementId, store) {
+  return store.getElementsByType("arrow").filter((a) => a.fromBinding?.elementId === elementId || a.toBinding?.elementId === elementId);
+}
+function updateBoundArrow(arrow, store) {
+  if (!arrow.fromBinding && !arrow.toBinding) return null;
+  const updates = {};
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    if (el) {
+      const center = getElementCenter(el);
+      updates.from = center;
+      updates.position = center;
+    }
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    if (el) {
+      updates.to = getElementCenter(el);
+    }
+  }
+  return Object.keys(updates).length > 0 ? updates : null;
+}
+function clearStaleBindings(arrow, store) {
+  const updates = {};
+  let hasUpdates = false;
+  if (arrow.fromBinding && !store.getById(arrow.fromBinding.elementId)) {
+    updates.fromBinding = void 0;
+    hasUpdates = true;
+  }
+  if (arrow.toBinding && !store.getById(arrow.toBinding.elementId)) {
+    updates.toBinding = void 0;
+    hasUpdates = true;
+  }
+  return hasUpdates ? updates : null;
+}
+function unbindArrow(arrow, store) {
+  const updates = {};
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    const bounds = el ? getElementBounds(el) : null;
+    if (bounds) {
+      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+      const rayTarget = {
+        x: arrow.from.x + Math.cos(angle) * 1e3,
+        y: arrow.from.y + Math.sin(angle) * 1e3
+      };
+      const edge = getEdgeIntersection(bounds, rayTarget);
+      updates.from = edge;
+      updates.position = edge;
+    }
+    updates.fromBinding = void 0;
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    const bounds = el ? getElementBounds(el) : null;
+    if (bounds) {
+      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+      const rayTarget = {
+        x: arrow.to.x - Math.cos(angle) * 1e3,
+        y: arrow.to.y - Math.sin(angle) * 1e3
+      };
+      updates.to = getEdgeIntersection(bounds, rayTarget);
+    }
+    updates.toBinding = void 0;
+  }
+  return updates;
+}
+
 // src/elements/stroke-smoothing.ts
 var MIN_PRESSURE_SCALE = 0.2;
 function pressureToWidth(pressure, baseWidth) {
@@ -815,10 +969,14 @@ function smoothToSegments(points) {
 }
 
 // src/elements/element-renderer.ts
-var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html"]);
+var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ElementRenderer = class {
+  store = null;
+  setStore(store) {
+    this.store = store;
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -852,38 +1010,76 @@ var ElementRenderer = class {
     ctx.restore();
   }
   renderArrow(ctx, arrow) {
+    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow);
     ctx.save();
     ctx.strokeStyle = arrow.color;
     ctx.lineWidth = arrow.width;
     ctx.lineCap = "round";
+    if (arrow.fromBinding || arrow.toBinding) {
+      ctx.setLineDash([8, 4]);
+    }
     ctx.beginPath();
-    ctx.moveTo(arrow.from.x, arrow.from.y);
+    ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
       const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
-      ctx.quadraticCurveTo(cp.x, cp.y, arrow.to.x, arrow.to.y);
+      ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
     } else {
-      ctx.lineTo(arrow.to.x, arrow.to.y);
+      ctx.lineTo(visualTo.x, visualTo.y);
     }
     ctx.stroke();
-    this.renderArrowhead(ctx, arrow);
+    this.renderArrowhead(ctx, arrow, visualTo);
     ctx.restore();
   }
-  renderArrowhead(ctx, arrow) {
+  renderArrowhead(ctx, arrow, tip) {
     const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
     ctx.beginPath();
-    ctx.moveTo(arrow.to.x, arrow.to.y);
+    ctx.moveTo(tip.x, tip.y);
     ctx.lineTo(
-      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
-      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
+      tip.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
+      tip.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
     );
     ctx.lineTo(
-      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
-      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
+      tip.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
+      tip.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
     );
     ctx.closePath();
     ctx.fillStyle = arrow.color;
     ctx.fill();
   }
+  getVisualEndpoints(arrow) {
+    let visualFrom = arrow.from;
+    let visualTo = arrow.to;
+    if (!this.store) return { visualFrom, visualTo };
+    if (arrow.fromBinding) {
+      const el = this.store.getById(arrow.fromBinding.elementId);
+      if (el) {
+        const bounds = getElementBounds(el);
+        if (bounds) {
+          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const rayTarget = {
+            x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
+            y: arrow.from.y + Math.sin(tangentAngle) * 1e3
+          };
+          visualFrom = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+    }
+    if (arrow.toBinding) {
+      const el = this.store.getById(arrow.toBinding.elementId);
+      if (el) {
+        const bounds = getElementBounds(el);
+        if (bounds) {
+          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const rayTarget = {
+            x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
+            y: arrow.to.y - Math.sin(tangentAngle) * 1e3
+          };
+          visualTo = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+    }
+    return { visualFrom, visualTo };
+  }
 };
 
 // src/elements/note-editor.ts
@@ -894,12 +1090,16 @@ var NoteEditor = class {
   keyHandler = null;
   pointerHandler = null;
   pendingEditId = null;
+  onStopCallback = null;
   get isEditing() {
     return this.editingId !== null;
   }
   get editingElementId() {
     return this.editingId;
   }
+  setOnStop(callback) {
+    this.onStopCallback = callback;
+  }
   startEditing(node, elementId, store) {
     if (this.editingId === elementId) return;
     if (this.editingId) {
@@ -931,6 +1131,9 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    if (this.editingId && this.onStopCallback) {
+      this.onStopCallback(this.editingId);
+    }
     this.editingId = null;
     this.editingNode = null;
     this.blurHandler = null;
@@ -1247,7 +1450,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
-  return {
+  const result = {
     id: createId("arrow"),
     type: "arrow",
     position: input.position ?? { x: 0, y: 0 },
@@ -1259,6 +1462,9 @@ function createArrow(input) {
     color: input.color ?? "#000000",
     width: input.width ?? 2
   };
+  if (input.fromBinding) result.fromBinding = input.fromBinding;
+  if (input.toBinding) result.toBinding = input.toBinding;
+  return result;
 }
 function createImage(input) {
   return {
@@ -1281,6 +1487,20 @@ function createHtmlElement(input) {
     size: input.size
   };
 }
+function createText(input) {
+  return {
+    id: createId("text"),
+    type: "text",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    size: input.size ?? { w: 200, h: 28 },
+    text: input.text ?? "",
+    fontSize: input.fontSize ?? 16,
+    color: input.color ?? "#1a1a1a",
+    textAlign: input.textAlign ?? "left"
+  };
+}
 
 // src/canvas/viewport.ts
 var Viewport = class {
@@ -1291,7 +1511,9 @@ var Viewport = class {
     this.store = new ElementStore();
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
+    this.renderer.setStore(this.store);
     this.noteEditor = new NoteEditor();
+    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history);
     this.wrapper = this.createWrapper();
@@ -1305,7 +1527,7 @@ var Viewport = class {
       store: this.store,
       requestRender: () => this.requestRender(),
       switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
-      editElement: (id) => this.startEditingNote(id),
+      editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
       }
@@ -1322,7 +1544,10 @@ var Viewport = class {
     });
     this.unsubStore = [
       this.store.on("add", () => this.requestRender()),
-      this.store.on("remove", (el) => this.removeDomNode(el.id)),
+      this.store.on("remove", (el) => {
+        this.unbindArrowsFrom(el);
+        this.removeDomNode(el.id);
+      }),
       this.store.on("update", () => this.requestRender()),
       this.store.on("clear", () => this.clearDomNodes())
     ];
@@ -1459,15 +1684,34 @@ var Viewport = class {
     ctx.restore();
     ctx.restore();
   }
-  startEditingNote(id) {
+  startEditingElement(id) {
     const element = this.store.getById(id);
-    if (!element || element.type !== "note") return;
+    if (!element || element.type !== "note" && element.type !== "text") return;
     this.render();
     const node = this.domNodes.get(id);
     if (node) {
       this.noteEditor.startEditing(node, id, this.store);
     }
   }
+  onTextEditStop(elementId) {
+    const element = this.store.getById(elementId);
+    if (!element || element.type !== "text") return;
+    if (!element.text || element.text.trim() === "") {
+      this.historyRecorder.begin();
+      this.store.remove(elementId);
+      this.historyRecorder.commit();
+      return;
+    }
+    const node = this.domNodes.get(elementId);
+    if (node && "size" in element) {
+      const measuredHeight = node.scrollHeight;
+      if (measuredHeight !== element.size.h) {
+        this.store.update(elementId, {
+          size: { w: element.size.w, h: measuredHeight }
+        });
+      }
+    }
+  }
   onDblClick = (e) => {
     const el = document.elementFromPoint(e.clientX, e.clientY);
     const nodeEl = el?.closest("[data-element-id]");
@@ -1475,8 +1719,8 @@ var Viewport = class {
       const elementId = nodeEl.dataset["elementId"];
       if (elementId) {
         const element = this.store.getById(elementId);
-        if (element?.type === "note") {
-          this.startEditingNote(elementId);
+        if (element?.type === "note" || element?.type === "text") {
+          this.startEditingElement(elementId);
           return;
         }
       }
@@ -1600,7 +1844,7 @@ var Viewport = class {
         node.addEventListener("dblclick", (e) => {
           e.stopPropagation();
           const id = node.dataset["elementId"];
-          if (id) this.startEditingNote(id);
+          if (id) this.startEditingElement(id);
         });
       }
       if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
@@ -1641,6 +1885,76 @@ var Viewport = class {
         node.appendChild(content);
       }
     }
+    if (element.type === "text") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          padding: "2px",
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign,
+          background: "none",
+          border: "none",
+          boxShadow: "none",
+          overflow: "visible",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word",
+          whiteSpace: "pre-wrap",
+          lineHeight: "1.4"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.startEditingElement(id);
+        });
+      }
+      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        Object.assign(node.style, {
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign
+        });
+      }
+    }
+  }
+  unbindArrowsFrom(removedElement) {
+    const boundArrows = findBoundArrows(removedElement.id, this.store);
+    const bounds = getElementBounds(removedElement);
+    for (const arrow of boundArrows) {
+      const updates = {};
+      if (arrow.fromBinding?.elementId === removedElement.id) {
+        updates.fromBinding = void 0;
+        if (bounds) {
+          const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const rayTarget = {
+            x: arrow.from.x + Math.cos(angle) * 1e3,
+            y: arrow.from.y + Math.sin(angle) * 1e3
+          };
+          const edge = getEdgeIntersection(bounds, rayTarget);
+          updates.from = edge;
+          updates.position = edge;
+        }
+      }
+      if (arrow.toBinding?.elementId === removedElement.id) {
+        updates.toBinding = void 0;
+        if (bounds) {
+          const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const rayTarget = {
+            x: arrow.to.x - Math.cos(angle) * 1e3,
+            y: arrow.to.y - Math.sin(angle) * 1e3
+          };
+          updates.to = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+      if (Object.keys(updates).length > 0) {
+        this.store.update(arrow.id, updates);
+      }
+    }
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
@@ -1870,6 +2184,7 @@ var EraserTool = class {
 };
 
 // src/tools/arrow-handles.ts
+var BIND_THRESHOLD = 20;
 var HANDLE_RADIUS = 5;
 var HANDLE_HIT_PADDING = 4;
 var ARROW_HANDLE_CURSORS = {
@@ -1910,18 +2225,44 @@ function hitTestArrowHandles(world, selectedIds, ctx) {
 function applyArrowHandleDrag(handle, elementId, world, ctx) {
   const el = ctx.store.getById(elementId);
   if (!el || el.type !== "arrow") return;
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
   switch (handle) {
-    case "start":
-      ctx.store.update(elementId, {
-        from: { x: world.x, y: world.y },
-        position: { x: world.x, y: world.y }
-      });
+    case "start": {
+      const excludeId = el.toBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      if (target) {
+        const center = getElementCenter(target);
+        ctx.store.update(elementId, {
+          from: center,
+          position: center,
+          fromBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          from: { x: world.x, y: world.y },
+          position: { x: world.x, y: world.y },
+          fromBinding: void 0
+        });
+      }
       break;
-    case "end":
-      ctx.store.update(elementId, {
-        to: { x: world.x, y: world.y }
-      });
+    }
+    case "end": {
+      const excludeId = el.fromBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      if (target) {
+        const center = getElementCenter(target);
+        ctx.store.update(elementId, {
+          to: center,
+          toBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          to: { x: world.x, y: world.y },
+          toBinding: void 0
+        });
+      }
       break;
+    }
     case "mid": {
       const bend = getBendFromPoint(el.from, el.to, world);
       ctx.store.update(elementId, { bend });
@@ -1930,6 +2271,16 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
   }
   ctx.requestRender();
 }
+function getArrowHandleDragTarget(handle, elementId, world, ctx) {
+  if (handle === "mid") return null;
+  const el = ctx.store.getById(elementId);
+  if (!el || el.type !== "arrow") return null;
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
+  const target = findBindTarget(world, ctx.store, threshold, excludeId);
+  if (!target) return null;
+  return getElementBounds(target);
+}
 function renderArrowHandles(canvasCtx, arrow, zoom) {
   const radius = HANDLE_RADIUS / zoom;
   const handles = getArrowHandlePositions(arrow);
@@ -2040,6 +2391,9 @@ var SelectTool = class {
         const el = ctx.store.getById(id);
         if (!el || el.locked) continue;
         if (el.type === "arrow") {
+          if (el.fromBinding || el.toBinding) {
+            continue;
+          }
           ctx.store.update(id, {
             position: { x: el.position.x + dx, y: el.position.y + dy },
             from: { x: el.from.x + dx, y: el.from.y + dy },
@@ -2051,6 +2405,23 @@ var SelectTool = class {
           });
         }
       }
+      const movedNonArrowIds = /* @__PURE__ */ new Set();
+      for (const id of this._selectedIds) {
+        const el = ctx.store.getById(id);
+        if (el && el.type !== "arrow") movedNonArrowIds.add(id);
+      }
+      if (movedNonArrowIds.size > 0) {
+        const updatedArrows = /* @__PURE__ */ new Set();
+        for (const id of movedNonArrowIds) {
+          const boundArrows = findBoundArrows(id, ctx.store);
+          for (const ba of boundArrows) {
+            if (updatedArrows.has(ba.id)) continue;
+            updatedArrows.add(ba.id);
+            const updates = updateBoundArrow(ba, ctx.store);
+            if (updates) ctx.store.update(ba.id, updates);
+          }
+        }
+      }
       ctx.requestRender();
       return;
     }
@@ -2079,6 +2450,22 @@ var SelectTool = class {
   renderOverlay(canvasCtx) {
     this.renderMarquee(canvasCtx);
     this.renderSelectionBoxes(canvasCtx);
+    if (this.mode.type === "arrow-handle" && this.ctx) {
+      const target = getArrowHandleDragTarget(
+        this.mode.handle,
+        this.mode.elementId,
+        this.currentWorld,
+        this.ctx
+      );
+      if (target) {
+        canvasCtx.save();
+        canvasCtx.strokeStyle = "#2196F3";
+        canvasCtx.lineWidth = 2 / this.ctx.camera.zoom;
+        canvasCtx.setLineDash([]);
+        canvasCtx.strokeRect(target.x, target.y, target.w, target.h);
+        canvasCtx.restore();
+      }
+    }
   }
   updateHoverCursor(world, ctx) {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
@@ -2137,6 +2524,11 @@ var SelectTool = class {
       position: { x, y },
       size: { w, h }
     });
+    const boundArrows = findBoundArrows(this.mode.elementId, ctx.store);
+    for (const ba of boundArrows) {
+      const updates = updateBoundArrow(ba, ctx.store);
+      if (updates) ctx.store.update(ba.id, updates);
+    }
     ctx.requestRender();
   }
   hitTestResizeHandle(world, ctx) {
@@ -2191,6 +2583,7 @@ var SelectTool = class {
       if (!el) continue;
       if (el.type === "arrow") {
         renderArrowHandles(canvasCtx, el, zoom);
+        this.renderBindingHighlights(canvasCtx, el, zoom);
         continue;
       }
       const bounds = this.getElementBounds(el);
@@ -2220,6 +2613,26 @@ var SelectTool = class {
     }
     canvasCtx.restore();
   }
+  renderBindingHighlights(canvasCtx, arrow, zoom) {
+    if (!this.ctx) return;
+    if (!arrow.fromBinding && !arrow.toBinding) return;
+    const pad = SELECTION_PAD / zoom;
+    canvasCtx.save();
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.lineWidth = 2 / zoom;
+    canvasCtx.setLineDash([]);
+    const drawn = /* @__PURE__ */ new Set();
+    for (const binding of [arrow.fromBinding, arrow.toBinding]) {
+      if (!binding || drawn.has(binding.elementId)) continue;
+      drawn.add(binding.elementId);
+      const target = this.ctx.store.getById(binding.elementId);
+      if (!target) continue;
+      const bounds = getElementBounds(target);
+      if (!bounds) continue;
+      canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+    }
+    canvasCtx.restore();
+  }
   getMarqueeRect() {
     if (this.mode.type !== "marquee") return null;
     const { start } = this.mode;
@@ -2293,6 +2706,7 @@ var SelectTool = class {
 };
 
 // src/tools/arrow-tool.ts
+var BIND_THRESHOLD2 = 20;
 var ArrowTool = class {
   name = "arrow";
   drawing = false;
@@ -2300,6 +2714,9 @@ var ArrowTool = class {
   end = { x: 0, y: 0 };
   color;
   width;
+  fromBinding;
+  fromTarget = null;
+  toTarget = null;
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
@@ -2310,12 +2727,34 @@ var ArrowTool = class {
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
-    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
+    const target = findBindTarget(world, ctx.store, threshold);
+    if (target) {
+      this.start = getElementCenter(target);
+      this.fromBinding = { elementId: target.id };
+      this.fromTarget = target;
+    } else {
+      this.start = world;
+      this.fromBinding = void 0;
+      this.fromTarget = null;
+    }
     this.end = { ...this.start };
+    this.toTarget = null;
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
-    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
+    const excludeId = this.fromBinding?.elementId;
+    const target = findBindTarget(world, ctx.store, threshold, excludeId);
+    if (target) {
+      this.end = getElementCenter(target);
+      this.toTarget = target;
+    } else {
+      this.end = world;
+      this.toTarget = null;
+    }
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -2325,16 +2764,40 @@ var ArrowTool = class {
     const arrow = createArrow({
       from: this.start,
       to: this.end,
+      position: this.start,
       color: this.color,
-      width: this.width
+      width: this.width,
+      fromBinding: this.fromBinding,
+      toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0
     });
     ctx.store.add(arrow);
+    this.fromTarget = null;
+    this.toTarget = null;
     ctx.requestRender();
+    ctx.switchTool?.("select");
   }
   renderOverlay(ctx) {
     if (!this.drawing) return;
     if (this.start.x === this.end.x && this.start.y === this.end.y) return;
     ctx.save();
+    if (this.fromTarget) {
+      const bounds = getElementBounds(this.fromTarget);
+      if (bounds) {
+        ctx.strokeStyle = "#2196F3";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+      }
+    }
+    if (this.toTarget) {
+      const bounds = getElementBounds(this.toTarget);
+      if (bounds) {
+        ctx.strokeStyle = "#2196F3";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+      }
+    }
     ctx.strokeStyle = this.color;
     ctx.lineWidth = this.width;
     ctx.lineCap = "round";
@@ -2394,6 +2857,47 @@ var NoteTool = class {
   }
 };
 
+// src/tools/text-tool.ts
+var TextTool = class {
+  name = "text";
+  fontSize;
+  color;
+  textAlign;
+  constructor(options = {}) {
+    this.fontSize = options.fontSize ?? 16;
+    this.color = options.color ?? "#1a1a1a";
+    this.textAlign = options.textAlign ?? "left";
+  }
+  setOptions(options) {
+    if (options.fontSize !== void 0) this.fontSize = options.fontSize;
+    if (options.color !== void 0) this.color = options.color;
+    if (options.textAlign !== void 0) this.textAlign = options.textAlign;
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("text");
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(_state, _ctx) {
+  }
+  onPointerMove(_state, _ctx) {
+  }
+  onPointerUp(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const textEl = createText({
+      position: world,
+      fontSize: this.fontSize,
+      color: this.color,
+      textAlign: this.textAlign
+    });
+    ctx.store.add(textEl);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+    ctx.editElement?.(textEl.id);
+  }
+};
+
 // src/tools/image-tool.ts
 var ImageTool = class {
   name = "image";
@@ -2425,7 +2929,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.2.3";
+var VERSION = "0.3.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -2448,23 +2952,34 @@ var VERSION = "0.2.3";
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  TextTool,
   ToolManager,
   UpdateElementCommand,
   VERSION,
   Viewport,
+  clearStaleBindings,
   createArrow,
   createHtmlElement,
   createId,
   createImage,
   createNote,
   createStroke,
+  createText,
   exportState,
+  findBindTarget,
+  findBoundArrows,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
   getArrowTangentAngle,
   getBendFromPoint,
+  getEdgeIntersection,
+  getElementBounds,
+  getElementCenter,
+  isBindable,
   isNearBezier,
-  parseState
+  parseState,
+  unbindArrow,
+  updateBoundArrow
 });
 //# sourceMappingURL=index.cjs.map