@fieldnotes/core 0.21.0 → 0.22.0

package/dist/index.cjs

@@ -1933,10 +1933,134 @@ function getTemplateBounds(el) {
     }
   }
 }
+function transferStrokeBounds(prev, next) {
+  if (prev.type !== "stroke" || next.type !== "stroke") return;
+  if (prev.points !== next.points) return;
+  if (prev.position.x !== next.position.x || prev.position.y !== next.position.y) return;
+  const bounds = strokeBoundsCache.get(prev);
+  if (bounds) strokeBoundsCache.set(next, bounds);
+}
 function boundsIntersect(a, b) {
   return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
 }
 
+// src/elements/stroke-smoothing.ts
+var MIN_PRESSURE_SCALE = 0.2;
+function pressureToWidth(pressure, baseWidth) {
+  return baseWidth * (MIN_PRESSURE_SCALE + (1 - MIN_PRESSURE_SCALE) * pressure);
+}
+function simplifyPoints(points, tolerance) {
+  if (points.length <= 2) return points.slice();
+  return rdp(points, 0, points.length - 1, tolerance);
+}
+function rdp(points, start, end, tolerance) {
+  const first = points[start];
+  const last = points[end];
+  if (!first || !last) return [];
+  if (end - start <= 1) return [first, last];
+  let maxDist = 0;
+  let maxIndex = start;
+  for (let i = start + 1; i < end; i++) {
+    const pt = points[i];
+    if (!pt) continue;
+    const dist = perpendicularDistance(pt, first, last);
+    if (dist > maxDist) {
+      maxDist = dist;
+      maxIndex = i;
+    }
+  }
+  if (maxDist <= tolerance) return [first, last];
+  const left = rdp(points, start, maxIndex, tolerance);
+  const right = rdp(points, maxIndex, end, tolerance);
+  return left.concat(right.slice(1));
+}
+function perpendicularDistance(pt, lineStart, lineEnd) {
+  const dx = lineEnd.x - lineStart.x;
+  const dy = lineEnd.y - lineStart.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    const ex = pt.x - lineStart.x;
+    const ey = pt.y - lineStart.y;
+    return Math.sqrt(ex * ex + ey * ey);
+  }
+  const num = Math.abs(dy * pt.x - dx * pt.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
+  return num / Math.sqrt(lenSq);
+}
+function smoothToSegments(points) {
+  if (points.length < 2) return [];
+  if (points.length === 2) {
+    const p0 = points[0];
+    const p1 = points[1];
+    if (!p0 || !p1) return [];
+    const mx = (p0.x + p1.x) / 2;
+    const my = (p0.y + p1.y) / 2;
+    return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
+  }
+  const segments = [];
+  const n = points.length;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(n - 1, i + 2)];
+    if (!p0 || !p1 || !p2 || !p3) continue;
+    const cp1 = {
+      x: p1.x + (p2.x - p0.x) / 6,
+      y: p1.y + (p2.y - p0.y) / 6
+    };
+    const cp2 = {
+      x: p2.x - (p3.x - p1.x) / 6,
+      y: p2.y - (p3.y - p1.y) / 6
+    };
+    segments.push({ start: p1, cp1, cp2, end: p2 });
+  }
+  return segments;
+}
+
+// src/elements/stroke-cache.ts
+var cache = /* @__PURE__ */ new WeakMap();
+var WIDTH_QUANTUM = 0.25;
+function buildWidthBuckets(segments, widths) {
+  if (typeof Path2D === "undefined") return null;
+  const byWidth = /* @__PURE__ */ new Map();
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    const w = widths[i];
+    if (!seg || w === void 0) continue;
+    const q = Math.max(WIDTH_QUANTUM, Math.round(w / WIDTH_QUANTUM) * WIDTH_QUANTUM);
+    let path = byWidth.get(q);
+    if (!path) {
+      path = new Path2D();
+      byWidth.set(q, path);
+    }
+    path.moveTo(seg.start.x, seg.start.y);
+    path.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+  }
+  return [...byWidth.entries()].map(([width, path]) => ({ width, path }));
+}
+function computeStrokeSegments(stroke) {
+  const segments = smoothToSegments(stroke.points);
+  const widths = [];
+  for (const seg of segments) {
+    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+    widths.push(w);
+  }
+  const data = { segments, widths, buckets: buildWidthBuckets(segments, widths) };
+  cache.set(stroke, data);
+  return data;
+}
+function getStrokeRenderData(stroke) {
+  const cached = cache.get(stroke);
+  if (cached) return cached;
+  return computeStrokeSegments(stroke);
+}
+function transferStrokeRenderData(prev, next) {
+  if (prev.type !== "stroke" || next.type !== "stroke") return;
+  if (prev.points !== next.points) return;
+  const data = cache.get(prev);
+  if (data) cache.set(next, data);
+}
+
 // src/elements/element-store.ts
 var ElementStore = class {
   elements = /* @__PURE__ */ new Map();
@@ -1987,6 +2111,10 @@ var ElementStore = class {
     this.sortedCache = null;
     this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    if (updated.type === "stroke" && existing.type === "stroke") {
+      transferStrokeRenderData(existing, updated);
+      transferStrokeBounds(existing, updated);
+    }
     if (updated.type === "arrow") {
       const arrow = updated;
       arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
@@ -2030,6 +2158,12 @@ var ElementStore = class {
       this._versions.set(el.id, 0);
       const bounds = getElementBounds(el);
       if (bounds) this.spatialIndex.insert(el.id, bounds);
+      if (el.type === "stroke") {
+        computeStrokeSegments(el);
+      }
+      if (el.type === "arrow" && el.bend !== 0 && !el.cachedControlPoint) {
+        el.cachedControlPoint = getArrowControlPoint(el.from, el.to, el.bend);
+      }
     }
     this.bus.emit("clear", null);
     for (const el of elements) {
@@ -2115,6 +2249,20 @@ var ElementStore = class {
   }
 };
 
+// src/elements/arrow-render-cache.ts
+var cache2 = /* @__PURE__ */ new WeakMap();
+function getArrowRenderGeometry(arrow) {
+  const hit = cache2.get(arrow);
+  if (hit) return hit;
+  const geometry = {
+    controlPoint: arrow.bend !== 0 ? arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend) : null,
+    tangentStart: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0),
+    tangentEnd: getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1)
+  };
+  cache2.set(arrow, geometry);
+  return geometry;
+}
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -2235,98 +2383,6 @@ function unbindArrow(arrow, store) {
   return updates;
 }
 
