@fieldnotes/core 0.58.0 → 0.60.0

package/dist/index.d.cts

@@ -410,6 +410,7 @@ declare class ToolManager {
     private tools;
     private current;
     private changeListeners;
+    private registerListeners;
     get activeTool(): Tool | null;
     get toolNames(): string[];
     register(tool: Tool): void;
@@ -419,6 +420,7 @@ declare class ToolManager {
     handlePointerMove(state: PointerState, ctx: ToolContext): void;
     handlePointerUp(state: PointerState, ctx: ToolContext): void;
     onChange(listener: (name: string) => void): () => void;
+    onRegister(listener: (tool: Tool) => void): () => void;
 }
 
 interface Command {
@@ -469,6 +471,32 @@ interface ExportImageOptions extends ExportResourceOptions, HtmlExportOptions {
     padding?: number;
     background?: string;
     filter?: (element: CanvasElement) => boolean;
+    /**
+     * Optional world-space crop. When set it replaces the computed content
+     * bounds; `padding` still applies around it. Elements outside the region
+     * clip naturally. A region export with no intersecting elements still
+     * produces a background-filled image.
+     */
+    region?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /**
+     * Output encoding. Defaults to 'png'. JPEG output is opaque — a transparent
+     * `background` renders as black; keep the default `#ffffff` (or any opaque color)
+     * for JPEG exports.
+     */
+    format?: 'png' | 'jpeg';
+    /** Encoder quality in (0, 1]. Only meaningful for 'jpeg'. */
+    quality?: number;
+    /**
+     * 'exact' (default) throws when scale × bounds exceeds maxDimension/maxPixels.
+     * 'fit' reduces the effective scale to the largest value that satisfies both
+     * caps (never above the requested scale).
+     */
+    scaleMode?: 'exact' | 'fit';
 }
 type ExportAssetErrorReason = 'load' | 'timeout' | 'encode';
 interface ExportAssetError {
@@ -532,6 +560,11 @@ declare function getElementStyle(element: CanvasElement): ElementStyle;
 
 type RotateDirection = 'cw' | 'ccw';
 
+interface SelectionStyleDetails {
+    common: ElementStyle;
+    applicable: readonly (keyof ElementStyle)[];
+    mixed: readonly (keyof ElementStyle)[];
+}
 type AlignEdge = 'left' | 'center-x' | 'right' | 'top' | 'middle' | 'bottom';
 type DistributeAxis = 'horizontal' | 'vertical';
 
@@ -611,6 +644,11 @@ declare class Viewport {
     private minimap;
     private readonly htmlRenderers;
     private readonly resizeListeners;
+    private readonly selectionListeners;
+    private detachSelectionSource;
+    private unsubToolRegister;
+    private pendingSelectionPrune;
+    private unsubRecorderEnd;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -704,12 +742,34 @@ declare class Viewport {
     getGridInfo(): GridInfo | null;
     onGridChange(listener: (info: GridInfo | null) => void): () => void;
     private getSelectTool;
+    private pruneSelection;
+    private handleRemovedElement;
+    private static isSelectionSource;
+    private emitSelectionChange;
+    private attachSelectionSource;
+    /**
+     * getSelectedIds() and the onSelectionChange emitter never surface stale ids:
+     * once the enclosing history transaction completes, both reflect
+     * the current selection.
+     */
     getSelectedIds(): string[];
     runAction(action: string): void;
     canPaste(): boolean;
     openContextMenu(screenPos: Point): void;
+    /**
+     * Persistent, viewport-owned selection-change emitter. Subscribing works
+     * regardless of whether a select tool is registered yet; it forwards
+     * events from whichever select tool is currently attached via
+     * `toolManager.onRegister`. Never delivers stale ids once the enclosing
+     * history transaction completes.
+     */
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
+    /**
+     * Unlike `getSelectionStyle()` — which returns `{}` for a style-less
+     * selection — this returns `null` when no style field is applicable.
+     */
+    getSelectionStyleDetails(): SelectionStyleDetails | null;
     applyStyleToSelection(style: ElementStyle): void;
     groupSelection(): void;
     ungroupSelection(): void;
@@ -1729,6 +1789,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.58.0";
+declare const VERSION = "0.60.0";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportAssetError, type ExportAssetErrorReason, type ExportImageOptions, type ExportResourceOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type HtmlExportError, type HtmlExportErrorReason, type HtmlExportOptions, type HtmlExportRenderer, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LASER_TRAIL_PRESENCE_KIND, LaserTool, type LaserToolOptions, type LaserTrailEmission, type LaserTrailPresence, type Layer, LayerManager, LocalStorageAdapter, MEASURE_PRESENCE_KIND, type MeasureEmission, type MeasurePresence, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, MinimapController, type MinimapControllerOptions, type NoteElement, NoteTool, type NoteToolOptions, type OverlayRenderer, PING_PRESENCE_KIND, PencilTool, type PencilToolOptions, type PingEmission, PingInput, type PingInputHost, type PingInputOptions, type PingPresence, PingTool, type PingToolOptions, type Point, type PointerState, RemoteLaserOverlay, type RemoteLaserOverlayHost, type RemoteLaserOverlayOptions, RemoteMeasureOverlay, type RemoteMeasureOverlayHost, type RemoteMeasureOverlayOptions, RemotePingOverlay, type RemotePingOverlayHost, type RemotePingOverlayOptions, type RenderStatsSnapshot, type RotateDirection, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, 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, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isLaserTrailPresence, isMeasurePresence, isNearBezier, isPingPresence, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toLaserTrailPresence, toMeasurePresence, toPingPresence, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportAssetError, type ExportAssetErrorReason, type ExportImageOptions, type ExportResourceOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type HtmlExportError, type HtmlExportErrorReason, type HtmlExportOptions, type HtmlExportRenderer, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LASER_TRAIL_PRESENCE_KIND, LaserTool, type LaserToolOptions, type LaserTrailEmission, type LaserTrailPresence, type Layer, LayerManager, LocalStorageAdapter, MEASURE_PRESENCE_KIND, type MeasureEmission, type MeasurePresence, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, MinimapController, type MinimapControllerOptions, type NoteElement, NoteTool, type NoteToolOptions, type OverlayRenderer, PING_PRESENCE_KIND, PencilTool, type PencilToolOptions, type PingEmission, PingInput, type PingInputHost, type PingInputOptions, type PingPresence, PingTool, type PingToolOptions, type Point, type PointerState, RemoteLaserOverlay, type RemoteLaserOverlayHost, type RemoteLaserOverlayOptions, RemoteMeasureOverlay, type RemoteMeasureOverlayHost, type RemoteMeasureOverlayOptions, RemotePingOverlay, type RemotePingOverlayHost, type RemotePingOverlayOptions, type RenderStatsSnapshot, type RotateDirection, SelectTool, type SelectionStyleDetails, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, 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, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isLaserTrailPresence, isMeasurePresence, isNearBezier, isPingPresence, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toLaserTrailPresence, toMeasurePresence, toPingPresence, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -410,6 +410,7 @@ declare class ToolManager {
     private tools;
     private current;
     private changeListeners;
+    private registerListeners;
     get activeTool(): Tool | null;
     get toolNames(): string[];
     register(tool: Tool): void;
@@ -419,6 +420,7 @@ declare class ToolManager {
     handlePointerMove(state: PointerState, ctx: ToolContext): void;
     handlePointerUp(state: PointerState, ctx: ToolContext): void;
     onChange(listener: (name: string) => void): () => void;
+    onRegister(listener: (tool: Tool) => void): () => void;
 }
 
 interface Command {
@@ -469,6 +471,32 @@ interface ExportImageOptions extends ExportResourceOptions, HtmlExportOptions {
     padding?: number;
     background?: string;
     filter?: (element: CanvasElement) => boolean;
+    /**
+     * Optional world-space crop. When set it replaces the computed content
+     * bounds; `padding` still applies around it. Elements outside the region
+     * clip naturally. A region export with no intersecting elements still
+     * produces a background-filled image.
+     */
+    region?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /**
+     * Output encoding. Defaults to 'png'. JPEG output is opaque — a transparent
+     * `background` renders as black; keep the default `#ffffff` (or any opaque color)
+     * for JPEG exports.
+     */
+    format?: 'png' | 'jpeg';
+    /** Encoder quality in (0, 1]. Only meaningful for 'jpeg'. */
+    quality?: number;
+    /**
+     * 'exact' (default) throws when scale × bounds exceeds maxDimension/maxPixels.
+     * 'fit' reduces the effective scale to the largest value that satisfies both
+     * caps (never above the requested scale).
+     */
+    scaleMode?: 'exact' | 'fit';
 }
 type ExportAssetErrorReason = 'load' | 'timeout' | 'encode';
 interface ExportAssetError {
@@ -532,6 +560,11 @@ declare function getElementStyle(element: CanvasElement): ElementStyle;
 
 type RotateDirection = 'cw' | 'ccw';
 
+interface SelectionStyleDetails {
+    common: ElementStyle;
+    applicable: readonly (keyof ElementStyle)[];
+    mixed: readonly (keyof ElementStyle)[];
+}
 type AlignEdge = 'left' | 'center-x' | 'right' | 'top' | 'middle' | 'bottom';
 type DistributeAxis = 'horizontal' | 'vertical';
 
@@ -611,6 +644,11 @@ declare class Viewport {
     private minimap;
     private readonly htmlRenderers;
     private readonly resizeListeners;
+    private readonly selectionListeners;
+    private detachSelectionSource;
+    private unsubToolRegister;
+    private pendingSelectionPrune;
+    private unsubRecorderEnd;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -704,12 +742,34 @@ declare class Viewport {
     getGridInfo(): GridInfo | null;
     onGridChange(listener: (info: GridInfo | null) => void): () => void;
     private getSelectTool;
+    private pruneSelection;
+    private handleRemovedElement;
+    private static isSelectionSource;
+    private emitSelectionChange;
+    private attachSelectionSource;
+    /**
+     * getSelectedIds() and the onSelectionChange emitter never surface stale ids:
+     * once the enclosing history transaction completes, both reflect
+     * the current selection.
+     */
     getSelectedIds(): string[];
     runAction(action: string): void;
     canPaste(): boolean;
     openContextMenu(screenPos: Point): void;
+    /**
+     * Persistent, viewport-owned selection-change emitter. Subscribing works
+     * regardless of whether a select tool is registered yet; it forwards
+     * events from whichever select tool is currently attached via
+     * `toolManager.onRegister`. Never delivers stale ids once the enclosing
+     * history transaction completes.
+     */
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
+    /**
+     * Unlike `getSelectionStyle()` — which returns `{}` for a style-less
+     * selection — this returns `null` when no style field is applicable.
+     */
+    getSelectionStyleDetails(): SelectionStyleDetails | null;
     applyStyleToSelection(style: ElementStyle): void;
     groupSelection(): void;
     ungroupSelection(): void;
@@ -1729,6 +1789,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.58.0";
+declare const VERSION = "0.60.0";
 
-export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportAssetError, type ExportAssetErrorReason, type ExportImageOptions, type ExportResourceOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type HtmlExportError, type HtmlExportErrorReason, type HtmlExportOptions, type HtmlExportRenderer, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LASER_TRAIL_PRESENCE_KIND, LaserTool, type LaserToolOptions, type LaserTrailEmission, type LaserTrailPresence, type Layer, LayerManager, LocalStorageAdapter, MEASURE_PRESENCE_KIND, type MeasureEmission, type MeasurePresence, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, MinimapController, type MinimapControllerOptions, type NoteElement, NoteTool, type NoteToolOptions, type OverlayRenderer, PING_PRESENCE_KIND, PencilTool, type PencilToolOptions, type PingEmission, PingInput, type PingInputHost, type PingInputOptions, type PingPresence, PingTool, type PingToolOptions, type Point, type PointerState, RemoteLaserOverlay, type RemoteLaserOverlayHost, type RemoteLaserOverlayOptions, RemoteMeasureOverlay, type RemoteMeasureOverlayHost, type RemoteMeasureOverlayOptions, RemotePingOverlay, type RemotePingOverlayHost, type RemotePingOverlayOptions, type RenderStatsSnapshot, type RotateDirection, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, 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, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isLaserTrailPresence, isMeasurePresence, isNearBezier, isPingPresence, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toLaserTrailPresence, toMeasurePresence, toPingPresence, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportAssetError, type ExportAssetErrorReason, type ExportImageOptions, type ExportResourceOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type HtmlExportError, type HtmlExportErrorReason, type HtmlExportOptions, type HtmlExportRenderer, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LASER_TRAIL_PRESENCE_KIND, LaserTool, type LaserToolOptions, type LaserTrailEmission, type LaserTrailPresence, type Layer, LayerManager, LocalStorageAdapter, MEASURE_PRESENCE_KIND, type MeasureEmission, type MeasurePresence, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, MinimapController, type MinimapControllerOptions, type NoteElement, NoteTool, type NoteToolOptions, type OverlayRenderer, PING_PRESENCE_KIND, PencilTool, type PencilToolOptions, type PingEmission, PingInput, type PingInputHost, type PingInputOptions, type PingPresence, PingTool, type PingToolOptions, type Point, type PointerState, RemoteLaserOverlay, type RemoteLaserOverlayHost, type RemoteLaserOverlayOptions, RemoteMeasureOverlay, type RemoteMeasureOverlayHost, type RemoteMeasureOverlayOptions, RemotePingOverlay, type RemotePingOverlayHost, type RemotePingOverlayOptions, type RenderStatsSnapshot, type RotateDirection, SelectTool, type SelectionStyleDetails, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, 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, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isLaserTrailPresence, isMeasurePresence, isNearBezier, isPingPresence, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toLaserTrailPresence, toMeasurePresence, toPingPresence, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -5170,6 +5170,7 @@ var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
   current = null;
   changeListeners = /* @__PURE__ */ new Set();
+  registerListeners = /* @__PURE__ */ new Set();
   get activeTool() {
     return this.current;
   }
@@ -5178,6 +5179,7 @@ var ToolManager = class {
   }
   register(tool) {
     this.tools.set(tool.name, tool);
+    this.registerListeners.forEach((fn) => fn(tool));
   }
   getTool(name) {
     return this.tools.get(name);
@@ -5203,6 +5205,10 @@ var ToolManager = class {
     this.changeListeners.add(listener);
     return () => this.changeListeners.delete(listener);
   }
+  onRegister(listener) {
+    this.registerListeners.add(listener);
+    return () => this.registerListeners.delete(listener);
+  }
 };
 
 // src/history/history-stack.ts
@@ -5394,6 +5400,7 @@ var HistoryRecorder = class {
   generation = 0;
   updateSnapshots = /* @__PURE__ */ new Map();
   unsubscribers;
+  transactionEndListeners = /* @__PURE__ */ new Set();
   pause() {
     this.recording = false;
   }
@@ -5411,19 +5418,35 @@ var HistoryRecorder = class {
   get currentTransactionId() {
     return this.transaction !== null ? this.generation : null;
   }
+  onTransactionEnd(listener) {
+    this.transactionEndListeners.add(listener);
+    return () => this.transactionEndListeners.delete(listener);
+  }
+  notifyTransactionEnd() {
+    for (const listener of this.transactionEndListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
   commit() {
     if (!this.transaction) return;
     const finalCommands = this.flushUpdateSnapshots();
     const all = [...this.transaction, ...finalCommands];
     this.transaction = null;
     this.updateSnapshots.clear();
-    if (all.length === 0) return;
-    const first = all[0];
-    this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    if (all.length > 0) {
+      const first = all[0];
+      this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    }
+    this.notifyTransactionEnd();
   }
   rollback() {
+    const wasOpen = this.transaction !== null;
     this.transaction = null;
     this.updateSnapshots.clear();
+    if (wasOpen) this.notifyTransactionEnd();
   }
   destroy() {
     this.unsubscribers.forEach((fn) => fn());
@@ -5753,6 +5776,19 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
+function resolveExportBounds(region, elements, padding) {
+  if (!region) return computeBounds(elements, padding);
+  const finite = Number.isFinite(region.x) && Number.isFinite(region.y) && Number.isFinite(region.w) && Number.isFinite(region.h);
+  if (!finite || region.w <= 0 || region.h <= 0) {
+    throw new RangeError("region must have finite coordinates and positive w/h");
+  }
+  return {
+    x: region.x - padding,
+    y: region.y - padding,
+    w: region.w + padding * 2,
+    h: region.h + padding * 2
+  };
+}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -5795,6 +5831,29 @@ function nonNegativeOption(value, fallback, name) {
   }
   return resolved;
 }
+function fitExportScale(bounds, requestedScale, options) {
+  const maxDimension = positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
+  const maxPixels = positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
+  const fits = (scale) => {
+    const w = Math.ceil(bounds.w * scale);
+    const h = Math.ceil(bounds.h * scale);
+    return w <= maxDimension && h <= maxDimension && w * h <= maxPixels;
+  };
+  if (fits(requestedScale)) return requestedScale;
+  const analytical = Math.min(
+    maxDimension / Math.max(bounds.w, bounds.h),
+    Math.sqrt(maxPixels) / Math.sqrt(bounds.w) / Math.sqrt(bounds.h)
+  );
+  let hi = Math.min(requestedScale, analytical);
+  if (fits(hi)) return hi;
+  let lo = 0;
+  for (let i = 0; i < 40; i++) {
+    const mid = (lo + hi) / 2;
+    if (fits(mid)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
 function assertExportSize(width, height, options) {
   const maxDimension = positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
   const maxPixels = positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
@@ -5869,10 +5928,23 @@ function loadImages(elements, options = {}) {
   });
 }
 async function exportImage(store, options = {}, layerManager) {
-  const scale = positiveOption(options.scale, 2, "scale");
+  const requestedScale = positiveOption(options.scale, 2, "scale");
+  const scaleMode = options.scaleMode ?? "exact";
+  if (scaleMode !== "exact" && scaleMode !== "fit") {
+    throw new RangeError(`scaleMode must be 'exact' or 'fit'`);
+  }
   const padding = nonNegativeOption(options.padding, 0, "padding");
   validateExportResourceOptions(options);
   validateHtmlExportOptions(options);
+  const format = options.format ?? "png";
+  if (format !== "png" && format !== "jpeg") {
+    throw new RangeError(`format must be 'png' or 'jpeg'`);
+  }
+  if (options.quality !== void 0) {
+    if (!Number.isFinite(options.quality) || options.quality <= 0 || options.quality > 1) {
+      throw new RangeError("quality must be a finite number in (0, 1]");
+    }
+  }
   const background = options.background ?? "#ffffff";
   const filter = options.filter;
   const allElements = store.getAll();
@@ -5880,8 +5952,9 @@ async function exportImage(store, options = {}, layerManager) {
   if (filter) {
     visibleElements = visibleElements.filter(filter);
   }
-  const bounds = computeBounds(visibleElements, padding);
+  const bounds = resolveExportBounds(options.region, visibleElements, padding);
   if (!bounds) return null;
+  const scale = scaleMode === "fit" ? fitExportScale(bounds, requestedScale, options) : requestedScale;
   const width = Math.ceil(bounds.w * scale);
   const height = Math.ceil(bounds.h * scale);
   assertExportSize(width, height, options);
@@ -5983,8 +6056,9 @@ async function exportImage(store, options = {}, layerManager) {
     renderGridForBounds(ctx, grid, bounds);
     ctx.restore();
   }
+  const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
   return new Promise((resolve) => {
-    canvas.toBlob((blob) => resolve(blob), "image/png");
+    canvas.toBlob((blob) => resolve(blob), mimeType, options.quality);
   });
 }
 
@@ -7664,6 +7738,14 @@ function rotateElementPatch(el, bounds, pivot, delta) {
 }
 
 // src/canvas/selection-ops.ts
+var STYLE_FIELDS = [
+  "color",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "fontSize",
+  "strokeStyle"
+];
 function sharedValue(values) {
   const present = values.filter((v) => v !== void 0);
   if (present.length === 0) return void 0;
@@ -7698,6 +7780,42 @@ var SelectionOps = class {
     if (strokeStyle !== void 0) result.strokeStyle = strokeStyle;
     return result;
   }
+  /**
+   * Unlike `getStyle()` — which returns `{}` for a selection whose elements
+   * have no applicable style fields (e.g. images) — this returns `null` when
+   * no field is applicable, so callers can distinguish "nothing to show" from
+   * "everything shared but empty".
+   */
+  getStyleDetails() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const common = {};
+    const applicable = [];
+    const mixed = [];
+    for (const field of STYLE_FIELDS) {
+      const allValues = styles.map((s) => s[field]);
+      const values = [];
+      for (const v of allValues) {
+        if (v !== void 0) values.push(v);
+      }
+      if (values.length === 0) continue;
+      applicable.push(field);
+      const distinct = new Set(values);
+      if (distinct.size > 1) {
+        mixed.push(field);
+      } else {
+        common[field] = values[0];
+      }
+    }
+    if (applicable.length === 0) return null;
+    return { common, applicable, mixed };
+  }
   applyStyle(style) {
     const ids = this.deps.getSelectedIds();
     if (ids.length === 0) return;
@@ -8072,7 +8190,7 @@ var ViewportInteractions = class {
 var EMPTY_IDS = [];
 function noop() {
 }
-var Viewport = class {
+var Viewport = class _Viewport {
   constructor(container, options = {}) {
     this.container = container;
     this.camera = new Camera(options.camera);
@@ -8081,6 +8199,13 @@ var Viewport = class {
     this.store = new ElementStore();
     this.layerManager = new LayerManager(this.store);
     this.toolManager = new ToolManager();
+    this.unsubToolRegister = this.toolManager.onRegister((tool) => {
+      if (_Viewport.isSelectionSource(tool)) this.attachSelectionSource(tool);
+    });
+    const existingSelect = this.getSelectTool();
+    if (existingSelect && _Viewport.isSelectionSource(existingSelect)) {
+      this.attachSelectionSource(existingSelect);
+    }
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
     this.renderer.setCamera(this.camera);
@@ -8115,6 +8240,11 @@ var Viewport = class {
     this.dropHandler = options.onDrop;
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
+    this.unsubRecorderEnd = this.historyRecorder.onTransactionEnd(() => {
+      if (!this.pendingSelectionPrune) return;
+      this.pendingSelectionPrune = false;
+      this.pruneSelection();
+    });
     this.selectionOps = new SelectionOps({
       store: this.store,
       recorder: this.historyRecorder,
@@ -8234,6 +8364,7 @@ var Viewport = class {
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
+        this.handleRemovedElement(el.id);
       }),
       this.store.on("update", ({ previous, current }) => {
         if (current.type === "grid") this.gridController.syncContext();
@@ -8248,6 +8379,7 @@ var Viewport = class {
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
         this.requestRender();
+        this.pruneSelection();
       })
     ];
     this.layerManager.on("change", () => {
@@ -8317,6 +8449,13 @@ var Viewport = class {
   minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   resizeListeners = /* @__PURE__ */ new Set();
+  selectionListeners = /* @__PURE__ */ new Set();
+  detachSelectionSource = null;
+  unsubToolRegister = () => {
+  };
+  pendingSelectionPrune = false;
+  unsubRecorderEnd = () => {
+  };
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -8575,6 +8714,42 @@ var Viewport = class {
   getSelectTool() {
     return this.toolManager.getTool("select");
   }
+  pruneSelection() {
+    const tool = this.getSelectTool();
+    if (!tool) return;
+    const ids = tool.selectedIds;
+    const filtered = ids.filter((id) => this.store.getById(id) !== void 0);
+    if (filtered.length !== ids.length) tool.setSelection(filtered);
+  }
+  handleRemovedElement(id) {
+    if (!this.getSelectedIds().includes(id)) return;
+    if (this.historyRecorder.currentTransactionId !== null) {
+      this.pendingSelectionPrune = true;
+      return;
+    }
+    this.pruneSelection();
+  }
+  static isSelectionSource(tool) {
+    const candidate = tool;
+    return tool.name === "select" && typeof candidate.onSelectionChange === "function" && typeof candidate.setSelection === "function";
+  }
+  emitSelectionChange() {
+    for (const listener of this.selectionListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+  attachSelectionSource(tool) {
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = tool.onSelectionChange(() => this.emitSelectionChange());
+  }
+  /**
+   * getSelectedIds() and the onSelectionChange emitter never surface stale ids:
+   * once the enclosing history transaction completes, both reflect
+   * the current selection.
+   */
   getSelectedIds() {
     return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
   }
@@ -8608,13 +8783,29 @@ var Viewport = class {
     if (items.length === 0) return;
     this.contextMenu.open(items, screenPos);
   }
+  /**
+   * Persistent, viewport-owned selection-change emitter. Subscribing works
+   * regardless of whether a select tool is registered yet; it forwards
+   * events from whichever select tool is currently attached via
+   * `toolManager.onRegister`. Never delivers stale ids once the enclosing
+   * history transaction completes.
+   */
   onSelectionChange(listener) {
-    const tool = this.getSelectTool();
-    return tool ? tool.onSelectionChange(listener) : noop;
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
   }
   getSelectionStyle() {
     return this.selectionOps.getStyle();
   }
+  /**
+   * Unlike `getSelectionStyle()` — which returns `{}` for a style-less
+   * selection — this returns `null` when no style field is applicable.
+   */
+  getSelectionStyleDetails() {
+    return this.selectionOps.getStyleDetails();
+  }
   applyStyleToSelection(style) {
     this.selectionOps.applyStyle(style);
   }
@@ -8663,6 +8854,11 @@ var Viewport = class {
     this.inputHandler.destroy();
     this.unsubCamera();
     this.unsubToolChange();
+    this.unsubToolRegister();
+    this.unsubRecorderEnd();
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = null;
+    this.selectionListeners.clear();
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
@@ -12264,7 +12460,7 @@ var PingTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.58.0";
+var VERSION = "0.60.0";
 export {
   ArrowTool,
   AutoSave,