@repere/react 0.0.3 → 0.1.1

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type * from '@repere/core';
+export { Animation, Position } from '@repere/core';
 export { Beacons, type BeaconsProps } from './components/Beacons';
 export { ReperePopover } from './components/Popover';
 export { RepereTrigger } from './components/RepereTrigger';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,438 +1,772 @@
-import { jsx as u, jsxs as W } from "react/jsx-runtime";
-import { getAnimationConfig as x, mergeAnimationConfigs as D, PositionTracker as H, DEFAULT_POSITION as J, calculateDismissDuration as K, waitForAnimations as Q, MemoryStore as X, BeaconManager as Y, getPopoverAnimationStyles as Z, combineTranslateWithAnimation as oo } from "@repere/core";
-import { createContext as eo, useContext as to, useMemo as P, useState as w, useEffect as O, useCallback as y, isValidElement as j, cloneElement as no, useId as io, forwardRef as A } from "react";
-import { createPortal as ro } from "react-dom";
-import { motion as $ } from "motion/react";
-const S = eo(null);
-function I() {
-  const o = to(S);
-  if (!o)
+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 { 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 {
+  state = /* @__PURE__ */ new Map();
+  isDismissed(t) {
+    return this.state.get(t)?.isDismissed ?? !1;
+  }
+  dismiss(t) {
+    this.state.set(t, {
+      id: t,
+      isDismissed: !0
+    });
+  }
+  reset(t) {
+    this.state.delete(t);
+  }
+  resetAll() {
+    this.state.clear();
+  }
+  getAll() {
+    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]: {
+    initial: { y: -20, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: -20, opacity: 0 }
+  },
+  [v.SlideUp]: {
+    initial: { y: 20, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: 20, opacity: 0 }
+  },
+  [v.SlideLeft]: {
+    initial: { x: 20, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: 20, opacity: 0 }
+  },
+  [v.SlideRight]: {
+    initial: { x: -20, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: -20, opacity: 0 }
+  },
+  [v.Fade]: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  [v.Shrink]: {
+    initial: { scale: 1.1, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0.9, opacity: 0 }
+  },
+  [v.Grow]: {
+    initial: { scale: 0.9, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 1.1, opacity: 0 }
+  },
+  [v.Scale]: {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0, opacity: 0 }
+  },
+  [v.None]: {
+    initial: {},
+    animate: {},
+    exit: {}
+  }
+};
+function z(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 B(e) {
+  const t = z(e);
+  if (!t) return null;
+  const o = ne[t.variant];
+  return o ? {
+    variants: o,
+    transition: {
+      duration: (t.duration || 300) / 1e3,
+      // Convert ms to seconds
+      delay: (t.delay || 0) / 1e3,
+      ease: t.ease || [0.4, 0, 0.2, 1]
+      // cubic-bezier
+    }
+  } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
+}
+function ie(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))`;
+  return {
+    initial: {
+      ...t.initial,
+      transform: s(t.initial.y || 0)
+    },
+    animate: {
+      ...t.animate,
+      transform: s(t.animate.y || 0)
+    },
+    exit: {
+      ...t.exit,
+      transform: s(t.exit.y || 0)
+    }
+  };
+}
+function se(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;
+  return {
+    // Initial state (when opening starts) - from onOpen animation
+    "--repere-initial-opacity": o?.initial.opacity ?? 0,
+    "--repere-initial-x": `${o?.initial.x ?? 0}px`,
+    "--repere-initial-y": `${o?.initial.y ?? 0}px`,
+    "--repere-initial-scale": o?.initial.scale ?? 1,
+    // Animate state (fully open) - from onOpen animation
+    "--repere-animate-opacity": o?.animate.opacity ?? 1,
+    "--repere-animate-x": `${o?.animate.x ?? 0}px`,
+    "--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,
+    // Transition timing
+    "--repere-transition-duration": `${s?.duration ?? i?.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 ae(e) {
+  return new Promise((t) => setTimeout(t, e));
+}
+function le(e, t) {
+  if (t instanceof RegExp)
+    return t.test(e);
+  if (t === e)
+    return !0;
+  if (t.includes("*")) {
+    const o = t.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+    return new RegExp(`^${o}$`).test(e);
+  }
+  return !1;
+}
+class ce {
+  store;
+  debug;
+  constructor(t, o = {}) {
+    this.store = t, this.debug = o.debug ?? !1;
+  }
+  /**
+   * Find all pages that match the current path
+   * 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));
+    return this.debug && console.log(
+      "[BeaconManager] Path:",
+      o,
+      "Matched pages:",
+      i.map((r) => r.id).join(", ") || "none"
+    ), i;
+  }
+  /**
+   * 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)
+      return this.debug && console.log("[BeaconManager] No matching pages found"), [];
+    this.debug && console.log(
+      "[BeaconManager] Found",
+      i.length,
+      "matching page(s):",
+      i.map((a) => a.id).join(", ")
+    );
+    const r = [], s = /* @__PURE__ */ new Set();
+    for (const a of i)
+      for (const l of a.beacons) {
+        if (s.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);
+      }
+    const n = [];
+    for (const a 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;
+  }
+  /**
+   * Get the store instance
+   */
+  getStore() {
+    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";
+  switch (t) {
+    // Top positions
+    case m.TopLeft:
+      s = e.top + window.scrollY, n = 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%";
+      break;
+    case m.TopRight:
+      s = e.top + window.scrollY, n = 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%";
+      break;
+    // Bottom positions
+    case m.BottomLeft:
+      s = e.bottom + window.scrollY, n = 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";
+      break;
+    case m.BottomRight:
+      s = e.bottom + window.scrollY, n = 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%";
+      break;
+  }
+  return s += r, n += i, {
+    top: s,
+    left: n,
+    translate: { x: a, y: l }
+  };
+}
+class de {
+  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, i, r = {}) {
+    const s = t;
+    return this.tracked.has(s) || this.tracked.set(s, {
+      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()));
+    };
+  }
+  updatePosition(t) {
+    const o = this.tracked.get(t);
+    if (!o) return;
+    const i = document.querySelector(o.selector);
+    if (!i) {
+      this.debug && console.log(`[PositionTracker] Element not found: ${o.selector}`), o.element = null;
+      for (const n of o.callbacks)
+        n(null);
+      return;
+    }
+    o.element = i;
+    const r = i.getBoundingClientRect(), s = {
+      ...pe(
+        r,
+        o.position,
+        o.offset
+      ),
+      position: "fixed",
+      zIndex: o.zIndex
+    };
+    this.debug && console.log(
+      `[PositionTracker] Updated position for ${o.selector}:`,
+      s
+    );
+    for (const n of o.callbacks)
+      n(s);
+  }
+  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() {
+    this.stopListening(), this.tracked.clear();
+  }
+}
+const j = K(null);
+function k() {
+  const e = Q(j);
+  if (!e)
     throw new Error("useRepereContext must be used within a Repere provider.");
-  return o;
+  return e;
 }
-function so(o, e) {
-  const t = P(() => {
-    const n = e.trigger?.animations?.onRender, s = o.trigger?.animations?.onRender;
-    return x(D(n, s));
-  }, [e.trigger?.animations, o.trigger?.animations]), r = P(() => {
-    const n = e.trigger?.animations?.onDismiss, s = o.trigger?.animations?.onDismiss;
-    return x(D(n, s));
+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));
   }, [
-    e.trigger?.animations?.onDismiss,
-    o.trigger?.animations?.onDismiss
-  ]), i = P(() => {
-    const n = e.popover?.animations?.onOpen, s = o.popover?.animations?.onOpen;
-    return x(D(n, s));
-  }, [e.popover?.animations?.onOpen, o.popover?.animations?.onOpen]), p = P(() => {
-    const n = e.popover?.animations?.onClose, s = o.popover?.animations?.onClose;
-    return x(D(n, s));
+    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));
   }, [
-    e.popover?.animations?.onClose,
-    o.popover?.animations?.onClose
+    t.popover?.animations?.onClose,
+    e.popover?.animations?.onClose
   ]);
   return {
-    triggerAnimation: t,
-    triggerDismissAnimation: r,
-    popoverOpenAnimation: i,
-    popoverCloseAnimation: p
+    triggerAnimation: o,
+    triggerDismissAnimation: i,
+    popoverOpenAnimation: r,
+    popoverCloseAnimation: s
   };
 }
