@fragmentsx/render-react 1.2.2 → 1.2.4

package/dist/hooks/fragment/useFragmentCssChunks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFragmentCssChunks.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentCssChunks.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,eAAgB,MAAM,QAQtD,CAAC"}
+{"version":3,"file":"useFragmentCssChunks.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentCssChunks.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,eAAgB,MAAM,QAStD,CAAC"}

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

@@ -7,5 +7,5 @@ export { useLayerScopes } from './useLayerScopes';
 export { useLayerLink } from './useLayerLink';
 export { useLayerCssVariable } from './useLayerCssVariable';
 export { useLayerVariableValue } from './useLayerVariableValue';
-export { useNormalizeLayer } from './useNormalizeLayer';
+export { useNormalizeLayer, getNormalizeLayer } from './useNormalizeLayer';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,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;AAG5D,eAAO,MAAM,mBAAmB,YAAa,UAAU;;CAQtD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAc/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;;CAU/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/useNormalizeLayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer/useNormalizeLayer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAY,eAAe,EAAE,MAAM,YAAY,CAAC;AAGvD,eAAO,MAAM,iBAAiB,aAClB,OAAO,WACR,OAAO,YACN,eAAe;;;;;;CAU1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,OAAO,YACP,eAAe;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAClB,OAAO,EAAE,YACV,OAAO,YACP,eAAe;;;;;;GAQ1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer/useNormalizeLayer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAY,eAAe,EAAE,MAAM,YAAY,CAAC;AAGvD,eAAO,MAAM,iBAAiB,aAClB,OAAO,WACR,OAAO,YACN,eAAe;;;;;;CAU1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,OAAO,YACP,eAAe;;;;;;CAc1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAClB,OAAO,EAAE,YACV,OAAO,YACP,eAAe;;;;;;GAQ1B,CAAC"}

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

@@ -2,9 +2,13 @@ import { LinkKey } from '@graph-state/core';
 export declare const useReadVariable: (variableKey?: LinkKey | null, customScopes?: unknown[]) => {
     readVariable: (variableKey?: LinkKey) => {
         value: any;
-        layer: any;
+        layer: {
+            [k: string]: any;
+        } | null;
     };
     value: any;
-    layer: any;
+    layer: {
+        [k: string]: any;
+    } | null;
 };
 //# sourceMappingURL=useReadVariable.d.ts.map

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;AAgDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCA+EY,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;AAiDrE,eAAO,MAAM,eAAe,iBACZ,OAAO,GAAG,IAAI,iBACb,OAAO,EAAE;iCAgFY,OAAO;;;;;;;;;;CAgI5C,CAAC"}

package/dist/hooks/layer-styles/useLayerPaint.d.ts

@@ -2,6 +2,7 @@ import { LinkKey } from '@graph-state/core';
 export declare const useLayerPaint: (paintLinkKey: LinkKey) => {
     type: any;
     solid: any;
+    solidCssValue: any;
     image: any;
     linearGradientLink: any;
 };

package/dist/hooks/layer-styles/useLayerPaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayerPaint.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useLayerPaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;;CAYlD,CAAC"}
+{"version":3,"file":"useLayerPaint.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useLayerPaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;;;CAalD,CAAC"}

package/dist/hooks/render/index.d.ts

@@ -0,0 +1,2 @@
+export { useRenderTarget } from './useRenderTarget';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/render/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/render/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

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;AAM5C,MAAM,WAAW,2BAA2B;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,aACrB,OAAO,YACP,2BAA2B;;;;CAsEtC,CAAC"}
+{"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"}

package/dist/index.cjs.js

