@oh-just-another/state 0.58.0 → 0.59.0

package/dist/editor.js

@@ -1,30 +1,34 @@
 import { createActor } from "xstate";
 import { createEmitter } from "@oh-just-another/events";
 import { elementId as castElementId } from "@oh-just-another/types";
-import { addElement, anchorSnapper, apply, buildSpatialIndex, getBinaryFile, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, findNearestAnchor, getAnchorWorld, getAnchorOutwardNormal, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, getElementWorldBounds, getElementRenderBounds, isFrame, FRAME_HEADER_HEIGHT, setTextMeasurer, getScreenToWorld, gridSnapper, snapExcludedAnchors, orderForTop, outlineSnapper, removeElement, SnapEngine, isNoop, invert, updateLink, updateElement, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
+import { addElement, anchorSnapper, apply, buildSpatialIndex, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, isFrame, isGroup, isText, isImage, getElementWorldBounds, setTextMeasurer, getScreenToWorld, gridSnapper, outlineSnapper, removeElement, SnapEngine, isNoop, invert, updateLink, updateElement, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
 import { layerId as castLayerId, } from "@oh-just-another/types";
-import { bounds as B, matrix } from "@oh-just-another/math";
-import { caretGeometry, computeLinkWorldBounds, layoutText, onAnimationContentReady, pointToCaretIndex, selectionRects as textSelectionRects, setActiveRasterizer, setActiveTextShaper, setAnimationClock, ElementCache, } from "@oh-just-another/renderer-core";
+import { bounds as B, matrix, vec2, hitTest } from "@oh-just-another/math";
+import { caretGeometry, layoutText, onAnimationContentReady, pointToCaretIndex, selectionRects as textSelectionRects, setActiveRasterizer, setActiveTextShaper, setAnimationClock, ElementCache, } from "@oh-just-another/renderer-core";
 import { History, } from "@oh-just-another/history";
-import { ANCHOR_CLICK_NEW_ELEMENT_GAP, DEFAULT_LINK_ROUTING, WAYPOINT_COLLAPSE_RADIUS, } from "./constants.js";
+import { DEFAULT_LINK_ROUTING, WAYPOINT_COLLAPSE_RADIUS } from "./constants.js";
 import { FileDropRegistry } from "./file-drop.js";
 import { imageFileDropHandler, videoFileDropHandler } from "./built-in-handlers.js";
-import { AnimationTick } from "./animation-tick.js";
 import { computeDimElements as computeDimElementsHelper, isDescendantOfGroup as isDescendantOfGroupHelper, pickDrillTarget as pickDrillTargetHelper, promoteToGroupRoot as promoteToGroupRootHelper, topGroupAncestor as topGroupAncestorHelper, } from "./group-helpers.js";
 import { assignFrameMembers as assignFrameMembersHelper, nextFrameName as nextFrameNameHelper, reconcileFrameMembership as reconcileFrameMembershipHelper, } from "./frame-helpers.js";
 import { AutoCompactScheduler } from "./auto-compact.js";
 import { AutoLayoutScheduler } from "./auto-layout-scheduler.js";
-import { DEFAULT_SNAP_THRESHOLD, LINK_ENDPOINT_HANDLE_RADIUS, LINK_HIT_THRESHOLD, LARGE_SCENE_HIT_THRESHOLD, TOUCH_LINK_HANDLE_HIT_SLOP, TOUCH_LINK_HIT_THRESHOLD, TOUCH_HANDLE_HIT_SLOP, ANCHOR_START_HIT_SLOP, ANCHOR_DOT_CLICK_RADIUS, ANCHOR_DOT_ACTIVE_RADIUS, LINK_START_ANCHOR_OUTSET, TOUCH_ANCHOR_START_HIT_SLOP, TOUCH_ANCHOR_DOT_CLICK_RADIUS, DOUBLE_CLICK_MS, DOUBLE_CLICK_TOLERANCE_PX, WHEEL_ZOOM_STEP, ANIMATION_MIN_INTERVAL_MS, ANIMATION_MAX_INTERVAL_MS, ANIMATION_COST_FACTOR, HEAVY_GIF_BYTES, GIF_AUTOSTOP_MS, CARET_BLINK_INTERVAL_MS, } from "./constants.js";
-import { HANDLE_HIT_SLOP, cursorForHandle } from "./handle.js";
-import { anchorOverlayPoints } from "./editor/anchor-points.js";
+import { DEFAULT_SNAP_THRESHOLD, LINK_ENDPOINT_HANDLE_RADIUS, LINK_HIT_THRESHOLD, LARGE_SCENE_HIT_THRESHOLD, TOUCH_LINK_HANDLE_HIT_SLOP, TOUCH_LINK_HIT_THRESHOLD, TOUCH_HANDLE_HIT_SLOP, ANCHOR_START_HIT_SLOP, ANCHOR_DOT_CLICK_RADIUS, TOUCH_ANCHOR_START_HIT_SLOP, TOUCH_ANCHOR_DOT_CLICK_RADIUS, DOUBLE_CLICK_MS, DOUBLE_CLICK_TOLERANCE_PX, WHEEL_ZOOM_STEP, ROTATE_SNAP_RADIANS, } from "./constants.js";
+import { HANDLE_HIT_SLOP } from "./handle.js";
+import { req } from "./util.js";
 import { interactionMachine, } from "./machine.js";
 import { createEventCache, fanOutEvents, primeEventCache, } from "./editor/event-fanout.js";
+import { AnimationController } from "./editor/animation.js";
+import { CaretBlinkController } from "./editor/caret-blink.js";
 import { GestureController } from "./editor/gesture-tx.js";
+import { GifPlaybackController } from "./editor/gif-playback.js";
+import * as animScene from "./editor/animation-scene.js";
+import { computeSceneDirtyRect } from "./editor/dirty-rect.js";
 import { LongPressController } from "./editor/long-press.js";
 import { pickPressTarget } from "./editor/hit-test.js";
 import { PinchController } from "./editor/pinch.js";
 import { applyContainerDrop as applyContainerDropPure, clampContainerToChildren as clampContainerToChildrenPure, maybeGrowContainer as maybeGrowContainerPure, } from "./editor/container-ops.js";
-import { computeGroupResizePatches, computeElementResize, computeTextResize, } from "./editor/applies/resize.js";
+import { computeGroupResizePatches, computeElementResize, computeRotatedElementResize, computeTextResize, } from "./editor/applies/resize.js";
 import { bindPointerEvents as bindPointerEventsExternal } from "./editor/pointer-binding.js";
 import { beginBrushStroke as beginBrushStrokePure, commitBrushStroke as commitBrushStrokePure, extendBrushStroke as extendBrushStrokePure, newBrushId, } from "./editor/public/brush.js";
 import { copySelected as copySelectedPure, pasteFromClipboard, selectionFromPasted, } from "./editor/public/clipboard.js";
@@ -32,55 +36,27 @@ import { computeCreateLayer, computeMoveSelectionToLayer, computeRemoveLayer, co
 import { computePan, computeResetZoom, computeSetGrid, computeViewportResize, computeZoomAt, computeZoomToFit, computeZoomToBounds, } from "./editor/public/zoom-pan.js";
 import { computeAddAnnotation, computeAddComment, computeRemoveAnnotation, computeRemoveComment, computeToggleAnnotationResolved, hitAnnotation as hitAnnotationPure, } from "./editor/public/annotations.js";
 import { canBeginTextEdit } from "./editor/public/text-edit.js";
+import { frameHeaderAt as computeFrameHeaderAt, computeFrameNameCommit, } from "./editor/public/frame-name.js";
+import { computeCursor } from "./editor/public/cursor.js";
 import { compactLayerZOrderPatches, computeBringForward, computeBringToFront, computeSendBackward, computeSendToBack, } from "./editor/public/z-order.js";
 import { computeArrangeAsGrid, computeArrangeAsStack, computeGroupSelected, computeUngroup, expandSelectionWithDescendants, newGroupElementId, pickFocusCycle, selectionRoots, } from "./editor/public/arrange-group.js";
 import { buildImageElement, computeAddBinaryFile, hasAnimatedElement, } from "./editor/public/image-insert.js";
-import { computeDeleteSelection, computeDuplicateSelection, computeMoveSelectionBy, computeSelectAll, computeSelectAllLinks, computeSetSelection, computeUpdateStyle, computeUpdateTextProps, describeNudge as describeNudgePure, selectionFromNewIds, } from "./editor/public/selection-ops.js";
-import { computeSetLink, normalizeHref, safeHref } from "./editor/public/link.js";
-import { beginPlacementState, buildElementAtCursor, buildTextElementAt, computePlacementCancel, computePlacementContainerDrop, computePlacementUpdate, newElementIdAtCursor, } from "./editor/public/placement.js";
+import { computeDeleteSelection, computeDuplicateSelection, computeMoveSelectionBy, computeSelectAll, computeSelectAllLinks, computeAdjustFontSize, computeSetSelection, computeUpdateStyle, computeUpdateTextProps, describeNudge as describeNudgePure, findClosestInDirection, selectionFromNewIds, } from "./editor/public/selection-ops.js";
+import { computeSetLink, normalizeHref, safeHref, snapLinkEndpoint as snapLinkEndpointPure, } from "./editor/public/link.js";
+import { beginPlacementState, buildElementAtCursor, buildTextElementAt, computePlacementCancel, computePlacementContainerDrop, computePlacementUpdate, computeLinkedElementFromAnchor, computeDuplicateInPlace, computeShapeAtLinkDrop, newElementIdAtCursor, previewClickCreate as previewClickCreatePure, } from "./editor/public/placement.js";
 import { renderEditor } from "./editor/render-orchestrator.js";
 import { combinedSelectionBounds as combinedSelectionBoundsPure, computeViewportWorld as computeViewportWorldPure, groupChildrenUnion as groupChildrenUnionPure, } from "./editor/viewport-helpers.js";
 import { computeHiddenElements as computeHiddenElementsPure } from "./editor/shape-filters.js";
 import { selectByBounds as selectByBoundsPure, selectByBoundsLive as selectByBoundsLivePure, selectLinksByBoundsLive as selectLinksByBoundsLivePure, } from "./editor/applies/selection.js";
-import { computeLinkEndpointUpdate, computeLinkPreviewEndpoints } from "./editor/applies/edge.js";
-import { computeAnnotationMovePatch, computeGroupMovePatches, computeElementMovePatch, } from "./editor/applies/move.js";
+import { computeLinkEndpointUpdate, computeLinkPreviewEndpoints, elbowSignature, } from "./editor/applies/edge.js";
+import { computeAnnotationMovePatch, computeGroupMovePatches, computeElementMovePatch, constrainDeltaToAxis, } from "./editor/applies/move.js";
+import { computeAlignPatches, computeDistributePatches, computeFlipPatches, computeRotatePatches, selectionCenter, } from "./editor/applies/arrange.js";
 import { computeMovingLinkPatches, computeMovingLinkForNudge } from "./editor/applies/link-move.js";
 import { computeCreateLink, computeCreateElement, newLinkId, newElementId, } from "./editor/applies/create.js";
 import { snapCreateBounds, snapGroupDelta, snapMoveDelta, snapResizeDelta, } from "./editor/applies/snap-grid.js";
 import {} from "./overlay.js";
 import * as Selection from "./selection.js";
 import * as LinkSelection from "./link-selection.js";
-/**
- * Index-access helper for provably-valid indices: throws instead of
- * returning `undefined` so callers stay non-nullable without `!`.
- */
-const req = (v) => {
-    if (v === undefined)
-        throw new Error("packages/state: index out of range");
-    return v;
-};
-/** Resize handle → cursor override role. */
-const RESIZE_ROLE = {
-    nw: "resize-nwse",
-    se: "resize-nwse",
-    ne: "resize-nesw",
-    sw: "resize-nesw",
-    n: "resize-ns",
-    s: "resize-ns",
-    e: "resize-ew",
-    w: "resize-ew",
-};
-/** Build a CSS `cursor` value from a {@link CursorSpec}. */
-const cssCursor = (spec, fallbackKeyword) => {
-    if (typeof spec === "string")
-        return spec;
-    const hx = spec.hotspot?.x ?? 0;
-    const hy = spec.hotspot?.y ?? 0;
-    const img = spec.url2x !== undefined
-        ? `image-set(url("${spec.url}") 1x, url("${spec.url2x}") 2x)`
-        : `url("${spec.url}")`;
-    return `${img} ${String(hx)} ${String(hy)}, ${spec.fallback ?? fallbackKeyword}`;
-};
 export class Editor {
     host;
     mainTarget;
@@ -94,11 +70,6 @@ export class Editor {
      * View-only — never persisted or recorded in history.
      */
     debugHitZones = false;
-    /**
-     * When false the background grid is not painted. Toggled via `toggleGrid`
-     * (`g` hotkey, standard parity). View-only — never persisted or in history.
-     */
-    gridVisible = true;
     actor;
     listeners = new Set();
     /**
@@ -113,7 +84,7 @@ export class Editor {
     events = createEmitter();
     /**
      * Last-emitted snapshot of every observable slice. Used by
-     * `fanOutEvents` (in `editor/event-fanout.ts`) to decide which
+     * `fanOutEvents` to decide which
      * typed events to fire on each `notify()` — only the slices
      * whose identity changed since the previous notify get an event.
      */
@@ -235,6 +206,13 @@ export class Editor {
      * position / size against the combined bounds delta each frame.
      */
     groupResizeOrigin = null;
+    /**
+     * Press-time snapshot for a rotate gesture: the pivot (selection bbox centre)
+     * and every member's pristine `position` / `rotation`. Each frame rotates
+     * from this baseline so the cumulative angle never drifts. Cleared on gesture
+     * end (commit / cancel).
+     */
+    rotateGestureOrigin = null;
     /**
      * Pristine shape snapshot for a single-shape text resize, captured on
      * the gesture's first tick. Font scaling is computed against this base
@@ -270,6 +248,20 @@ export class Editor {
      * move / resize / create wrappers; never persisted.
      */
     snapSuppressed = false;
+    /**
+     * Transient transform-modifier state mirrored from the host while a drag is
+     * in flight. `alt` resizes symmetrically about the centre; `shift` locks the
+     * resize aspect ratio or constrains a move to a single axis. Read by the
+     * move / resize wrappers; never persisted.
+     */
+    transformAltKey = false;
+    transformShiftKey = false;
+    /**
+     * In-editor style memory for copy-style / paste-style. Holds the visual
+     * `style` (fill / stroke / dash / …) captured from a shape; `null` until a
+     * copy happens. Not the OS clipboard — a lightweight per-editor buffer.
+     */
+    styleClipboard = null;
     /**
      * Persistent world-bounds cache shared with `renderScene` for viewport
      * culling. Object-identity keyed — invalidates automatically whenever
@@ -343,7 +335,6 @@ export class Editor {
      * Fractional-order compaction scheduler (microtask-coalesced).
      * Triggered from every `notify()`; only does real work when at
      * least one shape/edge order string crossed AUTO_COMPACT_THRESHOLD.
-     * See `./auto-compact.ts` for the extracted logic.
      */
     autoCompactScheduler = new AutoCompactScheduler({
         getScene: () => this._scene,
@@ -353,8 +344,7 @@ export class Editor {
     });
     /**
      * Auto-layout scheduler — microtask-coalesced re-run of every
-     * shape carrying `metadata.autoLayout`. See
-     * `./auto-layout-scheduler.ts` for the extracted logic.
+     * shape carrying `metadata.autoLayout`.
      */
     autoLayoutScheduler = new AutoLayoutScheduler({
         getScene: () => this._scene,
@@ -429,10 +419,10 @@ export class Editor {
      * Screen-space origin point.
      */
     touchPanCandidate = null;
-    // Pinch gesture state lives in PinchController (./editor/pinch.ts)
-    // — `pinch.isActive()` replaces the old `pinchOrigin !== null` check.
+    // Pinch gesture state lives in PinchController; `pinch.isActive()`
+    // reports whether a two-finger gesture is in flight.
     pinch;
-    /** Bridge for `editor/container-ops.ts`. Built lazily in constructor. */
+    /** Bridge for the container-ops helpers. Built lazily in constructor. */
     containerOpsRef;
     /**
      * Space-bar held → next pointer drag pans the canvas instead of
@@ -501,9 +491,9 @@ export class Editor {
      * the timer fires. Hosts subscribe via `onLongPress` to surface a
      * context menu (mobile alternative to right-click).
      */
-    // Long-press timer + origin live in LongPressController
-    // (./editor/long-press.ts). The Set of subscribers stays here
-    // because `onLongPress` is part of the public Editor API.
+    // Long-press timer + origin live in LongPressController. The Set of
+    // subscribers stays here because `onLongPress` is part of the public
+    // Editor API.
     longPress;
     longPressListeners = new Set();
     /**
@@ -538,8 +528,7 @@ export class Editor {
     /**
      * Wraps gesture lifecycle (transaction open/commit/cancel +
      * post-create mode revert) so editor.ts doesn't carry the bodies.
-     * Implementation lives in `./editor/gesture-tx.ts`; the
-     * controller calls back through the narrow `GestureRef` bridge
+     * The controller calls back through the narrow `GestureRef` bridge
      * built lazily below.
      */
     gestures;
@@ -699,8 +688,8 @@ export class Editor {
         }, (delta) => {
             this.panBy(delta);
         });
-        // Bridge for container-ops module — narrow surface that the
-        // pure functions in editor/container-ops.ts call back into.
+        // Bridge for the container-ops helpers — narrow surface that the
+        // pure functions call back into.
         // eslint-disable-next-line @typescript-eslint/no-this-alias -- bridge literal rebinds `this`; alias keeps Editor reference
         const self2 = this;
         this.containerOpsRef = {
@@ -723,13 +712,11 @@ export class Editor {
         // throttle rAF to ~1fps in background but don't stop it; an explicit
         // stop saves the decode + render entirely). Resume when visible again,
         // viewport permitting.
-        if (typeof document !== "undefined") {
-            document.addEventListener("visibilitychange", this.onVisibilityChange);
-        }
+        this.animation.attach();
         // Restore GIF/video bytes onto animated image shapes loaded from
         // an initial scene (e.g. localStorage), then arm the tick so the
         // animation plays from first paint.
-        this.rehydrateAnimatedImages();
+        animScene.rehydrateAnimatedImages(this);
         this.maybeAnimate();
         // An animated adapter (GIF) decodes asynchronously; when a decode
         // completes it nudges us here. Re-render so a PAUSED animated shape
@@ -822,7 +809,6 @@ export class Editor {
         this._selectedAnnotation = id;
         this.notify();
     }
-    // Pure bodies in `./editor/public/annotations.ts`.
     addAnnotation(opts) {
         const result = computeAddAnnotation(this._scene, opts, this.commentAuthor, (p) => this.uniqueId(p));
         this._scene = result.scene;
@@ -934,16 +920,17 @@ export class Editor {
         this.debugHitZones = on;
         this.scheduleRender();
     }
-    /** Show/hide the background grid (standard `g`). View-only — not in history. */
+    /** Whether the background grid is enabled for the scene. */
+    get gridEnabled() {
+        return this._scene.viewport.gridEnabled;
+    }
+    /** Show/hide the background grid (`g`). Persists in the viewport, not in history. */
     setGridVisible(on) {
-        if (this.gridVisible === on)
-            return;
-        this.gridVisible = on;
-        this.scheduleRender();
+        this.setGrid({ enabled: on });
     }
-    /** Toggle background grid visibility. */
+    /** Toggle the background grid on/off. */
     toggleGrid() {
-        this.setGridVisible(!this.gridVisible);
+        this.setGrid({ enabled: !this.gridEnabled });
     }
     /** Whether the active draw-mode sticks after a create (toolbar lock). */
     get toolLocked() {
@@ -1016,7 +1003,6 @@ export class Editor {
         this._toolLocked = locked;
         this.notify();
     }
-    // Body moved to `./editor/gesture-tx.ts`.
     maybeRevertModeAfterCreate() {
         this.gestures.maybeRevertModeAfterCreate();
     }
@@ -1086,13 +1072,12 @@ export class Editor {
      * file-drop handler, a host CDN URL, an SVG string in
      * `image/svg+xml;base64,...` form.
      */
-    // Pure body in `./editor/public/image-insert.ts`.
     insertImage(input) {
         const id = castElementId(this.uniqueId("img"));
         const shape = buildImageElement(this._scene, input, id, this._activeLayerId);
         this.addElement(shape);
         if (input.animated) {
-            this.initPlayback(id);
+            this.gifPlayback.ensure(id);
             this.maybeAnimate();
         }
         return id;
@@ -1110,67 +1095,25 @@ export class Editor {
      * current frame of natively-animated elements. Self-terminates
      * when no animated shapes remain.
      *
-     * Lifecycle managed by the `AnimationTick` helper (see
-     * `./animation-tick.ts`). `insertImage({animated:true})` and
-     * `loadScene` start the tick; `dispose()` stops it.
-     */
-    /** EMA of animation-tick render cost (ms) — drives the adaptive throttle. */
-    gifRenderCostEma = 0;
-    /** Wall-clock of the last animation-tick render — for the interval throttle. */
-    lastGifTickMs = 0;
-    animationTick = new AnimationTick({
-        // Keep ticking only while an animated shape is actually on-screen.
-        // Frame selection is wall-clock-based, so when the GIF scrolls back
-        // into view the tick resumes on the correct frame. The tick is re-armed
-        // on viewport changes via `maybeAnimate()` in `notify()`.
-        isAnimated: () => this.hasVisibleAnimatedElement(),
-        onTick: () => {
-            // Adaptive throttle — skip this rAF if an animation frame was rendered
-            // too recently. The target interval grows with the measured render
-            // cost so a heavy scene drops GIF fps instead of blowing the frame
-            // budget.
-            const now = typeof performance !== "undefined" ? performance.now() : Date.now();
-            const target = Math.min(ANIMATION_MAX_INTERVAL_MS, Math.max(ANIMATION_MIN_INTERVAL_MS, this.gifRenderCostEma * ANIMATION_COST_FACTOR));
-            if (now - this.lastGifTickMs < target)
-                return;
-            this.lastGifTickMs = now;
-            // Freeze heavy GIFs that have played long enough.
-            this.autoStopHeavyGifs();
-            // Force a full re-render: the scene reference hasn't changed,
-            // but the animation adapter advanced the GIF frame. Re-painting
-            // picks up the current frame.
+     * Lifecycle managed by the `AnimationTick` helper.
+     * `insertImage({animated:true})` and `loadScene` start the tick;
+     * `dispose()` stops it.
+     */
+    animation = new AnimationController({
+        hasVisibleAnimatedElement: () => animScene.hasVisibleAnimatedElement(this),
+        autoStopHeavyGifs: () => {
+            animScene.autoStopHeavyGifs(this);
+        },
+        forceAnimationRepaint: () => {
+            // The scene reference hasn't changed, but the adapter advanced the GIF
+            // frame — drop the paint cache and force a repaint.
             this.lastRenderedScene = null;
             this.render();
-            const cost = (typeof performance !== "undefined" ? performance.now() : Date.now()) - now;
-            // EMA so a single spike doesn't overreact; decays back when load drops.
-            this.gifRenderCostEma = this.gifRenderCostEma * 0.8 + cost * 0.2;
         },
     });
-    // Pure body in `./editor/public/image-insert.ts`.
     hasAnimatedElement() {
         return hasAnimatedElement(this._scene);
     }
-    /**
-     * True when at least one animated shape's world AABB intersects the
-     * current viewport. Drives viewport-culling of the animation tick —
-     * off-screen GIFs don't burn decode / render cost, and the wall-clock
-     * frame selection means they show the right frame the moment they
-     * scroll back in.
-     */
-    hasVisibleAnimatedElement() {
-        if (!hasAnimatedElement(this._scene))
-            return false;
-        const viewport = this.computeViewportWorld();
-        if (!viewport)
-            return true; // no viewport yet — don't suppress
-        for (const shape of this._scene.elements.values()) {
-            if (shape.metadata?.animated !== true)
-                continue;
-            if (B.intersects(getElementWorldBounds(shape), viewport))
-                return true;
-        }
-        return false;
-    }
     /**
      * Re-arm the animation tick after a change that may have brought an
      * animated shape into (or out of) view — pan / zoom / scene edit.
@@ -1178,93 +1121,21 @@ export class Editor {
      * `isAnimated()` is false, so this is cheap to call from `notify()`.
      */
     maybeAnimate() {
-        if (this.hasVisibleAnimatedElement())
-            this.animationTick.start();
-    }
-    /** Bound `visibilitychange` handler — pause/resume the tick. */
-    onVisibilityChange = () => {
-        if (typeof document === "undefined")
-            return;
-        if (document.hidden) {
-            this.animationTick.stop();
-        }
-        else {
-            this.maybeAnimate();
-        }
-    };
-    // ── Per-shape GIF playback (auto-stop + reduced-motion) ──────
-    /**
-     * Transient per-shape playback state for animated images. `originMs`
-     * is the wall-clock the current play run started; `frozenMs` is the
-     * playback offset a paused shape is held at. Not serialised — purely
-     * a runtime view, rebuilt on insert / rehydrate.
-     */
-    playbackState = new Map();
-    /** Element id currently hovered — a hovered heavy GIF keeps playing
-     *  (its auto-stop timer is held off). Set by the pointer hover path. */
-    hoveredAnimatedId = null;
-    static nowMs() {
-        return typeof performance !== "undefined" ? performance.now() : Date.now();
-    }
-    static prefersReducedMotion() {
-        if (typeof matchMedia !== "function")
-            return false;
-        try {
-            return matchMedia("(prefers-reduced-motion: reduce)").matches;
-        }
-        catch {
-            return false;
-        }
+        this.animation.maybe();
     }
     /**
-     * Seed playback for a freshly-animated shape. Start paused (frozen on
-     * frame 0) when the user prefers reduced motion; playing otherwise.
+     * Per-shape GIF playback state (auto-stop + reduced-motion). Extracted into
+     * a controller; the Editor keeps the orchestration (scene iteration,
+     * animation tick, render scheduling) and delegates state ops here.
      */
-    initPlayback(id) {
-        if (this.playbackState.has(id))
-            return;
-        const now = Editor.nowMs();
-        this.playbackState.set(id, {
-            playing: !Editor.prefersReducedMotion(),
-            originMs: now,
-            playStartMs: now,
-            frozenMs: 0,
-        });
-    }
-    /** Playback timestamp fed to the renderer's animation clock for a
-     *  shape: wall-clock when unmanaged, play offset when playing, the
-     *  frozen frame when paused. */
-    playbackClock(elementId) {
-        const st = this.playbackState.get(elementId);
-        const now = Editor.nowMs();
-        if (!st)
-            return now;
-        return st.playing ? now - st.originMs : st.frozenMs;
-    }
+    gifPlayback = new GifPlaybackController();
     /**
      * Toggle GIF playback for a shape — wired to a click on an animated
      * image (resume after auto-stop, play after reduced-motion). Resuming
      * continues from the frozen frame.
      */
     togglePlayback(id) {
-        const now = Editor.nowMs();
-        const st = this.playbackState.get(id);
-        if (!st) {
-            this.playbackState.set(id, { playing: true, originMs: now, playStartMs: now, frozenMs: 0 });
-        }
-        else if (st.playing) {
-            st.frozenMs = now - st.originMs;
-            st.playing = false;
-        }
-        else {
-            // Resume from the frozen frame AND restart the auto-stop timer,
-            // otherwise a heavy GIF (frozen past GIF_AUTOSTOP_MS) would
-            // re-trip auto-stop on the very next tick — playing one frame
-            // then freezing again.
-            st.originMs = now - st.frozenMs;
-            st.playStartMs = now;
-            st.playing = true;
-        }
+        this.gifPlayback.toggle(id);
         this.maybeAnimate();
         this.scheduleRender();
     }
@@ -1275,24 +1146,14 @@ export class Editor {
      * Pass `null` when the pointer leaves all shapes.
      */
     hoverAnimatedElement(id) {
-        if (this.hoveredAnimatedId === id)
-            return;
-        this.hoveredAnimatedId = id;
-        if (id !== null) {
-            const st = this.playbackState.get(id);
-            const now = Editor.nowMs();
-            if (st && !st.playing) {
-                st.originMs = now - st.frozenMs;
-                st.playStartMs = now;
-                st.playing = true;
-                this.maybeAnimate();
-                this.scheduleRender();
-            }
+        if (this.gifPlayback.hoverEnter(id)) {
+            this.maybeAnimate();
+            this.scheduleRender();
         }
     }
     /** True when the shape's GIF is paused (drives the overlay badge). */
     isPlaybackPaused(id) {
-        return this.playbackState.get(id)?.playing === false;
+        return this.gifPlayback.isPaused(id);
     }
     /**
      * Record the idle cursor position so the overlay can grow the SINGLE
@@ -1315,74 +1176,6 @@ export class Editor {
         const t = this.hoveredLinkTarget;
         return t ? { elementId: t.elementId, mode: t.mode } : null;
     }
-    /**
-     * Freeze heavy GIFs after `GIF_AUTOSTOP_MS` of continuous play.
-     * Light GIFs (small byte payload) loop forever. Called from the tick
-     * before each animation render.
-     */
-    autoStopHeavyGifs() {
-        const now = Editor.nowMs();
-        for (const shape of this._scene.elements.values()) {
-            if (shape.type !== "image")
-                continue;
-            const img = shape;
-            if (!img.animationKind)
-                continue;
-            const st = this.playbackState.get(img.id);
-            if (!st?.playing)
-                continue;
-            const heavy = img.animationData instanceof ArrayBuffer && img.animationData.byteLength > HEAVY_GIF_BYTES;
-            if (!heavy)
-                continue;
-            // Hovered heavy GIF keeps playing — push its timer forward so it
-            // never auto-stops while the pointer is over it.
-            if (img.id === this.hoveredAnimatedId) {
-                st.playStartMs = now;
-                continue;
-            }
-            if (now - st.playStartMs > GIF_AUTOSTOP_MS) {
-                st.frozenMs = now - st.originMs;
-                st.playing = false;
-            }
-        }
-    }
-    /**
-     * Restore transient `animationData` for animated image shapes after
-     * a scene load. The raw GIF bytes don't survive serialisation
-     * (`serializeScene` strips the ArrayBuffer), but they're persisted
-     * in `Scene.files` via the shape's `fileId`. Here we copy the bytes
-     * back onto `shape.animationData` so the registered animation
-     * adapter (host-side, e.g. the gifuct decoder) can produce frames.
-     *
-     * Applied directly to `_scene` (no history entry — this is an
-     * internal rehydration, not a user edit). No-op for shapes that
-     * already carry live `animationData` or lack a resolvable file.
-     */
-    rehydrateAnimatedImages() {
-        for (const shape of this._scene.elements.values()) {
-            if (shape.type !== "image")
-                continue;
-            const img = shape;
-            if (!img.animationKind)
-                continue;
-            // Seed playback for every animated shape loaded from the scene
-            // (reduced-motion is honoured at this point too).
-            this.initPlayback(img.id);
-            if (!img.fileId)
-                continue;
-            if (img.animationData instanceof ArrayBuffer)
-                continue; // already live
-            const file = getBinaryFile(this._scene, img.fileId);
-            if (!file)
-                continue;
-            this._scene = apply(this._scene, {
-                kind: "element",
-                id: img.id,
-                before: img,
-                after: { ...img, animationData: file.data },
-            });
-        }
-    }
     /**
      * Drag-to-place flow for palette templates. Adds the shape to the
      * scene immediately so the user sees it dragging under the cursor,
@@ -1393,7 +1186,6 @@ export class Editor {
      * Typical wiring: HTML5 dragenter starts the placement, dragover
      * updates, drop commits, dragleave / window keydown(Escape) cancel.
      */
-    // Placement helpers live in `./editor/public/placement.ts`.
     // Editor owns the transaction lifecycle and selection mutate;
     // the closure threads scene mutations through the pure helpers.
     beginPlacement(shape) {
@@ -1437,7 +1229,6 @@ export class Editor {
             },
         };
     }
-    // Pure body in `./editor/public/selection-ops.ts`.
     deleteSelected() {
         const result = computeDeleteSelection(this._scene, this._selection, this._selectedLinks);
         if (!result)
@@ -1498,8 +1289,9 @@ export class Editor {
     _textSel = null;
     /** Anchor offset for a canvas drag-select inside the edited text. */
     _textDragAnchor = null;
-    _caretBlinkOn = true;
-    _caretBlinkTimer = null;
+    caretBlink = new CaretBlinkController(() => {
+        this.notify();
+    });
     get editingTextSelection() {
         return this._textSel;
     }
@@ -1510,41 +1302,17 @@ export class Editor {
         return this._textSel.dir === "backward" ? this._textSel.start : this._textSel.end;
     }
     get caretBlinkOn() {
-        return this._caretBlinkOn;
+        return this.caretBlink.on;
     }
     /** `true` while a canvas drag-select inside the edited text is active. */
     get isTextDragging() {
         return this._textDragAnchor !== null;
     }
-    startCaretBlink() {
-        this._caretBlinkOn = true;
-        this.stopCaretBlink();
-        // Only run the blink when a DOM clock exists (browser host). Node
-        // test envs construct the editor without a window — skip so a
-        // dangling interval can't keep the process alive.
-        if (typeof window === "undefined")
-            return;
-        this._caretBlinkTimer = setInterval(() => {
-            this._caretBlinkOn = !this._caretBlinkOn;
-            this.notify();
-        }, CARET_BLINK_INTERVAL_MS);
-    }
-    stopCaretBlink() {
-        if (this._caretBlinkTimer !== null) {
-            clearInterval(this._caretBlinkTimer);
-            this._caretBlinkTimer = null;
-        }
-    }
-    /** Reset the caret to solid (called on type / move so it never blinks off mid-action). */
-    wakeCaret() {
-        this._caretBlinkOn = true;
-    }
     /**
      * Begin editing a text shape's body. No-op when the shape doesn't
      * exist or isn't a text shape. Concurrent edits commit themselves
      * (only one shape at a time). Caret defaults to the end of the text.
      */
-    // Pure bodies in `./editor/public/text-edit.ts`.
     /** Open inline caption editing for a link (double-click). */
     beginLinkCaptionEdit(id) {
         if (!getLink(this._scene, id))
@@ -1604,12 +1372,12 @@ export class Editor {
         const t = edge.label?.position ?? 0.5;
         let total = 0;
         for (let i = 1; i < path.length; i++)
-            total += distanceTo(req(path[i - 1]), req(path[i]));
+            total += vec2.distance(req(path[i - 1]), req(path[i]));
         let remaining = total * t;
         for (let i = 1; i < path.length; i++) {
             const a = req(path[i - 1]);
             const b = req(path[i]);
-            const seg = distanceTo(a, b);
+            const seg = vec2.distance(a, b);
             if (remaining <= seg) {
                 const r = seg === 0 ? 0 : remaining / seg;
                 return { x: a.x + (b.x - a.x) * r, y: a.y + (b.y - a.y) * r };
@@ -1630,7 +1398,7 @@ export class Editor {
         const shape = getElement(this._scene, id);
         const len = shape?.text.length ?? 0;
         this._textSel = { start: len, end: len, dir: "forward" };
-        this.startCaretBlink();
+        this.caretBlink.start();
         this.notify();
     }
     // --- Frame name inline editing (double-click the header) ---
@@ -1640,7 +1408,7 @@ export class Editor {
      */
     beginFrameNameEdit(id) {
         const shape = getElement(this._scene, id);
-        if (shape?.type !== "frame")
+        if (shape === undefined || !isFrame(shape))
             return;
         if (this.isLayerLocked(shape.layerId))
             return;
@@ -1659,23 +1427,10 @@ export class Editor {
         if (id === null)
             return;
         this._editingFrameName = null;
-        const shape = getElement(this._scene, id);
-        if (shape?.type === "frame") {
-            const trimmed = name.trim();
-            const current = shape.name ?? "";
-            if (trimmed !== current) {
-                const r = updateElement(this._scene, id, (s) => {
-                    const copy = { ...s };
-                    // `exactOptionalPropertyTypes`: drop the key when cleared.
-                    if (trimmed === "")
-                        delete copy.name;
-                    else
-                        copy.name = trimmed;
-                    return copy;
-                });
-                this._scene = r.scene;
-                this._history.push(r.patch);
-            }
+        const r = computeFrameNameCommit(this._scene, id, name);
+        if (r) {
+            this._scene = r.scene;
+            this._history.push(r.patch);
         }
         this.notify();
     }
@@ -1693,25 +1448,7 @@ export class Editor {
      * hit-test bounds. Assumes unrotated frames (the common case).
      */
     frameHeaderAt(p) {
-        let bestId = null;
-        let bestOrder = "";
-        for (const s of this._scene.elements.values()) {
-            if (!isFrame(s))
-                continue;
-            const hx = s.position.x;
-            // The header strip can extend up to the frame's full width (it hugs
-            // the label but is capped there), so the rename hit zone spans it.
-            const hw = s.width * s.scale.x;
-            const hh = FRAME_HEADER_HEIGHT * s.scale.y;
-            const hyTop = s.position.y - hh;
-            if (p.x >= hx && p.x <= hx + hw && p.y >= hyTop && p.y <= hyTop + hh) {
-                if (bestId === null || s.order > bestOrder) {
-                    bestId = s.id;
-                    bestOrder = s.order;
-                }
-            }
-        }
-        return bestId;
+        return computeFrameHeaderAt(this._scene, p);
     }
     /**
      * Live edit transport from the hidden `<textarea>`: replace the
@@ -1726,7 +1463,7 @@ export class Editor {
         const r = updateElement(this._scene, id, (s) => ({ ...s, text: value }));
         this._scene = r.scene;
         this._textSel = { start: selStart, end: selEnd, dir };
-        this.wakeCaret();
+        this.caretBlink.wake();
         this.notify();
     }
     /** Selection-only update (arrows / shift-select / click) — no text change. */
@@ -1734,7 +1471,7 @@ export class Editor {
         if (!this._editingTextElement)
             return;
         this._textSel = { start: selStart, end: selEnd, dir };
-        this.wakeCaret();
+        this.caretBlink.wake();
         this.notify();
     }
     /**
@@ -1752,9 +1489,15 @@ export class Editor {
         const layout = this.editingTextLayout(shape);
         if (!layout)
             return null;
-        // World → shape-local (translate by position; rotation/scale on text
-        // edit is uncommon — ignore for hit purposes).
-        const local = { x: worldPoint.x - shape.position.x, y: worldPoint.y - shape.position.y };
+        // World → shape-local: undo the element transform so the hit lands on the
+        // right glyph. Translate by position, then divide out scale (rotation
+        // while editing text is not handled — an uncommon case).
+        const sx = shape.scale.x || 1;
+        const sy = shape.scale.y || 1;
+        const local = {
+            x: (worldPoint.x - shape.position.x) / sx,
+            y: (worldPoint.y - shape.position.y) / sy,
+        };
         const align = shape.style.textAlign ?? "left";
         return pointToCaretIndex(layout, local, this.measureFor(shape), align);
     }
@@ -1842,18 +1585,24 @@ export class Editor {
         const align = shape.style.textAlign ?? "left";
         const measure = this.measureFor(shape);
         const { x: px, y: py } = shape.position;
+        // The layout is in the shape's own (unscaled) space; the renderer draws it
+        // through the element transform, so caret + selection geometry must scale
+        // too or they trail the rendered text on a scaled element. (Rotation while
+        // editing text is not handled — an uncommon case.)
+        const sx = shape.scale.x;
+        const sy = shape.scale.y;
         const local = textSelectionRects(layout, this._textSel.start, this._textSel.end, measure, align);
         const selectionRects = local.map((r) => ({
-            x: px + r.x,
-            y: py + r.y,
-            width: r.width,
-            height: r.height,
+            x: px + Math.min(r.x * sx, (r.x + r.width) * sx),
+            y: py + Math.min(r.y * sy, (r.y + r.height) * sy),
+            width: Math.abs(r.width * sx),
+            height: Math.abs(r.height * sy),
         }));
         let caret = null;
-        if (this._caretBlinkOn) {
+        if (this.caretBlink.on) {
             const cIdx = this._textSel.dir === "backward" ? this._textSel.start : this._textSel.end;
             const g = caretGeometry(layout, cIdx, measure, shape.fontSize, align);
-            caret = { x: px + g.x, y: py + g.y, height: g.height };
+            caret = { x: px + g.x * sx, y: py + g.y * sy, height: g.height * Math.abs(sy) };
         }
         return { caret, caretColor: shape.style.fill ?? "#1a1a1a", selectionRects };
     }
@@ -1872,7 +1621,7 @@ export class Editor {
         this._pendingTextCreate = null;
         this._textEditOrigin = null;
         this._textSel = null;
-        this.stopCaretBlink();
+        this.caretBlink.stop();
         const finalElement = getElement(this._scene, id);
         const text = finalElement?.text ?? "";
         // Empty (whitespace-only) text removes the shape. Pending = silent
@@ -1917,7 +1666,7 @@ export class Editor {
         this._pendingTextCreate = null;
         this._textEditOrigin = null;
         this._textSel = null;
-        this.stopCaretBlink();
+        this.caretBlink.stop();
         // Revert live edits with no history entry. Pending creations are
         // removed entirely; existing shapes have only their TEXT restored
         // (panel-driven field changes during the edit keep their own
@@ -1941,7 +1690,6 @@ export class Editor {
      * keyboard navigation; hosts pass `{ x: 1, y: 0 }` for fine nudge
      * and `{ x: 10, y: 0 }` for shift-arrow.
      */
-    // Pure body in `./editor/public/selection-ops.ts`.
     moveSelectionBy(delta) {
         if (this._selection.size === 0 && this._selectedLinks.size === 0)
             return;
@@ -1980,7 +1728,6 @@ export class Editor {
      * Hosts can bind this to "Enter" while in a draw mode, providing a
      * mouse-free alternative to drag-out creation.
      */
-    // Pure body in `./editor/public/placement.ts`.
     createElementAtCursor() {
         const vp = this._scene.viewport;
         const world = this.screenToWorld({
@@ -2020,7 +1767,6 @@ export class Editor {
         this.beginTextEdit(id);
         return id;
     }
-    // Pure bodies in `./editor/public/brush.ts`.
     beginBrushStroke(world, pressure = 0.5) {
         this.brushStroke = beginBrushStrokePure(world, pressure);
         this.notify();
@@ -2054,7 +1800,6 @@ export class Editor {
     get pendingBrushStroke() {
         return this.brushStroke;
     }
-    // Pure bodies in `./editor/public/arrange-group.ts`.
     arrangeAsGrid(opts = {}) {
         const origin = this.combinedSelectionBounds() ?? { x: 0, y: 0 };
         const result = computeArrangeAsGrid(this._scene, this._selection, opts, origin);
@@ -2156,7 +1901,6 @@ export class Editor {
      * Duplicate the selected shapes 10 px down-right of the originals.
      * Links between selected shapes are NOT cloned. Single undo step.
      */
-    // Pure body in `./editor/public/selection-ops.ts`.
     duplicateSelected() {
         const result = computeDuplicateSelection(this._scene, this._selection, () => ++this.nextId);
         if (!result)
@@ -2199,32 +1943,11 @@ export class Editor {
         const idMap = new Map();
         for (const id of ids)
             idMap.set(id, castElementId(this.uniqueId("shape")));
+        const dup = computeDuplicateInPlace(this._scene, ids, idMap);
         const tx = this._history.transaction();
-        for (const id of ids) {
-            const shape = getElement(this._scene, id);
-            if (!shape)
-                continue;
-            const newId = idMap.get(id);
-            if (newId === undefined)
-                continue;
-            const order = orderForTop([...this._scene.elements.values()]
-                .filter((sh) => sh.layerId === shape.layerId)
-                .map((sh) => sh.order));
-            const copy = { ...shape, id: newId, order };
-            if (copy.parentId !== undefined) {
-                const mapped = idMap.get(copy.parentId);
-                if (mapped !== undefined)
-                    copy.parentId = mapped;
-            }
-            if (copy.frameId !== undefined) {
-                const mapped = idMap.get(copy.frameId);
-                if (mapped !== undefined)
-                    copy.frameId = mapped;
-            }
-            const r = addElement(this._scene, copy);
-            this._scene = r.scene;
-            tx.add(r.patch);
-        }
+        this._scene = dup.scene;
+        for (const patch of dup.patches)
+            tx.add(patch);
         tx.commit();
         // Select the clones of the originally-selected ids.
         const selectedClones = [];
@@ -2269,7 +1992,6 @@ export class Editor {
      * `navigator.clipboard` (out of scope for the editor).
      */
     clipboard = [];
-    // Pure body in `./editor/public/clipboard.ts`.
     copySelected() {
         const out = copySelectedPure(this._scene, this._selection);
         if (out.length === 0)
@@ -2290,7 +2012,6 @@ export class Editor {
      *
      * New shapes get fresh ids and end up selected. Single undo step.
      */
-    // Pure body in `./editor/public/clipboard.ts`.
     paste(targetWorld) {
         if (this.clipboard.length === 0)
             return;
@@ -2315,7 +2036,30 @@ export class Editor {
      *
      * No-op when `ids` is empty or none of the targeted shapes exist.
      */
-    // Pure body in `./editor/public/selection-ops.ts`.
+    /**
+     * Capture the visual style of the first selected element into the style
+     * buffer, for a later {@link pasteSelectionStyle}. No-op / clears nothing
+     * when the selection is empty.
+     */
+    copySelectionStyle() {
+        for (const id of this._selection) {
+            const el = getElement(this._scene, id);
+            if (el !== undefined) {
+                this.styleClipboard = { ...el.style };
+                return;
+            }
+        }
+    }
+    /** Apply the copied style (if any) to every selected element. One undo step. */
+    pasteSelectionStyle() {
+        if (this.styleClipboard === null)
+            return;
+        this.updateStyle(this._selection, this.styleClipboard);
+    }
+    /** Whether a style has been copied and can be pasted. */
+    get hasStyleClipboard() {
+        return this.styleClipboard !== null;
+    }
     updateStyle(ids, partial) {
         const result = computeUpdateStyle(this._scene, ids, partial);
         if (!result)
@@ -2337,6 +2081,19 @@ export class Editor {
         this._history.push(result.patch);
         this.notify();
     }
+    /**
+     * Step the font size of every selected text shape up or down by one gentle
+     * multiplicative increment (each shape relative to its own size). One
+     * undoable step; no-op when no text is selected.
+     */
+    adjustSelectionFontSize(direction) {
+        const result = computeAdjustFontSize(this._scene, this._selection, direction);
+        if (!result)
+            return;
+        this._scene = result.scene;
+        this._history.push(result.patch);
+        this.notify();
+    }
     /**
      * Set (or clear, with `null`) the element-level hyperlink (`href`) on
      * every shape in `ids`. Single undo step. Pass a raw user string — it
@@ -2383,7 +2140,6 @@ export class Editor {
             return null;
         return { id: shape.id, href, bounds: getElementWorldBounds(shape) };
     }
-    // Pure bodies in `./editor/public/z-order.ts`.
     bringToFront(id) {
         const result = computeBringToFront(this._scene, id, this._selection);
         if (!result)
@@ -2418,6 +2174,62 @@ export class Editor {
         this._history.push(result.patch);
         this.notify();
     }
+    /**
+     * Mirror the current selection about its bounding-box centre on the given
+     * axis — `horizontal` flips left↔right, `vertical` flips top↔bottom. A single
+     * element flips about its own centre. One undoable step.
+     */
+    flipSelection(axis) {
+        this.commitArrange(computeFlipPatches(this._scene, this._selection, axis));
+    }
+    /**
+     * Align the selection to the given edge / centre line of its bounding box
+     * (e.g. `left` flushes every shape's left edge; `h-center` lines up
+     * horizontal centres). Needs two or more elements. One undoable step.
+     */
+    alignSelection(edge) {
+        this.commitArrange(computeAlignPatches(this._scene, this._selection, edge));
+    }
+    /**
+     * Evenly space the selection along the given axis so the gaps between
+     * adjacent shapes are equal; the outermost shapes stay put. Needs three or
+     * more elements. One undoable step.
+     */
+    distributeSelection(axis) {
+        this.commitArrange(computeDistributePatches(this._scene, this._selection, axis));
+    }
+    /**
+     * Rotate the whole selection by `delta` radians about its bounding-box centre
+     * (a single shape turns about its own centre). One undoable step. The live
+     * rotate gesture drives the same maths from a press-time snapshot.
+     */
+    rotateSelection(delta) {
+        const elements = [];
+        const origin = new Map();
+        for (const id of this._selection) {
+            const el = getElement(this._scene, id);
+            if (el === undefined)
+                continue;
+            elements.push(el);
+            origin.set(id, { position: el.position, rotation: el.rotation });
+        }
+        if (elements.length === 0)
+            return;
+        const pivot = selectionCenter(elements);
+        this.commitArrange(computeRotatePatches(this._scene, origin, pivot, delta));
+    }
+    /** Apply a batch of arrange patches as a single undoable step. */
+    commitArrange(patches) {
+        if (patches.length === 0)
+            return;
+        const tx = this._history.transaction();
+        for (const patch of patches) {
+            this._scene = apply(this._scene, patch);
+            tx.add(patch);
+        }
+        tx.commit();
+        this.notify();
+    }
     compactLayerZOrder(layerId, options = {}) {
         const recordHistory = options.recordHistory ?? true;
         const layerIds = layerId ? [layerId] : [...this._scene.layers.keys()];
@@ -2468,7 +2280,6 @@ export class Editor {
         this._activeLayerId = id;
         this.notify();
     }
-    // Pure bodies in `./editor/public/layers.ts`.
     createLayer(name) {
         const result = computeCreateLayer(this._scene, name, newLayerId(++this.nextId));
         this._scene = result.scene;
@@ -2532,7 +2343,6 @@ export class Editor {
      * x → shapes move right relative to the user). Not recorded in
      * history — viewport state is editor-local.
      */
-    // Pure bodies in `./editor/public/zoom-pan.ts`.
     panBy(deltaScreen) {
         const next = computePan(this._scene, deltaScreen);
         if (!next)
@@ -2588,43 +2398,13 @@ export class Editor {
     selectClosest(direction) {
         const ref = this.combinedSelectionBounds();
         const vp = this._scene.viewport;
-        const refC = ref
+        const refCenter = ref
             ? { x: ref.x + ref.width / 2, y: ref.y + ref.height / 2 }
             : {
                 x: vp.pan.x + vp.size.width / 2 / vp.zoom,
                 y: vp.pan.y + vp.size.height / 2 / vp.zoom,
             };
-        const dv = direction === "left"
-            ? { x: -1, y: 0 }
-            : direction === "right"
-                ? { x: 1, y: 0 }
-                : direction === "up"
-                    ? { x: 0, y: -1 }
-                    : { x: 0, y: 1 };
-        let best = null;
-        let bestScore = Infinity;
-        for (const s of this._scene.elements.values()) {
-            if (s.parentId !== undefined)
-                continue; // top-level shapes only
-            if (this._selection.has(s.id))
-                continue;
-            if (!this.isElementInteractable(s))
-                continue;
-            const b = getElementWorldBounds(s);
-            const cx = b.x + b.width / 2 - refC.x;
-            const cy = b.y + b.height / 2 - refC.y;
-            const along = cx * dv.x + cy * dv.y;
-            if (along <= 0)
-                continue; // not in the direction's half-plane
-            const perp = Math.abs(cx * dv.y - cy * dv.x);
-            if (perp > along)
-                continue; // outside the 45° cone
-            const score = along + perp;
-            if (score < bestScore) {
-                bestScore = score;
-                best = s.id;
-            }
-        }
+        const best = findClosestInDirection(this._scene, this._selection, direction, refCenter, (s) => this.isElementInteractable(s));
         if (best === null)
             return;
         this.setSelection([best]);
@@ -2667,22 +2447,28 @@ export class Editor {
         this.snapSuppressed = suppressed;
     }
     /**
-     * True when a gesture should snap. Snapping is coupled to grid *display*:
-     * it is active only while a grid is actually shown — the toggle is on
-     * (`gridVisible`, `g` hotkey) AND the scene has a positive `gridSize` (the
-     * same condition `renderGrid` paints under). Snapping to an invisible grid
-     * is confusing, so no grid → no snap, always. `snapToGrid` is an extra
-     * programmatic opt-out; the suppress modifier (Cmd/Ctrl) bypasses snapping
-     * for the current gesture.
+     * Host hook: mirror the Alt / Shift modifier state so an in-flight resize or
+     * move reacts to it — `alt` resizes about the centre, `shift` locks the
+     * resize aspect ratio (or constrains a move to one axis). The app wires
+     * keydown/keyup of the modifiers to this. Idempotent; never touches history.
+     */
+    setTransformModifiers(mods) {
+        this.transformAltKey = mods.alt;
+        this.transformShiftKey = mods.shift;
+    }
+    /**
+     * True when a gesture should snap. Snapping is coupled to grid display:
+     * it is active only while the grid is enabled (`gridEnabled`) — snapping to
+     * a hidden grid is confusing. `snapToGrid` is an extra programmatic opt-out;
+     * the suppress modifier (Cmd/Ctrl) bypasses snapping for the current gesture.
      */
     snapActive() {
         const viewport = this._scene.viewport;
-        const gridShown = this.gridVisible && (viewport.gridSize ?? 0) > 0;
-        return !this.snapSuppressed && gridShown && isSnapToGridEnabled(viewport);
+        return !this.snapSuppressed && viewport.gridEnabled && isSnapToGridEnabled(viewport);
     }
     /** World-unit spacing the current gesture snaps to. */
     snapSpacing() {
-        return resolveSnapSpacing(this._scene.viewport);
+        return resolveSnapSpacing();
     }
     /**
      * Replace the entire scene (e.g. after `parseScene`). Clears history,
@@ -2713,7 +2499,7 @@ export class Editor {
         }
         // Restore transient animationData (GIF bytes) from Scene.files
         // before the tick so the animation adapter can decode frames.
-        this.rehydrateAnimatedImages();
+        animScene.rehydrateAnimatedImages(this);
         this.notify();
         // Loaded scene may carry animated shapes (e.g. GIF re-imported
         // from saved JSON). Re-arm the tick — `metadata.animated` survives
@@ -2731,20 +2517,14 @@ export class Editor {
         this.cursorListeners.clear();
         this.longPressListeners.clear();
         this.announceListeners.clear();
-        this.animationTick.stop();
+        this.animation.detach();
         this.animationContentOff?.();
-        if (typeof document !== "undefined") {
-            document.removeEventListener("visibilitychange", this.onVisibilityChange);
-        }
         if (this.renderRafId !== null && typeof cancelAnimationFrame !== "undefined") {
             cancelAnimationFrame(this.renderRafId);
             this.renderRafId = null;
         }
     }
     // --- Internal ---
-    // Body moved to `./editor/pointer-binding.ts` (~700 lines of
-    // pointer / wheel / keyboard dispatch). The thin wrapper here
-    // preserves the original constructor call site.
     bindPointerEvents() {
         return bindPointerEventsExternal(this);
     }
@@ -2800,14 +2580,14 @@ export class Editor {
     isDrawingPhase(ctx) {
         return ctx.mode === "draw-rect" || ctx.mode === "draw-ellipse" || ctx.mode === "draw-edge";
     }
-    // --- Long-press --- (controller in `./editor/long-press.ts`)
+    // --- Long-press ---
     startLongPress(screenPoint) {
         this.longPress.start(screenPoint);
     }
     cancelLongPress() {
         this.longPress.cancel();
     }
-    // --- Pinch gesture --- (controller in `./editor/pinch.ts`)
+    // --- Pinch gesture ---
     beginPinch() {
         this.pinch.begin([...this.activePointers.values()]);
     }
@@ -2822,9 +2602,9 @@ export class Editor {
     screenToWorld(point) {
         return matrix.applyToPoint(getScreenToWorld(this._scene.viewport), point);
     }
-    // Pure body in `./editor/hit-test.ts`. Editor passes a narrow
-    // context bundle that closes over its private state + accel
-    // helpers (acceleratedElementAt, isElementInteractable, …).
+    // Editor passes a narrow context bundle that closes over its
+    // private state + accel helpers (acceleratedElementAt,
+    // isElementInteractable, …).
     /**
      * Attach target under `worldPoint` for an endpoint-rebind drop: the topmost
      * interactable ELEMENT (group-promoted), ignoring link bodies and the dragged
@@ -2867,87 +2647,10 @@ export class Editor {
      * out of sync. `worldPoint` defaults to the last known pointer position.
      */
     refreshCursor(worldPoint) {
-        const next = this.computeCursor(worldPoint ?? this.lastPointerWorld);
+        const next = computeCursor(this, worldPoint ?? this.lastPointerWorld);
         if (this.host.style.cursor !== next)
             this.host.style.cursor = next;
     }
-    /**
-     * The CSS cursor for the current state. Priority: active gesture → text edit → pan affordance →
-     * draw tool → idle hover hit-test. Pure read of editor state; no side effects.
-     */
-    computeCursor(p) {
-        // Each outcome is a (role, fallback-keyword) pair; `resolveCursor` returns
-        // a host-registered custom image for that role if one exists, else the
-        // keyword. Roles are the stable override keys (see `setCursorOverride`).
-        const r = (role, keyword) => this.resolveCursor(role, keyword);
-        const resizeRole = (h) => r(RESIZE_ROLE[h], cursorForHandle(h));
-        // 1. Active gestures (highest priority — what the pointer is doing now).
-        if (this.panGesture)
-            return r("pan-active", "grabbing");
-        if (this.linkDragFromAnchor?.moved === true)
-            return r("draw", "crosshair");
-        if (this.isDraggingWaypoint || this.isDraggingSegment)
-            return r("move", "grabbing");
-        if (this.annotationDrag?.moved === true)
-            return r("move", "grabbing");
-        if (this.brushStroke)
-            return r("draw", "crosshair");
-        // Machine-driven drag past the threshold (`gestureTx` opens then): resize
-        // shows the handle's arrow; element / link move shows grabbing.
-        if (this.gestureTx) {
-            const t = this.actor.getSnapshot().context.pressTarget;
-            if (t && (t.kind === "handle" || t.kind === "group-handle"))
-                return resizeRole(t.handle);
-            if (t && (t.kind === "element" || t.kind === "link" || t.kind === "edge-endpoint")) {
-                return r("move", "grabbing");
-            }
-        }
-        // 2. In-canvas text editing → I-beam.
-        if (this.editingTextElement !== null)
-            return r("text", "text");
-        // 3. Pan affordance (idle): Space held or hand tool.
-        if (this.spaceHeld || this.mode === "hand")
-            return r("pan-ready", "grab");
-        // 4. Draw tools (idle, before a gesture starts).
-        switch (this.mode) {
-            case "draw-rect":
-            case "draw-ellipse":
-            case "draw-frame":
-            case "draw-edge":
-            case "brush":
-                return r("draw", "crosshair");
-            case "draw-text":
-                return r("text", "text");
-            default:
-                break;
-        }
-        // 5. Idle hover in select mode — key off the hit-test target.
-        if (p) {
-            if (this.isOverLinkStartDot(p))
-                return r("link-start", "crosshair");
-            const t = this.hitTest(p);
-            switch (t.kind) {
-                case "handle":
-                case "group-handle":
-                    return resizeRole(t.handle);
-                case "edge-endpoint":
-                    return r("link-handle", "grab");
-                case "annotation":
-                    return r("annotation", "pointer");
-                default:
-                    return r("default", "default");
-            }
-        }
-        return r("default", "default");
-    }
-    /**
-     * Resolve a cursor role to a CSS `cursor` value: a host-registered custom
-     * image (via {@link setCursorOverride}) if present, else `fallbackKeyword`.
-     */
-    resolveCursor(role, fallbackKeyword) {
-        const spec = this.cursorOverrides.get(role);
-        return spec === undefined ? fallbackKeyword : cssCursor(spec, fallbackKeyword);
-    }
     /**
      * Register (or clear, with `null`) a custom cursor image for a state role.
      * The image is shown wherever `computeCursor` resolves that role; pass a
@@ -2963,31 +2666,12 @@ export class Editor {
         this.refreshCursor();
     }
     /**
-     * True when `p` is within the grab radius of one of the single selected
-     * element's link-start dots — used to show a `crosshair` (start a link).
-     * Mirrors the anchor-drag hit-test in pointer-binding so the cursor matches
-     * exactly where a press would begin a link.
+     * Read-only lookup of a host-registered cursor override. Used by the cursor
+     * module to resolve a role without exposing the mutable override map (mutate
+     * only via {@link setCursorOverride}, so `refreshCursor` stays in sync).
      */
-    isOverLinkStartDot(p) {
-        if (this.mode !== "select" || this._selection.size !== 1)
-            return false;
-        const id = [...this._selection][0];
-        if (id === undefined)
-            return false;
-        const shape = getElement(this._scene, id);
-        if (!shape)
-            return false;
-        const zoom = this._scene.viewport.zoom || 1;
-        const { worldPoints } = anchorOverlayPoints(shape, LINK_START_ANCHOR_OUTSET / zoom);
-        const grab = (ANCHOR_DOT_ACTIVE_RADIUS + this.anchorStartHitSlop) / zoom;
-        const grab2 = grab * grab;
-        for (const wp of worldPoints) {
-            const dx = wp.x - p.x;
-            const dy = wp.y - p.y;
-            if (dx * dx + dy * dy <= grab2)
-                return true;
-        }
-        return false;
+    getCursorOverride(role) {
+        return this.cursorOverrides.get(role);
     }
     /** True when the given layer exists and is marked `locked`. */
     isLayerLocked(layerId) {
@@ -3075,8 +2759,7 @@ export class Editor {
      * Topmost group ancestor of `shape` (walks parentId chain, returns
      * the highest `type === "group"` parent). `null` if `shape` has no
      * group ancestor. Used by drill-down: a double-click on a shape
-     * with a group ancestor enters that group. Body extracted to
-     * `./group-helpers.ts`.
+     * with a group ancestor enters that group.
      */
     topGroupAncestor(shape) {
         return topGroupAncestorHelper(this._scene, shape);
@@ -3103,7 +2786,6 @@ export class Editor {
      * practice, but the guard keeps the contract simple — "what you've
      * selected, you can see".
      */
-    // Body moved to `./editor/shape-filters.ts`.
     computeHiddenElements() {
         return computeHiddenElementsPure(this._scene);
     }
@@ -3133,7 +2815,7 @@ export class Editor {
         const el = getElement(this._scene, id);
         if (!el)
             return;
-        const isFrameEl = el.type === "frame";
+        const isFrameEl = isFrame(el);
         const members = [];
         for (const s of this._scene.elements.values()) {
             if (s.parentId === id || (isFrameEl && s.frameId === id))
@@ -3141,7 +2823,7 @@ export class Editor {
         }
         if (members.length === 0)
             return;
-        if (el.type === "group")
+        if (isGroup(el))
             this._enteredGroup = id;
         this.setSelection(members);
     }
@@ -3235,7 +2917,7 @@ export class Editor {
         const now = performance.now();
         const isDouble = now - this.lastClickAt < DOUBLE_CLICK_MS &&
             this.lastClickWorldPoint !== null &&
-            distanceTo(this.lastClickWorldPoint, worldPoint) <= DOUBLE_CLICK_TOLERANCE_PX;
+            vec2.distance(this.lastClickWorldPoint, worldPoint) <= DOUBLE_CLICK_TOLERANCE_PX;
         this.lastClickAt = now;
         this.lastClickWorldPoint = worldPoint;
         // Double-click the frame HEADER (label strip above the body) → rename.
@@ -3282,11 +2964,11 @@ export class Editor {
         if (isDouble &&
             (clickEffect.type === "SELECT_REPLACE" || clickEffect.type === "SELECT_TOGGLE")) {
             const raw = this.acceleratedElementAt(worldPoint);
-            if (raw?.type === "text") {
+            if (raw !== undefined && isText(raw)) {
                 this.beginTextEdit(raw.id);
                 return true;
             }
-            if (raw?.type === "frame") {
+            if (raw !== undefined && isFrame(raw)) {
                 this.beginFrameNameEdit(raw.id);
                 return true;
             }
@@ -3401,6 +3083,9 @@ export class Editor {
             case "RESIZE_SHAPE":
                 this.applyResize(emit.id, emit.handle, emit.delta, emit.originalBounds);
                 return;
+            case "ROTATE":
+                this.applyRotate(emit.deltaAngle);
+                return;
             case "CREATE_SHAPE":
                 this.applyCreate(emit.shapeType, emit.bounds);
                 return;
@@ -3447,7 +3132,6 @@ export class Editor {
      * Wrapped in a single gestureTx so per-move updates collapse
      * into one undo step.
      */
-    // Pure body in `./editor/applies/move.ts`.
     applyAnnotationMove(id, delta, origin) {
         const result = computeAnnotationMovePatch(this._scene, id, delta, origin);
         if (!result)
@@ -3483,13 +3167,14 @@ export class Editor {
     dispatchTemplateDrop(emit) {
         this.applyEmit(emit);
     }
-    // Pure body in `./editor/applies/move.ts`.
     applyMove(id, delta, originalBounds) {
         // Locked / layer-locked elements are selectable but don't move.
         const el = getElement(this._scene, id);
         if (el && !this.isElementManipulable(el))
             return;
-        const d = this.snapActive() ? snapMoveDelta(originalBounds, delta, this.snapSpacing()) : delta;
+        // Shift constrains the drag to one axis before snapping.
+        const moved = this.transformShiftKey ? constrainDeltaToAxis(delta) : delta;
+        const d = this.snapActive() ? snapMoveDelta(originalBounds, moved, this.snapSpacing()) : moved;
         const patch = computeElementMovePatch(this._scene, id, d, originalBounds);
         if (!patch)
             return;
@@ -3500,9 +3185,11 @@ export class Editor {
     applyGroupMove(delta) {
         if (!this.groupMoveOrigin)
             return;
+        // Shift constrains the drag to one axis before snapping.
+        const moved = this.transformShiftKey ? constrainDeltaToAxis(delta) : delta;
         const d = this.snapActive()
-            ? snapGroupDelta(this.groupMoveOrigin, delta, this.snapSpacing())
-            : delta;
+            ? snapGroupDelta(this.groupMoveOrigin, moved, this.snapSpacing())
+            : moved;
         const patches = computeGroupMovePatches(this._scene, this.groupMoveOrigin, d);
         for (const patch of patches) {
             this._scene = apply(this._scene, patch);
@@ -3520,7 +3207,6 @@ export class Editor {
         }
         this.notify();
     }
-    // Body moved to `./editor/viewport-helpers.ts`.
     computeViewportWorld() {
         return computeViewportWorldPure(this._scene);
     }
@@ -3589,125 +3275,16 @@ export class Editor {
         // repaint when the entered-group identity changes between frames.
         if (this.lastRenderedEnteredGroup !== this._enteredGroup)
             return null;
-        // Scene ref unchanged → nothing changed on main canvas → skip the
-        // whole pass via an empty off-screen rect that the dirty filter
-        // culls every shape against.
-        if (prev === next) {
-            return { x: -1e9, y: -1e9, width: 0, height: 0 };
-        }
-        let acc = null;
-        const add = (b) => {
-            acc = acc ? B.union(acc, b) : b;
-        };
-        // Track shapes that changed (added / removed / mutated). Links
-        // attached to any of these have stale rendered paths even when
-        // the edge object itself is reference-equal — the path resolves
-        // through the shape's new position, but the old path stays on
-        // screen as a "ghost" trail unless we explicitly invalidate it.
-        const changedElementIds = new Set();
-        for (const [id, shape] of next.elements) {
-            const old = prev.elements.get(id);
-            if (old === shape)
-                continue;
-            changedElementIds.add(id);
-            // Render bounds (not geometric) so overpaint — a frame's header
-            // strip, confetti particles — is cleared too, no ghost trail.
-            const afterBounds = getElementRenderBounds(shape);
-            const beforeBounds = old ? getElementRenderBounds(old) : null;
-            add(afterBounds);
-            if (beforeBounds)
-                add(beforeBounds);
-            // Stash for the tile-cache path — covers add + move via
-            // before/after pair; pure mutation re-uses the single
-            // afterBounds rect.
-            if (this.tileComposeFn !== null) {
-                this.tileDirtyElements.set(id, { before: beforeBounds, after: afterBounds });
-            }
-        }
-        for (const [id, shape] of prev.elements) {
-            if (!next.elements.has(id)) {
-                changedElementIds.add(id);
-                // Render bounds so a removed frame/confetti clears its overpaint.
-                const beforeBounds = getElementRenderBounds(shape);
-                add(beforeBounds);
-                if (this.tileComposeFn !== null) {
-                    this.tileDirtyElements.set(id, { before: beforeBounds, after: null });
-                }
-            }
-        }
-        const linkTouchesChangedElement = (edge) => {
-            for (const ep of [edge.from, edge.to]) {
-                if (ep.kind !== "point") {
-                    if (changedElementIds.has(ep.elementId))
-                        return true;
-                }
-            }
-            return false;
-        };
-        for (const [id, edge] of next.links) {
-            const old = prev.links.get(id);
-            // Refresh edge dirty-rect when: edge object changed, OR an
-            // endpoint references a shape that moved this frame (path is
-            // re-resolved every render but the old screen pixels persist).
-            if (old === edge && !linkTouchesChangedElement(edge))
-                continue;
-            const b = computeLinkWorldBounds(next, edge);
-            if (b)
-                add(b);
-            const oldLink = old ?? edge; // prev scene resolves with prev shapes for ghost-clear
-            const ob = computeLinkWorldBounds(prev, oldLink);
-            if (ob)
-                add(ob);
+        // Diff the two scenes for the dirty rect + tile-cache invalidation. The
+        // state-coupled guards above stay here; the pure scene diff lives in
+        // `computeSceneDirtyRect`.
+        const { world, tileDirty } = computeSceneDirtyRect(prev, next);
+        if (this.tileComposeFn !== null) {
+            for (const [id, entry] of tileDirty)
+                this.tileDirtyElements.set(id, entry);
         }
-        for (const [id, edge] of prev.links) {
-            if (!next.links.has(id)) {
-                const b = computeLinkWorldBounds(prev, edge);
-                if (b)
-                    add(b);
-            }
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- `acc` is mutated via the `add` closure; TS flow analysis can't see it and narrows to null
-        if (acc === null)
-            return { x: -1e9, y: -1e9, width: 0, height: 0 };
-        // Transitive expansion: any shape whose bounds intersect the
-        // current dirty rect must be repainted, AND its bounds added
-        // to the dirty rect so any shape ABOVE it that overlaps gets
-        // included too. Repeat until the set stabilises.
-        //
-        // Without this, dragging A through a B/C stack produces
-        // visual jitter: B intersects the dirty rect and gets
-        // repainted, but C — sitting above B and partially overlapping
-        // it — doesn't intersect the original dirty, so B re-emerges
-        // on top of where C should still be drawn. Z-order is correct
-        // in `getElementsInLayer`; the issue is missed shapes, not
-        // wrong order.
-        const visited = new Set();
-        let expanded = acc;
-        let grew = true;
-        while (grew) {
-            grew = false;
-            for (const shape of next.elements.values()) {
-                if (visited.has(shape.id))
-                    continue;
-                const bb = getElementWorldBounds(shape);
-                if (!B.intersects(bb, expanded))
-                    continue;
-                visited.add(shape.id);
-                const merged = B.union(expanded, bb);
-                if (merged.x !== expanded.x ||
-                    merged.y !== expanded.y ||
-                    merged.width !== expanded.width ||
-                    merged.height !== expanded.height) {
-                    expanded = merged;
-                    grew = true;
-                }
-            }
-        }
-        // Inflate by a couple pixels to cover anti-aliased stroke fuzz
-        // around the geometry edges.
-        return B.expand(expanded, 4);
+        return world;
     }
-    // Bodies moved to `./editor/viewport-helpers.ts`.
     combinedSelectionBounds() {
         let acc = combinedSelectionBoundsPure(this._scene, this._selection);
         // Selected links join the selection box (standard parity) — union in
@@ -3763,19 +3340,42 @@ export class Editor {
         // Multi-selection: lock when every selected shape is an image — they
         // must never be stretched out of ratio, only scaled together.
         for (const id of this._selection) {
-            if (getElement(this._scene, id)?.type !== "image")
+            const el = getElement(this._scene, id);
+            if (el === undefined || !isImage(el))
                 return false;
         }
         return true;
     }
-    // Pure body in `./editor/applies/resize.ts`.
+    /**
+     * Per-frame rotate during a grip drag: turn the press-time snapshot by
+     * `deltaAngle` about its pivot. Shift snaps the swept angle to
+     * {@link ROTATE_SNAP_RADIANS} steps. Recorded as gesture patches (one undo
+     * step on commit).
+     */
+    applyRotate(deltaAngle) {
+        const gesture = this.rotateGestureOrigin;
+        if (!gesture)
+            return;
+        const d = this.transformShiftKey
+            ? Math.round(deltaAngle / ROTATE_SNAP_RADIANS) * ROTATE_SNAP_RADIANS
+            : deltaAngle;
+        const patches = computeRotatePatches(this._scene, gesture.origin, gesture.pivot, d);
+        for (const patch of patches) {
+            this._scene = apply(this._scene, patch);
+            this.recordGesturePatch(patch);
+        }
+        this.notify();
+    }
     applyGroupResize(handle, delta, originalBounds) {
         if (!this.groupResizeOrigin)
             return;
         const d = this.snapActive()
             ? snapResizeDelta(originalBounds, handle, delta, this.snapSpacing())
             : delta;
-        const result = computeGroupResizePatches(this._scene, this.groupResizeOrigin, handle, d, originalBounds, this.selectionIsAspectLocked());
+        const result = computeGroupResizePatches(this._scene, this.groupResizeOrigin, handle, d, originalBounds, 
+        // Aspect-locked when the selection type demands it (images / groups) or
+        // the user holds Shift for this gesture.
+        this.selectionIsAspectLocked() || this.transformShiftKey, this.transformAltKey);
         this._scene = result.scene;
         for (const patch of result.patches)
             this.recordGesturePatch(patch);
@@ -3783,16 +3383,32 @@ export class Editor {
     }
     applyResize(id, handle, delta, originalBounds) {
         const shape = getElement(this._scene, id);
+        // Rotated shape: the axis-aligned world resize below would corrupt it
+        // (handles live on the tilted box). Resize in the shape's own frame,
+        // keeping the opposite corner fixed in world. Snapshot the pristine pose
+        // on the first tick so the closed-form never compounds. Grid-snap is
+        // skipped — snapping a tilted box to the world grid is ill-defined.
+        if (shape !== undefined && !isText(shape) && shape.rotation !== 0) {
+            if (this._resizeOriginElement?.id !== id)
+                this._resizeOriginElement = shape;
+            const result = computeRotatedElementResize(this._scene, this._resizeOriginElement, handle, delta, this.transformShiftKey, this.transformAltKey);
+            if (!result)
+                return;
+            this._scene = result.scene;
+            this.recordGesturePatch(result.patch);
+            this.notify();
+            return;
+        }
         const d = this.snapActive()
             ? snapResizeDelta(originalBounds, handle, delta, this.snapSpacing())
             : delta;
         // Text: aspect-locked font scaling. Snapshot the pristine shape on
         // the gesture's first tick so the scale base never compounds.
-        if (shape?.type === "text") {
+        if (shape !== undefined && isText(shape)) {
             if (this._resizeOriginElement?.id !== id) {
                 this._resizeOriginElement = shape;
             }
-            const result = computeTextResize(this._scene, this._resizeOriginElement, handle, d, originalBounds);
+            const result = computeTextResize(this._scene, this._resizeOriginElement, handle, d, originalBounds, this.transformAltKey);
             if (!result)
                 return;
             this._scene = result.scene;
@@ -3800,14 +3416,13 @@ export class Editor {
             this.notify();
             return;
         }
-        const result = computeElementResize(this._scene, id, handle, d, originalBounds, (s, raw, h) => this.clampContainerToChildren(s, raw, h));
+        const result = computeElementResize(this._scene, id, handle, d, originalBounds, (s, raw, h) => this.clampContainerToChildren(s, raw, h), this.transformShiftKey, this.transformAltKey);
         if (!result)
             return;
         this._scene = result.scene;
         this.recordGesturePatch(result.patch);
         this.notify();
     }
-    // Pure body in `./editor/applies/create.ts`.
     applyCreate(kind, bounds) {
         const id = newElementId(++this.nextId);
         const b = this.snapActive() ? snapCreateBounds(bounds, this.snapSpacing()) : bounds;
@@ -3847,8 +3462,7 @@ export class Editor {
     reconcileFrameMembership() {
         this._scene = reconcileFrameMembershipHelper(this._scene, this._history);
     }
-    // Pure body in `./editor/applies/create.ts`. Endpoint snapping
-    // stays here because it needs the snap engine.
+    // Endpoint snapping stays here because it needs the snap engine.
     applyCreateLink(emit) {
         const from = this.snapLinkEndpoint(emit.fromElement, emit.fromPoint);
         const to = this.snapLinkEndpoint(emit.toElement, emit.toPoint);
@@ -3887,35 +3501,11 @@ export class Editor {
             return;
         }
         const newId = newElementId(++this.nextId);
-        const order = orderForTop([...this._scene.elements.values()]
-            .filter((sh) => sh.layerId === this._activeLayerId)
-            .map((sh) => sh.order));
-        const built = factory({
-            id: newId,
-            layerId: this._activeLayerId,
-            position: pending.world,
-            order,
-        });
-        // Centre the element on the drop point regardless of how the factory
-        // anchored it at `position`.
-        const wb = getElementWorldBounds(built);
-        const shape = {
-            ...built,
-            position: {
-                x: built.position.x + (pending.world.x - (wb.x + wb.width / 2)),
-                y: built.position.y + (pending.world.y - (wb.y + wb.height / 2)),
-            },
-        };
+        const r = computeShapeAtLinkDrop(this._scene, this._activeLayerId, pending, newId, factory);
         const tx = this._history.transaction();
-        const added = addElement(this._scene, shape);
-        this._scene = added.scene;
-        tx.add(added.patch);
-        const upd = updateLink(this._scene, pending.linkId, (e) => ({
-            ...e,
-            [pending.side]: { kind: "floating", elementId: newId },
-        }));
-        this._scene = upd.scene;
-        tx.add(upd.patch);
+        this._scene = r.scene;
+        tx.add(r.addPatch);
+        tx.add(r.linkPatch);
         tx.commit();
         this.pendingLinkDropMenu = null;
         this._selection = Selection.single(newId);
@@ -3937,50 +3527,15 @@ export class Editor {
      * selection. Element + link land in one undo step.
      */
     createLinkedElementFromAnchor(fromElement, anchorName) {
-        const src = getElement(this._scene, fromElement);
-        if (!src)
-            return;
-        const anchor = { kind: "named", name: anchorName };
-        const normal = getAnchorOutwardNormal(src, anchor);
-        const bounds = getElementWorldBounds(src);
-        const srcCenter = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
-        // Same-size clone → centre-to-centre distance = the source's extent
-        // along the normal + the gap, leaving exactly
-        // ANCHOR_CLICK_NEW_ELEMENT_GAP between the facing edges. `extentAlong`
-        // resolves to width for a horizontal normal, height for a vertical one
-        // (link-start dots are the four edge midpoints).
-        const extentAlong = Math.abs(normal.x) * bounds.width + Math.abs(normal.y) * bounds.height;
-        const dist = extentAlong + ANCHOR_CLICK_NEW_ELEMENT_GAP;
-        const delta = { x: normal.x * dist, y: normal.y * dist };
         const newId = newElementId(++this.nextId);
-        const order = orderForTop([...this._scene.elements.values()]
-            .filter((sh) => sh.layerId === src.layerId)
-            .map((sh) => sh.order));
-        let clone = {
-            ...src,
-            id: newId,
-            position: { x: src.position.x + delta.x, y: src.position.y + delta.y },
-            order,
-        };
-        // Blank user text — the new element is a fresh same-kind shape, not a
-        // content copy (standard). Only `text` (TextElement) and `name`
-        // (FrameElement) carry user-entered text. Cast through `Element` because
-        // `exactOptionalPropertyTypes` rejects the bare object literal against
-        // the union (TS2375), even though the narrowed branch is sound.
-        if (clone.type === "text")
-            clone = { ...clone, text: "" };
-        else if (clone.type === "frame")
-            clone = { ...clone, name: "" };
-        const tx = this._history.transaction();
-        const added = addElement(this._scene, clone);
-        this._scene = added.scene;
-        tx.add(added.patch);
         const linkId = newLinkId(++this.nextId);
-        const placed = req(getElement(this._scene, newId));
-        const { ref: toRef } = findNearestAnchor(placed, srcCenter, snapExcludedAnchors(placed));
-        const linkResult = computeCreateLink(this._scene, { kind: "anchor", elementId: fromElement, anchor }, { kind: "anchor", elementId: newId, anchor: toRef }, linkId, this._activeLayerId);
-        this._scene = linkResult.scene;
-        tx.add(linkResult.patch);
+        const r = computeLinkedElementFromAnchor(this._scene, this._activeLayerId, fromElement, anchorName, newId, linkId);
+        if (!r)
+            return;
+        const tx = this._history.transaction();
+        this._scene = r.scene;
+        tx.add(r.addPatch);
+        tx.add(r.linkPatch);
         tx.commit();
         this._selection = Selection.single(newId);
         if (this._selectedLinks.size > 0)
@@ -3994,72 +3549,7 @@ export class Editor {
      * `createLinkedElementFromAnchor`.
      */
     previewClickCreate(fromElement, anchorName) {
-        const src = getElement(this._scene, fromElement);
-        if (!src)
-            return null;
-        const anchor = { kind: "named", name: anchorName };
-        const normal = getAnchorOutwardNormal(src, anchor);
-        const b = getElementWorldBounds(src);
-        const extentAlong = Math.abs(normal.x) * b.width + Math.abs(normal.y) * b.height;
-        const dist = extentAlong + ANCHOR_CLICK_NEW_ELEMENT_GAP;
-        const delta = { x: normal.x * dist, y: normal.y * dist };
-        const bounds = { x: b.x + delta.x, y: b.y + delta.y, width: b.width, height: b.height };
-        const fromWorld = getAnchorWorld(src, anchor);
-        // Facing edge of the ghost (toward the source) = its centre pulled back
-        // along the normal by half its extent.
-        const ghostCx = bounds.x + bounds.width / 2;
-        const ghostCy = bounds.y + bounds.height / 2;
-        const nearEdge = {
-            x: ghostCx - normal.x * (extentAlong / 2),
-            y: ghostCy - normal.y * (extentAlong / 2),
-        };
-        // The would-be element itself — a same-kind clone of the source shifted
-        // to the ghost bounds, with blank user text (mirrors
-        // `createLinkedElementFromAnchor`). The overlay renders THIS through the
-        // real renderer so the ghost looks like the actual shape (an ellipse
-        // ghosts as an ellipse), not a bounding rect. Throwaway id — never enters
-        // the real scene.
-        let element = {
-            ...src,
-            id: PREVIEW_GHOST_ELEMENT_ID,
-            position: { x: src.position.x + delta.x, y: src.position.y + delta.y },
-        };
-        if (element.type === "text")
-            element = { ...element, text: "" };
-        else if (element.type === "frame")
-            element = { ...element, name: "" };
-        // Build a throwaway scene holding the ghost element + the would-be link so
-        // the connector can be drawn through the REAL link renderer (same routing,
-        // arrowhead and style it'll have once created) — faded — instead of a
-        // dashed preview line. Mirrors the link build in
-        // `createLinkedElementFromAnchor` exactly. The `path` field stays for
-        // callers that just want the straight from→to segment.
-        const srcCenter = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
-        const withGhost = addElement(this._scene, element).scene;
-        const placed = req(getElement(withGhost, PREVIEW_GHOST_ELEMENT_ID));
-        const { ref: toRef } = findNearestAnchor(placed, srcCenter, snapExcludedAnchors(placed));
-        const linkResult = computeCreateLink(withGhost, { kind: "anchor", elementId: fromElement, anchor }, { kind: "anchor", elementId: PREVIEW_GHOST_ELEMENT_ID, anchor: toRef }, PREVIEW_GHOST_LINK_ID, this._activeLayerId);
-        let ghostScene = linkResult.scene;
-        const edge = req(getLink(ghostScene, PREVIEW_GHOST_LINK_ID));
-        if ((edge.routing ?? "straight") === "orthogonal") {
-            const routedPoints = routeElbowLink(ghostScene, edge);
-            ghostScene = updateLink(ghostScene, PREVIEW_GHOST_LINK_ID, (e) => ({
-                ...e,
-                routedPoints,
-            })).scene;
-        }
-        // Render only the ghost link (the shapes stay for endpoint resolution).
-        ghostScene = {
-            ...ghostScene,
-            links: new Map([[PREVIEW_GHOST_LINK_ID, req(getLink(ghostScene, PREVIEW_GHOST_LINK_ID))]]),
-        };
-        return {
-            bounds,
-            path: [fromWorld, nearEdge],
-            element,
-            ghostScene,
-            ghostLinkId: PREVIEW_GHOST_LINK_ID,
-        };
+        return previewClickCreatePure(this._scene, this._activeLayerId, fromElement, anchorName);
     }
     /**
      * Build an `LinkEndpoint` for a draw-edge / re-bind gesture. Runs the
@@ -4073,61 +3563,10 @@ export class Editor {
      * shapes when the user clearly aimed for this one).
      */
     snapLinkEndpoint(pressTargetElement, worldPoint) {
-        const result = this.snapEngine.snap({
-            scene: this._scene,
-            probe: worldPoint,
-            threshold: this.snapThreshold,
-            gesture: "draw-edge",
-        });
-        // Attach contract: dropping on a port dot → *fixed* anchor; dropping
-        // near an EDGE (not a dot) → *fixed* outline point (a ratio along the
-        // perimeter — survives move/resize); dropping on the body interior (no
-        // snap to a dot or edge) → *floating* against the whole shape, so the
-        // connection re-aims at the partner as either shape moves; dropping on
-        // empty canvas → a free point.
-        //
-        // Pick a candidate ON the pressed shape if there is one, otherwise the
-        // nearest overall. The "nearest overall" branch matters because the
-        // attach DOTS are drawn OUTSIDE the body — a release on a dot finds no
-        // element under it (hit-test = empty), so `pressTargetElement` is null,
-        // yet the snap engine still reports the dot's anchor within threshold.
-        // Binding it makes the endpoint enter PERPENDICULAR to that edge instead
-        // of staying a free point that aims at the partner (jumping between the
-        // four sides).
-        const pick = (kind) => {
-            if (pressTargetElement !== null) {
-                const onTarget = result.all.find((c) => c.kind === kind && c.metadata?.elementId === pressTargetElement);
-                if (onTarget)
-                    return onTarget;
-            }
-            return result.all.find((c) => c.kind === kind);
-        };
-        const boundFrom = (cand, want) => {
-            if (!cand)
-                return null;
-            const elId = cand.metadata?.elementId;
-            if (elId === undefined)
-                return null;
-            const shp = getElement(this._scene, elId);
-            if (!shp)
-                return null;
-            const ep = endpointFromSnap(elId, cand, shp);
-            return ep.kind === want ? ep : null;
-        };
-        const anchorEp = boundFrom(pick("anchor"), "anchor");
-        if (anchorEp)
-            return anchorEp;
-        const outlineEp = boundFrom(pick("outline"), "outline");
-        if (outlineEp)
-            return outlineEp;
-        // No dot/edge snap. Over a shape body → floating; else a free point.
-        if (pressTargetElement !== null && getElement(this._scene, pressTargetElement)) {
-            return { kind: "floating", elementId: pressTargetElement };
-        }
-        return { kind: "point", position: worldPoint };
+        return snapLinkEndpointPure(this._scene, this.snapEngine, this.snapThreshold, pressTargetElement, worldPoint);
     }
-    // Pure body in `./editor/applies/selection.ts`. The wrappers
-    // here own the side effects (`_selectedLink` clearing, notify).
+    // The wrappers here own the side effects (`_selectedLink`
+    // clearing, notify).
     applySelectByBounds(bounds, mode) {
         const next = selectByBoundsPure(this._scene, this._selection, (id) => this.isLayerLocked(id), bounds, mode);
         const nextLinks = selectLinksByBoundsLivePure(this._scene, mode === "add" ? this._selectedLinks : LinkSelection.EMPTY, (id) => this.isLayerLocked(id), bounds, mode);
@@ -4151,9 +3590,8 @@ export class Editor {
         this._selectedLinks = nextLinks;
         this._selection = next;
     }
-    // Pure body in `./editor/applies/edge.ts`. The wrapper here
-    // owns the side effects (history push, drag-state clearing,
-    // notify).
+    // The wrapper here owns the side effects (history push,
+    // drag-state clearing, notify).
     /**
      * Live endpoint-rebind move: re-point the dragged end to the cursor in the
      * scene (a free `point` endpoint), recorded in the gesture transaction so the
@@ -4277,7 +3715,7 @@ export class Editor {
             const collapse = WAYPOINT_COLLAPSE_RADIUS / (this._scene.viewport.zoom || 1);
             const a = path?.[drag.index];
             const b = path?.[drag.index + 2];
-            if (a && b && distanceToSegmentPt(wp, a, b) <= collapse) {
+            if (a && b && hitTest.distanceToSegment(wp, a, b) <= collapse) {
                 const wps = edge.waypoints.filter((_, i) => i !== drag.index);
                 const r = updateLink(this._scene, drag.linkId, (e) => ({ ...e, waypoints: wps }));
                 this._scene = r.scene;
@@ -4346,7 +3784,7 @@ export class Editor {
         const now = performance.now();
         const isDouble = now - this.lastHandleClickAt < DOUBLE_CLICK_MS &&
             this.lastHandleClickWorld !== null &&
-            distanceTo(this.lastHandleClickWorld, world) <= DOUBLE_CLICK_TOLERANCE_PX;
+            vec2.distance(this.lastHandleClickWorld, world) <= DOUBLE_CLICK_TOLERANCE_PX;
         this.lastHandleClickAt = now;
         this.lastHandleClickWorld = world;
         return isDouble;
@@ -4474,7 +3912,6 @@ export class Editor {
         this.hoveredLinkTarget = { elementId: shape.id, activeAnchor: activeName, outlinePoint, mode };
         this.notify();
     }
-    // Pure body in `./editor/applies/edge.ts`.
     applyLinkPreview(fromElement, fromPoint, toPoint) {
         const ep = computeLinkPreviewEndpoints(this._scene, fromElement, fromPoint, toPoint);
         // Match the preview to the connector that will be committed: when new
@@ -4491,9 +3928,7 @@ export class Editor {
         this.notify();
     }
     // Gesture lifecycle — recordGesturePatch / commitGesture /
-    // cancelGesture / finalizeOpenGestureTx / maybeRevertModeAfterCreate
-    // live in `./editor/gesture-tx.ts`. The thin instance methods below
-    // preserve the original call sites.
+    // cancelGesture / finalizeOpenGestureTx / maybeRevertModeAfterCreate.
     recordGesturePatch(patch) {
         // Snapshot the pre-gesture scene the moment the transaction opens, so a
         // later cancel/Escape can restore it (the history tx only records undo data,
@@ -4505,6 +3940,7 @@ export class Editor {
     }
     commitGesture() {
         this._resizeOriginElement = null;
+        this.rotateGestureOrigin = null;
         this.gestures.commit();
         this.gestureStartScene = null;
     }
@@ -4525,9 +3961,9 @@ export class Editor {
      * - Cycles (a container inside its own descendant) are prevented by the
      *   `containerHover` pipeline above — the exclude set rules them out.
      */
-    // Pure body in `./editor/container-ops.ts`. Editor exposes a
-    // small `ContainerOpsRef` bridge so the module can mutate scene
-    // + push patches into the running gesture transaction.
+    // Editor exposes a small `ContainerOpsRef` bridge so the pure
+    // helper can mutate scene + push patches into the running gesture
+    // transaction.
     applyContainerDrop(worldPoint) {
         applyContainerDropPure(this.containerOpsRef, worldPoint);
     }
@@ -4535,7 +3971,6 @@ export class Editor {
     maybeGrowContainer(containerId, childId) {
         maybeGrowContainerPure(this.containerOpsRef, containerId, childId);
     }
-    // Pure body in `./editor/container-ops.ts`.
     clampContainerToChildren(shape, raw, handle) {
         return clampContainerToChildrenPure(this._scene, shape, raw, handle);
     }
@@ -4548,9 +3983,9 @@ export class Editor {
         this.gestureTx ??= this._history.transaction();
         return this.gestureTx;
     }
-    // Body moved to `./editor/gesture-tx.ts`.
     cancelGesture() {
         this._resizeOriginElement = null;
+        this.rotateGestureOrigin = null;
         this.gestures.cancel();
         // Roll the scene back to the pre-gesture snapshot — cancelling the history
         // transaction alone leaves the live drag mutations in `_scene`.
@@ -4642,9 +4077,8 @@ export class Editor {
     /**
      * Typed event surface — subscribe to a specific slice (`mode`,
      * `selection`, `scene`, `history`, `viewport`) or the umbrella
-     * `change`. Replaces ad-hoc selectors over the coarse `subscribe()`
-     * for callers that only care about one dimension. The legacy
-     * `subscribe()` still works and fires in lock-step.
+     * `change`. For callers that only care about one dimension;
+     * `subscribe()` fires in lock-step with these.
      */
     on(event, fn) {
         // Cast through `never`: TS can't prove that EditorEvents[K]
@@ -4683,33 +4117,6 @@ export class Editor {
      * between frames the A* route is reused — see `rerouteElbows`.
      */
     elbowRouteSig = new Map();
-    elbowSignature(edge) {
-        const part = (ep) => {
-            if (ep.kind === "point")
-                return `p:${ep.position.x},${ep.position.y}`;
-            const s = getElement(this._scene, ep.elementId);
-            const b = s ? getElementWorldBounds(s) : null;
-            const ref = ep.kind === "anchor"
-                ? JSON.stringify(ep.anchor)
-                : ep.kind === "outline"
-                    ? `o:${ep.ratio}`
-                    : "f";
-            return `${ep.kind}:${ep.elementId}:${ref}:${b ? `${b.x},${b.y},${b.width},${b.height}` : "x"}`;
-        };
-        const base = `${part(edge.from)}|${part(edge.to)}|${JSON.stringify(edge.fixedSegments ?? null)}`;
-        // Avoid-obstacles links depend on EVERY shape's geometry, so their route
-        // must invalidate when any obstacle moves — fold a digest of all element
-        // bboxes into the signature. Only paid by links that opt in.
-        if (edge.avoidObstacles === true) {
-            let digest = "|avoid:";
-            for (const el of this._scene.elements.values()) {
-                const bb = getElementWorldBounds(el);
-                digest += `${el.id},${bb.x},${bb.y},${bb.width},${bb.height};`;
-            }
-            return base + digest;
-        }
-        return base;
-    }
     /**
      * Choke-point reroute (standard model): recompute `routedPoints` for
      * every orthogonal link whose inputs changed since the last pass, and
@@ -4722,7 +4129,7 @@ export class Editor {
         for (const [id, edge] of this._scene.links) {
             if ((edge.routing ?? "straight") !== "orthogonal")
                 continue;
-            const sig = this.elbowSignature(edge);
+            const sig = elbowSignature(this._scene, edge);
             if (this.elbowRouteSig.get(id) === sig)
                 continue;
             this.elbowRouteSig.set(id, sig);
@@ -4731,32 +4138,19 @@ export class Editor {
         }
         this._scene = next;
     }
-    // Pure body in `./editor/render-orchestrator.ts` (~130 lines).
     render() {
         this.rerouteElbows();
         // Feed the renderer's animation clock our per-shape playback state
         // so paused / reduced-motion GIFs freeze and resumed ones continue
         // from the right frame. Set immediately before the synchronous
         // render pass (the shape-renderer has no options channel).
-        setAnimationClock((shape) => this.playbackClock(shape.id));
+        setAnimationClock((shape) => this.gifPlayback.clock(shape.id));
         renderEditor(this);
         // Present AFTER the paint, on the same tick — deferred-submission
         // surfaces (WebGL2 / OffscreenCanvas) would otherwise lag one frame.
         this.onAfterRender?.();
     }
 }
-/**
- * Throwaway id for the transient click-create ghost preview element built by
- * `previewClickCreate`. Never enters the scene / history — it lives only for
- * the duration of one overlay paint, so any stable constant is fine.
- */
-const PREVIEW_GHOST_ELEMENT_ID = "__ghost-preview__";
-/** Throwaway link id for the click-create ghost preview. See above. */
-const PREVIEW_GHOST_LINK_ID = "__ghost-preview-link__";
-const distanceTo = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
-// `coverageRatio` moved to `./editor/container-ops.ts`.
-// `hasWidthHeight` moved to `./editor/shape-traits.ts` for shared
-// use by container-ops and the future applies/resize module.
 /**
  * Type guard — `true` when the value already implements the
  * `HistoryProvider` surface. Used to decide between "host supplied
@@ -4772,37 +4166,5 @@ const isHistoryProvider = (value) => {
         typeof value.redo === "function" &&
         typeof value.transaction === "function");
 };
-// `describeNudge` moved to `./editor/public/selection-ops.ts`.
 /** Distance from point `p` to the finite segment `a`–`b` (world space). */
-function distanceToSegmentPt(p, a, b) {
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const lenSq = dx * dx + dy * dy;
-    if (lenSq === 0)
-        return Math.hypot(p.x - a.x, p.y - a.y);
-    let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq;
-    t = Math.max(0, Math.min(1, t));
-    return Math.hypot(p.x - (a.x + dx * t), p.y - (a.y + dy * t));
-}
-/**
- * Convert a snap candidate into an `LinkEndpoint`. Anchor snap → named
- * anchor ref; outline snap → outline ref with the sampled ratio. Falls
- * back to a free point if the metadata isn't recognised.
- */
-const endpointFromSnap = (elementId, candidate, shape) => {
-    if (candidate.kind === "anchor") {
-        const ref = candidate.metadata?.ref;
-        if (ref)
-            return { kind: "anchor", elementId, anchor: ref };
-    }
-    if (candidate.kind === "outline" && typeof candidate.metadata?.ratio === "number") {
-        return { kind: "outline", elementId, ratio: candidate.metadata.ratio };
-    }
-    // Defensive fallback — should not happen with built-in contributors.
-    void shape;
-    return { kind: "point", position: candidate.snapped };
-};
-// `resizeFromHandle`, `applyResizeConstraints`, the four handle-
-// quadrant predicates moved to `./editor/resize-helpers.ts` so
-// they're shared between applies/resize and the container clamp.
 //# sourceMappingURL=editor.js.map