@fieldnotes/core 0.56.0 → 0.58.0

package/dist/index.js

@@ -4695,88 +4695,247 @@ function miniToWorld(t, p) {
   return { x: (p.x - t.offsetX) / t.scale, y: (p.y - t.offsetY) / t.scale };
 }
 
-// src/canvas/minimap.ts
-var WIDTH = 200;
-var HEIGHT = 140;
-var MARGIN = 16;
-var PADDING = 8;
+// src/canvas/minimap-controller.ts
+var DEFAULT_WIDTH = 200;
+var DEFAULT_HEIGHT = 140;
+var DEFAULT_PADDING = 8;
+var DEFAULT_DEBOUNCE_MS2 = 200;
+var DEFAULT_VIEWPORT_STROKE = "#3b82f6";
 var NEUTRAL = "rgba(100,116,139,0.6)";
-var VIEWPORT_STROKE = "#3b82f6";
+var DOM_FALLBACK_TYPES = /* @__PURE__ */ new Set(["note", "text", "html"]);
 function elementColor(el) {
   return "color" in el && typeof el.color === "string" ? el.color : NEUTRAL;
 }
-var Minimap = class {
-  constructor(deps) {
-    this.deps = deps;
-    const canvas = document.createElement("canvas");
-    canvas.width = WIDTH;
-    canvas.height = HEIGHT;
-    Object.assign(canvas.style, {
-      position: "absolute",
-      right: `${MARGIN}px`,
-      bottom: `${MARGIN}px`,
-      width: `${WIDTH}px`,
-      height: `${HEIGHT}px`,
-      background: "rgba(255,255,255,0.85)",
-      border: "1px solid rgba(0,0,0,0.15)",
-      borderRadius: "4px",
-      touchAction: "none",
-      cursor: "pointer",
-      zIndex: "10"
-    });
-    canvas.addEventListener("pointerdown", this.onPointerDown);
-    canvas.addEventListener("pointermove", this.onPointerMove);
-    canvas.addEventListener("pointerup", this.onPointerUp);
-    this.deps.container.appendChild(canvas);
+function sameBounds(a, b) {
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+var MinimapController = class {
+  constructor(viewport, canvas, options = {}) {
+    this.viewport = viewport;
     this.canvas = canvas;
+    this.width = options.width ?? DEFAULT_WIDTH;
+    this.height = options.height ?? DEFAULT_HEIGHT;
+    this.padding = options.padding ?? DEFAULT_PADDING;
+    this.background = options.background ?? null;
+    this.viewportStroke = options.viewportStroke ?? DEFAULT_VIEWPORT_STROKE;
+    this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS2;
+    this.interactive = options.interactive !== false;
+    this.requestFrame = options.requestFrame ?? ((cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0);
+    this.cancelFrame = options.cancelFrame ?? ((id) => {
+      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
+    });
+    this.renderer.setStore(viewport.store);
+    this.renderer.setOnImageLoad(() => this.markSceneDirty());
+    this.applyCanvasSize();
+    const onScene = () => this.markSceneDirty();
+    this.unsubs.push(
+      viewport.store.on("add", onScene),
+      viewport.store.on("remove", onScene),
+      viewport.store.on("update", onScene),
+      viewport.store.on("clear", onScene),
+      viewport.layerManager.on("change", onScene),
+      viewport.camera.onChange(() => this.onViewChanged()),
+      viewport.onResize(() => this.onViewChanged())
+    );
+    if (this.interactive) {
+      canvas.style.touchAction = "none";
+      canvas.style.cursor = "pointer";
+      canvas.addEventListener("pointerdown", this.onPointerDown);
+      canvas.addEventListener("pointermove", this.onPointerMove);
+      canvas.addEventListener("pointerup", this.onPointerUp);
+      canvas.addEventListener("pointercancel", this.onPointerEnd);
+      canvas.addEventListener("lostpointercapture", this.onPointerEnd);
+    }
+    this.renderScene();
+    this.requestDraw();
   }
-  canvas;
-  rafId = null;
+  width;
+  height;
+  padding;
+  background;
+  viewportStroke;
+  debounceMs;
+  interactive;
+  requestFrame;
+  cancelFrame;
+  renderer = new ElementRenderer();
+  scene = null;
+  frameId = null;
+  debounceTimer = null;
   dragging = false;
-  scheduleDraw() {
-    if (this.rafId !== null) return;
-    this.rafId = this.deps.requestFrame(this.draw);
+  disposed = false;
+  unsubs = [];
+  setSize(width, height) {
+    if (this.disposed) return;
+    this.width = width;
+    this.height = height;
+    this.applyCanvasSize();
+    this.clearDebounce();
+    this.renderScene();
+    this.requestDraw();
   }
-  destroy() {
-    if (this.rafId !== null) {
-      this.deps.cancelFrame(this.rafId);
-      this.rafId = null;
+  requestDraw() {
+    if (this.disposed || this.frameId !== null) return;
+    this.frameId = this.requestFrame(this.draw);
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.clearDebounce();
+    if (this.frameId !== null) {
+      this.cancelFrame(this.frameId);
+      this.frameId = null;
+    }
+    for (const unsub of this.unsubs.splice(0)) unsub();
+    if (this.interactive) {
+      this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+      this.canvas.removeEventListener("pointermove", this.onPointerMove);
+      this.canvas.removeEventListener("pointerup", this.onPointerUp);
+      this.canvas.removeEventListener("pointercancel", this.onPointerEnd);
+      this.canvas.removeEventListener("lostpointercapture", this.onPointerEnd);
+    }
+  }
+  clearDebounce() {
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+  dpr() {
+    return typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+  }
+  applyCanvasSize() {
+    const dpr = this.dpr();
+    this.canvas.width = Math.max(1, Math.round(this.width * dpr));
+    this.canvas.height = Math.max(1, Math.round(this.height * dpr));
+  }
+  // Single source for both mapping bounds and rendering: layer-visible,
+  // grids excluded. (getElementBounds already returns null for grids, so they
+  // cannot extend the bounding box today — this filter makes the invariant
+  // structural instead of relying on that special case.)
+  sceneElements() {
+    return this.viewport.store.getAll().filter((el) => el.type !== "grid" && this.viewport.layerManager.isLayerVisible(el.layerId));
+  }
+  currentMapping() {
+    const viewportRect = this.viewport.getVisibleRect();
+    const content = getElementsBoundingBox(this.sceneElements());
+    return content ? unionBounds(content, viewportRect) : viewportRect;
+  }
+  onViewChanged() {
+    if (this.disposed) return;
+    const mapping = this.currentMapping();
+    if (!this.scene || !sameBounds(mapping, this.scene.mapping)) {
+      this.markSceneDirty();
     }
-    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
-    this.canvas.removeEventListener("pointermove", this.onPointerMove);
-    this.canvas.removeEventListener("pointerup", this.onPointerUp);
-    this.canvas.remove();
+    this.requestDraw();
   }
-  currentTransform() {
-    const viewport = this.deps.getViewportRect();
-    const content = this.deps.getContentBounds();
-    const mapping = content ? unionBounds(content, viewport) : viewport;
-    return computeMinimapTransform(mapping, WIDTH, HEIGHT, PADDING);
+  markSceneDirty() {
+    if (this.disposed) return;
+    this.clearDebounce();
+    this.debounceTimer = setTimeout(() => {
+      this.debounceTimer = null;
+      this.renderScene();
+      this.requestDraw();
+    }, this.debounceMs);
+  }
+  renderScene() {
+    if (this.disposed) return;
+    const dpr = this.dpr();
+    const mapping = this.currentMapping();
+    const transform = computeMinimapTransform(mapping, this.width, this.height, this.padding);
+    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));
+    const ctx = sceneCanvas.getContext("2d");
+    if (!ctx) return;
+    const byLayer = /* @__PURE__ */ new Map();
+    for (const el of this.sceneElements()) {
+      let list = byLayer.get(el.layerId);
+      if (!list) {
+        list = [];
+        byLayer.set(el.layerId, list);
+      }
+      list.push(el);
+    }
+    for (const layer of this.viewport.layerManager.getLayers()) {
+      const els = byLayer.get(layer.id);
+      if (!els || els.length === 0) continue;
+      const opacity = layer.opacity;
+      if (opacity >= 1) {
+        this.renderLayerElements(ctx, els, transform, dpr);
+        continue;
+      }
+      const layerCanvas = document.createElement("canvas");
+      layerCanvas.width = sceneCanvas.width;
+      layerCanvas.height = sceneCanvas.height;
+      const layerCtx = layerCanvas.getContext("2d");
+      if (!layerCtx) continue;
+      this.renderLayerElements(layerCtx, els, transform, dpr);
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.drawImage(layerCanvas, 0, 0);
+      ctx.restore();
+    }
+    this.scene = { canvas: sceneCanvas, transform, mapping };
+  }
+  renderLayerElements(ctx, elements, t, dpr) {
+    for (const el of elements) {
+      if (DOM_FALLBACK_TYPES.has(el.type)) {
+        const b = getElementBounds(el);
+        if (!b) continue;
+        const tl = worldToMini(t, { x: b.x, y: b.y });
+        ctx.save();
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.fillStyle = elementColor(el);
+        ctx.fillRect(tl.x, tl.y, Math.max(1, b.w * t.scale), Math.max(1, b.h * t.scale));
+        ctx.restore();
+        continue;
+      }
+      ctx.save();
+      ctx.setTransform(dpr * t.scale, 0, 0, dpr * t.scale, dpr * t.offsetX, dpr * t.offsetY);
+      this.renderer.renderCanvasElement(ctx, el);
+      ctx.restore();
+    }
   }
   draw = () => {
-    this.rafId = null;
+    this.frameId = null;
+    if (this.disposed) return;
     const ctx = this.canvas.getContext("2d");
     if (!ctx) return;
-    const t = this.currentTransform();
-    const viewport = this.deps.getViewportRect();
-    ctx.clearRect(0, 0, WIDTH, HEIGHT);
-    for (const el of this.deps.getElements()) {
-      const b = getElementBounds(el);
-      if (!b) continue;
-      const tl = worldToMini(t, { x: b.x, y: b.y });
-      ctx.fillStyle = elementColor(el);
-      ctx.fillRect(tl.x, tl.y, Math.max(1, b.w * t.scale), Math.max(1, b.h * t.scale));
-    }
-    const vtl = worldToMini(t, { x: viewport.x, y: viewport.y });
-    ctx.strokeStyle = VIEWPORT_STROKE;
+    const dpr = this.dpr();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, this.width, this.height);
+    if (this.background) {
+      ctx.fillStyle = this.background;
+      ctx.fillRect(0, 0, this.width, this.height);
+    }
+    const scene = this.scene;
+    if (!scene) return;
+    ctx.drawImage(scene.canvas, 0, 0, this.width, this.height);
+    const viewportRect = this.viewport.getVisibleRect();
+    const tl = worldToMini(scene.transform, { x: viewportRect.x, y: viewportRect.y });
+    ctx.strokeStyle = this.viewportStroke;
     ctx.lineWidth = 1.5;
-    ctx.strokeRect(vtl.x, vtl.y, viewport.w * t.scale, viewport.h * t.scale);
+    ctx.strokeRect(
+      tl.x,
+      tl.y,
+      viewportRect.w * scene.transform.scale,
+      viewportRect.h * scene.transform.scale
+    );
   };
+  navTransform() {
+    return this.scene?.transform ?? computeMinimapTransform(this.currentMapping(), this.width, this.height, this.padding);
+  }
   navigateFromEvent(e) {
     const rect = this.canvas.getBoundingClientRect();
-    const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const world = miniToWorld(this.currentTransform(), point);
-    this.deps.navigateTo(world);
+    const scaleX = rect.width > 0 ? this.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? this.height / rect.height : 1;
+    const point = {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+    const world = miniToWorld(this.navTransform(), point);
+    this.viewport.centerCameraAt(world);
   }
   onPointerDown = (e) => {
     e.stopPropagation();
@@ -4797,6 +4956,45 @@ var Minimap = class {
     } catch {
     }
   };
+  // pointercancel / lostpointercapture: a browser gesture or interrupted touch
+  // can end the interaction without a pointerup — the drag must not stick.
+  onPointerEnd = () => {
+    this.dragging = false;
+  };
+};
+
+// src/canvas/minimap.ts
+var WIDTH = 200;
+var HEIGHT = 140;
+var MARGIN = 16;
+var Minimap = class {
+  canvas;
+  controller;
+  constructor(container, viewport) {
+    const canvas = document.createElement("canvas");
+    Object.assign(canvas.style, {
+      position: "absolute",
+      right: `${MARGIN}px`,
+      bottom: `${MARGIN}px`,
+      width: `${WIDTH}px`,
+      height: `${HEIGHT}px`,
+      background: "rgba(255,255,255,0.85)",
+      border: "1px solid rgba(0,0,0,0.15)",
+      borderRadius: "4px",
+      zIndex: "10"
+    });
+    canvas.dataset.fieldnotesMinimap = "true";
+    container.appendChild(canvas);
+    this.canvas = canvas;
+    this.controller = new MinimapController(viewport, canvas, { width: WIDTH, height: HEIGHT });
+  }
+  scheduleDraw() {
+    this.controller.requestDraw();
+  }
+  destroy() {
+    this.controller.dispose();
+    this.canvas.remove();
+  }
 };
 
 // src/canvas/viewport-dom.ts
@@ -7978,25 +8176,7 @@ var Viewport = class {
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
     if (options.minimap) {
-      const visibleEls = () => this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
-      this.minimap = new Minimap({
-        container: this.wrapper,
-        getElements: visibleEls,
-        getContentBounds: () => getElementsBoundingBox(visibleEls()),
-        getViewportRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight),
-        navigateTo: (w) => {
-          const z = this.camera.zoom;
-          this.camera.moveTo(
-            this.canvasEl.clientWidth / 2 - w.x * z,
-            this.canvasEl.clientHeight / 2 - w.y * z
-          );
-        },
-        requestFrame: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0,
-        cancelFrame: (id) => {
-          if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
-        }
-      });
-      this.minimap.scheduleDraw();
+      this.minimap = new Minimap(this.wrapper, this);
     }
     this.domNodeManager = new DomNodeManager({
       domLayer: this.paintStack,
@@ -8032,7 +8212,6 @@ var Viewport = class {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
       this.contextMenu?.close();
-      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.gridController = new GridController({
@@ -8047,7 +8226,6 @@ var Viewport = class {
       this.store.on("add", (el) => {
         if (el.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(el.layerId);
-        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
@@ -8055,7 +8233,6 @@ var Viewport = class {
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
-        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
@@ -8064,21 +8241,18 @@ var Viewport = class {
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
         }
-        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
-        this.minimap?.scheduleDraw();
         this.requestRender();
       })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
       this.renderLoop.markAllLayersDirty();
-      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.interactions = new ViewportInteractions({
@@ -8142,6 +8316,7 @@ var Viewport = class {
   contextMenu = null;
   minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
+  resizeListeners = /* @__PURE__ */ new Set();
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -8166,6 +8341,27 @@ var Viewport = class {
     if (!bbox) return;
     this.camera.fitToContent(bbox, this.wrapper.clientWidth, this.wrapper.clientHeight, padding);
   }
+  /** World-space rectangle currently visible through the canvas. */
+  getVisibleRect() {
+    return this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
+  }
+  /** Centers the camera on a world point without changing zoom. */
+  centerCameraAt(world) {
+    const z = this.camera.zoom;
+    this.camera.moveTo(
+      this.canvasEl.clientWidth / 2 - world.x * z,
+      this.canvasEl.clientHeight / 2 - world.y * z
+    );
+  }
+  /**
+   * Notifies after the host container resizes (ResizeObserver-driven). A resize
+   * changes the visible world rect without a camera event; overlays such as the
+   * minimap subscribe to stay current. Returns an idempotent unsubscribe.
+   */
+  onResize(listener) {
+    this.resizeListeners.add(listener);
+    return () => this.resizeListeners.delete(listener);
+  }
   requestRender() {
     this.renderLoop.requestRender();
   }
@@ -8470,6 +8666,7 @@ var Viewport = class {
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
+    this.resizeListeners.clear();
     this.wrapper.remove();
   }
   stopInteracting() {
@@ -8519,6 +8716,7 @@ var Viewport = class {
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
+    this.resizeListeners.forEach((fn) => fn());
   }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
@@ -8558,7 +8756,7 @@ function toLaserTrailPresence(emission) {
   };
 }
 var DEFAULT_COLOR = "#ff3b30";
-var DEFAULT_WIDTH = 4;
+var DEFAULT_WIDTH2 = 4;
 var DEFAULT_FADE_MS = 1200;
 var DEFAULT_MAX_POINTS = 512;
 var RemoteLaserOverlay = class {
@@ -8574,7 +8772,7 @@ var RemoteLaserOverlay = class {
   constructor(host, options = {}) {
     this.host = host;
     this.color = options.color ?? DEFAULT_COLOR;
-    this.width = options.width ?? DEFAULT_WIDTH;
+    this.width = options.width ?? DEFAULT_WIDTH2;
     this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS;
     this.maxPointsPerSender = options.maxPointsPerSender ?? DEFAULT_MAX_POINTS;
     this.unregister = host.registerOverlay((ctx) => this.renderTrails(ctx));
@@ -8845,10 +9043,218 @@ var RemotePingOverlay = class {
   }
 };
 
+// src/canvas/measure-render.ts
+function formatMeasureLabel(feet) {
+  return `${Math.round(feet)} ft`;
+}
+function drawMeasurement(ctx, m, opts = {}) {
+  ctx.save();
+  if (opts.alpha !== void 0) ctx.globalAlpha = opts.alpha;
+  ctx.strokeStyle = m.color;
+  ctx.setLineDash([8, 4]);
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(m.start.x, m.start.y);
+  ctx.lineTo(m.end.x, m.end.y);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.fillStyle = m.color;
+  const dotRadius = 4;
+  ctx.beginPath();
+  ctx.arc(m.start.x, m.start.y, dotRadius, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(m.end.x, m.end.y, dotRadius, 0, Math.PI * 2);
+  ctx.fill();
+  const label = formatMeasureLabel(m.feet);
+  const midX = (m.start.x + m.end.x) / 2;
+  const midY = (m.start.y + m.end.y) / 2;
+  ctx.font = "14px sans-serif";
+  const metrics = ctx.measureText(label);
+  const padX = 6;
+  const padY = 4;
+  const textH = 14;
+  ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
+  ctx.beginPath();
+  ctx.roundRect(
+    midX - metrics.width / 2 - padX,
+    midY - textH / 2 - padY,
+    metrics.width + padX * 2,
+    textH + padY * 2,
+    4
+  );
+  ctx.fill();
+  ctx.fillStyle = "#FFFFFF";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(label, midX, midY);
+  ctx.restore();
+}
+
+// src/canvas/remote-measure-overlay.ts
+var MEASURE_PRESENCE_KIND = "measure";
+function isFinitePoint2(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const point = value;
+  return typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y);
+}
+function isMeasurePresence(data) {
+  if (typeof data !== "object" || data === null) return false;
+  const payload = data;
+  if (payload.kind !== MEASURE_PRESENCE_KIND) return false;
+  if ("cleared" in payload) return payload.cleared === true;
+  if (!isFinitePoint2(payload.start) || !isFinitePoint2(payload.end)) return false;
+  if (typeof payload.cells !== "number" || !Number.isFinite(payload.cells)) return false;
+  if (typeof payload.feet !== "number" || !Number.isFinite(payload.feet)) return false;
+  if (payload.color !== void 0 && typeof payload.color !== "string") return false;
+  return true;
+}
+function toMeasurePresence(emission) {
+  if (emission === null) return { kind: MEASURE_PRESENCE_KIND, cleared: true };
+  return {
+    kind: MEASURE_PRESENCE_KIND,
+    start: emission.start,
+    end: emission.end,
+    cells: emission.cells,
+    feet: emission.feet,
+    color: emission.color
+  };
+}
+var DEFAULT_COLOR3 = "#FF5722";
+var DEFAULT_HOLD_MS = 1500;
+var DEFAULT_FADE_MS2 = 400;
+var DEFAULT_MAX_AGE_MS = 3e4;
+var RemoteMeasureOverlay = class {
+  host;
+  color;
+  holdMs;
+  fadeMs;
+  maxAgeMs;
+  measurements = /* @__PURE__ */ new Map();
+  unregister;
+  rafId = null;
+  disposed = false;
+  constructor(host, options = {}) {
+    this.host = host;
+    this.color = options.color ?? DEFAULT_COLOR3;
+    this.holdMs = options.holdMs ?? DEFAULT_HOLD_MS;
+    this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS2;
+    this.maxAgeMs = options.maxAgeMs ?? DEFAULT_MAX_AGE_MS;
+    this.unregister = host.registerOverlay((ctx) => this.renderMeasurements(ctx));
+  }
+  now() {
+    return performance.now();
+  }
+  /**
+   * Applies a presence payload from `sender` (any opaque per-sender key, e.g.
+   * the envelope `from`). Non-measure or malformed payloads are ignored and
+   * reported as `false`, so hosts can feed every presence frame through.
+   */
+  apply(sender, data) {
+    if (this.disposed || !isMeasurePresence(data)) return false;
+    if ("cleared" in data) {
+      this.beginLinger(sender);
+      return true;
+    }
+    const existing = this.measurements.get(sender);
+    if (existing?.expiryTimer != null) clearTimeout(existing.expiryTimer);
+    this.measurements.set(sender, {
+      start: data.start,
+      end: data.end,
+      feet: data.feet,
+      color: data.color ?? this.color,
+      clearedAt: null,
+      expiryTimer: setTimeout(() => this.beginLinger(sender), this.maxAgeMs)
+    });
+    this.host.requestRender();
+    return true;
+  }
+  /** Removes a sender's ruler immediately (presence-leave/disconnect). */
+  remove(sender) {
+    const entry = this.measurements.get(sender);
+    if (!entry) return;
+    if (entry.expiryTimer != null) clearTimeout(entry.expiryTimer);
+    this.measurements.delete(sender);
+    this.host.requestRender();
+  }
+  /** Removes every ruler immediately. */
+  clear() {
+    if (this.measurements.size === 0) return;
+    for (const entry of this.measurements.values()) {
+      if (entry.expiryTimer != null) clearTimeout(entry.expiryTimer);
+    }
+    this.measurements.clear();
+    this.host.requestRender();
+  }
+  /** Number of senders with a visible (active or lingering) ruler. */
+  get activeSenderCount() {
+    return this.measurements.size;
+  }
+  /** Unregisters the overlay, cancels timers, stops animating. Idempotent. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    for (const entry of this.measurements.values()) {
+      if (entry.expiryTimer != null) clearTimeout(entry.expiryTimer);
+    }
+    this.measurements.clear();
+    this.unregister?.();
+    this.unregister = null;
+    this.host.requestRender();
+  }
+  beginLinger(sender) {
+    const entry = this.measurements.get(sender);
+    if (!entry || entry.clearedAt !== null) return;
+    if (entry.expiryTimer != null) {
+      clearTimeout(entry.expiryTimer);
+      entry.expiryTimer = null;
+    }
+    entry.clearedAt = this.now();
+    this.ensureAnimating();
+    this.host.requestRender();
+  }
+  ensureAnimating() {
+    if (this.rafId === null) {
+      this.rafId = requestAnimationFrame(() => this.tick());
+    }
+  }
+  tick() {
+    if (this.disposed) return;
+    const now = this.now();
+    let lingering = 0;
+    for (const [sender, entry] of this.measurements) {
+      if (entry.clearedAt === null) continue;
+      if (now - entry.clearedAt >= this.holdMs + this.fadeMs) {
+        this.measurements.delete(sender);
+      } else {
+        lingering += 1;
+      }
+    }
+    this.host.requestRender();
+    this.rafId = lingering > 0 ? requestAnimationFrame(() => this.tick()) : null;
+  }
+  renderMeasurements(ctx) {
+    if (this.measurements.size === 0) return;
+    const now = this.now();
+    for (const entry of this.measurements.values()) {
+      let alpha = 1;
+      if (entry.clearedAt !== null) {
+        const fadeAge = now - entry.clearedAt - this.holdMs;
+        if (fadeAge > 0) alpha = Math.max(0, 1 - fadeAge / this.fadeMs);
+      }
+      drawMeasurement(ctx, entry, { alpha });
+    }
+  }
+};
+
 // src/canvas/ping-input.ts
 var DEFAULT_LONG_PRESS_MS = 600;
 var DEFAULT_SLOP_PX = 8;
-var DEFAULT_COLOR3 = "#ff3b30";
+var DEFAULT_COLOR4 = "#ff3b30";
 var DEFAULT_DURATION_MS2 = 1800;
 var DEFAULT_RADIUS2 = 48;
 var DEFAULT_MIN_INTERVAL_MS = 300;
@@ -8881,7 +9287,7 @@ var PingInput = class {
     this.longPressEnabled = options.longPressEnabled ?? false;
     this.longPressMs = options.longPressMs ?? DEFAULT_LONG_PRESS_MS;
     this.slopPx = options.slopPx ?? DEFAULT_SLOP_PX;
-    this.color = options.color ?? DEFAULT_COLOR3;
+    this.color = options.color ?? DEFAULT_COLOR4;
     this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS2;
     this.radius = options.radius ?? DEFAULT_RADIUS2;
     this.minIntervalMs = options.minIntervalMs ?? DEFAULT_MIN_INTERVAL_MS;
@@ -11171,21 +11577,37 @@ var MeasureTool = class {
   gridType;
   hexOrientation;
   feetPerCell;
+  color;
   optionListeners = /* @__PURE__ */ new Set();
+  measurementListeners = /* @__PURE__ */ new Set();
+  emissionRafId = null;
   constructor(options = {}) {
     this.feetPerCell = options.feetPerCell ?? 5;
+    this.color = options.color ?? "#FF5722";
   }
   getOptions() {
-    return { feetPerCell: this.feetPerCell };
+    return { feetPerCell: this.feetPerCell, color: this.color };
   }
   setOptions(options) {
     if (options.feetPerCell !== void 0) this.feetPerCell = options.feetPerCell;
+    if (options.color !== void 0) this.color = options.color;
     this.notifyOptionsChange();
   }
   onOptionsChange(listener) {
     this.optionListeners.add(listener);
     return () => this.optionListeners.delete(listener);
   }
+  /**
+   * Subscribes to raf-coalesced measurement snapshots. While a measurement is
+   * in progress, listeners receive at most one snapshot per animation frame
+   * carrying the latest state; `null` is delivered synchronously when the
+   * measurement clears (pointer-up or deactivate). Emissions are ephemeral by
+   * contract: presence only — never elements, history, or persisted state.
+   */
+  onMeasurement(listener) {
+    this.measurementListeners.add(listener);
+    return () => this.measurementListeners.delete(listener);
+  }
   onPointerDown(state, ctx) {
     this.gridSize = ctx.gridSize ?? 1;
     this.gridType = ctx.gridType;
@@ -11193,22 +11615,27 @@ var MeasureTool = class {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.start = this.snapToGrid(world, ctx);
     this.end = { ...this.start };
+    this.scheduleEmission();
   }
   onPointerMove(state, ctx) {
     if (!this.start) return;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.end = this.snapToGrid(world, ctx);
     ctx.requestRender();
+    this.scheduleEmission();
   }
   onPointerUp(_state, ctx) {
     if (!this.start) return;
     this.start = null;
     this.end = null;
     ctx.requestRender();
+    this.emitClear();
   }
   onDeactivate(_ctx) {
+    const wasActive = this.start !== null;
     this.start = null;
     this.end = null;
+    if (wasActive) this.emitClear();
   }
   getMeasurement() {
     if (!this.start || !this.end) return null;
@@ -11234,46 +11661,7 @@ var MeasureTool = class {
   renderOverlay(ctx) {
     const m = this.getMeasurement();
     if (!m) return;
-    ctx.save();
-    ctx.strokeStyle = "#FF5722";
-    ctx.setLineDash([8, 4]);
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(m.start.x, m.start.y);
-    ctx.lineTo(m.end.x, m.end.y);
-    ctx.stroke();
-    ctx.setLineDash([]);
-    ctx.fillStyle = "#FF5722";
-    const dotRadius = 4;
-    ctx.beginPath();
-    ctx.arc(m.start.x, m.start.y, dotRadius, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(m.end.x, m.end.y, dotRadius, 0, Math.PI * 2);
-    ctx.fill();
-    const label = `${Math.round(m.feet)} ft`;
-    const midX = (m.start.x + m.end.x) / 2;
-    const midY = (m.start.y + m.end.y) / 2;
-    ctx.font = "14px sans-serif";
-    const metrics = ctx.measureText(label);
-    const padX = 6;
-    const padY = 4;
-    const textH = 14;
-    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
-    ctx.beginPath();
-    ctx.roundRect(
-      midX - metrics.width / 2 - padX,
-      midY - textH / 2 - padY,
-      metrics.width + padX * 2,
-      textH + padY * 2,
-      4
-    );
-    ctx.fill();
-    ctx.fillStyle = "#FFFFFF";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(label, midX, midY);
-    ctx.restore();
+    drawMeasurement(ctx, { start: m.start, end: m.end, feet: m.feet, color: this.color });
   }
   snapToGrid(point, ctx) {
     if (!ctx.gridSize) return point;
@@ -11291,6 +11679,32 @@ var MeasureTool = class {
   notifyOptionsChange() {
     for (const listener of this.optionListeners) listener();
   }
+  scheduleEmission() {
+    if (this.measurementListeners.size === 0) return;
+    if (this.emissionRafId !== null) return;
+    this.emissionRafId = requestAnimationFrame(() => {
+      this.emissionRafId = null;
+      const m = this.getMeasurement();
+      if (!m) return;
+      this.emit({ ...m, color: this.color });
+    });
+  }
+  emitClear() {
+    if (this.emissionRafId !== null) {
+      cancelAnimationFrame(this.emissionRafId);
+      this.emissionRafId = null;
+    }
+    if (this.measurementListeners.size === 0) return;
+    this.emit(null);
+  }
+  emit(emission) {
+    for (const listener of this.measurementListeners) {
+      try {
+        listener(emission);
+      } catch {
+      }
+    }
+  }
 };
 
 // src/tools/template-tool.ts
@@ -11586,9 +12000,9 @@ var TemplateTool = class {
 };
 
 // src/tools/laser-tool.ts
-var DEFAULT_COLOR4 = "#ff3b30";
-var DEFAULT_WIDTH2 = 4;
-var DEFAULT_FADE_MS2 = 1200;
+var DEFAULT_COLOR5 = "#ff3b30";
+var DEFAULT_WIDTH3 = 4;
+var DEFAULT_FADE_MS3 = 1200;
 var LaserTool = class {
   name;
   color;
@@ -11602,9 +12016,9 @@ var LaserTool = class {
   pendingEmission = [];
   constructor(options = {}) {
     this.name = options.name ?? "laser";
-    this.color = options.color ?? DEFAULT_COLOR4;
-    this.width = options.width ?? DEFAULT_WIDTH2;
-    this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS2;
+    this.color = options.color ?? DEFAULT_COLOR5;
+    this.width = options.width ?? DEFAULT_WIDTH3;
+    this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS3;
   }
   now() {
     return performance.now();
@@ -11730,7 +12144,7 @@ var LaserTool = class {
 };
 
 // src/tools/ping-tool.ts
-var DEFAULT_COLOR5 = "#ff3b30";
+var DEFAULT_COLOR6 = "#ff3b30";
 var DEFAULT_DURATION_MS3 = 1800;
 var DEFAULT_RADIUS4 = 48;
 var DEFAULT_MIN_INTERVAL_MS2 = 300;
@@ -11747,7 +12161,7 @@ var PingTool = class {
   pingListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.name = options.name ?? "ping";
-    this.color = options.color ?? DEFAULT_COLOR5;
+    this.color = options.color ?? DEFAULT_COLOR6;
     this.durationMs = options.durationMs ?? DEFAULT_DURATION_MS3;
     this.radius = options.radius ?? DEFAULT_RADIUS4;
     this.minIntervalMs = options.minIntervalMs ?? DEFAULT_MIN_INTERVAL_MS2;
@@ -11850,7 +12264,7 @@ var PingTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.56.0";
+var VERSION = "0.58.0";
 export {
   ArrowTool,
   AutoSave,
@@ -11866,14 +12280,17 @@ export {
   LaserTool,
   LayerManager,
   LocalStorageAdapter,
+  MEASURE_PRESENCE_KIND,
   MeasureTool,
   MemoryAdapter,
+  MinimapController,
   NoteTool,
   PING_PRESENCE_KIND,
   PencilTool,
   PingInput,
   PingTool,
   RemoteLaserOverlay,
+  RemoteMeasureOverlay,
   RemotePingOverlay,
   SelectTool,
   ShapeTool,
@@ -11911,6 +12328,7 @@ export {
   getHexCellsInSquare,
   getHexDistance,
   isLaserTrailPresence,
+  isMeasurePresence,
   isNearBezier,
   isPingPresence,
   setFontSize,
@@ -11919,6 +12337,7 @@ export {
   snapToHexCenter,
   styleToPatch,
   toLaserTrailPresence,
+  toMeasurePresence,
   toPingPresence,
   toggleBold,
   toggleItalic,