@aznabee/freehand-ui 0.1.7 → 0.1.8

package/README.md

@@ -6,7 +6,7 @@ Wrap any existing web element with a beautiful, responsive, hand-drawn doodle la
 
 ## What it does
 
-`freehand-ui` adds a subtle SVG overlay on top of your UI - thin pen strokes, handwritten notes, arrows, and small decorations. It does not change your element's own styling and never blocks clicks (`pointer-events: none`).
+`freehand-ui` adds a subtle SVG overlay on top of your UI - thin pen strokes, handwritten notes, arrows, and small decorations. It does **not** change your HTML layout or block clicks (`pointer-events: none`).
 
 **Good for:** call-to-action buttons, feature cards, onboarding hints, playful marketing UI.
 
@@ -19,8 +19,6 @@ Wrap any existing web element with a beautiful, responsive, hand-drawn doodle la
 | **Localised**   | Notes in the visitor's own language, right-to-left included          |
 | **Responsive**  | Stays aligned on resize, scroll, and reflow                          |
 
-**DOM note:** the element is wrapped in a plain positioning `<div>` so the overlay can be mounted beside it (last child, so it paints on top) - the wrapped element keeps its own display and, in a flex/grid parent, its own placement, but a selector depending on it being a *direct* child of its original parent (`.parent > .card`, `:nth-child`) will no longer match. The overlay is also clipped by an `overflow: hidden` ancestor, since it no longer escapes the page via `position: fixed`.
-
 **Live on [Aznabee.com](https://aznabee.com)** - see it in production on the real product.
 
 ## ![Basic hand-drawn border around a card](docs/images/basic.png)
@@ -257,7 +255,7 @@ A `dotted` arrow spends its dash pattern on the dots, and one pattern cannot bot
 Notes:
 
 - **`prefers-reduced-motion: reduce` turns both gestures off** and leaves the arrow fully drawn.
-- The overlay moves with the element for free through ordinary layout - scrolling, a sibling loading in above it - and is only rebuilt when the element's own size actually changes. Animations are placed by how long the overlay has been on the page rather than restarted, so repositioning never replays a draw or jolts a lean mid-cycle.
+- The overlay is rebuilt on every scroll and resize. Animations are placed by how long the overlay has been on the page rather than restarted, so scrolling never replays a draw or jolts a lean mid-cycle.
 
 ### Decorations
 
@@ -456,7 +454,7 @@ Then open:
 - **Framework agnostic** - plain JavaScript at the core; React is an optional entry point
 - **SVG based** - hand-drawn paths, not CSS borders
 - **Non-invasive** - `pointer-events: none`, no layout changes
-- **Responsive** - absolutely positioned beside the element, so it tracks scroll and layout shifts for free; `ResizeObserver` covers the rest
+- **Responsive** - `ResizeObserver`, scroll listeners, and `requestAnimationFrame`
 - **Lightweight** - zero runtime dependencies
 
 ---

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") {
@@ -417,45 +421,21 @@ function resolveOverlayZIndex(element, override) {
   }
   return null;
 }
