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

package/README.md

@@ -8,12 +8,11 @@ React.
 ## Что это решает
 
 Скомпилированный сервером фрагмент — это ESM-артефакт, который нужно
-загрузить, смонтировать в дерево React, подключить его стили и дать доступу
+загрузить, смонтировать в дерево React, подключить его стили и дать доступ
 к метрикам и переменным области. `runtime-react` закрывает весь этот путь:
 
-- `FragmentsProvider` + `FragmentsClientProvider` — контекст клиента на
-  дерево приложения;
-- `Area` / `FragmentRenderer` — резолвинг и рендер области/фрагмента;
+- `FragmentsProvider` — контекст клиента на дерево приложения;
+- `Area` / `FragmentRenderer` — резолвинг области и рендер фрагмента;
 - `useFragmentComponent`, `useFragmentStylesheet`, `FragmentStylesheet` —
   подгрузка компонента и его CSS;
 - `useFragmentMetrics`, `useArea`, `useProjectProperty` — доступ к метрикам,
@@ -25,27 +24,79 @@ React.
 pnpm add @fragmentsx/runtime-react @fragmentsx/fragments-client react react-dom
 ```
 
+Пакет объявляет `react` в `peerDependencies` (`^17 || ^18 || ^19`).
+
+Если приложение собирается через Vite — поставьте ещё плагин, который
+резолвит bare imports внутри загружаемых артефактов:
+
+```bash
+pnpm add -D @fragmentsx/vite-plugin
+```
+
 ## Использование
 
 ```tsx
