@fragmentsx/runtime-react 0.2.0-dev-20261011155313 → 0.2.0-dev-20261022125555

package/README.md

@@ -9,14 +9,15 @@ React.
 
 Скомпилированный сервером фрагмент — это ESM-артефакт, который нужно
 загрузить, смонтировать в дерево React, подключить его стили и дать доступ
-к метрикам и переменным области. `runtime-react` закрывает весь этот путь:
+к данным области и переменным площадки. `runtime-react` закрывает весь этот путь:
 
 - `FragmentsProvider` — контекст клиента на дерево приложения;
 - `Area` / `FragmentRenderer` — резолвинг области и рендер фрагмента;
 - `useFragmentComponent`, `useFragmentStylesheet`, `FragmentStylesheet` —
   подгрузка компонента и его CSS;
-- `useFragmentMetrics`, `useArea`, `useProjectProperty` — доступ к метрикам,
-  данным области и project-переменным площадки внутри фрагмента.
+- `useArea`, `useProjectProperty` — доступ к данным области и
+  project-переменным площадки внутри фрагмента;
+- `useGoal` — измерение целей: единственный путь, прежний хук метрик снят.
 
 ## Установка
 

package/dist/index.d.ts

@@ -1,9 +1,11 @@
+import { AreaExperiment } from '@fragmentsx/fragments-client';
 import { AreaSourceTransport } from '@fragmentsx/fragments-client';
 import { ComponentType } from 'react';
 import { Context } from 'react';
 import { createFragmentsClient } from '@fragmentsx/fragments-client';
 import { CreateFragmentsClientOptions } from '@fragmentsx/fragments-client';
 import { createSourceCache } from '@fragmentsx/fragments-client';
+import { ExperimentEvent } from '@fragmentsx/fragments-client';
 import { FC } from 'react';
 import { FragmentsApiVersionError } from '@fragmentsx/fragments-client';
 import { FragmentsAreaError } from '@fragmentsx/fragments-client';