-// src/elements/stroke-smoothing.ts
-var MIN_PRESSURE_SCALE = 0.2;
-function pressureToWidth(pressure, baseWidth) {
-  return baseWidth * (MIN_PRESSURE_SCALE + (1 - MIN_PRESSURE_SCALE) * pressure);
-}
-function simplifyPoints(points, tolerance) {
-  if (points.length <= 2) return points.slice();
-  return rdp(points, 0, points.length - 1, tolerance);
-}
-function rdp(points, start, end, tolerance) {
-  const first = points[start];
-  const last = points[end];
-  if (!first || !last) return [];
-  if (end - start <= 1) return [first, last];
-  let maxDist = 0;
-  let maxIndex = start;
-  for (let i = start + 1; i < end; i++) {
-    const pt = points[i];
-    if (!pt) continue;
-    const dist = perpendicularDistance(pt, first, last);
-    if (dist > maxDist) {
-      maxDist = dist;
-      maxIndex = i;
-    }
-  }
-  if (maxDist <= tolerance) return [first, last];
-  const left = rdp(points, start, maxIndex, tolerance);
-  const right = rdp(points, maxIndex, end, tolerance);
-  return left.concat(right.slice(1));
-}
-function perpendicularDistance(pt, lineStart, lineEnd) {
-  const dx = lineEnd.x - lineStart.x;
-  const dy = lineEnd.y - lineStart.y;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) {
-    const ex = pt.x - lineStart.x;
-    const ey = pt.y - lineStart.y;
-    return Math.sqrt(ex * ex + ey * ey);
-  }
-  const num = Math.abs(dy * pt.x - dx * pt.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
-  return num / Math.sqrt(lenSq);
-}
-function smoothToSegments(points) {
-  if (points.length < 2) return [];
-  if (points.length === 2) {
-    const p0 = points[0];
-    const p1 = points[1];
-    if (!p0 || !p1) return [];
-    const mx = (p0.x + p1.x) / 2;
-    const my = (p0.y + p1.y) / 2;
-    return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
-  }
-  const segments = [];
-  const n = points.length;
-  for (let i = 0; i < n - 1; i++) {
-    const p0 = points[Math.max(0, i - 1)];
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p3 = points[Math.min(n - 1, i + 2)];
-    if (!p0 || !p1 || !p2 || !p3) continue;
-    const cp1 = {
-      x: p1.x + (p2.x - p0.x) / 6,
-      y: p1.y + (p2.y - p0.y) / 6
-    };
-    const cp2 = {
-      x: p2.x - (p3.x - p1.x) / 6,
-      y: p2.y - (p3.y - p1.y) / 6
-    };
-    segments.push({ start: p1, cp1, cp2, end: p2 });
-  }
-  return segments;
-}
-
-// src/elements/stroke-cache.ts
-var cache = /* @__PURE__ */ new WeakMap();
-function computeStrokeSegments(stroke) {
-  const segments = smoothToSegments(stroke.points);
-  const widths = [];
-  for (const seg of segments) {
-    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
-    widths.push(w);
-  }
-  const data = { segments, widths };
-  cache.set(stroke, data);
-  return data;
-}
-function getStrokeRenderData(stroke) {
-  const cached = cache.get(stroke);
-  if (cached) return cached;
-  return computeStrokeSegments(stroke);
-}
-
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
   if (cellSize <= 0) return { verticals: [], horizontals: [] };
