@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/canvas-core/editor/Editor.ts

@@ -1,2614 +0,0 @@
-import {
-  UNINITIALIZED,
-  atom,
-  computed,
-  type Atom,
-  type Signal,
-} from "@land/signals";
-import type {
-  ArrowTerminalBindingResolver,
-  ArrowTerminalBindingResolverInput,
-  ResolvedArrowTerminalBinding,
-} from "../bindings/arrow/arrowBindingHelpers";
-import type { BindingUtil } from "../bindings/BindingUtil";
-import { BindingUtilRegistry } from "../bindings/BindingUtilRegistry";
-import { Box } from "../geometry/Box";
-import { Mat } from "../geometry/Mat";
-import { Vec } from "../geometry/Vec";
-import {
-  type BindingId,
-  type BindingRecord,
-  DEFAULT_CAMERA,
-  DEFAULT_SESSION_ID,
-  type AssetId,
-  type AssetRecord,
-  type Camera,
-  isAssetRecord,
-  isBindingRecord,
-  isPageRecord,
-  isSessionRecord,
-  isShapeRecord,
-  type PageId,
-  type PageRecord,
-  type EditorRecord,
-  type RecordScope,
-  type SessionRecord,
-  type ShapeId,
-  type ShapeParentId,
-  type ShapeRecord,
-  type ShapeEditingEntryRequest,
-  type ShapeEditingSession,
-} from "../schema/records";
-import {
-  type DocumentSnapshot,
-  type SessionSnapshot,
-} from "../schema/snapshots";
-import type {
-  ShapeSelectionFlipAxis,
-  ShapeUtil,
-} from "../shapes/ShapeUtil";
-import { ShapeUtilRegistry } from "../shapes/ShapeUtilRegistry";
-import {
-  exportShapesToSvgString,
-  ShapeSvgExporterRegistry,
-  type ShapeSvgExporter,
-  type SvgExportOptions,
-  type SvgExportResult,
-} from "../exports/svg";
-import {
-  getExportIntegrityReport,
-  repairExportIntegrity,
-  type ExportIntegrityRepairResult,
-  type ExportIntegrityReport,
-} from "../exports/integrity";
-import {
-  getShapeCapabilityManifest,
-  type ShapeCapabilityDefinition,
-  type ShapeCapabilityManifest,
-} from "../shapes/capabilities";
-import { Store, type ChangeSource, type StoreChange } from "@land/store";
-import {
-  createEditorCommands,
-  type CreateAssetInput,
-  type CreateBindingInput,
-  type CreatePageInput,
-  type CreateShapeInput,
-  type StartEditingShapeInput,
-  type EditorCommands,
-} from "./commands";
-import type {
-  CancelEditorEvent,
-  ClickEditorEvent,
-  EditorEvent,
-  PointerEditorEvent,
-} from "./events";
-import { HistoryManager, type HistoryState } from "./HistoryManager";
-import { BindingManager } from "./managers/BindingManager";
-import { CameraManager } from "./managers/CameraManager";
-import { ClipboardManager } from "./managers/ClipboardManager";
-import { DocumentSnapshotManager } from "./managers/DocumentSnapshotManager";
-import { InputsManager } from "./managers/InputsManager";
-import {
-  InteractionTransientManager,
-  type LaserTrailState,
-} from "./managers/InteractionTransientManager";
-import {
-  QueryManager,
-  type ShapeContainment,
-} from "./managers/QueryManager";
-import {
-  SpatialIndexManager,
-  type ShapeAtPointOptions,
-  type ShapeLineSegmentHitTestOptions,
-  type SpatialQueryOptions,
-} from "./managers/SpatialIndexManager";
-import { SnapManager } from "./managers/SnapManager";
-import { SideEffectManager } from "./managers/SideEffectManager";
-import { SelectionLayoutManager } from "./managers/SelectionLayoutManager";
-import { SelectionManager } from "./managers/SelectionManager";
-import { SelectionOverlayManager } from "./managers/SelectionOverlayManager";
-import { ShapeEditingManager } from "./managers/ShapeEditingManager";
-import { ShapeGeometryManager } from "./managers/ShapeGeometryManager";
-import { ShapeHierarchyManager } from "./managers/ShapeHierarchyManager";
-import { RenderWindowManager } from "./managers/RenderWindowManager";
-import { ToolManager } from "./managers/ToolManager";
-import type { ShapeGeometry } from "./queries/shapeTransforms";
-import { editorStoreSymbol, getEditorStore, setEditorStore } from "./internal";
-import {
-  getEditorSelectionFlipUpdates,
-  resetEditorSelectionRotation,
-} from "./editorSelectionTransforms";
-import type {
-  DuplicateSelectionInput,
-  EditorClipboardPayload,
-  PasteClipboardPayloadInput,
-} from "./clipboard";
-import { InteractionHandlerRegistry } from "./interactions";
-import { SelectionHandleInteractionRegistry } from "./selectionHandleInteractions";
-import {
-  RENDER_CULLING_OVERSCAN_SCREEN,
-  doesBoxContainBox,
-} from "./renderWindow";
-import {
-  areSelectedShapeOverlayItemsEqual,
-  getSelectionHandleState,
-  isSingleSelectionPathOverlay,
-  type SelectedShapeOverlayItem,
-} from "./selectionOverlay";
-import type {
-  ArrowBindingPreviewState,
-  SnapIndicatorState,
-  SelectionHandle,
-  SelectionFrame,
-  SelectionOverlayFrameState,
-  SelectionOverlayFrameGeometryState,
-  SelectionOverlayFrameStyleState,
-  SelectionOverlayHandleAnchorsState,
-  SelectionOverlayHandleCountsState,
-  SelectionOverlayHandlesState,
-  SelectionOverlayState,
-} from "./selection";
-
-const SELECTION_HANDLE_HIT_PADDING_SCREEN = 6;
-const DOUBLE_CLICK_DURATION_MS = 250;
-const DOUBLE_CLICK_DISTANCE = 40;
-const DOUBLE_CLICK_DISTANCE_SQUARED =
-  DOUBLE_CLICK_DISTANCE * DOUBLE_CLICK_DISTANCE;
-const CAMERA_WHEEL_MAX_ZOOM_STEP = 10;
-const CAMERA_WHEEL_ZOOM_SPEED = 1;
-
-export interface EditorOptions {
-  shapeUtils?: ShapeUtil[];
-  shapeSvgExporters?: ShapeSvgExporter[];
-  bindingUtils?: BindingUtil[];
-  shapeCapabilities?: readonly ShapeCapabilityDefinition[];
-  resolveAssetUrl?: (assetId: AssetId) => string | null;
-  documentSnapshot?: unknown;
-  sessionSnapshot?: unknown;
-}
-
-export interface ContainerBoundsQueryOptions {
-  includeIntersecting?: boolean;
-}
-
-export interface RenderItem {
-  id: ShapeId;
-  shape: ShapeRecord;
-  bounds: Box;
-  isSelected: boolean;
-}
-
-export interface EditorPageState {
-  pages: PageRecord[];
-  currentPageId: PageId;
-  currentPage: PageRecord | null;
-  canDeleteCurrentPage: boolean;
-}
-
-export interface EditorToolState {
-  activeToolId: string;
-  isToolLocked: boolean;
-}
-
-export type ShapeSiblingOrderDirection = "backward" | "forward";
-export type ShapeSiblingOrderEdge = "back" | "front";
-
-export interface ShapeSiblingOrderState {
-  parentId: ShapeParentId;
-  index: number;
-  count: number;
-  canMoveBackward: boolean;
-  canMoveForward: boolean;
-}
-
-export interface ShapeSelectionSiblingOrderState {
-  parentId: ShapeParentId;
-  selectedCount: number;
-  count: number;
-  canMoveBackward: boolean;
-  canMoveForward: boolean;
-}
-
-export type ReparentShapePlacementFailureReason =
-  | "notFound"
-  | "locked"
-  | "hidden"
-  | "invalidParent"
-  | "cycle"
-  | "invalidBeforeId";
-
-export type ReparentShapePlacementResult =
-  | { ok: true; movedIds: ShapeId[] }
-  | { ok: false; reason: ReparentShapePlacementFailureReason };
-
-export interface ReparentShapePlacementInput {
-  ids: readonly ShapeId[];
-  parentId: ShapeParentId;
-  beforeId?: ShapeId;
-}
-
-export interface ShapeGroupState {
-  parentId: ShapeParentId;
-  shapeIds: ShapeId[];
-  bounds: Box;
-}
-
-export interface LayerTreeNode {
-  id: ShapeId;
-  parentId: ShapeParentId;
-  pageId: PageId;
-  type: ShapeRecord["type"];
-  childIds: ShapeId[];
-  index: number;
-  depth: number;
-  isHidden: boolean;
-  isLocked: boolean;
-  isEffectivelyHidden: boolean;
-  isEffectivelyLocked: boolean;
-}
-
-export type LayerOrderDirection = "backward" | "forward";
-export type LayerOrderEdge = "back" | "front";
-
-export type ShapePropsPatch = Record<string, unknown>;
-
-export interface EditorShapeEditingState {
-  editingShapeId: ShapeId | null;
-  session: ShapeEditingSession | null;
-}
-
-export interface EditorShapeEditingEntryRequestState {
-  request: ShapeEditingEntryRequest | null;
-}
-
-export interface EditorSelectionState {
-  count: number;
-  singleShapeType: ShapeRecord["type"] | null;
-  commonShapeType: ShapeRecord["type"] | null;
-  hasPointHandleSelection: boolean;
-  hasFrameSelection: boolean;
-  isMixedFrameAndPointHandleSelection: boolean;
-  canDragPointHandles: boolean;
-  hasSelectionRotation: boolean;
-  hasMixedSelectionRotation: boolean;
-  canResetSelectionRotation: boolean;
-  frameBounds: Box | null;
-  frameRotation: number;
-  frameRotationCenter: Vec | null;
-  toolbarAnchorPagePoint: Vec | null;
-}
-
-export interface EditorRenderHostDebugState {
-  culledCount: number;
-  visibleCount: number;
-  retainedCount: number;
-  retainedBaseCount: number;
-  culledRangeCount: number;
-  culledRangeSpan: number;
-  culledRangesSummary: string;
-  retainedBaseRangeCount: number;
-  retainedBaseRangeSpan: number;
-  retainedBaseRangesSummary: string;
-  retainedRangeCount: number;
-  retainedRangeSpan: number;
-  retainedRangesSummary: string;
-  retainedChangeCount: number;
-  retainedAddedCount: number;
-  retainedRemovedCount: number;
-  selectedOutsideCulledCount: number;
-}
-
-export interface EditorOverlayDebugState {
-  selectionFrameActive: boolean;
-  selectionHandlesActive: boolean;
-  bindingPreviewActive: boolean;
-  brushBoxActive: boolean;
-  selectionFrameChangeCount: number;
-  selectionHandlesChangeCount: number;
-  resizeHandleCount: number;
-  rotateHandleCount: number;
-  terminalHandleCount: number;
-  middleHandleCount: number;
-  customHandleCount: number;
-  boundsSummary: string;
-  rotation: number | null;
-  strokeWidth: number | null;
-}
-
-interface ReadonlyStore {
-  readonly recordsSignal: Signal<Map<string, EditorRecord>>;
-  get(id: string): EditorRecord | undefined;
-  getAll(): EditorRecord[];
-  getByScope(scope: RecordScope): EditorRecord[];
-  listen(listener: (change: StoreChange<EditorRecord>) => void): () => void;
-}
-
-import {
-  areBoxesEqual,
-  areShapeIdArraysEqual,
-  areShapeIdSetsEqual,
-  areShapePropsPatchesEqual,
-  areVecsEqual,
-  getCommonShapeType,
-  getShapeAssetId,
-} from "./editorComputedHelpers";
-
-export class Editor {
-  readonly store: ReadonlyStore;
-  readonly [editorStoreSymbol]!: Store<EditorRecord>;
-  readonly inputs = new InputsManager();
-  readonly snapshots = new DocumentSnapshotManager(this);
-  readonly clipboard = new ClipboardManager(this);
-  readonly tools = new ToolManager(this);
-  readonly camera = new CameraManager(this);
-  readonly selection = new SelectionManager(this);
-  readonly selectionLayout = new SelectionLayoutManager(this);
-  readonly editing = new ShapeEditingManager(this);
-  readonly geometry = new ShapeGeometryManager(this);
-  readonly hierarchy = new ShapeHierarchyManager(this);
-  readonly shapeUtils = new ShapeUtilRegistry();
-  readonly shapeSvgExporters = new ShapeSvgExporterRegistry();
-  readonly bindingUtils = new BindingUtilRegistry();
-  readonly interactions = new InteractionHandlerRegistry();
-  readonly selectionHandleInteractions = new SelectionHandleInteractionRegistry(
-    this.interactions,
-  );
-  readonly queries: QueryManager;
-  readonly bindings: BindingManager;
-  readonly spatialIndex: SpatialIndexManager;
-  readonly snaps: SnapManager;
-  readonly renderWindow: RenderWindowManager;
-  readonly selectionOverlay: SelectionOverlayManager;
-  readonly transients = new InteractionTransientManager(this);
-  readonly history: HistoryManager;
-  readonly sideEffects = new SideEffectManager();
-  readonly commands: EditorCommands;
-  private readonly shapeCapabilityDefinitions: readonly ShapeCapabilityDefinition[];
-  readonly brushBoxSignal: Signal<Box | null> = this.transients.brushBoxSignal;
-  readonly brushBoxActiveSignal: Signal<boolean> =
-    this.transients.brushBoxActiveSignal;
-  readonly erasingShapeIdsSignal: Signal<ShapeId[]> =
-    this.transients.erasingShapeIdsSignal;
-  readonly erasingShapeIdsActiveSignal: Signal<boolean> =
-    this.transients.erasingShapeIdsActiveSignal;
-  readonly eraserTrailSignal: Signal<Vec[]> =
-    this.transients.eraserTrailSignal;
-  readonly eraserTrailActiveSignal: Signal<boolean> =
-    this.transients.eraserTrailActiveSignal;
-  readonly laserTrailSignal: Signal<LaserTrailState | null> =
-    this.transients.laserTrailSignal;
-  readonly laserTrailActiveSignal: Signal<boolean> =
-    this.transients.laserTrailActiveSignal;
-  readonly bindingPreviewSignal: Signal<ArrowBindingPreviewState | null> =
-    this.transients.bindingPreviewSignal;
-  readonly bindingPreviewActiveSignal: Signal<boolean> =
-    this.transients.bindingPreviewActiveSignal;
-  readonly dropTargetShapeIdSignal: Signal<ShapeId | null> =
-    this.transients.dropTargetShapeIdSignal;
-  readonly snapIndicatorsSignal: Signal<SnapIndicatorState[]>;
-  readonly snapIndicatorsActiveSignal: Signal<boolean>;
-  get viewportScreenSizeSignal(): Signal<{ w: number; h: number }> {
-    return this.camera.viewportScreenSizeSignal;
-  }
-  readonly shapeEditingEntryRequestSignal: Signal<ShapeEditingEntryRequest | null> =
-    this.editing.entryRequestSignal;
-  private readonly _shapeDefaultPropsByTypeSignal: Atom<
-    ReadonlyMap<ShapeRecord["type"], ShapePropsPatch>
-  > = atom<ReadonlyMap<ShapeRecord["type"], ShapePropsPatch>>(
-    "editor.shapeDefaultPropsByType",
-    new Map(),
-  );
-  readonly shapeDefaultPropsByTypeSignal: Signal<
-    ReadonlyMap<ShapeRecord["type"], ShapePropsPatch>
-  > = this._shapeDefaultPropsByTypeSignal;
-  private nextShapeNumber = 1;
-  private nextPageNumber = 1;
-  private nextBindingNumber = 1;
-  private nextAssetNumber = 1;
-  private assetUrlResolver: (assetId: AssetId) => string | null = () => null;
-
-  private get _internalStore(): Store<EditorRecord> {
-    return getEditorStore(this);
-  }
-
-  readonly sessionSignal = computed<SessionRecord>("editor.session", () => {
-    const session = this._internalStore.recordsSignal
-      .get()
-      .get(DEFAULT_SESSION_ID);
-    if (!isSessionRecord(session)) {
-      throw new Error("Missing session record");
-    }
-    return session;
-  });
-
-  readonly currentPageIdSignal = computed<PageId>(
-    "editor.currentPageId",
-    () => {
-      return this.sessionSignal.get().currentPageId;
-    },
-  );
-
-  readonly currentPageShapeIdsSignal: Signal<ShapeId[]>;
-
-  readonly currentPageShapesSignal: Signal<ShapeRecord[]>;
-
-  readonly culledShapeIdsSignal: Signal<ShapeId[]>;
-  readonly renderVisibleShapeIdsSignal: Signal<ShapeId[]>;
-  readonly retainedShapeIdsSignal: Signal<ShapeId[]>;
-  readonly selectionPageBoundsSignal: Signal<Box | null>;
-  readonly selectionFrameBoundsSignal: Signal<Box | null>;
-  readonly selectionToolbarAnchorPagePointSignal: Signal<Vec | null>;
-
-  readonly pagesSignal = computed<PageRecord[]>("editor.pages", () => {
-    return Array.from(this._internalStore.recordsSignal.get().values())
-      .filter(isPageRecord)
-      .sort((left, right) => left.index.localeCompare(right.index));
-  });
-
-  readonly currentPageSignal = computed<PageRecord | null>(
-    "editor.currentPage",
-    () => {
-      const currentPageId = this.currentPageIdSignal.get();
-      return (
-        this.pagesSignal.get().find((page) => page.id === currentPageId) ?? null
-      );
-    },
-  );
-
-  readonly pageStateSignal = computed<EditorPageState>(
-    "editor.pageState",
-    () => {
-      const pages = this.pagesSignal.get();
-      const currentPageId = this.currentPageIdSignal.get();
-      const currentPage =
-        pages.find((page) => page.id === currentPageId) ?? null;
-      return {
-        pages,
-        currentPageId,
-        currentPage,
-        canDeleteCurrentPage: pages.length > 1 && currentPage !== null,
-      };
-    },
-  );
-
-  readonly toolStateSignal = computed<EditorToolState>(
-    "editor.toolState",
-    () => {
-      const session = this.sessionSignal.get();
-      return {
-        activeToolId: session.activeToolId,
-        isToolLocked: session.isToolLocked,
-      };
-    },
-  );
-
-  readonly editingShapeIdSignal = computed<ShapeId | null>(
-    "editor.editingShapeId",
-    () => this.sessionSignal.get().editingShapeId,
-  );
-
-  readonly shapeEditingSessionSignal = computed<ShapeEditingSession | null>(
-    "editor.shapeEditingSession",
-    () => this.sessionSignal.get().shapeEditingSession,
-  );
-
-  readonly shapeEditingStateSignal = computed<EditorShapeEditingState>(
-    "editor.shapeEditingState",
-    () => ({
-      editingShapeId: this.editingShapeIdSignal.get(),
-      session: this.shapeEditingSessionSignal.get(),
-    }),
-  );
-
-  readonly currentCameraSignal = computed<Camera>(
-    "editor.currentCamera",
-    () => {
-      const session = this.sessionSignal.get();
-      return (
-        session.pageCameraById[this.currentPageIdSignal.get()] ?? DEFAULT_CAMERA
-      );
-    },
-  );
-
-  readonly selectedShapeIdsSignal = computed<ShapeId[]>(
-    "editor.selectedShapeIds",
-    () => {
-      const session = this.sessionSignal.get();
-      return session.pageSelectedShapeIdsById[session.currentPageId] ?? [];
-    },
-    { isEqual: areShapeIdArraysEqual },
-  );
-
-  readonly selectedShapeIdSetSignal = computed<Set<ShapeId>>(
-    "editor.selectedShapeIdSet",
-    () => new Set(this.selectedShapeIdsSignal.get()),
-    { isEqual: areShapeIdSetsEqual },
-  );
-
-  readonly selectedShapesSignal = computed<ShapeRecord[]>(
-    "editor.selectedShapes",
-    () =>
-      this.selectedShapeIdsSignal
-        .get()
-        .map((id) => this.getShapeSignal(id).get())
-        .filter((shape): shape is ShapeRecord => !!shape),
-  );
-
-  readonly selectedShapeOverlayItemsSignal = computed<
-    SelectedShapeOverlayItem[]
-  >(
-    "editor.selectedShapeOverlayItems",
-    () => {
-      if (this.toolStateSignal.get().activeToolId !== "select") {
-        return [];
-      }
-      return this.selectedShapeIdsSignal
-        .get()
-        .map((id) => this.getShapeSignal(id).get())
-        .filter((shape): shape is ShapeRecord => !!shape)
-        .map((shape) => {
-          const overlayInfo =
-            this.getShapeUtil(shape).getSelectionOverlayInfo(shape);
-          return {
-            id: shape.id,
-            usesSelectionPathOverlay: overlayInfo.usesSelectionPathOverlay,
-            startPagePoint: overlayInfo.startPagePoint,
-            endPagePoint: overlayInfo.endPagePoint,
-            middlePagePoint: overlayInfo.middlePagePoint,
-            path: overlayInfo.path,
-          };
-        });
-    },
-    { isEqual: areSelectedShapeOverlayItemsEqual },
-  );
-
-  readonly selectionStateSignal = computed<EditorSelectionState>(
-    "editor.selectionState",
-    () => {
-      const selectedShapeIds = this.selectedShapeIdsSignal.get();
-      const singleShape =
-        selectedShapeIds.length === 1
-          ? (this.getShapeSignal(selectedShapeIds[0]!).get() ?? null)
-          : null;
-      const selectedShapes = this.selectedShapesSignal.get();
-      const commonShapeType = getCommonShapeType(selectedShapes);
-      const isOnlySelected = selectedShapes.length === 1;
-      const selectedShapeHandleAnchors = selectedShapes.map((shape) =>
-        this.getShapeUtil(shape).getSelectionHandleAnchors(shape, {
-          isOnlySelected,
-          editor: this,
-        }),
-      );
-      const hasPointHandleSelection = selectedShapeHandleAnchors.some(
-        (anchors) =>
-          anchors.terminalHandleAnchors.length > 0 ||
-          anchors.middleHandleAnchors.length > 0 ||
-          (anchors.customHandleAnchors?.length ?? 0) > 0,
-      );
-      const hasFrameSelection = selectedShapes.some((shape) =>
-        this.getShapeUtil(shape).contributesToSelectionFrame(shape, {
-          editor: this,
-        }),
-      );
-      const isMixedFrameAndPointHandleSelection =
-        hasPointHandleSelection && hasFrameSelection;
-      const singleShapeHandleAnchors =
-        singleShape ?
-          this.getShapeUtil(singleShape).getSelectionHandleAnchors(
-            singleShape,
-            { isOnlySelected, editor: this },
-          )
-        : null;
-      const canDragPointHandles =
-        selectedShapeIds.length === 1 &&
-        !!singleShapeHandleAnchors &&
-        (singleShapeHandleAnchors.terminalHandleAnchors.length > 0 ||
-          (singleShapeHandleAnchors.customHandleAnchors?.length ?? 0) > 0);
-      const hasSelectionRotation = this.queries.selectionHasRotationSignal.get();
-      return {
-        count: selectedShapeIds.length,
-        singleShapeType: singleShape?.type ?? null,
-        commonShapeType,
-        hasPointHandleSelection,
-        hasFrameSelection,
-        isMixedFrameAndPointHandleSelection,
-        canDragPointHandles,
-        hasSelectionRotation,
-        hasMixedSelectionRotation:
-          !this.queries.selectionHasCompatibleRotationSignal.get(),
-        canResetSelectionRotation:
-          hasSelectionRotation && hasFrameSelection,
-        frameBounds: this.selectionFrameBoundsSignal.get(),
-        frameRotation: this.queries.selectionRotationSignal.get(),
-        frameRotationCenter: this.queries.selectionRotationCenterSignal.get(),
-        toolbarAnchorPagePoint:
-          this.selectionToolbarAnchorPagePointSignal.get(),
-      };
-    },
-  );
-
-  readonly pageTransformSignal = computed<Mat>("editor.pageTransform", () => {
-    const camera = this.currentCameraSignal.get();
-    return Mat.Scale(camera.z, camera.z).compose(
-      Mat.Translate(-camera.x, -camera.y),
-    );
-  });
-
-  readonly cameraZoomSignal = computed<number>("editor.cameraZoom", () => {
-    return this.currentCameraSignal.get().z;
-  });
-
-  readonly viewportPageBoundsSignal = computed<Box | null>(
-    "editor.viewportPageBounds",
-    () => {
-      const { w, h } = this.viewportScreenSizeSignal.get();
-      if (w <= 0 || h <= 0) {
-        return null;
-      }
-
-      const camera = this.currentCameraSignal.get();
-      return new Box(camera.x, camera.y, w / camera.z, h / camera.z);
-    },
-  );
-
-  readonly renderViewportPageBoundsSignal = computed<Box | null>(
-    "editor.renderViewportPageBounds",
-    (previous) => {
-      const viewportBounds = this.viewportPageBoundsSignal.get();
-      if (!viewportBounds) {
-        return null;
-      }
-
-      if (
-        previous !== UNINITIALIZED &&
-        previous &&
-        doesBoxContainBox(previous, viewportBounds)
-      ) {
-        return previous;
-      }
-
-      return viewportBounds.expand(
-        RENDER_CULLING_OVERSCAN_SCREEN / this.cameraZoomSignal.get(),
-      );
-    },
-    { isEqual: areBoxesEqual },
-  );
-
-  readonly renderItemsSignal: Signal<RenderItem[]>;
-  readonly renderHostDebugStateSignal: Signal<EditorRenderHostDebugState>;
-  readonly historyStateSignal: Signal<HistoryState>;
-  readonly shapeRenderOrderByIdSignal: Signal<Map<ShapeId, number>>;
-  readonly culledShapeIdSetSignal: Signal<Set<ShapeId>>;
-  readonly selectedShapeIdsOutsideCulledSignal: Signal<ShapeId[]>;
-  readonly selectedShapeIdsOutsideCulledSetSignal: Signal<Set<ShapeId>>;
-  readonly renderVisibleShapeIdSetSignal: Signal<Set<ShapeId>>;
-
-  private readonly shapeSignals = new Map<
-    ShapeId,
-    Signal<ShapeRecord | undefined>
-  >();
-  private readonly shapeSelectedSignals = new Map<ShapeId, Signal<boolean>>();
-  private readonly shapeRenderOrderSignals = new Map<ShapeId, Signal<number>>();
-  private readonly shapeRenderVisibleSignals = new Map<
-    ShapeId,
-    Signal<boolean>
-  >();
-  private readonly shapeDocumentVisibleSignals = new Map<
-    ShapeId,
-    Signal<boolean>
-  >();
-  private readonly shapeEditingSessionSignals = new Map<
-    ShapeId,
-    Signal<ShapeEditingSession | null>
-  >();
-  private readonly shapeDropTargetSignals = new Map<ShapeId, Signal<boolean>>();
-  private readonly shapeErasingSignals = new Map<ShapeId, Signal<boolean>>();
-  private readonly shapeSelectedDescendantTransformAncestorSignals = new Map<
-    ShapeId,
-    Signal<boolean>
-  >();
-  private lastPointerDownForClickCount:
-    | { timestamp: number; screenPoint: Vec }
-    | null = null;
-  private lastPointerUpForClickCount:
-    | { timestamp: number; screenPoint: Vec }
-    | null = null;
-  private currentPointerClickCount = 1;
-
-  readonly selectionOverlayFrameGeometrySignal: Signal<SelectionOverlayFrameGeometryState | null>;
-  readonly selectionOverlayCompanionFrameGeometriesSignal: Signal<
-    SelectionOverlayFrameGeometryState[]
-  >;
-  readonly selectionOverlayArrowPathSignal: Signal<string | null>;
-  readonly selectionOverlayFrameStyleSignal: Signal<SelectionOverlayFrameStyleState>;
-  readonly selectionOverlayFrameSignal: Signal<SelectionOverlayFrameState | null>;
-  readonly selectionOverlayHandleAnchorsSignal: Signal<SelectionOverlayHandleAnchorsState | null>;
-  readonly selectionOverlayHandlesSignal: Signal<SelectionOverlayHandlesState | null>;
-  readonly selectionOverlayHandleCountsSignal: Signal<SelectionOverlayHandleCountsState | null>;
-  readonly selectionOverlaySignal: Signal<SelectionOverlayState | null>;
-  readonly overlayDebugStateSignal: Signal<EditorOverlayDebugState>;
-
-  constructor(options: EditorOptions = {}) {
-    this.shapeCapabilityDefinitions = options.shapeCapabilities ?? [];
-    if (options.resolveAssetUrl) {
-      this.assetUrlResolver = options.resolveAssetUrl;
-    }
-
-    for (const util of options.shapeUtils ?? []) {
-      this.shapeUtils.register(util);
-    }
-    for (const exporter of options.shapeSvgExporters ?? []) {
-      this.shapeSvgExporters.register(exporter);
-    }
-    for (const util of options.bindingUtils ?? []) {
-      this.bindingUtils.register(util);
-    }
-
-    const store = new Store<EditorRecord>(
-      this.snapshots.buildInitialRecords(
-        options.documentSnapshot ?? null,
-        options.sessionSnapshot ?? null,
-      ),
-    );
-    setEditorStore(this, store);
-    this.store = store;
-    this.snapshots.ensureSessionIntegrity();
-    this.queries = new QueryManager(this);
-    this.bindings = new BindingManager(this);
-    this.spatialIndex = new SpatialIndexManager(this, this.queries);
-    this.snaps = new SnapManager(this);
-    this.snapIndicatorsSignal = this.snaps.indicatorsSignal;
-    this.snapIndicatorsActiveSignal = this.snaps.activeSignal;
-    this.currentPageShapeIdsSignal = this.queries.currentPageShapeIdsSignal;
-    this.currentPageShapesSignal = this.queries.currentPageShapesSignal;
-    this.selectionPageBoundsSignal = this.queries.selectionPageBoundsSignal;
-    this.selectionFrameBoundsSignal = this.queries.selectionFrameBoundsSignal;
-    this.selectionToolbarAnchorPagePointSignal =
-      this.queries.selectionToolbarAnchorPagePointSignal;
-    this.selectionOverlay = new SelectionOverlayManager(this);
-    this.selectionOverlayFrameGeometrySignal =
-      this.selectionOverlay.frameGeometrySignal;
-    this.selectionOverlayCompanionFrameGeometriesSignal =
-      this.selectionOverlay.companionFrameGeometriesSignal;
-    this.selectionOverlayArrowPathSignal =
-      this.selectionOverlay.arrowPathSignal;
-    this.selectionOverlayFrameStyleSignal =
-      this.selectionOverlay.frameStyleSignal;
-    this.selectionOverlayFrameSignal = this.selectionOverlay.frameSignal;
-    this.selectionOverlayHandleAnchorsSignal =
-      this.selectionOverlay.handleAnchorsSignal;
-    this.selectionOverlayHandlesSignal = this.selectionOverlay.handlesSignal;
-    this.selectionOverlayHandleCountsSignal =
-      this.selectionOverlay.handleCountsSignal;
-    this.selectionOverlaySignal = this.selectionOverlay.overlaySignal;
-    this.overlayDebugStateSignal = this.selectionOverlay.debugStateSignal;
-    this.renderWindow = new RenderWindowManager(this);
-    this.shapeRenderOrderByIdSignal =
-      this.renderWindow.shapeRenderOrderByIdSignal;
-    this.culledShapeIdsSignal = this.renderWindow.culledShapeIdsSignal;
-    this.culledShapeIdSetSignal = this.renderWindow.culledShapeIdSetSignal;
-    this.selectedShapeIdsOutsideCulledSignal =
-      this.renderWindow.selectedShapeIdsOutsideCulledSignal;
-    this.selectedShapeIdsOutsideCulledSetSignal =
-      this.renderWindow.selectedShapeIdsOutsideCulledSetSignal;
-    this.renderVisibleShapeIdsSignal =
-      this.renderWindow.renderVisibleShapeIdsSignal;
-    this.retainedShapeIdsSignal = this.renderWindow.retainedShapeIdsSignal;
-    this.renderVisibleShapeIdSetSignal =
-      this.renderWindow.renderVisibleShapeIdSetSignal;
-    this.renderItemsSignal = this.renderWindow.renderItemsSignal;
-    this.renderHostDebugStateSignal =
-      this.renderWindow.renderHostDebugStateSignal;
-    this.syncShapeCounter();
-    this.syncPageCounter();
-    this.syncBindingCounter();
-    this.syncAssetCounter();
-    this.bindings.repairLoadedBindings("system");
-    this.history = new HistoryManager(this);
-    this.historyStateSignal = this.history.state;
-    this.commands = createEditorCommands(this);
-    this.registerBuiltInSideEffects();
-  }
-
-  private registerBuiltInSideEffects(): void {
-    // Binding cleanup must run before the shapes are removed so the bindings
-    // can still read the doomed shapes. Selection/editing-session repair runs
-    // after the records are gone.
-    this.sideEffects.registerBeforeDeleteHandler("shape", (ids, source) => {
-      this.bindings.cleanupBindingsForDeletedShapes(ids as ShapeId[], source);
-    });
-    this.sideEffects.registerAfterDeleteHandler("shape", (ids, source) => {
-      this.removeShapeIdsFromSelection(ids as ShapeId[], source);
-      this.removeShapeIdsFromEditingSession(ids as ShapeId[], source);
-    });
-  }
-
-  dispatch(event: EditorEvent): void {
-    const normalizedEvent = this.normalizeEvent(event);
-    this.inputs.handleEvent(normalizedEvent);
-
-    if (normalizedEvent.type === "keyboard" && normalizedEvent.name === "key_down") {
-      if (
-        normalizedEvent.altKey &&
-        !normalizedEvent.accelKey &&
-        !normalizedEvent.shiftKey &&
-        (normalizedEvent.key === "ArrowDown" ||
-          normalizedEvent.key === "ArrowUp")
-      ) {
-        const direction =
-          normalizedEvent.key === "ArrowDown" ? "backward" : "forward";
-        if (this.moveSelectionWithinParent(direction, "user")) {
-          return;
-        }
-      }
-
-      if (normalizedEvent.accelKey && normalizedEvent.key.toLowerCase() === "z") {
-        if (normalizedEvent.shiftKey) {
-          this.redo();
-        } else {
-          this.undo();
-        }
-        return;
-      }
-
-      if (!normalizedEvent.accelKey && !normalizedEvent.altKey) {
-        const shortcutToolId = this.tools.getToolIdForShortcut(
-          normalizedEvent.key,
-        );
-        if (shortcutToolId) {
-          this.commands.setActiveTool(shortcutToolId, { source: "system" });
-          return;
-        }
-
-        if (normalizedEvent.key === "Backspace" || normalizedEvent.key === "Delete") {
-          this.deleteSelection("user");
-          return;
-        }
-
-      }
-    }
-
-    if (
-      normalizedEvent.type === "keyboard" &&
-      normalizedEvent.name === "key_down" &&
-      normalizedEvent.key === "Escape"
-    ) {
-      const wasInteracting = !this.tools.isActiveToolInInitialState();
-      if (!wasInteracting && this.getActiveToolId() !== "select") {
-        this.commands.setActiveTool("select", { source: "system" });
-      } else {
-        this.cancelInteractionAndClearTransients("escape");
-      }
-      return;
-    }
-
-    if (normalizedEvent.type === "wheel") {
-      this.handleWheelEvent(normalizedEvent);
-      return;
-    }
-
-    if (normalizedEvent.type === "cancel") {
-      this.cancelInteractionAndClearTransients(normalizedEvent.reason);
-      return;
-    }
-
-    if (normalizedEvent.type === "pointer" && normalizedEvent.name === "pointer_cancel") {
-      this.cancelInteractionAndClearTransients("pointer_cancel");
-      return;
-    }
-
-    if (this.interactions.handleEvent(this, normalizedEvent) === "handled") {
-      return;
-    }
-
-    this.tools.dispatch(normalizedEvent);
-
-    if (
-      normalizedEvent.type === "pointer" &&
-      normalizedEvent.name === "pointer_up"
-    ) {
-      const doubleClickEvent = this.getDoubleClickEvent(normalizedEvent);
-      if (doubleClickEvent) {
-        if (this.interactions.handleEvent(this, doubleClickEvent) !== "handled") {
-          this.tools.dispatch(doubleClickEvent);
-        }
-      }
-    }
-  }
-
-  handleInteractionEvent(event: EditorEvent): boolean {
-    const normalizedEvent = this.normalizeEvent(event);
-    this.inputs.handleEvent(normalizedEvent);
-    return this.interactions.handleEvent(this, normalizedEvent) === "handled";
-  }
-
-  private normalizeEvent(event: EditorEvent): EditorEvent {
-    if (event.type !== "pointer") {
-      return event;
-    }
-
-    if (event.name === "pointer_up") {
-      // Pointer up inherits the click count computed from the preceding down/up
-      // sequence so tools can distinguish single-click caret placement from
-      // double-click select-all without relying on host DOM timing quirks.
-      const nextEvent =
-        event.clickCount === this.currentPointerClickCount
-          ? event
-          : ({
-              ...event,
-              clickCount: this.currentPointerClickCount,
-            } satisfies PointerEditorEvent);
-      this.lastPointerUpForClickCount = {
-        timestamp: nextEvent.timestamp,
-        screenPoint: nextEvent.screenPoint.clone(),
-      };
-      return nextEvent;
-    }
-
-    if (event.name !== "pointer_down") {
-      return event;
-    }
-
-    // Keep double-click detection in core so host layers only forward pointer
-    // events; select/text tools can then share one consistent click contract.
-    const previousDown = this.lastPointerDownForClickCount;
-    const previousUp = this.lastPointerUpForClickCount;
-    const nextClickCount =
-      previousDown &&
-      previousUp &&
-      previousUp.timestamp >= previousDown.timestamp &&
-      event.timestamp - previousUp.timestamp <= DOUBLE_CLICK_DURATION_MS &&
-      previousUp.screenPoint.dist2(event.screenPoint) <=
-        DOUBLE_CLICK_DISTANCE_SQUARED
-        ? 2
-        : 1;
-
-    this.lastPointerDownForClickCount = {
-      timestamp: event.timestamp,
-      screenPoint: event.screenPoint.clone(),
-    };
-    this.currentPointerClickCount = nextClickCount;
-
-    if (event.clickCount === nextClickCount) {
-      return event;
-    }
-
-    return {
-      ...event,
-      clickCount: nextClickCount,
-    } satisfies PointerEditorEvent;
-  }
-
-  private getDoubleClickEvent(
-    event: PointerEditorEvent,
-  ): ClickEditorEvent | null {
-    if ((event.clickCount ?? 1) < 2 || this.currentPointerClickCount < 2) {
-      return null;
-    }
-
-    return {
-      type: "click",
-      name: "double_click",
-      phase: "up",
-      timestamp: event.timestamp,
-      pointerId: event.pointerId,
-      button: event.button,
-      buttons: event.buttons,
-      pointerType: event.pointerType,
-      screenPoint: event.screenPoint.clone(),
-      pagePoint: event.pagePoint.clone(),
-      pressure: event.pressure,
-      shiftKey: event.shiftKey,
-      altKey: event.altKey,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      accelKey: event.accelKey,
-    };
-  }
-
-  listen(listener: (change: StoreChange<EditorRecord>) => void): () => void {
-    return this.store.listen((change) => listener(change));
-  }
-
-  getRenderItems(): RenderItem[] {
-    return this.renderItemsSignal.get();
-  }
-
-  getPages(): PageRecord[] {
-    return this.pagesSignal.get();
-  }
-
-  getCurrentPageId(): PageId {
-    return this.currentPageIdSignal.get();
-  }
-
-  getActiveToolId(): string {
-    return this.sessionSignal.get().activeToolId;
-  }
-
-  isToolLocked(): boolean {
-    return this.sessionSignal.get().isToolLocked;
-  }
-
-  isActiveToolInInitialState(): boolean {
-    return this.tools.isActiveToolInInitialState();
-  }
-
-  getEditingShapeId(): ShapeId | null {
-    return this.editingShapeIdSignal.get();
-  }
-
-  getShapeEditingSession(): ShapeEditingSession | null {
-    return this.shapeEditingSessionSignal.get();
-  }
-
-  getShapeEditingEntryRequest(): ShapeEditingEntryRequest | null {
-    return this.shapeEditingEntryRequestSignal.get();
-  }
-
-  resetPointerClickTracking(): void {
-    this.lastPointerDownForClickCount = null;
-    this.lastPointerUpForClickCount = null;
-    this.currentPointerClickCount = 1;
-  }
-
-  getCurrentPageShapeIds(): ShapeId[] {
-    return this.currentPageShapeIdsSignal.get();
-  }
-
-  getPage(id: PageId): PageRecord | undefined {
-    const record = this._internalStore.get(id);
-    return isPageRecord(record) ? record : undefined;
-  }
-
-  getCurrentCamera(): Camera {
-    return this.camera.getCurrentCamera();
-  }
-
-  undo(): boolean {
-    this.cancelInteractionForCommand();
-    return this.history.undo();
-  }
-
-  redo(): boolean {
-    this.cancelInteractionForCommand();
-    return this.history.redo();
-  }
-
-  createPageAndSelect(
-    input?: CreatePageInput,
-    source: ChangeSource = "user",
-  ): PageRecord {
-    const page = this.commands.createPage(input, { source });
-    this.commands.setCurrentPageId(page.id, { source });
-    return page;
-  }
-
-  selectPage(pageId: PageId, source: ChangeSource = "user"): void {
-    this.commands.setCurrentPageId(pageId, { source });
-  }
-
-  renamePage(
-    pageId: PageId,
-    name: string,
-    source: ChangeSource = "user",
-  ): void {
-    this.commands.renamePage({ id: pageId, name }, { source });
-  }
-
-  deletePage(pageId: PageId, source: ChangeSource = "user"): boolean {
-    this.cancelInteractionForCommand();
-    return this.commands.deletePage(pageId, { source });
-  }
-
-  setActiveTool(toolId: string, source: ChangeSource = "system"): void {
-    this.commands.setActiveTool(toolId, { source });
-  }
-
-  setToolLocked(locked: boolean, source: ChangeSource = "system"): void {
-    this.commands.setToolLocked(locked, { source });
-  }
-
-  toggleToolLocked(source: ChangeSource = "system"): void {
-    this.setToolLocked(!this.isToolLocked(), source);
-  }
-
-  getCamera(pageId: PageId = this.getCurrentPageId()): Camera {
-    return this.camera.getCamera(pageId);
-  }
-
-  pageToScreen(point: Vec, pageId: PageId = this.getCurrentPageId()): Vec {
-    return this.camera.pageToScreen(point, pageId);
-  }
-
-  screenToPage(point: Vec, pageId: PageId = this.getCurrentPageId()): Vec {
-    return this.camera.screenToPage(point, pageId);
-  }
-
-  getSelectedShapeIds(pageId: PageId = this.getCurrentPageId()): ShapeId[] {
-    if (pageId === this.getCurrentPageId()) {
-      return this.selectedShapeIdsSignal.get();
-    }
-    return this.sessionSignal.get().pageSelectedShapeIdsById[pageId] ?? [];
-  }
-
-  isShapeHidden(shapeId: ShapeId): boolean {
-    const seen = new Set<ShapeId>();
-    let shape = this.getShape(shapeId);
-    while (shape) {
-      if (shape.isHidden) {
-        return true;
-      }
-      if (!shape.parentId.startsWith("shape:")) {
-        return false;
-      }
-
-      const parentId = shape.parentId as ShapeId;
-      if (seen.has(parentId)) {
-        return false;
-      }
-      seen.add(parentId);
-      shape = this.getShape(parentId);
-    }
-
-    return false;
-  }
-
-  getSelectedShapes(): ShapeRecord[] {
-    return this.selectedShapesSignal.get();
-  }
-
-  getDefaultShapeProps<TProps extends object = object>(
-    type: ShapeRecord["type"],
-  ): TProps {
-    const util = this.shapeUtils.get(type);
-    const override = this._shapeDefaultPropsByTypeSignal.get().get(type) ?? {};
-    return util.validateProps({
-      ...util.getDefaultProps(),
-      ...override,
-    }) as TProps;
-  }
-
-  updateDefaultShapeProps(
-    type: ShapeRecord["type"],
-    props: ShapePropsPatch,
-  ): void {
-    const util = this.shapeUtils.get(type);
-    const current = this._shapeDefaultPropsByTypeSignal.get().get(type) ?? {};
-    const nextProps = util.validateProps({
-      ...util.getDefaultProps(),
-      ...current,
-      ...props,
-    });
-    const fallback = util.validateProps(util.getDefaultProps());
-    const nextOverride: ShapePropsPatch = {};
-
-    for (const [key, value] of Object.entries(nextProps)) {
-      if ((fallback as Record<string, unknown>)[key] !== value) {
-        nextOverride[key] = value;
-      }
-    }
-
-    if (areShapePropsPatchesEqual(current, nextOverride)) {
-      return;
-    }
-
-    const nextDefaults = new Map(this._shapeDefaultPropsByTypeSignal.get());
-    if (Object.keys(nextOverride).length === 0) {
-      nextDefaults.delete(type);
-    } else {
-      nextDefaults.set(type, nextOverride);
-    }
-    this._shapeDefaultPropsByTypeSignal.set(nextDefaults);
-  }
-
-  getSelectionParentOrderState(): ShapeSelectionSiblingOrderState | null {
-    return this.hierarchy.getSelectionParentOrderState();
-  }
-
-  getSelectionGroupState(): ShapeGroupState | null {
-    return this.hierarchy.getSelectionGroupState();
-  }
-
-  canGroupSelection(): boolean {
-    return this.hierarchy.canGroupSelection();
-  }
-
-  getLayerTree(pageId: PageId = this.getCurrentPageId()): LayerTreeNode[] {
-    return this.hierarchy.getLayerTree(pageId);
-  }
-
-  getLayerNode(id: ShapeId): LayerTreeNode | null {
-    return this.hierarchy.getLayerNode(id);
-  }
-
-  canGroupShapes(ids: readonly ShapeId[]): boolean {
-    return this.hierarchy.canGroupShapes(ids);
-  }
-
-  groupShapes(
-    ids: readonly ShapeId[],
-    source: ChangeSource = "user",
-  ): ShapeRecord | null {
-    return this.hierarchy.groupShapes(ids, source);
-  }
-
-  groupSelection(source: ChangeSource = "user"): ShapeRecord | null {
-    return this.hierarchy.groupSelection(source);
-  }
-
-  getUngroupableSelectedShapeIds(): ShapeId[] {
-    return this.hierarchy.getUngroupableSelectedShapeIds();
-  }
-
-  getUngroupableShapeIds(ids: readonly ShapeId[]): ShapeId[] {
-    return this.hierarchy.getUngroupableShapeIds(ids);
-  }
-
-  canUngroupSelection(): boolean {
-    return this.hierarchy.canUngroupSelection();
-  }
-
-  canUngroupShapes(ids: readonly ShapeId[]): boolean {
-    return this.hierarchy.canUngroupShapes(ids);
-  }
-
-  ungroupShapes(
-    ids: readonly ShapeId[],
-    source: ChangeSource = "user",
-  ): ShapeId[] {
-    return this.hierarchy.ungroupShapes(ids, source);
-  }
-
-  ungroupSelection(source: ChangeSource = "user"): ShapeId[] {
-    return this.hierarchy.ungroupSelection(source);
-  }
-
-  getSelectionSiblingOrderState(): ShapeSiblingOrderState | null {
-    return this.hierarchy.getSelectionSiblingOrderState();
-  }
-
-  canMoveSelectionWithinParent(
-    direction: ShapeSiblingOrderDirection,
-  ): boolean {
-    return this.hierarchy.canMoveSelectionWithinParent(direction);
-  }
-
-  canMoveSelectionInParentOrder(
-    direction: ShapeSiblingOrderDirection,
-  ): boolean {
-    return this.hierarchy.canMoveSelectionInParentOrder(direction);
-  }
-
-  canMoveShapesInParentOrder(
-    ids: readonly ShapeId[],
-    direction: LayerOrderDirection,
-  ): boolean {
-    return this.hierarchy.canMoveShapesInParentOrder(ids, direction);
-  }
-
-  moveShapesInParentOrder(
-    ids: readonly ShapeId[],
-    direction: LayerOrderDirection,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveShapesInParentOrder(ids, direction, source);
-  }
-
-  moveShapesToParentOrderEdge(
-    ids: readonly ShapeId[],
-    edge: LayerOrderEdge,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveShapesToParentOrderEdge(ids, edge, source);
-  }
-
-  moveSelectionWithinParent(
-    direction: ShapeSiblingOrderDirection,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveSelectionWithinParent(direction, source);
-  }
-
-  /**
-   * Align selected top-level shapes along an edge or center of their combined
-   * page bounds. Only shapes parented directly to the current page are moved so
-   * the page-space delta maps directly onto `x`/`y`. Needs at least two shapes.
-   */
-  alignSelection(
-    mode:
-      | "left"
-      | "horizontal-center"
-      | "right"
-      | "top"
-      | "vertical-center"
-      | "bottom",
-    source: ChangeSource = "user",
-  ): boolean {
-    this.cancelInteractionForCommand();
-    return this.selectionLayout.align(mode, source);
-  }
-
-  /**
-   * Distribute selected top-level shapes so the gaps between them are equal
-   * along the given axis. Needs at least three shapes.
-   */
-  distributeSelection(
-    axis: "horizontal" | "vertical",
-    source: ChangeSource = "user",
-  ): boolean {
-    this.cancelInteractionForCommand();
-    return this.selectionLayout.distribute(axis, source);
-  }
-
-  moveShapesToParentPlacement(
-    input: ReparentShapePlacementInput,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveShapesToParentPlacement(input, source);
-  }
-
-  moveShapesToParentPlacementResult(
-    input: ReparentShapePlacementInput,
-    source: ChangeSource = "user",
-  ): ReparentShapePlacementResult {
-    return this.hierarchy.moveShapesToParentPlacementResult(input, source);
-  }
-
-  moveSelectionInParentOrder(
-    direction: ShapeSiblingOrderDirection,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveSelectionInParentOrder(direction, source);
-  }
-
-  moveSelectionToParentOrderEdge(
-    edge: ShapeSiblingOrderEdge,
-    source: ChangeSource = "user",
-  ): boolean {
-    return this.hierarchy.moveSelectionToParentOrderEdge(edge, source);
-  }
-
-  canEditShape(shapeOrId: ShapeRecord | ShapeId | null | undefined): boolean {
-    return this.editing.canEditShape(shapeOrId);
-  }
-
-  startEditingShape(
-    input: StartEditingShapeInput,
-    source: ChangeSource = "user",
-  ): ShapeEditingSession | null {
-    return this.editing.start(input, source);
-  }
-
-  completeEditing(source: ChangeSource = "user"): boolean {
-    return this.editing.complete(source);
-  }
-
-  cancelEditing(source: ChangeSource = "user"): boolean {
-    return this.editing.cancel(source);
-  }
-
-  setShapeEditingComposition(
-    isComposing: boolean,
-    source: ChangeSource = "system",
-  ): void {
-    this.editing.setComposition(isComposing, source);
-  }
-
-  consumeShapeEditingEntryRequest(requestId: number): void {
-    this.editing.consumeEntryRequest(requestId);
-  }
-
-  deleteSelection(source: ChangeSource = "user"): void {
-    this.deleteShapesById(this.getSelectedShapeIds(), source);
-  }
-
-  deleteShapesById(
-    ids: readonly ShapeId[],
-    source: ChangeSource = "user",
-  ): void {
-    const uniqueIds = Array.from(new Set(ids));
-    if (uniqueIds.length === 0) {
-      return;
-    }
-    this.cancelInteractionForCommand();
-    this.commands.deleteShapes(uniqueIds, { source });
-  }
-
-  setShapesHidden(
-    ids: readonly ShapeId[],
-    isHidden: boolean,
-    source: ChangeSource = "user",
-  ): ShapeId[] {
-    const nextIds = Array.from(
-      new Set(
-        ids.filter((id) => {
-          const shape = this.getShape(id);
-          return !!shape && shape.isHidden !== isHidden;
-        }),
-      ),
-    );
-    if (nextIds.length === 0) {
-      return [];
-    }
-
-    this.cancelInteractionForCommand();
-    this.commands.updateShapes(
-      nextIds.map((id) => ({
-        id,
-        isHidden,
-      })),
-      { source },
-    );
-
-    if (isHidden) {
-      this.removeShapeIdsFromSelection(
-        this.getShapeIdsIncludingDescendants(nextIds),
-        source,
-      );
-      this.removeShapeIdsFromEditingSession(
-        this.getShapeIdsIncludingDescendants(nextIds),
-        source,
-      );
-    }
-
-    return nextIds;
-  }
-
-  setShapesLocked(
-    ids: readonly ShapeId[],
-    isLocked: boolean,
-    source: ChangeSource = "user",
-  ): ShapeId[] {
-    const nextIds = Array.from(
-      new Set(
-        ids.filter((id) => {
-          const shape = this.getShape(id);
-          return !!shape && shape.isLocked !== isLocked;
-        }),
-      ),
-    );
-    if (nextIds.length === 0) {
-      return [];
-    }
-
-    this.cancelInteractionForCommand();
-    this.commands.updateShapes(
-      nextIds.map((id) => ({
-        id,
-        isLocked,
-      })),
-      { source },
-    );
-
-    if (isLocked) {
-      this.removeShapeIdsFromSelection(
-        this.getShapeIdsIncludingDescendants(nextIds),
-        source,
-      );
-      this.removeShapeIdsFromEditingSession(
-        this.getShapeIdsIncludingDescendants(nextIds),
-        source,
-      );
-    }
-
-    return nextIds;
-  }
-
-  createClipboardPayloadFromSelection(): EditorClipboardPayload | null {
-    return this.clipboard.createPayloadFromSelection();
-  }
-
-  pasteClipboardPayload(input: PasteClipboardPayloadInput): ShapeId[] {
-    return this.clipboard.pastePayload(input);
-  }
-
-  duplicateSelection(input: DuplicateSelectionInput = {}): ShapeId[] {
-    return this.clipboard.duplicateSelection(input);
-  }
-
-  selectAllCurrentPage(source: ChangeSource = "user"): void {
-    this.cancelInteractionForCommand();
-    this.selection.selectAllCurrentPage(source);
-  }
-
-  resetSelectionRotation(source: ChangeSource = "user"): void {
-    resetEditorSelectionRotation(this, source);
-  }
-
-  flipSelection(
-    axis: ShapeSelectionFlipAxis,
-    source: ChangeSource = "user",
-  ): void {
-    const updates = getEditorSelectionFlipUpdates(this, axis);
-    if (updates.length === 0) {
-      return;
-    }
-
-    this.cancelInteractionForCommand();
-    this.commands.updateShapes(updates, { source });
-  }
-
-  getShape(id: ShapeId): ShapeRecord | undefined {
-    const record = this._internalStore.get(id);
-    return isShapeRecord(record) ? record : undefined;
-  }
-
-  getAsset(id: AssetId): AssetRecord | undefined {
-    const record = this._internalStore.get(id);
-    return isAssetRecord(record) ? record : undefined;
-  }
-
-  getAssets(): AssetRecord[] {
-    return this._internalStore
-      .getAll()
-      .filter(isAssetRecord)
-      .sort((left, right) => left.id.localeCompare(right.id));
-  }
-
-  resolveAssetUrl(assetId: AssetId): string | null {
-    return this.assetUrlResolver(assetId);
-  }
-
-  getUnreferencedAssetIdsAfterShapeDelete(
-    shapeIds: readonly ShapeId[],
-  ): AssetId[] {
-    if (shapeIds.length === 0) {
-      return [];
-    }
-
-    const deletedShapeIds = new Set(shapeIds);
-    const deletedAssetIds = new Set<AssetId>();
-    const retainedAssetIds = new Set<AssetId>();
-
-    for (const shape of this._internalStore.getAll().filter(isShapeRecord)) {
-      const assetId = getShapeAssetId(shape);
-      if (!assetId) {
-        continue;
-      }
-      if (deletedShapeIds.has(shape.id)) {
-        deletedAssetIds.add(assetId);
-      } else {
-        retainedAssetIds.add(assetId);
-      }
-    }
-
-    return this.getAssets()
-      .map((asset) => asset.id)
-      .filter(
-        (assetId) =>
-          deletedAssetIds.has(assetId) && !retainedAssetIds.has(assetId),
-      );
-  }
-
-  getShapeSignal(id: ShapeId): Signal<ShapeRecord | undefined> {
-    let signal = this.shapeSignals.get(id);
-    if (!signal) {
-      signal = computed<ShapeRecord | undefined>(`editor.shape.${id}`, () =>
-        this.getShape(id),
-      );
-      this.shapeSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeSelectedSignal(id: ShapeId): Signal<boolean> {
-    let signal = this.shapeSelectedSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(`editor.shapeSelected.${id}`, () =>
-        this.selectedShapeIdSetSignal.get().has(id),
-      );
-      this.shapeSelectedSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeRenderOrderSignal(id: ShapeId): Signal<number> {
-    let signal = this.shapeRenderOrderSignals.get(id);
-    if (!signal) {
-      signal = computed<number>(`editor.shapeRenderOrder.${id}`, () => {
-        return this.shapeRenderOrderByIdSignal.get().get(id) ?? -1;
-      });
-      this.shapeRenderOrderSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeRenderVisibleSignal(id: ShapeId): Signal<boolean> {
-    let signal = this.shapeRenderVisibleSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(`editor.shapeRenderVisible.${id}`, () => {
-        return (
-          this.renderVisibleShapeIdSetSignal.get().has(id) &&
-          !this.isShapeHidden(id)
-        );
-      });
-      this.shapeRenderVisibleSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeDocumentVisibleSignal(id: ShapeId): Signal<boolean> {
-    let signal = this.shapeDocumentVisibleSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(`editor.shapeDocumentVisible.${id}`, () => {
-        const shape = this.getShapeSignal(id).get();
-        return !!shape && !this.isShapeHidden(shape.id);
-      });
-      this.shapeDocumentVisibleSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeEditingSessionForShapeSignal(
-    id: ShapeId,
-  ): Signal<ShapeEditingSession | null> {
-    let signal = this.shapeEditingSessionSignals.get(id);
-    if (!signal) {
-      signal = computed<ShapeEditingSession | null>(
-        `editor.shapeEditingSessionForShape.${id}`,
-        () => {
-          const session = this.shapeEditingSessionSignal.get();
-          return session?.shapeId === id ? session : null;
-        },
-      );
-      this.shapeEditingSessionSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeDropTargetSignal(id: ShapeId): Signal<boolean> {
-    let signal = this.shapeDropTargetSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(`editor.shapeDropTarget.${id}`, () => {
-        return this.dropTargetShapeIdSignal.get() === id;
-      });
-      this.shapeDropTargetSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeErasingSignal(id: ShapeId): Signal<boolean> {
-    let signal = this.shapeErasingSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(`editor.shapeErasing.${id}`, () => {
-        const erasingShapeIds = new Set(this.erasingShapeIdsSignal.get());
-        return this.hierarchy.isShapeOrAncestorInSet(id, erasingShapeIds);
-      });
-      this.shapeErasingSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getShapeSelectedDescendantTransformAncestorSignal(
-    id: ShapeId,
-  ): Signal<boolean> {
-    let signal = this.shapeSelectedDescendantTransformAncestorSignals.get(id);
-    if (!signal) {
-      signal = computed<boolean>(
-        `editor.shapeSelectedDescendantTransformAncestor.${id}`,
-        () => {
-          if (this.getShapeSelectedSignal(id).get()) {
-            return false;
-          }
-          const shape = this.getShapeSignal(id).get();
-          if (
-            !shape ||
-            !this.getShapeUtil(shape).shouldTransformDescendants(shape)
-          ) {
-            return false;
-          }
-          return this.selectedShapeIdsSignal
-            .get()
-            .some((selectedShapeId) =>
-              this.hierarchy.isShapeDescendantOf(selectedShapeId, id),
-            );
-        },
-      );
-      this.shapeSelectedDescendantTransformAncestorSignals.set(id, signal);
-    }
-    return signal;
-  }
-
-  getBinding(id: BindingId): BindingRecord | undefined {
-    const record = this._internalStore.get(id);
-    return isBindingRecord(record) ? record : undefined;
-  }
-
-  getShapesForPage(pageId: PageId): ShapeRecord[] {
-    return this.queries.getShapesForPage(pageId);
-  }
-
-  getBindingsFromShape(shapeId: ShapeId): BindingRecord[] {
-    return this.queries.getBindingsFromShape(shapeId);
-  }
-
-  getBindingsToShape(shapeId: ShapeId): BindingRecord[] {
-    return this.queries.getBindingsToShape(shapeId);
-  }
-
-  getBindingsForShape(shapeId: ShapeId): BindingRecord[] {
-    return this.queries.getBindingsForShape(shapeId);
-  }
-
-  getChildShapeIds(parentId: ShapeParentId): ShapeId[] {
-    return this.queries.getChildShapeIds(parentId);
-  }
-
-  getChildShapes(parentId: ShapeParentId): ShapeRecord[] {
-    return this.queries.getChildShapes(parentId);
-  }
-
-  getDescendantShapeIds(parentId: ShapeParentId): ShapeId[] {
-    return this.queries.getDescendantShapeIds(parentId);
-  }
-
-  getDescendantPageBounds(parentId: ShapeParentId): Box | null {
-    return this.queries.getDescendantPageBounds(parentId);
-  }
-
-  getShapeSubtreePageBounds(shapeId: ShapeId): Box | null {
-    return this.queries.getShapeSubtreePageBounds(shapeId);
-  }
-
-  getShapePageId(shapeId: ShapeId): PageId | null {
-    return this.queries.getPageIdForShape(shapeId);
-  }
-
-  isShapeOrAncestorLocked(shapeId: ShapeId): boolean {
-    return this.hierarchy.isShapeOrAncestorLocked(shapeId);
-  }
-
-  hasLockedDescendant(shapeId: ShapeId): boolean {
-    return this.hierarchy.hasLockedDescendant(shapeId);
-  }
-
-  getOutermostSelectableShapeId(shapeId: ShapeId): ShapeId {
-    return this.hierarchy.getOutermostSelectableShapeId(shapeId);
-  }
-
-  getShapeIdsIncludingDescendants(shapeIds: Iterable<ShapeId>): ShapeId[] {
-    return this.hierarchy.getShapeIdsIncludingDescendants(shapeIds);
-  }
-
-  getShapeIdsForSelectionTransform(shapeIds: Iterable<ShapeId>): ShapeId[] {
-    return this.hierarchy.getShapeIdsForSelectionTransform(shapeIds);
-  }
-
-  getShapeIdsForSelectionRotation(shapeIds: Iterable<ShapeId>): ShapeId[] {
-    return this.hierarchy.getShapeIdsForSelectionRotation(shapeIds);
-  }
-
-  getSelectionTransformTargetShapes(): ShapeRecord[] {
-    return this.hierarchy.getSelectionTransformTargetShapes();
-  }
-
-  getSelectionRotationTargetShapes(): ShapeRecord[] {
-    return this.hierarchy.getSelectionRotationTargetShapes();
-  }
-
-  getShapeExportTraversalIds(shapeIds: Iterable<ShapeId>): ShapeId[] {
-    return this.hierarchy.getShapeExportTraversalIds(shapeIds);
-  }
-
-  getShapeContainment(
-    containerId: ShapeId,
-    shapeId: ShapeId,
-  ): ShapeContainment | null {
-    return this.queries.getShapeContainment(containerId, shapeId);
-  }
-
-  getContainingShapeParentId(
-    shapeIds: Iterable<ShapeId>,
-  ): ShapeParentId | null {
-    return this.queries.getContainingShapeParentId(shapeIds);
-  }
-
-  getContainingParentIdForShapeRecord(shape: ShapeRecord): ShapeParentId | null {
-    return this.queries.getContainingParentIdForShapeRecord(shape);
-  }
-
-  getShapeClipAncestorIds(shapeId: ShapeId): ShapeId[] {
-    return this.queries.getShapeClipAncestorIds(shapeId);
-  }
-
-  getShapeClipAncestorIdsSignal(shapeId: ShapeId): Signal<ShapeId[]> {
-    return this.queries.getShapeClipAncestorIdsSignal(shapeId);
-  }
-
-  isPagePointInShapeClip(shapeId: ShapeId, point: Vec): boolean {
-    return this.queries.isPagePointInShapeClip(shapeId, point);
-  }
-
-  getShapeClippedPageBounds(shapeId: ShapeId): Box | null {
-    return this.queries.getShapeClippedPageBounds(shapeId);
-  }
-
-  getShapeIdsInContainerBounds(
-    containerId: ShapeId,
-    options: ContainerBoundsQueryOptions = {},
-  ): ShapeId[] {
-    return this.hierarchy.getShapeIdsInContainerBounds(containerId, options);
-  }
-
-  canUseShapeParent(parentId: ShapeParentId, childId?: ShapeId): boolean {
-    return this.hierarchy.canUseShapeParent(parentId, childId);
-  }
-
-  getShapeUtil<S extends ShapeRecord>(shape: S): ShapeUtil<S> {
-    return this.shapeUtils.get(shape.type);
-  }
-
-  getBindingUtil<B extends BindingRecord>(binding: B): BindingUtil<B> {
-    return this.bindingUtils.get(binding.type);
-  }
-
-  // Pure geometry helpers operate only on the provided shape snapshot.
-  computeShapeBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapeBounds(shape);
-  }
-
-  computeShapeLocalBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapeLocalBounds(shape);
-  }
-
-  computeShapeRenderBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapeRenderBounds(shape);
-  }
-
-  computeShapeExportBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapeExportBounds(shape);
-  }
-
-  computeShapeLocalToPageTransform(shape: ShapeRecord): Mat {
-    return this.geometry.computeShapeLocalToPageTransform(shape);
-  }
-
-  computeShapeRenderToPageTransform(shape: ShapeRecord): Mat {
-    return this.geometry.computeShapeRenderToPageTransform(shape);
-  }
-
-  computeShapeExportToPageTransform(shape: ShapeRecord): Mat {
-    return this.geometry.computeShapeExportToPageTransform(shape);
-  }
-
-  computeShapePageBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapePageBounds(shape);
-  }
-
-  computeShapeExportPageBounds(shape: ShapeRecord): Box {
-    return this.geometry.computeShapeExportPageBounds(shape);
-  }
-
-  computeShapeGeometry(shape: ShapeRecord): ShapeGeometry {
-    return this.geometry.computeShapeGeometry(shape);
-  }
-
-  computeShapePositionedToPageTransform(shape: ShapeRecord): Mat {
-    return this.geometry.computeShapePositionedToPageTransform(shape);
-  }
-
-  computeShapePageCenter(shape: ShapeRecord): Vec {
-    return this.geometry.computeShapePageCenter(shape);
-  }
-
-  computeShapePageCorners(shape: ShapeRecord): Vec[] {
-    return this.geometry.computeShapePageCorners(shape);
-  }
-
-  computeShapePageOutlineVertices(shape: ShapeRecord): Vec[] {
-    return this.geometry.computeShapePageOutlineVertices(shape);
-  }
-
-  // Query helpers always read the current editor state for a shape id.
-  getShapeBounds(shapeId: ShapeId): Box | null {
-    return this.geometry.getShapeBounds(shapeId);
-  }
-
-  getShapePageBounds(shapeId: ShapeId): Box | null {
-    return this.geometry.getShapePageBounds(shapeId);
-  }
-
-  getShapeGeometry(shapeId: ShapeId): ShapeGeometry | null {
-    return this.geometry.getShapeGeometry(shapeId);
-  }
-
-  getShapePositionedToPageTransform(shapeId: ShapeId): Mat | null {
-    return this.geometry.getShapePositionedToPageTransform(shapeId);
-  }
-
-  getShapePageCenter(shapeId: ShapeId): Vec | null {
-    return this.geometry.getShapePageCenter(shapeId);
-  }
-
-  getShapePageCorners(shapeId: ShapeId): Vec[] | null {
-    return this.geometry.getShapePageCorners(shapeId);
-  }
-
-  getShapePageOutlineVertices(shapeId: ShapeId): Vec[] {
-    return this.geometry.getShapePageOutlineVertices(shapeId);
-  }
-
-  getSelectionPageBounds(): Box | null {
-    return this.geometry.getSelectionPageBounds();
-  }
-
-  getSelectionFrame():
-    | SelectionFrame
-    | null {
-    return this.geometry.getSelectionFrame();
-  }
-
-  isPointInSelectionBounds(point: Vec): boolean {
-    return this.geometry.isPointInSelectionBounds(point);
-  }
-
-  getSelectionFrameLocalBoundsPoint(point: Vec): Vec | null {
-    return this.geometry.getSelectionFrameLocalBoundsPoint(point);
-  }
-
-  getSelectionPageOutlineVertices(): Vec[] {
-    return this.geometry.getSelectionPageOutlineVertices();
-  }
-
-  getSelectionToolbarAnchorPagePoint(): Vec | null {
-    return this.geometry.getSelectionToolbarAnchorPagePoint();
-  }
-
-  hitTestSelectionHandle(point: Vec): SelectionHandle | null {
-    const selectedShapes = this.selectedShapesSignal.get();
-    const selectionFrame = this.getSelectionFrame();
-    if (selectedShapes.length === 0) {
-      return null;
-    }
-    const isOnlySelected = selectedShapes.length === 1;
-    const {
-      terminalHandles,
-      middleHandles,
-      customHandles,
-      rotateHandles,
-      resizeHandles,
-    } =
-      getSelectionHandleState(
-        selectedShapes,
-        selectionFrame,
-        this.getCurrentCamera().z,
-        (shape) =>
-          this.getShapeUtil(shape).getSelectionHandleAnchors(shape, {
-            isOnlySelected,
-            editor: this,
-          }),
-        (shape) =>
-          this.getShapeUtil(shape).canUseSelectionFrameHandles(shape, {
-            editor: this,
-          }),
-      );
-
-    for (const handle of middleHandles) {
-      if (
-        handle.bounds
-          .expand(
-            SELECTION_HANDLE_HIT_PADDING_SCREEN / this.getCurrentCamera().z,
-          )
-          .containsPoint(point)
-      ) {
-        return handle;
-      }
-    }
-
-    for (const handle of terminalHandles) {
-      if (
-        handle.bounds
-          .expand(
-            SELECTION_HANDLE_HIT_PADDING_SCREEN / this.getCurrentCamera().z,
-          )
-          .containsPoint(point)
-      ) {
-        return handle;
-      }
-    }
-
-    for (const handle of customHandles) {
-      if (
-        handle.bounds
-          .expand(SELECTION_HANDLE_HIT_PADDING_SCREEN / this.getCurrentCamera().z)
-          .containsPoint(point)
-      ) {
-        return handle;
-      }
-    }
-
-    for (const handle of resizeHandles) {
-      if (handle.bounds.containsPoint(point)) {
-        return handle;
-      }
-    }
-
-    for (const handle of rotateHandles) {
-      if (
-        handle.bounds
-          .expand(SELECTION_HANDLE_HIT_PADDING_SCREEN / this.getCurrentCamera().z)
-          .containsPoint(point)
-      ) {
-        return handle;
-      }
-    }
-
-    return null;
-  }
-
-  setBrushBox(brushBox: Box | null): void {
-    this.transients.setBrushBox(brushBox);
-  }
-
-  getErasingShapeIds(): ShapeId[] {
-    return this.transients.getErasingShapeIds();
-  }
-
-  setErasingShapeIds(shapeIds: readonly ShapeId[]): void {
-    this.transients.setErasingShapeIds(shapeIds);
-  }
-
-  clearErasingShapeIds(): void {
-    this.transients.clearErasingShapeIds();
-  }
-
-  getEraserTrail(): Vec[] {
-    return this.transients.getEraserTrail();
-  }
-
-  setEraserTrail(points: readonly Vec[]): void {
-    this.transients.setEraserTrail(points);
-  }
-
-  clearEraserTrail(): void {
-    this.transients.clearEraserTrail();
-  }
-
-  startLaserTrail(): number {
-    return this.transients.startLaserTrail();
-  }
-
-  setLaserTrail(sessionId: number, points: readonly Vec[]): void {
-    this.transients.setLaserTrail(sessionId, points);
-  }
-
-  finishLaserTrail(sessionId: number): void {
-    this.transients.finishLaserTrail(sessionId);
-  }
-
-  clearLaserTrail(sessionId: number): void {
-    this.transients.clearLaserTrail(sessionId);
-  }
-
-  setBindingPreview(preview: ArrowBindingPreviewState | null): void {
-    this.transients.setBindingPreview(preview);
-  }
-
-  setDropTargetShapeId(shapeId: ShapeId | null): void {
-    this.transients.setDropTargetShapeId(shapeId);
-  }
-
-  setSnapIndicators(indicators: SnapIndicatorState[] | null): void {
-    this.transients.setSnapIndicators(indicators);
-  }
-
-  setArrowTerminalBindingResolver(
-    resolver: ArrowTerminalBindingResolver,
-  ): void {
-    this.transients.setArrowTerminalBindingResolver(resolver);
-  }
-
-  resolveArrowTerminalBinding(
-    input: ArrowTerminalBindingResolverInput,
-  ): ResolvedArrowTerminalBinding {
-    return this.transients.resolveArrowTerminalBinding(input);
-  }
-
-  clearSelectionTransients(): void {
-    this.transients.clearSelectionTransients();
-  }
-
-  hitTestShape(point: Vec): ShapeRecord | null {
-    return this.hitTestShapesAtPoint(point)[0] ?? null;
-  }
-
-  hitTestShapesAtPoint(
-    point: Vec,
-    options?: ShapeAtPointOptions,
-  ): ShapeRecord[] {
-    return this.spatialIndex.getShapesAtPoint(point, {
-      ...options,
-      filter: (shape) =>
-        !this.isShapeHidden(shape.id) &&
-        this.isPagePointInShapeClip(shape.id, point) &&
-        (options?.filter?.(shape) ?? true),
-    });
-  }
-
-  hitTestShapesByLineSegment(
-    start: Vec,
-    end: Vec,
-    options?: ShapeLineSegmentHitTestOptions,
-  ): ShapeRecord[] {
-    return this.spatialIndex.getShapesHitByLineSegment(start, end, {
-      ...options,
-      filter: (shape) =>
-        !this.isShapeHidden(shape.id) && (options?.filter?.(shape) ?? true),
-    });
-  }
-
-  getShapeIdsInBounds(bounds: Box, options?: SpatialQueryOptions): ShapeId[] {
-    return this.spatialIndex
-      .getShapeIdsInBounds(bounds, options)
-      .filter((shapeId) => !this.isShapeHidden(shapeId));
-  }
-
-  getShapesInBounds(bounds: Box, options?: SpatialQueryOptions): ShapeRecord[] {
-    return this.spatialIndex
-      .getShapesInBounds(bounds, options)
-      .filter((shape) => !this.isShapeHidden(shape.id));
-  }
-
-  getShapesInViewport(
-    bounds: Box,
-    options?: SpatialQueryOptions,
-  ): ShapeRecord[] {
-    return this.spatialIndex
-      .getShapesInViewport(bounds, options)
-      .filter((shape) => !this.isShapeHidden(shape.id));
-  }
-
-  getDocumentSnapshot(): DocumentSnapshot {
-    return this.snapshots.getDocumentSnapshot();
-  }
-
-  getSessionSnapshot(): SessionSnapshot {
-    return this.snapshots.getSessionSnapshot();
-  }
-
-  getSvgString(
-    shapeIds: Iterable<ShapeId> = this.getSelectedShapeIds(),
-    options?: SvgExportOptions,
-  ): SvgExportResult | null {
-    return exportShapesToSvgString(
-      this,
-      shapeIds,
-      this.shapeSvgExporters,
-      options,
-    );
-  }
-
-  getExportIntegrityReport(
-    shapeIds: Iterable<ShapeId> = this.getSelectedShapeIds(),
-  ): ExportIntegrityReport {
-    return getExportIntegrityReport({
-      editor: this,
-      exporters: this.shapeSvgExporters,
-      shapeIds,
-    });
-  }
-
-  repairExportIntegrity(
-    shapeIds: Iterable<ShapeId> = this.getSelectedShapeIds(),
-  ): ExportIntegrityRepairResult {
-    return repairExportIntegrity({
-      editor: this,
-      exporters: this.shapeSvgExporters,
-      shapeIds,
-    });
-  }
-
-  getShapeCapabilityManifest(): ShapeCapabilityManifest {
-    return getShapeCapabilityManifest({
-      definitions: this.shapeCapabilityDefinitions,
-      exporters: this.shapeSvgExporters,
-      shapeUtils: this.shapeUtils,
-    });
-  }
-
-  createPageRecord(input?: {
-    name?: string;
-    index?: string;
-    meta?: Record<string, unknown>;
-  }): PageRecord {
-    const pageNumber = this.nextPageNumber;
-    return {
-      id: this.createPageId(pageNumber),
-      typeName: "page",
-      scope: "document",
-      name: input?.name ?? `Page ${pageNumber}`,
-      index: input?.index ?? this.createPageIndex(pageNumber),
-      meta: input?.meta ?? {},
-    };
-  }
-
-  loadDocumentSnapshot(
-    snapshot: unknown,
-    options?: { source?: ChangeSource },
-  ): void {
-    this.snapshots.loadDocumentSnapshot(snapshot, options);
-  }
-
-  loadSessionSnapshot(
-    snapshot: unknown,
-    options?: { source?: ChangeSource },
-  ): void {
-    this.snapshots.loadSessionSnapshot(snapshot, options);
-  }
-
-  syncAfterDocumentRestore(): void {
-    this.snapshots.syncAfterDocumentRestore();
-  }
-
-  cancelInteractionForCommand(): void {
-    this.cancelInteractionAndClearTransients("command");
-  }
-
-  cancelInteractionAndClearTransients(
-    reason: CancelEditorEvent["reason"],
-  ): void {
-    this.tools.cancel(reason);
-    this.inputs.resetPointer();
-    this.clearSelectionTransients();
-  }
-
-  syncToolStateFromSession(source: ChangeSource): void {
-    const { activeToolId, isToolLocked } = this.sessionSignal.get();
-
-    if (this.tools.hasTool(activeToolId)) {
-      this.tools.setActiveTool(activeToolId, "restore");
-    } else {
-      this.tools.setActiveTool("select", "restore");
-      this.updateSession({ activeToolId: "select" }, source);
-    }
-
-    this.tools.setToolLocked(isToolLocked);
-  }
-
-  createShapeRecord(input: CreateShapeInput): ShapeRecord {
-    const parentId = input.parentId ?? this.sessionSignal.get().currentPageId;
-    if (!this.canUseShapeParent(parentId)) {
-      throw new Error(`Invalid parent id for shape`);
-    }
-    const shapeNumber = this.nextShapeNumber;
-    const id = this.createShapeId(shapeNumber);
-    const util = this.shapeUtils.get(input.type);
-    const props = util.validateProps({
-      ...this.getDefaultShapeProps(input.type),
-      ...input.props,
-    });
-
-    return {
-      id,
-      typeName: "shape" as const,
-      scope: "document" as const,
-      type: input.type,
-      parentId,
-      index: input.index ?? this.createShapeIndex(shapeNumber),
-      x: input.x,
-      y: input.y,
-      rotation: input.rotation ?? 0,
-      scaleX: input.scaleX ?? 1,
-      scaleY: input.scaleY ?? 1,
-      opacity: input.opacity ?? 1,
-      isHidden: input.isHidden ?? false,
-      isLocked: input.isLocked ?? false,
-      props,
-      meta: input.meta ?? {},
-    } as ShapeRecord;
-  }
-
-  createBindingRecord(input: CreateBindingInput): BindingRecord {
-    const bindingNumber = this.nextBindingNumber;
-    const id = input.id ?? this.createBindingId(bindingNumber);
-    const util = this.bindingUtils.get(input.type);
-    const props = util.validateProps({
-      ...util.getDefaultProps(),
-      ...input.props,
-    });
-
-    return {
-      id,
-      typeName: "binding",
-      scope: "document",
-      type: input.type,
-      fromId: input.fromId,
-      toId: input.toId,
-      props,
-      meta: input.meta ?? {},
-    } as BindingRecord;
-  }
-
-  createAssetRecord(input: CreateAssetInput): AssetRecord {
-    const assetNumber = this.nextAssetNumber;
-    const id = input.id ?? this.createAssetId(assetNumber);
-
-    return {
-      id,
-      typeName: "asset",
-      scope: "document",
-      type: input.type,
-      props: input.props ?? {},
-      meta: input.meta ?? {},
-    } as AssetRecord;
-  }
-
-  updateSession(
-    partial: Partial<SessionRecord>,
-    source: ChangeSource = "system",
-  ): void {
-    const current = this.sessionSignal.get();
-    this._internalStore.put(
-      [
-        {
-          ...current,
-          ...partial,
-        },
-      ],
-      source,
-    );
-  }
-
-  setCurrentPage(pageId: PageId, source: ChangeSource = "system"): void {
-    if (!this.getPage(pageId)) {
-      return;
-    }
-
-    if (pageId !== this.getCurrentPageId()) {
-      this.cancelInteractionAndClearTransients("page_switch");
-      this.completeEditing(source);
-    }
-
-    const session = this.sessionSignal.get();
-    this.updateSession(
-      {
-        currentPageId: pageId,
-        pageCameraById: {
-          ...session.pageCameraById,
-          [pageId]: session.pageCameraById[pageId] ?? { ...DEFAULT_CAMERA },
-        },
-        pageSelectedShapeIdsById: {
-          ...session.pageSelectedShapeIdsById,
-          [pageId]: session.pageSelectedShapeIdsById[pageId] ?? [],
-        },
-      },
-      source,
-    );
-  }
-
-  setSelectedShapeIds(
-    ids: ShapeId[],
-    options?: { pageId?: PageId; source?: ChangeSource },
-  ): void {
-    this.selection.setSelectedShapeIds(ids, options);
-  }
-
-  removeShapeIdsFromSelection(
-    ids: ShapeId[],
-    source: ChangeSource = "system",
-  ): void {
-    this.selection.removeShapeIdsFromSelection(ids, source);
-  }
-
-  removeShapeIdsFromEditingSession(
-    ids: ShapeId[],
-    source: ChangeSource = "system",
-  ): void {
-    this.editing.removeShapeIds(ids, source);
-  }
-
-  ensurePageSessionState(
-    pageId: PageId,
-    source: ChangeSource = "system",
-  ): void {
-    const session = this.sessionSignal.get();
-    const nextCamera = session.pageCameraById[pageId] ?? { ...DEFAULT_CAMERA };
-    const nextSelection = session.pageSelectedShapeIdsById[pageId] ?? [];
-
-    this.updateSession(
-      {
-        pageCameraById: {
-          ...session.pageCameraById,
-          [pageId]: nextCamera,
-        },
-        pageSelectedShapeIdsById: {
-          ...session.pageSelectedShapeIdsById,
-          [pageId]: nextSelection,
-        },
-      },
-      source,
-    );
-  }
-
-  removePageSessionState(
-    pageId: PageId,
-    nextCurrentPageId: PageId,
-    source: ChangeSource = "system",
-  ): void {
-    const session = this.sessionSignal.get();
-    const nextCameraById = { ...session.pageCameraById };
-    const nextSelectionById = { ...session.pageSelectedShapeIdsById };
-    delete nextCameraById[pageId];
-    delete nextSelectionById[pageId];
-
-    this.updateSession(
-      {
-        currentPageId: nextCurrentPageId,
-        pageCameraById: nextCameraById,
-        pageSelectedShapeIdsById: nextSelectionById,
-      },
-      source,
-    );
-  }
-
-  setCamera(
-    partial: Partial<Camera>,
-    options?: { pageId?: PageId; source?: ChangeSource },
-  ): void {
-    this.camera.setCamera(partial, options);
-  }
-
-  panCamera(delta: Vec, source: ChangeSource = "system"): void {
-    this.camera.panCamera(delta, source);
-  }
-
-  zoomCameraAtScreenPoint(
-    screenPoint: Vec,
-    deltaY: number,
-    source: ChangeSource = "system",
-  ): void {
-    this.camera.zoomCameraAtScreenPoint(screenPoint, deltaY, source);
-  }
-
-  zoomCameraToScreenPoint(
-    screenPoint: Vec,
-    zoom: number,
-    source: ChangeSource = "system",
-  ): void {
-    this.camera.zoomCameraToScreenPoint(screenPoint, zoom, source);
-  }
-
-  zoomAtViewportCenter(deltaY: number, source: ChangeSource = "system"): void {
-    this.camera.zoomAtViewportCenter(deltaY, source);
-  }
-
-  resetZoom(source: ChangeSource = "user"): void {
-    this.camera.resetZoom(source);
-  }
-
-  setViewportScreenSize(size: { w: number; h: number }): void {
-    this.camera.setViewportScreenSize(size);
-  }
-
-  /** Combined page bounds of every shape on a page, or null when empty. */
-  getCurrentPageBounds(pageId: PageId = this.getCurrentPageId()): Box | null {
-    return this.selectionLayout.getCurrentPageBounds(pageId);
-  }
-
-  /**
-   * Move and zoom the camera so `bounds` fits inside the viewport with optional
-   * padding (screen px). Returns false when the viewport or bounds are empty.
-   */
-  zoomToBounds(
-    bounds: Box,
-    options?: { padding?: number; maxZoom?: number; source?: ChangeSource },
-  ): boolean {
-    return this.selectionLayout.zoomToBounds(bounds, options);
-  }
-
-  /** Fit all shapes on the current page into the viewport. */
-  zoomToFit(options?: { padding?: number; source?: ChangeSource }): boolean {
-    return this.selectionLayout.zoomToFit(options);
-  }
-
-  /** Fit the current selection into the viewport. */
-  zoomToSelection(options?: {
-    padding?: number;
-    source?: ChangeSource;
-  }): boolean {
-    return this.selectionLayout.zoomToSelection(options);
-  }
-
-  private createShapeId(shapeNumber: number): ShapeId {
-    const id = `shape:${shapeNumber}` as ShapeId;
-    this.nextShapeNumber += 1;
-    return id;
-  }
-
-  createShapeIndex(shapeNumber: number): string {
-    return String(shapeNumber).padStart(6, "0");
-  }
-
-  private createBindingId(bindingNumber: number): BindingId {
-    const id = `binding:${bindingNumber}` as BindingId;
-    this.nextBindingNumber += 1;
-    return id;
-  }
-
-  private createAssetId(assetNumber: number): AssetId {
-    const id = `asset:${assetNumber}` as AssetId;
-    this.nextAssetNumber += 1;
-    return id;
-  }
-
-  syncShapeCounter(): void {
-    let maxShapeNumber = 0;
-    for (const record of this._internalStore.getAll()) {
-      if (!isShapeRecord(record)) continue;
-      const value = Number(record.id.split(":")[1] ?? 0);
-      if (Number.isFinite(value)) {
-        maxShapeNumber = Math.max(maxShapeNumber, value);
-      }
-    }
-    this.nextShapeNumber = maxShapeNumber + 1;
-  }
-
-  syncPageCounter(): void {
-    let maxPageNumber = 0;
-    for (const record of this._internalStore.getAll()) {
-      if (!isPageRecord(record)) continue;
-      const suffix = record.id.split(":")[1] ?? "";
-      const value = Number(suffix === "default" ? 1 : suffix);
-      if (Number.isFinite(value)) {
-        maxPageNumber = Math.max(maxPageNumber, value);
-      }
-    }
-    this.nextPageNumber = maxPageNumber + 1;
-  }
-
-  syncBindingCounter(): void {
-    let maxBindingNumber = 0;
-    for (const record of this._internalStore.getAll()) {
-      if (!isBindingRecord(record)) continue;
-      const value = Number(record.id.split(":")[1] ?? 0);
-      if (Number.isFinite(value)) {
-        maxBindingNumber = Math.max(maxBindingNumber, value);
-      }
-    }
-    this.nextBindingNumber = maxBindingNumber + 1;
-  }
-
-  syncAssetCounter(): void {
-    let maxAssetNumber = 0;
-    for (const record of this._internalStore.getAll()) {
-      if (!isAssetRecord(record)) continue;
-      const value = Number(record.id.split(":")[1] ?? 0);
-      if (Number.isFinite(value)) {
-        maxAssetNumber = Math.max(maxAssetNumber, value);
-      }
-    }
-    this.nextAssetNumber = maxAssetNumber + 1;
-  }
-
-  private createPageId(pageNumber: number): PageId {
-    const id = `page:${pageNumber}` as PageId;
-    this.nextPageNumber += 1;
-    return id;
-  }
-
-  private createPageIndex(pageNumber: number): string {
-    return String(pageNumber).padStart(4, "0");
-  }
-
-  private handleWheelEvent(
-    event: Extract<EditorEvent, { type: "wheel" }>,
-  ): void {
-    if (event.ctrlKey) {
-      const current = this.getCurrentCamera();
-      const deltaY = event.delta.y;
-      const zoomDelta =
-        (Math.abs(deltaY) > CAMERA_WHEEL_MAX_ZOOM_STEP
-          ? CAMERA_WHEEL_MAX_ZOOM_STEP * Math.sign(deltaY)
-          : deltaY) / 100;
-      this.zoomCameraToScreenPoint(
-        event.screenPoint,
-        current.z - zoomDelta * CAMERA_WHEEL_ZOOM_SPEED * current.z,
-      );
-      return;
-    }
-
-    this.panCamera(event.delta);
-  }
-
-}