@fragmentsx/render-react 1.6.3 → 1.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"useReadVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariables.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAyBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GA2IlC,CAAC"}
+{"version":3,"file":"useReadVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useReadVariables.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAyBrE,eAAO,MAAM,gBAAgB,iBACb,OAAO,EAAE,kBACP,UAAU,GAAG,IAAI;;;GA+IlC,CAAC"}

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

@@ -2,6 +2,7 @@ export interface ResolvedVariables {
     values: Record<string, any>;
     cssVariableValues: Record<string, any>;
     rawValues: Record<string, any>;
+    isVariable: Record<string, boolean>;
 }
 export declare const useResolvedLayerVariables: (layer: any, rawLayer: any, _customScopes?: unknown[]) => ResolvedVariables;
 //# sourceMappingURL=useResolvedLayerVariables.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResolvedLayerVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useResolvedLayerVariables.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AA8BD,eAAO,MAAM,yBAAyB,UAC7B,GAAG,YACA,GAAG,kBACG,OAAO,EAAE,KACxB,iBA2DF,CAAC"}
+{"version":3,"file":"useResolvedLayerVariables.d.ts","sourceRoot":"","sources":["../../../src/hooks/layer/useResolvedLayerVariables.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AA+BD,eAAO,MAAM,yBAAyB,UAC7B,GAAG,YACA,GAAG,kBACG,OAAO,EAAE,KACxB,iBA6DF,CAAC"}

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

@@ -1,3 +1,7 @@
 import { LinkKey } from '@graph-state/core';
-export declare const useLayerStyles: (layerKey: LinkKey) => any;
+interface UseLayerStylesOptions {
+    collectStyle?: boolean;
+}
+export declare const useLayerStyles: (layerKey: LinkKey, options?: UseLayerStylesOptions) => void;
+export {};
 //# sourceMappingURL=index.d.ts.map

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;AAwB5C,eAAO,MAAM,cAAc,aAAc,OAAO,QA2I/C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAyB5C,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,aACf,OAAO,YACP,qBAAqB,SAuMhC,CAAC"}

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

@@ -1,7 +1,7 @@
 import { LinkKey } from '@graph-state/core';
 import { ResolvedVariables } from '../../layer/useResolvedLayerVariables';
 export declare const calcImagePaint: (imageVars: ResolvedVariables) => {
-    background: any;
+    background: unknown;
     backgroundRepeat: string;
     backgroundSize: any;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useImagePaint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/useImagePaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAK5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAE5E,eAAO,MAAM,cAAc,cAAe,iBAAiB;;;;CAM1D,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;CAUlD,CAAC"}
+{"version":3,"file":"useImagePaint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/layer-styles/useLayerStyles/useImagePaint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAM5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAE5E,eAAO,MAAM,cAAc,cAAe,iBAAiB;;;;CAM1D,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,OAAO;;;;CAUlD,CAAC"}

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

@@ -0,0 +1,8 @@
+import { LinkKey } from '@graph-state/core';
+export declare const useStyleRegistrar: (layerKey: LinkKey) => {
+    add(prop: string, value: any, isDynamic: boolean): void;
+    addAll(styles: Record<string, any>, isDynamic: boolean): void;
+    flush(): void;
+    getStyles(): Record<string, any>;
+};
+//# sourceMappingURL=useStyleRegistrar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1 +1 @@
-{"version":3,"file":"useClassnames.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useClassnames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAMxD,eAAO,MAAM,aAAa,aAAc,OAAO,WAAW,UAAU,kBAsBnE,CAAC"}
+{"version":3,"file":"useClassnames.d.ts","sourceRoot":"","sources":["../../../src/hooks/utils/useClassnames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQxD,eAAO,MAAM,aAAa,aAAc,OAAO,WAAW,UAAU,kBAyBnE,CAAC"}

package/dist/index.cjs.js

@@ -23,7 +23,8 @@ const InstanceContext = react.createContext({
   innerManager: null,
   props: {},
   definitions: [],
-  onChangeProps: null
+  onChangeProps: null,
+  instanceId: null
 });
 const RenderTargetContext = react.createContext(
   definition.definition.renderTarget.document
@@ -930,21 +931,22 @@ const useReadVariables = (variableKeys, customManager) => {
   return filterKeys.map((variableKey, index) => {
     var _a2, _b2;
     variableLayers[index];
-    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
-    const { _id: propertyId } = layer ?? {};
-    let collectionItemProp = void 0;
-    if (lastCollectionItem && propertyId) {
-      collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._id) === propertyId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, propertyId);
-    }
-    const instanceProp = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? null;
     const campaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(variableKey);
     const campaignProp = (campaignLayer == null ? void 0 : campaignLayer.defaultValue) ?? null;
     const areaLayer = areaManager == null ? void 0 : areaManager.resolve(variableKey);
     const areaProp = (areaLayer == null ? void 0 : areaLayer.defaultValue) ?? null;
     const globalLayer = globalManager == null ? void 0 : globalManager.resolve(variableKey);
     const globalProp = (globalLayer == null ? void 0 : globalLayer.defaultValue) ?? null;
-    const required = (layer == null ? void 0 : layer.required) ?? false;
-    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
+    const fragmentLayer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
+    const layer = fragmentLayer ?? campaignLayer ?? areaLayer ?? globalLayer ?? null;
+    const { _id: propertyId } = layer ?? {};
+    let collectionItemProp = void 0;
+    if (lastCollectionItem && propertyId) {
+      collectionItemProp = utils.isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = core.entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._id) === propertyId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, propertyId);
+    }
+    const instanceProp = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? null;
+    const required = (fragmentLayer == null ? void 0 : fragmentLayer.required) ?? (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (fragmentLayer == null ? void 0 : fragmentLayer.defaultValue) ?? (layer == null ? void 0 : layer.defaultValue) ?? null;
     const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? campaignProp ?? areaProp ?? globalProp ?? null;
     const resultValue = required ? currentValue : currentValue ?? defaultValue;
     if (definition.isVariableLink(resultValue)) {
@@ -968,7 +970,8 @@ const useReadVariables = (variableKeys, customManager) => {
 const EMPTY_RESOLVED = {
   values: {},
   cssVariableValues: {},
-  rawValues: {}
+  rawValues: {},
+  isVariable: {}
 };
 const collectVariableKeys = (layer) => {
   const keys = [];
@@ -1003,9 +1006,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
   const values = {};
   const cssVariableValues = {};
   const rawValues = {};
+  const isVariable = {};
   const resolveField = (fieldPath, value, raw) => {
     var _a2;
     rawValues[fieldPath] = raw;
+    isVariable[fieldPath] = definition.isVariableLink(value);
     if (definition.isVariableLink(value)) {
       const resolvedValue = value in resolvedByKey ? resolvedByKey[value] : value;
       values[fieldPath] = resolvedValue;
@@ -1031,7 +1036,7 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
       }
     }
   }
-  return { values, cssVariableValues, rawValues };
+  return { values, cssVariableValues, rawValues, isVariable };
 };
 const useRenderTarget = () => {
   const renderTarget = react.useContext(RenderTargetContext);
@@ -1271,10 +1276,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = react.useMemo(
     () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b, _c;
+      var _a, _b;
       return [
-        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
-        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
+        (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(0),
+        (_b = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _b.at(0)
       ];
     })) ?? [],
     [stops, stopsValue, stopsPosition]
@@ -1286,6 +1291,38 @@ const useLayerLinearGradient = (linearGradientLink) => {
     [angle, stopValues]
   );
 };
+const useStyleRegistrar = (layerKey) => {
+  const { manager } = react.useContext(FragmentContext);
+  const { instanceId } = react.useContext(InstanceContext);
+  const baseline = {};
+  const instance = {};
+  const hasInstance = !!instanceId;
+  return {
+    add(prop, value, isDynamic) {
+      (isDynamic && hasInstance ? instance : baseline)[prop] = value;
+    },
+    addAll(styles, isDynamic) {
+      if (styles) {
+        Object.assign(isDynamic && hasInstance ? instance : baseline, styles);
+      }
+    },
+    flush() {
+      var _a, _b, _c, _d;
+      (_b = (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.addBaselineStyle) == null ? void 0 : _b.call(_a, layerKey, baseline);
+      if (instanceId && Object.keys(instance).length > 0) {
+        (_d = (_c = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _c.addInstanceStyle) == null ? void 0 : _d.call(
+          _c,
+          layerKey,
+          instanceId,
+          instance
+        );
+      }
+    },
+    getStyles() {
+      return { ...baseline, ...instance };
+    }
+  };
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.definition.sizing.Fixed) return utils.toPx(value);
@@ -1517,7 +1554,7 @@ const useLayerPosition = (layerKey) => {
 const calcImagePaint = (imageVars) => {
   var _a, _b;
   return {
-    background: imageVars.cssVariableValues.src,
+    background: transformCssValue(imageVars.values.src),
     backgroundRepeat: "no-repeat",
     backgroundSize: (_b = (_a = imageVars.values.scale) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)
   };
@@ -1535,16 +1572,16 @@ const useImagePaint = (imageLinkKey) => {
 };
 const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
   const fillType = paintVars.values.type;
-  const cssSolidFill = paintVars.cssVariableValues.solid;
-  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  const solidFill = paintVars.values.solid;
+  const imageSize = imageSizeVars.values.imageSize;
   if (fillType === definition.definition.paintMode.Solid) {
-    return { background: cssSolidFill };
+    return { background: solidFill };
   }
   if (fillType === definition.definition.paintMode.Image) {
     const image = calcImagePaint(imageVars);
     return {
       ...image,
-      backgroundSize: cssImageSize ?? image.backgroundSize
+      backgroundSize: imageSize ?? image.backgroundSize
     };
   }
   if (fillType === definition.definition.paintMode.LinearGradient) {
@@ -1662,7 +1699,7 @@ const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, pain
     };
   }
   if (borderPaint.type === definition.definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solidCssValue);
+    return calcBorderSides(type, width, borderPaint.solid);
   }
   return { border: null };
 };
@@ -1807,7 +1844,9 @@ const useLayerFlex = (layerKey) => {
   };
 };
 const SKIP_OVERRIDE = { skipOverrideCheck: true };
-const useLayerStyles = (layerKey) => {
+const useLayerStyles = (layerKey, options) => {
+  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
+  const reg = useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = react.useContext(FragmentContext);
@@ -1906,24 +1945,47 @@ const useLayerStyles = (layerKey) => {
     const layout = calcLayerLayout(vars);
     const textStyles = calcLayerTextStyles(vars);
     const layerFlex = calcLayerFlex(vars, parentVars);
-    return {
-      ...background,
-      ...border,
-      ...position,
-      opacity: vars.values.opacity,
-      overflow: vars.values.overflow,
-      rotate: utils.isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
-      "border-radius": utils.isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
-      "white-space": vars.values.whiteSpace,
-      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
-      ...layout,
-      ...layerSize,
-      ...textStyles,
-      ...layerFlex,
-      display
-    };
+    reg.add("opacity", vars.values.opacity, vars.isVariable.opacity);
+    reg.add("overflow", vars.values.overflow, vars.isVariable.overflow);
+    reg.add(
+      "border-radius",
+      utils.isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      vars.isVariable.borderRadius
+    );
+    reg.add("white-space", vars.values.whiteSpace, vars.isVariable.whiteSpace);
+    reg.add(
+      "rotate",
+      utils.isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      vars.isVariable.rotate
+    );
+    reg.add(
+      "z-index",
+      vars.values.zIndex !== -1 ? vars.values.zIndex : null,
+      vars.isVariable.zIndex
+    );
+    const bgDynamic = paintVars.isVariable.solid || paintVars.isVariable.type || imageVars.isVariable.src;
+    reg.addAll(background, bgDynamic);
+    const borderDynamic = borderPaintVars.isVariable.solid || borderVars.isVariable.type;
+    reg.addAll(border, borderDynamic);
+    const posDynamic = vars.isVariable.width || vars.isVariable.height || vars.isVariable.position || vars.isVariable.widthType || vars.isVariable.heightType;
+    reg.addAll(position, posDynamic);
+    const layoutDynamic = vars.isVariable.layerMode || vars.isVariable.layerDirection || vars.isVariable.layerDistribute || vars.isVariable.layerAlign || vars.isVariable.padding || vars.isVariable.layerGap;
+    reg.addAll(layout, layoutDynamic);
+    const flexDynamic = vars.isVariable.widthType || vars.isVariable.heightType || parentVars.isVariable.layerDirection;
+    reg.addAll(layerFlex, flexDynamic);
+    const sizeDynamic = vars.isVariable.minWidth || vars.isVariable.maxWidth || vars.isVariable.minHeight || vars.isVariable.maxHeight;
+    reg.addAll(layerSize, sizeDynamic);
+    const textDynamic = vars.isVariable["attributes.color"];
+    reg.addAll(textStyles, textDynamic);
+    reg.add(
+      "display",
+      display,
+      vars.isVariable.visible || vars.isVariable.layerMode
+    );
+    if (collectStyle) {
+      reg.flush();
+    }
   } catch (e) {
-    return {};
   }
 };
 const MAX_NESTING_DEPTH = 5;
@@ -2030,6 +2092,7 @@ const useHash = (layerKey, manager) => {
 };
 const useClassnames = (layerKey, manager) => {
   const hash = useHash(layerKey, manager);
+  const { instanceId } = react.useContext(InstanceContext);
   const [classnames] = useLayerValue(layerKey, "classnames", { manager });
   const values = useLayersValue(classnames, "value");
   const enables = useLayersValue(classnames, "enabled");
@@ -2041,40 +2104,13 @@ const useClassnames = (layerKey, manager) => {
     [values, enables]
   );
   if (!layerKey || !manager) return null;
-  let base = [hash];
+  const instanceHash = instanceId ? utils.hashGenerator(instanceId) : null;
+  let base = [hash, instanceHash].filter(Boolean);
   if (classnames == null ? void 0 : classnames.length) {
     base = [...base, ...list];
   }
   return base.join(" ");
 };
-const useStyleSheet = (manager) => {
-  var _a, _b;
-  const addLayerStyle = react.useCallback(
-    (layerKey, styles, layer) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
-        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
-      }
-    },
-    [manager]
-  );
-  const addCssChunk = react.useCallback(
-    (id) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
-        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
-      }
-      return utils.noop;
-    },
-    [manager]
-  );
-  return {
-    addLayerStyle,
-    addCssChunk,
-    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? utils.noop,
-    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
-  };
-};
 const useGlobalManager = (globalManager) => {
   var _a;
   const currentGlobalManager = react.useContext(GlobalManagerContext);
@@ -2257,20 +2293,15 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   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
@@ -2297,32 +2328,22 @@ const Text = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: content }
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } })
   ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = react.useContext(FragmentContext);
   const layer = fragmentManager.entityOfKey(layerKey);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   const children = useLayerChildren(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
   const link = useLayerLink(layerKey);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
   return {
     Tag: (link == null ? void 0 : link.isLink) ? (options == null ? void 0 : options.FrameTag) ?? "a" : (options == null ? void 0 : options.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
     classnames,
-    styles,
     children,
     events,
     linkProps: link.linkProps
@@ -2659,12 +2680,15 @@ const CollectionItem = ({
   FrameElement,
   children,
   sourceDefinition,
+  index,
   ...restProps
 }) => {
-  var _a;
+  var _a, _b;
   core.keyOfEntity(layer);
   const definitionId = ((_a = core.entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
+  const itemId = ((_b = core.entityOfKey(layer)) == null ? void 0 : _b._id) ?? index;
+  const collectionInstanceId = `ci:${itemId}`;
   const inputProps = {
     [definitionId]: value
   };
@@ -2690,17 +2714,31 @@ const CollectionItem = ({
         value: expandedProps,
         manager
       },
-      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        InstanceContext.Provider,
         {
-          style: {
-            display: "contents",
-            ...cssVars
+          value: {
+            layerKey: null,
+            parentManager: null,
+            innerManager: null,
+            props: {},
+            definitions: [],
+            onChangeProps: null,
+            instanceId: collectionInstanceId
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FrameElement, { ...restProps, layerKey: child })
-        },
-        child
-      ))
+          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
+          ))
+        }
+      )
     }
   );
 };
