@aznabee/freehand-ui 0.1.6 → 0.1.7

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 HTML layout or block 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 element's own styling and never blocks clicks (`pointer-events: none`).
 
 **Good for:** call-to-action buttons, feature cards, onboarding hints, playful marketing UI.
 
@@ -19,6 +19,8 @@ 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)
@@ -255,7 +257,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 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.
+- 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.
 
 ### Decorations
 
@@ -454,7 +456,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** - `ResizeObserver`, scroll listeners, and `requestAnimationFrame`
+- **Responsive** - absolutely positioned beside the element, so it tracks scroll and layout shifts for free; `ResizeObserver` covers the rest
 - **Lightweight** - zero runtime dependencies
 
 ---

package/dist/freehand-ui.cjs

@@ -399,20 +399,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);
@@ -431,13 +417,45 @@ 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;
+    return null;
   }
-  parent.insertBefore(svg, element.nextSibling);
+  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) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (!wrapper || !wrapper.parentNode) return;
+  wrapper.parentNode.replaceChild(element, wrapper);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -1325,14 +1343,13 @@ function createOverlaySvg(left, top, width, height) {
   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;
 }
 
@@ -1881,13 +1898,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.wrapper = null;
     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,7 +1910,7 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.wrapper = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
@@ -1908,10 +1923,6 @@ var DoodleOverlay = class {
       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 +1958,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);
@@ -2006,15 +1977,14 @@ var DoodleOverlay = class {
     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}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
+    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`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2090,10 +2060,6 @@ var DoodleOverlay = class {
       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,10 +2076,11 @@ 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.wrapper, this.element);
     }
     this.svg = null;
+    this.wrapper = null;
     instances.delete(this.element);
   }
 };

package/dist/freehand-ui.js

@@ -374,20 +374,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);
@@ -406,13 +392,45 @@ 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;
+    return null;
   }
-  parent.insertBefore(svg, element.nextSibling);
+  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) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (!wrapper || !wrapper.parentNode) return;
+  wrapper.parentNode.replaceChild(element, wrapper);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -1300,14 +1318,13 @@ function createOverlaySvg(left, top, width, height) {
   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;
 }
 
@@ -1856,13 +1873,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.wrapper = null;
     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,7 +1885,7 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.wrapper = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
@@ -1883,10 +1898,6 @@ var DoodleOverlay = class {
       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 +1933,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);
@@ -1981,15 +1952,14 @@ var DoodleOverlay = class {
     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}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
+    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`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2065,10 +2035,6 @@ var DoodleOverlay = class {
       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,10 +2051,11 @@ 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.wrapper, this.element);
     }
     this.svg = null;
+    this.wrapper = null;
     instances.delete(this.element);
   }
 };

package/dist/react.cjs

@@ -404,20 +404,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);
@@ -436,13 +422,45 @@ 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;
+    return null;
   }
-  parent.insertBefore(svg, element.nextSibling);
+  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) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (!wrapper || !wrapper.parentNode) return;
+  wrapper.parentNode.replaceChild(element, wrapper);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -1330,14 +1348,13 @@ function createOverlaySvg(left, top, width, height) {
   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;
 }
 
@@ -1886,13 +1903,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.wrapper = null;
     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,7 +1915,7 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.wrapper = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
@@ -1913,10 +1928,6 @@ var DoodleOverlay = class {
       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 +1963,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);
@@ -2011,15 +1982,14 @@ var DoodleOverlay = class {
     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}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
+    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`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2095,10 +2065,6 @@ var DoodleOverlay = class {
       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,10 +2081,11 @@ 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.wrapper, this.element);
     }
     this.svg = null;
+    this.wrapper = null;
     instances.delete(this.element);
   }
 };

package/dist/react.js

@@ -387,20 +387,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);
@@ -419,13 +405,45 @@ 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;
+    return null;
   }
-  parent.insertBefore(svg, element.nextSibling);
+  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) {
+  if (svg.parentNode) {
+    svg.parentNode.removeChild(svg);
+  }
+  if (!wrapper || !wrapper.parentNode) return;
+  wrapper.parentNode.replaceChild(element, wrapper);
 }
 function syncOverlayStacking(svg, element, zIndexOverride) {
   const zIndex = resolveOverlayZIndex(element, zIndexOverride);
@@ -1313,14 +1331,13 @@ function createOverlaySvg(left, top, width, height) {
   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;
 }
 
@@ -1869,13 +1886,11 @@ var DoodleOverlay = class {
     this.seed = Math.floor(Math.random() * 1e9);
     this.startedAt = now();
     this.svg = null;
+    this.wrapper = null;
     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,7 +1898,7 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    insertOverlaySvg(this.svg, this.element);
+    this.wrapper = insertOverlaySvg(this.svg, this.element);
     syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
@@ -1896,10 +1911,6 @@ var DoodleOverlay = class {
       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 +1946,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);
@@ -1994,15 +1965,14 @@ var DoodleOverlay = class {
     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}px`;
-    this.svg.style.top = `${overlayRect.y}px`;
+    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`;
-    this.svg.style.transform = "";
-    this.basePosition = { x: overlayRect.x, y: overlayRect.y };
     const strokeStyle = { color, strokeWidth, roughness, opacity };
     const noteStyle = {
       color,
@@ -2078,10 +2048,6 @@ var DoodleOverlay = class {
       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,10 +2064,11 @@ 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.wrapper, this.element);
     }
     this.svg = null;
+    this.wrapper = null;
     instances.delete(this.element);
   }
 };

package/package.json

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