@fragmentsx/render-react 1.2.4 → 1.2.6

package/dist/hooks/layer/useExtractProps.d.ts

@@ -0,0 +1,9 @@
+import { GraphState, LinkKey } from '@graph-state/core';
+interface Options {
+    inputProps: Record<string, unknown>;
+    definitions: LinkKey[];
+    manager?: GraphState;
+}
+export declare const useExtractProps: ({ layerKey, definitions, manager, inputProps, }: Options) => unknown;
+export {};
+//# sourceMappingURL=useExtractProps.d.ts.map

package/dist/hooks/layer/useExtractProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExtractProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useExtractProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAaxD,UAAU,OAAO;IACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,WAAW,EAAE,OAAO,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,oDAKzB,OAAO,YAsCT,CAAC"}

package/dist/hooks/layer/useLayerCssVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerCssVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerCssVariable.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI5D,eAAO,MAAM,mBAAmB,YAAa,UAAU;;CAQtD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAU/B,CAAC"}
+{"version":3,"file":"useLayerCssVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerCssVariable.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI5D,eAAO,MAAM,mBAAmB,YAAa,UAAU;;CAQtD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAiB/B,CAAC"}

package/dist/hooks/layer/useReadVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReadVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariable.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAiDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCAgFY,OAAO;;;;;;;;;;CAgI5C,CAAC"}
+{"version":3,"file":"useReadVariable.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariable.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAkDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCAyFY,OAAO;;;;;;;;;;CAkJ5C,CAAC"}

package/dist/hooks/layer-styles/useLayerStyles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAa5C,eAAO,MAAM,cAAc,aAAc,OAAO,OAsF/C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAa5C,eAAO,MAAM,cAAc,aAAc,OAAO,OAoF/C,CAAC"}

package/dist/hooks/layer-styles/useLayerStyles/useLayerLayout.d.ts

@@ -4,7 +4,7 @@ export declare const useLayerLayout: (layerKey: LinkKey) => {
     gap: string;
     flexWrap: string | null;
     justifyContent: any;
-    flexFlow: string | null;
+    flexFlow: string;
     alignItems: any;
     padding: any;
 };

package/dist/hooks/layer-styles/useLayerStyles/useLayerLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerLayout.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/useLayerLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,eAAO,MAAM,cAAc,aAAc,OAAO;;;;;;;;CA+C/C,CAAC"}
+{"version":3,"file":"useLayerLayout.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/useLayerLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,eAAO,MAAM,cAAc,aAAc,OAAO;;;;;;;;CAwC/C,CAAC"}

package/dist/hooks/utils/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+export declare function useForceUpdate(): [unknown, () => void];
+//# sourceMappingURL=useForceUpdate.d.ts.map

package/dist/hooks/utils/useForceUpdate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForceUpdate.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useForceUpdate.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,IAEgC,CAC1D,OAAO,EACP,MAAM,IAAI,CACX,CACF"}

package/dist/hooks/utils/useLayerInteractions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQzD,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAuFtC,CAAC"}
+{"version":3,"file":"useLayerInteractions.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useLayerInteractions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AASzD,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAuFtC,CAAC"}

package/dist/index.cjs.js

@@ -108,6 +108,9 @@ const useNormalizeLayers = (layerKeys, manager, options) => {
     (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
   );
 };
