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

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;
     };
 }
 
@@ -146,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>;
 
@@ -203,7 +227,49 @@ export declare interface ReachGoalInfo {
     campaignId?: number;
 }
 
-export declare function useArea(areaCode: string, options?: UseAreaOptions): UseAreaResult;
+/**
+ * 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;
+}): UseAreaResult;
+
+/** Не-suspense режим (INT-05) — явный `suspense: false` возвращает состояние вместо throw. */
+export declare function useArea(areaCode: string, options: UseAreaOptions & {
+    suspense: false;
+}): UseAreaState;
 
 /**
  * Опции хука. По дизайну API параллелен render-react useArea:
@@ -211,17 +277,31 @@ 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;
+    /**
+     * 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` сюда не доезжают, только готовые значения.
@@ -244,6 +324,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 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
 );
-c.displayName = "FragmentsClientContext";
-function _(r) {
-  return /* @__PURE__ */ o(c.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 b() {
-  return a(c);
+function K() {
+  return f(m);
 }
-const v = f(null);
-v.displayName = "InstanceIdContext";
-const h = f(
+const S = v(null);
+S.displayName = "InstanceIdContext";
+const g = v(
   null
 );
-h.displayName = "ModulesMapContext";
-function B({
+g.displayName = "ModulesMapContext";
+function V({
   value: r,
   children: e
 }) {
-  return /* @__PURE__ */ o(h.Provider, { value: r, children: e });
+  return /* @__PURE__ */ l(g.Provider, { value: r, children: e });
 }
-function H() {
-  const r = a(c);
-  return g(
+function re() {
+  const r = f(m);
+  return P(
     () => ({
       reachGoal: (e) => {
         var n, t;
@@ -36,48 +36,90 @@ function H() {
     [r]
   );
 }
-function L(r) {
-  const e = a(h);
+function G(r) {
+  const e = f(g);
   if (!e)
     throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
   return e.read(r);
 }
-const U = typeof window < "u";
+const Y = typeof window < "u", x = Object.freeze({
+  rootFragmentId: 0,
+  variantId: null,
+  props: {},
+  projectProperties: {},
+  globalCssUrl: null
+});
 function $(r, e) {
-  const n = a(c);
+  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");
-  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 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 Promise.resolve(t.resolve(r, a)).catch(() => {
+    }).finally(() => {
+      c && u((o) => o + 1);
+    }), () => {
+      c = !1;
+    };
+  }, [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))
+    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 Promise.resolve(t.resolve(r, a)).catch(() => {
+  }), { 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);
-  if (n)
-    return n.refCount += 1, () => {
-      n.refCount -= 1, n.refCount === 0 && (n.linkEl.remove(), d.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 s = { refCount: 1, linkEl: t };
-  return d.set(e, s), () => {
-    s.refCount -= 1, s.refCount === 0 && (s.linkEl.remove(), d.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));
   };
-}, O = E ? N : S;
-function V(r, e) {
-  O(() => F(r, e), [r, e]);
+  return y.loaded = d, y;
+}, H = w ? N : F;
+function J(r, e) {
+  H(() => M(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 q = parseInt(k.split(".")[0], 10), Q = q >= 19;
+function E({ href: r, fragmentKey: e }) {
+  return Q ? /* @__PURE__ */ l(
     "link",
     {
       rel: "stylesheet",
@@ -85,13 +127,13 @@ function m({ href: r, fragmentKey: e }) {
       precedence: "default",
       "data-fragment-key": e
     }
-  ) : (V(r, e), null);
+  ) : (J(r, e), null);
 }
-function Q(r) {
+function te(r) {
 }
-const P = {}, p = f(null);
-p.displayName = "ProjectPropertiesContext";
-class y extends R {
+const R = {}, C = v(null);
+C.displayName = "ProjectPropertiesContext";
+class T extends b {
   constructor() {
     super(...arguments), this.state = { hasError: !1 };
   }
@@ -106,97 +148,101 @@ class y extends R {
     return this.state.hasError ? null : this.props.children;
   }
 }
-const x = ({
+const _ = ({
   fragmentId: r,
   props: e,
   globalCssUrl: n = null,
-  projectProperties: t = P
+  projectProperties: t = R
 }) => {
-  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 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
       }
     ),
-    u && /* @__PURE__ */ o(
-      m,
+    u && /* @__PURE__ */ l(
+      E,
       {
         href: u.cssUrl,
-        fragmentKey: `fragment:${r}:css`
+        fragmentKey: O(r)
       }
     ),
-    (u == null ? void 0 : u.fontsUrl) != null && /* @__PURE__ */ o(
-      m,
+    (u == null ? void 0 : u.fontsUrl) != null && /* @__PURE__ */ l(
+      E,
       {
         href: u.fontsUrl,
-        fragmentKey: `fragment:${r}:fonts`
+        fragmentKey: U(r)
       }
     ),
-    /* @__PURE__ */ o(p.Provider, { value: t, children: /* @__PURE__ */ o(v.Provider, { value: null, children: /* @__PURE__ */ o(
+    /* @__PURE__ */ l(C.Provider, { value: t, children: /* @__PURE__ */ l(S.Provider, { value: null, children: /* @__PURE__ */ l(
       "div",
       {
-        className: w,
+        className: c,
         style: { display: "contents" },
-        children: /* @__PURE__ */ o(s, { ...A })
+        children: /* @__PURE__ */ l(s, { ...o })
       }
     ) }) })
   ] });
-}, 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 }) => {
+}, 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 { rootFragmentId: n, props: t, projectProperties: s, globalCssUrl: i } = $(r, {
+  const n = $(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: 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: n,
-      props: t,
-      globalCssUrl: i,
-      projectProperties: s
+      fragmentId: t,
+      props: u,
+      globalCssUrl: a,
+      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(
+}, 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__ */ o(_, { value: r, children: /* @__PURE__ */ o(B, { value: n, children: e }) });
+  return /* @__PURE__ */ l(D, { value: r, children: /* @__PURE__ */ l(V, { value: n, children: e }) });
 }
-function Z(r) {
-  return (a(p) ?? P)[r];
+function se(r) {
+  return (f(C) ?? R)[r];
 }
-function ee(r) {
-  return k({ ...r, inject: F });
+function ue(r) {
+  return B({ ...r, inject: M });
 }
 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,
+  x as AREA_UNRESOLVED,
+  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,
-  Q as useCssChunk,
-  L as useFragmentComponent,
-  H as useFragmentMetrics,
-  V as useFragmentStylesheet,
-  Z as useProjectProperty
+  te as useCssChunk,
+  G as useFragmentComponent,
+  re as useFragmentMetrics,
+  J as useFragmentStylesheet,
+  se 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,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.1.0",
+  "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.1.0"
+    "@fragmentsx/fragments-client": "0.2.0-dev-20260901074721"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",