@fieldnotes/core 0.33.0 → 0.35.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) {
@@ -940,6 +970,14 @@ var KeyboardActions = class {
     if (this.deps.isToolActive()) return;
     this.deps.fitToContent?.();
   }
+  group() {
+    if (this.deps.isToolActive()) return;
+    this.deps.group?.();
+  }
+  ungroup() {
+    if (this.deps.isToolActive()) return;
+    this.deps.ungroup?.();
+  }
   zOrder(operation) {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -973,6 +1011,10 @@ var KeyboardActions = class {
     for (const el of source) {
       idMap.set(el.id, createId(el.type));
     }
+    const groupIdMap = /* @__PURE__ */ new Map();
+    for (const el of source) {
+      if (el.groupId && !groupIdMap.has(el.groupId)) groupIdMap.set(el.groupId, createId("group"));
+    }
     const newIds = [];
     const recorder = this.deps.getHistoryRecorder();
     recorder?.begin();
@@ -981,6 +1023,7 @@ var KeyboardActions = class {
       const newId = idMap.get(el.id);
       if (!newId) continue;
       clone.id = newId;
+      if (clone.groupId) clone.groupId = groupIdMap.get(clone.groupId) ?? clone.groupId;
       clone.position = { x: clone.position.x + offset.x, y: clone.position.y + offset.y };
       if (clone.type === "arrow") {
         const arrow = clone;
@@ -1034,6 +1077,8 @@ var DEFAULT_BINDINGS = [
   ["zoom-in", ["mod+="]],
   ["zoom-out", ["mod+-"]],
   ["zoom-reset", ["mod+0"]],
+  ["group", ["mod+g"]],
+  ["ungroup", ["mod+shift+g"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1193,6 +1238,8 @@ var InputHandler = class {
       getHistoryStack: () => this.historyStack,
       isToolActive: () => this.isToolActive,
       fitToContent: options.fitToContent,
+      group: options.group,
+      ungroup: options.ungroup,
       getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
@@ -1432,6 +1479,14 @@ var InputHandler = class {
         e.preventDefault();
         this.actions.zoomToFit();
         return;
+      case "group":
+        e.preventDefault();
+        this.actions.group();
+        return;
+      case "ungroup":
+        e.preventDefault();
+        this.actions.ungroup();
+        return;
       case "zoom-in":
         e.preventDefault();
         this.zoomByFactor(ZOOM_STEP);
@@ -1476,18 +1531,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()];
@@ -2029,11 +2084,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);
   }
@@ -2055,7 +2118,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);
     }
@@ -2088,7 +2151,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);
@@ -2293,9 +2356,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) {
@@ -2307,6 +2370,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: [] };
@@ -2570,18 +2648,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];
@@ -2615,9 +2693,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];
@@ -2653,9 +2731,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];
@@ -2733,18 +2811,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;
@@ -3041,20 +3128,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();
@@ -3075,7 +3162,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;
@@ -3084,7 +3171,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();
   }
@@ -3937,12 +4024,19 @@ var UpdateElementCommand = class {
     this.current = current;
   }
   execute(store) {
-    store.update(this.id, { ...this.current });
+    store.update(this.id, diffPatch(this.previous, this.current));
   }
   undo(store) {
-    store.update(this.id, { ...this.previous });
+    store.update(this.id, diffPatch(this.current, this.previous));
   }
 };
+function diffPatch(from, to) {
+  const patch = { ...to };
+  for (const key of Object.keys(from)) {
+    if (!(key in to)) patch[key] = void 0;
+  }
+  return patch;
+}
 var BatchCommand = class {
   commands;
   constructor(commands) {
@@ -4196,6 +4290,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;
@@ -4221,8 +4316,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;
@@ -4241,7 +4338,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:
@@ -4379,11 +4479,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") {
@@ -4392,7 +4494,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;
     }
@@ -4728,7 +4836,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);
   }
