@fragmentsx/runtime-react 0.2.0-dev-20260831061037 → 0.2.0-dev-20260901074721

package/dist/index.d.ts

@@ -169,9 +169,10 @@ declare interface FragmentStylesheetProps {
  *
  * @param href - CDN URL стилевого файла
  * @param key - уникальный ключ для dedup (например `chunk:201` или `fragment:42:abc`)
- * @returns cleanup callback — при refCount = 0 удаляет `<link>` из head
+ * @returns handle — вызываемый cleanup (при refCount = 0 удаляет `<link>` из
+ *  head) с дополнительным свойством `loaded: Promise<void>`
  */
-export declare const injectStylesheet: (href: string, key: string) => (() => void);
+export declare const injectStylesheet: (href: string, key: string) => StylesheetHandle;
 
 export declare const InstanceIdContext: Context<string | null>;
 
@@ -226,6 +227,40 @@ export declare interface ReachGoalInfo {
     campaignId?: number;
 }
 
+/**
+ * Ref-counted `<link rel="stylesheet">` injector для compiled fragment CSS delivery (Req #11).
+ *
+ * **Single source of truth для ref-count dedup**: $cssChunks (client-core) делегирует
+ * DOM injection сюда через factory parameter (BLOCKER-4 architectural decision).
+ * Module-level registry гарантирует что за один bundle-scope один key = один <link>.
+ *
+ * Использование:
+ * ```ts
+ * const handle = injectStylesheet('https://cdn.example.com/chunk.css', 'chunk:201');
+ * await handle.loaded; // готовность CSS (load / error / таймаут — quick-260831-etq)
+ * // ... позже при unmount:
+ * handle();
+ * ```
+ *
+ * Ref-count semantics:
+ * - Первый вызов с key → создаёт `<link>`, refCount = 1
+ * - Повторный вызов с тем же key → refCount++, новый `<link>` НЕ создаётся
+ * - Cleanup → refCount--; при refCount = 0 → `<link>` удаляется из head
+ *
+ * Канал готовности (quick-260831-etq, D-5/D-6): возвращаемый handle несёт
+ * `loaded: Promise<void>`, который резолвится по `load`, по `error` (сбой
+ * трактуется как «готово» — показать без стилей лучше, чем зависнуть) или по
+ * истечении `STYLESHEET_READY_TIMEOUT_MS`, если ни одно событие не пришло
+ * (недоступный/молчащий CDN). Промис никогда не отвергается.
+ *
+ * SSR safety: в Node (isBrowser === false) возвращает свежий noop-handle с уже
+ * разрешённым `loaded` — общий экспорт `noop` не мутируется.
+ */
+/** Канал готовности CSS у ref-counted injectStylesheet handle. */
+declare type StylesheetHandle = (() => void) & {
+    loaded: Promise<void>;
+};
+
 /** Suspense-режим (по умолчанию либо явный `suspense: true`) — прежний throw-протокол. */
 export declare function useArea(areaCode: string, options?: UseAreaOptions & {
     suspense?: true;
@@ -259,6 +294,14 @@ export declare interface UseAreaOptions {
  */
 export declare interface UseAreaResult {
     rootFragmentId: number;
+    /**
+     * Quick 260831-dor (INT-10): id выбранного варианта — вход для атрибуции
+     * на стороне площадки-потребителя (префикс партнёрской ссылки трекера).
+     * `$area` уже нормализует отсутствие поля у backend'а в `null` (не `0` —
+     * `0` неотличим от настоящего id и молча испортил бы атрибуцию), поэтому
+     * поле обязательное и nullable, а не опциональное.
+     */
+    variantId: number | null;
     /**
      * Phase 73, B-02/B-06: значения props корневого артефакта, разрешённые сервером
      * (`resolveVariantProps`) — привязки `$ref` сюда не доезжают, только готовые значения.

package/dist/index.es.js

@@ -1,32 +1,32 @@
-import { jsx as u, jsxs as N, Fragment as k } from "react/jsx-runtime";
-import { createContext as m, useContext as f, useMemo as C, useState as I, useEffect as P, useLayoutEffect as R, version as b, Component as p, Suspense as y } from "react";
-import { createFragmentsClient as _ } from "@fragmentsx/fragments-client";
-import { FragmentsApiVersionError as le, FragmentsAreaError as se, FragmentsLoadError as ae } from "@fragmentsx/fragments-client";
-const o = m(
+import { jsx as l, jsxs as j, Fragment as I } from "react/jsx-runtime";
+import { createContext as v, useContext as f, useMemo as P, useState as L, useEffect as F, useLayoutEffect as N, version as k, Component as b, Suspense as A } from "react";
+import { AREA_GLOBAL_CSS_KEY as p, fragmentCssKey as O, fragmentFontsKey as U, createFragmentsClient as B } from "@fragmentsx/fragments-client";
+import { FragmentsApiVersionError as oe, FragmentsAreaError as ie, FragmentsLoadError as fe } from "@fragmentsx/fragments-client";
+const m = v(
   null
 );
-o.displayName = "FragmentsClientContext";
-function U(r) {
-  return /* @__PURE__ */ u(o.Provider, { value: r.value, children: r.children });
+m.displayName = "FragmentsClientContext";
+function D(r) {
+  return /* @__PURE__ */ l(m.Provider, { value: r.value, children: r.children });
 }
-function L() {
-  return f(o);
+function K() {
+  return f(m);
 }
-const F = m(null);
-F.displayName = "InstanceIdContext";
-const v = m(
+const S = v(null);
+S.displayName = "InstanceIdContext";
+const g = v(
   null
 );
-v.displayName = "ModulesMapContext";
-function O({
+g.displayName = "ModulesMapContext";
+function V({
   value: r,
   children: e
 }) {
-  return /* @__PURE__ */ u(v.Provider, { value: r, children: e });
+  return /* @__PURE__ */ l(g.Provider, { value: r, children: e });
 }
-function W() {
-  const r = f(o);
-  return C(
+function re() {
+  const r = f(m);
+  return P(
     () => ({
       reachGoal: (e) => {
         var n, t;
@@ -36,36 +36,39 @@ function W() {
     [r]
   );
 }
-function B(r) {
-  const e = f(v);
+function G(r) {
+  const e = f(g);
   if (!e)
     throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
   return e.read(r);
 }
-const D = typeof window < "u", x = Object.freeze({
+const Y = typeof window < "u", x = Object.freeze({
   rootFragmentId: 0,
+  variantId: null,
   props: {},
   projectProperties: {},
   globalCssUrl: null
 });
-function V(r, e) {
-  const n = f(o);
+function $(r, e) {
+  const n = f(m);
   if (!n)
     throw new Error("[useArea] No FragmentsClientProvider in tree");
   const t = n.$area;
   if (!(t != null && t.read))
     throw new Error("[useArea] $area plugin not mounted");
-  const l = (e == null ? void 0 : e.suspense) ?? !0, d = (e == null ? void 0 : e.pause) === !0 || !D && (e == null ? void 0 : e.ssr) === !1, s = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, a] = I(0);
-  if (P(() => {
-    if (l || d) return;
+  const s = (e == null ? void 0 : e.suspense) ?? !0, d = (e == null ? void 0 : e.pause) === !0 || !Y && (e == null ? void 0 : e.ssr) === !1, a = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, u] = L(0);
+  if (F(() => {
+    if (s || d) return;
     let c = !0;
-    return t.resolve(r, s).finally(() => {
-      c && a((h) => h + 1);
+    return Promise.resolve(t.resolve(r, a)).catch(() => {
+    }).finally(() => {
+      c && u((o) => o + 1);
     }), () => {
       c = !1;
     };
-  }, [r, l, e == null ? void 0 : e.pause, e == null ? void 0 : e.timeout, e == null ? void 0 : e.ssr]), l)
-    return d ? x : (t.has(r) || t.resolve(r, s), t.read(r));
+  }, [r, s, e == null ? void 0 : e.pause, e == null ? void 0 : e.timeout, e == null ? void 0 : e.ssr]), s)
+    return d ? x : (t.has(r) || Promise.resolve(t.resolve(r, a)).catch(() => {
+    }), t.read(r));
   if (d)
     return { status: "idle", data: null, error: null };
   if (t.has(r))
@@ -78,30 +81,45 @@ function V(r, e) {
         error: c instanceof Error ? c : new Error(String(c))
       };
     }
-  return t.resolve(r, s), { status: "loading", data: null, error: null };
+  return Promise.resolve(t.resolve(r, a)).catch(() => {
+  }), { status: "loading", data: null, error: null };
 }
-const w = typeof window < "u", $ = () => {
-}, i = /* @__PURE__ */ new Map(), A = (r, e) => {
-  if (!w)
-    return $;
-  const n = i.get(e);
-  if (n)
-    return n.refCount += 1, () => {
-      n.refCount -= 1, n.refCount === 0 && (n.linkEl.remove(), i.delete(e));
+const w = typeof window < "u", z = 3e3, h = /* @__PURE__ */ new Map(), M = (r, e) => {
+  if (!w) {
+    const i = () => {
     };
+    return i.loaded = Promise.resolve(), i;
+  }
+  const n = h.get(e);
+  if (n) {
+    n.refCount += 1;
+    const i = () => {
+      n.refCount -= 1, n.refCount === 0 && (n.clearReadyTimer(), n.linkEl.remove(), h.delete(e));
+    };
+    return i.loaded = n.loaded, i;
+  }
   const t = document.createElement("link");
-  t.rel = "stylesheet", t.href = r, t.setAttribute("data-fragment-key", e), document.head.appendChild(t);
-  const l = { refCount: 1, linkEl: t };
-  return i.set(e, l), () => {
-    l.refCount -= 1, l.refCount === 0 && (l.linkEl.remove(), i.delete(e));
+  t.rel = "stylesheet", t.href = r, t.setAttribute("data-fragment-key", e);
+  let s;
+  const d = new Promise((i) => {
+    s = i;
+  }), a = () => {
+    c(), s();
+  }, u = setTimeout(a, z), c = () => clearTimeout(u);
+  t.addEventListener("load", a), t.addEventListener("error", a), document.head.appendChild(t);
+  const o = { refCount: 1, linkEl: t, loaded: d, clearReadyTimer: c };
+  h.set(e, o);
+  const y = () => {
+    o.refCount -= 1, o.refCount === 0 && (o.clearReadyTimer(), o.linkEl.remove(), h.delete(e));
   };
-}, T = w ? R : P;
-function G(r, e) {
-  T(() => A(r, e), [r, e]);
+  return y.loaded = d, y;
+}, H = w ? N : F;
+function J(r, e) {
+  H(() => M(r, e), [r, e]);
 }
-const K = parseInt(b.split(".")[0], 10), z = K >= 19;
-function g({ href: r, fragmentKey: e }) {
-  return z ? /* @__PURE__ */ u(
+const q = parseInt(k.split(".")[0], 10), Q = q >= 19;
+function E({ href: r, fragmentKey: e }) {
+  return Q ? /* @__PURE__ */ l(
     "link",
     {
       rel: "stylesheet",
@@ -109,13 +127,13 @@ function g({ href: r, fragmentKey: e }) {
       precedence: "default",
       "data-fragment-key": e
     }
-  ) : (G(r, e), null);
+  ) : (J(r, e), null);
 }
-function X(r) {
+function te(r) {
 }
-const M = {}, E = m(null);
-E.displayName = "ProjectPropertiesContext";
-class S extends p {
+const R = {}, C = v(null);
+C.displayName = "ProjectPropertiesContext";
+class T extends b {
   constructor() {
     super(...arguments), this.state = { hasError: !1 };
   }
@@ -123,108 +141,108 @@ class S extends p {
     return { hasError: !0 };
   }
   componentDidCatch(e, n) {
-    var t, l;
-    process.env.NODE_ENV !== "production" && console.error("[fragments] Area error:", e, n.componentStack), (l = (t = this.props).onError) == null || l.call(t, e);
+    var t, s;
+    process.env.NODE_ENV !== "production" && console.error("[fragments] Area error:", e, n.componentStack), (s = (t = this.props).onError) == null || s.call(t, e);
   }
   render() {
     return this.state.hasError ? null : this.props.children;
   }
 }
-const j = ({
+const _ = ({
   fragmentId: r,
   props: e,
   globalCssUrl: n = null,
-  projectProperties: t = M
+  projectProperties: t = R
 }) => {
-  const l = B(r), s = L().$fragments, a = s == null ? void 0 : s.getRef(r), c = s == null ? void 0 : s.getScopeClass(r), h = e ?? {};
-  return /* @__PURE__ */ N(k, { children: [
-    n != null && /* @__PURE__ */ u(
-      g,
+  const s = G(r), a = K().$fragments, u = a == null ? void 0 : a.getRef(r), c = a == null ? void 0 : a.getScopeClass(r), o = e ?? {};
+  return /* @__PURE__ */ j(I, { children: [
+    n != null && /* @__PURE__ */ l(
+      E,
       {
         href: n,
-        fragmentKey: "global"
+        fragmentKey: p
       }
     ),
-    a && /* @__PURE__ */ u(
-      g,
+    u && /* @__PURE__ */ l(
+      E,
       {
-        href: a.cssUrl,
-        fragmentKey: `fragment:${r}:css`
+        href: u.cssUrl,
+        fragmentKey: O(r)
       }
     ),
-    (a == null ? void 0 : a.fontsUrl) != null && /* @__PURE__ */ u(
-      g,
+    (u == null ? void 0 : u.fontsUrl) != null && /* @__PURE__ */ l(
+      E,
       {
-        href: a.fontsUrl,
-        fragmentKey: `fragment:${r}:fonts`
+        href: u.fontsUrl,
+        fragmentKey: U(r)
       }
     ),
-    /* @__PURE__ */ u(E.Provider, { value: t, children: /* @__PURE__ */ u(F.Provider, { value: null, children: /* @__PURE__ */ u(
+    /* @__PURE__ */ l(C.Provider, { value: t, children: /* @__PURE__ */ l(S.Provider, { value: null, children: /* @__PURE__ */ l(
       "div",
       {
         className: c,
         style: { display: "contents" },
-        children: /* @__PURE__ */ u(l, { ...h })
+        children: /* @__PURE__ */ l(s, { ...o })
       }
     ) }) })
   ] });
-}, Y = ({ onError: r, ...e }) => /* @__PURE__ */ u(y, { fallback: null, children: /* @__PURE__ */ u(S, { onError: r, children: /* @__PURE__ */ u(j, { ...e }) }) }), J = ({ areaCode: r, options: e }) => {
+}, ne = ({ onError: r, ...e }) => /* @__PURE__ */ l(A, { fallback: null, children: /* @__PURE__ */ l(T, { onError: r, children: /* @__PURE__ */ l(_, { ...e }) }) }), W = ({ areaCode: r, options: e }) => {
   if ((e == null ? void 0 : e.pause) === !0)
     return null;
-  const n = V(r, {
+  const n = $(r, {
     timeout: e == null ? void 0 : e.timeout,
     ssr: e == null ? void 0 : e.ssr
   });
   if (n === x)
     return null;
-  const { rootFragmentId: t, props: l, projectProperties: d, globalCssUrl: s } = n, a = typeof (e == null ? void 0 : e.props) == "function" ? e.props(l) : e != null && e.props ? { ...l, ...e.props } : l;
-  return /* @__PURE__ */ u(
-    j,
+  const { rootFragmentId: t, props: s, projectProperties: d, globalCssUrl: a } = n, u = typeof (e == null ? void 0 : e.props) == "function" ? e.props(s) : e != null && e.props ? { ...s, ...e.props } : s;
+  return /* @__PURE__ */ l(
+    _,
     {
       fragmentId: t,
-      props: a,
-      globalCssUrl: s,
+      props: u,
+      globalCssUrl: a,
       projectProperties: d
     }
   );
-}, Z = ({ areaCode: r, options: e }) => /* @__PURE__ */ u(y, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: /* @__PURE__ */ u(S, { onError: e == null ? void 0 : e.onError, children: /* @__PURE__ */ u(J, { areaCode: r, options: e }) }) });
-function ee({ client: r, children: e }) {
-  const n = C(
+}, le = ({ areaCode: r, options: e }) => /* @__PURE__ */ l(A, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: /* @__PURE__ */ l(T, { onError: e == null ? void 0 : e.onError, children: /* @__PURE__ */ l(W, { areaCode: r, options: e }) }) });
+function ae({ client: r, children: e }) {
+  const n = P(
     () => ({
       read: (t) => r.$fragments.read(t)
     }),
     [r]
   );
-  return /* @__PURE__ */ u(U, { value: r, children: /* @__PURE__ */ u(O, { value: n, children: e }) });
+  return /* @__PURE__ */ l(D, { value: r, children: /* @__PURE__ */ l(V, { value: n, children: e }) });
 }
-function re(r) {
-  return (f(E) ?? M)[r];
+function se(r) {
+  return (f(C) ?? R)[r];
 }
-function te(r) {
-  return _({ ...r, inject: A });
+function ue(r) {
+  return B({ ...r, inject: M });
 }
 export {
   x as AREA_UNRESOLVED,
-  Z as Area,
-  Y as FragmentRenderer,
-  g as FragmentStylesheet,
-  le as FragmentsApiVersionError,
-  se as FragmentsAreaError,
-  o as FragmentsClientContext,
-  U as FragmentsClientProvider,
-  ae as FragmentsLoadError,
-  ee as FragmentsProvider,
-  F as InstanceIdContext,
-  v as ModulesMapContext,
-  O as ModulesMapProvider,
-  E as ProjectPropertiesContext,
-  te as createBrowserClient,
-  M as defaultProjectProperties,
-  A as injectStylesheet,
-  V as useArea,
-  X as useCssChunk,
-  B as useFragmentComponent,
-  W as useFragmentMetrics,
-  G as useFragmentStylesheet,
-  re as useProjectProperty
+  le as Area,
+  ne as FragmentRenderer,
+  E as FragmentStylesheet,
+  oe as FragmentsApiVersionError,
+  ie as FragmentsAreaError,
+  m as FragmentsClientContext,
+  D as FragmentsClientProvider,
+  fe as FragmentsLoadError,
+  ae as FragmentsProvider,
+  S as InstanceIdContext,
+  g as ModulesMapContext,
+  V as ModulesMapProvider,
+  C as ProjectPropertiesContext,
+  ue as createBrowserClient,
+  R as defaultProjectProperties,
+  M as injectStylesheet,
+  $ as useArea,
+  te as useCssChunk,
+  G as useFragmentComponent,
+  re as useFragmentMetrics,
+  J as useFragmentStylesheet,
+  se as useProjectProperty
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,u){typeof exports=="object"&&typeof module<"u"?u(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"],u):(t=typeof globalThis<"u"?globalThis:t||self,u(t.FragmentsRuntimeReact={},t.jsxRuntime,t.React,t.fragmentsClient))})(this,function(t,u,s,m){"use strict";const o=s.createContext(null);o.displayName="FragmentsClientContext";function j(r){return u.jsx(o.Provider,{value:r.value,children:r.children})}function k(){return s.useContext(o)}const P=s.createContext(null);P.displayName="InstanceIdContext";const g=s.createContext(null);g.displayName="ModulesMapContext";function M({value:r,children:e}){return u.jsx(g.Provider,{value:r,children:e})}function x(){const r=s.useContext(o);return s.useMemo(()=>({reachGoal:e=>{var l,n;(n=(l=r==null?void 0:r.$metrics)==null?void 0:l.reachGoal)==null||n.call(l,e)}}),[r])}function S(r){const e=s.useContext(g);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const _=typeof window<"u",v=Object.freeze({rootFragmentId:0,props:{},projectProperties:{},globalCssUrl:null});function w(r,e){const l=s.useContext(o);if(!l)throw new Error("[useArea] No FragmentsClientProvider in tree");const n=l.$area;if(!(n!=null&&n.read))throw new Error("[useArea] $area plugin not mounted");const a=(e==null?void 0:e.suspense)??!0,i=(e==null?void 0:e.pause)===!0||!_&&(e==null?void 0:e.ssr)===!1,c=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0,[,d]=s.useState(0);if(s.useEffect(()=>{if(a||i)return;let f=!0;return n.resolve(r,c).finally(()=>{f&&d(A=>A+1)}),()=>{f=!1}},[r,a,e==null?void 0:e.pause,e==null?void 0:e.timeout,e==null?void 0:e.ssr]),a)return i?v:(n.has(r)||n.resolve(r,c),n.read(r));if(i)return{status:"idle",data:null,error:null};if(n.has(r))try{return{status:"ready",data:n.read(r),error:null}}catch(f){return{status:"not-found",data:null,error:f instanceof Error?f:new Error(String(f))}}return n.resolve(r,c),{status:"loading",data:null,error:null}}const b=typeof window<"u",L=()=>{},h=new Map,F=(r,e)=>{if(!b)return L;const l=h.get(e);if(l)return l.refCount+=1,()=>{l.refCount-=1,l.refCount===0&&(l.linkEl.remove(),h.delete(e))};const n=document.createElement("link");n.rel="stylesheet",n.href=r,n.setAttribute("data-fragment-key",e),document.head.appendChild(n);const a={refCount:1,linkEl:n};return h.set(e,a),()=>{a.refCount-=1,a.refCount===0&&(a.linkEl.remove(),h.delete(e))}},T=b?s.useLayoutEffect:s.useEffect;function I(r,e){T(()=>F(r,e),[r,e])}const U=parseInt(s.version.split(".")[0],10)>=19;function C({href:r,fragmentKey:e}){return U?u.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(I(r,e),null)}function V(r){}const y={},E=s.createContext(null);E.displayName="ProjectPropertiesContext";class N extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,l){var n,a;process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",e,l.componentStack),(a=(n=this.props).onError)==null||a.call(n,e)}render(){return this.state.hasError?null:this.props.children}}const O=({fragmentId:r,props:e,globalCssUrl:l=null,projectProperties:n=y})=>{const a=S(r),c=k().$fragments,d=c==null?void 0:c.getRef(r),f=c==null?void 0:c.getScopeClass(r),A=e??{};return u.jsxs(u.Fragment,{children:[l!=null&&u.jsx(C,{href:l,fragmentKey:"global"}),d&&u.jsx(C,{href:d.cssUrl,fragmentKey:`fragment:${r}:css`}),(d==null?void 0:d.fontsUrl)!=null&&u.jsx(C,{href:d.fontsUrl,fragmentKey:`fragment:${r}:fonts`}),u.jsx(E.Provider,{value:n,children:u.jsx(P.Provider,{value:null,children:u.jsx("div",{className:f,style:{display:"contents"},children:u.jsx(a,{...A})})})})]})},B=({onError:r,...e})=>u.jsx(s.Suspense,{fallback:null,children:u.jsx(N,{onError:r,children:u.jsx(O,{...e})})}),D=({areaCode:r,options:e})=>{if((e==null?void 0:e.pause)===!0)return null;const l=w(r,{timeout:e==null?void 0:e.timeout,ssr:e==null?void 0:e.ssr});if(l===v)return null;const{rootFragmentId:n,props:a,projectProperties:i,globalCssUrl:c}=l,d=typeof(e==null?void 0:e.props)=="function"?e.props(a):e!=null&&e.props?{...a,...e.props}:a;return u.jsx(O,{fragmentId:n,props:d,globalCssUrl:c,projectProperties:i})},$=({areaCode:r,options:e})=>u.jsx(s.Suspense,{fallback:(e==null?void 0:e.fallback)??null,children:u.jsx(N,{onError:e==null?void 0:e.onError,children:u.jsx(D,{areaCode:r,options:e})})});function q({client:r,children:e}){const l=s.useMemo(()=>({read:n=>r.$fragments.read(n)}),[r]);return u.jsx(j,{value:r,children:u.jsx(M,{value:l,children:e})})}function G(r){return(s.useContext(E)??y)[r]}function J(r){return m.createFragmentsClient({...r,inject:F})}Object.defineProperty(t,"FragmentsApiVersionError",{enumerable:!0,get:()=>m.FragmentsApiVersionError}),Object.defineProperty(t,"FragmentsAreaError",{enumerable:!0,get:()=>m.FragmentsAreaError}),Object.defineProperty(t,"FragmentsLoadError",{enumerable:!0,get:()=>m.FragmentsLoadError}),t.AREA_UNRESOLVED=v,t.Area=$,t.FragmentRenderer=B,t.FragmentStylesheet=C,t.FragmentsClientContext=o,t.FragmentsClientProvider=j,t.FragmentsProvider=q,t.InstanceIdContext=P,t.ModulesMapContext=g,t.ModulesMapProvider=M,t.ProjectPropertiesContext=E,t.createBrowserClient=J,t.defaultProjectProperties=y,t.injectStylesheet=F,t.useArea=w,t.useCssChunk=V,t.useFragmentComponent=S,t.useFragmentMetrics=x,t.useFragmentStylesheet=I,t.useProjectProperty=G,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(t,s){typeof exports=="object"&&typeof module<"u"?s(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"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t.FragmentsRuntimeReact={},t.jsxRuntime,t.React,t.fragmentsClient))})(this,function(t,s,u,m){"use strict";const g=u.createContext(null);g.displayName="FragmentsClientContext";function M(r){return s.jsx(g.Provider,{value:r.value,children:r.children})}function N(){return u.useContext(g)}const y=u.createContext(null);y.displayName="InstanceIdContext";const E=u.createContext(null);E.displayName="ModulesMapContext";function j({value:r,children:e}){return s.jsx(E.Provider,{value:r,children:e})}function k(){const r=u.useContext(g);return u.useMemo(()=>({reachGoal:e=>{var l,n;(n=(l=r==null?void 0:r.$metrics)==null?void 0:l.reachGoal)==null||n.call(l,e)}}),[r])}function w(r){const e=u.useContext(E);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const x=typeof window<"u",F=Object.freeze({rootFragmentId:0,variantId:null,props:{},projectProperties:{},globalCssUrl:null});function T(r,e){const l=u.useContext(g);if(!l)throw new Error("[useArea] No FragmentsClientProvider in tree");const n=l.$area;if(!(n!=null&&n.read))throw new Error("[useArea] $area plugin not mounted");const c=(e==null?void 0:e.suspense)??!0,i=(e==null?void 0:e.pause)===!0||!x&&(e==null?void 0:e.ssr)===!1,a=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0,[,d]=u.useState(0);if(u.useEffect(()=>{if(c||i)return;let o=!0;return Promise.resolve(n.resolve(r,a)).catch(()=>{}).finally(()=>{o&&d(f=>f+1)}),()=>{o=!1}},[r,c,e==null?void 0:e.pause,e==null?void 0:e.timeout,e==null?void 0:e.ssr]),c)return i?F:(n.has(r)||Promise.resolve(n.resolve(r,a)).catch(()=>{}),n.read(r));if(i)return{status:"idle",data:null,error:null};if(n.has(r))try{return{status:"ready",data:n.read(r),error:null}}catch(o){return{status:"not-found",data:null,error:o instanceof Error?o:new Error(String(o))}}return Promise.resolve(n.resolve(r,a)).catch(()=>{}),{status:"loading",data:null,error:null}}const _=typeof window<"u",U=3e3,v=new Map,A=(r,e)=>{if(!_){const h=()=>{};return h.loaded=Promise.resolve(),h}const l=v.get(e);if(l){l.refCount+=1;const h=()=>{l.refCount-=1,l.refCount===0&&(l.clearReadyTimer(),l.linkEl.remove(),v.delete(e))};return h.loaded=l.loaded,h}const n=document.createElement("link");n.rel="stylesheet",n.href=r,n.setAttribute("data-fragment-key",e);let c;const i=new Promise(h=>{c=h}),a=()=>{o(),c()},d=setTimeout(a,U),o=()=>clearTimeout(d);n.addEventListener("load",a),n.addEventListener("error",a),document.head.appendChild(n);const f={refCount:1,linkEl:n,loaded:i,clearReadyTimer:o};v.set(e,f);const O=()=>{f.refCount-=1,f.refCount===0&&(f.clearReadyTimer(),f.linkEl.remove(),v.delete(e))};return O.loaded=i,O},B=_?u.useLayoutEffect:u.useEffect;function b(r,e){B(()=>A(r,e),[r,e])}const D=parseInt(u.version.split(".")[0],10)>=19;function C({href:r,fragmentKey:e}){return D?s.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(b(r,e),null)}function V(r){}const S={},P=u.createContext(null);P.displayName="ProjectPropertiesContext";class I extends u.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,l){var n,c;process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",e,l.componentStack),(c=(n=this.props).onError)==null||c.call(n,e)}render(){return this.state.hasError?null:this.props.children}}const L=({fragmentId:r,props:e,globalCssUrl:l=null,projectProperties:n=S})=>{const c=w(r),a=N().$fragments,d=a==null?void 0:a.getRef(r),o=a==null?void 0:a.getScopeClass(r),f=e??{};return s.jsxs(s.Fragment,{children:[l!=null&&s.jsx(C,{href:l,fragmentKey:m.AREA_GLOBAL_CSS_KEY}),d&&s.jsx(C,{href:d.cssUrl,fragmentKey:m.fragmentCssKey(r)}),(d==null?void 0:d.fontsUrl)!=null&&s.jsx(C,{href:d.fontsUrl,fragmentKey:m.fragmentFontsKey(r)}),s.jsx(P.Provider,{value:n,children:s.jsx(y.Provider,{value:null,children:s.jsx("div",{className:o,style:{display:"contents"},children:s.jsx(c,{...f})})})})]})},K=({onError:r,...e})=>s.jsx(u.Suspense,{fallback:null,children:s.jsx(I,{onError:r,children:s.jsx(L,{...e})})}),q=({areaCode:r,options:e})=>{if((e==null?void 0:e.pause)===!0)return null;const l=T(r,{timeout:e==null?void 0:e.timeout,ssr:e==null?void 0:e.ssr});if(l===F)return null;const{rootFragmentId:n,props:c,projectProperties:i,globalCssUrl:a}=l,d=typeof(e==null?void 0:e.props)=="function"?e.props(c):e!=null&&e.props?{...c,...e.props}:c;return s.jsx(L,{fragmentId:n,props:d,globalCssUrl:a,projectProperties:i})},G=({areaCode:r,options:e})=>s.jsx(u.Suspense,{fallback:(e==null?void 0:e.fallback)??null,children:s.jsx(I,{onError:e==null?void 0:e.onError,children:s.jsx(q,{areaCode:r,options:e})})});function R({client:r,children:e}){const l=u.useMemo(()=>({read:n=>r.$fragments.read(n)}),[r]);return s.jsx(M,{value:r,children:s.jsx(j,{value:l,children:e})})}function Y(r){return(u.useContext(P)??S)[r]}function J(r){return m.createFragmentsClient({...r,inject:A})}Object.defineProperty(t,"FragmentsApiVersionError",{enumerable:!0,get:()=>m.FragmentsApiVersionError}),Object.defineProperty(t,"FragmentsAreaError",{enumerable:!0,get:()=>m.FragmentsAreaError}),Object.defineProperty(t,"FragmentsLoadError",{enumerable:!0,get:()=>m.FragmentsLoadError}),t.AREA_UNRESOLVED=F,t.Area=G,t.FragmentRenderer=K,t.FragmentStylesheet=C,t.FragmentsClientContext=g,t.FragmentsClientProvider=M,t.FragmentsProvider=R,t.InstanceIdContext=y,t.ModulesMapContext=E,t.ModulesMapProvider=j,t.ProjectPropertiesContext=P,t.createBrowserClient=J,t.defaultProjectProperties=S,t.injectStylesheet=A,t.useArea=T,t.useCssChunk=V,t.useFragmentComponent=w,t.useFragmentMetrics=k,t.useFragmentStylesheet=b,t.useProjectProperty=Y,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

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