@fieldnotes/core 0.20.0 → 0.22.0

package/dist/index.js

@@ -1823,10 +1823,134 @@ function getTemplateBounds(el) {
     }
   }
 }
+function transferStrokeBounds(prev, next) {
+  if (prev.type !== "stroke" || next.type !== "stroke") return;
+  if (prev.points !== next.points) return;
+  if (prev.position.x !== next.position.x || prev.position.y !== next.position.y) return;
+  const bounds = strokeBoundsCache.get(prev);
+  if (bounds) strokeBoundsCache.set(next, bounds);
+}
 function boundsIntersect(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/elements/stroke-smoothing.ts
+var MIN_PRESSURE_SCALE = 0.2;
+function pressureToWidth(pressure, baseWidth) {
+  return baseWidth * (MIN_PRESSURE_SCALE + (1 - MIN_PRESSURE_SCALE) * pressure);
+}
+function simplifyPoints(points, tolerance) {
+  if (points.length <= 2) return points.slice();
+  return rdp(points, 0, points.length - 1, tolerance);
+}
+function rdp(points, start, end, tolerance) {
+  const first = points[start];
+  const last = points[end];
+  if (!first || !last) return [];
+  if (end - start <= 1) return [first, last];
+  let maxDist = 0;
+  let maxIndex = start;
+  for (let i = start + 1; i < end; i++) {
+    const pt = points[i];
+    if (!pt) continue;
+    const dist = perpendicularDistance(pt, first, last);
+    if (dist > maxDist) {
+      maxDist = dist;
+      maxIndex = i;
+    }
+  }
+  if (maxDist <= tolerance) return [first, last];
+  const left = rdp(points, start, maxIndex, tolerance);
+  const right = rdp(points, maxIndex, end, tolerance);
+  return left.concat(right.slice(1));
+}
+function perpendicularDistance(pt, lineStart, lineEnd) {
+  const dx = lineEnd.x - lineStart.x;
+  const dy = lineEnd.y - lineStart.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    const ex = pt.x - lineStart.x;
+    const ey = pt.y - lineStart.y;
+    return Math.sqrt(ex * ex + ey * ey);
+  }
+  const num = Math.abs(dy * pt.x - dx * pt.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
+  return num / Math.sqrt(lenSq);
+}
+function smoothToSegments(points) {
+  if (points.length < 2) return [];
+  if (points.length === 2) {
+    const p0 = points[0];
+    const p1 = points[1];
+    if (!p0 || !p1) return [];
+    const mx = (p0.x + p1.x) / 2;
+    const my = (p0.y + p1.y) / 2;
+    return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
+  }
+  const segments = [];
+  const n = points.length;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(n - 1, i + 2)];
+    if (!p0 || !p1 || !p2 || !p3) continue;
+    const cp1 = {
+      x: p1.x + (p2.x - p0.x) / 6,
+      y: p1.y + (p2.y - p0.y) / 6
+    };
+    const cp2 = {
+      x: p2.x - (p3.x - p1.x) / 6,
+      y: p2.y - (p3.y - p1.y) / 6
+    };
+    segments.push({ start: p1, cp1, cp2, end: p2 });
+  }
+  return segments;
+}
+
+// src/elements/stroke-cache.ts
+var cache = /* @__PURE__ */ new WeakMap();
+var WIDTH_QUANTUM = 0.25;
+function buildWidthBuckets(segments, widths) {
+  if (typeof Path2D === "undefined") return null;
+  const byWidth = /* @__PURE__ */ new Map();
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    const w = widths[i];
+    if (!seg || w === void 0) continue;
+    const q = Math.max(WIDTH_QUANTUM, Math.round(w / WIDTH_QUANTUM) * WIDTH_QUANTUM);
+    let path = byWidth.get(q);
+    if (!path) {
+      path = new Path2D();
+      byWidth.set(q, path);
+    }
+    path.moveTo(seg.start.x, seg.start.y);
+    path.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+  }
+  return [...byWidth.entries()].map(([width, path]) => ({ width, path }));
+}
+function computeStrokeSegments(stroke) {
+  const segments = smoothToSegments(stroke.points);
+  const widths = [];
+  for (const seg of segments) {
+    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+    widths.push(w);
+  }
+  const data = { segments, widths, buckets: buildWidthBuckets(segments, widths) };
+  cache.set(stroke, data);
+  return data;
+}
+function getStrokeRenderData(stroke) {
+  const cached = cache.get(stroke);
+  if (cached) return cached;
+  return computeStrokeSegments(stroke);
+}
+function transferStrokeRenderData(prev, next) {
+  if (prev.type !== "stroke" || next.type !== "stroke") return;
+  if (prev.points !== next.points) return;
+  const data = cache.get(prev);
+  if (data) cache.set(next, data);
+}
+
 // src/elements/element-store.ts
 var ElementStore = class {
   elements = /* @__PURE__ */ new Map();
@@ -1877,6 +2001,10 @@ var ElementStore = class {
     this.sortedCache = null;
     this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    if (updated.type === "stroke" && existing.type === "stroke") {
+      transferStrokeRenderData(existing, updated);
+      transferStrokeBounds(existing, updated);
+    }
     if (updated.type === "arrow") {
       const arrow = updated;
       arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
@@ -1920,6 +2048,12 @@ var ElementStore = class {
       this._versions.set(el.id, 0);
       const bounds = getElementBounds(el);
       if (bounds) this.spatialIndex.insert(el.id, bounds);
+      if (el.type === "stroke") {
+        computeStrokeSegments(el);
+      }
+      if (el.type === "arrow" && el.bend !== 0 && !el.cachedControlPoint) {
+        el.cachedControlPoint = getArrowControlPoint(el.from, el.to, el.bend);
+      }
     }
     this.bus.emit("clear", null);
     for (const el of elements) {
@@ -2005,6 +2139,20 @@ var ElementStore = class {
   }
 };
 
+// src/elements/arrow-render-cache.ts
+var cache2 = /* @__PURE__ */ new WeakMap();
+function getArrowRenderGeometry(arrow) {
+  const hit = cache2.get(arrow);
+  if (hit) return hit;
+  const geometry = {
+    controlPoint: arrow.bend !== 0 ? arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend) : null,
+    tangentStart: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0),
+    tangentEnd: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1)
+  };
+  cache2.set(arrow, geometry);
+  return geometry;
+}
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -2125,98 +2273,6 @@ function unbindArrow(arrow, store) {
   return updates;
 }
 
