@fragmentsx/client-core 0.3.0 → 0.4.0

package/dist/createAreaManager.d.ts

@@ -0,0 +1,18 @@
+declare module "@graph-state/core" {
+    interface GraphState {
+        $area?: {
+            areaId: number;
+            campaignId?: number;
+            variantId?: number;
+        };
+    }
+}
+interface CreateAreaManagerOptions {
+    areaId: number;
+    campaignId?: number;
+    variantId?: number;
+    areaProperties?: any[];
+}
+export declare const createAreaManager: (options: CreateAreaManagerOptions) => import('@graph-state/core').GraphState<import('@graph-state/core').SystemFields, "AreaManager">;
+export {};
+//# sourceMappingURL=createAreaManager.d.ts.map

package/dist/createAreaManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAreaManager.d.ts","sourceRoot":"","sources":["../src/createAreaManager.ts"],"names":[],"mappings":"AAKA,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,UAAU;QAClB,KAAK,CAAC,EAAE;YACN,MAAM,EAAE,MAAM,CAAC;YACf,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH;CACF;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC;CACxB;AAYD,eAAO,MAAM,iBAAiB,YAAa,wBAAwB,oGA0BlE,CAAC"}

package/dist/fragmentsClient.d.ts

@@ -2,7 +2,6 @@ import { Plugin } from '@graph-state/core';
 declare module "@graph-state/core" {
     interface GraphState {
         env: {
-            isSelf: boolean;
             apiToken: string;
             backendEndpoint: string;
             referer?: string;
@@ -13,7 +12,6 @@ interface Options {
     apiToken: string;
     referer?: string;
     backendEndpoint?: string;
-    isSelf?: boolean;
     fragmentPlugins?: Plugin[];
 }
 export declare const PLUGIN_TYPES: {

package/dist/fragmentsClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fragmentsClient.d.ts","sourceRoot":"","sources":["../src/fragmentsClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAYxD,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,UAAU;QAClB,GAAG,EAAE;YACH,MAAM,EAAE,OAAO,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;YACjB,eAAe,EAAE,MAAM,CAAC;YACxB,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;KACH;CACF;AAED,UAAU,OAAO;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAAa,OAAO,sGAkCrD,CAAC"}
+{"version":3,"file":"fragmentsClient.d.ts","sourceRoot":"","sources":["../src/fragmentsClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAaxD,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,UAAU;QAClB,GAAG,EAAE;YACH,QAAQ,EAAE,MAAM,CAAC;YACjB,eAAe,EAAE,MAAM,CAAC;YACxB,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;KACH;CACF;AAED,UAAU,OAAO;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAAa,OAAO,sGAgCrD,CAAC"}

package/dist/index.cjs.js

@@ -1690,100 +1690,48 @@ const CssOverrideSchema = /* @__PURE__ */ object({
 const BASE_HEADERS = {
   "Content-Type": "application/json"
 };
-const createFetcher = (baseUrl, defaultHeaders = {}) => {
+const createRestFetcher = (baseUrl, defaultHeaders = {}) => {
   const cache = /* @__PURE__ */ new Map();
   const inflightRequests = /* @__PURE__ */ new Map();
-  const getCacheKey = (query2, variables, options) => JSON.stringify({ query: query2, variables, options });
-  const query = async (query2, variables = {}, options = {}) => {
-    const cacheKey = getCacheKey(query2, variables, options);
-    if (cache.has(cacheKey)) {
-      return cache.get(cacheKey);
+  const get = (url) => {
+    const fullUrl = `${baseUrl}${url}`;
+    if (cache.has(fullUrl)) {
+      return Promise.resolve(cache.get(fullUrl));
     }
-    if (inflightRequests.has(cacheKey)) {
-      return inflightRequests.get(cacheKey);
+    if (inflightRequests.has(fullUrl)) {
+      return inflightRequests.get(fullUrl);
     }
-    const request = fetch(baseUrl, {
-      ...options,
-      method: "POST",
-      body: JSON.stringify({ query: query2, variables }),
-      credentials: "include",
+    const request = fetch(fullUrl, {
+      method: "GET",
       headers: {
         ...BASE_HEADERS,
-        ...defaultHeaders,
-        ...options.headers
+        ...defaultHeaders
       }
     }).then(async (res) => {
       if (!res.ok) {
-        if (process.env.NODE_ENV === "production") {
-          console.error(`Fetch error: ${res.status}`);
-          return null;
-        }
-        throw new Error(`Fetch error: ${res.status}`);
+        throw new Error(`Fetch error: ${res.status} ${res.statusText}`);
       }
-      const data = await res.json();
-      if (!query2.includes("mutation")) {
-        cache.set(cacheKey, data);
+      let data;
+      try {
+        data = await res.json();
+      } catch {
+        return null;
       }
+      cache.set(fullUrl, data);
       return data;
     }).finally(() => {
-      inflightRequests.delete(cacheKey);
+      inflightRequests.delete(fullUrl);
     });
-    inflightRequests.set(cacheKey, request);
+    inflightRequests.set(fullUrl, request);
     return request;
   };
-  const invalidate = (endpoint, options) => {
-    cache.delete(getCacheKey(endpoint, options));
+  const invalidate = (url) => {
+    cache.delete(`${baseUrl}${url}`);
   };
-  const clearCache = () => cache.clear();
-  return { query, invalidate, clearCache };
-};
-const googleFonts = `googleFonts {
-            id
-            variants
-            subsets
-            family
-            version
-            files {
-              url
-              variant
-            }
-            category
-        }`;
-const linkedCssChunk = `linkedCssChunk {
-          id
-          content
-        }`;
-const linkedFragments = `{
-            id
-            document
-            ${googleFonts}
-            ${linkedCssChunk}
-        }`;
-const fragment = `
-      {
-        id
-        document
-        linkedFragments ${linkedFragments}
-        ${googleFonts}
-        ${linkedCssChunk}
-      }
-        `;
-const getFragmentQuery = (fragmentId, isSelf) => {
-  return {
-    query: isSelf ? `
-query FragmentDocument($fragmentId: Int!) {
-    fragment(fragmentIds: [$fragmentId]) ${fragment}
-}
-` : `
-query FragmentDocument($fragmentId: Int!) {
-    clientFragment(fragmentId: $fragmentId) ${fragment}
-    }
-}`,
-    variables: {
-      fragmentId
-    },
-    _type: null
+  const clearCache = () => {
+    cache.clear();
   };
+  return { get, invalidate, clearCache };
 };
 var isObject = (input) => {
   return typeof input === "object" && input !== null && !Array.isArray(input);
@@ -1798,6 +1746,7 @@ var createConstants = (...constants) => {
 };
 var noop = () => void 0;
 var isBrowser_default = typeof window !== "undefined";
+var generateId = () => Math.random().toString(16).slice(2);
 var getKey = (v) => isKey(v) ? v.slice(1) : null;
 var isKey = (v) => typeof v === "string" && v.startsWith("$");
 function hashGenerator(layerKey) {
@@ -1955,159 +1904,88 @@ const fetchBeacon = (baseUrl) => {
     sendBeacon
   };
 };
-const getAreaListQuery = (areaCodes) => {
-  return {
-    query: `query($areaCodes: [String!]!) {
-  clientAreas(areaCodes: $areaCodes) {
-  areaId
-campaignId
-        areaProperties
-        projectProperties
-        font {
-          id
-          variants
-          subsets
-          family
-          version
-          files {
-            url
-            variant
-          }
-          category
-        }
-        variant {
-        id
-          fragment {
-              props
-              fragment ${fragment}
-          }
-        }
-    }
-}`,
-    variables: {
-      areaCodes
-    }
-  };
-};
 const fetchPlugin = (state) => {
-  var _a, _b, _c, _d;
-  const isSelf = ((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf) ?? false;
-  const url = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.backendEndpoint;
-  const apiToken = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.apiToken;
-  const referer = (_d = state == null ? void 0 : state.env) == null ? void 0 : _d.referer;
+  var _a, _b, _c;
+  const url = (_a = state == null ? void 0 : state.env) == null ? void 0 : _a.backendEndpoint;
+  const apiToken = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.apiToken;
+  const referer = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.referer;
   let headers = {
-    Authorization: `Bearer ${apiToken}`
+    "X-Api-Key": apiToken
   };
   if (referer) {
     headers.Referer = referer;
   }
-  const fetcher = createFetcher(url, headers);
+  const restFetcher = createRestFetcher(url, headers);
   const beaconFetcher = fetchBeacon();
-  const registerFragmentDocument = (fragmentId, fragment2) => {
-    var _a2, _b2;
-    const fragmentDocument = fragment2 == null ? void 0 : fragment2.document;
+  const registerFragmentDocument = (fragmentId, fragment) => {
+    const fragmentDocument = fragment == null ? void 0 : fragment.document;
     if (!fragmentDocument) {
       console.error("Empty document");
       return null;
     }
-    if (fragment2) {
-      state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
-      if (Array.isArray(fragment2.linkedFragments)) {
-        fragment2.linkedFragments.forEach(
-          (linkedFragment) => registerFragmentDocument(linkedFragment.id, linkedFragment)
-        );
-      }
-      if (Array.isArray(fragment2.linkedCssChunk)) {
-        fragment2.linkedCssChunk.forEach(
-          (linkedChunk) => state.$fetch.cacheCssChunks.set(linkedChunk.id, linkedChunk.content)
-        );
-      }
-      if ("$fonts" in state) {
-        (_b2 = fragment2 == null ? void 0 : fragment2.googleFonts) == null ? void 0 : _b2.forEach((_a2 = state.$fonts) == null ? void 0 : _a2.registerFont);
-      }
-      return fragmentDocument;
-    }
-    return null;
-  };
-  const queryFragment = async (fragmentId) => {
-    var _a2;
-    if (!apiToken || !fragmentId) return null;
-    if (state.$fetch.cacheDocuments.has(fragmentId)) {
-      return state.$fetch.cacheDocuments.get(fragmentId);
-    }
-    const fragmentQuery = getFragmentQuery(fragmentId, isSelf);
-    const response = await fetcher.query(
-      fragmentQuery.query,
-      fragmentQuery.variables,
-      { referrerPolicy: "unsafe-url" }
-    );
-    let fragment2 = null;
-    if (!!(response == null ? void 0 : response.data) && "clientFragment" in response.data) {
-      fragment2 = response.data.clientFragment;
+    state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
+    if (fragment.linkedFragments !== void 0) {
+      fragment.linkedFragments.forEach((linked) => {
+        if ((linked == null ? void 0 : linked.id) && (linked == null ? void 0 : linked.document)) {
+          state.$fetch.cacheDocuments.set(linked.id, linked.document);
+        }
+      });
     }
-    if (!!(response == null ? void 0 : response.data) && "fragment" in response.data) {
-      fragment2 = (_a2 = response.data.fragment) == null ? void 0 : _a2.at(0);
+    if (Array.isArray(fragment.fragmentCssChunks)) {
+      fragment.fragmentCssChunks.forEach(({ cssChunk }) => {
+        if (cssChunk) {
+          state.$fetch.cacheCssChunks.set(cssChunk.id, cssChunk.content);
+        }
+      });
     }
-    return registerFragmentDocument(fragmentId, fragment2);
+    return fragmentDocument;
   };
-  const queryArea = async (areaCode) => {
-    return queryAreaList([areaCode]).then((res) => res == null ? void 0 : res.at(0));
-  };
-  const queryAreaList = async (areaCodes2) => {
-    var _a2;
-    if (!apiToken || !areaCodes2) return null;
-    const nonLoadedAreas = areaCodes2.filter(
+  const queryAreaList = async (areaCodes) => {
+    if (!apiToken || !(areaCodes == null ? void 0 : areaCodes.length)) return [];
+    const nonLoadedCodes = areaCodes.filter(
       (code) => !state.$fetch.cacheAreaDocuments.has(code)
     );
-    if (!nonLoadedAreas.length) {
-      return areaCodes2.map(state.$fetch.cacheAreaDocuments.get);
+    if (nonLoadedCodes.length > 0) {
+      await Promise.all(
+        nonLoadedCodes.map(async (code) => {
+          var _a2, _b2, _c2, _d;
+          const dto = await restFetcher.get(`/api/area/${code}`);
+          if (!dto) return;
+          const fragment = (_a2 = dto.variant) == null ? void 0 : _a2.fragment;
+          if (fragment) {
+            registerFragmentDocument(fragment.id, fragment);
+          }
+          if ("$fonts" in state && dto.font) {
+            (_b2 = state.$fonts) == null ? void 0 : _b2.registerFont(dto.font);
+          }
+          const entity = {
+            fragmentId: fragment == null ? void 0 : fragment.id,
+            props: ((_c2 = dto.variant) == null ? void 0 : _c2.props) ?? {},
+            font: dto.font,
+            areaId: dto.areaId,
+            campaignId: dto.campaignId,
+            variantId: (_d = dto.variant) == null ? void 0 : _d.id
+          };
+          state.$fetch.cacheAreaDocuments.set(code, entity);
+        })
+      );
     }
-    const areaQuery = getAreaListQuery(areaCodes2);
-    const response = await fetcher.query(
-      areaQuery.query,
-      areaQuery.variables,
-      { referrerPolicy: "unsafe-url" }
+    return areaCodes.map(
+      (code) => state.$fetch.cacheAreaDocuments.get(code) ?? null
     );
-    const areas = (_a2 = response == null ? void 0 : response.data) == null ? void 0 : _a2.clientAreas;
-    if (areas) {
-      areas.forEach((area, index2) => {
-        var _a3;
-        const areaCode = areaCodes2 == null ? void 0 : areaCodes2.at(index2);
-        const areaFragment = area.variant.fragment.fragment;
-        registerFragmentDocument(areaFragment.id, areaFragment);
-        const resultProps = [
-          ...area.projectProperties ?? [],
-          ...area.areaProperties ?? []
-        ].reduce((acc, prop) => {
-          acc[prop._id] = prop.defaultValue;
-          return acc;
-        }, area.variant.fragment.props);
-        const entity = {
-          areaId: area.areaId,
-          campaignId: area.campaignId,
-          variantId: area.variant.id,
-          fragmentId: area.variant.fragment.fragment.id,
-          font: area.font,
-          props: resultProps
-        };
-        if ("$fonts" in state) {
-          (_a3 = state.$fonts) == null ? void 0 : _a3.registerFont(area.font);
-        }
-        state.$fetch.cacheAreaDocuments.set(areaCode, entity);
-      });
-      return areaCodes2.map((code) => state.$fetch.cacheAreaDocuments.get(code));
-    }
-    return null;
+  };
+  const queryArea = async (areaCode) => {
+    return queryAreaList([areaCode]).then((res) => (res == null ? void 0 : res.at(0)) ?? null);
   };
   state.$fetch = {
     cacheCssChunks: /* @__PURE__ */ new Map(),
     cacheDocuments: /* @__PURE__ */ new Map(),
     cacheAreaDocuments: /* @__PURE__ */ new Map(),
-    queryFragment,
+    registerFragmentDocument,
     queryArea,
     queryAreaList,
-    query: fetcher.query,
     sendBeacon: beaconFetcher.sendBeacon,
+    get: restFetcher.get,
     readCssChunk: (id) => state.$fetch.cacheCssChunks.get(id) ?? null,
     readFragment: (fragmentId) => state.$fetch.cacheDocuments.get(fragmentId) ?? null,
     readArea: (areaCode) => state.$fetch.cacheAreaDocuments.get(areaCode) ?? null
@@ -2410,6 +2288,84 @@ const scopesPlugin = (state) => {
   };
   return state;
 };
+const PROPERTIES_ROOT_KEY = "PropertiesRoot:root";
+const propertiesPlugin = (state) => {
+  const hydrate = (properties) => {
+    if (!Array.isArray(properties)) return;
+    const keys = [];
+    for (const prop of properties) {
+      if (!prop || !prop._id) continue;
+      const key = `${index.nodes.Variable}:${prop._id}`;
+      state.mutate(
+        { ...prop, _type: index.nodes.Variable, _id: String(prop._id) },
+        { replace: true }
+      );
+      keys.push(key);
+    }
+    state.mutate(
+      PROPERTIES_ROOT_KEY,
+      { propertyKeys: keys },
+      { replace: true }
+    );
+  };
+  const addProperty = (type, initialData) => {
+    const id = (initialData == null ? void 0 : initialData._id) || generateId();
+    const key = `${index.nodes.Variable}:${id}`;
+    state.mutate({
+      _type: index.nodes.Variable,
+      _id: String(id),
+      type,
+      name: `${type} property`,
+      ...initialData
+    });
+    const root = state.resolve(PROPERTIES_ROOT_KEY);
+    const currentKeys = (root == null ? void 0 : root.propertyKeys) ?? [];
+    state.mutate(
+      PROPERTIES_ROOT_KEY,
+      { propertyKeys: [...currentKeys, key] },
+      { replace: true }
+    );
+    return key;
+  };
+  const removeProperty = (key) => {
+    state.invalidate(key);
+    const root = state.resolve(PROPERTIES_ROOT_KEY);
+    const currentKeys = (root == null ? void 0 : root.propertyKeys) ?? [];
+    state.mutate(
+      PROPERTIES_ROOT_KEY,
+      { propertyKeys: currentKeys.filter((k) => k !== key) },
+      { replace: true }
+    );
+  };
+  const extractProperties = () => {
+    const root = state.resolve(PROPERTIES_ROOT_KEY);
+    const keys = (root == null ? void 0 : root.propertyKeys) ?? [];
+    return keys.map((key) => state.resolve(key, { deep: true })).filter(Boolean);
+  };
+  const getPropertyKeys = () => {
+    const root = state.resolve(PROPERTIES_ROOT_KEY);
+    return (root == null ? void 0 : root.propertyKeys) ?? [];
+  };
+  state.addSkip((dataField) => {
+    if (typeof dataField === "object" && dataField !== null && !Array.isArray(dataField)) {
+      return dataField._type === index.nodes.Variable && (dataField._id === "replaceBeforeSave" || !dataField._id);
+    }
+    return false;
+  });
+  state.mutate({
+    _type: "PropertiesRoot",
+    _id: "root",
+    propertyKeys: []
+  });
+  state.$properties = {
+    key: PROPERTIES_ROOT_KEY,
+    hydrate,
+    addProperty,
+    removeProperty,
+    extractProperties,
+    getPropertyKeys
+  };
+};
 const fragmentsPlugin = (options) => (state) => {
   const plugins = (options == null ? void 0 : options.plugins) ?? [];
   const createFragmentManager = (fragmentId, initialDocument = {}) => {
@@ -2446,6 +2402,7 @@ const fragmentsPlugin = (options) => (state) => {
         // cssPlugin,
         fragmentStylesheetPlugin(state),
         scopesPlugin,
+        propertiesPlugin,
         ...plugins
       ],
       skip: [
@@ -2456,12 +2413,19 @@ const fragmentsPlugin = (options) => (state) => {
           ...Object.keys(index.nodes),
           "Temp",
           "Spring",
-          PLUGIN_TYPES.FragmentStylesheet
+          PLUGIN_TYPES.FragmentStylesheet,
+          "PropertiesRoot"
         ])
       ]
     });
     manager.mutate(tempGraph);
     manager.mutate(springGraph);
+    const fragmentRoot = manager.resolve(manager.$fragment.root);
+    const propertyLinks = (fragmentRoot == null ? void 0 : fragmentRoot.properties) ?? [];
+    const propertyEntities = propertyLinks.map((link) => manager.resolve(link)).filter(Boolean);
+    if (propertyEntities.length > 0) {
+      manager.$properties.hydrate(propertyEntities);
+    }
     state.mutate(state.$fragments.key, {
       managers: {
         [fragmentId]: manager
@@ -2490,9 +2454,6 @@ const fragmentsPlugin = (options) => (state) => {
   });
   return state;
 };
-const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: GoalAchievementPost!) {
-  addClientMetric(metric: {metricType: $type, achievement: $value})
-}`;
 const pendingPixels = /* @__PURE__ */ new Set();
 const sendWithImage = (url) => {
   try {
@@ -2566,10 +2527,16 @@ const types = createConstants(
   "REACH_PROJECT_GOAL"
 );
 const globalMetricsPlugin = (state) => {
-  const sendMetric = async (type, value) => {
+  const sendMetric = (type, value) => {
     var _a;
-    const query = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.query;
-    await query(addClientMetric, { type, value });
+    if (type !== types.REACH_PROJECT_GOAL || !value) return;
+    const params = new URLSearchParams({
+      goal_id: String(value.goalId),
+      variant_id: String(value.variantId),
+      area_id: String(value.areaId),
+      campaign_id: String(value.campaignId)
+    });
+    (_a = state.$fetch) == null ? void 0 : _a.get(`/api/metric/goal?${params}`).catch(() => void 0);
   };
   const reachGoal = (goal) => {
     sendMetric(types.REACH_PROJECT_GOAL, goal);
@@ -2593,23 +2560,17 @@ const loadPlugin = (state) => {
     const readFragment = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readFragment(fragmentId);
     const fragmentManager = (_b = state == null ? void 0 : state.$fragments) == null ? void 0 : _b.getManager(fragmentId);
     if (readFragment && !fragmentManager) {
-      const fragmentManager2 = state.$fragments.createFragmentManager(
-        fragmentId,
-        readFragment
-      );
-      return fragmentManager2;
+      return state.$fragments.createFragmentManager(fragmentId, readFragment);
     }
     if (readFragment && fragmentManager) return fragmentManager;
-    return state.$fetch.queryFragment(fragmentId).then(
-      (fragmentDocument) => state.$fragments.createFragmentManager(fragmentId, fragmentDocument)
-    );
+    return null;
   };
   const loadArea = (areaCode) => {
     var _a;
     const readArea2 = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readArea(areaCode);
     if (readArea2) return readArea2;
-    return state.$fetch.queryArea(areaCode).then(async (areaEntity) => {
-      await loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId);
+    return state.$fetch.queryArea(areaCode).then((areaEntity) => {
+      loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId);
       return areaEntity;
     });
   };
@@ -2626,6 +2587,7 @@ const fontsPlugin = (state) => {
   const fonts = /* @__PURE__ */ new Map();
   let defaultFontFamily = null;
   const registerFont = (font) => {
+    if (!font) return;
     const fontFamily = font.family;
     if (!fonts.has(fontFamily)) {
       fonts.set(fontFamily, font);
@@ -2639,7 +2601,8 @@ const fontsPlugin = (state) => {
   const getStyles = () => {
     const styles = [];
     for (const [fontFamily, font] of fonts) {
-      const files = font.files ?? [];
+      const rawFiles = font.files ?? [];
+      const files = Array.isArray(rawFiles) ? rawFiles : Object.entries(rawFiles).map(([variant, url]) => ({ variant, url }));
       for (const file of files) {
         const [weightItem] = getFontWeights([file.variant]);
         styles.push(`@font-face {
@@ -2678,27 +2641,27 @@ const PLUGIN_TYPES = createConstants(
   "FragmentStylesheet"
 );
 const createFragmentsClient = (options) => {
-  const BACKEND_TARGET = (options == null ? void 0 : options.isSelf) ? "/graphql" : "http://85.192.29.65/graphql";
   return kt({
     _type: "GlobalManager",
     initialState: {},
     skip: [
       u([
         ...Object.keys(index.nodes),
-        ...Object.keys(PLUGIN_TYPES)
+        ...Object.keys(PLUGIN_TYPES),
+        "PropertiesRoot"
       ])
     ],
     plugins: [
       (state) => {
         state.env = {
-          isSelf: (options == null ? void 0 : options.isSelf) ?? false,
-          backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? BACKEND_TARGET,
+          backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? "https://client-api.fragmentsx.com",
           apiToken: options == null ? void 0 : options.apiToken,
           referer: options == null ? void 0 : options.referer
         };
       },
       fetchPlugin,
       fontsPlugin,
+      propertiesPlugin,
       fragmentsPlugin({
         plugins: options == null ? void 0 : options.fragmentPlugins
       }),
@@ -2709,6 +2672,39 @@ const createFragmentsClient = (options) => {
     ]
   });
 };
+const areaMetaPlugin = (options) => (state) => {
+  state.$area = {
+    areaId: options.areaId,
+    campaignId: options.campaignId,
+    variantId: options.variantId
+  };
+};
+const createAreaManager = (options) => {
+  var _a;
+  const manager = kt({
+    _type: "AreaManager",
+    _id: String(options.areaId),
+    initialState: {},
+    skip: [
+      u([
+        ...Object.keys(index.nodes),
+        "PropertiesRoot"
+      ])
+    ],
+    plugins: [
+      areaMetaPlugin({
+        areaId: options.areaId,
+        campaignId: options.campaignId,
+        variantId: options.variantId
+      }),
+      propertiesPlugin
+    ]
+  });
+  if ((_a = options.areaProperties) == null ? void 0 : _a.length) {
+    manager.$properties.hydrate(options.areaProperties);
+  }
+  return manager;
+};
 const ssrPlugin = (state) => {
   var _a, _b, _c;
   if (!["$fragments"].every((field) => field in state)) {
@@ -2769,6 +2765,8 @@ function createTestFragmentsClient(options) {
   }
   return client;
 }
+exports.createAreaManager = createAreaManager;
 exports.createFragmentsClient = createFragmentsClient;
 exports.createTestFragmentsClient = createTestFragmentsClient;
+exports.propertiesPlugin = propertiesPlugin;
 exports.ssrPlugin = ssrPlugin;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { createFragmentsClient } from './fragmentsClient';
+export { createAreaManager } from './createAreaManager';
 export { ssrPlugin } from './plugins/ssr';
+export { propertiesPlugin } from './plugins/properties';
 export { createTestFragmentsClient, type TestFragmentsClientOptions, type FragmentDocument, type AreaCacheEntity, } from './testing/createTestFragmentsClient';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,yBAAyB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,yBAAyB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,qCAAqC,CAAC"}