@fieldnotes/core 0.34.0 → 0.36.0

package/dist/index.js

@@ -524,6 +524,36 @@ function distSqToSegment(p, a, b) {
   const dy = p.y - (a.y + t * aby);
   return dx * dx + dy * dy;
 }
+function rotatePoint(p, center2, angle) {
+  if (angle === 0) return p;
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const dx = p.x - center2.x;
+  const dy = p.y - center2.y;
+  return { x: center2.x + dx * cos - dy * sin, y: center2.y + dx * sin + dy * cos };
+}
+function rotatedAABB(bounds, angle) {
+  if (angle === 0) return bounds;
+  const c = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+  const corners = [
+    { x: bounds.x, y: bounds.y },
+    { x: bounds.x + bounds.w, y: bounds.y },
+    { x: bounds.x + bounds.w, y: bounds.y + bounds.h },
+    { x: bounds.x, y: bounds.y + bounds.h }
+  ].map((p) => rotatePoint(p, c, angle));
+  const xs = corners.map((p) => p.x);
+  const ys = corners.map((p) => p.y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  return { x: minX, y: minY, w: Math.max(...xs) - minX, h: Math.max(...ys) - minY };
+}
+function normalizeAngle(angle) {
+  const twoPi = Math.PI * 2;
+  let a = angle % twoPi;
+  if (a <= -Math.PI) a += twoPi;
+  else if (a > Math.PI) a -= twoPi;
+  return a;
+}
 
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
@@ -880,6 +910,14 @@ var KeyboardActions = class {
     }
     this.pasteCount = 0;
   }
