@repere/react 0.2.2 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsx as g, jsxs as Q } from "react/jsx-runtime";
-import { createContext as W, useContext as Z, useMemo as w, useState as k, useEffect as B, useCallback as A, isValidElement as F, cloneElement as ee, useId as te, forwardRef as x } from "react";
+import { jsx as g, jsxs as W } from "react/jsx-runtime";
+import { createContext as Z, useContext as ee, useMemo as b, useState as I, useEffect as D, useCallback as T, isValidElement as j, cloneElement as q, useId as te, forwardRef as A } from "react";
 import { createPortal as oe } from "react-dom";
-import { motion as M } from "motion/react";
-var m = /* @__PURE__ */ ((e) => (e.TopLeft = "top-left", e.TopCenter = "top-center", e.TopRight = "top-right", e.RightCenter = "right-center", e.BottomRight = "bottom-right", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.LeftCenter = "left-center", e))(m || {});
-const ne = m.TopRight;
+import { motion as N } from "motion/react";
+var h = /* @__PURE__ */ ((e) => (e.TopLeft = "top-left", e.TopCenter = "top-center", e.TopRight = "top-right", e.RightCenter = "right-center", e.BottomRight = "bottom-right", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.LeftCenter = "left-center", e))(h || {});
+const ne = h.TopRight;
 class ie {
   state = /* @__PURE__ */ new Map();
   isDismissed(t) {
@@ -25,59 +25,285 @@ class ie {
     return Array.from(this.state.values());
   }
 }
-var f = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Scale = "scale", e.Grow = "grow", e.Shrink = "shrink", e.SlideUp = "slide-up", e.SlideDown = "slide-down", e.SlideLeft = "slide-left", e.SlideRight = "slide-right", e.None = "none", e))(f || {});
+var m = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Scale = "scale", e.Grow = "grow", e.Shrink = "shrink", e.SlideUp = "slide-up", e.SlideDown = "slide-down", e.SlideLeft = "slide-left", e.SlideRight = "slide-right", e.None = "none", e))(m || {}), P = /* @__PURE__ */ ((e) => (e.Fixed = "fixed", e.Absolute = "absolute", e))(P || {});
+function L(e, t, o, n = P.Absolute) {
+  const s = o?.x ?? 0, a = o?.y ?? 0, i = n === P.Absolute ? window.scrollY : 0, r = n === P.Absolute ? window.scrollX : 0;
+  let c = 0, l = 0, d = "0%", p = "0%";
+  switch (t) {
+    case h.TopLeft:
+      c = e.top + i, l = e.left + r, d = "0%", p = "-100%";
+      break;
+    case h.TopCenter:
+      c = e.top + i, l = e.left + r + e.width / 2, d = "-50%", p = "-100%";
+      break;
+    case h.TopRight:
+      c = e.top + i, l = e.right + r, d = "-100%", p = "-100%";
+      break;
+    case h.RightCenter:
+      c = e.top + i + e.height / 2, l = e.right + r, d = "0%", p = "-50%";
+      break;
+    case h.BottomRight:
+      c = e.bottom + i, l = e.right + r, d = "-100%", p = "0%";
+      break;
+    case h.BottomCenter:
+      c = e.bottom + i, l = e.left + r + e.width / 2, d = "-50%", p = "0%";
+      break;
+    case h.BottomLeft:
+      c = e.bottom + i, l = e.left + r, d = "0%", p = "0%";
+      break;
+    case h.LeftCenter:
+      c = e.top + i + e.height / 2, l = e.left + r, d = "-100%", p = "-50%";
+      break;
+    default:
+      c = e.top + i, l = e.right + r, d = "-100%", p = "-100%";
+      break;
+  }
+  return c += a, l += s, {
+    top: c,
+    left: l,
+    translate: { x: d, y: p }
+  };
+}
+class re {
+  tracked = /* @__PURE__ */ new Map();
+  scrollListener = null;
+  resizeListener = null;
+  resizeObserver = null;
+  mutationObserver = null;
+  updateScheduled = !1;
+  debug = !1;
+  constructor(t = !1) {
+    this.debug = t;
+  }
+  /**
+   * Subscribe to anchor point updates for an element
+   */
+  subscribe(t, o, n, s = {}) {
+    return (s.positioningStrategy ?? P.Absolute) === P.Absolute ? this.subscribeAbsolute(t, o, n, s) : this.subscribeFixed(t, o, n, s);
+  }
+  /**
+   * Subscribe with absolute positioning strategy (no tracking)
+   */
+  subscribeAbsolute(t, o, n, s) {
+    const { offset: a, zIndex: i = 9999, delay: r = 0 } = s, c = () => {
+      const l = document.querySelector(t);
+      if (!l) {
+        this.debug && console.log(
+          `[AnchorPointTracker:Absolute] Element not found: ${t}`
+        ), n(null);
+        return;
+      }
+      const d = l.getBoundingClientRect(), p = {
+        ...L(d, o, a),
+        position: "absolute",
+        zIndex: i
+      };
+      this.debug && console.log(
+        `[AnchorPointTracker:Absolute] Calculated anchor point for ${t}:`,
+        p
+      ), n(p);
+    };
+    if (r > 0) {
+      this.debug && console.log(
+        `[AnchorPointTracker:Absolute] Delaying calculation for ${t} by ${r}ms`
+      );
+      const l = setTimeout(c, r);
+      return () => clearTimeout(l);
+    } else
+      return c(), () => {
+      };
+  }
+  /**
+   * Subscribe with fixed positioning strategy (with tracking)
+   */
+  subscribeFixed(t, o, n, s) {
+    const a = t;
+    this.tracked.has(a) || this.tracked.set(a, {
+      selector: t,
+      anchorPoint: o,
+      offset: s.offset,
+      zIndex: s.zIndex ?? 9999,
+      delay: s.delay,
+      positioningStrategy: P.Fixed,
+      callbacks: /* @__PURE__ */ new Map(),
+      element: null,
+      delayTimeoutIds: /* @__PURE__ */ new Map()
+    });
+    const i = this.tracked.get(a);
+    return i ? (i.callbacks.set(n, {
+      callback: n,
+      needsInitialDelay: (s.delay ?? 0) > 0
+    }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(a, n), () => {
+      const r = this.tracked.get(a);
+      if (r) {
+        const c = r.delayTimeoutIds.get(n);
+        if (c !== void 0 && (clearTimeout(c), r.delayTimeoutIds.delete(n)), r.callbacks.delete(n), r.callbacks.size === 0) {
+          for (const [, l] of r.delayTimeoutIds)
+            clearTimeout(l);
+          r.delayTimeoutIds.clear(), this.tracked.delete(a), this.tracked.size === 0 && this.stopListening();
+        }
+      }
+    }) : () => {
+    };
+  }
+  scheduleInitialUpdate(t, o) {
+    const n = this.tracked.get(t);
+    if (!n) return;
+    const s = n.callbacks.get(o);
+    if (s)
+      if (s.needsInitialDelay && n.delay && n.delay > 0) {
+        this.debug && console.log(
+          `[AnchorPointTracker:Fixed] Delaying initial anchor point calculation for ${t} by ${n.delay}ms`
+        );
+        const a = setTimeout(() => {
+          this.debug && console.log(
+            `[AnchorPointTracker:Fixed] Calculating anchor point for ${t} after delay`
+          );
+          const i = n.callbacks.get(o);
+          i && (i.needsInitialDelay = !1), n.delayTimeoutIds.delete(o), this.updateAnchorPointForCallback(t, o);
+        }, n.delay);
+        n.delayTimeoutIds.set(o, a);
+      } else
+        this.updateAnchorPointForCallback(t, o);
+  }
+  updateAnchorPointForCallback(t, o) {
+    const n = this.tracked.get(t);
+    if (!n) return;
+    const s = document.querySelector(n.selector);
+    if (!s) {
+      this.debug && console.log(
+        `[AnchorPointTracker:Fixed] Element not found: ${n.selector}`
+      ), n.element = null, o(null);
+      return;
+    }
+    n.element = s;
+    const a = s.getBoundingClientRect(), i = {
+      ...L(
+        a,
+        n.anchorPoint,
+        n.offset
+      ),
+      position: "fixed",
+      zIndex: n.zIndex
+    };
+    this.debug && console.log(
+      `[AnchorPointTracker:Fixed] Updated anchor point for ${n.selector}:`,
+      i
+    ), o(i);
+  }
+  updateAnchorPoint(t) {
+    const o = this.tracked.get(t);
+    if (!o) return;
+    const n = document.querySelector(o.selector);
+    if (!n) {
+      this.debug && console.log(
+        `[AnchorPointTracker:Fixed] Element not found: ${o.selector}`
+      ), o.element = null;
+      for (const [i, r] of o.callbacks)
+        r.needsInitialDelay || i(null);
+      return;
+    }
+    o.element = n;
+    const s = n.getBoundingClientRect(), a = {
+      ...L(
+        s,
+        o.anchorPoint,
+        o.offset
+      ),
+      position: "fixed",
+      zIndex: o.zIndex
+    };
+    this.debug && console.log(
+      `[AnchorPointTracker:Fixed] Updated anchor point for ${o.selector}:`,
+      a
+    );
+    for (const [i, r] of o.callbacks)
+      r.needsInitialDelay || i(a);
+  }
+  scheduleUpdate = () => {
+    this.updateScheduled || (this.updateScheduled = !0, requestAnimationFrame(() => {
+      this.updateAllAnchorPointsSync(), this.updateScheduled = !1;
+    }));
+  };
+  updateAllAnchorPointsSync = () => {
+    for (const [t] of this.tracked)
+      this.updateAnchorPoint(t);
+  };
+  startListening() {
+    this.scrollListener = this.scheduleUpdate, window.addEventListener("scroll", this.scrollListener, !0), this.resizeListener = this.scheduleUpdate, window.addEventListener("resize", this.resizeListener), "ResizeObserver" in window && (this.resizeObserver = new ResizeObserver(this.scheduleUpdate)), this.mutationObserver = new MutationObserver(() => {
+      this.scheduleUpdate();
+    }), this.mutationObserver.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  stopListening() {
+    this.scrollListener && (window.removeEventListener("scroll", this.scrollListener, !0), this.scrollListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.mutationObserver?.disconnect(), this.mutationObserver = null;
+  }
+  /**
+   * Clean up all listeners and subscriptions
+   */
+  destroy() {
+    for (const [, t] of this.tracked) {
+      for (const [, o] of t.delayTimeoutIds)
+        clearTimeout(o);
+      t.delayTimeoutIds.clear();
+    }
+    this.stopListening(), this.tracked.clear();
+  }
+}
 const se = {
-  [f.SlideDown]: {
+  [m.SlideDown]: {
     initial: { y: -20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
     exit: { y: -20, opacity: 0 }
   },
-  [f.SlideUp]: {
+  [m.SlideUp]: {
     initial: { y: 20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
     exit: { y: 20, opacity: 0 }
   },
-  [f.SlideLeft]: {
+  [m.SlideLeft]: {
     initial: { x: 20, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: 20, opacity: 0 }
   },
-  [f.SlideRight]: {
+  [m.SlideRight]: {
     initial: { x: -20, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: -20, opacity: 0 }
   },
-  [f.Fade]: {
+  [m.Fade]: {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 }
   },
-  [f.Shrink]: {
+  [m.Shrink]: {
     initial: { scale: 1.1, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 0.9, opacity: 0 }
   },
-  [f.Grow]: {
+  [m.Grow]: {
     initial: { scale: 0.9, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 1.1, opacity: 0 }
   },
-  [f.Scale]: {
+  [m.Scale]: {
     initial: { scale: 0, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 0, opacity: 0 }
   },
-  [f.None]: {
+  [m.None]: {
     initial: {},
     animate: {},
     exit: {}
   }
 };
-function L(e) {
+function z(e) {
   return e ? typeof e == "string" ? { variant: e } : e : null;
 }
-function T(e, t) {
-  const o = L(e), n = L(t);
+function S(e, t) {
+  const o = z(e), n = z(t);
   return !o && !n ? null : o ? n ? {
     variant: n.variant ?? o.variant,
     duration: n.duration ?? o.duration,
@@ -85,8 +311,8 @@ function T(e, t) {
     ease: n.ease ?? o.ease
   } : o : n;
 }
-function $(e) {
-  const t = L(e);
+function B(e) {
+  const t = z(e);
   if (!t) return null;
   const o = se[t.variant];
   return o ? {
@@ -100,11 +326,11 @@ function $(e) {
     }
   } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
 }
-function re(e, t) {
+function ae(e, t) {
   const o = (i) => {
-    const s = i.match(/(-?\d+)%/);
-    return s ? parseFloat(s[1]) : 0;
-  }, n = o(e.x), r = o(e.y), a = (i = 0) => r === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${r}%)` : `translate(${n}%, calc(${r}% + ${i}px))`;
+    const r = i.match(/(-?\d+)%/);
+    return r ? parseFloat(r[1]) : 0;
+  }, n = o(e.x), s = o(e.y), a = (i = 0) => s === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${s}%)` : `translate(${n}%, calc(${s}% + ${i}px))`;
   return {
     initial: {
       ...t.initial,
@@ -120,9 +346,9 @@ function re(e, t) {
     }
   };
 }
-function ae(e, t) {
+function ce(e, t) {
   if (!e && !t) return {};
-  const o = e?.variants, n = e?.transition, r = t?.variants, a = t?.transition, i = a?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], s = Array.isArray(i) ? `cubic-bezier(${i.join(", ")})` : i;
+  const o = e?.variants, n = e?.transition, s = t?.variants, a = t?.transition, i = a?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], r = Array.isArray(i) ? `cubic-bezier(${i.join(", ")})` : i;
   return {
     // Initial state (when opening starts) - from onOpen animation
     "--repere-initial-opacity": o?.initial.opacity ?? 0,
@@ -135,20 +361,20 @@ function ae(e, t) {
     "--repere-animate-y": `${o?.animate.y ?? 0}px`,
     "--repere-animate-scale": o?.animate.scale ?? 1,
     // Exit state (when closing) - from onClose animation
-    "--repere-exit-opacity": r?.exit.opacity ?? 0,
-    "--repere-exit-x": `${r?.exit.x ?? 0}px`,
-    "--repere-exit-y": `${r?.exit.y ?? 0}px`,
-    "--repere-exit-scale": r?.exit.scale ?? 1,
+    "--repere-exit-opacity": s?.exit.opacity ?? 0,
+    "--repere-exit-x": `${s?.exit.x ?? 0}px`,
+    "--repere-exit-y": `${s?.exit.y ?? 0}px`,
+    "--repere-exit-scale": s?.exit.scale ?? 1,
     // Transition timing
     "--repere-transition-duration": `${a?.duration ?? n?.duration ?? 0.3}s`,
-    "--repere-transition-timing": s
+    "--repere-transition-timing": r
   };
 }
 function le(e, t) {
   const o = e?.transition.duration ?? 0, n = t?.transition.duration ?? 0;
   return Math.max(o, n) * 1e3;
 }
-function ce(e) {
+function de(e) {
   return new Promise((t) => setTimeout(t, e));
 }
 function pe(e, t) {
@@ -162,7 +388,7 @@ function pe(e, t) {
   }
   return !1;
 }
-class de {
+class ue {
   store;
   debug;
   constructor(t, o = {}) {
@@ -173,12 +399,12 @@ class de {
    * This supports wildcards - e.g., path="*" will match all pages
    */
   findMatchingPages(t, o) {
-    const n = t.filter((r) => typeof r.path == "function" ? r.path(o) : pe(o, r.path));
+    const n = t.filter((s) => typeof s.path == "function" ? s.path(o) : pe(o, s.path));
     return this.debug && console.log(
       "[BeaconManager] Path:",
       o,
       "Matched pages:",
-      n.map((r) => r.id).join(", ") || "none"
+      n.map((s) => s.id).join(", ") || "none"
     ), n;
   }
   /**
@@ -193,24 +419,24 @@ class de {
       "[BeaconManager] Found",
       n.length,
       "matching page(s):",
-      n.map((s) => s.id).join(", ")
+      n.map((r) => r.id).join(", ")
     );
-    const r = [], a = /* @__PURE__ */ new Set();
-    for (const s of n)
-      for (const l of s.beacons) {
-        if (a.has(l.id)) {
+    const s = [], a = /* @__PURE__ */ new Set();
+    for (const r of n)
+      for (const c of r.beacons) {
+        if (a.has(c.id)) {
           this.debug && console.warn(
-            `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${s.id}", skipping`
+            `[BeaconManager] Duplicate beacon ID "${c.id}" in page "${r.id}", skipping`
           );
           continue;
         }
-        a.add(l.id), r.push(l);
+        a.add(c.id), s.push(c);
       }
     const i = [];
-    for (const s of r)
+    for (const r of s)
       await Promise.resolve(
-        this.store.isDismissed(s.id)
-      ) ? this.debug && console.log("[BeaconManager] Beacon", s.id, "is dismissed") : i.push(s);
+        this.store.isDismissed(r.id)
+      ) ? this.debug && console.log("[BeaconManager] Beacon", r.id, "is dismissed") : i.push(r);
     return this.debug && console.log("[BeaconManager] Active beacons:", i.length), i;
   }
   /**
@@ -220,207 +446,29 @@ class de {
     return this.store;
   }
 }
-function N(e, t = m.TopRight, o = { x: 0, y: 0 }) {
-  const { x: n = 0, y: r = 0 } = o;
-  let a = 0, i = 0, s = "0", l = "0";
-  switch (t) {
-    // Top positions
-    case m.TopLeft:
-      a = e.top + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "-100%";
-      break;
-    case m.TopCenter:
-      a = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "-100%";
-      break;
-    case m.TopRight:
-      a = e.top + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "-100%";
-      break;
-    // Right positions
-    case m.RightCenter:
-      a = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, s = "0", l = "-50%";
-      break;
-    // Bottom positions
-    case m.BottomLeft:
-      a = e.bottom + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "0";
-      break;
-    case m.BottomCenter:
-      a = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "0";
-      break;
-    case m.BottomRight:
-      a = e.bottom + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "0";
-      break;
-    // Left positions
-    case m.LeftCenter:
-      a = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, s = "-100%", l = "-50%";
-      break;
-  }
-  return a += r, i += n, {
-    top: a,
-    left: i,
-    translate: { x: s, y: l }
-  };
-}
-class ue {
-  tracked = /* @__PURE__ */ new Map();
-  scrollListener = null;
-  resizeListener = null;
-  resizeObserver = null;
-  mutationObserver = null;
-  debug = !1;
-  constructor(t = !1) {
-    this.debug = t;
-  }
-  /**
-   * Subscribe to position updates for an element
-   */
-  subscribe(t, o, n, r = {}) {
-    const a = t;
-    this.tracked.has(a) || this.tracked.set(a, {
-      selector: t,
-      position: o,
-      offset: r.offset,
-      zIndex: r.zIndex ?? 9999,
-      delay: r.delay,
-      callbacks: /* @__PURE__ */ new Map(),
-      element: null,
-      delayTimeoutIds: /* @__PURE__ */ new Map()
-    });
-    const i = this.tracked.get(a);
-    return i ? (i.callbacks.set(n, {
-      callback: n,
-      needsInitialDelay: (r.delay ?? 0) > 0
-    }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(a, n), () => {
-      const s = this.tracked.get(a);
-      if (s) {
-        const l = s.delayTimeoutIds.get(n);
-        if (l !== void 0 && (clearTimeout(l), s.delayTimeoutIds.delete(n)), s.callbacks.delete(n), s.callbacks.size === 0) {
-          for (const [, c] of s.delayTimeoutIds)
-            clearTimeout(c);
-          s.delayTimeoutIds.clear(), this.tracked.delete(a), this.tracked.size === 0 && this.stopListening();
-        }
-      }
-    }) : () => {
-    };
-  }
-  scheduleInitialUpdate(t, o) {
-    const n = this.tracked.get(t);
-    if (!n) return;
-    const r = n.callbacks.get(o);
-    if (r)
-      if (r.needsInitialDelay && n.delay && n.delay > 0) {
-        this.debug && console.log(
-          `[PositionTracker] Delaying initial position calculation for ${t} by ${n.delay}ms`
-        );
-        const a = setTimeout(() => {
-          this.debug && console.log(
-            `[PositionTracker] Calculating position for ${t} after delay`
-          );
-          const i = n.callbacks.get(o);
-          i && (i.needsInitialDelay = !1), n.delayTimeoutIds.delete(o), this.updatePositionForCallback(t, o);
-        }, n.delay);
-        n.delayTimeoutIds.set(o, a);
-      } else
-        this.updatePositionForCallback(t, o);
-  }
-  updatePositionForCallback(t, o) {
-    const n = this.tracked.get(t);
-    if (!n) return;
-    const r = document.querySelector(n.selector);
-    if (!r) {
-      this.debug && console.log(`[PositionTracker] Element not found: ${n.selector}`), n.element = null, o(null);
-      return;
-    }
-    n.element = r;
-    const a = r.getBoundingClientRect(), i = {
-      ...N(
-        a,
-        n.position,
-        n.offset
-      ),
-      position: "fixed",
-      zIndex: n.zIndex
-    };
-    this.debug && console.log(
-      `[PositionTracker] Updated position for ${n.selector}:`,
-      i
-    ), o(i);
-  }
-  updatePosition(t) {
-    const o = this.tracked.get(t);
-    if (!o) return;
-    const n = document.querySelector(o.selector);
-    if (!n) {
-      this.debug && console.log(`[PositionTracker] Element not found: ${o.selector}`), o.element = null;
-      for (const [i, s] of o.callbacks)
-        s.needsInitialDelay || i(null);
-      return;
-    }
-    o.element = n;
-    const r = n.getBoundingClientRect(), a = {
-      ...N(
-        r,
-        o.position,
-        o.offset
-      ),
-      position: "fixed",
-      zIndex: o.zIndex
-    };
-    this.debug && console.log(
-      `[PositionTracker] Updated position for ${o.selector}:`,
-      a
-    );
-    for (const [i, s] of o.callbacks)
-      s.needsInitialDelay || i(a);
-  }
-  updateAllPositions = () => {
-    for (const [t] of this.tracked)
-      this.updatePosition(t);
-  };
-  startListening() {
-    this.scrollListener = this.updateAllPositions, window.addEventListener("scroll", this.scrollListener, !0), this.resizeListener = this.updateAllPositions, window.addEventListener("resize", this.resizeListener), "ResizeObserver" in window && (this.resizeObserver = new ResizeObserver(this.updateAllPositions)), this.mutationObserver = new MutationObserver(() => {
-      this.updateAllPositions();
-    }), this.mutationObserver.observe(document.body, {
-      childList: !0,
-      subtree: !0
-    });
-  }
-  stopListening() {
-    this.scrollListener && (window.removeEventListener("scroll", this.scrollListener, !0), this.scrollListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.mutationObserver?.disconnect(), this.mutationObserver = null;
-  }
-  /**
-   * Clean up all listeners and subscriptions
-   */
-  destroy() {
-    for (const [, t] of this.tracked) {
-      for (const [, o] of t.delayTimeoutIds)
-        clearTimeout(o);
-      t.delayTimeoutIds.clear();
-    }
-    this.stopListening(), this.tracked.clear();
-  }
-}
-const j = W(null);
-function I() {
-  const e = Z(j);
+const _ = Z(null);
+function $() {
+  const e = ee(_);
   if (!e)
-    throw new Error("useRepereContext must be used within a Repere provider.");
+    throw new Error("useRepereContext must be used within RepereProvider");
   return e;
 }
-function me(e, t) {
-  const o = w(() => {
-    const i = t.trigger?.animations?.onRender, s = e.trigger?.animations?.onRender;
-    return $(T(i, s));
-  }, [t.trigger?.animations, e.trigger?.animations]), n = w(() => {
-    const i = t.trigger?.animations?.onDismiss, s = e.trigger?.animations?.onDismiss;
-    return $(T(i, s));
+function ge(e, t) {
+  const o = b(() => {
+    const i = t.trigger?.animations?.onRender, r = e.trigger?.animations?.onRender;
+    return B(S(i, r));
+  }, [t.trigger?.animations, e.trigger?.animations]), n = b(() => {
+    const i = t.trigger?.animations?.onDismiss, r = e.trigger?.animations?.onDismiss;
+    return B(S(i, r));
   }, [
     t.trigger?.animations?.onDismiss,
     e.trigger?.animations?.onDismiss
-  ]), r = w(() => {
-    const i = t.popover?.animations?.onOpen, s = e.popover?.animations?.onOpen;
-    return $(T(i, s));
-  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), a = w(() => {
-    const i = t.popover?.animations?.onClose, s = e.popover?.animations?.onClose;
-    return $(T(i, s));
+  ]), s = b(() => {
+    const i = t.popover?.animations?.onOpen, r = e.popover?.animations?.onOpen;
+    return B(S(i, r));
+  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), a = b(() => {
+    const i = t.popover?.animations?.onClose, r = e.popover?.animations?.onClose;
+    return B(S(i, r));
   }, [
     t.popover?.animations?.onClose,
     e.popover?.animations?.onClose
@@ -428,311 +476,327 @@ function me(e, t) {
   return {
     triggerAnimation: o,
     triggerDismissAnimation: n,
-    popoverOpenAnimation: r,
+    popoverOpenAnimation: s,
     popoverCloseAnimation: a
   };
 }
-function ge({
+function me({
   targetSelector: e,
-  position: t,
+  anchorPoint: t,
   offset: o,
   zIndex: n = 9999,
-  delay: r,
-  enabled: a = !0,
-  debug: i = !1
+  delay: s,
+  positioningStrategy: a,
+  enabled: i = !0,
+  debug: r = !1
 }) {
-  const [s, l] = k(null), c = w(() => new ue(i), [i]);
-  return B(() => {
-    if (!a) {
+  const [c, l] = I(null), d = b(() => new re(r), [r]);
+  return D(() => {
+    if (!i) {
       l(null);
       return;
     }
-    return c.subscribe(
+    return d.subscribe(
       e,
       t,
       l,
-      { offset: o, zIndex: n, delay: r }
+      { offset: o, zIndex: n, delay: s, positioningStrategy: a }
     );
-  }, [c, e, t, o, n, r, a]), B(() => () => c.destroy(), [c]), {
-    calculatedPosition: s,
-    targetElement: s ? document.querySelector(e) : null
+  }, [
+    d,
+    e,
+    t,
+    o,
+    n,
+    s,
+    a,
+    i
+  ]), D(() => () => d.destroy(), [d]), {
+    calculatedAnchorPoint: c,
+    targetElement: c ? document.querySelector(e) : null
   };
 }
-function fe() {
-  const [e, t] = k(!1), [o, n] = k(
+function he() {
+  const [e, t] = I(!1), [o, n] = I(
     null
-  ), r = A((l) => {
-    n(l);
-  }, []), a = A(
+  ), s = T((c) => {
+    n(c);
+  }, []), a = T(
     () => o?.togglePopover(),
     [o]
-  ), i = A(
+  ), i = T(
     () => o?.showPopover(),
     [o]
-  ), s = A(
+  ), r = T(
     () => o?.hidePopover(),
     [o]
   );
-  return B(() => {
+  return D(() => {
     if (!o) return;
-    const l = (c) => {
-      t(c.newState === "open");
+    const c = (l) => {
+      t(l.newState === "open");
     };
-    return o.addEventListener("toggle", l), () => o.removeEventListener("toggle", l);
+    return o.addEventListener("toggle", c), () => o.removeEventListener("toggle", c);
   }, [o]), {
     isOpen: e,
     popoverElement: o,
-    handlePopoverRef: r,
+    handlePopoverRef: s,
     togglePopover: a,
     showPopover: i,
-    hidePopover: s
+    hidePopover: r
   };
 }
-function ve(e, t) {
-  return e ? F(e) ? e : /* @__PURE__ */ g(
+function fe(e, t) {
+  return e ? j(e) ? q(e, t) : /* @__PURE__ */ g(
     e,
     {
       beacon: t.beacon,
-      style: t.calculatedPosition,
-      position: t.position,
+      style: t.calculatedAnchorPoint,
+      anchorPoint: t.anchorPoint,
       isOpen: t.isOpen,
       onClick: t.togglePopover
     }
   ) : null;
 }
-function he(e, t) {
-  let o;
-  return F(e) ? o = e : o = /* @__PURE__ */ g(
+function ve(e, t) {
+  return j(e) ? q(e, {
+    beacon: t.beacon,
+    anchorPoint: t.anchorPoint,
+    onDismiss: t.handleDismiss,
+    onClose: t.hidePopover
+  }) : /* @__PURE__ */ g(
     e,
     {
       beacon: t.beacon,
-      position: t.position,
+      anchorPoint: t.anchorPoint,
       onDismiss: t.handleDismiss,
       onClose: t.hidePopover
     }
-  ), ee(o, {
-    // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
-    ref: t.handlePopoverRef,
-    id: t.popoverId,
-    popover: "auto"
-  });
+  );
 }
 function ye(e, t) {
-  const o = e.trigger?.position || t.trigger?.position || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, a = e.trigger?.delay ?? t.trigger?.delay, i = e.popover?.position || t.popover?.position || o, s = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
+  const o = e.trigger?.anchorPoint || t.trigger?.anchorPoint || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, s = e.trigger?.offset, a = e.trigger?.delay ?? t.trigger?.delay, i = e.trigger?.positioningStrategy ?? t.trigger?.positioningStrategy, r = e.popover?.anchorPoint || t.popover?.anchorPoint || o, c = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
   return {
-    position: o,
+    anchorPoint: o,
     zIndex: n,
-    offset: r,
+    offset: s,
     delay: a,
-    popoverPosition: i,
-    popoverOffset: s
+    positioningStrategy: i,
+    popoverAnchorPoint: r,
+    popoverOffset: c
   };
 }
-function we({
+function be({
   beacon: e,
   config: t,
   store: o,
   onDismiss: n,
-  debug: r
+  debug: s
 }) {
-  const a = te(), [i, s] = k(!1), { position: l, zIndex: c, offset: d, delay: h, popoverPosition: p, popoverOffset: v } = ye(e, t), { calculatedPosition: u, targetElement: b } = ge({
+  const a = te(), [i, r] = I(!1), {
+    anchorPoint: c,
+    zIndex: l,
+    offset: d,
+    delay: p,
+    positioningStrategy: u,
+    popoverAnchorPoint: f,
+    popoverOffset: w
+  } = ye(e, t), { calculatedAnchorPoint: v, targetElement: y } = me({
     targetSelector: e.selector,
-    position: l,
+    anchorPoint: c,
     offset: d,
-    zIndex: c,
-    delay: h,
+    zIndex: l,
+    delay: p,
+    positioningStrategy: u,
     enabled: !0,
-    debug: r
+    debug: s
   }), {
-    isOpen: C,
-    popoverElement: P,
-    handlePopoverRef: y,
-    togglePopover: R,
-    showPopover: q,
-    hidePopover: D
-  } = fe(), {
-    triggerAnimation: G,
-    triggerDismissAnimation: O,
-    popoverOpenAnimation: V,
-    popoverCloseAnimation: z
-  } = me(e, t), E = async () => {
-    s(!0), P?.hidePopover();
-    const K = le(
-      O,
-      z
+    isOpen: x,
+    popoverElement: k,
+    togglePopover: C,
+    showPopover: R,
+    hidePopover: O
+  } = he(), {
+    triggerAnimation: Y,
+    triggerDismissAnimation: E,
+    popoverOpenAnimation: H,
+    popoverCloseAnimation: F
+  } = ge(e, t), M = async () => {
+    r(!0), k?.hidePopover();
+    const Q = le(
+      E,
+      F
     );
-    await ce(K), await Promise.resolve(o.dismiss(e.id)), n();
-  }, H = {
+    await de(Q), await Promise.resolve(o.dismiss(e.id)), n();
+  }, J = {
     beaconId: e.id,
-    position: l,
-    popoverPosition: p,
-    popoverOffset: v,
-    calculatedPosition: u,
-    isOpen: C,
+    anchorPoint: c,
+    popoverAnchorPoint: f,
+    popoverOffset: w,
+    calculatedAnchorPoint: v,
+    isOpen: x,
     isDismissing: i,
-    toggle: R,
-    open: q,
-    close: D,
-    dismiss: E,
-    triggerAnimation: G,
-    triggerDismissAnimation: O,
-    popoverOpenAnimation: V,
-    popoverCloseAnimation: z,
+    toggle: C,
+    open: R,
+    close: O,
+    dismiss: M,
+    triggerAnimation: Y,
+    triggerDismissAnimation: E,
+    popoverOpenAnimation: H,
+    popoverCloseAnimation: F,
     popoverId: a
-  }, J = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
-  return !u || !b ? (r && console.warn(
-    `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!b}`
-  ), null) : S ? /* @__PURE__ */ Q(j.Provider, { value: H, children: [
-    ve(J, {
+  }, K = e.trigger?.component || t.trigger?.component, U = e.popover.component || t.popover?.component;
+  return !v || !y ? (s && console.warn(
+    `[Repere] ${e.id} waiting for target element: anchor=${!!v}, element=${!!y}`
+  ), null) : U ? /* @__PURE__ */ W(_.Provider, { value: J, children: [
+    fe(K, {
       beacon: e,
-      calculatedPosition: u,
-      position: l,
-      isOpen: C,
-      togglePopover: R
+      calculatedAnchorPoint: v,
+      anchorPoint: c,
+      isOpen: x,
+      togglePopover: C
     }),
-    he(S, {
+    ve(U, {
       beacon: e,
-      position: l,
-      handleDismiss: E,
-      hidePopover: D,
-      handlePopoverRef: y,
-      popoverId: a
+      anchorPoint: c,
+      handleDismiss: M,
+      hidePopover: O
     })
-  ] }) : (r && console.warn(
+  ] }) : (s && console.warn(
     "[Repere] No popover component provided for beacon:",
     e.id
   ), null);
 }
-function $e({
+function Se({
   config: e,
   currentPath: t,
   enabled: o = !0,
   debug: n = !1
 }) {
-  const r = w(
+  const s = b(
     () => e.store || new ie(),
     [e.store]
-  ), a = w(
-    () => new de(r, { debug: n }),
-    [r, n]
-  ), [i, s] = k([]), [l, c] = k(
+  ), a = b(
+    () => new ue(s, { debug: n }),
+    [s, n]
+  ), [i, r] = I([]), [c, l] = I(
     /* @__PURE__ */ new Set()
   );
-  B(() => {
+  D(() => {
     if (!o) {
-      s([]), c(/* @__PURE__ */ new Set());
+      r([]), l(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const v = await a.getActiveBeacons(
+      const f = await a.getActiveBeacons(
         e.pages,
         t
       );
-      s(v);
+      r(f);
     })();
   }, [a, e.pages, t, o]);
-  const d = (p) => {
-    c((v) => /* @__PURE__ */ new Set([...v, p]));
-  }, h = i.filter(
-    (p) => !l.has(p.id)
+  const d = (u) => {
+    l((f) => /* @__PURE__ */ new Set([...f, u]));
+  }, p = i.filter(
+    (u) => !c.has(u.id)
   );
-  return h.length === 0 ? null : oe(
-    h.map((p) => /* @__PURE__ */ g(
-      we,
+  return p.length === 0 ? null : oe(
+    p.map((u) => /* @__PURE__ */ g(
+      be,
       {
-        beacon: p,
+        beacon: u,
         config: e,
-        store: r,
+        store: s,
         debug: n,
-        onDismiss: () => d(p.id)
+        onDismiss: () => d(u.id)
       },
-      p.id
+      u.id
     )),
     document.body
   );
 }
-const X = x(
-  ({
-    children: e,
-    style: t,
-    popover: o = "auto",
-    disableAnimation: n,
+const xe = A(
+  function({
+    children: t,
+    style: o,
+    popover: n = "auto",
+    disableAnimation: s,
     // Destructure and discard internal props so they don't spread to DOM
-    beacon: r,
-    position: a,
-    onDismiss: i,
-    onClose: s,
+    beacon: a,
+    anchorPoint: i,
+    onDismiss: r,
+    onClose: c,
     ...l
-  }, c) => {
+  }, d) {
     const {
-      beaconId: d,
-      popoverOpenAnimation: h,
-      popoverCloseAnimation: p,
-      popoverPosition: v,
-      popoverOffset: u
-    } = I(), b = A(
-      (y) => {
-        typeof c == "function" ? c(y) : c && (c.current = y);
+      beaconId: p,
+      popoverId: u,
+      popoverOpenAnimation: f,
+      popoverCloseAnimation: w,
+      popoverAnchorPoint: v,
+      popoverOffset: y
+    } = $(), x = T(
+      (R) => {
+        typeof d == "function" ? d(R) : d && (d.current = R);
       },
-      [c]
-    ), P = {
-      positionAnchor: d ? `--repere-trigger-${d}` : void 0,
-      ...u && {
-        marginLeft: u.x || 0,
-        marginTop: u.y || 0
+      [d]
+    ), C = {
+      positionAnchor: p ? `--repere-trigger-${p}` : void 0,
+      ...y && {
+        marginLeft: y.x || 0,
+        marginTop: y.y || 0
       },
-      ...ae(h, p),
-      ...t
+      ...ce(f, w),
+      ...o
     };
     return /* @__PURE__ */ g(
       "div",
       {
-        ref: b,
+        ref: x,
+        id: u,
         role: "dialog",
-        "aria-labelledby": `repere-popover-${d}`,
+        "aria-labelledby": `repere-popover-${p}`,
         "data-repere-popover": "",
-        "data-position": v,
-        popover: o,
+        "data-anchor-point": v,
+        popover: n,
         ...l,
-        style: P,
-        children: e
+        style: C,
+        children: t
       }
     );
   }
-);
-X.displayName = "ReperePopover";
-const be = x(
+), Pe = A(
   ({
     children: e = "Got it",
     onClick: t,
     as: o,
     ...n
-  }, r) => {
-    const a = I(), i = a?.dismiss || (() => {
-    }), s = a?.popoverId;
+  }, s) => {
+    const a = $(), i = a?.dismiss || (() => {
+    }), r = a?.popoverId;
     return /* @__PURE__ */ g(
       o || "button",
       {
-        ref: r,
+        ref: s,
         onClick: (d) => {
           i(), t?.(d);
         },
-        popovertarget: s,
+        popovertarget: r,
         popovertargetaction: "hide",
         ...n,
         children: e
       }
     );
   }
-), xe = Object.assign(be, {
+), Ae = Object.assign(Pe, {
   displayName: "ReperePopover.AcknowledgeButton"
-}), Y = x(({ children: e = "×", ...t }, o) => {
-  const r = I()?.popoverId;
+}), G = A(({ children: e = "×", ...t }, o) => {
+  const s = $()?.popoverId;
   return /* @__PURE__ */ g(
     "button",
     {
       ref: o,
-      popovertarget: r,
+      popovertarget: s,
       popovertargetaction: "hide",
       "aria-label": "Close",
       ...t,
@@ -740,99 +804,100 @@ const be = x(
     }
   );
 });
-Y.displayName = "ReperePopover.CloseButton";
-const U = x(
+G.displayName = "ReperePopover.CloseButton";
+const V = A(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-U.displayName = "ReperePopover.Content";
-const _ = x(
+V.displayName = "ReperePopover.Content";
+const X = A(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-_.displayName = "ReperePopover.Footer";
-const Pe = x(
+X.displayName = "ReperePopover.Footer";
+const we = A(
   ({ children: e, as: t, ...o }, n) => {
-    const a = I()?.beaconId || "unknown";
+    const a = $()?.beaconId || "unknown";
     return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${a}`, ...o, children: e });
   }
-), ke = Object.assign(Pe, {
+), ke = Object.assign(we, {
   displayName: "ReperePopover.Title"
-}), Be = Object.assign(X, {
+}), Be = Object.assign(xe, {
   Title: ke,
-  Content: U,
-  Footer: _,
-  AcknowledgeButton: xe,
-  CloseButton: Y
-}), Ce = x(
+  Content: V,
+  Footer: X,
+  AcknowledgeButton: Ae,
+  CloseButton: G
+}), Ce = A(
   ({
     children: e,
     as: t,
     style: o,
     disableAnimation: n,
-    ...r
+    ...s
   }, a) => {
     const {
-      calculatedPosition: i,
-      beaconId: s,
-      triggerAnimation: l,
-      triggerDismissAnimation: c,
+      calculatedAnchorPoint: i,
+      beaconId: r,
+      triggerAnimation: c,
+      triggerDismissAnimation: l,
       isDismissing: d,
-      popoverId: h
-    } = I(), p = t || "button", v = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
+      popoverId: p
+    } = $(), u = t || "button", f = b(() => !t || t === "button" ? N.button : N.create(u), [t, u]);
     if (!i) return null;
-    const u = {
+    const w = {
       position: i.position,
       top: i.top,
       left: i.left,
       zIndex: i.zIndex,
       pointerEvents: "auto",
       cursor: "pointer",
-      anchorName: `--repere-trigger-${s}`
-    }, b = o ? { ...u, ...o } : u, C = !n && (l || c), P = {
+      anchorName: `--repere-trigger-${r}`
+    }, v = o ? { ...w, ...o } : w, y = !n && (c || l), x = {
       ref: a,
-      popovertarget: h,
-      "aria-label": `Beacon trigger for ${s}`,
+      popovertarget: p,
+      "aria-label": `Beacon trigger for ${r}`,
       "data-repere-trigger": "",
-      ...r
+      ...s
     };
-    if (C) {
-      const y = d && c ? c : l;
-      if (!y) return null;
-      const R = re(
+    if (y) {
+      const k = d && l ? l : c;
+      if (!k) return null;
+      const C = ae(
         i.translate,
-        y.variants
+        k.variants
       );
       return /* @__PURE__ */ g(
-        v,
+        f,
         {
           initial: "initial",
           animate: d ? "exit" : "animate",
-          variants: R,
-          transition: y.transition,
-          ...P,
-          style: b,
+          variants: C,
+          transition: k.transition,
+          ...x,
+          style: v,
           children: e
         }
       );
     }
     return /* @__PURE__ */ g(
-      p,
+      u,
       {
-        ...P,
+        ...x,
         style: {
-          ...b,
+          ...v,
           translate: `${i.translate.x} ${i.translate.y}`
         },
         children: e
       }
     );
   }
-), Le = Object.assign(Ce, {
+), De = Object.assign(Ce, {
   displayName: "RepereTrigger"
 });
 export {
-  f as Animation,
-  $e as Beacons,
-  m as Position,
+  h as AnchorPoint,
+  m as Animation,
+  Se as Beacons,
+  P as PositioningStrategy,
   Be as ReperePopover,
-  Le as RepereTrigger
+  De as RepereTrigger
 };