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