@@ -92,6 +92,13 @@ const getNormalizeLayer = (layerKey, manager, options) => {
 const useNormalizeLayer = (layerKey, manager, options) => {
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
   return getNormalizeLayer(layerKey, resultManager, options);
 };
 const useNormalizeLayers = (layerKeys, manager, options) => {
@@ -151,12 +158,12 @@ const useReadVariable = (variableKey, customScopes) => {
     );
   };
   const resolveVariableLayer = (manager, variableLink, customProps) => {
-    var _a;
-    const variableLayer = manager == null ? void 0 : manager.resolve(variableLink);
+    var _a, _b;
+    const variableLayer = (_a = getNormalizeLayer(variableLink, manager)) == null ? void 0 : _a.layer;
     if (!variableLayer) return null;
     if ((variableLayer == null ? void 0 : variableLayer.type) === definition.definition.variableType.Array) {
       const definitionLayer = manager.resolve(variableLayer == null ? void 0 : variableLayer.definition);
-      if (!((_a = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _a.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.definition.variableType.Object)
         return variableLayer;
       const definitionDefaultValue = extractVariableDefaultValue(
         manager,
@@ -464,14 +471,12 @@ function makeSnapshot(globalManager, targetFragmentId) {
   ).filter(Boolean);
   const linkedGoals = Array.from(
     new Set(
-      targetFragment.inspectFields(definition.definition.nodes.Variable).map(targetFragment == null ? void 0 : targetFragment.resolve).filter((graph) => {
-        return (graph == null ? void 0 : graph.type) === definition.definition.variableType.Event && (graph == null ? void 0 : graph.mode) === definition.definition.eventMode.goal;
-      }).map((graph) => {
+      targetFragment.inspectFields(definition.definition.nodes.GoalEvent).map((link) => {
         var _a2;
-        return (_a2 = graph == null ? void 0 : graph.defaultValue) == null ? void 0 : _a2.goalId;
-      }).filter(Boolean).values()
+        return (_a2 = targetFragment == null ? void 0 : targetFragment.resolve(link)) == null ? void 0 : _a2.goalId;
+      }).values()
     )
-  );
+  ).filter(Boolean);
   const fonts = Array.from(
     new Set(
       targetFragment.inspectFields(definition.definition.nodes.Text).map((linkKey) => {
@@ -499,7 +504,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;
@@ -971,13 +977,9 @@ const getLayerCssVariable = (manager, inputValue) => {
 const useLayerCssVariable = (inputValue) => {
   const { manager } = react.useContext(FragmentContext);
   const isVariable = definition.isVariableLink(inputValue);
-  const [variableValue] = react$1.useGraph(isVariable ? manager : null, inputValue, {
-    selector: (graph) => utils.pick(graph, "defaultValue", "_id")
-  });
+  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
   return {
-    value: isVariable ? `var(--${variableValue == null ? void 0 : variableValue._id}, ${transformCssValue(
-      variableValue == null ? void 0 : variableValue.defaultValue
-    )})` : null
+    value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
   };
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1428,12 +1430,13 @@ const useLayerDisplay = (layerKey) => {
 };
 const useLayerPaint = (paintLinkKey) => {
   const [type] = useLayerValue(paintLinkKey, "type");
-  const [solid] = useLayerValue(paintLinkKey, "solid");
+  const [solid, , solidInfo] = useLayerValue(paintLinkKey, "solid");
   const [image] = useLayerValue(paintLinkKey, "image");
   const [linearGradientLink] = useLayerValue(paintLinkKey, "linearGradient");
   return {
     type,
     solid,
+    solidCssValue: solidInfo.cssVariableValue,
     image,
     linearGradientLink
   };
@@ -1473,7 +1476,7 @@ const useLayerBorder = (layerKey) => {
     };
   }
   if (borderPaint.type === definition.definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solid);
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
   }
   return { border: null };
 };
@@ -1629,6 +1632,10 @@ const useTextContent = (layerKey, manager) => {
       readVariable(variable.variableKey).value ?? ""
     );
   });
+  nextContent = nextContent.replace(
+    /\{\{(.*?)}}/,
+    `<mark class="highlight">$1</mark>`
+  );
   return nextContent;
 };
 const useHash = (layerKey, manager) => {
@@ -1684,36 +1691,6 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
   };
 };
-const useTextAttributes = (layerKey, options) => {
-  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
-  const content = useTextContent(layerKey);
-  const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
-  return {
-    styles,
-    classnames,
-    content
-  };
-};
-const Text = ({
-  layerKey,
-  Tag = "div",
-  collectStyle,
-  ...restProps
-}) => {
-  const { classnames, content } = useTextAttributes(layerKey, { collectStyle });
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      dangerouslySetInnerHTML: { __html: content }
-    }
-  ) });
-};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1722,29 +1699,40 @@ const useLayerInteractions = (layerKey, options) => {
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.AreaScope
   );
-  const [interactions] = useLayerValue(
-    layerKey,
-    "interactions",
-    fragmentManager
+  const instanceScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === definition.definition.scopeTypes.InstanceScope
   );
-  const { readVariable } = useReadVariable();
+  const [interactionLinks] = useLayerValue(layerKey, "interactions");
+  const interactionOns = useLayersValue(interactionLinks, "on");
+  const interactionEvents = useLayersValue(interactionLinks, "event");
+  const interactions = (interactionLinks ?? []).map((linkKey, index) => {
+    var _a, _b;
+    return {
+      linkKey,
+      on: (_a = interactionOns == null ? void 0 : interactionOns.at(index)) == null ? void 0 : _a.at(0),
+      event: (_b = interactionEvents == null ? void 0 : interactionEvents.at(index)) == null ? void 0 : _b.at(0)
+    };
+  });
   const fireEvent = react.useCallback(
     (eventLink) => {
-      var _a, _b, _c, _d;
-      if (!areaScope) return null;
-      const event = fragmentManager.resolve(eventLink);
-      const { value: eventValue } = readVariable(eventLink);
-      if ((event == null ? void 0 : event.mode) === definition.definition.eventMode.goal && (eventValue == null ? void 0 : eventValue.goalId)) {
-        (_b = (_a = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _a.reachGoal) == null ? void 0 : _b.call(_a, {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const eventType = (_a = core.entityOfKey(eventLink)) == null ? void 0 : _a._type;
+      const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      if (eventType === definition.definition.nodes.GoalEvent && (eventValue == null ? void 0 : eventValue.goalId)) {
+        if (!areaScope) return null;
+        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.reachGoal) == null ? void 0 : _d.call(_c, {
           goalId: eventValue == null ? void 0 : eventValue.goalId,
           ...utils.pick(areaScope, "variantId", "campaignId", "areaId")
         });
       }
-      if ((event == null ? void 0 : event.mode) === definition.definition.eventMode.tracker && eventValue) {
-        (_d = (_c = globalManager == null ? void 0 : globalManager.$metrics) == null ? void 0 : _c.trackAdPixel) == null ? void 0 : _d.call(_c, eventValue);
-      }
-      if ((event == null ? void 0 : event.mode) === definition.definition.eventMode.callback && typeof eventValue === "function") {
-        eventValue();
+      if (eventType === definition.definition.nodes.MutateEvent) {
+        const target = eventValue == null ? void 0 : eventValue.target;
+        const targetLayer = getNormalizeLayer(target, fragmentManager);
+        const value = (eventValue == null ? void 0 : eventValue.value) ?? ((_e = targetLayer == null ? void 0 : targetLayer.layer) == null ? void 0 : _e.defaultValue);
+        if (definition.isVariableLink(target) && utils.isValue(value)) {
+          const targetId = (_f = core.entityOfKey(target)) == null ? void 0 : _f._id;
+          (_g = instanceScope == null ? void 0 : instanceScope.onChangeProps) == null ? void 0 : _g.call(instanceScope, targetId, value);
+        }
       }
     },
     [globalManager, fragmentManager, areaScope]
@@ -1765,6 +1753,142 @@ 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;
+  }
+  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,
+    highlight
+  };
+};
+const Text = ({
+  layerKey,
+  Tag = "div",
+  collectStyle,
+  ...restProps
+}) => {
+  const { classnames, content, events, hash, highlight } = useTextAttributes(
+    layerKey,
+    {
+      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;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1844,29 +1968,36 @@ 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, (collectionItemLinkKey) => /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.GraphValue,
             {
-              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",
+              graphState: fragmentManager,
+              field: collectionItemLinkKey,
+              children: (value) => /* @__PURE__ */ jsxRuntime.jsx(
+                Scope,
                 {
-                  style: {
-                    display: "contents",
-                    ...getCssVariables(collectionItem ?? {})
+                  fragmentManager,
+                  layerKey: collectionItemLinkKey,
+                  value: {
+                    type: definition.definition.scopeTypes.CollectionItemScope,
+                    source,
+                    sourceDefinition,
+                    value,
+                    manager: fragmentManager
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-                },
-                child
-              ))
+                  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
+                  ))
+                }
+              )
             }
           ))
         }
