@fieldnotes/core 0.51.0 → 0.52.1

package/dist/index.d.cts

@@ -447,7 +447,24 @@ declare class HistoryStack {
     private notifyChange;
 }
 
-interface ExportImageOptions extends ExportResourceOptions {
+type HtmlExportRenderer = (element: HtmlElement) => CanvasImageSource | null | Promise<CanvasImageSource | null>;
+type HtmlExportErrorReason = 'unsupported' | 'timeout' | 'render' | 'encode';
+interface HtmlExportError {
+    elementId: string;
+    htmlType?: string;
+    reason: HtmlExportErrorReason;
+    cause?: unknown;
+}
+interface HtmlExportOptions {
+    /** Converts an application-owned HTML embed into a ready canvas image source. */
+    renderHtml?: HtmlExportRenderer;
+    /** Maximum wait for each HTML renderer. Defaults to 10 seconds. */
+    htmlTimeoutMs?: number;
+    /** Called when an HTML embed cannot be rendered or encoded. The export continues. */
+    onHtmlError?: (error: HtmlExportError) => void;
+}
+
+interface ExportImageOptions extends ExportResourceOptions, HtmlExportOptions {
     scale?: number;
     padding?: number;
     background?: string;
@@ -472,7 +489,7 @@ interface ExportResourceOptions {
 }
 declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
 
-interface ExportSvgOptions extends ExportResourceOptions {
+interface ExportSvgOptions extends ExportResourceOptions, HtmlExportOptions {
     padding?: number;
     background?: string;
     filter?: (el: CanvasElement) => boolean;
@@ -555,6 +572,7 @@ declare class Viewport {
     readonly history: HistoryStack;
     readonly domLayer: HTMLDivElement;
     private readonly canvasEl;
+    private readonly paintStack;
     private readonly wrapper;
     private readonly unsubCamera;
     private readonly unsubToolChange;
@@ -1140,6 +1158,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.51.0";
+declare const VERSION = "0.52.1";
 
-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 ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, 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, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, 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, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -447,7 +447,24 @@ declare class HistoryStack {
     private notifyChange;
 }
 
-interface ExportImageOptions extends ExportResourceOptions {
+type HtmlExportRenderer = (element: HtmlElement) => CanvasImageSource | null | Promise<CanvasImageSource | null>;
+type HtmlExportErrorReason = 'unsupported' | 'timeout' | 'render' | 'encode';
+interface HtmlExportError {
+    elementId: string;
+    htmlType?: string;
+    reason: HtmlExportErrorReason;
+    cause?: unknown;
+}
+interface HtmlExportOptions {
+    /** Converts an application-owned HTML embed into a ready canvas image source. */
+    renderHtml?: HtmlExportRenderer;
+    /** Maximum wait for each HTML renderer. Defaults to 10 seconds. */
+    htmlTimeoutMs?: number;
+    /** Called when an HTML embed cannot be rendered or encoded. The export continues. */
+    onHtmlError?: (error: HtmlExportError) => void;
+}
+
+interface ExportImageOptions extends ExportResourceOptions, HtmlExportOptions {
     scale?: number;
     padding?: number;
     background?: string;
@@ -472,7 +489,7 @@ interface ExportResourceOptions {
 }
 declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
 
-interface ExportSvgOptions extends ExportResourceOptions {
+interface ExportSvgOptions extends ExportResourceOptions, HtmlExportOptions {
     padding?: number;
     background?: string;
     filter?: (el: CanvasElement) => boolean;
@@ -555,6 +572,7 @@ declare class Viewport {
     readonly history: HistoryStack;
     readonly domLayer: HTMLDivElement;
     private readonly canvasEl;
+    private readonly paintStack;
     private readonly wrapper;
     private readonly unsubCamera;
     private readonly unsubToolChange;
@@ -1140,6 +1158,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.51.0";
+declare const VERSION = "0.52.1";
 
-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 ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, 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, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, 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, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -4834,6 +4834,57 @@ function createDomLayer() {
   });
   return el;
 }
+function createPaintStack() {
+  const el = createDomLayer();
+  el.dataset["fieldnotesPaintStack"] = "";
+  el.style.transformOrigin = "";
+  return el;
+}
+
+// src/canvas/hybrid-render-surface.ts
+var HybridRenderSurface = class {
+  constructor(root) {
+    this.root = root;
+  }
+  canvases = /* @__PURE__ */ new Map();
+  beginFrame(activeOrders, width, height) {
+    for (const [order, canvas] of this.canvases) {
+      if (!activeOrders.has(order)) {
+        canvas.remove();
+        this.canvases.delete(order);
+      }
+    }
+    for (const order of activeOrders) {
+      const canvas = this.getCanvas(order);
+      if (canvas.width !== width) canvas.width = width;
+      if (canvas.height !== height) canvas.height = height;
+      canvas.style.zIndex = String(order);
+    }
+  }
+  getContext(order) {
+    return this.getCanvas(order).getContext("2d");
+  }
+  clear() {
+    for (const canvas of this.canvases.values()) canvas.remove();
+    this.canvases.clear();
+  }
+  getCanvas(order) {
+    let canvas = this.canvases.get(order);
+    if (canvas) return canvas;
+    canvas = document.createElement("canvas");
+    canvas.dataset["paintOrder"] = String(order);
+    Object.assign(canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    });
+    this.root.appendChild(canvas);
+    this.canvases.set(order, canvas);
+    return canvas;
+  }
+};
 
 // src/elements/arrow-label-editor.ts
 var ArrowLabelEditor = class {
@@ -5355,6 +5406,67 @@ function renderTextOnCanvas(ctx, text) {
   ctx.restore();
 }
 
+// src/canvas/html-export.ts
+var DEFAULT_HTML_TIMEOUT_MS = 1e4;
+var TIMEOUT = /* @__PURE__ */ Symbol("html-export-timeout");
+function validateHtmlExportOptions(options) {
+  const timeoutMs = options.htmlTimeoutMs ?? DEFAULT_HTML_TIMEOUT_MS;
+  if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) {
+    throw new RangeError("htmlTimeoutMs must be a finite number greater than 0");
+  }
+  return timeoutMs;
+}
+async function renderHtmlElements(elements, options) {
+  const timeoutMs = validateHtmlExportOptions(options);
+  const sources = /* @__PURE__ */ new Map();
+  await Promise.all(
+    elements.map(async (element) => {
+      if (!options.renderHtml) {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "unsupported"
+        });
+        return;
+      }
+      let timer;
+      try {
+        const timeout = new Promise((resolve) => {
+          timer = setTimeout(() => resolve(TIMEOUT), timeoutMs);
+        });
+        const result = await Promise.race([Promise.resolve(options.renderHtml(element)), timeout]);
+        if (result === TIMEOUT) {
+          options.onHtmlError?.({
+            elementId: element.id,
+            htmlType: element.htmlType,
+            reason: "timeout"
+          });
+          return;
+        }
+        if (!result) {
+          options.onHtmlError?.({
+            elementId: element.id,
+            htmlType: element.htmlType,
+            reason: "render"
+          });
+          return;
+        }
+        sources.set(element.id, result);
+      } catch (cause) {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "render",
+          cause
+        });
+      } finally {
+        if (timer !== void 0) clearTimeout(timer);
+      }
+    })
+  );
+  return sources;
+}
+
 // src/canvas/export-image.ts
 var DEFAULT_IMAGE_TIMEOUT_MS = 1e4;
 var DEFAULT_MAX_DIMENSION = 16384;
@@ -5559,6 +5671,7 @@ async function exportImage(store, options = {}, layerManager) {
   const scale = positiveOption(options.scale, 2, "scale");
   const padding = nonNegativeOption(options.padding, 0, "padding");
   validateExportResourceOptions(options);
+  validateHtmlExportOptions(options);
   const background = options.background ?? "#ffffff";
   const filter = options.filter;
   const allElements = store.getAll();
@@ -5572,6 +5685,8 @@ async function exportImage(store, options = {}, layerManager) {
   const height = Math.ceil(bounds.h * scale);
   assertExportSize(width, height, options);
   const imageCache = await loadImages(visibleElements, options);
+  const htmlElements = visibleElements.filter((el) => el.type === "html");
+  const htmlSources = await renderHtmlElements(htmlElements, options);
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -5596,6 +5711,24 @@ async function exportImage(store, options = {}, layerManager) {
       return;
     }
     if (el.type === "html") {
+      const source = htmlSources.get(el.id);
+      if (!source) return;
+      const b = getElementBounds(el);
+      try {
+        withRotation(
+          target,
+          el,
+          b ? center(b) : el.position,
+          () => target.drawImage(source, el.position.x, el.position.y, el.size.w, el.size.h)
+        );
+      } catch (cause) {
+        options.onHtmlError?.({
+          elementId: el.id,
+          htmlType: el.htmlType,
+          reason: "render",
+          cause
+        });
+      }
       return;
     }
     if (el.type === "image") {
@@ -5751,7 +5884,7 @@ function emitArrow(arrow, store) {
   return out;
 }
 function emitImage(image, dataUri) {
-  const href = dataUri ?? image.src;
+  const href = dataUri ?? ("src" in image ? image.src : "");
   if (!href) return "";
   const { x, y } = image.position;
   const { w, h } = image.size;
@@ -5955,6 +6088,7 @@ async function exportSvg(store, options = {}, layerManager) {
   const padding = nonNegativeOption(options.padding, 0, "padding");
   const rasterScale = positiveOption(options.rasterScale, 2, "rasterScale");
   validateExportResourceOptions(options);
+  validateHtmlExportOptions(options);
   const filter = options.filter;
   const allElements = store.getAll();
   let visibleElements = layerManager ? allElements.filter((el) => layerManager.isLayerVisible(el.layerId)) : allElements;
@@ -5969,6 +6103,9 @@ async function exportSvg(store, options = {}, layerManager) {
   );
   const imageCache = await loadImages(remoteImages, options);
   const imageDataUris = encodeImages(visibleElements, imageCache, rasterScale, options);
+  const htmlElements = visibleElements.filter((el) => el.type === "html");
+  const htmlSources = await renderHtmlElements(htmlElements, options);
+  const htmlDataUris = encodeHtmlElements(htmlElements, htmlSources, rasterScale, options);
   const grids = visibleElements.filter((el) => el.type === "grid");
   const firstGrid = grids[0];
   let body = "";
@@ -5977,7 +6114,15 @@ async function exportSvg(store, options = {}, layerManager) {
   }
   const layerBodies = /* @__PURE__ */ new Map();
   for (const el of visibleElements) {
-    const emitted = emitElement(el, imageDataUris, rasterScale, firstGrid, store, options);
+    const emitted = emitElement(
+      el,
+      imageDataUris,
+      htmlDataUris,
+      rasterScale,
+      firstGrid,
+      store,
+      options
+    );
     layerBodies.set(el.layerId, (layerBodies.get(el.layerId) ?? "") + emitted);
   }
   for (const [layerId, emitted] of layerBodies) {
@@ -5991,7 +6136,7 @@ async function exportSvg(store, options = {}, layerManager) {
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(bounds.w)}" height="${n(bounds.h)}" viewBox="${n(bounds.x)} ${n(bounds.y)} ${n(bounds.w)} ${n(bounds.h)}">${body}</svg>`;
 }
-function emitElement(el, imageDataUris, rasterScale, firstGrid, store, resourceOptions) {
+function emitElement(el, imageDataUris, htmlDataUris, rasterScale, firstGrid, store, resourceOptions) {
   switch (el.type) {
     case "stroke":
       return withRotationSvg(el, emitStroke(el));
@@ -6010,11 +6155,62 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store, resourceO
     case "grid":
       return "";
     case "html":
-      return "";
+      return withRotationSvg(el, emitImage(el, htmlDataUris.get(el.id)));
     default:
       return "";
   }
 }
+function encodeHtmlElements(elements, sources, rasterScale, options) {
+  const encoded = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const source = sources.get(element.id);
+    if (!source) continue;
+    const width = Math.max(1, Math.ceil(element.size.w * rasterScale));
+    const height = Math.max(1, Math.ceil(element.size.h * rasterScale));
+    assertExportSize(width, height, options);
+    if (typeof document === "undefined") {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    try {
+      ctx.drawImage(source, 0, 0, width, height);
+      const dataUri = canvas.toDataURL();
+      if (dataUri.startsWith("data:")) {
+        encoded.set(element.id, dataUri);
+      } else {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "encode"
+        });
+      }
+    } catch (cause) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode",
+        cause
+      });
+    }
+  }
+  return encoded;
+}
 function encodeImages(elements, imageCache, rasterScale, resourceOptions) {
   const out = /* @__PURE__ */ new Map();
   for (const el of elements) {
@@ -6307,6 +6503,7 @@ var DoubleTapDetector = class {
 // src/canvas/dom-node-manager.ts
 var DomNodeManager = class {
   domNodes = /* @__PURE__ */ new Map();
+  strata = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
   domLayer;
   onEditRequest;
@@ -6315,6 +6512,7 @@ var DomNodeManager = class {
   lastSyncedVersion = /* @__PURE__ */ new Map();
   lastSyncedZIndex = /* @__PURE__ */ new Map();
   lastSyncedOpacity = /* @__PURE__ */ new Map();
+  cameraTransform = "";
   constructor(deps) {
     this.domLayer = deps.domLayer;
     this.onEditRequest = deps.onEditRequest;
@@ -6324,6 +6522,11 @@ var DomNodeManager = class {
   getNode(id) {
     return this.domNodes.get(id);
   }
+  setCameraTransform(transform) {
+    if (transform === this.cameraTransform) return;
+    this.cameraTransform = transform;
+    for (const stratum of this.strata.values()) stratum.style.transform = transform;
+  }
   storeHtmlContent(elementId, dom) {
     this.htmlContent.set(elementId, dom);
   }
@@ -6351,7 +6554,7 @@ var DomNodeManager = class {
         position: "absolute",
         pointerEvents: "auto"
       });
-      this.domLayer.appendChild(node);
+      this.getStratum(zIndex).appendChild(node);
       this.domNodes.set(element.id, node);
     } else if (this.getVersion) {
       const currentVersion = this.getVersion(element.id);
@@ -6362,6 +6565,15 @@ var DomNodeManager = class {
         return;
       }
     }
+    if (node.parentElement !== this.getStratum(zIndex)) {
+      const previousStratum = node.parentElement;
+      this.getStratum(zIndex).appendChild(node);
+      if (previousStratum?.childElementCount === 0) {
+        const previousOrder = Number(previousStratum.dataset["paintOrder"]);
+        previousStratum.remove();
+        this.strata.delete(previousOrder);
+      }
+    }
     if (this.getVersion) {
       this.lastSyncedVersion.set(element.id, this.getVersion(element.id));
       this.lastSyncedZIndex.set(element.id, zIndex);
@@ -6383,7 +6595,10 @@ var DomNodeManager = class {
   }
   hideDomNode(id) {
     const node = this.domNodes.get(id);
-    if (node) node.style.display = "none";
+    if (node) {
+      node.style.display = "none";
+      this.lastSyncedVersion.delete(id);
+    }
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
@@ -6392,8 +6607,14 @@ var DomNodeManager = class {
     this.lastSyncedOpacity.delete(id);
     const node = this.domNodes.get(id);
     if (node) {
+      const stratum = node.parentElement;
       node.remove();
       this.domNodes.delete(id);
+      if (stratum?.childElementCount === 0) {
+        const order = Number(stratum.dataset["paintOrder"]);
+        stratum.remove();
+        this.strata.delete(order);
+      }
     }
   }
   clearDomNodes() {
@@ -6403,6 +6624,27 @@ var DomNodeManager = class {
     this.lastSyncedVersion.clear();
     this.lastSyncedZIndex.clear();
     this.lastSyncedOpacity.clear();
+    for (const stratum of this.strata.values()) stratum.remove();
+    this.strata.clear();
+  }
+  getStratum(order) {
+    let stratum = this.strata.get(order);
+    if (stratum) return stratum;
+    stratum = document.createElement("div");
+    stratum.dataset["paintOrder"] = String(order);
+    Object.assign(stratum.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      transformOrigin: "0 0",
+      transform: this.cameraTransform,
+      zIndex: String(order)
+    });
+    this.domLayer.appendChild(stratum);
+    this.strata.set(order, stratum);
+    return stratum;
   }
   reattachHtmlContent(store) {
     for (const el of store.getElementsByType("html")) {
@@ -6584,6 +6826,7 @@ var RenderLoop = class {
   domNodeManager;
   layerCache;
   marginViewport;
+  hybridSurface;
   activeDrawingLayerId = null;
   gridCacheDirty = true;
   // set on recenter/viewport-change; consumed by the grid block
@@ -6603,6 +6846,7 @@ var RenderLoop = class {
     this.domNodeManager = deps.domNodeManager;
     this.layerCache = deps.layerCache;
     this.marginViewport = deps.marginViewport;
+    this.hybridSurface = deps.hybridSurface;
   }
   requestRender() {
     this.needsRender = true;
@@ -6723,9 +6967,19 @@ var RenderLoop = class {
       h: cullBounds.h + cullPad * 2
     };
     const allElements = this.store.getAll();
+    const visibleElements = allElements.filter(
+      (element) => this.layerManager.isLayerVisible(element.layerId)
+    );
+    const firstDomIndex = visibleElements.findIndex(
+      (element) => this.renderer.isDomElement(element)
+    );
+    const hybridActive = firstDomIndex >= 0 && visibleElements.slice(firstDomIndex + 1).some((element) => !this.renderer.isDomElement(element));
+    const hybridCanvasRuns = /* @__PURE__ */ new Map();
+    const hybridOrders = /* @__PURE__ */ new Set();
+    let activeHybridOrder = null;
     this.layerGroups.clear();
     const gridElements = [];
-    let domZIndex = 0;
+    let paintOrder = 0;
     for (const element of allElements) {
       if (!this.layerManager.isLayerVisible(element.layerId)) {
         if (this.renderer.isDomElement(element)) {
@@ -6733,16 +6987,29 @@ var RenderLoop = class {
         }
         continue;
       }
+      const order = ++paintOrder;
       if (this.renderer.isDomElement(element)) {
+        activeHybridOrder = null;
         const layerOpacity = this.layerManager.getLayer?.(element.layerId)?.opacity ?? 1;
         const elBounds = getElementBounds(element);
         if (elBounds && !boundsIntersect(elBounds, cullingRect)) {
           this.domNodeManager.hideDomNode(element.id);
         } else {
-          this.domNodeManager.syncDomNode(element, domZIndex++, layerOpacity);
+          this.domNodeManager.syncDomNode(element, order, layerOpacity);
         }
         continue;
       }
+      if (hybridActive && paintOrder > firstDomIndex + 1 && element.type !== "grid") {
+        activeHybridOrder ??= order;
+        let run = hybridCanvasRuns.get(activeHybridOrder);
+        if (!run) {
+          run = [];
+          hybridCanvasRuns.set(activeHybridOrder, run);
+          hybridOrders.add(activeHybridOrder);
+        }
+        run.push(element);
+        continue;
+      }
       if (element.type === "grid") {
         gridElements.push(element);
         continue;
@@ -6754,6 +7021,10 @@ var RenderLoop = class {
       }
       group.push(element);
     }
+    const activeTool = this.toolManager.activeTool;
+    const overlayOrder = visibleElements.length + 1;
+    if (hybridActive && activeTool?.renderOverlay) hybridOrders.add(overlayOrder);
+    this.hybridSurface.beginFrame(hybridOrders, this.canvasEl.width, this.canvasEl.height);
     for (const [layerId, elements] of this.layerGroups) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       const layerOpacity = this.layerManager.getLayer?.(layerId)?.opacity ?? 1;
@@ -6843,9 +7114,37 @@ var RenderLoop = class {
     } else {
       this.lastGridRefs = [];
     }
+    for (const [order, elements] of hybridCanvasRuns) {
+      const hybridCtx = this.hybridSurface.getContext(order);
+      if (!hybridCtx) continue;
+      hybridCtx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+      hybridCtx.save();
+      hybridCtx.scale(dpr, dpr);
+      hybridCtx.translate(this.camera.position.x, this.camera.position.y);
+      hybridCtx.scale(this.camera.zoom, this.camera.zoom);
+      for (const element of elements) {
+        const elBounds = getElementBounds(element);
+        if (elBounds && !boundsIntersect(elBounds, cullingRect)) continue;
+        hybridCtx.save();
+        hybridCtx.globalAlpha = this.layerManager.getLayer?.(element.layerId)?.opacity ?? 1;
+        this.renderer.renderCanvasElement(hybridCtx, element);
+        hybridCtx.restore();
+      }
+      hybridCtx.restore();
+    }
     const overlayT0 = performance.now();
-    const activeTool = this.toolManager.activeTool;
-    if (activeTool?.renderOverlay) {
+    if (hybridActive && activeTool?.renderOverlay) {
+      const overlayCtx = this.hybridSurface.getContext(overlayOrder);
+      if (overlayCtx) {
+        overlayCtx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+        overlayCtx.save();
+        overlayCtx.scale(dpr, dpr);
+        overlayCtx.translate(this.camera.position.x, this.camera.position.y);
+        overlayCtx.scale(this.camera.zoom, this.camera.zoom);
+        activeTool.renderOverlay(overlayCtx);
+        overlayCtx.restore();
+      }
+    } else if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
     const overlayMs = performance.now() - overlayT0;
@@ -7596,8 +7895,11 @@ var Viewport = class {
     });
     this.wrapper = createWrapper();
     this.canvasEl = createCanvas();
+    this.paintStack = createPaintStack();
     this.domLayer = createDomLayer();
+    this.domLayer.style.zIndex = "2147483647";
     this.wrapper.appendChild(this.canvasEl);
+    this.wrapper.appendChild(this.paintStack);
     this.wrapper.appendChild(this.domLayer);
     this.container.appendChild(this.wrapper);
     this.toolContext = {
@@ -7667,11 +7969,12 @@ var Viewport = class {
       this.minimap.scheduleDraw();
     }
     this.domNodeManager = new DomNodeManager({
-      domLayer: this.domLayer,
+      domLayer: this.paintStack,
       onEditRequest: (id) => this.interactions.startEditingElement(id),
       isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id,
       getVersion: (id) => this.store.getVersion(id)
     });
+    this.domNodeManager.setCameraTransform(this.camera.toCSSTransform());
     this.interactMode = new InteractMode({
       getNode: (id) => this.domNodeManager.getNode(id)
     });
@@ -7692,7 +7995,8 @@ var Viewport = class {
       layerManager: this.layerManager,
       domNodeManager: this.domNodeManager,
       layerCache,
-      marginViewport: this.marginViewport
+      marginViewport: this.marginViewport,
+      hybridSurface: new HybridRenderSurface(this.paintStack)
     });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
@@ -7779,6 +8083,7 @@ var Viewport = class {
   history;
   domLayer;
   canvasEl;
+  paintStack;
   wrapper;
   unsubCamera;
   unsubToolChange;
@@ -8134,7 +8439,9 @@ var Viewport = class {
     }
   }
   applyCameraTransform() {
-    this.domLayer.style.transform = this.camera.toCSSTransform();
+    const transform = this.camera.toCSSTransform();
+    this.domLayer.style.transform = transform;
+    this.domNodeManager.setCameraTransform(transform);
   }
   syncCanvasSize() {
     const rect = this.container.getBoundingClientRect();
@@ -10815,7 +11122,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.51.0";
+var VERSION = "0.52.1";
 export {
   ArrowTool,
   AutoSave,