@@ -2772,21 +2828,29 @@ var ElementRenderer = class {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    const { segments, widths } = getStrokeRenderData(stroke);
-    for (let i = 0; i < segments.length; i++) {
-      const seg = segments[i];
-      const w = widths[i];
-      if (!seg || w === void 0) continue;
-      ctx.lineWidth = w;
-      ctx.beginPath();
-      ctx.moveTo(seg.start.x, seg.start.y);
-      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
-      ctx.stroke();
+    const data = getStrokeRenderData(stroke);
+    if (data.buckets) {
+      for (const bucket of data.buckets) {
+        ctx.lineWidth = bucket.width;
+        ctx.stroke(bucket.path);
+      }
+    } else {
+      for (let i = 0; i < data.segments.length; i++) {
+        const seg = data.segments[i];
+        const w = data.widths[i];
+        if (!seg || w === void 0) continue;
+        ctx.lineWidth = w;
+        ctx.beginPath();
+        ctx.moveTo(seg.start.x, seg.start.y);
+        ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+        ctx.stroke();
+      }
     }
     ctx.restore();
   }
   renderArrow(ctx, arrow) {
-    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow);
+    const geometry = getArrowRenderGeometry(arrow);
+    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow, geometry);
     ctx.save();
     ctx.strokeStyle = arrow.color;
     ctx.lineWidth = arrow.width;
@@ -2797,17 +2861,18 @@ var ElementRenderer = class {
     ctx.beginPath();
     ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
-      const cp = arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
-      ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
+      const cp = geometry.controlPoint;
+      if (cp) {
+        ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
+      }
     } else {
       ctx.lineTo(visualTo.x, visualTo.y);
     }
     ctx.stroke();
-    this.renderArrowhead(ctx, arrow, visualTo);
+    this.renderArrowhead(ctx, arrow, visualTo, geometry.tangentEnd);
     ctx.restore();
   }