@@ -2137,30 +2268,61 @@ 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 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(instanceProps == null ? void 0 : instanceProps.props)) {
+    if (isTopInstance && utils.isObject(base) && utils.isObject(localProps)) {
       base = {
         ...base,
-        ...instanceProps == null ? void 0 : instanceProps.props
+        ...localProps
       };
     }
     if (isTopInstance && fragmentManager) {
       definitionsData.forEach((definition2) => {
-        var _a;
         const defId = definition2._id;
-        base[defId] = ((_a = instanceProps == null ? void 0 : instanceProps.props) == null ? void 0 : _a[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
+        base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
       });
     }
     return utils.omit(base, "_type", "_id");
-  }, [isTopInstance, fragmentManager, instanceLayerProps, definitionsData]);
+  }, [
+    isTopInstance,
+    fragmentManager,
+    instanceLayerProps,
+    definitionsData,
+    localProps,
+    readVariable
+  ]);
+  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)
+    cssProps: getCssVariables(mergedProps),
+    onChangeProps: (variableId, value) => {
+      var _a;
+      setLocalProps((prev) => ({ ...prev, [variableId]: value }));
+      (_a = instanceProps == null ? void 0 : instanceProps.onChangeProps) == null ? void 0 : _a.call(instanceProps, variableId, value);
+    }
   };
 };
 const useInstance = (instanceProps) => {
@@ -2173,7 +2335,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 } = useInstanceProps(instanceProps);
+  const { props, cssProps, onChangeProps } = useInstanceProps(instanceProps);
   const classnames = useClassnames(
     instanceProps.layerKey,
     innerFragmentManager
@@ -2188,7 +2350,8 @@ const useInstance = (instanceProps) => {
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
-    globalManager: resultGlobalManager
+    globalManager: resultGlobalManager,
+    onChangeProps
   };
 };
 const InstanceInitial = ({
@@ -2211,7 +2374,8 @@ const InstanceInitial = ({
     classnames,
     innerManager,
     definitions,
-    globalManager
+    globalManager,
+    onChangeProps
   } = useInstance({
     ...instanceProps,
     pauseInteractions
@@ -2230,7 +2394,8 @@ const InstanceInitial = ({
         definitions,
         fragmentId,
         documentManager: innerManager,
-        layerKey: instanceProps.layerKey
+        layerKey: instanceProps.layerKey,
+        onChangeProps
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         InstanceContext$1.Provider,
@@ -2399,6 +2564,7 @@ exports.getAllParents = getAllParents;
 exports.getCssVariables = getCssVariables;
 exports.getHydratedData = getHydratedData;
 exports.getKey = getKey;
+exports.getNormalizeLayer = getNormalizeLayer;
 exports.getOverrider = getOverrider;
 exports.getOverriderByLayers = getOverriderByLayers;
 exports.getParent = getParent;
@@ -2457,6 +2623,8 @@ exports.useNormalizeLayer = useNormalizeLayer;
 exports.useOptionalSize = useOptionalSize;
 exports.useReadVariable = useReadVariable;
 exports.useReadVariables = useReadVariables;
+exports.useRenderTarget = useRenderTarget;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
+exports.useTextHighlight = useTextHighlight;
 exports.wrapTextInParagraphWithAttributes = wrapTextInParagraphWithAttributes;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './providers';
 export * from './nodes';
 export * from './utils';
+export * from './hooks/render';
 export * from './hooks/layer';
 export * from './hooks/layer-styles';
 export * from './hooks/global';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}