@fragmentsx/render-react 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/hooks/layer/useExtractProps.d.ts +9 -0
  2. package/dist/hooks/layer/useExtractProps.d.ts.map +1 -0
  3. package/dist/hooks/layer/useLayerCssVariable.d.ts.map +1 -1
  4. package/dist/hooks/layer/useReadVariable.d.ts.map +1 -1
  5. package/dist/hooks/layer-styles/useLayerStyles/index.d.ts.map +1 -1
  6. package/dist/hooks/layer-styles/useLayerStyles/useLayerLayout.d.ts +1 -1
  7. package/dist/hooks/layer-styles/useLayerStyles/useLayerLayout.d.ts.map +1 -1
  8. package/dist/hooks/utils/useForceUpdate.d.ts +2 -0
  9. package/dist/hooks/utils/useForceUpdate.d.ts.map +1 -0
  10. package/dist/index.cjs.js +164 -108
  11. package/dist/index.es.js +166 -110
  12. package/dist/nodes/Area/test/area-project-props.browser.test.d.ts +2 -0
  13. package/dist/nodes/Area/test/area-project-props.browser.test.d.ts.map +1 -0
  14. package/dist/nodes/Collection/Collection.d.ts.map +1 -1
  15. package/dist/nodes/Collection/hooks/useCollection.d.ts.map +1 -1
  16. package/dist/nodes/CollectionItem/CollectionItem.d.ts +7 -0
  17. package/dist/nodes/CollectionItem/CollectionItem.d.ts.map +1 -0
  18. package/dist/nodes/CollectionItem/hooks/useCollection.d.ts +26 -0
  19. package/dist/nodes/CollectionItem/hooks/useCollection.d.ts.map +1 -0
  20. package/dist/nodes/CollectionItem/index.d.ts +3 -0
  21. package/dist/nodes/CollectionItem/index.d.ts.map +1 -0
  22. package/dist/nodes/Frame/Frame.d.ts +1 -0
  23. package/dist/nodes/Frame/Frame.d.ts.map +1 -1
  24. package/dist/nodes/Frame/hooks/useFrame.d.ts +1 -0
  25. package/dist/nodes/Frame/hooks/useFrame.d.ts.map +1 -1
  26. package/dist/nodes/Instance/hooks/useInstance.d.ts +1 -1
  27. package/dist/nodes/Instance/hooks/useInstanceProps.d.ts +1 -1
  28. package/dist/nodes/Instance/hooks/useInstanceProps.d.ts.map +1 -1
  29. package/dist/nodes/Instance/test/basic.test.d.ts +2 -0
  30. package/dist/nodes/Instance/test/basic.test.d.ts.map +1 -0
  31. package/dist/nodes/Instance/test/collection.browser.test.d.ts +2 -0
  32. package/dist/nodes/Instance/test/collection.browser.test.d.ts.map +1 -0
  33. package/dist/nodes/Instance/test/constraints.browser.test.d.ts +2 -0
  34. package/dist/nodes/Instance/test/constraints.browser.test.d.ts.map +1 -0
  35. package/dist/nodes/Instance/test/css-chunks.browser.test.d.ts +2 -0
  36. package/dist/nodes/Instance/test/css-chunks.browser.test.d.ts.map +1 -0
  37. package/dist/nodes/Instance/test/fragmentDocuments.d.ts +19 -0
  38. package/dist/nodes/Instance/test/fragmentDocuments.d.ts.map +1 -0
  39. package/dist/nodes/Instance/test/layout.browser.test.d.ts +2 -0
  40. package/dist/nodes/Instance/test/layout.browser.test.d.ts.map +1 -0
  41. package/dist/nodes/Instance/test/modified.browser.test.d.ts +2 -0
  42. package/dist/nodes/Instance/test/modified.browser.test.d.ts.map +1 -0
  43. package/dist/nodes/Instance/test/modified.test.d.ts +2 -0
  44. package/dist/nodes/Instance/test/modified.test.d.ts.map +1 -0
  45. package/dist/nodes/Instance/test/nested-instance.browser.test.d.ts +2 -0
  46. package/dist/nodes/Instance/test/nested-instance.browser.test.d.ts.map +1 -0
  47. package/dist/nodes/Instance/test/nested-instance.test.d.ts +2 -0
  48. package/dist/nodes/Instance/test/nested-instance.test.d.ts.map +1 -0
  49. package/dist/nodes/Instance/test/paint.browser.test.d.ts +2 -0
  50. package/dist/nodes/Instance/test/paint.browser.test.d.ts.map +1 -0
  51. package/dist/nodes/Instance/test/resize.browser.test.d.ts +2 -0
  52. package/dist/nodes/Instance/test/resize.browser.test.d.ts.map +1 -0
  53. package/dist/nodes/Instance/test/sizing.browser.test.d.ts +2 -0
  54. package/dist/nodes/Instance/test/sizing.browser.test.d.ts.map +1 -0
  55. package/dist/nodes/Instance/test/standalone-props.browser.test.d.ts +2 -0
  56. package/dist/nodes/Instance/test/standalone-props.browser.test.d.ts.map +1 -0
  57. package/dist/nodes/Instance/test/structure.test.d.ts +2 -0
  58. package/dist/nodes/Instance/test/structure.test.d.ts.map +1 -0
  59. package/dist/nodes/Instance/test/styles.browser.test.d.ts +2 -0
  60. package/dist/nodes/Instance/test/styles.browser.test.d.ts.map +1 -0
  61. package/dist/nodes/Instance/test/text.browser.test.d.ts +2 -0
  62. package/dist/nodes/Instance/test/text.browser.test.d.ts.map +1 -0
  63. package/dist/nodes/Instance/test/text.test.d.ts +2 -0
  64. package/dist/nodes/Instance/test/text.test.d.ts.map +1 -0
  65. package/dist/nodes/Text/hooks/useTextContent.d.ts.map +1 -1
  66. package/dist/test/setupTests.d.ts +0 -1
  67. package/dist/test/setupTests.d.ts.map +1 -1
  68. package/package.json +20 -8
  69. package/dist/test/__examples__/Fragment.test.d.ts +0 -6
  70. package/dist/test/__examples__/Fragment.test.d.ts.map +0 -1
  71. package/dist/test/__examples__/useReadVariable.test.d.ts +0 -6
  72. package/dist/test/__examples__/useReadVariable.test.d.ts.map +0 -1
  73. package/dist/test/testUtils.d.ts +0 -17
  74. package/dist/test/testUtils.d.ts.map +0 -1