@@ -5505,6 +5615,8 @@ var Viewport = class {
       historyRecorder: this.historyRecorder,
       historyStack: this.history,
       fitToContent: () => this.fitToContent(),
+      group: () => this.groupSelection(),
+      ungroup: () => this.ungroupSelection(),
       shortcuts: options.shortcuts
     });
     this.domNodeManager = new DomNodeManager({
@@ -5842,6 +5954,26 @@ var Viewport = class {
     }
     this.historyRecorder.commit();
   }
+  groupSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length < 2) return;
+    const groupId = createId("group");
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      if (this.store.getById(id)) this.store.update(id, { groupId });
+    }
+    this.historyRecorder.commit();
+  }
+  ungroupSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el && el.groupId !== void 0) this.store.update(id, { groupId: void 0 });
+    }
+    this.historyRecorder.commit();
+  }
   alignSelection(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
@@ -5883,13 +6015,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 = [];
@@ -5897,7 +6029,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));
@@ -6551,6 +6683,26 @@ var EraserTool = class {
   }
 };
 
+// src/elements/group.ts
+function expandToGroups(ids, elements) {
+  const byId = new Map(elements.map((e) => [e.id, e]));
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const id of ids) {
+    const g = byId.get(id)?.groupId;
+    if (g) groupIds.add(g);
+  }
+  if (groupIds.size === 0) return ids;
+  const idSet = new Set(ids);
+  const result = [...ids];
+  for (const el of elements) {
+    if (el.groupId && groupIds.has(el.groupId) && !idSet.has(el.id)) {
+      result.push(el.id);
+      idSet.add(el.id);
+    }
+  }
+  return result;
+}
+
 // src/tools/arrow-handles.ts
 var BIND_THRESHOLD = 20;
 var HANDLE_RADIUS = 5;
@@ -6600,10 +6752,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 {
@@ -6619,9 +6771,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 {
@@ -6710,6 +6862,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",
@@ -6798,6 +6953,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);
@@ -6816,18 +6987,20 @@ var SelectTool = class {
     this.hasDragged = false;
     const hit = this.hitTest(world, ctx);
     if (hit) {
+      const all = ctx.store.getAll();
       const alreadySelected = this._selectedIds.includes(hit.id);
       if (state.shiftKey) {
         if (alreadySelected) {
-          this.setSelectedIds(this._selectedIds.filter((id) => id !== hit.id));
+          const grp = new Set(expandToGroups([hit.id], all));
+          this.setSelectedIds(this._selectedIds.filter((id) => !grp.has(id)));
           this.mode = { type: "idle" };
         } else {
-          this.setSelectedIds([...this._selectedIds, hit.id]);
+          this.setSelectedIds(expandToGroups([...this._selectedIds, hit.id], all));
           this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
         }
       } else {
         if (!alreadySelected) {
-          this.setSelectedIds([hit.id]);
+          this.setSelectedIds(expandToGroups([hit.id], all));
         } else if (this._selectedIds.length > 1) {
           this.pendingSingleSelectId = hit.id;
         }
@@ -6861,6 +7034,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);
@@ -6941,12 +7123,12 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this.setSelectedIds(this.findElementsInRect(rect, ctx));
+        this.setSelectedIds(expandToGroups(this.findElementsInRect(rect, ctx), ctx.store.getAll()));
       }
       ctx.requestRender();
     }
     if (!this.hasDragged && this.pendingSingleSelectId !== null) {
-      this.setSelectedIds([this.pendingSingleSelectId]);
+      this.setSelectedIds(expandToGroups([this.pendingSingleSelectId], ctx.store.getAll()));
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
@@ -7063,6 +7245,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]);
@@ -7081,6 +7267,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;
@@ -7138,6 +7329,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;
@@ -7146,10 +7409,9 @@ var SelectTool = class {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) 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 };
         }
@@ -7157,6 +7419,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;
@@ -7179,6 +7454,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();
@@ -7223,12 +7522,31 @@ 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 (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 ("size" in el) {
         canvasCtx.setLineDash([]);
         canvasCtx.fillStyle = "#ffffff";
-        const corners = this.getHandlePositions(bounds);
+        const corners = layout.angle === 0 ? this.getHandlePositions(bounds) : layout.corners;
         for (const [, pos] of corners) {
           canvasCtx.fillRect(
             pos.x - handleWorldSize / 2,
@@ -7263,6 +7581,21 @@ var SelectTool = class {
         );
         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.restore();
   }
@@ -7342,7 +7675,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);
       }
     }
@@ -7364,6 +7697,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);
@@ -8130,20 +8470,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();
@@ -8164,7 +8504,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;
@@ -8180,8 +8520,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;
@@ -8231,7 +8571,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.33.0";
+var VERSION = "0.35.0";
 export {
   ArrowTool,
   AutoSave,