@@ -53,6 +55,16 @@ export declare type AreaEmptyReason = {
 /** D-110-01/D-110-02: semantic category for a terminal area resolution outcome. */
 export declare type AreaEmptyReasonKind = "no-variant" | "misconfigured" | "failed";
 
+export declare const AreaExposureContext: Context<AreaExposureValue | null>;
+
+export declare interface AreaExposureValue {
+    experiment: AreaExperiment;
+    viewId: string;
+    emit: (event: ExperimentEvent) => void;
+    reachedGoals: Set<string>;
+    ensureImpression: () => void;
+}
+
 /**
  * Props для Area компонента (D-09, сокращён Phase 73 B-13; расширен quick 260830-rvp):
  *   - areaCode — строковый код области (Area.code в backend schema)
@@ -303,10 +315,6 @@ declare type FieldRequired<F extends SchemaFieldDescriptor, ConsiderDefault exte
  */
 declare type FieldValueType<F extends SchemaFieldDescriptor, D extends number> = F["type"] extends "Enum" ? EnumFieldType<F> : F["type"] extends "Object" ? ObjectFieldType<F, D> : F["type"] extends "Array" ? ArrayFieldType<F, D> : F["type"] extends typeof NODE_SCHEMA_TYPE ? ValueOfNodeType : ValueOfVariableType<Extract<F["type"], VariableType>>;
 
-export declare interface FragmentMetrics {
-    reachGoal: (info: ReachGoalInfo) => void;
-}
-
 /**
  * Публичный компонент — тело композиции за собственными Suspense + границей
  * ошибок. `Area` тело не использует напрямую (у неё Suspense/граница уже
@@ -364,9 +372,8 @@ export declare type FragmentsClient = GraphState;
 /**
  * Single source of truth для FragmentsClient в compiled output.
  *
- * Значение `null` означает «client ещё не установлен» — defensive в
- * `useFragmentMetrics` чтобы reachGoal был no-op (preview / SSG-первая загрузка
- * до hydration).
+ * Значение `null` означает «client ещё не установлен» (preview / SSG-первая
+ * загрузка до hydration) — потребители обязаны это терпеть.
  */
 export declare const FragmentsClientContext: Context<FragmentsClient | null>;
 
@@ -389,7 +396,7 @@ export { FragmentsLoadError }
  * Unified Provider для compiled fragments.
  *
  * Одновременно устанавливает:
- *   - FragmentsClientContext: client — для useArea cache lookup + $metrics.reachGoal
+ *   - FragmentsClientContext: client — для useArea cache lookup (цели — через useGoal)
  *   - ModulesMapContext: {read} cache-reader — для useFragmentComponent delegation
  *
  * useMemo критично — Context value identity stability (без него cache invalidation
@@ -411,6 +418,14 @@ declare interface FragmentStylesheetProps {
     fragmentKey: string;
 }
 
+/**
+ * Пустая карта целей: её дописывает аугментация гейта из реестра проекта. Без
+ * аугментации `keyof GoalMap` — `never`, и любой вызов `useGoal` — ошибка
+ * компиляции (fail-closed, как `ProjectProperties`).
+ */
+export declare interface GoalMap {
+}
+
 /** Присутствие КЛЮЧА `defaultValue`, а не истинность его значения (Phase 97, план 97-02): `defaultValue: 0`/`''`/`false`/`null` — присутствующие значения, `keyof F` включает ключ ровно тогда, когда он был указан в литерале поля. */
 declare type HasDefaultValueKey<F> = "defaultValue" extends keyof F ? true : false;
 
@@ -602,19 +617,6 @@ declare type PropsShape<S extends Record<string, SchemaFieldDescriptor>, Conside
     [K in keyof S as FieldRequired<S[K], ConsiderDefault> extends true ? never : K]?: FieldValueType<S[K], D>;
 }>;
 
-/**
- * Payload для `reachGoal`. Phase 3 НЕ автоинъектит scope-поля
- * (variantId / areaId / campaignId) — caller передаёт явно, типизация
- * сообщает о доступных полях. Совпадает по shape с
- * `client-core.metricsPlugin GoalInfo` (см. metrics/index.ts).
- */
-export declare interface ReachGoalInfo {
-    goalId: number;
-    variantId?: number;
-    areaId?: number;
-    campaignId?: number;
-}
-
 /**
  * Дескриптор ОДНОГО поля литерала `schema` артефакта (Phase 97, план 97-02,
  * TYPES-03/04) — форма, которую `PropsFromSchema` видит в TSX-исходнике
@@ -741,6 +743,12 @@ export declare interface UseAreaResult {
      * поле обязательное и nullable, а не опциональное.
      */
     variantId: number | null;
+    /**
+     * Phase 128 (D-11, EVT-01): блок эксперимента для трассера аналитики.
+     * Обязательное и nullable — по образцу variantId. null — старый манифест,
+     * кампания не активна, превью или сентинел AREA_UNRESOLVED.
+     */
+    experiment: AreaExperiment | null;
     /**
      * Phase 73, B-02/B-06: значения props корневого артефакта, разрешённые сервером
      * (`resolveVariantProps`) — привязки `$ref` сюда не доезжают, только готовые значения.
@@ -830,16 +838,10 @@ export declare function useCssChunk(_chunkId: number): void;
 
 export declare function useFragmentComponent(fragmentId: number): ComponentType<any>;
 
-/**
- * Возвращает обёртку над client.$metrics.reachGoal.
- *
- * - Без `<FragmentsClientProvider>` — reachGoal no-op (не бросает).
- * - С provider — делегирует на `client.$metrics.reachGoal(info)`.
- */
-export declare function useFragmentMetrics(): FragmentMetrics;
-
 export declare function useFragmentStylesheet(href: string, key: string): void;
 
+export declare function useGoal<K extends keyof GoalMap & string>(key: K): () => void;
+
 export declare function useProjectProperty<K extends keyof ProjectProperties>(name: K): ProjectProperties[K];
 
 export declare type UseSource = <S extends keyof SourceMap & string, O extends keyof SourceMap[S] & string>(source: S, options: Options<S, O>) => UseSourceResult<Operation<S, O>["response"]>;

package/dist/index.es.js

@@ -1,51 +1,40 @@
-import { jsx as i, jsxs as oe, Fragment as le } from "react/jsx-runtime";
-import * as de from "react";
-import { createContext as N, useContext as g, useMemo as k, useState as w, useEffect as P, useLayoutEffect as ie, version as fe, Component as me, Suspense as G, createElement as he, useCallback as _, useRef as x, useReducer as Ee } from "react";
-import { FragmentsAreaError as ge, toScopeClassName as ve, AREA_GLOBAL_CSS_KEY as ye, resolveStylesHref as Se, fragmentCssKey as Pe, createSourceCache as Ne, sourceCallKey as D, sourceTransportKey as Ae, resolveSourceRequest as Ce, runSourceFetch as ke, createFragmentsClient as Oe } from "@fragmentsx/fragments-client";
-import { FragmentsApiVersionError as ar, FragmentsAreaError as cr, FragmentsLoadError as ur, createSourceCache as or } from "@fragmentsx/fragments-client";
-const C = N(
+import { jsx as l, jsxs as Ie, Fragment as Ne } from "react/jsx-runtime";
+import * as ke from "react";
+import { createContext as I, useContext as w, useState as L, useEffect as R, useLayoutEffect as _e, version as Fe, Component as Me, Suspense as de, useMemo as j, createElement as Le, useRef as A, useCallback as B, useReducer as je } from "react";
+import { FragmentsAreaError as Be, toScopeClassName as He, AREA_GLOBAL_CSS_KEY as Ue, resolveStylesHref as $e, fragmentCssKey as De, createSourceCache as Ve, sourceCallKey as re, sourceTransportKey as ze, resolveSourceRequest as Ke, runSourceFetch as Ge, createFragmentsClient as Ye } from "@fragmentsx/fragments-client";
+import { FragmentsApiVersionError as kr, FragmentsAreaError as _r, FragmentsLoadError as Fr, createSourceCache as Mr } from "@fragmentsx/fragments-client";
+const F = I(
   null
 );
-C.displayName = "FragmentsClientContext";
-function we(r) {
-  return /* @__PURE__ */ i(C.Provider, { value: r.value, children: r.children });
+F.displayName = "FragmentsClientContext";
+function Je(r) {
+  return /* @__PURE__ */ l(F.Provider, { value: r.value, children: r.children });
 }
-function Te() {
-  return g(C);
+function We() {
+  return w(F);
 }
-const J = N(null);
-J.displayName = "InstanceIdContext";
-const T = N(
+const fe = I(null);
+fe.displayName = "InstanceIdContext";
+const V = I(
   null
 );
-T.displayName = "ModulesMapContext";
-function be({
+V.displayName = "ModulesMapContext";
+function Xe({
   value: r,
   children: e
 }) {
-  return /* @__PURE__ */ i(T.Provider, { value: r, children: e });
+  return /* @__PURE__ */ l(V.Provider, { value: r, children: e });
 }
-function qe() {
-  const r = g(C);
-  return k(
-    () => ({
-      reachGoal: (e) => {
-        var t, n;
-        (n = (t = r == null ? void 0 : r.$metrics) == null ? void 0 : t.reachGoal) == null || n.call(t, e);
-      }
-    }),
-    [r]
-  );
-}
-function Fe(r) {
-  const e = g(T);
+function qe(r) {
+  const e = w(V);
   if (!e)
     throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
   return e.read(r);
 }
-const L = typeof window < "u", H = Object.freeze({
+const te = typeof window < "u", ne = Object.freeze({
   rootFragmentId: 0,
   variantId: null,
+  experiment: null,
   props: {},
   projectProperties: {},
   projectBindings: {},
@@ -57,100 +46,100 @@ const L = typeof window < "u", H = Object.freeze({
   slots: {},
   sources: {}
 });
-function R(r) {
+function G(r) {
   const e = r.$area;
   if (!(e != null && e.read))
     throw new Error("[useArea] $area plugin not mounted");
   return e;
 }
-function Re(r, e) {
-  const t = g(C);
+function Qe(r, e) {
+  const t = w(F);
   if (!t)
     throw new Error("[useArea] No FragmentsClientProvider in tree");
-  const n = (e == null ? void 0 : e.suspense) ?? !0, s = (e == null ? void 0 : e.pause) === !0 || !L && (e == null ? void 0 : e.ssr) === !1, a = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, o] = w(0);
-  if (P(() => {
+  const n = (e == null ? void 0 : e.suspense) ?? !0, s = (e == null ? void 0 : e.pause) === !0 || !te && (e == null ? void 0 : e.ssr) === !1, c = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, o] = L(0);
+  if (R(() => {
     if (n || s) return;
-    const c = R(t);
-    let u = !0;
-    return Promise.resolve(c.resolve(r, a)).catch(() => {
+    const u = G(t);
+    let a = !0;
+    return Promise.resolve(u.resolve(r, c)).catch(() => {
     }).finally(() => {
-      u && o((f) => f + 1);
+      a && o((d) => d + 1);
     }), () => {
-      u = !1;
+      a = !1;
     };
   }, [r, n, e == null ? void 0 : e.pause, e == null ? void 0 : e.timeout, e == null ? void 0 : e.ssr]), n) {
     if (s)
-      return H;
-    const c = R(t);
-    if (c.has(r) || Promise.resolve(c.resolve(r, a)).catch(() => {
-    }), !L)
+      return ne;
+    const u = G(t);
+    if (u.has(r) || Promise.resolve(u.resolve(r, c)).catch(() => {
+    }), !te)
       try {
-        return c.read(r);
-      } catch (u) {
-        if (u != null && typeof u.then == "function")
-          throw u;
+        return u.read(r);
+      } catch (a) {
+        if (a != null && typeof a.then == "function")
+          throw a;
         return process.env.NODE_ENV !== "production" && console.error(
           `[useArea] Area ${r} remained unresolved on the server because its cache reached a terminal state`,
-          u
-        ), H;
+          a
+        ), ne;
       }
-    return c.read(r);
+    return u.read(r);
   }
   if (s)
     return { status: "idle", data: null, error: null };
-  const h = R(t);
-  if (h.has(r))
+  const m = G(t);
+  if (m.has(r))
     try {
-      return { status: "ready", data: h.read(r), error: null };
-    } catch (c) {
+      return { status: "ready", data: m.read(r), error: null };
+    } catch (u) {
       return {
         status: "not-found",
         data: null,
-        error: c instanceof Error ? c : new Error(String(c))
+        error: u instanceof Error ? u : new Error(String(u))
       };
     }
-  return Promise.resolve(h.resolve(r, a)).catch(() => {
+  return Promise.resolve(m.resolve(r, c)).catch(() => {
   }), { status: "loading", data: null, error: null };
 }
-const q = typeof window < "u", _e = 3e3, O = /* @__PURE__ */ new Map(), Q = (r, e) => {
-  if (!q) {
-    const E = () => {
+const me = typeof window < "u", Ze = 3e3, D = /* @__PURE__ */ new Map(), he = (r, e) => {
+  if (!me) {
+    const h = () => {
     };
-    return E.loaded = Promise.resolve(), E;
+    return h.loaded = Promise.resolve(), h;
   }
-  const t = O.get(e);
+  const t = D.get(e);
   if (t) {
     t.refCount += 1;
-    const E = () => {
-      t.refCount -= 1, t.refCount === 0 && (t.clearReadyTimer(), t.linkEl.remove(), O.delete(e));
+    const h = () => {
+      t.refCount -= 1, t.refCount === 0 && (t.clearReadyTimer(), t.linkEl.remove(), D.delete(e));
     };
-    return E.loaded = t.loaded, E;
+    return h.loaded = t.loaded, h;
   }
   const n = document.createElement("link");
   n.rel = "stylesheet", n.href = r, n.setAttribute("data-fragment-key", e);
   let s;
-  const a = new Promise((E) => {
-    s = E;
+  const c = new Promise((h) => {
+    s = h;
   }), o = () => {
-    c(), s();
-  }, h = setTimeout(o, _e), c = () => clearTimeout(h);
+    u(), s();
+  }, m = setTimeout(o, Ze), u = () => clearTimeout(m);
   n.addEventListener("load", o), n.addEventListener("error", o), document.head.appendChild(n);
-  const u = { refCount: 1, linkEl: n, loaded: a, clearReadyTimer: c };
-  O.set(e, u);
-  const f = () => {
-    u.refCount -= 1, u.refCount === 0 && (u.clearReadyTimer(), u.linkEl.remove(), O.delete(e));
+  const a = { refCount: 1, linkEl: n, loaded: c, clearReadyTimer: u };
+  D.set(e, a);
+  const d = () => {
+    a.refCount -= 1, a.refCount === 0 && (a.clearReadyTimer(), a.linkEl.remove(), D.delete(e));
   };
-  return f.loaded = a, f;
-}, xe = q ? ie : P;
-function je(r, e) {
-  xe(() => Q(r, e), [r, e]);
+  return d.loaded = c, d;
+}, er = me ? _e : R;
+function rr(r, e) {
+  er(() => he(r, e), [r, e]);
 }
-const Ie = parseInt(fe.split(".")[0], 10), Me = Ie >= 19;
-function U({
+const tr = parseInt(Fe.split(".")[0], 10), nr = tr >= 19;
+function oe({
   href: r,
   fragmentKey: e
 }) {
-  return Me ? /* @__PURE__ */ i(
+  return nr ? /* @__PURE__ */ l(
     "link",
     {
       rel: "stylesheet",
@@ -158,50 +147,50 @@ function U({
       precedence: "default",
       "data-fragment-key": e
     }
-  ) : (je(r, e), null);
+  ) : (rr(r, e), null);
 }
-function Qe(r) {
+function Sr(r) {
 }
-const W = Object.freeze({}), b = N(W);
-b.displayName = "HostPropertiesContext";
-const X = {}, j = N(null);
-j.displayName = "ProjectPropertiesContext";
-const Z = Object.freeze({}), I = N(Z);
-I.displayName = "SourceTransportsContext";
-const M = N("live");
-M.displayName = "SourceNetworkContext";
-function V(r) {
+const ve = Object.freeze({}), z = I(ve);
+z.displayName = "HostPropertiesContext";
+const ge = {}, Y = I(null);
+Y.displayName = "ProjectPropertiesContext";
+const Ee = Object.freeze({}), J = I(Ee);
+J.displayName = "SourceTransportsContext";
+const W = I("live");
+W.displayName = "SourceNetworkContext";
+function se(r) {
   const e = r instanceof Error ? r : new Error(String(r));
-  if (!(e instanceof ge))
+  if (!(e instanceof Be))
     return { kind: "failed", error: e };
   const { code: t } = e;
   return t === "NO_ACTIVE_VARIANT" ? { kind: "no-variant", code: t, error: e } : t === "AREA_NOT_FOUND" || t === "NO_PUBLISHED_SNAPSHOT" || t === "NESTED_SNAPSHOT_MISSING" ? { kind: "misconfigured", code: t, error: e } : { kind: "failed", code: t, error: e };
 }
-function ee(r, e, t) {
+function ye(r, e, t) {
   return typeof r == "function" ? r(e, t) : r ?? null;
 }
-const pe = () => {
+const or = () => {
 };
-function K(r) {
+function ce(r) {
   return r instanceof Error ? r : new Error(String(r));
 }
-class re extends me {
+class pe extends Me {
   constructor() {
     super(...arguments), this.state = { hasError: !1, error: null };
   }
   static getDerivedStateFromError(e) {
-    return { hasError: !0, error: K(e) };
+    return { hasError: !0, error: ce(e) };
   }
   componentDidCatch(e, t) {
-    var s, a;
-    const n = K(e);
-    process.env.NODE_ENV !== "production" && console.error("[fragments] Area error:", n, t.componentStack), (a = (s = this.props).onError) == null || a.call(s, n);
+    var s, c;
+    const n = ce(e);
+    process.env.NODE_ENV !== "production" && console.error("[fragments] Area error:", n, t.componentStack), (c = (s = this.props).onError) == null || c.call(s, n);
   }
   render() {
     if (this.state.hasError) {
       const e = { kind: "failed", error: this.state.error ?? new Error("Unknown Area error") };
       try {
-        return ee(this.props.empty, e, this.props.retry ?? pe);
+        return ye(this.props.empty, e, this.props.retry ?? or);
       } catch {
         return null;
       }
@@ -209,36 +198,36 @@ class re extends me {
     return this.props.children;
   }
 }
-function $e(r, e) {
+function sr(r, e) {
   let t;
   for (const [n, s] of Object.entries(e))
     s != null && (t ?? (t = { ...r }), t[n] = s);
   return t ?? r;
 }
-function Be(r, e) {
+function cr(r, e) {
   const t = Object.keys(r);
   return t.length !== Object.keys(e).length ? !1 : t.every((n) => Object.prototype.hasOwnProperty.call(e, n) && Object.is(r[n], e[n]));
 }
-const te = Object.freeze({});
-function ne(r, e, t) {
+const xe = Object.freeze({});
+function we(r, e, t) {
   let n;
-  for (const [s, a] of Object.entries(e)) {
-    const o = t[a];
+  for (const [s, c] of Object.entries(e)) {
+    const o = t[c];
     o != null && (n ?? (n = { ...r }), n[s] = o);
   }
   return n ?? r;
 }
-function se(r, e, t) {
+function Se(r, e, t) {
   if (!r) return {};
   const n = {};
   for (const s of Object.keys(r))
-    n[s] = De(r[s], e, t);
+    n[s] = ur(r[s], e, t);
   return n;
 }
-function De(r, e, t) {
-  return Array.isArray(r) ? r.map((n, s) => n === null ? null : z(n, e, t, s)) : z(r, e, t);
+function ur(r, e, t) {
+  return Array.isArray(r) ? r.map((n, s) => n === null ? null : ue(n, e, t, s)) : ue(r, e, t);
 }
-function z(r, e, t, n) {
+function ue(r, e, t, n) {
   let s;
   try {
     s = e(r.fragmentId);
@@ -247,176 +236,371 @@ function z(r, e, t, n) {
       throw o;
     return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`, o), null;
   }
-  const a = se(r.slots, e, t);
-  return he(s, { key: n, ...ne(r.props, r.projectBindings ?? te, t), ...a });
+  const c = Se(r.slots, e, t);
+  return Le(s, { key: n, ...we(r.props, r.projectBindings ?? xe, t), ...c });
 }
-const ae = ({
+const be = ({
   fragmentId: r,
   props: e,
   globalCssUrl: t = null,
-  projectProperties: n = X,
+  projectProperties: n = ge,
   fragments: s = [r],
-  slots: a,
-  sources: o = Z,
-  sourceNetwork: h = "live"
+  slots: c,
+  sources: o = Ee,
+  sourceNetwork: m = "live"
 }) => {
-  const c = Fe(r), u = g(T), f = g(b);
-  if (!u)
+  const u = qe(r), a = w(V), d = w(z);
+  if (!a)
     throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");
-  const E = se(a, u.read, f), A = k(
-    () => $e(n, f),
-    [n, f]
-  ), l = { ...e ?? {}, ...E }, v = s.length > 0 ? s.map(ve).join(" ") : void 0;
-  return /* @__PURE__ */ oe(le, { children: [
-    t != null && /* @__PURE__ */ i(
-      U,
+  const h = Se(c, a.read, d), S = j(
+    () => sr(n, d),
+    [n, d]
+  ), f = { ...e ?? {}, ...h }, T = s.length > 0 ? s.map(He).join(" ") : void 0;
+  return /* @__PURE__ */ Ie(Ne, { children: [
+    t != null && /* @__PURE__ */ l(
+      oe,
       {
         href: t,
-        fragmentKey: ye
+        fragmentKey: Ue
       }
     ),
-    s.map((y) => {
-      const m = Se(y);
-      return m ? /* @__PURE__ */ i(
-        U,
+    s.map((v) => {
+      const p = $e(v);
+      return p ? /* @__PURE__ */ l(
+        oe,
         {
-          href: m,
-          fragmentKey: Pe(y)
+          href: p,
+          fragmentKey: De(v)
         },
-        y
+        v
       ) : null;
     }),
-    /* @__PURE__ */ i(M.Provider, { value: h, children: /* @__PURE__ */ i(I.Provider, { value: o, children: /* @__PURE__ */ i(j.Provider, { value: A, children: /* @__PURE__ */ i(J.Provider, { value: null, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ l(W.Provider, { value: m, children: /* @__PURE__ */ l(J.Provider, { value: o, children: /* @__PURE__ */ l(Y.Provider, { value: S, children: /* @__PURE__ */ l(fe.Provider, { value: null, children: /* @__PURE__ */ l(
       "div",
       {
-        className: v,
+        className: T,
         style: { display: "contents" },
-        children: /* @__PURE__ */ i(c, { ...l })
+        children: /* @__PURE__ */ l(u, { ...f })
       }
     ) }) }) }) })
   ] });
-}, We = ({ onError: r, ...e }) => /* @__PURE__ */ i(G, { fallback: null, children: /* @__PURE__ */ i(re, { onError: r, children: /* @__PURE__ */ i(ae, { ...e }) }) }), Le = ({ areaCode: r, options: e, retry: t }) => {
-  const n = Re(r, {
+}, br = ({ onError: r, ...e }) => /* @__PURE__ */ l(de, { fallback: null, children: /* @__PURE__ */ l(pe, { onError: r, children: /* @__PURE__ */ l(be, { ...e }) }) }), X = I(null);
+X.displayName = "AreaExposureContext";
+const ar = 1e3, ir = Array.from({ length: 101 }, (r, e) => e / 100);
+function lr({
+  visibleArea: r,
+  totalArea: e,
+  visibleHeight: t,
+  viewportHeight: n
+}) {
+  if (r <= 0)
+    return !1;
+  const s = e > 0 && r >= 0.5 * e, c = n > 0 && t >= 0.5 * n;
+  return s || c;
+}
+function ae() {
+  return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (r) => {
+    const e = Math.random() * 16 | 0;
+    return (r === "x" ? e : e & 3 | 8).toString(16);
+  });
+}
+function ie(r) {
+  const e = r.getBoundingClientRect();
+  return e.width > 0 && e.height > 0;
+}
+function dr(r) {
+  const e = [];
+  function t(n, s) {
+    var c;
+    for (const o of Array.from(n.children)) {
+      let m = "";
+      try {
+        m = window.getComputedStyle(o).display;
+      } catch {
+        m = ((c = o.style) == null ? void 0 : c.display) || "";
+      }
+      if (m === "contents")
+        t(o, s);
+      else if (m === "none" || ie(o))
+        s.push(o);
+      else {
+        const u = [];
+        t(o, u), u.some(ie) ? s.push(...u) : s.push(o);
+      }
+    }
+  }
+  return t(r, e), e;
+}
+const fr = ({
+  experiment: r,
+  emit: e,
+  children: t
+}) => {
+  const [n, s] = L(ae), c = A(!1), o = A(null), m = A(/* @__PURE__ */ new Set()), u = A(null), a = A(r);
+  a.current = r;
+  const d = A(e);
+  d.current = e;
+  const h = A(n);
+  h.current = n;
+  const S = B(() => {
+    c.current || (c.current = !0, o.current && (clearTimeout(o.current), o.current = null), d.current({
+      type: "impression",
+      experiment: a.current,
+      viewId: h.current
+    }));
+  }, []), f = j(
+    () => ({
+      experiment: r,
+      viewId: n,
+      emit: e,
+      reachedGoals: m.current,
+      ensureImpression: S
+    }),
+    [r, n, e, S]
+  );
+  return R(() => {
+    if (typeof window > "u" || typeof IntersectionObserver > "u")
+      return;
+    const T = u.current;
+    if (!T) return;
+    let v = [];
+    const p = /* @__PURE__ */ new Map(), i = () => !(typeof document > "u" || "visibilityState" in document && document.visibilityState === "hidden" || "prerendering" in document && document.prerendering), y = () => {
+      if (c.current || v.length === 0) return;
+      let P = 0, E = 0, M = !1, k = 1 / 0, _ = -1 / 0;
+      for (const K of v) {
+        const x = p.get(K);
+        x && (P += x.interArea, E += x.boundArea, x.interArea > 0 && x.interBottom > x.interTop && (M = !0, x.interTop < k && (k = x.interTop), x.interBottom > _ && (_ = x.interBottom)));
+      }
+      const U = M ? Math.max(0, _ - k) : 0, $ = typeof window < "u" ? window.innerHeight : 0;
+      i() && lr({
+        visibleArea: P,
+        totalArea: E,
+        visibleHeight: U,
+        viewportHeight: $
+      }) ? o.current || (o.current = setTimeout(() => {
+        o.current = null, S();
+      }, ar)) : o.current && (clearTimeout(o.current), o.current = null);
+    }, g = new IntersectionObserver(
+      (P) => {
+        var E, M, k, _, U, $;
+        for (const O of P) {
+          const K = ((E = O.boundingClientRect) == null ? void 0 : E.width) ?? 0, x = ((M = O.boundingClientRect) == null ? void 0 : M.height) ?? 0, Ae = ((k = O.intersectionRect) == null ? void 0 : k.width) ?? 0, Te = ((_ = O.intersectionRect) == null ? void 0 : _.height) ?? 0, ee = K * x, Re = Ae * Te, Ce = ((U = O.intersectionRect) == null ? void 0 : U.top) ?? 0, Oe = (($ = O.intersectionRect) == null ? void 0 : $.bottom) ?? 0;
+          p.set(O.target, {
+            interArea: ee > 0 ? Re : 0,
+            boundArea: ee,
+            interTop: Ce,
+            interBottom: Oe
+          });
+        }
+        c.current || y();
+      },
+      { threshold: ir }
+    ), C = () => {
+      if (c.current || !u.current) return;
+      const P = dr(u.current);
+      for (const E of v)
+        P.includes(E) || (g.unobserve(E), p.delete(E));
+      for (const E of P)
+        v.includes(E) || g.observe(E);
+      v = P;
+    };
+    C();
+    let b = null;
+    typeof MutationObserver < "u" && (b = new MutationObserver(() => {
+      c.current || C();
+    }), b.observe(T, { childList: !0, subtree: !0 }));
+    const N = () => {
+      typeof document < "u" && document.visibilityState === "hidden" ? o.current && (clearTimeout(o.current), o.current = null) : y();
+    }, H = () => {
+      y();
+    }, q = () => {
+      o.current && (clearTimeout(o.current), o.current = null);
+    }, Q = () => {
+      y();
+    }, Z = (P) => {
+      if (P.persisted) {
+        o.current && (clearTimeout(o.current), o.current = null), c.current = !1;
+        const E = ae();
+        h.current = E, s(E), y();
+      }
+    };
+    return typeof document < "u" && (document.addEventListener("visibilitychange", N), document.addEventListener("prerenderingchange", H)), typeof window < "u" && (window.addEventListener("pagehide", q), window.addEventListener("resize", Q), window.addEventListener("pageshow", Z)), () => {
+      o.current && (clearTimeout(o.current), o.current = null), g.disconnect(), b && b.disconnect(), typeof document < "u" && (document.removeEventListener("visibilitychange", N), document.removeEventListener("prerenderingchange", H)), typeof window < "u" && (window.removeEventListener("pagehide", q), window.removeEventListener("resize", Q), window.removeEventListener("pageshow", Z));
+    };
+  }, [r, e]), /* @__PURE__ */ l(X.Provider, { value: f, children: /* @__PURE__ */ l("div", { ref: u, style: { display: "contents" }, children: t }) });
+}, mr = ({ areaCode: r, options: e, retry: t }) => {
+  const n = Qe(r, {
     suspense: !1,
     ssr: !1,
     pause: e == null ? void 0 : e.pause,
     timeout: e == null ? void 0 : e.timeout
-  }), s = g(b), a = x(null);
-  if (P(() => {
-    var S;
+  }), s = w(z), c = w(F), o = A(null);
+  if (R(() => {
+    var b;
     if (n.status !== "not-found" || !n.error) return;
-    const m = V(n.error), d = JSON.stringify([r, m.kind, m.code, m.error.message]);
-    a.current !== d && (a.current = d, (S = e == null ? void 0 : e.onError) == null || S.call(e, m.error), process.env.NODE_ENV !== "production" && m.kind !== "no-variant" && console.error(
-      `[fragments] Area resolution ${m.kind}: areaCode=${r}, code=${m.code ?? "none"}`,
-      m.error
+    const g = se(n.error), C = JSON.stringify([
+      r,
+      g.kind,
+      g.code,
+      g.error.message
+    ]);
+    o.current !== C && (o.current = C, (b = e == null ? void 0 : e.onError) == null || b.call(e, g.error), process.env.NODE_ENV !== "production" && g.kind !== "no-variant" && console.error(
+      `[fragments] Area resolution ${g.kind}: areaCode=${r}, code=${g.code ?? "none"}`,
+      g.error
     ));
   }, [r, e == null ? void 0 : e.onError, n.error, n.status]), (e == null ? void 0 : e.pause) === !0)
     return null;
   if (n.status === "idle")
     return (e == null ? void 0 : e.fallback) ?? null;
   if (n.status === "not-found")
-    return ee(e == null ? void 0 : e.empty, V(n.error), t);
+    return ye(
+      e == null ? void 0 : e.empty,
+      se(n.error),
+      t
+    );
   if (n.status === "loading" || !n.data)
     return (e == null ? void 0 : e.fallback) ?? null;
-  const { rootFragmentId: o, props: h, projectProperties: c, globalCssUrl: u, fragments: f, slots: E, sources: A, projectBindings: l } = n.data, v = ne(h, l ?? te, s), y = typeof (e == null ? void 0 : e.props) == "function" ? e.props(v) : e != null && e.props ? { ...v, ...e.props } : v;
-  return /* @__PURE__ */ i(G, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: /* @__PURE__ */ i(
-    ae,
+  const {
+    rootFragmentId: m,
+    props: u,
+    projectProperties: a,
+    globalCssUrl: d,
+    fragments: h,
+    slots: S,
+    sources: f,
+    projectBindings: T
+  } = n.data, v = we(
+    u,
+    T ?? xe,
+    s
+  ), p = typeof (e == null ? void 0 : e.props) == "function" ? e.props(v) : e != null && e.props ? { ...v, ...e.props } : v, i = n.data.experiment, y = /* @__PURE__ */ l(
+    be,
     {
-      fragmentId: o,
-      props: y,
-      globalCssUrl: u,
-      projectProperties: c,
-      fragments: f,
-      slots: E,
-      sources: A
+      fragmentId: m,
+      props: p,
+      globalCssUrl: d,
+      projectProperties: a,
+      fragments: h,
+      slots: S,
+      sources: f
     }
-  ) });
-}, Xe = ({ areaCode: r, options: e }) => {
-  const t = g(C), [n, s] = w(0), a = t == null ? void 0 : t.$area;
-  P(() => {
+  );
+  return /* @__PURE__ */ l(de, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: i && (c != null && c.$events) ? /* @__PURE__ */ l(
+    fr,
+    {
+      experiment: i,
+      emit: c.$events.emit,
+      children: y
+    },
+    `${i.label}:${i.variantId}`
+  ) : y });
+}, Pr = ({ areaCode: r, options: e }) => {
+  const t = w(F), [n, s] = L(0), c = t == null ? void 0 : t.$area;
+  R(() => {
     (e == null ? void 0 : e.ssr) !== !0 || process.env.NODE_ENV === "production" || console.error(
       "[fragments] Area option `ssr` is reserved: server resolution has been removed from the runtime; existing `ssr: false` calls continue to work unchanged."
     );
   }, [e == null ? void 0 : e.ssr]);
-  const o = _(() => {
-    a != null && a.resolve && (a.resolve(r).catch(() => {
-    }), s((h) => h + 1));
-  }, [a, r]);
+  const o = B(() => {
+    c != null && c.resolve && (c.resolve(r).catch(() => {
+    }), s((m) => m + 1));
+  }, [c, r]);
   return (
     // A retry remounts the boundary and AreaInner: a repeated failure is a new
     // telemetry event, so AreaInner intentionally calls options.onError again.
-    /* @__PURE__ */ i(re, { onError: e == null ? void 0 : e.onError, empty: e == null ? void 0 : e.empty, retry: o, children: /* @__PURE__ */ i(Le, { areaCode: r, options: e, retry: o }) }, n)
+    /* @__PURE__ */ l(
+      pe,
+      {
+        onError: e == null ? void 0 : e.onError,
+        empty: e == null ? void 0 : e.empty,
+        retry: o,
+        children: /* @__PURE__ */ l(mr, { areaCode: r, options: e, retry: o })
+      },
+      n
+    )
   );
 };
-function He(r) {
-  const e = r ?? W, t = x(e);
-  return Be(t.current, e) || (t.current = e), t.current;
+function hr(r) {
+  const e = r ?? ve, t = A(e);
+  return cr(t.current, e) || (t.current = e), t.current;
 }
-function Ze({ client: r, children: e, properties: t }) {
-  const n = k(
+function Ar({ client: r, children: e, properties: t }) {
+  const n = j(
     () => ({
-      read: (a) => r.$fragments.read(a)
+      read: (c) => r.$fragments.read(c)
     }),
     [r]
-  ), s = He(t);
-  return /* @__PURE__ */ i(we, { value: r, children: /* @__PURE__ */ i(be, { value: n, children: /* @__PURE__ */ i(b.Provider, { value: s, children: e }) }) });
+  ), s = hr(t);
+  return /* @__PURE__ */ l(Je, { value: r, children: /* @__PURE__ */ l(Xe, { value: n, children: /* @__PURE__ */ l(z.Provider, { value: s, children: e }) }) });
+}
+function Tr(r) {
+  return (w(Y) ?? ge)[r];
 }
-function er(r) {
-  return (g(j) ?? X)[r];
+function Rr(r) {
+  const e = w(X);
+  return B(() => {
+    e && (e.reachedGoals.has(r) || (e.reachedGoals.add(r), e.ensureImpression(), e.emit({
+      type: "goal",
+      experiment: e.experiment,
+      viewId: e.viewId,
+      goalKey: r
+    })));
+  }, [e, r]);
 }
-function Ue(r, e) {
-  const [, t] = Ee((a) => a + 1, 0), n = e(), s = x(n);
-  return s.current = n, P(() => {
-    const a = r(t);
-    return Object.is(s.current, e()) || t(), a;
+function vr(r, e) {
+  const [, t] = je((c) => c + 1, 0), n = e(), s = A(n);
+  return s.current = n, R(() => {
+    const c = r(t);
+    return Object.is(s.current, e()) || t(), c;
   }, [r, e]), n;
 }
-const Y = de.useSyncExternalStore, Ve = Y || ((r, e) => Ue(r, e)), ce = "offline", Ke = () => Promise.reject(new Error(ce));
-function ze(r, e) {
-  var $, B;
-  const t = Te(), [n] = w(Ne), s = (t == null ? void 0 : t.sourceCache) ?? n, a = ($ = t == null ? void 0 : t.sourceFetchers) == null ? void 0 : $[r], o = (B = t == null ? void 0 : t.sourceBaseUrls) == null ? void 0 : B[r], h = a ? "host-fetch" : "network", c = t == null ? void 0 : t.env, u = D({ source: r, target: e.target, params: e.params }), f = k(() => ({ source: r, target: e.target, params: e.params }), [u]), E = _((F) => s.subscribe(f, F), [s, f]), A = _(() => s.get(f), [s, f]), l = Ve(E, A, A), v = g(M), y = g(I), m = Ae(r, e.target), d = k(
-    () => v === ce ? null : Ce(y[m], f.params, o),
-    [v, y, m, f, o]
-  ), [S, p] = w(null);
-  return P(() => {
-    (l == null ? void 0 : l.status) === "ready" && S !== null && p(null);
-  }, [l, S]), P(() => {
-    d && !d.ok && l === void 0 && console.warn(`[useSource] ${m}: ${d.reason}`);
-  }, [m, d == null ? void 0 : d.ok, d && !d.ok ? d.reason : void 0, l === void 0]), P(() => {
-    if (d && !d.ok || (l == null ? void 0 : l.status) === "ready" || S === u) return;
-    p(u);
-    const F = d && d.ok ? () => ke({ url: d.url, init: d.init }, { fetcher: a, timeout: c == null ? void 0 : c.timeout }).then((ue) => (c != null && c.debug && console.info(`[useSource] loaded ${D(f)} origin=${h}`), ue)) : Ke;
-    s.load(f, F, h);
-  }, [s, f, u, l, S, d, a, h, c == null ? void 0 : c.timeout, c == null ? void 0 : c.debug]), (l == null ? void 0 : l.status) === "ready" ? { data: l.data ?? void 0, loading: !1 } : (l == null ? void 0 : l.status) === "pending" ? { data: void 0, loading: !0 } : d && !d.ok ? { data: void 0, loading: !1 } : { data: void 0, loading: S !== u };
+const le = ke.useSyncExternalStore, gr = le || ((r, e) => vr(r, e)), Pe = "offline", Er = () => Promise.reject(new Error(Pe));
+function yr(r, e) {
+  var C, b;
+  const t = We(), [n] = L(Ve), s = (t == null ? void 0 : t.sourceCache) ?? n, c = (C = t == null ? void 0 : t.sourceFetchers) == null ? void 0 : C[r], o = (b = t == null ? void 0 : t.sourceBaseUrls) == null ? void 0 : b[r], m = c ? "host-fetch" : "network", u = t == null ? void 0 : t.env, a = re({ source: r, target: e.target, params: e.params }), d = j(() => ({ source: r, target: e.target, params: e.params }), [a]), h = B((N) => s.subscribe(d, N), [s, d]), S = B(() => s.get(d), [s, d]), f = gr(h, S, S), T = w(W), v = w(J), p = ze(r, e.target), i = j(
+    () => T === Pe ? null : Ke(v[p], d.params, o),
+    [T, v, p, d, o]
+  ), [y, g] = L(null);
+  return R(() => {
+    (f == null ? void 0 : f.status) === "ready" && y !== null && g(null);
+  }, [f, y]), R(() => {
+    i && !i.ok && f === void 0 && console.warn(`[useSource] ${p}: ${i.reason}`);
+  }, [p, i == null ? void 0 : i.ok, i && !i.ok ? i.reason : void 0, f === void 0]), R(() => {
+    if (i && !i.ok || (f == null ? void 0 : f.status) === "ready" || y === a) return;
+    g(a);
+    const N = i && i.ok ? () => Ge({ url: i.url, init: i.init }, { fetcher: c, timeout: u == null ? void 0 : u.timeout }).then((H) => (u != null && u.debug && console.info(`[useSource] loaded ${re(d)} origin=${m}`), H)) : Er;
+    s.load(d, N, m);
+  }, [s, d, a, f, y, i, c, m, u == null ? void 0 : u.timeout, u == null ? void 0 : u.debug]), (f == null ? void 0 : f.status) === "ready" ? { data: f.data ?? void 0, loading: !1 } : (f == null ? void 0 : f.status) === "pending" ? { data: void 0, loading: !0 } : i && !i.ok ? { data: void 0, loading: !1 } : { data: void 0, loading: y !== a };
 }
-const rr = ze;
-function tr(r) {
-  return Oe({ ...r, inject: Q });
+const Cr = yr;
+function Or(r) {
+  return Ye({ ...r, inject: he });
 }
 export {
-  H as AREA_UNRESOLVED,
-  Xe as Area,
-  We as FragmentRenderer,
-  U as FragmentStylesheet,
-  ar as FragmentsApiVersionError,
-  cr as FragmentsAreaError,
-  C as FragmentsClientContext,
-  we as FragmentsClientProvider,
-  ur as FragmentsLoadError,
-  Ze as FragmentsProvider,
-  J as InstanceIdContext,
-  T as ModulesMapContext,
-  be as ModulesMapProvider,
-  j as ProjectPropertiesContext,
-  tr as createBrowserClient,
-  or as createSourceCache,
-  X as defaultProjectProperties,
-  Q as injectStylesheet,
-  Re as useArea,
-  Qe as useCssChunk,
-  Fe as useFragmentComponent,
-  qe as useFragmentMetrics,
-  je as useFragmentStylesheet,
-  er as useProjectProperty,
-  rr as useSource
+  ne as AREA_UNRESOLVED,
+  Pr as Area,
+  X as AreaExposureContext,
+  br as FragmentRenderer,
+  oe as FragmentStylesheet,
+  kr as FragmentsApiVersionError,
+  _r as FragmentsAreaError,
+  F as FragmentsClientContext,
+  Je as FragmentsClientProvider,
+  Fr as FragmentsLoadError,
+  Ar as FragmentsProvider,
+  fe as InstanceIdContext,
+  V as ModulesMapContext,
+  Xe as ModulesMapProvider,
+  Y as ProjectPropertiesContext,
+  Or as createBrowserClient,
+  Mr as createSourceCache,
+  ge as defaultProjectProperties,
+  he as injectStylesheet,
+  Qe as useArea,
+  Sr as useCssChunk,
+  qe as useFragmentComponent,
+  rr as useFragmentStylesheet,
+  Rr as useGoal,
+  Tr as useProjectProperty,
+  Cr as useSource
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react/jsx-runtime"),require("react"),require("@fragmentsx/fragments-client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@fragmentsx/fragments-client"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.FragmentsRuntimeReact={},a.jsxRuntime,a.React,a.fragmentsClient))})(this,function(a,l,s,h){"use strict";function oe(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const ae=oe(s),O=s.createContext(null);O.displayName="FragmentsClientContext";function D(r){return l.jsx(O.Provider,{value:r.value,children:r.children})}function ce(){return s.useContext(O)}const j=s.createContext(null);j.displayName="InstanceIdContext";const A=s.createContext(null);A.displayName="ModulesMapContext";function $({value:r,children:e}){return l.jsx(A.Provider,{value:r,children:e})}function le(){const r=s.useContext(O);return s.useMemo(()=>({reachGoal:e=>{var t,n;(n=(t=r==null?void 0:r.$metrics)==null?void 0:t.reachGoal)==null||n.call(t,e)}}),[r])}function L(r){const e=s.useContext(A);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const H=typeof window<"u",T=Object.freeze({rootFragmentId:0,variantId:null,props:{},projectProperties:{},projectBindings:{},globalCssUrl:null,fragments:[],slots:{},sources:{}});function w(r){const e=r.$area;if(!(e!=null&&e.read))throw new Error("[useArea] $area plugin not mounted");return e}function U(r,e){const t=s.useContext(O);if(!t)throw new Error("[useArea] No FragmentsClientProvider in tree");const n=(e==null?void 0:e.suspense)??!0,u=(e==null?void 0:e.pause)===!0||!H&&(e==null?void 0:e.ssr)===!1,o=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0,[,f]=s.useState(0);if(s.useEffect(()=>{if(n||u)return;const c=w(t);let d=!0;return Promise.resolve(c.resolve(r,o)).catch(()=>{}).finally(()=>{d&&f(E=>E+1)}),()=>{d=!1}},[r,n,e==null?void 0:e.pause,e==null?void 0:e.timeout,e==null?void 0:e.ssr]),n){if(u)return T;const c=w(t);if(c.has(r)||Promise.resolve(c.resolve(r,o)).catch(()=>{}),!H)try{return c.read(r)}catch(d){if(d!=null&&typeof d.then=="function")throw d;return process.env.NODE_ENV!=="production"&&console.error(`[useArea] Area ${r} remained unresolved on the server because its cache reached a terminal state`,d),T}return c.read(r)}if(u)return{status:"idle",data:null,error:null};const v=w(t);if(v.has(r))try{return{status:"ready",data:v.read(r),error:null}}catch(c){return{status:"not-found",data:null,error:c instanceof Error?c:new Error(String(c))}}return Promise.resolve(v.resolve(r,o)).catch(()=>{}),{status:"loading",data:null,error:null}}const V=typeof window<"u",de=3e3,F=new Map,_=(r,e)=>{if(!V){const y=()=>{};return y.loaded=Promise.resolve(),y}const t=F.get(e);if(t){t.refCount+=1;const y=()=>{t.refCount-=1,t.refCount===0&&(t.clearReadyTimer(),t.linkEl.remove(),F.delete(e))};return y.loaded=t.loaded,y}const n=document.createElement("link");n.rel="stylesheet",n.href=r,n.setAttribute("data-fragment-key",e);let u;const o=new Promise(y=>{u=y}),f=()=>{c(),u()},v=setTimeout(f,de),c=()=>clearTimeout(v);n.addEventListener("load",f),n.addEventListener("error",f),document.head.appendChild(n);const d={refCount:1,linkEl:n,loaded:o,clearReadyTimer:c};F.set(e,d);const E=()=>{d.refCount-=1,d.refCount===0&&(d.clearReadyTimer(),d.linkEl.remove(),F.delete(e))};return E.loaded=o,E},fe=V?s.useLayoutEffect:s.useEffect;function K(r,e){fe(()=>_(r,e),[r,e])}const ie=parseInt(s.version.split(".")[0],10)>=19;function M({href:r,fragmentKey:e}){return ie?l.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(K(r,e),null)}function me(r){}const z=Object.freeze({}),N=s.createContext(z);N.displayName="HostPropertiesContext";const I={},k=s.createContext(null);k.displayName="ProjectPropertiesContext";const Y=Object.freeze({}),x=s.createContext(Y);x.displayName="SourceTransportsContext";const p=s.createContext("live");p.displayName="SourceNetworkContext";function G(r){const e=r instanceof Error?r:new Error(String(r));if(!(e instanceof h.FragmentsAreaError))return{kind:"failed",error:e};const{code:t}=e;return t==="NO_ACTIVE_VARIANT"?{kind:"no-variant",code:t,error:e}:t==="AREA_NOT_FOUND"||t==="NO_PUBLISHED_SNAPSHOT"||t==="NESTED_SNAPSHOT_MISSING"?{kind:"misconfigured",code:t,error:e}:{kind:"failed",code:t,error:e}}function q(r,e,t){return typeof r=="function"?r(e,t):r??null}const Ee=()=>{};function J(r){return r instanceof Error?r:new Error(String(r))}class Q extends s.Component{constructor(){super(...arguments),this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:J(e)}}componentDidCatch(e,t){var u,o;const n=J(e);process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",n,t.componentStack),(o=(u=this.props).onError)==null||o.call(u,n)}render(){if(this.state.hasError){const e={kind:"failed",error:this.state.error??new Error("Unknown Area error")};try{return q(this.props.empty,e,this.props.retry??Ee)}catch{return null}}return this.props.children}}function he(r,e){let t;for(const[n,u]of Object.entries(e))u!=null&&(t??(t={...r}),t[n]=u);return t??r}function ge(r,e){const t=Object.keys(r);return t.length!==Object.keys(e).length?!1:t.every(n=>Object.prototype.hasOwnProperty.call(e,n)&&Object.is(r[n],e[n]))}const W=Object.freeze({});function X(r,e,t){let n;for(const[u,o]of Object.entries(e)){const f=t[o];f!=null&&(n??(n={...r}),n[u]=f)}return n??r}function Z(r,e,t){if(!r)return{};const n={};for(const u of Object.keys(r))n[u]=ve(r[u],e,t);return n}function ve(r,e,t){return Array.isArray(r)?r.map((n,u)=>n===null?null:R(n,e,t,u)):R(r,e,t)}function R(r,e,t,n){let u;try{u=e(r.fragmentId)}catch(f){if(f!=null&&typeof f.then=="function")throw f;return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`,f),null}const o=Z(r.slots,e,t);return s.createElement(u,{key:n,...X(r.props,r.projectBindings??W,t),...o})}const ee=({fragmentId:r,props:e,globalCssUrl:t=null,projectProperties:n=I,fragments:u=[r],slots:o,sources:f=Y,sourceNetwork:v="live"})=>{const c=L(r),d=s.useContext(A),E=s.useContext(N);if(!d)throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");const y=Z(o,d.read,E),b=s.useMemo(()=>he(n,E),[n,E]),i={...e??{},...y},S=u.length>0?u.map(h.toScopeClassName).join(" "):void 0;return l.jsxs(l.Fragment,{children:[t!=null&&l.jsx(M,{href:t,fragmentKey:h.AREA_GLOBAL_CSS_KEY}),u.map(P=>{const g=h.resolveStylesHref(P);return g?l.jsx(M,{href:g,fragmentKey:h.fragmentCssKey(P)},P):null}),l.jsx(p.Provider,{value:v,children:l.jsx(x.Provider,{value:f,children:l.jsx(k.Provider,{value:b,children:l.jsx(j.Provider,{value:null,children:l.jsx("div",{className:S,style:{display:"contents"},children:l.jsx(c,{...i})})})})})})]})},ye=({onError:r,...e})=>l.jsx(s.Suspense,{fallback:null,children:l.jsx(Q,{onError:r,children:l.jsx(ee,{...e})})}),Se=({areaCode:r,options:e,retry:t})=>{const n=U(r,{suspense:!1,ssr:!1,pause:e==null?void 0:e.pause,timeout:e==null?void 0:e.timeout}),u=s.useContext(N),o=s.useRef(null);if(s.useEffect(()=>{var C;if(n.status!=="not-found"||!n.error)return;const g=G(n.error),m=JSON.stringify([r,g.kind,g.code,g.error.message]);o.current!==m&&(o.current=m,(C=e==null?void 0:e.onError)==null||C.call(e,g.error),process.env.NODE_ENV!=="production"&&g.kind!=="no-variant"&&console.error(`[fragments] Area resolution ${g.kind}: areaCode=${r}, code=${g.code??"none"}`,g.error))},[r,e==null?void 0:e.onError,n.error,n.status]),(e==null?void 0:e.pause)===!0)return null;if(n.status==="idle")return(e==null?void 0:e.fallback)??null;if(n.status==="not-found")return q(e==null?void 0:e.empty,G(n.error),t);if(n.status==="loading"||!n.data)return(e==null?void 0:e.fallback)??null;const{rootFragmentId:f,props:v,projectProperties:c,globalCssUrl:d,fragments:E,slots:y,sources:b,projectBindings:i}=n.data,S=X(v,i??W,u),P=typeof(e==null?void 0:e.props)=="function"?e.props(S):e!=null&&e.props?{...S,...e.props}:S;return l.jsx(s.Suspense,{fallback:(e==null?void 0:e.fallback)??null,children:l.jsx(ee,{fragmentId:f,props:P,globalCssUrl:d,projectProperties:c,fragments:E,slots:y,sources:b})})},Pe=({areaCode:r,options:e})=>{const t=s.useContext(O),[n,u]=s.useState(0),o=t==null?void 0:t.$area;s.useEffect(()=>{(e==null?void 0:e.ssr)!==!0||process.env.NODE_ENV==="production"||console.error("[fragments] Area option `ssr` is reserved: server resolution has been removed from the runtime; existing `ssr: false` calls continue to work unchanged.")},[e==null?void 0:e.ssr]);const f=s.useCallback(()=>{o!=null&&o.resolve&&(o.resolve(r).catch(()=>{}),u(v=>v+1))},[o,r]);return l.jsx(Q,{onError:e==null?void 0:e.onError,empty:e==null?void 0:e.empty,retry:f,children:l.jsx(Se,{areaCode:r,options:e,retry:f})},n)};function Ce(r){const e=r??z,t=s.useRef(e);return ge(t.current,e)||(t.current=e),t.current}function Oe({client:r,children:e,properties:t}){const n=s.useMemo(()=>({read:o=>r.$fragments.read(o)}),[r]),u=Ce(t);return l.jsx(D,{value:r,children:l.jsx($,{value:n,children:l.jsx(N.Provider,{value:u,children:e})})})}function be(r){return(s.useContext(k)??I)[r]}function Ae(r,e){const[,t]=s.useReducer(o=>o+1,0),n=e(),u=s.useRef(n);return u.current=n,s.useEffect(()=>{const o=r(t);return Object.is(u.current,e())||t(),o},[r,e]),n}const re=ae.useSyncExternalStore,Fe=re||((r,e)=>Ae(r,e)),te="offline",Ne=()=>Promise.reject(new Error(te));function ke(r,e){var se,ue;const t=ce(),[n]=s.useState(h.createSourceCache),u=(t==null?void 0:t.sourceCache)??n,o=(se=t==null?void 0:t.sourceFetchers)==null?void 0:se[r],f=(ue=t==null?void 0:t.sourceBaseUrls)==null?void 0:ue[r],v=o?"host-fetch":"network",c=t==null?void 0:t.env,d=h.sourceCallKey({source:r,target:e.target,params:e.params}),E=s.useMemo(()=>({source:r,target:e.target,params:e.params}),[d]),y=s.useCallback(B=>u.subscribe(E,B),[u,E]),b=s.useCallback(()=>u.get(E),[u,E]),i=Fe(y,b,b),S=s.useContext(p),P=s.useContext(x),g=h.sourceTransportKey(r,e.target),m=s.useMemo(()=>S===te?null:h.resolveSourceRequest(P[g],E.params,f),[S,P,g,E,f]),[C,ne]=s.useState(null);return s.useEffect(()=>{(i==null?void 0:i.status)==="ready"&&C!==null&&ne(null)},[i,C]),s.useEffect(()=>{m&&!m.ok&&i===void 0&&console.warn(`[useSource] ${g}: ${m.reason}`)},[g,m==null?void 0:m.ok,m&&!m.ok?m.reason:void 0,i===void 0]),s.useEffect(()=>{if(m&&!m.ok||(i==null?void 0:i.status)==="ready"||C===d)return;ne(d);const B=m&&m.ok?()=>h.runSourceFetch({url:m.url,init:m.init},{fetcher:o,timeout:c==null?void 0:c.timeout}).then(we=>(c!=null&&c.debug&&console.info(`[useSource] loaded ${h.sourceCallKey(E)} origin=${v}`),we)):Ne;u.load(E,B,v)},[u,E,d,i,C,m,o,v,c==null?void 0:c.timeout,c==null?void 0:c.debug]),(i==null?void 0:i.status)==="ready"?{data:i.data??void 0,loading:!1}:(i==null?void 0:i.status)==="pending"?{data:void 0,loading:!0}:m&&!m.ok?{data:void 0,loading:!1}:{data:void 0,loading:C!==d}}const je=ke;function Te(r){return h.createFragmentsClient({...r,inject:_})}Object.defineProperty(a,"FragmentsApiVersionError",{enumerable:!0,get:()=>h.FragmentsApiVersionError}),Object.defineProperty(a,"FragmentsAreaError",{enumerable:!0,get:()=>h.FragmentsAreaError}),Object.defineProperty(a,"FragmentsLoadError",{enumerable:!0,get:()=>h.FragmentsLoadError}),Object.defineProperty(a,"createSourceCache",{enumerable:!0,get:()=>h.createSourceCache}),a.AREA_UNRESOLVED=T,a.Area=Pe,a.FragmentRenderer=ye,a.FragmentStylesheet=M,a.FragmentsClientContext=O,a.FragmentsClientProvider=D,a.FragmentsProvider=Oe,a.InstanceIdContext=j,a.ModulesMapContext=A,a.ModulesMapProvider=$,a.ProjectPropertiesContext=k,a.createBrowserClient=Te,a.defaultProjectProperties=I,a.injectStylesheet=_,a.useArea=U,a.useCssChunk=me,a.useFragmentComponent=L,a.useFragmentMetrics=le,a.useFragmentStylesheet=K,a.useProjectProperty=be,a.useSource=je,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(i,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react/jsx-runtime"),require("react"),require("@fragmentsx/fragments-client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@fragmentsx/fragments-client"],l):(i=typeof globalThis<"u"?globalThis:i||self,l(i.FragmentsRuntimeReact={},i.jsxRuntime,i.React,i.fragmentsClient))})(this,function(i,l,o,E){"use strict";function Pe(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const Ce=Pe(o),N=o.createContext(null);N.displayName="FragmentsClientContext";function Z(r){return l.jsx(N.Provider,{value:r.value,children:r.children})}function Ae(){return o.useContext(N)}const z=o.createContext(null);z.displayName="InstanceIdContext";const M=o.createContext(null);M.displayName="ModulesMapContext";function R({value:r,children:e}){return l.jsx(M.Provider,{value:r,children:e})}function ee(r){const e=o.useContext(M);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const re=typeof window<"u",K=Object.freeze({rootFragmentId:0,variantId:null,experiment:null,props:{},projectProperties:{},projectBindings:{},globalCssUrl:null,fragments:[],slots:{},sources:{}});function G(r){const e=r.$area;if(!(e!=null&&e.read))throw new Error("[useArea] $area plugin not mounted");return e}function te(r,e){const t=o.useContext(N);if(!t)throw new Error("[useArea] No FragmentsClientProvider in tree");const n=(e==null?void 0:e.suspense)??!0,u=(e==null?void 0:e.pause)===!0||!re&&(e==null?void 0:e.ssr)===!1,c=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0,[,s]=o.useState(0);if(o.useEffect(()=>{if(n||u)return;const a=G(t);let d=!0;return Promise.resolve(a.resolve(r,c)).catch(()=>{}).finally(()=>{d&&s(m=>m+1)}),()=>{d=!1}},[r,n,e==null?void 0:e.pause,e==null?void 0:e.timeout,e==null?void 0:e.ssr]),n){if(u)return K;const a=G(t);if(a.has(r)||Promise.resolve(a.resolve(r,c)).catch(()=>{}),!re)try{return a.read(r)}catch(d){if(d!=null&&typeof d.then=="function")throw d;return process.env.NODE_ENV!=="production"&&console.error(`[useArea] Area ${r} remained unresolved on the server because its cache reached a terminal state`,d),K}return a.read(r)}if(u)return{status:"idle",data:null,error:null};const g=G(t);if(g.has(r))try{return{status:"ready",data:g.read(r),error:null}}catch(a){return{status:"not-found",data:null,error:a instanceof Error?a:new Error(String(a))}}return Promise.resolve(g.resolve(r,c)).catch(()=>{}),{status:"loading",data:null,error:null}}const ne=typeof window<"u",Oe=3e3,L=new Map,Y=(r,e)=>{if(!ne){const v=()=>{};return v.loaded=Promise.resolve(),v}const t=L.get(e);if(t){t.refCount+=1;const v=()=>{t.refCount-=1,t.refCount===0&&(t.clearReadyTimer(),t.linkEl.remove(),L.delete(e))};return v.loaded=t.loaded,v}const n=document.createElement("link");n.rel="stylesheet",n.href=r,n.setAttribute("data-fragment-key",e);let u;const c=new Promise(v=>{u=v}),s=()=>{a(),u()},g=setTimeout(s,Oe),a=()=>clearTimeout(g);n.addEventListener("load",s),n.addEventListener("error",s),document.head.appendChild(n);const d={refCount:1,linkEl:n,loaded:c,clearReadyTimer:a};L.set(e,d);const m=()=>{d.refCount-=1,d.refCount===0&&(d.clearReadyTimer(),d.linkEl.remove(),L.delete(e))};return m.loaded=c,m},Te=ne?o.useLayoutEffect:o.useEffect;function oe(r,e){Te(()=>Y(r,e),[r,e])}const Ie=parseInt(o.version.split(".")[0],10)>=19;function q({href:r,fragmentKey:e}){return Ie?l.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(oe(r,e),null)}function Ne(r){}const se=Object.freeze({}),B=o.createContext(se);B.displayName="HostPropertiesContext";const J={},D=o.createContext(null);D.displayName="ProjectPropertiesContext";const ue=Object.freeze({}),W=o.createContext(ue);W.displayName="SourceTransportsContext";const X=o.createContext("live");X.displayName="SourceNetworkContext";function ce(r){const e=r instanceof Error?r:new Error(String(r));if(!(e instanceof E.FragmentsAreaError))return{kind:"failed",error:e};const{code:t}=e;return t==="NO_ACTIVE_VARIANT"?{kind:"no-variant",code:t,error:e}:t==="AREA_NOT_FOUND"||t==="NO_PUBLISHED_SNAPSHOT"||t==="NESTED_SNAPSHOT_MISSING"?{kind:"misconfigured",code:t,error:e}:{kind:"failed",code:t,error:e}}function ae(r,e,t){return typeof r=="function"?r(e,t):r??null}const ke=()=>{};function ie(r){return r instanceof Error?r:new Error(String(r))}class le extends o.Component{constructor(){super(...arguments),this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:ie(e)}}componentDidCatch(e,t){var u,c;const n=ie(e);process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",n,t.componentStack),(c=(u=this.props).onError)==null||c.call(u,n)}render(){if(this.state.hasError){const e={kind:"failed",error:this.state.error??new Error("Unknown Area error")};try{return ae(this.props.empty,e,this.props.retry??ke)}catch{return null}}return this.props.children}}function Fe(r,e){let t;for(const[n,u]of Object.entries(e))u!=null&&(t??(t={...r}),t[n]=u);return t??r}function je(r,e){const t=Object.keys(r);return t.length!==Object.keys(e).length?!1:t.every(n=>Object.prototype.hasOwnProperty.call(e,n)&&Object.is(r[n],e[n]))}const de=Object.freeze({});function fe(r,e,t){let n;for(const[u,c]of Object.entries(e)){const s=t[c];s!=null&&(n??(n={...r}),n[u]=s)}return n??r}function me(r,e,t){if(!r)return{};const n={};for(const u of Object.keys(r))n[u]=Me(r[u],e,t);return n}function Me(r,e,t){return Array.isArray(r)?r.map((n,u)=>n===null?null:he(n,e,t,u)):he(r,e,t)}function he(r,e,t,n){let u;try{u=e(r.fragmentId)}catch(s){if(s!=null&&typeof s.then=="function")throw s;return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`,s),null}const c=me(r.slots,e,t);return o.createElement(u,{key:n,...fe(r.props,r.projectBindings??de,t),...c})}const ge=({fragmentId:r,props:e,globalCssUrl:t=null,projectProperties:n=J,fragments:u=[r],slots:c,sources:s=ue,sourceNetwork:g="live"})=>{const a=ee(r),d=o.useContext(M),m=o.useContext(B);if(!d)throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");const v=me(c,d.read,m),P=o.useMemo(()=>Fe(n,m),[n,m]),h={...e??{},...v},O=u.length>0?u.map(E.toScopeClassName).join(" "):void 0;return l.jsxs(l.Fragment,{children:[t!=null&&l.jsx(q,{href:t,fragmentKey:E.AREA_GLOBAL_CSS_KEY}),u.map(y=>{const w=E.resolveStylesHref(y);return w?l.jsx(q,{href:w,fragmentKey:E.fragmentCssKey(y)},y):null}),l.jsx(X.Provider,{value:g,children:l.jsx(W.Provider,{value:s,children:l.jsx(D.Provider,{value:P,children:l.jsx(z.Provider,{value:null,children:l.jsx("div",{className:O,style:{display:"contents"},children:l.jsx(a,{...h})})})})})})]})},_e=({onError:r,...e})=>l.jsx(o.Suspense,{fallback:null,children:l.jsx(le,{onError:r,children:l.jsx(ge,{...e})})}),H=o.createContext(null);H.displayName="AreaExposureContext";const Le=1e3,Be=Array.from({length:101},(r,e)=>e/100);function De({visibleArea:r,totalArea:e,visibleHeight:t,viewportHeight:n}){if(r<=0)return!1;const u=e>0&&r>=.5*e,c=n>0&&t>=.5*n;return u||c}function ve(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,r=>{const e=Math.random()*16|0;return(r==="x"?e:e&3|8).toString(16)})}function Ee(r){const e=r.getBoundingClientRect();return e.width>0&&e.height>0}function He(r){const e=[];function t(n,u){var c;for(const s of Array.from(n.children)){let g="";try{g=window.getComputedStyle(s).display}catch{g=((c=s.style)==null?void 0:c.display)||""}if(g==="contents")t(s,u);else if(g==="none"||Ee(s))u.push(s);else{const a=[];t(s,a),a.some(Ee)?u.push(...a):u.push(s)}}}return t(r,e),e}const Ue=({experiment:r,emit:e,children:t})=>{const[n,u]=o.useState(ve),c=o.useRef(!1),s=o.useRef(null),g=o.useRef(new Set),a=o.useRef(null),d=o.useRef(r);d.current=r;const m=o.useRef(e);m.current=e;const v=o.useRef(n);v.current=n;const P=o.useCallback(()=>{c.current||(c.current=!0,s.current&&(clearTimeout(s.current),s.current=null),m.current({type:"impression",experiment:d.current,viewId:v.current}))},[]),h=o.useMemo(()=>({experiment:r,viewId:n,emit:e,reachedGoals:g.current,ensureImpression:P}),[r,n,e,P]);return o.useEffect(()=>{if(typeof window>"u"||typeof IntersectionObserver>"u")return;const O=a.current;if(!O)return;let y=[];const w=new Map,f=()=>!(typeof document>"u"||"visibilityState"in document&&document.visibilityState==="hidden"||"prerendering"in document&&document.prerendering),x=()=>{if(c.current||y.length===0)return;let A=0,p=0,_=!1,F=1/0,j=-1/0;for(const Q of y){const b=w.get(Q);b&&(A+=b.interArea,p+=b.boundArea,b.interArea>0&&b.interBottom>b.interTop&&(_=!0,b.interTop<F&&(F=b.interTop),b.interBottom>j&&(j=b.interBottom)))}const $=_?Math.max(0,j-F):0,V=typeof window<"u"?window.innerHeight:0;f()&&De({visibleArea:A,totalArea:p,visibleHeight:$,viewportHeight:V})?s.current||(s.current=setTimeout(()=>{s.current=null,P()},Le)):s.current&&(clearTimeout(s.current),s.current=null)},S=new IntersectionObserver(A=>{var p,_,F,j,$,V;for(const I of A){const Q=((p=I.boundingClientRect)==null?void 0:p.width)??0,b=((_=I.boundingClientRect)==null?void 0:_.height)??0,Re=((F=I.intersectionRect)==null?void 0:F.width)??0,er=((j=I.intersectionRect)==null?void 0:j.height)??0,be=Q*b,rr=Re*er,tr=(($=I.intersectionRect)==null?void 0:$.top)??0,nr=((V=I.intersectionRect)==null?void 0:V.bottom)??0;w.set(I.target,{interArea:be>0?rr:0,boundArea:be,interTop:tr,interBottom:nr})}c.current||x()},{threshold:Be}),T=()=>{if(c.current||!a.current)return;const A=He(a.current);for(const p of y)A.includes(p)||(S.unobserve(p),w.delete(p));for(const p of A)y.includes(p)||S.observe(p);y=A};T();let C=null;typeof MutationObserver<"u"&&(C=new MutationObserver(()=>{c.current||T()}),C.observe(O,{childList:!0,subtree:!0}));const k=()=>{typeof document<"u"&&document.visibilityState==="hidden"?s.current&&(clearTimeout(s.current),s.current=null):x()},U=()=>{x()},pe=()=>{s.current&&(clearTimeout(s.current),s.current=null)},xe=()=>{x()},we=A=>{if(A.persisted){s.current&&(clearTimeout(s.current),s.current=null),c.current=!1;const p=ve();v.current=p,u(p),x()}};return typeof document<"u"&&(document.addEventListener("visibilitychange",k),document.addEventListener("prerenderingchange",U)),typeof window<"u"&&(window.addEventListener("pagehide",pe),window.addEventListener("resize",xe),window.addEventListener("pageshow",we)),()=>{s.current&&(clearTimeout(s.current),s.current=null),S.disconnect(),C&&C.disconnect(),typeof document<"u"&&(document.removeEventListener("visibilitychange",k),document.removeEventListener("prerenderingchange",U)),typeof window<"u"&&(window.removeEventListener("pagehide",pe),window.removeEventListener("resize",xe),window.removeEventListener("pageshow",we))}},[r,e]),l.jsx(H.Provider,{value:h,children:l.jsx("div",{ref:a,style:{display:"contents"},children:t})})},$e=({areaCode:r,options:e,retry:t})=>{const n=te(r,{suspense:!1,ssr:!1,pause:e==null?void 0:e.pause,timeout:e==null?void 0:e.timeout}),u=o.useContext(B),c=o.useContext(N),s=o.useRef(null);if(o.useEffect(()=>{var C;if(n.status!=="not-found"||!n.error)return;const S=ce(n.error),T=JSON.stringify([r,S.kind,S.code,S.error.message]);s.current!==T&&(s.current=T,(C=e==null?void 0:e.onError)==null||C.call(e,S.error),process.env.NODE_ENV!=="production"&&S.kind!=="no-variant"&&console.error(`[fragments] Area resolution ${S.kind}: areaCode=${r}, code=${S.code??"none"}`,S.error))},[r,e==null?void 0:e.onError,n.error,n.status]),(e==null?void 0:e.pause)===!0)return null;if(n.status==="idle")return(e==null?void 0:e.fallback)??null;if(n.status==="not-found")return ae(e==null?void 0:e.empty,ce(n.error),t);if(n.status==="loading"||!n.data)return(e==null?void 0:e.fallback)??null;const{rootFragmentId:g,props:a,projectProperties:d,globalCssUrl:m,fragments:v,slots:P,sources:h,projectBindings:O}=n.data,y=fe(a,O??de,u),w=typeof(e==null?void 0:e.props)=="function"?e.props(y):e!=null&&e.props?{...y,...e.props}:y,f=n.data.experiment,x=l.jsx(ge,{fragmentId:g,props:w,globalCssUrl:m,projectProperties:d,fragments:v,slots:P,sources:h});return l.jsx(o.Suspense,{fallback:(e==null?void 0:e.fallback)??null,children:f&&(c!=null&&c.$events)?l.jsx(Ue,{experiment:f,emit:c.$events.emit,children:x},`${f.label}:${f.variantId}`):x})},Ve=({areaCode:r,options:e})=>{const t=o.useContext(N),[n,u]=o.useState(0),c=t==null?void 0:t.$area;o.useEffect(()=>{(e==null?void 0:e.ssr)!==!0||process.env.NODE_ENV==="production"||console.error("[fragments] Area option `ssr` is reserved: server resolution has been removed from the runtime; existing `ssr: false` calls continue to work unchanged.")},[e==null?void 0:e.ssr]);const s=o.useCallback(()=>{c!=null&&c.resolve&&(c.resolve(r).catch(()=>{}),u(g=>g+1))},[c,r]);return l.jsx(le,{onError:e==null?void 0:e.onError,empty:e==null?void 0:e.empty,retry:s,children:l.jsx($e,{areaCode:r,options:e,retry:s})},n)};function ze(r){const e=r??se,t=o.useRef(e);return je(t.current,e)||(t.current=e),t.current}function Ke({client:r,children:e,properties:t}){const n=o.useMemo(()=>({read:c=>r.$fragments.read(c)}),[r]),u=ze(t);return l.jsx(Z,{value:r,children:l.jsx(R,{value:n,children:l.jsx(B.Provider,{value:u,children:e})})})}function Ge(r){return(o.useContext(D)??J)[r]}function Ye(r){const e=o.useContext(H);return o.useCallback(()=>{e&&(e.reachedGoals.has(r)||(e.reachedGoals.add(r),e.ensureImpression(),e.emit({type:"goal",experiment:e.experiment,viewId:e.viewId,goalKey:r})))},[e,r])}function qe(r,e){const[,t]=o.useReducer(c=>c+1,0),n=e(),u=o.useRef(n);return u.current=n,o.useEffect(()=>{const c=r(t);return Object.is(u.current,e())||t(),c},[r,e]),n}const ye=Ce.useSyncExternalStore,Je=ye||((r,e)=>qe(r,e)),Se="offline",We=()=>Promise.reject(new Error(Se));function Xe(r,e){var T,C;const t=Ae(),[n]=o.useState(E.createSourceCache),u=(t==null?void 0:t.sourceCache)??n,c=(T=t==null?void 0:t.sourceFetchers)==null?void 0:T[r],s=(C=t==null?void 0:t.sourceBaseUrls)==null?void 0:C[r],g=c?"host-fetch":"network",a=t==null?void 0:t.env,d=E.sourceCallKey({source:r,target:e.target,params:e.params}),m=o.useMemo(()=>({source:r,target:e.target,params:e.params}),[d]),v=o.useCallback(k=>u.subscribe(m,k),[u,m]),P=o.useCallback(()=>u.get(m),[u,m]),h=Je(v,P,P),O=o.useContext(X),y=o.useContext(W),w=E.sourceTransportKey(r,e.target),f=o.useMemo(()=>O===Se?null:E.resolveSourceRequest(y[w],m.params,s),[O,y,w,m,s]),[x,S]=o.useState(null);return o.useEffect(()=>{(h==null?void 0:h.status)==="ready"&&x!==null&&S(null)},[h,x]),o.useEffect(()=>{f&&!f.ok&&h===void 0&&console.warn(`[useSource] ${w}: ${f.reason}`)},[w,f==null?void 0:f.ok,f&&!f.ok?f.reason:void 0,h===void 0]),o.useEffect(()=>{if(f&&!f.ok||(h==null?void 0:h.status)==="ready"||x===d)return;S(d);const k=f&&f.ok?()=>E.runSourceFetch({url:f.url,init:f.init},{fetcher:c,timeout:a==null?void 0:a.timeout}).then(U=>(a!=null&&a.debug&&console.info(`[useSource] loaded ${E.sourceCallKey(m)} origin=${g}`),U)):We;u.load(m,k,g)},[u,m,d,h,x,f,c,g,a==null?void 0:a.timeout,a==null?void 0:a.debug]),(h==null?void 0:h.status)==="ready"?{data:h.data??void 0,loading:!1}:(h==null?void 0:h.status)==="pending"?{data:void 0,loading:!0}:f&&!f.ok?{data:void 0,loading:!1}:{data:void 0,loading:x!==d}}const Qe=Xe;function Ze(r){return E.createFragmentsClient({...r,inject:Y})}Object.defineProperty(i,"FragmentsApiVersionError",{enumerable:!0,get:()=>E.FragmentsApiVersionError}),Object.defineProperty(i,"FragmentsAreaError",{enumerable:!0,get:()=>E.FragmentsAreaError}),Object.defineProperty(i,"FragmentsLoadError",{enumerable:!0,get:()=>E.FragmentsLoadError}),Object.defineProperty(i,"createSourceCache",{enumerable:!0,get:()=>E.createSourceCache}),i.AREA_UNRESOLVED=K,i.Area=Ve,i.AreaExposureContext=H,i.FragmentRenderer=_e,i.FragmentStylesheet=q,i.FragmentsClientContext=N,i.FragmentsClientProvider=Z,i.FragmentsProvider=Ke,i.InstanceIdContext=z,i.ModulesMapContext=M,i.ModulesMapProvider=R,i.ProjectPropertiesContext=D,i.createBrowserClient=Ze,i.defaultProjectProperties=J,i.injectStylesheet=Y,i.useArea=te,i.useCssChunk=Ne,i.useFragmentComponent=ee,i.useFragmentStylesheet=oe,i.useGoal=Ye,i.useProjectProperty=Ge,i.useSource=Qe,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/runtime-react",
   "private": false,
-  "version": "0.2.0-dev-20261011155313",
+  "version": "0.2.0-dev-20261022125555",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,20 +32,23 @@
   },
   "dependencies": {
     "@graph-state/core": "^0.13.3",
-    "@fragmentsx/fragments-client": "0.2.0-dev-20261011155313"
+    "@fragmentsx/fragments-client": "0.2.0-dev-20261022125555"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "4.0.18",
+    "@vitest/browser-playwright": "4.0.18",
     "jsdom": "^27.4.0",
+    "playwright": "1.58.2",
     "react": "^19.0.0",
     "react-dom": "^19.2.3",
     "typescript": "^5.5.4",
     "vite": "^6.1.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.1.1",
+    "vitest": "4.0.18",
     "@fragmentsx/definition": "0.2.3"
   },
   "scripts": {
@@ -53,6 +56,7 @@
     "build": "vite build",
     "dev": "vite build -w",
     "test": "NODE_OPTIONS=--max-old-space-size=2048 vitest run --config ./vitest.config.ts",
+    "test:browser": "NODE_OPTIONS=--max-old-space-size=2048 vitest run --config ./vitest.config.browser.ts",
     "test:watch": "vitest --config ./vitest.config.ts",
     "lint": "eslint . --ext .ts,.tsx --fix"
   }