@oh-just-another/state 0.62.0 → 0.64.0

package/dist/editor.js

@@ -1,23 +1,24 @@
 import { createActor } from "xstate";
 import { createEmitter } from "@oh-just-another/events";
 import { elementId as castElementId } from "@oh-just-another/types";
-import { addElement, getLinkCurvePoints, linkLabelAnchor, addLink, endpointElementId, anchorSnapper, apply, buildSpatialIndex, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, getElementLocalBounds, localToWorld, worldToLocal, isFrame, isGroup, isText, isImage, isBrush, brushBodyColor, getElementWorldBounds, setTextMeasurer, getScreenToWorld, gridSnapper, outlineSnapper, SnapEngine, invert, updateLink, updateElement, isAnchorRef, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
-import { layerId as castLayerId, } from "@oh-just-another/types";
-import { bounds as B, matrix, vec2 } from "@oh-just-another/math";
+import { addElement, getLinkCurvePoints, linkLabelAnchor, addLink, endpointElementId, anchorSnapper, apply, buildSpatialIndex, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, getElementLocalBounds, localToWorld, worldToLocal, isFrame, isGroup, isText, isImage, isBrush, brushBodyColor, canCarryLabel, isSticky, isEmoji, getBinaryFile, paragraphAt, paragraphCount, paragraphRangeForOffsets, normalizeParagraphs, getElementWorldBounds, setTextMeasurer, getScreenToWorld, gridSnapper, outlineSnapper, SnapEngine, invert, updateLink, updateElement, isAnchorRef, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
+import { fileId as castFileId, layerId as castLayerId, linkId as castLinkId, } from "@oh-just-another/types";
+import { bounds as B, matrix } from "@oh-just-another/math";
 import { onAnimationContentReady, setActiveRasterizer, setActiveTextShaper, ElementCache, } from "@oh-just-another/renderer-core";
 import { History, } from "@oh-just-another/history";
 import { DEFAULT_LINK_ROUTING } from "./constants.js";
-import { FileDropRegistry } from "./file-drop.js";
-import { imageFileDropHandler, videoFileDropHandler } from "./built-in-handlers.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, TOUCH_ANCHOR_START_HIT_SLOP, TOUCH_ANCHOR_DOT_CLICK_RADIUS, DOUBLE_CLICK_MS, DOUBLE_CLICK_TOLERANCE_PX, WHEEL_ZOOM_STEP, ROTATE_SNAP_RADIANS, CROP_HANDLE_HIT_RADIUS, FLOWCHART_MAX_SIBLINGS, ERASER_TRAIL_TTL_MS, } from "./constants.js";
-import { HANDLE_HIT_SLOP } from "./handle.js";
-import { req } from "./util.js";
-import { interactionMachine, } from "./machine.js";
-import { DEFAULT_MODE } from "./modes.js";
+import { FileDropRegistry, } from "./features/file-drop.js";
+import { imageFileDropHandler, videoFileDropHandler, createHiddenLoopingVideo, } from "./features/built-in-handlers.js";
+import { insertSceneFragment } from "./features/insert-scene.js";
+import { computeDimElements as computeDimElementsHelper, isDescendantOfGroup as isDescendantOfGroupHelper, pickDrillTarget as pickDrillTargetHelper, promoteToGroupRoot as promoteToGroupRootHelper, topGroupAncestor as topGroupAncestorHelper, } from "./helpers/group-helpers.js";
+import { assignFrameMembers as assignFrameMembersHelper, nextFrameName as nextFrameNameHelper, reconcileFrameMembership as reconcileFrameMembershipHelper, } from "./helpers/frame-helpers.js";
+import { AutoCompactScheduler } from "./helpers/auto-compact.js";
+import { AutoLayoutScheduler } from "./helpers/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, TOUCH_ANCHOR_START_HIT_SLOP, TOUCH_ANCHOR_DOT_CLICK_RADIUS, WHEEL_ZOOM_STEP, ROTATE_SNAP_RADIANS, CROP_HANDLE_HIT_RADIUS, FLOWCHART_MAX_SIBLINGS, ERASER_TRAIL_TTL_MS, MAX_LIST_INDENT, IMAGE_ASPECT_PRESETS, LINK_DRAW_PRESETS, OBJECT_SNAP_MAX_CANDIDATES, OBJECT_SNAP_MIN_SIZE_PX, OBJECT_SNAP_THRESHOLD_PX, SIZE_SUGGEST_THRESHOLD_PX, DEFAULT_EDITOR_PREFERENCES, } from "./constants.js";
+import { HANDLE_HIT_SLOP } from "./interaction/handle.js";
+import { req } from "./helpers/util.js";
+import { interactionMachine, } from "./interaction/machine.js";
+import { DEFAULT_MODE } from "./interaction/modes.js";
 import { createEventCache, fanOutEvents, primeEventCache, } from "./editor/event-fanout.js";
 import { AnimationController } from "./editor/animation.js";
 import { GestureController } from "./editor/gesture-tx.js";
@@ -38,7 +39,7 @@ import { coveredLength } from "./editor/public/stroke-eraser-coverage.js";
 import { beginLaserStroke as beginLaserStrokePure, extendLaserStroke as extendLaserStrokePure, pruneLaserStrokes, } from "./editor/public/laser.js";
 import { copySelected as copySelectedPure, pasteFromClipboard, selectionFromPasted, } from "./editor/public/clipboard.js";
 import { computeCreateLayer, computeMoveSelectionToLayer, computeRemoveLayer, computeRenameLayer, computeToggleLayerLock, computeToggleLayerVisibility, newLayerId, } from "./editor/public/layers.js";
-import { computePan, computeResetZoom, computeSetGrid, computeViewportResize, computeZoomAt, computeZoomToFit, computeZoomToBounds, computeRevealBounds, } from "./editor/public/zoom-pan.js";
+import { computePan, clampZoom, computeResetZoom, computeSetGrid, computeViewportResize, computeZoomAt, computeZoomToFit, computeZoomToBounds, computeRevealBounds, computeRevealNearest, } from "./editor/public/zoom-pan.js";
 import { computeAddAnnotation, computeAddComment, computeRemoveAnnotation, computeRemoveComment, computeToggleAnnotationResolved, hitAnnotation as hitAnnotationPure, } from "./editor/public/annotations.js";
 import { frameHeaderAt as computeFrameHeaderAt, computeFrameNameCommit, } from "./editor/public/frame-name.js";
 import { computeCursor } from "./editor/public/cursor.js";
@@ -47,7 +48,8 @@ import { computeArrangeAsGrid, computeArrangeAsStack, computeGroupSelected, comp
 import { buildImageElement, computeAddBinaryFile, hasAnimatedElement, } from "./editor/public/image-insert.js";
 import { computeDeleteSelection, computeDuplicateSelection, computeMoveSelectionBy, computeSelectAll, computeSelectAllLinks, computeAdjustFontSize, computeApplyTextRunStyle, 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 { beginPlacementState, buildElementAtCursor, buildStickyElementAt, buildTextElementAt, computePlacementCancel, computePlacementContainerDrop, computePlacementUpdate, computeLinkedElementFromAnchor, computeDuplicateInPlace, computeShapeAtLinkDrop, newElementIdAtCursor, previewClickCreate as previewClickCreatePure, } from "./editor/public/placement.js";
+import { withLabel } from "./editor/public/label-seed.js";
 import { computeConvertType, computeCommitImageCrop, computeCropBodyPan, computeCropHandleDrag, computeSpawnConnectedNode, computeSpawnConnectedNodes, cropFullImageLocalRect, cropHandleWorldPoints, CROP_HANDLES, FULL_CROP, pickColorAt, } from "./editor/public/tool-ops.js";
 import { renderEditor, } from "./editor/render-orchestrator.js";
 import { TextEditController } from "./editor/text-edit.js";
@@ -61,9 +63,10 @@ import { computeAlignPatches, computeDistributePatches, computeFlipPatches, comp
 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";
+import { snapMoveDeltaToObjects, snapResizeDeltaToObjects, } from "./editor/applies/object-snap.js";
+import {} from "./render/overlay.js";
+import * as Selection from "./selection/selection.js";
+import * as LinkSelection from "./selection/link-selection.js";
 /**
  * Machine-emit types dropped while the editor is in read-only mode — every
  * scene mutation the interaction machine can produce. Selection / lasso /
@@ -86,6 +89,24 @@ const READ_ONLY_BLOCKED_EMITS = new Set([
 const EMPTY_ELEMENT_SET = Object.freeze(new Set());
 /** Monotonic wall-clock in ms, matching the domain used by the overlay fade. */
 const nowMs = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+/** `rotation` is a multiple of 90° (within float noise) — the only poses that snap. */
+const isRightAngle = (rotation) => {
+    const q = rotation / (Math.PI / 2);
+    return Math.abs(q - Math.round(q)) < 1e-6;
+};
+/**
+ * Camera at the scene's saved start view (pan + zoom), or the scene itself
+ * when no start view is set or the camera is already there.
+ */
+const withStartViewApplied = (scene) => {
+    const sv = scene.viewport.startView;
+    if (sv === undefined)
+        return scene;
+    const { pan, zoom } = scene.viewport;
+    if (pan.x === sv.pan.x && pan.y === sv.pan.y && zoom === sv.zoom)
+        return scene;
+    return { ...scene, viewport: { ...scene.viewport, pan: { ...sv.pan }, zoom: sv.zoom } };
+};
 export class Editor {
     host;
     mainTarget;
@@ -397,6 +418,14 @@ export class Editor {
      * this lets that active→inactive transition force one full repaint.
      */
     lastRenderedEraseActive = false;
+    /**
+     * Last-painted hovered sticky — paired with `lastRenderedScene` like
+     * {@link lastRenderedEnteredGroup}. Hovering changes only chrome (the
+     * "+" add-reaction button), not the scene, so the dirty-rect diff is
+     * empty and the button would never appear / disappear without this
+     * forcing a full repaint on hover transitions.
+     */
+    lastRenderedHoveredSticky = null;
     /**
      * Set whenever an eraser move actually CHANGES the marked / cut set (a new
      * shape marked, un-marked, or a brush point cut). Gates the forced full
@@ -593,6 +622,13 @@ export class Editor {
     set panGesture(v) {
         this.interaction.panGesture = v;
     }
+    /** Element being placed by a library drag, or null (see `beginPlacement`). */
+    get placementId() {
+        return this.interaction.placementId;
+    }
+    set placementId(v) {
+        this.interaction.placementId = v;
+    }
     /**
      * Set on a right-click pointerdown so the upcoming native
      * `contextmenu` event can be unconditionally preventDefault'ed
@@ -670,7 +706,8 @@ export class Editor {
         this.overlayTarget = options.overlayTarget;
         this.backgroundTarget = options.backgroundTarget ?? null;
         this.onAfterRender = options.onAfterRender ?? null;
-        this._scene = options.initialScene;
+        this._preferences = { ...DEFAULT_EDITOR_PREFERENCES, ...options.preferences };
+        this._scene = withStartViewApplied(options.initialScene);
         this._history = isHistoryProvider(options.history)
             ? options.history
             : new History(options.history ?? {});
@@ -842,8 +879,7 @@ export class Editor {
         // Long-press controller — fired on touch-hold; fans out to
         // host-registered listeners (mobile alt to right-click).
         this.longPress = new LongPressController((p) => this.screenToWorld(p), (payload) => {
-            for (const fn of this.longPressListeners)
-                fn(payload);
+            this.fireContextPress(payload);
         });
         // Pinch gesture controller — two-finger pan + zoom. Hooks into
         // the editor's own zoomAt / panBy / screenToWorld.
@@ -1230,6 +1266,88 @@ export class Editor {
     toggleGrid() {
         this.setGrid({ enabled: !this.gridEnabled });
     }
+    _preferences;
+    /** Per-user preferences — see {@link EditorPreferences}. */
+    get preferences() {
+        return this._preferences;
+    }
+    /**
+     * Merge `patch` over the current preferences. Not part of the document
+     * and never recorded in history; hosts persist the result per browser.
+     * Subscribers are notified (the object identity changes only when a
+     * value actually changed).
+     */
+    setPreferences(patch) {
+        const next = { ...this._preferences, ...patch };
+        if (next.snapObjects === this._preferences.snapObjects &&
+            next.showObjectSize === this._preferences.showObjectSize &&
+            next.suggestObjectSize === this._preferences.suggestObjectSize &&
+            next.wheelMode === this._preferences.wheelMode) {
+            return;
+        }
+        this._preferences = next;
+        this.notify();
+    }
+    /**
+     * Clear the `locked` flag on every locked element (one undo step).
+     * The canvas menu's "Unlock all"; no-op when nothing is locked.
+     */
+    unlockAll() {
+        if (this.readOnly)
+            return;
+        const ids = [...this._scene.elements.values()]
+            .filter((s) => s.locked === true)
+            .map((s) => s.id);
+        if (ids.length === 0)
+            return;
+        const tx = this._history.transaction();
+        for (const id of ids) {
+            const r = updateElement(this._scene, id, (s) => {
+                const copy = { ...s };
+                delete copy.locked;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+        }
+        tx.commit();
+        this.notify();
+        this.announce(`Unlocked ${String(ids.length)} element(s)`);
+    }
+    /** The document's saved start view, or `null` when none is set. */
+    get startView() {
+        return this._scene.viewport.startView ?? null;
+    }
+    /**
+     * Save the current camera (pan + zoom) as the document's start view —
+     * where the document opens and where {@link goToStartView} jumps.
+     * Persists in the viewport (exported with the scene), not in history.
+     */
+    setCurrentViewAsStart() {
+        const { pan, zoom } = this._scene.viewport;
+        this._scene = {
+            ...this._scene,
+            viewport: { ...this._scene.viewport, startView: { pan: { ...pan }, zoom } },
+        };
+        this.notify();
+    }
+    /** Forget the saved start view. No-op when none is set. */
+    clearStartView() {
+        if (this._scene.viewport.startView === undefined)
+            return;
+        const { startView: _dropped, ...viewport } = this._scene.viewport;
+        void _dropped;
+        this._scene = { ...this._scene, viewport };
+        this.notify();
+    }
+    /** Move the camera to the saved start view. No-op when none is set. */
+    goToStartView() {
+        const next = withStartViewApplied(this._scene);
+        if (next === this._scene)
+            return;
+        this._scene = next;
+        this.notify();
+    }
     /** All currently-selected link (connector) ids. */
     get selectedLinks() {
         return this._selectedLinks;
@@ -1275,6 +1393,10 @@ export class Editor {
     unregisterFileDropHandler(id) {
         this.fileDropRegistry.unregister(id);
     }
+    /** Registered file-drop handlers, in dispatch order — the drop overlay lists the labelled ones. */
+    getFileDropHandlers() {
+        return this.fileDropRegistry.getAll();
+    }
     /**
      * Dispatch a dropped file (or pasted file from clipboard) into
      * the registered handlers. Returns `true` when a handler accepted
@@ -1307,10 +1429,46 @@ export class Editor {
      * toolbar buttons and hotkeys reach it through the action registry.
      * Records the outgoing tool in `activeTool.lastActiveTool`.
      */
+    /**
+     * Shape kind the next rubber-band draw creates while `draw-rect` is
+     * armed (the "Shapes and lines" flyout arms diamond / triangle through
+     * the same mode). Reset to "rect" on every tool switch so hotkeys and
+     * plain toolbar buttons keep their stock behaviour.
+     */
+    _drawShapeKind = "rect";
+    get drawShapeKind() {
+        return this._drawShapeKind;
+    }
+    /**
+     * Connector preset for NEW links drawn in `draw-edge` mode (see
+     * `LINK_DRAW_PRESETS`); `null` = stock defaults. Reset on tool switch.
+     */
+    _linkDrawPreset = null;
+    get linkDrawPreset() {
+        return this._linkDrawPreset;
+    }
+    /** Arm the shape-drawing tool for `kind` (the flyout's shape rows). */
+    armShapeTool(kind) {
+        this.setActiveTool(kind === "ellipse" ? "draw-ellipse" : "draw-rect");
+        this._drawShapeKind = kind;
+        // `setActiveTool` already notified with the reset variant — notify again
+        // so subscribers (the flyout's active row) see the armed kind.
+        this.notify();
+    }
+    /** Arm the connector tool with a line preset (the flyout's line rows). */
+    armLineTool(preset) {
+        this.setActiveTool("draw-edge");
+        this._linkDrawPreset = preset;
+        this.notify();
+    }
     setActiveTool(mode) {
         const prev = this.actor.getSnapshot().context.mode;
         if (prev !== mode)
             this._lastActiveTool = prev;
+        // Flyout-armed variants reset on every switch — `armShapeTool` /
+        // `armLineTool` re-set them right after when they are the caller.
+        this._drawShapeKind = "rect";
+        this._linkDrawPreset = null;
         // A tool switch cancels any armed colour-picker pipette.
         this.pendingEyedropperPick = null;
         // Switching tools commits any in-flight text edit (standard: leaving the
@@ -1326,6 +1484,18 @@ export class Editor {
         if (mode !== "draw-edge" && this.hoveredLinkTarget !== null) {
             this.hoveredLinkTarget = null;
         }
+        // Creation / ink / laser tools work on a blank slate: the selection (and
+        // with it the selection toolbar) goes away. `select` and `hand` keep it —
+        // panning is not editing — and `crop` is entered WITH the image selected.
+        if (mode !== "select" && mode !== "hand" && mode !== "crop") {
+            this._selection = Selection.EMPTY;
+            this._selectedLinks = LinkSelection.EMPTY;
+        }
+        // Leaving crop for any other tool abandons the pending crop box (the
+        // commit / cancel paths route through here with the session already
+        // cleared), so no crop frame lingers over the image.
+        if (prev === "crop" && mode !== "crop")
+            this.cropSession = null;
         this.actor.send({ type: "SET_MODE", mode });
         // Cursor affordance follows the new mode (hand → grab, draw tools →
         // crosshair, etc.) — recompute through the single chokepoint.
@@ -1459,6 +1629,21 @@ export class Editor {
             this.scheduleRender();
         }
     }
+    /**
+     * Sticky under the idle cursor (its render bounds, so the reaction row
+     * below the card counts too) — drives the canvas-drawn hover-only "+"
+     * add-reaction button. Set by the pointer-move path; `null` clears.
+     */
+    _hoveredStickyId = null;
+    get hoveredStickyId() {
+        return this._hoveredStickyId;
+    }
+    setHoveredSticky(id) {
+        if (this._hoveredStickyId === id)
+            return;
+        this._hoveredStickyId = id;
+        this.notify();
+    }
     /** True when the shape's GIF is paused (drives the overlay badge). */
     isPlaybackPaused(id) {
         return this.gifPlayback.isPaused(id);
@@ -1502,6 +1687,7 @@ export class Editor {
         const initial = add(this._scene);
         this._scene = initial.scene;
         this._selection = Selection.single(shape.id);
+        this.placementId = shape.id;
         this.notify();
         const state = { ...initialState };
         return {
@@ -1519,6 +1705,7 @@ export class Editor {
                 }
                 tx.add({ kind: "element", id: shape.id, before: null, after: state.current });
                 tx.commit();
+                this.placementId = null;
                 // Notify is mandatory here. The dragover snapshots carried the
                 // placement preview WITHOUT `parentId`, so the
                 // AutoLayoutScheduler's `signatureFor(parent)` did not include the
@@ -1532,6 +1719,7 @@ export class Editor {
                 const { scene } = computePlacementCancel(this._scene, shape.id);
                 this._scene = scene;
                 tx.cancel();
+                this.placementId = null;
                 this._selection = Selection.EMPTY;
                 this.notify();
             },
@@ -1849,6 +2037,25 @@ export class Editor {
         this.beginTextEdit(id);
         return id;
     }
+    /**
+     * Drop a default sticky note centred on `worldPoint`, select it and open
+     * its inline editor (the canvas menu's "Add sticky note"). One undo step.
+     */
+    createStickyAt(worldPoint) {
+        if (this.readOnly)
+            return null;
+        const id = newElementIdAtCursor(++this.nextId);
+        const shape = buildStickyElementAt(this._scene, worldPoint, this._activeLayerId, id);
+        const r = addElement(this._scene, shape);
+        this._scene = r.scene;
+        this._history.push(r.patch);
+        this._selection = Selection.single(id);
+        this._selectedLinks = LinkSelection.EMPTY;
+        this.notify();
+        this.announce(`Created sticky ${id}`);
+        this.beginTextEdit(id);
+        return id;
+    }
     /** Current brush paint settings (line colour, fill, opacity, width). */
     _brushSettings = DEFAULT_BRUSH_SETTINGS;
     get brushSettings() {
@@ -2377,6 +2584,31 @@ export class Editor {
         this.notify();
         this.announce(`Pasted ${result.newIds.length} shapes`);
     }
+    /**
+     * Insert a whole scene fragment (an imported diagram — elements, links,
+     * binary files) into the current scene, centred on `targetWorld` (default:
+     * the last pointer position, else the fragment stays where it is). Ids are
+     * remapped, everything lands on the active layer, one undo step; the new
+     * elements become the selection. Returns their ids.
+     */
+    insertScene(fragment, targetWorld) {
+        if (this.readOnly)
+            return [];
+        this.finalizeOpenGestureTx();
+        const target = targetWorld ?? this.lastPointerWorld;
+        const result = insertSceneFragment(this._scene, this._history, fragment, target ?? null, this._activeLayerId, () => castElementId(`shape-${String(++this.nextId)}-${Date.now().toString(36)}`), () => castLinkId(`link-${String(++this.nextId)}-${Date.now().toString(36)}`), () => castFileId(`file-${String(++this.nextId)}-${Date.now().toString(36)}`));
+        this._scene = result.scene;
+        this._selection = selectionFromPasted(result.newIds);
+        // Same as `loadScene`: rebuild live handles for the inserted media from
+        // `Scene.files` (importers hand images over as data URLs — persisted as
+        // files above — and a native fragment carries its own files).
+        animScene.rehydrateAnimatedImages(this);
+        void animScene.rehydrateStaticImages(this);
+        this.notify();
+        this.maybeAnimate();
+        this.announce(`Inserted ${String(result.newIds.length)} shapes`);
+        return result.newIds;
+    }
     /**
      * Merge `partial` into the `style` of every shape in `ids`. Useful
      * for the inspector / PropertyPanel: flipping `roundness`, swapping
@@ -2453,6 +2685,654 @@ export class Editor {
         this._history.push(result.patch);
         this.notify();
     }
+    /**
+     * Merge a partial text style into the embedded label's style on every
+     * shape in `ids` that carries a label. One undo step. The counterpart
+     * of `updateStyle` for shape labels (which must not collide with the
+     * shape body's own fill / stroke).
+     */
+    updateLabelStyle(ids, partial) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            // A labelable shape without a label yet gets one so the style sticks
+            // (create-on-write); non-labelable shapes are skipped.
+            if (shape === undefined || withLabel(shape).label === undefined)
+                continue;
+            const r = updateElement(this._scene, id, (raw) => {
+                const s = withLabel(raw);
+                return s.label === undefined
+                    ? s
+                    : { ...s, label: { ...s.label, style: { ...s.label.style, ...partial } } };
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Text-carrier routing for mixed selections: merge a partial text style
+     * into the element style of text elements and into the label style of
+     * labelable shapes (seeding the label when missing); other elements are
+     * skipped. One undo step. The selection toolbar writes through this so a
+     * shape + text selection shares one text-colour / decoration control
+     * instead of choosing between `updateStyle` and `updateLabelStyle`.
+     */
+    updateTextStyle(ids, partial) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (shape === undefined)
+                continue;
+            let r;
+            if (isText(shape)) {
+                r = updateElement(this._scene, id, (raw) => ({
+                    ...raw,
+                    style: { ...raw.style, ...partial },
+                }));
+            }
+            else if (withLabel(shape).label !== undefined) {
+                r = updateElement(this._scene, id, (raw) => {
+                    const l = withLabel(raw);
+                    return l.label === undefined
+                        ? l
+                        : { ...l, label: { ...l.label, style: { ...l.label.style, ...partial } } };
+                });
+            }
+            else {
+                continue;
+            }
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Merge font family / size into the embedded label. Picking an
+     * explicit `fontSize` also leaves auto-fit mode (reference behaviour —
+     * a concrete size wins over the automatic one). One undo step.
+     */
+    updateLabelProps(ids, partial) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (shape === undefined || withLabel(shape).label === undefined)
+                continue;
+            const r = updateElement(this._scene, id, (raw) => {
+                const s = withLabel(raw);
+                if (s.label === undefined)
+                    return s;
+                const label = { ...s.label, ...partial };
+                if (partial.fontSize !== undefined)
+                    delete label.autoFit;
+                return { ...s, label };
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /** Toggle auto-fit label sizing (sticky notes). One undo step. */
+    setLabelAutoFit(ids, on) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (shape === undefined || withLabel(shape).label === undefined)
+                continue;
+            const r = updateElement(this._scene, id, (raw) => {
+                const s = withLabel(raw);
+                if (s.label === undefined)
+                    return s;
+                const label = { ...s.label };
+                if (on)
+                    label.autoFit = true;
+                else
+                    delete label.autoFit;
+                return { ...s, label };
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Resize sticky notes to a square preset side (`STICKY_SIZE_PRESETS`).
+     * One undo step; non-sticky ids are skipped.
+     */
+    setStickySize(ids, side) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isSticky(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => ({ ...s, width: side, height: side }));
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Toggle the author-name strip on sticky notes. Turning it on fills a
+     * missing `authorName` from the editor's comment author (the local
+     * user). One undo step.
+     */
+    toggleStickyAuthor(ids) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isSticky(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const sticky = s;
+                const showAuthor = sticky.showAuthor !== true;
+                return {
+                    ...s,
+                    showAuthor,
+                    authorName: sticky.authorName ?? this.commentAuthor.name,
+                };
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /** Replace the tag list on sticky notes. One undo step. */
+    setStickyTags(ids, tags) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isSticky(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const copy = { ...s };
+                if (tags.length === 0)
+                    delete copy.tags;
+                else
+                    copy.tags = tags;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Toggle the local user's emoji reaction on a sticky note. A glyph the
+     * user has NOT reacted with gains their reaction (+1); one they
+     * already reacted with loses it (-1, removing the glyph at zero).
+     * Other users' reactions are never touched — so counters only grow
+     * through OTHER collaborators. Plain element data → syncs through the
+     * normal scene channel. One undo step.
+     */
+    toggleStickyReaction(id, glyph) {
+        if (this.readOnly)
+            return;
+        const shape = getElement(this._scene, id);
+        if (!shape || !isSticky(shape))
+            return;
+        const user = this.commentAuthor.id;
+        const r = updateElement(this._scene, id, (s) => {
+            const sticky = s;
+            const reactions = [...(sticky.reactions ?? [])];
+            const i = reactions.findIndex((x) => x.glyph === glyph);
+            const existing = i >= 0 ? reactions[i] : undefined;
+            // Pre-per-user scenes may carry `{glyph, count}` without `users` —
+            // treat those as nobody-having-reacted and rewrite on first toggle.
+            const existingUsers = existing?.users ?? [];
+            if (existing === undefined) {
+                reactions.push({ glyph, users: [user] });
+            }
+            else if (existingUsers.includes(user)) {
+                const users = existingUsers.filter((u) => u !== user);
+                if (users.length === 0)
+                    reactions.splice(i, 1);
+                else
+                    reactions[i] = { glyph, users };
+            }
+            else {
+                reactions[i] = { glyph, users: [...existingUsers, user] };
+            }
+            const copy = { ...s };
+            if (reactions.length === 0)
+                delete copy.reactions;
+            else
+                copy.reactions = reactions;
+            return copy;
+        });
+        this._scene = r.scene;
+        this._history.push(r.patch);
+        this.notify();
+    }
+    /** Replace an emoji element's glyph (the toolbar picker). One undo step. */
+    setEmojiGlyph(ids, glyph) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isEmoji(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => ({ ...s, glyph }));
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Resize a frame to one of the `FRAME_SIZE_PRESETS` (top-left corner
+     * stays put; members keep their absolute positions). One undo step.
+     */
+    applyFramePreset(id, preset) {
+        if (this.readOnly)
+            return;
+        const shape = getElement(this._scene, id);
+        if (!shape || !isFrame(shape))
+            return;
+        const r = updateElement(this._scene, id, (s) => ({
+            ...s,
+            width: preset.width,
+            height: preset.height,
+        }));
+        this._scene = r.scene;
+        this._history.push(r.patch);
+        this.notify();
+    }
+    /**
+     * Rename the binary file behind an image (the toolbar's file-name
+     * input). One undo step; no-op when the id is unknown or the name is
+     * unchanged.
+     */
+    renameBinaryFile(id, name) {
+        if (this.readOnly)
+            return;
+        const file = getBinaryFile(this._scene, id);
+        if (!file || file.name === name)
+            return;
+        const patch = { kind: "file", id, before: file, after: { ...file, name } };
+        this._scene = apply(this._scene, patch);
+        this._history.push(patch);
+        this.notify();
+    }
+    /** Set (or clear, with `null`) the accessible description on image shapes. */
+    setImageAlt(ids, alt) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isImage(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const copy = { ...s };
+                if (alt === null || alt === "")
+                    delete copy.alt;
+                else
+                    copy.alt = alt;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Set (or clear, with `null`) the shape mask on image elements. The
+     * mask clips the drawn box (renderer-side `RenderTarget.clip`);
+     * normalised coordinates make it survive resizes. One undo step.
+     */
+    setImageMask(ids, mask) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isImage(shape))
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const copy = { ...s };
+                if (mask === null)
+                    delete copy.mask;
+                else
+                    copy.mask = mask;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Apply an aspect preset from the mask picker to image elements.
+     * `"original"` clears crop AND mask and refits the box to the source's
+     * natural aspect; the ratio presets centre-crop the source to the
+     * target aspect and refit the box height (width kept), with `"circle"`
+     * additionally installing an ellipse mask on the square box. The
+     * source's natural aspect derives from the current box + crop (the box
+     * always displays the crop region undistorted), so no live image
+     * handle is needed. One undo step.
+     */
+    setImageAspectPreset(ids, preset) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const shape = getElement(this._scene, id);
+            if (!shape || !isImage(shape))
+                continue;
+            const crop = shape.crop ?? { x: 0, y: 0, width: 1, height: 1 };
+            const naturalAspect = shape.height > 0 && crop.width > 0
+                ? (shape.width / shape.height) * (crop.height / crop.width)
+                : 1;
+            const r = updateElement(this._scene, id, (s) => {
+                const copy = { ...s };
+                if (preset === "original") {
+                    delete copy.crop;
+                    delete copy.mask;
+                    if (naturalAspect > 0)
+                        copy.height = copy.width / naturalAspect;
+                    return copy;
+                }
+                const aspect = IMAGE_ASPECT_PRESETS[preset];
+                // Centred source crop with the target aspect: trim the longer axis.
+                if (naturalAspect > aspect) {
+                    const w = aspect / naturalAspect;
+                    copy.crop = { x: (1 - w) / 2, y: 0, width: w, height: 1 };
+                }
+                else {
+                    const h = naturalAspect / aspect;
+                    copy.crop = { x: 0, y: (1 - h) / 2, width: 1, height: h };
+                }
+                copy.height = copy.width / aspect;
+                if (preset === "circle")
+                    copy.mask = { kind: "ellipse" };
+                else
+                    delete copy.mask;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Swap a media shape's backing file for `blob` while keeping its
+     * position and width (height refits to the new aspect). Accepts static
+     * images, GIFs and videos — the shape's animation fields are rewritten
+     * to match the NEW media kind, and `crop` resets when the media kind
+     * changes (its pixel rect targeted the old content). Registers the new
+     * `BinaryFile`, points the shape at it, drops the stale live handle
+     * (`metadata.image`) and rebuilds handles for the new bytes. One undo
+     * step.
+     */
+    async replaceImageFile(id, blob, name) {
+        if (this.readOnly)
+            return;
+        const shape = getElement(this._scene, id);
+        if (!shape || !isImage(shape))
+            return;
+        const added = await computeAddBinaryFile(this._scene, blob, name, () => ++this.nextId);
+        const mime = blob.type;
+        const isVideo = mime.startsWith("video/") || /\.(mp4|webm|ogv|mov)$/i.test(name ?? "");
+        const isGif = !isVideo && (mime === "image/gif" || /\.gif$/i.test(name ?? ""));
+        const url = typeof URL !== "undefined" && typeof URL.createObjectURL === "function"
+            ? URL.createObjectURL(blob)
+            : null;
+        // The new media's aspect ratio replaces the old one: keep the shape's
+        // width, refit the height — otherwise a differently-proportioned file
+        // renders stretched into the old box. Videos measure through a hidden
+        // looping <video> (which then stays on as the live handle, same as the
+        // video drop handler); images/GIFs through createImageBitmap.
+        let refitHeight = null;
+        let videoHandle = null;
+        if (isVideo) {
+            if (typeof document !== "undefined" && url !== null) {
+                const video = createHiddenLoopingVideo(url);
+                await new Promise((resolve) => {
+                    video.onloadedmetadata = () => {
+                        resolve();
+                    };
+                    video.onerror = () => {
+                        resolve();
+                    };
+                });
+                if (video.videoWidth > 0) {
+                    refitHeight = (shape.width * video.videoHeight) / video.videoWidth;
+                }
+                // Best-effort play (muted autoplay can still need a prior gesture).
+                void video.play().catch(() => {
+                    /* intentional no-op */
+                });
+                videoHandle = video;
+            }
+        }
+        else if (typeof createImageBitmap === "function") {
+            try {
+                const bitmap = await createImageBitmap(blob);
+                if (bitmap.width > 0) {
+                    refitHeight = (shape.width * bitmap.height) / bitmap.width;
+                }
+                bitmap.close();
+            }
+            catch {
+                /* undecodable here — keep the old box; rehydration reports errors */
+            }
+        }
+        // GIF frames decode from the raw bytes via the "gif" adapter.
+        const animationBytes = isGif ? await blob.arrayBuffer() : undefined;
+        const oldKind = shape.animationKind
+            ? "gif"
+            : shape.metadata?.animated === true
+                ? "video"
+                : "static";
+        const newKind = isGif ? "gif" : isVideo ? "video" : "static";
+        const tx = this._history.transaction();
+        tx.add(added.patch);
+        const r = updateElement(added.scene, id, (s) => {
+            const copy = { ...s };
+            copy.fileId = added.id;
+            if (url !== null)
+                copy.src = url;
+            if (refitHeight !== null)
+                copy.height = refitHeight;
+            const meta = { ...copy.metadata };
+            delete meta.image;
+            delete meta.animated;
+            if (newKind !== "static")
+                meta.animated = true;
+            if (videoHandle)
+                meta.image = videoHandle;
+            if (Object.keys(meta).length > 0)
+                copy.metadata = meta;
+            else
+                delete copy.metadata;
+            delete copy.animationKind;
+            delete copy.animationData;
+            if (isGif) {
+                copy.animationKind = "gif";
+                copy.animationData = animationBytes;
+            }
+            // The crop rect addressed the OLD media's pixels — meaningless
+            // across a media-kind switch.
+            if (oldKind !== newKind)
+                delete copy.crop;
+            return copy;
+        });
+        this._scene = r.scene;
+        tx.add(r.patch);
+        tx.commit();
+        if (newKind !== "static") {
+            this.gifPlayback.ensure(id);
+            this.maybeAnimate();
+        }
+        this.notify();
+        if (newKind === "static")
+            await animScene.rehydrateStaticImages(this);
+    }
+    /**
+     * Paragraph targets for the list operations: while inline-editing one
+     * of `ids`, only the paragraphs covered by the caret / selection;
+     * otherwise every paragraph of each text element. Returns `null` for
+     * non-text ids.
+     */
+    paragraphTargets(id) {
+        const shape = getElement(this._scene, id);
+        if (!shape || !isText(shape))
+            return null;
+        const sel = this.editingTextElement === id ? this.editingTextSelection : null;
+        if (sel)
+            return paragraphRangeForOffsets(shape.text, sel.start, sel.end);
+        return { first: 0, last: paragraphCount(shape.text) - 1 };
+    }
+    /**
+     * Set (or clear, with `null`) the list kind on the targeted paragraphs
+     * of every text element in `ids` — the inline-edit selection's
+     * paragraphs while editing, the whole element otherwise. One undo step.
+     */
+    setParagraphList(ids, kind) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const range = this.paragraphTargets(id);
+            if (!range)
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const shape = s;
+                const count = paragraphCount(shape.text);
+                const next = Array.from({ length: count }, (_, i) => paragraphAt(shape.paragraphs, i)).map((p, i) => {
+                    if (i < range.first || i > range.last)
+                        return p;
+                    const { list: _list, ...rest } = p;
+                    return kind === null ? rest : { ...rest, list: kind };
+                });
+                const normalized = normalizeParagraphs(next);
+                const copy = { ...s };
+                if (normalized === undefined)
+                    delete copy.paragraphs;
+                else
+                    copy.paragraphs = normalized;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
+    /**
+     * Shift the targeted paragraphs' list nesting by `delta` (±1), clamped
+     * to `[0, MAX_LIST_INDENT]`. Same targeting rules as
+     * {@link setParagraphList}. One undo step.
+     */
+    indentParagraphs(ids, delta) {
+        if (this.readOnly)
+            return;
+        const tx = this._history.transaction();
+        let changed = false;
+        for (const id of ids) {
+            const range = this.paragraphTargets(id);
+            if (!range)
+                continue;
+            const r = updateElement(this._scene, id, (s) => {
+                const shape = s;
+                const count = paragraphCount(shape.text);
+                const next = Array.from({ length: count }, (_, i) => paragraphAt(shape.paragraphs, i)).map((p, i) => {
+                    if (i < range.first || i > range.last)
+                        return p;
+                    const level = Math.max(0, Math.min(MAX_LIST_INDENT, (p.indent ?? 0) + delta));
+                    const { indent: _indent, ...rest } = p;
+                    return level === 0 ? rest : { ...rest, indent: level };
+                });
+                const normalized = normalizeParagraphs(next);
+                const copy = { ...s };
+                if (normalized === undefined)
+                    delete copy.paragraphs;
+                else
+                    copy.paragraphs = normalized;
+                return copy;
+            });
+            this._scene = r.scene;
+            tx.add(r.patch);
+            changed = true;
+        }
+        if (!changed)
+            return;
+        tx.commit();
+        this.notify();
+    }
     // --- F8: Eyedropper ---------------------------------------------------
     /**
      * The fill (or stroke, per `role`) colour of the top-most shape under the
@@ -2878,17 +3758,58 @@ export class Editor {
     }
     /**
      * Update non-style text properties (`fontSize`, `fontFamily`,
-     * `maxWidth`) on every selected text shape. Non-text shapes are
-     * skipped. Single undo step. Used by the text contextual panel.
+     * `maxWidth`) on every text shape in `ids`; labelable shapes route
+     * `fontSize` / `fontFamily` to their embedded label instead (as
+     * `updateLabelProps` — an explicit size leaves auto-fit). Anything else is
+     * skipped. Single undo step. Used by the selection toolbar, so a mixed
+     * text + shape selection shares one font control.
      */
     updateTextProps(ids, partial) {
         if (this.readOnly)
             return;
-        const result = computeUpdateTextProps(this._scene, ids, partial);
-        if (!result)
+        const textIds = [];
+        const labelIds = [];
+        for (const id of ids) {
+            const el = getElement(this._scene, id);
+            if (el === undefined)
+                continue;
+            if (isText(el))
+                textIds.push(id);
+            else if (withLabel(el).label !== undefined)
+                labelIds.push(id);
+        }
+        const tx = this._history.transaction();
+        let changed = false;
+        const text = computeUpdateTextProps(this._scene, textIds, partial);
+        if (text) {
+            this._scene = text.scene;
+            tx.add(text.patch);
+            changed = true;
+        }
+        const { fontFamily, fontSize } = partial;
+        if (fontFamily !== undefined || fontSize !== undefined) {
+            const labelPartial = {
+                ...(fontFamily !== undefined ? { fontFamily } : {}),
+                ...(fontSize !== undefined ? { fontSize } : {}),
+            };
+            for (const id of labelIds) {
+                const r = updateElement(this._scene, id, (raw) => {
+                    const l = withLabel(raw);
+                    if (l.label === undefined)
+                        return l;
+                    const label = { ...l.label, ...labelPartial };
+                    if (fontSize !== undefined)
+                        delete label.autoFit;
+                    return { ...l, label };
+                });
+                this._scene = r.scene;
+                tx.add(r.patch);
+                changed = true;
+            }
+        }
+        if (!changed)
             return;
-        this._scene = result.scene;
-        this._history.push(result.patch);
+        tx.commit();
         this.notify();
     }
     /**
@@ -2946,8 +3867,8 @@ export class Editor {
      * with its world bounds — for the hover link-popup. `null` when none.
      */
     linkAt(worldPoint) {
-        const shape = this.acceleratedElementAt(worldPoint);
-        if (!shape || !this.isElementInteractable(shape))
+        const shape = this.acceleratedElementAt(worldPoint, (s) => this.isElementInteractable(s));
+        if (!shape)
             return null;
         const href = safeHref(shape.href);
         if (!href)
@@ -3026,20 +3947,37 @@ export class Editor {
      * rotate gesture drives the same maths from a press-time snapshot.
      */
     rotateSelection(delta) {
-        const elements = [];
+        // Groups carry their subtree: every descendant orbits the shared pivot.
         const origin = new Map();
-        for (const id of this._selection) {
+        for (const id of this.expandSelectionWithDescendants()) {
             const el = getElement(this._scene, id);
-            if (el === undefined)
+            if (el === undefined || isGroup(el))
                 continue;
-            elements.push(el);
             origin.set(id, { position: el.position, rotation: el.rotation });
         }
-        if (elements.length === 0)
+        const box = this.combinedSelectionBounds();
+        if (origin.size === 0 || !box)
             return;
-        const pivot = selectionCenter(elements);
+        const pivot = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
         this.commitArrange(computeRotatePatches(this._scene, origin, pivot, delta));
     }
+    /**
+     * Straighten the selection: every selected element (and descendants of
+     * selected groups) goes back to `rotation: 0`, each turning about its own
+     * centre so it stays where it is. One undoable step; no-op when nothing
+     * is rotated. Triggered by a double-click on the rotate grip.
+     */
+    resetSelectionRotation() {
+        const patches = [];
+        for (const id of this.expandSelectionWithDescendants()) {
+            const el = getElement(this._scene, id);
+            if (el === undefined || el.rotation === 0)
+                continue;
+            const origin = new Map([[id, { position: el.position, rotation: el.rotation }]]);
+            patches.push(...computeRotatePatches(this._scene, origin, selectionCenter([el]), -el.rotation));
+        }
+        this.commitArrange(patches);
+    }
     /** Apply a batch of arrange patches as a single undoable step. */
     commitArrange(patches) {
         if (this.readOnly)
@@ -3191,6 +4129,18 @@ export class Editor {
         const center = this.screenToWorld({ x: vp.size.width / 2, y: vp.size.height / 2 });
         this.zoomAt(factor, center);
     }
+    /**
+     * Set an absolute zoom level (1 = 100%), scaling about the viewport
+     * centre and clamped to `MIN_ZOOM..MAX_ZOOM`. The zoom menu's presets.
+     */
+    setZoom(level) {
+        const vp = this._scene.viewport;
+        const current = vp.zoom || 1;
+        const target = clampZoom(level);
+        if (target === current || vp.size.width <= 0 || vp.size.height <= 0)
+            return;
+        this.zoomStep(target / current);
+    }
     resetZoom() {
         const next = computeResetZoom(this._scene);
         if (!next)
@@ -3232,6 +4182,20 @@ export class Editor {
         this._scene = next;
         this.notify();
     }
+    /**
+     * "Back to content": jump to the element nearest the camera centre, keeping
+     * the current zoom (it only drops when that element doesn't fit). Unlike
+     * {@link zoomToFit} this neither shrinks a large board to a speck nor blows
+     * a single small shape up to full screen. Groups are skipped (their own
+     * bounds are empty — their children count). No-op on an empty scene.
+     */
+    revealNearestContent(padding = 80) {
+        const next = computeRevealNearest(this._scene, padding, (s) => s.type !== "group");
+        if (!next)
+            return;
+        this._scene = next;
+        this.notify();
+    }
     /**
      * Select the nearest interactable top-level element in `direction` from the
      * current selection's centre (or the viewport centre when nothing is
@@ -3314,6 +4278,137 @@ export class Editor {
     snapSpacing() {
         return resolveSnapSpacing();
     }
+    /**
+     * Object snapping is a per-user preference; the suppress modifier
+     * (Cmd/Ctrl) bypasses it for the current gesture like grid snapping.
+     */
+    objectSnapActive() {
+        return !this.interaction.snapSuppressed && this._preferences.snapObjects;
+    }
+    sizeSuggestActive() {
+        return !this.interaction.snapSuppressed && this._preferences.suggestObjectSize;
+    }
+    /**
+     * World AABBs of the shapes a gesture may snap to (reference rules): every
+     * visible element on screen that is not being moved / resized, except
+     * groups (no geometry of their own), brush strokes (freehand ink is never
+     * a snap target), shapes rotated off the 90° grid, and shapes too small on
+     * screen (`OBJECT_SNAP_MIN_SIZE_PX`). Returns nothing on a crowded view
+     * (`OBJECT_SNAP_MAX_CANDIDATES`) so a huge board never stalls a drag.
+     */
+    snapCandidates(moving) {
+        const view = this.computeViewportWorld();
+        const zoom = this._scene.viewport.zoom || 1;
+        const minSize = OBJECT_SNAP_MIN_SIZE_PX / zoom;
+        const out = [];
+        for (const shape of this._scene.elements.values()) {
+            if (moving.has(shape.id) || isGroup(shape) || isBrush(shape))
+                continue;
+            if (!isRightAngle(shape.rotation))
+                continue;
+            if (isElementHidden(this._scene, shape))
+                continue;
+            const b = getElementWorldBounds(shape);
+            if (view && !B.intersects(view, b))
+                continue;
+            if (b.width < minSize && b.height < minSize)
+                continue;
+            out.push(b);
+            if (out.length > OBJECT_SNAP_MAX_CANDIDATES)
+                return [];
+        }
+        return out;
+    }
+    /** Brush strokes never snap (as movers or targets) — freehand ink has no meaningful edges. */
+    snapsAsMover(id) {
+        const shape = getElement(this._scene, id);
+        return shape !== undefined && !isBrush(shape);
+    }
+    /**
+     * Move-delta snapping: object snapping (edges / centres of nearby shapes)
+     * wins when it lands; otherwise grid snapping. Records the guides for the
+     * overlay either way.
+     */
+    snapMoveDeltaFor(moving, bounds, delta) {
+        this.interaction.snapGuides = [];
+        if (this.objectSnapActive() && [...moving].some((id) => this.snapsAsMover(id))) {
+            const threshold = OBJECT_SNAP_THRESHOLD_PX / (this._scene.viewport.zoom || 1);
+            const r = snapMoveDeltaToObjects(bounds, delta, this.snapCandidates(moving), threshold);
+            if (r.guides.length > 0) {
+                this.interaction.snapGuides = r.guides;
+                return r.delta;
+            }
+        }
+        return this.snapActive() ? snapMoveDelta(bounds, delta, this.snapSpacing()) : delta;
+    }
+    /**
+     * Group move: the press-time union AABB of the members (each member's
+     * current geometry at its press-time position; brush strokes excluded)
+     * snaps to nearby shapes by its frame EDGES only — a multi-selection has
+     * no centre line, like the reference. Falls back to the grid
+     * reference-point snap.
+     */
+    snapGroupMoveDelta(origins, delta) {
+        this.interaction.snapGuides = [];
+        if (this.objectSnapActive()) {
+            let union = null;
+            let members = 0;
+            for (const [id, position] of origins) {
+                const shape = getElement(this._scene, id);
+                if (!shape || isGroup(shape) || isBrush(shape))
+                    continue;
+                members += 1;
+                const b = getElementWorldBounds({ ...shape, position });
+                union = union ? B.union(union, b) : b;
+            }
+            if (union) {
+                const threshold = OBJECT_SNAP_THRESHOLD_PX / (this._scene.viewport.zoom || 1);
+                const r = snapMoveDeltaToObjects(union, delta, this.snapCandidates(new Set(origins.keys())), threshold, { centerLines: members === 1 });
+                if (r.guides.length > 0) {
+                    this.interaction.snapGuides = r.guides;
+                    return r.delta;
+                }
+            }
+        }
+        return this.snapActive() ? snapGroupDelta(origins, delta, this.snapSpacing()) : delta;
+    }
+    /** Resize-delta counterpart of {@link snapMoveDeltaFor}; also sets `sizeMatch`. */
+    snapResizeDeltaFor(moving, original, handle, delta) {
+        this.interaction.snapGuides = [];
+        this.interaction.sizeMatch = null;
+        const alignEdges = this.objectSnapActive();
+        const matchSizes = this.sizeSuggestActive();
+        if ((alignEdges || matchSizes) && [...moving].some((id) => this.snapsAsMover(id))) {
+            const zoom = this._scene.viewport.zoom || 1;
+            const threshold = Math.max(OBJECT_SNAP_THRESHOLD_PX, SIZE_SUGGEST_THRESHOLD_PX) / zoom;
+            const r = snapResizeDeltaToObjects(original, handle, delta, this.snapCandidates(moving), threshold, { alignEdges, matchSizes });
+            if (r.guides.length > 0 || r.sizeMatch !== null) {
+                this.interaction.snapGuides = r.guides;
+                this.interaction.sizeMatch = r.sizeMatch;
+                return r.delta;
+            }
+        }
+        return this.snapActive() ? snapResizeDelta(original, handle, delta, this.snapSpacing()) : delta;
+    }
+    /** Publish the `W × H` readout for `bounds` when the preference is on. */
+    setSizeReadout(bounds) {
+        this.interaction.sizeReadout =
+            bounds && this._preferences.showObjectSize
+                ? { bounds, width: bounds.width, height: bounds.height }
+                : null;
+    }
+    /** Alignment guides of the current gesture tick (object snapping). */
+    get snapGuides() {
+        return this.interaction.snapGuides;
+    }
+    /** `W × H` readout of the shape being resized, when `showObjectSize` is on. */
+    get sizeReadout() {
+        return this.interaction.sizeReadout;
+    }
+    /** Bounds of the shape whose size the current resize matched, if any. */
+    get sizeMatch() {
+        return this.interaction.sizeMatch;
+    }
     /**
      * Replace the entire scene (e.g. after `parseScene`). Clears history,
      * selection and any open gesture. Use to load a saved document.
@@ -3323,7 +4418,9 @@ export class Editor {
             this.gestureTx.cancel();
             this.gestureTx = null;
         }
-        this._scene = scene;
+        // A saved start view is where a freshly opened document lands; a
+        // peer update (`preserveHistory`) must not yank the local camera.
+        this._scene = options.preserveHistory ? scene : withStartViewApplied(scene);
         // Snap active layer back into the loaded scene's layer set.
         if (!scene.layers.has(this._activeLayerId)) {
             const first = scene.layers.keys().next().value;
@@ -3358,6 +4455,7 @@ export class Editor {
     }
     /** Detach all DOM listeners and stop the actor. */
     dispose() {
+        this.disposed = true;
         this.cancelLongPress();
         this.unbind();
         this.actor.stop();
@@ -3410,10 +4508,10 @@ export class Editor {
             // Right-click without a drag → trigger the context-menu listeners.
             // Same payload as touch long-press so existing UI (e.g.
             // `@react-ui/ContextMenu`) works without changes.
-            const worldPoint = this.screenToWorld(gesture.startPoint);
-            for (const fn of this.longPressListeners) {
-                fn({ screenPoint: gesture.startPoint, worldPoint });
-            }
+            this.fireContextPress({
+                screenPoint: gesture.startPoint,
+                worldPoint: this.screenToWorld(gesture.startPoint),
+            });
         }
         else {
             // Either it was a real drag, or Space + left drag. In both cases the
@@ -3424,9 +4522,48 @@ export class Editor {
         // Pan over — recompute (→ "grab" if Space/hand still armed, else the
         // idle hover cursor).
         this.refreshCursor();
+        // The gesture's end is itself a change: idle-gated observers (the
+        // minimap) skip every pan notify while `panGesture` is set and rely on
+        // this trailing one to repaint.
+        this.notify();
     }
     isDrawingPhase(ctx) {
-        return ctx.mode === "draw-rect" || ctx.mode === "draw-ellipse" || ctx.mode === "draw-edge";
+        return (ctx.mode === "draw-rect" ||
+            ctx.mode === "draw-ellipse" ||
+            ctx.mode === "draw-frame" ||
+            ctx.mode === "draw-edge");
+    }
+    /**
+     * Context press (right-click / touch long-press): first make the selection
+     * match what was pressed, then notify the `onLongPress` listeners so the
+     * menu they open describes that point.
+     * - On an unselected element / link → it becomes the selection.
+     * - On a selected element (or its chrome: handles, rotate grip) → keep.
+     * - On empty canvas → clear elements + links, so the menu is the canvas
+     *   menu rather than the previous selection's.
+     */
+    fireContextPress(payload) {
+        this.routeContextPress(payload.worldPoint);
+        for (const fn of this.longPressListeners)
+            fn(payload);
+    }
+    routeContextPress(worldPoint) {
+        const target = this.hitTest(worldPoint);
+        if (target.kind === "element") {
+            if (!this._selection.has(target.id)) {
+                this.applyEmit({ type: "SELECT_REPLACE", id: target.id });
+            }
+        }
+        else if (target.kind === "link") {
+            if (!this._selectedLinks.has(target.id)) {
+                this.applyEmit({ type: "SELECT_EDGE_REPLACE", id: target.id });
+            }
+        }
+        else if (target.kind === "empty") {
+            if (this._selection.size > 0 || this._selectedLinks.size > 0) {
+                this.applyEmit({ type: "SELECT_CLEAR" });
+            }
+        }
     }
     // --- Long-press ---
     startLongPress(screenPoint) {
@@ -3462,8 +4599,8 @@ export class Editor {
      * `undefined` → dropped on empty space (the end stays a free point).
      */
     linkAttachTargetAt(worldPoint) {
-        const shape = this.acceleratedElementAt(worldPoint);
-        if (shape && this.isElementInteractable(shape)) {
+        const shape = this.acceleratedElementAt(worldPoint, (s) => this.isElementInteractable(s));
+        if (shape) {
             const target = this.promoteToGroupRoot(shape);
             return { kind: "element", id: target.id, bounds: getElementWorldBounds(target) };
         }
@@ -3486,8 +4623,9 @@ export class Editor {
             hitAnnotation: (p) => this.hitAnnotation(p),
             selectionIsAspectLocked: () => this.selectionIsAspectLocked(),
             combinedSelectionBounds: () => this.combinedSelectionBounds(),
-            acceleratedElementAt: (p) => this.acceleratedElementAt(p),
+            acceleratedElementAt: (p, accept) => this.acceleratedElementAt(p, accept),
             isElementInteractable: (s) => this.isElementInteractable(s),
+            isElementManipulable: (s) => this.isElementManipulable(s),
             isLayerLocked: (id) => this.isLayerLocked(id),
             promoteToGroupRoot: (s) => this.promoteToGroupRoot(s),
         });
@@ -3542,10 +4680,12 @@ export class Editor {
             return false;
         if (isElementHidden(this._scene, shape))
             return false;
-        // NOTE: a `locked` element IS interactable for SELECTION (so the user can
-        // click it to unlock) — movement / resize are blocked separately via
-        // `isElementManipulable`. Click-through past a locked shape is therefore
-        // disabled, matching standard.
+        // A locked element is click-through: pointer hits pass to the shapes
+        // beneath it (the hit-test scans past rejected candidates). Unlocking
+        // goes through the context menu (`lockedElementAt` + `unlockElement`),
+        // not through selection.
+        if (isElementLocked(this._scene, shape))
+            return false;
         return true;
     }
     /**
@@ -3590,8 +4730,56 @@ export class Editor {
             tx.add(r.patch);
         }
         tx.commit();
+        // Locked elements are click-through (not selectable) — keeping them
+        // selected would leave a live toolbar on an element clicks can no
+        // longer reach. Locking therefore drops the selection.
+        if (anyUnlocked)
+            this._selection = Selection.EMPTY;
         this.notify();
     }
+    /**
+     * Topmost locked (own or inherited `locked`) shape at `worldPoint`, on a
+     * visible, unlocked layer. Locked shapes are click-through for normal
+     * interaction, so this is the dedicated lookup for affordances that must
+     * still find them — the context menu's Unlock entry.
+     */
+    lockedElementAt(worldPoint) {
+        const shape = this.acceleratedElementAt(worldPoint, (s) => !this.isLayerLocked(s.layerId) &&
+            !isElementHidden(this._scene, s) &&
+            isElementLocked(this._scene, s));
+        return shape ?? null;
+    }
+    /**
+     * Clear the `locked` flag on the shape that carries it. When the flag
+     * lives on an ancestor (group lock propagation), the closest locked
+     * ancestor is unlocked instead, so the whole locked unit is released.
+     * Selects the unlocked shape afterwards — the natural next step after
+     * an unlock is editing it. One undo step.
+     */
+    unlockElement(id) {
+        if (this.readOnly)
+            return;
+        let target = getElement(this._scene, id);
+        if (!target || !isElementLocked(this._scene, target))
+            return;
+        // Walk up to the shape that actually carries the flag.
+        while (target.locked !== true && target.parentId !== undefined) {
+            const parent = getElement(this._scene, target.parentId);
+            if (!parent)
+                break;
+            target = parent;
+        }
+        if (target.locked !== true)
+            return;
+        const r = updateElement(this._scene, target.id, (s) => {
+            const copy = { ...s };
+            delete copy.locked;
+            return copy;
+        });
+        this._scene = r.scene;
+        this._history.push(r.patch);
+        this.setSelection([target.id]);
+    }
     /**
      * Promote a hit shape to the topmost ancestor whose group we have NOT
      * "entered" yet. Only **`group`**-typed parents promote — containers
@@ -3754,11 +4942,11 @@ export class Editor {
      * scene-identity. Scene operations replace `_scene` (immutable patches),
      * so reference-equality is a sufficient invalidation signal.
      */
-    acceleratedElementAt(worldPoint) {
+    acceleratedElementAt(worldPoint, accept) {
         if (this._scene.elements.size < LARGE_SCENE_HIT_THRESHOLD) {
-            return getElementAt(this._scene, worldPoint);
+            return getElementAt(this._scene, worldPoint, accept);
         }
-        return getElementAtIndexed(this._scene, this.ensureSpatialIndex(), worldPoint);
+        return getElementAtIndexed(this._scene, this.ensureSpatialIndex(), worldPoint, accept);
     }
     /**
      * Build (or return the cached) `SpatialGrid` for the current scene.
@@ -3801,9 +4989,7 @@ export class Editor {
      */
     routeIsolationClick(clickEffect, worldPoint) {
         const now = performance.now();
-        const isDouble = now - this.interaction.lastClickAt < DOUBLE_CLICK_MS &&
-            this.interaction.lastClickWorldPoint !== null &&
-            vec2.distance(this.interaction.lastClickWorldPoint, worldPoint) <= DOUBLE_CLICK_TOLERANCE_PX;
+        const isDouble = this.interaction.isDoubleClickAt(worldPoint, now);
         this.interaction.lastClickAt = now;
         this.interaction.lastClickWorldPoint = worldPoint;
         // Double-click the frame HEADER (label strip above the body) → rename.
@@ -3852,6 +5038,12 @@ export class Editor {
             const raw = this.acceleratedElementAt(worldPoint);
             if (raw !== undefined && isText(raw)) {
                 this.beginTextEdit(raw.id);
+                // Caret lands where the user double-clicked, not at the text end.
+                // Collapsed selection WITHOUT a drag anchor — the double-click's
+                // own pointer movement must not start a drag-select.
+                const caretIdx = this.caretIndexAtWorldPoint(worldPoint);
+                if (caretIdx !== null)
+                    this.setEditingSelection(caretIdx, caretIdx);
                 return true;
             }
             if (raw !== undefined && isFrame(raw)) {
@@ -3871,6 +5063,18 @@ export class Editor {
                     this.notify();
                     return true;
                 }
+                // No group to drill into — double-click on a labelable shape
+                // opens its embedded label editor (creating an empty label on
+                // the first edit).
+                if (canCarryLabel(raw)) {
+                    this.beginTextEdit(raw.id);
+                    // Same as text elements: the caret starts at the click point —
+                    // important for long labels whose tail is clipped by the shape.
+                    const labelCaretIdx = this.caretIndexAtWorldPoint(worldPoint);
+                    if (labelCaretIdx !== null)
+                        this.setEditingSelection(labelCaretIdx, labelCaretIdx);
+                    return true;
+                }
             }
         }
         return false;
@@ -4066,7 +5270,9 @@ export class Editor {
             return;
         // Shift constrains the drag to one axis before snapping.
         const moved = this.interaction.transformShiftKey ? constrainDeltaToAxis(delta) : delta;
-        const d = this.snapActive() ? snapMoveDelta(originalBounds, moved, this.snapSpacing()) : moved;
+        // Rotated shapes keep their AABB-based snapping (edges still align in
+        // world space); the object pass is skipped only when nothing is nearby.
+        const d = this.snapMoveDeltaFor(new Set([id]), originalBounds, moved);
         const patch = computeElementMovePatch(this._scene, id, d, originalBounds);
         if (!patch)
             return;
@@ -4079,9 +5285,7 @@ export class Editor {
             return;
         // Shift constrains the drag to one axis before snapping.
         const moved = this.interaction.transformShiftKey ? constrainDeltaToAxis(delta) : delta;
-        const d = this.snapActive()
-            ? snapGroupDelta(this.groupMoveOrigin, moved, this.snapSpacing())
-            : moved;
+        const d = this.snapGroupMoveDelta(this.groupMoveOrigin, moved);
         const patches = computeGroupMovePatches(this._scene, this.groupMoveOrigin, d);
         for (const patch of patches) {
             this._scene = apply(this._scene, patch);
@@ -4174,6 +5378,10 @@ export class Editor {
         // repaint when the entered-group identity changes between frames.
         if (this.lastRenderedEnteredGroup !== this._enteredGroup)
             return null;
+        // Hover transition on a sticky toggles the "+" chrome without a scene
+        // change — force a repaint frame for it.
+        if (this.lastRenderedHoveredSticky !== this._hoveredStickyId)
+            return null;
         // Eraser just STOPPED (the active-stroke guard above already returned, so
         // `eraseStroke` is null here): on an Esc-cancel the marked shapes un-dim
         // without a scene change — commit changes the scene and is caught by the
@@ -4274,9 +5482,7 @@ export class Editor {
     applyGroupResize(handle, delta, originalBounds) {
         if (!this.groupResizeOrigin)
             return;
-        const d = this.snapActive()
-            ? snapResizeDelta(originalBounds, handle, delta, this.snapSpacing())
-            : delta;
+        const d = this.snapResizeDeltaFor(new Set(this.groupResizeOrigin.elements.keys()), originalBounds, handle, delta);
         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.
@@ -4284,6 +5490,7 @@ export class Editor {
         this._scene = result.scene;
         for (const patch of result.patches)
             this.recordGesturePatch(patch);
+        this.setSizeReadout(this.combinedSelectionBounds());
         this.notify();
     }
     applyResize(id, handle, delta, originalBounds) {
@@ -4301,12 +5508,11 @@ export class Editor {
                 return;
             this._scene = result.scene;
             this.recordGesturePatch(result.patch);
+            this.setSizeReadout(this.resizedBounds(id));
             this.notify();
             return;
         }
-        const d = this.snapActive()
-            ? snapResizeDelta(originalBounds, handle, delta, this.snapSpacing())
-            : delta;
+        const d = this.snapResizeDeltaFor(new Set([id]), originalBounds, handle, delta);
         // Text: aspect-locked font scaling. Snapshot the pristine shape on
         // the gesture's first tick so the scale base never compounds.
         if (shape !== undefined && isText(shape)) {
@@ -4322,6 +5528,7 @@ export class Editor {
                 return;
             this._scene = result.scene;
             this.recordGesturePatch(result.patch);
+            this.setSizeReadout(this.resizedBounds(id));
             this.notify();
             return;
         }
@@ -4330,12 +5537,32 @@ export class Editor {
             return;
         this._scene = result.scene;
         this.recordGesturePatch(result.patch);
+        this.setSizeReadout(this.resizedBounds(id));
         this.notify();
     }
+    /** World AABB of `id` after a resize tick (null when the shape is gone). */
+    resizedBounds(id) {
+        const shape = getElement(this._scene, id);
+        return shape ? getElementWorldBounds(shape) : null;
+    }
+    /**
+     * Snap freshly-drawn bounds onto the grid when snapping is active.
+     * Shared by the live rubber-band preview and the final CREATE so the
+     * preview shows exactly where the shape will land (parity with how
+     * move / resize snap live during the gesture).
+     */
+    snapCreateBoundsIfActive(bounds) {
+        return this.snapActive() ? snapCreateBounds(bounds, this.snapSpacing()) : bounds;
+    }
     applyCreate(kind, bounds) {
         const id = newElementId(++this.nextId);
-        const b = this.snapActive() ? snapCreateBounds(bounds, this.snapSpacing()) : bounds;
-        const result = computeCreateElement(this._scene, kind, b, id, this._activeLayerId, () => this.nextFrameName());
+        const b = this.snapCreateBoundsIfActive(bounds);
+        // The machine only knows the MODE ("rect" for draw-rect); the flyout
+        // may have armed a diamond / triangle variant on top of it.
+        const effectiveKind = kind === "rect" && this._drawShapeKind !== "rect" && this._drawShapeKind !== "ellipse"
+            ? this._drawShapeKind
+            : kind;
+        const result = computeCreateElement(this._scene, effectiveKind, b, id, this._activeLayerId, () => this.nextFrameName());
         this._scene = result.scene;
         this._selection = Selection.single(id);
         // CREATE is a single-shot operation, not part of a multi-tick gesture.
@@ -4376,7 +5603,7 @@ export class Editor {
         const from = this.snapLinkEndpoint(emit.fromElement, emit.fromPoint);
         const to = this.snapLinkEndpoint(emit.toElement, emit.toPoint);
         const id = newLinkId(++this.nextId);
-        const result = computeCreateLink(this._scene, from, to, id, this._activeLayerId);
+        const result = computeCreateLink(this._scene, from, to, id, this._activeLayerId, this._linkDrawPreset !== null ? LINK_DRAW_PRESETS[this._linkDrawPreset] : undefined);
         this._scene = result.scene;
         this._history.push(result.patch);
         this.edgePreview = null;
@@ -4477,7 +5704,7 @@ export class Editor {
     // 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 next = selectByBoundsPure(this._scene, this._selection, (id) => this.isLayerLocked(id), bounds, mode, (shape) => this.promoteToGroupRoot(shape));
         const nextLinks = selectLinksByBoundsLivePure(this._scene, mode === "add" ? this._selectedLinks : LinkSelection.EMPTY, (id) => this.isLayerLocked(id), bounds, mode);
         const linksChanged = !LinkSelection.equals(nextLinks, this._selectedLinks);
         this._selectedLinks = nextLinks;
@@ -4490,7 +5717,7 @@ export class Editor {
     }
     applyLassoLiveSelection(bounds, mode) {
         const base = this.interaction.lassoBaseSelection ?? Selection.EMPTY;
-        const next = selectByBoundsLivePure(this._scene, base, (id) => this.isLayerLocked(id), bounds, mode);
+        const next = selectByBoundsLivePure(this._scene, base, (id) => this.isLayerLocked(id), bounds, mode, (shape) => this.promoteToGroupRoot(shape));
         const linkBase = this.interaction.lassoBaseLinks ?? LinkSelection.EMPTY;
         const nextLinks = selectLinksByBoundsLivePure(this._scene, linkBase, (id) => this.isLayerLocked(id), bounds, mode);
         const linksChanged = !LinkSelection.equals(nextLinks, this._selectedLinks);
@@ -4687,9 +5914,12 @@ export class Editor {
     }
     applyLinkPreview(fromElement, fromPoint, toPoint) {
         const ep = computeLinkPreviewEndpoints(this._scene, fromElement, fromPoint, toPoint);
-        // Match the preview to the connector that will be committed: when new
-        // links default to elbow, draw the orthogonal route, not a straight line.
-        if (DEFAULT_LINK_ROUTING === "orthogonal") {
+        // Match the preview to the connector that will be committed: elbow
+        // presets/defaults draw the orthogonal route, straight presets a line.
+        const previewRouting = this._linkDrawPreset !== null
+            ? LINK_DRAW_PRESETS[this._linkDrawPreset].routing
+            : DEFAULT_LINK_ROUTING;
+        if (previewRouting === "orthogonal") {
             const hit = this.hitTest(ep.to);
             const toElement = hit.kind === "element" ? hit.id : null;
             const points = routeElbowPreview(this._scene, fromElement, ep.from, toElement, ep.to);
@@ -4713,6 +5943,7 @@ export class Editor {
     }
     commitGesture() {
         this.interaction.resizeOriginElement = null;
+        this.interaction.clearSnapAssists();
         this.rotateGestureOrigin = null;
         this.gestures.commit();
         this.gestureStartScene = null;
@@ -4758,6 +5989,7 @@ export class Editor {
     }
     cancelGesture() {
         this.interaction.resizeOriginElement = null;
+        this.interaction.clearSnapAssists();
         this.interaction.rotateGestureOrigin = null;
         this.gestures.cancel();
         // Roll the scene back to the pre-gesture snapshot — cancelling the history
@@ -4801,6 +6033,13 @@ export class Editor {
      * into a single render per frame.
      */
     renderRafId = null;
+    /**
+     * Set by {@link dispose}. Render scheduling bails out when set:
+     * async completions (image decode, font load, wasm init) can resolve
+     * after the host tears the editor down (e.g. a runtime backend
+     * switch) and must not paint onto disposed render targets.
+     */
+    disposed = false;
     /** Unsubscribe for the animation-content-ready listener (decode → re-render). */
     animationContentOff = null;
     /**
@@ -4816,6 +6055,8 @@ export class Editor {
      * compare bitmap output after a mutation).
      */
     scheduleRender() {
+        if (this.disposed)
+            return; // async completions (image decode, font load) may outlive the editor
         if (this.renderRafId !== null)
             return;
         if (typeof requestAnimationFrame === "undefined") {
@@ -4841,6 +6082,8 @@ export class Editor {
      * Normal interactive flows should let `scheduleRender` do its job.
      */
     forceRender() {
+        if (this.disposed)
+            return;
         if (this.renderRafId !== null && typeof cancelAnimationFrame !== "undefined") {
             cancelAnimationFrame(this.renderRafId);
             this.renderRafId = null;
@@ -5014,10 +6257,17 @@ export class Editor {
             peerSelections: this._peerSelections,
             debugHitZones: this.debugHitZones,
             readOnly: this._readOnly,
+            hoveredStickyId: this._hoveredStickyId,
+            linkDrawOverrides: this._linkDrawPreset !== null ? LINK_DRAW_PRESETS[this._linkDrawPreset] : undefined,
             groupMoveOrigin: this.groupMoveOrigin,
             aspectLocked: this.selectionIsAspectLocked(),
             combinedSelectionBounds: this.combinedSelectionBounds(),
             editingText: this.editingTextOverlay(),
+            snapGuides: this.interaction.snapGuides,
+            sizeReadout: this.interaction.sizeReadout,
+            sizeMatch: this.interaction.sizeMatch,
+            showDistances: this._preferences.showObjectSize,
+            isElementManipulable: (s) => this.isElementManipulable(s),
             previewClickCreate: (fromElement, anchorName) => this.previewClickCreate(fromElement, anchorName),
             isPlaybackPaused: (id) => this.isPlaybackPaused(id),
         };
@@ -5038,6 +6288,7 @@ export class Editor {
         // and, on the tile-cache path, clear the consumed dirty set.
         this.lastRenderedScene = this._scene;
         this.lastRenderedEnteredGroup = this._enteredGroup;
+        this.lastRenderedHoveredSticky = this._hoveredStickyId;
         this.lastRenderedEraseActive = snapshot.eraseActive;
         // The forced erase repaint (if any) has now happened — later idle frames
         // (cursor moving / trail fading) skip the full main pass until the next cut.