@fieldnotes/core 0.21.0 → 0.22.0

package/dist/index.d.cts

@@ -574,6 +574,10 @@ interface RenderStatsSnapshot {
     p95FrameMs: number;
     lastFrameMs: number;
     lastGridMs: number;
+    layersMs: number;
+    backgroundMs: number;
+    compositeMs: number;
+    overlayMs: number;
     frameCount: number;
 }
 
@@ -1247,6 +1251,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.21.0";
+declare const VERSION = "0.22.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -574,6 +574,10 @@ interface RenderStatsSnapshot {
     p95FrameMs: number;
     lastFrameMs: number;
     lastGridMs: number;
+    layersMs: number;
+    backgroundMs: number;
+    compositeMs: number;
+    overlayMs: number;
     frameCount: number;
 }
 
@@ -1247,6 +1251,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.21.0";
+declare const VERSION = "0.22.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

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: [] };
@@ -2662,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;
@@ -2687,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(
@@ -2712,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 };
@@ -2721,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
@@ -2735,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
@@ -4099,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;
@@ -4592,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);
@@ -4615,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
     };
   }
@@ -4642,7 +4732,7 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
-  lastGridMs = 0;
+  layerGroups = /* @__PURE__ */ new Map();
   gridCacheCanvas = null;
   gridCacheCtx = null;
   gridCacheZoom = -1;
@@ -4740,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;
@@ -4756,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);
@@ -4764,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);
@@ -4776,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) {
@@ -4799,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();
@@ -4831,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) {
@@ -4872,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
+    });
   }
 };
 
@@ -5292,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);
@@ -7290,7 +7401,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.21.0";
+var VERSION = "0.22.0";
 export {
   AddElementCommand,
   ArrowTool,