@mocanvas/editor 1.0.0

package/dist/index.js

@@ -0,0 +1,4801 @@
+import { atom, computed, transact, unsafe__withoutCapture, react } from '@mocanvas/state';
+import { createRecordType, uniqueId, isRecordsDiffEmpty, squashRecordDiffs, reverseRecordsDiff, ZERO_INDEX_KEY, sortByIndex, getIndexAbove, getIndexBetween, getIndexBelow, getIndicesAbove, indexKeyToZKey, StoreSchema, Store } from '@mocanvas/store';
+import { PATH_OP, FLAG, EngineBridge, VERTEX_FLOATS, BATCH_WORDS, readClip } from '@mocanvas/wasm';
+export { EngineBridge, FLAG, PATH_OP, loadEngine, loadEngineSync } from '@mocanvas/wasm';
+import { track, useValue } from '@mocanvas/state/react';
+export { track, useAtom, useComputed, useQuickReactor, useReactor, useValue } from '@mocanvas/state/react';
+import { createContext, useContext, useRef, useState, useLayoutEffect, useEffect, useMemo } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/editor/Editor.ts
+var Vec = class _Vec {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+  x;
+  y;
+  static From(p) {
+    return new _Vec(p.x, p.y);
+  }
+  static Add(a, b) {
+    return new _Vec(a.x + b.x, a.y + b.y);
+  }
+  static Sub(a, b) {
+    return new _Vec(a.x - b.x, a.y - b.y);
+  }
+  static Mul(a, s) {
+    return new _Vec(a.x * s, a.y * s);
+  }
+  static Div(a, s) {
+    return new _Vec(a.x / s, a.y / s);
+  }
+  static Dist(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+  static Dist2(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return dx * dx + dy * dy;
+  }
+  static Len(a) {
+    return Math.hypot(a.x, a.y);
+  }
+  static Dot(a, b) {
+    return a.x * b.x + a.y * b.y;
+  }
+  static Cross(a, b) {
+    return a.x * b.y - a.y * b.x;
+  }
+  static Lrp(a, b, t) {
+    return new _Vec(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+  }
+  static Angle(a, b) {
+    return Math.atan2(b.y - a.y, b.x - a.x);
+  }
+  static Rot(a, r) {
+    const s = Math.sin(r);
+    const c = Math.cos(r);
+    return new _Vec(a.x * c - a.y * s, a.x * s + a.y * c);
+  }
+  static RotWith(a, center, r) {
+    const p = _Vec.Rot(_Vec.Sub(a, center), r);
+    return new _Vec(p.x + center.x, p.y + center.y);
+  }
+  static Uni(a) {
+    const l = _Vec.Len(a);
+    return l === 0 ? new _Vec() : _Vec.Div(a, l);
+  }
+  static Per(a) {
+    return new _Vec(-a.y, a.x);
+  }
+  static Equals(a, b) {
+    return a.x === b.x && a.y === b.y;
+  }
+  static NearestPointOnLineSegment(a, b, p) {
+    const ab = _Vec.Sub(b, a);
+    const l2 = _Vec.Dot(ab, ab);
+    if (l2 === 0) return _Vec.From(a);
+    const t = Math.max(0, Math.min(1, _Vec.Dot(_Vec.Sub(p, a), ab) / l2));
+    return _Vec.Add(a, _Vec.Mul(ab, t));
+  }
+  static DistanceToLineSegment(a, b, p) {
+    return _Vec.Dist(p, _Vec.NearestPointOnLineSegment(a, b, p));
+  }
+  add(b) {
+    this.x += b.x;
+    this.y += b.y;
+    return this;
+  }
+  sub(b) {
+    this.x -= b.x;
+    this.y -= b.y;
+    return this;
+  }
+  mul(s) {
+    this.x *= s;
+    this.y *= s;
+    return this;
+  }
+  clone() {
+    return new _Vec(this.x, this.y);
+  }
+  toJson() {
+    return { x: this.x, y: this.y };
+  }
+};
+var Box = class _Box {
+  constructor(x = 0, y = 0, w = 0, h = 0) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+    this.h = h;
+  }
+  x;
+  y;
+  w;
+  h;
+  static From(b) {
+    return new _Box(b.x, b.y, b.w, b.h);
+  }
+  static FromPoints(points) {
+    if (points.length === 0) return new _Box();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of points) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+    return new _Box(minX, minY, maxX - minX, maxY - minY);
+  }
+  static FromMinMax(minX, minY, maxX, maxY) {
+    return new _Box(minX, minY, maxX - minX, maxY - minY);
+  }
+  static Common(boxes) {
+    if (boxes.length === 0) return new _Box();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const b of boxes) {
+      minX = Math.min(minX, b.x);
+      minY = Math.min(minY, b.y);
+      maxX = Math.max(maxX, b.x + b.w);
+      maxY = Math.max(maxY, b.y + b.h);
+    }
+    return _Box.FromMinMax(minX, minY, maxX, maxY);
+  }
+  static Contains(a, b) {
+    return b.x >= a.x && b.y >= a.y && b.x + b.w <= a.x + a.w && b.y + b.h <= a.y + a.h;
+  }
+  static ContainsPoint(a, p, margin = 0) {
+    return p.x >= a.x - margin && p.y >= a.y - margin && p.x <= a.x + a.w + margin && p.y <= a.y + a.h + margin;
+  }
+  static Collides(a, b) {
+    return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+  }
+  static Expand(a, d) {
+    return new _Box(a.x - d, a.y - d, a.w + 2 * d, a.h + 2 * d);
+  }
+  get minX() {
+    return this.x;
+  }
+  get minY() {
+    return this.y;
+  }
+  get maxX() {
+    return this.x + this.w;
+  }
+  get maxY() {
+    return this.y + this.h;
+  }
+  get width() {
+    return this.w;
+  }
+  get height() {
+    return this.h;
+  }
+  get center() {
+    return new Vec(this.x + this.w / 2, this.y + this.h / 2);
+  }
+  get corners() {
+    return [
+      new Vec(this.x, this.y),
+      new Vec(this.maxX, this.y),
+      new Vec(this.maxX, this.maxY),
+      new Vec(this.x, this.maxY)
+    ];
+  }
+  clone() {
+    return new _Box(this.x, this.y, this.w, this.h);
+  }
+  toJson() {
+    return { x: this.x, y: this.y, w: this.w, h: this.h };
+  }
+};
+var Geometry2d = class {
+  isFilled;
+  isClosed;
+  isLabel;
+  _vertices;
+  _bounds;
+  constructor(opts) {
+    this.isFilled = opts.isFilled;
+    this.isClosed = opts.isClosed;
+    this.isLabel = opts.isLabel ?? false;
+  }
+  get vertices() {
+    return this._vertices ??= this.getVertices();
+  }
+  get bounds() {
+    return this._bounds ??= Box.FromPoints(this.vertices);
+  }
+  get center() {
+    return this.bounds.center;
+  }
+  nearestPoint(point) {
+    const v = this.vertices;
+    if (v.length === 0) return new Vec();
+    if (v.length === 1) return v[0].clone();
+    let best = v[0];
+    let bestD = Infinity;
+    const n = this.isClosed ? v.length : v.length - 1;
+    for (let i = 0; i < n; i++) {
+      const a = v[i];
+      const b = v[(i + 1) % v.length];
+      const p = Vec.NearestPointOnLineSegment(a, b, point);
+      const d = Vec.Dist2(p, point);
+      if (d < bestD) {
+        bestD = d;
+        best = p;
+      }
+    }
+    return best;
+  }
+  distanceToPoint(point, hitInside = false) {
+    const d = Vec.Dist(point, this.nearestPoint(point));
+    if (hitInside && this.isClosed && this.isFilled && pointInPolygon(point, this.vertices)) return -d;
+    return d;
+  }
+  hitTestPoint(point, margin = 0, hitInside = false) {
+    if (hitInside && this.isClosed && pointInPolygon(point, this.vertices)) return true;
+    return Vec.Dist(point, this.nearestPoint(point)) <= margin;
+  }
+};
+function pointInPolygon(p, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const a = poly[i];
+    const b = poly[j];
+    if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+  }
+  return inside;
+}
+function polygonWords(points, close) {
+  const out = [];
+  if (points.length === 0) return out;
+  out.push(PATH_OP.MOVE, points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) out.push(PATH_OP.LINE, points[i].x, points[i].y);
+  if (close) out.push(PATH_OP.CLOSE);
+  return out;
+}
+var Rectangle2d = class extends Geometry2d {
+  x;
+  y;
+  w;
+  h;
+  constructor(opts) {
+    super({ isFilled: opts.isFilled, isClosed: true, ...opts.isLabel !== void 0 ? { isLabel: opts.isLabel } : {} });
+    this.x = opts.x ?? 0;
+    this.y = opts.y ?? 0;
+    this.w = opts.width;
+    this.h = opts.height;
+  }
+  getVertices() {
+    return new Box(this.x, this.y, this.w, this.h).corners;
+  }
+  toPathWords() {
+    return polygonWords(this.getVertices(), true);
+  }
+};
+var KAPPA = 0.5522848;
+var Ellipse2d = class extends Geometry2d {
+  w;
+  h;
+  constructor(opts) {
+    super({ isFilled: opts.isFilled, isClosed: true });
+    this.w = opts.width;
+    this.h = opts.height;
+  }
+  getVertices() {
+    const rx = this.w / 2;
+    const ry = this.h / 2;
+    const n = Math.max(16, Math.min(128, Math.ceil((rx + ry) / 4)));
+    const out = [];
+    for (let i = 0; i < n; i++) {
+      const t = i / n * Math.PI * 2;
+      out.push(new Vec(rx + rx * Math.cos(t), ry + ry * Math.sin(t)));
+    }
+    return out;
+  }
+  toPathWords() {
+    const rx = this.w / 2;
+    const ry = this.h / 2;
+    const cx = rx;
+    const cy = ry;
+    const kx = KAPPA * rx;
+    const ky = KAPPA * ry;
+    const C = PATH_OP.CUBIC;
+    return [
+      PATH_OP.MOVE,
+      cx + rx,
+      cy,
+      C,
+      cx + rx,
+      cy + ky,
+      cx + kx,
+      cy + ry,
+      cx,
+      cy + ry,
+      C,
+      cx - kx,
+      cy + ry,
+      cx - rx,
+      cy + ky,
+      cx - rx,
+      cy,
+      C,
+      cx - rx,
+      cy - ky,
+      cx - kx,
+      cy - ry,
+      cx,
+      cy - ry,
+      C,
+      cx + kx,
+      cy - ry,
+      cx + rx,
+      cy - ky,
+      cx + rx,
+      cy,
+      PATH_OP.CLOSE
+    ];
+  }
+};
+var Circle2d = class extends Ellipse2d {
+  constructor(opts) {
+    super({ width: opts.radius * 2, height: opts.radius * 2, isFilled: opts.isFilled });
+  }
+};
+var Polygon2d = class extends Geometry2d {
+  points;
+  constructor(opts) {
+    super({ isFilled: opts.isFilled, isClosed: true });
+    this.points = opts.points.map(Vec.From);
+  }
+  getVertices() {
+    return this.points;
+  }
+  toPathWords() {
+    return polygonWords(this.points, true);
+  }
+};
+var Polyline2d = class extends Geometry2d {
+  points;
+  constructor(opts) {
+    super({ isFilled: false, isClosed: false });
+    this.points = opts.points.map(Vec.From);
+  }
+  getVertices() {
+    return this.points;
+  }
+  toPathWords() {
+    return polygonWords(this.points, false);
+  }
+};
+var Edge2d = class extends Polyline2d {
+  constructor(opts) {
+    super({ points: [opts.start, opts.end] });
+  }
+};
+var CubicSpline2d = class extends Geometry2d {
+  segments;
+  constructor(opts) {
+    super({ isFilled: opts.isFilled ?? false, isClosed: opts.isClosed ?? false });
+    this.segments = opts.segments.map((s) => ({ p0: Vec.From(s.p0), c1: Vec.From(s.c1), c2: Vec.From(s.c2), p1: Vec.From(s.p1) }));
+  }
+  getVertices() {
+    const out = [];
+    for (const s of this.segments) {
+      const n = 12;
+      for (let i = 0; i < n; i++) {
+        const t = i / n;
+        const u = 1 - t;
+        out.push(
+          new Vec(
+            u * u * u * s.p0.x + 3 * u * u * t * s.c1.x + 3 * u * t * t * s.c2.x + t * t * t * s.p1.x,
+            u * u * u * s.p0.y + 3 * u * u * t * s.c1.y + 3 * u * t * t * s.c2.y + t * t * t * s.p1.y
+          )
+        );
+      }
+    }
+    const last = this.segments.at(-1);
+    if (last) out.push(last.p1.clone());
+    return out;
+  }
+  toPathWords() {
+    const out = [];
+    const first = this.segments[0];
+    if (!first) return out;
+    out.push(PATH_OP.MOVE, first.p0.x, first.p0.y);
+    for (const s of this.segments) out.push(PATH_OP.CUBIC, s.c1.x, s.c1.y, s.c2.x, s.c2.y, s.p1.x, s.p1.y);
+    if (this.isClosed) out.push(PATH_OP.CLOSE);
+    return out;
+  }
+};
+var Group2d = class extends Geometry2d {
+  children;
+  constructor(opts) {
+    super({ isFilled: opts.children.some((c) => c.isFilled), isClosed: opts.children.some((c) => c.isClosed) });
+    this.children = opts.children;
+  }
+  getVertices() {
+    return this.children.flatMap((c) => c.vertices);
+  }
+  toPathWords() {
+    return this.children.filter((c) => !c.isLabel).flatMap((c) => c.toPathWords());
+  }
+  nearestPoint(point) {
+    let best = new Vec();
+    let bestD = Infinity;
+    for (const c of this.children) {
+      const p = c.nearestPoint(point);
+      const d = Vec.Dist2(p, point);
+      if (d < bestD) {
+        bestD = d;
+        best = p;
+      }
+    }
+    return best;
+  }
+  hitTestPoint(point, margin = 0, hitInside = false) {
+    return this.children.some((c) => c.hitTestPoint(point, margin, hitInside));
+  }
+};
+var DocumentRecordType = createRecordType("document", { scope: "document" }).withDefaultProperties(
+  () => ({ gridSize: 10, name: "", meta: {} })
+);
+var DOCUMENT_ID = DocumentRecordType.createId("document");
+var PageRecordType = createRecordType("page", { scope: "document" }).withDefaultProperties(() => ({
+  meta: {}
+}));
+function isPageId(id) {
+  return id.startsWith("page:");
+}
+var CameraRecordType = createRecordType("camera", { scope: "session" }).withDefaultProperties(() => ({
+  x: 0,
+  y: 0,
+  z: 1,
+  meta: {}
+}));
+var InstanceRecordType = createRecordType("instance", { scope: "session" }).withDefaultProperties(
+  () => ({
+    followingUserId: null,
+    isFocusMode: false,
+    isDebugMode: false,
+    isToolLocked: false,
+    isGridMode: false,
+    isReadonly: false,
+    isFocused: false,
+    isPenMode: false,
+    isChangingStyle: false,
+    exportBackground: true,
+    screenBounds: { x: 0, y: 0, w: 1080, h: 720 },
+    insets: [false, false, false, false],
+    cursor: { type: "default", rotation: 0 },
+    scribbles: [],
+    brush: null,
+    zoomBrush: null,
+    openMenus: [],
+    devicePixelRatio: typeof window === "undefined" ? 1 : window.devicePixelRatio,
+    isCoarsePointer: false,
+    isHoveringCanvas: null,
+    stylesForNextShape: {},
+    duplicateProps: null,
+    meta: {}
+  })
+);
+var INSTANCE_ID = InstanceRecordType.createId("instance");
+var InstancePageStateRecordType = createRecordType("instance_page_state", {
+  scope: "session"
+}).withDefaultProperties(() => ({
+  selectedShapeIds: [],
+  hintingShapeIds: [],
+  erasingShapeIds: [],
+  hoveredShapeId: null,
+  editingShapeId: null,
+  croppingShapeId: null,
+  focusedGroupId: null,
+  meta: {}
+}));
+var ShapeRecordType = createRecordType("shape", { scope: "document" }).withDefaultProperties(
+  () => ({ x: 0, y: 0, rotation: 0, isLocked: false, opacity: 1, meta: {} })
+);
+function createShapeId(id) {
+  return ShapeRecordType.createId(id);
+}
+function isShapeId(id) {
+  return typeof id === "string" && id.startsWith("shape:");
+}
+function isShape(record) {
+  return typeof record === "object" && record !== null && record.typeName === "shape";
+}
+var BindingRecordType = createRecordType("binding", { scope: "document" }).withDefaultProperties(
+  () => ({ meta: {} })
+);
+function createBindingId(id) {
+  return BindingRecordType.createId(id);
+}
+function isBindingId(id) {
+  return typeof id === "string" && id.startsWith("binding:");
+}
+function isBinding(record) {
+  return typeof record === "object" && record !== null && record.typeName === "binding";
+}
+var AssetRecordType = createRecordType("asset", { scope: "document" }).withDefaultProperties(() => ({
+  meta: {}
+}));
+function createAssetId(id) {
+  return AssetRecordType.createId(id);
+}
+function isAssetId(id) {
+  return typeof id === "string" && id.startsWith("asset:");
+}
+function isAsset(record) {
+  return typeof record === "object" && record !== null && record.typeName === "asset";
+}
+
+// src/editor/events.ts
+var EVENT_NAME_MAP = {
+  pointer_down: "onPointerDown",
+  pointer_move: "onPointerMove",
+  pointer_up: "onPointerUp",
+  right_click: "onRightClick",
+  middle_click: "onMiddleClick",
+  double_click: "onDoubleClick",
+  triple_click: "onTripleClick",
+  quadruple_click: "onQuadrupleClick",
+  key_down: "onKeyDown",
+  key_up: "onKeyUp",
+  key_repeat: "onKeyRepeat",
+  wheel: "onWheel",
+  cancel: "onCancel",
+  complete: "onComplete",
+  interrupt: "onInterrupt",
+  tick: "onTick"
+};
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(name, fn) {
+    let set = this.listeners.get(name);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(name, set);
+    }
+    set.add(fn);
+    return () => this.off(name, fn);
+  }
+  once(name, fn) {
+    const off = this.on(name, ((...args) => {
+      off();
+      fn(...args);
+    }));
+    return off;
+  }
+  off(name, fn) {
+    this.listeners.get(name)?.delete(fn);
+  }
+  emit(name, ...args) {
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of Array.from(set)) fn(...args);
+  }
+  removeAllListeners() {
+    this.listeners.clear();
+  }
+};
+
+// src/tools/StateNode.ts
+var StateNode = class {
+  static id;
+  static initial;
+  static children;
+  static isLockable = true;
+  static useCoalescedEvents = false;
+  id;
+  type;
+  initial;
+  children;
+  parent;
+  editor;
+  _isActive;
+  _current;
+  _path;
+  /** Whether the shape kind this tool creates should be kept selected after creation etc. */
+  shapeType;
+  /** Tools can declare the interaction they perform when locked. */
+  static get isLockableTool() {
+    return this.isLockable;
+  }
+  constructor(editor, parent) {
+    const ctor = this.constructor;
+    this.editor = editor;
+    this.parent = parent;
+    this.id = ctor.id;
+    this._isActive = atom(`${this.id}.isActive`, false);
+    this._current = atom(`${this.id}.current`, void 0);
+    const childCtors = ctor.children?.();
+    if (childCtors && childCtors.length > 0) {
+      this.type = parent ? "branch" : "root";
+      this.initial = ctor.initial;
+      const children = {};
+      for (const C of childCtors) {
+        children[C.id] = new C(editor, this);
+      }
+      this.children = children;
+      if (this.type === "branch" && !this.initial) {
+        throw new Error(`StateNode "${this.id}" has children but no initial state`);
+      }
+    } else {
+      this.type = "leaf";
+    }
+    this._path = computed(`${this.id}.path`, () => {
+      const cur = this._current.get();
+      return `${this.id}${cur ? `.${cur.getPath()}` : ""}`;
+    });
+  }
+  getPath() {
+    return this._path.get();
+  }
+  getCurrent() {
+    return this._current.get();
+  }
+  getIsActive() {
+    return this._isActive.get();
+  }
+  getDescendant(path) {
+    const [head, ...rest] = path.split(".");
+    const child = head ? this.children?.[head] : void 0;
+    if (!child) return void 0;
+    return rest.length ? child.getDescendant(rest.join(".")) : child;
+  }
+  /** Dispatch an event to this node, then to its active child. */
+  handleEvent(info) {
+    const handlerName = EVENT_NAME_MAP[info.name];
+    const current = this._current.get();
+    if (handlerName) {
+      const handler = this[handlerName];
+      handler?.call(this, info);
+    }
+    if (current && current === this._current.get() && current.getIsActive()) {
+      current.handleEvent(info);
+    }
+  }
+  /** Move this node's current child to `id`, exiting the old one and entering the new one. */
+  transition(id, info = {}) {
+    if (!this.children) throw new Error(`StateNode "${this.id}" has no children to transition to`);
+    const next = this.children[id];
+    if (!next) throw new Error(`StateNode "${this.id}" has no child "${id}"`);
+    const i = info;
+    const prev = this._current.get();
+    if (prev) prev.exit(i, id);
+    this._current.set(next);
+    next.enter(i, prev?.id ?? "initial");
+    return this;
+  }
+  enter(info, from) {
+    this._isActive.set(true);
+    this.onEnter?.(info, from);
+    if (this.children && this.initial && this.getIsActive()) {
+      const initialChild = this.children[this.initial];
+      if (!initialChild) throw new Error(`StateNode "${this.id}" initial child "${this.initial}" not found`);
+      this._current.set(initialChild);
+      initialChild.enter(info, from);
+    }
+  }
+  exit(info, to) {
+    const cur = this._current.get();
+    if (cur) cur.exit(info, to);
+    this._current.set(void 0);
+    this._isActive.set(false);
+    this.onExit?.(info, to);
+  }
+  /** Change the active tool from anywhere in the tree. */
+  setCurrentToolIdMask(_mask) {
+  }
+};
+
+// src/tools/RootState.ts
+var RootState = class extends StateNode {
+  static id = "root";
+  static initial = "";
+  static children = () => [];
+  onKeyDown(info) {
+    if (info.key === "Escape" && !this.editor.getEditingShapeId()) {
+      this.editor.cancel();
+    }
+  }
+};
+function createRootState(tools, initial) {
+  class Root extends RootState {
+    static id = "root";
+    static initial = initial;
+    static children = () => [...tools];
+  }
+  return Root;
+}
+
+// src/editor/HandleTable.ts
+var HandleTable = class {
+  toHandle = /* @__PURE__ */ new Map();
+  toId = [void 0];
+  free = [];
+  get size() {
+    return this.toHandle.size;
+  }
+  handle(id) {
+    const h = this.toHandle.get(id);
+    if (h !== void 0) return h;
+    const nh = this.free.pop() ?? this.toId.length;
+    this.toId[nh] = id;
+    this.toHandle.set(id, nh);
+    return nh;
+  }
+  peek(id) {
+    return this.toHandle.get(id);
+  }
+  id(handle) {
+    return this.toId[handle];
+  }
+  release(id) {
+    const h = this.toHandle.get(id);
+    if (h === void 0) return void 0;
+    this.toHandle.delete(id);
+    this.toId[h] = void 0;
+    this.free.push(h);
+    return h;
+  }
+  clear() {
+    this.toHandle.clear();
+    this.toId = [void 0];
+    this.free = [];
+  }
+};
+
+// src/editor/TextureManager.ts
+var MAX_TEXTURE_RESOLUTION = 8;
+var MAX_TEXTURE_ZOOM = 4;
+var MIN_TEXTURE_ZOOM = 0.25;
+function bucketTextureResolution(zoom, dpr = 1) {
+  const z = Number.isFinite(zoom) && zoom > 0 ? zoom : 1;
+  const clamped = Math.min(MAX_TEXTURE_ZOOM, Math.max(MIN_TEXTURE_ZOOM, z));
+  const bucket = 2 ** Math.ceil(Math.log2(clamped));
+  const d = Number.isFinite(dpr) && dpr > 0 ? dpr : 1;
+  return Math.min(MAX_TEXTURE_RESOLUTION, Math.max(MIN_TEXTURE_ZOOM, d * bucket));
+}
+var TextureManager = class {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  options;
+  entries = /* @__PURE__ */ new Map();
+  /** owner id → keys that owner currently holds a reference to. */
+  ownerKeys = /* @__PURE__ */ new Map();
+  /** key → owner ids, so the host can find the shapes to re-write. */
+  keyOwners = /* @__PURE__ */ new Map();
+  backend = null;
+  nextId = 1;
+  disposed = false;
+  owner = null;
+  touched = null;
+  /** Number of live texture entries. */
+  get size() {
+    return this.entries.size;
+  }
+  getBackend() {
+    return this.backend;
+  }
+  /**
+   * Reference the texture for `key`, starting `load` the first time. Returns
+   * the host texture id, or `0` when the key previously failed to load.
+   */
+  acquire(key, load, opts) {
+    if (this.disposed) return 0;
+    let entry = this.entries.get(key);
+    if (!entry) {
+      entry = { key, id: this.nextId++, refs: 0, state: "pending", width: 0, height: 0, source: null, opts };
+      this.entries.set(key, entry);
+      this.load(entry, load);
+    }
+    const owner = this.owner;
+    if (owner === null) {
+      entry.refs++;
+    } else {
+      let held = this.ownerKeys.get(owner);
+      if (!held) {
+        held = /* @__PURE__ */ new Set();
+        this.ownerKeys.set(owner, held);
+      }
+      (this.touched ??= /* @__PURE__ */ new Set()).add(key);
+      if (!held.has(key)) {
+        held.add(key);
+        this.addOwner(key, owner);
+        entry.refs++;
+      }
+    }
+    return entry.state === "error" ? 0 : entry.id;
+  }
+  /** Drop one reference. The texture is deleted when the last one goes. */
+  release(key) {
+    const entry = this.entries.get(key);
+    if (!entry) return;
+    entry.refs--;
+    if (entry.refs > 0) return;
+    this.entries.delete(key);
+    this.keyOwners.delete(key);
+    this.destroy(entry);
+  }
+  /** Whether the texture for `key` is uploaded and safe to draw. */
+  isReady(key) {
+    return this.entries.get(key)?.state === "ready";
+  }
+  getState(key) {
+    return this.entries.get(key)?.state;
+  }
+  /** Current id for `key`: `0` when unknown or failed. */
+  getId(key) {
+    const entry = this.entries.get(key);
+    if (!entry || entry.state === "error") return 0;
+    return entry.id;
+  }
+  getInfo(key) {
+    const e = this.entries.get(key);
+    return e && { id: e.id, refs: e.refs, state: e.state, width: e.width, height: e.height };
+  }
+  /** Owners (shape ids) currently holding `key`. */
+  getOwners(key) {
+    const owners = this.keyOwners.get(key);
+    return owners ? [...owners] : [];
+  }
+  /** Every owner holding at least one texture. */
+  getAllOwners() {
+    return [...this.ownerKeys.keys()];
+  }
+  /**
+   * Run `fn` with every `acquire` inside it attributed to `owner`. Keys the
+   * owner held before but did not acquire again are released, so re-deriving a
+   * shape's style neither leaks references nor keeps a stale texture alive.
+   */
+  withOwner(owner, fn) {
+    if (this.disposed) return fn();
+    const prevOwner = this.owner;
+    const prevTouched = this.touched;
+    this.owner = owner;
+    this.touched = null;
+    try {
+      return fn();
+    } finally {
+      const touched = this.touched;
+      const held = this.ownerKeys.get(owner);
+      if (held) {
+        for (const key of [...held]) {
+          if (touched?.has(key)) continue;
+          held.delete(key);
+          this.removeOwner(key, owner);
+          this.release(key);
+        }
+        if (held.size === 0) this.ownerKeys.delete(owner);
+      }
+      this.owner = prevOwner;
+      this.touched = prevTouched;
+    }
+  }
+  /** Release every key an owner holds (the shape was deleted). */
+  releaseOwner(owner) {
+    const held = this.ownerKeys.get(owner);
+    if (!held) return;
+    this.ownerKeys.delete(owner);
+    for (const key of held) {
+      this.removeOwner(key, owner);
+      this.release(key);
+    }
+  }
+  /**
+   * Point the manager at the backend that owns the GPU textures. Everything
+   * already decoded is uploaded again; anything still loading uploads when it
+   * resolves. The previous backend keeps (and frees) its own GL objects.
+   */
+  setBackend(backend) {
+    if (this.disposed || this.backend === backend) return;
+    this.backend = backend;
+    if (!backend) return;
+    for (const entry of this.entries.values()) {
+      if (entry.state === "ready" && entry.source) this.upload(entry);
+    }
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    for (const entry of this.entries.values()) this.destroy(entry);
+    this.entries.clear();
+    this.ownerKeys.clear();
+    this.keyOwners.clear();
+    this.backend = null;
+  }
+  addOwner(key, owner) {
+    let owners = this.keyOwners.get(key);
+    if (!owners) {
+      owners = /* @__PURE__ */ new Set();
+      this.keyOwners.set(key, owners);
+    }
+    owners.add(owner);
+  }
+  removeOwner(key, owner) {
+    const owners = this.keyOwners.get(key);
+    if (!owners) return;
+    owners.delete(owner);
+    if (owners.size === 0) this.keyOwners.delete(key);
+  }
+  load(entry, load) {
+    let promise;
+    try {
+      promise = load();
+    } catch (err) {
+      promise = Promise.reject(err instanceof Error ? err : new Error(String(err)));
+    }
+    void promise.then(
+      (source) => {
+        if (this.disposed || this.entries.get(entry.key) !== entry) {
+          closeSource(source);
+          return;
+        }
+        const [w, h] = sourceSize(source);
+        entry.source = source;
+        entry.width = w;
+        entry.height = h;
+        entry.state = "ready";
+        this.upload(entry);
+        this.options.onChange?.([entry.key]);
+      },
+      () => {
+        if (this.disposed || this.entries.get(entry.key) !== entry) return;
+        entry.state = "error";
+        this.options.onChange?.([entry.key]);
+      }
+    );
+  }
+  upload(entry) {
+    if (!this.backend || !entry.source) return;
+    try {
+      this.backend.uploadTexture(entry.id, entry.source, entry.opts);
+    } catch {
+    }
+  }
+  destroy(entry) {
+    if (this.backend) {
+      try {
+        this.backend.deleteTexture(entry.id);
+      } catch {
+      }
+    }
+    closeSource(entry.source);
+    entry.source = null;
+  }
+};
+function closeSource(source) {
+  if (source && typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) source.close();
+}
+function sourceSize(source) {
+  const s = source;
+  return [s.naturalWidth || s.videoWidth || s.width || 0, s.naturalHeight || s.videoHeight || s.height || 0];
+}
+var PRESENCE_COLORS = [
+  "#e0575b",
+  "#ef8b3a",
+  "#d8a72e",
+  "#4f9d55",
+  "#2fa39a",
+  "#3f86d8",
+  "#7a63d8",
+  "#c05aa8"
+];
+function randomPresenceColor() {
+  return PRESENCE_COLORS[Math.floor(Math.random() * PRESENCE_COLORS.length)];
+}
+var InstancePresenceRecordType = createRecordType("instance_presence", {
+  scope: "presence"
+}).withDefaultProperties(() => ({
+  userName: "",
+  color: PRESENCE_COLORS[0],
+  cursor: { x: 0, y: 0, type: "default", rotation: 0 },
+  camera: { x: 0, y: 0, z: 1 },
+  selectedShapeIds: [],
+  brush: null,
+  scribbles: [],
+  followingUserId: null,
+  lastActivityTimestamp: 0,
+  chatMessage: "",
+  meta: {}
+}));
+function isInstancePresenceId(id) {
+  return id.startsWith("instance_presence:");
+}
+function createUserPreferences(init = {}) {
+  const id = init.id ?? `user:${uniqueId(12)}`;
+  const state = atom("editor.user", {
+    name: init.name ?? `User ${id.slice(-4)}`,
+    color: init.color ?? randomPresenceColor()
+  });
+  return {
+    getId: () => id,
+    getName: () => state.get().name,
+    getColor: () => state.get().color,
+    setName: (name) => state.update((s) => ({ ...s, name })),
+    setColor: (color) => state.update((s) => ({ ...s, color }))
+  };
+}
+
+// src/records/styles.ts
+var DEFAULT_COLORS = [
+  "black",
+  "grey",
+  "light-violet",
+  "violet",
+  "blue",
+  "light-blue",
+  "yellow",
+  "orange",
+  "green",
+  "light-green",
+  "light-red",
+  "red",
+  "white"
+];
+var DEFAULT_FILLS = ["none", "semi", "solid", "pattern", "fill"];
+var DEFAULT_DASHES = ["draw", "solid", "dashed", "dotted"];
+var DEFAULT_SIZES = ["s", "m", "l", "xl"];
+var DEFAULT_FONTS = ["draw", "sans", "serif", "mono"];
+var DEFAULT_H_ALIGNS = ["start", "middle", "end", "start-legacy", "end-legacy", "middle-legacy"];
+var DEFAULT_V_ALIGNS = ["start", "middle", "end"];
+var GEO_SHAPE_KINDS = [
+  "rectangle",
+  "ellipse",
+  "triangle",
+  "diamond",
+  "pentagon",
+  "hexagon",
+  "octagon",
+  "star",
+  "rhombus",
+  "rhombus-2",
+  "oval",
+  "trapezoid",
+  "arrow-right",
+  "arrow-left",
+  "arrow-up",
+  "arrow-down",
+  "x-box",
+  "check-box",
+  "cloud",
+  "heart"
+];
+var STROKE_SIZES = { s: 2, m: 3.5, l: 5, xl: 10 };
+var FONT_SIZES = { s: 18, m: 24, l: 36, xl: 44 };
+var LIGHT_THEME = {
+  background: "#f9fafb",
+  solid: "#fcfffe",
+  text: "#000000",
+  black: {
+    solid: "#1d1d1d",
+    semi: "#e8e8e8",
+    pattern: "#494949",
+    fill: "#1d1d1d",
+    note: { fill: "#fce19c", text: "#000000" },
+    highlight: { srgb: "#fddd00", p3: "color(display-p3 0.972 0.8705 0.05)" }
+  },
+  grey: {
+    solid: "#9fa8b2",
+    semi: "#eceef0",
+    pattern: "#bac3cb",
+    fill: "#9fa8b2",
+    note: { fill: "#eaeaea", text: "#000000" },
+    highlight: { srgb: "#cbe7f1", p3: "color(display-p3 0.85 0.9 0.94)" }
+  },
+  "light-violet": {
+    solid: "#e085f4",
+    semi: "#f5eafa",
+    pattern: "#e9acf8",
+    fill: "#e085f4",
+    note: { fill: "#f5eafa", text: "#000000" },
+    highlight: { srgb: "#f6c9ff", p3: "color(display-p3 0.97 0.79 1)" }
+  },
+  violet: {
+    solid: "#ae3ec9",
+    semi: "#ecdcf2",
+    pattern: "#c26fd6",
+    fill: "#ae3ec9",
+    note: { fill: "#e5b7f1", text: "#000000" },
+    highlight: { srgb: "#dfa7f1", p3: "color(display-p3 0.87 0.65 0.95)" }
+  },
+  blue: {
+    solid: "#4465e9",
+    semi: "#dce1f8",
+    pattern: "#6681ee",
+    fill: "#4465e9",
+    note: { fill: "#c9d3fb", text: "#000000" },
+    highlight: { srgb: "#8fbdff", p3: "color(display-p3 0.56 0.74 1)" }
+  },
+  "light-blue": {
+    solid: "#4ba1f1",
+    semi: "#ddedfa",
+    pattern: "#78b7f4",
+    fill: "#4ba1f1",
+    note: { fill: "#c9e4fb", text: "#000000" },
+    highlight: { srgb: "#9de0ff", p3: "color(display-p3 0.62 0.88 1)" }
+  },
+  yellow: {
+    solid: "#f1ac4b",
+    semi: "#f9f0e6",
+    pattern: "#f3c68a",
+    fill: "#f1ac4b",
+    note: { fill: "#fbe9c9", text: "#000000" },
+    highlight: { srgb: "#fddd00", p3: "color(display-p3 0.972 0.8705 0.05)" }
+  },
+  orange: {
+    solid: "#e16919",
+    semi: "#faeae1",
+    pattern: "#eb9c6a",
+    fill: "#e16919",
+    note: { fill: "#f9d3b8", text: "#000000" },
+    highlight: { srgb: "#ffa971", p3: "color(display-p3 1 0.66 0.44)" }
+  },
+  green: {
+    solid: "#099268",
+    semi: "#d3e9e3",
+    pattern: "#4ab99c",
+    fill: "#099268",
+    note: { fill: "#b5dfd2", text: "#000000" },
+    highlight: { srgb: "#98f2c8", p3: "color(display-p3 0.6 0.95 0.78)" }
+  },
+  "light-green": {
+    solid: "#4cb05e",
+    semi: "#dbf0e0",
+    pattern: "#84c78f",
+    fill: "#4cb05e",
+    note: { fill: "#c8ead0", text: "#000000" },
+    highlight: { srgb: "#98f2c8", p3: "color(display-p3 0.6 0.95 0.78)" }
+  },
+  "light-red": {
+    solid: "#f87777",
+    semi: "#f4dadb",
+    pattern: "#f8a2a2",
+    fill: "#f87777",
+    note: { fill: "#fcd1d1", text: "#000000" },
+    highlight: { srgb: "#ffb2b2", p3: "color(display-p3 1 0.7 0.7)" }
+  },
+  red: {
+    solid: "#e03131",
+    semi: "#f4dadb",
+    pattern: "#ea6b6b",
+    fill: "#e03131",
+    note: { fill: "#f4b7b7", text: "#000000" },
+    highlight: { srgb: "#ff9c9c", p3: "color(display-p3 1 0.61 0.61)" }
+  },
+  white: {
+    solid: "#ffffff",
+    semi: "#f5f5f5",
+    pattern: "#f5f5f5",
+    fill: "#ffffff",
+    note: { fill: "#ffffff", text: "#000000" },
+    highlight: { srgb: "#ffffff", p3: "color(display-p3 1 1 1)" }
+  }
+};
+function hexToRgba(hex, alpha = 1) {
+  let h = hex.trim();
+  if (h.startsWith("#")) h = h.slice(1);
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  const a = h.length >= 8 ? parseInt(h.slice(6, 8), 16) : Math.round(alpha * 255);
+  return (r << 24 | g << 16 | b << 8 | a) >>> 0;
+}
+
+// src/records/styleProp.ts
+var StyleProp = class _StyleProp {
+  constructor(id, defaultValue, validator) {
+    this.id = id;
+    this.defaultValue = defaultValue;
+    this.validator = validator;
+  }
+  id;
+  defaultValue;
+  validator;
+  /** Define a style with a free-form value. */
+  static define(id, options) {
+    return new _StyleProp(id, options.defaultValue, options.validate);
+  }
+  /** Define a style whose value is one of a fixed set of strings. */
+  static defineEnum(id, options) {
+    return new EnumStyleProp(id, options.defaultValue, options.values);
+  }
+  validate(value) {
+    return this.validator ? this.validator(value) : value;
+  }
+};
+var EnumStyleProp = class extends StyleProp {
+  constructor(id, defaultValue, values) {
+    super(id, defaultValue, (v) => {
+      if (typeof v !== "string" || !values.includes(v)) {
+        throw new Error(`Invalid value for style ${id}: ${String(v)}`);
+      }
+      return v;
+    });
+    this.values = values;
+  }
+  values;
+};
+var DefaultColorStyle = StyleProp.defineEnum("mocanvas:color", { defaultValue: "black", values: DEFAULT_COLORS });
+var DefaultLabelColorStyle = StyleProp.defineEnum("mocanvas:labelColor", { defaultValue: "black", values: DEFAULT_COLORS });
+var DefaultFillStyle = StyleProp.defineEnum("mocanvas:fill", { defaultValue: "none", values: DEFAULT_FILLS });
+var DefaultDashStyle = StyleProp.defineEnum("mocanvas:dash", { defaultValue: "draw", values: DEFAULT_DASHES });
+var DefaultSizeStyle = StyleProp.defineEnum("mocanvas:size", { defaultValue: "m", values: DEFAULT_SIZES });
+var DefaultFontStyle = StyleProp.defineEnum("mocanvas:font", { defaultValue: "draw", values: DEFAULT_FONTS });
+var DefaultHorizontalAlignStyle = StyleProp.defineEnum("mocanvas:horizontalAlign", { defaultValue: "middle", values: DEFAULT_H_ALIGNS });
+var DefaultVerticalAlignStyle = StyleProp.defineEnum("mocanvas:verticalAlign", { defaultValue: "middle", values: DEFAULT_V_ALIGNS });
+var GeoShapeGeoStyle = StyleProp.defineEnum("mocanvas:geo", { defaultValue: "rectangle", values: GEO_SHAPE_KINDS });
+var SharedStyleMap = class {
+  map = /* @__PURE__ */ new Map();
+  get size() {
+    return this.map.size;
+  }
+  get(prop) {
+    return this.map.get(prop);
+  }
+  getAsKnownValue(prop) {
+    const s = this.get(prop);
+    return s?.type === "shared" ? s.value : void 0;
+  }
+  has(prop) {
+    return this.map.has(prop);
+  }
+  /** Record a value seen on a shape. */
+  applyValue(prop, value) {
+    const existing = this.map.get(prop);
+    if (!existing) this.map.set(prop, { type: "shared", value });
+    else if (existing.type === "shared" && existing.value !== value) this.map.set(prop, { type: "mixed" });
+  }
+  [Symbol.iterator]() {
+    return this.map.entries();
+  }
+  keys() {
+    return this.map.keys();
+  }
+};
+function getStylePropsOf(props) {
+  const out = /* @__PURE__ */ new Map();
+  if (!props) return out;
+  for (const [key, v] of Object.entries(props)) {
+    if (v instanceof StyleProp) out.set(key, v);
+  }
+  return out;
+}
+var HistoryManager = class {
+  constructor(store, onBatchComplete) {
+    this.store = store;
+    this.onBatchComplete = onBatchComplete;
+    this._version = atom("history.version", 0);
+    this.dispose = store.listen(
+      (entry) => {
+        if (this.ignoring > 0) return;
+        if (isRecordsDiffEmpty(entry.changes)) return;
+        this.pushDiff(entry.changes);
+      },
+      { source: "user", scope: "document" }
+    );
+  }
+  store;
+  onBatchComplete;
+  undos = [];
+  redos = [];
+  ignoring = 0;
+  pendingDiff = null;
+  _version;
+  dispose;
+  pushDiff(diff) {
+    const last = this.undos.at(-1);
+    if (last && last.type === "diff") {
+      last.diff = squashRecordDiffs([last.diff, diff]);
+    } else {
+      this.undos.push({ type: "diff", diff });
+    }
+    if (this.redos.length) this.redos = [];
+    this._version.update((v) => v + 1);
+  }
+  /** Reactive counter for UI. */
+  getVersion() {
+    return this._version.get();
+  }
+  getNumUndos() {
+    return this.undos.filter((e) => e.type === "diff").length;
+  }
+  getNumRedos() {
+    return this.redos.filter((e) => e.type === "diff").length;
+  }
+  /** Run `fn` without recording its changes. */
+  ignore(fn) {
+    this.ignoring++;
+    try {
+      return fn();
+    } finally {
+      this.ignoring--;
+    }
+  }
+  /** Place a stopping point. Returns the mark id. */
+  mark(id = `mark:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 8)}`) {
+    const last = this.undos.at(-1);
+    if (last && last.type === "mark") {
+      last.id = id;
+    } else {
+      this.undos.push({ type: "mark", id });
+    }
+    this._version.update((v) => v + 1);
+    return id;
+  }
+  apply(diff) {
+    this.ignore(() => {
+      transact(() => {
+        this.store.applyDiff(diff, { runCallbacks: true });
+      });
+    });
+  }
+  undo() {
+    this.step("undo", "toMark", void 0);
+    return this;
+  }
+  redo() {
+    this.step("redo", "toMark", void 0);
+    return this;
+  }
+  /** Undo to the previous mark and drop the undone entries (no redo). */
+  bail() {
+    this.step("undo", "toMark", void 0, true);
+    return this;
+  }
+  /** Undo back to a specific mark and drop the entries. */
+  bailToMark(id) {
+    this.step("undo", "toSpecificMark", id, true);
+    return this;
+  }
+  /** Merge every diff since `id` into one step (the mark stays). */
+  squashToMark(id) {
+    const i = this.undos.findLastIndex((e) => e.type === "mark" && e.id === id);
+    if (i < 0) return this;
+    const tail = this.undos.splice(i + 1);
+    const diffs = tail.filter((e) => e.type === "diff").map((e) => e.diff);
+    if (diffs.length) this.undos.push({ type: "diff", diff: squashRecordDiffs(diffs) });
+    this._version.update((v) => v + 1);
+    return this;
+  }
+  clear() {
+    this.undos = [];
+    this.redos = [];
+    this.pendingDiff = null;
+    this._version.update((v) => v + 1);
+  }
+  step(dir, mode, markId, drop = false) {
+    const from = dir === "undo" ? this.undos : this.redos;
+    const to = dir === "undo" ? this.redos : this.undos;
+    if (from.length === 0) return;
+    while (from.length && from.at(-1).type === "mark") {
+      const m = from.pop();
+      if (!drop) to.push(m);
+      if (mode === "toSpecificMark" && m.id === markId) {
+        this._version.update((v) => v + 1);
+        return;
+      }
+    }
+    const diffs = [];
+    while (from.length) {
+      const e = from.at(-1);
+      if (e.type === "mark") {
+        if (mode === "toMark") break;
+        from.pop();
+        if (!drop) to.push(e);
+        if (e.id === markId) break;
+        continue;
+      }
+      from.pop();
+      diffs.push(e.diff);
+      if (!drop) to.push(e);
+      if (mode === "toMark") break;
+    }
+    if (diffs.length) {
+      const combined = squashRecordDiffs(diffs);
+      this.apply(dir === "undo" ? reverseRecordsDiff(combined) : combined);
+    }
+    this._version.update((v) => v + 1);
+    this.onBatchComplete?.();
+  }
+  destroy() {
+    this.dispose();
+  }
+};
+var SnapManager = class _SnapManager {
+  constructor(editor) {
+    this.editor = editor;
+    this._lines = atom("snap.lines", []);
+  }
+  editor;
+  _lines;
+  /** Snap distance in screen pixels. */
+  threshold = 8;
+  getLines() {
+    return this._lines.get();
+  }
+  clearLines() {
+    if (this._lines.get().length) this._lines.set([]);
+  }
+  /** Bounds of shapes near the viewport that are not being moved. */
+  getSnapTargets(exclude) {
+    const editor = this.editor;
+    const vp = editor.getViewportPageBounds();
+    const pad = Math.max(vp.w, vp.h);
+    const shapes = editor.getShapesIntersectingBounds(Box.Expand(vp, pad));
+    const out = [];
+    for (const s of shapes) {
+      if (exclude.has(s.id)) continue;
+      if (s.parentId !== editor.getCurrentPageId()) continue;
+      const b = editor.getShapePageBounds(s);
+      if (b) out.push(b);
+    }
+    return out;
+  }
+  static pointsOf(b) {
+    const cx = b.x + b.w / 2;
+    const cy = b.y + b.h / 2;
+    return {
+      xs: [
+        { value: b.x, y: cy },
+        { value: cx, y: cy },
+        { value: b.x + b.w, y: cy }
+      ],
+      ys: [
+        { value: b.y, x: cx },
+        { value: cy, x: cx },
+        { value: b.y + b.h, x: cx }
+      ]
+    };
+  }
+  /**
+   * Snap a moving box (already offset by the proposed delta) to nearby shapes.
+   * Returns the extra nudge to apply and the guide lines to show.
+   */
+  snapTranslate(moving, exclude, opts = {}) {
+    const editor = this.editor;
+    const th = this.threshold / editor.getZoomLevel();
+    const targets = this.getSnapTargets(exclude);
+    const mine = _SnapManager.pointsOf(moving);
+    let bestX = null;
+    let bestY = null;
+    for (const t of targets) {
+      const tp = _SnapManager.pointsOf(t);
+      if (!opts.lockX) {
+        for (const a of mine.xs) {
+          for (const b of tp.xs) {
+            const d = Math.abs(a.value - b.value);
+            if (d <= th && (!bestX || d < bestX.d)) bestX = { d, nudge: b.value - a.value };
+          }
+        }
+      }
+      if (!opts.lockY) {
+        for (const a of mine.ys) {
+          for (const b of tp.ys) {
+            const d = Math.abs(a.value - b.value);
+            if (d <= th && (!bestY || d < bestY.d)) bestY = { d, nudge: b.value - a.value };
+          }
+        }
+      }
+    }
+    const nudge = new Vec(bestX?.nudge ?? 0, bestY?.nudge ?? 0);
+    const snapped = new Box(moving.x + nudge.x, moving.y + nudge.y, moving.w, moving.h);
+    const sp = _SnapManager.pointsOf(snapped);
+    const lines = [];
+    const eps = 0.01;
+    for (const t of targets) {
+      const tp = _SnapManager.pointsOf(t);
+      for (const a of sp.xs) {
+        for (const b of tp.xs) {
+          if (Math.abs(a.value - b.value) < eps) {
+            const ys = [snapped.y, snapped.maxY, t.y, t.y + t.h];
+            lines.push({ id: `x:${a.value.toFixed(2)}`, points: [new Vec(a.value, Math.min(...ys)), new Vec(a.value, Math.max(...ys))] });
+          }
+        }
+      }
+      for (const a of sp.ys) {
+        for (const b of tp.ys) {
+          if (Math.abs(a.value - b.value) < eps) {
+            const xs = [snapped.x, snapped.maxX, t.x, t.x + t.w];
+            lines.push({ id: `y:${a.value.toFixed(2)}`, points: [new Vec(Math.min(...xs), a.value), new Vec(Math.max(...xs), a.value)] });
+          }
+        }
+      }
+    }
+    const merged = /* @__PURE__ */ new Map();
+    for (const l of lines) {
+      const prev = merged.get(l.id);
+      if (!prev) merged.set(l.id, l);
+      else {
+        const pts = [...prev.points, ...l.points];
+        const isX = l.id.startsWith("x:");
+        const vals = pts.map((p) => isX ? p.y : p.x);
+        const min = Math.min(...vals);
+        const max = Math.max(...vals);
+        prev.points = isX ? [new Vec(pts[0].x, min), new Vec(pts[0].x, max)] : [new Vec(min, pts[0].y), new Vec(max, pts[0].y)];
+      }
+    }
+    const result = [...merged.values()];
+    this._lines.set(result);
+    return { nudge, lines: result };
+  }
+};
+
+// src/editor/Editor.ts
+var DEFAULT_EDITOR_CONFIG = {
+  maxShapesPerPage: 4e3,
+  dragDistanceSquared: 16,
+  hitTestMargin: 8,
+  zoomMin: 0.05,
+  zoomMax: 8,
+  zoomSteps: [0.1, 0.25, 0.5, 1, 2, 4, 8],
+  backgroundColor: [0.976, 0.98, 0.984, 1],
+  animationMediumMs: 320
+};
+var RAD_PER_DEG = Math.PI / 180;
+var Editor = class extends EventEmitter {
+  store;
+  engine;
+  history;
+  root;
+  shapeUtils;
+  bindingUtils;
+  options;
+  inputs;
+  handles = new HandleTable();
+  /** GPU textures referenced by shape styles (images, rasterized text). */
+  textures = new TextureManager({ onChange: (keys) => this.onTexturesChanged(keys) });
+  snaps;
+  getContainer;
+  sideEffects;
+  kindIds = /* @__PURE__ */ new Map();
+  _frameEpoch;
+  _overlayShapeIds;
+  _overlayClips;
+  _isDisposed;
+  _lastFrame;
+  disposables = [];
+  syncedPageId = null;
+  /** Shapes whose last write to the engine threw; they are warned about once. */
+  brokenShapeIds = /* @__PURE__ */ new Set();
+  constructor(opts) {
+    super();
+    this.store = opts.store;
+    this.engine = opts.engine;
+    this.getContainer = opts.getContainer;
+    this.options = { ...DEFAULT_EDITOR_CONFIG, ...opts.options };
+    this.sideEffects = this.store.sideEffects;
+    this.snaps = new SnapManager(this);
+    this._frameEpoch = atom("editor.frameEpoch", 0);
+    this._overlayShapeIds = atom("editor.overlayShapeIds", []);
+    this._overlayClips = atom("editor.overlayClips", []);
+    this._isDisposed = atom("editor.isDisposed", false);
+    this._lastFrame = atom("editor.lastFrame", { drawn: 0, culled: 0, ms: 0 });
+    this.inputs = {
+      originPagePoint: new Vec(),
+      originScreenPoint: new Vec(),
+      previousPagePoint: new Vec(),
+      previousScreenPoint: new Vec(),
+      currentPagePoint: new Vec(),
+      currentScreenPoint: new Vec(),
+      keys: /* @__PURE__ */ new Set(),
+      buttons: /* @__PURE__ */ new Set(),
+      isPen: false,
+      shiftKey: false,
+      ctrlKey: false,
+      altKey: false,
+      metaKey: false,
+      accelKey: false,
+      isDragging: false,
+      isPointing: false,
+      isPinching: false,
+      isEditing: false,
+      isPanning: false,
+      pointerVelocity: new Vec()
+    };
+    const utils = {};
+    let kind = 1;
+    for (const U of opts.shapeUtils) {
+      if (utils[U.type]) throw new Error(`Duplicate ShapeUtil for type "${U.type}"`);
+      utils[U.type] = new U(this);
+      this.kindIds.set(U.type, kind++);
+    }
+    this.shapeUtils = utils;
+    const bindingUtils = {};
+    for (const B of opts.bindingUtils ?? []) {
+      if (bindingUtils[B.type]) throw new Error(`Duplicate BindingUtil for type "${B.type}"`);
+      bindingUtils[B.type] = new B(this);
+    }
+    this.bindingUtils = bindingUtils;
+    this.ensureBaseRecords();
+    this.registerBindingSideEffects();
+    this.registerTextureSideEffects();
+    this.history = new HistoryManager(this.store, () => this.emit("update"));
+    const Root = createRootState(opts.tools, opts.initialState ?? opts.tools[0]?.id ?? "");
+    this.root = new Root(this);
+    this.root.enter({}, "initial");
+    this.disposables.push(
+      this.store.listen(
+        (entry) => {
+          this.syncChanges(entry.changes);
+          this.emit("change", { source: entry.source });
+        },
+        { source: "all", scope: "document" }
+      ),
+      this.store.listen(
+        () => {
+          this.bumpFrame();
+        },
+        { source: "all", scope: "session" }
+      )
+    );
+    this.syncPage(this.getCurrentPageId());
+  }
+  // ---- lifecycle ----------------------------------------------------------
+  dispose() {
+    if (this._isDisposed.get()) return;
+    this._isDisposed.set(true);
+    for (const d of this.disposables) d();
+    this.textures.dispose();
+    this.history.destroy();
+    this.removeAllListeners();
+  }
+  getIsDisposed() {
+    return this._isDisposed.get();
+  }
+  ensureBaseRecords() {
+    transact(() => {
+      if (!this.store.has(DOCUMENT_ID)) {
+        this.store.put([DocumentRecordType.create({ id: DOCUMENT_ID, name: this.store.props.defaultName })]);
+      }
+      let pages = this.store.query.records("page").get();
+      if (pages.length === 0) {
+        const page = PageRecordType.create({ id: PageRecordType.createId(), name: "Page 1", index: ZERO_INDEX_KEY });
+        this.store.put([page]);
+        pages = [page];
+      }
+      const sorted = sortByIndex(pages);
+      const firstPage = sorted[0];
+      let instance = this.store.get(INSTANCE_ID);
+      if (!instance || !this.store.has(instance.currentPageId)) {
+        instance = InstanceRecordType.create({
+          id: INSTANCE_ID,
+          currentPageId: firstPage.id
+        });
+        this.store.put([instance]);
+      }
+      for (const p of sorted) this.ensurePageSessionRecords(p.id);
+    });
+  }
+  ensurePageSessionRecords(pageId) {
+    const camId = CameraRecordType.createId(pageId.slice("page:".length));
+    if (!this.store.has(camId)) this.store.put([CameraRecordType.create({ id: camId })]);
+    const psId = InstancePageStateRecordType.createId(pageId.slice("page:".length));
+    if (!this.store.has(psId)) this.store.put([InstancePageStateRecordType.create({ id: psId, pageId })]);
+  }
+  // ---- reactivity helpers -------------------------------------------------
+  /** Increments whenever the GPU frame must be redrawn. */
+  getFrameEpoch() {
+    return this._frameEpoch.get();
+  }
+  bumpFrame() {
+    this._frameEpoch.update((v) => v + 1);
+  }
+  /** Stats for the last rendered frame. */
+  getLastFrameStats() {
+    return this._lastFrame.get();
+  }
+  /** Shapes the DOM overlay must render this frame, in draw order. */
+  getOverlayShapeIds() {
+    return this._overlayShapeIds.get();
+  }
+  /**
+   * Page-space clip rects for the overlay shapes, parallel to
+   * `getOverlayShapeIds()`; `undefined` where the shape is unclipped.
+   */
+  getOverlayClips() {
+    return this._overlayClips.get();
+  }
+  // ---- batching / history ------------------------------------------------
+  run(fn, opts = {}) {
+    return transact(() => {
+      if (opts.history === "ignore") return this.history.ignore(fn);
+      return fn();
+    });
+  }
+  /** @deprecated use `run` */
+  batch(fn) {
+    return this.run(fn);
+  }
+  markHistoryStoppingPoint(name) {
+    return this.history.mark(name);
+  }
+  /** Alias of `markHistoryStoppingPoint`. */
+  mark(name) {
+    return this.markHistoryStoppingPoint(name);
+  }
+  undo() {
+    this.history.undo();
+    return this;
+  }
+  redo() {
+    this.history.redo();
+    return this;
+  }
+  bail() {
+    this.history.bail();
+    return this;
+  }
+  bailToMark(id) {
+    this.history.bailToMark(id);
+    return this;
+  }
+  squashToMark(id) {
+    this.history.squashToMark(id);
+    return this;
+  }
+  getCanUndo() {
+    return this.history.getNumUndos() > 0;
+  }
+  getCanRedo() {
+    return this.history.getNumRedos() > 0;
+  }
+  // ---- document / pages --------------------------------------------------
+  getDocumentSettings() {
+    return this.store.get(DOCUMENT_ID);
+  }
+  updateDocumentSettings(settings) {
+    this.store.put([{ ...this.getDocumentSettings(), ...settings }]);
+    return this;
+  }
+  _pages = computed(
+    "editor.pages",
+    () => sortByIndex(this.store.query.records("page").get())
+  );
+  getPages() {
+    return this._pages.get();
+  }
+  getPage(id) {
+    return this.store.get(id);
+  }
+  getInstanceState() {
+    return this.store.get(INSTANCE_ID);
+  }
+  updateInstanceState(partial) {
+    this.run(
+      () => {
+        this.store.put([{ ...this.getInstanceState(), ...partial }]);
+      },
+      { history: "ignore" }
+    );
+    return this;
+  }
+  getCurrentPageId() {
+    return this.getInstanceState().currentPageId;
+  }
+  getCurrentPage() {
+    return this.getPage(this.getCurrentPageId());
+  }
+  setCurrentPage(pageId) {
+    if (!this.store.has(pageId)) throw new Error(`Page ${pageId} does not exist`);
+    if (pageId === this.getCurrentPageId()) return this;
+    this.run(
+      () => {
+        this.ensurePageSessionRecords(pageId);
+        this.updateInstanceState({ currentPageId: pageId });
+      },
+      { history: "ignore" }
+    );
+    this.syncPage(pageId);
+    return this;
+  }
+  createPage(page = {}) {
+    const pages = this.getPages();
+    const index = getIndexAbove(pages.at(-1)?.index);
+    const record = PageRecordType.create({
+      id: page.id ?? PageRecordType.createId(),
+      name: page.name ?? `Page ${pages.length + 1}`,
+      index,
+      meta: page.meta ?? {}
+    });
+    this.run(() => {
+      this.store.put([record]);
+      this.ensurePageSessionRecords(record.id);
+    });
+    return this;
+  }
+  deletePage(id) {
+    const pages = this.getPages();
+    if (pages.length <= 1) return this;
+    this.run(() => {
+      if (this.getCurrentPageId() === id) {
+        const next = pages.find((p) => p.id !== id);
+        this.setCurrentPage(next.id);
+      }
+      const shapeIds = this.getPageShapeIds(id);
+      this.store.remove([...shapeIds, id]);
+    });
+    return this;
+  }
+  renamePage(id, name) {
+    const page = this.getPage(id);
+    if (page) this.store.put([{ ...page, name }]);
+    return this;
+  }
+  getCurrentPageState() {
+    const id = InstancePageStateRecordType.createId(this.getCurrentPageId().slice("page:".length));
+    return this.store.get(id);
+  }
+  updateCurrentPageState(partial) {
+    this.run(
+      () => {
+        this.store.put([{ ...this.getCurrentPageState(), ...partial }]);
+      },
+      { history: "ignore" }
+    );
+    return this;
+  }
+  // ---- shapes: reading ---------------------------------------------------
+  _allShapes = computed(
+    "editor.allShapes",
+    () => this.store.query.records("shape").get()
+  );
+  _currentPageShapes = computed("editor.currentPageShapes", () => {
+    const pageId = this.getCurrentPageId();
+    return this._allShapes.get().filter((s) => this.getAncestorPageId(s) === pageId);
+  });
+  _currentPageShapeIds = computed("editor.currentPageShapeIds", () => {
+    return new Set(this._currentPageShapes.get().map((s) => s.id));
+  });
+  getShape(id) {
+    const shapeId = typeof id === "string" ? id : id.id;
+    return this.store.get(shapeId);
+  }
+  getShapeUtil(shape) {
+    const type = typeof shape === "string" ? shape : shape.type;
+    const util = this.shapeUtils[type];
+    if (!util) throw new Error(`No ShapeUtil registered for type "${type}"`);
+    return util;
+  }
+  hasShapeUtil(type) {
+    return type in this.shapeUtils;
+  }
+  getCurrentPageShapes() {
+    return this._currentPageShapes.get();
+  }
+  getCurrentPageShapeIds() {
+    return this._currentPageShapeIds.get();
+  }
+  getCurrentPageShapesSorted() {
+    const result = [];
+    const visit = (parentId) => {
+      for (const child of this.getSortedChildIdsForParent(parentId)) {
+        const shape = this.getShape(child);
+        if (!shape) continue;
+        result.push(shape);
+        visit(shape.id);
+      }
+    };
+    visit(this.getCurrentPageId());
+    return result;
+  }
+  getPageShapeIds(pageId) {
+    return this._allShapes.get().filter((s) => this.getAncestorPageId(s) === pageId).map((s) => s.id);
+  }
+  getAncestorPageId(shape) {
+    let cur = typeof shape === "string" ? this.getShape(shape) : shape;
+    let guard = 0;
+    while (cur && guard++ < 1e3) {
+      if (isPageId(cur.parentId)) return cur.parentId;
+      cur = this.getShape(cur.parentId);
+    }
+    return void 0;
+  }
+  getShapeParent(shape) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!s || isPageId(s.parentId)) return void 0;
+    return this.getShape(s.parentId);
+  }
+  getSortedChildIdsForParent(parentId) {
+    const children = this._allShapes.get().filter((s) => s.parentId === parentId);
+    return sortByIndex(children).map((s) => s.id);
+  }
+  getHighestIndexForParent(parentId) {
+    const children = this._allShapes.get().filter((s) => s.parentId === parentId);
+    if (children.length === 0) return ZERO_INDEX_KEY;
+    return getIndexAbove(sortByIndex(children).at(-1).index);
+  }
+  getShapeGeometry(shape) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!s) throw new Error(`Shape not found`);
+    return this.getShapeUtil(s).getGeometry(s);
+  }
+  /** Local → parent transform components. */
+  getShapeLocalTransform(shape) {
+    const c = Math.cos(shape.rotation);
+    const s = Math.sin(shape.rotation);
+    return { a: c, b: s, c: -s, d: c, e: shape.x, f: shape.y };
+  }
+  getShapeParentTransform(shape) {
+    const parent = this.getShapeParent(shape);
+    return parent ? this.getShapePageTransform(parent) : { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+  }
+  getShapePageTransform(shape) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!s) return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    const p = this.getShapeParentTransform(s);
+    const l = this.getShapeLocalTransform(s);
+    return {
+      a: p.a * l.a + p.c * l.b,
+      b: p.b * l.a + p.d * l.b,
+      c: p.a * l.c + p.c * l.d,
+      d: p.b * l.c + p.d * l.d,
+      e: p.a * l.e + p.c * l.f + p.e,
+      f: p.b * l.e + p.d * l.f + p.f
+    };
+  }
+  getShapePageBounds(shape) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!s) return void 0;
+    const m = this.getShapePageTransform(s);
+    const b = this.getShapeGeometry(s).bounds;
+    return Box.FromPoints(b.corners.map((c) => new Vec(m.a * c.x + m.c * c.y + m.e, m.b * c.x + m.d * c.y + m.f)));
+  }
+  getShapeGeometryBounds(shape) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    return s ? this.getShapeGeometry(s).bounds : void 0;
+  }
+  /** Transform a page point into the shape's local space. */
+  getPointInShapeSpace(shape, point) {
+    const m = this.getShapePageTransform(shape);
+    const det = m.a * m.d - m.b * m.c;
+    if (Math.abs(det) < 1e-12) return new Vec(point.x, point.y);
+    const inv = 1 / det;
+    const a = m.d * inv;
+    const b = -m.b * inv;
+    const c = -m.c * inv;
+    const d = m.a * inv;
+    const e = -(a * m.e + c * m.f);
+    const f = -(b * m.e + d * m.f);
+    return new Vec(a * point.x + c * point.y + e, b * point.x + d * point.y + f);
+  }
+  getPointInParentSpace(shape, point) {
+    const s = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!s) return new Vec(point.x, point.y);
+    const parent = this.getShapeParent(s);
+    return parent ? this.getPointInShapeSpace(parent, point) : new Vec(point.x, point.y);
+  }
+  getShapeParentAtPoint(_point) {
+    return void 0;
+  }
+  // ---- engine-backed spatial queries -------------------------------------
+  hitFilterBits(opts) {
+    let bits = 0;
+    if (opts.hitLocked) bits |= 1;
+    return bits;
+  }
+  getShapeAtPoint(point, opts = {}) {
+    this.flushEngine();
+    const margin = (opts.margin ?? this.options.hitTestMargin) / this.getZoomLevel();
+    const bits = this.hitFilterBits(opts) | (opts.hitInside ? 0 : 4);
+    if (!opts.filter) {
+      const h = this.engine.hitTest(point.x, point.y, margin, bits);
+      const id = this.handles.id(h);
+      return id ? this.getShape(id) : void 0;
+    }
+    for (const shape of this.getShapesAtPoint(point, opts)) {
+      if (opts.filter(shape)) return shape;
+    }
+    return void 0;
+  }
+  /** Shapes under a point, topmost first. */
+  getShapesAtPoint(point, opts = {}) {
+    this.flushEngine();
+    const margin = (opts.margin ?? this.options.hitTestMargin) / this.getZoomLevel();
+    const handles = this.engine.queryBox(point.x - margin, point.y - margin, point.x + margin, point.y + margin, 0, this.hitFilterBits(opts));
+    const out = [];
+    for (let i = handles.length - 1; i >= 0; i--) {
+      const id = this.handles.id(handles[i]);
+      const shape = id ? this.getShape(id) : void 0;
+      if (!shape) continue;
+      if (opts.filter && !opts.filter(shape)) continue;
+      const local = this.getPointInShapeSpace(shape, point);
+      const geo = this.getShapeGeometry(shape);
+      if (geo.hitTestPoint(local, margin, opts.hitInside ?? false)) out.push(shape);
+    }
+    return out;
+  }
+  /** Shapes fully inside a page box, in draw order. */
+  getShapesInsideBounds(box, opts = {}) {
+    this.flushEngine();
+    const handles = this.engine.queryBox(box.x, box.y, box.x + box.w, box.y + box.h, 1, this.hitFilterBits(opts));
+    return this.handlesToShapes(handles, opts.filter);
+  }
+  /** Shapes whose outline touches a page box, in draw order. */
+  getShapesIntersectingBounds(box, opts = {}) {
+    this.flushEngine();
+    const handles = this.engine.queryBox(box.x, box.y, box.x + box.w, box.y + box.h, 0, this.hitFilterBits(opts));
+    return this.handlesToShapes(handles, opts.filter);
+  }
+  handlesToShapes(handles, filter) {
+    const out = [];
+    for (const h of handles) {
+      const id = this.handles.id(h);
+      const shape = id ? this.getShape(id) : void 0;
+      if (shape && (!filter || filter(shape))) out.push(shape);
+    }
+    return out;
+  }
+  /**
+   * Union of every shape's page bounds on the current page, or undefined when
+   * the page is empty.
+   *
+   * Geometry, not ink: this is the union of `getShapePageBounds()` and excludes
+   * the half-stroke pad the engine keeps for culling. The pad is per-shape, so
+   * including it would both inflate the box and shift its centre whenever the
+   * outermost shapes carry different stroke widths.
+   */
+  getCurrentPageBounds() {
+    this.flushEngine();
+    const b = this.engine.allGeometryBounds();
+    return b ? Box.FromMinMax(b[0], b[1], b[2], b[3]) : void 0;
+  }
+  // ---- shapes: writing ---------------------------------------------------
+  createShape(partial) {
+    return this.createShapes([partial]);
+  }
+  createShapes(partials) {
+    if (partials.length === 0) return this;
+    const currentPageId = this.getCurrentPageId();
+    const count = this.getCurrentPageShapeIds().size;
+    if (count + partials.length > this.options.maxShapesPerPage) {
+      this.emit("max-shapes", { name: this.getCurrentPage().name, pageId: currentPageId, count });
+    }
+    this.run(() => {
+      const records = [];
+      const indexCache = /* @__PURE__ */ new Map();
+      for (const partial of partials) {
+        const util = this.getShapeUtil(partial.type);
+        const parentId = partial.parentId ?? currentPageId;
+        let index = partial.index;
+        if (!index) {
+          const prev = indexCache.get(parentId) ?? this.getHighestIndexForParent(parentId);
+          index = indexCache.has(parentId) ? getIndexAbove(prev) : prev;
+          indexCache.set(parentId, index);
+        }
+        const props = { ...util.getDefaultProps() };
+        const styles = this.getInstanceState().stylesForNextShape;
+        for (const [key, style] of this.getStylePropsForType(partial.type)) {
+          if (style.id in styles) props[key] = styles[style.id];
+        }
+        for (const [key, value] of Object.entries(partial.props ?? {})) {
+          if (value !== void 0) props[key] = value;
+        }
+        let shape = ShapeRecordType.create({
+          id: partial.id ?? ShapeRecordType.createId(),
+          type: partial.type,
+          x: partial.x ?? 0,
+          y: partial.y ?? 0,
+          rotation: partial.rotation ?? 0,
+          index,
+          parentId,
+          isLocked: partial.isLocked ?? false,
+          opacity: partial.opacity ?? 1,
+          props,
+          meta: { ...partial.meta ?? {} }
+        });
+        const next = util.onBeforeCreate?.(shape);
+        if (next) shape = next;
+        records.push(shape);
+      }
+      this.store.put(records);
+    });
+    return this;
+  }
+  updateShape(partial) {
+    return partial ? this.updateShapes([partial]) : this;
+  }
+  updateShapes(partials) {
+    this.run(() => {
+      const records = [];
+      for (const partial of partials) {
+        if (!partial) continue;
+        const prev = this.getShape(partial.id);
+        if (!prev) continue;
+        const util = this.getShapeUtil(prev);
+        let next = {
+          ...prev,
+          ...partial,
+          props: partial.props ? { ...prev.props, ...partial.props } : prev.props,
+          meta: partial.meta ? { ...prev.meta, ...partial.meta } : prev.meta
+        };
+        const adjusted = util.onBeforeUpdate?.(prev, next);
+        if (adjusted) next = adjusted;
+        records.push(next);
+      }
+      if (records.length) this.store.put(records);
+    });
+    return this;
+  }
+  deleteShape(id) {
+    return this.deleteShapes([id]);
+  }
+  deleteShapes(ids) {
+    const shapeIds = ids.map((s) => typeof s === "string" ? s : s.id);
+    if (shapeIds.length === 0) return this;
+    const toDelete = /* @__PURE__ */ new Set();
+    const collect = (id) => {
+      if (toDelete.has(id)) return;
+      toDelete.add(id);
+      for (const child of this.getSortedChildIdsForParent(id)) collect(child);
+    };
+    for (const id of shapeIds) {
+      const shape = this.getShape(id);
+      if (shape && !shape.isLocked) collect(id);
+    }
+    if (toDelete.size === 0) return this;
+    this.run(() => {
+      const ps = this.getCurrentPageState();
+      const selected = ps.selectedShapeIds.filter((id) => !toDelete.has(id));
+      if (selected.length !== ps.selectedShapeIds.length) this.setSelectedShapes(selected);
+      if (ps.hoveredShapeId && toDelete.has(ps.hoveredShapeId)) this.setHoveredShape(null);
+      if (ps.editingShapeId && toDelete.has(ps.editingShapeId)) this.setEditingShape(null);
+      this.store.remove([...toDelete]);
+    });
+    return this;
+  }
+  reparentShapes(ids, parentId, insertIndex) {
+    this.run(() => {
+      let index = insertIndex ?? this.getHighestIndexForParent(parentId);
+      const updates = [];
+      const parentTransform = isShapeId(parentId) ? this.getShapePageTransform(parentId) : { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+      for (const id of ids) {
+        const shape = this.getShape(id);
+        if (!shape || shape.parentId === parentId) continue;
+        const pageXf = this.getShapePageTransform(shape);
+        const px = pageXf.e;
+        const py = pageXf.f;
+        const det = parentTransform.a * parentTransform.d - parentTransform.b * parentTransform.c;
+        const inv = 1 / (det || 1);
+        const lx = (parentTransform.d * (px - parentTransform.e) - parentTransform.c * (py - parentTransform.f)) * inv;
+        const ly = (-parentTransform.b * (px - parentTransform.e) + parentTransform.a * (py - parentTransform.f)) * inv;
+        const parentRot = Math.atan2(parentTransform.b, parentTransform.a);
+        const pageRot = Math.atan2(pageXf.b, pageXf.a);
+        updates.push({ id, type: shape.type, parentId, index, x: lx, y: ly, rotation: pageRot - parentRot });
+        index = getIndexAbove(index);
+      }
+      this.updateShapes(updates);
+    });
+    return this;
+  }
+  // ---- bindings ----------------------------------------------------------
+  _allBindings = computed(
+    "editor.allBindings",
+    () => this.store.query.records("binding").get()
+  );
+  getBindingUtil(binding) {
+    const type = typeof binding === "string" ? binding : binding.type;
+    const util = this.bindingUtils[type];
+    if (!util) throw new Error(`No BindingUtil registered for type "${type}"`);
+    return util;
+  }
+  hasBindingUtil(type) {
+    return type in this.bindingUtils;
+  }
+  getBinding(id) {
+    return this.store.get(id);
+  }
+  getBindingsFromShape(shape, type) {
+    const id = typeof shape === "string" ? shape : shape.id;
+    return this._allBindings.get().filter((b) => b.fromId === id && (!type || b.type === type));
+  }
+  getBindingsToShape(shape, type) {
+    const id = typeof shape === "string" ? shape : shape.id;
+    return this._allBindings.get().filter((b) => b.toId === id && (!type || b.type === type));
+  }
+  getBindingsInvolvingShape(shape, type) {
+    const id = typeof shape === "string" ? shape : shape.id;
+    return this._allBindings.get().filter((b) => (b.fromId === id || b.toId === id) && (!type || b.type === type));
+  }
+  createBinding(partial) {
+    return this.createBindings([partial]);
+  }
+  createBindings(partials) {
+    if (partials.length === 0) return this;
+    this.run(() => {
+      const records = [];
+      for (const partial of partials) {
+        const util = this.getBindingUtil(partial.type);
+        if (!this.getShape(partial.fromId) || !this.getShape(partial.toId)) continue;
+        let binding = BindingRecordType.create({
+          id: partial.id ?? BindingRecordType.createId(),
+          type: partial.type,
+          fromId: partial.fromId,
+          toId: partial.toId,
+          props: { ...util.getDefaultProps(), ...partial.props ?? {} },
+          meta: { ...partial.meta ?? {} }
+        });
+        const next = util.onBeforeCreate?.({ binding });
+        if (next) binding = next;
+        records.push(binding);
+      }
+      this.store.put(records);
+    });
+    return this;
+  }
+  updateBinding(partial) {
+    return this.updateBindings([partial]);
+  }
+  updateBindings(partials) {
+    this.run(() => {
+      const records = [];
+      for (const partial of partials) {
+        const prev = this.getBinding(partial.id);
+        if (!prev) continue;
+        let next = {
+          ...prev,
+          ...partial,
+          props: partial.props ? { ...prev.props, ...partial.props } : prev.props,
+          meta: partial.meta ? { ...prev.meta, ...partial.meta } : prev.meta
+        };
+        const adjusted = this.getBindingUtil(prev).onBeforeChange?.({ bindingBefore: prev, bindingAfter: next });
+        if (adjusted) next = adjusted;
+        records.push(next);
+      }
+      if (records.length) this.store.put(records);
+    });
+    return this;
+  }
+  deleteBinding(id, opts = {}) {
+    return this.deleteBindings([id], opts);
+  }
+  deleteBindings(ids, opts = {}) {
+    const bindingIds = ids.map((b) => typeof b === "string" ? b : b.id);
+    if (bindingIds.length === 0) return this;
+    this.run(() => {
+      if (opts.isolateShapes) {
+        for (const id of bindingIds) {
+          const binding = this.getBinding(id);
+          if (!binding) continue;
+          const util = this.getBindingUtil(binding);
+          util.onBeforeIsolateFromShape?.({ binding });
+          util.onBeforeIsolateToShape?.({ binding });
+        }
+      }
+      this.store.remove(bindingIds.filter((id) => this.store.has(id)));
+    });
+    return this;
+  }
+  /** Store side effects that keep bindings consistent with their shapes. */
+  registerBindingSideEffects() {
+    const se = this.store.sideEffects;
+    this.disposables.push(
+      se.registerAfterCreateHandler("binding", (record) => {
+        if (!isBinding(record) || !this.hasBindingUtil(record.type)) return;
+        this.getBindingUtil(record).onAfterCreate?.({ binding: record });
+      }),
+      se.registerAfterChangeHandler("binding", (prev, next) => {
+        if (!isBinding(next) || !isBinding(prev) || !this.hasBindingUtil(next.type)) return;
+        this.getBindingUtil(next).onAfterChange?.({ bindingBefore: prev, bindingAfter: next });
+      }),
+      se.registerBeforeDeleteHandler("binding", (record) => {
+        if (!isBinding(record) || !this.hasBindingUtil(record.type)) return;
+        this.getBindingUtil(record).onBeforeDelete?.({ binding: record });
+      }),
+      se.registerAfterDeleteHandler("binding", (record) => {
+        if (!isBinding(record) || !this.hasBindingUtil(record.type)) return;
+        this.getBindingUtil(record).onAfterDelete?.({ binding: record });
+      }),
+      se.registerAfterChangeHandler("shape", (prev, next) => {
+        if (prev.typeName !== "shape" || next.typeName !== "shape") return;
+        if (this._allBindings.get().length === 0) return;
+        for (const binding of this.getBindingsInvolvingShape(next.id)) {
+          if (!this.hasBindingUtil(binding.type)) continue;
+          const util = this.getBindingUtil(binding);
+          if (binding.fromId === next.id) util.onAfterChangeFromShape?.({ binding, shapeBefore: prev, shapeAfter: next, reason: "self" });
+          if (binding.toId === next.id) util.onAfterChangeToShape?.({ binding, shapeBefore: prev, shapeAfter: next, reason: "self" });
+        }
+      }),
+      se.registerBeforeDeleteHandler("shape", (record) => {
+        if (record.typeName !== "shape") return;
+        const bindings = this.getBindingsInvolvingShape(record.id);
+        if (bindings.length === 0) return;
+        for (const binding of bindings) {
+          if (!this.hasBindingUtil(binding.type)) continue;
+          const util = this.getBindingUtil(binding);
+          if (binding.fromId === record.id) util.onBeforeDeleteFromShape?.({ binding, shape: record });
+          if (binding.toId === record.id) util.onBeforeDeleteToShape?.({ binding, shape: record });
+        }
+        this.store.remove(bindings.map((b) => b.id).filter((id) => this.store.has(id)));
+      })
+    );
+  }
+  /** Duplicate shapes (and their descendants) with new ids, offset by `offset` in page space. Returns the new top-level ids. */
+  duplicateShapes(ids = this.getSelectedShapeIds(), offset = { x: 20, y: 20 }) {
+    if (ids.length === 0) return [];
+    const idMap = /* @__PURE__ */ new Map();
+    const collect = (id) => {
+      if (idMap.has(id)) return;
+      idMap.set(id, ShapeRecordType.createId());
+      for (const c of this.getSortedChildIdsForParent(id)) collect(c);
+    };
+    for (const id of ids) collect(id);
+    const topLevel = new Set(ids);
+    const creates = [];
+    for (const shape of this.getCurrentPageShapesSorted()) {
+      const newId = idMap.get(shape.id);
+      if (!newId) continue;
+      const parentId = isShapeId(shape.parentId) && idMap.has(shape.parentId) ? idMap.get(shape.parentId) : shape.parentId;
+      const isTop = topLevel.has(shape.id) || !idMap.has(shape.parentId);
+      creates.push({
+        ...shape,
+        id: newId,
+        parentId,
+        x: shape.x + (isTop ? offset.x : 0),
+        y: shape.y + (isTop ? offset.y : 0),
+        index: void 0,
+        props: { ...shape.props },
+        meta: { ...shape.meta }
+      });
+    }
+    this.run(() => {
+      this.createShapes(creates);
+      const bindingCreates = [];
+      for (const b of this._allBindings.get()) {
+        const from = idMap.get(b.fromId);
+        const to = idMap.get(b.toId);
+        if (from && to) bindingCreates.push({ type: b.type, fromId: from, toId: to, props: { ...b.props }, meta: { ...b.meta } });
+      }
+      if (bindingCreates.length) this.createBindings(bindingCreates);
+    });
+    return ids.map((id) => idMap.get(id));
+  }
+  /** Serializable content for the clipboard: shapes (with descendants) and bindings between them. */
+  getContentFromCurrentPage(ids) {
+    if (ids.length === 0) return void 0;
+    const set = /* @__PURE__ */ new Set();
+    const collect = (id) => {
+      if (set.has(id)) return;
+      set.add(id);
+      for (const c of this.getSortedChildIdsForParent(id)) collect(c);
+    };
+    for (const id of ids) collect(id);
+    const shapes = this.getCurrentPageShapesSorted().filter((s) => set.has(s.id));
+    const bindings = this._allBindings.get().filter((b) => set.has(b.fromId) && set.has(b.toId));
+    return { shapes, bindings };
+  }
+  /** Insert clipboard content at a page point (centered), with fresh ids. Returns the new ids. */
+  putContentOntoCurrentPage(content, opts = {}) {
+    const { shapes } = content;
+    if (shapes.length === 0) return [];
+    const idMap = /* @__PURE__ */ new Map();
+    for (const s of shapes) idMap.set(s.id, ShapeRecordType.createId());
+    const pageId = this.getCurrentPageId();
+    const tops = shapes.filter((s) => !idMap.has(s.parentId));
+    let offset = new Vec(0, 0);
+    if (opts.point) {
+      const boxes = tops.map((s) => {
+        const util = this.shapeUtils[s.type];
+        const b = util ? util.getGeometry(s).bounds : new Box(0, 0, 0, 0);
+        return new Box(s.x + b.x, s.y + b.y, b.w, b.h);
+      });
+      const common = Box.Common(boxes);
+      offset = Vec.Sub(opts.point, common.center);
+    }
+    const creates = shapes.map((s) => {
+      const isTop = !idMap.has(s.parentId);
+      return {
+        ...s,
+        id: idMap.get(s.id),
+        parentId: isTop ? pageId : idMap.get(s.parentId),
+        x: s.x + (isTop ? offset.x : 0),
+        y: s.y + (isTop ? offset.y : 0),
+        index: void 0,
+        props: { ...s.props },
+        meta: { ...s.meta }
+      };
+    });
+    this.run(() => {
+      this.createShapes(creates.filter((c) => this.hasShapeUtil(c.type)));
+      const bindingCreates = [];
+      for (const b of content.bindings ?? []) {
+        const from = idMap.get(b.fromId);
+        const to = idMap.get(b.toId);
+        if (from && to && this.hasBindingUtil(b.type)) bindingCreates.push({ type: b.type, fromId: from, toId: to, props: { ...b.props }, meta: { ...b.meta } });
+      }
+      if (bindingCreates.length) this.createBindings(bindingCreates);
+      if (opts.select ?? true) this.setSelectedShapes(tops.map((s) => idMap.get(s.id)));
+    });
+    return tops.map((s) => idMap.get(s.id));
+  }
+  // ---- styles ------------------------------------------------------------
+  stylePropCache = /* @__PURE__ */ new Map();
+  /** Style props declared by the ShapeUtil for a type, keyed by prop name. */
+  getStylePropsForType(type) {
+    let m = this.stylePropCache.get(type);
+    if (!m) {
+      const ctor = this.shapeUtils[type]?.constructor;
+      m = getStylePropsOf(ctor?.props);
+      this.stylePropCache.set(type, m);
+    }
+    return m;
+  }
+  getStyleForNextShape(style) {
+    const v = this.getInstanceState().stylesForNextShape[style.id];
+    return v === void 0 ? style.defaultValue : v;
+  }
+  setStyleForNextShapes(style, value) {
+    const styles = this.getInstanceState().stylesForNextShape;
+    if (styles[style.id] === value) return this;
+    return this.updateInstanceState({ stylesForNextShape: { ...styles, [style.id]: value } });
+  }
+  /** Set a style on every selected shape that declares it. */
+  setStyleForSelectedShapes(style, value) {
+    const updates = [];
+    for (const shape of this.getSelectedShapes()) {
+      for (const [key, sp] of this.getStylePropsForType(shape.type)) {
+        if (sp !== style) continue;
+        if (shape.props[key] === value) continue;
+        updates.push({ id: shape.id, type: shape.type, props: { [key]: value } });
+      }
+    }
+    if (updates.length) this.updateShapes(updates);
+    return this;
+  }
+  /** Styles of the selection (or of the next shape when nothing is selected). */
+  getSharedStyles() {
+    const map = new SharedStyleMap();
+    const selected = this.getSelectedShapes();
+    if (selected.length === 0) {
+      const styles = this.getInstanceState().stylesForNextShape;
+      const seen = /* @__PURE__ */ new Set();
+      for (const type of Object.keys(this.shapeUtils)) {
+        for (const sp of this.getStylePropsForType(type).values()) {
+          if (seen.has(sp)) continue;
+          seen.add(sp);
+          map.applyValue(sp, styles[sp.id] ?? sp.defaultValue);
+        }
+      }
+      return map;
+    }
+    for (const shape of selected) {
+      for (const [key, sp] of this.getStylePropsForType(shape.type)) {
+        map.applyValue(sp, shape.props[key]);
+      }
+    }
+    return map;
+  }
+  // ---- bulk transforms ---------------------------------------------------
+  /** Move shapes by a page-space offset. */
+  nudgeShapes(ids, offset) {
+    const updates = [];
+    for (const id of ids) {
+      const shape = this.getShape(id);
+      if (!shape || shape.isLocked) continue;
+      const parent = this.getShapeParent(shape);
+      let d = new Vec(offset.x, offset.y);
+      if (parent) {
+        const m = this.getShapePageTransform(parent);
+        const det = m.a * m.d - m.b * m.c || 1;
+        d = new Vec((m.d * d.x - m.c * d.y) / det, (-m.b * d.x + m.a * d.y) / det);
+      }
+      updates.push({ id, type: shape.type, x: shape.x + d.x, y: shape.y + d.y });
+    }
+    return this.updateShapes(updates);
+  }
+  /** Rotate shapes by `delta` radians around the center of their common page bounds. */
+  rotateShapesBy(ids, delta, center) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length === 0) return this;
+    const boxes = shapes.map((s) => this.getShapePageBounds(s)).filter((b) => !!b);
+    const c = center ?? Box.Common(boxes).center;
+    const updates = [];
+    for (const shape of shapes) {
+      const m = this.getShapePageTransform(shape);
+      const newPagePos = Vec.RotWith(new Vec(m.e, m.f), c, delta);
+      const parentPoint = this.getPointInParentSpace(shape, newPagePos);
+      updates.push({ id: shape.id, type: shape.type, x: parentPoint.x, y: parentPoint.y, rotation: shape.rotation + delta });
+    }
+    return this.updateShapes(updates);
+  }
+  /** Mirror shapes across the center of their common bounds. Positions flip; geometry is not mirrored. */
+  flipShapes(ids, operation) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length < 1) return this;
+    const boxes = shapes.map((s) => this.getShapePageBounds(s));
+    const common = Box.Common(boxes);
+    const updates = [];
+    shapes.forEach((shape, i) => {
+      const b = boxes[i];
+      const nb = operation === "horizontal" ? new Box(common.maxX - (b.maxX - common.x), b.y, b.w, b.h) : new Box(b.x, common.maxY - (b.maxY - common.y), b.w, b.h);
+      const d = new Vec(nb.x - b.x, nb.y - b.y);
+      const m = this.getShapePageTransform(shape);
+      const parentPoint = this.getPointInParentSpace(shape, new Vec(m.e + d.x, m.f + d.y));
+      updates.push({ id: shape.id, type: shape.type, x: parentPoint.x, y: parentPoint.y });
+    });
+    return this.updateShapes(updates);
+  }
+  /** Align shapes along an edge or center of their common bounds. */
+  alignShapes(ids, operation) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length < 2) return this;
+    const boxes = shapes.map((s) => this.getShapePageBounds(s));
+    const common = Box.Common(boxes);
+    const updates = [];
+    shapes.forEach((shape, i) => {
+      const b = boxes[i];
+      let d = new Vec();
+      switch (operation) {
+        case "left":
+          d = new Vec(common.x - b.x, 0);
+          break;
+        case "center-horizontal":
+          d = new Vec(common.center.x - b.center.x, 0);
+          break;
+        case "right":
+          d = new Vec(common.maxX - b.maxX, 0);
+          break;
+        case "top":
+          d = new Vec(0, common.y - b.y);
+          break;
+        case "center-vertical":
+          d = new Vec(0, common.center.y - b.center.y);
+          break;
+        case "bottom":
+          d = new Vec(0, common.maxY - b.maxY);
+          break;
+      }
+      if (d.x === 0 && d.y === 0) return;
+      const m = this.getShapePageTransform(shape);
+      const parentPoint = this.getPointInParentSpace(shape, new Vec(m.e + d.x, m.f + d.y));
+      updates.push({ id: shape.id, type: shape.type, x: parentPoint.x, y: parentPoint.y });
+    });
+    return this.updateShapes(updates);
+  }
+  /** Space shapes evenly between the first and last along an axis. */
+  distributeShapes(ids, operation) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length < 3) return this;
+    const items = shapes.map((s) => ({ shape: s, b: this.getShapePageBounds(s) }));
+    const horizontal = operation === "horizontal";
+    items.sort((a, b) => horizontal ? a.b.center.x - b.b.center.x : a.b.center.y - b.b.center.y);
+    const first = items[0];
+    const last = items.at(-1);
+    const span = horizontal ? last.b.x - first.b.maxX : last.b.y - first.b.maxY;
+    const inner = items.slice(1, -1);
+    const totalInner = inner.reduce((acc, i) => acc + (horizontal ? i.b.w : i.b.h), 0);
+    const gap = (span - totalInner) / (inner.length + 1);
+    let cursor = horizontal ? first.b.maxX + gap : first.b.maxY + gap;
+    const updates = [];
+    for (const it of inner) {
+      const d = horizontal ? new Vec(cursor - it.b.x, 0) : new Vec(0, cursor - it.b.y);
+      cursor += (horizontal ? it.b.w : it.b.h) + gap;
+      const m = this.getShapePageTransform(it.shape);
+      const parentPoint = this.getPointInParentSpace(it.shape, new Vec(m.e + d.x, m.f + d.y));
+      updates.push({ id: it.shape.id, type: it.shape.type, x: parentPoint.x, y: parentPoint.y });
+    }
+    return this.updateShapes(updates);
+  }
+  /** Stack shapes edge to edge with a fixed gap along an axis (order by current position). */
+  stackShapes(ids, operation, gap = 16) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length < 2) return this;
+    const items = shapes.map((s) => ({ shape: s, b: this.getShapePageBounds(s) }));
+    const horizontal = operation === "horizontal";
+    items.sort((a, b) => horizontal ? a.b.x - b.b.x : a.b.y - b.b.y);
+    let cursor = horizontal ? items[0].b.maxX + gap : items[0].b.maxY + gap;
+    const updates = [];
+    for (const it of items.slice(1)) {
+      const d = horizontal ? new Vec(cursor - it.b.x, 0) : new Vec(0, cursor - it.b.y);
+      cursor += (horizontal ? it.b.w : it.b.h) + gap;
+      const m = this.getShapePageTransform(it.shape);
+      const parentPoint = this.getPointInParentSpace(it.shape, new Vec(m.e + d.x, m.f + d.y));
+      updates.push({ id: it.shape.id, type: it.shape.type, x: parentPoint.x, y: parentPoint.y });
+    }
+    return this.updateShapes(updates);
+  }
+  /** Toggle the locked state of shapes. */
+  toggleLock(ids = this.getSelectedShapeIds()) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s);
+    if (shapes.length === 0) return this;
+    const allLocked = shapes.every((s) => s.isLocked);
+    return this.updateShapes(shapes.map((s) => ({ id: s.id, type: s.type, isLocked: !allLocked })));
+  }
+  // ---- groups ------------------------------------------------------------
+  /** Wrap shapes in a new `group` shape (requires a registered "group" ShapeUtil). Returns the group id. */
+  groupShapes(ids = this.getSelectedShapeIds(), groupId = ShapeRecordType.createId()) {
+    if (!this.hasShapeUtil("group")) throw new Error('No ShapeUtil registered for type "group"');
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s && !s.isLocked);
+    if (shapes.length < 2) return void 0;
+    const parentId = shapes[0].parentId;
+    if (!shapes.every((s) => s.parentId === parentId)) return void 0;
+    const sorted = sortByIndex(shapes);
+    const bounds = Box.Common(sorted.map((s) => this.getShapePageBounds(s)));
+    this.run(() => {
+      this.createShape({ id: groupId, type: "group", parentId, x: bounds.x, y: bounds.y, index: getIndexAbove(sorted.at(-1).index) });
+      this.reparentShapes(sorted.map((s) => s.id), groupId);
+      this.setSelectedShapes([groupId]);
+    });
+    return groupId;
+  }
+  /** Dissolve groups, re-parenting their children to the group's parent. */
+  ungroupShapes(ids = this.getSelectedShapeIds()) {
+    const groups = ids.map((id) => this.getShape(id)).filter((s) => !!s && s.type === "group");
+    if (groups.length === 0) return this;
+    this.run(() => {
+      const released = [];
+      for (const g of groups) {
+        const children = this.getSortedChildIdsForParent(g.id);
+        this.reparentShapes(children, g.parentId, getIndexAbove(g.index));
+        released.push(...children);
+        this.store.remove([g.id]);
+      }
+      this.setSelectedShapes(released);
+    });
+    return this;
+  }
+  /** The outermost group containing a shape, or undefined. */
+  getOutermostSelectableShape(shape) {
+    let cur = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!cur) return void 0;
+    let result = cur;
+    const focused = this.getCurrentPageState().focusedGroupId;
+    while (cur && isShapeId(cur.parentId)) {
+      const parent = this.getShape(cur.parentId);
+      if (!parent || parent.id === focused) break;
+      if (parent.type === "group") result = parent;
+      cur = parent;
+    }
+    return result;
+  }
+  // ---- z-order -----------------------------------------------------------
+  bringToFront(ids = this.getSelectedShapeIds()) {
+    return this.reorder(ids, "toFront");
+  }
+  sendToBack(ids = this.getSelectedShapeIds()) {
+    return this.reorder(ids, "toBack");
+  }
+  bringForward(ids = this.getSelectedShapeIds()) {
+    return this.reorder(ids, "forward");
+  }
+  sendBackward(ids = this.getSelectedShapeIds()) {
+    return this.reorder(ids, "backward");
+  }
+  reorder(ids, op) {
+    if (ids.length === 0) return this;
+    const set = new Set(ids);
+    const byParent = /* @__PURE__ */ new Map();
+    for (const id of ids) {
+      const s = this.getShape(id);
+      if (!s) continue;
+      const arr = byParent.get(s.parentId) ?? [];
+      arr.push(s);
+      byParent.set(s.parentId, arr);
+    }
+    const updates = [];
+    for (const [parentId, moving] of byParent) {
+      const siblings = sortByIndex(this._allShapes.get().filter((s) => s.parentId === parentId));
+      const movingSorted = sortByIndex(moving);
+      const others = siblings.filter((s) => !set.has(s.id));
+      let indices;
+      switch (op) {
+        case "toFront": {
+          indices = getIndicesAbove(others.at(-1)?.index, movingSorted.length);
+          break;
+        }
+        case "toBack": {
+          const first = others[0]?.index;
+          indices = [];
+          let cur = first;
+          for (let i = 0; i < movingSorted.length; i++) {
+            cur = getIndexBelow(cur);
+            indices.unshift(cur);
+          }
+          break;
+        }
+        case "forward": {
+          const topMovingIdx = siblings.findIndex((s) => s.id === movingSorted.at(-1).id);
+          const above = siblings.slice(topMovingIdx + 1).find((s) => !set.has(s.id));
+          if (!above) return this;
+          const aboveAbove = siblings[siblings.indexOf(above) + 1];
+          indices = movingSorted.map(() => "");
+          let below = above.index;
+          for (let i = 0; i < movingSorted.length; i++) {
+            const idx = getIndexBetween(below, aboveAbove?.index);
+            indices[i] = idx;
+            below = idx;
+          }
+          break;
+        }
+        case "backward": {
+          const bottomMovingIdx = siblings.findIndex((s) => s.id === movingSorted[0].id);
+          const below = siblings.slice(0, bottomMovingIdx).reverse().find((s) => !set.has(s.id));
+          if (!below) return this;
+          const belowBelow = siblings[siblings.indexOf(below) - 1];
+          indices = movingSorted.map(() => "");
+          let above = below.index;
+          for (let i = movingSorted.length - 1; i >= 0; i--) {
+            const idx = getIndexBetween(belowBelow?.index, above);
+            indices[i] = idx;
+            above = idx;
+          }
+          break;
+        }
+      }
+      movingSorted.forEach((s, i) => updates.push({ id: s.id, type: s.type, index: indices[i] }));
+    }
+    this.updateShapes(updates);
+    return this;
+  }
+  // ---- selection ---------------------------------------------------------
+  getSelectedShapeIds() {
+    return this.getCurrentPageState().selectedShapeIds;
+  }
+  getSelectedShapes() {
+    return this.getSelectedShapeIds().map((id) => this.getShape(id)).filter((s) => !!s);
+  }
+  getOnlySelectedShape() {
+    const ids = this.getSelectedShapeIds();
+    return ids.length === 1 ? this.getShape(ids[0]) : void 0;
+  }
+  setSelectedShapes(ids) {
+    const next = ids.map((s) => typeof s === "string" ? s : s.id);
+    const prev = this.getSelectedShapeIds();
+    if (prev.length === next.length && prev.every((id, i) => id === next[i])) return this;
+    this.updateCurrentPageState({ selectedShapeIds: next });
+    return this;
+  }
+  select(...ids) {
+    return this.setSelectedShapes(ids);
+  }
+  selectAll() {
+    return this.setSelectedShapes(this.getSortedChildIdsForParent(this.getCurrentPageId()).filter((id) => !this.getShape(id)?.isLocked));
+  }
+  selectNone() {
+    return this.setSelectedShapes([]);
+  }
+  isShapeOrAncestorLocked(shape) {
+    let cur = typeof shape === "string" ? this.getShape(shape) : shape;
+    while (cur) {
+      if (cur.isLocked) return true;
+      cur = this.getShapeParent(cur);
+    }
+    return false;
+  }
+  _selectionPageBounds = computed("editor.selectionPageBounds", () => {
+    const shapes = this.getSelectedShapes();
+    if (shapes.length === 0) return void 0;
+    const boxes = shapes.map((s) => this.getShapePageBounds(s)).filter((b) => !!b);
+    return boxes.length ? Box.Common(boxes) : void 0;
+  });
+  getSelectionPageBounds() {
+    return this._selectionPageBounds.get();
+  }
+  getSelectionRotation() {
+    const shapes = this.getSelectedShapes();
+    if (shapes.length !== 1) return 0;
+    const m = this.getShapePageTransform(shapes[0]);
+    return Math.atan2(m.b, m.a);
+  }
+  getHoveredShapeId() {
+    return this.getCurrentPageState().hoveredShapeId;
+  }
+  getHoveredShape() {
+    const id = this.getHoveredShapeId();
+    return id ? this.getShape(id) : void 0;
+  }
+  setHoveredShape(id) {
+    const next = id === null ? null : typeof id === "string" ? id : id.id;
+    if (this.getHoveredShapeId() === next) return this;
+    return this.updateCurrentPageState({ hoveredShapeId: next });
+  }
+  getEditingShapeId() {
+    return this.getCurrentPageState().editingShapeId;
+  }
+  getEditingShape() {
+    const id = this.getEditingShapeId();
+    return id ? this.getShape(id) : void 0;
+  }
+  setEditingShape(id) {
+    const next = id === null ? null : typeof id === "string" ? id : id.id;
+    const prev = this.getEditingShapeId();
+    if (prev === next) return this;
+    this.updateCurrentPageState({ editingShapeId: next });
+    for (const sid of [prev, next]) {
+      const shape = sid ? this.getShape(sid) : void 0;
+      if (shape) this.writeShapeToEngine(shape, true);
+    }
+    this.flushEngine();
+    this.bumpFrame();
+    if (prev) {
+      const shape = this.getShape(prev);
+      if (shape) this.getShapeUtil(shape).onEditEnd?.(shape);
+    }
+    return this;
+  }
+  setErasingShapes(ids) {
+    return this.updateCurrentPageState({ erasingShapeIds: [...ids] });
+  }
+  getErasingShapeIds() {
+    return this.getCurrentPageState().erasingShapeIds;
+  }
+  // ---- camera / viewport -------------------------------------------------
+  cameraId() {
+    return CameraRecordType.createId(this.getCurrentPageId().slice("page:".length));
+  }
+  getCamera() {
+    return this.store.get(this.cameraId());
+  }
+  getZoomLevel() {
+    return this.getCamera().z;
+  }
+  setCamera(point, _opts = {}) {
+    const cam = this.getCamera();
+    const z = Math.min(this.options.zoomMax, Math.max(this.options.zoomMin, point.z ?? cam.z));
+    const x = point.x ?? cam.x;
+    const y = point.y ?? cam.y;
+    if (cam.x === x && cam.y === y && cam.z === z) return this;
+    this.run(
+      () => {
+        this.store.put([{ ...cam, x, y, z }]);
+      },
+      { history: "ignore" }
+    );
+    return this;
+  }
+  getViewportScreenBounds() {
+    const b = this.getInstanceState().screenBounds;
+    return new Box(b.x, b.y, b.w, b.h);
+  }
+  getViewportScreenCenter() {
+    const b = this.getViewportScreenBounds();
+    return new Vec(b.w / 2, b.h / 2);
+  }
+  getViewportPageBounds() {
+    const { w, h } = this.getViewportScreenBounds();
+    const { x, y, z } = this.getCamera();
+    return new Box(-x, -y, w / z, h / z);
+  }
+  getViewportPageCenter() {
+    return this.getViewportPageBounds().center;
+  }
+  updateViewportScreenBounds(bounds, center = false) {
+    const prev = this.getViewportScreenBounds();
+    const next = Box.From(bounds);
+    if (prev.x === next.x && prev.y === next.y && prev.w === next.w && prev.h === next.h) return this;
+    this.run(
+      () => {
+        this.updateInstanceState({ screenBounds: next.toJson() });
+        if (center) {
+          const cam = this.getCamera();
+          this.setCamera({ x: cam.x + (next.w - prev.w) / 2 / cam.z, y: cam.y + (next.h - prev.h) / 2 / cam.z });
+        }
+      },
+      { history: "ignore" }
+    );
+    return this;
+  }
+  /** Screen (container-relative) → page. */
+  screenToPage(point) {
+    const { x, y, z } = this.getCamera();
+    return new Vec(point.x / z - x, point.y / z - y);
+  }
+  /** Page → screen (container-relative). */
+  pageToScreen(point) {
+    const { x, y, z } = this.getCamera();
+    return new Vec((point.x + x) * z, (point.y + y) * z);
+  }
+  /** Zoom keeping the given screen point fixed. */
+  zoomToPointAt(screenPoint, nextZoom) {
+    const cam = this.getCamera();
+    const z = Math.min(this.options.zoomMax, Math.max(this.options.zoomMin, nextZoom));
+    const px = screenPoint.x / cam.z - cam.x;
+    const py = screenPoint.y / cam.z - cam.y;
+    return this.setCamera({ x: screenPoint.x / z - px, y: screenPoint.y / z - py, z });
+  }
+  zoomIn(point = this.getViewportScreenCenter()) {
+    const z = this.getZoomLevel();
+    const next = this.options.zoomSteps.find((s) => s > z + 1e-6) ?? this.options.zoomMax;
+    return this.zoomToPointAt(point, next);
+  }
+  zoomOut(point = this.getViewportScreenCenter()) {
+    const z = this.getZoomLevel();
+    const next = [...this.options.zoomSteps].reverse().find((s) => s < z - 1e-6) ?? this.options.zoomMin;
+    return this.zoomToPointAt(point, next);
+  }
+  resetZoom(point = this.getViewportScreenCenter()) {
+    return this.zoomToPointAt(point, 1);
+  }
+  zoomToBounds(bounds, opts = {}) {
+    const vp = this.getViewportScreenBounds();
+    const inset = opts.inset ?? Math.min(256, vp.w * 0.28);
+    let z = Math.min((vp.w - inset) / bounds.w, (vp.h - inset) / bounds.h);
+    if (opts.targetZoom !== void 0) z = Math.min(z, opts.targetZoom);
+    z = Math.min(this.options.zoomMax, Math.max(this.options.zoomMin, z));
+    return this.setCamera({
+      x: -bounds.x + (vp.w / z - bounds.w) / 2,
+      y: -bounds.y + (vp.h / z - bounds.h) / 2,
+      z
+    });
+  }
+  zoomToFit() {
+    const b = this.getCurrentPageBounds();
+    return b && b.w > 0 && b.h > 0 ? this.zoomToBounds(b) : this;
+  }
+  zoomToSelection() {
+    const b = this.getSelectionPageBounds();
+    return b && b.w > 0 && b.h > 0 ? this.zoomToBounds(b, { targetZoom: Math.max(1, this.getZoomLevel()) }) : this;
+  }
+  centerOnPoint(point) {
+    const vp = this.getViewportScreenBounds();
+    const z = this.getZoomLevel();
+    return this.setCamera({ x: -point.x + vp.w / 2 / z, y: -point.y + vp.h / 2 / z });
+  }
+  pan(offsetScreen) {
+    const cam = this.getCamera();
+    return this.setCamera({ x: cam.x + offsetScreen.x / cam.z, y: cam.y + offsetScreen.y / cam.z });
+  }
+  // ---- tools -------------------------------------------------------------
+  getCurrentTool() {
+    return this.root.getCurrent();
+  }
+  getCurrentToolId() {
+    const tool = this.root.getCurrent();
+    return tool?.id ?? "";
+  }
+  setCurrentTool(id, info = {}) {
+    if (this.getCurrentToolId() === id && !info["force"]) return this;
+    this.root.transition(id, info);
+    return this;
+  }
+  getPath() {
+    return this.root.getPath();
+  }
+  isIn(path) {
+    const full = this.getPath();
+    const target = path.startsWith("root.") ? path : `root.${path}`;
+    return full === target || full.startsWith(`${target}.`);
+  }
+  isInAny(...paths) {
+    return paths.some((p) => this.isIn(p));
+  }
+  getStateDescendant(path) {
+    return this.root.getDescendant(path.replace(/^root\./, ""));
+  }
+  cancel() {
+    this.dispatch({ type: "cancel", name: "cancel", ...this.modifierState() });
+    return this;
+  }
+  complete() {
+    this.dispatch({ type: "complete", name: "complete", ...this.modifierState() });
+    return this;
+  }
+  interrupt() {
+    this.dispatch({ type: "interrupt", name: "interrupt", ...this.modifierState() });
+    return this;
+  }
+  modifierState() {
+    const i = this.inputs;
+    return { shiftKey: i.shiftKey, altKey: i.altKey, ctrlKey: i.ctrlKey, metaKey: i.metaKey, accelKey: i.accelKey };
+  }
+  // ---- input dispatch ----------------------------------------------------
+  /** Route an event to the tool tree, updating `inputs` first. */
+  dispatch(info) {
+    if (this.getIsDisposed()) return this;
+    const inputs = this.inputs;
+    inputs.shiftKey = info.shiftKey;
+    inputs.altKey = info.altKey;
+    inputs.ctrlKey = info.ctrlKey;
+    inputs.metaKey = info.metaKey;
+    inputs.accelKey = info.accelKey;
+    switch (info.type) {
+      case "pointer": {
+        this.updatePointer(info);
+        break;
+      }
+      case "click": {
+        const screen = new Vec(info.point.x, info.point.y);
+        inputs.currentScreenPoint = screen;
+        inputs.currentPagePoint = this.screenToPage(screen);
+        break;
+      }
+      case "keyboard": {
+        if (info.name === "key_down") inputs.keys.add(info.code);
+        else if (info.name === "key_up") inputs.keys.delete(info.code);
+        break;
+      }
+      case "wheel": {
+        this.handleWheel(info);
+        break;
+      }
+    }
+    this.root.handleEvent(info);
+    this.emit("event", info);
+    return this;
+  }
+  updatePointer(info) {
+    const inputs = this.inputs;
+    const screen = new Vec(info.point.x, info.point.y);
+    const page = this.screenToPage(screen);
+    inputs.previousScreenPoint = inputs.currentScreenPoint;
+    inputs.previousPagePoint = inputs.currentPagePoint;
+    inputs.currentScreenPoint = screen;
+    inputs.currentPagePoint = page;
+    inputs.isPen = info.isPen;
+    switch (info.name) {
+      case "pointer_down": {
+        inputs.buttons.add(info.button);
+        inputs.isPointing = true;
+        inputs.isDragging = false;
+        inputs.originScreenPoint = screen.clone();
+        inputs.originPagePoint = page.clone();
+        break;
+      }
+      case "pointer_move": {
+        if (inputs.isPointing && !inputs.isDragging) {
+          const d2 = Vec.Dist2(inputs.originScreenPoint, screen);
+          if (d2 > this.options.dragDistanceSquared * (info.isPen ? 0.25 : 1)) inputs.isDragging = true;
+        }
+        break;
+      }
+      case "pointer_up": {
+        inputs.buttons.delete(info.button);
+        inputs.isPointing = false;
+        inputs.isDragging = false;
+        break;
+      }
+    }
+  }
+  handleWheel(info) {
+    if (info.ctrlKey || info.metaKey) {
+      const cam = this.getCamera();
+      const factor = Math.exp(-info.delta.y * 25e-4);
+      this.zoomToPointAt(info.point, cam.z * factor);
+    } else {
+      this.pan({ x: -info.delta.x, y: -info.delta.y });
+    }
+  }
+  // ---- engine mirror -----------------------------------------------------
+  kindId(type) {
+    return this.kindIds.get(type) ?? 0;
+  }
+  /** Apply pending engine commands. Cheap when nothing is pending. */
+  flushEngine() {
+    if (this.engine.cmd.pending > 0) this.engine.cmd.flush();
+  }
+  syncChanges(changes) {
+    const pageId = this.getCurrentPageId();
+    if (pageId !== this.syncedPageId) {
+      this.syncPage(pageId);
+      return;
+    }
+    let dirty = false;
+    const rebind = /* @__PURE__ */ new Set();
+    for (const rec of [...Object.values(changes.added), ...Object.values(changes.removed)]) {
+      if (isBinding(rec)) rebind.add(rec.fromId);
+    }
+    for (const [, next] of Object.values(changes.updated)) {
+      if (isBinding(next)) rebind.add(next.fromId);
+    }
+    for (const rec of Object.values(changes.removed)) {
+      if (rec.typeName !== "shape") continue;
+      const h = this.handles.release(rec.id);
+      if (h !== void 0) {
+        this.engine.cmd.remove(h);
+        dirty = true;
+      }
+    }
+    for (const rec of Object.values(changes.added)) {
+      if (rec.typeName !== "shape") continue;
+      if (this.getAncestorPageId(rec) !== pageId) continue;
+      this.writeShapeToEngine(rec, true);
+      dirty = true;
+    }
+    for (const [prev, next] of Object.values(changes.updated)) {
+      if (next.typeName !== "shape" || prev.typeName !== "shape") continue;
+      const onPage = this.getAncestorPageId(next) === pageId;
+      if (!onPage) {
+        const h = this.handles.release(next.id);
+        if (h !== void 0) {
+          this.engine.cmd.remove(h);
+          dirty = true;
+        }
+        continue;
+      }
+      const geometryChanged = prev.props !== next.props || prev.type !== next.type || prev.opacity !== next.opacity;
+      this.writeShapeToEngine(next, geometryChanged || this.handles.peek(next.id) === void 0);
+      rebind.delete(next.id);
+      dirty = true;
+    }
+    const touched = [...Object.values(changes.added), ...Object.values(changes.removed), ...Object.values(changes.updated).map(([, n]) => n)];
+    for (const rec of touched) {
+      if (rec.typeName !== "shape") continue;
+      let parent = isShapeId(rec.parentId) ? this.getShape(rec.parentId) : void 0;
+      while (parent && parent.type === "group") {
+        rebind.add(parent.id);
+        parent = isShapeId(parent.parentId) ? this.getShape(parent.parentId) : void 0;
+      }
+    }
+    for (const id of rebind) {
+      const shape = this.getShape(id);
+      if (shape && this.getAncestorPageId(shape) === pageId && !(id in changes.added)) {
+        this.writeShapeToEngine(shape, true);
+        dirty = true;
+      }
+    }
+    if (dirty) {
+      this.flushEngine();
+      this.bumpFrame();
+    }
+  }
+  /** Clear the engine and upload every shape on `pageId`. */
+  syncPage(pageId) {
+    this.syncedPageId = pageId;
+    this.handles.clear();
+    this.engine.cmd.clear();
+    for (const shape of this.getCurrentPageShapesSorted()) {
+      this.writeShapeToEngine(shape, true);
+    }
+    this.flushEngine();
+    this.bumpFrame();
+  }
+  /**
+   * Write one shape to the engine, isolating it from its siblings.
+   *
+   * A shape util can throw on a shape it does not fully understand (a prop a
+   * file left out, a value it did not expect). That must cost that one shape,
+   * never the rest of the page: the failure is logged once and the shape is
+   * skipped, so a single bad record can no longer blank the canvas.
+   */
+  writeShapeToEngine(shape, withGeometry) {
+    try {
+      this.writeShapeToEngineUnsafe(shape, withGeometry);
+      this.brokenShapeIds.delete(shape.id);
+    } catch (error) {
+      if (!this.brokenShapeIds.has(shape.id)) {
+        this.brokenShapeIds.add(shape.id);
+        console.warn(`mocanvas: skipping shape ${shape.id} (${shape.type}); its shape util threw`, error);
+      }
+    }
+  }
+  writeShapeToEngineUnsafe(shape, withGeometry) {
+    const util = this.shapeUtils[shape.type];
+    const h = this.handles.handle(shape.id);
+    const parent = isShapeId(shape.parentId) ? this.handles.handle(shape.parentId) : 0;
+    const [zlo, zhi] = indexKeyToZKey(shape.index);
+    let flags = 0;
+    if (shape.isLocked) flags |= FLAG.LOCKED;
+    let style = null;
+    let geometry;
+    if (util) {
+      style = this.textures.withOwner(shape.id, () => util.getRenderStyle(shape));
+      if (style === null || util.needsOverlay(shape)) flags |= FLAG.OVERLAY;
+      else if (util.hasOverlayLabel(shape)) flags |= FLAG.LABEL;
+      if (util.isClipShape(shape)) flags |= FLAG.CLIP;
+      geometry = util.getGeometry(shape);
+      if (geometry.isClosed && !geometry.isFilled) flags |= FLAG.NO_FILL;
+    } else {
+      flags |= FLAG.OVERLAY;
+    }
+    const b = geometry?.bounds;
+    this.engine.cmd.upsert(h, this.kindId(shape.type), parent, zlo, zhi, flags, shape.x, shape.y, shape.rotation, b?.w ?? 0, b?.h ?? 0);
+    if (withGeometry && geometry) {
+      this.engine.cmd.setGeometry(h, geometry.toPathWords());
+      if (style) {
+        let seed = 2166136261;
+        for (let k = 0; k < shape.id.length; k++) seed = Math.imul(seed ^ shape.id.charCodeAt(k), 16777619);
+        this.engine.cmd.setStyle(h, { ...style, opacity: style.opacity * shape.opacity, seed: style.seed ?? seed >>> 0 });
+        this.engine.cmd.setTexture(h, style.texture ?? 0);
+      }
+    }
+  }
+  // ---- rendering ---------------------------------------------------------
+  /** Build and draw one frame. Called by the canvas component inside rAF. */
+  renderFrame(backend) {
+    const t0 = performance.now();
+    this.textures.setBackend(backend);
+    this.syncTextureResolution();
+    this.flushEngine();
+    const cam = this.getCamera();
+    const vp = this.getViewportScreenBounds();
+    const camState = { x: cam.x, y: cam.y, z: cam.z };
+    const frame = this.engine.frame(camState, vp.w, vp.h);
+    backend.draw(frame, camState, { background: this.options.backgroundColor });
+    const overlay = EngineBridge.readOverlay(frame.overlay);
+    const ids = [];
+    const clips = [];
+    for (const o of overlay) {
+      const id = this.handles.id(o.handle);
+      if (id) {
+        ids.push(id);
+        clips.push(o.clip);
+      }
+    }
+    unsafe__withoutCapture(() => {
+      const prev = this._overlayShapeIds.get();
+      if (prev.length !== ids.length || prev.some((id, i) => id !== ids[i])) this._overlayShapeIds.set(ids);
+      if (!sameClips(this._overlayClips.get(), clips)) this._overlayClips.set(clips);
+      const ms = performance.now() - t0;
+      this._lastFrame.set({ drawn: frame.drawn, culled: frame.culled, ms });
+      this.emit("frame", { drawn: frame.drawn, culled: frame.culled, ms });
+    });
+    return frame;
+  }
+  // ---- textures ----------------------------------------------------------
+  /**
+   * Device-pixel scale at which rasterized textures (text labels) should be
+   * drawn: the device pixel ratio times the zoom, bucketed to powers of two.
+   */
+  getTextureResolution() {
+    return bucketTextureResolution(this.getZoomLevel(), this.getInstanceState().devicePixelRatio);
+  }
+  textureResolution = 0;
+  /** Re-derive texture-backed styles when the resolution bucket changes. */
+  syncTextureResolution() {
+    const next = this.getTextureResolution();
+    if (next === this.textureResolution) return;
+    this.textureResolution = next;
+    this.rewriteTextureOwners(this.textures.getAllOwners());
+  }
+  registerTextureSideEffects() {
+    this.disposables.push(
+      this.sideEffects.registerAfterDeleteHandler("shape", (shape) => {
+        this.textures.releaseOwner(shape.id);
+      })
+    );
+  }
+  /** A texture finished (or failed) loading: re-write its shapes and redraw. */
+  onTexturesChanged(keys) {
+    const owners = /* @__PURE__ */ new Set();
+    for (const key of keys) for (const owner of this.textures.getOwners(key)) owners.add(owner);
+    this.rewriteTextureOwners(owners);
+    this.bumpFrame();
+  }
+  rewriteTextureOwners(owners) {
+    let dirty = false;
+    for (const owner of owners) {
+      const shape = this.getShape(owner);
+      if (!shape || this.getAncestorPageId(shape) !== this.syncedPageId) continue;
+      this.writeShapeToEngine(shape, true);
+      dirty = true;
+    }
+    if (dirty) this.flushEngine();
+  }
+  // ---- misc helpers ------------------------------------------------------
+  /** Degrees → radians. */
+  static degToRad(d) {
+    return d * RAD_PER_DEG;
+  }
+  // ---- assets ------------------------------------------------------------
+  _allAssets = computed(
+    "editor.allAssets",
+    () => this.store.query.records("asset").get()
+  );
+  getAsset(id) {
+    const assetId = typeof id === "string" ? id : id.id;
+    return this.store.get(assetId);
+  }
+  /** Every asset in the document (assets are not per page). */
+  getAssets() {
+    return this._allAssets.get();
+  }
+  createAsset(asset) {
+    return this.createAssets([asset]);
+  }
+  createAssets(assets) {
+    if (assets.length === 0) return this;
+    this.run(() => {
+      const records = assets.map(
+        (a) => AssetRecordType.create({
+          id: a.id ?? AssetRecordType.createId(),
+          type: a.type,
+          props: { ...a.props },
+          meta: { ...a.meta ?? {} }
+        })
+      );
+      this.store.put(records);
+    });
+    return this;
+  }
+  updateAsset(partial) {
+    return this.updateAssets([partial]);
+  }
+  updateAssets(partials) {
+    this.run(() => {
+      const records = [];
+      for (const partial of partials) {
+        const prev = this.getAsset(partial.id);
+        if (!prev) continue;
+        records.push({
+          ...prev,
+          props: partial.props ? { ...prev.props, ...partial.props } : prev.props,
+          meta: partial.meta ? { ...prev.meta, ...partial.meta } : prev.meta
+        });
+      }
+      if (records.length) this.store.put(records);
+    });
+    return this;
+  }
+  deleteAsset(id) {
+    return this.deleteAssets([id]);
+  }
+  deleteAssets(ids) {
+    const assetIds = ids.map((a) => typeof a === "string" ? a : a.id).filter((id) => this.store.has(id));
+    if (assetIds.length === 0) return this;
+    this.run(() => this.store.remove(assetIds));
+    return this;
+  }
+  // ---- external content --------------------------------------------------
+  // Handlers are keyed by content type, so each entry only ever sees the member
+  // of the union it registered for; they are stored under the widest handler type.
+  externalContentHandlers = /* @__PURE__ */ new Map();
+  externalAssetHandlers = /* @__PURE__ */ new Map();
+  /**
+   * Register the handler for one kind of dropped/pasted content. Replaces any
+   * previous handler for that type; `null` removes it. Returns a function that
+   * removes the handler again (only if it is still the registered one).
+   */
+  registerExternalContentHandler(type, handler) {
+    const entry = handler;
+    if (entry) this.externalContentHandlers.set(type, entry);
+    else this.externalContentHandlers.delete(type);
+    return () => {
+      if (entry && this.externalContentHandlers.get(type) === entry) this.externalContentHandlers.delete(type);
+    };
+  }
+  /** Register how an asset record is produced from a file or url. Returns a function that removes it again. */
+  registerExternalAssetHandler(type, handler) {
+    const entry = handler;
+    if (entry) this.externalAssetHandlers.set(type, entry);
+    else this.externalAssetHandlers.delete(type);
+    return () => {
+      if (entry && this.externalAssetHandlers.get(type) === entry) this.externalAssetHandlers.delete(type);
+    };
+  }
+  hasExternalContentHandler(type) {
+    return this.externalContentHandlers.has(type);
+  }
+  hasExternalAssetHandler(type) {
+    return this.externalAssetHandlers.has(type);
+  }
+  /**
+   * Handle content dropped or pasted onto the canvas by dispatching to the
+   * registered handler for `info.type`. Resolves once the handler is done;
+   * resolves immediately when no handler is registered.
+   */
+  async putExternalContent(info) {
+    const handler = this.externalContentHandlers.get(info.type);
+    if (!handler) return;
+    await handler(info);
+  }
+  /**
+   * Produce (but do not store) an asset record for a file or url through the
+   * registered asset handler. `undefined` when there is no handler or the
+   * handler declines the content.
+   */
+  async getAssetForExternalContent(info) {
+    const handler = this.externalAssetHandlers.get(info.type);
+    if (!handler) return void 0;
+    return await handler(info);
+  }
+  // ---- presence ----------------------------------------------------------
+  // Everything below is about other people in the same document. It is kept in
+  // one block so the collaboration layer (`@mocanvas/sync`) has a single seam.
+  /**
+   * The local person's identity: a random id for this session plus a name and
+   * a colour that can be changed at any time. Session-only, never persisted.
+   */
+  user = createUserPreferences();
+  /** Presence records of everyone else in the room, in arrival order. */
+  getCollaborators() {
+    const me = this.user.getId();
+    const records = this.store.query.records("instance_presence").get();
+    return records.filter((p) => p.userId !== me);
+  }
+  /** The subset of `getCollaborators()` looking at the page we are on. */
+  getCollaboratorsOnCurrentPage() {
+    const pageId = this.getCurrentPageId();
+    return this.getCollaborators().filter((p) => p.currentPageId === pageId);
+  }
+  // ---- resizing ----------------------------------------------------------
+  /**
+   * Scale one shape by `scale` about a point, letting its `ShapeUtil.onResize`
+   * produce the prop change — the same contract the select tool's resize state
+   * uses. The shape's origin is moved by the same scale about `scaleOrigin`
+   * (its page bounds center by default), measured in a frame rotated by
+   * `scaleAxisRotation`.
+   *
+   * Locked shapes and shapes whose util says `canResize` is false are left
+   * alone. `onResizeStart` / `onResizeEnd` bracket the change; the util is
+   * told the resize came from the `bottom_right` handle.
+   */
+  resizeShape(id, scale, options = {}) {
+    const shape = this.getShape(id);
+    if (!shape || shape.isLocked) return this;
+    const util = this.getShapeUtil(shape);
+    if (!util.canResize(shape)) return this;
+    if (!Number.isFinite(scale.x) || !Number.isFinite(scale.y)) return this;
+    const initialBounds = options.initialBounds ?? this.getShapeGeometryBounds(shape)?.toJson();
+    if (!initialBounds) return this;
+    let scaleX = scale.x;
+    let scaleY = scale.y;
+    if (options.isAspectRatioLocked ?? util.isAspectRatioLocked(shape)) {
+      const s = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+      scaleX = Math.sign(scaleX || 1) * s;
+      scaleY = Math.sign(scaleY || 1) * s;
+    }
+    const m = this.getShapePageTransform(shape);
+    const pagePos = new Vec(m.e, m.f);
+    const origin = options.scaleOrigin ?? this.getShapePageBounds(shape)?.center ?? pagePos;
+    const axis = options.scaleAxisRotation ?? 0;
+    const inFrame = Vec.Rot(Vec.Sub(pagePos, origin), -axis);
+    const scaled = new Vec(inFrame.x * scaleX, inFrame.y * scaleY);
+    const newPoint = this.getPointInParentSpace(shape, Vec.Add(origin, Vec.Rot(scaled, axis)));
+    this.run(() => {
+      util.onResizeStart?.(shape);
+      const change = util.onResize?.(shape, {
+        newPoint,
+        handle: "bottom_right",
+        mode: options.mode ?? "scale_shape",
+        scaleX,
+        scaleY,
+        initialBounds,
+        initialShape: shape
+      });
+      this.updateShapes([{ id: shape.id, type: shape.type, x: newPoint.x, y: newPoint.y, ...change ?? {} }]);
+      const current = this.getShape(shape.id);
+      if (current) util.onResizeEnd?.(shape, current);
+    });
+    return this;
+  }
+  /**
+   * Scale several shapes by the same factor about one point — by default the
+   * center of their common page bounds, so the group scales as a unit.
+   */
+  resizeShapes(ids, scale, options = {}) {
+    const shapes = ids.map((id) => this.getShape(id)).filter((s) => !!s);
+    if (shapes.length === 0) return this;
+    const boxes = shapes.map((s) => this.getShapePageBounds(s)).filter((b) => !!b);
+    if (boxes.length === 0) return this;
+    const scaleOrigin = options.scaleOrigin ?? Box.Common(boxes).center;
+    this.run(() => {
+      for (const shape of shapes) this.resizeShape(shape.id, scale, { ...options, scaleOrigin });
+    });
+    return this;
+  }
+  /**
+   * Resize shapes so each one spans the common bounds of all of them on one
+   * axis. Every shape given contributes to the common bounds, but only the
+   * unlocked, resizable ones are stretched.
+   */
+  stretchShapes(ids, operation) {
+    const items = [];
+    for (const id of ids) {
+      const shape = this.getShape(id);
+      if (!shape) continue;
+      const b = this.getShapePageBounds(shape);
+      if (b) items.push({ shape, b });
+    }
+    if (items.length < 2) return this;
+    const common = Box.Common(items.map((it) => it.b));
+    const horizontal = operation === "horizontal";
+    this.run(() => {
+      for (const { shape, b } of items) {
+        if (shape.isLocked || !this.getShapeUtil(shape).canResize(shape)) continue;
+        const scale = horizontal ? { x: b.w === 0 ? 1 : common.w / b.w, y: 1 } : { x: 1, y: b.h === 0 ? 1 : common.h / b.h };
+        this.resizeShape(shape.id, scale, { scaleOrigin: { x: b.x, y: b.y }, isAspectRatioLocked: false });
+        const after = this.getShapePageBounds(shape.id);
+        if (!after) continue;
+        const d = horizontal ? new Vec(common.x - after.x, 0) : new Vec(0, common.y - after.y);
+        if (d.x !== 0 || d.y !== 0) this.nudgeShapes([shape.id], d);
+      }
+    });
+    return this;
+  }
+  // ---- export ------------------------------------------------------------
+  // The implementations live in `mocanvas` (which depends on this package, not
+  // the other way round), so they are installed through a registration seam.
+  /**
+   * Serialize shapes to an SVG string; `undefined` when there is nothing to
+   * export. Defaults to the selection, or the whole page when nothing is
+   * selected. Throws until an export implementation is registered.
+   */
+  getSvgString(ids, opts) {
+    const impl = exportImplementation;
+    if (!impl) throw new Error(missingImplementation("getSvgString", "registerExportImplementation"));
+    return impl.getSvgString(this, ids, opts);
+  }
+  /**
+   * Render shapes to an image blob (`png` by default). Same shape selection
+   * rules as `getSvgString`. Throws until an export implementation is
+   * registered.
+   */
+  async toImage(ids, opts) {
+    const impl = exportImplementation;
+    if (!impl) throw new Error(missingImplementation("toImage", "registerExportImplementation"));
+    return await impl.toImage(this, ids, opts);
+  }
+  // ---- text measurement --------------------------------------------------
+  /**
+   * Measures runs of text the way the editor renders them. Installed through
+   * the same seam as the export functions; throws until something registers
+   * one.
+   */
+  get textMeasure() {
+    if (!textMeasureProvider) throw new Error(missingImplementation("textMeasure", "registerTextMeasureImplementation"));
+    return textMeasureProvider(this);
+  }
+  // ---- menus -------------------------------------------------------------
+  /** Which menus are open right now. Backed by the `instance` session record. */
+  menus = new MenuManager(this);
+};
+function sameClips(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i];
+    const y = b[i];
+    if (x === y) continue;
+    if (!x || !y) return false;
+    if (x[0] !== y[0] || x[1] !== y[1] || x[2] !== y[2] || x[3] !== y[3]) return false;
+  }
+  return true;
+}
+var exportImplementation = null;
+function registerExportImplementation(impl) {
+  exportImplementation = impl;
+  return () => {
+    if (exportImplementation === impl) exportImplementation = null;
+  };
+}
+function getExportImplementation() {
+  return exportImplementation;
+}
+var textMeasureProvider = null;
+function registerTextMeasureImplementation(provider) {
+  textMeasureProvider = provider;
+  return () => {
+    if (textMeasureProvider === provider) textMeasureProvider = null;
+  };
+}
+function getTextMeasureProvider() {
+  return textMeasureProvider;
+}
+function missingImplementation(member, register) {
+  return `Editor.${member} has no implementation registered. Importing \`mocanvas\` installs it \u2014 import { Mocanvas } from "mocanvas" (or "mocanvas" for its side effect) anywhere in your app. To install your own, call ${register}(...) from "@mocanvas/editor".`;
+}
+var MenuManager = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  editor;
+  /** The open menu ids, in the order they were opened. */
+  getOpenMenus() {
+    return [...this.editor.getInstanceState().openMenus];
+  }
+  isMenuOpen(id) {
+    return this.editor.getInstanceState().openMenus.includes(id);
+  }
+  /** Mark a menu as open. Opening an already-open menu changes nothing. */
+  addOpenMenu(id) {
+    const open = this.editor.getInstanceState().openMenus;
+    if (open.includes(id)) return this;
+    this.editor.updateInstanceState({ openMenus: [...open, id] });
+    return this;
+  }
+  /** Mark a menu as closed. Closing a menu that is not open changes nothing. */
+  removeOpenMenu(id) {
+    const open = this.editor.getInstanceState().openMenus;
+    if (!open.includes(id)) return this;
+    this.editor.updateInstanceState({ openMenus: open.filter((menu) => menu !== id) });
+    return this;
+  }
+  /** Close every open menu. */
+  clearOpenMenus() {
+    if (this.editor.getInstanceState().openMenus.length === 0) return this;
+    this.editor.updateInstanceState({ openMenus: [] });
+    return this;
+  }
+};
+function createSchema(migrations = []) {
+  return StoreSchema.create(
+    {
+      document: DocumentRecordType,
+      page: PageRecordType,
+      shape: ShapeRecordType,
+      binding: BindingRecordType,
+      asset: AssetRecordType,
+      camera: CameraRecordType,
+      instance: InstanceRecordType,
+      instance_page_state: InstancePageStateRecordType,
+      instance_presence: InstancePresenceRecordType
+    },
+    { migrations }
+  );
+}
+function createStore(options = {}) {
+  const schema = createSchema(options.migrations);
+  const store = new Store({
+    schema,
+    ...options.initialData ? { initialData: options.initialData } : {},
+    ...options.id ? { id: options.id } : {},
+    props: { defaultName: options.defaultName ?? "" }
+  });
+  if (options.snapshot) store.loadStoreSnapshot(options.snapshot);
+  return store;
+}
+
+// src/editor/selectionHandles.ts
+var HANDLE_HIT_RADIUS = 12;
+var ROTATE_HANDLE_OFFSET = 20;
+var MIN_EDGE_LENGTH_FOR_EDGE_HANDLE = 4 * HANDLE_HIT_RADIUS;
+function getHandleHitRadius(screenW, screenH) {
+  const smallest = Math.min(screenW, screenH);
+  if (smallest >= 6 * HANDLE_HIT_RADIUS) return HANDLE_HIT_RADIUS;
+  return Math.max(4, Math.min(HANDLE_HIT_RADIUS, smallest / 6));
+}
+function getSelectionHandlePositions(editor) {
+  const selected = editor.getSelectedShapes();
+  if (selected.length === 0) return null;
+  if (selected.length === 1) {
+    const util = editor.getShapeUtil(selected[0]);
+    if (util.hideResizeHandles(selected[0]) && util.hideRotateHandle(selected[0])) return null;
+  }
+  const single = selected.length === 1 ? selected[0] : void 0;
+  const rotation = single ? editor.getSelectionRotation() : 0;
+  let bounds;
+  let toScreen;
+  if (single) {
+    const b = editor.getShapeGeometryBounds(single);
+    const m = editor.getShapePageTransform(single);
+    bounds = b;
+    toScreen = (p) => editor.pageToScreen({ x: m.a * p.x + m.c * p.y + m.e, y: m.b * p.x + m.d * p.y + m.f });
+  } else {
+    bounds = editor.getSelectionPageBounds();
+    toScreen = (p) => editor.pageToScreen(p);
+  }
+  const { x, y, w, h } = bounds;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const handles = [];
+  const hideResize = single ? editor.getShapeUtil(single).hideResizeHandles(single) : false;
+  const hideRotate = single ? editor.getShapeUtil(single).hideRotateHandle(single) : false;
+  const topLeft = toScreen({ x, y });
+  const topRight = toScreen({ x: x + w, y });
+  const bottomRight = toScreen({ x: x + w, y: y + h });
+  const bottomLeft = toScreen({ x, y: y + h });
+  const screenW = Vec.Dist(topLeft, topRight);
+  const screenH = Vec.Dist(topLeft, bottomLeft);
+  if (!hideResize) {
+    handles.push(
+      { handle: "top_left", point: topLeft },
+      { handle: "top_right", point: topRight },
+      { handle: "bottom_right", point: bottomRight },
+      { handle: "bottom_left", point: bottomLeft }
+    );
+    if (screenW >= MIN_EDGE_LENGTH_FOR_EDGE_HANDLE) {
+      handles.push(
+        { handle: "top", point: toScreen({ x: cx, y }) },
+        { handle: "bottom", point: toScreen({ x: cx, y: y + h }) }
+      );
+    }
+    if (screenH >= MIN_EDGE_LENGTH_FOR_EDGE_HANDLE) {
+      handles.push(
+        { handle: "right", point: toScreen({ x: x + w, y: cy }) },
+        { handle: "left", point: toScreen({ x, y: cy }) }
+      );
+    }
+  }
+  if (!hideRotate) {
+    const top = toScreen({ x: cx, y });
+    const center = toScreen({ x: cx, y: cy });
+    const dir = Vec.Uni(Vec.Sub(top, center));
+    const off = Vec.Len(Vec.Sub(top, center)) === 0 ? new Vec(0, -1) : dir;
+    handles.push({ handle: "rotate", point: Vec.Add(top, Vec.Mul(off, ROTATE_HANDLE_OFFSET)) });
+  }
+  return { bounds, rotation, handles, screenW, screenH };
+}
+function hitTestSelectionHandles(editor, screenPoint, radius) {
+  const info = getSelectionHandlePositions(editor);
+  if (!info) return void 0;
+  const r = radius ?? getHandleHitRadius(info.screenW, info.screenH);
+  let best;
+  let bestD = r * r;
+  for (const h of info.handles) {
+    const d = Vec.Dist2(h.point, screenPoint);
+    if (d <= bestD) {
+      bestD = d;
+      best = h.handle;
+    }
+  }
+  return best;
+}
+function hitTestSelectionBounds(editor, pagePoint) {
+  const selected = editor.getSelectedShapes();
+  if (selected.length === 0) return false;
+  if (selected.length === 1) {
+    const s = selected[0];
+    const util = editor.getShapeUtil(s);
+    if (util.hideSelectionBoundsBg(s)) return false;
+    const b2 = editor.getShapeGeometryBounds(s);
+    const local = editor.getPointInShapeSpace(s, pagePoint);
+    return Box.ContainsPoint(b2, local);
+  }
+  const b = editor.getSelectionPageBounds();
+  return Box.ContainsPoint(b, pagePoint);
+}
+
+// src/records/normalize.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function richTextToPlainText(doc, unknownNodeTypes) {
+  if (typeof doc === "string") return doc;
+  if (!isPlainObject(doc)) return "";
+  const blocks = Array.isArray(doc["content"]) ? doc["content"] : [];
+  if (blocks.length === 0) return nodeToText(doc, unknownNodeTypes);
+  return blocks.map((block) => nodeToText(block, unknownNodeTypes)).join("\n");
+}
+var TEXTLESS_NODE_TYPES = /* @__PURE__ */ new Set(["doc", "paragraph", "text", "hardBreak", "heading", "listItem", "bulletList", "orderedList"]);
+function nodeToText(node, unknownNodeTypes) {
+  if (typeof node === "string") return node;
+  if (!isPlainObject(node)) return "";
+  const type = typeof node["type"] === "string" ? node["type"] : "";
+  if (type === "text") return typeof node["text"] === "string" ? node["text"] : "";
+  if (type === "hardBreak") return "\n";
+  if (type && !TEXTLESS_NODE_TYPES.has(type)) unknownNodeTypes?.add(type);
+  const content = node["content"];
+  if (!Array.isArray(content)) return "";
+  const separator = type === "paragraph" || type === "heading" ? "" : "\n";
+  return content.map((child) => nodeToText(child, unknownNodeTypes)).join(separator);
+}
+var PATH_HEADER_BYTES = 12;
+var PATH_DELTA_BYTES = 6;
+function decodeDrawSegmentPath(path) {
+  const bytes = base64ToBytes(path);
+  if (!bytes) return null;
+  if (bytes.byteLength < PATH_HEADER_BYTES) return null;
+  if ((bytes.byteLength - PATH_HEADER_BYTES) % PATH_DELTA_BYTES !== 0) return null;
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  let x = view.getFloat32(0, true);
+  let y = view.getFloat32(4, true);
+  let z = view.getFloat32(8, true);
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) return null;
+  const points = [{ x, y, z }];
+  for (let at = PATH_HEADER_BYTES; at < bytes.byteLength; at += PATH_DELTA_BYTES) {
+    const dx = getFloat16(view, at);
+    const dy = getFloat16(view, at + 2);
+    const dz = getFloat16(view, at + 4);
+    if (!Number.isFinite(dx) || !Number.isFinite(dy) || !Number.isFinite(dz)) return null;
+    x += dx;
+    y += dy;
+    z += dz;
+    points.push({ x, y, z });
+  }
+  return points;
+}
+function base64ToBytes(value) {
+  if (typeof value !== "string" || value.length === 0 || value.length % 4 !== 0) return null;
+  if (!/^[A-Za-z0-9+/]+={0,2}$/.test(value)) return null;
+  try {
+    if (typeof atob === "function") {
+      const binary = atob(value);
+      const out = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i);
+      return out;
+    }
+    const buffer = globalThis.Buffer;
+    return buffer ? new Uint8Array(buffer.from(value, "base64")) : null;
+  } catch {
+    return null;
+  }
+}
+function getFloat16(view, offset) {
+  const bits = view.getUint16(offset, true);
+  const sign = bits & 32768 ? -1 : 1;
+  const exponent = bits >> 10 & 31;
+  const fraction = bits & 1023;
+  if (exponent === 0) return sign * 2 ** -14 * (fraction / 1024);
+  if (exponent === 31) return fraction ? Number.NaN : sign * Infinity;
+  return sign * 2 ** (exponent - 15) * (1 + fraction / 1024);
+}
+var FREEHAND_TYPES = /* @__PURE__ */ new Set(["draw", "highlight"]);
+function isShapeRecord(record) {
+  return record.typeName === "shape" && typeof record.type === "string";
+}
+function normalizeLoadedRecords(records, options) {
+  const warnings = [];
+  const out = [];
+  const unknownTypes = /* @__PURE__ */ new Set();
+  for (const record of records) {
+    if (!isShapeRecord(record)) {
+      out.push(record);
+      continue;
+    }
+    const util = options.shapeUtils[record.type];
+    if (!util) {
+      if (!unknownTypes.has(record.type)) {
+        unknownTypes.add(record.type);
+        warnings.push(`shape type "${record.type}" has no registered util; its shapes are kept but not rendered`);
+      }
+      out.push(record);
+      continue;
+    }
+    const source = isPlainObject(record.props) ? record.props : {};
+    let props = isPlainObject(record.props) ? null : { ...source };
+    if ("richText" in source) {
+      const unknownNodes = /* @__PURE__ */ new Set();
+      const text = richTextToPlainText(source["richText"], unknownNodes);
+      for (const node of unknownNodes) {
+        warnings.push(`${record.id}: unsupported rich text node "${node}"; its text was kept, its formatting dropped`);
+      }
+      props ??= { ...source };
+      delete props["richText"];
+      if (typeof props["text"] !== "string") props["text"] = text;
+    }
+    if (FREEHAND_TYPES.has(record.type) && Array.isArray(source["segments"])) {
+      const decoded = decodeSegments(source["segments"], record.id, warnings);
+      if (decoded) {
+        props ??= { ...source };
+        props["segments"] = decoded;
+      }
+    }
+    const defaults = safeDefaultProps(util, record.type, warnings);
+    const missing = [];
+    for (const key of Object.keys(defaults)) {
+      const from = props ?? source;
+      if (!(key in from) || from[key] === void 0) missing.push(key);
+    }
+    if (missing.length > 0) {
+      props ??= { ...source };
+      for (const key of missing) props[key] = defaults[key];
+      warnings.push(`${record.id}: missing prop${missing.length > 1 ? "s" : ""} ${missing.join(", ")} filled in from defaults`);
+    }
+    out.push(props ? { ...record, props } : record);
+  }
+  return { records: out, warnings };
+}
+function safeDefaultProps(util, type, warnings) {
+  try {
+    const defaults = util.getDefaultProps();
+    return isPlainObject(defaults) ? defaults : {};
+  } catch (error) {
+    warnings.push(`shape type "${type}": getDefaultProps() failed (${String(error)}); missing props were not filled in`);
+    return {};
+  }
+}
+function decodeSegments(segments, id, warnings) {
+  let changed = false;
+  const out = [];
+  for (const segment of segments) {
+    if (!isPlainObject(segment) || Array.isArray(segment["points"]) || typeof segment["path"] !== "string") {
+      out.push(segment);
+      continue;
+    }
+    changed = true;
+    const points = decodeDrawSegmentPath(segment["path"]);
+    if (!points) {
+      warnings.push(`${id}: freehand segment uses an unrecognized path encoding; the segment was dropped`);
+      continue;
+    }
+    const next = { ...segment, points };
+    delete next["path"];
+    out.push(next);
+  }
+  return changed ? out : null;
+}
+
+// src/bindings/BindingUtil.ts
+var BindingUtil = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  editor;
+  static type;
+  static props;
+  static migrations;
+  get type() {
+    return this.constructor.type;
+  }
+};
+
+// src/shapes/ShapeUtil.ts
+var ShapeUtil = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  editor;
+  static type;
+  static props;
+  static migrations;
+  get type() {
+    return this.constructor.type;
+  }
+  /**
+   * GPU style for the shape's geometry. Return `null` (the default) to render
+   * the shape through `component` in the DOM overlay instead.
+   */
+  getRenderStyle(_shape) {
+    return null;
+  }
+  /** Whether the shape should be drawn by the DOM overlay even if it has a render style (e.g. while editing). */
+  needsOverlay(shape) {
+    return this.editor.getEditingShapeId() === shape.id;
+  }
+  /**
+   * Whether `component` should be rendered in the DOM overlay *in addition to*
+   * the GPU geometry (e.g. a text label on a filled shape).
+   */
+  hasOverlayLabel(_shape) {
+    return false;
+  }
+  /**
+   * Whether the shape clips its descendants to its own geometry bounds (e.g.
+   * frames). Children are then rendered with a scissor rect on the GPU.
+   */
+  isClipShape(_shape) {
+    return false;
+  }
+  canEdit(_shape) {
+    return false;
+  }
+  canResize(_shape) {
+    return true;
+  }
+  canBind(_opts) {
+    return true;
+  }
+  canCrop(_shape) {
+    return false;
+  }
+  canScroll(_shape) {
+    return false;
+  }
+  canSnap(_shape) {
+    return true;
+  }
+  canReceiveNewChildrenOfType(_shape, _type) {
+    return false;
+  }
+  canDropShapes(_shape, _shapes) {
+    return false;
+  }
+  hideRotateHandle(_shape) {
+    return false;
+  }
+  hideResizeHandles(_shape) {
+    return false;
+  }
+  hideSelectionBoundsBg(_shape) {
+    return false;
+  }
+  hideSelectionBoundsFg(_shape) {
+    return false;
+  }
+  isAspectRatioLocked(_shape) {
+    return false;
+  }
+};
+var BaseBoxShapeUtil = class extends ShapeUtil {
+  onResize(shape, info) {
+    const { scaleX, scaleY, initialShape, newPoint } = info;
+    const w = Math.max(1, Math.abs(initialShape.props.w * scaleX));
+    const h = Math.max(1, Math.abs(initialShape.props.h * scaleY));
+    return { x: newPoint.x, y: newPoint.y, props: { ...shape.props, w, h } };
+  }
+};
+function mapClipToDeviceRect(clip, camera, dpr, canvasW, canvasH) {
+  const s = camera.z * dpr;
+  const ox = camera.x * s;
+  const oy = camera.y * s;
+  const x0 = Math.max(0, Math.floor(clip[0] * s + ox));
+  const x1 = Math.min(canvasW, Math.ceil(clip[2] * s + ox));
+  const y0 = Math.max(0, Math.floor(clip[1] * s + oy));
+  const y1 = Math.min(canvasH, Math.ceil(clip[3] * s + oy));
+  if (!(x1 > x0 && y1 > y0)) return null;
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+function forEachDrawBatch(batches, camera, dpr, canvasW, canvasH, visit) {
+  const out = { first: 0, count: 0, texture: 0, scissor: null };
+  for (let i = 0; i + BATCH_WORDS <= batches.length; i += BATCH_WORDS) {
+    const count = batches[i + 1];
+    if (count === 0) continue;
+    const clip = readClip(batches, i + 3);
+    let scissor = null;
+    if (clip) {
+      scissor = mapClipToDeviceRect(clip, camera, dpr, canvasW, canvasH);
+      if (!scissor) continue;
+    }
+    out.first = batches[i];
+    out.count = count;
+    out.texture = batches[i + 2];
+    out.scissor = scissor;
+    visit(out);
+  }
+}
+
+// src/render/webgl2.ts
+var VERT = `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 a_pos;
+layout(location = 1) in vec2 a_uv;
+layout(location = 2) in vec4 a_color;
+uniform vec3 u_cam;   // x, y, zoom
+uniform vec2 u_vp;    // viewport size in CSS px
+out vec2 v_uv;
+out vec4 v_color;
+void main() {
+  vec2 screen = (a_pos + u_cam.xy) * u_cam.z;
+  vec2 clip = screen / u_vp * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  v_uv = a_uv;
+  v_color = a_color;
+}`;
+var FRAG = `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+in vec4 v_color;
+uniform sampler2D u_tex;
+out vec4 o_color;
+void main() {
+  vec4 t = texture(u_tex, v_uv);
+  o_color = vec4(v_color.rgb * v_color.a, v_color.a) * t;
+}`;
+var BYTES_PER_VERTEX = VERTEX_FLOATS * 4;
+function compile(gl, type, src) {
+  const sh = gl.createShader(type);
+  if (!sh) throw new Error("mocanvas: cannot create shader");
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS) && !gl.isContextLost()) {
+    const log = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error(`mocanvas: shader compile failed: ${log}`);
+  }
+  return sh;
+}
+function isPowerOfTwo(n) {
+  return n > 0 && (n & n - 1) === 0;
+}
+function sourceSize2(source) {
+  if (typeof VideoFrame !== "undefined" && source instanceof VideoFrame) return [source.displayWidth, source.displayHeight];
+  if (typeof HTMLVideoElement !== "undefined" && source instanceof HTMLVideoElement) return [source.videoWidth, source.videoHeight];
+  const s = source;
+  return [s.width, s.height];
+}
+var WebGL2Backend = class {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    const gl = canvas.getContext("webgl2", {
+      antialias: options.antialias ?? true,
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: false,
+      powerPreference: "high-performance",
+      desynchronized: true
+    });
+    if (!gl) throw new Error("mocanvas: WebGL2 is not available");
+    this.gl = gl;
+    const vs = compile(gl, gl.VERTEX_SHADER, VERT);
+    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);
+    const program = gl.createProgram();
+    if (!program) throw new Error("mocanvas: cannot create program");
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error(`mocanvas: program link failed: ${gl.getProgramInfoLog(program)}`);
+    }
+    this.program = program;
+    this.uCam = gl.getUniformLocation(program, "u_cam");
+    this.uVp = gl.getUniformLocation(program, "u_vp");
+    gl.useProgram(program);
+    gl.uniform1i(gl.getUniformLocation(program, "u_tex"), 0);
+    const vao = gl.createVertexArray();
+    const vbo = gl.createBuffer();
+    const ibo = gl.createBuffer();
+    if (!vao || !vbo || !ibo) throw new Error("mocanvas: cannot create buffers");
+    this.vao = vao;
+    this.vbo = vbo;
+    this.ibo = ibo;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, BYTES_PER_VERTEX, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, BYTES_PER_VERTEX, 8);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, BYTES_PER_VERTEX, 16);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
+    gl.bindVertexArray(null);
+    const white = gl.createTexture();
+    if (!white) throw new Error("mocanvas: cannot create texture");
+    this.whiteTex = white;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, white);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]));
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.disable(gl.SCISSOR_TEST);
+  }
+  canvas;
+  kind = "webgl2";
+  gl;
+  program;
+  vao;
+  vbo;
+  ibo;
+  uCam;
+  uVp;
+  /** Texture 0: 1×1 opaque white, so solid batches use the same shader. */
+  whiteTex;
+  textures = /* @__PURE__ */ new Map();
+  vboBytes = 0;
+  iboBytes = 0;
+  /**
+   * `FrameBuffers.version` currently sitting in the VBO/IBO, or -1 when they hold
+   * nothing usable. The engine's vertex data is page-space, so panning and zooming
+   * change only the camera uniform: while the version is unchanged this skips the
+   * (multi-megabyte, at scale) `bufferSubData` and just re-issues the draw calls.
+   */
+  uploadedVersion = -1;
+  width = 1;
+  height = 1;
+  pixelWidth = 1;
+  pixelHeight = 1;
+  dpr = 1;
+  disposed = false;
+  resize(width, height, dpr) {
+    this.width = Math.max(1, width);
+    this.height = Math.max(1, height);
+    this.dpr = dpr;
+    const pw = Math.max(1, Math.round(width * dpr));
+    const ph = Math.max(1, Math.round(height * dpr));
+    this.pixelWidth = pw;
+    this.pixelHeight = ph;
+    if (this.canvas.width !== pw || this.canvas.height !== ph) {
+      this.canvas.width = pw;
+      this.canvas.height = ph;
+    }
+    this.gl.viewport(0, 0, pw, ph);
+  }
+  uploadTexture(id, source, opts = {}) {
+    if (this.disposed) return;
+    if (id === 0) throw new Error("mocanvas: texture id 0 is reserved");
+    const gl = this.gl;
+    let tex = this.textures.get(id);
+    if (!tex) {
+      const t = gl.createTexture();
+      if (!t) throw new Error("mocanvas: cannot create texture");
+      tex = t;
+      this.textures.set(id, tex);
+    }
+    const [w, h] = sourceSize2(source);
+    const mip = isPowerOfTwo(w) && isPowerOfTwo(h);
+    const smooth = opts.smooth ?? true;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, opts.premultiplied ? 0 : 1);
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, smooth ? gl.LINEAR : gl.NEAREST);
+    if (mip) {
+      gl.generateMipmap(gl.TEXTURE_2D);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, smooth ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
+    } else {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, smooth ? gl.LINEAR : gl.NEAREST);
+    }
+  }
+  deleteTexture(id) {
+    const tex = this.textures.get(id);
+    if (!tex) return;
+    this.textures.delete(id);
+    if (!this.disposed) this.gl.deleteTexture(tex);
+  }
+  draw(frame, camera, options) {
+    if (this.disposed) return;
+    const gl = this.gl;
+    const [r, g, b, a] = options.background;
+    gl.disable(gl.SCISSOR_TEST);
+    gl.clearColor(r * a, g * a, b * a, a);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    if (frame.indices.length === 0) return;
+    gl.useProgram(this.program);
+    gl.uniform3f(this.uCam, camera.x, camera.y, camera.z);
+    gl.uniform2f(this.uVp, this.width, this.height);
+    gl.bindVertexArray(this.vao);
+    if (frame.version !== this.uploadedVersion) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+      const vBytes = frame.vertices.byteLength;
+      if (vBytes > this.vboBytes) {
+        this.vboBytes = Math.max(vBytes, this.vboBytes * 2);
+        gl.bufferData(gl.ARRAY_BUFFER, this.vboBytes, gl.DYNAMIC_DRAW);
+      }
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, frame.vertices);
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);
+      const iBytes = frame.indices.byteLength;
+      if (iBytes > this.iboBytes) {
+        this.iboBytes = Math.max(iBytes, this.iboBytes * 2);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.iboBytes, gl.DYNAMIC_DRAW);
+      }
+      gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, frame.indices);
+      this.uploadedVersion = frame.version;
+    }
+    const ph = this.pixelHeight;
+    gl.activeTexture(gl.TEXTURE0);
+    let boundTex = null;
+    let scissoring = false;
+    forEachDrawBatch(frame.batches, camera, this.dpr, this.pixelWidth, ph, (b2) => {
+      const sc = b2.scissor;
+      if (sc) {
+        if (!scissoring) {
+          gl.enable(gl.SCISSOR_TEST);
+          scissoring = true;
+        }
+        gl.scissor(sc.x, ph - (sc.y + sc.h), sc.w, sc.h);
+      } else if (scissoring) {
+        gl.disable(gl.SCISSOR_TEST);
+        scissoring = false;
+      }
+      const tex = (b2.texture !== 0 ? this.textures.get(b2.texture) : void 0) ?? this.whiteTex;
+      if (tex !== boundTex) {
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        boundTex = tex;
+      }
+      gl.drawElements(gl.TRIANGLES, b2.count, gl.UNSIGNED_INT, b2.first * 4);
+    });
+    if (scissoring) gl.disable(gl.SCISSOR_TEST);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    const gl = this.gl;
+    for (const tex of this.textures.values()) gl.deleteTexture(tex);
+    this.textures.clear();
+    gl.deleteTexture(this.whiteTex);
+    gl.deleteBuffer(this.vbo);
+    gl.deleteBuffer(this.ibo);
+    gl.deleteVertexArray(this.vao);
+    gl.deleteProgram(this.program);
+  }
+};
+function createBackend(canvas) {
+  return new WebGL2Backend(canvas);
+}
+var EditorContext = createContext(null);
+function useEditor() {
+  const editor = useContext(EditorContext);
+  if (!editor) throw new Error("useEditor must be used inside a mocanvas <Canvas> or <EditorProvider>");
+  return editor;
+}
+function useMaybeEditor() {
+  return useContext(EditorContext);
+}
+var EditorProvider = EditorContext.Provider;
+function modifiers(e) {
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+  return {
+    shiftKey: e.shiftKey,
+    altKey: e.altKey,
+    ctrlKey: e.ctrlKey,
+    metaKey: e.metaKey,
+    accelKey: isMac ? e.metaKey : e.ctrlKey
+  };
+}
+function localPoint(editor, e) {
+  const rect = editor.getContainer().getBoundingClientRect();
+  return { x: e.clientX - rect.left, y: e.clientY - rect.top, z: 0.5 };
+}
+function resolveTarget(editor, point) {
+  const page = editor.screenToPage(point);
+  if (editor.getCurrentToolId() === "select") {
+    const selHandle = hitTestSelectionHandles(editor, point);
+    if (selHandle) return { target: "selection", handle: selHandle };
+    const only = editor.getOnlySelectedShape();
+    if (only) {
+      const handles = editor.getShapeUtil(only).getHandles?.(only);
+      if (handles?.length) {
+        const local = editor.getPointInShapeSpace(only, page);
+        const r = HANDLE_HIT_RADIUS / editor.getZoomLevel();
+        let best;
+        let bestD = r * r;
+        for (const h of handles) {
+          const d = Vec.Dist2(h, local);
+          if (d <= bestD) {
+            bestD = d;
+            best = h;
+          }
+        }
+        if (best) return { target: "handle", shape: only, handle: best };
+      }
+    }
+  }
+  const shape = editor.getShapeAtPoint(page, { hitInside: true });
+  if (shape) return { target: "shape", shape };
+  if (editor.getCurrentToolId() === "select" && hitTestSelectionBounds(editor, page)) {
+    const selected = editor.getSelectedShapes();
+    const inside = selected.find((s) => editor.getShapeGeometry(s).hitTestPoint(editor.getPointInShapeSpace(s, page), 0, true));
+    return inside ? { target: "shape", shape: inside } : { target: "selection" };
+  }
+  const filled = editor.getShapeAtPoint(page, { hitInside: true });
+  if (filled && editor.getSelectedShapeIds().includes(filled.id)) return { target: "shape", shape: filled };
+  return { target: "canvas" };
+}
+function useCanvasEvents(editor) {
+  return useMemo(() => {
+    let lastDownTime = 0;
+    let clickCount = 0;
+    let lastDownPoint = { x: 0, y: 0 };
+    const pointerInfo = (e, name) => {
+      const point = localPoint(editor, e);
+      return {
+        type: "pointer",
+        name,
+        point,
+        pointerId: e.pointerId,
+        button: e.button,
+        isPen: e.pointerType === "pen",
+        ...modifiers(e),
+        ...resolveTarget(editor, point)
+      };
+    };
+    return {
+      onPointerDown(e) {
+        if (e.button === 2) {
+          editor.dispatch(pointerInfo(e, "right_click"));
+          return;
+        }
+        if (e.button === 1) {
+          editor.dispatch(pointerInfo(e, "middle_click"));
+        }
+        e.currentTarget.setPointerCapture(e.pointerId);
+        editor.getContainer().focus({ preventScroll: true });
+        const now = performance.now();
+        const p = localPoint(editor, e);
+        if (now - lastDownTime < 400 && Math.hypot(p.x - lastDownPoint.x, p.y - lastDownPoint.y) < 8) clickCount++;
+        else clickCount = 1;
+        lastDownTime = now;
+        lastDownPoint = p;
+        editor.dispatch(pointerInfo(e, "pointer_down"));
+      },
+      onPointerMove(e) {
+        if (e.pointerType === "mouse" && e.buttons === 0 && editor.inputs.isPointing) {
+          editor.dispatch(pointerInfo(e, "pointer_up"));
+          return;
+        }
+        editor.dispatch(pointerInfo(e, "pointer_move"));
+      },
+      onPointerUp(e) {
+        if (e.button === 2) return;
+        const el = e.currentTarget;
+        if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+        editor.dispatch(pointerInfo(e, "pointer_up"));
+        if (clickCount >= 2) {
+          const name = clickCount === 2 ? "double_click" : clickCount === 3 ? "triple_click" : "quadruple_click";
+          const point = localPoint(editor, e);
+          editor.dispatch({
+            type: "click",
+            name,
+            phase: "up",
+            point,
+            pointerId: e.pointerId,
+            button: e.button,
+            isPen: e.pointerType === "pen",
+            ...modifiers(e),
+            ...resolveTarget(editor, point)
+          });
+        }
+      },
+      onPointerCancel(e) {
+        editor.dispatch(pointerInfo(e, "pointer_up"));
+        editor.cancel();
+      },
+      onWheel(e) {
+        e.preventDefault();
+        const point = localPoint(editor, e);
+        const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
+        const info = {
+          type: "wheel",
+          name: "wheel",
+          point,
+          delta: { x: e.deltaX * scale, y: e.deltaY * scale, z: 0 },
+          ...modifiers(e)
+        };
+        editor.dispatch(info);
+      },
+      onContextMenu(e) {
+        e.preventDefault();
+      },
+      onKeyDown(e) {
+        if (isEditableTarget(e.target)) return;
+        editor.dispatch({ type: "keyboard", name: e.repeat ? "key_repeat" : "key_down", key: e.key, code: e.code, ...modifiers(e) });
+      },
+      onKeyUp(e) {
+        if (isEditableTarget(e.target)) return;
+        editor.dispatch({ type: "keyboard", name: "key_up", key: e.key, code: e.code, ...modifiers(e) });
+      }
+    };
+  }, [editor]);
+}
+function isEditableTarget(t) {
+  if (!(t instanceof HTMLElement)) return false;
+  const tag = t.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || t.isContentEditable;
+}
+var containerStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden",
+  touchAction: "none",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  outline: "none",
+  cursor: "default"
+};
+var layerStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+};
+var SELECTION = "var(--mocanvas-selection, #2f6fe4)";
+var HANDLE_FILL = "var(--mocanvas-selection-fg, #ffffff)";
+var BRUSH_FILL = "var(--mocanvas-brush-fill, rgba(47, 111, 228, 0.12))";
+var SNAP = "var(--mocanvas-snap, #cf3fe0)";
+var INDICATOR_STROKE = 1.5;
+var HANDLE = { corner: 9, rotate: 5.5, shape: 6, virtual: 4 };
+function Canvas({ editor, className, style, children, components }) {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [backend, setBackend] = useState(null);
+  const events = useCanvasEvents(editor);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const b = createBackend(canvas);
+    setBackend(b);
+    return () => {
+      b.dispose();
+      setBackend(null);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el || !backend) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      backend.resize(rect.width, rect.height, dpr);
+      editor.updateViewportScreenBounds({ x: rect.left, y: rect.top, w: rect.width, h: rect.height });
+      editor.updateInstanceState({ devicePixelRatio: dpr });
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [editor, backend]);
+  useEffect(() => {
+    if (!backend) return;
+    let raf = 0;
+    let dirty = true;
+    const draw = () => {
+      raf = 0;
+      if (!dirty) return;
+      dirty = false;
+      if (editor.renderFrame(backend).pending) {
+        dirty = true;
+        raf = requestAnimationFrame(draw);
+      }
+    };
+    const stop = react(
+      "canvas.frame",
+      () => {
+        editor.getFrameEpoch();
+        editor.getCamera();
+        editor.getViewportScreenBounds();
+        editor.getEditingShapeId();
+        dirty = true;
+        if (!raf) raf = requestAnimationFrame(draw);
+      }
+    );
+    return () => {
+      stop();
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [editor, backend]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onWheel = (e) => events.onWheel(e);
+    el.addEventListener("wheel", onWheel, { passive: false });
+    window.addEventListener("keydown", events.onKeyDown);
+    window.addEventListener("keyup", events.onKeyUp);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", events.onKeyDown);
+      window.removeEventListener("keyup", events.onKeyUp);
+    };
+  }, [events]);
+  const cursor = useValue("cursor", () => cssCursor(editor.getInstanceState().cursor.type), [editor]);
+  const Indicators = components?.Indicators ?? DefaultIndicators;
+  const Brush = components?.Brush ?? DefaultBrush;
+  const Background = components?.Background;
+  return /* @__PURE__ */ jsx(EditorProvider, { value: editor, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `mocanvas ${className}` : "mocanvas",
+      style: { ...containerStyle, ...style, cursor },
+      tabIndex: 0,
+      onPointerDown: events.onPointerDown,
+      onPointerMove: events.onPointerMove,
+      onPointerUp: events.onPointerUp,
+      onPointerCancel: events.onPointerCancel,
+      onContextMenu: events.onContextMenu,
+      "data-testid": "mocanvas-container",
+      children: [
+        Background ? /* @__PURE__ */ jsx(Background, { editor }) : null,
+        /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { ...layerStyle, display: "block" } }),
+        /* @__PURE__ */ jsx(OverlayLayer, { editor }),
+        /* @__PURE__ */ jsxs("svg", { style: { ...layerStyle, pointerEvents: "none", overflow: "visible" }, children: [
+          /* @__PURE__ */ jsx(Indicators, { editor }),
+          /* @__PURE__ */ jsx(SnapLines, { editor }),
+          /* @__PURE__ */ jsx(Brush, { editor })
+        ] }),
+        children
+      ]
+    }
+  ) });
+}
+var OverlayLayer = track(function OverlayLayer2({ editor }) {
+  const ids = editor.getOverlayShapeIds();
+  const clips = editor.getOverlayClips();
+  const cam = editor.getCamera();
+  const editingId = editor.getEditingShapeId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mocanvas-overlay",
+      style: {
+        ...layerStyle,
+        pointerEvents: "none",
+        transformOrigin: "0 0",
+        transform: `scale(${cam.z}) translate(${cam.x}px, ${cam.y}px)`
+      },
+      children: ids.map((id, i) => {
+        const shape = editor.getShape(id);
+        if (!shape) return null;
+        return /* @__PURE__ */ jsx(OverlayShape, { editor, shape, isEditing: editingId === id, clip: clips[i] }, id);
+      })
+    }
+  );
+});
+var OverlayShape = track(function OverlayShape2({
+  editor,
+  shape,
+  isEditing,
+  clip
+}) {
+  const util = editor.getShapeUtil(shape);
+  const m = editor.getShapePageTransform(shape);
+  const bounds = editor.getShapeGeometryBounds(shape);
+  const offset = clip ? `translate(${-clip[0]}px, ${-clip[1]}px) ` : "";
+  const el = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mocanvas-shape",
+      "data-shape-id": shape.id,
+      "data-shape-type": shape.type,
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: bounds?.w ?? 0,
+        height: bounds?.h ?? 0,
+        transformOrigin: "0 0",
+        transform: `${offset}matrix(${m.a}, ${m.b}, ${m.c}, ${m.d}, ${m.e}, ${m.f})`,
+        opacity: shape.opacity,
+        pointerEvents: isEditing ? "auto" : "none"
+      },
+      children: util.component(shape)
+    }
+  );
+  if (!clip) return el;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mocanvas-shape-clip",
+      style: {
+        position: "absolute",
+        left: clip[0],
+        top: clip[1],
+        width: Math.max(0, clip[2] - clip[0]),
+        height: Math.max(0, clip[3] - clip[1]),
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      children: el
+    }
+  );
+});
+var CURSORS = {
+  default: "default",
+  cross: "crosshair",
+  grab: "grab",
+  grabbing: "grabbing",
+  move: "move",
+  pointer: "pointer",
+  text: "text"
+};
+function cssCursor(type) {
+  return CURSORS[type] ?? type;
+}
+function getShapeIndicatorNode(util, shape, bounds) {
+  const own = util.indicator?.(shape);
+  if (own !== null && own !== void 0 && own !== false) return own;
+  if (!bounds) return null;
+  return /* @__PURE__ */ jsx("rect", { x: bounds.x, y: bounds.y, width: bounds.w, height: bounds.h });
+}
+var DefaultIndicators = track(function DefaultIndicators2({ editor }) {
+  const bounds = editor.getSelectionPageBounds();
+  const hovered = editor.getHoveredShape();
+  const selected = editor.getSelectedShapes();
+  const cam = editor.getCamera();
+  const z = cam.z;
+  const tool = editor.getCurrentToolId();
+  const toScreen = (x, y) => [(x + cam.x) * z, (y + cam.y) * z];
+  const items = [];
+  const indicatorFor = (shape, key, stroke) => {
+    const b = editor.getShapeGeometryBounds(shape);
+    const node = getShapeIndicatorNode(editor.getShapeUtil(shape), shape, b);
+    if (node === null) return null;
+    const m = editor.getShapePageTransform(shape);
+    return /* @__PURE__ */ jsx(
+      "g",
+      {
+        transform: `matrix(${z} 0 0 ${z} ${cam.x * z} ${cam.y * z}) matrix(${m.a} ${m.b} ${m.c} ${m.d} ${m.e} ${m.f})`,
+        fill: "none",
+        stroke,
+        strokeWidth: INDICATOR_STROKE / z,
+        children: node
+      },
+      key
+    );
+  };
+  if (hovered && tool === "select" && !selected.some((s) => s.id === hovered.id)) {
+    const ind = indicatorFor(hovered, "hover", SELECTION);
+    if (ind) items.push(ind);
+  }
+  if (selected.length > 1) {
+    for (const s of selected) {
+      const ind = indicatorFor(s, `sel-${s.id}`, SELECTION);
+      if (ind) items.push(ind);
+    }
+  }
+  if (bounds && tool === "select") {
+    const info = getSelectionHandlePositions(editor);
+    const stroke = SELECTION;
+    if (selected.length === 1) {
+      const shape = selected[0];
+      const util = editor.getShapeUtil(shape);
+      const m = editor.getShapePageTransform(shape);
+      if (!util.hideSelectionBoundsFg(shape)) {
+        const ind = indicatorFor(shape, "bounds", stroke);
+        if (ind) items.push(ind);
+      }
+      const handles = util.getHandles?.(shape) ?? [];
+      for (const hd of handles) {
+        const p = new Vec(m.a * hd.x + m.c * hd.y + m.e, m.b * hd.x + m.d * hd.y + m.f);
+        const sp = editor.pageToScreen(p);
+        items.push(
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: sp.x,
+              cy: sp.y,
+              r: hd.type === "virtual" ? HANDLE.virtual : HANDLE.shape,
+              fill: hd.type === "virtual" ? stroke : HANDLE_FILL,
+              stroke,
+              strokeWidth: INDICATOR_STROKE,
+              opacity: hd.type === "virtual" ? 0.6 : 1
+            },
+            `h-${hd.id}`
+          )
+        );
+      }
+    } else {
+      const [x0, y0] = toScreen(bounds.x, bounds.y);
+      const [x1, y1] = toScreen(bounds.maxX, bounds.maxY);
+      items.push(/* @__PURE__ */ jsx("rect", { x: x0, y: y0, width: x1 - x0, height: y1 - y0, fill: "none", stroke, strokeWidth: INDICATOR_STROKE }, "bounds"));
+    }
+    if (info) {
+      for (const h of info.handles) {
+        if (h.handle === "rotate") {
+          items.push(/* @__PURE__ */ jsx("circle", { cx: h.point.x, cy: h.point.y, r: HANDLE.rotate, fill: HANDLE_FILL, stroke, strokeWidth: INDICATOR_STROKE }, "rotate"));
+        } else if (h.handle.includes("_")) {
+          items.push(
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: h.point.x - HANDLE.corner / 2,
+                y: h.point.y - HANDLE.corner / 2,
+                width: HANDLE.corner,
+                height: HANDLE.corner,
+                rx: 2,
+                fill: HANDLE_FILL,
+                stroke,
+                strokeWidth: INDICATOR_STROKE
+              },
+              h.handle
+            )
+          );
+        }
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: items });
+});
+var SnapLines = track(function SnapLines2({ editor }) {
+  const lines = editor.snaps.getLines();
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: lines.map((l) => {
+    const pts = l.points.map((p) => editor.pageToScreen(p));
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("polyline", { points: pts.map((p) => `${p.x},${p.y}`).join(" "), fill: "none", stroke: SNAP, strokeWidth: INDICATOR_STROKE }),
+      pts.map((p, i) => /* @__PURE__ */ jsx("line", { x1: p.x - 4, y1: p.y - 4, x2: p.x + 4, y2: p.y + 4, stroke: SNAP, strokeWidth: INDICATOR_STROKE }, i)),
+      pts.map((p, i) => /* @__PURE__ */ jsx("line", { x1: p.x - 4, y1: p.y + 4, x2: p.x + 4, y2: p.y - 4, stroke: SNAP, strokeWidth: INDICATOR_STROKE }, `b${i}`))
+    ] }, l.id);
+  }) });
+});
+var DefaultBrush = track(function DefaultBrush2({ editor }) {
+  const brush = editor.getInstanceState().brush;
+  if (!brush) return null;
+  const cam = editor.getCamera();
+  const x = (brush.x + cam.x) * cam.z;
+  const y = (brush.y + cam.y) * cam.z;
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x,
+      y,
+      width: brush.w * cam.z,
+      height: brush.h * cam.z,
+      fill: BRUSH_FILL,
+      stroke: SELECTION,
+      strokeWidth: INDICATOR_STROKE
+    }
+  );
+});
+
+export { AssetRecordType, BaseBoxShapeUtil, BindingRecordType, BindingUtil, Box, CameraRecordType, Canvas, Circle2d, CubicSpline2d, DEFAULT_COLORS, DEFAULT_DASHES, DEFAULT_EDITOR_CONFIG, DEFAULT_FILLS, DEFAULT_FONTS, DEFAULT_H_ALIGNS, DEFAULT_SIZES, DEFAULT_V_ALIGNS, DOCUMENT_ID, DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultFontStyle, DefaultHorizontalAlignStyle, DefaultLabelColorStyle, DefaultSizeStyle, DefaultVerticalAlignStyle, DocumentRecordType, EVENT_NAME_MAP, Edge2d, Editor, EditorContext, EditorProvider, Ellipse2d, EnumStyleProp, EventEmitter, FONT_SIZES, GEO_SHAPE_KINDS, GeoShapeGeoStyle, Geometry2d, Group2d, HANDLE_HIT_RADIUS, HandleTable, HistoryManager, INSTANCE_ID, InstancePageStateRecordType, InstancePresenceRecordType, InstanceRecordType, LIGHT_THEME, MAX_TEXTURE_RESOLUTION, MAX_TEXTURE_ZOOM, MenuManager, PRESENCE_COLORS, PageRecordType, Polygon2d, Polyline2d, ROTATE_HANDLE_OFFSET, Rectangle2d, RootState, STROKE_SIZES, ShapeRecordType, ShapeUtil, SharedStyleMap, SnapManager, StateNode, StyleProp, TextureManager, Vec, WebGL2Backend, bucketTextureResolution, createAssetId, createBackend, createBindingId, createRootState, createSchema, createShapeId, createStore, createUserPreferences, decodeDrawSegmentPath, getExportImplementation, getHandleHitRadius, getSelectionHandlePositions, getShapeIndicatorNode, getStylePropsOf, getTextMeasureProvider, hexToRgba, hitTestSelectionBounds, hitTestSelectionHandles, isAsset, isAssetId, isBinding, isBindingId, isInstancePresenceId, isPageId, isShape, isShapeId, normalizeLoadedRecords, pointInPolygon, randomPresenceColor, registerExportImplementation, registerTextMeasureImplementation, richTextToPlainText, useEditor, useMaybeEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map