@fragmentsx/runtime-react 0.2.0-dev-20260910143938 → 0.2.0-dev-20260922090625

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { FragmentsLoadError } from '@fragmentsx/fragments-client';
 import { GraphState } from '@graph-state/core';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { ResolvedSlotPosition } from '@fragmentsx/fragments-client';
 
 /**
  * Area — публичный компонент для рендеринга compiled fragment в consumer app.
@@ -114,6 +115,8 @@ declare type ArtifactSchemaFieldAtDepth<D extends number> = D extends 0 ? never
     readonly type: "Array";
     readonly defaultValue?: readonly unknown[];
     readonly definition?: ArtifactSchemaFieldAtDepth<PrevDepth<D>>;
+}) | (ArtifactSchemaFieldCommon & {
+    readonly type: typeof NODE_SCHEMA_TYPE;
 });
 
 /**
@@ -138,7 +141,13 @@ declare type ArtifactSchemaFieldAtDepth<D extends number> = D extends 0 ? never
  * Зарезервированные типы словаря (`Event`, `Goal`, `ComponentInstance`,
  * `Date`, `'fragment'`) в объединение НЕ входят — этим `ArtifactSchema`
  * отличается от `SchemaFieldDescriptor` (`propsFromSchema.ts`), у которого
- * `type: VariableType` принимает любой тип словаря. Ключи `RESERVED_SCHEMA_KEYS`
+ * `type: VariableType` принимает любой тип словаря. Десятый вариант — `Node`
+ * (Phase 106, SLOT-01): дырка, содержимое которой кладёт не автор шаблона.
+ * `Node` живёт ТОЛЬКО здесь и в литеральной valibot-схеме гейта — в словарь
+ * `variableType` он не заводится (переменной типа «узел» не бывает, С-05), и
+ * поэтому не является ни разрешённым, ни зарезервированным типом словаря; у
+ * него нет `defaultValue` — значение по умолчанию пришлось бы сериализовать в
+ * схему, а узел не сериализуется. Ключи `RESERVED_SCHEMA_KEYS`
  * (`__proto__`/`constructor`/`prototype`/`_id`/`_type`/`parent`/`$ref`) типом
  * не выражаются и остаются структурным кодом `SCHEMA_RESERVED_KEY` в гейте —
  * TypeScript не умеет запретить конкретные строковые ключи объекта общим
@@ -264,7 +273,7 @@ declare type FieldRequired<F extends SchemaFieldDescriptor, ConsiderDefault exte
  * индексированного доступа вне условного типа, который резолвился бы по
  * ограничению.
  */