-  renderArrowhead(ctx, arrow, tip) {
-    const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+  renderArrowhead(ctx, arrow, tip, angle) {
     ctx.beginPath();
     ctx.moveTo(tip.x, tip.y);
     ctx.lineTo(
@@ -2822,7 +2887,7 @@ var ElementRenderer = class {
     ctx.fillStyle = arrow.color;
     ctx.fill();
   }
-  getVisualEndpoints(arrow) {
+  getVisualEndpoints(arrow, geometry) {
     let visualFrom = arrow.from;
     let visualTo = arrow.to;
     if (!this.store) return { visualFrom, visualTo };
@@ -2831,7 +2896,7 @@ var ElementRenderer = class {
       if (el) {
         const bounds = getElementBounds(el);
         if (bounds) {
-          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const tangentAngle = geometry.tangentStart;
           const rayTarget = {
             x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
             y: arrow.from.y + Math.sin(tangentAngle) * 1e3
@@ -2845,7 +2910,7 @@ var ElementRenderer = class {
       if (el) {
         const bounds = getElementBounds(el);
         if (bounds) {
-          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const tangentAngle = geometry.tangentEnd;
           const rayTarget = {
             x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
             y: arrow.to.y - Math.sin(tangentAngle) * 1e3
@@ -4209,19 +4274,19 @@ function loadImages(elements) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
-  const cache2 = /* @__PURE__ */ new Map();
-  if (imageElements.length === 0) return Promise.resolve(cache2);
+  const cache3 = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache3);
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
       remaining--;
-      if (remaining <= 0) resolve(cache2);
+      if (remaining <= 0) resolve(cache3);
     };
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        cache2.set(el.id, img);
+        cache3.set(el.id, img);
         done();
       };
       img.onerror = done;
@@ -4702,18 +4767,39 @@ var RenderStats = class {
   frameTimes = [];
   frameCount = 0;
   _lastGridMs = 0;
-  recordFrame(durationMs, gridMs) {
+  _lastLayersMs = 0;
+  _lastBackgroundMs = 0;
+  _lastCompositeMs = 0;
+  _lastOverlayMs = 0;
+  recordFrame(durationMs, breakdown) {
     this.frameCount++;
     this.frameTimes.push(durationMs);
     if (this.frameTimes.length > SAMPLE_SIZE) {
       this.frameTimes.shift();
     }
-    if (gridMs !== void 0) this._lastGridMs = gridMs;
+    if (breakdown !== void 0) {
+      if (breakdown.gridMs !== void 0) this._lastGridMs = breakdown.gridMs;
+      if (breakdown.layersMs !== void 0) this._lastLayersMs = breakdown.layersMs;
+      if (breakdown.backgroundMs !== void 0) this._lastBackgroundMs = breakdown.backgroundMs;
+      if (breakdown.compositeMs !== void 0) this._lastCompositeMs = breakdown.compositeMs;
+      if (breakdown.overlayMs !== void 0) this._lastOverlayMs = breakdown.overlayMs;
+    }
   }
   getSnapshot() {
     const times = this.frameTimes;
     if (times.length === 0) {
-      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, lastGridMs: 0, frameCount: 0 };
+      return {
+        fps: 0,
+        avgFrameMs: 0,
+        p95FrameMs: 0,
+        lastFrameMs: 0,
+        lastGridMs: 0,
+        layersMs: 0,
+        backgroundMs: 0,
+        compositeMs: 0,
+        overlayMs: 0,
+        frameCount: 0
+      };
     }
     const avg = times.reduce((a, b) => a + b, 0) / times.length;
     const sorted = [...times].sort((a, b) => a - b);
@@ -4725,6 +4811,10 @@ var RenderStats = class {
       p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
       lastFrameMs: Math.round(lastFrame * 100) / 100,
       lastGridMs: Math.round(this._lastGridMs * 100) / 100,
+      layersMs: Math.round(this._lastLayersMs * 100) / 100,
+      backgroundMs: Math.round(this._lastBackgroundMs * 100) / 100,
+      compositeMs: Math.round(this._lastCompositeMs * 100) / 100,
+      overlayMs: Math.round(this._lastOverlayMs * 100) / 100,
       frameCount: this.frameCount
     };
   }
@@ -4752,7 +4842,7 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
-  lastGridMs = 0;
+  layerGroups = /* @__PURE__ */ new Map();
   gridCacheCanvas = null;
   gridCacheCtx = null;
   gridCacheZoom = -1;
@@ -4850,6 +4940,9 @@ var RenderLoop = class {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
     if (!ctx) return;
+    let layersMs = 0;
+    let compositeMs = 0;
+    let gridMs = 0;
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     const cssWidth = this.canvasEl.clientWidth;
     const cssHeight = this.canvasEl.clientHeight;
@@ -4866,6 +4959,7 @@ var RenderLoop = class {
     ctx.scale(dpr, dpr);
     this.renderer.setCanvasSize(cssWidth, cssHeight);
     const hasGridElement = this.store.getElementsByType("grid").length > 0;
+    const bgT0 = performance.now();
     if (hasGridElement) {
       ctx.save();
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
@@ -4874,6 +4968,7 @@ var RenderLoop = class {
     } else {
       this.background.render(ctx, this.camera);
     }
+    const backgroundMs = performance.now() - bgT0;
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
     ctx.scale(this.camera.zoom, this.camera.zoom);
@@ -4886,7 +4981,7 @@ var RenderLoop = class {
       h: visibleRect.h + margin * 2
     };
     const allElements = this.store.getAll();
-    const layerElements = /* @__PURE__ */ new Map();
+    this.layerGroups.clear();
     const gridElements = [];
     let domZIndex = 0;
     for (const element of allElements) {
@@ -4909,25 +5004,30 @@ var RenderLoop = class {
         gridElements.push(element);
         continue;
       }
-      let group = layerElements.get(element.layerId);
+      let group = this.layerGroups.get(element.layerId);
       if (!group) {
         group = [];
-        layerElements.set(element.layerId, group);
+        this.layerGroups.set(element.layerId, group);
       }
       group.push(element);
     }
-    for (const [layerId, elements] of layerElements) {
+    for (const [layerId, elements] of this.layerGroups) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       if (!this.layerCache.isDirty(layerId)) {
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
         continue;
       }
       if (isActiveDrawingLayer) {
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
         continue;
       }
       const offCtx = this.layerCache.getContext(layerId);
       if (offCtx) {
+        const layerT0 = performance.now();
         const offCanvas = this.layerCache.getCanvas(layerId);
         offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
         offCtx.save();
@@ -4941,7 +5041,10 @@ var RenderLoop = class {
         }
         offCtx.restore();
         this.layerCache.markClean(layerId);
+        layersMs += performance.now() - layerT0;
+        const compT0 = performance.now();
         this.compositeLayerCache(ctx, layerId, dpr);
+        compositeMs += performance.now() - compT0;
       }
     }
     if (gridElements.length > 0) {
@@ -4982,15 +5085,23 @@ var RenderLoop = class {
         this.gridCacheHeight = cssHeight;
         this.lastGridRef = gridRef;
       }
-      this.lastGridMs = performance.now() - gridT0;
+      gridMs = performance.now() - gridT0;
     }
+    const overlayT0 = performance.now();
     const activeTool = this.toolManager.activeTool;
     if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
+    const overlayMs = performance.now() - overlayT0;
     ctx.restore();
     ctx.restore();
-    this.stats.recordFrame(performance.now() - t0, this.lastGridMs);
+    this.stats.recordFrame(performance.now() - t0, {
+      gridMs,
+      layersMs,
+      backgroundMs,
+      compositeMs,
+      overlayMs
+    });
   }
 };
 
@@ -5402,7 +5513,7 @@ var Viewport = class {
     const id = setInterval(() => {
       const s = this.getRenderStats();
       console.log(
-        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms`
+        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms layers=${s.layersMs}ms comp=${s.compositeMs}ms bg=${s.backgroundMs}ms overlay=${s.overlayMs}ms`
       );
     }, intervalMs);
     return () => clearInterval(id);
@@ -7400,7 +7511,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.21.0";
+var VERSION = "0.22.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,