@fieldnotes/core 0.59.0 → 0.61.0

package/dist/index.cjs

@@ -23,9 +23,11 @@ __export(index_exports, {
   ArrowTool: () => ArrowTool,
   AutoSave: () => AutoSave,
   Camera: () => Camera,
+  CameraAnimator: () => CameraAnimator,
   DEFAULT_NOTE_FONT_SIZE: () => DEFAULT_NOTE_FONT_SIZE,
   ElementStore: () => ElementStore,
   EraserTool: () => EraserTool,
+  FOCUS_PRESENCE_KIND: () => FOCUS_PRESENCE_KIND,
   HandTool: () => HandTool,
   HistoryStack: () => HistoryStack,
   ImageTool: () => ImageTool,
@@ -43,6 +45,7 @@ __export(index_exports, {
   PencilTool: () => PencilTool,
   PingInput: () => PingInput,
   PingTool: () => PingTool,
+  RemoteFocusReceiver: () => RemoteFocusReceiver,
   RemoteLaserOverlay: () => RemoteLaserOverlay,
   RemoteMeasureOverlay: () => RemoteMeasureOverlay,
   RemotePingOverlay: () => RemotePingOverlay,
@@ -53,7 +56,10 @@ __export(index_exports, {
   ToolManager: () => ToolManager,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
+  applyCameraView: () => applyCameraView,
   boundsIntersect: () => boundsIntersect,
+  cameraOriginForView: () => cameraOriginForView,
+  captureCameraView: () => captureCameraView,
   createArrow: () => createArrow,
   createGrid: () => createGrid,
   createHtmlElement: () => createHtmlElement,
@@ -66,6 +72,7 @@ __export(index_exports, {
   drawHexPath: () => drawHexPath,
   exportImage: () => exportImage,
   exportSvg: () => exportSvg,
+  fitZoomForView: () => fitZoomForView,
   getActiveFormats: () => getActiveFormats,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
@@ -81,6 +88,7 @@ __export(index_exports, {
   getHexCellsInRectangle: () => getHexCellsInRectangle,
   getHexCellsInSquare: () => getHexCellsInSquare,
   getHexDistance: () => getHexDistance,
+  isFocusPresence: () => isFocusPresence,
   isLaserTrailPresence: () => isLaserTrailPresence,
   isMeasurePresence: () => isMeasurePresence,
   isNearBezier: () => isNearBezier,
@@ -90,6 +98,7 @@ __export(index_exports, {
   snapPoint: () => snapPoint,
   snapToHexCenter: () => snapToHexCenter,
   styleToPatch: () => styleToPatch,
+  toFocusPresence: () => toFocusPresence,
   toLaserTrailPresence: () => toLaserTrailPresence,
   toMeasurePresence: () => toMeasurePresence,
   toPingPresence: () => toPingPresence,
@@ -5272,6 +5281,7 @@ var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
   current = null;
   changeListeners = /* @__PURE__ */ new Set();
+  registerListeners = /* @__PURE__ */ new Set();
   get activeTool() {
     return this.current;
   }
@@ -5280,6 +5290,7 @@ var ToolManager = class {
   }
   register(tool) {
     this.tools.set(tool.name, tool);
+    this.registerListeners.forEach((fn) => fn(tool));
   }
   getTool(name) {
     return this.tools.get(name);
@@ -5305,6 +5316,10 @@ var ToolManager = class {
     this.changeListeners.add(listener);
     return () => this.changeListeners.delete(listener);
   }
+  onRegister(listener) {
+    this.registerListeners.add(listener);
+    return () => this.registerListeners.delete(listener);
+  }
 };
 
 // src/history/history-stack.ts
@@ -5496,6 +5511,7 @@ var HistoryRecorder = class {
   generation = 0;
   updateSnapshots = /* @__PURE__ */ new Map();
   unsubscribers;
+  transactionEndListeners = /* @__PURE__ */ new Set();
   pause() {
     this.recording = false;
   }
@@ -5513,19 +5529,35 @@ var HistoryRecorder = class {
   get currentTransactionId() {
     return this.transaction !== null ? this.generation : null;
   }
+  onTransactionEnd(listener) {
+    this.transactionEndListeners.add(listener);
+    return () => this.transactionEndListeners.delete(listener);
+  }
+  notifyTransactionEnd() {
+    for (const listener of this.transactionEndListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
   commit() {
     if (!this.transaction) return;
     const finalCommands = this.flushUpdateSnapshots();
     const all = [...this.transaction, ...finalCommands];
     this.transaction = null;
     this.updateSnapshots.clear();
-    if (all.length === 0) return;
-    const first = all[0];
-    this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    if (all.length > 0) {
+      const first = all[0];
+      this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    }
+    this.notifyTransactionEnd();
   }
   rollback() {
+    const wasOpen = this.transaction !== null;
     this.transaction = null;
     this.updateSnapshots.clear();
+    if (wasOpen) this.notifyTransactionEnd();
   }
   destroy() {
     this.unsubscribers.forEach((fn) => fn());
@@ -7817,6 +7849,14 @@ function rotateElementPatch(el, bounds, pivot, delta) {
 }
 
 // src/canvas/selection-ops.ts
+var STYLE_FIELDS = [
+  "color",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "fontSize",
+  "strokeStyle"
+];
 function sharedValue(values) {
   const present = values.filter((v) => v !== void 0);
   if (present.length === 0) return void 0;
@@ -7851,6 +7891,42 @@ var SelectionOps = class {
     if (strokeStyle !== void 0) result.strokeStyle = strokeStyle;
     return result;
   }
+  /**
+   * Unlike `getStyle()` — which returns `{}` for a selection whose elements
+   * have no applicable style fields (e.g. images) — this returns `null` when
+   * no field is applicable, so callers can distinguish "nothing to show" from
+   * "everything shared but empty".
+   */
+  getStyleDetails() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const common = {};
+    const applicable = [];
+    const mixed = [];
+    for (const field of STYLE_FIELDS) {
+      const allValues = styles.map((s) => s[field]);
+      const values = [];
+      for (const v of allValues) {
+        if (v !== void 0) values.push(v);
+      }
+      if (values.length === 0) continue;
+      applicable.push(field);
+      const distinct = new Set(values);
+      if (distinct.size > 1) {
+        mixed.push(field);
+      } else {
+        common[field] = values[0];
+      }
+    }
+    if (applicable.length === 0) return null;
+    return { common, applicable, mixed };
+  }
   applyStyle(style) {
     const ids = this.deps.getSelectedIds();
     if (ids.length === 0) return;
@@ -8225,7 +8301,7 @@ var ViewportInteractions = class {
 var EMPTY_IDS = [];
 function noop() {
 }
-var Viewport = class {
+var Viewport = class _Viewport {
   constructor(container, options = {}) {
     this.container = container;
     this.camera = new Camera(options.camera);
@@ -8234,6 +8310,13 @@ var Viewport = class {
     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);
@@ -8268,6 +8351,11 @@ var Viewport = class {
     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;
+      this.pendingSelectionPrune = false;
+      this.pruneSelection();
+    });
     this.selectionOps = new SelectionOps({
       store: this.store,
       recorder: this.historyRecorder,
@@ -8387,6 +8475,7 @@ var Viewport = class {
         this.domNodeManager.removeDomNode(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();
@@ -8401,6 +8490,7 @@ var Viewport = class {
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
         this.requestRender();
+        this.pruneSelection();
       })
     ];
     this.layerManager.on("change", () => {
@@ -8470,6 +8560,13 @@ var Viewport = class {
   minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   resizeListeners = /* @__PURE__ */ new Set();
+  selectionListeners = /* @__PURE__ */ new Set();
+  detachSelectionSource = null;
+  unsubToolRegister = () => {
+  };
+  pendingSelectionPrune = false;
+  unsubRecorderEnd = () => {
+  };
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -8498,6 +8595,17 @@ var Viewport = class {
   getVisibleRect() {
     return this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
   }
+  /**
+   * Size in CSS pixels of the canvas that `getVisibleRect()` measures.
+   * Exposed because `canvasEl` is private: consumers can only reach the
+   * wrapper (via `domLayer.parentElement`), so without this accessor the
+   * canonical size behind `getVisibleRect()` is unreachable and callers
+   * resort to `getVisibleRect().w * camera.zoom`. Capture and restore must
+   * measure the same element or saved views do not round-trip.
+   */
+  getCanvasSize() {
+    return { w: this.canvasEl.clientWidth, h: this.canvasEl.clientHeight };
+  }
   /** Centers the camera on a world point without changing zoom. */
   centerCameraAt(world) {
     const z = this.camera.zoom;
@@ -8728,6 +8836,42 @@ var Viewport = class {
   getSelectTool() {
     return this.toolManager.getTool("select");
   }
+  pruneSelection() {
+    const tool = this.getSelectTool();
+    if (!tool) return;
+    const ids = tool.selectedIds;
+    const filtered = ids.filter((id) => this.store.getById(id) !== void 0);
+    if (filtered.length !== ids.length) tool.setSelection(filtered);
+  }
+  handleRemovedElement(id) {
+    if (!this.getSelectedIds().includes(id)) return;
+    if (this.historyRecorder.currentTransactionId !== null) {
+      this.pendingSelectionPrune = true;
+      return;
+    }
+    this.pruneSelection();
+  }
+  static isSelectionSource(tool) {
+    const candidate = tool;
+    return tool.name === "select" && typeof candidate.onSelectionChange === "function" && typeof candidate.setSelection === "function";
+  }
+  emitSelectionChange() {
+    for (const listener of this.selectionListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+  attachSelectionSource(tool) {
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = tool.onSelectionChange(() => this.emitSelectionChange());
+  }
+  /**
+   * getSelectedIds() and the onSelectionChange emitter never surface stale ids:
+   * once the enclosing history transaction completes, both reflect
+   * the current selection.
+   */
   getSelectedIds() {
     return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
   }
@@ -8761,13 +8905,29 @@ var Viewport = class {
     if (items.length === 0) return;
     this.contextMenu.open(items, screenPos);
   }
+  /**
+   * Persistent, viewport-owned selection-change emitter. Subscribing works
+   * regardless of whether a select tool is registered yet; it forwards
+   * events from whichever select tool is currently attached via
+   * `toolManager.onRegister`. Never delivers stale ids once the enclosing
+   * history transaction completes.
+   */
   onSelectionChange(listener) {
-    const tool = this.getSelectTool();
-    return tool ? tool.onSelectionChange(listener) : noop;
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
   }
   getSelectionStyle() {
     return this.selectionOps.getStyle();
   }
+  /**
+   * Unlike `getSelectionStyle()` — which returns `{}` for a style-less
+   * selection — this returns `null` when no style field is applicable.
+   */
+  getSelectionStyleDetails() {
+    return this.selectionOps.getStyleDetails();
+  }
   applyStyleToSelection(style) {
     this.selectionOps.applyStyle(style);
   }
@@ -8816,6 +8976,11 @@ var Viewport = class {
     this.inputHandler.destroy();
     this.unsubCamera();
     this.unsubToolChange();
+    this.unsubToolRegister();
+    this.unsubRecorderEnd();
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = null;
+    this.selectionListeners.clear();
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
@@ -9589,6 +9754,361 @@ var PingInput = class {
   }
 };
 
+// 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.
+   */
+  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;
+  }
+  /**
+   * 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;
+  }
+  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");
+      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
+    };
+  }
+  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;
+  }
+  /** 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 {
+      }
+    }
+  }
+};
+
+// 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";
@@ -9777,7 +10297,7 @@ function hitTestStroke(stroke, point, radius) {
 }
 
 // src/elements/stroke-erase.ts
-function lerp(a, b, t) {
+function lerp2(a, b, t) {
   return {
     x: a.x + (b.x - a.x) * t,
     y: a.y + (b.y - a.y) * t,
@@ -9836,13 +10356,13 @@ function erasePoints(points, eraser, radius) {
     erased = true;
     if (tLo > 0) {
       if (current.length === 0) current.push(a);
-      current.push(lerp(a, b, tLo));
+      current.push(lerp2(a, b, tLo));
       flush();
     } else {
       flush();
     }
     if (tHi < 1) {
-      current = [lerp(a, b, tHi), b];
+      current = [lerp2(a, b, tHi), b];
     }
   }
   flush();
@@ -12298,7 +12818,7 @@ var LaserTool = class {
 
 // src/tools/ping-tool.ts
 var DEFAULT_COLOR6 = "#ff3b30";
-var DEFAULT_DURATION_MS3 = 1800;
+var DEFAULT_DURATION_MS4 = 1800;
 var DEFAULT_RADIUS4 = 48;
 var DEFAULT_MIN_INTERVAL_MS2 = 300;
 var PingTool = class {
@@ -12315,7 +12835,7 @@ var PingTool = class {
   constructor(options = {}) {
     this.name = options.name ?? "ping";
     this.color = options.color ?? DEFAULT_COLOR6;
-    this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS3;
+    this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS4;
     this.radius = options.radius ?? DEFAULT_RADIUS4;
     this.minIntervalMs = options.minIntervalMs ?? DEFAULT_MIN_INTERVAL_MS2;
   }
@@ -12417,15 +12937,17 @@ var PingTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.59.0";
+var VERSION = "0.61.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
   AutoSave,
   Camera,
+  CameraAnimator,
   DEFAULT_NOTE_FONT_SIZE,
   ElementStore,
   EraserTool,
+  FOCUS_PRESENCE_KIND,
   HandTool,
   HistoryStack,
   ImageTool,
@@ -12443,6 +12965,7 @@ var VERSION = "0.59.0";
   PencilTool,
   PingInput,
   PingTool,
+  RemoteFocusReceiver,
   RemoteLaserOverlay,
   RemoteMeasureOverlay,
   RemotePingOverlay,
@@ -12453,7 +12976,10 @@ var VERSION = "0.59.0";
   ToolManager,
   VERSION,
   Viewport,
+  applyCameraView,
   boundsIntersect,
+  cameraOriginForView,
+  captureCameraView,
   createArrow,
   createGrid,
   createHtmlElement,
@@ -12466,6 +12992,7 @@ var VERSION = "0.59.0";
   drawHexPath,
   exportImage,
   exportSvg,
+  fitZoomForView,
   getActiveFormats,
   getArrowBounds,
   getArrowControlPoint,
@@ -12481,6 +13008,7 @@ var VERSION = "0.59.0";
   getHexCellsInRectangle,
   getHexCellsInSquare,
   getHexDistance,
+  isFocusPresence,
   isLaserTrailPresence,
   isMeasurePresence,
   isNearBezier,
@@ -12490,6 +13018,7 @@ var VERSION = "0.59.0";
   snapPoint,
   snapToHexCenter,
   styleToPatch,
+  toFocusPresence,
   toLaserTrailPresence,
   toMeasurePresence,
   toPingPresence,