@fragmentsx/render-react 1.2.5 → 1.3.0

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { createContext, useContext, useReducer, useRef, useEffect, useCallback,
 import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField } from "@fragmentsx/definition";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useGraph, useGraphStack } from "@graph-state/react";
-import { noop, isPrimitive, isObject, generateId, getKey as getKey$1, isValue, pick, toPx, cleanGraph, flattenObject, setKey as setKey$1, toKebabCase, set, get, omit, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
+import { noop, isPrimitive, isObject, generateId, getKey as getKey$1, isValue, pick, toPx, cleanGraph, setKey as setKey$1, toKebabCase, set, get, omit, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
 import { entityOfKey, keyOfEntity, isPartialKey, isLinkKey } from "@graph-state/core";
 const GlobalManagerContext = createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
@@ -779,23 +779,21 @@ const calcLinearGradient = (angle, values) => {
   }
   return `linear-gradient(${angle}deg, ${parts.join(", ")})`;
 };
-const isVariableLink = (value) => {
-  var _a;
-  return isLink(value) && ((_a = value == null ? void 0 : value.split(":")) == null ? void 0 : _a.at(0)) === definition.nodes.Variable;
-};
-const isLink = (value) => {
-  var _a, _b;
-  return value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+const getOverriderByLayers = (layerKey, layers) => {
+  return layers.find((l) => {
+    var _a;
+    return (_a = l == null ? void 0 : l.overrides) == null ? void 0 : _a.includes(layerKey);
+  });
 };
-const getCssVariables = (props) => {
-  return Object.entries(cleanGraph(flattenObject(props))).reduce(
+const toCssCustomProperties = (props) => {
+  return Object.entries(props).reduce(
     (acc, [key, value]) => {
       var _a, _b;
-      if (isVariableLink(value)) {
+      if (isVariableLink$1(value)) {
         const nestedVariableId = (_a = entityOfKey(value)) == null ? void 0 : _a._id;
         value = `var(--${nestedVariableId})`;
       }
-      if ((_b = value == null ? void 0 : value.startsWith) == null ? void 0 : _b.call(value, "http")) {
+      if (typeof value === "string" && ((_b = value.startsWith) == null ? void 0 : _b.call(value, "http"))) {
         value = `url("${value}")`;
       }
       acc[`--${key}`] = value;
@@ -804,11 +802,101 @@ const getCssVariables = (props) => {
     {}
   );
 };
-const getOverriderByLayers = (layerKey, layers) => {
-  return layers.find((l) => {
-    var _a;
-    return (_a = l == null ? void 0 : l.overrides) == null ? void 0 : _a.includes(layerKey);
-  });
+const resolveFieldVar = (field, manager) => {
+  if (isObject(field) && (field == null ? void 0 : field._id)) {
+    return field;
+  }
+  if (isVariableLink$1(field) && manager) {
+    return manager.resolve(field);
+  }
+  return void 0;
+};
+const toVariableLink = (field) => {
+  if (isVariableLink$1(field)) {
+    return field;
+  }
+  if (isObject(field) && (field == null ? void 0 : field._type) && (field == null ? void 0 : field._id)) {
+    return keyOfEntity(field);
+  }
+  return void 0;
+};
+const expandConcreteValue = (objectVar, valueObj, childManager, result) => {
+  const fields = cleanGraph(objectVar.fields);
+  for (const [fieldName, childField] of Object.entries(fields)) {
+    if (!(fieldName in valueObj)) continue;
+    const childFieldVar = resolveFieldVar(childField, childManager);
+    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
+    const fieldValue = valueObj[fieldName];
+    if (childFieldVar.type === definition.variableType.Object && childFieldVar.fields && isObject(fieldValue)) {
+      expandConcreteValue(
+        childFieldVar,
+        fieldValue,
+        childManager,
+        result
+      );
+      continue;
+    }
+    result[childFieldVar._id] = fieldValue;
+  }
+};
+const expandVariableValue = (childObjectVar, parentObjectVar, childManager, resolveManager, result) => {
+  const childFields = cleanGraph(childObjectVar.fields);
+  const parentFields = cleanGraph(parentObjectVar.fields);
+  for (const [fieldName, childField] of Object.entries(childFields)) {
+    const parentField = parentFields[fieldName];
+    if (!parentField) continue;
+    const childFieldVar = resolveFieldVar(childField, childManager);
+    if (!(childFieldVar == null ? void 0 : childFieldVar._id)) continue;
+    const parentFieldVar = resolveFieldVar(parentField, resolveManager);
+    if (childFieldVar.type === definition.variableType.Object && childFieldVar.fields && (parentFieldVar == null ? void 0 : parentFieldVar.type) === definition.variableType.Object && (parentFieldVar == null ? void 0 : parentFieldVar.fields)) {
+      expandVariableValue(
+        childFieldVar,
+        parentFieldVar,
+        childManager,
+        resolveManager,
+        result
+      );
+      continue;
+    }
+    const parentFieldLink = toVariableLink(parentField);
+    if (parentFieldLink) {
+      result[childFieldVar._id] = parentFieldLink;
+    }
+  }
+};
+const expandObjectProps = (props, childManager, parentManager) => {
+  if (!childManager) return props;
+  const resolveManager = parentManager ?? childManager;
+  const result = {};
+  for (const [propKey, propValue] of Object.entries(props)) {
+    const childVarKey = `Variable:${propKey}`;
+    const childVar = childManager.resolve(childVarKey);
+    if ((childVar == null ? void 0 : childVar.type) === definition.variableType.Object && (childVar == null ? void 0 : childVar.fields)) {
+      if (isVariableLink$1(propValue)) {
+        const parentVar = resolveManager.resolve(propValue);
+        if ((parentVar == null ? void 0 : parentVar.type) === definition.variableType.Object && (parentVar == null ? void 0 : parentVar.fields)) {
+          expandVariableValue(
+            childVar,
+            parentVar,
+            childManager,
+            resolveManager,
+            result
+          );
+          continue;
+        }
+      } else if (isObject(propValue)) {
+        expandConcreteValue(
+          childVar,
+          propValue,
+          childManager,
+          result
+        );
+        continue;
+      }
+    }
+    result[propKey] = propValue;
+  }
+  return result;
 };
 const declareFragmentProperty = (manager, property, fragmentLink = manager.$fragment.root) => {
   const propertyLayer = createLayer(property);
@@ -877,6 +965,49 @@ const loadFragmentManager = async (globalManager, fragmentId) => {
   }
   return null;
 };
+const createSuspenseResource = (key, valueOrPromise, cache) => {
+  if (cache.has(key)) return cache.get(key);
+  if (!(valueOrPromise instanceof Promise)) {
+    const resource2 = {
+      read() {
+        return valueOrPromise;
+      }
+    };
+    cache.set(key, resource2);
+    return resource2;
+  }
+  let status = "pending";
+  let result;
+  let error;
+  const suspender = valueOrPromise.then(
+    (r) => {
+      status = "success";
+      result = r;
+    },
+    (e) => {
+      status = "error";
+      error = e;
+    }
+  );
+  const resource = {
+    read() {
+      if (status === "pending") throw suspender;
+      if (status === "error") throw error;
+      return result;
+    }
+  };
+  cache.set(key, resource);
+  return resource;
+};
+const globalCache = /* @__PURE__ */ new WeakMap();
+const getSuspenseCache = (manager) => {
+  let cache = globalCache.get(manager);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    globalCache.set(manager, cache);
+  }
+  return cache;
+};
 const duplicateLayer = (manager, layer) => {
   var _a;
   const layerGraph = manager.resolve(layer, { deep: true });
@@ -884,6 +1015,9 @@ const duplicateLayer = (manager, layer) => {
     const linkedMap = {};
     const nextLayer = nodeWalker(layerGraph, (key, value, history) => {
       const nextId = generateId();
+      if ((value == null ? void 0 : value._type) === definition.nodes.Instance && key === "props") {
+        return cleanGraph(value);
+      }
       if (!!value && n(value)) {
         linkedMap[keyOfEntity(value)] = keyOfEntity({ ...value, _id: nextId });
         const linkedParent = linkedMap == null ? void 0 : linkedMap[getKey$1(value.parent)];
@@ -950,6 +1084,14 @@ const wrapTextInParagraphWithAttributes = (text, attributes) => {
   ).map(([key, value]) => `${toKebabCase(key)}: ${value}`).join("; ");
   return `<p style="${style}">${text}</p>`;
 };
+const isVariableLink = (value) => {
+  var _a;
+  return isLink(value) && ((_a = value == null ? void 0 : value.split(":")) == null ? void 0 : _a.at(0)) === definition.nodes.Variable;
+};
+const isLink = (value) => {
+  var _a, _b;
+  return value && ((_b = (_a = value == null ? void 0 : value.split) == null ? void 0 : _a.call(value, ":")) == null ? void 0 : _b.length) === 2;
+};
 const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value, options) => {
   var _a;
   const { success, output } = parseLayerField(
@@ -978,26 +1120,8 @@ const layerFieldSetter = (manager, layerKey, fieldKey, currentValue) => (value,
     );
   }
 };
-const getLayerCssVariable = (manager, inputValue) => {
-  var _a;
-  const isVariable = isVariableLink$1(inputValue);
-  const variableValue = manager.resolve(manager, inputValue);
-  const id = (_a = entityOfKey(inputValue)) == null ? void 0 : _a._id;
-  return {
-    value: isVariable ? `var(--${id}, ${variableValue == null ? void 0 : variableValue.defaultValue})` : null
-  };
-};
-const useLayerCssVariable = (inputValue) => {
-  var _a;
-  const { manager } = useContext(FragmentContext);
-  const isVariable = isVariableLink$1(inputValue);
-  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
-  const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = entityOfKey(inputValue)) == null ? void 0 : _a._id);
-  return {
-    value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
-  };
-};
 const useLayerValue = (layerKey, fieldKey, options) => {
+  var _a;
   const { manager: fragmentManager } = useContext(FragmentContext);
   const resultManager = (options == null ? void 0 : options.manager) ?? fragmentManager;
   if (!resultManager) {
@@ -1027,8 +1151,8 @@ const useLayerValue = (layerKey, fieldKey, options) => {
   }, [updateLayerData]);
   const restore = useCallback(
     (fallbackValue) => {
-      var _a, _b, _c;
-      const tempValue = ((_c = (_b = resultManager.resolve((_a = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
+      var _a2, _b, _c;
+      const tempValue = ((_c = (_b = resultManager.resolve((_a2 = resultManager == null ? void 0 : resultManager.$fragment) == null ? void 0 : _a2.temp)) == null ? void 0 : _b[key]) == null ? void 0 : _c[fieldKey]) ?? fallbackValue;
       updateLayerData({ [fieldKey]: tempValue });
       return tempValue;
     },
@@ -1040,15 +1164,16 @@ const useLayerValue = (layerKey, fieldKey, options) => {
     },
     [setter]
   );
-  const { value: cssValue } = useLayerCssVariable(rawValue ?? layerValue);
+  const isVariable = isVariableLink$1(rawValue ?? layerValue);
+  const variableId = isVariable ? (_a = entityOfKey(layerValue)) == null ? void 0 : _a._id : null;
   return [
     currentValue,
     updateValue,
     {
       isOverride,
       resetOverride,
-      isVariable: isVariableLink$1(rawValue ?? layerValue),
-      cssVariableValue: cssValue ?? transformCssValue(currentValue),
+      isVariable,
+      cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
       rawValue,
       restore,
       ...resultManager.entityOfKey(key)
@@ -1279,18 +1404,16 @@ const useLayersValue = (layerKeys, fieldKey, options) => {
     const updateValue = (value, options2) => {
       setter(value, options2);
     };
-    const cssValue = (_b = getLayerCssVariable(
-      resultManager,
-      rawValue ?? layerValue
-    )) == null ? void 0 : _b.value;
+    const isVariable = isVariableLink$1(rawValue ?? layerValue);
+    const variableId = isVariable ? (_b = entityOfKey(layerValue)) == null ? void 0 : _b._id : null;
     return [
       currentValue,
       updateValue,
       {
         isOverride,
         resetOverride,
-        isVariable: isVariableLink$1(rawValue ?? layerValue),
-        cssVariableValue: cssValue ?? currentValue,
+        isVariable,
+        cssVariableValue: isVariable ? `var(--${variableId}, ${transformCssValue(currentValue)})` : transformCssValue(currentValue),
         rawValue,
         restore,
         ...resultManager.entityOfKey(normalizedLayer.layerKey)
@@ -1429,7 +1552,8 @@ const useLayerBackground = (layerKey) => {
     cssImageFillOptions.cssVariableValue,
     cssSolidFill,
     cssImageSize,
-    image
+    image,
+    linearGradient
   ]);
 };
 const useLayerDisplay = (layerKey) => {
@@ -1457,17 +1581,18 @@ const useLayerPaint = (paintLinkKey) => {
   };
 };
 const useLayerBorder = (layerKey) => {
+  var _a, _b;
   const [borderLinkKey] = useLayerValue(layerKey, "border");
   const [type] = useLayerValue(borderLinkKey, "type");
   const [width] = useLayerValue(borderLinkKey, "width");
   const [borderPaintLink] = useLayerValue(borderLinkKey, "paint");
   const borderPaint = useLayerPaint(borderPaintLink);
-  const borderLinearGradient = useLayerLinearGradient(
+  const borderLinearGradient = (_a = useLayerLinearGradient(
     borderPaint.linearGradientLink
-  );
+  )) == null ? void 0 : _a["background-image"];
   const [paintLinkKey] = useLayerValue(layerKey, "paint");
   const paint = useLayerPaint(paintLinkKey);
-  const linearGradient = useLayerLinearGradient(paint.linearGradientLink);
+  const linearGradient = (_b = useLayerLinearGradient(paint.linearGradientLink)) == null ? void 0 : _b["background-image"];
   if (type === definition.borderType.None) {
     return {
       border: null
@@ -1476,7 +1601,7 @@ const useLayerBorder = (layerKey) => {
   if (borderPaint.type === definition.paintMode.LinearGradient) {
     let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
     if (paint.type === definition.paintMode.LinearGradient) {
-      background = `${linearGradient["background-image"]} padding-box, ${borderLinearGradient["background-image"]} border-box`;
+      background = `${linearGradient} padding-box, ${borderLinearGradient} border-box`;
     }
     if (paint.type === definition.paintMode.None) {
       background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1705,7 +1830,7 @@ const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const scopes = useLayerScopes(fragmentManager, layerKey);
+  const scopes = useContext(ScopeContext);
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.AreaScope
   );
@@ -1948,40 +2073,52 @@ const useCollection = (layerKey, options) => {
     ...frame
   };
 };
-const useExtractProps = ({
-  layerKey,
-  definitions,
-  manager,
-  inputProps
-}) => {
-  const flatDefinition = useMemo(() => {
-    const acc = [];
-    const run = (defLink) => {
-      var _a;
-      const resolvedDefinition = (_a = getNormalizeLayer(defLink, manager)) == null ? void 0 : _a.layer;
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Array) return;
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
-        Object.values(cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
-      } else if (isVariableLink$1(defLink)) {
-        acc.push(defLink);
+const collectLeafFieldKeys = (objectVar, manager, keys) => {
+  if (!(objectVar == null ? void 0 : objectVar.fields)) return;
+  const fields = cleanGraph(objectVar.fields);
+  for (const fieldValue of Object.values(fields)) {
+    let fieldVar;
+    let fieldKey;
+    if (isVariableLink$1(fieldValue)) {
+      fieldKey = fieldValue;
+      fieldVar = manager.resolve(fieldKey);
+    } else if (isObject(fieldValue) && (fieldValue == null ? void 0 : fieldValue._type) && (fieldValue == null ? void 0 : fieldValue._id)) {
+      fieldKey = keyOfEntity(fieldValue);
+      fieldVar = fieldValue;
+    }
+    if (!fieldVar || !fieldKey) continue;
+    if (fieldVar.type === definition.variableType.Object && fieldVar.fields) {
+      collectLeafFieldKeys(fieldVar, manager, keys);
+    } else {
+      keys.push(fieldKey);
+    }
+  }
+};
+const useExpandedObjectProps = (props, manager, parentManager, definitions) => {
+  const objectFieldKeys = useMemo(() => {
+    if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
+    const keys = [];
+    for (const defKey of definitions) {
+      const defVar = manager.resolve(defKey);
+      if ((defVar == null ? void 0 : defVar.type) === definition.variableType.Object && (defVar == null ? void 0 : defVar.fields)) {
+        collectLeafFieldKeys(defVar, manager, keys);
       }
-    };
-    definitions.forEach(run);
-    return acc;
-  }, [definitions]);
-  const definitionsData = useGraphStack(manager, flatDefinition);
-  const definitionProps = useMemo(
-    () => definitionsData.reduce((acc, definition2) => {
-      const defId = definition2._id;
-      acc[defId] = (inputProps == null ? void 0 : inputProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
-      return acc;
-    }, {}),
-    [inputProps]
+    }
+    return keys;
+  }, [definitions, manager]);
+  const fieldVarLayers = useGraphStack(
+    objectFieldKeys.length ? manager : null,
+    objectFieldKeys
   );
-  return cleanGraph({
-    ...inputProps,
-    ...definitionProps
-  });
+  return useMemo(() => {
+    const base = {};
+    for (const layer of fieldVarLayers) {
+      if ((layer == null ? void 0 : layer._id) && (layer == null ? void 0 : layer.defaultValue) != null) {
+        base[layer._id] = layer.defaultValue;
+      }
+    }
+    return { ...base, ...expandObjectProps(props, manager, parentManager) };
+  }, [fieldVarLayers, props, manager, parentManager]);
 };
 const CollectionItem = ({
   layer,
@@ -1992,20 +2129,24 @@ const CollectionItem = ({
   ...restProps
 }) => {
   var _a;
-  const layerKey = keyOfEntity(layer);
+  keyOfEntity(layer);
   const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
-  const props = useExtractProps({
-    layerKey,
-    definitions: [sourceDefinition],
-    inputProps: isObject(value) ? {
-      // [definitionId]: layer.value,
-      ...value
-    } : {
-      [definitionId]: value
-    },
-    manager
-  });
+  const inputProps = isObject(value) ? {
+    ...value
+  } : {
+    [definitionId]: value
+  };
+  const props = cleanGraph(inputProps);
+  const definitions = useMemo(
+    () => sourceDefinition ? [sourceDefinition] : [],
+    [sourceDefinition]
+  );
+  const expandedProps = useExpandedObjectProps(props, manager, void 0, definitions);
+  const cssVars = useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
   return /* @__PURE__ */ jsx(
     Scope,
     {
@@ -2015,7 +2156,7 @@ const CollectionItem = ({
         type: definition.scopeTypes.CollectionItemScope,
         ...restProps,
         sourceDefinition,
-        value: props,
+        value: expandedProps,
         manager
       },
       children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
@@ -2023,7 +2164,7 @@ const CollectionItem = ({
         {
           style: {
             display: "contents",
-            ...getCssVariables(props ?? {})
+            ...cssVars
           },
           children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
         },
@@ -2346,8 +2487,6 @@ const useInstanceProps = (instanceProps) => {
     isTopInstance ? instanceProps == null ? void 0 : instanceProps.fragmentId : null
   );
   const { manager: fragmentContextManager } = useContext(FragmentContext);
-  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
@@ -2359,11 +2498,7 @@ const useInstanceProps = (instanceProps) => {
       ...localProps
     };
   }
-  const extractProps = useExtractProps({
-    definitions,
-    manager: fragmentManager,
-    inputProps
-  });
+  const extractProps = cleanGraph(inputProps);
   useEffect(() => {
     if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
@@ -2371,7 +2506,6 @@ const useInstanceProps = (instanceProps) => {
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
     props: extractProps,
-    cssProps: getCssVariables(extractProps),
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -2389,7 +2523,7 @@ const useInstance = (instanceProps) => {
   );
   const resultFragmentId = (instanceProps == null ? void 0 : instanceProps.fragmentId) ?? (instanceLayer == null ? void 0 : instanceLayer.fragment);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(resultFragmentId);
-  const { props, cssProps, onChangeProps } = useInstanceProps(instanceProps);
+  const { props, onChangeProps } = useInstanceProps(instanceProps);
   const classnames = useClassnames(
     instanceProps.layerKey,
     innerFragmentManager
@@ -2400,7 +2534,6 @@ const useInstance = (instanceProps) => {
     events,
     definitions,
     props,
-    cssProps,
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
@@ -2408,6 +2541,22 @@ const useInstance = (instanceProps) => {
     onChangeProps
   };
 };
+const useSuspenseLoadFragment = (globalManager, fragmentId, skip) => {
+  var _a, _b;
+  if (skip || !globalManager || !fragmentId) return;
+  const cache = getSuspenseCache(globalManager);
+  const valueOrPromise = (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadFragment) == null ? void 0 : _b.call(_a, fragmentId);
+  if (valueOrPromise == null) return;
+  createSuspenseResource(`fragment:${fragmentId}`, valueOrPromise, cache).read();
+};
+const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
+  var _a, _b;
+  if (skip || !globalManager || !areaCode) return null;
+  const cache = getSuspenseCache(globalManager);
+  const valueOrPromise = (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadArea) == null ? void 0 : _b.call(_a, areaCode);
+  if (valueOrPromise == null) return null;
+  return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
+};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -2415,13 +2564,12 @@ const InstanceInitial = ({
   FrameElement,
   ...instanceProps
 }) => {
-  var _a, _b, _c;
+  var _a;
   const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
   const link = useLayerLink(instanceProps.layerKey);
   const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
   const {
     fragmentId,
-    cssProps,
     parentManager,
     events,
     props,
@@ -2434,9 +2582,17 @@ const InstanceInitial = ({
     ...instanceProps,
     pauseInteractions
   });
-  if (ssr) {
-    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadFragment) == null ? void 0 : _c.call(_b, fragmentId, { suspense: true });
-  }
+  const expandedProps = useExpandedObjectProps(
+    props,
+    innerManager,
+    parentManager,
+    definitions
+  );
+  const cssVars = useMemo(
+    () => toCssCustomProperties(expandedProps),
+    [expandedProps]
+  );
+  useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
   return /* @__PURE__ */ jsx(
     Scope,
     {
@@ -2444,7 +2600,7 @@ const InstanceInitial = ({
       layerKey: instanceProps.layerKey,
       value: {
         type: definition.scopeTypes.InstanceScope,
-        props,
+        props: expandedProps,
         definitions,
         fragmentId,
         documentManager: innerManager,
@@ -2459,14 +2615,14 @@ const InstanceInitial = ({
             definitions,
             innerManager,
             parentManager,
-            props
+            props: expandedProps
           },
           children: parentManager ? /* @__PURE__ */ jsx(
             Tag,
             {
               className: classnames,
               "data-key": instanceProps.layerKey,
-              style: { ...style, ...cssProps },
+              style: { ...style, ...cssVars },
               ...link.linkProps,
               ...events,
               children: /* @__PURE__ */ jsx(
@@ -2479,7 +2635,7 @@ const InstanceInitial = ({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssProps }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsx(
             Fragment,
             {
               fragmentId,
@@ -2509,26 +2665,24 @@ const Instance = (props) => {
   ) });
 };
 const useArea = (options) => {
-  const { manager: resultGlobalManager, queryArea } = useGlobalManager(
+  var _a;
+  const { manager: resultGlobalManager } = useGlobalManager(
     options == null ? void 0 : options.globalManager
   );
-  const [areaData, setAreaData] = useState(queryArea(options.areaCode));
+  const ssr = ((_a = options == null ? void 0 : options.options) == null ? void 0 : _a.ssr) ?? true;
+  const areaData = useSuspenseLoadArea(
+    resultGlobalManager,
+    options.areaCode,
+    !(isBrowser || ssr)
+  );
   const { manager: fragmentManager } = useFragmentManager(
-    areaData.fragmentId,
+    areaData == null ? void 0 : areaData.fragmentId,
     resultGlobalManager
   );
   const resultProps = useMemo(
-    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options == null ? void 0 : options.props) ?? [] }),
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options == null ? void 0 : options.props) ?? {} }),
     [areaData, options]
   );
-  useEffect(() => {
-    (async () => {
-      const response = await queryArea(options.areaCode);
-      if (response) {
-        setAreaData(response);
-      }
-    })();
-  }, []);
   return {
     ...areaData,
     fragmentManager,
@@ -2537,14 +2691,6 @@ const useArea = (options) => {
   };
 };
 const AreaInitial = (areaProps) => {
-  var _a, _b, _c;
-  const { manager: globalManager } = useGlobalManager(areaProps == null ? void 0 : areaProps.globalManager);
-  const ssr = ((_a = areaProps == null ? void 0 : areaProps.options) == null ? void 0 : _a.ssr) ?? true;
-  if (isBrowser || ssr) {
-    (_c = (_b = globalManager == null ? void 0 : globalManager.$load) == null ? void 0 : _b.loadArea) == null ? void 0 : _c.call(_b, areaProps.areaCode, {
-      suspense: true
-    });
-  }
   const areaData = useArea(areaProps);
   if (!areaData) return null;
   return /* @__PURE__ */ jsx(
@@ -2611,12 +2757,13 @@ export {
   cloneLayer,
   copyLayer,
   createLayer,
+  createSuspenseResource,
   declareFragmentProperty,
   defaultCustomRender,
   duplicateLayer,
+  expandObjectProps,
   findBreakpoint,
   getAllParents,
-  getCssVariables,
   getHydratedData,
   getKey,
   getNormalizeLayer,
@@ -2624,6 +2771,7 @@ export {
   getOverriderByLayers,
   getParent,
   getStylesheetKey,
+  getSuspenseCache,
   hashGenerator,
   insertChildren,
   isBrowser,
@@ -2644,6 +2792,7 @@ export {
   serializeData,
   setKey,
   spliceChildren,
+  toCssCustomProperties,
   transformCssValue,
   useArea,
   useCollection,
@@ -2661,7 +2810,6 @@ export {
   useLayerBorder,
   useLayerChildren,
   useLayerCssOverride,
-  useLayerCssVariable,
   useLayerDisplay,
   useLayerFlex,
   useLayerLayout,