@fieldnotes/core 0.39.0 → 0.40.1

package/dist/index.d.cts

@@ -233,7 +233,7 @@ interface Tool {
     setOptions?(options: object): void;
     onOptionsChange?(listener: () => void): () => void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template' | 'laser';
 
 declare function snapPoint(point: Point, gridSize: number): Point;
 declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
@@ -1017,6 +1017,37 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.39.0";
+interface LaserToolOptions {
+    name?: string;
+    color?: string;
+    width?: number;
+    fadeMs?: number;
+}
+declare class LaserTool implements Tool {
+    readonly name: string;
+    private color;
+    private width;
+    private fadeMs;
+    private trail;
+    private rafId;
+    private drawing;
+    private optionListeners;
+    constructor(options?: LaserToolOptions);
+    private now;
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    getOptions(): LaserToolOptions;
+    onOptionsChange(listener: () => void): () => void;
+    setOptions(options: LaserToolOptions): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, _ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private ensureAnimating;
+    private tick;
+    private notifyOptionsChange;
+}
+
+declare const VERSION = "0.40.1";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -233,7 +233,7 @@ interface Tool {
     setOptions?(options: object): void;
     onOptionsChange?(listener: () => void): () => void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template' | 'laser';
 
 declare function snapPoint(point: Point, gridSize: number): Point;
 declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
@@ -1017,6 +1017,37 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.39.0";
+interface LaserToolOptions {
+    name?: string;
+    color?: string;
+    width?: number;
+    fadeMs?: number;
+}
+declare class LaserTool implements Tool {
+    readonly name: string;
+    private color;
+    private width;
+    private fadeMs;
+    private trail;
+    private rafId;
+    private drawing;
+    private optionListeners;
+    constructor(options?: LaserToolOptions);
+    private now;
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    getOptions(): LaserToolOptions;
+    onOptionsChange(listener: () => void): () => void;
+    setOptions(options: LaserToolOptions): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, _ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private ensureAnimating;
+    private tick;
+    private notifyOptionsChange;
+}
+
+declare const VERSION = "0.40.1";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -831,6 +831,11 @@ var KeyboardActions = class {
     if (tool?.name !== "select") return null;
     return { tool, ctx };
   }
+  selectableElements(ctx) {
+    return ctx.store.getAll().filter(
+      (el) => !el.locked && (ctx.isLayerVisible?.(el.layerId) ?? true) && !(ctx.isLayerLocked?.(el.layerId) ?? false)
+    );
+  }
   nudge(dx, dy, byCell) {
     if (this.deps.isToolActive()) return false;
     const sel = this.selectTool();
@@ -973,12 +978,28 @@ var KeyboardActions = class {
     }
     const sel = this.selectTool();
     if (!sel) return;
-    const ids = sel.ctx.store.getAll().filter(
-      (el) => !el.locked && (sel.ctx.isLayerVisible?.(el.layerId) ?? true) && !(sel.ctx.isLayerLocked?.(el.layerId) ?? false)
-    ).map((el) => el.id);
+    const ids = this.selectableElements(sel.ctx).map((el) => el.id);
     sel.tool.setSelection(ids);
     sel.ctx.requestRender();
   }
+  cycleSelection(direction) {
+    if (this.deps.isToolActive()) return;
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return;
+    if (tm.activeTool?.name !== "select") ctx.switchTool?.("select");
+    const sel = this.selectTool();
+    if (!sel) return;
+    const eligible = this.selectableElements(sel.ctx).filter((el) => el.type !== "grid");
+    if (eligible.length === 0) return;
+    const idxs = sel.tool.selectedIds.map((id) => eligible.findIndex((e) => e.id === id)).filter((i) => i >= 0);
+    const anchor = idxs.length === 0 ? direction > 0 ? -1 : 0 : direction > 0 ? Math.max(...idxs) : Math.min(...idxs);
+    const next = (anchor + direction + eligible.length) % eligible.length;
+    const target = eligible[next];
+    if (!target) return;
+    sel.tool.setSelection([target.id]);
+    sel.ctx.requestRender();
+  }
   zoomToFit() {
     if (this.deps.isToolActive()) return;
     this.deps.fitToContent?.();
@@ -1083,6 +1104,8 @@ var DEFAULT_BINDINGS = [
   ["undo", ["mod+z"]],
   ["redo", ["mod+y", "mod+shift+z"]],
   ["select-all", ["mod+a"]],
+  ["cycle-selection", ["tab"]],
+  ["cycle-selection-reverse", ["shift+tab"]],
   ["copy", ["mod+c"]],
   ["duplicate", ["mod+d"]],
   ["z-forward", ["]"]],
@@ -1353,6 +1376,14 @@ var KeyboardHandler = class {
         e?.preventDefault();
         this.deps.actions.selectAll();
         return;
+      case "cycle-selection":
+        e?.preventDefault();
+        this.deps.actions.cycleSelection(1);
+        return;
+      case "cycle-selection-reverse":
+        e?.preventDefault();
+        this.deps.actions.cycleSelection(-1);
+        return;
       case "copy":
         e?.preventDefault();
         this.deps.actions.copy();
@@ -4651,6 +4682,16 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
   }
 }
 
+// src/canvas/text-canvas-renderer.ts
+function renderTextOnCanvas(ctx, text) {
+  const pad = 2;
+  ctx.save();
+  ctx.fillStyle = text.color;
+  const runs = parseStyledRuns(text.text ?? "", text.fontSize);
+  renderStyledRuns(ctx, runs, text.position.x + pad, text.position.y + pad, text.size.w - pad * 2);
+  ctx.restore();
+}
+
 // src/canvas/export-image.ts
 var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
@@ -4733,30 +4774,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderTextOnCanvas(ctx, text) {
-  if (!text.text) return;
-  ctx.save();
-  ctx.fillStyle = text.color;
-  ctx.font = `${text.fontSize}px system-ui, sans-serif`;
-  ctx.textBaseline = "top";
-  ctx.textAlign = text.textAlign;
-  const pad = 2;
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line !== void 0) {
-      ctx.fillText(line, textX, text.position.y + pad + i * lineHeight);
-    }
-  }
-  ctx.restore();
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -4978,28 +4995,27 @@ function emitImage(image, dataUri) {
   const { w, h } = image.size;
   return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitText(text) {
+function emitText(text, rasterScale) {
   if (!text.text) return "";
-  const pad = 2;
-  let anchor = "start";
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    anchor = "middle";
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    anchor = "end";
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  let out = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line === void 0) continue;
-    const y = text.position.y + pad + i * lineHeight;
-    out += `<text x="${n(textX)}" y="${n(y)}" font-family="system-ui, sans-serif" font-size="${n(text.fontSize)}" fill="${esc(text.color)}" text-anchor="${anchor}" dominant-baseline="text-before-edge">${esc(line)}</text>`;
+  const { x, y } = text.position;
+  const { w, h } = text.size;
+  if (typeof document === "undefined") return "";
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
+  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(rasterScale, rasterScale);
+  ctx.translate(-x, -y);
+  renderTextOnCanvas(ctx, text);
+  let dataUri;
+  try {
+    dataUri = canvas.toDataURL();
+  } catch {
+    return "";
   }
-  return out;
+  if (!dataUri || !dataUri.startsWith("data:")) return "";
+  return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
 function emitNote(note, rasterScale) {
   const { x, y } = note.position;
@@ -5182,7 +5198,7 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
     case "image":
       return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
     case "text":
-      return withRotationSvg(el, emitText(el));
+      return withRotationSvg(el, emitText(el, rasterScale));
     case "note":
       return withRotationSvg(el, emitNote(el, rasterScale));
     case "template":
@@ -5645,10 +5661,9 @@ var DomNodeManager = class {
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
           lineHeight: "1.4"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         const detector = new DoubleTapDetector();
         node.addEventListener("pointerup", (e) => {
           if (detector.feed(e)) {
@@ -5659,8 +5674,9 @@ var DomNodeManager = class {
         });
       }
       if (!this.isEditingElement(element.id)) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
+        const text = element.text || "";
+        if (node.innerHTML !== text) {
+          node.innerHTML = text;
         }
         Object.assign(node.style, {
           fontSize: `${element.fontSize}px`,
@@ -7691,6 +7707,17 @@ function renderArrowHandles(canvasCtx, arrow, zoom) {
     canvasCtx.stroke();
   }
 }
+function renderArrowHoverHandle(canvasCtx, arrow, zoom) {
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  const radius = HANDLE_RADIUS / zoom;
+  canvasCtx.fillStyle = "#2196F3";
+  canvasCtx.strokeStyle = "#2196F3";
+  canvasCtx.lineWidth = 1.5 / zoom;
+  canvasCtx.beginPath();
+  canvasCtx.arc(mid.x, mid.y, radius, 0, Math.PI * 2);
+  canvasCtx.fill();
+  canvasCtx.stroke();
+}
 
 // src/elements/snap-guides.ts
 function xAnchors(b) {
@@ -8539,7 +8566,13 @@ var SelectTool = class {
     if (this.hoveredId && this.ctx && this.mode.type === "idle") {
       if (!this._selectedIds.includes(this.hoveredId)) {
         const el = this.ctx.store.getById(this.hoveredId);
-        if (el) {
+        if (el?.type === "arrow") {
+          canvasCtx.save();
+          canvasCtx.globalAlpha = 0.35;
+          canvasCtx.setLineDash([]);
+          renderArrowHoverHandle(canvasCtx, el, this.ctx.camera.zoom);
+          canvasCtx.restore();
+        } else if (el) {
           const b = getElementBounds(el);
           if (b) {
             canvasCtx.save();
@@ -9510,8 +9543,118 @@ var TemplateTool = class {
   }
 };
 
+// src/tools/laser-tool.ts
+var DEFAULT_COLOR = "#ff3b30";
+var DEFAULT_WIDTH = 4;
+var DEFAULT_FADE_MS = 1200;
+var LaserTool = class {
+  name;
+  color;
+  width;
+  fadeMs;
+  trail = [];
+  rafId = null;
+  drawing = false;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.name = options.name ?? "laser";
+    this.color = options.color ?? DEFAULT_COLOR;
+    this.width = options.width ?? DEFAULT_WIDTH;
+    this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS;
+  }
+  now() {
+    return performance.now();
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("crosshair");
+  }
+  onDeactivate(ctx) {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.trail = [];
+    this.drawing = false;
+    ctx.setCursor?.("default");
+    ctx.requestRender();
+  }
+  getOptions() {
+    return {
+      name: this.name,
+      color: this.color,
+      width: this.width,
+      fadeMs: this.fadeMs
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
+  setOptions(options) {
+    if (options.color !== void 0) this.color = options.color;
+    if (options.width !== void 0) this.width = options.width;
+    if (options.fadeMs !== void 0) this.fadeMs = options.fadeMs;
+    this.notifyOptionsChange();
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.trail.push({ x: world.x, y: world.y, t: this.now() });
+    this.ensureAnimating(ctx);
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.trail.push({ x: world.x, y: world.y, t: this.now() });
+    this.ensureAnimating(ctx);
+  }
+  onPointerUp(_state, _ctx) {
+    this.drawing = false;
+  }
+  renderOverlay(ctx) {
+    if (this.trail.length < 2) return;
+    ctx.save();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    const now = this.now();
+    for (let i = 0; i < this.trail.length - 1; i++) {
+      const a = this.trail[i];
+      const b = this.trail[i + 1];
+      if (!a || !b) continue;
+      const age = now - b.t;
+      ctx.globalAlpha = Math.max(0, 1 - age / this.fadeMs);
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ensureAnimating(ctx) {
+    if (this.rafId === null) {
+      this.rafId = requestAnimationFrame(() => this.tick(ctx));
+    }
+  }
+  tick(ctx) {
+    const cutoff = this.now() - this.fadeMs;
+    this.trail = this.trail.filter((p) => p.t >= cutoff);
+    if (this.trail.length > 0) {
+      ctx.requestRender();
+      this.rafId = requestAnimationFrame(() => this.tick(ctx));
+    } else {
+      ctx.requestRender();
+      this.rafId = null;
+    }
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
+};
+
 // src/index.ts
-var VERSION = "0.39.0";
+var VERSION = "0.40.1";
 export {
   ArrowTool,
   AutoSave,
@@ -9522,6 +9665,7 @@ export {
   HandTool,
   HistoryStack,
   ImageTool,
+  LaserTool,
   LayerManager,
   MeasureTool,
   NoteTool,