@repere/react 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as g, jsxs as K } from "react/jsx-runtime";
-import { createContext as Q, useContext as W, useMemo as w, useState as C, useEffect as L, useCallback as A, isValidElement as N, cloneElement as Z, useId as ee, forwardRef as b } from "react";
-import { createPortal as te } from "react-dom";
+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 { 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 oe = m.TopRight;
-class ne {
+const ne = m.TopRight;
+class ie {
   state = /* @__PURE__ */ new Map();
   isDismissed(t) {
     return this.state.get(t)?.isDismissed ?? !1;
@@ -25,70 +25,70 @@ class ne {
     return Array.from(this.state.values());
   }
 }
-var v = /* @__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))(v || {});
-const ie = {
-  [v.SlideDown]: {
+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 || {});
+const se = {
+  [f.SlideDown]: {
     initial: { y: -20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
     exit: { y: -20, opacity: 0 }
   },
-  [v.SlideUp]: {
+  [f.SlideUp]: {
     initial: { y: 20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
     exit: { y: 20, opacity: 0 }
   },
-  [v.SlideLeft]: {
+  [f.SlideLeft]: {
     initial: { x: 20, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: 20, opacity: 0 }
   },
-  [v.SlideRight]: {
+  [f.SlideRight]: {
     initial: { x: -20, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: -20, opacity: 0 }
   },
-  [v.Fade]: {
+  [f.Fade]: {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 }
   },
-  [v.Shrink]: {
+  [f.Shrink]: {
     initial: { scale: 1.1, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 0.9, opacity: 0 }
   },
-  [v.Grow]: {
+  [f.Grow]: {
     initial: { scale: 0.9, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 1.1, opacity: 0 }
   },
-  [v.Scale]: {
+  [f.Scale]: {
     initial: { scale: 0, opacity: 0 },
     animate: { scale: 1, opacity: 1 },
     exit: { scale: 0, opacity: 0 }
   },
-  [v.None]: {
+  [f.None]: {
     initial: {},
     animate: {},
     exit: {}
   }
 };
-function B(e) {
+function L(e) {
   return e ? typeof e == "string" ? { variant: e } : e : null;
 }
 function T(e, t) {
-  const o = B(e), i = B(t);
-  return !o && !i ? null : o ? i ? {
-    variant: i.variant ?? o.variant,
-    duration: i.duration ?? o.duration,
-    delay: i.delay ?? o.delay,
-    ease: i.ease ?? o.ease
-  } : o : i;
+  const o = L(e), n = L(t);
+  return !o && !n ? null : o ? n ? {
+    variant: n.variant ?? o.variant,
+    duration: n.duration ?? o.duration,
+    delay: n.delay ?? o.delay,
+    ease: n.ease ?? o.ease
+  } : o : n;
 }
 function $(e) {
-  const t = B(e);
+  const t = L(e);
   if (!t) return null;
-  const o = ie[t.variant];
+  const o = se[t.variant];
   return o ? {
     variants: o,
     transition: {
@@ -100,29 +100,29 @@ function $(e) {
     }
   } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
 }
-function se(e, t) {
-  const o = (n) => {
-    const a = n.match(/(-?\d+)%/);
-    return a ? parseFloat(a[1]) : 0;
-  }, i = o(e.x), r = o(e.y), s = (n = 0) => r === 0 && n === 0 ? `translate(${i}%, 0)` : n === 0 ? `translate(${i}%, ${r}%)` : `translate(${i}%, calc(${r}% + ${n}px))`;
+function re(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))`;
   return {
     initial: {
       ...t.initial,
-      transform: s(t.initial.y || 0)
+      transform: a(t.initial.y || 0)
     },
     animate: {
       ...t.animate,
-      transform: s(t.animate.y || 0)
+      transform: a(t.animate.y || 0)
     },
     exit: {
       ...t.exit,
-      transform: s(t.exit.y || 0)
+      transform: a(t.exit.y || 0)
     }
   };
 }
-function re(e, t) {
+function ae(e, t) {
   if (!e && !t) return {};
-  const o = e?.variants, i = e?.transition, r = t?.variants, s = t?.transition, n = s?.ease ?? i?.ease ?? [0.4, 0, 0.2, 1], a = Array.isArray(n) ? `cubic-bezier(${n.join(", ")})` : n;
+  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;
   return {
     // Initial state (when opening starts) - from onOpen animation
     "--repere-initial-opacity": o?.initial.opacity ?? 0,
@@ -140,18 +140,18 @@ function re(e, t) {
     "--repere-exit-y": `${r?.exit.y ?? 0}px`,
     "--repere-exit-scale": r?.exit.scale ?? 1,
     // Transition timing
-    "--repere-transition-duration": `${s?.duration ?? i?.duration ?? 0.3}s`,
-    "--repere-transition-timing": a
+    "--repere-transition-duration": `${a?.duration ?? n?.duration ?? 0.3}s`,
+    "--repere-transition-timing": s
   };
 }
-function ae(e, t) {
-  const o = e?.transition.duration ?? 0, i = t?.transition.duration ?? 0;
-  return Math.max(o, i) * 1e3;
+function le(e, t) {
+  const o = e?.transition.duration ?? 0, n = t?.transition.duration ?? 0;
+  return Math.max(o, n) * 1e3;
 }
-function le(e) {
+function ce(e) {
   return new Promise((t) => setTimeout(t, e));
 }
-function ce(e, t) {
+function pe(e, t) {
   if (t instanceof RegExp)
     return t.test(e);
   if (t === e)
@@ -162,7 +162,7 @@ function ce(e, t) {
   }
   return !1;
 }
-class pe {
+class de {
   store;
   debug;
   constructor(t, o = {}) {
@@ -173,45 +173,45 @@ class pe {
    * This supports wildcards - e.g., path="*" will match all pages
    */
   findMatchingPages(t, o) {
-    const i = t.filter((r) => typeof r.path == "function" ? r.path(o) : ce(o, r.path));
+    const n = t.filter((r) => typeof r.path == "function" ? r.path(o) : pe(o, r.path));
     return this.debug && console.log(
       "[BeaconManager] Path:",
       o,
       "Matched pages:",
-      i.map((r) => r.id).join(", ") || "none"
-    ), i;
+      n.map((r) => r.id).join(", ") || "none"
+    ), n;
   }
   /**
    * Get all active (non-dismissed) beacons for the current path
    * Includes beacons from all matching pages (supports wildcards)
    */
   async getActiveBeacons(t, o) {
-    const i = this.findMatchingPages(t, o);
-    if (i.length === 0)
+    const n = this.findMatchingPages(t, o);
+    if (n.length === 0)
       return this.debug && console.log("[BeaconManager] No matching pages found"), [];
     this.debug && console.log(
       "[BeaconManager] Found",
-      i.length,
+      n.length,
       "matching page(s):",
-      i.map((a) => a.id).join(", ")
+      n.map((s) => s.id).join(", ")
     );
-    const r = [], s = /* @__PURE__ */ new Set();
-    for (const a of i)
-      for (const l of a.beacons) {
-        if (s.has(l.id)) {
+    const r = [], a = /* @__PURE__ */ new Set();
+    for (const s of n)
+      for (const l of s.beacons) {
+        if (a.has(l.id)) {
           this.debug && console.warn(
-            `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${a.id}", skipping`
+            `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${s.id}", skipping`
           );
           continue;
         }
-        s.add(l.id), r.push(l);
+        a.add(l.id), r.push(l);
       }
-    const n = [];
-    for (const a of r)
+    const i = [];
+    for (const s of r)
       await Promise.resolve(
-        this.store.isDismissed(a.id)
-      ) ? this.debug && console.log("[BeaconManager] Beacon", a.id, "is dismissed") : n.push(a);
-    return this.debug && console.log("[BeaconManager] Active beacons:", n.length), n;
+        this.store.isDismissed(s.id)
+      ) ? this.debug && console.log("[BeaconManager] Beacon", s.id, "is dismissed") : i.push(s);
+    return this.debug && console.log("[BeaconManager] Active beacons:", i.length), i;
   }
   /**
    * Get the store instance
@@ -220,43 +220,43 @@ class pe {
     return this.store;
   }
 }
-function de(e, t = m.TopRight, o = { x: 0, y: 0 }) {
-  const { x: i = 0, y: r = 0 } = o;
-  let s = 0, n = 0, a = "0", l = "0";
+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:
-      s = e.top + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "-100%";
       break;
     case m.TopCenter:
-      s = e.top + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "-100%";
       break;
     case m.TopRight:
-      s = e.top + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "-100%";
       break;
     // Right positions
     case m.RightCenter:
-      s = e.top + window.scrollY + e.height / 2, n = e.right + window.scrollX, a = "0", l = "-50%";
+      a = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, s = "0", l = "-50%";
       break;
     // Bottom positions
     case m.BottomLeft:
-      s = e.bottom + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "0";
       break;
     case m.BottomCenter:
-      s = e.bottom + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "0";
       break;
     case m.BottomRight:
-      s = e.bottom + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "0";
       break;
     // Left positions
     case m.LeftCenter:
-      s = e.top + window.scrollY + e.height / 2, n = e.left + window.scrollX, a = "-100%", l = "-50%";
+      a = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, s = "-100%", l = "-50%";
       break;
   }
-  return s += r, n += i, {
-    top: s,
-    left: n,
-    translate: { x: a, y: l }
+  return a += r, i += n, {
+    top: a,
+    left: i,
+    translate: { x: s, y: l }
   };
 }
 class ue {
@@ -272,45 +272,91 @@ class ue {
   /**
    * Subscribe to position updates for an element
    */
-  subscribe(t, o, i, r = {}) {
-    const s = t;
-    return this.tracked.has(s) || this.tracked.set(s, {
+  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 Set(),
+      callbacks: /* @__PURE__ */ new Map(),
       element: null,
-      hasInitialUpdate: !1
-    }), this.tracked.get(s)?.callbacks.add(i), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(s), () => {
-      const n = this.tracked.get(s);
-      n && (n.callbacks.delete(i), n.callbacks.size === 0 && (n.delayTimeoutId !== void 0 && (clearTimeout(n.delayTimeoutId), n.delayTimeoutId = void 0), this.tracked.delete(s), this.tracked.size === 0 && this.stopListening()));
+      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) {
-    const o = this.tracked.get(t);
-    o && (!o.hasInitialUpdate && o.delay && o.delay > 0 ? (o.hasInitialUpdate = !0, this.debug && console.log(
-      `[PositionTracker] Delaying initial position calculation for ${t} by ${o.delay}ms`
-    ), o.delayTimeoutId = setTimeout(() => {
-      this.debug && console.log(
-        `[PositionTracker] Calculating position for ${t} after delay`
-      ), o.delayTimeoutId !== void 0 && (o.delayTimeoutId = void 0), this.updatePosition(t);
-    }, o.delay)) : (o.hasInitialUpdate || (o.hasInitialUpdate = !0), this.updatePosition(t)));
+  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 i = document.querySelector(o.selector);
-    if (!i) {
+    const n = document.querySelector(o.selector);
+    if (!n) {
       this.debug && console.log(`[PositionTracker] Element not found: ${o.selector}`), o.element = null;
-      for (const n of o.callbacks)
-        n(null);
+      for (const [i, s] of o.callbacks)
+        s.needsInitialDelay || i(null);
       return;
     }
-    o.element = i;
-    const r = i.getBoundingClientRect(), s = {
-      ...de(
+    o.element = n;
+    const r = n.getBoundingClientRect(), a = {
+      ...N(
         r,
         o.position,
         o.offset
@@ -320,10 +366,10 @@ class ue {
     };
     this.debug && console.log(
       `[PositionTracker] Updated position for ${o.selector}:`,
-      s
+      a
     );
-    for (const n of o.callbacks)
-      n(s);
+    for (const [i, s] of o.callbacks)
+      s.needsInitialDelay || i(a);
   }
   updateAllPositions = () => {
     for (const [t] of this.tracked)
@@ -344,57 +390,60 @@ class ue {
    * Clean up all listeners and subscriptions
    */
   destroy() {
-    for (const [, t] of this.tracked)
-      t.delayTimeoutId !== void 0 && (clearTimeout(t.delayTimeoutId), t.delayTimeoutId = void 0);
+    for (const [, t] of this.tracked) {
+      for (const [, o] of t.delayTimeoutIds)
+        clearTimeout(o);
+      t.delayTimeoutIds.clear();
+    }
     this.stopListening(), this.tracked.clear();
   }
 }
-const U = Q(null);
+const j = W(null);
 function I() {
-  const e = W(U);
+  const e = Z(j);
   if (!e)
     throw new Error("useRepereContext must be used within a Repere provider.");
   return e;
 }
 function me(e, t) {
   const o = w(() => {
-    const n = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
-    return $(T(n, a));
-  }, [t.trigger?.animations, e.trigger?.animations]), i = w(() => {
-    const n = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
-    return $(T(n, a));
+    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));
   }, [
     t.trigger?.animations?.onDismiss,
     e.trigger?.animations?.onDismiss
   ]), r = w(() => {
-    const n = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
-    return $(T(n, a));
-  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), s = w(() => {
-    const n = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
-    return $(T(n, a));
+    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));
   }, [
     t.popover?.animations?.onClose,
     e.popover?.animations?.onClose
   ]);
   return {
     triggerAnimation: o,
-    triggerDismissAnimation: i,
+    triggerDismissAnimation: n,
     popoverOpenAnimation: r,
-    popoverCloseAnimation: s
+    popoverCloseAnimation: a
   };
 }
 function ge({
   targetSelector: e,
   position: t,
   offset: o,
-  zIndex: i = 9999,
+  zIndex: n = 9999,
   delay: r,
-  enabled: s = !0,
-  debug: n = !1
+  enabled: a = !0,
+  debug: i = !1
 }) {
-  const [a, l] = C(null), c = w(() => new ue(n), [n]);
-  return L(() => {
-    if (!s) {
+  const [s, l] = k(null), c = w(() => new ue(i), [i]);
+  return B(() => {
+    if (!a) {
       l(null);
       return;
     }
@@ -402,29 +451,29 @@ function ge({
       e,
       t,
       l,
-      { offset: o, zIndex: i, delay: r }
+      { offset: o, zIndex: n, delay: r }
     );
-  }, [c, e, t, o, i, r, s]), L(() => () => c.destroy(), [c]), {
-    calculatedPosition: a,
-    targetElement: a ? document.querySelector(e) : null
+  }, [c, e, t, o, n, r, a]), B(() => () => c.destroy(), [c]), {
+    calculatedPosition: s,
+    targetElement: s ? document.querySelector(e) : null
   };
 }
-function ve() {
-  const [e, t] = C(!1), [o, i] = C(
+function fe() {
+  const [e, t] = k(!1), [o, n] = k(
     null
   ), r = A((l) => {
-    i(l);
-  }, []), s = A(
+    n(l);
+  }, []), a = A(
     () => o?.togglePopover(),
     [o]
-  ), n = A(
+  ), i = A(
     () => o?.showPopover(),
     [o]
-  ), a = A(
+  ), s = A(
     () => o?.hidePopover(),
     [o]
   );
-  return L(() => {
+  return B(() => {
     if (!o) return;
     const l = (c) => {
       t(c.newState === "open");
@@ -434,13 +483,13 @@ function ve() {
     isOpen: e,
     popoverElement: o,
     handlePopoverRef: r,
-    togglePopover: s,
-    showPopover: n,
-    hidePopover: a
+    togglePopover: a,
+    showPopover: i,
+    hidePopover: s
   };
 }
-function he(e, t) {
-  return e ? N(e) ? e : /* @__PURE__ */ g(
+function ve(e, t) {
+  return e ? F(e) ? e : /* @__PURE__ */ g(
     e,
     {
       beacon: t.beacon,
@@ -451,9 +500,9 @@ function he(e, t) {
     }
   ) : null;
 }
-function fe(e, t) {
+function he(e, t) {
   let o;
-  return N(e) ? o = e : o = /* @__PURE__ */ g(
+  return F(e) ? o = e : o = /* @__PURE__ */ g(
     e,
     {
       beacon: t.beacon,
@@ -461,7 +510,7 @@ function fe(e, t) {
       onDismiss: t.handleDismiss,
       onClose: t.hidePopover
     }
-  ), Z(o, {
+  ), ee(o, {
     // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
     ref: t.handlePopoverRef,
     id: t.popoverId,
@@ -469,85 +518,85 @@ function fe(e, t) {
   });
 }
 function ye(e, t) {
-  const o = e.trigger?.position || t.trigger?.position || oe, i = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, s = e.trigger?.delay ?? t.trigger?.delay, n = e.popover?.position || t.popover?.position || o, a = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
+  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 };
   return {
     position: o,
-    zIndex: i,
+    zIndex: n,
     offset: r,
-    delay: s,
-    popoverPosition: n,
-    popoverOffset: a
+    delay: a,
+    popoverPosition: i,
+    popoverOffset: s
   };
 }
 function we({
   beacon: e,
   config: t,
   store: o,
-  onDismiss: i,
+  onDismiss: n,
   debug: r
 }) {
-  const s = ee(), [n, a] = C(!1), { position: l, zIndex: c, offset: d, delay: f, popoverPosition: p, popoverOffset: h } = ye(e, t), { calculatedPosition: u, targetElement: x } = ge({
+  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({
     targetSelector: e.selector,
     position: l,
     offset: d,
     zIndex: c,
-    delay: f,
+    delay: h,
     enabled: !0,
     debug: r
   }), {
-    isOpen: k,
+    isOpen: C,
     popoverElement: P,
     handlePopoverRef: y,
     togglePopover: R,
-    showPopover: _,
-    hidePopover: O
-  } = ve(), {
+    showPopover: q,
+    hidePopover: D
+  } = fe(), {
     triggerAnimation: G,
-    triggerDismissAnimation: z,
+    triggerDismissAnimation: O,
     popoverOpenAnimation: V,
-    popoverCloseAnimation: D
+    popoverCloseAnimation: z
   } = me(e, t), E = async () => {
-    a(!0), P?.hidePopover();
-    const J = ae(
-      z,
-      D
+    s(!0), P?.hidePopover();
+    const K = le(
+      O,
+      z
     );
-    await le(J), await Promise.resolve(o.dismiss(e.id)), i();
-  }, q = {
+    await ce(K), await Promise.resolve(o.dismiss(e.id)), n();
+  }, H = {
     beaconId: e.id,
     position: l,
     popoverPosition: p,
-    popoverOffset: h,
+    popoverOffset: v,
     calculatedPosition: u,
-    isOpen: k,
-    isDismissing: n,
+    isOpen: C,
+    isDismissing: i,
     toggle: R,
-    open: _,
-    close: O,
+    open: q,
+    close: D,
     dismiss: E,
     triggerAnimation: G,
-    triggerDismissAnimation: z,
+    triggerDismissAnimation: O,
     popoverOpenAnimation: V,
-    popoverCloseAnimation: D,
-    popoverId: s
-  }, H = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
-  return !u || !x ? (r && console.warn(
-    `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!x}`
-  ), null) : S ? /* @__PURE__ */ K(U.Provider, { value: q, children: [
-    he(H, {
+    popoverCloseAnimation: z,
+    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, {
       beacon: e,
       calculatedPosition: u,
       position: l,
-      isOpen: k,
+      isOpen: C,
       togglePopover: R
     }),
-    fe(S, {
+    he(S, {
       beacon: e,
       position: l,
       handleDismiss: E,
-      hidePopover: O,
+      hidePopover: D,
       handlePopoverRef: y,
-      popoverId: s
+      popoverId: a
     })
   ] }) : (r && console.warn(
     "[Repere] No popover component provided for beacon:",
@@ -558,43 +607,43 @@ function $e({
   config: e,
   currentPath: t,
   enabled: o = !0,
-  debug: i = !1
+  debug: n = !1
 }) {
   const r = w(
-    () => e.store || new ne(),
+    () => e.store || new ie(),
     [e.store]
-  ), s = w(
-    () => new pe(r, { debug: i }),
-    [r, i]
-  ), [n, a] = C([]), [l, c] = C(
+  ), a = w(
+    () => new de(r, { debug: n }),
+    [r, n]
+  ), [i, s] = k([]), [l, c] = k(
     /* @__PURE__ */ new Set()
   );
-  L(() => {
+  B(() => {
     if (!o) {
-      a([]), c(/* @__PURE__ */ new Set());
+      s([]), c(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const h = await s.getActiveBeacons(
+      const v = await a.getActiveBeacons(
         e.pages,
         t
       );
-      a(h);
+      s(v);
     })();
-  }, [s, e.pages, t, o]);
+  }, [a, e.pages, t, o]);
   const d = (p) => {
-    c((h) => /* @__PURE__ */ new Set([...h, p]));
-  }, f = n.filter(
+    c((v) => /* @__PURE__ */ new Set([...v, p]));
+  }, h = i.filter(
     (p) => !l.has(p.id)
   );
-  return f.length === 0 ? null : te(
-    f.map((p) => /* @__PURE__ */ g(
+  return h.length === 0 ? null : oe(
+    h.map((p) => /* @__PURE__ */ g(
       we,
       {
         beacon: p,
         config: e,
         store: r,
-        debug: i,
+        debug: n,
         onDismiss: () => d(p.id)
       },
       p.id
@@ -602,26 +651,26 @@ function $e({
     document.body
   );
 }
-const j = b(
+const X = x(
   ({
     children: e,
     style: t,
     popover: o = "auto",
-    disableAnimation: i,
+    disableAnimation: n,
     // Destructure and discard internal props so they don't spread to DOM
     beacon: r,
-    position: s,
-    onDismiss: n,
-    onClose: a,
+    position: a,
+    onDismiss: i,
+    onClose: s,
     ...l
   }, c) => {
     const {
       beaconId: d,
-      popoverOpenAnimation: f,
+      popoverOpenAnimation: h,
       popoverCloseAnimation: p,
-      popoverPosition: h,
+      popoverPosition: v,
       popoverOffset: u
-    } = I(), x = A(
+    } = I(), b = A(
       (y) => {
         typeof c == "function" ? c(y) : c && (c.current = y);
       },
@@ -632,17 +681,17 @@ const j = b(
         marginLeft: u.x || 0,
         marginTop: u.y || 0
       },
-      ...re(f, p),
+      ...ae(h, p),
       ...t
     };
     return /* @__PURE__ */ g(
       "div",
       {
-        ref: x,
+        ref: b,
         role: "dialog",
         "aria-labelledby": `repere-popover-${d}`,
         "data-repere-popover": "",
-        "data-position": h,
+        "data-position": v,
         popover: o,
         ...l,
         style: P,
@@ -651,33 +700,33 @@ const j = b(
     );
   }
 );
-j.displayName = "ReperePopover";
-const xe = b(
+X.displayName = "ReperePopover";
+const be = x(
   ({
     children: e = "Got it",
     onClick: t,
     as: o,
-    ...i
+    ...n
   }, r) => {
-    const s = I(), n = s?.dismiss || (() => {
-    }), a = s?.popoverId;
+    const a = I(), i = a?.dismiss || (() => {
+    }), s = a?.popoverId;
     return /* @__PURE__ */ g(
       o || "button",
       {
         ref: r,
         onClick: (d) => {
-          n(), t?.(d);
+          i(), t?.(d);
         },
-        popovertarget: a,
+        popovertarget: s,
         popovertargetaction: "hide",
-        ...i,
+        ...n,
         children: e
       }
     );
   }
-), be = Object.assign(xe, {
+), xe = Object.assign(be, {
   displayName: "ReperePopover.AcknowledgeButton"
-}), X = b(({ children: e = "×", ...t }, o) => {
+}), Y = x(({ children: e = "×", ...t }, o) => {
   const r = I()?.popoverId;
   return /* @__PURE__ */ g(
     "button",
@@ -691,76 +740,76 @@ const xe = b(
     }
   );
 });
-X.displayName = "ReperePopover.CloseButton";
-const Y = b(
+Y.displayName = "ReperePopover.CloseButton";
+const U = x(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-Y.displayName = "ReperePopover.Content";
-const F = b(
+U.displayName = "ReperePopover.Content";
+const _ = x(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-F.displayName = "ReperePopover.Footer";
-const Pe = b(
-  ({ children: e, as: t, ...o }, i) => {
-    const s = I()?.beaconId || "unknown";
-    return /* @__PURE__ */ g(t || "h3", { ref: i, id: `repere-popover-${s}`, ...o, children: e });
+_.displayName = "ReperePopover.Footer";
+const Pe = x(
+  ({ children: e, as: t, ...o }, n) => {
+    const a = I()?.beaconId || "unknown";
+    return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${a}`, ...o, children: e });
   }
-), Ce = Object.assign(Pe, {
+), ke = Object.assign(Pe, {
   displayName: "ReperePopover.Title"
-}), Le = Object.assign(j, {
-  Title: Ce,
-  Content: Y,
-  Footer: F,
-  AcknowledgeButton: be,
-  CloseButton: X
-}), ke = b(
+}), Be = Object.assign(X, {
+  Title: ke,
+  Content: U,
+  Footer: _,
+  AcknowledgeButton: xe,
+  CloseButton: Y
+}), Ce = x(
   ({
     children: e,
     as: t,
     style: o,
-    disableAnimation: i,
+    disableAnimation: n,
     ...r
-  }, s) => {
+  }, a) => {
     const {
-      calculatedPosition: n,
-      beaconId: a,
+      calculatedPosition: i,
+      beaconId: s,
       triggerAnimation: l,
       triggerDismissAnimation: c,
       isDismissing: d,
-      popoverId: f
-    } = I(), p = t || "button", h = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
-    if (!n) return null;
+      popoverId: h
+    } = I(), p = t || "button", v = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
+    if (!i) return null;
     const u = {
-      position: n.position,
-      top: n.top,
-      left: n.left,
-      zIndex: n.zIndex,
+      position: i.position,
+      top: i.top,
+      left: i.left,
+      zIndex: i.zIndex,
       pointerEvents: "auto",
       cursor: "pointer",
-      anchorName: `--repere-trigger-${a}`
-    }, x = o ? { ...u, ...o } : u, k = !i && (l || c), P = {
-      ref: s,
-      popovertarget: f,
-      "aria-label": `Beacon trigger for ${a}`,
+      anchorName: `--repere-trigger-${s}`
+    }, b = o ? { ...u, ...o } : u, C = !n && (l || c), P = {
+      ref: a,
+      popovertarget: h,
+      "aria-label": `Beacon trigger for ${s}`,
       "data-repere-trigger": "",
       ...r
     };
-    if (k) {
+    if (C) {
       const y = d && c ? c : l;
       if (!y) return null;
-      const R = se(
-        n.translate,
+      const R = re(
+        i.translate,
         y.variants
       );
       return /* @__PURE__ */ g(
-        h,
+        v,
         {
           initial: "initial",
           animate: d ? "exit" : "animate",
           variants: R,
           transition: y.transition,
           ...P,
-          style: x,
+          style: b,
           children: e
         }
       );
@@ -770,20 +819,20 @@ const Pe = b(
       {
         ...P,
         style: {
-          ...x,
-          translate: `${n.translate.x} ${n.translate.y}`
+          ...b,
+          translate: `${i.translate.x} ${i.translate.y}`
         },
         children: e
       }
     );
   }
-), Be = Object.assign(ke, {
+), Le = Object.assign(Ce, {
   displayName: "RepereTrigger"
 });
 export {
-  v as Animation,
+  f as Animation,
   $e as Beacons,
   m as Position,
-  Le as ReperePopover,
-  Be as RepereTrigger
+  Be as ReperePopover,
+  Le as RepereTrigger
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repere/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "exports": {
@@ -13,6 +13,9 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@repere/core": "0.1.2"
+  },
   "peerDependencies": {
     "motion": "^12.0.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -27,8 +30,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "vite": "^7.3.0",
-    "vite-plugin-dts": "^4.5.4",
-    "@repere/core": "0.1.0"
+    "vite-plugin-dts": "^4.5.4"
   },
   "keywords": [
     "react",