package/dist/index.es.js CHANGED
@@ -1,7 +1,7 @@
1
- import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef, Suspense } from "react";
1
+ import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, Suspense } from "react";
2
2
  import { definition, getNormalizeLayer as getNormalizeLayer$1, isVariableLink as isVariableLink$1, parseLayerField } from "@fragmentsx/definition";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
- import { useGraph, useGraphStack, GraphValue } from "@graph-state/react";
4
+ import { useGraph, useGraphStack } from "@graph-state/react";
5
5
  import { noop, isPrimitive, isObject, generateId, getKey as getKey$1, isValue, pick, toPx, cleanGraph, flattenObject, setKey as setKey$1, toKebabCase, set, get, omit, isFiniteNumber, hashGenerator as hashGenerator$1, isBrowser as isBrowser$1 } from "@fragmentsx/utils";
6
6
  import { entityOfKey, keyOfEntity, isPartialKey, isLinkKey } from "@graph-state/core";
7
7
  const GlobalManagerContext = createContext(null);
@@ -106,6 +106,9 @@ const useNormalizeLayers = (layerKeys, manager, options) => {
106
106
  (layerKey) => getNormalizeLayer(layerKey, resultManager, options)
107
107
  );
108
108
  };
109
+ function useForceUpdate() {
110
+ return useReducer(() => ({}), {});
111
+ }
109
112
  const extractVariableValue = (input, variableId) => {
110
113
  if (isObject(input)) {
111
114
  if (variableId in input) {
@@ -137,6 +140,15 @@ function deepMerge(a, b) {
137
140
  const useReadVariable = (variableKey, customScopes) => {
138
141
  const contextScopes = useContext(ScopeContext);
139
142
  const scopes = customScopes ?? contextScopes;
143
+ const unmountAbortController = useRef(new AbortController());
144
+ const [dep, forceUpdate] = useForceUpdate();
145
+ useEffect(
146
+ () => () => {
147
+ var _a;
148
+ (_a = unmountAbortController.current) == null ? void 0 : _a.abort("unmount");
149
+ },
150
+ []
151
+ );
140
152
  const extractVariableDefaultValue = (manager, variableEntity) => {
141
153
  const variableLayer = manager.resolve(variableEntity);
142
154
  if ((variableLayer == null ? void 0 : variableLayer.type) !== definition.variableType.Object)
@@ -182,7 +194,7 @@ const useReadVariable = (variableKey, customScopes) => {
182
194
  return variableLayer;
183
195
  };
184
196
  const readVariable = (variableKey2) => {
185
- var _a, _b, _c;
197
+ var _a, _b, _c, _d, _e;
186
198
  const variableId = (_a = entityOfKey(variableKey2)) == null ? void 0 : _a._id;
187
199
  if (!isVariableLink$1(variableKey2)) {
188
200
  return {
@@ -205,7 +217,10 @@ const useReadVariable = (variableKey, customScopes) => {
205
217
  instanceScope == null ? void 0 : instanceScope.documentManager,
206
218
  variableKey2
207
219
  );
208
- let instanceProp = (_b = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _b[variableId];
220
+ (_c = instanceScope == null ? void 0 : instanceScope.documentManager) == null ? void 0 : _c.subscribe(variableKey2, forceUpdate, {
221
+ signal: (_b = unmountAbortController.current) == null ? void 0 : _b.signal
222
+ });
223
+ let instanceProp = (_d = instanceScope == null ? void 0 : instanceScope.props) == null ? void 0 : _d[variableId];
209
224
  if (Array.isArray(instanceProp)) {
210
225
  instanceProp = instanceProp.map(
211
226
  (rawProp, index) => {
@@ -222,7 +237,7 @@ const useReadVariable = (variableKey, customScopes) => {
222
237
  lastCollectionItem == null ? void 0 : lastCollectionItem.sourceDefinition,
223
238
  lastCollectionItem == null ? void 0 : lastCollectionItem.value
224
239
  );
225
- 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);
240
+ 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);
226
241
  const currentValue = variableKey2 === instanceProp ? null : collectionItemProp ?? instanceProp ?? null;
227
242
  const required = (variableLayer == null ? void 0 : variableLayer.required) ?? false;
228
243
  const defaultValue = (variableLayer == null ? void 0 : variableLayer.defaultValue) ?? null;
@@ -973,11 +988,13 @@ const getLayerCssVariable = (manager, inputValue) => {
973
988
  };
974
989
  };
975
990
  const useLayerCssVariable = (inputValue) => {
991
+ var _a;
976
992
  const { manager } = useContext(FragmentContext);
977
993
  const isVariable = isVariableLink$1(inputValue);
978
994
  const { layer } = useNormalizeLayer(inputValue, isVariable ? manager : null);
995
+ const variableId = (layer == null ? void 0 : layer._id) ?? ((_a = entityOfKey(inputValue)) == null ? void 0 : _a._id);
979
996
  return {
980
- value: isVariable ? `var(--${layer == null ? void 0 : layer._id}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
997
+ value: isVariable ? `var(--${variableId}, ${transformCssValue(layer == null ? void 0 : layer.defaultValue)})` : null
981
998
  };
982
999
  };
983
1000
  const useLayerValue = (layerKey, fieldKey, options) => {
@@ -1356,10 +1373,10 @@ const useLayerLinearGradient = (linearGradientLink) => {
1356
1373
  const stopsPosition = useLayersValue(stops, "position");
1357
1374
  const stopValues = useMemo(
1358
1375
  () => (stops == null ? void 0 : stops.flatMap((stop, index) => {
1359
- var _a, _b;
1376
+ var _a, _b, _c;
1360
1377
  return [
1361
- (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(0),
1362
- (_b = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _b.at(0)
1378
+ (_b = (_a = stopsValue == null ? void 0 : stopsValue.at(index)) == null ? void 0 : _a.at(2)) == null ? void 0 : _b.cssVariableValue,
1379
+ (_c = stopsPosition == null ? void 0 : stopsPosition.at(index)) == null ? void 0 : _c.at(0)
1363
1380
  ];
1364
1381
  })) ?? [],
1365
1382
  [stops, stopsValue, stopsPosition]
@@ -1459,7 +1476,7 @@ const useLayerBorder = (layerKey) => {
1459
1476
  if (borderPaint.type === definition.paintMode.LinearGradient) {
1460
1477
  let background = `linear-gradient(${paint.solid}, ${paint.solid}) padding-box, ${borderLinearGradient} border-box`;
1461
1478
  if (paint.type === definition.paintMode.LinearGradient) {
1462
- background = `${linearGradient} padding-box, ${borderLinearGradient} border-box`;
1479
+ background = `${linearGradient["background-image"]} padding-box, ${borderLinearGradient["background-image"]} border-box`;
1463
1480
  }
1464
1481
  if (paint.type === definition.paintMode.None) {
1465
1482
  background = `linear-gradient(transparent, transparent) padding-box, ${borderLinearGradient} border-box`;
@@ -1500,25 +1517,18 @@ const useLayerLayout = (layerKey) => {
1500
1517
  const [padding] = useLayerValue(layerKey, "padding", fragmentManager);
1501
1518
  const [gap] = useLayerValue(layerKey, "layerGap", fragmentManager);
1502
1519
  const isFlex = layerModeValue === definition.layerMode.flex;
1503
- return useMemo(
1504
- () => ({
1505
- display: isFlex ? "flex" : null,
1506
- gap: toPx(gap),
1507
- flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
1508
- justifyContent: isFlex ? layerDistribute : null,
1509
- flexFlow: isFlex ? layerDirectionValue === definition.layerDirection.vertical ? "column" : "row" : null,
1510
- alignItems: isFlex ? layerAlign : null,
1511
- padding: isFlex ? padding : null
1512
- }),
1513
- [
1514
- isFlex,
1515
- layerWrap,
1516
- layerDistribute,
1517
- layerDirectionValue,
1518
- layerAlign,
1519
- padding
1520
- ]
1521
- );
1520
+ const baseFlow = layerDirectionValue === definition.layerDirection.vertical ? "column" : "row";
1521
+ const wrap = isFlex ? layerWrap ? "wrap" : null : null;
1522
+ const flexFlow = [baseFlow, wrap].filter(Boolean).join(" ");
1523
+ return {
1524
+ display: isFlex ? "flex" : null,
1525
+ gap: toPx(gap),
1526
+ flexWrap: isFlex ? layerWrap ? "wrap" : null : null,
1527
+ justifyContent: isFlex ? layerDistribute : null,
1528
+ flexFlow,
1529
+ alignItems: isFlex ? layerAlign : null,
1530
+ padding: isFlex ? padding : null
1531
+ };
1522
1532
  };
1523
1533
  const useLayerTextStyles = (layerKey) => {
1524
1534
  const { manager: fragmentManager } = useContext(FragmentContext);
@@ -1561,7 +1571,7 @@ const useLayerStyles = (layerKey) => {
1561
1571
  const layout = useLayerLayout(layerKey);
1562
1572
  const [zIndex] = useLayerValue(layerKey, "zIndex", fragmentManager);
1563
1573
  const [rotate] = useLayerValue(layerKey, "rotate", fragmentManager);
1564
- const [borderRadius] = useLayerValue(
1574
+ const [borderRadius, , { rawValue: rawBorderRadius }] = useLayerValue(
1565
1575
  layerKey,
1566
1576
  "borderRadius",
1567
1577
  fragmentManager
@@ -1571,13 +1581,13 @@ const useLayerStyles = (layerKey) => {
1571
1581
  const [overflow] = useLayerValue(layerKey, "overflow", fragmentManager);
1572
1582
  return {
1573
1583
  // ...(props ?? {}),
1574
- ...border,
1575
1584
  ...background,
1585
+ ...border,
1576
1586
  ...position,
1577
1587
  opacity,
1578
1588
  overflow,
1579
1589
  rotate: isValue(rotate) ? `${rotate}deg` : null,
1580
- "border-radius": borderRadius,
1590
+ "border-radius": isValue(rawBorderRadius) ? borderRadius : null,
1581
1591
  "white-space": whiteSpace,
1582
1592
  "z-index": zIndex !== -1 ? zIndex : null,
1583
1593
  ...layout,
@@ -1630,10 +1640,12 @@ const useTextContent = (layerKey, manager) => {
1630
1640
  readVariable(variable.variableKey).value ?? ""
1631
1641
  );
1632
1642
  });
1633
- nextContent = nextContent.replace(
1634
- /\{\{(.*?)}}/,
1635
- `<mark class="highlight">$1</mark>`
1636
- );
1643
+ if (typeof nextContent === "string") {
1644
+ nextContent = nextContent.replace(
1645
+ /\{\{(.*?)}}/,
1646
+ `<mark class="highlight">$1</mark>`
1647
+ );
1648
+ }
1637
1649
  return nextContent;
1638
1650
  };
1639
1651
  const useHash = (layerKey, manager) => {
@@ -1827,7 +1839,7 @@ const useTextHighlight = (layerKey, options) => {
1827
1839
  styles["letter-spacing"] = toPx(letterSpacing);
1828
1840
  }
1829
1841
  if (!!fontFamily) {
1830
- styles["font-family"] = fontFamily;
1842
+ styles["font-family"] = `${fontFamily} !important`;
1831
1843
  }
1832
1844
  return {
1833
1845
  stylesString: Object.entries(styles).reduce(
@@ -1904,8 +1916,7 @@ const useFrame = (layerKey, options) => {
1904
1916
  Tag: (link == null ? void 0 : link.isLink) ? (options == null ? void 0 : options.FrameTag) ?? "a" : (options == null ? void 0 : options.FrameTag) ?? "div",
1905
1917
  type: layer == null ? void 0 : layer._type,
1906
1918
  classnames,
1907
- styles: {},
1908
- //isBrowser ? pick(styles, "background") : {},
1919
+ styles,
1909
1920
  children,
1910
1921
  events,
1911
1922
  linkProps: link.linkProps
@@ -1921,16 +1932,106 @@ const useCollection = (layerKey, options) => {
1921
1932
  });
1922
1933
  const source = collectionLayer == null ? void 0 : collectionLayer.source;
1923
1934
  const sourceDefinition = (_a = fragmentManager == null ? void 0 : fragmentManager.resolve(source)) == null ? void 0 : _a.definition;
1924
- const [sourceValue] = useLayerValue(layerKey, "source", fragmentManager);
1935
+ const [sourceValue] = useLayerValue(layerKey, "source", {
1936
+ manager: fragmentManager
1937
+ });
1938
+ const sourceValues = useGraphStack(fragmentManager, sourceValue ?? []);
1939
+ const resultValues = (sourceValue ?? []).map(
1940
+ (initValue, index) => (sourceValues == null ? void 0 : sourceValues[index]) ?? initValue
1941
+ );
1925
1942
  return {
1926
1943
  source,
1927
1944
  sourceDefinition,
1928
- sourceValue: sourceValue ?? [],
1945
+ sourceValue: resultValues ?? [],
1929
1946
  fragmentManager,
1930
1947
  children,
1931
1948
  ...frame
1932
1949
  };
1933
1950
  };
1951
+ const useExtractProps = ({
1952
+ layerKey,
1953
+ definitions,
1954
+ manager,
1955
+ inputProps
1956
+ }) => {
1957
+ const flatDefinition = useMemo(() => {
1958
+ const acc = [];
1959
+ const run = (defLink) => {
1960
+ var _a;
1961
+ const resolvedDefinition = (_a = getNormalizeLayer(defLink, manager)) == null ? void 0 : _a.layer;
1962
+ if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Array) return;
1963
+ if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
1964
+ Object.values(cleanGraph(resolvedDefinition == null ? void 0 : resolvedDefinition.fields)).forEach(run);
1965
+ } else if (isVariableLink$1(defLink)) {
1966
+ acc.push(defLink);
1967
+ }
1968
+ };
1969
+ definitions.forEach(run);
1970
+ return acc;
1971
+ }, [definitions]);
1972
+ const definitionsData = useGraphStack(manager, flatDefinition);
1973
+ const definitionProps = useMemo(
1974
+ () => definitionsData.reduce((acc, definition2) => {
1975
+ const defId = definition2._id;
1976
+ acc[defId] = (inputProps == null ? void 0 : inputProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
1977
+ return acc;
1978
+ }, {}),
1979
+ [inputProps]
1980
+ );
1981
+ return cleanGraph({
1982
+ ...inputProps,
1983
+ ...definitionProps
1984
+ });
1985
+ };
1986
+ const CollectionItem = ({
1987
+ layer,
1988
+ manager,
1989
+ FrameElement,
1990
+ children,
1991
+ sourceDefinition,
1992
+ ...restProps
1993
+ }) => {
1994
+ var _a;
1995
+ const layerKey = keyOfEntity(layer);
1996
+ const definitionId = ((_a = entityOfKey(sourceDefinition)) == null ? void 0 : _a._id) ?? "";
1997
+ const value = layer.value ?? layer;
1998
+ const props = useExtractProps({
1999
+ layerKey,
2000
+ definitions: [sourceDefinition],
2001
+ inputProps: isObject(value) ? {
2002
+ // [definitionId]: layer.value,
2003
+ ...value
2004
+ } : {
2005
+ [definitionId]: value
2006
+ },
2007
+ manager
2008
+ });
2009
+ return /* @__PURE__ */ jsx(
2010
+ Scope,
2011
+ {
2012
+ fragmentManager: manager,
2013
+ layerKey: keyOfEntity(layer),
2014
+ value: {
2015
+ type: definition.scopeTypes.CollectionItemScope,
2016
+ ...restProps,
2017
+ sourceDefinition,
2018
+ value: props,
2019
+ manager
2020
+ },
2021
+ children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
2022
+ "div",
2023
+ {
2024
+ style: {
2025
+ display: "contents",
2026
+ ...getCssVariables(props ?? {})
2027
+ },
2028
+ children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
2029
+ },
2030
+ child
2031
+ ))
2032
+ }
2033
+ );
2034
+ };
1934
2035
  const Collection = ({
1935
2036
  layerKey,
1936
2037
  styles: inputStyles,
@@ -1966,37 +2067,17 @@ const Collection = ({
1966
2067
  "data-key": layerKey,
1967
2068
  style: resultStyles,
1968
2069
  ...restProps,
1969
- children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (collectionItemLinkKey) => /* @__PURE__ */ jsx(
1970
- GraphValue,
2070
+ children: (_a = sourceValue == null ? void 0 : sourceValue.map) == null ? void 0 : _a.call(sourceValue, (itemValue, index) => /* @__PURE__ */ jsx(
2071
+ CollectionItem,
1971
2072
  {
1972
- graphState: fragmentManager,
1973
- field: collectionItemLinkKey,
1974
- children: (value) => /* @__PURE__ */ jsx(
1975
- Scope,
1976
- {
1977
- fragmentManager,
1978
- layerKey: collectionItemLinkKey,
1979
- value: {
1980
- type: definition.scopeTypes.CollectionItemScope,
1981
- source,
1982
- sourceDefinition,
1983
- value,
1984
- manager: fragmentManager
1985
- },
1986
- children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(
1987
- "div",
1988
- {
1989
- style: {
1990
- display: "contents",
1991
- ...getCssVariables(value ?? {})
1992
- },
1993
- children: /* @__PURE__ */ jsx(FrameElement, { ...restProps, layerKey: child })
1994
- },
1995
- child
1996
- ))
1997
- }
1998
- )
1999
- }
2073
+ layer: itemValue,
2074
+ manager: fragmentManager,
2075
+ source,
2076
+ children,
2077
+ sourceDefinition,
2078
+ FrameElement
2079
+ },
2080
+ index
2000
2081
  ))
2001
2082
  }
2002
2083
  )
@@ -2268,54 +2349,29 @@ const useInstanceProps = (instanceProps) => {
2268
2349
  const { properties: definitions, manager: innerFragmentManager } = useFragmentProperties(instanceProps == null ? void 0 : instanceProps.fragmentId);
2269
2350
  const { readVariable } = useReadVariable();
2270
2351
  const fragmentManager = isTopInstance ? loadedManager : fragmentContextManager;
2271
- const flatDefinition = useMemo(() => {
2272
- const acc = [];
2273
- const run = (defLink) => {
2274
- const resolvedDefinition = fragmentManager.resolve(defLink);
2275
- if ((resolvedDefinition == null ? void 0 : resolvedDefinition.type) === definition.variableType.Object) {
2276
- Object.values(resolvedDefinition.fields).forEach(run);
2277
- } else if (isVariableLink$1(defLink)) {
2278
- acc.push(defLink);
2279
- }
2280
- };
2281
- definitions.forEach(run);
2282
- return acc;
2283
- }, [definitions]);
2284
- const definitionsData = useGraphStack(innerFragmentManager, flatDefinition);
2285
2352
  const [instanceLayer] = useGraph(fragmentManager, instanceProps.layerKey);
2286
2353
  const instanceLayerProps = (instanceLayer == null ? void 0 : instanceLayer.props) ?? {};
2287
2354
  const [localProps, setLocalProps] = useState(instanceProps.props ?? {});
2288
- const mergedProps = useMemo(() => {
2289
- let base = instanceLayerProps;
2290
- if (isTopInstance && isObject(base) && isObject(localProps)) {
2291
- base = {
2292
- ...base,
2293
- ...localProps
2294
- };
2295
- }
2296
- if (isTopInstance && fragmentManager) {
2297
- definitionsData.forEach((definition2) => {
2298
- const defId = definition2._id;
2299
- base[defId] = (localProps == null ? void 0 : localProps[defId]) ?? (definition2 == null ? void 0 : definition2.defaultValue);
2300
- });
2301
- }
2302
- return omit(base, "_type", "_id");
2303
- }, [
2304
- isTopInstance,
2305
- fragmentManager,
2306
- instanceLayerProps,
2307
- definitionsData,
2308
- localProps,
2309
- readVariable
2310
- ]);
2355
+ let inputProps = instanceLayerProps;
2356
+ if (isTopInstance && isObject(inputProps) && isObject(localProps)) {
2357
+ inputProps = {
2358
+ ...inputProps,
2359
+ ...localProps
2360
+ };
2361
+ }
2362
+ const extractProps = useExtractProps({
2363
+ definitions,
2364
+ manager: fragmentManager,
2365
+ inputProps
2366
+ });
2311
2367
  useEffect(() => {
2312
2368
  if (isValue(instanceProps == null ? void 0 : instanceProps.props)) {
2313
2369
  setLocalProps(instanceProps.props);
2314
2370
  }
2315
2371
  }, [instanceProps == null ? void 0 : instanceProps.props]);
2316
2372
  return {
2317
- props: mergedProps,
2318
- cssProps: getCssVariables(mergedProps),
2373
+ props: extractProps,
2374
+ cssProps: getCssVariables(extractProps),
2319
2375
  onChangeProps: (variableId, value) => {
2320
2376
  var _a;
2321
2377
  setLocalProps((prev) => ({ ...prev, [variableId]: value }));
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=area-project-props.browser.test.d.ts.map
@@ -0,0 +1 @@
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":""}
@@ -1 +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,CAwE1C,CAAC"}
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;AAOlD,UAAU,eAAgB,SAAQ,UAAU;CAAG;AAE/C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiD1C,CAAC"}
@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;CA4BzE,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { FC } from 'react';
2
+ import { FrameProps } from '../Frame';
3
+ interface CollectionProps extends FrameProps {
4
+ }
5
+ export declare const CollectionItem: FC<CollectionProps>;
6
+ export {};
7
+ //# sourceMappingURL=CollectionItem.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,26 @@
1
+ import { LinkKey } from '@graph-state/core';
2
+ import { UseFrameOptions } from '../../Frame/hooks/useFrame';
3
+ export declare const useCollection: (layerKey: LinkKey, options?: UseFrameOptions) => {
4
+ Tag: string | import('react').ComponentClass<any, any> | import('react').FunctionComponent<any>;
5
+ type: any;
6
+ classnames: string | null;
7
+ styles: {};
8
+ children: any;
9
+ events: {
10
+ onClick?: undefined;
11
+ } | {
12
+ onClick: () => void;
13
+ };
14
+ linkProps: {
15
+ target: string;
16
+ href: string;
17
+ } | {
18
+ target?: undefined;
19
+ href?: undefined;
20
+ };
21
+ source: any;
22
+ sourceDefinition: any;
23
+ sourceValue: any;
24
+ fragmentManager: null;
25
+ };
26
+ //# sourceMappingURL=useCollection.d.ts.map
@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;CA2BzE,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { CollectionItem } from './CollectionItem';
2
+ export { useCollection } from './hooks/useCollection';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,5 +1,6 @@
1
1
  import { ElementType, FC } from 'react';
2
2
  import { LinkKey } from '@graph-state/core';
3
+ import { UseFrameOptions } from './hooks/useFrame';
3
4
  export interface FrameProps extends UseFrameOptions {
4
5
  TextElement?: ElementType;
5
6
  InstanceElement?: ElementType;
@@ -1 +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"}
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"}
@@ -1,5 +1,6 @@
1
1
  import { LinkKey } from '@graph-state/core';
2
2
  import { ElementType } from 'react';
3
+ import { UseLayerInteractionsOptions } from '../../../hooks/utils/useLayerInteractions';
3
4
  export interface UseFrameOptions extends UseLayerInteractionsOptions {
4
5
  collectStyle?: boolean;
5
6
  FrameTag?: string | ElementType;
@@ -1 +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"}
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"}
@@ -9,7 +9,7 @@ export declare const useInstance: (instanceProps: UseInstanceOptions) => {
9
9
  onClick: () => void;
10
10
  };
11
11
  definitions: any;
12
- props: Omit<any, "_type" | "_id">;
12
+ props: unknown;
13
13
  cssProps: {};
14
14
  parentManager: null;
15
15
  innerManager: any;
@@ -1,6 +1,6 @@
1
1
  import { InstanceProps } from '../Instance';
2
2
  export declare const useInstanceProps: (instanceProps: InstanceProps) => {
3
- props: Omit<any, "_type" | "_id">;
3
+ props: unknown;
4
4
  cssProps: {};
5
5
  onChangeProps: (variableId: string, value: unknown) => void;
6
6
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAgB1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;gCA4E7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}
1
+ {"version":3,"file":"useInstanceProps.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/hooks/useInstanceProps.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAiB1D,eAAO,MAAM,gBAAgB,kBAAmB,aAAa;;;gCA2F7B,MAAM,SAAS,OAAO;CAKrD,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=basic.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"basic.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/basic.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=collection.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"collection.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/collection.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=constraints.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constraints.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/constraints.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=css-chunks.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"css-chunks.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/css-chunks.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,19 @@
1
+ import { FragmentDocument } from '@fragmentsx/client-core';
2
+ /** Известные ID из document.json для ассертов */
3
+ export declare const DOC: {
4
+ readonly fragmentId: "2455161c925b2";
5
+ readonly primaryFrame: "61e01f010586";
6
+ readonly flexRowFrame: "7969f0d07148";
7
+ readonly textFrame: "bb603cd160d2";
8
+ readonly text: "e8218fa8dff88";
9
+ readonly instance: "eeb4efaaf0d788";
10
+ readonly linkInfoFrame: "46368c95ea36a";
11
+ readonly disclaimerFrame: "99f9180cfc864";
12
+ readonly disclaimerText: "7286cb4b514628";
13
+ };
14
+ export declare const getBaseDocument: () => FragmentDocument;
15
+ /** Документ с Variable definition — для тестов пропсов */
16
+ export declare const createDocumentWithVariable: () => FragmentDocument;
17
+ /** Простой фрагмент для вложенного Instance (fragment:15) */
18
+ export declare const createNestedFragment: () => FragmentDocument;
19
+ //# sourceMappingURL=fragmentDocuments.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fragmentDocuments.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/fragmentDocuments.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,iDAAiD;AACjD,eAAO,MAAM,GAAG;;;;;;;;;;CAUN,CAAC;AAEX,eAAO,MAAM,eAAe,QACC,gBAAgB,CAAC;AAE9C,0DAA0D;AAC1D,eAAO,MAAM,0BAA0B,QAAO,gBAaX,CAAC;AAEpC,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,QAAO,gBA4BL,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=layout.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/layout.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=modified.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modified.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/modified.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=modified.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modified.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/modified.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=nested-instance.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nested-instance.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Instance/test/nested-instance.browser.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=nested-instance.test.d.ts.map