@repere/react 0.1.1 → 0.2.1

package/dist/components/RepereProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RepereProvider.d.ts","sourceRoot":"","sources":["../../src/components/RepereProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAO/D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDAkHrB"}
+{"version":3,"file":"RepereProvider.d.ts","sourceRoot":"","sources":["../../src/components/RepereProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAO/D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDAqHrB"}

package/dist/hooks/useBeaconPosition.d.ts

@@ -4,10 +4,11 @@ interface UseBeaconPositionParams {
     position: Position;
     offset?: Offset;
     zIndex?: number;
+    delay?: number;
     enabled?: boolean;
     debug?: boolean;
 }
-export declare function useBeaconPosition({ targetSelector, position, offset, zIndex, enabled, debug, }: UseBeaconPositionParams): {
+export declare function useBeaconPosition({ targetSelector, position, offset, zIndex, delay, enabled, debug, }: UseBeaconPositionParams): {
     calculatedPosition: CalculatedBeaconPosition | null;
     targetElement: HTMLElement | null;
 };

package/dist/hooks/useBeaconPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBeaconPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useBeaconPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI/E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,EACR,MAAM,EACN,MAAa,EACb,OAAc,EACd,KAAa,GACd,EAAE,uBAAuB;;;EAkCzB"}
+{"version":3,"file":"useBeaconPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useBeaconPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI/E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,EACR,MAAM,EACN,MAAa,EACb,KAAK,EACL,OAAc,EACd,KAAa,GACd,EAAE,uBAAuB;;;EAkCzB"}

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as g, jsxs as J } from "react/jsx-runtime";
-import { createContext as K, useContext as Q, useMemo as y, useState as C, useEffect as $, useCallback as A, isValidElement as N, cloneElement as W, useId as Z, forwardRef as b } from "react";
-import { createPortal as ee } 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 te = m.TopRight;
-class oe {
+const ne = m.TopRight;
+class ie {
   state = /* @__PURE__ */ new Map();
   isDismissed(t) {
     return this.state.get(t)?.isDismissed ?? !1;
@@ -25,70 +25,70 @@ class oe {
     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 ne = {
-  [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 z(e) {
+function L(e) {
   return e ? typeof e == "string" ? { variant: e } : e : null;
 }
-function L(e, t) {
-  const o = z(e), i = z(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;
+function T(e, t) {
+  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 B(e) {
-  const t = z(e);
+function $(e) {
+  const t = L(e);
   if (!t) return null;
-  const o = ne[t.variant];
+  const o = se[t.variant];
   return o ? {
     variants: o,
     transition: {
@@ -100,29 +100,29 @@ function B(e) {
     }
   } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
 }
-function ie(e, t) {
-  const o = (n) => {
-    const a = n.match(/(-?\d+)%/);
+function re(e, t) {
+  const o = (i) => {
+    const a = i.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))`;
+  }, n = o(e.x), s = o(e.y), r = (i = 0) => s === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${s}%)` : `translate(${n}%, calc(${s}% + ${i}px))`;
   return {
     initial: {
       ...t.initial,
-      transform: s(t.initial.y || 0)
+      transform: r(t.initial.y || 0)
     },
     animate: {
       ...t.animate,
-      transform: s(t.animate.y || 0)
+      transform: r(t.animate.y || 0)
     },
     exit: {
       ...t.exit,
-      transform: s(t.exit.y || 0)
+      transform: r(t.exit.y || 0)
     }
   };
 }
-function se(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, s = t?.variants, r = t?.transition, i = r?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], a = 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,23 +135,23 @@ function se(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": `${s?.duration ?? i?.duration ?? 0.3}s`,
+    "--repere-transition-duration": `${r?.duration ?? n?.duration ?? 0.3}s`,
     "--repere-transition-timing": a
   };
 }
-function re(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 ae(e) {
+function ce(e) {
   return new Promise((t) => setTimeout(t, e));
 }
-function le(e, t) {
+function pe(e, t) {
   if (t instanceof RegExp)
     return t.test(e);
   if (t === e)
@@ -162,7 +162,7 @@ function le(e, t) {
   }
   return !1;
 }
-class ce {
+class de {
   store;
   debug;
   constructor(t, o = {}) {
@@ -173,45 +173,45 @@ class ce {
    * 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) : le(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:",
-      i.map((r) => r.id).join(", ") || "none"
-    ), i;
+      n.map((s) => s.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((a) => a.id).join(", ")
     );
-    const r = [], s = /* @__PURE__ */ new Set();
-    for (const a of i)
+    const s = [], r = /* @__PURE__ */ new Set();
+    for (const a of n)
       for (const l of a.beacons) {
-        if (s.has(l.id)) {
+        if (r.has(l.id)) {
           this.debug && console.warn(
             `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${a.id}", skipping`
           );
           continue;
         }
-        s.add(l.id), r.push(l);
+        r.add(l.id), s.push(l);
       }
-    const n = [];
-    for (const a of r)
+    const i = [];
+    for (const a of s)
       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.debug && console.log("[BeaconManager] Beacon", a.id, "is dismissed") : i.push(a);
+    return this.debug && console.log("[BeaconManager] Active beacons:", i.length), i;
   }
   /**
    * Get the store instance
@@ -220,46 +220,46 @@ class ce {
     return this.store;
   }
 }
-function pe(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: s = 0 } = o;
+  let r = 0, i = 0, a = "0", l = "0";
   switch (t) {
     // Top positions
     case m.TopLeft:
-      s = e.top + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "-100%";
+      r = e.top + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "-100%";
       break;
     case m.TopCenter:
-      s = e.top + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
+      r = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
       break;
     case m.TopRight:
-      s = e.top + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "-100%";
+      r = e.top + window.scrollY, i = e.right + window.scrollX, a = "-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%";
+      r = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, a = "0", l = "-50%";
       break;
     // Bottom positions
     case m.BottomLeft:
-      s = e.bottom + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "0";
+      r = e.bottom + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "0";
       break;
     case m.BottomCenter:
-      s = e.bottom + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
+      r = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
       break;
     case m.BottomRight:
-      s = e.bottom + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "0";
+      r = e.bottom + window.scrollY, i = e.right + window.scrollX, a = "-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%";
+      r = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, a = "-100%", l = "-50%";
       break;
   }
-  return s += r, n += i, {
-    top: s,
-    left: n,
+  return r += s, i += n, {
+    top: r,
+    left: i,
     translate: { x: a, y: l }
   };
 }
-class de {
+class ue {
   tracked = /* @__PURE__ */ new Map();
   scrollListener = null;
   resizeListener = null;
@@ -272,34 +272,92 @@ class de {
   /**
    * 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, s = {}) {
+    const r = t;
+    this.tracked.has(r) || this.tracked.set(r, {
       selector: t,
       position: o,
-      offset: r.offset,
-      zIndex: r.zIndex ?? 9999,
-      callbacks: /* @__PURE__ */ new Set(),
-      element: null
-    }), this.tracked.get(s)?.callbacks.add(i), this.tracked.size === 1 && this.startListening(), this.updatePosition(s), () => {
-      const n = this.tracked.get(s);
-      n && (n.callbacks.delete(i), n.callbacks.size === 0 && (this.tracked.delete(s), this.tracked.size === 0 && this.stopListening()));
+      offset: s.offset,
+      zIndex: s.zIndex ?? 9999,
+      delay: s.delay,
+      callbacks: /* @__PURE__ */ new Map(),
+      element: null,
+      delayTimeoutIds: /* @__PURE__ */ new Map()
+    });
+    const i = this.tracked.get(r);
+    return i ? (i.callbacks.set(n, {
+      callback: n,
+      needsInitialDelay: (s.delay ?? 0) > 0
+    }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(r, n), () => {
+      const a = this.tracked.get(r);
+      if (a) {
+        const l = a.delayTimeoutIds.get(n);
+        if (l !== void 0 && (clearTimeout(l), a.delayTimeoutIds.delete(n)), a.callbacks.delete(n), a.callbacks.size === 0) {
+          for (const [, c] of a.delayTimeoutIds)
+            clearTimeout(c);
+          a.delayTimeoutIds.clear(), this.tracked.delete(r), 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(
+          `[PositionTracker] Delaying initial position calculation for ${t} by ${n.delay}ms`
+        );
+        const r = 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, r);
+      } else
+        this.updatePositionForCallback(t, o);
+  }
+  updatePositionForCallback(t, o) {
+    const n = this.tracked.get(t);
+    if (!n) return;
+    const s = document.querySelector(n.selector);
+    if (!s) {
+      this.debug && console.log(`[PositionTracker] Element not found: ${n.selector}`), n.element = null, o(null);
+      return;
+    }
+    n.element = s;
+    const r = s.getBoundingClientRect(), i = {
+      ...N(
+        r,
+        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] of o.callbacks)
+        i(null);
       return;
     }
-    o.element = i;
-    const r = i.getBoundingClientRect(), s = {
-      ...pe(
-        r,
+    o.element = n;
+    const s = n.getBoundingClientRect(), r = {
+      ...N(
+        s,
         o.position,
         o.offset
       ),
@@ -308,10 +366,10 @@ class de {
     };
     this.debug && console.log(
       `[PositionTracker] Updated position for ${o.selector}:`,
-      s
+      r
     );
-    for (const n of o.callbacks)
-      n(s);
+    for (const [i] of o.callbacks)
+      i(r);
   }
   updateAllPositions = () => {
     for (const [t] of this.tracked)
@@ -332,84 +390,90 @@ class de {
    * 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 = K(null);
-function k() {
-  const e = Q(j);
+const j = W(null);
+function I() {
+  const e = Z(j);
   if (!e)
     throw new Error("useRepereContext must be used within a Repere provider.");
   return e;
 }
-function ue(e, t) {
-  const o = y(() => {
-    const n = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
-    return B(L(n, a));
-  }, [t.trigger?.animations, e.trigger?.animations]), i = y(() => {
-    const n = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
-    return B(L(n, a));
+function me(e, t) {
+  const o = w(() => {
+    const i = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
+    return $(T(i, a));
+  }, [t.trigger?.animations, e.trigger?.animations]), n = w(() => {
+    const i = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
+    return $(T(i, a));
   }, [
     t.trigger?.animations?.onDismiss,
     e.trigger?.animations?.onDismiss
-  ]), r = y(() => {
-    const n = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
-    return B(L(n, a));
-  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), s = y(() => {
-    const n = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
-    return B(L(n, a));
+  ]), s = w(() => {
+    const i = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
+    return $(T(i, a));
+  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), r = w(() => {
+    const i = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
+    return $(T(i, a));
   }, [
     t.popover?.animations?.onClose,
     e.popover?.animations?.onClose
   ]);
   return {
     triggerAnimation: o,
-    triggerDismissAnimation: i,
-    popoverOpenAnimation: r,
-    popoverCloseAnimation: s
+    triggerDismissAnimation: n,
+    popoverOpenAnimation: s,
+    popoverCloseAnimation: r
   };
 }
-function me({
+function ge({
   targetSelector: e,
   position: t,
   offset: o,
-  zIndex: i = 9999,
+  zIndex: n = 9999,
+  delay: s,
   enabled: r = !0,
-  debug: s = !1
+  debug: i = !1
 }) {
-  const [n, a] = C(null), l = y(() => new de(s), [s]);
-  return $(() => {
+  const [a, l] = k(null), c = w(() => new ue(i), [i]);
+  return B(() => {
     if (!r) {
-      a(null);
+      l(null);
       return;
     }
-    return l.subscribe(
+    return c.subscribe(
       e,
       t,
-      a,
-      { offset: o, zIndex: i }
+      l,
+      { offset: o, zIndex: n, delay: s }
     );
-  }, [l, e, t, o, i, r]), $(() => () => l.destroy(), [l]), {
-    calculatedPosition: n,
-    targetElement: n ? document.querySelector(e) : null
+  }, [c, e, t, o, n, s, r]), B(() => () => c.destroy(), [c]), {
+    calculatedPosition: a,
+    targetElement: a ? document.querySelector(e) : null
   };
 }
-function ge() {
-  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(
+  ), s = A((l) => {
+    n(l);
+  }, []), r = A(
     () => o?.togglePopover(),
     [o]
-  ), n = A(
+  ), i = A(
     () => o?.showPopover(),
     [o]
   ), a = A(
     () => o?.hidePopover(),
     [o]
   );
-  return $(() => {
+  return B(() => {
     if (!o) return;
     const l = (c) => {
       t(c.newState === "open");
@@ -418,14 +482,14 @@ function ge() {
   }, [o]), {
     isOpen: e,
     popoverElement: o,
-    handlePopoverRef: r,
-    togglePopover: s,
-    showPopover: n,
+    handlePopoverRef: s,
+    togglePopover: r,
+    showPopover: i,
     hidePopover: a
   };
 }
 function ve(e, t) {
-  return e ? N(e) ? e : /* @__PURE__ */ g(
+  return e ? F(e) ? e : /* @__PURE__ */ g(
     e,
     {
       beacon: t.beacon,
@@ -438,7 +502,7 @@ function ve(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,
@@ -446,138 +510,140 @@ function he(e, t) {
       onDismiss: t.handleDismiss,
       onClose: t.hidePopover
     }
-  ), W(o, {
+  ), ee(o, {
     // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
     ref: t.handlePopoverRef,
     id: t.popoverId,
     popover: "auto"
   });
 }
-function fe(e, t) {
-  const o = e.trigger?.position || t.trigger?.position || te, i = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, s = e.popover?.position || t.popover?.position || o, n = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
+function ye(e, t) {
+  const o = e.trigger?.position || t.trigger?.position || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, s = e.trigger?.offset, r = e.trigger?.delay ?? t.trigger?.delay, i = e.popover?.position || t.popover?.position || o, a = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
   return {
     position: o,
-    zIndex: i,
-    offset: r,
-    popoverPosition: s,
-    popoverOffset: n
+    zIndex: n,
+    offset: s,
+    delay: r,
+    popoverPosition: i,
+    popoverOffset: a
   };
 }
 function we({
   beacon: e,
   config: t,
   store: o,
-  onDismiss: i,
-  debug: r
+  onDismiss: n,
+  debug: s
 }) {
-  const s = Z(), [n, a] = C(!1), { position: l, zIndex: c, offset: d, popoverPosition: w, popoverOffset: p } = fe(e, t), { calculatedPosition: u, targetElement: h } = me({
+  const r = te(), [i, a] = 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: h,
     enabled: !0,
-    debug: r
+    debug: s
   }), {
-    isOpen: x,
-    popoverElement: R,
-    handlePopoverRef: P,
-    togglePopover: f,
-    showPopover: O,
-    hidePopover: I
-  } = ge(), {
-    triggerAnimation: _,
+    isOpen: C,
+    popoverElement: P,
+    handlePopoverRef: y,
+    togglePopover: R,
+    showPopover: q,
+    hidePopover: O
+  } = fe(), {
+    triggerAnimation: G,
     triggerDismissAnimation: D,
-    popoverOpenAnimation: G,
-    popoverCloseAnimation: T
-  } = ue(e, t), E = async () => {
-    a(!0), R?.hidePopover();
-    const H = re(
+    popoverOpenAnimation: V,
+    popoverCloseAnimation: z
+  } = me(e, t), E = async () => {
+    a(!0), P?.hidePopover();
+    const K = le(
       D,
-      T
+      z
     );
-    await ae(H), await Promise.resolve(o.dismiss(e.id)), i();
-  }, V = {
+    await ce(K), await Promise.resolve(o.dismiss(e.id)), n();
+  }, H = {
     beaconId: e.id,
     position: l,
-    popoverPosition: w,
-    popoverOffset: p,
+    popoverPosition: p,
+    popoverOffset: v,
     calculatedPosition: u,
-    isOpen: x,
-    isDismissing: n,
-    toggle: f,
-    open: O,
-    close: I,
+    isOpen: C,
+    isDismissing: i,
+    toggle: R,
+    open: q,
+    close: O,
     dismiss: E,
-    triggerAnimation: _,
+    triggerAnimation: G,
     triggerDismissAnimation: D,
-    popoverOpenAnimation: G,
-    popoverCloseAnimation: T,
-    popoverId: s
-  }, q = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
-  return !u || !h ? (r && console.warn(
-    `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!h}`
-  ), null) : S ? /* @__PURE__ */ J(j.Provider, { value: V, children: [
-    ve(q, {
+    popoverOpenAnimation: V,
+    popoverCloseAnimation: z,
+    popoverId: r
+  }, J = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
+  return !u || !b ? (s && 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: x,
-      togglePopover: f
+      isOpen: C,
+      togglePopover: R
     }),
     he(S, {
       beacon: e,
       position: l,
       handleDismiss: E,
-      hidePopover: I,
-      handlePopoverRef: P,
-      popoverId: s
+      hidePopover: O,
+      handlePopoverRef: y,
+      popoverId: r
     })
-  ] }) : (r && console.warn(
+  ] }) : (s && console.warn(
     "[Repere] No popover component provided for beacon:",
     e.id
   ), null);
 }
-function Be({
+function $e({
   config: e,
   currentPath: t,
   enabled: o = !0,
-  debug: i = !1
+  debug: n = !1
 }) {
-  const r = y(
-    () => e.store || new oe(),
+  const s = w(
+    () => e.store || new ie(),
     [e.store]
-  ), s = y(
-    () => new ce(r, { debug: i }),
-    [r, i]
-  ), [n, a] = C([]), [l, c] = C(
+  ), r = w(
+    () => new de(s, { debug: n }),
+    [s, n]
+  ), [i, a] = k([]), [l, c] = k(
     /* @__PURE__ */ new Set()
   );
-  $(() => {
+  B(() => {
     if (!o) {
       a([]), c(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const u = await s.getActiveBeacons(
+      const v = await r.getActiveBeacons(
         e.pages,
         t
       );
-      a(u);
+      a(v);
     })();
-  }, [s, e.pages, t, o]);
+  }, [r, e.pages, t, o]);
   const d = (p) => {
-    c((u) => /* @__PURE__ */ new Set([...u, p]));
-  }, w = n.filter(
+    c((v) => /* @__PURE__ */ new Set([...v, p]));
+  }, h = i.filter(
     (p) => !l.has(p.id)
   );
-  return w.length === 0 ? null : ee(
-    w.map((p) => /* @__PURE__ */ g(
+  return h.length === 0 ? null : oe(
+    h.map((p) => /* @__PURE__ */ g(
       we,
       {
         beacon: p,
         config: e,
-        store: r,
-        debug: i,
+        store: s,
+        debug: n,
         onDismiss: () => d(p.id)
       },
       p.id
@@ -585,47 +651,47 @@ function Be({
     document.body
   );
 }
-const X = 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,
+    beacon: s,
+    position: r,
+    onDismiss: i,
     onClose: a,
     ...l
   }, c) => {
     const {
       beaconId: d,
-      popoverOpenAnimation: w,
+      popoverOpenAnimation: h,
       popoverCloseAnimation: p,
-      popoverPosition: u,
-      popoverOffset: h
-    } = k(), x = A(
-      (f) => {
-        typeof c == "function" ? c(f) : c && (c.current = f);
+      popoverPosition: v,
+      popoverOffset: u
+    } = I(), b = A(
+      (y) => {
+        typeof c == "function" ? c(y) : c && (c.current = y);
       },
       [c]
     ), P = {
       positionAnchor: d ? `--repere-trigger-${d}` : void 0,
-      ...h && {
-        marginLeft: h.x || 0,
-        marginTop: h.y || 0
+      ...u && {
+        marginLeft: u.x || 0,
+        marginTop: u.y || 0
       },
-      ...se(w, 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": u,
+        "data-position": v,
         popover: o,
         ...l,
         style: P,
@@ -635,38 +701,38 @@ const X = b(
   }
 );
 X.displayName = "ReperePopover";
-const ye = b(
+const be = x(
   ({
     children: e = "Got it",
     onClick: t,
     as: o,
-    ...i
-  }, r) => {
-    const s = k(), n = s?.dismiss || (() => {
-    }), a = s?.popoverId;
+    ...n
+  }, s) => {
+    const r = I(), i = r?.dismiss || (() => {
+    }), a = r?.popoverId;
     return /* @__PURE__ */ g(
       o || "button",
       {
-        ref: r,
+        ref: s,
         onClick: (d) => {
-          n(), t?.(d);
+          i(), t?.(d);
         },
         popovertarget: a,
         popovertargetaction: "hide",
-        ...i,
+        ...n,
         children: e
       }
     );
   }
-), xe = Object.assign(ye, {
+), xe = Object.assign(be, {
   displayName: "ReperePopover.AcknowledgeButton"
-}), Y = b(({ children: e = "×", ...t }, o) => {
-  const r = k()?.popoverId;
+}), Y = x(({ children: e = "×", ...t }, o) => {
+  const s = I()?.popoverId;
   return /* @__PURE__ */ g(
     "button",
     {
       ref: o,
-      popovertarget: r,
+      popovertarget: s,
       popovertargetaction: "hide",
       "aria-label": "Close",
       ...t,
@@ -675,75 +741,75 @@ const ye = b(
   );
 });
 Y.displayName = "ReperePopover.CloseButton";
-const F = b(
+const U = x(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-F.displayName = "ReperePopover.Content";
-const U = b(
+U.displayName = "ReperePopover.Content";
+const _ = x(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-U.displayName = "ReperePopover.Footer";
-const be = b(
-  ({ children: e, as: t, ...o }, i) => {
-    const s = k()?.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 r = I()?.beaconId || "unknown";
+    return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${r}`, ...o, children: e });
   }
-), Pe = Object.assign(be, {
+), ke = Object.assign(Pe, {
   displayName: "ReperePopover.Title"
-}), $e = Object.assign(X, {
-  Title: Pe,
-  Content: F,
-  Footer: U,
+}), Be = Object.assign(X, {
+  Title: ke,
+  Content: U,
+  Footer: _,
   AcknowledgeButton: xe,
   CloseButton: Y
-}), Ce = b(
+}), Ce = x(
   ({
     children: e,
     as: t,
     style: o,
-    disableAnimation: i,
-    ...r
-  }, s) => {
+    disableAnimation: n,
+    ...s
+  }, r) => {
     const {
-      calculatedPosition: n,
+      calculatedPosition: i,
       beaconId: a,
       triggerAnimation: l,
       triggerDismissAnimation: c,
       isDismissing: d,
-      popoverId: w
-    } = k(), p = t || "button", u = y(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
-    if (!n) return null;
-    const h = {
-      position: n.position,
-      top: n.top,
-      left: n.left,
-      zIndex: n.zIndex,
+      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: i.position,
+      top: i.top,
+      left: i.left,
+      zIndex: i.zIndex,
       pointerEvents: "auto",
       cursor: "pointer",
       anchorName: `--repere-trigger-${a}`
-    }, x = o ? { ...h, ...o } : h, R = !i && (l || c), P = {
-      ref: s,
-      popovertarget: w,
+    }, b = o ? { ...u, ...o } : u, C = !n && (l || c), P = {
+      ref: r,
+      popovertarget: h,
       "aria-label": `Beacon trigger for ${a}`,
       "data-repere-trigger": "",
-      ...r
+      ...s
     };
-    if (R) {
-      const f = d && c ? c : l;
-      if (!f) return null;
-      const O = ie(
-        n.translate,
-        f.variants
+    if (C) {
+      const y = d && c ? c : l;
+      if (!y) return null;
+      const R = re(
+        i.translate,
+        y.variants
       );
       return /* @__PURE__ */ g(
-        u,
+        v,
         {
           initial: "initial",
           animate: d ? "exit" : "animate",
-          variants: O,
-          transition: f.transition,
+          variants: R,
+          transition: y.transition,
           ...P,
-          style: x,
+          style: b,
           children: e
         }
       );
@@ -753,20 +819,20 @@ const be = b(
       {
         ...P,
         style: {
-          ...x,
-          translate: `${n.translate.x} ${n.translate.y}`
+          ...b,
+          translate: `${i.translate.x} ${i.translate.y}`
         },
         children: e
       }
     );
   }
-), Oe = Object.assign(Ce, {
+), Le = Object.assign(Ce, {
   displayName: "RepereTrigger"
 });
 export {
-  v as Animation,
-  Be as Beacons,
+  f as Animation,
+  $e as Beacons,
   m as Position,
-  $e as ReperePopover,
-  Oe as RepereTrigger
+  Be as ReperePopover,
+  Le as RepereTrigger
 };

package/dist/utils/resolveBeaconConfig.d.ts

@@ -4,6 +4,7 @@ export declare function resolveBeaconConfig(beacon: Beacon, config: RepereReactC
     position: Position;
     zIndex: number;
     offset: Offset | undefined;
+    delay: number | undefined;
     popoverPosition: Position;
     popoverOffset: Offset;
 };

package/dist/utils/resolveBeaconConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveBeaconConfig.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBeaconConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;;EAqB5E"}
+{"version":3,"file":"resolveBeaconConfig.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBeaconConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;;;EAwB5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repere/react",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "exports": {
@@ -13,6 +13,9 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@repere/core": "0.1.1"
+  },
   "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.0.3"
+    "vite-plugin-dts": "^4.5.4"
   },
   "keywords": [
     "react",