@fieldnotes/core 0.19.0 → 0.21.0

package/dist/index.d.cts

@@ -588,12 +588,17 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
     shortcuts?: ShortcutOptions;
     onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
     onDrop?: (event: DragEvent, worldPosition: {
         x: number;
         y: number;
     }) => void;
+    onImageError?: (info: {
+        src: string;
+        elementIds: string[];
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -694,12 +699,14 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private onImageError;
     private camera;
     private canvasSize;
     private hexTileCache;
     private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setOnImageError(callback: (src: string) => void): void;
     setCamera(camera: Camera): void;
     setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
@@ -717,6 +724,7 @@ declare class ElementRenderer {
     private renderHexTemplate;
     private renderRadiusMarker;
     private renderImage;
+    private renderImagePlaceholder;
     private getHexTile;
     private getImage;
 }
@@ -724,6 +732,7 @@ declare class ElementRenderer {
 interface NoteEditorOptions {
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
 }
 declare class NoteEditor {
     private editingId;
@@ -731,9 +740,11 @@ declare class NoteEditor {
     private blurHandler;
     private keyHandler;
     private pointerHandler;
+    private inputHandler;
     private pendingEditId;
     private onStopCallback;
     private toolbar;
+    private readonly placeholder;
     constructor(options?: NoteEditorOptions);
     get isEditing(): boolean;
     get editingElementId(): string | null;
@@ -756,6 +767,7 @@ interface StyledRun extends RunStyle {
     text: string;
 }
 declare function sanitizeNoteHtml(html: string): string;
+declare function isNoteContentEmpty(html: string): boolean;
 
 interface ActiveFormats {
     bold: boolean;
@@ -985,6 +997,7 @@ declare class SelectTool implements Tool {
     private pendingSingleSelectId;
     private hasDragged;
     private resizeAspectRatio;
+    private hoveredId;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -999,6 +1012,7 @@ declare class SelectTool implements Tool {
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
+    private setHovered;
     private handleResize;
     private hitTestResizeHandle;
     private getHandlePositions;
@@ -1233,6 +1247,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.19.0";
+declare const VERSION = "0.21.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, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+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

@@ -588,12 +588,17 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
     shortcuts?: ShortcutOptions;
     onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
     onDrop?: (event: DragEvent, worldPosition: {
         x: number;
         y: number;
     }) => void;
+    onImageError?: (info: {
+        src: string;
+        elementIds: string[];
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -694,12 +699,14 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private onImageError;
     private camera;
     private canvasSize;
     private hexTileCache;
     private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setOnImageError(callback: (src: string) => void): void;
     setCamera(camera: Camera): void;
     setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
@@ -717,6 +724,7 @@ declare class ElementRenderer {
     private renderHexTemplate;
     private renderRadiusMarker;
     private renderImage;
+    private renderImagePlaceholder;
     private getHexTile;
     private getImage;
 }
@@ -724,6 +732,7 @@ declare class ElementRenderer {
 interface NoteEditorOptions {
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
 }
 declare class NoteEditor {
     private editingId;
@@ -731,9 +740,11 @@ declare class NoteEditor {
     private blurHandler;
     private keyHandler;
     private pointerHandler;
+    private inputHandler;
     private pendingEditId;
     private onStopCallback;
     private toolbar;
+    private readonly placeholder;
     constructor(options?: NoteEditorOptions);
     get isEditing(): boolean;
     get editingElementId(): string | null;
@@ -756,6 +767,7 @@ interface StyledRun extends RunStyle {
     text: string;
 }
 declare function sanitizeNoteHtml(html: string): string;
+declare function isNoteContentEmpty(html: string): boolean;
 
 interface ActiveFormats {
     bold: boolean;
@@ -985,6 +997,7 @@ declare class SelectTool implements Tool {
     private pendingSingleSelectId;
     private hasDragged;
     private resizeAspectRatio;
+    private hoveredId;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -999,6 +1012,7 @@ declare class SelectTool implements Tool {
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
+    private setHovered;
     private handleResize;
     private hitTestResizeHandle;
     private getHandlePositions;
@@ -1233,6 +1247,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.19.0";
+declare const VERSION = "0.21.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, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+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

@@ -273,6 +273,12 @@ function sanitizeNode(node) {
     sanitizeNode(el);
   }
 }
+function isNoteContentEmpty(html) {
+  if (!html) return true;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const text = doc.body.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 function sanitizeAttributes(el, tag) {
   const attrs = Array.from(el.attributes);
   for (const attr of attrs) {
@@ -2603,6 +2609,7 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  onImageError = null;
   camera = null;
   canvasSize = null;
   hexTileCache = null;
@@ -2613,6 +2620,9 @@ var ElementRenderer = class {
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setOnImageError(callback) {
+    this.onImageError = callback;
+  }
   setCamera(camera) {
     this.camera = camera;
   }
@@ -2971,6 +2981,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(
@@ -2981,6 +2995,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) {
@@ -2996,6 +3031,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;
     }
@@ -3012,6 +3048,11 @@ var ElementRenderer = class {
         });
       }
     };
+    img.onerror = () => {
+      this.imageCache.set(src, "failed");
+      this.onImageError?.(src);
+      this.onImageLoad?.();
+    };
     return null;
   }
 };
@@ -3364,17 +3405,36 @@ var FORMAT_SHORTCUTS = {
   i: toggleItalic,
   u: toggleUnderline
 };
+function ensureEditorStyles() {
+  if (document.querySelector("style[data-fieldnotes-editor]")) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-fieldnotes-editor", "");
+  style.textContent = `[data-fn-placeholder][data-fn-empty='true']::before {
+  content: attr(data-fn-placeholder);
+  color: #9e9e9e;
+  position: absolute;
+  pointer-events: none;
+}`;
+  document.head.appendChild(style);
+}
+function isNodeEmpty(node) {
+  const text = node.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 var NoteEditor = class {
   editingId = null;
   editingNode = null;
   blurHandler = null;
   keyHandler = null;
   pointerHandler = null;
+  inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
   toolbar;
+  placeholder;
   constructor(options) {
     this.toolbar = options?.toolbar === false ? null : new NoteToolbar(options?.fontSizePresets);
+    this.placeholder = options?.placeholder ?? "Type\u2026";
   }
   get isEditing() {
     return this.editingId !== null;
@@ -3409,6 +3469,11 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    if (this.inputHandler) {
+      this.editingNode.removeEventListener("input", this.inputHandler);
+    }
+    this.editingNode.removeAttribute("data-fn-placeholder");
+    this.editingNode.removeAttribute("data-fn-empty");
     const text = sanitizeNoteHtml(this.editingNode.innerHTML);
     store.update(this.editingId, { text });
     this.editingNode.contentEditable = "false";
@@ -3425,6 +3490,7 @@ var NoteEditor = class {
     this.blurHandler = null;
     this.keyHandler = null;
     this.pointerHandler = null;
+    this.inputHandler = null;
   }
   destroy(store) {
     this.pendingEditId = null;
@@ -3455,6 +3521,13 @@ var NoteEditor = class {
       selection.removeAllRanges();
       selection.addRange(range);
     }
+    ensureEditorStyles();
+    node.setAttribute("data-fn-placeholder", this.placeholder);
+    node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    this.inputHandler = () => {
+      node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    };
+    node.addEventListener("input", this.inputHandler);
     this.toolbar?.show(node);
     this.blurHandler = (e) => {
       const related = e.relatedTarget;
@@ -4891,9 +4964,21 @@ 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
+      toolbar: options.toolbar,
+      placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.onHtmlElementMount = options.onHtmlElementMount;
@@ -5239,7 +5324,16 @@ var Viewport = class {
   }
   onTextEditStop(elementId) {
     const element = this.store.getById(elementId);
-    if (!element || element.type !== "text") return;
+    if (!element) return;
+    if (element.type === "note") {
+      if (isNoteContentEmpty(element.text)) {
+        this.historyRecorder.begin();
+        this.store.remove(elementId);
+        this.historyRecorder.commit();
+      }
+      return;
+    }
+    if (element.type !== "text") return;
     if (!element.text || element.text.trim() === "") {
       this.historyRecorder.begin();
       this.store.remove(elementId);
@@ -5585,6 +5679,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) {
@@ -5643,12 +5774,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);
   }
 };
 
@@ -5788,6 +5914,7 @@ var SelectTool = class {
   pendingSingleSelectId = null;
   hasDragged = false;
   resizeAspectRatio = 0;
+  hoveredId = null;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5804,6 +5931,7 @@ var SelectTool = class {
   onDeactivate(ctx) {
     this._selectedIds = [];
     this.mode = { type: "idle" };
+    this.hoveredId = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -5811,6 +5939,7 @@ var SelectTool = class {
   }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
+    this.setHovered(null, ctx);
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
@@ -5953,7 +6082,8 @@ var SelectTool = class {
   }
   onHover(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.updateHoverCursor(world, ctx);
+    const hoverId = this.updateHoverCursor(world, ctx);
+    this.setHovered(hoverId, ctx);
   }
   renderOverlay(canvasCtx) {
     this.renderMarquee(canvasCtx);
@@ -5974,6 +6104,23 @@ var SelectTool = class {
         canvasCtx.restore();
       }
     }
+    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) {
+          const b = getElementBounds(el);
+          if (b) {
+            canvasCtx.save();
+            canvasCtx.strokeStyle = "#2196F3";
+            canvasCtx.globalAlpha = 0.35;
+            canvasCtx.lineWidth = 1.5 / this.ctx.camera.zoom;
+            canvasCtx.setLineDash([]);
+            canvasCtx.strokeRect(b.x, b.y, b.w, b.h);
+            canvasCtx.restore();
+          }
+        }
+      }
+    }
   }
   updateArrowsBoundTo(ids, ctx) {
     const movedNonArrowIds = /* @__PURE__ */ new Set();
@@ -6022,20 +6169,26 @@ var SelectTool = class {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
-      return;
+      return null;
     }
     const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
     if (templateResizeHit) {
       ctx.setCursor?.("nwse-resize");
-      return;
+      return null;
     }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
-      return;
+      return null;
     }
     const hit = this.hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
+    return hit ? hit.id : null;
+  }
+  setHovered(id, ctx) {
+    if (this.hoveredId === id) return;
+    this.hoveredId = id;
+    ctx.requestRender();
   }
   handleResize(world, ctx, shiftKey = false) {
     if (this.mode.type !== "resizing") return;
@@ -6301,12 +6454,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);
@@ -7142,7 +7290,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.19.0";
+var VERSION = "0.21.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -7216,6 +7364,7 @@ export {
   getHexDistance,
   isBindable,
   isNearBezier,
+  isNoteContentEmpty,
   parseState,
   sanitizeNoteHtml,
   setFontSize,