-var ITEM_PLACEMENT_PROPERTIES = [
-  "order",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "alignSelf",
-  "justifySelf",
-  "gridColumn",
-  "gridRow",
-  "gridArea"
-];
-function isInlineDisplay(computed) {
-  return computed.display.startsWith("inline");
-}
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return null;
-  }
-  const wrapper = document.createElement("div");
-  wrapper.style.position = "relative";
-  const computed = getComputedStyle(element);
-  wrapper.style.display = isInlineDisplay(computed) ? "inline-block" : "block";
-  for (const property of ITEM_PLACEMENT_PROPERTIES) {
-    const value = computed[property];
-    if (value) wrapper.style[property] = value;
-  }
-  parent.replaceChild(wrapper, element);
-  wrapper.appendChild(element);
-  wrapper.appendChild(svg);
-  return wrapper;
-}
-function removeOverlaySvg(svg, wrapper, element) {
+  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 (!wrapper || !wrapper.parentNode) return;
-  wrapper.parentNode.replaceChild(element, wrapper);
+  if (clearPosition) {
+    element.style.position = "";
+  }
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -482,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();
@@ -513,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,
@@ -1338,7 +1305,7 @@ 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));
@@ -1880,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
@@ -1898,7 +1879,7 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
-    this.wrapper = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
@@ -1910,14 +1891,17 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    this.wrapper = 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,
@@ -1969,22 +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);
-    const origin = this.wrapper ? this.wrapper.getBoundingClientRect() : { left: 0, top: 0 };
-    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 - origin.left}px`;
-    this.svg.style.top = `${overlayRect.y - origin.top}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
+    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,
@@ -1995,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,
@@ -2046,15 +2031,6 @@ 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);
@@ -2077,10 +2053,9 @@ var DoodleOverlay = class {
     }
     this.listeners = [];
     if (this.svg) {
-      removeOverlaySvg(this.svg, this.wrapper, this.element);
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
-    this.wrapper = 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") {
@@ -392,45 +396,21 @@ function resolveOverlayZIndex(element, override) {
   }
   return null;
 }
-var ITEM_PLACEMENT_PROPERTIES = [
-  "order",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "alignSelf",
-  "justifySelf",
-  "gridColumn",
-  "gridRow",
-  "gridArea"
-];
-function isInlineDisplay(computed) {
-  return computed.display.startsWith("inline");
-}
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return null;
-  }
-  const wrapper = document.createElement("div");
-  wrapper.style.position = "relative";
-  const computed = getComputedStyle(element);
-  wrapper.style.display = isInlineDisplay(computed) ? "inline-block" : "block";
-  for (const property of ITEM_PLACEMENT_PROPERTIES) {
-    const value = computed[property];
-    if (value) wrapper.style[property] = value;
-  }
-  parent.replaceChild(wrapper, element);
-  wrapper.appendChild(element);
-  wrapper.appendChild(svg);
-  return wrapper;
-}
-function removeOverlaySvg(svg, wrapper, element) {
+  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 (!wrapper || !wrapper.parentNode) return;
-  wrapper.parentNode.replaceChild(element, wrapper);
+  if (clearPosition) {
+    element.style.position = "";
+  }
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -457,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();
@@ -488,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,
@@ -1313,7 +1280,7 @@ 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));
@@ -1855,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
@@ -1873,7 +1854,7 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
-    this.wrapper = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
@@ -1885,14 +1866,17 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    this.wrapper = 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,
@@ -1944,22 +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);
-    const origin = this.wrapper ? this.wrapper.getBoundingClientRect() : { left: 0, top: 0 };
-    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 - origin.left}px`;
-    this.svg.style.top = `${overlayRect.y - origin.top}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
+    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,
@@ -1970,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,
@@ -2021,15 +2006,6 @@ 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);
@@ -2052,10 +2028,9 @@ var DoodleOverlay = class {
     }
     this.listeners = [];
     if (this.svg) {
-      removeOverlaySvg(this.svg, this.wrapper, this.element);
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
-    this.wrapper = 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") {
@@ -422,45 +426,21 @@ function resolveOverlayZIndex(element, override) {
   }
   return null;
 }
