@fragmentsx/render-react 1.2.2 → 1.2.4

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef, Suspense } from "react";
 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 { useGraph, useGraphStack, GraphValue } 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 { entityOfKey, keyOfEntity, isPartialKey, isLinkKey } from "@graph-state/core";
 const GlobalManagerContext = createContext(null);
@@ -90,6 +90,13 @@ const getNormalizeLayer = (layerKey, manager, options) => {
 const useNormalizeLayer = (layerKey, manager, options) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
   const resultManager = manager ?? fragmentManager;
+  if (!resultManager) {
+    return {
+      layerKey,
+      rawLayer: null,
+      layer: null
+    };
+  }
   return getNormalizeLayer(layerKey, resultManager, options);
 };
 const useNormalizeLayers = (layerKeys, manager, options) => {
@@ -149,12 +156,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.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.variableType.Object)
+      if (!((_b = variableLayer == null ? void 0 : variableLayer.defaultValue) == null ? void 0 : _b.length) || (definitionLayer == null ? void 0 : definitionLayer.type) !== definition.variableType.Object)
         return variableLayer;
       const definitionDefaultValue = extractVariableDefaultValue(
         manager,
@@ -462,14 +469,12 @@ function makeSnapshot(globalManager, targetFragmentId) {
   ).filter(Boolean);
   const linkedGoals = Array.from(
     new Set(
-      targetFragment.inspectFields(definition.nodes.Variable).map(targetFragment == null ? void 0 : targetFragment.resolve).filter((graph) => {
-        return (graph == null ? void 0 : graph.type) === definition.variableType.Event && (graph == null ? void 0 : graph.mode) === definition.eventMode.goal;
-      }).map((graph) => {
+      targetFragment.inspectFields(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.nodes.Text).map((linkKey) => {
@@ -497,7 +502,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;
@@ -969,13 +975,9 @@ const getLayerCssVariable = (manager, inputValue) => {
 const useLayerCssVariable = (inputValue) => {
   const { manager } = useContext(FragmentContext);
   const isVariable = isVariableLink$1(inputValue);
-  const [variableValue] = useGraph(isVariable ? manager : null, inputValue, {
-    selector: (graph) => 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) => {
@@ -1426,12 +1428,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
   };
@@ -1471,7 +1474,7 @@ const useLayerBorder = (layerKey) => {
     };
   }
   if (borderPaint.type === definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solid);
+    return calcBorderSides(type, width, borderPaint.solidCssValue);
   }
   return { border: null };
 };
@@ -1627,6 +1630,10 @@ const useTextContent = (layerKey, manager) => {
       readVariable(variable.variableKey).value ?? ""
     );
   });
+  nextContent = nextContent.replace(
+    /\{\{(.*?)}}/,
+    `<mark class="highlight">$1</mark>`
+  );
   return nextContent;
 };
 const useHash = (layerKey, manager) => {
@@ -1682,36 +1689,6 @@ const useStyleSheet = (manager) => {
     unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
   };
 };
-const useTextAttributes = (layerKey, options) => {
-  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const { manager: fragmentManager } = 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__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...restProps, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      dangerouslySetInnerHTML: { __html: content }
-    }
-  ) });
-};
 const useLayerInteractions = (layerKey, options) => {
   const pause = (options == null ? void 0 : options.pauseInteractions) ?? false;
   const { manager: globalManager } = useGlobalManager();
@@ -1720,29 +1697,40 @@ const useLayerInteractions = (layerKey, options) => {
   const areaScope = scopes.find(
     (scope) => (scope == null ? void 0 : scope.type) === definition.scopeTypes.AreaScope
   );
-  const [interactions] = useLayerValue(
-    layerKey,
-    "interactions",
-    fragmentManager
+  const instanceScope = scopes.find(
+    (scope) => (scope == null ? void 0 : scope.type) === 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 = 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.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 = entityOfKey(eventLink)) == null ? void 0 : _a._type;
+      const eventValue = (_b = getNormalizeLayer(eventLink, fragmentManager)) == null ? void 0 : _b.layer;
+      if (eventType === 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,
           ...pick(areaScope, "variantId", "campaignId", "areaId")
         });
       }
-      if ((event == null ? void 0 : event.mode) === 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.eventMode.callback && typeof eventValue === "function") {
-        eventValue();
+      if (eventType === 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 (isVariableLink$1(target) && isValue(value)) {
+          const targetId = (_f = 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]
@@ -1763,6 +1751,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"] = 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"] = 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 } = 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__ */ jsxs(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `.${hash} .highlight {${highlight.stylesString}}`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: content }
+      }
+    )
+  ] });
+};
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1842,29 +1966,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__ */ jsx(
-            Scope,
+          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItemLinkKey) => /* @__PURE__ */ jsx(
+            GraphValue,
             {
-              fragmentManager,
-              layerKey: `${layerKey}.${index}`,
-              value: {
-                type: definition.scopeTypes.CollectionItemScope,
-                source,
-                sourceDefinition,
-                value: collectionItem,
-                manager: fragmentManager
-              },
-              children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
-                "div",
+              graphState: fragmentManager,
+              field: collectionItemLinkKey,
+              children: (value) => /* @__PURE__ */ jsx(
+                Scope,
                 {
-                  style: {
-                    display: "contents",
-                    ...getCssVariables(collectionItem ?? {})
+                  fragmentManager,
+                  layerKey: collectionItemLinkKey,
+                  value: {
+                    type: definition.scopeTypes.CollectionItemScope,
+                    source,
+                    sourceDefinition,
+                    value,
+                    manager: fragmentManager
                   },
-                  children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
-                },
-                child
-              ))
+                  children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "contents",
+                        ...getCssVariables(value ?? {})
+                      },
+                      children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
+                    },
+                    child
+                  ))
+                }
+              )
             }
           ))
         }
