@aznabee/freehand-ui 0.1.6 → 0.1.8

package/dist/freehand-ui.cjs

@@ -312,6 +312,10 @@ var DEFAULT_OPTIONS = {
    */
   zIndex: null
 };
+var OVERLAY_CLASS = "doodle-ui-overlay";
+function isOverlayNode(node) {
+  return node?.classList?.contains(OVERLAY_CLASS) ?? false;
+}
 function resolveElement(target) {
   if (!target) return null;
   if (typeof target === "string") {
@@ -399,20 +403,6 @@ function isValidPosition(position) {
     "center"
   ].includes(position);
 }
-function getScrollableAncestors(element) {
-  const ancestors = [];
-  let node = element.parentElement;
-  while (node && node !== document.documentElement) {
-    const style = getComputedStyle(node);
-    const overflow = style.overflow + style.overflowY + style.overflowX;
-    if (/(auto|scroll|overlay)/.test(overflow)) {
-      ancestors.push(node);
-    }
-    node = node.parentElement;
-  }
-  ancestors.push(window);
-  return ancestors;
-}
 function resolveOverlayZIndex(element, override) {
   if (override != null) return override;
   const { zIndex, position } = getComputedStyle(element);
@@ -432,12 +422,20 @@ function resolveOverlayZIndex(element, override) {
   return null;
 }
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return;
+  const setPosition = getComputedStyle(element).position === "static";
+  if (setPosition) {
+    element.style.position = "relative";
+  }
+  element.appendChild(svg);
+  return setPosition;
+}
+function removeOverlaySvg(svg, element, clearPosition) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (clearPosition) {
+    element.style.position = "";
   }
-  parent.insertBefore(svg, element.nextSibling);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -464,7 +462,10 @@ function averageCornerRadius(element) {
 function detectBorderRadius(element) {
   const own = averageCornerRadius(element);
   if (own > 0) return own;
-  const child = element.children.length === 1 ? element.firstElementChild : null;
+  const content = Array.from(element.children).filter(
+    (node) => !isOverlayNode(node)
+  );
+  const child = content.length === 1 ? content[0] : null;
   if (!child) return 0;
   const outer = element.getBoundingClientRect();
   const inner = child.getBoundingClientRect();
@@ -495,22 +496,6 @@ function relativeRect(outer, inner) {
     radius: inner.radius
   };
 }
-function unionRects(rects, margin = 0) {
-  if (rects.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0, radius: 0 };
-  }
-  const minX = Math.min(...rects.map((r) => r.x)) - margin;
-  const minY = Math.min(...rects.map((r) => r.y)) - margin;
-  const maxX = Math.max(...rects.map((r) => r.x + r.width)) + margin;
-  const maxY = Math.max(...rects.map((r) => r.y + r.height)) + margin;
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-    radius: 0
-  };
-}
 function inflateRect(rect, amount) {
   return {
     x: rect.x - amount,
@@ -1320,19 +1305,18 @@ function placeNoteText(note, box, style, seed, options = {}) {
 }
 function createOverlaySvg(left, top, width, height) {
   const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("class", "doodle-ui-overlay");
+  svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));
   svg.setAttribute("height", String(height));
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.style.position = "fixed";
+  svg.style.position = "absolute";
   svg.style.left = `${left}px`;
   svg.style.top = `${top}px`;
   svg.style.width = `${width}px`;
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.willChange = "transform";
   return svg;
 }
 
@@ -1863,13 +1847,27 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(overlayRect, inset = 8) {
+function localBand(originLeft, inset = 8) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -overlayRect.x + inset,
+    x: -originLeft + inset,
     width: Math.max(0, width - inset * 2)
   };
 }