-// src/elements/stroke-smoothing.ts
-var MIN_PRESSURE_SCALE = 0.2;
-function pressureToWidth(pressure, baseWidth) {
-  return baseWidth * (MIN_PRESSURE_SCALE + (1 - MIN_PRESSURE_SCALE) * pressure);
-}
-function simplifyPoints(points, tolerance) {
-  if (points.length <= 2) return points.slice();
-  return rdp(points, 0, points.length - 1, tolerance);
-}
-function rdp(points, start, end, tolerance) {
-  const first = points[start];
-  const last = points[end];
-  if (!first || !last) return [];
-  if (end - start <= 1) return [first, last];
-  let maxDist = 0;
-  let maxIndex = start;
-  for (let i = start + 1; i < end; i++) {
-    const pt = points[i];
-    if (!pt) continue;
-    const dist = perpendicularDistance(pt, first, last);
-    if (dist > maxDist) {
-      maxDist = dist;
-      maxIndex = i;
-    }
-  }
-  if (maxDist <= tolerance) return [first, last];
-  const left = rdp(points, start, maxIndex, tolerance);
-  const right = rdp(points, maxIndex, end, tolerance);
-  return left.concat(right.slice(1));
-}
-function perpendicularDistance(pt, lineStart, lineEnd) {
-  const dx = lineEnd.x - lineStart.x;
-  const dy = lineEnd.y - lineStart.y;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) {
-    const ex = pt.x - lineStart.x;
-    const ey = pt.y - lineStart.y;
-    return Math.sqrt(ex * ex + ey * ey);
-  }
-  const num = Math.abs(dy * pt.x - dx * pt.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
-  return num / Math.sqrt(lenSq);
-}
-function smoothToSegments(points) {
-  if (points.length < 2) return [];
-  if (points.length === 2) {
-    const p0 = points[0];
-    const p1 = points[1];
-    if (!p0 || !p1) return [];
-    const mx = (p0.x + p1.x) / 2;
-    const my = (p0.y + p1.y) / 2;
-    return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
-  }
-  const segments = [];
-  const n = points.length;
-  for (let i = 0; i < n - 1; i++) {
-    const p0 = points[Math.max(0, i - 1)];
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p3 = points[Math.min(n - 1, i + 2)];
-    if (!p0 || !p1 || !p2 || !p3) continue;
-    const cp1 = {
-      x: p1.x + (p2.x - p0.x) / 6,
-      y: p1.y + (p2.y - p0.y) / 6
-    };
-    const cp2 = {
-      x: p2.x - (p3.x - p1.x) / 6,
-      y: p2.y - (p3.y - p1.y) / 6
-    };
-    segments.push({ start: p1, cp1, cp2, end: p2 });
-  }
-  return segments;
-}
-
-// src/elements/stroke-cache.ts
-var cache = /* @__PURE__ */ new WeakMap();
-function computeStrokeSegments(stroke) {
-  const segments = smoothToSegments(stroke.points);
-  const widths = [];
-  for (const seg of segments) {
-    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
-    widths.push(w);
-  }
-  const data = { segments, widths };
-  cache.set(stroke, data);
-  return data;
-}
-function getStrokeRenderData(stroke) {
-  const cached = cache.get(stroke);
-  if (cached) return cached;
-  return computeStrokeSegments(stroke);
-}
-
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
   if (cellSize <= 0) return { verticals: [], horizontals: [] };
