@fragmentsx/render-react 1.2.3 → 1.2.5

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef, Suspense } from "react";
+import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, Suspense } from "react";
 import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField } from "@fragmentsx/definition";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useGraph, useGraphStack } from "@graph-state/react";
@@ -106,6 +106,9 @@ const useNormalizeLayers = (layerKeys, manager, options) => {
     (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
   );
 };
+function useForceUpdate() {
+  return useReducer(() => ({}), {});
+}
 const extractVariableValue = (input, variableId) => {
   if (isObject(input)) {
     if (variableId in input) {
@@ -137,6 +140,15 @@ function deepMerge(a, b) {
 const useReadVariable = (variableKey, customScopes) => {
   const contextScopes = useContext(ScopeContext);
   const scopes = customScopes ?? contextScopes;
+  const unmountAbortController = useRef(new AbortController());
+  const [dep, forceUpdate] = useForceUpdate();
+  useEffect(
+    () => () => {
+      var _a;
+      (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
+    },
+    []
+  );
   const extractVariableDefaultValue = (manager, variableEntity) => {
     const variableLayer = manager.resolve(variableEntity);
     if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.variableType.Object)
@@ -182,7 +194,7 @@ const useReadVariable = (variableKey, customScopes) => {
     return variableLayer;
   };
   const readVariable = (variableKey2) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
     if (!isVariableLink$1(variableKey2)) {
       return {
@@ -205,7 +217,10 @@ const useReadVariable = (variableKey, customScopes) => {
       instanceScope == null ? void 0 : instanceScope.documentManager,
       variableKey2
     );
-    let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
+    (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
+      signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
+    });
+    let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
     if (Array.isArray(instanceProp)) {
       instanceProp = instanceProp.map(
         (rawProp, index) => {
@@ -222,7 +237,7 @@ const useReadVariable = (variableKey, customScopes) => {
       lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
       lastCollectionItem == null ? void 0 : lastCollectionItem.value
     );
-    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_c = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _c._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
+    const collectionItemProp = isPrimitive(lastCollectionItem == null ? void 0 : lastCollectionItem.value) && ((_e = entityOfKey(lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition)) == null ? void 0 : _e._id) === variableId ? lastCollectionItem == null ? void 0 : lastCollectionItem.value : extractVariableValue(lastCollectionItem == null ? void 0 : lastCollectionItem.value, variableId);
     const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
     const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
     const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
@@ -502,7 +517,8 @@ function makeSnapshot(globalManager, targetFragmentId) {
   };
 }
 const isInheritField = (manager, layerEntity, field) => {
-  const layer = manager.resolve(layerEntity);
+  var _a;
+  const layer = (_a = manager == null ? void 0 : manager.resolve) == null ? void 0 : _a.call(manager, layerEntity);
   if (layer) {
     const overrider = getOverrider(manager, layer);
     if ((overrider == null ? void 0 : overrider._id) === (layer == null ? void 0 : layer._id)) return false;
@@ -972,11 +988,13 @@ const getLayerCssVariable = (manager, inputValue) => {
   };
 };
 const useLayerCssVariable = (inputValue) => {
+  var _a;
   const { manager } = useContext(FragmentContext);
   const isVariable = isVariableLink$1(inputValue);
   const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
+  const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = entityOfKey(inputValue)) == null ? void 0 : _a._id);
   return {
-    value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
+    value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
   };
 };
 const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1355,10 +1373,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
   const stopsPosition = useLayersValue(stops, "position");
   const stopValues = useMemo(
     () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
-      var _a, _b;
+      var _a, _b, _c;
       return [
-        (_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)
+        (_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)
       ];
     })) ?? [],
     [stops, stopsValue, stopsPosition]
@@ -1458,7 +1476,7 @@ const useLayerBorder = (layerKey) => {
   if (borderPaint.type === definition.paintMode.LinearGradient) {
     let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
     if (paint.type === definition.paintMode.LinearGradient) {
-      background = `${linearGradient} padding-box, ${borderLinearGradient} border-box`;
+      background = `${linearGradient["background-image"]} padding-box, ${borderLinearGradient["background-image"]} border-box`;
     }
     if (paint.type === definition.paintMode.None) {
       background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1499,25 +1517,18 @@ const useLayerLayout = (layerKey) => {
   const [padding] = useLayerValue(layerKey, "padding", fragmentManager);
   const [gap] = useLayerValue(layerKey, "layerGap", fragmentManager);
   const isFlex = layerModeValue === definition.layerMode.flex;
-  return useMemo(
-    () => ({
-      display: isFlex ? "flex" : null,
-      gap: toPx(gap),
-      flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
-      justifyContent: isFlex ? layerDistribute : null,
-      flexFlow: isFlex ? layerDirectionValue === definition.layerDirection.vertical ? "column" : "row" : null,
-      alignItems: isFlex ? layerAlign : null,
-      padding: isFlex ? padding : null
-    }),
-    [
-      isFlex,
-      layerWrap,
-      layerDistribute,
-      layerDirectionValue,
-      layerAlign,
-      padding
-    ]
-  );
+  const baseFlow = layerDirectionValue === definition.layerDirection.vertical ? "column" : "row";
+  const wrap = isFlex ? layerWrap ? "wrap" : null : null;
+  const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
+  return {
+    display: isFlex ? "flex" : null,
+    gap: toPx(gap),
+    flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
+    justifyContent: isFlex ? layerDistribute : null,
+    flexFlow,
+    alignItems: isFlex ? layerAlign : null,
+    padding: isFlex ? padding : null
+  };
 };
 const useLayerTextStyles = (layerKey) => {
   const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1560,7 +1571,7 @@ const useLayerStyles = (layerKey) => {
     const layout = useLayerLayout(layerKey);
     const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
     const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
-    const [borderRadius] = useLayerValue(
+    const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
       layerKey,
       "borderRadius",
       fragmentManager
@@ -1570,13 +1581,13 @@ const useLayerStyles = (layerKey) => {
     const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
     return {
       // ...(props ?? {}),
-      ...border,
       ...background,
+      ...border,
       ...position,
       opacity,
       overflow,
       rotate: isValue(rotate) ? `${rotate}deg` : null,
-      "border-radius": borderRadius,
+      "border-radius": isValue(rawBorderRadius) ? borderRadius : null,
       "white-space": whiteSpace,
       "z-index": zIndex !== -1 ? zIndex : null,
       ...layout,
@@ -1629,6 +1640,12 @@ const useTextContent = (layerKey, manager) => {
       readVariable(variable.variableKey).value ?? ""
     );
   });
+  if (typeof nextContent === "string") {
+    nextContent = nextContent.replace(
+      /\{\{(.*?)}}/,
+      `<mark class="highlight">$1</mark>`
+    );
+  }
   return nextContent;
 };
 const useHash = (layerKey, manager) => {
@@ -1746,22 +1763,111 @@ const useLayerInteractions = (layerKey, options) => {
     };
   }, [interactions, fireEvent, pause]);
 };
+const useTextHighlight = (layerKey, options) => {
+  const [highlightLayerKey] = useLayerValue(layerKey, "highlight", options);
+  const [, , { cssVariableValue: fontSize }] = useLayerValue(
+    highlightLayerKey,
+    "fontSize",
+    options
+  );
+  const [, , { cssVariableValue: color }] = useLayerValue(
+    highlightLayerKey,
+    "color",
+    options
+  );
+  const [, , { cssVariableValue: fontWeight }] = useLayerValue(
+    highlightLayerKey,
+    "fontWeight",
+    options
+  );
+  const [, , { cssVariableValue: textAlign }] = useLayerValue(
+    highlightLayerKey,
+    "textAlign",
+    options
+  );
+  const [, , { cssVariableValue: textDecoration }] = useLayerValue(
+    highlightLayerKey,
+    "textDecoration",
+    options
+  );
+  const [, , { cssVariableValue: textTransform }] = useLayerValue(
+    highlightLayerKey,
+    "textTransform",
+    options
+  );
+  const [, , { cssVariableValue: lineHeight }] = useLayerValue(
+    highlightLayerKey,
+    "lineHeight",
+    options
+  );
+  const [, , { cssVariableValue: letterSpacing }] = useLayerValue(
+    highlightLayerKey,
+    "letterSpacing",
+    options
+  );
+  const [, , { cssVariableValue: fontFamily }] = useLayerValue(
+    highlightLayerKey,
+    "fontFamily",
+    options
+  );
+  const styles = {
+    background: "inherit",
+    color: "inherit"
+  };
+  if (!!fontSize) {
+    styles["font-size"] = toPx(fontSize);
+  }
+  if (!!color) {
+    styles["color"] = color;
+  }
+  if (!!fontWeight) {
+    styles["font-weight"] = fontWeight;
+  }
+  if (!!textAlign) {
+    styles["text-align"] = textAlign;
+  }
+  if (!!textDecoration) {
+    styles["text-decoration"] = textDecoration;
+  }
+  if (!!textTransform) {
+    styles["text-transform"] = textTransform;
+  }
+  if (!!lineHeight) {
+    styles["line-height"] = lineHeight;
+  }
+  if (!!letterSpacing) {
+    styles["letter-spacing"] = toPx(letterSpacing);
+  }
+  if (!!fontFamily) {
+    styles["font-family"] = `${fontFamily} !important`;
+  }
+  return {
+    stylesString: Object.entries(styles).reduce(
+      (acc, [key, value]) => acc += `${key}: ${value};`,
+      ""
+    )
+  };
+};
 const useTextAttributes = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
   const { manager: fragmentManager } = useContext(FragmentContext);
   const styles = useLayerStyles(layerKey);
+  const highlight = useTextHighlight(layerKey);
   const content = useTextContent(layerKey);
   const classnames = useClassnames(layerKey, fragmentManager);
+  const hash = useHash(layerKey, fragmentManager);
   const { addLayerStyle } = useStyleSheet(fragmentManager);
   const events = useLayerInteractions(layerKey, options);
   if (collectStyle) {
     addLayerStyle(layerKey, styles, fragmentManager.resolve(layerKey));
   }
   return {
+    hash,
     events,
     styles,
     classnames,
-    content
+    content,
+    highlight
   };
 };
 const Text = ({
@@ -1770,15 +1876,28 @@ const Text = ({
   collectStyle,
   ...restProps
 }) => {
-  const { classnames, content, events } = useTextAttributes(layerKey, {
-    collectStyle
-  });
-  return /* @__PURE__ */ jsx(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: /* @__PURE__ */ jsx(
-    "div",
+  const { classnames, content, events, hash, highlight } = useTextAttributes(
+    layerKey,
     {
-      dangerouslySetInnerHTML: { __html: content }
+      collectStyle
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsxs(Tag, { className: classnames, "data-key": layerKey, ...events, ...restProps, children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `.${hash} .highlight {${highlight.stylesString}}`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: content }
+      }
+    )
+  ] });
 };
 const useFrame = (layerKey, options) => {
   const collectStyle = (options == null ? void 0 : options.collectStyle) ?? true;
@@ -1797,8 +1916,7 @@ const useFrame = (layerKey, options) => {
     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: {},
-    //isBrowser ? pick(styles, "background") : {},
+    styles,
     children,
     events,
     linkProps: link.linkProps
@@ -1814,16 +1932,106 @@ const useCollection = (layerKey, options) => {
   });
   const source = collectionLayer == null ? void 0 : collectionLayer.source;
   const sourceDefinition = (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(source)) == null ? void 0 : _a.definition;
-  const [sourceValue] = useLayerValue(layerKey, "source", fragmentManager);
+  const [sourceValue] = useLayerValue(layerKey, "source", {
+    manager: fragmentManager
+  });
+  const sourceValues = useGraphStack(fragmentManager, sourceValue ?? []);
+  const resultValues = (sourceValue ?? []).map(
+    (initValue, index) => (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
+  );
   return {
     source,
     sourceDefinition,
-    sourceValue: sourceValue ?? [],
+    sourceValue: resultValues ?? [],
     fragmentManager,
     children,
     ...frame
   };
 };
+const useExtractProps = ({
+  layerKey,
+  definitions,
+  manager,
+  inputProps
+}) => {
+  const flatDefinition = useMemo(() => {
+    const acc = [];
+    const run = (defLink) => {
+      var _a;
+      const resolvedDefinition = (_a = getNormalizeLayer(defLink, manager)) == null ? void 0 : _a.layer;
+      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Array) return;
+      if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
+        Object.values(cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
+      } else if (isVariableLink$1(defLink)) {
+        acc.push(defLink);
+      }
+    };
+    definitions.forEach(run);
+    return acc;
+  }, [definitions]);
+  const definitionsData = useGraphStack(manager, flatDefinition);
+  const definitionProps = useMemo(
+    () => definitionsData.reduce((acc, definition2) => {
+      const defId = definition2._id;
+      acc[defId] = (inputProps == null ? void 0 : inputProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
+      return acc;
+    }, {}),
+    [inputProps]
+  );
+  return cleanGraph({
+    ...inputProps,
+    ...definitionProps
+  });
+};
+const CollectionItem = ({
+  layer,
+  manager,
+  FrameElement,
+  children,
+  sourceDefinition,
+  ...restProps
+}) => {
+  var _a;
+  const layerKey = keyOfEntity(layer);
+  const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
+  const value = layer.value ?? layer;
+  const props = useExtractProps({
+    layerKey,
+    definitions: [sourceDefinition],
+    inputProps: isObject(value) ? {
+      // [definitionId]: layer.value,
+      ...value
+    } : {
+      [definitionId]: value
+    },
+    manager
+  });
+  return /* @__PURE__ */ jsx(
+    Scope,
+    {
+      fragmentManager: manager,
+      layerKey: keyOfEntity(layer),
+      value: {
+        type: definition.scopeTypes.CollectionItemScope,
+        ...restProps,
+        sourceDefinition,
+        value: props,
+        manager
+      },
+      children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "contents",
+            ...getCssVariables(props ?? {})
+          },
+          children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
+        },
+        child
+      ))
+    }
+  );
+};
 const Collection = ({
   layerKey,
   styles: inputStyles,
@@ -1859,30 +2067,17 @@ const Collection = ({
           "data-key": layerKey,
           style: resultStyles,
           ...restProps,
-          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItem, index) => /* @__PURE__ */ jsx(
-            Scope,
+          children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsx(
+            CollectionItem,
             {
-              fragmentManager,
-              layerKey: `${layerKey}.${index}`,
-              value: {
-                type: definition.scopeTypes.CollectionItemScope,
-                source,
-                sourceDefinition,
-                value: collectionItem,
-                manager: fragmentManager
-              },
-              children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "contents",
-                    ...getCssVariables(collectionItem ?? {})
-                  },
-                  children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
-                },
-                child
-              ))
-            }
+              layer: itemValue,
+              manager: fragmentManager,
+              source,
+              children,
+              sourceDefinition,
+              FrameElement
+            },
+            index
           ))
         }
       )
@@ -2152,41 +2347,31 @@ const useInstanceProps = (instanceProps) => {
   );
   const { manager: fragmentContextManager } = useContext(FragmentContext);
   const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
-  const definitionsData = useGraphStack(innerFragmentManager, definitions);
+  const { readVariable } = useReadVariable();
   const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
   const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
   const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
   const [localProps, setLocalProps] = useState(instanceProps.props ?? {});
-  const mergedProps = useMemo(() => {
-    let base = instanceLayerProps;
-    if (isTopInstance && isObject(base) && isObject(localProps)) {
-      base = {
-        ...base,
-        ...localProps
-      };
-    }
-    if (isTopInstance && fragmentManager) {
-      definitionsData.forEach((definition2) => {
-        const defId = definition2._id;
-        base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
-      });
-    }
-    return omit(base, "_type", "_id");
-  }, [
-    isTopInstance,
-    fragmentManager,
-    instanceLayerProps,
-    definitionsData,
-    localProps
-  ]);
+  let inputProps = instanceLayerProps;
+  if (isTopInstance && isObject(inputProps) && isObject(localProps)) {
+    inputProps = {
+      ...inputProps,
+      ...localProps
+    };
+  }
+  const extractProps = useExtractProps({
+    definitions,
+    manager: fragmentManager,
+    inputProps
+  });
   useEffect(() => {
     if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
       setLocalProps(instanceProps.props);
     }
   }, [instanceProps == null ? void 0 : instanceProps.props]);
   return {
-    props: mergedProps,
-    cssProps: getCssVariables(mergedProps),
+    props: extractProps,
+    cssProps: getCssVariables(extractProps),
     onChangeProps: (variableId, value) => {
       var _a;
       setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -2496,5 +2681,6 @@ export {
   useRenderTarget,
   useTextAttributes,
   useTextContent,
+  useTextHighlight,
   wrapTextInParagraphWithAttributes
 };

package/dist/nodes/Area/test/area-project-props.browser.test.d.ts

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

package/dist/nodes/Area/test/area-project-props.browser.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-project-props.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Area/test/area-project-props.browser.test.tsx"],"names":[],"mappings":""}

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

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

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

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { FrameProps } from '../Frame';
+interface CollectionProps extends FrameProps {
+}
+export declare const CollectionItem: FC<CollectionProps>;
+export {};
+//# sourceMappingURL=CollectionItem.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+import { LinkKey } from '@graph-state/core';
+import { UseFrameOptions } from '../../Frame/hooks/useFrame';
+export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOptions) => {
+    Tag: string | import('react').ComponentClass<any, any> | import('react').FunctionComponent<any>;
+    type: any;
+    classnames: string | null;
+    styles: {};
+    children: any;
+    events: {
+        onClick?: undefined;
+    } | {
+        onClick: () => void;
+    };
+    linkProps: {
+        target: string;
+        href: string;
+    } | {
+        target?: undefined;
+        href?: undefined;
+    };
+    source: any;
+    sourceDefinition: any;
+    sourceValue: any;
+    fragmentManager: null;
+};
+//# sourceMappingURL=useCollection.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { CollectionItem } from './CollectionItem';
+export { useCollection } from './hooks/useCollection';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/CollectionItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,5 +1,6 @@
 import { ElementType, FC } from 'react';
 import { LinkKey } from '@graph-state/core';
+import { UseFrameOptions } from './hooks/useFrame';
 export interface FrameProps extends UseFrameOptions {
     TextElement?: ElementType;
     InstanceElement?: ElementType;

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

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

@@ -1,5 +1,6 @@
 import { LinkKey } from '@graph-state/core';
 import { ElementType } from 'react';
+import { UseLayerInteractionsOptions } from '../../../hooks/utils/useLayerInteractions';
 export interface UseFrameOptions extends UseLayerInteractionsOptions {
     collectStyle?: boolean;
     FrameTag?: string | ElementType;

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

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

@@ -9,7 +9,7 @@ export declare const useInstance: (instanceProps: UseInstanceOptions) => {
         onClick: () => void;
     };
     definitions: any;
-    props: Omit<any, "_type" | "_id">;
+    props: unknown;
     cssProps: {};
     parentManager: null;
     innerManager: any;

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

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