+  cut() {
+    if (this.deps.isToolActive()) return;
+    this.copy();
+    this.deleteSelected();
+  }
+  hasClipboard() {
+    return this.clipboard.length > 0;
+  }
   paste() {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -948,6 +986,10 @@ var KeyboardActions = class {
     if (this.deps.isToolActive()) return;
     this.deps.ungroup?.();
   }
+  toggleLock() {
+    if (this.deps.isToolActive()) return;
+    this.deps.toggleLock?.();
+  }
   zOrder(operation) {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -1049,6 +1091,8 @@ var DEFAULT_BINDINGS = [
   ["zoom-reset", ["mod+0"]],
   ["group", ["mod+g"]],
   ["ungroup", ["mod+shift+g"]],
+  ["cut", ["mod+x"]],
+  ["toggle-lock", ["mod+shift+l"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1187,6 +1231,7 @@ var ShortcutMap = class {
 var ZOOM_SENSITIVITY = 1e-3;
 var ZOOM_STEP = 1.2;
 var MIDDLE_BUTTON = 1;
+var LONG_PRESS_MS = 500;
 var NUDGE_DELTAS = {
   "nudge-left": [-1, 0],
   "nudge-right": [1, 0],
@@ -1210,8 +1255,10 @@ var InputHandler = class {
       fitToContent: options.fitToContent,
       group: options.group,
       ungroup: options.ungroup,
+      toggleLock: options.toggleLock,
       getLastPointerWorld: () => this.lastPointerWorld()
     });
+    this.openContextMenu = options.openContextMenu;
     this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
     this.scope = options.shortcuts?.scope ?? "focus";
     this.element.style.touchAction = "none";
@@ -1235,10 +1282,13 @@ var InputHandler = class {
   lastPointerEvent = null;
   inputFilter = new InputFilter();
   deferredDown = null;
+  longPressTimer = null;
+  longPressStart = null;
   abortController = new AbortController();
   actions;
   shortcutMap;
   scope;
+  openContextMenu;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1253,6 +1303,7 @@ var InputHandler = class {
     this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
+    this.cancelLongPress();
     this.deferredDown = null;
     this.lastPointerEvent = null;
     if (this.scope === "focus") {
@@ -1268,6 +1319,7 @@ var InputHandler = class {
     this.element.addEventListener("pointerup", this.onPointerUp, opts);
     this.element.addEventListener("pointerleave", this.onPointerLeave, opts);
     this.element.addEventListener("pointercancel", this.onPointerUp, opts);
+    this.element.addEventListener("contextmenu", this.onContextMenu, opts);
     window.addEventListener("keydown", this.onKeyDown, opts);
     window.addEventListener("keyup", this.onKeyUp, opts);
   }
@@ -1296,11 +1348,13 @@ var InputHandler = class {
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     this.element.setPointerCapture?.(e.pointerId);
     if (this.activePointers.size === 2) {
+      this.cancelLongPress();
       this.startPinch();
       this.cancelToolIfActive(e);
       return;
     }
     if (e.button === MIDDLE_BUTTON || e.button === 0 && this.spaceHeld) {
+      this.cancelLongPress();
       this.isPanning = true;
       this.lastPointer = { x: e.clientX, y: e.clientY };
       return;
@@ -1310,6 +1364,7 @@ var InputHandler = class {
       if (result.action === "suppress") return;
       if (result.action === "defer") {
         this.deferredDown = e;
+        this.startLongPress(e);
         return;
       }
       this.dispatchToolDown(e);
@@ -1338,6 +1393,7 @@ var InputHandler = class {
     } else if (this.deferredDown) {
       const result = this.inputFilter.filterMove(e);
       if (result.action === "dispatch") {
+        this.cancelLongPress();
         this.dispatchToolDown(this.deferredDown);
         this.deferredDown = null;
         this.dispatchToolMove(e);
@@ -1347,6 +1403,7 @@ var InputHandler = class {
     }
   };
   onPointerUp = (e) => {
+    this.cancelLongPress();
     try {
       this.element.releasePointerCapture(e.pointerId);
     } catch {
@@ -1399,74 +1456,82 @@ var InputHandler = class {
   runAction(action, e) {
     switch (action) {
       case "delete":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.deleteSelected();
         return;
       case "deselect":
         this.actions.deselect();
         return;
       case "undo":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.undo();
         return;
       case "redo":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.redo();
         return;
       case "select-all":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.selectAll();
         return;
       case "copy":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.copy();
         return;
       case "paste":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.paste();
         return;
       case "duplicate":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.duplicate();
         return;
       case "z-forward":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("forward");
         return;
       case "z-backward":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("backward");
         return;
       case "z-front":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("front");
         return;
       case "z-back":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("back");
         return;
       case "zoom-fit":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zoomToFit();
         return;
       case "group":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.group();
         return;
       case "ungroup":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.ungroup();
         return;
+      case "cut":
+        e?.preventDefault();
+        this.actions.cut();
+        return;
+      case "toggle-lock":
+        e?.preventDefault();
+        this.actions.toggleLock();
+        return;
       case "zoom-in":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomByFactor(ZOOM_STEP);
         return;
       case "zoom-out":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomByFactor(1 / ZOOM_STEP);
         return;
       case "zoom-reset":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomToLevel(1);
         return;
       case "nudge-left":
@@ -1474,22 +1539,26 @@ var InputHandler = class {
       case "nudge-up":
       case "nudge-down": {
         const delta = NUDGE_DELTAS[action];
-        if (delta && this.actions.nudge(delta[0], delta[1], e.shiftKey)) {
-          e.preventDefault();
+        if (delta && this.actions.nudge(delta[0], delta[1], e?.shiftKey ?? false)) {
+          e?.preventDefault();
         }
         return;
       }
       default:
         if (action.startsWith("tool:")) {
           if (this.isToolActive) return;
-          e.preventDefault();
+          e?.preventDefault();
           this.toolContext?.switchTool?.(action.slice("tool:".length));
           return;
         }
         console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
     }
   }
+  hasClipboard() {
+    return this.actions.hasClipboard();
+  }
   startPinch() {
+    this.cancelLongPress();
     this.inputFilter.reset();
     this.deferredDown = null;
     this.isPanning = true;
@@ -1501,18 +1570,18 @@ var InputHandler = class {
   handlePinchMove() {
     const [a, b] = this.getPinchPoints();
     const dist = this.distance(a, b);
-    const center = this.midpoint(a, b);
+    const center2 = this.midpoint(a, b);
     if (this.lastPinchDistance > 0) {
       const scale = dist / this.lastPinchDistance;
       const newZoom = this.camera.zoom * scale;
-      this.camera.zoomAt(newZoom, center);
+      this.camera.zoomAt(newZoom, center2);
     }
-    const dx = center.x - this.lastPointer.x;
-    const dy = center.y - this.lastPointer.y;
+    const dx = center2.x - this.lastPointer.x;
+    const dy = center2.y - this.lastPointer.y;
     this.camera.pan(dx, dy);
     this.lastPinchDistance = dist;
-    this.lastPinchCenter = center;
-    this.lastPointer = { ...center };
+    this.lastPinchCenter = center2;
+    this.lastPointer = { ...center2 };
   }
   getPinchPoints() {
     const pts = [...this.activePointers.values()];
@@ -1532,6 +1601,13 @@ var InputHandler = class {
     const rect = this.element.getBoundingClientRect();
     return this.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   }
+  onContextMenu = (e) => {
+    e.preventDefault();
+    if (this.toolManager?.activeTool?.name !== "select") return;
+    const rect = this.element.getBoundingClientRect();
+    const world = this.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    this.openContextMenu?.({ x: e.clientX, y: e.clientY }, world);
+  };
   onPointerLeave = (e) => {
     this.lastPointerEvent = null;
     this.onPointerUp(e);
@@ -1579,12 +1655,36 @@ var InputHandler = class {
     this.element.focus({ preventScroll: true });
   }
   cancelToolIfActive(e) {
+    this.cancelLongPress();
     if (this.isToolActive) {
       this.dispatchToolUp(e);
       this.isToolActive = false;
     }
     this.deferredDown = null;
   }
+  startLongPress(e) {
+    if (e.pointerType !== "touch") return;
+    if (this.toolManager?.activeTool?.name !== "select") return;
+    this.longPressStart = { x: e.clientX, y: e.clientY };
+    this.longPressTimer = setTimeout(() => this.fireLongPress(), LONG_PRESS_MS);
+  }
+  cancelLongPress() {
+    if (this.longPressTimer !== null) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+    this.longPressStart = null;
+  }
+  fireLongPress() {
+    this.longPressTimer = null;
+    if (!this.deferredDown || this.activePointers.size !== 1 || this.isPanning) return;
+    const start = this.longPressStart;
+    if (!start) return;
+    const rect = this.element.getBoundingClientRect();
+    const world = this.camera.screenToWorld({ x: start.x - rect.left, y: start.y - rect.top });
+    this.deferredDown = null;
+    this.openContextMenu?.({ x: start.x, y: start.y }, world);
+  }
 };
 
 // src/canvas/background.ts
@@ -2054,11 +2154,19 @@ var ElementStore = class {
       (el) => el.type === type
     );
   }
+  // Spatial index stores the rotation-expanded AABB so rotated elements remain
+  // broad-phase hit-test/marquee candidates; precise tests run against local bounds.
+  indexBounds(element) {
+    const bounds = getElementBounds(element);
+    if (!bounds) return null;
+    const angle = element.rotation ?? 0;
+    return angle === 0 ? bounds : rotatedAABB(bounds, angle);
+  }
   add(element) {
     this.sortedCache = null;
     this._versions.set(element.id, 0);
     this.elements.set(element.id, element);
-    const bounds = getElementBounds(element);
+    const bounds = this.indexBounds(element);
     if (bounds) this.spatialIndex.insert(element.id, bounds);
     this.bus.emit("add", element);
   }
@@ -2080,7 +2188,7 @@ var ElementStore = class {
       updated.text = sanitizeNoteHtml(updated.text);
     }
     this.elements.set(id, updated);
-    const newBounds = getElementBounds(updated);
+    const newBounds = this.indexBounds(updated);
     if (newBounds) {
       this.spatialIndex.update(id, newBounds);
     }
@@ -2113,7 +2221,7 @@ var ElementStore = class {
     for (const el of elements) {
       this.elements.set(el.id, el);
       this._versions.set(el.id, 0);
-      const bounds = getElementBounds(el);
+      const bounds = this.indexBounds(el);
       if (bounds) this.spatialIndex.insert(el.id, bounds);
       if (el.type === "stroke") {
         computeStrokeSegments(el);
@@ -2318,9 +2426,9 @@ function updateBoundArrow(arrow, store) {
   if (arrow.fromBinding) {
     const el = store.getById(arrow.fromBinding.elementId);
     if (el) {
-      const center = getElementCenter(el);
-      updates.from = center;
-      updates.position = center;
+      const center2 = getElementCenter(el);
+      updates.from = center2;
+      updates.position = center2;
     }
   }
   if (arrow.toBinding) {
@@ -2332,6 +2440,21 @@ function updateBoundArrow(arrow, store) {
   return Object.keys(updates).length > 0 ? updates : null;
 }
 
+// src/elements/rotate-canvas.ts
+function withRotation(ctx, el, center2, draw) {
+  const angle = el.rotation ?? 0;
+  if (angle === 0) {
+    draw();
+    return;
+  }
+  ctx.save();
+  ctx.translate(center2.x, center2.y);
+  ctx.rotate(angle);
+  ctx.translate(-center2.x, -center2.y);
+  draw();
+  ctx.restore();
+}
+
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
   if (cellSize <= 0) return { verticals: [], horizontals: [] };
@@ -2595,18 +2718,18 @@ function getHexDistance(a, b, cellSize, orientation) {
   const ds = -dq - dr;
   return Math.max(Math.abs(dq), Math.abs(dr), Math.abs(ds));
 }
-function getHexCellsInRadius(center, radiusCells, cellSize, orientation) {
+function getHexCellsInRadius(center2, radiusCells, cellSize, orientation) {
   const n = Math.round(radiusCells);
-  const off = pixelToOffset(center.x, center.y, cellSize, orientation);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   if (n <= 0) {
     return [offsetToPixel(off.col, off.row, cellSize, orientation)];
   }
   return enumerateHexRing(cube.q, cube.r, n, orientation, cellSize);
 }
-function getHexCellsInCone(center, angle, radiusCells, cellSize, orientation) {
+function getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation) {
   const n = Math.round(radiusCells);
-  const off = pixelToOffset(center.x, center.y, cellSize, orientation);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
   if (n <= 0) return [centerPixel];
@@ -2640,9 +2763,9 @@ function getHexCellsInCone(center, angle, radiusCells, cellSize, orientation) {
   }
   return cells;
 }
-function getHexCellsInLine(center, angle, radiusCells, cellSize, orientation) {
+function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
   const n = Math.round(radiusCells);
-  const off = pixelToOffset(center.x, center.y, cellSize, orientation);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
   if (n <= 0) return [centerPixel];
@@ -2678,9 +2801,9 @@ function getHexCellsInLine(center, angle, radiusCells, cellSize, orientation) {
   }
   return cells;
 }
-function getHexCellsInSquare(center, radiusCells, cellSize, orientation) {
+function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
   const n = Math.round(radiusCells);
-  const off = pixelToOffset(center.x, center.y, cellSize, orientation);
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
   const cube = offsetToCube(off.col, off.row, orientation);
   const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
   if (n <= 0) return [centerPixel];
@@ -2758,18 +2881,27 @@ var ElementRenderer = class {
   }
   renderCanvasElement(ctx, element) {
     switch (element.type) {
-      case "stroke":
-        this.renderStroke(ctx, element);
+      case "stroke": {
+        const b = getElementBounds(element);
+        const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
+        withRotation(ctx, element, c, () => this.renderStroke(ctx, element));
         break;
+      }
       case "arrow":
         this.renderArrow(ctx, element);
         break;
-      case "shape":
-        this.renderShape(ctx, element);
+      case "shape": {
+        const b = getElementBounds(element);
+        const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
+        withRotation(ctx, element, c, () => this.renderShape(ctx, element));
         break;
-      case "image":
-        this.renderImage(ctx, element);
+      }
+      case "image": {
+        const b = getElementBounds(element);
+        const c = b ? { x: b.x + b.w / 2, y: b.y + b.h / 2 } : element.position;
+        withRotation(ctx, element, c, () => this.renderImage(ctx, element));
         break;
+      }
       case "grid":
         this.renderGrid(ctx, element);
         break;
@@ -3066,20 +3198,20 @@ var ElementRenderer = class {
   renderHexTemplate(ctx, template, cellSize, orientation) {
     const snapUnit = Math.sqrt(3) * cellSize;
     const radiusCells = template.radius / snapUnit;
-    const center = template.position;
+    const center2 = template.position;
     let cells;
     switch (template.templateShape) {
       case "circle":
-        cells = getHexCellsInRadius(center, radiusCells, cellSize, orientation);
+        cells = getHexCellsInRadius(center2, radiusCells, cellSize, orientation);
         break;
       case "cone":
-        cells = getHexCellsInCone(center, template.angle, radiusCells, cellSize, orientation);
+        cells = getHexCellsInCone(center2, template.angle, radiusCells, cellSize, orientation);
         break;
       case "line":
-        cells = getHexCellsInLine(center, template.angle, radiusCells, cellSize, orientation);
+        cells = getHexCellsInLine(center2, template.angle, radiusCells, cellSize, orientation);
         break;
       case "square":
-        cells = getHexCellsInSquare(center, radiusCells, cellSize, orientation);
+        cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
         break;
     }
     ctx.save();
@@ -3100,7 +3232,7 @@ var ElementRenderer = class {
     {
       ctx.globalAlpha = Math.min(template.opacity + 0.1, 1);
       ctx.beginPath();
-      drawHexPath(ctx, center.x, center.y, cellSize, orientation);
+      drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
       ctx.fillStyle = template.strokeColor;
       ctx.fill();
       ctx.strokeStyle = template.strokeColor;
@@ -3109,7 +3241,7 @@ var ElementRenderer = class {
     }
     if (template.templateShape === "circle" && template.radiusFeet != null && template.radiusFeet > 0) {
       const r = template.radius;
-      this.renderRadiusMarker(ctx, center.x, center.y, r, template.radiusFeet);
+      this.renderRadiusMarker(ctx, center2.x, center2.y, r, template.radiusFeet);
     }
     ctx.restore();
   }
@@ -3739,6 +3871,87 @@ var NoteEditor = class {
   }
 };
 
+// src/canvas/context-menu.ts
+var ContextMenu = class {
+  constructor(options) {
+    this.options = options;
+  }
+  el = null;
+  outsideListener = null;
+  keyListener = null;
+  isOpen() {
+    return this.el !== null;
+  }
+  open(items, screenPos) {
+    this.close();
+    const el = document.createElement("div");
+    el.className = "fieldnotes-context-menu";
+    Object.assign(el.style, {
+      position: "fixed",
+      left: `${screenPos.x}px`,
+      top: `${screenPos.y}px`,
+      zIndex: "10000",
+      display: "flex",
+      flexDirection: "column"
+    });
+    for (const item of items) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "fieldnotes-context-menu-item" + (item.disabled ? " fieldnotes-context-menu-item--disabled" : "");
+      btn.textContent = item.label;
+      if (item.disabled) {
+        btn.disabled = true;
+      } else {
+        btn.addEventListener("click", () => {
+          this.options.onCommand(item.action);
+          this.close();
+        });
+      }
+      el.appendChild(btn);
+    }
+    document.body.appendChild(el);
+    this.el = el;
+    this.clampToViewport(el, screenPos);
+    this.keyListener = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    document.addEventListener("keydown", this.keyListener);
+    this.outsideListener = (e) => {
+      if (this.el && !this.el.contains(e.target)) this.close();
+    };
+    setTimeout(() => {
+      if (this.outsideListener) document.addEventListener("pointerdown", this.outsideListener);
+    }, 0);
+  }
+  close() {
+    if (this.keyListener) {
+      document.removeEventListener("keydown", this.keyListener);
+      this.keyListener = null;
+    }
+    if (this.outsideListener) {
+      document.removeEventListener("pointerdown", this.outsideListener);
+      this.outsideListener = null;
+    }
+    if (this.el) {
+      this.el.remove();
+      this.el = null;
+      this.options.onClose();
+    }
+  }
+  dispose() {
+    this.close();
+  }
+  clampToViewport(el, screenPos) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && screenPos.x + rect.width > window.innerWidth) {
+      el.style.left = `${Math.max(0, screenPos.x - rect.width)}px`;
+    }
+    if (rect.height > 0 && screenPos.y + rect.height > window.innerHeight) {
+      el.style.top = `${Math.max(0, screenPos.y - rect.height)}px`;
+    }
+  }
+};
+
 // src/elements/translate.ts
 function translateElementPatch(el, dx, dy) {
   const position = { x: el.position.x + dx, y: el.position.y + dy };
@@ -4228,6 +4441,7 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
 }
 
 // src/canvas/export-image.ts
+var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
   if (el.type !== "stroke") return null;
   if (el.points.length === 0) return null;
@@ -4253,8 +4467,10 @@ function getStrokeBounds(el) {
 }
 function getElementRect(el) {
   switch (el.type) {
-    case "stroke":
-      return getStrokeBounds(el);
+    case "stroke": {
+      const r = getStrokeBounds(el);
+      return r ? rotatedAABB(r, el.rotation ?? 0) : r;
+    }
     case "arrow": {
       const b = getArrowBounds(el.from, el.to, el.bend);
       const pad = el.width / 2 + 14;
@@ -4273,7 +4489,10 @@ function getElementRect(el) {
     case "text":
     case "shape":
       if ("size" in el) {
-        return { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
+        return rotatedAABB(
+          { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h },
+          el.rotation ?? 0
+        );
       }
       return null;
     default:
@@ -4411,11 +4630,13 @@ async function exportImage(store, options = {}, layerManager) {
       continue;
     }
     if (el.type === "note") {
-      renderNoteOnCanvas(ctx, el);
+      const b = getElementBounds(el);
+      withRotation(ctx, el, b ? center(b) : el.position, () => renderNoteOnCanvas(ctx, el));
       continue;
     }
     if (el.type === "text") {
-      renderTextOnCanvas(ctx, el);
+      const b = getElementBounds(el);
+      withRotation(ctx, el, b ? center(b) : el.position, () => renderTextOnCanvas(ctx, el));
       continue;
     }
     if (el.type === "html") {
@@ -4424,7 +4645,13 @@ async function exportImage(store, options = {}, layerManager) {
     if (el.type === "image") {
       const img = imageCache.get(el.id);
       if (img) {
-        ctx.drawImage(img, el.position.x, el.position.y, el.size.w, el.size.h);
+        const b = getElementBounds(el);
+        withRotation(
+          ctx,
+          el,
+          b ? center(b) : el.position,
+          () => ctx.drawImage(img, el.position.x, el.position.y, el.size.w, el.size.h)
+        );
       }
       continue;
     }
@@ -4760,7 +4987,9 @@ var DomNodeManager = class {
       top: `${element.position.y}px`,
       width: size ? `${size.w}px` : "auto",
       height: size ? `${size.h}px` : "auto",
-      zIndex: String(zIndex)
+      zIndex: String(zIndex),
+      transform: element.rotation ? `rotate(${element.rotation}rad)` : "",
+      transformOrigin: "50% 50%"
     });
     this.renderDomContent(node, element);
   }
@@ -5539,8 +5768,20 @@ var Viewport = class {
       fitToContent: () => this.fitToContent(),
       group: () => this.groupSelection(),
       ungroup: () => this.ungroupSelection(),
+      toggleLock: () => this.toggleLockSelection(),
+      openContextMenu: (screenPos, world) => {
+        this.getSelectTool()?.selectAtPoint(world, this.toolContext);
+        this.openContextMenu(screenPos);
+      },
       shortcuts: options.shortcuts
     });
+    if (options.contextMenu !== false) {
+      this.contextMenu = new ContextMenu({
+        onCommand: (action) => this.runAction(action),
+        onClose: noop
+      });
+    }
+    this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.startEditingElement(id),
@@ -5572,6 +5813,7 @@ var Viewport = class {
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
+      this.contextMenu?.close();
       this.requestRender();
     });
     this.unsubStore = [
@@ -5624,6 +5866,7 @@ var Viewport = class {
   canvasEl;
   wrapper;
   unsubCamera;
+  unsubToolChange;
   unsubStore;
   inputHandler;
   background;
@@ -5646,6 +5889,7 @@ var Viewport = class {
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
   tapDownY = 0;
+  contextMenu = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -5836,6 +6080,34 @@ var Viewport = class {
   getSelectedIds() {
     return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
   }
+  runAction(action) {
+    this.inputHandler.runAction(action);
+  }
+  canPaste() {
+    return this.inputHandler.hasClipboard();
+  }
+  openContextMenu(screenPos) {
+    if (!this.contextMenu) return;
+    const ids = this.getSelectedIds();
+    const items = [];
+    if (ids.length > 0) {
+      items.push({ label: "Cut", action: "cut" });
+      items.push({ label: "Copy", action: "copy" });
+      if (this.canPaste()) items.push({ label: "Paste", action: "paste" });
+      items.push({ label: "Duplicate", action: "duplicate" });
+      items.push({ label: "Delete", action: "delete" });
+      items.push({ label: "Bring to Front", action: "z-front" });
+      items.push({ label: "Bring Forward", action: "z-forward" });
+      items.push({ label: "Send Backward", action: "z-backward" });
+      items.push({ label: "Send to Back", action: "z-back" });
+      const allLocked = ids.every((id) => this.store.getById(id)?.locked);
+      items.push({ label: allLocked ? "Unlock" : "Lock", action: "toggle-lock" });
+    } else if (this.canPaste()) {
+      items.push({ label: "Paste", action: "paste" });
+    }
+    if (items.length === 0) return;
+    this.contextMenu.open(items, screenPos);
+  }
   onSelectionChange(listener) {
     const tool = this.getSelectTool();
     return tool ? tool.onSelectionChange(listener) : noop;
@@ -5896,6 +6168,20 @@ var Viewport = class {
     }
     this.historyRecorder.commit();
   }
+  toggleLockSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    const anyUnlocked = ids.some((id) => {
+      const el = this.store.getById(id);
+      return el ? !el.locked : false;
+    });
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el && el.locked !== anyUnlocked) this.store.update(id, { locked: anyUnlocked });
+    }
+    this.historyRecorder.commit();
+  }
   alignSelection(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
@@ -5937,13 +6223,13 @@ var Viewport = class {
   distributeSelection(axis) {
     const bounded = this.boundedSelection();
     if (bounded.length < 3) return;
-    const center = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
-    const sorted = [...bounded].sort((p, q) => center(p.bounds) - center(q.bounds));
+    const center2 = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
+    const sorted = [...bounded].sort((p, q) => center2(p.bounds) - center2(q.bounds));
     const first = sorted[0];
     const last = sorted[sorted.length - 1];
     if (!first || !last) return;
-    const c0 = center(first.bounds);
-    const cN = center(last.bounds);
+    const c0 = center2(first.bounds);
+    const cN = center2(last.bounds);
     const n = sorted.length;
     this.historyRecorder.begin();
     const moved = [];
@@ -5951,7 +6237,7 @@ var Viewport = class {
       const item = sorted[i];
       if (!item || !this.isMovable(item.el)) continue;
       const target = c0 + i * (cN - c0) / (n - 1);
-      const delta = target - center(item.bounds);
+      const delta = target - center2(item.bounds);
       if (delta === 0) continue;
       const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
       this.store.update(item.id, translateElementPatch(item.el, dx, dy));
@@ -5994,12 +6280,14 @@ var Viewport = class {
     this.noteEditor.destroy(this.store);
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
+    this.contextMenu?.dispose();
     this.wrapper.removeEventListener("pointerdown", this.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.onDragOver);
     this.wrapper.removeEventListener("drop", this.onDrop);
     this.inputHandler.destroy();
     this.unsubCamera();
+    this.unsubToolChange();
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
@@ -6674,10 +6962,10 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
       const excludeId = el.toBinding?.elementId;
       const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
-        const center = getElementCenter(target);
+        const center2 = getElementCenter(target);
         ctx.store.update(elementId, {
-          from: center,
-          position: center,
+          from: center2,
+          position: center2,
           fromBinding: { elementId: target.id }
         });
       } else {
@@ -6693,9 +6981,9 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
       const excludeId = el.fromBinding?.elementId;
       const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
-        const center = getElementCenter(target);
+        const center2 = getElementCenter(target);
         ctx.store.update(elementId, {
-          to: center,
+          to: center2,
           toBinding: { elementId: target.id }
         });
       } else {
@@ -6784,6 +7072,9 @@ var SNAP_PX = 6;
 var HANDLE_HIT_PADDING2 = 4;
 var SELECTION_PAD = 4;
 var MIN_ELEMENT_SIZE = 20;
+var ROTATE_HANDLE_OFFSET = 24;
+var ROTATE_SNAP = Math.PI / 12;
+var ROTATABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape", "stroke"]);
 var HANDLE_CURSORS = {
   nw: "nwse-resize",
   se: "nwse-resize",
@@ -6824,6 +7115,15 @@ var SelectTool = class {
     this.setSelectedIds(ids);
     this.ctx?.requestRender();
   }
+  selectAtPoint(world, ctx) {
+    const hit = this.hitTest(world, ctx);
+    if (!hit) {
+      this.setSelectedIds([]);
+      return;
+    }
+    if (this._selectedIds.includes(hit.id)) return;
+    this.setSelectedIds(expandToGroups([hit.id], ctx.store.getAll()));
+  }
   get isMarqueeActive() {
     return this.mode.type === "marquee";
   }
@@ -6872,6 +7172,22 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const rotateHit = this.hitTestRotateHandle(world, ctx);
+    if (rotateHit) {
+      const el = ctx.store.getById(rotateHit.elementId);
+      const layout = el ? this.getOverlayLayout(el, ctx.camera.zoom) : null;
+      if (el && layout) {
+        this.mode = {
+          type: "rotating",
+          elementId: rotateHit.elementId,
+          center: layout.center,
+          startPointerAngle: Math.atan2(world.y - layout.center.y, world.x - layout.center.x),
+          startRotation: el.rotation ?? 0
+        };
+        ctx.requestRender();
+        return;
+      }
+    }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       const el = ctx.store.getById(resizeHit.elementId);
@@ -6937,6 +7253,15 @@ var SelectTool = class {
       this.handleTemplateResize(world, ctx);
       return;
     }
+    if (this.mode.type === "rotating") {
+      const { elementId, center: center2, startPointerAngle, startRotation } = this.mode;
+      const a = Math.atan2(world.y - center2.y, world.x - center2.x);
+      let next = startRotation + (a - startPointerAngle);
+      if (state.shiftKey) next = Math.round(next / ROTATE_SNAP) * ROTATE_SNAP;
+      ctx.store.update(elementId, { rotation: normalizeAngle(next) });
+      ctx.requestRender();
+      return;
+    }
     if (this.mode.type === "resizing") {
       ctx.setCursor?.(HANDLE_CURSORS[this.mode.handle]);
       this.handleResize(world, ctx, state.shiftKey);
@@ -7139,6 +7464,10 @@ var SelectTool = class {
       ctx.setCursor?.("nwse-resize");
       return null;
     }
+    if (this.hitTestRotateHandle(world, ctx)) {
+      ctx.setCursor?.("grab");
+      return null;
+    }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
@@ -7157,6 +7486,11 @@ var SelectTool = class {
     if (this.mode.type !== "resizing") return;
     const el = ctx.store.getById(this.mode.elementId);
     if (!el || !("size" in el) || el.locked) return;
+    const angle = el.rotation ?? 0;
+    if (angle !== 0) {
+      this.handleRotatedResize(world, el, angle, ctx, shiftKey);
+      return;
+    }
     const { handle } = this.mode;
     const dx = world.x - this.lastWorld.x;
     const dy = world.y - this.lastWorld.y;
@@ -7214,6 +7548,78 @@ var SelectTool = class {
     this.updateArrowsBoundTo([this.mode.elementId], ctx);
     ctx.requestRender();
   }
+  anchorOffset(handle, w, h) {
+    switch (handle) {
+      case "se":
+        return { x: -w / 2, y: -h / 2 };
+      case "sw":
+        return { x: w / 2, y: -h / 2 };
+      case "ne":
+        return { x: -w / 2, y: h / 2 };
+      case "nw":
+        return { x: w / 2, y: h / 2 };
+      default:
+        return { x: 0, y: 0 };
+    }
+  }
+  handleRotatedResize(world, el, angle, ctx, shiftKey) {
+    if (this.mode.type !== "resizing") return;
+    const { handle } = this.mode;
+    const wdx = world.x - this.lastWorld.x;
+    const wdy = world.y - this.lastWorld.y;
+    this.lastWorld = world;
+    const cosN = Math.cos(-angle);
+    const sinN = Math.sin(-angle);
+    const ldx = wdx * cosN - wdy * sinN;
+    const ldy = wdx * sinN + wdy * cosN;
+    let w = el.size.w;
+    let h = el.size.h;
+    switch (handle) {
+      case "se":
+        w += ldx;
+        h += ldy;
+        break;
+      case "sw":
+        w -= ldx;
+        h += ldy;
+        break;
+      case "ne":
+        w += ldx;
+        h -= ldy;
+        break;
+      case "nw":
+        w -= ldx;
+        h -= ldy;
+        break;
+    }
+    if (shiftKey && this.resizeAspectRatio > 0) {
+      const absDw = Math.abs(w - el.size.w);
+      const absDh = Math.abs(h - el.size.h);
+      if (absDw >= absDh) h = w / this.resizeAspectRatio;
+      else w = h * this.resizeAspectRatio;
+    }
+    w = Math.max(w, MIN_ELEMENT_SIZE);
+    h = Math.max(h, MIN_ELEMENT_SIZE);
+    const oldCenter = { x: el.position.x + el.size.w / 2, y: el.position.y + el.size.h / 2 };
+    const oldAnchorLocal = this.anchorOffset(handle, el.size.w, el.size.h);
+    const anchorWorld = rotatePoint(
+      { x: oldCenter.x + oldAnchorLocal.x, y: oldCenter.y + oldAnchorLocal.y },
+      oldCenter,
+      angle
+    );
+    const newAnchorLocal = this.anchorOffset(handle, w, h);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const rotatedAnchor = {
+      x: newAnchorLocal.x * cos - newAnchorLocal.y * sin,
+      y: newAnchorLocal.x * sin + newAnchorLocal.y * cos
+    };
+    const newCenter = { x: anchorWorld.x - rotatedAnchor.x, y: anchorWorld.y - rotatedAnchor.y };
+    const position = { x: newCenter.x - w / 2, y: newCenter.y - h / 2 };
+    ctx.store.update(this.mode.elementId, { position, size: { w, h } });
+    this.updateArrowsBoundTo([this.mode.elementId], ctx);
+    ctx.requestRender();
+  }
   hitTestResizeHandle(world, ctx) {
     if (this._selectedIds.length === 0) return null;
     const zoom = ctx.camera.zoom;
@@ -7221,11 +7627,11 @@ var SelectTool = class {
     for (const id of this._selectedIds) {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) continue;
+      if (el.locked) continue;
       if (el.type === "shape" && el.shape === "line") continue;
-      const bounds = getElementBounds(el);
-      if (!bounds) continue;
-      const corners = this.getHandlePositions(bounds);
-      for (const [handle, pos] of corners) {
+      const layout = this.getOverlayLayout(el, zoom);
+      if (!layout) continue;
+      for (const [handle, pos] of layout.corners) {
         if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
           return { elementId: id, handle };
         }
@@ -7233,6 +7639,19 @@ var SelectTool = class {
     }
     return null;
   }
+  hitTestRotateHandle(world, ctx) {
+    if (this._selectedIds.length !== 1) return null;
+    const id = this._selectedIds[0];
+    if (!id) return null;
+    const el = ctx.store.getById(id);
+    if (!el || el.locked || !ROTATABLE_TYPES.has(el.type)) return null;
+    const layout = this.getOverlayLayout(el, ctx.camera.zoom);
+    if (!layout) return null;
+    const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+    const dx = world.x - layout.rotateHandle.x;
+    const dy = world.y - layout.rotateHandle.y;
+    return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+  }
   hitTestLineHandles(world, ctx) {
     if (this._selectedIds.length === 0) return null;
     const zoom = ctx.camera.zoom;
@@ -7255,6 +7674,30 @@ var SelectTool = class {
       ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
     ];
   }
+  getOverlayLayout(el, zoom) {
+    const bounds = getElementBounds(el);
+    if (!bounds) return null;
+    const angle = el.rotation ?? 0;
+    const pad = SELECTION_PAD / zoom;
+    const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+    const raw = [
+      ["nw", { x: bounds.x - pad, y: bounds.y - pad }],
+      ["ne", { x: bounds.x + bounds.w + pad, y: bounds.y - pad }],
+      ["sw", { x: bounds.x - pad, y: bounds.y + bounds.h + pad }],
+      ["se", { x: bounds.x + bounds.w + pad, y: bounds.y + bounds.h + pad }]
+    ];
+    const corners = raw.map(
+      ([h, p]) => [h, rotatePoint(p, center2, angle)]
+    );
+    const topMid = { x: center2.x, y: bounds.y - pad - ROTATE_HANDLE_OFFSET / zoom };
+    const rotateHandle = rotatePoint(topMid, center2, angle);
+    return { center: center2, corners, rotateHandle, angle };
+  }
+  topMidpoint(layout) {
+    const nw = layout.corners.find(([h]) => h === "nw")?.[1] ?? { x: 0, y: 0 };
+    const ne = layout.corners.find(([h]) => h === "ne")?.[1] ?? { x: 0, y: 0 };
+    return { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
+  }
   renderMarquee(canvasCtx) {
     if (this.mode.type !== "marquee") return;
     const rect = this.getMarqueeRect();
@@ -7299,49 +7742,110 @@ var SelectTool = class {
       }
       const bounds = getElementBounds(el);
       if (!bounds) continue;
+      const layout = this.getOverlayLayout(el, zoom);
+      if (!layout) continue;
       const pad = SELECTION_PAD / zoom;
-      canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
-      if ("size" in el) {
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        const corners = this.getHandlePositions(bounds);
-        for (const [, pos] of corners) {
+      if (layout.angle === 0) {
+        canvasCtx.strokeRect(
+          bounds.x - pad,
+          bounds.y - pad,
+          bounds.w + pad * 2,
+          bounds.h + pad * 2
+        );
+      } else {
+        const ordered = ["nw", "ne", "se", "sw"].map((h) => layout.corners.find(([c]) => c === h)?.[1]).filter((p) => !!p);
+        const [p0, ...others] = ordered;
+        if (p0) {
+          canvasCtx.beginPath();
+          canvasCtx.moveTo(p0.x, p0.y);
+          for (const p of others) canvasCtx.lineTo(p.x, p.y);
+          canvasCtx.closePath();
+          canvasCtx.stroke();
+        }
+      }
+      if (!el.locked) {
+        if ("size" in el) {
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          const corners = layout.angle === 0 ? this.getHandlePositions(bounds) : layout.corners;
+          for (const [, pos] of corners) {
+            canvasCtx.fillRect(
+              pos.x - handleWorldSize / 2,
+              pos.y - handleWorldSize / 2,
+              handleWorldSize,
+              handleWorldSize
+            );
+            canvasCtx.strokeRect(
+              pos.x - handleWorldSize / 2,
+              pos.y - handleWorldSize / 2,
+              handleWorldSize,
+              handleWorldSize
+            );
+          }
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+        } else if (el.type === "template") {
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          const hx = bounds.x + bounds.w;
+          const hy = bounds.y + bounds.h;
           canvasCtx.fillRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
             handleWorldSize,
             handleWorldSize
           );
           canvasCtx.strokeRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
             handleWorldSize,
             handleWorldSize
           );
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+        }
+        if (this._selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
+          const stemStart = this.topMidpoint(layout);
+          const stemEnd = layout.rotateHandle;
+          canvasCtx.beginPath();
+          canvasCtx.moveTo(stemStart.x, stemStart.y);
+          canvasCtx.lineTo(stemEnd.x, stemEnd.y);
+          canvasCtx.stroke();
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          canvasCtx.beginPath();
+          canvasCtx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
+          canvasCtx.fill();
+          canvasCtx.stroke();
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
         }
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-      } else if (el.type === "template") {
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        const hx = bounds.x + bounds.w;
-        const hy = bounds.y + bounds.h;
-        canvasCtx.fillRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        canvasCtx.strokeRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+      if (el.locked) {
+        const ne = layout.corners.find(([h]) => h === "ne")?.[1];
+        if (ne) this.drawLockBadge(canvasCtx, ne, zoom);
       }
     }
     canvasCtx.restore();
   }
+  drawLockBadge(ctx, at, zoom) {
+    const r = 9 / zoom;
+    ctx.save();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill();
+    ctx.strokeStyle = "#2196F3";
+    ctx.lineWidth = 1.5 / zoom;
+    ctx.stroke();
+    const bw = 8 / zoom;
+    const bh = 6 / zoom;
+    ctx.fillStyle = "#2196F3";
+    ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
+    ctx.beginPath();
+    ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
+    ctx.lineWidth = 1.4 / zoom;
+    ctx.stroke();
+    ctx.restore();
+  }
   renderBindingHighlights(canvasCtx, arrow, zoom) {
     if (!this.ctx) return;
     if (!arrow.fromBinding && !arrow.toBinding) return;
@@ -7418,7 +7922,7 @@ var SelectTool = class {
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (el.type === "grid") continue;
       const bounds = getElementBounds(el);
-      if (bounds && this.rectsOverlap(marquee, bounds)) {
+      if (bounds && this.rectsOverlap(marquee, rotatedAABB(bounds, el.rotation ?? 0))) {
         ids.push(el.id);
       }
     }
@@ -7440,6 +7944,13 @@ var SelectTool = class {
   }
   isInsideBounds(point, el) {
     if (el.type === "grid") return false;
+    const angle = el.rotation ?? 0;
+    if (angle !== 0) {
+      const b = getElementBounds(el);
+      if (b) {
+        point = rotatePoint(point, { x: b.x + b.w / 2, y: b.y + b.h / 2 }, -angle);
+      }
+    }
     if (el.type === "shape" && el.shape === "line") {
       const [a, b] = lineEndpoints(el);
       const threshold = Math.max(el.strokeWidth / 2, 6);
@@ -8206,20 +8717,20 @@ var TemplateTool = class {
     const snapUnit = Math.sqrt(3) * cellSize;
     const radiusCells = radius / snapUnit;
     const angle = this.computeAngle();
-    const center = this.origin;
+    const center2 = this.origin;
     let hexCells;
     switch (this.templateShape) {
       case "circle":
-        hexCells = getHexCellsInRadius(center, radiusCells, cellSize, orientation);
+        hexCells = getHexCellsInRadius(center2, radiusCells, cellSize, orientation);
         break;
       case "cone":
-        hexCells = getHexCellsInCone(center, angle, radiusCells, cellSize, orientation);
+        hexCells = getHexCellsInCone(center2, angle, radiusCells, cellSize, orientation);
         break;
       case "line":
-        hexCells = getHexCellsInLine(center, angle, radiusCells, cellSize, orientation);
+        hexCells = getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation);
         break;
       case "square":
-        hexCells = getHexCellsInSquare(center, radiusCells, cellSize, orientation);
+        hexCells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
         break;
     }
     ctx.save();
@@ -8240,7 +8751,7 @@ var TemplateTool = class {
     if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square") {
       ctx.globalAlpha = 0.5;
       ctx.beginPath();
-      drawHexPath(ctx, center.x, center.y, cellSize, orientation);
+      drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
       ctx.fillStyle = this.strokeColor;
       ctx.fill();
       ctx.strokeStyle = this.strokeColor;
@@ -8256,8 +8767,8 @@ var TemplateTool = class {
         ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
         ctx.textAlign = "center";
         ctx.textBaseline = "bottom";
-        const textX = center.x;
-        const textY = center.y - 4;
+        const textX = center2.x;
+        const textY = center2.y - 4;
         const metrics = ctx.measureText(label);
         const padX = 4;
         const padY = 2;
@@ -8307,7 +8818,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.34.0";
+var VERSION = "0.36.0";
 export {
   ArrowTool,
   AutoSave,