@fieldnotes/core 0.8.7 → 0.8.9

package/dist/index.js

@@ -457,6 +457,13 @@ var Background = class {
   color;
   dotRadius;
   lineWidth;
+  cachedCanvas = null;
+  cachedCtx = null;
+  lastZoom = -1;
+  lastOffsetX = -Infinity;
+  lastOffsetY = -Infinity;
+  lastWidth = 0;
+  lastHeight = 0;
   constructor(options = {}) {
     this.pattern = options.pattern ?? DEFAULTS.pattern;
     this.spacing = options.spacing ?? DEFAULTS.spacing;
@@ -472,13 +479,69 @@ var Background = class {
     ctx.save();
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "none") {
+      ctx.restore();
+      return;
+    }
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const keyZoom = camera.zoom;
+    const keyX = Math.floor(camera.position.x % spacing);
+    const keyY = Math.floor(camera.position.y % spacing);
+    if (this.cachedCanvas !== null && keyZoom === this.lastZoom && keyX === this.lastOffsetX && keyY === this.lastOffsetY && cssWidth === this.lastWidth && cssHeight === this.lastHeight) {
+      ctx.drawImage(this.cachedCanvas, 0, 0);
+      ctx.restore();
+      return;
+    }
+    this.ensureCachedCanvas(cssWidth, cssHeight, dpr);
+    if (this.cachedCtx === null) {
+      if (this.pattern === "dots") {
+        this.renderDots(ctx, camera, cssWidth, cssHeight);
+      } else if (this.pattern === "grid") {
+        this.renderGrid(ctx, camera, cssWidth, cssHeight);
+      }
+      ctx.restore();
+      return;
+    }
+    const offCtx = this.cachedCtx;
+    offCtx.clearRect(0, 0, cssWidth, cssHeight);
     if (this.pattern === "dots") {
-      this.renderDots(ctx, camera, cssWidth, cssHeight);
+      this.renderDots(offCtx, camera, cssWidth, cssHeight);
     } else if (this.pattern === "grid") {
-      this.renderGrid(ctx, camera, cssWidth, cssHeight);
-    }
+      this.renderGrid(offCtx, camera, cssWidth, cssHeight);
+    }
+    this.lastZoom = keyZoom;
+    this.lastOffsetX = keyX;
+    this.lastOffsetY = keyY;
+    this.lastWidth = cssWidth;
+    this.lastHeight = cssHeight;
+    ctx.drawImage(this.cachedCanvas, 0, 0);
     ctx.restore();
   }