@@ -2135,30 +2266,61 @@ const useInstanceProps = (instanceProps) => {
   );
   const { manager: fragmentContextManager } = useContext(FragmentContext);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const definitionsData = useGraphStack(innerFragmentManager, definitions);
+  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
+  const flatDefinition = useMemo(() => {
+    const acc = [];
+    const run = (defLink) => {
+      const resolvedDefinition = fragmentManager.resolve(defLink);
+      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
+        Object.values(resolvedDefinition.fields).forEach(run);
+      } else if (isVariableLink$1(defLink)) {
+        acc.push(defLink);
+      }
+    };
+    definitions.forEach(run);
+    return acc;
+  }, [definitions]);
+  const definitionsData = useGraphStack(innerFragmentManager, flatDefinition);
   const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
+  const [localProps, setLocalProps] = useState(instanceProps.props ?? {});
   const mergedProps = useMemo(() => {
     let base = instanceLayerProps;
-    if (isTopInstance && isObject(base) && isObject(instanceProps == null ? void 0 : instanceProps.props)) {
+    if (isTopInstance && isObject(base) && 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 omit(base, "_type", "_id");
-  }, [isTopInstance, fragmentManager, instanceLayerProps, definitionsData]);
+  }, [
+    isTopInstance,
+    fragmentManager,
+    instanceLayerProps,
+    definitionsData,
+    localProps,
+    readVariable
+  ]);
+  useEffect(() => {
+    if (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) => {
@@ -2171,7 +2333,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
@@ -2186,7 +2348,8 @@ const useInstance = (instanceProps) => {
     parentManager,
     innerManager: innerFragmentManager,
     fragmentId: resultFragmentId,
-    globalManager: resultGlobalManager
+    globalManager: resultGlobalManager,
+    onChangeProps
   };
 };
 const InstanceInitial = ({
@@ -2209,7 +2372,8 @@ const InstanceInitial = ({
     classnames,
     innerManager,
     definitions,
-    globalManager
+    globalManager,
+    onChangeProps
   } = useInstance({
     ...instanceProps,
     pauseInteractions
@@ -2228,7 +2392,8 @@ const InstanceInitial = ({
         definitions,
         fragmentId,
         documentManager: innerManager,
-        layerKey: instanceProps.layerKey
+        layerKey: instanceProps.layerKey,
+        onChangeProps
       },
       children: /* @__PURE__ */ jsx(
         InstanceContext$1.Provider,
@@ -2398,6 +2563,7 @@ export {
   getCssVariables,
   getHydratedData,
   getKey,
+  getNormalizeLayer,
   getOverrider,
   getOverriderByLayers,
   getParent,
@@ -2456,7 +2622,9 @@ export {
   useOptionalSize,
   useReadVariable,
   useReadVariables,
+  useRenderTarget,
   useTextAttributes,
   useTextContent,
+  useTextHighlight,
   wrapTextInParagraphWithAttributes
 };

package/dist/nodes/Collection/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../src/nodes/Collection/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAIlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+D1C,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../src/nodes/Collection/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwE1C,CAAC"}

package/dist/nodes/Instance/Instance.d.ts

@@ -14,6 +14,7 @@ export interface InstanceProps extends ComponentPropsWithoutRef<"div"> {
     options?: InstanceOptions;
     globalManager?: unknown;
     Tag?: string | ElementType;
+    onChangeProps?: (variableId: string, value: unknown) => void;
 }
 export declare const Instance: (props: any) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/nodes/Instance/Instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAgB,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAS5C,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B;AAoFD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}
+{"version":3,"file":"Instance.d.ts","sourceRoot":"","sources":["../../../src/nodes/Instance/Instance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAS5C,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAsFD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}

package/dist/nodes/Instance/hooks/useInstance.d.ts

@@ -15,6 +15,7 @@ export declare const useInstance: (instanceProps: UseInstanceOptions) => {
     innerManager: any;
     fragmentId: any;
     globalManager: import('@graph-state/core').GraphState<import('@graph-state/core').SystemFields, string> | null;
+    onChangeProps: (variableId: string, value: unknown) => void;
 };
 export {};
 //# sourceMappingURL=useInstance.d.ts.map

package/dist/nodes/Instance/hooks/useInstance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstance.ts"],"names":[],"mappings":"AAUA,UAAU,kBAAmB,SAAQ,2BAA2B;CAAG;AAEnE,eAAO,MAAM,WAAW,kBAAmB,kBAAkB;;;;;;;;;;;;;;;CAyC5D,CAAC"}
+{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstance.ts"],"names":[],"mappings":"AAUA,UAAU,kBAAmB,SAAQ,2BAA2B;CAAG;AAEnE,eAAO,MAAM,WAAW,kBAAmB,kBAAkB;;;;;;;;;;;;;;;;CA0C5D,CAAC"}

package/dist/nodes/Instance/hooks/useInstanceProps.d.ts

@@ -1,6 +1,7 @@
-import { InstanceProps } from '../index';
+import { InstanceProps } from '../Instance';
 export declare const useInstanceProps: (instanceProps: InstanceProps) => {
     props: Omit<any, "_type" | "_id">;
     cssProps: {};
+    onChangeProps: (variableId: string, value: unknown) => void;
 };
 //# sourceMappingURL=useInstanceProps.d.ts.map

package/dist/nodes/Instance/hooks/useInstanceProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAiBzC,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;CAsE5D,CAAC"}
+{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAgB1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;gCA4E7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}

package/dist/nodes/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlE,UAAU,SAAU,SAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,iBAAiB;IAC5E,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgB9B,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlE,UAAU,SAAU,SAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,iBAAiB;IAC5E,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0B9B,CAAC"}

package/dist/nodes/Text/hooks/useTextAttributes.d.ts

@@ -3,8 +3,17 @@ export interface UseTextAttributes {
     collectStyle?: boolean;
 }
 export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAttributes) => {
+    hash: string | null;
+    events: {
+        onClick?: undefined;
+    } | {
+        onClick: () => void;
+    };
     styles: {};
     classnames: string | null;
     content: any;
+    highlight: {
+        stylesString: string;
+    };
 };
 //# sourceMappingURL=useTextAttributes.d.ts.map

package/dist/nodes/Text/hooks/useTextAttributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextAttributes.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextAttributes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;CAmB5B,CAAC"}
+{"version":3,"file":"useTextAttributes.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextAttributes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAU5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;;;;;CAyB5B,CAAC"}

package/dist/nodes/Text/hooks/useTextContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextContent.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextContent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAiCrE,eAAO,MAAM,cAAc,aAAc,OAAO,WAAW,UAAU,QAwCpE,CAAC"}
+{"version":3,"file":"useTextContent.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextContent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAiCrE,eAAO,MAAM,cAAc,aAAc,OAAO,WAAW,UAAU,QA6CpE,CAAC"}

package/dist/nodes/Text/hooks/useTextHighlight.d.ts

@@ -0,0 +1,6 @@
+import { LinkKey } from '@graph-state/core';
+import { UseLayerValueOptions } from '../../../hooks/layer/useLayerValue';
+export declare const useTextHighlight: (layerKey: LinkKey, options?: UseLayerValueOptions) => {
+    stylesString: string;
+};
+//# sourceMappingURL=useTextHighlight.d.ts.map

package/dist/nodes/Text/hooks/useTextHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextHighlight.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,eAAO,MAAM,gBAAgB,aACjB,OAAO,YACP,oBAAoB;;CAwF/B,CAAC"}

package/dist/nodes/Text/index.d.ts

@@ -1,4 +1,5 @@
 export { Text } from './Text';
 export { useTextAttributes } from './hooks/useTextAttributes';
 export { useTextContent } from './hooks/useTextContent';
+export { useTextHighlight } from './hooks/useTextHighlight';
 //# sourceMappingURL=index.d.ts.map

package/dist/nodes/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/test/__examples__/Fragment.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Пример теста для компонента Fragment
+ * Этот файл можно удалить после создания реальных тестов
+ */
+export {};
+//# sourceMappingURL=Fragment.test.d.ts.map

package/dist/test/__examples__/Fragment.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fragment.test.d.ts","sourceRoot":"","sources":["../../../src/test/__examples__/Fragment.test.tsx"],"names":[],"mappings":"AAAA;;;GAGG"}