@@ -2609,6 +2665,7 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  onImageError = null;
   camera = null;
   canvasSize = null;
   hexTileCache = null;
@@ -2619,6 +2676,9 @@ var ElementRenderer = class {
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setOnImageError(callback) {
+    this.onImageError = callback;
+  }
   setCamera(camera) {
     this.camera = camera;
   }
@@ -2658,21 +2718,29 @@ var ElementRenderer = class {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    const { segments, widths } = getStrokeRenderData(stroke);
-    for (let i = 0; i < segments.length; i++) {
-      const seg = segments[i];
-      const w = widths[i];
-      if (!seg || w === void 0) continue;
-      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();
+    const data = getStrokeRenderData(stroke);
+    if (data.buckets) {
+      for (const bucket of data.buckets) {
+        ctx.lineWidth = bucket.width;
+        ctx.stroke(bucket.path);
+      }
+    } else {
+      for (let i = 0; i < data.segments.length; i++) {
+        const seg = data.segments[i];
+        const w = data.widths[i];
+        if (!seg || w === void 0) continue;
+        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();
   }
   renderArrow(ctx, arrow) {
-    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow);
+    const geometry = getArrowRenderGeometry(arrow);
+    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow, geometry);
     ctx.save();
     ctx.strokeStyle = arrow.color;
     ctx.lineWidth = arrow.width;
@@ -2683,17 +2751,18 @@ var ElementRenderer = class {
     ctx.beginPath();
     ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
-      const cp = arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
-      ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
+      const cp = geometry.controlPoint;
+      if (cp) {
+        ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
+      }
     } else {
       ctx.lineTo(visualTo.x, visualTo.y);
     }
     ctx.stroke();
-    this.renderArrowhead(ctx, arrow, visualTo);
+    this.renderArrowhead(ctx, arrow, visualTo, geometry.tangentEnd);
     ctx.restore();
   }
-  renderArrowhead(ctx, arrow, tip) {
-    const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+  renderArrowhead(ctx, arrow, tip, angle) {
     ctx.beginPath();
     ctx.moveTo(tip.x, tip.y);
     ctx.lineTo(
@@ -2708,7 +2777,7 @@ var ElementRenderer = class {
     ctx.fillStyle = arrow.color;
     ctx.fill();
   }
-  getVisualEndpoints(arrow) {
+  getVisualEndpoints(arrow, geometry) {
     let visualFrom = arrow.from;
     let visualTo = arrow.to;
     if (!this.store) return { visualFrom, visualTo };
@@ -2717,7 +2786,7 @@ var ElementRenderer = class {
       if (el) {
         const bounds = getElementBounds(el);
         if (bounds) {
-          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const tangentAngle = geometry.tangentStart;
           const rayTarget = {
             x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
             y: arrow.from.y + Math.sin(tangentAngle) * 1e3
@@ -2731,7 +2800,7 @@ var ElementRenderer = class {
       if (el) {
         const bounds = getElementBounds(el);
         if (bounds) {
-          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const tangentAngle = geometry.tangentEnd;
           const rayTarget = {
             x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
             y: arrow.to.y - Math.sin(tangentAngle) * 1e3
@@ -2977,6 +3046,10 @@ var ElementRenderer = class {
     ctx.restore();
   }
   renderImage(ctx, image) {
+    if (this.imageCache.get(image.src) === "failed") {
+      this.renderImagePlaceholder(ctx, image);
+      return;
+    }
     const img = this.getImage(image.src);
     if (!img) return;
     ctx.drawImage(
@@ -2987,6 +3060,27 @@ var ElementRenderer = class {
       image.size.h
     );
   }
+  renderImagePlaceholder(ctx, image) {
+    const { x, y } = image.position;
+    const { w, h } = image.size;
+    ctx.save();
+    ctx.fillStyle = "#eeeeee";
+    ctx.fillRect(x, y, w, h);
+    ctx.strokeStyle = "#bdbdbd";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, w, h);
+    const glyph = Math.min(24, w / 2, h / 2);
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    ctx.strokeStyle = "#9e9e9e";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(cx, cy, glyph / 2, 0, Math.PI * 2);
+    ctx.moveTo(cx - glyph / 2, cy + glyph / 2);
+    ctx.lineTo(cx + glyph / 2, cy - glyph / 2);
+    ctx.stroke();
+    ctx.restore();
+  }
   getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
     const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
     if (this.hexTileCacheKey === key && this.hexTileCache) {
@@ -3002,6 +3096,7 @@ var ElementRenderer = class {
   getImage(src) {
     const cached = this.imageCache.get(src);
     if (cached) {
+      if (cached === "failed") return null;
       if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
       return cached;
     }
@@ -3018,6 +3113,11 @@ var ElementRenderer = class {
         });
       }
     };
+    img.onerror = () => {
+      this.imageCache.set(src, "failed");
+      this.onImageError?.(src);
+      this.onImageLoad?.();
+    };
     return null;
   }
 };
@@ -4064,19 +4164,19 @@ function loadImages(elements) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
-  const cache2 = /* @__PURE__ */ new Map();
-  if (imageElements.length === 0) return Promise.resolve(cache2);
+  const cache3 = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache3);
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
       remaining--;
-      if (remaining <= 0) resolve(cache2);
+      if (remaining <= 0) resolve(cache3);
     };
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        cache2.set(el.id, img);
+        cache3.set(el.id, img);
         done();
       };
       img.onerror = done;
@@ -4557,18 +4657,39 @@ var RenderStats = class {
   frameTimes = [];
   frameCount = 0;
   _lastGridMs = 0;
-  recordFrame(durationMs, gridMs) {
+  _lastLayersMs = 0;
+  _lastBackgroundMs = 0;
+  _lastCompositeMs = 0;
+  _lastOverlayMs = 0;
+  recordFrame(durationMs, breakdown) {
     this.frameCount++;
     this.frameTimes.push(durationMs);
     if (this.frameTimes.length > SAMPLE_SIZE) {
       this.frameTimes.shift();
     }
-    if (gridMs !== void 0) this._lastGridMs = gridMs;
+    if (breakdown !== void 0) {
+      if (breakdown.gridMs !== void 0) this._lastGridMs = breakdown.gridMs;
+      if (breakdown.layersMs !== void 0) this._lastLayersMs = breakdown.layersMs;
+      if (breakdown.backgroundMs !== void 0) this._lastBackgroundMs = breakdown.backgroundMs;
+      if (breakdown.compositeMs !== void 0) this._lastCompositeMs = breakdown.compositeMs;
+      if (breakdown.overlayMs !== void 0) this._lastOverlayMs = breakdown.overlayMs;
+    }
   }
   getSnapshot() {
     const times = this.frameTimes;
     if (times.length === 0) {
-      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, lastGridMs: 0, frameCount: 0 };
+      return {
+        fps: 0,
+        avgFrameMs: 0,
+        p95FrameMs: 0,
+        lastFrameMs: 0,
+        lastGridMs: 0,
+        layersMs: 0,
+        backgroundMs: 0,
+        compositeMs: 0,
+        overlayMs: 0,
+        frameCount: 0
+      };
     }
     const avg = times.reduce((a, b) => a + b, 0) / times.length;
     const sorted = [...times].sort((a, b) => a - b);
@@ -4580,6 +4701,10 @@ var RenderStats = class {
       p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
       lastFrameMs: Math.round(lastFrame * 100) / 100,
       lastGridMs: Math.round(this._lastGridMs * 100) / 100,
+      layersMs: Math.round(this._lastLayersMs * 100) / 100,
+      backgroundMs: Math.round(this._lastBackgroundMs * 100) / 100,
+      compositeMs: Math.round(this._lastCompositeMs * 100) / 100,
+      overlayMs: Math.round(this._lastOverlayMs * 100) / 100,
       frameCount: this.frameCount
     };
   }
@@ -4607,7 +4732,7 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
-  lastGridMs = 0;
+  layerGroups = /* @__PURE__ */ new Map();
   gridCacheCanvas = null;
   gridCacheCtx = null;
   gridCacheZoom = -1;
@@ -4705,6 +4830,9 @@ var RenderLoop = class {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
     if (!ctx) return;
+    let layersMs = 0;
+    let compositeMs = 0;
+    let gridMs = 0;
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     const cssWidth = this.canvasEl.clientWidth;
     const cssHeight = this.canvasEl.clientHeight;
@@ -4721,6 +4849,7 @@ var RenderLoop = class {
     ctx.scale(dpr, dpr);
     this.renderer.setCanvasSize(cssWidth, cssHeight);
     const hasGridElement = this.store.getElementsByType("grid").length > 0;
+    const bgT0 = performance.now();
     if (hasGridElement) {
       ctx.save();
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
@@ -4729,6 +4858,7 @@ var RenderLoop = class {
     } else {
       this.background.render(ctx, this.camera);
     }
+    const backgroundMs = performance.now() - bgT0;
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
     ctx.scale(this.camera.zoom, this.camera.zoom);
@@ -4741,7 +4871,7 @@ var RenderLoop = class {
       h: visibleRect.h + margin * 2
     };
     const allElements = this.store.getAll();
-    const layerElements = /* @__PURE__ */ new Map();
+    this.layerGroups.clear();
     const gridElements = [];
     let domZIndex = 0;
     for (const element of allElements) {
@@ -4764,25 +4894,30 @@ var RenderLoop = class {
         gridElements.push(element);
         continue;
       }
-      let group = layerElements.get(element.layerId);
+      let group = this.layerGroups.get(element.layerId);
       if (!group) {
         group = [];
-        layerElements.set(element.layerId, group);
+        this.layerGroups.set(element.layerId, group);
       }
       group.push(element);
     }
-    for (const [layerId, elements] of layerElements) {
+    for (const [layerId, elements] of this.layerGroups) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       if (!this.layerCache.isDirty(layerId)) {
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
         continue;
       }
       if (isActiveDrawingLayer) {
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
         continue;
       }
       const offCtx = this.layerCache.getContext(layerId);
       if (offCtx) {
+        const layerT0 = performance.now();
         const offCanvas = this.layerCache.getCanvas(layerId);
         offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
         offCtx.save();
@@ -4796,7 +4931,10 @@ var RenderLoop = class {
         }
         offCtx.restore();
         this.layerCache.markClean(layerId);
+        layersMs += performance.now() - layerT0;
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
       }
     }
     if (gridElements.length > 0) {
@@ -4837,15 +4975,23 @@ var RenderLoop = class {
         this.gridCacheHeight = cssHeight;
         this.lastGridRef = gridRef;
       }
-      this.lastGridMs = performance.now() - gridT0;
+      gridMs = performance.now() - gridT0;
     }
+    const overlayT0 = performance.now();
     const activeTool = this.toolManager.activeTool;
     if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
+    const overlayMs = performance.now() - overlayT0;
     ctx.restore();
     ctx.restore();
-    this.stats.recordFrame(performance.now() - t0, this.lastGridMs);
+    this.stats.recordFrame(performance.now() - t0, {
+      gridMs,
+      layersMs,
+      backgroundMs,
+      compositeMs,
+      overlayMs
+    });
   }
 };
 
@@ -4929,6 +5075,17 @@ var Viewport = class {
       this.renderLoop.markAllLayersDirty();
       this.requestRender();
     });
+    this.renderer.setOnImageError((src) => {
+      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 });
+      } else {
+        console.warn(`[fieldnotes] image failed to load: ${src}`);
+      }
+    });
     this.noteEditor = new NoteEditor({
       fontSizePresets: options.fontSizePresets,
       toolbar: options.toolbar,
@@ -5246,7 +5403,7 @@ var Viewport = class {
     const id = setInterval(() => {
       const s = this.getRenderStats();
       console.log(
-        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms`
+        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms layers=${s.layersMs}ms comp=${s.compositeMs}ms bg=${s.backgroundMs}ms overlay=${s.overlayMs}ms`
       );
     }, intervalMs);
     return () => clearInterval(id);
@@ -5633,6 +5790,43 @@ var PencilTool = class {
   }
 };
 
+// src/elements/stroke-hit.ts
+function distSqToSegment(p, a, b) {
+  const abx = b.x - a.x;
+  const aby = b.y - a.y;
+  const apx = p.x - a.x;
+  const apy = p.y - a.y;
+  const lenSq = abx * abx + aby * aby;
+  if (lenSq === 0) {
+    return apx * apx + apy * apy;
+  }
+  const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / lenSq));
+  const dx = p.x - (a.x + t * abx);
+  const dy = p.y - (a.y + t * aby);
+  return dx * dx + dy * dy;
+}
+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;
+}
+
 // src/tools/eraser-tool.ts
 var DEFAULT_RADIUS = 20;
 function makeEraserCursor(radius) {
@@ -5691,12 +5885,7 @@ var EraserTool = class {
     if (erased) ctx.requestRender();
   }
   strokeIntersects(stroke, point) {
-    const radiusSq = this.radius * this.radius;
-    return stroke.points.some((p) => {
-      const dx = p.x + stroke.position.x - point.x;
-      const dy = p.y + stroke.position.y - point.y;
-      return dx * dx + dy * dy <= radiusSq;
-    });
+    return hitTestStroke(stroke, point, this.radius);
   }
 };
 
@@ -6376,12 +6565,7 @@ var SelectTool = class {
       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") {
-      const HIT_RADIUS = 10;
-      return el.points.some((p) => {
-        const dx = p.x + el.position.x - point.x;
-        const dy = p.y + el.position.y - point.y;
-        return dx * dx + dy * dy <= HIT_RADIUS * HIT_RADIUS;
-      });
+      return hitTestStroke(el, point, 10);
     }
     if (el.type === "arrow") {
       return isNearBezier(point, el.from, el.to, el.bend, 10);
@@ -7217,7 +7401,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.20.0";
+var VERSION = "0.22.0";
 export {
   AddElementCommand,
   ArrowTool,