@fieldnotes/core 0.61.0 → 0.62.0

package/dist/index.cjs

@@ -30,6 +30,8 @@ __export(index_exports, {
   FOCUS_PRESENCE_KIND: () => FOCUS_PRESENCE_KIND,
   HandTool: () => HandTool,
   HistoryStack: () => HistoryStack,
+  HtmlPainterMissingError: () => HtmlPainterMissingError,
+  HtmlPainterRegistry: () => HtmlPainterRegistry,
   ImageTool: () => ImageTool,
   IndexedDBAdapter: () => IndexedDBAdapter,
   LASER_TRAIL_PRESENCE_KIND: () => LASER_TRAIL_PRESENCE_KIND,
@@ -93,6 +95,7 @@ __export(index_exports, {
   isMeasurePresence: () => isMeasurePresence,
   isNearBezier: () => isNearBezier,
   isPingPresence: () => isPingPresence,
+  resolveHtmlRouting: () => resolveHtmlRouting,
   setFontSize: () => setFontSize,
   smartSnap: () => smartSnap,
   snapPoint: () => snapPoint,
@@ -1885,6 +1888,10 @@ var PanInertia = class {
   cancel() {
     this.reset();
   }
+  /** Whether a coast frame is scheduled, i.e. the camera is still gliding. */
+  isCoasting() {
+    return this.rafId !== null;
+  }
   step = () => {
     if (this.rafId === null) return;
     this.deps.pan(this.vx, this.vy);
@@ -1998,6 +2005,7 @@ var InputHandler = class {
   openContextMenu;
   panInertia;
   panInertiaEnabled;
+  coastStoppedByPointer = false;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -2008,8 +2016,17 @@ var InputHandler = class {
   get shortcuts() {
     return this.keyboard.shortcuts;
   }
+  /**
+   * True while the camera glides under pan inertia, and while the pointer
+   * gesture that just stopped such a glide is still down. Passive observers use
+   * it to ignore a gesture that was only meant to halt the coast.
+   */
+  isCameraCoasting() {
+    return this.panInertia.isCoasting() || this.coastStoppedByPointer;
+  }
   destroy() {
     this.panInertia.cancel();
+    this.coastStoppedByPointer = false;
     this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
@@ -2030,6 +2047,8 @@ var InputHandler = class {
     this.element.addEventListener("pointerleave", this.onPointerLeave, opts);
     this.element.addEventListener("pointercancel", this.onPointerUp, opts);
     this.element.addEventListener("contextmenu", this.onContextMenu, opts);
+    window.addEventListener("blur", this.onCoastInterrupt, opts);
+    window.addEventListener("visibilitychange", this.onCoastInterrupt, opts);
   }
   onWheel = (e) => {
     e.preventDefault();
@@ -2043,6 +2062,7 @@ var InputHandler = class {
     });
   };
   onPointerDown = (e) => {
+    if (this.panInertia.isCoasting()) this.coastStoppedByPointer = true;
     this.panInertia.cancel();
     this.focusSelf();
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
@@ -2123,6 +2143,7 @@ var InputHandler = class {
       this.isPanning = false;
       this.panInertia.release();
     }
+    if (this.activePointers.size === 0) this.coastStoppedByPointer = false;
     const upResult = this.inputFilter.filterUp(e);
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -2202,6 +2223,12 @@ var InputHandler = class {
     this.lastPointerEvent = null;
     this.onPointerUp(e);
   };
+  // Recovers `coastStoppedByPointer` when the gesture that set it never delivers
+  // a matching pointerup/cancel/leave. Deliberately narrow: it clears only this
+  // flag, not `activePointers`/`isPanning`, which is a separate pre-existing gap.
+  onCoastInterrupt = () => {
+    this.coastStoppedByPointer = false;
+  };
   toPointerState(e) {
     const rect = this.element.getBoundingClientRect();
     return {
@@ -4015,6 +4042,157 @@ function renderHexGridTiled(ctx, bounds, cellSize, tile) {
   }
 }
 
+// src/canvas/html-painter-registry.ts
+var HtmlPainterMissingError = class extends Error {
+  elementId;
+  htmlType;
+  constructor(elementId, htmlType) {
+    super(`[fieldnotes] no painter registered for canvas-backed htmlType "${htmlType ?? ""}"`);
+    this.name = "HtmlPainterMissingError";
+    this.elementId = elementId;
+    this.htmlType = htmlType;
+  }
+};
+var HtmlPainterRegistry = class {
+  painters = /* @__PURE__ */ new Map();
+  declared = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  _version = 0;
+  canvasTypesCache = null;
+  get version() {
+    return this._version;
+  }
+  /**
+   * Memoized: this is the hottest read in the feature — `isDomElement` consults it several
+   * times per element per frame, and every html-element store update re-reconciles every
+   * html element. The cache is dropped in `bump()`, which is called on exactly the
+   * transitions that can change the membership of this set (first `expect` of a type, last
+   * release of a type, any `register`, and any unregister that empties a type's stack).
+   *
+   * The returned `Set` is the LIVE memoized instance, not a copy: callers must not mutate
+   * it, and a caller that holds it across a `bump()` holds a stale snapshot. Nothing in the
+   * codebase does either — `withHtmlDefaults` passes it straight through to the exporters
+   * unless the caller supplied `expectedCanvasTypes`, in which case it builds a fresh union
+   * — and holding it across a change was already a stale snapshot before memoization.
+   */
+  get canvasTypes() {
+    const cached = this.canvasTypesCache;
+    if (cached) return cached;
+    const types = new Set(this.declared.keys());
+    for (const [type, stack] of this.painters) {
+      if (stack.length > 0) types.add(type);
+    }
+    this.canvasTypesCache = types;
+    return types;
+  }
+  expect(htmlTypes) {
+    const claimed = [...htmlTypes];
+    let changed = false;
+    for (const type of claimed) {
+      const count = this.declared.get(type) ?? 0;
+      if (count === 0) changed = true;
+      this.declared.set(type, count + 1);
+    }
+    if (changed) this.bump();
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      let releaseChanged = false;
+      for (const type of claimed) {
+        const count = this.declared.get(type) ?? 0;
+        if (count <= 1) {
+          this.declared.delete(type);
+          releaseChanged = true;
+        } else {
+          this.declared.set(type, count - 1);
+        }
+      }
+      if (releaseChanged) this.bump();
+    };
+  }
+  register(htmlType, painter) {
+    const entry = { token: /* @__PURE__ */ Symbol("html-painter"), painter };
+    const stack = this.painters.get(htmlType) ?? [];
+    stack.push(entry);
+    this.painters.set(htmlType, stack);
+    this.bump();
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      const current = this.painters.get(htmlType);
+      if (!current) return;
+      const index = current.findIndex((candidate) => candidate.token === entry.token);
+      if (index === -1) return;
+      const wasActive = index === current.length - 1;
+      current.splice(index, 1);
+      if (current.length === 0) this.painters.delete(htmlType);
+      if (wasActive) this.bump();
+    };
+  }
+  getActivePainter(htmlType) {
+    const stack = this.painters.get(htmlType);
+    return stack && stack.length > 0 ? stack[stack.length - 1]?.painter : void 0;
+  }
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  bump() {
+    this.canvasTypesCache = null;
+    this._version += 1;
+    for (const listener of [...this.listeners]) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+};
+function resolveHtmlRouting(el, registry, expectedCanvasTypes) {
+  const htmlType = el.htmlType;
+  if (htmlType === void 0) return "dom";
+  const expected = (registry?.canvasTypes.has(htmlType) ?? false) || (expectedCanvasTypes?.has(htmlType) ?? false);
+  if (!expected) return "dom";
+  return registry?.getActivePainter(htmlType) ? "canvas" : "missing";
+}
+
+// src/canvas/html-paint.ts
+function paintHtmlElement(el, painter, opts) {
+  const { ctx, zoom, target, onDiagnostic } = opts;
+  const { w, h } = el.size;
+  if (!(w > 0) || !(h > 0)) {
+    onDiagnostic?.({ kind: "degenerate-size", elementId: el.id, htmlType: el.htmlType, target });
+    return;
+  }
+  ctx.save();
+  try {
+    const rotation = opts.applyRotation === false ? 0 : el.rotation ?? 0;
+    if (rotation !== 0) {
+      ctx.translate(el.position.x + w / 2, el.position.y + h / 2);
+      ctx.rotate(rotation);
+      ctx.translate(-w / 2, -h / 2);
+    } else {
+      ctx.translate(el.position.x, el.position.y);
+    }
+    ctx.beginPath();
+    ctx.rect(0, 0, w, h);
+    ctx.clip();
+    painter({ ctx, element: el, size: { w, h }, zoom });
+  } catch (error) {
+    onDiagnostic?.({
+      kind: "painter-threw",
+      elementId: el.id,
+      htmlType: el.htmlType,
+      target,
+      error
+    });
+  } finally {
+    ctx.restore();
+  }
+}
+
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ElementRenderer = class {
@@ -4028,6 +4206,11 @@ var ElementRenderer = class {
   hexTileCacheKey = "";
   gridBoundsOverride = null;
   labelEditingId = null;
+  htmlPainters = null;
+  expectedCanvasTypes;
+  renderTarget = "screen";
+  diagnosticSink = null;
+  surfaceZoom = null;
   setStore(store) {
     this.store = store;
   }
@@ -4049,8 +4232,27 @@ var ElementRenderer = class {
   setLabelEditingId(id) {
     this.labelEditingId = id;
   }
+  /** Registry of canvas-backed html painters, plus any types declared canvas-routed
+   *  before a painter is registered (`expectedCanvasTypes`). Null clears routing back
+   *  to legacy DOM-only behavior. */
+  setHtmlPainters(registry, expected) {
+    this.htmlPainters = registry;
+    this.expectedCanvasTypes = expected;
+  }
+  setRenderTarget(target) {
+    this.renderTarget = target;
+  }
+  setDiagnosticSink(sink) {
+    this.diagnosticSink = sink;
+  }
+  /** Explicit zoom used for surfaces with no camera (minimap, export). Ignored for
+   *  the 'screen' target, which always reads the live camera zoom. */
+  setSurfaceZoom(zoom) {
+    this.surfaceZoom = zoom;
+  }
   isDomElement(element) {
-    return DOM_ELEMENT_TYPES.has(element.type);
+    if (element.type !== "html") return DOM_ELEMENT_TYPES.has(element.type);
+    return resolveHtmlRouting(element, this.htmlPainters, this.expectedCanvasTypes) === "dom";
   }
   renderCanvasElement(ctx, element) {
     switch (element.type) {
@@ -4086,7 +4288,37 @@ var ElementRenderer = class {
       case "template":
         renderTemplate(ctx, element, this.store);
         break;
+      case "html":
+        this.renderHtml(ctx, element);
+        break;
+    }
+  }
+  /** Only reached for canvas-routed html (isDomElement already sent 'dom'-routed
+   *  elements down the DOM sync branch instead). */
+  renderHtml(ctx, el) {
+    const routing = resolveHtmlRouting(el, this.htmlPainters, this.expectedCanvasTypes);
+    if (routing === "dom") return;
+    if (routing === "missing") {
+      this.diagnosticSink?.({
+        kind: "missing-painter",
+        elementId: el.id,
+        htmlType: el.htmlType,
+        target: this.renderTarget
+      });
+      return;
     }
+    const painter = this.htmlPainters?.getActivePainter(el.htmlType ?? "");
+    if (!painter) return;
+    paintHtmlElement(el, painter, {
+      ctx,
+      zoom: this.zoomForTarget(),
+      target: this.renderTarget,
+      onDiagnostic: this.diagnosticSink ?? void 0
+    });
+  }
+  zoomForTarget() {
+    if (this.renderTarget === "screen") return this.camera?.zoom ?? 1;
+    return this.surfaceZoom ?? 1;
   }
   renderGrid(ctx, grid) {
     const canvasSize = this.canvasSize;
@@ -4233,6 +4465,7 @@ function createHtmlElement(input) {
   if (input.interactive) el.interactive = input.interactive;
   if (input.htmlType) el.htmlType = input.htmlType;
   if (input.data) el.data = input.data;
+  if (input.rotation !== void 0) el.rotation = input.rotation;
   return el;
 }
 function createShape(input) {
@@ -4813,7 +5046,6 @@ var DEFAULT_PADDING = 8;
 var DEFAULT_DEBOUNCE_MS2 = 200;
 var DEFAULT_VIEWPORT_STROKE = "#3b82f6";
 var NEUTRAL = "rgba(100,116,139,0.6)";
-var DOM_FALLBACK_TYPES = /* @__PURE__ */ new Set(["note", "text", "html"]);
 function elementColor(el) {
   return "color" in el && typeof el.color === "string" ? el.color : NEUTRAL;
 }
@@ -4837,6 +5069,9 @@ var MinimapController = class {
     });
     this.renderer.setStore(viewport.store);
     this.renderer.setOnImageLoad(() => this.markSceneDirty());
+    this.htmlPainters = viewport.getHtmlPainters();
+    this.renderer.setHtmlPainters(this.htmlPainters);
+    this.renderer.setRenderTarget("minimap");
     this.applyCanvasSize();
     const onScene = () => this.markSceneDirty();
     this.unsubs.push(
@@ -4846,7 +5081,8 @@ var MinimapController = class {
       viewport.store.on("clear", onScene),
       viewport.layerManager.on("change", onScene),
       viewport.camera.onChange(() => this.onViewChanged()),
-      viewport.onResize(() => this.onViewChanged())
+      viewport.onResize(() => this.onViewChanged()),
+      this.htmlPainters.onChange(() => this.invalidateScene())
     );
     if (this.interactive) {
       canvas.style.touchAction = "none";
@@ -4870,6 +5106,10 @@ var MinimapController = class {
   requestFrame;
   cancelFrame;
   renderer = new ElementRenderer();
+  // Declared, not initialized here: a field initializer runs before parameter
+  // properties are assigned (ES2022 useDefineForClassFields), so it cannot
+  // read the `viewport` parameter. Assigned in the constructor body instead.
+  htmlPainters;
   scene = null;
   frameId = null;
   debounceTimer = null;
@@ -4889,6 +5129,23 @@ var MinimapController = class {
     if (this.disposed || this.frameId !== null) return;
     this.frameId = this.requestFrame(this.draw);
   }
+  /**
+   * Invalidates the cached scene bitmap in response to html-painter registry
+   * changes (a painter registering/unregistering, or an `expect` declaration
+   * changing) and schedules the same debounced rebuild `markSceneDirty` uses
+   * for every other invalidation source. Unlike those other sources — which
+   * deliberately keep compositing the OLD bitmap until the rebuild lands, so
+   * camera motion and content edits never stall on a render — painter
+   * availability has no "old bitmap is still valid" reading: an element that
+   * was falling back to a neutral fillRect (no painter yet) or a stale
+   * painter's output is not a safe thing to keep showing, so the cached
+   * bitmap is dropped immediately instead of composited a further time.
+   */
+  invalidateScene() {
+    if (this.disposed) return;
+    this.scene = null;
+    this.markSceneDirty();
+  }
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
@@ -4954,6 +5211,7 @@ var MinimapController = class {
     const dpr = this.dpr();
     const mapping = this.currentMapping();
     const transform = computeMinimapTransform(mapping, this.width, this.height, this.padding);
+    this.renderer.setSurfaceZoom(transform.scale);
     const sceneCanvas = document.createElement("canvas");
     sceneCanvas.width = Math.max(1, Math.round(this.width * dpr));
     sceneCanvas.height = Math.max(1, Math.round(this.height * dpr));
@@ -4991,7 +5249,7 @@ var MinimapController = class {
   }
   renderLayerElements(ctx, elements, t, dpr) {
     for (const el of elements) {
-      if (DOM_FALLBACK_TYPES.has(el.type)) {
+      if (this.renderer.isDomElement(el)) {
         const b = getElementBounds(el);
         if (!b) continue;
         const tl = worldToMini(t, { x: b.x, y: b.y });
@@ -6071,7 +6329,28 @@ async function exportImage(store, options = {}, layerManager) {
   assertExportSize(width, height, options);
   const imageCache = await loadImages(visibleElements, options);
   const htmlElements = visibleElements.filter((el) => el.type === "html");
-  const htmlSources = await renderHtmlElements(htmlElements, options);
+  const canvasRoutedIds = /* @__PURE__ */ new Set();
+  const domHtmlElements = [];
+  for (const el of htmlElements) {
+    const routing = resolveHtmlRouting(
+      el,
+      options.htmlPainters ?? null,
+      options.expectedCanvasTypes
+    );
+    if (routing === "missing") {
+      if (options.strictMissingCanvasHtml) {
+        throw new HtmlPainterMissingError(el.id, el.htmlType);
+      }
+      options.onHtmlError?.({ elementId: el.id, htmlType: el.htmlType, reason: "missing-painter" });
+      continue;
+    }
+    if (routing === "canvas") {
+      canvasRoutedIds.add(el.id);
+    } else {
+      domHtmlElements.push(el);
+    }
+  }
+  const htmlSources = await renderHtmlElements(domHtmlElements, options);
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -6083,6 +6362,14 @@ async function exportImage(store, options = {}, layerManager) {
   ctx.fillRect(bounds.x, bounds.y, bounds.w, bounds.h);
   const renderer = new ElementRenderer();
   renderer.setStore(store);
+  const onHtmlPaintDiagnostic = (d) => {
+    options.onHtmlError?.({
+      elementId: d.elementId,
+      htmlType: d.htmlType,
+      reason: d.kind,
+      cause: d.kind === "painter-threw" ? d.error : void 0
+    });
+  };
   const grids = [];
   const renderElement = (target, el) => {
     if (el.type === "note") {
@@ -6096,6 +6383,24 @@ async function exportImage(store, options = {}, layerManager) {
       return;
     }
     if (el.type === "html") {
+      if (canvasRoutedIds.has(el.id)) {
+        const painter = options.htmlPainters?.getActivePainter(el.htmlType ?? "");
+        if (!painter) {
+          options.onHtmlError?.({
+            elementId: el.id,
+            htmlType: el.htmlType,
+            reason: "missing-painter"
+          });
+          return;
+        }
+        paintHtmlElement(el, painter, {
+          ctx: target,
+          zoom: scale,
+          target: "export",
+          onDiagnostic: onHtmlPaintDiagnostic
+        });
+        return;
+      }
       const source = htmlSources.get(el.id);
       if (!source) return;
       const b = getElementBounds(el);
@@ -6490,8 +6795,36 @@ async function exportSvg(store, options = {}, layerManager) {
   const imageCache = await loadImages(remoteImages, options);
   const imageDataUris = encodeImages(visibleElements, imageCache, rasterScale, options);
   const htmlElements = visibleElements.filter((el) => el.type === "html");
-  const htmlSources = await renderHtmlElements(htmlElements, options);
-  const htmlDataUris = encodeHtmlElements(htmlElements, htmlSources, rasterScale, options);
+  const canvasRoutedElements = [];
+  const domHtmlElements = [];
+  for (const el of htmlElements) {
+    const routing = resolveHtmlRouting(
+      el,
+      options.htmlPainters ?? null,
+      options.expectedCanvasTypes
+    );
+    if (routing === "missing") {
+      if (options.strictMissingCanvasHtml) {
+        throw new HtmlPainterMissingError(el.id, el.htmlType);
+      }
+      options.onHtmlError?.({ elementId: el.id, htmlType: el.htmlType, reason: "missing-painter" });
+      continue;
+    }
+    if (routing === "canvas") {
+      canvasRoutedElements.push(el);
+    } else {
+      domHtmlElements.push(el);
+    }
+  }
+  const htmlSources = await renderHtmlElements(domHtmlElements, options);
+  const htmlDataUris = encodeHtmlElements(domHtmlElements, htmlSources, rasterScale, options);
+  const canvasHtmlDataUris = rasterizeCanvasRoutedHtml(
+    canvasRoutedElements,
+    options.htmlPainters,
+    rasterScale,
+    options
+  );
+  for (const [id, uri] of canvasHtmlDataUris) htmlDataUris.set(id, uri);
   const grids = visibleElements.filter((el) => el.type === "grid");
   const firstGrid = grids[0];
   let body = "";
@@ -6546,6 +6879,81 @@ function emitElement(el, imageDataUris, htmlDataUris, rasterScale, firstGrid, st
       return "";
   }
 }
+function rasterizeCanvasRoutedHtml(elements, registry, rasterScale, options) {
+  const encoded = /* @__PURE__ */ new Map();
+  const onDiagnostic = (d) => {
+    options.onHtmlError?.({
+      elementId: d.elementId,
+      htmlType: d.htmlType,
+      reason: d.kind,
+      cause: d.kind === "painter-threw" ? d.error : void 0
+    });
+  };
+  for (const element of elements) {
+    const painter = registry?.getActivePainter(element.htmlType ?? "");
+    if (!painter) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "missing-painter"
+      });
+      continue;
+    }
+    if (typeof document === "undefined") {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    const width = Math.max(1, Math.ceil(element.size.w * rasterScale));
+    const height = Math.max(1, Math.ceil(element.size.h * rasterScale));
+    assertExportSize(width, height, options);
+    const off = document.createElement("canvas");
+    off.width = width;
+    off.height = height;
+    const octx = off.getContext("2d");
+    if (!octx) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    octx.scale(rasterScale, rasterScale);
+    octx.translate(-element.position.x, -element.position.y);
+    paintHtmlElement(element, painter, {
+      ctx: octx,
+      zoom: rasterScale,
+      target: "export",
+      applyRotation: false,
+      // withRotationSvg wraps the emitted <image>; rotating here too would double it
+      onDiagnostic
+    });
+    try {
+      const dataUri = off.toDataURL("image/png");
+      if (dataUri.startsWith("data:")) {
+        encoded.set(element.id, dataUri);
+      } else {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "encode"
+        });
+      }
+    } catch (cause) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode",
+        cause
+      });
+    }
+  }
+  return encoded;
+}
 function encodeHtmlElements(elements, sources, rasterScale, options) {
   const encoded = /* @__PURE__ */ new Map();
   for (const element of elements) {
@@ -6891,6 +7299,10 @@ var DomNodeManager = class {
   domNodes = /* @__PURE__ */ new Map();
   strata = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
+  /** Elements whose node carries host-supplied content (see `markHostOwnedContent`). */
+  hostOwnedContent = /* @__PURE__ */ new Set();
+  /** Host-owned nodes removed from the DOM but kept alive for a later remount. */
+  preservedNodes = /* @__PURE__ */ new Map();
   domLayer;
   onEditRequest;
   isEditingElement;
@@ -6915,12 +7327,34 @@ var DomNodeManager = class {
   }
   storeHtmlContent(elementId, dom) {
     this.htmlContent.set(elementId, dom);
+    this.lastSyncedVersion.delete(elementId);
+  }
+  /**
+   * Marks an element's node as carrying content the HOST mounted into it directly
+   * (`ViewportOptions.onHtmlElementMount`). That content is never recorded in
+   * `htmlContent` — the host appends straight into the node — so a detach would
+   * destroy it and no remount could ever bring it back. Preserving the node itself
+   * (rather than a guessed-at child) keeps arbitrary subtrees, host-attached
+   * listeners, and the host's own reference to the node all valid.
+   *
+   * Callers mark UNCONDITIONALLY, without inspecting the node — a host that only attaches
+   * listeners or styles owns its node just as much as one that appended children, and
+   * there is no way to tell those apart from the outside. Two consequences follow, both
+   * accepted: a node the host never populated can still round-trip back into the DOM (the
+   * documented exception to "never had content -> never remount", reachable only via
+   * `onHtmlElementMount`), and one detached `<div>` is retained per such element for its
+   * lifetime.
+   */
+  markHostOwnedContent(elementId) {
+    this.hostOwnedContent.add(elementId);
   }
   hasContent(elementId) {
     return this.htmlContent.has(elementId);
   }
   resetHtmlContent(elementId) {
     this.htmlContent.delete(elementId);
+    this.hostOwnedContent.delete(elementId);
+    this.preservedNodes.delete(elementId);
     this.lastSyncedVersion.delete(elementId);
     this.lastSyncedZIndex.delete(elementId);
     this.lastSyncedOpacity.delete(elementId);
@@ -6934,12 +7368,18 @@ var DomNodeManager = class {
   syncDomNode(element, zIndex = 0, opacity = 1) {
     let node = this.domNodes.get(element.id);
     if (!node) {
-      node = document.createElement("div");
-      node.dataset["elementId"] = element.id;
-      Object.assign(node.style, {
-        position: "absolute",
-        pointerEvents: "auto"
-      });
+      const preserved = this.preservedNodes.get(element.id);
+      if (preserved) {
+        this.preservedNodes.delete(element.id);
+        node = preserved;
+      } else {
+        node = document.createElement("div");
+        node.dataset["elementId"] = element.id;
+        Object.assign(node.style, {
+          position: "absolute",
+          pointerEvents: "auto"
+        });
+      }
       this.getStratum(zIndex).appendChild(node);
       this.domNodes.set(element.id, node);
     } else if (this.getVersion) {
@@ -6988,18 +7428,51 @@ var DomNodeManager = class {
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
+    this.hostOwnedContent.delete(id);
+    this.preservedNodes.delete(id);
+    this.detachNodeElement(id);
+  }
+  /** Removes the node but KEEPS htmlContent, so a later re-mount restores the original embed.
+   *  The registry factory that produces embed content only runs in loadState (G1), so dropping
+   *  content here would be unrecoverable. For a host-owned node there is no recorded content at
+   *  all, so the node ITSELF is kept alive off-DOM and reattached by `syncDomNode`.
+   *  Use `removeDomNode` when the element itself is gone. */
+  detachDomNode(id) {
+    if (this.hostOwnedContent.has(id)) {
+      const node = this.domNodes.get(id);
+      if (node) this.preservedNodes.set(id, node);
+    }
+    this.detachNodeElement(id);
+  }
+  /** Shared by `removeDomNode` and `detachDomNode`: clears dirty-tracking caches, removes the
+   *  node from the DOM, and cleans up its stratum if now empty. Does NOT touch `htmlContent` —
+   *  that distinction is each caller's own responsibility. */
+  detachNodeElement(id) {
     this.lastSyncedVersion.delete(id);
     this.lastSyncedZIndex.delete(id);
     this.lastSyncedOpacity.delete(id);
     const node = this.domNodes.get(id);
-    if (node) {
-      const stratum = node.parentElement;
-      node.remove();
-      this.domNodes.delete(id);
-      if (stratum?.childElementCount === 0) {
-        const order = Number(stratum.dataset["paintOrder"]);
-        stratum.remove();
-        this.strata.delete(order);
+    if (!node) return;
+    const stratum = node.parentElement;
+    node.remove();
+    this.domNodes.delete(id);
+    if (stratum?.childElementCount === 0) {
+      const order = Number(stratum.dataset["paintOrder"]);
+      stratum.remove();
+      this.strata.delete(order);
+    }
+  }
+  /** Reconciles BOTH directions synchronously. Canvas/missing routing detaches the node
+   *  (content preserved); dom routing remounts preserved content immediately, so a painter
+   *  unregistration does not wait for an unrelated render pass. */
+  reconcileHtmlRouting(store, resolve) {
+    for (const el of store.getElementsByType("html")) {
+      if (resolve(el) !== "dom") {
+        this.detachDomNode(el.id);
+        continue;
+      }
+      if ((this.htmlContent.has(el.id) || this.preservedNodes.has(el.id)) && !this.domNodes.has(el.id)) {
+        this.syncDomNode(el);
       }
     }
   }
@@ -7007,6 +7480,8 @@ var DomNodeManager = class {
     this.domNodes.forEach((node) => node.remove());
     this.domNodes.clear();
     this.htmlContent.clear();
+    this.hostOwnedContent.clear();
+    this.preservedNodes.clear();
     this.lastSyncedVersion.clear();
     this.lastSyncedZIndex.clear();
     this.lastSyncedOpacity.clear();
@@ -7079,8 +7554,8 @@ var DomNodeManager = class {
       }
     }
     if (element.type === "html") {
+      const content = this.htmlContent.get(element.id);
       if (!node.dataset["initialized"]) {
-        const content = this.htmlContent.get(element.id);
         if (content) {
           node.dataset["initialized"] = "true";
           Object.assign(node.style, {
@@ -7088,6 +7563,8 @@ var DomNodeManager = class {
             pointerEvents: element.interactive ? "auto" : "none"
           });
           node.appendChild(content);
+        } else {
+          node.style.pointerEvents = "none";
         }
       } else {
         node.style.pointerEvents = element.interactive ? "auto" : "none";
@@ -7222,6 +7699,8 @@ var RenderLoop = class {
   gridCacheCanvas = null;
   gridCacheCtx = null;
   lastGridRefs = [];
+  htmlScratchCanvas = null;
+  htmlScratchCtx = null;
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -7332,6 +7811,117 @@ var RenderLoop = class {
     }
     this.gridCacheCtx = this.gridCacheCanvas.getContext("2d");
   }
+  /**
+   * Lazily allocated, and only ever touched by the translucent-layer html branch below.
+   * Grow-only: the branch runs once per element per frame, and reassigning `width` or
+   * `height` reallocates the backing store, so shrinking to each element in turn would
+   * thrash. The requested size is always clipped to the visible canvas by
+   * `htmlScratchRect`, so this stays bounded by the canvas itself.
+   */
+  ensureHtmlScratch(w, h) {
+    if (this.htmlScratchCanvas === null || this.htmlScratchCtx === null) {
+      if (typeof OffscreenCanvas !== "undefined") {
+        this.htmlScratchCanvas = new OffscreenCanvas(w, h);
+      } else if (typeof document !== "undefined") {
+        this.htmlScratchCanvas = document.createElement("canvas");
+      } else {
+        return null;
+      }
+      this.htmlScratchCtx = this.htmlScratchCanvas.getContext(
+        "2d"
+      );
+      if (this.htmlScratchCtx === null) {
+        this.htmlScratchCanvas = null;
+        return null;
+      }
+    }
+    if (this.htmlScratchCanvas.width < w) this.htmlScratchCanvas.width = w;
+    if (this.htmlScratchCanvas.height < h) this.htmlScratchCanvas.height = h;
+    return this.htmlScratchCtx;
+  }
+  /**
+   * The device-pixel footprint an element occupies on the hybrid surface: its world
+   * bounds mapped through the same `scale(dpr) -> translate(cam) -> scale(zoom)` chain
+   * the hybrid context uses, snapped OUT to whole pixels (so the clip edge's antialiased
+   * pixel is included) and intersected with the surface.
+   *
+   * Null when nothing of the element lands on the surface. That includes the case where
+   * the surface has no pixels at all: a host hiding the viewport (`display: none`) drives
+   * `canvasEl.width` to 0 via `syncCanvasSize`, culling does not go degenerate with it,
+   * and a zero-dimension canvas throws `InvalidStateError` when used as a `drawImage`
+   * SOURCE — which would escape `render()` and kill the frame loop permanently.
+   * Non-finite bounds fail the same `>= 1` test and are rejected here too.
+   */
+  htmlScratchRect(bounds, dpr) {
+    let left = 0;
+    let top = 0;
+    let right = this.canvasEl.width;
+    let bottom = this.canvasEl.height;
+    if (bounds) {
+      const zoom = this.camera.zoom;
+      const camX = this.camera.position.x;
+      const camY = this.camera.position.y;
+      left = Math.max(left, Math.floor((bounds.x * zoom + camX) * dpr));
+      top = Math.max(top, Math.floor((bounds.y * zoom + camY) * dpr));
+      right = Math.min(right, Math.ceil(((bounds.x + bounds.w) * zoom + camX) * dpr));
+      bottom = Math.min(bottom, Math.ceil(((bounds.y + bounds.h) * zoom + camY) * dpr));
+    }
+    const w = right - left;
+    const h = bottom - top;
+    if (!(w >= 1) || !(h >= 1)) return null;
+    return { x: left, y: top, w, h };
+  }
+  /**
+   * Draws one canvas-routed html element on the hybrid stratum with the layer-opacity
+   * boundary the painter contract requires: paint at `globalAlpha === 1` into a scratch
+   * surface, then composite that raster at the layer's opacity. Mirrors `exportImage`'s
+   * per-layer temp canvas and the minimap's layer composite.
+   *
+   * The scratch covers only the element's own device-pixel rect, the way
+   * `rasterizeCanvasRoutedHtml` sizes its offscreen to the element rather than the export
+   * bounds. That is exact rather than approximate because `paintHtmlElement` clips every
+   * painter to the element's (rotated) rect, so nothing can land outside those bounds.
+   * The offset is whole device pixels and the blit is 1:1, so the element occupies
+   * exactly the pixels a full-canvas scratch would have given it.
+   */
+  paintHybridHtmlAtLayerOpacity(hybridCtx, element, elementBounds, layerOpacity, dpr) {
+    const rect = this.htmlScratchRect(elementBounds, dpr);
+    if (!rect) return;
+    const scratchCtx = this.ensureHtmlScratch(rect.w, rect.h);
+    const scratchCanvas = this.htmlScratchCanvas;
+    if (!scratchCtx || !scratchCanvas) {
+      hybridCtx.save();
+      hybridCtx.globalAlpha = layerOpacity;
+      this.renderer.renderCanvasElement(hybridCtx, element);
+      hybridCtx.restore();
+      return;
+    }
+    scratchCtx.setTransform(1, 0, 0, 1, 0, 0);
+    scratchCtx.clearRect(0, 0, rect.w, rect.h);
+    scratchCtx.save();
+    scratchCtx.globalAlpha = 1;
+    scratchCtx.translate(-rect.x, -rect.y);
+    scratchCtx.scale(dpr, dpr);
+    scratchCtx.translate(this.camera.position.x, this.camera.position.y);
+    scratchCtx.scale(this.camera.zoom, this.camera.zoom);
+    this.renderer.renderCanvasElement(scratchCtx, element);
+    scratchCtx.restore();
+    hybridCtx.save();
+    hybridCtx.setTransform(1, 0, 0, 1, 0, 0);
+    hybridCtx.globalAlpha = layerOpacity;
+    hybridCtx.drawImage(
+      scratchCanvas,
+      0,
+      0,
+      rect.w,
+      rect.h,
+      rect.x,
+      rect.y,
+      rect.w,
+      rect.h
+    );
+    hybridCtx.restore();
+  }
   render() {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
@@ -7536,8 +8126,13 @@ var RenderLoop = class {
       for (const element of elements) {
         const elBounds = getElementVisualBounds(element);
         if (elBounds && !boundsIntersect(elBounds, cullingRect)) continue;
+        const layerOpacity = this.layerManager.getLayer?.(element.layerId)?.opacity ?? 1;
+        if (element.type === "html" && layerOpacity < 1) {
+          this.paintHybridHtmlAtLayerOpacity(hybridCtx, element, elBounds, layerOpacity, dpr);
+          continue;
+        }
         hybridCtx.save();
-        hybridCtx.globalAlpha = this.layerManager.getLayer?.(element.layerId)?.opacity ?? 1;
+        hybridCtx.globalAlpha = layerOpacity;
         this.renderer.renderCanvasElement(hybridCtx, element);
         hybridCtx.restore();
       }
@@ -7573,6 +8168,28 @@ var RenderLoop = class {
   }
 };
 
+// src/canvas/html-paint-diagnostics.ts
+var HtmlPaintDiagnosticDeduper = class {
+  constructor(sink) {
+    this.sink = sink;
+  }
+  seen = /* @__PURE__ */ new Map();
+  emit(diagnostic, keyParts) {
+    const key = `${diagnostic.target}|${diagnostic.kind}|${keyParts.registryVersion}|${keyParts.elementVersion}`;
+    const forElement = this.seen.get(diagnostic.elementId) ?? /* @__PURE__ */ new Set();
+    if (forElement.has(key)) return;
+    forElement.add(key);
+    this.seen.set(diagnostic.elementId, forElement);
+    this.sink(diagnostic);
+  }
+  forget(elementId) {
+    this.seen.delete(elementId);
+  }
+  reset() {
+    this.seen.clear();
+  }
+};
+
 // src/canvas/layer-cache.ts
 function createOffscreenCanvas(width, height) {
   if (typeof OffscreenCanvas !== "undefined") {
@@ -8297,59 +8914,915 @@ var ViewportInteractions = class {
   };
 };
 
-// src/canvas/viewport.ts
-var EMPTY_IDS = [];
-function noop() {
+// src/elements/stroke-hit.ts
+function hitTestStroke(stroke, point, radius) {
+  const bounds = getElementBounds(stroke);
+  if (!bounds) return false;
+  if (point.x < bounds.x - radius || point.x > bounds.x + bounds.w + radius || point.y < bounds.y - radius || point.y > bounds.y + bounds.h + radius) {
+    return false;
+  }
+  const radiusSq = radius * radius;
+  const local = { x: point.x - stroke.position.x, y: point.y - stroke.position.y };
+  const { segments } = getStrokeRenderData(stroke);
+  if (segments.length === 0) {
+    const p = stroke.points[0];
+    if (!p) return false;
+    const dx = p.x - local.x;
+    const dy = p.y - local.y;
+    return dx * dx + dy * dy <= radiusSq;
+  }
+  for (const seg of segments) {
+    if (distSqToSegment(local, seg.start, seg.end) <= radiusSq) return true;
+  }
+  return false;
 }
-var Viewport = class _Viewport {
-  constructor(container, options = {}) {
-    this.container = container;
-    this.camera = new Camera(options.camera);
-    this.background = new Background(options.background);
-    this._gridSize = options.background?.spacing ?? 24;
-    this.store = new ElementStore();
-    this.layerManager = new LayerManager(this.store);
-    this.toolManager = new ToolManager();
-    this.unsubToolRegister = this.toolManager.onRegister((tool) => {
-      if (_Viewport.isSelectionSource(tool)) this.attachSelectionSource(tool);
-    });
-    const existingSelect = this.getSelectTool();
-    if (existingSelect && _Viewport.isSelectionSource(existingSelect)) {
-      this.attachSelectionSource(existingSelect);
-    }
-    this.renderer = new ElementRenderer();
-    this.renderer.setStore(this.store);
-    this.renderer.setCamera(this.camera);
-    this.renderer.setOnImageLoad(() => {
-      this.renderLoop.markAllLayersDirty();
-      this.requestRender();
-    });
-    this.renderer.setOnImageError((src, cause) => {
-      const elementIds = [];
-      for (const el of this.store.getAll()) {
-        if (el.type === "image" && el.src === src) elementIds.push(el.id);
-      }
-      if (options.onImageError) {
-        options.onImageError({ src, elementIds, cause });
-      } else {
-        console.warn(`[fieldnotes] image failed to load: ${src}`);
-      }
-    });
-    this.noteEditor = new NoteEditor({
-      fontSizePresets: options.fontSizePresets,
-      toolbar: options.toolbar,
-      placeholder: options.placeholder
-    });
-    this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
-    this.noteEditor.setOnInput((id) => this.interactions.liveFitHeight(id));
-    this.arrowLabelEditor = new ArrowLabelEditor();
-    this.noteEditor.setHistoryHooks(
-      () => this.historyRecorder.begin(),
-      () => this.historyRecorder.commit()
-    );
-    this.onHtmlElementMount = options.onHtmlElementMount;
-    this.dropHandler = options.onDrop;
-    this.history = new HistoryStack();
+
+// src/tools/arrow-handles.ts
+var BIND_THRESHOLD = 20;
+var HANDLE_RADIUS = 5;
+var HANDLE_HIT_PADDING = 4;
+var ARROW_HANDLE_CURSORS = {
+  start: "crosshair",
+  end: "crosshair",
+  mid: "grab"
+};
+function getArrowHandleCursor(handle, active) {
+  if (handle === "mid" && active) return "grabbing";
+  return ARROW_HANDLE_CURSORS[handle];
+}
+function getArrowHandlePositions(arrow) {
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  return [
+    ["start", arrow.from],
+    ["mid", mid],
+    ["end", arrow.to]
+  ];
+}
+function hitTestArrowHandles(world, selectedIds, ctx) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const hitRadius = (HANDLE_RADIUS + HANDLE_HIT_PADDING) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false))
+      continue;
+    const handles = getArrowHandlePositions(el);
+    for (const [handle, pos] of handles) {
+      const dx = world.x - pos.x;
+      const dy = world.y - pos.y;
+      if (dx * dx + dy * dy <= hitRadius * hitRadius) {
+        return { elementId: id, handle };
+      }
+    }
+  }
+  return null;
+}
+function applyArrowHandleDrag(handle, elementId, world, ctx) {
+  const el = ctx.store.getById(elementId);
+  if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false)) return;
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
+  switch (handle) {
+    case "start": {
+      const excludeId = el.toBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
+      if (target) {
+        const center2 = getElementCenter(target);
+        ctx.store.update(elementId, {
+          from: center2,
+          position: center2,
+          fromBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          from: { x: world.x, y: world.y },
+          position: { x: world.x, y: world.y },
+          fromBinding: void 0
+        });
+      }
+      break;
+    }
+    case "end": {
+      const excludeId = el.fromBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
+      if (target) {
+        const center2 = getElementCenter(target);
+        ctx.store.update(elementId, {
+          to: center2,
+          toBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          to: { x: world.x, y: world.y },
+          toBinding: void 0
+        });
+      }
+      break;
+    }
+    case "mid": {
+      const bend = getBendFromPoint(el.from, el.to, world);
+      ctx.store.update(elementId, { bend });
+      break;
+    }
+  }
+  ctx.requestRender();
+}
+function getArrowHandleDragTarget(handle, elementId, world, ctx) {
+  if (handle === "mid") return null;
+  const el = ctx.store.getById(elementId);
+  if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false)) {
+    return null;
+  }
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
+  const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
+  if (!target) return null;
+  return getElementBounds(target);
+}
+function renderArrowHandles(canvasCtx, arrow, zoom) {
+  const radius = HANDLE_RADIUS / zoom;
+  const handles = getArrowHandlePositions(arrow);
+  canvasCtx.setLineDash([]);
+  canvasCtx.lineWidth = 1.5 / zoom;
+  for (const [handle, pos] of handles) {
+    canvasCtx.fillStyle = handle === "mid" ? "#2196F3" : "#ffffff";
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.beginPath();
+    canvasCtx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
+    canvasCtx.fill();
+    canvasCtx.stroke();
+  }
+}
+function renderArrowHoverHandle(canvasCtx, arrow, zoom) {
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  const radius = HANDLE_RADIUS / zoom;
+  canvasCtx.fillStyle = "#2196F3";
+  canvasCtx.strokeStyle = "#2196F3";
+  canvasCtx.lineWidth = 1.5 / zoom;
+  canvasCtx.beginPath();
+  canvasCtx.arc(mid.x, mid.y, radius, 0, Math.PI * 2);
+  canvasCtx.fill();
+  canvasCtx.stroke();
+}
+
+// src/tools/select-overlay.ts
+var HANDLE_SIZE = 8;
+var HANDLE_HIT_PADDING2 = 4;
+var SELECTION_PAD = 4;
+var ROTATE_HANDLE_OFFSET = 24;
+var ROTATABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape", "stroke"]);
+var HANDLE_CURSORS = {
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize"
+};
+function getOverlayLayout(el, zoom) {
+  const bounds = getElementBounds(el);
+  if (!bounds) return null;
+  const angle = el.rotation ?? 0;
+  const pad = SELECTION_PAD / zoom;
+  const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+  const raw = [
+    ["nw", { x: bounds.x - pad, y: bounds.y - pad }],
+    ["ne", { x: bounds.x + bounds.w + pad, y: bounds.y - pad }],
+    ["sw", { x: bounds.x - pad, y: bounds.y + bounds.h + pad }],
+    ["se", { x: bounds.x + bounds.w + pad, y: bounds.y + bounds.h + pad }]
+  ];
+  const corners = raw.map(
+    ([h, p]) => [h, rotatePoint(p, center2, angle)]
+  );
+  const topMid = { x: center2.x, y: bounds.y - pad - ROTATE_HANDLE_OFFSET / zoom };
+  const rotateHandle = rotatePoint(topMid, center2, angle);
+  return { center: center2, corners, rotateHandle, angle };
+}
+function templateAimKnob(el, zoom) {
+  if (el.type !== "template") return null;
+  if (el.templateShape !== "cone" && el.templateShape !== "line" && el.templateShape !== "rectangle")
+    return null;
+  const gap = ROTATE_HANDLE_OFFSET / zoom;
+  const dist = el.radius + gap;
+  const origin = el.position;
+  return {
+    origin,
+    knob: {
+      x: origin.x + dist * Math.cos(el.angle),
+      y: origin.y + dist * Math.sin(el.angle)
+    }
+  };
+}
+function getHandlePositions(bounds) {
+  return [
+    ["nw", { x: bounds.x, y: bounds.y }],
+    ["ne", { x: bounds.x + bounds.w, y: bounds.y }],
+    ["sw", { x: bounds.x, y: bounds.y + bounds.h }],
+    ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
+  ];
+}
+function topMidpoint(layout) {
+  const nw = layout.corners.find(([h]) => h === "nw")?.[1] ?? { x: 0, y: 0 };
+  const ne = layout.corners.find(([h]) => h === "ne")?.[1] ?? { x: 0, y: 0 };
+  return { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
+}
+function drawLockBadge(ctx, at, zoom) {
+  const r = 9 / zoom;
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 1.5 / zoom;
+  ctx.stroke();
+  const bw = 8 / zoom;
+  const bh = 6 / zoom;
+  ctx.fillStyle = "#2196F3";
+  ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
+  ctx.beginPath();
+  ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
+  ctx.lineWidth = 1.4 / zoom;
+  ctx.stroke();
+  ctx.restore();
+}
+function renderMarquee(ctx, rect) {
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.fillStyle = "rgba(33, 150, 243, 0.08)";
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+  ctx.restore();
+}
+function renderBindingHighlights(ctx, arrow, zoom, store) {
+  if (!arrow.fromBinding && !arrow.toBinding) return;
+  const pad = SELECTION_PAD / zoom;
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 2 / zoom;
+  ctx.setLineDash([]);
+  const drawn = /* @__PURE__ */ new Set();
+  for (const binding of [arrow.fromBinding, arrow.toBinding]) {
+    if (!binding || drawn.has(binding.elementId)) continue;
+    drawn.add(binding.elementId);
+    const target = store.getById(binding.elementId);
+    if (!target) continue;
+    const bounds = getElementBounds(target);
+    if (!bounds) continue;
+    ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+  }
+  ctx.restore();
+}
+function renderSelectionBoxes(ctx, p) {
+  if (p.selectedIds.length === 0) return;
+  const zoom = p.zoom;
+  const handleWorldSize = HANDLE_SIZE / zoom;
+  ctx.save();
+  ctx.strokeStyle = "#2196F3";
+  ctx.lineWidth = 1.5 / zoom;
+  ctx.setLineDash([4 / zoom, 4 / zoom]);
+  for (const id of p.selectedIds) {
+    const el = p.store.getById(id);
+    if (!el) continue;
+    const locked = el.locked || (p.isLayerLocked?.(el.layerId) ?? false);
+    if (el.type === "arrow") {
+      if (!locked) renderArrowHandles(ctx, el, zoom);
+      renderBindingHighlights(ctx, el, zoom, p.store);
+      continue;
+    }
+    if (el.type === "shape" && el.shape === "line") {
+      if (!locked) {
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        const r = handleWorldSize / 2;
+        for (const pt of lineEndpoints(el)) {
+          ctx.beginPath();
+          ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.stroke();
+        }
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+      continue;
+    }
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const layout = getOverlayLayout(el, zoom);
+    if (!layout) continue;
+    const pad = SELECTION_PAD / zoom;
+    if (layout.angle === 0) {
+      ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+    } else {
+      const ordered = ["nw", "ne", "se", "sw"].map((h) => layout.corners.find(([c]) => c === h)?.[1]).filter((pp) => !!pp);
+      const [p0, ...others] = ordered;
+      if (p0) {
+        ctx.beginPath();
+        ctx.moveTo(p0.x, p0.y);
+        for (const pp of others) ctx.lineTo(pp.x, pp.y);
+        ctx.closePath();
+        ctx.stroke();
+      }
+    }
+    if (!el.locked) {
+      if ("size" in el) {
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        const corners = layout.angle === 0 ? getHandlePositions(bounds) : layout.corners;
+        for (const [, pos] of corners) {
+          ctx.fillRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          ctx.strokeRect(
+            pos.x - handleWorldSize / 2,
+            pos.y - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      } else if (el.type === "template") {
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        if (el.templateShape === "rectangle") {
+          if (p.selectedIds.length === 1) {
+            const cos = Math.cos(el.angle);
+            const sin = Math.sin(el.angle);
+            const halfW = (el.width ?? 0) / 2;
+            const pts = [
+              [el.position.x + el.radius * cos, el.position.y + el.radius * sin],
+              [
+                el.position.x + el.radius / 2 * cos + halfW * -sin,
+                el.position.y + el.radius / 2 * sin + halfW * cos
+              ]
+            ];
+            for (const [hx, hy] of pts) {
+              ctx.fillRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+              ctx.strokeRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+            }
+          }
+        } else {
+          const hx = bounds.x + bounds.w;
+          const hy = bounds.y + bounds.h;
+          ctx.fillRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          ctx.strokeRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line" || el.templateShape === "rectangle")) {
+          const aim = templateAimKnob(el, zoom);
+          if (aim) {
+            ctx.beginPath();
+            ctx.moveTo(aim.origin.x, aim.origin.y);
+            ctx.lineTo(aim.knob.x, aim.knob.y);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = "#ffffff";
+            ctx.beginPath();
+            ctx.arc(aim.knob.x, aim.knob.y, handleWorldSize / 2, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.setLineDash([4 / zoom, 4 / zoom]);
+          }
+        }
+      }
+      if (p.selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
+        const stemStart = topMidpoint(layout);
+        const stemEnd = layout.rotateHandle;
+        ctx.beginPath();
+        ctx.moveTo(stemStart.x, stemStart.y);
+        ctx.lineTo(stemEnd.x, stemEnd.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.setLineDash([4 / zoom, 4 / zoom]);
+      }
+    }
+    if (el.locked) {
+      const ne = layout.corners.find(([h]) => h === "ne")?.[1];
+      if (ne) drawLockBadge(ctx, ne, zoom);
+    }
+  }
+  ctx.restore();
+}
+function renderGuideLines(ctx, p) {
+  const zoom = p.zoom;
+  const rect = p.rect;
+  ctx.save();
+  ctx.strokeStyle = "#FF4081";
+  ctx.lineWidth = 1 / zoom;
+  ctx.setLineDash([]);
+  for (const g of p.guides) {
+    ctx.beginPath();
+    if (g.axis === "x") {
+      const y0 = rect ? rect.y : p.currentWorld.y - 1e5;
+      const y1 = rect ? rect.y + rect.h : p.currentWorld.y + 1e5;
+      ctx.moveTo(g.position, y0);
+      ctx.lineTo(g.position, y1);
+    } else {
+      const x0 = rect ? rect.x : p.currentWorld.x - 1e5;
+      const x1 = rect ? rect.x + rect.w : p.currentWorld.x + 1e5;
+      ctx.moveTo(x0, g.position);
+      ctx.lineTo(x1, g.position);
+    }
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// src/tools/select-hit.ts
+function hitTest(world, ctx) {
+  const r = 10;
+  const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
+  for (const el of candidates) {
+    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+    if (el.type === "grid") continue;
+    if (isInsideBounds(world, el)) return el;
+  }
+  return null;
+}
+function isInsideBounds(point, el) {
+  if (el.type === "grid") return false;
+  const angle = el.rotation ?? 0;
+  if (angle !== 0) {
+    const b = getElementBounds(el);
+    if (b) {
+      point = rotatePoint(point, { x: b.x + b.w / 2, y: b.y + b.h / 2 }, -angle);
+    }
+  }
+  if (el.type === "shape" && el.shape === "line") {
+    const [a, b] = lineEndpoints(el);
+    const threshold = Math.max(el.strokeWidth / 2, 6);
+    return distSqToSegment(point, a, b) <= threshold * threshold;
+  }
+  if ("size" in el) {
+    const s = el.size;
+    return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
+  }
+  if (el.type === "stroke") {
+    return hitTestStroke(el, point, 10);
+  }
+  if (el.type === "arrow") {
+    return isNearBezier(point, el.from, el.to, el.bend, 10);
+  }
+  if (el.type === "template") {
+    const bounds = getElementBounds(el);
+    if (!bounds) return false;
+    return point.x >= bounds.x && point.x <= bounds.x + bounds.w && point.y >= bounds.y && point.y <= bounds.y + bounds.h;
+  }
+  return false;
+}
+function hitTestResizeHandle(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || !("size" in el)) continue;
+    if (el.locked) continue;
+    if (el.type === "shape" && el.shape === "line") continue;
+    const layout = getOverlayLayout(el, zoom);
+    if (!layout) continue;
+    for (const [handle, pos] of layout.corners) {
+      if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
+        return { elementId: id, handle };
+      }
+    }
+  }
+  return null;
+}
+function hitTestRotateHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || !ROTATABLE_TYPES.has(el.type)) return null;
+  const layout = getOverlayLayout(el, ctx.camera.zoom);
+  if (!layout) return null;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+  const dx = world.x - layout.rotateHandle.x;
+  const dy = world.y - layout.rotateHandle.y;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestLineHandles(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const r2 = r * r;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "shape" || el.shape !== "line" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false))
+      continue;
+    const [a, b] = lineEndpoints(el);
+    if ((world.x - a.x) ** 2 + (world.y - a.y) ** 2 <= r2) return { elementId: id, fixed: b };
+    if ((world.x - b.x) ** 2 + (world.y - b.y) ** 2 <= r2) return { elementId: id, fixed: a };
+  }
+  return null;
+}
+function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
+  if (selectedIds.length === 0) return null;
+  const zoom = ctx.camera.zoom;
+  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  for (const id of selectedIds) {
+    const el = ctx.store.getById(id);
+    if (!el || el.type !== "template") continue;
+    if (el.templateShape === "rectangle") continue;
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const hx = bounds.x + bounds.w;
+    const hy = bounds.y + bounds.h;
+    if (Math.abs(world.x - hx) <= handleHalf && Math.abs(world.y - hy) <= handleHalf) {
+      return id;
+    }
+  }
+  return null;
+}
+function hitTestTemplateAimHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked) return null;
+  const knob = templateAimKnob(el, ctx.camera.zoom);
+  if (!knob) return null;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+  const dx = world.x - knob.knob.x;
+  const dy = world.y - knob.knob.y;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestRectangleLengthHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const hx = el.position.x + el.radius * Math.cos(el.angle);
+  const hy = el.position.y + el.radius * Math.sin(el.angle);
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestRectangleWidthHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  const halfW = (el.width ?? 0) / 2;
+  const hx = el.position.x + el.radius / 2 * cos + halfW * -sin;
+  const hy = el.position.y + el.radius / 2 * sin + halfW * cos;
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function findElementsInRect(marquee, ctx) {
+  const candidates = ctx.store.queryRect(marquee);
+  const ids = [];
+  for (const el of candidates) {
+    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+    if (el.type === "grid") continue;
+    const bounds = getElementBounds(el);
+    if (bounds && rectsOverlap(marquee, rotatedAABB(bounds, el.rotation ?? 0))) {
+      ids.push(el.id);
+    }
+  }
+  return ids;
+}
+function rectsOverlap(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;
+}
+
+// src/canvas/element-activation.ts
+var DEFAULT_ACTIVATION_SLOP_PX = 8;
+var DEFAULT_ACTIVATION_DOUBLE_DELAY_MS = 300;
+var PASSIVE = { passive: true };
+function noop() {
+}
+var ElementActivation = class {
+  deps;
+  options;
+  slopPx;
+  doubleDelayMs;
+  hitContext;
+  active = null;
+  pending = null;
+  pendingTimer = null;
+  downPointers = /* @__PURE__ */ new Set();
+  cameraRevision = 0;
+  disposed = false;
+  listeners = /* @__PURE__ */ new Set();
+  unsubCamera;
+  unsubStore;
+  handlePointerDown = (e) => this.onPointerDown(e);
+  handlePointerMove = (e) => this.onPointerMove(e);
+  handlePointerUp = (e) => this.onPointerUp(e);
+  handlePointerCancel = (e) => this.onPointerCancel(e);
+  handleWindowPointerEnd = (e) => this.onWindowPointerEnd(e);
+  handleInterrupt = () => this.reset();
+  constructor(deps, options) {
+    this.slopPx = options.slopPx ?? DEFAULT_ACTIVATION_SLOP_PX;
+    this.doubleDelayMs = options.doubleDelayMs ?? DEFAULT_ACTIVATION_DOUBLE_DELAY_MS;
+    if (!Number.isFinite(this.slopPx) || this.slopPx < 0) {
+      throw new RangeError(`[fieldnotes] activation slopPx must be finite and >= 0`);
+    }
+    if (!Number.isFinite(this.doubleDelayMs) || this.doubleDelayMs <= 0) {
+      throw new RangeError(`[fieldnotes] activation doubleDelayMs must be finite and > 0`);
+    }
+    this.deps = deps;
+    this.options = options;
+    this.hitContext = {
+      camera: deps.camera,
+      store: deps.store,
+      requestRender: noop,
+      isLayerVisible: deps.isLayerVisible
+    };
+    this.unsubCamera = deps.camera.onChange(() => {
+      this.cameraRevision += 1;
+    });
+    this.unsubStore = [
+      deps.store.on("remove", (el) => this.forgetElement(el.id)),
+      deps.store.on("clear", () => this.reset())
+    ];
+    deps.element.addEventListener("pointerdown", this.handlePointerDown, PASSIVE);
+    deps.element.addEventListener("pointermove", this.handlePointerMove, PASSIVE);
+    deps.element.addEventListener("pointerup", this.handlePointerUp, PASSIVE);
+    deps.element.addEventListener("pointercancel", this.handlePointerCancel, PASSIVE);
+    window.addEventListener("pointerup", this.handleWindowPointerEnd, PASSIVE);
+    window.addEventListener("pointercancel", this.handleWindowPointerEnd, PASSIVE);
+    window.addEventListener("blur", this.handleInterrupt, PASSIVE);
+    window.addEventListener("visibilitychange", this.handleInterrupt, PASSIVE);
+  }
+  /**
+   * Subscribes to activations. Emission iterates a snapshot with a per-listener
+   * try/catch, so one throwing listener cannot break its siblings and a
+   * concurrent unsubscribe cannot skip one. Returns an idempotent unsubscribe.
+   */
+  onActivate(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /** Removes every listener, clears timers and gesture state. Idempotent. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.reset();
+    this.unsubCamera();
+    for (const unsub of this.unsubStore) unsub();
+    this.deps.element.removeEventListener("pointerdown", this.handlePointerDown);
+    this.deps.element.removeEventListener("pointermove", this.handlePointerMove);
+    this.deps.element.removeEventListener("pointerup", this.handlePointerUp);
+    this.deps.element.removeEventListener("pointercancel", this.handlePointerCancel);
+    window.removeEventListener("pointerup", this.handleWindowPointerEnd);
+    window.removeEventListener("pointercancel", this.handleWindowPointerEnd);
+    window.removeEventListener("blur", this.handleInterrupt);
+    window.removeEventListener("visibilitychange", this.handleInterrupt);
+    this.listeners.clear();
+  }
+  now() {
+    return performance.now();
+  }
+  isCameraBusy() {
+    return (this.deps.isCameraBusy?.() ?? false) || (this.options.isCameraBusy?.() ?? false);
+  }
+  toWorld(e) {
+    const rect = this.deps.element.getBoundingClientRect();
+    return this.deps.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }
+  /**
+   * Topmost visible element under `world` that activation accepts, or `null`.
+   * The topmost hit wins outright: a rejected hit does not fall through to
+   * whatever sits beneath it.
+   */
+  resolveTarget(world) {
+    const hit = hitTest(world, this.hitContext);
+    if (!hit) return null;
+    if (hit.type === "note" || hit.type === "text") return null;
+    if (hit.type === "html" && this.deps.resolveHtmlRouting(hit) !== "canvas") return null;
+    if (this.options.isActivatable && !this.options.isActivatable(hit)) return null;
+    return hit;
+  }
+  beyondSlop(from, to) {
+    return Math.hypot(to.x - from.x, to.y - from.y) > this.slopPx;
+  }
+  onPointerDown(e) {
+    const hadPointers = this.downPointers.size > 0;
+    this.downPointers.add(e.pointerId);
+    if (hadPointers) {
+      this.clearGesture();
+      return;
+    }
+    if (e.button !== 0) return;
+    this.active = null;
+    if (this.isCameraBusy()) {
+      this.clearPending();
+      return;
+    }
+    const target = this.resolveTarget(this.toWorld(e));
+    if (!target) {
+      this.clearPending();
+      return;
+    }
+    this.active = {
+      pointerId: e.pointerId,
+      pointerType: e.pointerType,
+      clientPoint: { x: e.clientX, y: e.clientY },
+      elementId: target.id,
+      cameraRevision: this.cameraRevision
+    };
+  }
+  onPointerMove(e) {
+    const active = this.active;
+    if (!active || active.pointerId !== e.pointerId) return;
+    if (this.beyondSlop(active.clientPoint, { x: e.clientX, y: e.clientY })) this.clearGesture();
+  }
+  onPointerUp(e) {
+    this.downPointers.delete(e.pointerId);
+    const active = this.active;
+    if (!active || active.pointerId !== e.pointerId) return;
+    this.active = null;
+    if (this.beyondSlop(active.clientPoint, { x: e.clientX, y: e.clientY })) {
+      this.clearPending();
+      return;
+    }
+    if (this.cameraRevision !== active.cameraRevision || this.isCameraBusy()) {
+      this.clearPending();
+      return;
+    }
+    const world = this.toWorld(e);
+    const target = this.resolveTarget(world);
+    if (!target || target.id !== active.elementId) {
+      this.clearPending();
+      return;
+    }
+    if (this.options.gesture === "single") {
+      this.clearPending();
+      this.emit({ element: target, world, pointerType: e.pointerType, gesture: "single" });
+      return;
+    }
+    const pending = this.pending;
+    const time = this.now();
+    if (pending && pending.elementId === target.id && pending.pointerType === e.pointerType && time - pending.time <= this.doubleDelayMs) {
+      this.clearPending();
+      this.emit({ element: target, world, pointerType: e.pointerType, gesture: "double" });
+      return;
+    }
+    this.setPending({
+      elementId: target.id,
+      pointerType: e.pointerType,
+      clientPoint: { x: e.clientX, y: e.clientY },
+      time
+    });
+  }
+  onPointerCancel(e) {
+    this.downPointers.delete(e.pointerId);
+    if (this.active && this.active.pointerId !== e.pointerId) return;
+    this.clearGesture();
+  }
+  /**
+   * A pointer pressed on the wrapper and released outside it. State-clearing
+   * only: this path can never activate. Events that bubbled up from inside the
+   * wrapper were already handled by the wrapper listener.
+   */
+  onWindowPointerEnd(e) {
+    const target = e.target;
+    if (target instanceof Node && this.deps.element.contains(target)) return;
+    this.downPointers.delete(e.pointerId);
+    if (this.active && this.active.pointerId !== e.pointerId) return;
+    this.clearGesture();
+  }
+  forgetElement(id) {
+    if (this.active?.elementId === id) this.active = null;
+    if (this.pending?.elementId === id) this.clearPending();
+  }
+  setPending(pending) {
+    this.clearPending();
+    this.pending = pending;
+    this.pendingTimer = setTimeout(() => this.clearPending(), this.doubleDelayMs);
+  }
+  clearPending() {
+    this.pending = null;
+    if (this.pendingTimer !== null) {
+      clearTimeout(this.pendingTimer);
+      this.pendingTimer = null;
+    }
+  }
+  /** Drops the in-flight gesture and its pending half; leaves pointer bookkeeping. */
+  clearGesture() {
+    this.active = null;
+    this.clearPending();
+  }
+  /** Drops everything, including which pointers are believed to be down. */
+  reset() {
+    this.clearGesture();
+    this.downPointers.clear();
+  }
+  emit(event) {
+    for (const listener of [...this.listeners]) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+};
+
+// src/canvas/viewport.ts
+var EMPTY_IDS = [];
+function noop2() {
+}
+var Viewport = class _Viewport {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.camera = new Camera(options.camera);
+    this.background = new Background(options.background);
+    this._gridSize = options.background?.spacing ?? 24;
+    this.store = new ElementStore();
+    this.layerManager = new LayerManager(this.store);
+    this.toolManager = new ToolManager();
+    this.unsubToolRegister = this.toolManager.onRegister((tool) => {
+      if (_Viewport.isSelectionSource(tool)) this.attachSelectionSource(tool);
+    });
+    const existingSelect = this.getSelectTool();
+    if (existingSelect && _Viewport.isSelectionSource(existingSelect)) {
+      this.attachSelectionSource(existingSelect);
+    }
+    this.renderer = new ElementRenderer();
+    this.renderer.setStore(this.store);
+    this.renderer.setCamera(this.camera);
+    this.renderer.setOnImageLoad(() => {
+      this.renderLoop.markAllLayersDirty();
+      this.requestRender();
+    });
+    this.renderer.setOnImageError((src, cause) => {
+      const elementIds = [];
+      for (const el of this.store.getAll()) {
+        if (el.type === "image" && el.src === src) elementIds.push(el.id);
+      }
+      if (options.onImageError) {
+        options.onImageError({ src, elementIds, cause });
+      } else {
+        console.warn(`[fieldnotes] image failed to load: ${src}`);
+      }
+    });
+    this.renderer.setHtmlPainters(this.htmlPainters);
+    this.renderer.setDiagnosticSink((d) => {
+      this.htmlDiagnostics.emit(d, {
+        registryVersion: this.htmlPainters.version,
+        elementVersion: this.store.getVersion(d.elementId)
+      });
+    });
+    this.noteEditor = new NoteEditor({
+      fontSizePresets: options.fontSizePresets,
+      toolbar: options.toolbar,
+      placeholder: options.placeholder
+    });
+    this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
+    this.noteEditor.setOnInput((id) => this.interactions.liveFitHeight(id));
+    this.arrowLabelEditor = new ArrowLabelEditor();
+    this.noteEditor.setHistoryHooks(
+      () => this.historyRecorder.begin(),
+      () => this.historyRecorder.commit()
+    );
+    this.onHtmlElementMount = options.onHtmlElementMount;
+    this.dropHandler = options.onDrop;
+    this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
     this.unsubRecorderEnd = this.historyRecorder.onTransactionEnd(() => {
       if (!this.pendingSelectionPrune) return;
@@ -8412,7 +9885,7 @@ var Viewport = class _Viewport {
     if (options.contextMenu !== false) {
       this.contextMenu = new ContextMenu({
         onCommand: (action) => this.runAction(action),
-        onClose: noop
+        onClose: noop2
       });
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
@@ -8449,6 +9922,7 @@ var Viewport = class _Viewport {
       marginViewport: this.marginViewport,
       hybridSurface: new HybridRenderSurface(this.paintStack)
     });
+    this.unsubHtmlPainters = this.htmlPainters.onChange(() => this.onHtmlRegistryChanged());
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
@@ -8466,6 +9940,9 @@ var Viewport = class _Viewport {
     this.unsubStore = [
       this.store.on("add", (el) => {
         if (el.type === "grid") this.gridController.syncContext();
+        if (el.type === "html") {
+          this.domNodeManager.reconcileHtmlRouting(this.store, this.resolveRouting);
+        }
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
       }),
@@ -8473,12 +9950,16 @@ var Viewport = class _Viewport {
         if (el.type === "grid") this.gridController.syncContext();
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
+        this.htmlDiagnostics.forget(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
         this.handleRemovedElement(el.id);
       }),
       this.store.on("update", ({ previous, current }) => {
         if (current.type === "grid") this.gridController.syncContext();
+        if (current.type === "html") {
+          this.domNodeManager.reconcileHtmlRouting(this.store, this.resolveRouting);
+        }
         this.renderLoop.markLayerDirty(current.layerId);
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
@@ -8487,6 +9968,7 @@ var Viewport = class _Viewport {
       }),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
+        this.htmlDiagnostics.reset();
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
         this.requestRender();
@@ -8559,6 +10041,21 @@ var Viewport = class _Viewport {
   contextMenu = null;
   minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
+  htmlPainters = new HtmlPainterRegistry();
+  htmlDiagnosticListeners = /* @__PURE__ */ new Set();
+  htmlDiagnostics = new HtmlPaintDiagnosticDeduper((d) => {
+    for (const listener of [...this.htmlDiagnosticListeners]) {
+      try {
+        listener(d);
+      } catch {
+      }
+    }
+  });
+  resolveRouting = (el) => resolveHtmlRouting(el, this.htmlPainters);
+  unsubHtmlPainters;
+  activation = null;
+  activationGeneration = 0;
+  activationListeners = /* @__PURE__ */ new Set();
   resizeListeners = /* @__PURE__ */ new Set();
   selectionListeners = /* @__PURE__ */ new Set();
   detachSelectionSource = null;
@@ -8648,11 +10145,26 @@ var Viewport = class _Viewport {
   exportJSON() {
     return JSON.stringify(this.exportState());
   }
+  /**
+   * Injects this viewport's own html painter registry into export options so a host
+   * that registered painters via `registerHtmlPainter`/`expectCanvasHtmlTypes` gets
+   * markers in exports without passing anything. An explicitly passed `htmlPainters`
+   * REPLACES the viewport's registry rather than merging with it. `expectedCanvasTypes`
+   * is always UNIONED with the resolved registry's own declarations — a caller's set
+   * can only add expectations, never shrink the registry's own.
+   */
+  withHtmlDefaults(options) {
+    const base = options ?? {};
+    const registry = base.htmlPainters ?? this.htmlPainters;
+    const declared = registry.canvasTypes;
+    const expected = base.expectedCanvasTypes ? /* @__PURE__ */ new Set([...declared, ...base.expectedCanvasTypes]) : declared;
+    return { ...base, htmlPainters: registry, expectedCanvasTypes: expected };
+  }
   async exportImage(options) {
-    return exportImage(this.store, options, this.layerManager);
+    return exportImage(this.store, this.withHtmlDefaults(options), this.layerManager);
   }
   async exportSVG(options) {
-    return exportSvg(this.store, options, this.layerManager);
+    return exportSvg(this.store, this.withHtmlDefaults(options), this.layerManager);
   }
   loadState(state) {
     this.inputHandler.flushPendingHistory();
@@ -8680,6 +10192,7 @@ var Viewport = class _Viewport {
         const node = this.domNodeManager.getNode(el.id);
         if (node) {
           this.onHtmlElementMount(el.id, el.domId, node);
+          this.domNodeManager.markHostOwnedContent(el.id);
           node.dataset["initialized"] = "true";
           Object.assign(node.style, {
             overflow: "hidden",
@@ -8692,6 +10205,7 @@ var Viewport = class _Viewport {
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
     this.camera.setZoom(state.camera.zoom);
+    this.domNodeManager.reconcileHtmlRouting(this.store, this.resolveRouting);
   }
   loadJSON(json) {
     this.loadState(parseState(json));
@@ -8816,6 +10330,125 @@ var Viewport = class _Viewport {
     if (el.type !== "html") throw new Error(`Element ${id} is not an HTML element`);
     this.domNodeManager.resetHtmlContent(id);
     this.domNodeManager.storeHtmlContent(id, newContent);
+    this.domNodeManager.reconcileHtmlRouting(this.store, this.resolveRouting);
+    this.requestRender();
+  }
+  /**
+   * Declares htmlTypes that route to canvas painters even before a painter for
+   * them registers, so the element renderer never treats them as DOM-backed
+   * (avoiding a DOM-mount flash while a host is still loading its painter).
+   * Returns an idempotent release; each `expect` call is independently reference
+   * counted by the registry.
+   */
+  expectCanvasHtmlTypes(htmlTypes) {
+    return this.htmlPainters.expect(htmlTypes);
+  }
+  /**
+   * Direct access to the viewport's live html-painter registry — the same
+   * instance the viewport itself uses to route canvas-backed html elements.
+   * Beyond `register`/`expectCanvasHtmlTypes` (already exposed above), this
+   * hands out `getActivePainter`, `canvasTypes`, `onChange`, and `version`,
+   * so a surface such as the minimap that needs to read routing state or
+   * react to registry changes can do so without the viewport re-deriving or
+   * proxying each capability individually.
+   */
+  getHtmlPainters() {
+    return this.htmlPainters;
+  }
+  /**
+   * Registers the canvas painter for `htmlType`. Later registrations for the
+   * same type shadow earlier ones (LIFO); unregistering restores the previous
+   * entry. Existing elements of this type reconcile synchronously — DOM nodes
+   * detach and the render loop repaints on the next frame.
+   */
+  registerHtmlPainter(htmlType, painter) {
+    return this.htmlPainters.register(htmlType, painter);
+  }
+  /**
+   * Subscribes to diagnostics emitted while painting canvas-routed html
+   * elements (missing painter, painter threw, degenerate size). Deduped per
+   * element/target/kind against the current registry and element versions, so
+   * a fail -> repair -> fail-again sequence reports twice rather than being
+   * suppressed forever. Returns an idempotent unsubscribe.
+   */
+  onHtmlPaintDiagnostic(listener) {
+    this.htmlDiagnosticListeners.add(listener);
+    return () => this.htmlDiagnosticListeners.delete(listener);
+  }
+  /**
+   * Enables (or replaces, or with `null` disables) pointer activation of
+   * canvas-painted elements — the bridge for elements that are drawn rather than
+   * mounted and so cannot receive DOM events. **Default off**, so every existing
+   * consumer behaves identically.
+   *
+   * The controller is a passive observer: listeners are `{ passive: true }` and
+   * it never calls `preventDefault`, `stopPropagation`, or takes pointer capture.
+   * Changing or disabling activation resets all active and pending gestures.
+   * Throws `RangeError` for a non-finite/negative `slopPx` or a non-positive
+   * `doubleDelayMs`, leaving any existing activation untouched.
+   *
+   * The returned disposer clears **only its own generation**, so a stale
+   * Strict-Mode cleanup cannot tear down a newer registration.
+   */
+  setActivation(options) {
+    const next = options ? new ElementActivation(
+      {
+        element: this.wrapper,
+        camera: this.camera,
+        store: this.store,
+        resolveHtmlRouting: this.resolveRouting,
+        isLayerVisible: (layerId) => this.layerManager.isLayerVisible(layerId),
+        // Owner-side busy signal: the camera is gliding under pan inertia, or
+        // this very gesture is the one that stopped the glide. Suppressing
+        // both is what keeps "tap to stop a flick" from activating whatever
+        // sits under the finger.
+        isCameraBusy: () => this.inputHandler.isCameraCoasting()
+      },
+      options
+    ) : null;
+    this.activation?.dispose();
+    this.activation = next;
+    next?.onActivate((e) => this.emitActivation(e));
+    const generation = ++this.activationGeneration;
+    return () => {
+      if (this.activationGeneration !== generation) return;
+      this.activation?.dispose();
+      this.activation = null;
+    };
+  }
+  /**
+   * Subscribes to element activations. Persistent and independent of
+   * `setActivation`: subscribing before activation is enabled, or across a
+   * replacement, keeps working. Emission iterates a snapshot with per-listener
+   * try/catch. Returns an idempotent unsubscribe.
+   */
+  onElementActivate(listener) {
+    this.activationListeners.add(listener);
+    return () => {
+      this.activationListeners.delete(listener);
+    };
+  }
+  emitActivation(event) {
+    for (const listener of [...this.activationListeners]) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+  /**
+   * Fires whenever the html painter registry's active-painter set changes
+   * (declare, register, or their release). Reconciliation is synchronous —
+   * routing flips (and any DOM detach/remount) happen before this returns —
+   * while the actual repaint of newly canvas-routed elements is deferred to
+   * the next render frame via markAllLayersDirty + requestRender. Does NOT
+   * touch a minimap: Viewport does not own a MinimapController, and the
+   * built-in wrapper / React <Minimap /> each subscribe to the registry
+   * directly.
+   */
+  onHtmlRegistryChanged() {
+    this.domNodeManager.reconcileHtmlRouting(this.store, this.resolveRouting);
+    this.renderLoop.markAllLayersDirty();
     this.requestRender();
   }
   addGrid(input) {
@@ -8978,6 +10611,11 @@ var Viewport = class _Viewport {
     this.unsubToolChange();
     this.unsubToolRegister();
     this.unsubRecorderEnd();
+    this.unsubHtmlPainters();
+    this.activation?.dispose();
+    this.activation = null;
+    this.activationListeners.clear();
+    this.htmlDiagnosticListeners.clear();
     this.detachSelectionSource?.();
     this.detachSelectionSource = null;
     this.selectionListeners.clear();
@@ -9673,1440 +11311,827 @@ var PingInput = class {
     if (this.disposed) return false;
     return this.emit(world);
   }
-  /** Removes all DOM listeners and cancels any pending press. Idempotent. */
-  dispose() {
-    if (this.disposed) return;
-    this.disposed = true;
-    this.cancelPress();
-    this.downPointers.clear();
-    this.element.removeEventListener("pointerdown", this.handlePointerDown);
-    this.element.removeEventListener("pointermove", this.handlePointerMove);
-    this.element.removeEventListener("pointerup", this.handlePointerUp);
-    this.element.removeEventListener("pointercancel", this.handlePointerCancel);
-    this.element.removeEventListener("pointerleave", this.handlePointerLeave);
-    this.optionListeners.clear();
-    this.pingListeners.clear();
-  }
-  toLocal(e) {
-    const rect = this.element.getBoundingClientRect();
-    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
-  }
-  onPointerDown(e) {
-    const local = this.toLocal(e);
-    this.lastPointerScreen = local;
-    const hadPointers = this.downPointers.size > 0;
-    this.downPointers.add(e.pointerId);
-    if (hadPointers) {
-      this.cancelPress();
-      return;
-    }
-    if (!this.longPressEnabled) return;
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    this.press = {
-      pointerId: e.pointerId,
-      x: local.x,
-      y: local.y,
-      timer: setTimeout(() => this.firePress(), this.longPressMs)
-    };
-  }
-  onPointerMove(e) {
-    const local = this.toLocal(e);
-    this.lastPointerScreen = local;
-    if (this.press === null || e.pointerId !== this.press.pointerId) return;
-    const dx = local.x - this.press.x;
-    const dy = local.y - this.press.y;
-    if (Math.hypot(dx, dy) > this.slopPx) this.cancelPress();
-  }
-  onPointerEnd(e) {
-    this.downPointers.delete(e.pointerId);
-    if (this.press !== null && e.pointerId === this.press.pointerId) this.cancelPress();
-  }
-  cancelPress() {
-    if (this.press === null) return;
-    clearTimeout(this.press.timer);
-    this.press = null;
-  }
-  firePress() {
-    if (this.press === null) return;
-    const screen = { x: this.press.x, y: this.press.y };
-    this.press = null;
-    this.emit(this.host.screenToWorld(screen));
-  }
-  emit(world) {
-    if (this.shouldPing && !this.shouldPing()) return false;
-    const t = this.now();
-    if (t - this.lastEmitAt < this.minIntervalMs) return false;
-    this.lastEmitAt = t;
-    const emission = {
-      x: world.x,
-      y: world.y,
-      color: this.color,
-      durationMs: this.durationMs,
-      radius: this.radius
-    };
-    for (const listener of this.pingListeners) {
-      try {
-        listener(emission);
-      } catch {
-      }
-    }
-    return true;
-  }
-};
-
-// src/canvas/camera-view.ts
-function assertValidView(view) {
-  const { x, y, w, h } = view;
-  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(w) || !Number.isFinite(h)) {
-    throw new Error("[fieldnotes] CameraView requires finite x, y, w, and h");
-  }
-  if (w <= 0 || h <= 0) {
-    throw new Error("[fieldnotes] CameraView requires positive w and h");
-  }
-}
-function assertCanvasDims(canvasW, canvasH) {
-  if (!Number.isFinite(canvasW) || !Number.isFinite(canvasH)) {
-    throw new Error("[fieldnotes] canvas dimensions must be finite");
-  }
-  if (canvasW < 0 || canvasH < 0) {
-    throw new Error("[fieldnotes] canvas dimensions must not be negative");
-  }
-}
-function canvasDimsUsable(canvasW, canvasH) {
-  return Number.isFinite(canvasW) && Number.isFinite(canvasH) && canvasW >= 0 && canvasH >= 0;
-}
-function captureCameraView(viewport) {
-  const rect = viewport.getVisibleRect();
-  return { x: rect.x, y: rect.y, w: rect.w, h: rect.h };
-}
-function fitZoomForView(view, canvasW, canvasH) {
-  assertValidView(view);
-  assertCanvasDims(canvasW, canvasH);
-  if (canvasW === 0 || canvasH === 0) {
-    throw new Error("[fieldnotes] fitZoomForView requires a non-zero canvas size");
-  }
-  return Math.min(canvasW / view.w, canvasH / view.h);
-}
-function cameraOriginForView(view, zoom, canvasW, canvasH) {
-  return {
-    x: canvasW / 2 - (view.x + view.w / 2) * zoom,
-    y: canvasH / 2 - (view.y + view.h / 2) * zoom
-  };
-}
-function applyCameraView(camera, view, canvasW, canvasH) {
-  assertValidView(view);
-  assertCanvasDims(canvasW, canvasH);
-  if (canvasW === 0 || canvasH === 0) return;
-  camera.setZoom(fitZoomForView(view, canvasW, canvasH));
-  const origin = cameraOriginForView(view, camera.zoom, canvasW, canvasH);
-  camera.moveTo(origin.x, origin.y);
-}
-
-// src/canvas/camera-animator.ts
-var DEFAULT_DURATION_MS3 = 400;
-var FRAMED_EPSILON = 1e-6;
-var easeOutCubic2 = (t) => 1 - Math.pow(1 - t, 3);
-function lerp(a, b, k) {
-  return a + (b - a) * k;
-}
-function lerpView(from, to, k) {
-  return {
-    x: lerp(from.x, to.x, k),
-    y: lerp(from.y, to.y, k),
-    w: lerp(from.w, to.w, k),
-    h: lerp(from.h, to.h, k)
-  };
-}
-function viewsClose(a, b) {
-  return Math.abs(a.x - b.x) < FRAMED_EPSILON && Math.abs(a.y - b.y) < FRAMED_EPSILON && Math.abs(a.w - b.w) < FRAMED_EPSILON && Math.abs(a.h - b.h) < FRAMED_EPSILON;
-}
-var CameraAnimator = class {
-  camera;
-  getCanvasSize;
-  frames;
-  now;
-  durationMs;
-  easing;
-  rafId = null;
-  from = null;
-  to = null;
-  startedAt = 0;
-  endListeners = /* @__PURE__ */ new Set();
-  /**
-   * Monotonic operation counter. `animateTo`/`jumpTo` claim a generation
-   * before emitting 'superseded'; if an onEnd listener starts a newer
-   * operation during that emit, the outer call sees a bumped counter and
-   * bails instead of overwriting the nested animation's state. Without this,
-   * the nested animation would run to completion having never reported an end
-   * reason, breaking the exactly-one guarantee the spec makes.
-   */
-  generation = 0;
-  lastWrite = null;
-  disposed = false;
-  detachListeners = null;
-  constructor(element, camera, options) {
-    if (options.frames !== void 0) {
-      const { requestFrame, cancelFrame } = options.frames;
-      if (typeof requestFrame !== "function" || typeof cancelFrame !== "function") {
-        throw new Error(
-          "[fieldnotes] CameraAnimator: `frames` must supply both requestFrame and cancelFrame"
-        );
-      }
-    }
-    this.camera = camera;
-    this.getCanvasSize = options.getCanvasSize;
-    this.frames = options.frames ?? {
-      requestFrame: (cb) => requestAnimationFrame(cb),
-      cancelFrame: (id) => cancelAnimationFrame(id)
-    };
-    this.now = options.now ?? (() => performance.now());
-    this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS3;
-    this.easing = options.easing ?? easeOutCubic2;
-    if (options.interactive ?? true) {
-      const onUserInput = () => {
-        this.end("cancelled");
-      };
-      const types = ["pointerdown", "wheel", "keydown"];
-      for (const type of types) {
-        element.addEventListener(type, onUserInput, { passive: true });
-      }
-      this.detachListeners = () => {
-        for (const type of types) {
-          element.removeEventListener(type, onUserInput);
-        }
-      };
-    }
-  }
-  get animating() {
-    return this.to !== null;
-  }
-  onEnd(listener) {
-    this.endListeners.add(listener);
-    return () => this.endListeners.delete(listener);
-  }
-  animateTo(view) {
-    const size = this.validateAndMeasure(view);
-    if (size === null) return;
-    const current = this.camera.getVisibleRect(size.w, size.h);
-    const generation = ++this.generation;
-    this.end("superseded");
-    if (this.generation !== generation) return;
-    if (viewsClose(current, view)) {
-      applyCameraView(this.camera, view, size.w, size.h);
-      this.emit("complete");
-      return;
-    }
-    this.from = current;
-    this.to = view;
-    this.startedAt = this.now();
-    this.lastWrite = null;
-    this.rafId = this.frames.requestFrame(this.step);
-  }
-  jumpTo(view) {
-    const size = this.validateAndMeasure(view);
-    if (size === null) return;
-    const generation = ++this.generation;
-    this.end("superseded");
-    if (this.generation !== generation) return;
-    applyCameraView(this.camera, view, size.w, size.h);
-    this.lastWrite = null;
-  }
-  cancel() {
-    if (this.disposed) return;
-    this.end("cancelled");
-  }
-  /**
-   * Terminal. Order is load-bearing: the flag is set BEFORE any listener runs,
-   * because an onEnd listener can call animateTo during the disposal callback.
-   * With the flag set last, that call would start a real animation which the
-   * listener clear then silently discards — a second animation with no end
-   * reason, breaking the exactly-one guarantee.
-   */
+  /** Removes all DOM listeners and cancels any pending press. Idempotent. */
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
-    this.generation++;
-    const wasAnimating = this.to !== null;
-    this.clearFrame();
-    this.from = null;
-    this.to = null;
-    this.lastWrite = null;
-    if (wasAnimating) this.emit("cancelled");
-    this.endListeners.clear();
-    this.detachListeners?.();
-    this.detachListeners = null;
+    this.cancelPress();
+    this.downPointers.clear();
+    this.element.removeEventListener("pointerdown", this.handlePointerDown);
+    this.element.removeEventListener("pointermove", this.handlePointerMove);
+    this.element.removeEventListener("pointerup", this.handlePointerUp);
+    this.element.removeEventListener("pointercancel", this.handlePointerCancel);
+    this.element.removeEventListener("pointerleave", this.handlePointerLeave);
+    this.optionListeners.clear();
+    this.pingListeners.clear();
   }
-  /**
-   * Steps 1-3 of the public-call contract. Returns null when the caller must
-   * stop, having already handled termination.
-   *
-   * The disposed check precedes validation deliberately: ordering it after
-   * would make `disposed.animateTo(invalidView)` both required to throw and
-   * required to stay silent. Disposal wins — a terminal animator is inert for
-   * every input, and post-disposal calls are exactly the racy teardown paths
-   * where a throw is least useful.
-   */
-  validateAndMeasure(view) {
-    if (this.disposed) return null;
-    assertValidView(view);
-    const size = this.getCanvasSize();
-    assertCanvasDims(size.w, size.h);
-    if (size.w === 0 || size.h === 0) {
-      this.end("cancelled");
-      return null;
-    }
-    return size;
+  toLocal(e) {
+    const rect = this.element.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
   }
-  step = () => {
-    if (this.disposed || this.to === null || this.from === null) return;
-    if (this.foreignWrite()) {
-      this.end("cancelled");
-      return;
-    }
-    const size = this.getCanvasSize();
-    if (!canvasDimsUsable(size.w, size.h)) {
-      this.end("cancelled");
-      return;
-    }
-    if (size.w === 0 || size.h === 0) {
-      this.end("cancelled");
-      return;
-    }
-    const elapsed = this.now() - this.startedAt;
-    const t = this.durationMs <= 0 ? 1 : Math.min(1, elapsed / this.durationMs);
-    const view = lerpView(this.from, this.to, this.easing(t));
-    applyCameraView(this.camera, view, size.w, size.h);
-    this.recordWrite();
-    if (t >= 1) {
-      this.end("complete");
+  onPointerDown(e) {
+    const local = this.toLocal(e);
+    this.lastPointerScreen = local;
+    const hadPointers = this.downPointers.size > 0;
+    this.downPointers.add(e.pointerId);
+    if (hadPointers) {
+      this.cancelPress();
       return;
     }
-    this.rafId = this.frames.requestFrame(this.step);
-  };
-  recordWrite() {
-    this.lastWrite = {
-      x: this.camera.position.x,
-      y: this.camera.position.y,
-      zoom: this.camera.zoom
+    if (!this.longPressEnabled) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    this.press = {
+      pointerId: e.pointerId,
+      x: local.x,
+      y: local.y,
+      timer: setTimeout(() => this.firePress(), this.longPressMs)
     };
   }
-  foreignWrite() {
-    if (this.lastWrite === null) return false;
-    const eps = 1e-6;
-    return Math.abs(this.camera.position.x - this.lastWrite.x) > eps || Math.abs(this.camera.position.y - this.lastWrite.y) > eps || Math.abs(this.camera.zoom - this.lastWrite.zoom) > eps;
+  onPointerMove(e) {
+    const local = this.toLocal(e);
+    this.lastPointerScreen = local;
+    if (this.press === null || e.pointerId !== this.press.pointerId) return;
+    const dx = local.x - this.press.x;
+    const dy = local.y - this.press.y;
+    if (Math.hypot(dx, dy) > this.slopPx) this.cancelPress();
   }
-  /** Terminates an in-flight animation with `reason`. No-op when idle. */
-  end(reason) {
-    if (this.disposed || this.to === null) return;
-    this.clearFrame();
-    this.from = null;
-    this.to = null;
-    this.lastWrite = null;
-    this.emit(reason);
+  onPointerEnd(e) {
+    this.downPointers.delete(e.pointerId);
+    if (this.press !== null && e.pointerId === this.press.pointerId) this.cancelPress();
   }
-  clearFrame() {
-    if (this.rafId !== null) {
-      this.frames.cancelFrame(this.rafId);
-      this.rafId = null;
-    }
+  cancelPress() {
+    if (this.press === null) return;
+    clearTimeout(this.press.timer);
+    this.press = null;
   }
-  emit(reason) {
-    for (const listener of [...this.endListeners]) {
+  firePress() {
+    if (this.press === null) return;
+    const screen = { x: this.press.x, y: this.press.y };
+    this.press = null;
+    this.emit(this.host.screenToWorld(screen));
+  }
+  emit(world) {
+    if (this.shouldPing && !this.shouldPing()) return false;
+    const t = this.now();
+    if (t - this.lastEmitAt < this.minIntervalMs) return false;
+    this.lastEmitAt = t;
+    const emission = {
+      x: world.x,
+      y: world.y,
+      color: this.color,
+      durationMs: this.durationMs,
+      radius: this.radius
+    };
+    for (const listener of this.pingListeners) {
       try {
-        listener(reason);
+        listener(emission);
       } catch {
       }
     }
-  }
-};
-
-// src/canvas/focus-presence.ts
-var FOCUS_PRESENCE_KIND = "focus";
-var AUDIENCES = ["all", "players", "display"];
-function isPositiveFinite(value) {
-  return typeof value === "number" && Number.isFinite(value) && value > 0;
-}
-function isFiniteNumber2(value) {
-  return typeof value === "number" && Number.isFinite(value);
-}
-function isFocusPresence(data) {
-  if (typeof data !== "object" || data === null) return false;
-  const payload = data;
-  if (payload.kind !== FOCUS_PRESENCE_KIND) return false;
-  if (!isFiniteNumber2(payload.x) || !isFiniteNumber2(payload.y)) return false;
-  if (!isPositiveFinite(payload.w) || !isPositiveFinite(payload.h)) return false;
-  if (typeof payload.audience !== "string" || !AUDIENCES.some((a) => a === payload.audience)) {
-    return false;
-  }
-  if (payload.color !== void 0 && typeof payload.color !== "string") return false;
-  return true;
-}
-function toFocusPresence(view, audience, color) {
-  return {
-    kind: FOCUS_PRESENCE_KIND,
-    x: view.x,
-    y: view.y,
-    w: view.w,
-    h: view.h,
-    audience,
-    ...color === void 0 ? {} : { color }
-  };
-}
-
-// src/canvas/remote-focus-receiver.ts
-function audienceIncludes(audience, role) {
-  if (role === "dm") return false;
-  if (audience === "all") return true;
-  if (audience === "players") return role === "player";
-  return role === "display";
-}
-var RemoteFocusReceiver = class {
-  role;
-  animator;
-  animate;
-  pulseColor;
-  overlay;
-  disposed = false;
-  constructor(host, options) {
-    this.role = options.role;
-    this.animator = options.animator;
-    this.animate = options.animate ?? true;
-    this.pulseColor = options.pulseColor;
-    this.overlay = options.pulse ?? true ? new RemotePingOverlay(host, {
-      ...options.pulseColor === void 0 ? {} : { color: options.pulseColor },
-      ...options.pulseDurationMs === void 0 ? {} : { durationMs: options.pulseDurationMs },
-      ...options.pulseRadius === void 0 ? {} : { radius: options.pulseRadius },
-      maxPingsPerSender: 1
-    }) : null;
-  }
-  /**
-   * Applies a presence payload from `sender`. Returns `false` for payloads
-   * that are not focus frames, or are addressed to a different role, so hosts
-   * can feed every presence frame through without disturbing other handlers.
-   */
-  apply(from, data) {
-    if (this.disposed || !isFocusPresence(data)) return false;
-    if (!audienceIncludes(data.audience, this.role)) return false;
-    const view = { x: data.x, y: data.y, w: data.w, h: data.h };
-    if (this.animate) {
-      this.animator.animateTo(view);
-    } else {
-      this.animator.jumpTo(view);
-    }
-    this.overlay?.apply(from, {
-      kind: "ping",
-      x: view.x + view.w / 2,
-      y: view.y + view.h / 2,
-      color: data.color ?? this.pulseColor
-    });
     return true;
   }
-  /** Idempotent. Does NOT dispose the animator — the host owns that. */
-  dispose() {
-    if (this.disposed) return;
-    this.disposed = true;
-    this.overlay?.dispose();
-  }
 };
 
-// src/tools/hand-tool.ts
-var HandTool = class {
-  name = "hand";
-  panning = false;
-  lastScreen = { x: 0, y: 0 };
-  onActivate(ctx) {
-    ctx.setCursor?.("grab");
-  }
-  onDeactivate(ctx) {
-    ctx.setCursor?.("default");
+// src/canvas/camera-view.ts
+function assertValidView(view) {
+  const { x, y, w, h } = view;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(w) || !Number.isFinite(h)) {
+    throw new Error("[fieldnotes] CameraView requires finite x, y, w, and h");
   }
-  onPointerDown(state, ctx) {
-    this.panning = true;
-    this.lastScreen = { x: state.x, y: state.y };
-    ctx.setCursor?.("grabbing");
+  if (w <= 0 || h <= 0) {
+    throw new Error("[fieldnotes] CameraView requires positive w and h");
   }
-  onPointerMove(state, ctx) {
-    if (!this.panning) return;
-    const dx = state.x - this.lastScreen.x;
-    const dy = state.y - this.lastScreen.y;
-    this.lastScreen = { x: state.x, y: state.y };
-    ctx.camera.pan(dx, dy);
+}
+function assertCanvasDims(canvasW, canvasH) {
+  if (!Number.isFinite(canvasW) || !Number.isFinite(canvasH)) {
+    throw new Error("[fieldnotes] canvas dimensions must be finite");
   }
-  onPointerUp(_state, ctx) {
-    this.panning = false;
-    ctx.setCursor?.("grab");
+  if (canvasW < 0 || canvasH < 0) {
+    throw new Error("[fieldnotes] canvas dimensions must not be negative");
   }
-};
+}
+function canvasDimsUsable(canvasW, canvasH) {
+  return Number.isFinite(canvasW) && Number.isFinite(canvasH) && canvasW >= 0 && canvasH >= 0;
+}
+function captureCameraView(viewport) {
+  const rect = viewport.getVisibleRect();
+  return { x: rect.x, y: rect.y, w: rect.w, h: rect.h };
+}
+function fitZoomForView(view, canvasW, canvasH) {
+  assertValidView(view);
+  assertCanvasDims(canvasW, canvasH);
+  if (canvasW === 0 || canvasH === 0) {
+    throw new Error("[fieldnotes] fitZoomForView requires a non-zero canvas size");
+  }
+  return Math.min(canvasW / view.w, canvasH / view.h);
+}
+function cameraOriginForView(view, zoom, canvasW, canvasH) {
+  return {
+    x: canvasW / 2 - (view.x + view.w / 2) * zoom,
+    y: canvasH / 2 - (view.y + view.h / 2) * zoom
+  };
+}
+function applyCameraView(camera, view, canvasW, canvasH) {
+  assertValidView(view);
+  assertCanvasDims(canvasW, canvasH);
+  if (canvasW === 0 || canvasH === 0) return;
+  camera.setZoom(fitZoomForView(view, canvasW, canvasH));
+  const origin = cameraOriginForView(view, camera.zoom, canvasW, canvasH);
+  camera.moveTo(origin.x, origin.y);
+}
 
-// src/tools/pencil-tool.ts
-var MIN_POINTS_FOR_STROKE = 2;
-var DEFAULT_SMOOTHING = 1.5;
-var DEFAULT_PRESSURE = 0.5;
-var DEFAULT_MIN_POINT_DISTANCE = 3;
-var DEFAULT_PROGRESSIVE_THRESHOLD = 200;
-var PROGRESSIVE_HOT_ZONE = 30;
-var PencilTool = class {
-  name;
-  drawing = false;
-  points = [];
-  color;
-  width;
-  smoothing;
-  minPointDistance;
-  progressiveThreshold;
-  nextSimplifyAt;
-  opacity;
-  blendMode;
-  optionListeners = /* @__PURE__ */ new Set();
-  constructor(options = {}) {
-    this.name = options.name ?? "pencil";
-    this.color = options.color ?? "#000000";
-    this.width = options.width ?? 2;
-    this.smoothing = options.smoothing ?? DEFAULT_SMOOTHING;
-    this.minPointDistance = options.minPointDistance ?? DEFAULT_MIN_POINT_DISTANCE;
-    this.progressiveThreshold = options.progressiveSimplifyThreshold ?? DEFAULT_PROGRESSIVE_THRESHOLD;
-    this.nextSimplifyAt = this.progressiveThreshold;
-    this.opacity = options.opacity ?? 1;
-    this.blendMode = options.blendMode;
+// src/canvas/camera-animator.ts
+var DEFAULT_DURATION_MS3 = 400;
+var FRAMED_EPSILON = 1e-6;
+var easeOutCubic2 = (t) => 1 - Math.pow(1 - t, 3);
+function lerp(a, b, k) {
+  return a + (b - a) * k;
+}
+function lerpView(from, to, k) {
+  return {
+    x: lerp(from.x, to.x, k),
+    y: lerp(from.y, to.y, k),
+    w: lerp(from.w, to.w, k),
+    h: lerp(from.h, to.h, k)
+  };
+}
+function viewsClose(a, b) {
+  return Math.abs(a.x - b.x) < FRAMED_EPSILON && Math.abs(a.y - b.y) < FRAMED_EPSILON && Math.abs(a.w - b.w) < FRAMED_EPSILON && Math.abs(a.h - b.h) < FRAMED_EPSILON;
+}
+var CameraAnimator = class {
+  camera;
+  getCanvasSize;
+  frames;
+  now;
+  durationMs;
+  easing;
+  rafId = null;
+  from = null;
+  to = null;
+  startedAt = 0;
+  endListeners = /* @__PURE__ */ new Set();
+  /**
+   * Monotonic operation counter. `animateTo`/`jumpTo` claim a generation
+   * before emitting 'superseded'; if an onEnd listener starts a newer
+   * operation during that emit, the outer call sees a bumped counter and
+   * bails instead of overwriting the nested animation's state. Without this,
+   * the nested animation would run to completion having never reported an end
+   * reason, breaking the exactly-one guarantee the spec makes.
+   */
+  generation = 0;
+  lastWrite = null;
+  disposed = false;
+  detachListeners = null;
+  constructor(element, camera, options) {
+    if (options.frames !== void 0) {
+      const { requestFrame, cancelFrame } = options.frames;
+      if (typeof requestFrame !== "function" || typeof cancelFrame !== "function") {
+        throw new Error(
+          "[fieldnotes] CameraAnimator: `frames` must supply both requestFrame and cancelFrame"
+        );
+      }
+    }
+    this.camera = camera;
+    this.getCanvasSize = options.getCanvasSize;
+    this.frames = options.frames ?? {
+      requestFrame: (cb) => requestAnimationFrame(cb),
+      cancelFrame: (id) => cancelAnimationFrame(id)
+    };
+    this.now = options.now ?? (() => performance.now());
+    this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS3;
+    this.easing = options.easing ?? easeOutCubic2;
+    if (options.interactive ?? true) {
+      const onUserInput = () => {
+        this.end("cancelled");
+      };
+      const types = ["pointerdown", "wheel", "keydown"];
+      for (const type of types) {
+        element.addEventListener(type, onUserInput, { passive: true });
+      }
+      this.detachListeners = () => {
+        for (const type of types) {
+          element.removeEventListener(type, onUserInput);
+        }
+      };
+    }
   }
-  onActivate(ctx) {
-    ctx.setCursor?.("crosshair");
+  get animating() {
+    return this.to !== null;
   }
-  onDeactivate(ctx) {
-    ctx.setCursor?.("default");
+  onEnd(listener) {
+    this.endListeners.add(listener);
+    return () => this.endListeners.delete(listener);
   }
-  getOptions() {
-    return {
-      color: this.color,
-      width: this.width,
-      smoothing: this.smoothing,
-      minPointDistance: this.minPointDistance,
-      progressiveSimplifyThreshold: this.progressiveThreshold,
-      opacity: this.opacity,
-      blendMode: this.blendMode
-    };
+  animateTo(view) {
+    const size = this.validateAndMeasure(view);
+    if (size === null) return;
+    const current = this.camera.getVisibleRect(size.w, size.h);
+    const generation = ++this.generation;
+    this.end("superseded");
+    if (this.generation !== generation) return;
+    if (viewsClose(current, view)) {
+      applyCameraView(this.camera, view, size.w, size.h);
+      this.emit("complete");
+      return;
+    }
+    this.from = current;
+    this.to = view;
+    this.startedAt = this.now();
+    this.lastWrite = null;
+    this.rafId = this.frames.requestFrame(this.step);
   }
-  onOptionsChange(listener) {
-    this.optionListeners.add(listener);
-    return () => this.optionListeners.delete(listener);
+  jumpTo(view) {
+    const size = this.validateAndMeasure(view);
+    if (size === null) return;
+    const generation = ++this.generation;
+    this.end("superseded");
+    if (this.generation !== generation) return;
+    applyCameraView(this.camera, view, size.w, size.h);
+    this.lastWrite = null;
   }
-  setOptions(options) {
-    if (options.color !== void 0) this.color = options.color;
-    if (options.width !== void 0) this.width = options.width;
-    if (options.smoothing !== void 0) this.smoothing = options.smoothing;
-    if (options.minPointDistance !== void 0) this.minPointDistance = options.minPointDistance;
-    if (options.progressiveSimplifyThreshold !== void 0)
-      this.progressiveThreshold = options.progressiveSimplifyThreshold;
-    if (options.opacity !== void 0) this.opacity = options.opacity;
-    if (options.blendMode !== void 0) this.blendMode = options.blendMode;
-    this.notifyOptionsChange();
+  cancel() {
+    if (this.disposed) return;
+    this.end("cancelled");
   }
-  onPointerDown(state, ctx) {
-    this.drawing = true;
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
-    this.points = [{ x: world.x, y: world.y, pressure }];
-    this.nextSimplifyAt = this.progressiveThreshold;
+  /**
+   * Terminal. Order is load-bearing: the flag is set BEFORE any listener runs,
+   * because an onEnd listener can call animateTo during the disposal callback.
+   * With the flag set last, that call would start a real animation which the
+   * listener clear then silently discards — a second animation with no end
+   * reason, breaking the exactly-one guarantee.
+   */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.generation++;
+    const wasAnimating = this.to !== null;
+    this.clearFrame();
+    this.from = null;
+    this.to = null;
+    this.lastWrite = null;
+    if (wasAnimating) this.emit("cancelled");
+    this.endListeners.clear();
+    this.detachListeners?.();
+    this.detachListeners = null;
   }
-  onPointerMove(state, ctx) {
-    if (!this.drawing) return;
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
-    const last = this.points[this.points.length - 1];
-    if (last) {
-      const dx = world.x - last.x;
-      const dy = world.y - last.y;
-      if (dx * dx + dy * dy < this.minPointDistance * this.minPointDistance) return;
-    }
-    this.points.push({ x: world.x, y: world.y, pressure });
-    if (this.points.length > this.nextSimplifyAt) {
-      const hotZone = this.points.slice(-PROGRESSIVE_HOT_ZONE);
-      const coldZone = this.points.slice(0, -PROGRESSIVE_HOT_ZONE);
-      const simplified = simplifyPoints(coldZone, this.smoothing * 2);
-      this.points = [...simplified, ...hotZone];
-      this.nextSimplifyAt = this.points.length + this.progressiveThreshold;
+  /**
+   * Steps 1-3 of the public-call contract. Returns null when the caller must
+   * stop, having already handled termination.
+   *
+   * The disposed check precedes validation deliberately: ordering it after
+   * would make `disposed.animateTo(invalidView)` both required to throw and
+   * required to stay silent. Disposal wins — a terminal animator is inert for
+   * every input, and post-disposal calls are exactly the racy teardown paths
+   * where a throw is least useful.
+   */
+  validateAndMeasure(view) {
+    if (this.disposed) return null;
+    assertValidView(view);
+    const size = this.getCanvasSize();
+    assertCanvasDims(size.w, size.h);
+    if (size.w === 0 || size.h === 0) {
+      this.end("cancelled");
+      return null;
     }
-    ctx.requestRender();
+    return size;
   }
-  onPointerUp(_state, ctx) {
-    if (!this.drawing) return;
-    this.drawing = false;
-    if (this.points.length < MIN_POINTS_FOR_STROKE) {
-      this.points = [];
+  step = () => {
+    if (this.disposed || this.to === null || this.from === null) return;
+    if (this.foreignWrite()) {
+      this.end("cancelled");
       return;
     }
-    const simplified = simplifyPoints(this.points, this.smoothing);
-    const stroke = createStroke({
-      points: simplified,
-      color: this.color,
-      width: this.width,
-      layerId: ctx.activeLayerId ?? "",
-      opacity: this.opacity,
-      blendMode: this.blendMode
-    });
-    ctx.store.add(stroke);
-    computeStrokeSegments(stroke);
-    this.points = [];
-    ctx.requestRender();
+    const size = this.getCanvasSize();
+    if (!canvasDimsUsable(size.w, size.h)) {
+      this.end("cancelled");
+      return;
+    }
+    if (size.w === 0 || size.h === 0) {
+      this.end("cancelled");
+      return;
+    }
+    const elapsed = this.now() - this.startedAt;
+    const t = this.durationMs <= 0 ? 1 : Math.min(1, elapsed / this.durationMs);
+    const view = lerpView(this.from, this.to, this.easing(t));
+    applyCameraView(this.camera, view, size.w, size.h);
+    this.recordWrite();
+    if (t >= 1) {
+      this.end("complete");
+      return;
+    }
+    this.rafId = this.frames.requestFrame(this.step);
+  };
+  recordWrite() {
+    this.lastWrite = {
+      x: this.camera.position.x,
+      y: this.camera.position.y,
+      zoom: this.camera.zoom
+    };
   }
-  notifyOptionsChange() {
-    for (const listener of this.optionListeners) listener();
+  foreignWrite() {
+    if (this.lastWrite === null) return false;
+    const eps = 1e-6;
+    return Math.abs(this.camera.position.x - this.lastWrite.x) > eps || Math.abs(this.camera.position.y - this.lastWrite.y) > eps || Math.abs(this.camera.zoom - this.lastWrite.zoom) > eps;
   }
-  renderOverlay(ctx) {
-    if (!this.drawing || this.points.length < 2) return;
-    ctx.save();
-    ctx.strokeStyle = this.color;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.globalAlpha = this.blendMode ? this.opacity : 0.8;
-    if (this.blendMode) ctx.globalCompositeOperation = this.blendMode;
-    const segments = smoothToSegments(this.points);
-    for (const seg of segments) {
-      const w = (pressureToWidth(seg.start.pressure, this.width) + pressureToWidth(seg.end.pressure, this.width)) / 2;
-      ctx.lineWidth = w;
-      ctx.beginPath();
-      ctx.moveTo(seg.start.x, seg.start.y);
-      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
-      ctx.stroke();
+  /** Terminates an in-flight animation with `reason`. No-op when idle. */
+  end(reason) {
+    if (this.disposed || this.to === null) return;
+    this.clearFrame();
+    this.from = null;
+    this.to = null;
+    this.lastWrite = null;
+    this.emit(reason);
+  }
+  clearFrame() {
+    if (this.rafId !== null) {
+      this.frames.cancelFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+  emit(reason) {
+    for (const listener of [...this.endListeners]) {
+      try {
+        listener(reason);
+      } catch {
+      }
     }
-    ctx.restore();
   }
 };
 
-// src/elements/stroke-hit.ts
-function hitTestStroke(stroke, point, radius) {
-  const bounds = getElementBounds(stroke);
-  if (!bounds) return false;
-  if (point.x < bounds.x - radius || point.x > bounds.x + bounds.w + radius || point.y < bounds.y - radius || point.y > bounds.y + bounds.h + radius) {
+// src/canvas/focus-presence.ts
+var FOCUS_PRESENCE_KIND = "focus";
+var AUDIENCES = ["all", "players", "display"];
+function isPositiveFinite(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isFiniteNumber2(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function isFocusPresence(data) {
+  if (typeof data !== "object" || data === null) return false;
+  const payload = data;
+  if (payload.kind !== FOCUS_PRESENCE_KIND) return false;
+  if (!isFiniteNumber2(payload.x) || !isFiniteNumber2(payload.y)) return false;
+  if (!isPositiveFinite(payload.w) || !isPositiveFinite(payload.h)) return false;
+  if (typeof payload.audience !== "string" || !AUDIENCES.some((a) => a === payload.audience)) {
     return false;
   }
-  const radiusSq = radius * radius;
-  const local = { x: point.x - stroke.position.x, y: point.y - stroke.position.y };
-  const { segments } = getStrokeRenderData(stroke);
-  if (segments.length === 0) {
-    const p = stroke.points[0];
-    if (!p) return false;
-    const dx = p.x - local.x;
-    const dy = p.y - local.y;
-    return dx * dx + dy * dy <= radiusSq;
-  }
-  for (const seg of segments) {
-    if (distSqToSegment(local, seg.start, seg.end) <= radiusSq) return true;
-  }
-  return false;
+  if (payload.color !== void 0 && typeof payload.color !== "string") return false;
+  return true;
 }
-
-// src/elements/stroke-erase.ts
-function lerp2(a, b, t) {
+function toFocusPresence(view, audience, color) {
   return {
-    x: a.x + (b.x - a.x) * t,
-    y: a.y + (b.y - a.y) * t,
-    pressure: a.pressure + (b.pressure - a.pressure) * t
-  };
-}
-function erasePoints(points, eraser, radius) {
-  const r2 = radius * radius;
-  if (points.length < 2) {
-    const p = points[0];
-    if (p && (p.x - eraser.x) ** 2 + (p.y - eraser.y) ** 2 <= r2) return [];
-    return null;
-  }
-  const runs = [];
-  let current = [];
-  let erased = false;
-  const flush = () => {
-    if (current.length >= 2) runs.push(current);
-    current = [];
+    kind: FOCUS_PRESENCE_KIND,
+    x: view.x,
+    y: view.y,
+    w: view.w,
+    h: view.h,
+    audience,
+    ...color === void 0 ? {} : { color }
   };
-  for (let i = 0; i < points.length - 1; i++) {
-    const a = points[i];
-    const b = points[i + 1];
-    if (!a || !b) continue;
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const fx = a.x - eraser.x;
-    const fy = a.y - eraser.y;
-    const A = dx * dx + dy * dy;
-    const B = 2 * (fx * dx + fy * dy);
-    const C = fx * fx + fy * fy - r2;
-    let tLo = 1;
-    let tHi = 0;
-    if (A === 0) {
-      if (C <= 0) {
-        tLo = 0;
-        tHi = 1;
-      }
-    } else {
-      const disc = B * B - 4 * A * C;
-      if (disc >= 0) {
-        const sq = Math.sqrt(disc);
-        const lo = Math.max(0, (-B - sq) / (2 * A));
-        const hi = Math.min(1, (-B + sq) / (2 * A));
-        if (lo < hi) {
-          tLo = lo;
-          tHi = hi;
-        }
-      }
-    }
-    if (tLo > tHi) {
-      if (current.length === 0) current.push(a);
-      current.push(b);
-      continue;
-    }
-    erased = true;
-    if (tLo > 0) {
-      if (current.length === 0) current.push(a);
-      current.push(lerp2(a, b, tLo));
-      flush();
-    } else {
-      flush();
-    }
-    if (tHi < 1) {
-      current = [lerp2(a, b, tHi), b];
-    }
-  }
-  flush();
-  return erased ? runs : null;
 }
 
-// src/tools/eraser-tool.ts
-var DEFAULT_RADIUS3 = 20;
-function makeEraserCursor(radius) {
-  const size = radius * 2;
-  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><circle cx='${radius}' cy='${radius}' r='${radius - 1}' fill='none' stroke='%23666' stroke-width='1.5'/></svg>`;
-  return `url("data:image/svg+xml,${svg}") ${radius} ${radius}, crosshair`;
+// src/canvas/remote-focus-receiver.ts
+function audienceIncludes(audience, role) {
+  if (role === "dm") return false;
+  if (audience === "all") return true;
+  if (audience === "players") return role === "player";
+  return role === "display";
 }
-var EraserTool = class {
-  name = "eraser";
-  erasing = false;
-  radius;
-  cursor;
-  mode;
-  constructor(options = {}) {
-    this.radius = options.radius ?? DEFAULT_RADIUS3;
-    this.cursor = makeEraserCursor(this.radius);
-    this.mode = options.mode ?? "partial";
-  }
-  getOptions() {
-    return { radius: this.radius, mode: this.mode };
+var RemoteFocusReceiver = class {
+  role;
+  animator;
+  animate;
+  pulseColor;
+  overlay;
+  disposed = false;
+  constructor(host, options) {
+    this.role = options.role;
+    this.animator = options.animator;
+    this.animate = options.animate ?? true;
+    this.pulseColor = options.pulseColor;
+    this.overlay = options.pulse ?? true ? new RemotePingOverlay(host, {
+      ...options.pulseColor === void 0 ? {} : { color: options.pulseColor },
+      ...options.pulseDurationMs === void 0 ? {} : { durationMs: options.pulseDurationMs },
+      ...options.pulseRadius === void 0 ? {} : { radius: options.pulseRadius },
+      maxPingsPerSender: 1
+    }) : null;
   }
-  setOptions(options) {
-    if (options.mode !== void 0) this.mode = options.mode;
-    if (options.radius !== void 0) {
-      this.radius = options.radius;
-      this.cursor = makeEraserCursor(this.radius);
+  /**
+   * Applies a presence payload from `sender`. Returns `false` for payloads
+   * that are not focus frames, or are addressed to a different role, so hosts
+   * can feed every presence frame through without disturbing other handlers.
+   */
+  apply(from, data) {
+    if (this.disposed || !isFocusPresence(data)) return false;
+    if (!audienceIncludes(data.audience, this.role)) return false;
+    const view = { x: data.x, y: data.y, w: data.w, h: data.h };
+    if (this.animate) {
+      this.animator.animateTo(view);
+    } else {
+      this.animator.jumpTo(view);
     }
+    this.overlay?.apply(from, {
+      kind: "ping",
+      x: view.x + view.w / 2,
+      y: view.y + view.h / 2,
+      color: data.color ?? this.pulseColor
+    });
+    return true;
+  }
+  /** Idempotent. Does NOT dispose the animator — the host owns that. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.overlay?.dispose();
   }
+};
+
+// src/tools/hand-tool.ts
+var HandTool = class {
+  name = "hand";
+  panning = false;
+  lastScreen = { x: 0, y: 0 };
   onActivate(ctx) {
-    ctx.setCursor?.(this.cursor);
+    ctx.setCursor?.("grab");
   }
   onDeactivate(ctx) {
     ctx.setCursor?.("default");
   }
   onPointerDown(state, ctx) {
-    this.erasing = true;
-    this.eraseAt(state, ctx);
+    this.panning = true;
+    this.lastScreen = { x: state.x, y: state.y };
+    ctx.setCursor?.("grabbing");
   }
   onPointerMove(state, ctx) {
-    if (!this.erasing) return;
-    this.eraseAt(state, ctx);
-  }
-  onPointerUp(_state, _ctx) {
-    this.erasing = false;
-  }
-  eraseAt(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    const worldRadius = this.radius / ctx.camera.zoom;
-    const queryBounds = {
-      x: world.x - worldRadius,
-      y: world.y - worldRadius,
-      w: worldRadius * 2,
-      h: worldRadius * 2
-    };
-    const candidates = ctx.store.queryRect(queryBounds);
-    let erased = false;
-    for (const el of candidates) {
-      if (el.type !== "stroke") continue;
-      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
-      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (!this.strokeIntersects(el, world, worldRadius)) continue;
-      if (this.mode === "stroke") {
-        ctx.store.remove(el.id);
-        erased = true;
-        continue;
-      }
-      const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
-      const runs = erasePoints(el.points, localEraser, worldRadius);
-      if (runs === null) continue;
-      ctx.store.remove(el.id);
-      for (const run of runs) {
-        ctx.store.add(
-          createStroke({
-            points: run,
-            color: el.color,
-            width: el.width,
-            opacity: el.opacity,
-            layerId: el.layerId,
-            zIndex: el.zIndex,
-            position: el.position
-          })
-        );
-      }
-      erased = true;
-    }
-    if (erased) ctx.requestRender();
+    if (!this.panning) return;
+    const dx = state.x - this.lastScreen.x;
+    const dy = state.y - this.lastScreen.y;
+    this.lastScreen = { x: state.x, y: state.y };
+    ctx.camera.pan(dx, dy);
   }
-  strokeIntersects(stroke, point, worldRadius) {
-    return hitTestStroke(stroke, point, worldRadius);
+  onPointerUp(_state, ctx) {
+    this.panning = false;
+    ctx.setCursor?.("grab");
   }
 };
 
-// src/elements/group.ts
-function expandToGroups(ids, elements) {
-  const byId = new Map(elements.map((e) => [e.id, e]));
-  const groupIds = /* @__PURE__ */ new Set();
-  for (const id of ids) {
-    const g = byId.get(id)?.groupId;
-    if (g) groupIds.add(g);
+// src/tools/pencil-tool.ts
+var MIN_POINTS_FOR_STROKE = 2;
+var DEFAULT_SMOOTHING = 1.5;
+var DEFAULT_PRESSURE = 0.5;
+var DEFAULT_MIN_POINT_DISTANCE = 3;
+var DEFAULT_PROGRESSIVE_THRESHOLD = 200;
+var PROGRESSIVE_HOT_ZONE = 30;
+var PencilTool = class {
+  name;
+  drawing = false;
+  points = [];
+  color;
+  width;
+  smoothing;
+  minPointDistance;
+  progressiveThreshold;
+  nextSimplifyAt;
+  opacity;
+  blendMode;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.name = options.name ?? "pencil";
+    this.color = options.color ?? "#000000";
+    this.width = options.width ?? 2;
+    this.smoothing = options.smoothing ?? DEFAULT_SMOOTHING;
+    this.minPointDistance = options.minPointDistance ?? DEFAULT_MIN_POINT_DISTANCE;
+    this.progressiveThreshold = options.progressiveSimplifyThreshold ?? DEFAULT_PROGRESSIVE_THRESHOLD;
+    this.nextSimplifyAt = this.progressiveThreshold;
+    this.opacity = options.opacity ?? 1;
+    this.blendMode = options.blendMode;
   }
-  if (groupIds.size === 0) return ids;
-  const idSet = new Set(ids);
-  const result = [...ids];
-  for (const el of elements) {
-    if (el.groupId && groupIds.has(el.groupId) && !idSet.has(el.id)) {
-      result.push(el.id);
-      idSet.add(el.id);
-    }
+  onActivate(ctx) {
+    ctx.setCursor?.("crosshair");
   }
-  return result;
-}
-
-// src/tools/arrow-handles.ts
-var BIND_THRESHOLD = 20;
-var HANDLE_RADIUS = 5;
-var HANDLE_HIT_PADDING = 4;
-var ARROW_HANDLE_CURSORS = {
-  start: "crosshair",
-  end: "crosshair",
-  mid: "grab"
-};
-function getArrowHandleCursor(handle, active) {
-  if (handle === "mid" && active) return "grabbing";
-  return ARROW_HANDLE_CURSORS[handle];
-}
-function getArrowHandlePositions(arrow) {
-  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
-  return [
-    ["start", arrow.from],
-    ["mid", mid],
-    ["end", arrow.to]
-  ];
-}
-function hitTestArrowHandles(world, selectedIds, ctx) {
-  if (selectedIds.length === 0) return null;
-  const zoom = ctx.camera.zoom;
-  const hitRadius = (HANDLE_RADIUS + HANDLE_HIT_PADDING) / zoom;
-  for (const id of selectedIds) {
-    const el = ctx.store.getById(id);
-    if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false))
-      continue;
-    const handles = getArrowHandlePositions(el);
-    for (const [handle, pos] of handles) {
-      const dx = world.x - pos.x;
-      const dy = world.y - pos.y;
-      if (dx * dx + dy * dy <= hitRadius * hitRadius) {
-        return { elementId: id, handle };
-      }
-    }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
   }
-  return null;
-}
-function applyArrowHandleDrag(handle, elementId, world, ctx) {
-  const el = ctx.store.getById(elementId);
-  if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false)) return;
-  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
-  const layerFilter = (candidate) => candidate.layerId === el.layerId;
-  switch (handle) {
-    case "start": {
-      const excludeId = el.toBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
-      if (target) {
-        const center2 = getElementCenter(target);
-        ctx.store.update(elementId, {
-          from: center2,
-          position: center2,
-          fromBinding: { elementId: target.id }
-        });
-      } else {
-        ctx.store.update(elementId, {
-          from: { x: world.x, y: world.y },
-          position: { x: world.x, y: world.y },
-          fromBinding: void 0
-        });
-      }
-      break;
-    }
-    case "end": {
-      const excludeId = el.fromBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
-      if (target) {
-        const center2 = getElementCenter(target);
-        ctx.store.update(elementId, {
-          to: center2,
-          toBinding: { elementId: target.id }
-        });
-      } else {
-        ctx.store.update(elementId, {
-          to: { x: world.x, y: world.y },
-          toBinding: void 0
-        });
-      }
-      break;
-    }
-    case "mid": {
-      const bend = getBendFromPoint(el.from, el.to, world);
-      ctx.store.update(elementId, { bend });
-      break;
-    }
+  getOptions() {
+    return {
+      color: this.color,
+      width: this.width,
+      smoothing: this.smoothing,
+      minPointDistance: this.minPointDistance,
+      progressiveSimplifyThreshold: this.progressiveThreshold,
+      opacity: this.opacity,
+      blendMode: this.blendMode
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
   }
-  ctx.requestRender();
-}
-function getArrowHandleDragTarget(handle, elementId, world, ctx) {
-  if (handle === "mid") return null;
-  const el = ctx.store.getById(elementId);
-  if (!el || el.type !== "arrow" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false)) {
-    return null;
+  setOptions(options) {
+    if (options.color !== void 0) this.color = options.color;
+    if (options.width !== void 0) this.width = options.width;
+    if (options.smoothing !== void 0) this.smoothing = options.smoothing;
+    if (options.minPointDistance !== void 0) this.minPointDistance = options.minPointDistance;
+    if (options.progressiveSimplifyThreshold !== void 0)
+      this.progressiveThreshold = options.progressiveSimplifyThreshold;
+    if (options.opacity !== void 0) this.opacity = options.opacity;
+    if (options.blendMode !== void 0) this.blendMode = options.blendMode;
+    this.notifyOptionsChange();
   }
-  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
-  const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
-  const layerFilter = (candidate) => candidate.layerId === el.layerId;
-  const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
-  if (!target) return null;
-  return getElementBounds(target);
-}
-function renderArrowHandles(canvasCtx, arrow, zoom) {
-  const radius = HANDLE_RADIUS / zoom;
-  const handles = getArrowHandlePositions(arrow);
-  canvasCtx.setLineDash([]);
-  canvasCtx.lineWidth = 1.5 / zoom;
-  for (const [handle, pos] of handles) {
-    canvasCtx.fillStyle = handle === "mid" ? "#2196F3" : "#ffffff";
-    canvasCtx.strokeStyle = "#2196F3";
-    canvasCtx.beginPath();
-    canvasCtx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
-    canvasCtx.fill();
-    canvasCtx.stroke();
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    this.points = [{ x: world.x, y: world.y, pressure }];
+    this.nextSimplifyAt = this.progressiveThreshold;
   }
-}
-function renderArrowHoverHandle(canvasCtx, arrow, zoom) {
-  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
-  const radius = HANDLE_RADIUS / zoom;
-  canvasCtx.fillStyle = "#2196F3";
-  canvasCtx.strokeStyle = "#2196F3";
-  canvasCtx.lineWidth = 1.5 / zoom;
-  canvasCtx.beginPath();
-  canvasCtx.arc(mid.x, mid.y, radius, 0, Math.PI * 2);
-  canvasCtx.fill();
-  canvasCtx.stroke();
-}
-
-// src/elements/snap-guides.ts
-function xAnchors(b) {
-  return { lo: b.x, mid: b.x + b.w / 2, hi: b.x + b.w };
-}
-function yAnchors(b) {
-  return { lo: b.y, mid: b.y + b.h / 2, hi: b.y + b.h };
-}
-function bestAxisSnap(moving, targets, anchorsFn, threshold) {
-  let best = null;
-  for (const t of targets) {
-    const ta = anchorsFn(t);
-    const pairs = [
-      // colinear alignment: same-type edges/centers line up
-      [ta.lo - moving.lo, ta.lo],
-      [ta.mid - moving.mid, ta.mid],
-      [ta.hi - moving.hi, ta.hi],
-      // abutment: the moving box sits flush against the target's opposite edge
-      [ta.lo - moving.hi, ta.lo],
-      [ta.hi - moving.lo, ta.hi]
-    ];
-    for (const [delta, position] of pairs) {
-      const abs = Math.abs(delta);
-      if (abs <= threshold && (best === null || abs < Math.abs(best.delta))) {
-        best = { delta, position };
-      }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    const last = this.points[this.points.length - 1];
+    if (last) {
+      const dx = world.x - last.x;
+      const dy = world.y - last.y;
+      if (dx * dx + dy * dy < this.minPointDistance * this.minPointDistance) return;
+    }
+    this.points.push({ x: world.x, y: world.y, pressure });
+    if (this.points.length > this.nextSimplifyAt) {
+      const hotZone = this.points.slice(-PROGRESSIVE_HOT_ZONE);
+      const coldZone = this.points.slice(0, -PROGRESSIVE_HOT_ZONE);
+      const simplified = simplifyPoints(coldZone, this.smoothing * 2);
+      this.points = [...simplified, ...hotZone];
+      this.nextSimplifyAt = this.points.length + this.progressiveThreshold;
     }
+    ctx.requestRender();
   }
-  return best;
-}
-function computeSnapGuides(moving, targets, threshold) {
-  const xSnap = bestAxisSnap(xAnchors(moving), targets, xAnchors, threshold);
-  const ySnap = bestAxisSnap(yAnchors(moving), targets, yAnchors, threshold);
-  const guides = [];
-  if (xSnap) guides.push({ axis: "x", position: xSnap.position });
-  if (ySnap) guides.push({ axis: "y", position: ySnap.position });
-  return { dx: xSnap?.delta ?? 0, dy: ySnap?.delta ?? 0, guides };
-}
-
-// src/tools/select-overlay.ts
-var HANDLE_SIZE = 8;
-var HANDLE_HIT_PADDING2 = 4;
-var SELECTION_PAD = 4;
-var ROTATE_HANDLE_OFFSET = 24;
-var ROTATABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape", "stroke"]);
-var HANDLE_CURSORS = {
-  nw: "nwse-resize",
-  se: "nwse-resize",
-  ne: "nesw-resize",
-  sw: "nesw-resize"
-};
-function getOverlayLayout(el, zoom) {
-  const bounds = getElementBounds(el);
-  if (!bounds) return null;
-  const angle = el.rotation ?? 0;
-  const pad = SELECTION_PAD / zoom;
-  const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
-  const raw = [
-    ["nw", { x: bounds.x - pad, y: bounds.y - pad }],
-    ["ne", { x: bounds.x + bounds.w + pad, y: bounds.y - pad }],
-    ["sw", { x: bounds.x - pad, y: bounds.y + bounds.h + pad }],
-    ["se", { x: bounds.x + bounds.w + pad, y: bounds.y + bounds.h + pad }]
-  ];
-  const corners = raw.map(
-    ([h, p]) => [h, rotatePoint(p, center2, angle)]
-  );
-  const topMid = { x: center2.x, y: bounds.y - pad - ROTATE_HANDLE_OFFSET / zoom };
-  const rotateHandle = rotatePoint(topMid, center2, angle);
-  return { center: center2, corners, rotateHandle, angle };
-}
-function templateAimKnob(el, zoom) {
-  if (el.type !== "template") return null;
-  if (el.templateShape !== "cone" && el.templateShape !== "line" && el.templateShape !== "rectangle")
-    return null;
-  const gap = ROTATE_HANDLE_OFFSET / zoom;
-  const dist = el.radius + gap;
-  const origin = el.position;
-  return {
-    origin,
-    knob: {
-      x: origin.x + dist * Math.cos(el.angle),
-      y: origin.y + dist * Math.sin(el.angle)
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    if (this.points.length < MIN_POINTS_FOR_STROKE) {
+      this.points = [];
+      return;
     }
-  };
-}
-function getHandlePositions(bounds) {
-  return [
-    ["nw", { x: bounds.x, y: bounds.y }],
-    ["ne", { x: bounds.x + bounds.w, y: bounds.y }],
-    ["sw", { x: bounds.x, y: bounds.y + bounds.h }],
-    ["se", { x: bounds.x + bounds.w, y: bounds.y + bounds.h }]
-  ];
-}
-function topMidpoint(layout) {
-  const nw = layout.corners.find(([h]) => h === "nw")?.[1] ?? { x: 0, y: 0 };
-  const ne = layout.corners.find(([h]) => h === "ne")?.[1] ?? { x: 0, y: 0 };
-  return { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
-}
-function drawLockBadge(ctx, at, zoom) {
-  const r = 9 / zoom;
-  ctx.save();
-  ctx.setLineDash([]);
-  ctx.beginPath();
-  ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
-  ctx.fillStyle = "#ffffff";
-  ctx.fill();
-  ctx.strokeStyle = "#2196F3";
-  ctx.lineWidth = 1.5 / zoom;
-  ctx.stroke();
-  const bw = 8 / zoom;
-  const bh = 6 / zoom;
-  ctx.fillStyle = "#2196F3";
-  ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
-  ctx.beginPath();
-  ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
-  ctx.lineWidth = 1.4 / zoom;
-  ctx.stroke();
-  ctx.restore();
-}
-function renderMarquee(ctx, rect) {
-  ctx.save();
-  ctx.strokeStyle = "#2196F3";
-  ctx.fillStyle = "rgba(33, 150, 243, 0.08)";
-  ctx.lineWidth = 1;
-  ctx.setLineDash([4, 4]);
-  ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
-  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
-  ctx.restore();
-}
-function renderBindingHighlights(ctx, arrow, zoom, store) {
-  if (!arrow.fromBinding && !arrow.toBinding) return;
-  const pad = SELECTION_PAD / zoom;
-  ctx.save();
-  ctx.strokeStyle = "#2196F3";
-  ctx.lineWidth = 2 / zoom;
-  ctx.setLineDash([]);
-  const drawn = /* @__PURE__ */ new Set();
-  for (const binding of [arrow.fromBinding, arrow.toBinding]) {
-    if (!binding || drawn.has(binding.elementId)) continue;
-    drawn.add(binding.elementId);
-    const target = store.getById(binding.elementId);
-    if (!target) continue;
-    const bounds = getElementBounds(target);
-    if (!bounds) continue;
-    ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+    const simplified = simplifyPoints(this.points, this.smoothing);
+    const stroke = createStroke({
+      points: simplified,
+      color: this.color,
+      width: this.width,
+      layerId: ctx.activeLayerId ?? "",
+      opacity: this.opacity,
+      blendMode: this.blendMode
+    });
+    ctx.store.add(stroke);
+    computeStrokeSegments(stroke);
+    this.points = [];
+    ctx.requestRender();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing || this.points.length < 2) return;
+    ctx.save();
+    ctx.strokeStyle = this.color;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.globalAlpha = this.blendMode ? this.opacity : 0.8;
+    if (this.blendMode) ctx.globalCompositeOperation = this.blendMode;
+    const segments = smoothToSegments(this.points);
+    for (const seg of segments) {
+      const w = (pressureToWidth(seg.start.pressure, this.width) + pressureToWidth(seg.end.pressure, this.width)) / 2;
+      ctx.lineWidth = w;
+      ctx.beginPath();
+      ctx.moveTo(seg.start.x, seg.start.y);
+      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+      ctx.stroke();
+    }
+    ctx.restore();
   }
-  ctx.restore();
+};
+
+// src/elements/stroke-erase.ts
+function lerp2(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    pressure: a.pressure + (b.pressure - a.pressure) * t
+  };
 }
-function renderSelectionBoxes(ctx, p) {
-  if (p.selectedIds.length === 0) return;
-  const zoom = p.zoom;
-  const handleWorldSize = HANDLE_SIZE / zoom;
-  ctx.save();
-  ctx.strokeStyle = "#2196F3";
-  ctx.lineWidth = 1.5 / zoom;
-  ctx.setLineDash([4 / zoom, 4 / zoom]);
-  for (const id of p.selectedIds) {
-    const el = p.store.getById(id);
-    if (!el) continue;
-    const locked = el.locked || (p.isLayerLocked?.(el.layerId) ?? false);
-    if (el.type === "arrow") {
-      if (!locked) renderArrowHandles(ctx, el, zoom);
-      renderBindingHighlights(ctx, el, zoom, p.store);
-      continue;
-    }
-    if (el.type === "shape" && el.shape === "line") {
-      if (!locked) {
-        ctx.setLineDash([]);
-        ctx.fillStyle = "#ffffff";
-        const r = handleWorldSize / 2;
-        for (const pt of lineEndpoints(el)) {
-          ctx.beginPath();
-          ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
-          ctx.fill();
-          ctx.stroke();
-        }
-        ctx.setLineDash([4 / zoom, 4 / zoom]);
+function erasePoints(points, eraser, radius) {
+  const r2 = radius * radius;
+  if (points.length < 2) {
+    const p = points[0];
+    if (p && (p.x - eraser.x) ** 2 + (p.y - eraser.y) ** 2 <= r2) return [];
+    return null;
+  }
+  const runs = [];
+  let current = [];
+  let erased = false;
+  const flush = () => {
+    if (current.length >= 2) runs.push(current);
+    current = [];
+  };
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const fx = a.x - eraser.x;
+    const fy = a.y - eraser.y;
+    const A = dx * dx + dy * dy;
+    const B = 2 * (fx * dx + fy * dy);
+    const C = fx * fx + fy * fy - r2;
+    let tLo = 1;
+    let tHi = 0;
+    if (A === 0) {
+      if (C <= 0) {
+        tLo = 0;
+        tHi = 1;
       }
-      continue;
-    }
-    const bounds = getElementBounds(el);
-    if (!bounds) continue;
-    const layout = getOverlayLayout(el, zoom);
-    if (!layout) continue;
-    const pad = SELECTION_PAD / zoom;
-    if (layout.angle === 0) {
-      ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
     } else {
-      const ordered = ["nw", "ne", "se", "sw"].map((h) => layout.corners.find(([c]) => c === h)?.[1]).filter((pp) => !!pp);
-      const [p0, ...others] = ordered;
-      if (p0) {
-        ctx.beginPath();
-        ctx.moveTo(p0.x, p0.y);
-        for (const pp of others) ctx.lineTo(pp.x, pp.y);
-        ctx.closePath();
-        ctx.stroke();
-      }
-    }
-    if (!el.locked) {
-      if ("size" in el) {
-        ctx.setLineDash([]);
-        ctx.fillStyle = "#ffffff";
-        const corners = layout.angle === 0 ? getHandlePositions(bounds) : layout.corners;
-        for (const [, pos] of corners) {
-          ctx.fillRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-          ctx.strokeRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-        }
-        ctx.setLineDash([4 / zoom, 4 / zoom]);
-      } else if (el.type === "template") {
-        ctx.setLineDash([]);
-        ctx.fillStyle = "#ffffff";
-        if (el.templateShape === "rectangle") {
-          if (p.selectedIds.length === 1) {
-            const cos = Math.cos(el.angle);
-            const sin = Math.sin(el.angle);
-            const halfW = (el.width ?? 0) / 2;
-            const pts = [
-              [el.position.x + el.radius * cos, el.position.y + el.radius * sin],
-              [
-                el.position.x + el.radius / 2 * cos + halfW * -sin,
-                el.position.y + el.radius / 2 * sin + halfW * cos
-              ]
-            ];
-            for (const [hx, hy] of pts) {
-              ctx.fillRect(
-                hx - handleWorldSize / 2,
-                hy - handleWorldSize / 2,
-                handleWorldSize,
-                handleWorldSize
-              );
-              ctx.strokeRect(
-                hx - handleWorldSize / 2,
-                hy - handleWorldSize / 2,
-                handleWorldSize,
-                handleWorldSize
-              );
-            }
-          }
-        } else {
-          const hx = bounds.x + bounds.w;
-          const hy = bounds.y + bounds.h;
-          ctx.fillRect(
-            hx - handleWorldSize / 2,
-            hy - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-          ctx.strokeRect(
-            hx - handleWorldSize / 2,
-            hy - handleWorldSize / 2,
-            handleWorldSize,
-            handleWorldSize
-          );
-        }
-        ctx.setLineDash([4 / zoom, 4 / zoom]);
-        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line" || el.templateShape === "rectangle")) {
-          const aim = templateAimKnob(el, zoom);
-          if (aim) {
-            ctx.beginPath();
-            ctx.moveTo(aim.origin.x, aim.origin.y);
-            ctx.lineTo(aim.knob.x, aim.knob.y);
-            ctx.stroke();
-            ctx.setLineDash([]);
-            ctx.fillStyle = "#ffffff";
-            ctx.beginPath();
-            ctx.arc(aim.knob.x, aim.knob.y, handleWorldSize / 2, 0, Math.PI * 2);
-            ctx.fill();
-            ctx.stroke();
-            ctx.setLineDash([4 / zoom, 4 / zoom]);
-          }
+      const disc = B * B - 4 * A * C;
+      if (disc >= 0) {
+        const sq = Math.sqrt(disc);
+        const lo = Math.max(0, (-B - sq) / (2 * A));
+        const hi = Math.min(1, (-B + sq) / (2 * A));
+        if (lo < hi) {
+          tLo = lo;
+          tHi = hi;
         }
       }
-      if (p.selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
-        const stemStart = topMidpoint(layout);
-        const stemEnd = layout.rotateHandle;
-        ctx.beginPath();
-        ctx.moveTo(stemStart.x, stemStart.y);
-        ctx.lineTo(stemEnd.x, stemEnd.y);
-        ctx.stroke();
-        ctx.setLineDash([]);
-        ctx.fillStyle = "#ffffff";
-        ctx.beginPath();
-        ctx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-        ctx.setLineDash([4 / zoom, 4 / zoom]);
-      }
     }
-    if (el.locked) {
-      const ne = layout.corners.find(([h]) => h === "ne")?.[1];
-      if (ne) drawLockBadge(ctx, ne, zoom);
+    if (tLo > tHi) {
+      if (current.length === 0) current.push(a);
+      current.push(b);
+      continue;
     }
-  }
-  ctx.restore();
-}
-function renderGuideLines(ctx, p) {
-  const zoom = p.zoom;
-  const rect = p.rect;
-  ctx.save();
-  ctx.strokeStyle = "#FF4081";
-  ctx.lineWidth = 1 / zoom;
-  ctx.setLineDash([]);
-  for (const g of p.guides) {
-    ctx.beginPath();
-    if (g.axis === "x") {
-      const y0 = rect ? rect.y : p.currentWorld.y - 1e5;
-      const y1 = rect ? rect.y + rect.h : p.currentWorld.y + 1e5;
-      ctx.moveTo(g.position, y0);
-      ctx.lineTo(g.position, y1);
+    erased = true;
+    if (tLo > 0) {
+      if (current.length === 0) current.push(a);
+      current.push(lerp2(a, b, tLo));
+      flush();
     } else {
-      const x0 = rect ? rect.x : p.currentWorld.x - 1e5;
-      const x1 = rect ? rect.x + rect.w : p.currentWorld.x + 1e5;
-      ctx.moveTo(x0, g.position);
-      ctx.lineTo(x1, g.position);
+      flush();
+    }
+    if (tHi < 1) {
+      current = [lerp2(a, b, tHi), b];
     }
-    ctx.stroke();
   }
-  ctx.restore();
+  flush();
+  return erased ? runs : null;
 }
 
-// src/tools/select-hit.ts
-function hitTest(world, ctx) {
-  const r = 10;
-  const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
-  for (const el of candidates) {
-    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
-    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-    if (el.type === "grid") continue;
-    if (isInsideBounds(world, el)) return el;
+// src/tools/eraser-tool.ts
+var DEFAULT_RADIUS3 = 20;
+function makeEraserCursor(radius) {
+  const size = radius * 2;
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><circle cx='${radius}' cy='${radius}' r='${radius - 1}' fill='none' stroke='%23666' stroke-width='1.5'/></svg>`;
+  return `url("data:image/svg+xml,${svg}") ${radius} ${radius}, crosshair`;
+}
+var EraserTool = class {
+  name = "eraser";
+  erasing = false;
+  radius;
+  cursor;
+  mode;
+  constructor(options = {}) {
+    this.radius = options.radius ?? DEFAULT_RADIUS3;
+    this.cursor = makeEraserCursor(this.radius);
+    this.mode = options.mode ?? "partial";
   }
-  return null;
-}
-function isInsideBounds(point, el) {
-  if (el.type === "grid") return false;
-  const angle = el.rotation ?? 0;
-  if (angle !== 0) {
-    const b = getElementBounds(el);
-    if (b) {
-      point = rotatePoint(point, { x: b.x + b.w / 2, y: b.y + b.h / 2 }, -angle);
+  getOptions() {
+    return { radius: this.radius, mode: this.mode };
+  }
+  setOptions(options) {
+    if (options.mode !== void 0) this.mode = options.mode;
+    if (options.radius !== void 0) {
+      this.radius = options.radius;
+      this.cursor = makeEraserCursor(this.radius);
     }
   }
-  if (el.type === "shape" && el.shape === "line") {
-    const [a, b] = lineEndpoints(el);
-    const threshold = Math.max(el.strokeWidth / 2, 6);
-    return distSqToSegment(point, a, b) <= threshold * threshold;
+  onActivate(ctx) {
+    ctx.setCursor?.(this.cursor);
   }
-  if ("size" in el) {
-    const s = el.size;
-    return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
   }
-  if (el.type === "stroke") {
-    return hitTestStroke(el, point, 10);
+  onPointerDown(state, ctx) {
+    this.erasing = true;
+    this.eraseAt(state, ctx);
   }
-  if (el.type === "arrow") {
-    return isNearBezier(point, el.from, el.to, el.bend, 10);
+  onPointerMove(state, ctx) {
+    if (!this.erasing) return;
+    this.eraseAt(state, ctx);
   }
-  if (el.type === "template") {
-    const bounds = getElementBounds(el);
-    if (!bounds) return false;
-    return point.x >= bounds.x && point.x <= bounds.x + bounds.w && point.y >= bounds.y && point.y <= bounds.y + bounds.h;
+  onPointerUp(_state, _ctx) {
+    this.erasing = false;
   }
-  return false;
-}
-function hitTestResizeHandle(world, ctx, selectedIds) {
-  if (selectedIds.length === 0) return null;
-  const zoom = ctx.camera.zoom;
-  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-  for (const id of selectedIds) {
-    const el = ctx.store.getById(id);
-    if (!el || !("size" in el)) continue;
-    if (el.locked) continue;
-    if (el.type === "shape" && el.shape === "line") continue;
-    const layout = getOverlayLayout(el, zoom);
-    if (!layout) continue;
-    for (const [handle, pos] of layout.corners) {
-      if (Math.abs(world.x - pos.x) <= handleHalf && Math.abs(world.y - pos.y) <= handleHalf) {
-        return { elementId: id, handle };
+  eraseAt(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const worldRadius = this.radius / ctx.camera.zoom;
+    const queryBounds = {
+      x: world.x - worldRadius,
+      y: world.y - worldRadius,
+      w: worldRadius * 2,
+      h: worldRadius * 2
+    };
+    const candidates = ctx.store.queryRect(queryBounds);
+    let erased = false;
+    for (const el of candidates) {
+      if (el.type !== "stroke") continue;
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (!this.strokeIntersects(el, world, worldRadius)) continue;
+      if (this.mode === "stroke") {
+        ctx.store.remove(el.id);
+        erased = true;
+        continue;
+      }
+      const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
+      const runs = erasePoints(el.points, localEraser, worldRadius);
+      if (runs === null) continue;
+      ctx.store.remove(el.id);
+      for (const run of runs) {
+        ctx.store.add(
+          createStroke({
+            points: run,
+            color: el.color,
+            width: el.width,
+            opacity: el.opacity,
+            layerId: el.layerId,
+            zIndex: el.zIndex,
+            position: el.position
+          })
+        );
       }
+      erased = true;
     }
+    if (erased) ctx.requestRender();
   }
-  return null;
-}
-function hitTestRotateHandle(world, ctx, selectedIds) {
-  if (selectedIds.length !== 1) return null;
-  const id = selectedIds[0];
-  if (!id) return null;
-  const el = ctx.store.getById(id);
-  if (!el || el.locked || !ROTATABLE_TYPES.has(el.type)) return null;
-  const layout = getOverlayLayout(el, ctx.camera.zoom);
-  if (!layout) return null;
-  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
-  const dx = world.x - layout.rotateHandle.x;
-  const dy = world.y - layout.rotateHandle.y;
-  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
-}
-function hitTestLineHandles(world, ctx, selectedIds) {
-  if (selectedIds.length === 0) return null;
-  const zoom = ctx.camera.zoom;
-  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-  const r2 = r * r;
-  for (const id of selectedIds) {
-    const el = ctx.store.getById(id);
-    if (!el || el.type !== "shape" || el.shape !== "line" || el.locked || (ctx.isLayerLocked?.(el.layerId) ?? false))
-      continue;
-    const [a, b] = lineEndpoints(el);
-    if ((world.x - a.x) ** 2 + (world.y - a.y) ** 2 <= r2) return { elementId: id, fixed: b };
-    if ((world.x - b.x) ** 2 + (world.y - b.y) ** 2 <= r2) return { elementId: id, fixed: a };
+  strokeIntersects(stroke, point, worldRadius) {
+    return hitTestStroke(stroke, point, worldRadius);
   }
-  return null;
-}
-function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
-  if (selectedIds.length === 0) return null;
-  const zoom = ctx.camera.zoom;
-  const handleHalf = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-  for (const id of selectedIds) {
-    const el = ctx.store.getById(id);
-    if (!el || el.type !== "template") continue;
-    if (el.templateShape === "rectangle") continue;
-    const bounds = getElementBounds(el);
-    if (!bounds) continue;
-    const hx = bounds.x + bounds.w;
-    const hy = bounds.y + bounds.h;
-    if (Math.abs(world.x - hx) <= handleHalf && Math.abs(world.y - hy) <= handleHalf) {
-      return id;
+};
+
+// src/elements/group.ts
+function expandToGroups(ids, elements) {
+  const byId = new Map(elements.map((e) => [e.id, e]));
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const id of ids) {
+    const g = byId.get(id)?.groupId;
+    if (g) groupIds.add(g);
+  }
+  if (groupIds.size === 0) return ids;
+  const idSet = new Set(ids);
+  const result = [...ids];
+  for (const el of elements) {
+    if (el.groupId && groupIds.has(el.groupId) && !idSet.has(el.id)) {
+      result.push(el.id);
+      idSet.add(el.id);
     }
   }
-  return null;
-}
-function hitTestTemplateAimHandle(world, ctx, selectedIds) {
-  if (selectedIds.length !== 1) return null;
-  const id = selectedIds[0];
-  if (!id) return null;
-  const el = ctx.store.getById(id);
-  if (!el || el.locked) return null;
-  const knob = templateAimKnob(el, ctx.camera.zoom);
-  if (!knob) return null;
-  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
-  const dx = world.x - knob.knob.x;
-  const dy = world.y - knob.knob.y;
-  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+  return result;
 }
-function hitTestRectangleLengthHandle(world, ctx, selectedIds) {
-  if (selectedIds.length !== 1) return null;
-  const id = selectedIds[0];
-  if (!id) return null;
-  const el = ctx.store.getById(id);
-  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
-  const zoom = ctx.camera.zoom;
-  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-  const hx = el.position.x + el.radius * Math.cos(el.angle);
-  const hy = el.position.y + el.radius * Math.sin(el.angle);
-  const dx = world.x - hx;
-  const dy = world.y - hy;
-  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+
+// src/elements/snap-guides.ts
+function xAnchors(b) {
+  return { lo: b.x, mid: b.x + b.w / 2, hi: b.x + b.w };
 }
-function hitTestRectangleWidthHandle(world, ctx, selectedIds) {
-  if (selectedIds.length !== 1) return null;
-  const id = selectedIds[0];
-  if (!id) return null;
-  const el = ctx.store.getById(id);
-  if (!el || el.locked || el.type !== "template" || el.templateShape !== "rectangle") return null;
-  const zoom = ctx.camera.zoom;
-  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
-  const cos = Math.cos(el.angle);
-  const sin = Math.sin(el.angle);
-  const halfW = (el.width ?? 0) / 2;
-  const hx = el.position.x + el.radius / 2 * cos + halfW * -sin;
-  const hy = el.position.y + el.radius / 2 * sin + halfW * cos;
-  const dx = world.x - hx;
-  const dy = world.y - hy;
-  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+function yAnchors(b) {
+  return { lo: b.y, mid: b.y + b.h / 2, hi: b.y + b.h };
 }
-function findElementsInRect(marquee, ctx) {
-  const candidates = ctx.store.queryRect(marquee);
-  const ids = [];
-  for (const el of candidates) {
-    if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
-    if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-    if (el.type === "grid") continue;
-    const bounds = getElementBounds(el);
-    if (bounds && rectsOverlap(marquee, rotatedAABB(bounds, el.rotation ?? 0))) {
-      ids.push(el.id);
+function bestAxisSnap(moving, targets, anchorsFn, threshold) {
+  let best = null;
+  for (const t of targets) {
+    const ta = anchorsFn(t);
+    const pairs = [
+      // colinear alignment: same-type edges/centers line up
+      [ta.lo - moving.lo, ta.lo],
+      [ta.mid - moving.mid, ta.mid],
+      [ta.hi - moving.hi, ta.hi],
+      // abutment: the moving box sits flush against the target's opposite edge
+      [ta.lo - moving.hi, ta.lo],
+      [ta.hi - moving.lo, ta.hi]
+    ];
+    for (const [delta, position] of pairs) {
+      const abs = Math.abs(delta);
+      if (abs <= threshold && (best === null || abs < Math.abs(best.delta))) {
+        best = { delta, position };
+      }
     }
   }
-  return ids;
+  return best;
 }
-function rectsOverlap(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;
+function computeSnapGuides(moving, targets, threshold) {
+  const xSnap = bestAxisSnap(xAnchors(moving), targets, xAnchors, threshold);
+  const ySnap = bestAxisSnap(yAnchors(moving), targets, yAnchors, threshold);
+  const guides = [];
+  if (xSnap) guides.push({ axis: "x", position: xSnap.position });
+  if (ySnap) guides.push({ axis: "y", position: ySnap.position });
+  return { dx: xSnap?.delta ?? 0, dy: ySnap?.delta ?? 0, guides };
 }
 
 // src/tools/select-resize.ts
@@ -12937,7 +13962,7 @@ var PingTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.61.0";
+var VERSION = "0.62.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -12950,6 +13975,8 @@ var VERSION = "0.61.0";
   FOCUS_PRESENCE_KIND,
   HandTool,
   HistoryStack,
+  HtmlPainterMissingError,
+  HtmlPainterRegistry,
   ImageTool,
   IndexedDBAdapter,
   LASER_TRAIL_PRESENCE_KIND,
@@ -13013,6 +14040,7 @@ var VERSION = "0.61.0";
   isMeasurePresence,
   isNearBezier,
   isPingPresence,
+  resolveHtmlRouting,
   setFontSize,
   smartSnap,
   snapPoint,