@fragmentsx/render-react 1.2.3 → 1.2.4

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/index.cjs.js

@@ -504,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;
@@ -1631,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) => {
@@ -1748,22 +1753,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;
+  }
+  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 +1866,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;
@@ -1861,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
+                  ))
+                }
+              )
             }
           ))
         }
@@ -2154,8 +2268,22 @@ 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 ?? {});
@@ -2179,7 +2307,8 @@ const useInstanceProps = (instanceProps) => {
     fragmentManager,
     instanceLayerProps,
     definitionsData,
-    localProps
+    localProps,
+    readVariable
   ]);
   react.useEffect(() => {
     if (utils.isValue(instanceProps == null ? void 0 : instanceProps.props)) {
@@ -2497,4 +2626,5 @@ exports.useReadVariables = useReadVariables;
 exports.useRenderTarget = useRenderTarget;
 exports.useTextAttributes = useTextAttributes;
 exports.useTextContent = useTextContent;
+exports.useTextHighlight = useTextHighlight;
 exports.wrapTextInParagraphWithAttributes = wrapTextInParagraphWithAttributes;

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);
@@ -502,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;
@@ -1629,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) => {
@@ -1746,22 +1751,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"] = 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
+    content,
+    highlight
   };
 };
 const Text = ({
@@ -1770,15 +1864,28 @@ const Text = ({
   collectStyle,
   ...restProps
 }) => {
-  const { classnames, content, events } = useTextAttributes(layerKey, {
-    collectStyle
-  });
-  return /* @__PURE__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: /* @__PURE__ */ jsx(
-    "div",
+  const { classnames, content, events, hash, highlight } = useTextAttributes(
+    layerKey,
     {
-      dangerouslySetInnerHTML: { __html: content }
+      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;
@@ -1859,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
+                  ))
+                }
+              )
             }
           ))
         }
@@ -2152,8 +2266,22 @@ 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 ?? {});
@@ -2177,7 +2305,8 @@ const useInstanceProps = (instanceProps) => {
     fragmentManager,
     instanceLayerProps,
     definitionsData,
-    localProps
+    localProps,
+    readVariable
   ]);
   useEffect(() => {
     if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
@@ -2496,5 +2625,6 @@ export {
   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/hooks/useInstanceProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAc1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;gCAyE7B,MAAM,SAAS,OAAO;CAKrD,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,CAkB9B,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,6 +3,7 @@ export interface UseTextAttributes {
     collectStyle?: boolean;
 }
 export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAttributes) => {
+    hash: string | null;
     events: {
         onClick?: undefined;
     } | {
@@ -11,5 +12,8 @@ export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAtt
     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;AAQ5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;CAqB5B,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"}

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

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

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

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

package/dist/test/setupTests.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setupTests.d.ts.map

package/dist/test/setupTests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../../src/test/setupTests.ts"],"names":[],"mappings":""}

package/dist/test/testUtils.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { RenderOptions } from '@testing-library/react';
+import { GraphState } from '@graph-state/core';
+/**
+ * Создаёт тестовый GlobalManager для тестов
+ */
+export declare const createTestGlobalManager: (initialData?: unknown) => GraphState;
+/**
+ * Кастомный render с провайдерами по умолчанию
+ */
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+    globalManager?: GraphState;
+}
+export declare const renderWithProviders: (ui: ReactElement, { globalManager, ...renderOptions }?: CustomRenderOptions) => any;
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+//# sourceMappingURL=testUtils.d.ts.map

package/dist/test/testUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../src/test/testUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,iBAAkB,OAAO,KAAG,UAE/D,CAAC;AAEF;;GAEG;AACH,UAAU,mBAAoB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;IAClE,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,OAC1B,YAAY,wCAIb,mBAAmB,QAWvB,CAAC;AAGF,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "files": [
     "dist"
@@ -27,7 +27,7 @@
     "@graph-state/core": "^0.13.2",
     "@graph-state/react": "^0.8.2",
     "react-use-measure": "^2.1.7",
-    "@fragmentsx/definition": "0.2.0",
+    "@fragmentsx/definition": "0.2.1",
     "@fragmentsx/utils": "0.2.0"
   },
   "devDependencies": {