@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/design/shared/canvas-math.ts

@@ -19,6 +19,10 @@ export interface FrameGeometry {
   y: number;
   width: number;
   height: number;
+  /** Rotation in degrees, matching a CSS `rotate(deg)` applied around the
+   *  frame's own center. Optional — most geometry helpers here ignore it
+   *  unless documented otherwise (see the rotation-aware helpers below). */
+  rotation?: number;
 }
 
 export interface FrameEntry {
@@ -61,6 +65,15 @@ export interface CanvasSnapOptions {
   bypass?: boolean;
 }
 
+export interface ResizeSnapOptions extends CanvasSnapOptions {
+  /** When set, only the single closest-matching axis snap is applied and the
+   *  other axis is rescaled to match, so a shift-held aspect-ratio resize
+   *  never gets distorted by independently snapping both axes to different
+   *  sibling edges. Pass the frame's aspect ratio (width / height) *before*
+   *  this resize's own aspect-preserving delta was applied. */
+  preserveAspectRatio?: boolean;
+}
+
 export interface ResizeFrameOptions {
   preserveAspectRatio?: boolean;
   resizeFromCenter?: boolean;
@@ -78,6 +91,13 @@ export interface DraftGeometryOptions {
   minHeight?: number;
   defaultWidth?: number;
   defaultHeight?: number;
+  /** Constrain to equal width/height (square/circle) while drawing — the
+   *  larger of the two dragged dimensions wins, matching Figma's shift-drag
+   *  behavior for rect/ellipse tools. */
+  square?: boolean;
+  /** Draw outward from `start` in both directions (start is the shape's
+   *  center) instead of from one corner to the opposite corner. */
+  fromCenter?: boolean;
 }
 
 export interface AlignmentGuide {
@@ -87,6 +107,35 @@ export interface AlignmentGuide {
   end: number;
 }
 
+/** One equal-spacing "gap band" — the empty space between the moving frame
+ *  and one neighboring stationary frame, on a given axis. `crossStart`/
+ *  `crossEnd` are the band's extent on the OTHER axis (e.g. for a
+ *  horizontal gap, that's the vertical span the tick marks/label should
+ *  draw across), matching how `AlignmentGuide.start`/`end` describe a
+ *  guide line's own extent. */
+export interface DistanceGuideBand {
+  gapStart: number;
+  gapEnd: number;
+  crossStart: number;
+  crossEnd: number;
+}
+
+/** A pair of equal-sized gaps around the moving frame — Figma's "smart
+ *  spacing" indicator: dragging a frame so it's evenly spaced between two
+ *  neighbors (or continues an existing rhythm of equally spaced siblings)
+ *  highlights both gaps with the shared distance. */
+export interface EqualGapGuide {
+  orientation: "vertical" | "horizontal";
+  /** The shared gap size, in canvas units, both bands agree on. */
+  gap: number;
+  bands: [DistanceGuideBand, DistanceGuideBand];
+}
+
+export interface EqualGapOptions {
+  /** How close two gaps must be (in canvas units) to count as "equal". */
+  toleranceCanvasPx?: number;
+}
+
 export interface RotateFrameMetadata {
   id: string;
   geometry: FrameGeometry;
@@ -177,6 +226,22 @@ export const DEFAULT_ASSIGNED_REGION_HEIGHT = 1024;
 export const DEFAULT_ASSIGNED_REGION_GAP = 320;
 export const DEFAULT_ASSIGNED_REGION_MAX_COLUMNS = 3;
 
+/**
+ * Zoom range for the MultiScreenCanvas overview surface (wheel/pinch zoom,
+ * toolbar/keyboard zoom, pixel-grid threshold). Exported so every zoom-clamp
+ * in MultiScreenCanvas.tsx reads from one place instead of a locally
+ * redeclared magic number.
+ *
+ * NOTE: DesignCanvas's own single-screen pinch-zoom currently clamps to a
+ * different range (10–500) — that's a separate, pre-existing surface with
+ * its own zoom semantics (it also supports device-frame previews at fixed
+ * scales) and reconciling the two ranges is intentionally left as a
+ * follow-up rather than done here, since DesignCanvas.tsx is out of scope
+ * for this fix.
+ */
+export const DEFAULT_CANVAS_MIN_ZOOM = 2;
+export const DEFAULT_CANVAS_MAX_ZOOM = 800;
+
 export function screenToCanvasPoint(
   point: CanvasPoint,
   camera: CanvasCamera,
@@ -285,6 +350,41 @@ export function getRotatedFrameAngle(
   };
 }
 
+/**
+ * Rotates a group of frames together around a single shared pivot (the
+ * group's own center), for multi-selection rotate: each frame's own
+ * rotation increases by `deltaDegrees` (so it keeps spinning around its own
+ * center visually), AND its center orbits `groupCenter` by the same delta,
+ * so the whole selection rotates rigidly as one unit rather than each frame
+ * spinning in place where it already sits.
+ *
+ * `frames` must carry each frame's ORIGINAL (drag-start) geometry — this is
+ * a pure function of the origin snapshot and the total delta so far, not an
+ * incremental transform, matching the convention `resizeFrameGroupFromDelta`
+ * already uses for group resize.
+ */
+export function rotateFrameGroupAroundCenter(
+  frames: FrameEntry[],
+  groupCenter: CanvasPoint,
+  deltaDegrees: number,
+): FrameEntry[] {
+  return frames.map((frame) => {
+    const bounds = getFrameBounds(frame.geometry);
+    const originCenter = { x: bounds.centerX, y: bounds.centerY };
+    const nextCenter = rotatePoint(originCenter, groupCenter, deltaDegrees);
+    const nextRotation = (frame.geometry.rotation ?? 0) + deltaDegrees;
+    return {
+      id: frame.id,
+      geometry: {
+        ...frame.geometry,
+        x: nextCenter.x - frame.geometry.width / 2,
+        y: nextCenter.y - frame.geometry.height / 2,
+        rotation: nextRotation,
+      },
+    };
+  });
+}
+
 export function getFrameBounds(geometry: FrameGeometry): FrameBounds {
   const width = geometry.width;
   const height = geometry.height;
@@ -449,12 +549,52 @@ export function getDraftGeometryFromPoints(
     minHeight = 1,
     defaultWidth,
     defaultHeight,
+    square = false,
+    fromCenter = false,
   }: DraftGeometryOptions = {},
 ): FrameGeometry {
-  const rawWidth = Math.abs(end.x - start.x);
-  const rawHeight = Math.abs(end.y - start.y);
-  const width = Math.max(rawWidth || defaultWidth || 0, minWidth);
-  const height = Math.max(rawHeight || defaultHeight || 0, minHeight);
+  // When drawing from the center, `end` marks one edge/corner of the shape
+  // rather than the opposite corner from `start` — the pointer's distance
+  // from center is a HALF-extent, so the full width/height is double the
+  // raw drag distance.
+  const centerMultiplier = fromCenter ? 2 : 1;
+  let rawWidth = Math.abs(end.x - start.x) * centerMultiplier;
+  let rawHeight = Math.abs(end.y - start.y) * centerMultiplier;
+
+  if (square) {
+    // Figma's shift-drag: the larger dragged dimension wins, both axes match
+    // it. Preserve each axis's own drag direction (handled below via
+    // drawingLeft/drawingUp) — only the magnitude is unified here.
+    const side = Math.max(rawWidth, rawHeight);
+    rawWidth = side;
+    rawHeight = side;
+  }
+
+  let width = Math.max(rawWidth || defaultWidth || 0, minWidth);
+  let height = Math.max(rawHeight || defaultHeight || 0, minHeight);
+
+  if (square && width !== height) {
+    // Zero-drag (a plain click before any movement) falls through to
+    // defaultWidth/defaultHeight and minWidth/minHeight independently, which
+    // can disagree even though rawWidth/rawHeight were already unified
+    // above. Re-unify using the larger side so a square/circle click-to-
+    // place still starts out square instead of using mismatched defaults.
+    const side = Math.max(width, height);
+    width = side;
+    height = side;
+  }
+
+  if (fromCenter) {
+    // `start` is the shape's center — grow outward symmetrically in both
+    // directions instead of anchoring one corner at `start`.
+    return {
+      x: start.x - width / 2,
+      y: start.y - height / 2,
+      width,
+      height,
+    };
+  }
+
   const drawingLeft = end.x < start.x;
   const drawingUp = end.y < start.y;
 
@@ -493,13 +633,16 @@ export function computeMoveSnap(
   let bestX: SnapCandidate | null = null;
   let bestY: SnapCandidate | null = null;
   const threshold = getCanvasSnapThreshold(options);
+  // Use the rotated (world-space) AABB rather than the unrotated local
+  // bounds, so a rotated frame snaps by its visual silhouette instead of an
+  // AABB that doesn't match anything on screen.
   const stationaryBounds = stationary.map((entry) => ({
     ...entry,
-    bounds: getFrameBounds(entry.geometry),
+    bounds: getRotatedFrameAABB(entry.geometry),
   }));
 
   for (const entry of moving) {
-    const movingBounds = getFrameBounds(entry.geometry);
+    const movingBounds = getRotatedFrameAABB(entry.geometry);
     for (const stationaryEntry of stationaryBounds) {
       bestX = getBestCandidate(
         bestX,
@@ -529,6 +672,168 @@ export function computeMoveSnap(
   };
 }
 
+/**
+ * Figma-style "smart spacing" guides (CV11): when a single moving frame sits
+ * between two stationary neighbors with matching gaps on either side — or
+ * continues that same gap on just one side — highlight both gaps with their
+ * shared distance. This is purely a *display* aid (unlike computeMoveSnap,
+ * it never adjusts the frame's position) so callers should compute it
+ * independently of, and after, any snap offset has already been applied to
+ * the moving frame's geometry.
+ *
+ * Only single-frame moves are supported (matching how Figma's own equal-gap
+ * guides only appear while dragging one object) — pass the already-resolved
+ * single moving frame, not a multi-select group.
+ */
+export function computeEqualGapGuides(
+  moving: FrameGeometry,
+  stationary: FrameEntry[],
+  { toleranceCanvasPx = 1 }: EqualGapOptions = {},
+): EqualGapGuide[] {
+  const movingBounds = getRotatedFrameAABB(moving);
+  const guides: EqualGapGuide[] = [];
+
+  const horizontal = collectAxisGapCandidates("x", movingBounds, stationary);
+  guides.push(...pairUpEqualGaps("vertical", horizontal, toleranceCanvasPx));
+
+  const vertical = collectAxisGapCandidates("y", movingBounds, stationary);
+  guides.push(...pairUpEqualGaps("horizontal", vertical, toleranceCanvasPx));
+
+  return guides;
+}
+
+interface GapCandidate {
+  /** "before" = stationary frame is to the left/above the moving frame;
+   *  "after" = to the right/below. */
+  side: "before" | "after";
+  gap: number;
+  gapStart: number;
+  gapEnd: number;
+  crossStart: number;
+  crossEnd: number;
+}
+
+function collectAxisGapCandidates(
+  axis: "x" | "y",
+  movingBounds: FrameBounds,
+  stationary: FrameEntry[],
+): GapCandidate[] {
+  const candidates: GapCandidate[] = [];
+  for (const entry of stationary) {
+    const bounds = getRotatedFrameAABB(entry.geometry);
+    // Only frames that overlap the moving frame's extent on the OTHER axis
+    // produce a meaningful "gap between them" — otherwise the empty space
+    // isn't really a corridor connecting the two shapes.
+    const crossOverlaps =
+      axis === "x"
+        ? bounds.top < movingBounds.bottom && bounds.bottom > movingBounds.top
+        : bounds.left < movingBounds.right && bounds.right > movingBounds.left;
+    if (!crossOverlaps) continue;
+
+    const crossStart =
+      axis === "x"
+        ? Math.max(bounds.top, movingBounds.top)
+        : Math.max(bounds.left, movingBounds.left);
+    const crossEnd =
+      axis === "x"
+        ? Math.min(bounds.bottom, movingBounds.bottom)
+        : Math.min(bounds.right, movingBounds.right);
+
+    if (axis === "x") {
+      if (bounds.right <= movingBounds.left) {
+        candidates.push({
+          side: "before",
+          gap: movingBounds.left - bounds.right,
+          gapStart: bounds.right,
+          gapEnd: movingBounds.left,
+          crossStart,
+          crossEnd,
+        });
+      } else if (bounds.left >= movingBounds.right) {
+        candidates.push({
+          side: "after",
+          gap: bounds.left - movingBounds.right,
+          gapStart: movingBounds.right,
+          gapEnd: bounds.left,
+          crossStart,
+          crossEnd,
+        });
+      }
+    } else {
+      if (bounds.bottom <= movingBounds.top) {
+        candidates.push({
+          side: "before",
+          gap: movingBounds.top - bounds.bottom,
+          gapStart: bounds.bottom,
+          gapEnd: movingBounds.top,
+          crossStart,
+          crossEnd,
+        });
+      } else if (bounds.top >= movingBounds.bottom) {
+        candidates.push({
+          side: "after",
+          gap: bounds.top - movingBounds.bottom,
+          gapStart: movingBounds.bottom,
+          gapEnd: bounds.top,
+          crossStart,
+          crossEnd,
+        });
+      }
+    }
+  }
+  return candidates;
+}
+
+function pairUpEqualGaps(
+  orientation: "vertical" | "horizontal",
+  candidates: GapCandidate[],
+  toleranceCanvasPx: number,
+): EqualGapGuide[] {
+  const before = candidates.filter((c) => c.side === "before");
+  const after = candidates.filter((c) => c.side === "after");
+  const guides: EqualGapGuide[] = [];
+
+  // Closest gap on each side is the one a user is most likely dragging
+  // toward, so only pair the single closest "before" candidate against the
+  // single closest "after" candidate — otherwise a busy canvas would surface
+  // every combinatorial pair of same-ish gaps at once.
+  const closestBefore = before.reduce<GapCandidate | null>(
+    (best, c) => (!best || c.gap < best.gap ? c : best),
+    null,
+  );
+  const closestAfter = after.reduce<GapCandidate | null>(
+    (best, c) => (!best || c.gap < best.gap ? c : best),
+    null,
+  );
+
+  if (
+    closestBefore &&
+    closestAfter &&
+    Math.abs(closestBefore.gap - closestAfter.gap) <= toleranceCanvasPx
+  ) {
+    guides.push({
+      orientation,
+      gap: (closestBefore.gap + closestAfter.gap) / 2,
+      bands: [
+        {
+          gapStart: closestBefore.gapStart,
+          gapEnd: closestBefore.gapEnd,
+          crossStart: closestBefore.crossStart,
+          crossEnd: closestBefore.crossEnd,
+        },
+        {
+          gapStart: closestAfter.gapStart,
+          gapEnd: closestAfter.gapEnd,
+          crossStart: closestAfter.crossStart,
+          crossEnd: closestAfter.crossEnd,
+        },
+      ],
+    });
+  }
+
+  return guides;
+}
+
 export function resizeFrameFromDelta(
   origin: FrameGeometry,
   handle: ResizeHandle,
@@ -652,19 +957,368 @@ export function resizeFrameGroupToBounds(
   }));
 }
 
+/**
+ * Rotates `point` around `center` by `degrees` in the *forward* direction —
+ * i.e. the same direction as a CSS `transform: rotate(degrees deg)` applied
+ * to an element whose `transform-origin` is `center`. Use this to map a
+ * frame-local (unrotated) point into world space.
+ *
+ * Pass `-degrees` to do the inverse mapping (world space into a frame's local
+ * unrotated space).
+ */
+export function rotatePoint(
+  point: CanvasPoint,
+  center: CanvasPoint,
+  degrees: number,
+): CanvasPoint {
+  if (!degrees) return point;
+  const rad = (degrees * Math.PI) / 180;
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return {
+    x: center.x + dx * cos - dy * sin,
+    y: center.y + dx * sin + dy * cos,
+  };
+}
+
+/** Rotates a free vector (no translation component) by `degrees`. Use this to
+ *  map a world-space pointer delta into a rotated frame's local axes (pass
+ *  `-degrees`), or a local delta back into world space (pass `+degrees`). */
+export function rotateVector(
+  vector: CanvasPoint,
+  degrees: number,
+): CanvasPoint {
+  if (!degrees) return vector;
+  const rad = (degrees * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return {
+    x: vector.x * cos - vector.y * sin,
+    y: vector.x * sin + vector.y * cos,
+  };
+}
+
+/** Returns the four corners of `geometry`'s rotated bounding box, in world
+ *  space, in top-left/top-right/bottom-right/bottom-left order. */
+export function getRotatedFrameCorners(
+  geometry: FrameGeometry,
+): [CanvasPoint, CanvasPoint, CanvasPoint, CanvasPoint] {
+  const bounds = getFrameBounds(geometry);
+  const center = { x: bounds.centerX, y: bounds.centerY };
+  const degrees = geometry.rotation ?? 0;
+  const corners: CanvasPoint[] = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom },
+  ];
+  return corners.map((corner) => rotatePoint(corner, center, degrees)) as [
+    CanvasPoint,
+    CanvasPoint,
+    CanvasPoint,
+    CanvasPoint,
+  ];
+}
+
+/** Returns the axis-aligned bounding box that encloses `geometry` after its
+ *  rotation is applied — i.e. the world-space AABB of the rotated rect,
+ *  rather than the unrotated local rect. Frames with no rotation return their
+ *  own bounds unchanged. Use this for snap-candidate generation and marquee
+ *  hit-testing against rotated frames instead of the unrotated `FrameBounds`. */
+export function getRotatedFrameAABB(geometry: FrameGeometry): FrameBounds {
+  const degrees = geometry.rotation ?? 0;
+  if (!degrees) return getFrameBounds(geometry);
+  const corners = getRotatedFrameCorners(geometry);
+  const xs = corners.map((corner) => corner.x);
+  const ys = corners.map((corner) => corner.y);
+  const left = Math.min(...xs);
+  const top = Math.min(...ys);
+  const right = Math.max(...xs);
+  const bottom = Math.max(...ys);
+  return getFrameBounds({
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+  });
+}
+
+/** An axis-aligned rectangle in `{x, y, width, height}` form, as used by a
+ *  marquee-selection drag rect. */
+export interface AxisRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** An axis-aligned bounds rect in `{left, top, right, bottom}` form. */
+export interface AxisBounds {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+/**
+ * Tests whether an axis-aligned rect (e.g. a marquee-selection drag rect)
+ * intersects `bounds` (an unrotated rect) after `bounds` is rotated by
+ * `degrees` around `center`.
+ *
+ * `center` defaults to the center of `bounds` itself — the common case of a
+ * single rotated frame. Pass an explicit `center` when `bounds` describes a
+ * child element that rotates rigidly with an ancestor frame around the
+ * frame's own center rather than its own (e.g. layer-marquee hit-testing
+ * against an element inside a rotated screen frame).
+ *
+ * A corner-containment check alone (only asking "is a corner of A inside B,
+ * or a corner of B inside A") misses cases where the two rects cross like a
+ * plus/hash sign — each one's edges pierce through the other without either
+ * shape's corners landing inside the other, e.g. a thin marquee crossing the
+ * middle of a thin rotated frame. This uses the Separating Axis Theorem
+ * (SAT): two convex polygons do NOT intersect if and only if there exists an
+ * axis (from either polygon's edge normals) onto which their projections
+ * don't overlap. For an axis-aligned rect vs. a rotated rect there are
+ * exactly 4 candidate axes to test — the rect's own x/y axes, and the
+ * rotated rect's two (perpendicular) edge directions.
+ */
+export function rotatedRectIntersects(
+  rect: AxisRect,
+  bounds: AxisBounds,
+  center: CanvasPoint = {
+    x: (bounds.left + bounds.right) / 2,
+    y: (bounds.top + bounds.bottom) / 2,
+  },
+  degrees = 0,
+): boolean {
+  const rectCorners: CanvasPoint[] = [
+    { x: rect.x, y: rect.y },
+    { x: rect.x + rect.width, y: rect.y },
+    { x: rect.x + rect.width, y: rect.y + rect.height },
+    { x: rect.x, y: rect.y + rect.height },
+  ];
+
+  if (!degrees) {
+    return (
+      rect.x <= bounds.right &&
+      rect.x + rect.width >= bounds.left &&
+      rect.y <= bounds.bottom &&
+      rect.y + rect.height >= bounds.top
+    );
+  }
+
+  const boundsCorners: CanvasPoint[] = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom },
+  ].map((corner) => rotatePoint(corner, center, degrees));
+  const rad = (degrees * Math.PI) / 180;
+  // The rotated rect's two perpendicular edge directions, plus the axis
+  // rect's own x/y axes, are the full set of SAT candidate axes for two
+  // rectangles (each rectangle only contributes 2 unique edge normals).
+  const axes: CanvasPoint[] = [
+    { x: 1, y: 0 },
+    { x: 0, y: 1 },
+    { x: Math.cos(rad), y: Math.sin(rad) },
+    { x: -Math.sin(rad), y: Math.cos(rad) },
+  ];
+
+  return axes.every((axis) =>
+    projectionsOverlap(rectCorners, boundsCorners, axis),
+  );
+}
+
+function projectionsOverlap(
+  a: readonly CanvasPoint[],
+  b: readonly CanvasPoint[],
+  axis: CanvasPoint,
+): boolean {
+  const projectionA = a.map((point) => point.x * axis.x + point.y * axis.y);
+  const projectionB = b.map((point) => point.x * axis.x + point.y * axis.y);
+  const minA = Math.min(...projectionA);
+  const maxA = Math.max(...projectionA);
+  const minB = Math.min(...projectionB);
+  const maxB = Math.max(...projectionB);
+  return minA <= maxB && minB <= maxA;
+}
+
+/**
+ * Resize-aware transform for a single rotated frame, so dragging a resize
+ * handle behaves the way it looks: the handle direction follows the frame's
+ * own rotated axes, and the opposite anchor edge/corner stays visually fixed
+ * in world space (not just in unrotated local space).
+ *
+ * `worldDx`/`worldDy` are the raw pointer delta in world (canvas) space, the
+ * same values `resizeFrameFromDelta` normally takes directly. This wrapper:
+ *  1. Rotates the world delta into the frame's local (unrotated) axes.
+ *  2. Runs the existing unrotated `resizeFrameFromDelta` in that local space.
+ *  3. Re-anchors the result so the corner/edge the handle keeps fixed in
+ *     local space also stays fixed in world space, by translating the new
+ *     geometry so its own rotation (around its own new center) reproduces the
+ *     original world-space anchor point.
+ *
+ * For `origin.rotation` falsy this is identical to calling
+ * `resizeFrameFromDelta` directly.
+ */
+export function resizeRotatedFrameFromDelta(
+  origin: FrameGeometry,
+  handle: ResizeHandle,
+  worldDx: number,
+  worldDy: number,
+  options: ResizeFrameOptions = {},
+): FrameGeometry {
+  const degrees = origin.rotation ?? 0;
+  if (!degrees) {
+    return resizeFrameFromDelta(origin, handle, worldDx, worldDy, options);
+  }
+
+  const originCenter = {
+    x: origin.x + origin.width / 2,
+    y: origin.y + origin.height / 2,
+  };
+  // Alt/option resize (`resizeFromCenter`) already grows the frame
+  // symmetrically about its own center in LOCAL space (resizeFrameFromDelta
+  // below keeps the center fixed on both axes for that mode). To keep that
+  // center fixed in WORLD space too — matching Figma, where alt-resizing a
+  // rotated frame grows around its visual center rather than pivoting off an
+  // opposite corner — the re-anchor step below must use the center as its
+  // fixed point instead of the handle's opposite corner/edge. Using the
+  // center as the anchor is a no-op for the rotation (a point rotates around
+  // itself unchanged), so it stays put in world space by construction.
+  // Non-center (default) resizes keep anchoring on the opposite corner/edge
+  // so that world-fixed-anchor behavior is unchanged.
+  const anchorLocalBefore = options.resizeFromCenter
+    ? originCenter
+    : getResizeAnchorPoint(origin, handle);
+  const anchorWorld = rotatePoint(anchorLocalBefore, originCenter, degrees);
+
+  // Map the world-space pointer delta into the frame's own unrotated axes so
+  // dragging "outward along the handle" behaves the same regardless of how
+  // the frame is rotated.
+  const localDelta = rotateVector({ x: worldDx, y: worldDy }, -degrees);
+
+  const resizedLocal = resizeFrameFromDelta(
+    { ...origin, rotation: undefined },
+    handle,
+    localDelta.x,
+    localDelta.y,
+    options,
+  );
+
+  const centerAfterLocal = {
+    x: resizedLocal.x + resizedLocal.width / 2,
+    y: resizedLocal.y + resizedLocal.height / 2,
+  };
+  const anchorLocalAfter = options.resizeFromCenter
+    ? centerAfterLocal
+    : getResizeAnchorPoint(resizedLocal, handle);
+  const anchorWorldIfUntranslated = rotatePoint(
+    anchorLocalAfter,
+    centerAfterLocal,
+    degrees,
+  );
+  const translation = {
+    x: anchorWorld.x - anchorWorldIfUntranslated.x,
+    y: anchorWorld.y - anchorWorldIfUntranslated.y,
+  };
+
+  return {
+    ...resizedLocal,
+    x: resizedLocal.x + translation.x,
+    y: resizedLocal.y + translation.y,
+    rotation: degrees,
+  };
+}
+
+/** The local (unrotated) point that a given resize handle keeps fixed: the
+ *  edge/corner opposite the handle, or the center of an axis the handle
+ *  doesn't affect at all (e.g. "n" leaves the horizontal axis untouched). */
+function getResizeAnchorPoint(
+  geometry: FrameGeometry,
+  handle: ResizeHandle,
+): CanvasPoint {
+  const bounds = getFrameBounds(geometry);
+  const x = handleAffectsWest(handle)
+    ? bounds.right
+    : handleAffectsEast(handle)
+      ? bounds.left
+      : bounds.centerX;
+  const y = handleAffectsNorth(handle)
+    ? bounds.bottom
+    : handleAffectsSouth(handle)
+      ? bounds.top
+      : bounds.centerY;
+  return { x, y };
+}
+
+/** Unrotated visual angle of each resize handle, in degrees, matching CSS
+ *  cursor convention (0 = east/right, increasing clockwise since canvas y
+ *  grows downward) — "e" points right, "se" points down-right, etc. */
+const RESIZE_HANDLE_ANGLES: Record<ResizeHandle, number> = {
+  e: 0,
+  se: 45,
+  s: 90,
+  sw: 135,
+  w: 180,
+  nw: 225,
+  n: 270,
+  ne: 315,
+};
+
+const RESIZE_CURSOR_BY_QUADRANT = [
+  "ew-resize",
+  "nwse-resize",
+  "ns-resize",
+  "nesw-resize",
+] as const;
+
+/**
+ * Returns the resize cursor for `handle` on a frame rotated by `rotationDeg`
+ * degrees, so the cursor always matches how the handle actually looks and
+ * moves on screen instead of a static per-handle cursor that's only correct
+ * when the frame isn't rotated.
+ *
+ * Cursor CSS only offers 4 distinct resize cursors, each valid across a pair
+ * of opposite directions (`ew-resize` covers both due east and due west).
+ * This adds the handle's own unrotated angle to the frame's rotation and
+ * quantizes to the nearest 45 degrees to pick which of the 4 to use.
+ */
+export function getResizeCursorForHandle(
+  handle: ResizeHandle,
+  rotationDeg = 0,
+): string {
+  const angle = RESIZE_HANDLE_ANGLES[handle] + rotationDeg;
+  const normalized = ((angle % 360) + 360) % 360;
+  const quantized = Math.round(normalized / 45) % 8;
+  return RESIZE_CURSOR_BY_QUADRANT[quantized % 4];
+}
+
 export function computeResizeSnap(
   frame: FrameGeometry,
   stationary: FrameEntry[],
   handle: ResizeHandle,
-  options: CanvasSnapOptions,
+  options: ResizeSnapOptions,
 ) {
   if (options.bypass) {
     return { frame, guides: [] as AlignmentGuide[] };
   }
 
+  const threshold = getCanvasSnapThreshold(options);
+
+  if (options.preserveAspectRatio) {
+    return computeAspectPreservingResizeSnap(
+      frame,
+      stationary,
+      handle,
+      threshold,
+    );
+  }
+
   let nextFrame = frame;
   const guides: AlignmentGuide[] = [];
-  const threshold = getCanvasSnapThreshold(options);
 
   if (handleAffectsWest(handle) || handleAffectsEast(handle)) {
     const candidate = getResizeSnapCandidate(
@@ -707,6 +1361,95 @@ export function computeResizeSnap(
   return { frame: nextFrame, guides };
 }
 
+/**
+ * Aspect-ratio-safe variant of the independent-axis snap above. Snapping x
+ * and y independently can each pull toward a different sibling edge, which
+ * distorts a shift-held (aspect-locked) resize away from its ratio. Instead:
+ * evaluate both axes' snap candidates, apply only the single closest one,
+ * then rescale the other axis from `frame`'s own aspect ratio so the shape
+ * stays locked to it.
+ */
+function computeAspectPreservingResizeSnap(
+  frame: FrameGeometry,
+  stationary: FrameEntry[],
+  handle: ResizeHandle,
+  threshold: number,
+) {
+  const ratio = frame.width / Math.max(1, frame.height);
+  const xCandidate =
+    handleAffectsWest(handle) || handleAffectsEast(handle)
+      ? getResizeSnapCandidate("x", frame, stationary, handle, threshold)
+      : null;
+  const yCandidate =
+    handleAffectsNorth(handle) || handleAffectsSouth(handle)
+      ? getResizeSnapCandidate("y", frame, stationary, handle, threshold)
+      : null;
+
+  if (!xCandidate && !yCandidate) {
+    return { frame, guides: [] as AlignmentGuide[] };
+  }
+
+  const useX =
+    !yCandidate || (xCandidate && xCandidate.distance <= yCandidate.distance);
+
+  const affectsVertical =
+    handleAffectsNorth(handle) || handleAffectsSouth(handle);
+  const affectsHorizontal =
+    handleAffectsWest(handle) || handleAffectsEast(handle);
+
+  if (useX && xCandidate) {
+    const snappedX = applyResizeSnapOffset(
+      frame,
+      handle,
+      "x",
+      xCandidate.offset,
+    );
+    const nextHeight = snappedX.width / ratio;
+    // Matches resizeFrameFromDelta's own convention: when a handle that
+    // doesn't touch the vertical axis (e.g. "e") grows height only because
+    // aspect-ratio derives it, that growth is centered vertically rather
+    // than anchored to the original y.
+    const rescaled = {
+      ...snappedX,
+      height: nextHeight,
+      y: getResizedAxisStart(
+        frame.y,
+        frame.height,
+        nextHeight,
+        handleAffectsNorth(handle),
+        handleAffectsSouth(handle),
+        !affectsVertical && nextHeight !== frame.height,
+      ),
+    };
+    return { frame: rescaled, guides: [xCandidate.guide] };
+  }
+
+  if (yCandidate) {
+    const snappedY = applyResizeSnapOffset(
+      frame,
+      handle,
+      "y",
+      yCandidate.offset,
+    );
+    const nextWidth = snappedY.height * ratio;
+    const rescaled = {
+      ...snappedY,
+      width: nextWidth,
+      x: getResizedAxisStart(
+        frame.x,
+        frame.width,
+        nextWidth,
+        handleAffectsWest(handle),
+        handleAffectsEast(handle),
+        !affectsHorizontal && nextWidth !== frame.width,
+      ),
+    };
+    return { frame: rescaled, guides: [yCandidate.guide] };
+  }
+
+  return { frame, guides: [] as AlignmentGuide[] };
+}
+
 function getResizedAxisStart(
   originStart: number,
   originSize: number,
@@ -841,7 +1584,9 @@ function getResizeSnapCandidate(
         : frameBounds.bottom;
 
   return stationary.reduce<SnapCandidate | null>((best, entry) => {
-    const stationaryBounds = getFrameBounds(entry.geometry);
+    // Rotated (world-space) AABB, not the unrotated local bounds, so
+    // resizing snaps against a rotated sibling's visual silhouette.
+    const stationaryBounds = getRotatedFrameAABB(entry.geometry);
     const targetValues =
       axis === "x"
         ? [