@@ -2742,6 +2780,7 @@ const Collection = ({
           children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsxRuntime.jsx(
             CollectionItem,
             {
+              index,
               layer: itemValue,
               manager: fragmentManager,
               source,
@@ -2773,11 +2812,13 @@ const Frame = ({
   pauseInteractions,
   ...restProps
 }) => {
-  const { styles, classnames, children, type, events, linkProps, Tag } = useFrame(layerKey, {
-    ...restProps,
-    pauseInteractions
-  });
-  const resultStyles = inputStyles ?? styles;
+  const { classnames, children, type, events, linkProps, Tag } = useFrame(
+    layerKey,
+    {
+      ...restProps,
+      pauseInteractions
+    }
+  );
   const isMounted = useMounted();
   if (isMounted && hidden) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", {});
@@ -2800,10 +2841,7 @@ const Frame = ({
     {
       className: classnames,
       "data-key": layerKey,
-      style: {
-        ...resultStyles,
-        display: hidden ? "none" : resultStyles.display
-      },
+      style: inputStyles ? { ...inputStyles, display: hidden ? "none" : inputStyles.display } : hidden ? { display: "none" } : restProps == null ? void 0 : restProps.style,
       ...events,
       ...linkProps,
       ...restProps,
@@ -2811,6 +2849,34 @@ const Frame = ({
     }
   );
 };
+const useStyleSheet = (manager) => {
+  var _a, _b;
+  const addLayerStyle = react.useCallback(
+    (layerKey, styles, layer) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
+        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
+      }
+    },
+    [manager]
+  );
+  const addCssChunk = react.useCallback(
+    (id) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
+        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
+      }
+      return utils.noop;
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle,
+    addCssChunk,
+    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? utils.noop,
+    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? utils.noop
+  };
+};
 const useCssChunk = (linkKey) => {
   const { manager } = react.useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
@@ -3277,6 +3343,10 @@ const InstanceInitial = ({
   var _a;
   const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
   const link = useLayerLink(instanceProps.layerKey);
+  const parentInstanceId = react.useContext(InstanceContext).instanceId;
+  const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
+  const instanceIdRef = react.useRef(isTopInstance ? crypto.randomUUID() : null);
+  const instanceId = parentInstanceId ? `${parentInstanceId}:${instanceProps.layerKey}` : instanceIdRef.current ?? instanceProps.layerKey;
   const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
   const {
     fragmentId,
@@ -3315,7 +3385,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       props: expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     }),
     [
       instanceProps.layerKey,
@@ -3323,7 +3394,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.es.js

@@ -21,7 +21,8 @@ const InstanceContext = createContext({
   innerManager: null,
   props: {},
   definitions: [],
-  onChangeProps: null
+  onChangeProps: null,
+  instanceId: null
 });
 const RenderTargetContext = createContext(
   definition.renderTarget.document
@@ -928,21 +929,22 @@ const useReadVariables = (variableKeys, customManager) => {
   return filterKeys.map((variableKey, index) => {
     var _a2, _b2;
     variableLayers[index];
-    const layer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
-    const { _id: propertyId } = layer ?? {};
-    let collectionItemProp = void 0;
-    if (lastCollectionItem && propertyId) {
-      collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._id) === propertyId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, propertyId);
-    }
-    const instanceProp = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? null;
     const campaignLayer = campaignManager == null ? void 0 : campaignManager.resolve(variableKey);
     const campaignProp = (campaignLayer == null ? void 0 : campaignLayer.defaultValue) ?? null;
     const areaLayer = areaManager == null ? void 0 : areaManager.resolve(variableKey);
     const areaProp = (areaLayer == null ? void 0 : areaLayer.defaultValue) ?? null;
     const globalLayer = globalManager == null ? void 0 : globalManager.resolve(variableKey);
     const globalProp = (globalLayer == null ? void 0 : globalLayer.defaultValue) ?? null;
-    const required = (layer == null ? void 0 : layer.required) ?? false;
-    const defaultValue = (layer == null ? void 0 : layer.defaultValue) ?? null;
+    const fragmentLayer = ((_a2 = getNormalizeLayer(variableKey, resultManager)) == null ? void 0 : _a2.layer) ?? null;
+    const layer = fragmentLayer ?? campaignLayer ?? areaLayer ?? globalLayer ?? null;
+    const { _id: propertyId } = layer ?? {};
+    let collectionItemProp = void 0;
+    if (lastCollectionItem && propertyId) {
+      collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_b2 = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _b2._id) === propertyId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, propertyId);
+    }
+    const instanceProp = (instanceProps == null ? void 0 : instanceProps[propertyId]) ?? null;
+    const required = (fragmentLayer == null ? void 0 : fragmentLayer.required) ?? (layer == null ? void 0 : layer.required) ?? false;
+    const defaultValue = (fragmentLayer == null ? void 0 : fragmentLayer.defaultValue) ?? (layer == null ? void 0 : layer.defaultValue) ?? null;
     const currentValue = collectionItemProp ?? (variableKey === instanceProp ? null : instanceProp) ?? campaignProp ?? areaProp ?? globalProp ?? null;
     const resultValue = required ? currentValue : currentValue ?? defaultValue;
     if (isVariableLink$1(resultValue)) {
@@ -966,7 +968,8 @@ const useReadVariables = (variableKeys, customManager) => {
 const EMPTY_RESOLVED = {
   values: {},
   cssVariableValues: {},
-  rawValues: {}
+  rawValues: {},
+  isVariable: {}
 };
 const collectVariableKeys = (layer) => {
   const keys = [];
@@ -1001,9 +1004,11 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
   const values = {};
   const cssVariableValues = {};
   const rawValues = {};
+  const isVariable = {};
   const resolveField = (fieldPath, value, raw) => {
     var _a2;
     rawValues[fieldPath] = raw;
+    isVariable[fieldPath] = isVariableLink$1(value);
     if (isVariableLink$1(value)) {
       const resolvedValue = value in resolvedByKey ? resolvedByKey[value] : value;
       values[fieldPath] = resolvedValue;
@@ -1029,7 +1034,7 @@ const useResolvedLayerVariables = (layer, rawLayer, _customScopes) => {
       }
     }
   }
-  return { values, cssVariableValues, rawValues };
+  return { values, cssVariableValues, rawValues, isVariable };
 };
 const useRenderTarget = () => {
   const renderTarget = useContext(RenderTargetContext);
@@ -1269,10 +1274,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = useMemo(
     () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b, _c;
+      var _a, _b;
       return [
-        (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
-        (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
+        (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(0),
+        (_b = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _b.at(0)
       ];
     })) ?? [],
     [stops, stopsValue, stopsPosition]
@@ -1284,6 +1289,38 @@ const useLayerLinearGradient = (linearGradientLink) => {
     [angle, stopValues]
   );
 };
+const useStyleRegistrar = (layerKey) => {
+  const { manager } = useContext(FragmentContext);
+  const { instanceId } = useContext(InstanceContext);
+  const baseline = {};
+  const instance = {};
+  const hasInstance = !!instanceId;
+  return {
+    add(prop, value, isDynamic) {
+      (isDynamic && hasInstance ? instance : baseline)[prop] = value;
+    },
+    addAll(styles, isDynamic) {
+      if (styles) {
+        Object.assign(isDynamic && hasInstance ? instance : baseline, styles);
+      }
+    },
+    flush() {
+      var _a, _b, _c, _d;
+      (_b = (_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.addBaselineStyle) == null ? void 0 : _b.call(_a, layerKey, baseline);
+      if (instanceId && Object.keys(instance).length > 0) {
+        (_d = (_c = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _c.addInstanceStyle) == null ? void 0 : _d.call(
+          _c,
+          layerKey,
+          instanceId,
+          instance
+        );
+      }
+    },
+    getStyles() {
+      return { ...baseline, ...instance };
+    }
+  };
+};
 const processOptionalSize = (value, type) => {
   if (value === -1) return "";
   if (type === definition.sizing.Fixed) return toPx(value);
@@ -1515,7 +1552,7 @@ const useLayerPosition = (layerKey) => {
 const calcImagePaint = (imageVars) => {
   var _a, _b;
   return {
-    background: imageVars.cssVariableValues.src,
+    background: transformCssValue(imageVars.values.src),
     backgroundRepeat: "no-repeat",
     backgroundSize: (_b = (_a = imageVars.values.scale) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)
   };
@@ -1533,16 +1570,16 @@ const useImagePaint = (imageLinkKey) => {
 };
 const calcLayerBackground = (paintVars, imageVars, imageSizeVars, linearGradient) => {
   const fillType = paintVars.values.type;
-  const cssSolidFill = paintVars.cssVariableValues.solid;
-  const cssImageSize = imageSizeVars.cssVariableValues.imageSize;
+  const solidFill = paintVars.values.solid;
+  const imageSize = imageSizeVars.values.imageSize;
   if (fillType === definition.paintMode.Solid) {
-    return { background: cssSolidFill };
+    return { background: solidFill };
   }
   if (fillType === definition.paintMode.Image) {
     const image = calcImagePaint(imageVars);
     return {
       ...image,
-      backgroundSize: cssImageSize ?? image.backgroundSize
+      backgroundSize: imageSize ?? image.backgroundSize
     };
   }
   if (fillType === definition.paintMode.LinearGradient) {
@@ -1660,7 +1697,7 @@ const calcLayerBorder = (borderVars, borderPaintVars, borderLinearGradient, pain
     };
   }
   if (borderPaint.type === definition.paintMode.Solid) {
-    return calcBorderSides(type, width, borderPaint.solidCssValue);
+    return calcBorderSides(type, width, borderPaint.solid);
   }
   return { border: null };
 };
@@ -1805,7 +1842,9 @@ const useLayerFlex = (layerKey) => {
   };
 };
 const SKIP_OVERRIDE = { skipOverrideCheck: true };
-const useLayerStyles = (layerKey) => {
+const useLayerStyles = (layerKey, options) => {
+  const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
+  const reg = useStyleRegistrar(layerKey);
   try {
     if (!layerKey) throw new Error("Empty layer key");
     const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1904,24 +1943,47 @@ const useLayerStyles = (layerKey) => {
     const layout = calcLayerLayout(vars);
     const textStyles = calcLayerTextStyles(vars);
     const layerFlex = calcLayerFlex(vars, parentVars);
-    return {
-      ...background,
-      ...border,
-      ...position,
-      opacity: vars.values.opacity,
-      overflow: vars.values.overflow,
-      rotate: isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
-      "border-radius": isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
-      "white-space": vars.values.whiteSpace,
-      "z-index": vars.values.zIndex !== -1 ? vars.values.zIndex : null,
-      ...layout,
-      ...layerSize,
-      ...textStyles,
-      ...layerFlex,
-      display
-    };
+    reg.add("opacity", vars.values.opacity, vars.isVariable.opacity);
+    reg.add("overflow", vars.values.overflow, vars.isVariable.overflow);
+    reg.add(
+      "border-radius",
+      isValue(vars.rawValues.borderRadius) ? vars.values.borderRadius : null,
+      vars.isVariable.borderRadius
+    );
+    reg.add("white-space", vars.values.whiteSpace, vars.isVariable.whiteSpace);
+    reg.add(
+      "rotate",
+      isValue(vars.values.rotate) ? `${vars.values.rotate}deg` : null,
+      vars.isVariable.rotate
+    );
+    reg.add(
+      "z-index",
+      vars.values.zIndex !== -1 ? vars.values.zIndex : null,
+      vars.isVariable.zIndex
+    );
+    const bgDynamic = paintVars.isVariable.solid || paintVars.isVariable.type || imageVars.isVariable.src;
+    reg.addAll(background, bgDynamic);
+    const borderDynamic = borderPaintVars.isVariable.solid || borderVars.isVariable.type;
+    reg.addAll(border, borderDynamic);
+    const posDynamic = vars.isVariable.width || vars.isVariable.height || vars.isVariable.position || vars.isVariable.widthType || vars.isVariable.heightType;
+    reg.addAll(position, posDynamic);
+    const layoutDynamic = vars.isVariable.layerMode || vars.isVariable.layerDirection || vars.isVariable.layerDistribute || vars.isVariable.layerAlign || vars.isVariable.padding || vars.isVariable.layerGap;
+    reg.addAll(layout, layoutDynamic);
+    const flexDynamic = vars.isVariable.widthType || vars.isVariable.heightType || parentVars.isVariable.layerDirection;
+    reg.addAll(layerFlex, flexDynamic);
+    const sizeDynamic = vars.isVariable.minWidth || vars.isVariable.maxWidth || vars.isVariable.minHeight || vars.isVariable.maxHeight;
+    reg.addAll(layerSize, sizeDynamic);
+    const textDynamic = vars.isVariable["attributes.color"];
+    reg.addAll(textStyles, textDynamic);
+    reg.add(
+      "display",
+      display,
+      vars.isVariable.visible || vars.isVariable.layerMode
+    );
+    if (collectStyle) {
+      reg.flush();
+    }
   } catch (e) {
-    return {};
   }
 };
 const MAX_NESTING_DEPTH = 5;
@@ -2028,6 +2090,7 @@ const useHash = (layerKey, manager) => {
 };
 const useClassnames = (layerKey, manager) => {
   const hash = useHash(layerKey, manager);
+  const { instanceId } = useContext(InstanceContext);
   const [classnames] = useLayerValue(layerKey, "classnames", { manager });
   const values = useLayersValue(classnames, "value");
   const enables = useLayersValue(classnames, "enabled");
@@ -2039,40 +2102,13 @@ const useClassnames = (layerKey, manager) => {
     [values, enables]
   );
   if (!layerKey || !manager) return null;
-  let base = [hash];
+  const instanceHash = instanceId ? hashGenerator$1(instanceId) : null;
+  let base = [hash, instanceHash].filter(Boolean);
   if (classnames == null ? void 0 : classnames.length) {
     base = [...base, ...list];
   }
   return base.join(" ");
 };
-const useStyleSheet = (manager) => {
-  var _a, _b;
-  const addLayerStyle = useCallback(
-    (layerKey, styles, layer) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
-        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
-      }
-    },
-    [manager]
-  );
-  const addCssChunk = useCallback(
-    (id) => {
-      var _a2, _b2;
-      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
-        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
-      }
-      return noop;
-    },
-    [manager]
-  );
-  return {
-    addLayerStyle,
-    addCssChunk,
-    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? noop,
-    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
-  };
-};
 const useGlobalManager = (globalManager) => {
   var _a;
   const currentGlobalManager = useContext(GlobalManagerContext);
@@ -2255,20 +2291,15 @@ const useTextHighlight = (layerKey, options) => {
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   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
@@ -2295,32 +2326,22 @@ const Text = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: content }
-      }
-    )
+    /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: content } })
   ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
   const layer = fragmentManager.entityOfKey(layerKey);
-  const styles = useLayerStyles(layerKey);
+  useLayerStyles(layerKey, { collectStyle });
   const children = useLayerChildren(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
-  const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
   const link = useLayerLink(layerKey);
-  if (collectStyle) {
-    addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
-  }
   return {
     Tag: (link == null ? void 0 : link.isLink) ? (options == null ? void 0 : options.FrameTag) ?? "a" : (options == null ? void 0 : options.FrameTag) ?? "div",
     type: layer == null ? void 0 : layer._type,
     classnames,
-    styles,
     children,
     events,
     linkProps: link.linkProps
@@ -2657,12 +2678,15 @@ const CollectionItem = ({
   FrameElement,
   children,
   sourceDefinition,
+  index,
   ...restProps
 }) => {
-  var _a;
+  var _a, _b;
   keyOfEntity(layer);
   const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
   const value = layer.value ?? layer;
+  const itemId = ((_b = entityOfKey(layer)) == null ? void 0 : _b._id) ?? index;
+  const collectionInstanceId = `ci:${itemId}`;
   const inputProps = {
     [definitionId]: value
   };
@@ -2688,17 +2712,31 @@ const CollectionItem = ({
         value: expandedProps,
         manager
       },
-      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
-        "div",
+      children: /* @__PURE__ */ jsx(
+        InstanceContext.Provider,
         {
-          style: {
-            display: "contents",
-            ...cssVars
+          value: {
+            layerKey: null,
+            parentManager: null,
+            innerManager: null,
+            props: {},
+            definitions: [],
+            onChangeProps: null,
+            instanceId: collectionInstanceId
           },
-          children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
-        },
-        child
-      ))
+          children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "contents",
+                ...cssVars
+              },
+              children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
+            },
+            child
+          ))
+        }
+      )
     }
   );
 };
@@ -2740,6 +2778,7 @@ const Collection = ({
           children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsx(
             CollectionItem,
             {
+              index,
               layer: itemValue,
               manager: fragmentManager,
               source,
@@ -2771,11 +2810,13 @@ const Frame = ({
   pauseInteractions,
   ...restProps
 }) => {
-  const { styles, classnames, children, type, events, linkProps, Tag } = useFrame(layerKey, {
-    ...restProps,
-    pauseInteractions
-  });
-  const resultStyles = inputStyles ?? styles;
+  const { classnames, children, type, events, linkProps, Tag } = useFrame(
+    layerKey,
+    {
+      ...restProps,
+      pauseInteractions
+    }
+  );
   const isMounted = useMounted();
   if (isMounted && hidden) {
     return /* @__PURE__ */ jsx("div", {});
@@ -2798,10 +2839,7 @@ const Frame = ({
     {
       className: classnames,
       "data-key": layerKey,
-      style: {
-        ...resultStyles,
-        display: hidden ? "none" : resultStyles.display
-      },
+      style: inputStyles ? { ...inputStyles, display: hidden ? "none" : inputStyles.display } : hidden ? { display: "none" } : restProps == null ? void 0 : restProps.style,
       ...events,
       ...linkProps,
       ...restProps,
@@ -2809,6 +2847,34 @@ const Frame = ({
     }
   );
 };
+const useStyleSheet = (manager) => {
+  var _a, _b;
+  const addLayerStyle = useCallback(
+    (layerKey, styles, layer) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addStyle" in (manager == null ? void 0 : manager.$styleSheet)) {
+        (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addStyle) == null ? void 0 : _b2.call(_a2, layerKey, styles, layer);
+      }
+    },
+    [manager]
+  );
+  const addCssChunk = useCallback(
+    (id) => {
+      var _a2, _b2;
+      if (!!(manager == null ? void 0 : manager.$styleSheet) && manager && "addCssChunk" in (manager == null ? void 0 : manager.$styleSheet)) {
+        return (_b2 = (_a2 = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a2.addCssChunk) == null ? void 0 : _b2.call(_a2, id);
+      }
+      return noop;
+    },
+    [manager]
+  );
+  return {
+    addLayerStyle,
+    addCssChunk,
+    mount: ((_a = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _a.mount) ?? noop,
+    unmount: ((_b = manager == null ? void 0 : manager.$styleSheet) == null ? void 0 : _b.unmount) ?? noop
+  };
+};
 const useCssChunk = (linkKey) => {
   const { manager } = useContext(FragmentContext);
   const [chunkId] = useLayerValue(linkKey, "chunkId", { manager });
@@ -3275,6 +3341,10 @@ const InstanceInitial = ({
   var _a;
   const ssr = ((_a = instanceProps == null ? void 0 : instanceProps.options) == null ? void 0 : _a.ssr) ?? true;
   const link = useLayerLink(instanceProps.layerKey);
+  const parentInstanceId = useContext(InstanceContext).instanceId;
+  const isTopInstance = !(instanceProps == null ? void 0 : instanceProps.layerKey);
+  const instanceIdRef = useRef(isTopInstance ? crypto.randomUUID() : null);
+  const instanceId = parentInstanceId ? `${parentInstanceId}:${instanceProps.layerKey}` : instanceIdRef.current ?? instanceProps.layerKey;
   const Tag = (link == null ? void 0 : link.isLink) ? inputTag ?? "a" : inputTag ?? "div";
   const {
     fragmentId,
@@ -3313,7 +3383,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       props: expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     }),
     [
       instanceProps.layerKey,
@@ -3321,7 +3392,8 @@ const InstanceInitial = ({
       innerManager,
       parentManager,
       expandedProps,
-      onChangeProps
+      onChangeProps,
+      instanceId
     ]
   );
   return /* @__PURE__ */ jsx(InstanceContext.Provider, { value: instanceContextValue, children: parentManager ? /* @__PURE__ */ jsx(

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;AAKlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiD1C,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,CAkD1C,CAAC"}

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

@@ -4,7 +4,6 @@ export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOption
     Tag: string | import('react').ComponentClass<any, any> | import('react').FunctionComponent<any>;
     type: any;
     classnames: string | null;
-    styles: any;
     children: any;
     events: {
         onClick?: undefined;

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;;;;;;;;;;;;;;;;;;;;;CA8BzE,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;AAMlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAqD9C,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;AAOlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAoE9C,CAAC"}

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

@@ -4,7 +4,6 @@ export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOption
     Tag: string | import('react').ComponentClass<any, any> | import('react').FunctionComponent<any>;
     type: any;
     classnames: string | null;
-    styles: any;
     children: any;
     events: {
         onClick?: undefined;

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;;;;;;;;;;;;;;;;;;;;;CAyBzE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/nodes/Frame/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAyB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAM5C,OAAO,EAAY,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,eAAe;IACjD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAsDhC,CAAC"}
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/nodes/Frame/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAyB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAM5C,OAAO,EAAY,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,eAAe;IACjD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA0DhC,CAAC"}

package/dist/nodes/Frame/hooks/useFrame.d.ts

@@ -9,7 +9,6 @@ export declare const useFrame: (layerKey: LinkKey, options?: UseFrameOptions) =>
     Tag: string | import('react').ComponentClass<any, any> | import('react').FunctionComponent<any>;
     type: any;
     classnames: string | null;
-    styles: any;
     children: any;
     events: {
         onClick?: undefined;

package/dist/nodes/Frame/hooks/useFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFrame.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Frame/hooks/useFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAKhD,OAAO,EAEL,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,eAAgB,SAAQ,2BAA2B;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;;CAwBpE,CAAC"}
+{"version":3,"file":"useFrame.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Frame/hooks/useFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAIhD,OAAO,EAEL,2BAA2B,EAC5B,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,eAAgB,SAAQ,2BAA2B;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,aAAc,OAAO,YAAY,eAAe;;;;;;;;;;;;;;;;;CAkBpE,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,EAKZ,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;AAkGD,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,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"}

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

@@ -2,7 +2,7 @@ interface UseInstanceOptions extends UseLayerInteractionsOptions {
 }
 export declare const useInstance: (instanceProps: UseInstanceOptions) => {
     classnames: string | null;
-    styles: any;
+    styles: void;
     events: {
         onClick?: undefined;
     } | {

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

@@ -1,5 +1,6 @@
 import { LinkKey } from '@graph-state/core';
 import { ComponentPropsWithoutRef, ElementType, FC } from 'react';
+import { UseTextAttributes } from './hooks/useTextAttributes';
 interface TextProps extends ComponentPropsWithoutRef<"div">, UseTextAttributes {
     Tag?: string | ElementType;
     layerKey: LinkKey;

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,CA0B9B,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;AAClE,OAAO,EAAqB,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEjF,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,CAuB9B,CAAC"}

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

@@ -9,7 +9,6 @@ export declare const useTextAttributes: (layerKey: LinkKey, options?: UseTextAtt
     } | {
         onClick: () => void;
     };
-    styles: any;
     classnames: string | null;
     content: string;
     highlight: {

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;AAU5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;;;;;CAyB5B,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;AAS5C,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,aAClB,OAAO,YACP,iBAAiB;;;;;;;;;;;;CAmB5B,CAAC"}

package/dist/providers/InstanceContext.d.ts

@@ -5,5 +5,6 @@ export declare const InstanceContext: import('react').Context<{
     props: {};
     definitions: never[];
     onChangeProps: ((variableId: string, value: unknown) => void) | null;
+    instanceId: string | null;
 }>;
 //# sourceMappingURL=InstanceContext.d.ts.map

package/dist/providers/InstanceContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstanceContext.d.ts","sourceRoot":"","sources":["../../src/providers/InstanceContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;mBAMH,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;EAC5E,CAAC"}
+{"version":3,"file":"InstanceContext.d.ts","sourceRoot":"","sources":["../../src/providers/InstanceContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;mBAMH,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;gBACxD,MAAM,GAAG,IAAI;EACjC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.6.3",
+  "version": "1.7.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.4.3",
+    "@fragmentsx/client-core": "0.5.0",
     "@fragmentsx/definition": "0.2.2",
     "@fragmentsx/utils": "0.2.0"
   },