@fragmentsx/render-react 1.2.3 → 1.2.5

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/useLayerValue.d.ts

@@ -1,9 +1,8 @@
 import { GraphState, LinkKey } from '@graph-state/core';
 import { GetLayerOptions } from './useNormalizeLayer/getLayer';
-interface Options extends GetLayerOptions {
+export interface UseLayerValueOptions extends GetLayerOptions {
     manager?: GraphState;
     scopes?: unknown[];
 }
-export declare const useLayerValue: (layerKey: LinkKey, fieldKey: string, options?: Options) => any[];
-export {};
+export declare const useLayerValue: (layerKey: LinkKey, fieldKey: string, options?: UseLayerValueOptions) => any[];
 //# sourceMappingURL=useLayerValue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useLayerValue.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAEV,OAAO,EAER,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI/D,UAAU,OAAQ,SAAQ,eAAe;IACvC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,aACd,OAAO,YACP,MAAM,YACN,OAAO,UA4ElB,CAAC"}
+{"version":3,"file":"useLayerValue.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useLayerValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAEV,OAAO,EAER,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI/D,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,aACd,OAAO,YACP,MAAM,YACN,oBAAoB,UA4E/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/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;
@@ -504,7 +519,8 @@ function makeSnapshot(globalManager, targetFragmentId) {
   };
 }
 const isInheritField = (manager, layerEntity, field) => {
-  const layer = manager.resolve(layerEntity);
+  var _a;
+  const layer = (_a = manager == null ? void 0 : manager.resolve) == null ? void 0 : _a.call(manager, layerEntity);
   if (layer) {
     const overrider = getOverrider(manager, layer);
     if ((overrider == null ? void 0 : overrider._id) === (layer == null ? void 0 : layer._id)) return false;
@@ -974,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) => {
@@ -1357,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]
@@ -1460,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`;
@@ -1501,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);
@@ -1562,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
@@ -1572,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,
@@ -1631,6 +1642,12 @@ const useTextContent = (layerKey, manager) => {
       readVariable(variable.variableKey).value ?? ""
     );
   });
+  if (typeof nextContent === "string") {
+    nextContent = nextContent.replace(
+      /\{\{(.*?)}}/,
+      `<mark class="highlight">$1</mark>`
+    );
+  }
   return nextContent;
 };
 const useHash = (layerKey, manager) => {
@@ -1748,22 +1765,111 @@ const useLayerInteractions = (layerKey, options) => {
     };
   }, [interactions, fireEvent, pause]);
 };
+const useTextHighlight = (layerKey, options) => {
+  const [highlightLayerKey] = useLayerValue(layerKey, "highlight", options);
+  const [, , { cssVariableValue: fontSize }] = useLayerValue(
+    highlightLayerKey,
+    "fontSize",
+    options
+  );
+  const [, , { cssVariableValue: color }] = useLayerValue(
+    highlightLayerKey,
+    "color",
+    options
+  );
+  const [, , { cssVariableValue: fontWeight }] = useLayerValue(
+    highlightLayerKey,
+    "fontWeight",
+    options
+  );
+  const [, , { cssVariableValue: textAlign }] = useLayerValue(
+    highlightLayerKey,
+    "textAlign",
+    options
+  );
+  const [, , { cssVariableValue: textDecoration }] = useLayerValue(
+    highlightLayerKey,
+    "textDecoration",
+    options
+  );
+  const [, , { cssVariableValue: textTransform }] = useLayerValue(
+    highlightLayerKey,
+    "textTransform",
+    options
+  );
+  const [, , { cssVariableValue: lineHeight }] = useLayerValue(
+    highlightLayerKey,
+    "lineHeight",
+    options
+  );
+  const [, , { cssVariableValue: letterSpacing }] = useLayerValue(
+    highlightLayerKey,
+    "letterSpacing",
+    options
+  );
+  const [, , { cssVariableValue: fontFamily }] = useLayerValue(
+    highlightLayerKey,
+    "fontFamily",
+    options
+  );
+  const styles = {
+    background: "inherit",
+    color: "inherit"
+  };
+  if (!!fontSize) {
+    styles["font-size"] = utils.toPx(fontSize);
+  }
+  if (!!color) {
+    styles["color"] = color;
+  }
+  if (!!fontWeight) {
+    styles["font-weight"] = fontWeight;
+  }
+  if (!!textAlign) {
+    styles["text-align"] = textAlign;
+  }
+  if (!!textDecoration) {
+    styles["text-decoration"] = textDecoration;
+  }
+  if (!!textTransform) {
+    styles["text-transform"] = textTransform;
+  }
+  if (!!lineHeight) {
+    styles["line-height"] = lineHeight;
+  }
+  if (!!letterSpacing) {
+    styles["letter-spacing"] = utils.toPx(letterSpacing);
+  }
+  if (!!fontFamily) {
+    styles["font-family"] = `${fontFamily} !important`;
+  }
+  return {
+    stylesString: Object.entries(styles).reduce(
+      (acc, [key, value]) => acc += `${key}: ${value};`,
+      ""
+    )
+  };
+};
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const styles = useLayerStyles(layerKey);
+  const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
+  const hash = useHash(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
   if (collectStyle) {
     addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
   }
   return {
+    hash,
     events,
     styles,
     classnames,
-    content
+    content,
+    highlight
   };
 };
 const Text = ({
@@ -1772,15 +1878,28 @@ const Text = ({
   collectStyle,
   ...restProps
 }) => {
-  const { classnames, content, events } = useTextAttributes(layerKey, {
-    collectStyle
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  const { classnames, content, events, hash, highlight } = useTextAttributes(
+    layerKey,
     {
-      dangerouslySetInnerHTML: { __html: content }
+      collectStyle
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `.${hash} .highlight {${highlight.stylesString}}`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: content }
+      }
+    )
+  ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
@@ -1799,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
@@ -1816,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,
@@ -1861,30 +2069,17 @@ const Collection = ({
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
-          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            Scope,
+          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            CollectionItem,
             {
-              fragmentManager,
-              layerKey: `${layerKey}.${index}`,
-              value: {
-                type: definition.definition.scopeTypes.CollectionItemScope,
-                source,
-                sourceDefinition,
-                value: collectionItem,
-                manager: fragmentManager
-              },
-              children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    display: "contents",
-                    ...getCssVariables(collectionItem ?? {})
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-                },
-                child
-              ))
-            }
+              layer: itemValue,
+              manager: fragmentManager,
+              source,
+              children,
+              sourceDefinition,
+              FrameElement
+            },
+            index
           ))
         }
       )
@@ -2154,41 +2349,31 @@ const useInstanceProps = (instanceProps) => {
   );
   const { manager: fragmentContextManager } = react.useContext(FragmentContext);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const definitionsData = react$1.useGraphStack(innerFragmentManager, definitions);
+  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   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
-  ]);
+  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 }));
@@ -2497,4 +2682,5 @@ exports.useReadVariables = useReadVariables;
 exports.useRenderTarget = useRenderTarget;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
+exports.useTextHighlight = useTextHighlight;
 exports.wrapTextInParagraphWithAttributes = wrapTextInParagraphWithAttributes;