+function useForceUpdate() {
+  return react.useReducer(() => ({}), {});
+}
 const extractVariableValue = (input, variableId) => {
   if (utils.isObject(input)) {
     if (variableId in input) {
@@ -139,6 +142,15 @@ function deepMerge(a, b) {
 const useReadVariable = (variableKey, customScopes) => {
   const contextScopes = react.useContext(ScopeContext);
   const scopes = customScopes ?? contextScopes;
+  const unmountAbortController = react.useRef(new AbortController());
+  const [dep, forceUpdate] = useForceUpdate();
+  react.useEffect(
+    () => () => {
+      var _a;
+      (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
+    },
+    []
+  );
   const extractVariableDefaultValue = (manager, variableEntity) => {
     const variableLayer = manager.resolve(variableEntity);
     if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.definition.variableType.Object)
@@ -184,7 +196,7 @@ const useReadVariable = (variableKey, customScopes) => {
     return variableLayer;
   };
   const readVariable = (variableKey2) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const variableId = (_a = core.entityOfKey(variableKey2)) == null ? void 0 : _a._id;
     if (!definition.isVariableLink(variableKey2)) {
       return {
@@ -207,7 +219,10 @@ const useReadVariable = (variableKey, customScopes) => {
       instanceScope == null ? void 0 : instanceScope.documentManager,
       variableKey2
     );
-    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
+      signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
+    });
+    let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
     if (Array.isArray(instanceProp)) {
       instanceProp = instanceProp.map(
         (rawProp, index) => {
@@ -224,7 +239,7 @@ const useReadVariable = (variableKey, customScopes) => {
       lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
       lastCollectionItem == null ? void 0 : lastCollectionItem.value
     );
-    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _e._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
     const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
     const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
     const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
@@ -975,11 +990,13 @@ const getLayerCssVariable = (manager, inputValue) => {
   };
 };
 const useLayerCssVariable = (inputValue) => {
+  var _a;
   const { manager } = react.useContext(FragmentContext);
   const isVariable = definition.isVariableLink(inputValue);
   const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
+  const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = core.entityOfKey(inputValue)) == null ? void 0 : _a._id);
   return {
-    value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
+    value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
   };
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1358,10 +1375,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = react.useMemo(
     () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b;
+      var _a, _b, _c;
       return [
-        (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(0),
-        (_b = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _b.at(0)
+        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
+        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
       ];
     })) ?? [],
     [stops, stopsValue, stopsPosition]
@@ -1461,7 +1478,7 @@ const useLayerBorder = (layerKey) => {
   if (borderPaint.type === definition.definition.paintMode.LinearGradient) {
     let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
     if (paint.type === definition.definition.paintMode.LinearGradient) {
-      background = `${linearGradient} padding-box, ${borderLinearGradient} border-box`;
+      background = `${linearGradient["background-image"]} padding-box, ${borderLinearGradient["background-image"]} border-box`;
     }
     if (paint.type === definition.definition.paintMode.None) {
       background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1502,25 +1519,18 @@ const useLayerLayout = (layerKey) => {
   const [padding] = useLayerValue(layerKey, "padding", fragmentManager);
   const [gap] = useLayerValue(layerKey, "layerGap", fragmentManager);
   const isFlex = layerModeValue === definition.definition.layerMode.flex;
-  return react.useMemo(
-    () => ({
-      display: isFlex ? "flex" : null,
-      gap: utils.toPx(gap),
-      flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
-      justifyContent: isFlex ? layerDistribute : null,
-      flexFlow: isFlex ? layerDirectionValue === definition.definition.layerDirection.vertical ? "column" : "row" : null,
-      alignItems: isFlex ? layerAlign : null,
-      padding: isFlex ? padding : null
-    }),
-    [
-      isFlex,
-      layerWrap,
-      layerDistribute,
-      layerDirectionValue,
-      layerAlign,
-      padding
-    ]
-  );
+  const baseFlow = layerDirectionValue === definition.definition.layerDirection.vertical ? "column" : "row";
+  const wrap = isFlex ? layerWrap ? "wrap" : null : null;
+  const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
+  return {
+    display: isFlex ? "flex" : null,
+    gap: utils.toPx(gap),
+    flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+    justifyContent: isFlex ? layerDistribute : null,
+    flexFlow,
+    alignItems: isFlex ? layerAlign : null,
+    padding: isFlex ? padding : null
+  };
 };
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1563,7 +1573,7 @@ const useLayerStyles = (layerKey) => {
     const layout = useLayerLayout(layerKey);
     const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
     const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
-    const [borderRadius] = useLayerValue(
+    const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
       layerKey,
       "borderRadius",
       fragmentManager
@@ -1573,13 +1583,13 @@ const useLayerStyles = (layerKey) => {
     const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
     return {
       // ...(props ?? {}),
-      ...border,
       ...background,
+      ...border,
       ...position,
       opacity,
       overflow,
       rotate: utils.isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": borderRadius,
+      "border-radius": utils.isValue(rawBorderRadius) ? borderRadius : null,
       "white-space": whiteSpace,
       "z-index": zIndex !== -1 ? zIndex : null,
       ...layout,
@@ -1632,10 +1642,12 @@ const useTextContent = (layerKey, manager) => {
       readVariable(variable.variableKey).value ?? ""
     );
   });
-  nextContent = nextContent.replace(
-    /\{\{(.*?)}}/,
-    `<mark class="highlight">$1</mark>`
-  );
+  if (typeof nextContent === "string") {
+    nextContent = nextContent.replace(
+      /\{\{(.*?)}}/,
+      `<mark class="highlight">$1</mark>`
+    );
+  }
   return nextContent;
 };
 const useHash = (layerKey, manager) => {
@@ -1695,7 +1707,7 @@ const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
   const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const scopes = useLayerScopes(fragmentManager, layerKey);
+  const scopes = react.useContext(ScopeContext);
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.AreaScope
   );
@@ -1829,7 +1841,7 @@ const useTextHighlight = (layerKey, options) => {
     styles["letter-spacing"] = utils.toPx(letterSpacing);
   }
   if (!!fontFamily) {
-    styles["font-family"] = fontFamily;
+    styles["font-family"] = `${fontFamily} !important`;
   }
   return {
     stylesString: Object.entries(styles).reduce(
@@ -1906,8 +1918,7 @@ const useFrame = (layerKey, options) => {
     Tag: (link == null ? void 0 : link.isLink) ? (options == null ? void 0 : options.FrameTag) ?? "a" : (options == null ? void 0 : options.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
     classnames,
-    styles: {},
-    //isBrowser ? pick(styles, "background") : {},
+    styles,
     children,
     events,
     linkProps: link.linkProps
@@ -1923,16 +1934,106 @@ const useCollection = (layerKey, options) => {
   });
   const source = collectionLayer == null ? void 0 : collectionLayer.source;
   const sourceDefinition = (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(source)) == null ? void 0 : _a.definition;
-  const [sourceValue] = useLayerValue(layerKey, "source", fragmentManager);
+  const [sourceValue] = useLayerValue(layerKey, "source", {
+    manager: fragmentManager
+  });
+  const sourceValues = react$1.useGraphStack(fragmentManager, sourceValue ?? []);
+  const resultValues = (sourceValue ?? []).map(
+    (initValue, index) => (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+  );
   return {
     source,
     sourceDefinition,
-    sourceValue: sourceValue ?? [],
+    sourceValue: resultValues ?? [],
     fragmentManager,
     children,
     ...frame
   };
 };
+const useExtractProps = ({
+  layerKey,
+  definitions,
+  manager,
+  inputProps
+}) => {
+  const flatDefinition = react.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.definition.variableType.Array) return;
+      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.definition.variableType.Object) {
+        Object.values(utils.cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
+      } else if (definition.isVariableLink(defLink)) {
+        acc.push(defLink);
+      }
+    };
+    definitions.forEach(run);
+    return acc;
+  }, [definitions]);
+  const definitionsData = react$1.useGraphStack(manager, flatDefinition);
+  const definitionProps = react.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 utils.cleanGraph({
+    ...inputProps,
+    ...definitionProps
+  });
+};
+const CollectionItem = ({
+  layer,
+  manager,
+  FrameElement,
+  children,
+  sourceDefinition,
+  ...restProps
+}) => {
+  var _a;
+  const layerKey = core.keyOfEntity(layer);
+  const definitionId = ((_a = core.entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
+  const value = layer.value ?? layer;
+  const props = useExtractProps({
+    layerKey,
+    definitions: [sourceDefinition],
+    inputProps: utils.isObject(value) ? {
+      // [definitionId]: layer.value,
+      ...value
+    } : {
+      [definitionId]: value
+    },
+    manager
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Scope,
+    {
+      fragmentManager: manager,
+      layerKey: core.keyOfEntity(layer),
+      value: {
+        type: definition.definition.scopeTypes.CollectionItemScope,
+        ...restProps,
+        sourceDefinition,
+        value: props,
+        manager
+      },
+      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            display: "contents",
+            ...getCssVariables(props ?? {})
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
+        },
+        child
+      ))
+    }
+  );
+};
 const Collection = ({
   layerKey,
   styles: inputStyles,
@@ -1968,37 +2069,17 @@ const Collection = ({
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
-          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItemLinkKey) => /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.GraphValue,
+          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            CollectionItem,
             {
-              graphState: fragmentManager,
-              field: collectionItemLinkKey,
-              children: (value) => /* @__PURE__ */ jsxRuntime.jsx(
-                Scope,
-                {
-                  fragmentManager,
-                  layerKey: collectionItemLinkKey,
-                  value: {
-                    type: definition.definition.scopeTypes.CollectionItemScope,
-                    source,
-                    sourceDefinition,
-                    value,
-                    manager: fragmentManager
-                  },
-                  children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        display: "contents",
-                        ...getCssVariables(value ?? {})
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-                    },
-                    child
-                  ))
-                }
-              )
-            }
+              layer: itemValue,
+              manager: fragmentManager,
+              source,
+              children,
+              sourceDefinition,
+              FrameElement
+            },
+            index
           ))
         }
       )
@@ -2270,54 +2351,29 @@ const useInstanceProps = (instanceProps) => {
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
   const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
-  const flatDefinition = react.useMemo(() => {
-    const acc = [];
-    const run = (defLink) => {
-      const resolvedDefinition = fragmentManager.resolve(defLink);
-      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.definition.variableType.Object) {
-        Object.values(resolvedDefinition.fields).forEach(run);
-      } else if (definition.isVariableLink(defLink)) {
-        acc.push(defLink);
-      }
-    };
-    definitions.forEach(run);
-    return acc;
-  }, [definitions]);
-  const definitionsData = react$1.useGraphStack(innerFragmentManager, flatDefinition);
   const [instanceLayer] = react$1.useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
   const [localProps, setLocalProps] = react.useState(instanceProps.props ?? {});
-  const mergedProps = react.useMemo(() => {
-    let base = instanceLayerProps;
-    if (isTopInstance && utils.isObject(base) && utils.isObject(localProps)) {
-      base = {
-        ...base,
-        ...localProps
-      };
-    }
-    if (isTopInstance && fragmentManager) {
-      definitionsData.forEach((definition2) => {
-        const defId = definition2._id;
-        base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
-      });
-    }
-    return utils.omit(base, "_type", "_id");
-  }, [
-    isTopInstance,
-    fragmentManager,
-    instanceLayerProps,
-    definitionsData,
-    localProps,
-    readVariable
-  ]);
+  let inputProps = instanceLayerProps;
+  if (isTopInstance && utils.isObject(inputProps) && utils.isObject(localProps)) {
+    inputProps = {
+      ...inputProps,
+      ...localProps
+    };
+  }
+  const extractProps = useExtractProps({
+    definitions,
+    manager: fragmentManager,
+    inputProps
+  });
   react.useEffect(() => {
     if (utils.isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
     }
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
-    props: mergedProps,
-    cssProps: getCssVariables(mergedProps),
+    props: extractProps,
+    cssProps: getCssVariables(extractProps),
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));