@fragmentsx/runtime-react 0.2.0-dev-20260928114300 → 0.2.0-dev-20260929143730

package/README.md

@@ -60,6 +60,32 @@ function App() {
 не передан, клиент бьётся в `window.location.origin`, что удобно при
 same-origin проксировании `/api` на публичный API площадки.
 
+## Свойства проекта от хоста
+
+Сайт передаёт значение один раз на всё дерево, в том числе на несколько областей:
+
+```tsx
+const [client] = useState(() => createBrowserClient({ apiToken }));
+
+<FragmentsProvider client={client} properties={{ langSlug }}>
+  <Area areaCode="lang-card" />
+  <Area areaCode="lang-header" />
+</FragmentsProvider>
+```
+
+Сайт может перекрыть любое свойство проекта без специальной метки. Значение из студии остаётся запасным: оно видно в preview и на сайте, когда `properties` не передан либо содержит `null`/`undefined`. Смена `properties` реактивно обновляет области без перезагрузки и перемонтирования; инлайн-объект безопасен, потому что сравнение неглубокое.
+
+Артефакт читает значение через `useProjectProperty('langSlug')` в корне, во вложенном фрагменте и в слоте. Props варианта, привязанные `$ref` к project-свойству, получают значение сайта также в корне и слотах. Для источника значение передаётся только явно:
+
+```tsx
+const langSlug = useProjectProperty('langSlug');
+const bonuses = useSource('Scores24', { target: 'getBonuses', params: { lang: langSlug } });
+```
+
+Приоритет: `options.props` конкретной `<Area>` > `properties` провайдера > значение студии. Функциональная форма `options.props(serverProps)` получает уже подставленные значения хоста. Хост перекрывает только project-уровень: свойства и привязки area/campaign остаются прежними. Неизвестное свойство молча недоступно — сервер отдаёт только имена, которые используют фрагменты области, и не проверяет тип значения рантайм-переопределения.
+
+Если вы строите собственную обёртку на `useArea` вместо `<Area>`, корневые `props` содержат студийные значения, а `projectBindings` несёт карту «ключ prop → имя project-свойства»; `<Area>` подставляет корень, `FragmentRenderer` — слоты. Вложенный `FragmentsProvider` без `properties` сбрасывает значения, поскольку его клиент обычно принадлежит другому проекту.
+
 `Area` разрешает область в non-Suspense режиме; `Suspense` остаётся только
 вокруг загрузки модулей конуса. На сервере область не резолвится, не требует
 подключённого `$area` plugin и вместо области отдаёт `options.fallback`. Под капотом:

package/dist/index.d.ts

@@ -395,11 +395,13 @@ export { FragmentsLoadError }
  * useMemo критично — Context value identity stability (без него cache invalidation
  * на каждый render).
  */
-export declare function FragmentsProvider({ client, children }: FragmentsProviderProps): ReactElement;
+export declare function FragmentsProvider({ client, children, properties }: FragmentsProviderProps): ReactElement;
 
 declare interface FragmentsProviderProps {
     client: FragmentsClient;
     children: ReactNode;
+    /** Значения свойств проекта от сайта: перекрывают студию; null/undefined не переданы. */
+    properties?: Readonly<Record<string, unknown>>;
 }
 
 export declare function FragmentStylesheet({ href, fragmentKey, }: FragmentStylesheetProps): ReactElement | null;
@@ -754,6 +756,7 @@ export declare interface UseAreaResult {
      * потребителю не нужна.
      */
     projectProperties: Record<string, unknown>;
+    projectBindings: Record<string, string>;
     /**
      * URL к глобальному baseline reset CSS ([data-key^="Text"], [data-key^="Fragment"]).
      * `null` — backend не отдал global reset; baseline применяться не будет.

package/dist/index.es.js

@@ -1,33 +1,33 @@
-import { jsx as d, jsxs as te, Fragment as ne } from "react/jsx-runtime";
-import * as ae from "react";
-import { createContext as A, useContext as v, useMemo as N, useState as w, useEffect as y, useLayoutEffect as se, version as ue, Component as ce, Suspense as K, createElement as le, useCallback as _, useRef as H, useReducer as oe } from "react";
-import { FragmentsAreaError as de, toScopeClassName as ie, AREA_GLOBAL_CSS_KEY as fe, resolveStylesHref as me, fragmentCssKey as he, createSourceCache as Ee, sourceCallKey as j, sourceTransportKey as ve, resolveSourceRequest as ge, runSourceFetch as ye, createFragmentsClient as Se } from "@fragmentsx/fragments-client";
-import { FragmentsApiVersionError as Qe, FragmentsAreaError as We, FragmentsLoadError as Xe, createSourceCache as Ze } from "@fragmentsx/fragments-client";
-const k = A(
+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(
   null
 );
-k.displayName = "FragmentsClientContext";
-function Ae(r) {
-  return /* @__PURE__ */ d(k.Provider, { value: r.value, children: r.children });
+C.displayName = "FragmentsClientContext";
+function we(r) {
+  return /* @__PURE__ */ i(C.Provider, { value: r.value, children: r.children });
 }
-function ke() {
-  return v(k);
+function Te() {
+  return g(C);
 }
-const z = A(null);
-z.displayName = "InstanceIdContext";
-const F = A(
+const J = N(null);
+J.displayName = "InstanceIdContext";
+const T = N(
   null
 );
-F.displayName = "ModulesMapContext";
-function Ce({
+T.displayName = "ModulesMapContext";
+function be({
   value: r,
   children: e
 }) {
-  return /* @__PURE__ */ d(F.Provider, { value: r, children: e });
+  return /* @__PURE__ */ i(T.Provider, { value: r, children: e });
 }
-function Ue() {
-  const r = v(k);
-  return N(
+function qe() {
+  const r = g(C);
+  return k(
     () => ({
       reachGoal: (e) => {
         var t, n;
@@ -37,17 +37,18 @@ function Ue() {
     [r]
   );
 }
-function Pe(r) {
-  const e = v(F);
+function Fe(r) {
+  const e = g(T);
   if (!e)
     throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
   return e.read(r);
 }
-const $ = typeof window < "u", L = Object.freeze({
+const L = typeof window < "u", H = Object.freeze({
   rootFragmentId: 0,
   variantId: null,
   props: {},
   projectProperties: {},
+  projectBindings: {},
   globalCssUrl: null,
   // Phase 105 план 105-05: пустой конус — форма возврата хука не меняется,
   // обёртка рендера (задача 3) остаётся без атрибута class на этом сентинеле.
@@ -62,94 +63,94 @@ function R(r) {
     throw new Error("[useArea] $area plugin not mounted");
   return e;
 }
-function Ne(r, e) {
-  const t = v(k);
+function Re(r, e) {
+  const t = g(C);
   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 || !$ && (e == null ? void 0 : e.ssr) === !1, a = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, i] = w(0);
-  if (y(() => {
+  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(() => {
     if (n || s) return;
-    const l = R(t);
+    const c = R(t);
     let u = !0;
-    return Promise.resolve(l.resolve(r, a)).catch(() => {
+    return Promise.resolve(c.resolve(r, a)).catch(() => {
     }).finally(() => {
-      u && i((E) => E + 1);
+      u && o((f) => f + 1);
     }), () => {
       u = !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 L;
-    const l = R(t);
-    if (l.has(r) || Promise.resolve(l.resolve(r, a)).catch(() => {
-    }), !$)
+      return H;
+    const c = R(t);
+    if (c.has(r) || Promise.resolve(c.resolve(r, a)).catch(() => {
+    }), !L)
       try {
-        return l.read(r);
+        return c.read(r);
       } catch (u) {
         if (u != null && typeof u.then == "function")
           throw u;
         return process.env.NODE_ENV !== "production" && console.error(
           `[useArea] Area ${r} remained unresolved on the server because its cache reached a terminal state`,
           u
-        ), L;
+        ), H;
       }
-    return l.read(r);
+    return c.read(r);
   }
   if (s)
     return { status: "idle", data: null, error: null };
-  const c = R(t);
-  if (c.has(r))
+  const h = R(t);
+  if (h.has(r))
     try {
-      return { status: "ready", data: c.read(r), error: null };
-    } catch (l) {
+      return { status: "ready", data: h.read(r), error: null };
+    } catch (c) {
       return {
         status: "not-found",
         data: null,
-        error: l instanceof Error ? l : new Error(String(l))
+        error: c instanceof Error ? c : new Error(String(c))
       };
     }
-  return Promise.resolve(c.resolve(r, a)).catch(() => {
+  return Promise.resolve(h.resolve(r, a)).catch(() => {
   }), { status: "loading", data: null, error: null };
 }
-const G = typeof window < "u", we = 3e3, P = /* @__PURE__ */ new Map(), Y = (r, e) => {
-  if (!G) {
-    const h = () => {
+const q = typeof window < "u", _e = 3e3, O = /* @__PURE__ */ new Map(), Q = (r, e) => {
+  if (!q) {
+    const E = () => {
     };
-    return h.loaded = Promise.resolve(), h;
+    return E.loaded = Promise.resolve(), E;
   }
-  const t = P.get(e);
+  const t = O.get(e);
   if (t) {
     t.refCount += 1;
-    const h = () => {
-      t.refCount -= 1, t.refCount === 0 && (t.clearReadyTimer(), t.linkEl.remove(), P.delete(e));
+    const E = () => {
+      t.refCount -= 1, t.refCount === 0 && (t.clearReadyTimer(), t.linkEl.remove(), O.delete(e));
     };
-    return h.loaded = t.loaded, h;
+    return E.loaded = t.loaded, E;
   }
   const n = document.createElement("link");
   n.rel = "stylesheet", n.href = r, n.setAttribute("data-fragment-key", e);
   let s;
-  const a = new Promise((h) => {
-    s = h;
-  }), i = () => {
-    l(), s();
-  }, c = setTimeout(i, we), l = () => clearTimeout(c);
-  n.addEventListener("load", i), n.addEventListener("error", i), document.head.appendChild(n);
-  const u = { refCount: 1, linkEl: n, loaded: a, clearReadyTimer: l };
-  P.set(e, u);
-  const E = () => {
-    u.refCount -= 1, u.refCount === 0 && (u.clearReadyTimer(), u.linkEl.remove(), P.delete(e));
+  const a = new Promise((E) => {
+    s = E;
+  }), o = () => {
+    c(), s();
+  }, h = setTimeout(o, _e), c = () => clearTimeout(h);
+  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));
   };
-  return E.loaded = a, E;
-}, Fe = G ? se : y;
-function Te(r, e) {
-  Fe(() => Y(r, e), [r, e]);
+  return f.loaded = a, f;
+}, xe = q ? ie : P;
+function je(r, e) {
+  xe(() => Q(r, e), [r, e]);
 }
-const Re = parseInt(ue.split(".")[0], 10), _e = Re >= 19;
-function D({
+const Ie = parseInt(fe.split(".")[0], 10), Me = Ie >= 19;
+function U({
   href: r,
   fragmentKey: e
 }) {
-  return _e ? /* @__PURE__ */ d(
+  return Me ? /* @__PURE__ */ i(
     "link",
     {
       rel: "stylesheet",
@@ -157,48 +158,50 @@ function D({
       precedence: "default",
       "data-fragment-key": e
     }
-  ) : (Te(r, e), null);
+  ) : (je(r, e), null);
 }
-function pe(r) {
+function Qe(r) {
 }
-const J = {}, x = A(null);
-x.displayName = "ProjectPropertiesContext";
-const q = Object.freeze({}), O = A(q);
-O.displayName = "SourceTransportsContext";
-const b = A("live");
-b.displayName = "SourceNetworkContext";
+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 e = r instanceof Error ? r : new Error(String(r));
-  if (!(e instanceof de))
+  if (!(e instanceof ge))
     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) {
+function ee(r, e, t) {
   return typeof r == "function" ? r(e, t) : r ?? null;
 }
-const xe = () => {
+const pe = () => {
 };
-function U(r) {
+function K(r) {
   return r instanceof Error ? r : new Error(String(r));
 }
-class W extends ce {
+class re extends me {
   constructor() {
     super(...arguments), this.state = { hasError: !1, error: null };
   }
   static getDerivedStateFromError(e) {
-    return { hasError: !0, error: U(e) };
+    return { hasError: !0, error: K(e) };
   }
   componentDidCatch(e, t) {
     var s, a;
-    const n = U(e);
+    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);
   }
   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 ?? xe);
+        return ee(this.props.empty, e, this.props.retry ?? pe);
       } catch {
         return null;
       }
@@ -206,82 +209,104 @@ class W extends ce {
     return this.props.children;
   }
 }
-function X(r, e) {
-  if (!r) return {};
-  const t = {};
-  for (const n of Object.keys(r))
-    t[n] = Oe(r[n], e);
-  return t;
+function $e(r, e) {
+  let t;
+  for (const [n, s] of Object.entries(e))
+    s != null && (t ?? (t = { ...r }), t[n] = s);
+  return t ?? r;
 }
-function Oe(r, e) {
-  return Array.isArray(r) ? r.map((t, n) => t === null ? null : p(t, e, n)) : p(r, e);
+function Be(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]));
 }
-function p(r, e, t) {
+const te = Object.freeze({});
+function ne(r, e, t) {
   let n;
+  for (const [s, a] of Object.entries(e)) {
+    const o = t[a];
+    o != null && (n ?? (n = { ...r }), n[s] = o);
+  }
+  return n ?? r;
+}
+function se(r, e, t) {
+  if (!r) return {};
+  const n = {};
+  for (const s of Object.keys(r))
+    n[s] = De(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 z(r, e, t, n) {
+  let s;
   try {
-    n = e(r.fragmentId);
-  } catch (a) {
-    if (a != null && typeof a.then == "function")
-      throw a;
-    return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`, a), null;
+    s = e(r.fragmentId);
+  } catch (o) {
+    if (o != null && typeof o.then == "function")
+      throw o;
+    return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`, o), null;
   }
-  const s = X(r.slots, e);
-  return le(n, { key: t, ...r.props, ...s });
+  const a = se(r.slots, e, t);
+  return he(s, { key: n, ...ne(r.props, r.projectBindings ?? te, t), ...a });
 }
-const Z = ({
+const ae = ({
   fragmentId: r,
   props: e,
   globalCssUrl: t = null,
-  projectProperties: n = J,
+  projectProperties: n = X,
   fragments: s = [r],
   slots: a,
-  sources: i = q,
-  sourceNetwork: c = "live"
+  sources: o = Z,
+  sourceNetwork: h = "live"
 }) => {
-  const l = Pe(r), u = v(F);
+  const c = Fe(r), u = g(T), f = g(b);
   if (!u)
     throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");
-  const E = X(a, u.read), h = { ...e ?? {}, ...E }, o = s.length > 0 ? s.map(ie).join(" ") : void 0;
-  return /* @__PURE__ */ te(ne, { children: [
-    t != null && /* @__PURE__ */ d(
-      D,
+  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,
       {
         href: t,
-        fragmentKey: fe
+        fragmentKey: ye
       }
     ),
-    s.map((m) => {
-      const g = me(m);
-      return g ? /* @__PURE__ */ d(
-        D,
+    s.map((y) => {
+      const m = Se(y);
+      return m ? /* @__PURE__ */ i(
+        U,
         {
-          href: g,
-          fragmentKey: he(m)
+          href: m,
+          fragmentKey: Pe(y)
         },
-        m
+        y
       ) : null;
     }),
-    /* @__PURE__ */ d(b.Provider, { value: c, children: /* @__PURE__ */ d(O.Provider, { value: i, children: /* @__PURE__ */ d(x.Provider, { value: n, children: /* @__PURE__ */ d(z.Provider, { value: null, children: /* @__PURE__ */ d(
+    /* @__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(
       "div",
       {
-        className: o,
+        className: v,
         style: { display: "contents" },
-        children: /* @__PURE__ */ d(l, { ...h })
+        children: /* @__PURE__ */ i(c, { ...l })
       }
     ) }) }) }) })
   ] });
-}, Be = ({ onError: r, ...e }) => /* @__PURE__ */ d(K, { fallback: null, children: /* @__PURE__ */ d(W, { onError: r, children: /* @__PURE__ */ d(Z, { ...e }) }) }), be = ({ areaCode: r, options: e, retry: t }) => {
-  const n = Ne(r, {
+}, 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, {
     suspense: !1,
     ssr: !1,
     pause: e == null ? void 0 : e.pause,
     timeout: e == null ? void 0 : e.timeout
-  }), s = H(null);
-  if (y(() => {
+  }), s = g(b), a = x(null);
+  if (P(() => {
     var S;
     if (n.status !== "not-found" || !n.error) return;
-    const m = V(n.error), g = JSON.stringify([r, m.kind, m.code, m.error.message]);
-    s.current !== g && (s.current = g, (S = e == null ? void 0 : e.onError) == null || S.call(e, m.error), process.env.NODE_ENV !== "production" && m.kind !== "no-variant" && console.error(
+    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
     ));
@@ -290,104 +315,108 @@ const Z = ({
   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, V(n.error), t);
+    return ee(e == null ? void 0 : e.empty, V(n.error), t);
   if (n.status === "loading" || !n.data)
     return (e == null ? void 0 : e.fallback) ?? null;
-  const { rootFragmentId: a, props: i, projectProperties: c, globalCssUrl: l, fragments: u, slots: E, sources: h } = n.data, o = typeof (e == null ? void 0 : e.props) == "function" ? e.props(i) : e != null && e.props ? { ...i, ...e.props } : i;
-  return /* @__PURE__ */ d(K, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: /* @__PURE__ */ d(
-    Z,
+  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,
     {
-      fragmentId: a,
-      props: o,
-      globalCssUrl: l,
+      fragmentId: o,
+      props: y,
+      globalCssUrl: u,
       projectProperties: c,
-      fragments: u,
+      fragments: f,
       slots: E,
-      sources: h
+      sources: A
     }
   ) });
-}, Ke = ({ areaCode: r, options: e }) => {
-  const t = v(k), [n, s] = w(0), a = t == null ? void 0 : t.$area;
-  y(() => {
+}, Xe = ({ areaCode: r, options: e }) => {
+  const t = g(C), [n, s] = w(0), a = t == null ? void 0 : t.$area;
+  P(() => {
     (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 i = _(() => {
+  const o = _(() => {
     a != null && a.resolve && (a.resolve(r).catch(() => {
-    }), s((c) => c + 1));
+    }), s((h) => h + 1));
   }, [a, 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__ */ d(W, { onError: e == null ? void 0 : e.onError, empty: e == null ? void 0 : e.empty, retry: i, children: /* @__PURE__ */ d(be, { areaCode: r, options: e, retry: i }) }, n)
+    /* @__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)
   );
 };
-function He({ client: r, children: e }) {
-  const t = N(
+function He(r) {
+  const e = r ?? W, t = x(e);
+  return Be(t.current, e) || (t.current = e), t.current;
+}
+function Ze({ client: r, children: e, properties: t }) {
+  const n = k(
     () => ({
-      read: (n) => r.$fragments.read(n)
+      read: (a) => r.$fragments.read(a)
     }),
     [r]
-  );
-  return /* @__PURE__ */ d(Ae, { value: r, children: /* @__PURE__ */ d(Ce, { value: t, children: e }) });
+  ), s = He(t);
+  return /* @__PURE__ */ i(we, { value: r, children: /* @__PURE__ */ i(be, { value: n, children: /* @__PURE__ */ i(b.Provider, { value: s, children: e }) }) });
 }
-function ze(r) {
-  return (v(x) ?? J)[r];
+function er(r) {
+  return (g(j) ?? X)[r];
 }
-function Ie(r, e) {
-  const [, t] = oe((a) => a + 1, 0), n = e(), s = H(n);
-  return s.current = n, y(() => {
+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;
   }, [r, e]), n;
 }
-const B = ae.useSyncExternalStore, Me = B || ((r, e) => Ie(r, e)), ee = "offline", je = () => Promise.reject(new Error(ee));
-function $e(r, e) {
-  var M;
-  const t = ke(), [n] = w(Ee), s = (t == null ? void 0 : t.sourceCache) ?? n, a = (M = t == null ? void 0 : t.sourceFetchers) == null ? void 0 : M[r], i = a ? "host-fetch" : "network", c = t == null ? void 0 : t.env, l = j({ source: r, target: e.target, params: e.params }), u = N(() => ({ source: r, target: e.target, params: e.params }), [l]), E = _((T) => s.subscribe(u, T), [s, u]), h = _(() => s.get(u), [s, u]), o = Me(E, h, h), m = v(b), g = v(O), S = ve(r, e.target), f = N(
-    () => m === ee ? null : ge(g[S], u.params),
-    [m, g, S, u]
-  ), [C, I] = w(null);
-  return y(() => {
-    (o == null ? void 0 : o.status) === "ready" && C !== null && I(null);
-  }, [o, C]), y(() => {
-    f && !f.ok && o === void 0 && console.warn(`[useSource] ${S}: ${f.reason}`);
-  }, [S, f == null ? void 0 : f.ok, f && !f.ok ? f.reason : void 0, o === void 0]), y(() => {
-    if (f && !f.ok || (o == null ? void 0 : o.status) === "ready" || C === l) return;
-    I(l);
-    const T = f && f.ok ? () => ye({ url: f.url, init: f.init }, { fetcher: a, timeout: c == null ? void 0 : c.timeout }).then((re) => (c != null && c.debug && console.info(`[useSource] loaded ${j(u)} origin=${i}`), re)) : je;
-    s.load(u, T, i);
-  }, [s, u, l, o, C, f, a, i, c == null ? void 0 : c.timeout, c == null ? void 0 : c.debug]), (o == null ? void 0 : o.status) === "ready" ? { data: o.data ?? void 0, loading: !1 } : (o == null ? void 0 : o.status) === "pending" ? { data: void 0, loading: !0 } : f && !f.ok ? { data: void 0, loading: !1 } : { data: void 0, loading: C !== l };
+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 Ge = $e;
-function Ye(r) {
-  return Se({ ...r, inject: Y });
+const rr = ze;
+function tr(r) {
+  return Oe({ ...r, inject: Q });
 }
 export {
-  L as AREA_UNRESOLVED,
-  Ke as Area,
-  Be as FragmentRenderer,
-  D as FragmentStylesheet,
-  Qe as FragmentsApiVersionError,
-  We as FragmentsAreaError,
-  k as FragmentsClientContext,
-  Ae as FragmentsClientProvider,
-  Xe as FragmentsLoadError,
-  He as FragmentsProvider,
-  z as InstanceIdContext,
-  F as ModulesMapContext,
-  Ce as ModulesMapProvider,
-  x as ProjectPropertiesContext,
-  Ye as createBrowserClient,
-  Ze as createSourceCache,
-  J as defaultProjectProperties,
-  Y as injectStylesheet,
-  Ne as useArea,
-  pe as useCssChunk,
-  Pe as useFragmentComponent,
-  Ue as useFragmentMetrics,
-  Te as useFragmentStylesheet,
-  ze as useProjectProperty,
-  Ge as useSource
+  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
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,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):(s=typeof globalThis<"u"?globalThis:s||self,l(s.FragmentsRuntimeReact={},s.jsxRuntime,s.React,s.fragmentsClient))})(this,function(s,l,u,h){"use strict";function ee(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 re=ee(u),P=u.createContext(null);P.displayName="FragmentsClientContext";function $(r){return l.jsx(P.Provider,{value:r.value,children:r.children})}function te(){return u.useContext(P)}const N=u.createContext(null);N.displayName="InstanceIdContext";const A=u.createContext(null);A.displayName="ModulesMapContext";function D({value:r,children:e}){return l.jsx(A.Provider,{value:r,children:e})}function ne(){const r=u.useContext(P);return u.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=u.useContext(A);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const V=typeof window<"u",O=Object.freeze({rootFragmentId:0,variantId:null,props:{},projectProperties:{},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=u.useContext(P);if(!t)throw new Error("[useArea] No FragmentsClientProvider in tree");const n=(e==null?void 0:e.suspense)??!0,c=(e==null?void 0:e.pause)===!0||!V&&(e==null?void 0:e.ssr)===!1,a=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0,[,m]=u.useState(0);if(u.useEffect(()=>{if(n||c)return;const f=w(t);let o=!0;return Promise.resolve(f.resolve(r,a)).catch(()=>{}).finally(()=>{o&&m(y=>y+1)}),()=>{o=!1}},[r,n,e==null?void 0:e.pause,e==null?void 0:e.timeout,e==null?void 0:e.ssr]),n){if(c)return O;const f=w(t);if(f.has(r)||Promise.resolve(f.resolve(r,a)).catch(()=>{}),!V)try{return f.read(r)}catch(o){if(o!=null&&typeof o.then=="function")throw o;return process.env.NODE_ENV!=="production"&&console.error(`[useArea] Area ${r} remained unresolved on the server because its cache reached a terminal state`,o),O}return f.read(r)}if(c)return{status:"idle",data:null,error:null};const d=w(t);if(d.has(r))try{return{status:"ready",data:d.read(r),error:null}}catch(f){return{status:"not-found",data:null,error:f instanceof Error?f:new Error(String(f))}}return Promise.resolve(d.resolve(r,a)).catch(()=>{}),{status:"loading",data:null,error:null}}const B=typeof window<"u",ue=3e3,k=new Map,T=(r,e)=>{if(!B){const v=()=>{};return v.loaded=Promise.resolve(),v}const t=k.get(e);if(t){t.refCount+=1;const v=()=>{t.refCount-=1,t.refCount===0&&(t.clearReadyTimer(),t.linkEl.remove(),k.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 c;const a=new Promise(v=>{c=v}),m=()=>{f(),c()},d=setTimeout(m,ue),f=()=>clearTimeout(d);n.addEventListener("load",m),n.addEventListener("error",m),document.head.appendChild(n);const o={refCount:1,linkEl:n,loaded:a,clearReadyTimer:f};k.set(e,o);const y=()=>{o.refCount-=1,o.refCount===0&&(o.clearReadyTimer(),o.linkEl.remove(),k.delete(e))};return y.loaded=a,y},se=B?u.useLayoutEffect:u.useEffect;function K(r,e){se(()=>T(r,e),[r,e])}const ae=parseInt(u.version.split(".")[0],10)>=19;function M({href:r,fragmentKey:e}){return ae?l.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(K(r,e),null)}function ce(r){}const _={},b=u.createContext(null);b.displayName="ProjectPropertiesContext";const z=Object.freeze({}),j=u.createContext(z);j.displayName="SourceTransportsContext";const I=u.createContext("live");I.displayName="SourceNetworkContext";function H(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 G(r,e,t){return typeof r=="function"?r(e,t):r??null}const oe=()=>{};function Y(r){return r instanceof Error?r:new Error(String(r))}class q extends u.Component{constructor(){super(...arguments),this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:Y(e)}}componentDidCatch(e,t){var c,a;const n=Y(e);process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",n,t.componentStack),(a=(c=this.props).onError)==null||a.call(c,n)}render(){if(this.state.hasError){const e={kind:"failed",error:this.state.error??new Error("Unknown Area error")};try{return G(this.props.empty,e,this.props.retry??oe)}catch{return null}}return this.props.children}}function J(r,e){if(!r)return{};const t={};for(const n of Object.keys(r))t[n]=le(r[n],e);return t}function le(r,e){return Array.isArray(r)?r.map((t,n)=>t===null?null:p(t,e,n)):p(r,e)}function p(r,e,t){let n;try{n=e(r.fragmentId)}catch(a){if(a!=null&&typeof a.then=="function")throw a;return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`,a),null}const c=J(r.slots,e);return u.createElement(n,{key:t,...r.props,...c})}const Q=({fragmentId:r,props:e,globalCssUrl:t=null,projectProperties:n=_,fragments:c=[r],slots:a,sources:m=z,sourceNetwork:d="live"})=>{const f=L(r),o=u.useContext(A);if(!o)throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");const y=J(a,o.read),v={...e??{},...y},i=c.length>0?c.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}),c.map(g=>{const S=h.resolveStylesHref(g);return S?l.jsx(M,{href:S,fragmentKey:h.fragmentCssKey(g)},g):null}),l.jsx(I.Provider,{value:d,children:l.jsx(j.Provider,{value:m,children:l.jsx(b.Provider,{value:n,children:l.jsx(N.Provider,{value:null,children:l.jsx("div",{className:i,style:{display:"contents"},children:l.jsx(f,{...v})})})})})})]})},de=({onError:r,...e})=>l.jsx(u.Suspense,{fallback:null,children:l.jsx(q,{onError:r,children:l.jsx(Q,{...e})})}),fe=({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}),c=u.useRef(null);if(u.useEffect(()=>{var C;if(n.status!=="not-found"||!n.error)return;const g=H(n.error),S=JSON.stringify([r,g.kind,g.code,g.error.message]);c.current!==S&&(c.current=S,(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 G(e==null?void 0:e.empty,H(n.error),t);if(n.status==="loading"||!n.data)return(e==null?void 0:e.fallback)??null;const{rootFragmentId:a,props:m,projectProperties:d,globalCssUrl:f,fragments:o,slots:y,sources:v}=n.data,i=typeof(e==null?void 0:e.props)=="function"?e.props(m):e!=null&&e.props?{...m,...e.props}:m;return l.jsx(u.Suspense,{fallback:(e==null?void 0:e.fallback)??null,children:l.jsx(Q,{fragmentId:a,props:i,globalCssUrl:f,projectProperties:d,fragments:o,slots:y,sources:v})})},ie=({areaCode:r,options:e})=>{const t=u.useContext(P),[n,c]=u.useState(0),a=t==null?void 0:t.$area;u.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 m=u.useCallback(()=>{a!=null&&a.resolve&&(a.resolve(r).catch(()=>{}),c(d=>d+1))},[a,r]);return l.jsx(q,{onError:e==null?void 0:e.onError,empty:e==null?void 0:e.empty,retry:m,children:l.jsx(fe,{areaCode:r,options:e,retry:m})},n)};function me({client:r,children:e}){const t=u.useMemo(()=>({read:n=>r.$fragments.read(n)}),[r]);return l.jsx($,{value:r,children:l.jsx(D,{value:t,children:e})})}function Ee(r){return(u.useContext(b)??_)[r]}function he(r,e){const[,t]=u.useReducer(a=>a+1,0),n=e(),c=u.useRef(n);return c.current=n,u.useEffect(()=>{const a=r(t);return Object.is(c.current,e())||t(),a},[r,e]),n}const W=re.useSyncExternalStore,ge=W||((r,e)=>he(r,e)),X="offline",ve=()=>Promise.reject(new Error(X));function ye(r,e){var R;const t=te(),[n]=u.useState(h.createSourceCache),c=(t==null?void 0:t.sourceCache)??n,a=(R=t==null?void 0:t.sourceFetchers)==null?void 0:R[r],m=a?"host-fetch":"network",d=t==null?void 0:t.env,f=h.sourceCallKey({source:r,target:e.target,params:e.params}),o=u.useMemo(()=>({source:r,target:e.target,params:e.params}),[f]),y=u.useCallback(x=>c.subscribe(o,x),[c,o]),v=u.useCallback(()=>c.get(o),[c,o]),i=ge(y,v,v),g=u.useContext(I),S=u.useContext(j),C=h.sourceTransportKey(r,e.target),E=u.useMemo(()=>g===X?null:h.resolveSourceRequest(S[C],o.params),[g,S,C,o]),[F,Z]=u.useState(null);return u.useEffect(()=>{(i==null?void 0:i.status)==="ready"&&F!==null&&Z(null)},[i,F]),u.useEffect(()=>{E&&!E.ok&&i===void 0&&console.warn(`[useSource] ${C}: ${E.reason}`)},[C,E==null?void 0:E.ok,E&&!E.ok?E.reason:void 0,i===void 0]),u.useEffect(()=>{if(E&&!E.ok||(i==null?void 0:i.status)==="ready"||F===f)return;Z(f);const x=E&&E.ok?()=>h.runSourceFetch({url:E.url,init:E.init},{fetcher:a,timeout:d==null?void 0:d.timeout}).then(Ce=>(d!=null&&d.debug&&console.info(`[useSource] loaded ${h.sourceCallKey(o)} origin=${m}`),Ce)):ve;c.load(o,x,m)},[c,o,f,i,F,E,a,m,d==null?void 0:d.timeout,d==null?void 0:d.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}:E&&!E.ok?{data:void 0,loading:!1}:{data:void 0,loading:F!==f}}const Se=ye;function Pe(r){return h.createFragmentsClient({...r,inject:T})}Object.defineProperty(s,"FragmentsApiVersionError",{enumerable:!0,get:()=>h.FragmentsApiVersionError}),Object.defineProperty(s,"FragmentsAreaError",{enumerable:!0,get:()=>h.FragmentsAreaError}),Object.defineProperty(s,"FragmentsLoadError",{enumerable:!0,get:()=>h.FragmentsLoadError}),Object.defineProperty(s,"createSourceCache",{enumerable:!0,get:()=>h.createSourceCache}),s.AREA_UNRESOLVED=O,s.Area=ie,s.FragmentRenderer=de,s.FragmentStylesheet=M,s.FragmentsClientContext=P,s.FragmentsClientProvider=$,s.FragmentsProvider=me,s.InstanceIdContext=N,s.ModulesMapContext=A,s.ModulesMapProvider=D,s.ProjectPropertiesContext=b,s.createBrowserClient=Pe,s.defaultProjectProperties=_,s.injectStylesheet=T,s.useArea=U,s.useCssChunk=ce,s.useFragmentComponent=L,s.useFragmentMetrics=ne,s.useFragmentStylesheet=K,s.useProjectProperty=Ee,s.useSource=Se,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(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"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/runtime-react",
   "private": false,
-  "version": "0.2.0-dev-20260928114300",
+  "version": "0.2.0-dev-20260929143730",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@graph-state/core": "^0.13.3",
-    "@fragmentsx/fragments-client": "0.2.0-dev-20260928114300"
+    "@fragmentsx/fragments-client": "0.2.0-dev-20260929143730"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",