-import { createBrowserClient, FragmentsProvider, Area } from '@fragmentsx/runtime-react';
+import {
+  createBrowserClient,
+  FragmentsProvider,
+  Area,
+} from '@fragmentsx/runtime-react';
 
 const client = createBrowserClient({
-  apiUrl: 'https://api.fragments.example.com',
-  projectId: 'my-project',
+  apiToken: import.meta.env.VITE_FRAGMENTS_API_TOKEN,
+  backendEndpoint: 'https://api.example.com',
 });
 
 function App() {
   return (
     <FragmentsProvider client={client}>
-      <Area code="home" />
+      <Area areaCode="home" />
     </FragmentsProvider>
   );
 }
 ```
 
+`apiToken` обязателен. `backendEndpoint` — источник манифеста области; если
+не передан, клиент бьётся в `window.location.origin`, что удобно при
+same-origin проксировании `/api` на публичный API площадки.
+
+`Area` сама разрешает область и внутри себя обёрнута в `Suspense` — пока
+манифест грузится, поддерево пустое. Под капотом:
+
+```
+<Area areaCode> → GET <backendEndpoint>/api/area/<code>/compiled
+              → manifest.fragments[*].moduleUrl → import(артефакт)
+              → <FragmentStylesheet href={cssUrl}/> + рендер фрагмента
+```
+
+### Рендер конкретного фрагмента
+
+Когда область разрешать не нужно, используйте `FragmentRenderer` напрямую:
+
+```tsx
+import { FragmentRenderer } from '@fragmentsx/runtime-react';
+
+<FragmentRenderer fragmentId={42} props={{ title: 'Привет' }} />
+```
+
+`AreaProps` — `{ areaCode: string; options?: { timeout?, pause?, ssr? } }`.
+`FragmentRendererProps` — `{ fragmentId: number; props?; globalCssUrl?;
+projectProperties?; onError? }`.
+
+## Обработка ошибок
+
+Пакет реэкспортирует типизированные ошибки транспорта, чтобы их можно было
+различать в границах ошибок приложения:
+
+```ts
+import {
+  FragmentsAreaError,
+  FragmentsApiVersionError,
+  FragmentsLoadError,
+} from '@fragmentsx/runtime-react';
+```
+
 ## Пара с fragments-client
 
-`runtime-react` зависит от `@fragmentsx/fragments-client` как от транспортного
-ядра (`workspace:*` внутри монорепозитория, `^0.1.0` из npm) — устанавливать
-и обновлять пакеты стоит вместе.
+`runtime-react` зависит от `@fragmentsx/fragments-client` как от
+транспортного ядра — устанавливать и обновлять пакеты стоит вместе.

package/dist/index.d.ts

@@ -20,13 +20,33 @@ import { ReactNode } from 'react';
 export declare const Area: FC<AreaProps>;
 
 /**
- * Props для Area компонента (D-09, сокращён Phase 73 B-13):
+ * Сентинел нерезолвленной области — возвращается вместо чтения `$area.read`,
+ * когда на сервере `options.ssr === false`, либо когда `options.pause === true`
+ * (suspense-режим).
+ *
+ * Совместим с `UseAreaResult` по форме (тип возврата хука не расширяется),
+ * поэтому правка остаётся minor: потребитель, передающий `rootFragmentId`
+ * в проп типа `number`, продолжает компилироваться. Заморожен — сравнение
+ * по ссылке в `Area.tsx` не должно ломаться мутацией снаружи.
+ */
+export declare const AREA_UNRESOLVED: UseAreaResult;
+
+/**
+ * Props для Area компонента (D-09, сокращён Phase 73 B-13; расширен quick 260830-rvp):
  *   - areaCode — строковый код области (Area.code в backend schema)
  *   - options.pause — пропустить рендер (conditional skip per legacy contract)
  *   - options.timeout — network timeout для $area.resolve fetch
  *   - options.ssr — отключить auto-resolve в SSR environment (default `true`);
  *     в browser auto-resolve запускается всегда. Параллель к render-react
  *     Area options.ssr.
+ *   - options.props (INT-03) — объект мержится поверх серверных props (ключи
+ *     потребителя выигрывают), функция вызывается с серверными props и её
+ *     результат уходит в артефакт целиком. Обе формы поддержаны намеренно —
+ *     паритет с legacy render-react, с которого мигрирует потребитель.
+ *   - options.fallback (INT-04) — узел, видимый до разрешения области; default
+ *     `null` (прежнее поведение).
+ *   - options.onError (INT-04) — вызывается при броске внутри поддерева;
+ *     default — только dev-лог границы (прежнее поведение).
  */
 export declare interface AreaProps {
     areaCode: string;
@@ -34,6 +54,9 @@ export declare interface AreaProps {
         timeout?: number;
         pause?: boolean;
         ssr?: boolean;
+        props?: Record<string, unknown> | ((serverProps: Record<string, unknown>) => Record<string, unknown>);
+        fallback?: ReactNode;
+        onError?: (error: Error) => void;
     };
 }
 
@@ -203,7 +226,15 @@ export declare interface ReachGoalInfo {
     campaignId?: number;
 }
 
-export declare function useArea(areaCode: string, options?: UseAreaOptions): UseAreaResult;
+/** Suspense-режим (по умолчанию либо явный `suspense: true`) — прежний throw-протокол. */
+export declare function useArea(areaCode: string, options?: UseAreaOptions & {
+    suspense?: true;
+}): UseAreaResult;
+
+/** Не-suspense режим (INT-05) — явный `suspense: false` возвращает состояние вместо throw. */
+export declare function useArea(areaCode: string, options: UseAreaOptions & {
+    suspense: false;
+}): UseAreaState;
 
 /**
  * Опции хука. По дизайну API параллелен render-react useArea:
@@ -211,16 +242,22 @@ export declare function useArea(areaCode: string, options?: UseAreaOptions): Use
  *   - `ssr` — стартовать ли auto-resolve на сервере (default `true`, чтобы
  *     Next.js getServerSideProps мог hydration'ить с прогретым кэшем).
  *     В browser environment auto-resolve всегда включён.
+ *   - `pause` (INT-06) — пропустить резолв и чтение кэша вовсе; паритет
+ *     с `AreaProps.options.pause`.
+ *   - `suspense` (INT-05) — `false` переключает хук на `UseAreaState` вместо
+ *     throw-протокола; по умолчанию `true` (прежнее поведение).
  */
-declare interface UseAreaOptions {
+export declare interface UseAreaOptions {
     timeout?: number;
     ssr?: boolean;
+    pause?: boolean;
+    suspense?: boolean;
 }
 
 /**
  * Result shape возвращаемый useArea — зеркалирует AreaResolveResult из client-core.
  */
-declare interface UseAreaResult {
+export declare interface UseAreaResult {
     rootFragmentId: number;
     /**
      * Phase 73, B-02/B-06: значения props корневого артефакта, разрешённые сервером
@@ -244,6 +281,26 @@ declare interface UseAreaResult {
     globalCssUrl: string | null;
 }
 
+/**
+ * Состояние, возвращаемое `useArea(code, {suspense:false})` вместо throw.
+ */
+export declare interface UseAreaState {
+    status: UseAreaStatus;
+    data: UseAreaResult | null;
+    error: Error | null;
+}
+
+/**
+ * Union статуса не-suspense режима (quick 260830-rvp, INT-05):
+ *   - `idle` — пауза (`options.pause`) либо серверный пропуск (`ssr:false` на сервере).
+ *   - `loading` — кэш пуст, резолв запущен (идемпотентно), данных ещё нет.
+ *   - `ready` — терминальный кэш-хит, данные доступны.
+ *   - `not-found` — терминальная ошибка резолва (сохранённая в rejected-кэше);
+ *     отдельного статуса под сетевой сбой нет намеренно — оба исхода для площадки
+ *     означают «показать свой шаблон», различие доступно через поле `error`.
+ */
+export declare type UseAreaStatus = "idle" | "loading" | "ready" | "not-found";
+
 /**
  * useCssChunk — no-op stub для compiled fragments.
  *

package/dist/index.es.js

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

package/dist/index.umd.js

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

package/package.json

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