-var ITEM_PLACEMENT_PROPERTIES = [
-  "order",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "alignSelf",
-  "justifySelf",
-  "gridColumn",
-  "gridRow",
-  "gridArea"
-];
-function isInlineDisplay(computed) {
-  return computed.display.startsWith("inline");
-}
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return null;
-  }
-  const wrapper = document.createElement("div");
-  wrapper.style.position = "relative";
-  const computed = getComputedStyle(element);
-  wrapper.style.display = isInlineDisplay(computed) ? "inline-block" : "block";
-  for (const property of ITEM_PLACEMENT_PROPERTIES) {
-    const value = computed[property];
-    if (value) wrapper.style[property] = value;
-  }
-  parent.replaceChild(wrapper, element);
-  wrapper.appendChild(element);
-  wrapper.appendChild(svg);
-  return wrapper;
-}
-function removeOverlaySvg(svg, wrapper, element) {
+  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 (!wrapper || !wrapper.parentNode) return;
-  wrapper.parentNode.replaceChild(element, wrapper);
+  if (clearPosition) {
+    element.style.position = "";
+  }
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -487,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();
@@ -518,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,
@@ -1343,7 +1310,7 @@ 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));
@@ -1885,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
@@ -1903,7 +1884,7 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
-    this.wrapper = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
@@ -1915,14 +1896,17 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    this.wrapper = 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,
@@ -1974,22 +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);
-    const origin = this.wrapper ? this.wrapper.getBoundingClientRect() : { left: 0, top: 0 };
-    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 - origin.left}px`;
-    this.svg.style.top = `${overlayRect.y - origin.top}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
+    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 +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,
@@ -2051,15 +2036,6 @@ 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);
@@ -2082,10 +2058,9 @@ var DoodleOverlay = class {
     }
     this.listeners = [];
     if (this.svg) {
-      removeOverlaySvg(this.svg, this.wrapper, this.element);
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
-    this.wrapper = 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") {
@@ -405,45 +409,21 @@ function resolveOverlayZIndex(element, override) {
   }
   return null;
 }
-var ITEM_PLACEMENT_PROPERTIES = [
-  "order",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "alignSelf",
-  "justifySelf",
-  "gridColumn",
-  "gridRow",
-  "gridArea"
-];
-function isInlineDisplay(computed) {
-  return computed.display.startsWith("inline");
-}
 function insertOverlaySvg(svg, element) {
-  const parent = element.parentNode;
-  if (!parent) {
-    document.body.appendChild(svg);
-    return null;
-  }
-  const wrapper = document.createElement("div");
-  wrapper.style.position = "relative";
-  const computed = getComputedStyle(element);
-  wrapper.style.display = isInlineDisplay(computed) ? "inline-block" : "block";
-  for (const property of ITEM_PLACEMENT_PROPERTIES) {
-    const value = computed[property];
-    if (value) wrapper.style[property] = value;
-  }
-  parent.replaceChild(wrapper, element);
-  wrapper.appendChild(element);
-  wrapper.appendChild(svg);
-  return wrapper;
-}
-function removeOverlaySvg(svg, wrapper, element) {
+  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 (!wrapper || !wrapper.parentNode) return;
-  wrapper.parentNode.replaceChild(element, wrapper);
+  if (clearPosition) {
+    element.style.position = "";
+  }
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -470,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();
@@ -501,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,
@@ -1326,7 +1293,7 @@ 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));
@@ -1868,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
@@ -1886,7 +1867,7 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
-    this.wrapper = null;
+    this.setPosition = false;
     this.resizeObserver = null;
     this.mutationObserver = null;
     this.pendingFrame = null;
@@ -1898,14 +1879,17 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    this.wrapper = 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,
@@ -1957,22 +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);
-    const origin = this.wrapper ? this.wrapper.getBoundingClientRect() : { left: 0, top: 0 };
-    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 - origin.left}px`;
-    this.svg.style.top = `${overlayRect.y - origin.top}px`;
-    this.svg.style.width = `${overlayRect.width}px`;
-    this.svg.style.height = `${overlayRect.height}px`;
+    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,
@@ -1983,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,
@@ -2034,15 +2019,6 @@ 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);
@@ -2065,10 +2041,9 @@ var DoodleOverlay = class {
     }
     this.listeners = [];
     if (this.svg) {
-      removeOverlaySvg(this.svg, this.wrapper, this.element);
+      removeOverlaySvg(this.svg, this.element, this.setPosition);
     }
     this.svg = null;
-    this.wrapper = null;
     instances.delete(this.element);
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aznabee/freehand-ui",
-  "version": "0.1.7",
+  "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",