@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,2614 @@
+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);
+  }
+
+}