-declare type FieldValueType<F extends SchemaFieldDescriptor, D extends number> = F["type"] extends "Enum" ? EnumFieldType<F> : F["type"] extends "Object" ? ObjectFieldType<F, D> : F["type"] extends "Array" ? ArrayFieldType<F, D> : ValueOfVariableType<F["type"]>;
+declare type FieldValueType<F extends SchemaFieldDescriptor, D extends number> = F["type"] extends "Enum" ? EnumFieldType<F> : F["type"] extends "Object" ? ObjectFieldType<F, D> : F["type"] extends "Array" ? ArrayFieldType<F, D> : F["type"] extends typeof NODE_SCHEMA_TYPE ? ValueOfNodeType : ValueOfVariableType<Extract<F["type"], VariableType>>;
 
 export declare interface FragmentMetrics {
     reachGoal: (info: ReachGoalInfo) => void;
@@ -291,6 +300,21 @@ export declare interface FragmentRendererProps {
     globalCssUrl?: string | null;
     /** Словарь project-переменных площадки (манифест области или блок данных preview); ключ — имя переменной, значение — голое (D-72-02). */
     projectProperties?: Record<string, unknown>;
+    /**
+     * Phase 105 план 105-05 (D-105-11): конус — список id (root + reachable),
+     * корень первым. Необязательное со значением по умолчанию «только
+     * собственный id» — так превью и любой прямой потребитель этого тела без
+     * настоящего конуса (до плана 105-08) продолжают работать без правки.
+     */
+    fragments?: number[];
+    /**
+     * Phase 106 (D-106-01/SLOT-04/план 05): дырки шаблона (`type: 'Node'`),
+     * заполненные данными варианта — дерево ссылок `{fragmentId, props, slots}`
+     * либо список таких ссылок (`ResolvedSlotPosition`). Необязательное —
+     * превью и любой прямой потребитель без слотов продолжают работать без
+     * правки (дырка рисует пустоту, как и без пропа).
+     */
+    slots?: Record<string, ResolvedSlotPosition>;
     onError?: (error: Error) => void;
 }
 
@@ -430,6 +454,27 @@ declare interface ModulesMapProviderProps {
     children: ReactNode;
 }
 
+/**
+ * Третья таблица проекции типа (D-97-03: три таблицы — три домена), рядом с
+ * `VARIABLE_TYPE_TO_TS` (`variableTypeToTs.ts`). `Node` не входит в словарь
+ * `variableType` (`constants/index.ts`) — переменной этого типа не бывает по
+ * С-05, сервер её не развернёт; дырка объявляется ТОЛЬКО в литерале схемы
+ * артефакта. Сливать эту таблицу с `VARIABLE_TYPE_TO_TS` ЗАПРЕЩЕНО — тот же
+ * запрет, что охраняет разделение `VARIABLE_TYPE_TO_TS` от соседних реестров
+ * `VariableType → valibot-схема` (D-97-03).
+ *
+ * `value` несёт носитель типа `ReactNode` — импорт типовый, рантайм-импорта
+ * React в пакете `@fragmentsx/definition` не появляется.
+ */
+declare const NODE_SCHEMA_TYPE: "Node";
+
+declare const NODE_TYPE_TO_TS: {
+    Node: {
+        ts: string;
+        value: ReactNode;
+    };
+};
+
 /**
  * Тип поля `Object`. Вырожденный вердикт — литеральный `{}` (пустой
  * объектный тип БЕЗ индексной сигнатуры), когда `fields` отсутствует или
@@ -534,7 +579,7 @@ export declare interface ReachGoalInfo {
  * тип значения, которое мутируется в рантайме.
  */
 export declare interface SchemaFieldDescriptor {
-    readonly type: VariableType;
+    readonly type: VariableType | typeof NODE_SCHEMA_TYPE;
     readonly required?: boolean;
     readonly defaultValue?: unknown;
     /** `Enum` — варианты значения; `PropsFromSchema` сужает до `cases[].id`. */
@@ -648,6 +693,20 @@ export declare interface UseAreaResult {
      * `null` — backend не отдал global reset; baseline применяться не будет.
      */
     globalCssUrl: string | null;
+    /**
+     * Phase 105 план 105-05 (D-105-11): конус — список id (root + reachable),
+     * корень первым. `$area` уже нормализует отсутствие поля у backend'а в
+     * `[]` — потребитель (`Area`/`FragmentRenderer`) не делает optional-проверку.
+     */
+    fragments: number[];
+    /**
+     * Phase 106 (D-106-01/SLOT-04/план 05): дырки шаблона (`type: 'Node'`),
+     * заполненные данными варианта — дерево ссылок `{fragmentId, props, slots}`
+     * либо список таких ссылок (`ResolvedSlotPosition`). `$area` уже
+     * нормализует отсутствие поля у backend'а в `{}` — потребитель
+     * (`Area`/`FragmentRenderer`) не делает optional-проверку.
+     */
+    slots: Record<string, ResolvedSlotPosition>;
 }
 
 /**
@@ -713,6 +772,9 @@ export declare function useFragmentStylesheet(href: string, key: string): void;
 
 export declare function useProjectProperty<K extends keyof ProjectProperties>(name: K): ProjectProperties[K];
 
+/** Носитель типа поля `Node` — читает `value`-проекцию третьей таблицы `NODE_TYPE_TO_TS` (D-97-03: три таблицы, три домена, слияние с `VARIABLE_TYPE_TO_TS` запрещено). */
+declare type ValueOfNodeType = (typeof NODE_TYPE_TO_TS)[typeof NODE_SCHEMA_TYPE]["value"];
+
 /** Носитель типа поля-НЕ-Enum/Object/Array — читает `value`-проекцию таблицы `VARIABLE_TYPE_TO_TS` (носитель, значение не используется, только тип). */
 declare type ValueOfVariableType<T extends VariableType> = (typeof VARIABLE_TYPE_TO_TS)[T]["value"];
 

package/dist/index.es.js

@@ -1,32 +1,29 @@
-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(
+import { jsx as a, jsxs as _, Fragment as k } from "react/jsx-runtime";
+import { createContext as v, useContext as f, useMemo as A, useState as L, useEffect as S, useLayoutEffect as b, version as O, Component as B, Suspense as w, createElement as D } from "react";
+import { toScopeClassName as $, AREA_GLOBAL_CSS_KEY as U, resolveStylesHref as V, fragmentCssKey as G, createFragmentsClient as K } from "@fragmentsx/fragments-client";
+import { FragmentsApiVersionError as ve, FragmentsAreaError as Ee, FragmentsLoadError as ge } from "@fragmentsx/fragments-client";
+const E = v(
   null
 );
-m.displayName = "FragmentsClientContext";
-function D(r) {
-  return /* @__PURE__ */ l(m.Provider, { value: r.value, children: r.children });
+E.displayName = "FragmentsClientContext";
+function Y(r) {
+  return /* @__PURE__ */ a(E.Provider, { value: r.value, children: r.children });
 }
-function K() {
-  return f(m);
-}
-const S = v(null);
-S.displayName = "InstanceIdContext";
+const M = v(null);
+M.displayName = "InstanceIdContext";
 const g = v(
   null
 );
 g.displayName = "ModulesMapContext";
-function V({
+function H({
   value: r,
   children: e
 }) {
-  return /* @__PURE__ */ l(g.Provider, { value: r, children: e });
+  return /* @__PURE__ */ a(g.Provider, { value: r, children: e });
 }
-function re() {
-  const r = f(m);
-  return P(
+function ue() {
+  const r = f(E);
+  return A(
     () => ({
       reachGoal: (e) => {
         var n, t;
@@ -36,93 +33,98 @@ function re() {
     [r]
   );
 }
-function G(r) {
+function z(r) {
   const e = f(g);
   if (!e)
     throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
   return e.read(r);
 }
-const Y = typeof window < "u", x = Object.freeze({
+const J = typeof window < "u", x = Object.freeze({
   rootFragmentId: 0,
   variantId: null,
   props: {},
   projectProperties: {},
-  globalCssUrl: null
+  globalCssUrl: null,
+  // Phase 105 план 105-05: пустой конус — форма возврата хука не меняется,
+  // обёртка рендера (задача 3) остаётся без атрибута class на этом сентинеле.
+  fragments: [],
+  // Phase 106: пустой словарь слотов — сентинел не разворачивает ни одной ссылки.
+  slots: {}
 });
-function $(r, e) {
-  const n = f(m);
+function q(r, e) {
+  const n = f(E);
   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 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(() => {
+  const l = (e == null ? void 0 : e.suspense) ?? !0, u = (e == null ? void 0 : e.pause) === !0 || !J && (e == null ? void 0 : e.ssr) === !1, c = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0, [, m] = L(0);
+  if (S(() => {
+    if (l || u) return;
+    let s = !0;
+    return Promise.resolve(t.resolve(r, c)).catch(() => {
     }).finally(() => {
-      c && u((o) => o + 1);
+      s && m((o) => o + 1);
     }), () => {
-      c = !1;
+      s = !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(() => {
+  }, [r, l, e == null ? void 0 : e.pause, e == null ? void 0 : e.timeout, e == null ? void 0 : e.ssr]), l)
+    return u ? x : (t.has(r) || Promise.resolve(t.resolve(r, c)).catch(() => {
     }), t.read(r));
-  if (d)
+  if (u)
     return { status: "idle", data: null, error: null };
   if (t.has(r))
     try {
       return { status: "ready", data: t.read(r), error: null };
-    } catch (c) {
+    } catch (s) {
       return {
         status: "not-found",
         data: null,
-        error: c instanceof Error ? c : new Error(String(c))
+        error: s instanceof Error ? s : new Error(String(s))
       };
     }
-  return Promise.resolve(t.resolve(r, a)).catch(() => {
+  return Promise.resolve(t.resolve(r, c)).catch(() => {
   }), { status: "loading", data: null, error: null };
 }
-const w = typeof window < "u", z = 3e3, h = /* @__PURE__ */ new Map(), M = (r, e) => {
-  if (!w) {
-    const i = () => {
+const I = typeof window < "u", Q = 3e3, h = /* @__PURE__ */ new Map(), p = (r, e) => {
+  if (!I) {
+    const d = () => {
     };
-    return i.loaded = Promise.resolve(), i;
+    return d.loaded = Promise.resolve(), d;
   }
   const n = h.get(e);
   if (n) {
     n.refCount += 1;
-    const i = () => {
+    const d = () => {
       n.refCount -= 1, n.refCount === 0 && (n.clearReadyTimer(), n.linkEl.remove(), h.delete(e));
     };
-    return i.loaded = n.loaded, i;
+    return d.loaded = n.loaded, d;
   }
   const t = document.createElement("link");
   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 };
+  let l;
+  const u = new Promise((d) => {
+    l = d;
+  }), c = () => {
+    s(), l();
+  }, m = setTimeout(c, Q), s = () => clearTimeout(m);
+  t.addEventListener("load", c), t.addEventListener("error", c), document.head.appendChild(t);
+  const o = { refCount: 1, linkEl: t, loaded: u, clearReadyTimer: s };
   h.set(e, o);
-  const y = () => {
+  const i = () => {
     o.refCount -= 1, o.refCount === 0 && (o.clearReadyTimer(), o.linkEl.remove(), h.delete(e));
   };
-  return y.loaded = d, y;
-}, H = w ? N : F;
-function J(r, e) {
-  H(() => M(r, e), [r, e]);
+  return i.loaded = u, i;
+}, W = I ? b : S;
+function X(r, e) {
+  W(() => p(r, e), [r, e]);
 }
-const q = parseInt(k.split(".")[0], 10), Q = q >= 19;
-function E({
+const Z = parseInt(O.split(".")[0], 10), ee = Z >= 19;
+function P({
   href: r,
   fragmentKey: e
 }) {
-  return Q ? /* @__PURE__ */ l(
+  return ee ? /* @__PURE__ */ a(
     "link",
     {
       rel: "stylesheet",
@@ -130,13 +132,13 @@ function E({
       precedence: "default",
       "data-fragment-key": e
     }
-  ) : (J(r, e), null);
+  ) : (X(r, e), null);
 }
-function te(r) {
+function se(r) {
 }
-const R = {}, C = v(null);
-C.displayName = "ProjectPropertiesContext";
-class T extends b {
+const R = {}, y = v(null);
+y.displayName = "ProjectPropertiesContext";
+class T extends B {
   constructor() {
     super(...arguments), this.state = { hasError: !1 };
   }
@@ -144,108 +146,134 @@ class T extends b {
     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 _ = ({
+function j(r, e) {
+  if (!r) return {};
+  const n = {};
+  for (const t of Object.keys(r))
+    n[t] = re(r[t], e);
+  return n;
+}
+function re(r, e) {
+  return Array.isArray(r) ? r.map((n, t) => n === null ? null : F(n, e, t)) : F(r, e);
+}
+function F(r, e, n) {
+  let t;
+  try {
+    t = e(r.fragmentId);
+  } catch (u) {
+    if (u != null && typeof u.then == "function")
+      throw u;
+    return console.warn(`[FragmentRenderer] Slot fragment ${r.fragmentId} failed to load — rendering empty hole`, u), null;
+  }
+  const l = j(r.slots, e);
+  return D(t, { key: n, ...r.props, ...l });
+}
+const N = ({
   fragmentId: r,
   props: e,
   globalCssUrl: n = null,
-  projectProperties: t = R
+  projectProperties: t = R,
+  fragments: l = [r],
+  slots: u
 }) => {
-  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,
+  const c = z(r), m = f(g);
+  if (!m)
+    throw new Error("[FragmentRendererInner] No ModulesMapProvider in tree");
+  const s = j(u, m.read), o = { ...e ?? {}, ...s }, i = l.length > 0 ? l.map($).join(" ") : void 0;
+  return /* @__PURE__ */ _(k, { children: [
+    n != null && /* @__PURE__ */ a(
+      P,
       {
         href: n,
-        fragmentKey: p
-      }
-    ),
-    u && /* @__PURE__ */ l(
-      E,
-      {
-        href: u.cssUrl,
-        fragmentKey: O(r)
+        fragmentKey: U
       }
     ),
-    (u == null ? void 0 : u.fontsUrl) != null && /* @__PURE__ */ l(
-      E,
-      {
-        href: u.fontsUrl,
-        fragmentKey: U(r)
-      }
-    ),
-    /* @__PURE__ */ l(C.Provider, { value: t, children: /* @__PURE__ */ l(S.Provider, { value: null, children: /* @__PURE__ */ l(
+    l.map((d) => {
+      const C = V(d);
+      return C ? /* @__PURE__ */ a(
+        P,
+        {
+          href: C,
+          fragmentKey: G(d)
+        },
+        d
+      ) : null;
+    }),
+    /* @__PURE__ */ a(y.Provider, { value: t, children: /* @__PURE__ */ a(M.Provider, { value: null, children: /* @__PURE__ */ a(
       "div",
       {
-        className: c,
+        className: i,
         style: { display: "contents" },
-        children: /* @__PURE__ */ l(s, { ...o })
+        children: /* @__PURE__ */ a(c, { ...o })
       }
     ) }) })
   ] });
-}, ne = ({ onError: r, ...e }) => /* @__PURE__ */ l(A, { fallback: null, children: /* @__PURE__ */ l(T, { onError: r, children: /* @__PURE__ */ l(_, { ...e }) }) }), W = ({ areaCode: r, options: e }) => {
+}, ce = ({ onError: r, ...e }) => /* @__PURE__ */ a(w, { fallback: null, children: /* @__PURE__ */ a(T, { onError: r, children: /* @__PURE__ */ a(N, { ...e }) }) }), te = ({ areaCode: r, options: e }) => {
   if ((e == null ? void 0 : e.pause) === !0)
     return null;
-  const n = $(r, {
+  const n = q(r, {
     timeout: e == null ? void 0 : e.timeout,
     ssr: e == null ? void 0 : e.ssr
   });
   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(
-    _,
+  const { rootFragmentId: t, props: l, projectProperties: u, globalCssUrl: c, fragments: m, slots: s } = n, o = typeof (e == null ? void 0 : e.props) == "function" ? e.props(l) : e != null && e.props ? { ...l, ...e.props } : l;
+  return /* @__PURE__ */ a(
+    N,
     {
       fragmentId: t,
-      props: u,
-      globalCssUrl: a,
-      projectProperties: d
+      props: o,
+      globalCssUrl: c,
+      projectProperties: u,
+      fragments: m,
+      slots: s
     }
   );
-}, 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(
+}, oe = ({ areaCode: r, options: e }) => /* @__PURE__ */ a(w, { fallback: (e == null ? void 0 : e.fallback) ?? null, children: /* @__PURE__ */ a(T, { onError: e == null ? void 0 : e.onError, children: /* @__PURE__ */ a(te, { areaCode: r, options: e }) }) });
+function de({ client: r, children: e }) {
+  const n = A(
     () => ({
       read: (t) => r.$fragments.read(t)
     }),
     [r]
   );
-  return /* @__PURE__ */ l(D, { value: r, children: /* @__PURE__ */ l(V, { value: n, children: e }) });
+  return /* @__PURE__ */ a(Y, { value: r, children: /* @__PURE__ */ a(H, { value: n, children: e }) });
 }
-function se(r) {
-  return (f(C) ?? R)[r];
+function me(r) {
+  return (f(y) ?? R)[r];
 }
-function ue(r) {
-  return B({ ...r, inject: M });
+function fe(r) {
+  return K({ ...r, inject: p });
 }
 export {
   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,
+  oe as Area,
+  ce as FragmentRenderer,
+  P as FragmentStylesheet,
+  ve as FragmentsApiVersionError,
+  Ee as FragmentsAreaError,
+  E as FragmentsClientContext,
+  Y as FragmentsClientProvider,
+  ge as FragmentsLoadError,
+  de as FragmentsProvider,
+  M as InstanceIdContext,
   g as ModulesMapContext,
-  V as ModulesMapProvider,
-  C as ProjectPropertiesContext,
-  ue as createBrowserClient,
+  H as ModulesMapProvider,
+  y as ProjectPropertiesContext,
+  fe 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
+  p as injectStylesheet,
+  q as useArea,
+  se as useCssChunk,
+  z as useFragmentComponent,
+  ue as useFragmentMetrics,
+  X as useFragmentStylesheet,
+  me as useProjectProperty
 };

package/dist/index.umd.js

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

package/package.json

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