+function paddingBox(element) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const left = parseFloat(style.borderLeftWidth) || 0;
+  const top = parseFloat(style.borderTopWidth) || 0;
+  const right = parseFloat(style.borderRightWidth) || 0;
+  const bottom = parseFloat(style.borderBottomWidth) || 0;
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    width: Math.max(0, rect.width - left - right),
+    height: Math.max(0, rect.height - top - bottom)
+  };
+}
 var DoodleOverlay = class {
   /**
    * @param {Element} element
@@ -1881,13 +1879,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
-    this.pendingRepositionFrame = null;
-    this.basePosition = { x: 0, y: 0 };
     this.listeners = [];
-    this.onScroll = this.scheduleReposition.bind(this);
     this.onResize = this.scheduleUpdate.bind(this);
     this.onLanguageChange = this.scheduleUpdate.bind(this);
     this.childElements = [];
@@ -1895,23 +1891,22 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.setPosition = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
       this.observeChildren();
     }
-    this.mutationObserver = new MutationObserver(this.scheduleUpdate.bind(this));
+    this.mutationObserver = new MutationObserver((records) => {
+      const relevant = records.some((record) => !this.svg.contains(record.target));
+      if (relevant) this.scheduleUpdate();
+    });
     this.mutationObserver.observe(this.element, {
       childList: true,
       subtree: true,
       attributes: true
     });
-    for (const target of getScrollableAncestors(this.element)) {
-      target.addEventListener("scroll", this.onScroll, { passive: true });
-      this.listeners.push({ target, type: "scroll", handler: this.onScroll });
-    }
     window.addEventListener("resize", this.onResize, { passive: true });
     this.listeners.push({
       target: window,
@@ -1947,46 +1942,6 @@ var DoodleOverlay = class {
       this.update();
     });
   }
-  scheduleReposition() {
-    if (this.pendingFrame != null || this.pendingRepositionFrame != null) {
-      return;
-    }
-    this.pendingRepositionFrame = scheduleFrame(() => {
-      this.pendingRepositionFrame = null;
-      this.reposition();
-    });
-  }
-  /**
-   * Cheap scroll-driven path: slide the overlay to the element's new
-   * viewport position without touching its contents. Scrolling can't change
-   * an element's size, so the rects, viewBox and every hand-drawn stroke
-   * inside them are still valid - only the overlay's position needs to move.
-   *
-   * That move is a `transform`, not `left`/`top`. `left`/`top` sit in the
-   * same box-geometry pass as layout, so the browser re-checks layout on
-   * every write; `transform` is composited, so the scroll path never
-   * touches layout at all.
-   */
-  reposition() {
-    if (!this.svg || !this.element.isConnected) return;
-    const { padding, radius } = this.options;
-    const targets = this.getTargets();
-    const margin = this.overlayMargin();
-    const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
-    );
-    const overlayRect = unionRects(absoluteRects, margin);
-    const currentWidth = parseFloat(this.svg.style.width) || 0;
-    const currentHeight = parseFloat(this.svg.style.height) || 0;
-    const resized = Math.abs(overlayRect.width - currentWidth) > 0.5 || Math.abs(overlayRect.height - currentHeight) > 0.5;
-    if (resized) {
-      this.update();
-      return;
-    }
-    const dx = overlayRect.x - this.basePosition.x;
-    const dy = overlayRect.y - this.basePosition.y;
-    this.svg.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
-  }
   getTargets() {
     if (this.options.children) {
       const nodes = this.element.querySelectorAll(this.options.children);
@@ -1998,23 +1953,23 @@ var DoodleOverlay = class {
     if (!this.svg || !this.element.isConnected) return;
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
-    const margin = this.overlayMargin();
     const elapsed = now() - this.startedAt;
     const absoluteRects = targets.map(
       (target) => getElementBounds(target, padding, radius)
     );
-    const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    this.svg.setAttribute("width", String(overlayRect.width));
-    this.svg.setAttribute("height", String(overlayRect.height));
-    this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);
-    this.svg.style.left = `${overlayRect.x}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
+    const box = paddingBox(this.element);
+    const width = Math.max(1, box.width);
+    const height = Math.max(1, box.height);
+    const origin = { x: box.left, y: box.top };
+    this.svg.setAttribute("width", String(width));
+    this.svg.setAttribute("height", String(height));
+    this.svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    this.svg.style.left = "0px";
+    this.svg.style.top = "0px";
+    this.svg.style.width = `${width}px`;
+    this.svg.style.height = `${height}px`;
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2025,12 +1980,12 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(overlayRect),
+      band: localBand(origin.x),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {
       const absolute = absoluteRects[index];
-      const local = relativeRect(overlayRect, absolute);
+      const local = relativeRect(origin, absolute);
       const seed = this.seed + index * 31;
       const note = this.options.note && index === 0 ? renderAnnotation(
         this.svg,
@@ -2076,24 +2031,11 @@ var DoodleOverlay = class {
       this.svg.appendChild(group);
     }
   }
-  /**
-   * Room the overlay needs beyond the element for notes, arrows and decorations.
-   */
-  overlayMargin() {
-    const { note, arrow, decorations } = this.options;
-    if (!note && !arrow && !decorations) return 48;
-    const { text } = resolveLocalizedText(note?.text, note?.locale);
-    return Math.max(96, Math.min(240, 80 + text.length * 8));
-  }
   destroy() {
     if (this.pendingFrame != null) {
       cancelFrame(this.pendingFrame);
       this.pendingFrame = null;
     }
-    if (this.pendingRepositionFrame != null) {
-      cancelFrame(this.pendingRepositionFrame);
-      this.pendingRepositionFrame = null;
-    }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
@@ -2110,8 +2052,8 @@ var DoodleOverlay = class {
       target.removeEventListener(type, handler);
     }
     this.listeners = [];
-    if (this.svg?.parentNode) {
-      this.svg.parentNode.removeChild(this.svg);
+    if (this.svg) {
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
     instances.delete(this.element);

package/dist/freehand-ui.js

@@ -287,6 +287,10 @@ var DEFAULT_OPTIONS = {
    */
   zIndex: null
 };
+var OVERLAY_CLASS = "doodle-ui-overlay";
+function isOverlayNode(node) {
+  return node?.classList?.contains(OVERLAY_CLASS) ?? false;
+}
 function resolveElement(target) {
   if (!target) return null;
   if (typeof target === "string") {
@@ -374,20 +378,6 @@ function isValidPosition(position) {
     "center"
   ].includes(position);
 }
-function getScrollableAncestors(element) {
-  const ancestors = [];
-  let node = element.parentElement;
-  while (node && node !== document.documentElement) {
-    const style = getComputedStyle(node);
-    const overflow = style.overflow + style.overflowY + style.overflowX;
-    if (/(auto|scroll|overlay)/.test(overflow)) {
-      ancestors.push(node);
-    }
-    node = node.parentElement;
-  }
-  ancestors.push(window);
-  return ancestors;
-}
 function resolveOverlayZIndex(element, override) {
   if (override != null) return override;
   const { zIndex, position } = getComputedStyle(element);
@@ -407,12 +397,20 @@ function resolveOverlayZIndex(element, override) {
   return null;
 }
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return;
+  const setPosition = getComputedStyle(element).position === "static";
+  if (setPosition) {
+    element.style.position = "relative";
+  }
+  element.appendChild(svg);
+  return setPosition;
+}
+function removeOverlaySvg(svg, element, clearPosition) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (clearPosition) {
+    element.style.position = "";
   }
-  parent.insertBefore(svg, element.nextSibling);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -439,7 +437,10 @@ function averageCornerRadius(element) {
 function detectBorderRadius(element) {
   const own = averageCornerRadius(element);
   if (own > 0) return own;
-  const child = element.children.length === 1 ? element.firstElementChild : null;
+  const content = Array.from(element.children).filter(
+    (node) => !isOverlayNode(node)
+  );
+  const child = content.length === 1 ? content[0] : null;
   if (!child) return 0;
   const outer = element.getBoundingClientRect();
   const inner = child.getBoundingClientRect();
@@ -470,22 +471,6 @@ function relativeRect(outer, inner) {
     radius: inner.radius
   };
 }
-function unionRects(rects, margin = 0) {
-  if (rects.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0, radius: 0 };
-  }
-  const minX = Math.min(...rects.map((r) => r.x)) - margin;
-  const minY = Math.min(...rects.map((r) => r.y)) - margin;
-  const maxX = Math.max(...rects.map((r) => r.x + r.width)) + margin;
-  const maxY = Math.max(...rects.map((r) => r.y + r.height)) + margin;
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-    radius: 0
-  };
-}
 function inflateRect(rect, amount) {
   return {
     x: rect.x - amount,
@@ -1295,19 +1280,18 @@ function placeNoteText(note, box, style, seed, options = {}) {
 }
 function createOverlaySvg(left, top, width, height) {
   const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("class", "doodle-ui-overlay");
+  svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));
   svg.setAttribute("height", String(height));
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.style.position = "fixed";
+  svg.style.position = "absolute";
   svg.style.left = `${left}px`;
   svg.style.top = `${top}px`;
   svg.style.width = `${width}px`;
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.willChange = "transform";
   return svg;
 }
 
@@ -1838,13 +1822,27 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(overlayRect, inset = 8) {
+function localBand(originLeft, inset = 8) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -overlayRect.x + inset,
+    x: -originLeft + inset,
     width: Math.max(0, width - inset * 2)
   };
 }
+function paddingBox(element) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const left = parseFloat(style.borderLeftWidth) || 0;
+  const top = parseFloat(style.borderTopWidth) || 0;
+  const right = parseFloat(style.borderRightWidth) || 0;
+  const bottom = parseFloat(style.borderBottomWidth) || 0;
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    width: Math.max(0, rect.width - left - right),
+    height: Math.max(0, rect.height - top - bottom)
+  };
+}
 var DoodleOverlay = class {
   /**
    * @param {Element} element
@@ -1856,13 +1854,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
-    this.pendingRepositionFrame = null;
-    this.basePosition = { x: 0, y: 0 };
     this.listeners = [];
-    this.onScroll = this.scheduleReposition.bind(this);
     this.onResize = this.scheduleUpdate.bind(this);
     this.onLanguageChange = this.scheduleUpdate.bind(this);
     this.childElements = [];
@@ -1870,23 +1866,22 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.setPosition = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
       this.observeChildren();
     }
-    this.mutationObserver = new MutationObserver(this.scheduleUpdate.bind(this));
+    this.mutationObserver = new MutationObserver((records) => {
+      const relevant = records.some((record) => !this.svg.contains(record.target));
+      if (relevant) this.scheduleUpdate();
+    });
     this.mutationObserver.observe(this.element, {
       childList: true,
       subtree: true,
       attributes: true
     });
-    for (const target of getScrollableAncestors(this.element)) {
-      target.addEventListener("scroll", this.onScroll, { passive: true });
-      this.listeners.push({ target, type: "scroll", handler: this.onScroll });
-    }
     window.addEventListener("resize", this.onResize, { passive: true });
     this.listeners.push({
       target: window,
@@ -1922,46 +1917,6 @@ var DoodleOverlay = class {
       this.update();
     });
   }
-  scheduleReposition() {
-    if (this.pendingFrame != null || this.pendingRepositionFrame != null) {
-      return;
-    }
-    this.pendingRepositionFrame = scheduleFrame(() => {
-      this.pendingRepositionFrame = null;
-      this.reposition();
-    });
-  }
-  /**
-   * Cheap scroll-driven path: slide the overlay to the element's new
-   * viewport position without touching its contents. Scrolling can't change
-   * an element's size, so the rects, viewBox and every hand-drawn stroke
-   * inside them are still valid - only the overlay's position needs to move.
-   *
-   * That move is a `transform`, not `left`/`top`. `left`/`top` sit in the
-   * same box-geometry pass as layout, so the browser re-checks layout on
-   * every write; `transform` is composited, so the scroll path never
-   * touches layout at all.
-   */
-  reposition() {
-    if (!this.svg || !this.element.isConnected) return;
-    const { padding, radius } = this.options;
-    const targets = this.getTargets();
-    const margin = this.overlayMargin();
-    const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
-    );
-    const overlayRect = unionRects(absoluteRects, margin);
-    const currentWidth = parseFloat(this.svg.style.width) || 0;
-    const currentHeight = parseFloat(this.svg.style.height) || 0;
-    const resized = Math.abs(overlayRect.width - currentWidth) > 0.5 || Math.abs(overlayRect.height - currentHeight) > 0.5;
-    if (resized) {
-      this.update();
-      return;
-    }
-    const dx = overlayRect.x - this.basePosition.x;
-    const dy = overlayRect.y - this.basePosition.y;
-    this.svg.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
-  }
   getTargets() {
     if (this.options.children) {
       const nodes = this.element.querySelectorAll(this.options.children);
@@ -1973,23 +1928,23 @@ var DoodleOverlay = class {
     if (!this.svg || !this.element.isConnected) return;
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
-    const margin = this.overlayMargin();
     const elapsed = now() - this.startedAt;
     const absoluteRects = targets.map(
       (target) => getElementBounds(target, padding, radius)
     );
-    const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    this.svg.setAttribute("width", String(overlayRect.width));
-    this.svg.setAttribute("height", String(overlayRect.height));
-    this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);
-    this.svg.style.left = `${overlayRect.x}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
+    const box = paddingBox(this.element);
+    const width = Math.max(1, box.width);
+    const height = Math.max(1, box.height);
+    const origin = { x: box.left, y: box.top };
+    this.svg.setAttribute("width", String(width));
+    this.svg.setAttribute("height", String(height));
+    this.svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    this.svg.style.left = "0px";
+    this.svg.style.top = "0px";
+    this.svg.style.width = `${width}px`;
+    this.svg.style.height = `${height}px`;
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2000,12 +1955,12 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(overlayRect),
+      band: localBand(origin.x),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {
       const absolute = absoluteRects[index];
-      const local = relativeRect(overlayRect, absolute);
+      const local = relativeRect(origin, absolute);
       const seed = this.seed + index * 31;
       const note = this.options.note && index === 0 ? renderAnnotation(
         this.svg,
@@ -2051,24 +2006,11 @@ var DoodleOverlay = class {
       this.svg.appendChild(group);
     }
   }
-  /**
-   * Room the overlay needs beyond the element for notes, arrows and decorations.
-   */
-  overlayMargin() {
-    const { note, arrow, decorations } = this.options;
-    if (!note && !arrow && !decorations) return 48;
-    const { text } = resolveLocalizedText(note?.text, note?.locale);
-    return Math.max(96, Math.min(240, 80 + text.length * 8));
-  }
   destroy() {
     if (this.pendingFrame != null) {
       cancelFrame(this.pendingFrame);
       this.pendingFrame = null;
     }
-    if (this.pendingRepositionFrame != null) {
-      cancelFrame(this.pendingRepositionFrame);
-      this.pendingRepositionFrame = null;
-    }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
@@ -2085,8 +2027,8 @@ var DoodleOverlay = class {
       target.removeEventListener(type, handler);
     }
     this.listeners = [];
-    if (this.svg?.parentNode) {
-      this.svg.parentNode.removeChild(this.svg);
+    if (this.svg) {
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
     instances.delete(this.element);

package/dist/react.cjs

@@ -317,6 +317,10 @@ var DEFAULT_OPTIONS = {
    */
   zIndex: null
 };
+var OVERLAY_CLASS = "doodle-ui-overlay";
+function isOverlayNode(node) {
+  return node?.classList?.contains(OVERLAY_CLASS) ?? false;
+}
 function resolveElement(target) {
   if (!target) return null;
   if (typeof target === "string") {
@@ -404,20 +408,6 @@ function isValidPosition(position) {
     "center"
   ].includes(position);
 }
-function getScrollableAncestors(element) {
-  const ancestors = [];
-  let node = element.parentElement;
-  while (node && node !== document.documentElement) {
-    const style = getComputedStyle(node);
-    const overflow = style.overflow + style.overflowY + style.overflowX;
-    if (/(auto|scroll|overlay)/.test(overflow)) {
-      ancestors.push(node);
-    }
-    node = node.parentElement;
-  }
-  ancestors.push(window);
-  return ancestors;
-}
 function resolveOverlayZIndex(element, override) {
   if (override != null) return override;
   const { zIndex, position } = getComputedStyle(element);
@@ -437,12 +427,20 @@ function resolveOverlayZIndex(element, override) {
   return null;
 }
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return;
+  const setPosition = getComputedStyle(element).position === "static";
+  if (setPosition) {
+    element.style.position = "relative";
+  }
+  element.appendChild(svg);
+  return setPosition;
+}
+function removeOverlaySvg(svg, element, clearPosition) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (clearPosition) {
+    element.style.position = "";
   }
-  parent.insertBefore(svg, element.nextSibling);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -469,7 +467,10 @@ function averageCornerRadius(element) {
 function detectBorderRadius(element) {
   const own = averageCornerRadius(element);
   if (own > 0) return own;
-  const child = element.children.length === 1 ? element.firstElementChild : null;
+  const content = Array.from(element.children).filter(
+    (node) => !isOverlayNode(node)
+  );
+  const child = content.length === 1 ? content[0] : null;
   if (!child) return 0;
   const outer = element.getBoundingClientRect();
   const inner = child.getBoundingClientRect();
@@ -500,22 +501,6 @@ function relativeRect(outer, inner) {
     radius: inner.radius
   };
 }
-function unionRects(rects, margin = 0) {
-  if (rects.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0, radius: 0 };
-  }
-  const minX = Math.min(...rects.map((r) => r.x)) - margin;
-  const minY = Math.min(...rects.map((r) => r.y)) - margin;
-  const maxX = Math.max(...rects.map((r) => r.x + r.width)) + margin;
-  const maxY = Math.max(...rects.map((r) => r.y + r.height)) + margin;
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-    radius: 0
-  };
-}
 function inflateRect(rect, amount) {
   return {
     x: rect.x - amount,
@@ -1325,19 +1310,18 @@ function placeNoteText(note, box, style, seed, options = {}) {
 }
 function createOverlaySvg(left, top, width, height) {
   const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("class", "doodle-ui-overlay");
+  svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));
   svg.setAttribute("height", String(height));
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.style.position = "fixed";
+  svg.style.position = "absolute";
   svg.style.left = `${left}px`;
   svg.style.top = `${top}px`;
   svg.style.width = `${width}px`;
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.willChange = "transform";
   return svg;
 }
 
@@ -1868,13 +1852,27 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(overlayRect, inset = 8) {
+function localBand(originLeft, inset = 8) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -overlayRect.x + inset,
+    x: -originLeft + inset,
     width: Math.max(0, width - inset * 2)
   };
 }
+function paddingBox(element) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const left = parseFloat(style.borderLeftWidth) || 0;
+  const top = parseFloat(style.borderTopWidth) || 0;
+  const right = parseFloat(style.borderRightWidth) || 0;
+  const bottom = parseFloat(style.borderBottomWidth) || 0;
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    width: Math.max(0, rect.width - left - right),
+    height: Math.max(0, rect.height - top - bottom)
+  };
+}
 var DoodleOverlay = class {
   /**
    * @param {Element} element
@@ -1886,13 +1884,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
-    this.pendingRepositionFrame = null;
-    this.basePosition = { x: 0, y: 0 };
     this.listeners = [];
-    this.onScroll = this.scheduleReposition.bind(this);
     this.onResize = this.scheduleUpdate.bind(this);
     this.onLanguageChange = this.scheduleUpdate.bind(this);
     this.childElements = [];
@@ -1900,23 +1896,22 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.setPosition = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
       this.observeChildren();
     }
-    this.mutationObserver = new MutationObserver(this.scheduleUpdate.bind(this));
+    this.mutationObserver = new MutationObserver((records) => {
+      const relevant = records.some((record) => !this.svg.contains(record.target));
+      if (relevant) this.scheduleUpdate();
+    });
     this.mutationObserver.observe(this.element, {
       childList: true,
       subtree: true,
       attributes: true
     });
-    for (const target of getScrollableAncestors(this.element)) {
-      target.addEventListener("scroll", this.onScroll, { passive: true });
-      this.listeners.push({ target, type: "scroll", handler: this.onScroll });
-    }
     window.addEventListener("resize", this.onResize, { passive: true });
     this.listeners.push({
       target: window,
@@ -1952,46 +1947,6 @@ var DoodleOverlay = class {
       this.update();
     });
   }
-  scheduleReposition() {
-    if (this.pendingFrame != null || this.pendingRepositionFrame != null) {
-      return;
-    }
-    this.pendingRepositionFrame = scheduleFrame(() => {
-      this.pendingRepositionFrame = null;
-      this.reposition();
-    });
-  }
-  /**
-   * Cheap scroll-driven path: slide the overlay to the element's new
-   * viewport position without touching its contents. Scrolling can't change
-   * an element's size, so the rects, viewBox and every hand-drawn stroke
-   * inside them are still valid - only the overlay's position needs to move.
-   *
-   * That move is a `transform`, not `left`/`top`. `left`/`top` sit in the
-   * same box-geometry pass as layout, so the browser re-checks layout on
-   * every write; `transform` is composited, so the scroll path never
-   * touches layout at all.
-   */
-  reposition() {
-    if (!this.svg || !this.element.isConnected) return;
-    const { padding, radius } = this.options;
-    const targets = this.getTargets();
-    const margin = this.overlayMargin();
-    const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
-    );
-    const overlayRect = unionRects(absoluteRects, margin);
-    const currentWidth = parseFloat(this.svg.style.width) || 0;
-    const currentHeight = parseFloat(this.svg.style.height) || 0;
-    const resized = Math.abs(overlayRect.width - currentWidth) > 0.5 || Math.abs(overlayRect.height - currentHeight) > 0.5;
-    if (resized) {
-      this.update();
-      return;
-    }
-    const dx = overlayRect.x - this.basePosition.x;
-    const dy = overlayRect.y - this.basePosition.y;
-    this.svg.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
-  }
   getTargets() {
     if (this.options.children) {
       const nodes = this.element.querySelectorAll(this.options.children);
@@ -2003,23 +1958,23 @@ var DoodleOverlay = class {
     if (!this.svg || !this.element.isConnected) return;
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
-    const margin = this.overlayMargin();
     const elapsed = now() - this.startedAt;
     const absoluteRects = targets.map(
       (target) => getElementBounds(target, padding, radius)
     );
-    const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    this.svg.setAttribute("width", String(overlayRect.width));
-    this.svg.setAttribute("height", String(overlayRect.height));
-    this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);
-    this.svg.style.left = `${overlayRect.x}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
+    const box = paddingBox(this.element);
+    const width = Math.max(1, box.width);
+    const height = Math.max(1, box.height);
+    const origin = { x: box.left, y: box.top };
+    this.svg.setAttribute("width", String(width));
+    this.svg.setAttribute("height", String(height));
+    this.svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    this.svg.style.left = "0px";
+    this.svg.style.top = "0px";
+    this.svg.style.width = `${width}px`;
+    this.svg.style.height = `${height}px`;
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2030,12 +1985,12 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(overlayRect),
+      band: localBand(origin.x),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {
       const absolute = absoluteRects[index];
-      const local = relativeRect(overlayRect, absolute);
+      const local = relativeRect(origin, absolute);
       const seed = this.seed + index * 31;
       const note = this.options.note && index === 0 ? renderAnnotation(
         this.svg,
@@ -2081,24 +2036,11 @@ var DoodleOverlay = class {
       this.svg.appendChild(group);
     }
   }
-  /**
-   * Room the overlay needs beyond the element for notes, arrows and decorations.
-   */
-  overlayMargin() {
-    const { note, arrow, decorations } = this.options;
-    if (!note && !arrow && !decorations) return 48;
-    const { text } = resolveLocalizedText(note?.text, note?.locale);
-    return Math.max(96, Math.min(240, 80 + text.length * 8));
-  }
   destroy() {
     if (this.pendingFrame != null) {
       cancelFrame(this.pendingFrame);
       this.pendingFrame = null;
     }
-    if (this.pendingRepositionFrame != null) {
-      cancelFrame(this.pendingRepositionFrame);
-      this.pendingRepositionFrame = null;
-    }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
@@ -2115,8 +2057,8 @@ var DoodleOverlay = class {
       target.removeEventListener(type, handler);
     }
     this.listeners = [];
-    if (this.svg?.parentNode) {
-      this.svg.parentNode.removeChild(this.svg);
+    if (this.svg) {
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
     instances.delete(this.element);

package/dist/react.js

@@ -300,6 +300,10 @@ var DEFAULT_OPTIONS = {
    */
   zIndex: null
 };
+var OVERLAY_CLASS = "doodle-ui-overlay";
+function isOverlayNode(node) {
+  return node?.classList?.contains(OVERLAY_CLASS) ?? false;
+}
 function resolveElement(target) {
   if (!target) return null;
   if (typeof target === "string") {
@@ -387,20 +391,6 @@ function isValidPosition(position) {
     "center"
   ].includes(position);
 }
-function getScrollableAncestors(element) {
-  const ancestors = [];
-  let node = element.parentElement;
-  while (node && node !== document.documentElement) {
-    const style = getComputedStyle(node);
-    const overflow = style.overflow + style.overflowY + style.overflowX;
-    if (/(auto|scroll|overlay)/.test(overflow)) {
-      ancestors.push(node);
-    }
-    node = node.parentElement;
-  }
-  ancestors.push(window);
-  return ancestors;
-}
 function resolveOverlayZIndex(element, override) {
   if (override != null) return override;
   const { zIndex, position } = getComputedStyle(element);
@@ -420,12 +410,20 @@ function resolveOverlayZIndex(element, override) {
   return null;
 }
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return;
+  const setPosition = getComputedStyle(element).position === "static";
+  if (setPosition) {
+    element.style.position = "relative";
+  }
+  element.appendChild(svg);
+  return setPosition;
+}
+function removeOverlaySvg(svg, element, clearPosition) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (clearPosition) {
+    element.style.position = "";
   }
-  parent.insertBefore(svg, element.nextSibling);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -452,7 +450,10 @@ function averageCornerRadius(element) {
 function detectBorderRadius(element) {
   const own = averageCornerRadius(element);
   if (own > 0) return own;
-  const child = element.children.length === 1 ? element.firstElementChild : null;
+  const content = Array.from(element.children).filter(
+    (node) => !isOverlayNode(node)
+  );
+  const child = content.length === 1 ? content[0] : null;
   if (!child) return 0;
   const outer = element.getBoundingClientRect();
   const inner = child.getBoundingClientRect();
@@ -483,22 +484,6 @@ function relativeRect(outer, inner) {
     radius: inner.radius
   };
 }
-function unionRects(rects, margin = 0) {
-  if (rects.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0, radius: 0 };
-  }
-  const minX = Math.min(...rects.map((r) => r.x)) - margin;
-  const minY = Math.min(...rects.map((r) => r.y)) - margin;
-  const maxX = Math.max(...rects.map((r) => r.x + r.width)) + margin;
-  const maxY = Math.max(...rects.map((r) => r.y + r.height)) + margin;
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-    radius: 0
-  };
-}
 function inflateRect(rect, amount) {
   return {
     x: rect.x - amount,
@@ -1308,19 +1293,18 @@ function placeNoteText(note, box, style, seed, options = {}) {
 }
 function createOverlaySvg(left, top, width, height) {
   const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("class", "doodle-ui-overlay");
+  svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));
   svg.setAttribute("height", String(height));
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.style.position = "fixed";
+  svg.style.position = "absolute";
   svg.style.left = `${left}px`;
   svg.style.top = `${top}px`;
   svg.style.width = `${width}px`;
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.willChange = "transform";
   return svg;
 }
 
@@ -1851,13 +1835,27 @@ var instances = /* @__PURE__ */ new WeakMap();
 function now() {
   return typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 }
-function localBand(overlayRect, inset = 8) {
+function localBand(originLeft, inset = 8) {
   const width = window.innerWidth || document.documentElement.clientWidth || 0;
   return {
-    x: -overlayRect.x + inset,
+    x: -originLeft + inset,
     width: Math.max(0, width - inset * 2)
   };
 }
+function paddingBox(element) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const left = parseFloat(style.borderLeftWidth) || 0;
+  const top = parseFloat(style.borderTopWidth) || 0;
+  const right = parseFloat(style.borderRightWidth) || 0;
+  const bottom = parseFloat(style.borderBottomWidth) || 0;
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    width: Math.max(0, rect.width - left - right),
+    height: Math.max(0, rect.height - top - bottom)
+  };
+}
 var DoodleOverlay = class {
   /**
    * @param {Element} element
@@ -1869,13 +1867,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
-    this.pendingRepositionFrame = null;
-    this.basePosition = { x: 0, y: 0 };
     this.listeners = [];
-    this.onScroll = this.scheduleReposition.bind(this);
     this.onResize = this.scheduleUpdate.bind(this);
     this.onLanguageChange = this.scheduleUpdate.bind(this);
     this.childElements = [];
@@ -1883,23 +1879,22 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.setPosition = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
       this.observeChildren();
     }
-    this.mutationObserver = new MutationObserver(this.scheduleUpdate.bind(this));
+    this.mutationObserver = new MutationObserver((records) => {
+      const relevant = records.some((record) => !this.svg.contains(record.target));
+      if (relevant) this.scheduleUpdate();
+    });
     this.mutationObserver.observe(this.element, {
       childList: true,
       subtree: true,
       attributes: true
     });
-    for (const target of getScrollableAncestors(this.element)) {
-      target.addEventListener("scroll", this.onScroll, { passive: true });
-      this.listeners.push({ target, type: "scroll", handler: this.onScroll });
-    }
     window.addEventListener("resize", this.onResize, { passive: true });
     this.listeners.push({
       target: window,
@@ -1935,46 +1930,6 @@ var DoodleOverlay = class {
       this.update();
     });
   }
-  scheduleReposition() {
-    if (this.pendingFrame != null || this.pendingRepositionFrame != null) {
-      return;
-    }
-    this.pendingRepositionFrame = scheduleFrame(() => {
-      this.pendingRepositionFrame = null;
-      this.reposition();
-    });
-  }
-  /**
-   * Cheap scroll-driven path: slide the overlay to the element's new
-   * viewport position without touching its contents. Scrolling can't change
-   * an element's size, so the rects, viewBox and every hand-drawn stroke
-   * inside them are still valid - only the overlay's position needs to move.
-   *
-   * That move is a `transform`, not `left`/`top`. `left`/`top` sit in the
-   * same box-geometry pass as layout, so the browser re-checks layout on
-   * every write; `transform` is composited, so the scroll path never
-   * touches layout at all.
-   */
-  reposition() {
-    if (!this.svg || !this.element.isConnected) return;
-    const { padding, radius } = this.options;
-    const targets = this.getTargets();
-    const margin = this.overlayMargin();
-    const absoluteRects = targets.map(
-      (target) => getElementBounds(target, padding, radius)
-    );
-    const overlayRect = unionRects(absoluteRects, margin);
-    const currentWidth = parseFloat(this.svg.style.width) || 0;
-    const currentHeight = parseFloat(this.svg.style.height) || 0;
-    const resized = Math.abs(overlayRect.width - currentWidth) > 0.5 || Math.abs(overlayRect.height - currentHeight) > 0.5;
-    if (resized) {
-      this.update();
-      return;
-    }
-    const dx = overlayRect.x - this.basePosition.x;
-    const dy = overlayRect.y - this.basePosition.y;
-    this.svg.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
-  }
   getTargets() {
     if (this.options.children) {
       const nodes = this.element.querySelectorAll(this.options.children);
@@ -1986,23 +1941,23 @@ var DoodleOverlay = class {
     if (!this.svg || !this.element.isConnected) return;
     const { padding, radius, color, strokeWidth, roughness, opacity } = this.options;
     const targets = this.getTargets();
-    const margin = this.overlayMargin();
     const elapsed = now() - this.startedAt;
     const absoluteRects = targets.map(
       (target) => getElementBounds(target, padding, radius)
     );
-    const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
-    this.svg.setAttribute("width", String(overlayRect.width));
-    this.svg.setAttribute("height", String(overlayRect.height));
-    this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);
-    this.svg.style.left = `${overlayRect.x}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
+    const box = paddingBox(this.element);
+    const width = Math.max(1, box.width);
+    const height = Math.max(1, box.height);
+    const origin = { x: box.left, y: box.top };
+    this.svg.setAttribute("width", String(width));
+    this.svg.setAttribute("height", String(height));
+    this.svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    this.svg.style.left = "0px";
+    this.svg.style.top = "0px";
+    this.svg.style.width = `${width}px`;
+    this.svg.style.height = `${height}px`;
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2013,12 +1968,12 @@ var DoodleOverlay = class {
     };
     const noteGroups = [];
     const noteLayout = {
-      band: localBand(overlayRect),
+      band: localBand(origin.x),
       gap: this.options.arrow ? 40 : 14
     };
     targets.forEach((target, index) => {
       const absolute = absoluteRects[index];
-      const local = relativeRect(overlayRect, absolute);
+      const local = relativeRect(origin, absolute);
       const seed = this.seed + index * 31;
       const note = this.options.note && index === 0 ? renderAnnotation(
         this.svg,
@@ -2064,24 +2019,11 @@ var DoodleOverlay = class {
       this.svg.appendChild(group);
     }
   }
-  /**
-   * Room the overlay needs beyond the element for notes, arrows and decorations.
-   */
-  overlayMargin() {
-    const { note, arrow, decorations } = this.options;
-    if (!note && !arrow && !decorations) return 48;
-    const { text } = resolveLocalizedText(note?.text, note?.locale);
-    return Math.max(96, Math.min(240, 80 + text.length * 8));
-  }
   destroy() {
     if (this.pendingFrame != null) {
       cancelFrame(this.pendingFrame);
       this.pendingFrame = null;
     }
-    if (this.pendingRepositionFrame != null) {
-      cancelFrame(this.pendingRepositionFrame);
-      this.pendingRepositionFrame = null;
-    }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
@@ -2098,8 +2040,8 @@ var DoodleOverlay = class {
       target.removeEventListener(type, handler);
     }
     this.listeners = [];
-    if (this.svg?.parentNode) {
-      this.svg.parentNode.removeChild(this.svg);
+    if (this.svg) {
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
     instances.delete(this.element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aznabee/freehand-ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Wrap any existing web element with a beautiful, responsive, hand-drawn doodle layer",
   "type": "module",
   "main": "./dist/freehand-ui.cjs",