-function po({
-  targetSelector: o,
-  position: e,
-  offset: t,
-  zIndex: r = 9999,
-  enabled: i = !0,
-  debug: p = !1
+function me({
+  targetSelector: e,
+  position: t,
+  offset: o,
+  zIndex: i = 9999,
+  enabled: r = !0,
+  debug: s = !1
 }) {
-  const [n, s] = w(null), a = P(() => new H(p), [p]);
-  return O(() => {
-    if (!i) {
-      s(null);
+  const [n, a] = C(null), l = y(() => new de(s), [s]);
+  return $(() => {
+    if (!r) {
+      a(null);
       return;
     }
-    return a.subscribe(
-      o,
+    return l.subscribe(
       e,
-      s,
-      { offset: t, zIndex: r }
+      t,
+      a,
+      { offset: o, zIndex: i }
     );
-  }, [a, o, e, t, r, i]), O(() => () => a.destroy(), [a]), {
+  }, [l, e, t, o, i, r]), $(() => () => l.destroy(), [l]), {
     calculatedPosition: n,
-    targetElement: n ? document.querySelector(o) : null
+    targetElement: n ? document.querySelector(e) : null
   };
 }
-function ao() {
-  const [o, e] = w(!1), [t, r] = w(
+function ge() {
+  const [e, t] = C(!1), [o, i] = C(
     null
-  ), i = y((a) => {
-    r(a);
-  }, []), p = y(
-    () => t?.togglePopover(),
-    [t]
-  ), n = y(
-    () => t?.showPopover(),
-    [t]
-  ), s = y(
-    () => t?.hidePopover(),
-    [t]
+  ), r = A((l) => {
+    i(l);
+  }, []), s = A(
+    () => o?.togglePopover(),
+    [o]
+  ), n = A(
+    () => o?.showPopover(),
+    [o]
+  ), a = A(
+    () => o?.hidePopover(),
+    [o]
   );
-  return O(() => {
-    if (!t) return;
-    const a = (c) => {
-      e(c.newState === "open");
+  return $(() => {
+    if (!o) return;
+    const l = (c) => {
+      t(c.newState === "open");
     };
-    return t.addEventListener("toggle", a), () => t.removeEventListener("toggle", a);
-  }, [t]), {
-    isOpen: o,
-    popoverElement: t,
-    handlePopoverRef: i,
-    togglePopover: p,
+    return o.addEventListener("toggle", l), () => o.removeEventListener("toggle", l);
+  }, [o]), {
+    isOpen: e,
+    popoverElement: o,
+    handlePopoverRef: r,
+    togglePopover: s,
     showPopover: n,
-    hidePopover: s
+    hidePopover: a
   };
 }
-function co(o, e) {
-  return o ? j(o) ? o : /* @__PURE__ */ u(
-    o,
+function ve(e, t) {
+  return e ? N(e) ? e : /* @__PURE__ */ g(
+    e,
     {
-      beacon: e.beacon,
-      style: e.calculatedPosition,
-      position: e.position,
-      isOpen: e.isOpen,
-      onClick: e.togglePopover
+      beacon: t.beacon,
+      style: t.calculatedPosition,
+      position: t.position,
+      isOpen: t.isOpen,
+      onClick: t.togglePopover
     }
   ) : null;
 }
-function lo(o, e) {
-  let t;
-  return j(o) ? t = o : t = /* @__PURE__ */ u(
-    o,
+function he(e, t) {
+  let o;
+  return N(e) ? o = e : o = /* @__PURE__ */ g(
+    e,
     {
-      beacon: e.beacon,
-      position: e.position,
-      onDismiss: e.handleDismiss,
-      onClose: e.hidePopover
+      beacon: t.beacon,
+      position: t.position,
+      onDismiss: t.handleDismiss,
+      onClose: t.hidePopover
     }
-  ), no(t, {
+  ), W(o, {
     // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
-    ref: e.handlePopoverRef,
-    id: e.popoverId,
+    ref: t.handlePopoverRef,
+    id: t.popoverId,
     popover: "auto"
   });
 }
-function mo(o, e) {
-  const t = o.trigger?.position || e.trigger?.position || J, r = o.trigger?.zIndex || e.trigger?.zIndex || 9999, i = o.trigger?.offset, p = o.popover?.position || e.popover?.position || t, n = o.popover?.offset || e.popover?.offset || { x: 0, y: 0 };
+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 };
   return {
-    position: t,
-    zIndex: r,
-    offset: i,
-    popoverPosition: p,
+    position: o,
+    zIndex: i,
+    offset: r,
+    popoverPosition: s,
     popoverOffset: n
   };
 }
-function vo({
-  beacon: o,
-  config: e,
-  store: t,
-  onDismiss: r,
-  debug: i
+function we({
+  beacon: e,
+  config: t,
+  store: o,
+  onDismiss: i,
+  debug: r
 }) {
-  const p = io(), [n, s] = w(!1), { position: a, zIndex: c, offset: m, popoverPosition: f, popoverOffset: l } = mo(o, e), { calculatedPosition: v, targetElement: d } = po({
-    targetSelector: o.selector,
-    position: a,
-    offset: m,
+  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({
+    targetSelector: e.selector,
+    position: l,
+    offset: d,
     zIndex: c,
     enabled: !0,
-    debug: i
+    debug: r
   }), {
-    isOpen: C,
+    isOpen: x,
     popoverElement: R,
-    handlePopoverRef: h,
-    togglePopover: g,
-    showPopover: B,
-    hidePopover: T
-  } = ao(), {
-    triggerAnimation: L,
-    triggerDismissAnimation: b,
-    popoverOpenAnimation: V,
-    popoverCloseAnimation: E
-  } = so(o, e), k = async () => {
-    s(!0), R?.hidePopover();
-    const U = K(
-      b,
-      E
+    handlePopoverRef: P,
+    togglePopover: f,
+    showPopover: O,
+    hidePopover: I
+  } = ge(), {
+    triggerAnimation: _,
+    triggerDismissAnimation: D,
+    popoverOpenAnimation: G,
+    popoverCloseAnimation: T
+  } = ue(e, t), E = async () => {
+    a(!0), R?.hidePopover();
+    const H = re(
+      D,
+      T
     );
-    await Q(U), await Promise.resolve(t.dismiss(o.id)), r();
-  }, q = {
-    beaconId: o.id,
-    position: a,
-    popoverPosition: f,
-    popoverOffset: l,
-    calculatedPosition: v,
-    isOpen: C,
+    await ae(H), await Promise.resolve(o.dismiss(e.id)), i();
+  }, V = {
+    beaconId: e.id,
+    position: l,
+    popoverPosition: w,
+    popoverOffset: p,
+    calculatedPosition: u,
+    isOpen: x,
     isDismissing: n,
-    toggle: g,
-    open: B,
-    close: T,
-    dismiss: k,
-    triggerAnimation: L,
-    triggerDismissAnimation: b,
-    popoverOpenAnimation: V,
-    popoverCloseAnimation: E,
-    popoverId: p
-  }, G = o.trigger?.component || e.trigger?.component, N = o.popover.component || e.popover?.component;
-  return !v || !d ? (i && console.warn(
-    `[Repere] ${o.id} waiting for target element: position=${!!v}, element=${!!d}`
-  ), null) : N ? /* @__PURE__ */ W(S.Provider, { value: q, children: [
-    co(G, {
-      beacon: o,
-      calculatedPosition: v,
-      position: a,
-      isOpen: C,
-      togglePopover: g
+    toggle: f,
+    open: O,
+    close: I,
+    dismiss: E,
+    triggerAnimation: _,
+    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, {
+      beacon: e,
+      calculatedPosition: u,
+      position: l,
+      isOpen: x,
+      togglePopover: f
     }),
-    lo(N, {
-      beacon: o,
-      position: a,
-      handleDismiss: k,
-      hidePopover: T,
-      handlePopoverRef: h,
-      popoverId: p
+    he(S, {
+      beacon: e,
+      position: l,
+      handleDismiss: E,
+      hidePopover: I,
+      handlePopoverRef: P,
+      popoverId: s
     })
-  ] }) : (i && console.warn(
+  ] }) : (r && console.warn(
     "[Repere] No popover component provided for beacon:",
-    o.id
+    e.id
   ), null);
 }
-function Ro({
-  config: o,
-  currentPath: e,
-  enabled: t = !0,
-  debug: r = !1
+function Be({
+  config: e,
+  currentPath: t,
+  enabled: o = !0,
+  debug: i = !1
 }) {
-  const i = P(
-    () => o.store || new X(),
-    [o.store]
-  ), p = P(
-    () => new Y(i, { debug: r }),
-    [i, r]
-  ), [n, s] = w([]), [a, c] = w(
+  const r = y(
+    () => e.store || new oe(),
+    [e.store]
+  ), s = y(
+    () => new ce(r, { debug: i }),
+    [r, i]
+  ), [n, a] = C([]), [l, c] = C(
     /* @__PURE__ */ new Set()
   );
-  O(() => {
-    if (!t) {
-      s([]), c(/* @__PURE__ */ new Set());
+  $(() => {
+    if (!o) {
+      a([]), c(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const v = await p.getActiveBeacons(
-        o.pages,
-        e
+      const u = await s.getActiveBeacons(
+        e.pages,
+        t
       );
-      s(v);
+      a(u);
     })();
-  }, [p, o.pages, e, t]);
-  const m = (l) => {
-    c((v) => /* @__PURE__ */ new Set([...v, l]));
-  }, f = n.filter(
-    (l) => !a.has(l.id)
+  }, [s, e.pages, t, o]);
+  const d = (p) => {
+    c((u) => /* @__PURE__ */ new Set([...u, p]));
+  }, w = n.filter(
+    (p) => !l.has(p.id)
   );
-  return f.length === 0 ? null : ro(
-    f.map((l) => /* @__PURE__ */ u(
-      vo,
+  return w.length === 0 ? null : ee(
+    w.map((p) => /* @__PURE__ */ g(
+      we,
       {
-        beacon: l,
-        config: o,
-        store: i,
-        debug: r,
-        onDismiss: () => m(l.id)
+        beacon: p,
+        config: e,
+        store: r,
+        debug: i,
+        onDismiss: () => d(p.id)
       },
-      l.id
+      p.id
     )),
     document.body
   );
 }
-const z = A(
+const X = b(
   ({
-    children: o,
-    style: e,
-    popover: t = "auto",
-    disableAnimation: r,
+    children: e,
+    style: t,
+    popover: o = "auto",
+    disableAnimation: i,
     // Destructure and discard internal props so they don't spread to DOM
-    beacon: i,
-    position: p,
+    beacon: r,
+    position: s,
     onDismiss: n,
-    onClose: s,
-    ...a
+    onClose: a,
+    ...l
   }, c) => {
     const {
-      beaconId: m,
-      popoverOpenAnimation: f,
-      popoverCloseAnimation: l,
-      popoverPosition: v,
-      popoverOffset: d
-    } = I(), C = y(
-      (g) => {
-        typeof c == "function" ? c(g) : c && (c.current = g);
+      beaconId: d,
+      popoverOpenAnimation: w,
+      popoverCloseAnimation: p,
+      popoverPosition: u,
+      popoverOffset: h
+    } = k(), x = A(
+      (f) => {
+        typeof c == "function" ? c(f) : c && (c.current = f);
       },
       [c]
-    ), h = {
-      positionAnchor: m ? `--repere-trigger-${m}` : void 0,
-      ...d && {
-        marginLeft: d.x || 0,
-        marginTop: d.y || 0
+    ), P = {
+      positionAnchor: d ? `--repere-trigger-${d}` : void 0,
+      ...h && {
+        marginLeft: h.x || 0,
+        marginTop: h.y || 0
       },
-      ...Z(f, l),
-      ...e
+      ...se(w, p),
+      ...t
     };
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ g(
       "div",
       {
-        ref: C,
+        ref: x,
         role: "dialog",
-        "aria-labelledby": `repere-popover-${m}`,
+        "aria-labelledby": `repere-popover-${d}`,
         "data-repere-popover": "",
-        "data-position": v,
-        popover: t,
-        ...a,
-        style: h,
-        children: o
+        "data-position": u,
+        popover: o,
+        ...l,
+        style: P,
+        children: e
       }
     );
   }
 );
-z.displayName = "ReperePopover";
-const uo = A(
+X.displayName = "ReperePopover";
+const ye = b(
   ({
-    children: o = "Got it",
-    onClick: e,
-    as: t,
-    ...r
-  }, i) => {
-    const p = I(), n = p?.dismiss || (() => {
-    }), s = p?.popoverId;
-    return /* @__PURE__ */ u(
-      t || "button",
+    children: e = "Got it",
+    onClick: t,
+    as: o,
+    ...i
+  }, r) => {
+    const s = k(), n = s?.dismiss || (() => {
+    }), a = s?.popoverId;
+    return /* @__PURE__ */ g(
+      o || "button",
       {
-        ref: i,
-        onClick: (m) => {
-          n(), e?.(m);
+        ref: r,
+        onClick: (d) => {
+          n(), t?.(d);
         },
-        popovertarget: s,
+        popovertarget: a,
         popovertargetaction: "hide",
-        ...r,
-        children: o
+        ...i,
+        children: e
       }
     );
   }
-), go = Object.assign(uo, {
+), xe = Object.assign(ye, {
   displayName: "ReperePopover.AcknowledgeButton"
-}), F = A(({ children: o = "×", ...e }, t) => {
-  const i = I()?.popoverId;
-  return /* @__PURE__ */ u(
+}), Y = b(({ children: e = "×", ...t }, o) => {
+  const r = k()?.popoverId;
+  return /* @__PURE__ */ g(
     "button",
     {
-      ref: t,
-      popovertarget: i,
+      ref: o,
+      popovertarget: r,
       popovertargetaction: "hide",
       "aria-label": "Close",
-      ...e,
-      children: o
+      ...t,
+      children: e
     }
   );
 });
-F.displayName = "ReperePopover.CloseButton";
-const M = A(
-  ({ children: o, ...e }, t) => /* @__PURE__ */ u("div", { ref: t, ...e, children: o })
+Y.displayName = "ReperePopover.CloseButton";
+const F = b(
+  ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-M.displayName = "ReperePopover.Content";
-const _ = A(
-  ({ children: o, ...e }, t) => /* @__PURE__ */ u("div", { ref: t, ...e, children: o })
+F.displayName = "ReperePopover.Content";
+const U = b(
+  ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-_.displayName = "ReperePopover.Footer";
-const fo = A(
-  ({ children: o, as: e, ...t }, r) => {
-    const p = I()?.beaconId || "unknown";
-    return /* @__PURE__ */ u(e || "h3", { ref: r, id: `repere-popover-${p}`, ...t, children: o });
+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 });
   }
-), Po = Object.assign(fo, {
+), Pe = Object.assign(be, {
   displayName: "ReperePopover.Title"
-}), xo = Object.assign(z, {
-  Title: Po,
-  Content: M,
-  Footer: _,
-  AcknowledgeButton: go,
-  CloseButton: F
-}), Co = A(
+}), $e = Object.assign(X, {
+  Title: Pe,
+  Content: F,
+  Footer: U,
+  AcknowledgeButton: xe,
+  CloseButton: Y
+}), Ce = b(
   ({
-    children: o,
-    as: e,
-    style: t,
-    disableAnimation: r,
-    ...i
-  }, p) => {
+    children: e,
+    as: t,
+    style: o,
+    disableAnimation: i,
+    ...r
+  }, s) => {
     const {
       calculatedPosition: n,
-      beaconId: s,
-      triggerAnimation: a,
+      beaconId: a,
+      triggerAnimation: l,
       triggerDismissAnimation: c,
-      isDismissing: m,
-      popoverId: f
-    } = I(), l = e || "button", v = P(() => !e || e === "button" ? $.button : $.create(l), [e, l]);
+      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 d = {
+    const h = {
       position: n.position,
       top: n.top,
       left: n.left,
       zIndex: n.zIndex,
       pointerEvents: "auto",
       cursor: "pointer",
-      anchorName: `--repere-trigger-${s}`
-    }, C = t ? { ...d, ...t } : d, R = !r && (a || c), h = {
-      ref: p,
-      popovertarget: f,
-      "aria-label": `Beacon trigger for ${s}`,
+      anchorName: `--repere-trigger-${a}`
+    }, x = o ? { ...h, ...o } : h, R = !i && (l || c), P = {
+      ref: s,
+      popovertarget: w,
+      "aria-label": `Beacon trigger for ${a}`,
       "data-repere-trigger": "",
-      ...i
+      ...r
     };
     if (R) {
-      const g = m && c ? c : a;
-      if (!g) return null;
-      const B = oo(
+      const f = d && c ? c : l;
+      if (!f) return null;
+      const O = ie(
         n.translate,
-        g.variants
+        f.variants
       );
-      return /* @__PURE__ */ u(
-        v,
+      return /* @__PURE__ */ g(
+        u,
         {
           initial: "initial",
-          animate: m ? "exit" : "animate",
-          variants: B,
-          transition: g.transition,
-          ...h,
-          style: C,
-          children: o
+          animate: d ? "exit" : "animate",
+          variants: O,
+          transition: f.transition,
+          ...P,
+          style: x,
+          children: e
         }
       );
     }
-    return /* @__PURE__ */ u(
-      l,
+    return /* @__PURE__ */ g(
+      p,
       {
-        ...h,
+        ...P,
         style: {
-          ...C,
+          ...x,
           translate: `${n.translate.x} ${n.translate.y}`
         },
-        children: o
+        children: e
       }
     );
   }
-), Do = Object.assign(Co, {
+), Oe = Object.assign(Ce, {
   displayName: "RepereTrigger"
 });
 export {
-  Ro as Beacons,
-  xo as ReperePopover,
-  Do as RepereTrigger
+  v as Animation,
+  Be as Beacons,
+  m as Position,
+  $e as ReperePopover,
+  Oe as RepereTrigger
 };

package/dist/styles.css

@@ -0,0 +1 @@
+[data-repere-popover]{position:absolute;position-anchor:var(--repere-anchor);inset:unset;margin:0;opacity:var(--repere-exit-opacity, 0);transform:translate(var(--repere-exit-x, 0)) translateY(var(--repere-exit-y, -20px)) scale(var(--repere-exit-scale, 1));transition-property:opacity,transform,overlay,display;transition-duration:var(--repere-transition-duration, .3s);transition-timing-function:var( --repere-transition-timing, cubic-bezier(.4, 0, .2, 1) );transition-behavior:allow-discrete}[data-repere-popover]:popover-open{opacity:var(--repere-animate-opacity, 1);transform:translate(var(--repere-animate-x, 0)) translateY(var(--repere-animate-y, 0)) scale(var(--repere-animate-scale, 1))}@starting-style{[data-repere-popover]:popover-open{opacity:var(--repere-initial-opacity, 0);transform:translate(var(--repere-initial-x, 0)) translateY(var(--repere-initial-y, -20px)) scale(var(--repere-initial-scale, 1))}}[data-repere-popover][data-position=bottom-left]{top:anchor(bottom);left:anchor(left);position-try-fallbacks:--bottom-right,--top-left,--top-right}[data-repere-popover][data-position=bottom-center]{top:anchor(bottom);left:anchor(center);translate:-50% 0;position-try-fallbacks:--bottom-left,--bottom-right,--top-center}[data-repere-popover][data-position=bottom-right]{top:anchor(bottom);right:anchor(right);position-try-fallbacks:--bottom-left,--top-right,--top-left}[data-repere-popover][data-position=top-left]{bottom:anchor(top);left:anchor(left);position-try-fallbacks:--top-right,--bottom-left,--bottom-right}[data-repere-popover][data-position=top-center]{bottom:anchor(top);left:anchor(center);translate:-50% 0;position-try-fallbacks:--top-left,--top-right,--bottom-center}[data-repere-popover][data-position=top-right]{bottom:anchor(top);right:anchor(right);position-try-fallbacks:--top-left,--bottom-right,--bottom-left}[data-repere-popover][data-position=left-center]:popover-open{top:anchor(center);right:anchor(left);translate:0 -50%;position-try-fallbacks:--right-center,--bottom-center,--top-center}[data-repere-popover][data-position=right-center]:popover-open{top:anchor(center);left:anchor(right);translate:0 -50%;position-try-fallbacks:--left-center,--bottom-center,--top-center}[data-repere-trigger]{anchor-name:var(--repere-anchor)}@position-try --bottom-left{top:anchor(bottom);left:anchor(left);right:auto;bottom:auto;translate:0 0}@position-try --bottom-right{top:anchor(bottom);right:anchor(right);left:auto;bottom:auto;translate:0 0}@position-try --bottom-center{top:anchor(bottom);left:anchor(center);right:auto;bottom:auto;translate:-50% 0}@position-try --top-left{bottom:anchor(top);left:anchor(left);right:auto;top:auto;translate:0 0}@position-try --top-right{bottom:anchor(top);right:anchor(right);left:auto;top:auto;translate:0 0}@position-try --top-center{bottom:anchor(top);left:anchor(center);right:auto;top:auto;translate:-50% 0}@position-try --left-center{top:anchor(center);right:anchor(left);left:auto;bottom:auto;translate:0 -50%}@position-try --right-center{top:anchor(center);left:anchor(right);right:auto;bottom:auto;translate:0 -50%}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@repere/react",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "private": false,
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
@@ -15,10 +16,10 @@
   "peerDependencies": {
     "motion": "^12.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@repere/core": "0.0.3"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",