@fragmentsx/render-react 1.7.0 → 1.8.0

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

@@ -1,6 +1,8 @@
 import { LinkKey } from '@graph-state/core';
+import { StyleRegistrar } from '../useStyleRegistrar';
 interface UseLayerStylesOptions {
     collectStyle?: boolean;
+    registrar?: StyleRegistrar;
 }
 export declare const useLayerStyles: (layerKey: LinkKey, options?: UseLayerStylesOptions) => void;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAyB5C,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,aACf,OAAO,YACP,qBAAqB,SAuMhC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAW5C,OAAO,EAEL,cAAc,EACf,MAAM,wCAAwC,CAAC;AAchD,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,aACf,OAAO,YACP,qBAAqB,SAuMhC,CAAC"}

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

@@ -1,5 +1,8 @@
 import { LinkKey } from '@graph-state/core';
+export type StyleRegistrar = ReturnType<typeof useStyleRegistrar>;
 export declare const useStyleRegistrar: (layerKey: LinkKey) => {
+    baseline: Record<string, any>;
+    instance: Record<string, any>;
     add(prop: string, value: any, isDynamic: boolean): void;
     addAll(styles: Record<string, any>, isDynamic: boolean): void;
     flush(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"useStyleRegistrar.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useStyleRegistrar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAI5C,eAAO,MAAM,iBAAiB,aAAc,OAAO;cAWrC,MAAM,SAAS,GAAG,aAAa,OAAO;mBAIjC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,aAAa,OAAO;;iBAkBzC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAInC,CAAC"}
+{"version":3,"file":"useStyleRegistrar.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer-styles/useStyleRegistrar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,eAAO,MAAM,iBAAiB,aAAc,OAAO;;;cAarC,MAAM,SAAS,GAAG,aAAa,OAAO;mBAIjC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,aAAa,OAAO;;iBAiBzC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAInC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useExtractProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useExtractProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA0OrE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACpB,UAAU,kBACJ,UAAU,gBACZ,OAAO,EAAE,KACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CAwQxB,CAAC"}
+{"version":3,"file":"useExtractProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useExtractProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA2OrE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,YACpB,UAAU,kBACJ,UAAU,gBACZ,OAAO,EAAE,KACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CAwRxB,CAAC"}

package/dist/index.cjs.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const definition = require("@fragmentsx/definition");
 const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@graph-state/react");
 const utils = require("@fragmentsx/utils");
 const core = require("@graph-state/core");
+const react$1 = require("@graph-state/react");
 const clientCore = require("@fragmentsx/client-core");
 const GlobalManagerContext = react.createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
@@ -955,7 +955,7 @@ const useReadVariables = (variableKeys, customManager) => {
       const refAreaLayer = areaManager == null ? void 0 : areaManager.resolve(refKey);
       const refGlobalLayer = globalManager == null ? void 0 : globalManager.resolve(refKey);
       const refFragmentLayer = resultManager == null ? void 0 : resultManager.resolve(refKey);
-      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
+      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? null;
       return {
         value: refValue,
         layer: refCampaignLayer ?? refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
@@ -1298,6 +1298,8 @@ const useStyleRegistrar = (layerKey) => {
   const instance = {};
   const hasInstance = !!instanceId;
   return {
+    baseline,
+    instance,
     add(prop, value, isDynamic) {
       (isDynamic && hasInstance ? instance : baseline)[prop] = value;
     },
@@ -1846,7 +1848,7 @@ const useLayerFlex = (layerKey) => {
 const SKIP_OVERRIDE = { skipOverrideCheck: true };
 const useLayerStyles = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const reg = useStyleRegistrar(layerKey);
+  const reg = (options == null ? void 0 : options.registrar) ?? useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1982,7 +1984,7 @@ const useLayerStyles = (layerKey, options) => {
       display,
       vars.isVariable.visible || vars.isVariable.layerMode
     );
-    if (collectStyle) {
+    if (collectStyle && !(options == null ? void 0 : options.registrar)) {
       reg.flush();
     }
   } catch (e) {
@@ -2084,6 +2086,39 @@ const useTextContent = (layerKey, manager) => {
   }
   return nextContent;
 };
+function extractStyleVarIds(html) {
+  if (!html) return [];
+  const ids = /* @__PURE__ */ new Set();
+  const varRegex = /var\(--([a-zA-Z0-9_-]+)/g;
+  let match;
+  while ((match = varRegex.exec(html)) !== null) {
+    ids.add(match[1]);
+  }
+  return Array.from(ids);
+}
+const useTextCssVars = (layerKey, reg, input) => {
+  const varIds = react.useMemo(() => {
+    const fromContent = extractStyleVarIds(input.content);
+    const fromHighlight = extractStyleVarIds(input.highlightStylesString);
+    return [.../* @__PURE__ */ new Set([...fromContent, ...fromHighlight])];
+  }, [input.content, input.highlightStylesString]);
+  const variableKeys = react.useMemo(
+    () => varIds.map(
+      (id) => core.keyOfEntity({
+        _type: definition.definition.nodes.Variable,
+        _id: id
+      })
+    ),
+    [varIds]
+  );
+  const resolved = useReadVariables(variableKeys);
+  varIds.forEach((id, index) => {
+    var _a;
+    const value = (_a = resolved[index]) == null ? void 0 : _a.value;
+    if (value == null) return;
+    reg.add(`--${id}`, String(value), true);
+  });
+};
 const useHash = (layerKey, manager) => {
   if (!layerKey || !manager) return null;
   const layer = manager.resolve(layerKey);
@@ -2293,19 +2328,21 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
-  useLayerStyles(layerKey, { collectStyle });
   const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
+  const reg = useStyleRegistrar(layerKey);
+  useLayerStyles(layerKey, { collectStyle, registrar: reg });
+  useTextCssVars(layerKey, reg, {
+    content,
+    highlightStylesString: highlight.stylesString
+  });
+  if (collectStyle) {
+    reg.flush();
+  }
   const classnames = useClassnames(layerKey, fragmentManager);
   const hash = useHash(layerKey, fragmentManager);
   const events = useLayerInteractions(layerKey, options);
-  return {
-    hash,
-    events,
-    classnames,
-    content,
-    highlight
-  };
+  return { hash, events, classnames, content, highlight };
 };
 const Text = ({
   layerKey,
@@ -2362,8 +2399,9 @@ const useCollection = (layerKey, options) => {
   const [sourceValue] = useLayerValue(layerKey, "source", {
     manager: fragmentManager
   });
-  const sourceValues = react$1.useGraphStack(fragmentManager, sourceValue ?? []);
-  const resultValues = (sourceValue ?? []).map(
+  const safeSourceValue = Array.isArray(sourceValue) ? sourceValue : [];
+  const sourceValues = react$1.useGraphStack(fragmentManager, safeSourceValue);
+  const resultValues = safeSourceValue.map(
     (initValue, index) => (
       // Если initValue — объект (пришёл из пропсов через useReadVariables),
       // он уже содержит актуальные значения и имеет приоритет.
@@ -2509,6 +2547,7 @@ const fillArrayItemDefaults = (items, parentDef, manager) => {
 };
 const useExtractProps = (props, manager, parentManager, definitions) => {
   const areaManager = react.useContext(AreaManagerContext);
+  const campaignManager = react.useContext(CampaignManagerContext);
   const globalManager = react.useContext(GlobalManagerContext);
   const arrayVariableKeys = react.useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
@@ -2564,8 +2603,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       const propValue = props[defVar._id];
       if (!definition.isVariableLink(propValue)) continue;
       const resolveManager = parentManager ?? manager;
-      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
+      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
       if ((parentVar == null ? void 0 : parentVar.type) !== definition.definition.variableType.Array) continue;
       const items = parentVar.defaultValue;
       if (!Array.isArray(items)) continue;
@@ -2582,7 +2621,15 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
     }
     return { arrayItemKeys: keys, arrayItemManager: itemManager };
-  }, [definitions, manager, parentManager, areaManager, globalManager, props]);
+  }, [
+    definitions,
+    manager,
+    parentManager,
+    campaignManager,
+    areaManager,
+    globalManager,
+    props
+  ]);
   const arrayItemLayers = react$1.useGraphStack(
     arrayItemKeys.length ? arrayItemManager ?? parentManager ?? manager : null,
     arrayItemKeys
@@ -2620,8 +2667,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
       if (defVar.type === definition.definition.variableType.Array && defVar.definition) {
         if (definition.isVariableLink(propValue)) {
-          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
+          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
           if ((parentVar == null ? void 0 : parentVar.type) === definition.definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
             const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
@@ -2669,6 +2716,7 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     props,
     manager,
     parentManager,
+    campaignManager,
     areaManager,
     globalManager,
     definitions
@@ -2698,10 +2746,6 @@ const CollectionItem = ({
     [sourceDefinition]
   );
   const expandedProps = useExtractProps(props, manager, void 0, definitions);
-  const cssVars = react.useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Scope,
     {
@@ -2726,17 +2770,7 @@ const CollectionItem = ({
             onChangeProps: null,
             instanceId: collectionInstanceId
           },
-          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                display: "contents",
-                ...cssVars
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-            },
-            child
-          ))
+          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child }) }, child))
         }
       )
     }
@@ -3294,45 +3328,6 @@ const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
   if (valueOrPromise == null) return null;
   return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
 };
-const collectPropertyCssVars = (manager, result) => {
-  if (!(manager == null ? void 0 : manager.$properties)) return;
-  const keys = manager.$properties.getPropertyKeys() ?? [];
-  const processField = (fieldLayer) => {
-    if (!(fieldLayer == null ? void 0 : fieldLayer._id)) return;
-    if (fieldLayer.type === definition.definition.variableType.Object && fieldLayer.fields) {
-      for (const [key, ref] of Object.entries(fieldLayer.fields)) {
-        if (key === "_type" || key === "_id") continue;
-        const child = utils.isObject(ref) ? ref : manager.resolve(ref);
-        if (child) processField(child);
-      }
-      return;
-    }
-    if (fieldLayer.defaultValue != null) {
-      result[`--${fieldLayer._id}`] = String(fieldLayer.defaultValue);
-    }
-  };
-  for (const key of keys) {
-    const layer = manager.resolve(key, { deep: true });
-    if (layer) processField(layer);
-  }
-};
-const useManagerCssProperties = () => {
-  var _a, _b, _c, _d;
-  const globalManager = react.useContext(GlobalManagerContext);
-  const areaManager = react.useContext(AreaManagerContext);
-  react$1.useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _a.key);
-  react$1.useGraph(areaManager, (_b = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _b.key);
-  const globalKeys = ((_c = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _c.getPropertyKeys()) ?? [];
-  const areaKeys = ((_d = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _d.getPropertyKeys()) ?? [];
-  react$1.useGraphStack(globalKeys.length ? globalManager : null, globalKeys);
-  react$1.useGraphStack(areaKeys.length ? areaManager : null, areaKeys);
-  return react.useMemo(() => {
-    const vars = {};
-    collectPropertyCssVars(globalManager, vars);
-    collectPropertyCssVars(areaManager, vars);
-    return vars;
-  }, [globalManager, areaManager, globalKeys.length, areaKeys.length]);
-};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -3368,15 +3363,6 @@ const InstanceInitial = ({
     parentManager,
     definitions
   );
-  const propsCssVars = react.useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
-  const managerCssVars = useManagerCssProperties();
-  const cssVars = react.useMemo(
-    () => ({ ...managerCssVars, ...propsCssVars }),
-    [managerCssVars, propsCssVars]
-  );
   useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
   const instanceContextValue = react.useMemo(
     () => ({
@@ -3403,7 +3389,7 @@ const InstanceInitial = ({
     {
       className: classnames,
       "data-key": instanceProps.layerKey,
-      style: { ...style, ...cssVars },
+      style,
       ...link.linkProps,
       ...events,
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3416,7 +3402,7 @@ const InstanceInitial = ({
         }
       )
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { style, ...link.linkProps, children: /* @__PURE__ */ jsxRuntime.jsx(
     Fragment,
     {
       fragmentId,

package/dist/index.es.js

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { createContext, useContext, useMemo, useCallback, useEffect, useState, useRef, memo, Suspense, Component } from "react";
 import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField, isLink as isLink$1 } from "@fragmentsx/definition";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useGraph, useGraphStack } from "@graph-state/react";
 import { cleanGraph, generateId, getKey as getKey$1, isValue, isObject, pick, toPx, setKey as setKey$1, toKebabCase, set, isPrimitive, get, omit, noop, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
 import { keyOfEntity, isPartialKey, entityOfKey, isLinkKey } from "@graph-state/core";
+import { useGraph, useGraphStack } from "@graph-state/react";
 import { createAreaManager, createCampaignManager } from "@fragmentsx/client-core";
 const GlobalManagerContext = createContext(null);
 const GlobalManagerProvider = GlobalManagerContext.Provider;
@@ -953,7 +953,7 @@ const useReadVariables = (variableKeys, customManager) => {
       const refAreaLayer = areaManager == null ? void 0 : areaManager.resolve(refKey);
       const refGlobalLayer = globalManager == null ? void 0 : globalManager.resolve(refKey);
       const refFragmentLayer = resultManager == null ? void 0 : resultManager.resolve(refKey);
-      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? resultValue;
+      const refValue = (refCampaignLayer == null ? void 0 : refCampaignLayer.defaultValue) ?? (refAreaLayer == null ? void 0 : refAreaLayer.defaultValue) ?? (refGlobalLayer == null ? void 0 : refGlobalLayer.defaultValue) ?? (refFragmentLayer == null ? void 0 : refFragmentLayer.defaultValue) ?? null;
       return {
         value: refValue,
         layer: refCampaignLayer ?? refAreaLayer ?? refGlobalLayer ?? refFragmentLayer ?? null
@@ -1296,6 +1296,8 @@ const useStyleRegistrar = (layerKey) => {
   const instance = {};
   const hasInstance = !!instanceId;
   return {
+    baseline,
+    instance,
     add(prop, value, isDynamic) {
       (isDynamic && hasInstance ? instance : baseline)[prop] = value;
     },
@@ -1844,7 +1846,7 @@ const useLayerFlex = (layerKey) => {
 const SKIP_OVERRIDE = { skipOverrideCheck: true };
 const useLayerStyles = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
-  const reg = useStyleRegistrar(layerKey);
+  const reg = (options == null ? void 0 : options.registrar) ?? useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1980,7 +1982,7 @@ const useLayerStyles = (layerKey, options) => {
       display,
       vars.isVariable.visible || vars.isVariable.layerMode
     );
-    if (collectStyle) {
+    if (collectStyle && !(options == null ? void 0 : options.registrar)) {
       reg.flush();
     }
   } catch (e) {
@@ -2082,6 +2084,39 @@ const useTextContent = (layerKey, manager) => {
   }
   return nextContent;
 };
+function extractStyleVarIds(html) {
+  if (!html) return [];
+  const ids = /* @__PURE__ */ new Set();
+  const varRegex = /var\(--([a-zA-Z0-9_-]+)/g;
+  let match;
+  while ((match = varRegex.exec(html)) !== null) {
+    ids.add(match[1]);
+  }
+  return Array.from(ids);
+}
+const useTextCssVars = (layerKey, reg, input) => {
+  const varIds = useMemo(() => {
+    const fromContent = extractStyleVarIds(input.content);
+    const fromHighlight = extractStyleVarIds(input.highlightStylesString);
+    return [.../* @__PURE__ */ new Set([...fromContent, ...fromHighlight])];
+  }, [input.content, input.highlightStylesString]);
+  const variableKeys = useMemo(
+    () => varIds.map(
+      (id) => keyOfEntity({
+        _type: definition.nodes.Variable,
+        _id: id
+      })
+    ),
+    [varIds]
+  );
+  const resolved = useReadVariables(variableKeys);
+  varIds.forEach((id, index) => {
+    var _a;
+    const value = (_a = resolved[index]) == null ? void 0 : _a.value;
+    if (value == null) return;
+    reg.add(`--${id}`, String(value), true);
+  });
+};
 const useHash = (layerKey, manager) => {
   if (!layerKey || !manager) return null;
   const layer = manager.resolve(layerKey);
@@ -2291,19 +2326,21 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
-  useLayerStyles(layerKey, { collectStyle });
   const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
+  const reg = useStyleRegistrar(layerKey);
+  useLayerStyles(layerKey, { collectStyle, registrar: reg });
+  useTextCssVars(layerKey, reg, {
+    content,
+    highlightStylesString: highlight.stylesString
+  });
+  if (collectStyle) {
+    reg.flush();
+  }
   const classnames = useClassnames(layerKey, fragmentManager);
   const hash = useHash(layerKey, fragmentManager);
   const events = useLayerInteractions(layerKey, options);
-  return {
-    hash,
-    events,
-    classnames,
-    content,
-    highlight
-  };
+  return { hash, events, classnames, content, highlight };
 };
 const Text = ({
   layerKey,
@@ -2360,8 +2397,9 @@ const useCollection = (layerKey, options) => {
   const [sourceValue] = useLayerValue(layerKey, "source", {
     manager: fragmentManager
   });
-  const sourceValues = useGraphStack(fragmentManager, sourceValue ?? []);
-  const resultValues = (sourceValue ?? []).map(
+  const safeSourceValue = Array.isArray(sourceValue) ? sourceValue : [];
+  const sourceValues = useGraphStack(fragmentManager, safeSourceValue);
+  const resultValues = safeSourceValue.map(
     (initValue, index) => (
       // Если initValue — объект (пришёл из пропсов через useReadVariables),
       // он уже содержит актуальные значения и имеет приоритет.
@@ -2507,6 +2545,7 @@ const fillArrayItemDefaults = (items, parentDef, manager) => {
 };
 const useExtractProps = (props, manager, parentManager, definitions) => {
   const areaManager = useContext(AreaManagerContext);
+  const campaignManager = useContext(CampaignManagerContext);
   const globalManager = useContext(GlobalManagerContext);
   const arrayVariableKeys = useMemo(() => {
     if (!manager || !(definitions == null ? void 0 : definitions.length)) return [];
@@ -2562,8 +2601,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       const propValue = props[defVar._id];
       if (!isVariableLink$1(propValue)) continue;
       const resolveManager = parentManager ?? manager;
-      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
+      const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+      const ownerManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : null;
       if ((parentVar == null ? void 0 : parentVar.type) !== definition.variableType.Array) continue;
       const items = parentVar.defaultValue;
       if (!Array.isArray(items)) continue;
@@ -2580,7 +2619,15 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
     }
     return { arrayItemKeys: keys, arrayItemManager: itemManager };
-  }, [definitions, manager, parentManager, areaManager, globalManager, props]);
+  }, [
+    definitions,
+    manager,
+    parentManager,
+    campaignManager,
+    areaManager,
+    globalManager,
+    props
+  ]);
   const arrayItemLayers = useGraphStack(
     arrayItemKeys.length ? arrayItemManager ?? parentManager ?? manager : null,
     arrayItemKeys
@@ -2618,8 +2665,8 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
       }
       if (defVar.type === definition.variableType.Array && defVar.definition) {
         if (isVariableLink$1(propValue)) {
-          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
-          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
+          const parentVar = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ?? (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ?? (areaManager == null ? void 0 : areaManager.resolve(propValue)) ?? (globalManager == null ? void 0 : globalManager.resolve(propValue));
+          const parentVarManager = (resolveManager == null ? void 0 : resolveManager.resolve(propValue)) ? resolveManager : (campaignManager == null ? void 0 : campaignManager.resolve(propValue)) ? campaignManager : (areaManager == null ? void 0 : areaManager.resolve(propValue)) ? areaManager : (globalManager == null ? void 0 : globalManager.resolve(propValue)) ? globalManager : resolveManager;
           if ((parentVar == null ? void 0 : parentVar.type) === definition.variableType.Array && (parentVar == null ? void 0 : parentVar.definition)) {
             const resolvedArray = arrayResolvedByKey[propValue];
             if (Array.isArray(resolvedArray)) {
@@ -2667,6 +2714,7 @@ const useExtractProps = (props, manager, parentManager, definitions) => {
     props,
     manager,
     parentManager,
+    campaignManager,
     areaManager,
     globalManager,
     definitions
@@ -2696,10 +2744,6 @@ const CollectionItem = ({
     [sourceDefinition]
   );
   const expandedProps = useExtractProps(props, manager, void 0, definitions);
-  const cssVars = useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
   return /* @__PURE__ */ jsx(
     Scope,
     {
@@ -2724,17 +2768,7 @@ const CollectionItem = ({
             onChangeProps: null,
             instanceId: collectionInstanceId
           },
-          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "contents",
-                ...cssVars
-              },
-              children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
-            },
-            child
-          ))
+          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx("div", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child }) }, child))
         }
       )
     }
@@ -3292,45 +3326,6 @@ const useSuspenseLoadArea = (globalManager, areaCode, skip) => {
   if (valueOrPromise == null) return null;
   return createSuspenseResource(`area:${areaCode}`, valueOrPromise, cache).read();
 };
-const collectPropertyCssVars = (manager, result) => {
-  if (!(manager == null ? void 0 : manager.$properties)) return;
-  const keys = manager.$properties.getPropertyKeys() ?? [];
-  const processField = (fieldLayer) => {
-    if (!(fieldLayer == null ? void 0 : fieldLayer._id)) return;
-    if (fieldLayer.type === definition.variableType.Object && fieldLayer.fields) {
-      for (const [key, ref] of Object.entries(fieldLayer.fields)) {
-        if (key === "_type" || key === "_id") continue;
-        const child = isObject(ref) ? ref : manager.resolve(ref);
-        if (child) processField(child);
-      }
-      return;
-    }
-    if (fieldLayer.defaultValue != null) {
-      result[`--${fieldLayer._id}`] = String(fieldLayer.defaultValue);
-    }
-  };
-  for (const key of keys) {
-    const layer = manager.resolve(key, { deep: true });
-    if (layer) processField(layer);
-  }
-};
-const useManagerCssProperties = () => {
-  var _a, _b, _c, _d;
-  const globalManager = useContext(GlobalManagerContext);
-  const areaManager = useContext(AreaManagerContext);
-  useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _a.key);
-  useGraph(areaManager, (_b = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _b.key);
-  const globalKeys = ((_c = globalManager == null ? void 0 : globalManager.$properties) == null ? void 0 : _c.getPropertyKeys()) ?? [];
-  const areaKeys = ((_d = areaManager == null ? void 0 : areaManager.$properties) == null ? void 0 : _d.getPropertyKeys()) ?? [];
-  useGraphStack(globalKeys.length ? globalManager : null, globalKeys);
-  useGraphStack(areaKeys.length ? areaManager : null, areaKeys);
-  return useMemo(() => {
-    const vars = {};
-    collectPropertyCssVars(globalManager, vars);
-    collectPropertyCssVars(areaManager, vars);
-    return vars;
-  }, [globalManager, areaManager, globalKeys.length, areaKeys.length]);
-};
 const InstanceInitial = ({
   Tag: inputTag,
   style = {},
@@ -3366,15 +3361,6 @@ const InstanceInitial = ({
     parentManager,
     definitions
   );
-  const propsCssVars = useMemo(
-    () => toCssCustomProperties(expandedProps),
-    [expandedProps]
-  );
-  const managerCssVars = useManagerCssProperties();
-  const cssVars = useMemo(
-    () => ({ ...managerCssVars, ...propsCssVars }),
-    [managerCssVars, propsCssVars]
-  );
   useSuspenseLoadFragment(globalManager, fragmentId, !ssr);
   const instanceContextValue = useMemo(
     () => ({
@@ -3401,7 +3387,7 @@ const InstanceInitial = ({
     {
       className: classnames,
       "data-key": instanceProps.layerKey,
-      style: { ...style, ...cssVars },
+      style,
       ...link.linkProps,
       ...events,
       children: /* @__PURE__ */ jsx(
@@ -3414,7 +3400,7 @@ const InstanceInitial = ({
         }
       )
     }
-  ) : /* @__PURE__ */ jsx(Tag, { style: { ...style, ...cssVars }, ...link.linkProps, children: /* @__PURE__ */ jsx(
+  ) : /* @__PURE__ */ jsx(Tag, { style, ...link.linkProps, children: /* @__PURE__ */ jsx(
     Fragment,
     {
       fragmentId,

package/dist/nodes/Collection/hooks/useCollection.d.ts

@@ -19,7 +19,7 @@ export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOption
     };
     source: any;
     sourceDefinition: any;
-    sourceValue: any;
+    sourceValue: any[];
     fragmentManager: null;
 };
 //# sourceMappingURL=useCollection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Collection/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;CA8BzE,CAAC"}
+{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Collection/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;CA+BzE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../src/nodes/CollectionItem/CollectionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAW,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAOlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAoE9C,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../src/nodes/CollectionItem/CollectionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAW,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAMlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CA0D9C,CAAC"}

package/dist/nodes/CollectionItem/hooks/useCollection.d.ts

@@ -19,7 +19,7 @@ export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOption
     };
     source: any;
     sourceDefinition: any;
-    sourceValue: any;
+    sourceValue: any[];
     fragmentManager: null;
 };
 //# sourceMappingURL=useCollection.d.ts.map

package/dist/nodes/CollectionItem/hooks/useCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/CollectionItem/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;CAyBzE,CAAC"}
+{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../../../src/nodes/CollectionItem/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAY,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKzE,eAAO,MAAM,aAAa,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;;;;CA0BzE,CAAC"}

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,EACL,wBAAwB,EACxB,WAAW,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAc,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAuErE,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;AA0GD,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,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAU5C,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;AA+FD,eAAO,MAAM,QAAQ,yDAoBpB,CAAC"}

package/dist/nodes/Instance/test/text-css-vars.browser.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-css-vars.browser.test.d.ts.map

package/dist/nodes/Instance/test/text-css-vars.browser.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-css-vars.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/text-css-vars.browser.test.tsx"],"names":[],"mappings":""}

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;AAS5C,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":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAW5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;;;;CA+B5B,CAAC"}

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

@@ -0,0 +1,14 @@
+import { LinkKey } from '@graph-state/core';
+import { StyleRegistrar } from '../../../hooks/layer-styles/useStyleRegistrar';
+interface UseTextCssVarsInput {
+    content: string;
+    highlightStylesString: string;
+}
+/**
+ * Извлекает var(--id) из контента и highlight, резолвит значения
+ * и регистрирует --id: value через registrar.
+ * Не вызывает flush — это ответственность вызывающего (useTextAttributes).
+ */
+export declare const useTextCssVars: (layerKey: LinkKey, reg: StyleRegistrar, input: UseTextCssVarsInput) => void;
+export {};
+//# sourceMappingURL=useTextCssVars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextCssVars.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Text/hooks/useTextCssVars.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAKzD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE7E,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,aACf,OAAO,OACZ,cAAc,SACZ,mBAAmB,SA0B3B,CAAC"}

package/dist/utils/variables/extractStyleVarIds.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Извлекает ID переменных из var(--id) паттернов в HTML/CSS строке.
+ * Возвращает уникальный список ID (hex для fragment variables, alphanumeric+dash для project/area/campaign properties).
+ */
+export declare function extractStyleVarIds(html: string): string[];
+//# sourceMappingURL=extractStyleVarIds.d.ts.map

package/dist/utils/variables/extractStyleVarIds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractStyleVarIds.d.ts","sourceRoot":"","sources":["../../../src/utils/variables/extractStyleVarIds.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CASzD"}

package/dist/utils/variables/extractStyleVarIds.test.d.ts

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

package/dist/utils/variables/extractStyleVarIds.test.d.ts.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "files": [
     "dist"
@@ -27,7 +27,7 @@
     "@graph-state/core": "^0.13.2",
     "@graph-state/react": "^0.8.3",
     "react-use-measure": "^2.1.7",
-    "@fragmentsx/client-core": "0.5.0",
+    "@fragmentsx/client-core": "0.6.0",
     "@fragmentsx/definition": "0.2.2",
     "@fragmentsx/utils": "0.2.0"
   },