+  ensureCachedCanvas(cssWidth, cssHeight, dpr) {
+    if (this.cachedCanvas !== null && this.lastWidth === cssWidth && this.lastHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.cachedCanvas = new OffscreenCanvas(physWidth, physHeight);
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.cachedCanvas = el;
+    } else {
+      this.cachedCanvas = null;
+      this.cachedCtx = null;
+      return;
+    }
+    const offCtx = this.cachedCanvas.getContext("2d");
+    if (offCtx !== null) {
+      offCtx.scale(dpr, dpr);
+    }
+    this.cachedCtx = offCtx;
+    this.lastZoom = -1;
+  }
   adaptSpacing(baseSpacing, zoom) {
     let spacing = baseSpacing * zoom;
     while (spacing < MIN_PATTERN_SPACING) {
@@ -961,6 +1024,10 @@ var ElementStore = class {
     const existing = this.elements.get(id);
     if (!existing) return;
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    if (updated.type === "arrow") {
+      const arrow = updated;
+      arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+    }
     this.elements.set(id, updated);
     const newBounds = getElementBounds(updated);
     if (newBounds) {
@@ -1216,6 +1283,25 @@ function smoothToSegments(points) {
   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: [] };
@@ -1233,58 +1319,6 @@ function getSquareGridLines(bounds, cellSize) {
   }
   return { verticals, horizontals };
 }
-function getHexVertices(cx, cy, circumradius, orientation) {
-  const vertices = [];
-  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
-  for (let i = 0; i < 6; i++) {
-    const angle = Math.PI / 3 * i + angleOffset;
-    vertices.push({
-      x: cx + circumradius * Math.cos(angle),
-      y: cy + circumradius * Math.sin(angle)
-    });
-  }
-  return vertices;
-}
-function getHexCenters(bounds, circumradius, orientation) {
-  if (circumradius <= 0) return [];
-  const centers = [];
-  if (orientation === "pointy") {
-    const hexW = Math.sqrt(3) * circumradius;
-    const hexH = 2 * circumradius;
-    const rowH = hexH * 0.75;
-    const startRow = Math.floor((bounds.minY - circumradius) / rowH);
-    const endRow = Math.ceil((bounds.maxY + circumradius) / rowH);
-    const startCol = Math.floor((bounds.minX - hexW) / hexW);
-    const endCol = Math.ceil((bounds.maxX + hexW) / hexW);
-    for (let row = startRow; row <= endRow; row++) {
-      const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
-      for (let col = startCol; col <= endCol; col++) {
-        centers.push({
-          x: col * hexW + offsetX,
-          y: row * rowH
-        });
-      }
-    }
-  } else {
-    const hexW = 2 * circumradius;
-    const hexH = Math.sqrt(3) * circumradius;
-    const colW = hexW * 0.75;
-    const startCol = Math.floor((bounds.minX - circumradius) / colW);
-    const endCol = Math.ceil((bounds.maxX + circumradius) / colW);
-    const startRow = Math.floor((bounds.minY - hexH) / hexH);
-    const endRow = Math.ceil((bounds.maxY + hexH) / hexH);
-    for (let col = startCol; col <= endCol; col++) {
-      const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
-      for (let row = startRow; row <= endRow; row++) {
-        centers.push({
-          x: col * colW,
-          y: row * hexH + offsetY
-        });
-      }
-    }
-  }
-  return centers;
-}
 function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opacity) {
   if (cellSize <= 0) return;
   const { verticals, horizontals } = getSquareGridLines(bounds, cellSize);
@@ -1306,27 +1340,172 @@ function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opaci
 }
 function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWidth, opacity) {
   if (cellSize <= 0) return;
-  const centers = getHexCenters(bounds, cellSize, orientation);
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
   ctx.save();
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
   ctx.globalAlpha = opacity;
   ctx.beginPath();
-  for (const center of centers) {
-    const verts = getHexVertices(center.x, center.y, cellSize, orientation);
-    const first = verts[0];
-    if (!first) continue;
-    ctx.moveTo(first.x, first.y);
-    for (let i = 1; i < verts.length; i++) {
-      const v = verts[i];
-      if (!v) continue;
-      ctx.lineTo(v.x, v.y);
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const startRow = Math.floor((bounds.minY - cellSize) / rowH);
+    const endRow = Math.ceil((bounds.maxY + cellSize) / rowH);
+    const startCol = Math.floor((bounds.minX - hexW) / hexW);
+    const endCol = Math.ceil((bounds.maxX + hexW) / hexW);
+    for (let row = startRow; row <= endRow; row++) {
+      const offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
+    }
+  } else {
+    const hexH = Math.sqrt(3) * cellSize;
+    const colW = 1.5 * cellSize;
+    const startCol = Math.floor((bounds.minX - cellSize) / colW);
+    const endCol = Math.ceil((bounds.maxX + cellSize) / colW);
+    const startRow = Math.floor((bounds.minY - hexH) / hexH);
+    const endRow = Math.ceil((bounds.maxY + hexH) / hexH);
+    for (let col = startCol; col <= endCol; col++) {
+      const offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
     }
-    ctx.closePath();
   }
   ctx.stroke();
   ctx.restore();
 }
+function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+  let tileW;
+  let tileH;
+  if (orientation === "pointy") {
+    tileW = Math.sqrt(3) * cellSize;
+    tileH = 3 * cellSize;
+  } else {
+    tileW = 3 * cellSize;
+    tileH = Math.sqrt(3) * cellSize;
+  }
+  const pxW = Math.ceil(tileW * scale);
+  const pxH = Math.ceil(tileH * scale);
+  if (pxW <= 0 || pxH <= 0) return null;
+  let canvas;
+  if (typeof OffscreenCanvas !== "undefined") {
+    canvas = new OffscreenCanvas(pxW, pxH);
+  } else if (typeof document !== "undefined") {
+    const el = document.createElement("canvas");
+    el.width = pxW;
+    el.height = pxH;
+    canvas = el;
+  } else {
+    return null;
+  }
+  const tc = canvas.getContext("2d");
+  if (!tc) return null;
+  tc.scale(scale, scale);
+  tc.beginPath();
+  tc.rect(0, 0, tileW, tileH);
+  tc.clip();
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
+  tc.strokeStyle = strokeColor;
+  tc.lineWidth = strokeWidth;
+  tc.globalAlpha = opacity;
+  tc.beginPath();
+  if (orientation === "pointy") {
+    const hexW = tileW;
+    const rowH = 1.5 * cellSize;
+    for (let row = -1; row <= 3; row++) {
+      const offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = -1; col <= 1; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  } else {
+    const hexH = tileH;
+    const colW = 1.5 * cellSize;
+    for (let col = -1; col <= 3; col++) {
+      const offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = -1; row <= 1; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  }
+  tc.stroke();
+  return { canvas, tileW, tileH };
+}
+function renderHexGridTiled(ctx, bounds, cellSize, tile, scale) {
+  const pattern = ctx.createPattern(tile.canvas, "repeat");
+  if (!pattern) return;
+  const mat = new DOMMatrix();
+  mat.scaleSelf(1 / scale, 1 / scale);
+  pattern.setTransform(mat);
+  ctx.save();
+  ctx.fillStyle = pattern;
+  const pad = cellSize * 2;
+  ctx.fillRect(
+    bounds.minX - pad,
+    bounds.minY - pad,
+    bounds.maxX - bounds.minX + pad * 2,
+    bounds.maxY - bounds.minY + pad * 2
+  );
+  ctx.restore();
+}
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
@@ -1338,6 +1517,8 @@ var ElementRenderer = class {
   onImageLoad = null;
   camera = null;
   canvasSize = null;
+  hexTileCache = null;
+  hexTileCacheKey = "";
   setStore(store) {
     this.store = store;
   }
@@ -1380,9 +1561,11 @@ var ElementRenderer = class {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    const segments = smoothToSegments(stroke.points);
-    for (const seg of segments) {
-      const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+    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);
@@ -1403,7 +1586,7 @@ var ElementRenderer = class {
     ctx.beginPath();
     ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
-      const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+      const cp = arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
       ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
     } else {
       ctx.lineTo(visualTo.x, visualTo.y);
@@ -1521,15 +1704,29 @@ var ElementRenderer = class {
       maxY: bottomRight.y
     };
     if (grid.gridType === "hex") {
-      renderHexGrid(
-        ctx,
-        bounds,
+      const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+      const scale = cam.zoom * dpr;
+      const tile = this.getHexTile(
         grid.cellSize,
         grid.hexOrientation,
         grid.strokeColor,
         grid.strokeWidth,
-        grid.opacity
+        grid.opacity,
+        scale
       );
+      if (tile) {
+        renderHexGridTiled(ctx, bounds, grid.cellSize, tile, scale);
+      } else {
+        renderHexGrid(
+          ctx,
+          bounds,
+          grid.cellSize,
+          grid.hexOrientation,
+          grid.strokeColor,
+          grid.strokeWidth,
+          grid.opacity
+        );
+      }
     } else {
       renderSquareGrid(
         ctx,
@@ -1544,15 +1741,45 @@ var ElementRenderer = class {
   renderImage(ctx, image) {
     const img = this.getImage(image.src);
     if (!img) return;
-    ctx.drawImage(img, image.position.x, image.position.y, image.size.w, image.size.h);
+    ctx.drawImage(
+      img,
+      image.position.x,
+      image.position.y,
+      image.size.w,
+      image.size.h
+    );
+  }
+  getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+    const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
+    if (this.hexTileCacheKey === key && this.hexTileCache) {
+      return this.hexTileCache;
+    }
+    const tile = createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale);
+    if (tile) {
+      this.hexTileCache = tile;
+      this.hexTileCacheKey = key;
+    }
+    return tile;
   }
   getImage(src) {
     const cached = this.imageCache.get(src);
-    if (cached) return cached.complete ? cached : null;
+    if (cached) {
+      if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
+      return cached;
+    }
     const img = new Image();
     img.src = src;
     this.imageCache.set(src, img);
-    img.onload = () => this.onImageLoad?.();
+    img.onload = () => {
+      this.onImageLoad?.();
+      if (typeof createImageBitmap !== "undefined") {
+        createImageBitmap(img).then((bitmap) => {
+          this.imageCache.set(src, bitmap);
+          this.onImageLoad?.();
+        }).catch(() => {
+        });
+      }
+    };
     return null;
   }
 };
@@ -1928,6 +2155,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
+  const bend = input.bend ?? 0;
   const result = {
     id: createId("arrow"),
     type: "arrow",
@@ -1937,9 +2165,10 @@ function createArrow(input) {
     layerId: input.layerId ?? "",
     from: input.from,
     to: input.to,
-    bend: input.bend ?? 0,
+    bend,
     color: input.color ?? "#000000",
-    width: input.width ?? 2
+    width: input.width ?? 2,
+    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
   };
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
@@ -2190,19 +2419,19 @@ function loadImages(elements) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
-  const cache = /* @__PURE__ */ new Map();
-  if (imageElements.length === 0) return Promise.resolve(cache);
+  const cache2 = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache2);
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
       remaining--;
-      if (remaining <= 0) resolve(cache);
+      if (remaining <= 0) resolve(cache2);
     };
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        cache.set(el.id, img);
+        cache2.set(el.id, img);
         done();
       };
       img.onerror = done;
@@ -2632,17 +2861,19 @@ var SAMPLE_SIZE = 60;
 var RenderStats = class {
   frameTimes = [];
   frameCount = 0;
-  recordFrame(durationMs) {
+  _lastGridMs = 0;
+  recordFrame(durationMs, gridMs) {
     this.frameCount++;
     this.frameTimes.push(durationMs);
     if (this.frameTimes.length > SAMPLE_SIZE) {
       this.frameTimes.shift();
     }
+    if (gridMs !== void 0) this._lastGridMs = gridMs;
   }
   getSnapshot() {
     const times = this.frameTimes;
     if (times.length === 0) {
-      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, frameCount: 0 };
+      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, lastGridMs: 0, frameCount: 0 };
     }
     const avg = times.reduce((a, b) => a + b, 0) / times.length;
     const sorted = [...times].sort((a, b) => a - b);
@@ -2653,6 +2884,7 @@ var RenderStats = class {
       avgFrameMs: Math.round(avg * 100) / 100,
       p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
       lastFrameMs: Math.round(lastFrame * 100) / 100,
+      lastGridMs: Math.round(this._lastGridMs * 100) / 100,
       frameCount: this.frameCount
     };
   }
@@ -2680,6 +2912,15 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
+  lastGridMs = 0;
+  gridCacheCanvas = null;
+  gridCacheCtx = null;
+  gridCacheZoom = -1;
+  gridCacheCamX = -Infinity;
+  gridCacheCamY = -Infinity;
+  gridCacheWidth = 0;
+  gridCacheHeight = 0;
+  lastGridRef = null;
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -2742,6 +2983,29 @@ var RenderLoop = class {
     ctx.drawImage(cached, 0, 0);
     ctx.restore();
   }
+  ensureGridCache(cssWidth, cssHeight, dpr) {
+    if (this.gridCacheCanvas !== null && this.gridCacheWidth === cssWidth && this.gridCacheHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.gridCacheCanvas = new OffscreenCanvas(
+        physWidth,
+        physHeight
+      );
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.gridCacheCanvas = el;
+    } else {
+      this.gridCacheCanvas = null;
+      this.gridCacheCtx = null;
+      return;
+    }
+    this.gridCacheCtx = this.gridCacheCanvas.getContext("2d");
+  }
   render() {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
@@ -2804,9 +3068,6 @@ var RenderLoop = class {
       }
       group.push(element);
     }
-    for (const grid of gridElements) {
-      this.renderer.renderCanvasElement(ctx, grid);
-    }
     for (const [layerId, elements] of layerElements) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       if (!this.layerCache.isDirty(layerId)) {
@@ -2835,13 +3096,53 @@ var RenderLoop = class {
         this.compositeLayerCache(ctx, layerId, dpr);
       }
     }
+    if (gridElements.length > 0) {
+      const gridT0 = performance.now();
+      const gridRef = gridElements[0];
+      const gridCacheHit = this.gridCacheCanvas !== null && currentZoom === this.gridCacheZoom && currentCamX === this.gridCacheCamX && currentCamY === this.gridCacheCamY && cssWidth === this.gridCacheWidth && cssHeight === this.gridCacheHeight && gridRef === this.lastGridRef;
+      if (gridCacheHit) {
+        ctx.save();
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.drawImage(this.gridCacheCanvas, 0, 0);
+        ctx.restore();
+      } else {
+        this.ensureGridCache(cssWidth, cssHeight, dpr);
+        if (this.gridCacheCtx && this.gridCacheCanvas) {
+          const gc = this.gridCacheCtx;
+          gc.clearRect(0, 0, this.gridCacheCanvas.width, this.gridCacheCanvas.height);
+          gc.save();
+          gc.scale(dpr, dpr);
+          gc.translate(currentCamX, currentCamY);
+          gc.scale(currentZoom, currentZoom);
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(gc, grid);
+          }
+          gc.restore();
+          ctx.save();
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          ctx.drawImage(this.gridCacheCanvas, 0, 0);
+          ctx.restore();
+        } else {
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(ctx, grid);
+          }
+        }
+        this.gridCacheZoom = currentZoom;
+        this.gridCacheCamX = currentCamX;
+        this.gridCacheCamY = currentCamY;
+        this.gridCacheWidth = cssWidth;
+        this.gridCacheHeight = cssHeight;
+        this.lastGridRef = gridRef;
+      }
+      this.lastGridMs = performance.now() - gridT0;
+    }
     const activeTool = this.toolManager.activeTool;
     if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
     ctx.restore();
     ctx.restore();
-    this.stats.recordFrame(performance.now() - t0);
+    this.stats.recordFrame(performance.now() - t0, this.lastGridMs);
   }
 };
 
@@ -3141,6 +3442,18 @@ var Viewport = class {
     this.historyRecorder.commit();
     this.requestRender();
   }
+  getRenderStats() {
+    return this.renderLoop.getStats();
+  }
+  logPerformance(intervalMs = 2e3) {
+    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`
+      );
+    }, intervalMs);
+    return () => clearInterval(id);
+  }
   destroy() {
     this.renderLoop.stop();
     this.interactMode.destroy();
@@ -3450,6 +3763,7 @@ var PencilTool = class {
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(stroke);
+    computeStrokeSegments(stroke);
     this.points = [];
     ctx.requestRender();
   }
@@ -4524,7 +4838,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.7";
+var VERSION = "0.8.8";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",