@measured/puck 0.19.0-canary.fb0e8e24 → 0.19.1-canary.5f63993d

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.
package/dist/index.js CHANGED
@@ -9,9 +9,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
9
  var __getProtoOf = Object.getPrototypeOf;
10
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
11
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __typeError = (msg) => {
13
- throw TypeError(msg);
14
- };
15
12
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
16
13
  var __spreadValues = (a, b) => {
17
14
  for (var prop in b || (b = {}))
@@ -64,10 +61,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
64
61
  mod
65
62
  ));
66
63
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
67
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
68
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
69
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
70
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
71
64
  var __async = (__this, __arguments, generator) => {
72
65
  return new Promise((resolve, reject) => {
73
66
  var fulfilled = (value) => {
@@ -181,6 +174,7 @@ __export(core_exports, {
181
174
  renderContext: () => renderContext,
182
175
  resolveAllData: () => resolveAllData,
183
176
  transformProps: () => transformProps,
177
+ useGetPuck: () => useGetPuck,
184
178
  usePuck: () => usePuck,
185
179
  walkTree: () => walkTree
186
180
  });
@@ -309,7 +303,7 @@ init_react_import();
309
303
 
310
304
  // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
311
305
  init_react_import();
312
- var styles_module_default2 = { "InputWrapper": "_InputWrapper_4xor1_1", "Input-label": "_Input-label_4xor1_5", "Input-labelIcon": "_Input-labelIcon_4xor1_14", "Input-disabledIcon": "_Input-disabledIcon_4xor1_21", "Input-input": "_Input-input_4xor1_26", "Input": "_Input_4xor1_1", "Input--readOnly": "_Input--readOnly_4xor1_75", "Input-radioGroupItems": "_Input-radioGroupItems_4xor1_86", "Input-radio": "_Input-radio_4xor1_86", "Input-radioInner": "_Input-radioInner_4xor1_103", "Input-radioInput": "_Input-radioInput_4xor1_148" };
306
+ var styles_module_default2 = { "InputWrapper": "_InputWrapper_py9hf_1", "Input-label": "_Input-label_py9hf_5", "Input-labelIcon": "_Input-labelIcon_py9hf_14", "Input-disabledIcon": "_Input-disabledIcon_py9hf_21", "Input-input": "_Input-input_py9hf_26", "Input": "_Input_py9hf_1", "Input--readOnly": "_Input--readOnly_py9hf_76", "Input-radioGroupItems": "_Input-radioGroupItems_py9hf_87", "Input-radio": "_Input-radio_py9hf_87", "Input-radioInner": "_Input-radioInner_py9hf_104", "Input-radioInput": "_Input-radioInput_py9hf_149" };
313
307
 
314
308
  // components/AutoField/index.tsx
315
309
  var import_react22 = require("react");
@@ -798,43 +792,6 @@ init_react_import();
798
792
  // lib/data/walk-app-state.ts
799
793
  init_react_import();
800
794
 
801
- // lib/data/for-each-slot.ts
802
- init_react_import();
803
-
804
- // lib/data/is-slot.ts
805
- init_react_import();
806
- var isSlot = (prop) => {
807
- var _a, _b;
808
- return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
809
- };
810
- var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
811
- var _a, _b;
812
- const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
813
- if (!configForComponent) return isSlot(propValue);
814
- return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
815
- };
816
-
817
- // lib/data/for-each-slot.ts
818
- var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
819
- const props = item.props || {};
820
- const propKeys = Object.keys(props);
821
- for (let i = 0; i < propKeys.length; i++) {
822
- const propKey = propKeys[i];
823
- const itemType = "type" in item ? item.type : "root";
824
- if (isSlot2(itemType, propKey, props[propKey])) {
825
- const content = props[propKey];
826
- cb(props.id, propKey, content);
827
- if (recursive) {
828
- content.forEach(
829
- (childItem) => __async(void 0, null, function* () {
830
- return forEachSlot(childItem, cb, true, isSlot2);
831
- })
832
- );
833
- }
834
- }
835
- }
836
- };
837
-
838
795
  // lib/data/for-related-zones.ts
839
796
  init_react_import();
840
797
 
@@ -868,19 +825,169 @@ function forRelatedZones(item, data, cb, path = []) {
868
825
  });
869
826
  }
870
827
 
828
+ // lib/data/map-slots.ts
829
+ init_react_import();
830
+
831
+ // lib/data/default-slots.ts
832
+ init_react_import();
833
+ var defaultSlots = (value, fields) => Object.keys(fields).reduce(
834
+ (acc, fieldName) => fields[fieldName].type === "slot" ? __spreadValues({ [fieldName]: [] }, acc) : acc,
835
+ value
836
+ );
837
+
838
+ // lib/data/map-slots.ts
839
+ var isPromise = (v) => !!v && typeof v.then === "function";
840
+ var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
841
+ var containsPromise = (arr) => arr.some(isPromise);
842
+ var walkField = ({
843
+ value,
844
+ fields,
845
+ map,
846
+ propKey = "",
847
+ propPath = "",
848
+ id = "",
849
+ config,
850
+ recurseSlots = false
851
+ }) => {
852
+ var _a, _b, _c;
853
+ if (((_a = fields[propKey]) == null ? void 0 : _a.type) === "slot") {
854
+ const content = value || [];
855
+ const mappedContent = recurseSlots ? content.map((el) => {
856
+ var _a2;
857
+ const componentConfig = config.components[el.type];
858
+ if (!componentConfig) {
859
+ throw new Error(`Could not find component config for ${el.type}`);
860
+ }
861
+ const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
862
+ return walkField({
863
+ value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
864
+ fields: fields2,
865
+ map,
866
+ id: el.props.id,
867
+ config,
868
+ recurseSlots
869
+ });
870
+ }) : content;
871
+ if (containsPromise(mappedContent)) {
872
+ return Promise.all(mappedContent);
873
+ }
874
+ return map(mappedContent, id, propPath, fields[propKey], propPath);
875
+ }
876
+ if (value && typeof value === "object") {
877
+ if (Array.isArray(value)) {
878
+ const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
879
+ if (!arrayFields) return value;
880
+ const newValue = value.map(
881
+ (el, idx) => walkField({
882
+ value: el,
883
+ fields: arrayFields,
884
+ map,
885
+ propKey,
886
+ propPath: `${propPath}[${idx}]`,
887
+ id,
888
+ config,
889
+ recurseSlots
890
+ })
891
+ );
892
+ if (containsPromise(newValue)) {
893
+ return Promise.all(newValue);
894
+ }
895
+ return newValue;
896
+ } else if ("$$typeof" in value) {
897
+ return value;
898
+ } else {
899
+ const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
900
+ return walkObject({
901
+ value,
902
+ fields: objectFields,
903
+ map,
904
+ id,
905
+ getPropPath: (k) => `${propPath}.${k}`,
906
+ config,
907
+ recurseSlots
908
+ });
909
+ }
910
+ }
911
+ return value;
912
+ };
913
+ var walkObject = ({
914
+ value,
915
+ fields,
916
+ map,
917
+ id,
918
+ getPropPath,
919
+ config,
920
+ recurseSlots
921
+ }) => {
922
+ const newProps = Object.entries(value).map(([k, v]) => {
923
+ const opts = {
924
+ value: v,
925
+ fields,
926
+ map,
927
+ propKey: k,
928
+ propPath: getPropPath(k),
929
+ id,
930
+ config,
931
+ recurseSlots
932
+ };
933
+ const newValue = walkField(opts);
934
+ if (isPromise(newValue)) {
935
+ return newValue.then((resolvedValue) => ({
936
+ [k]: resolvedValue
937
+ }));
938
+ }
939
+ return {
940
+ [k]: newValue
941
+ };
942
+ }, {});
943
+ if (containsPromise(newProps)) {
944
+ return Promise.all(newProps).then(flatten);
945
+ }
946
+ return flatten(newProps);
947
+ };
948
+ function mapSlots(item, map, config, recurseSlots = false) {
949
+ var _a, _b, _c, _d, _e;
950
+ const itemType = "type" in item ? item.type : "root";
951
+ const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
952
+ const newProps = walkObject({
953
+ value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
954
+ fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
955
+ map,
956
+ id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
957
+ getPropPath: (k) => k,
958
+ config,
959
+ recurseSlots
960
+ });
961
+ if (isPromise(newProps)) {
962
+ return newProps.then((resolvedProps) => __spreadProps(__spreadValues({}, item), {
963
+ props: resolvedProps
964
+ }));
965
+ }
966
+ return __spreadProps(__spreadValues({}, item), {
967
+ props: newProps
968
+ });
969
+ }
970
+
971
+ // lib/data/flatten-node.ts
972
+ init_react_import();
973
+ var import_flat = require("flat");
974
+
871
975
  // lib/data/strip-slots.ts
872
976
  init_react_import();
873
- var stripSlots = (data) => {
874
- return __spreadProps(__spreadValues({}, data), {
875
- props: Object.entries(data.props).reduce(
876
- (acc, [propKey, propVal]) => {
877
- if (isSlot(propVal)) {
878
- return acc;
879
- }
880
- return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
881
- },
882
- { id: data.props.id }
883
- )
977
+ var stripSlots = (data, config) => {
978
+ return mapSlots(data, () => null, config);
979
+ };
980
+
981
+ // lib/data/flatten-node.ts
982
+ var flattenNode = (node, config) => {
983
+ return __spreadProps(__spreadValues({}, node), {
984
+ props: (0, import_flat.flatten)(stripSlots(node, config).props)
985
+ });
986
+ };
987
+ var expandNode = (node) => {
988
+ const props = (0, import_flat.unflatten)(node.props);
989
+ return __spreadProps(__spreadValues({}, node), {
990
+ props
884
991
  });
885
992
  };
886
993
 
@@ -926,10 +1033,9 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
926
1033
  const mappedItem = mapNodeOrSkip(item, path, index);
927
1034
  if (!mappedItem) return item;
928
1035
  const id = mappedItem.props.id;
929
- const newProps = __spreadValues({}, mappedItem.props);
930
- forEachSlot(
1036
+ const newProps = __spreadProps(__spreadValues({}, mapSlots(
931
1037
  mappedItem,
932
- (parentId2, slotId, content) => {
1038
+ (content, parentId2, slotId) => {
933
1039
  const zoneCompound = `${parentId2}:${slotId}`;
934
1040
  const [_2, newContent2] = processContent(
935
1041
  path,
@@ -938,18 +1044,19 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
938
1044
  "slot",
939
1045
  parentId2
940
1046
  );
941
- newProps[slotId] = newContent2;
1047
+ return newContent2;
942
1048
  },
943
- false,
944
- createIsSlotConfig(config)
945
- );
1049
+ config
1050
+ ).props), {
1051
+ id
1052
+ });
946
1053
  processRelatedZones(item, id, path);
947
1054
  const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
948
1055
  const thisZoneCompound = path[path.length - 1];
949
1056
  const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
950
1057
  newNodeIndex[id] = {
951
1058
  data: newItem,
952
- flatData: stripSlots(newItem),
1059
+ flatData: flattenNode(newItem, config),
953
1060
  path,
954
1061
  parentId,
955
1062
  zone
@@ -1052,56 +1159,17 @@ init_react_import();
1052
1159
 
1053
1160
  // lib/data/walk-tree.ts
1054
1161
  init_react_import();
1055
-
1056
- // lib/data/map-slots.ts
1057
- init_react_import();
1058
- function mapSlotsAsync(_0, _1) {
1059
- return __async(this, arguments, function* (item, map, recursive = true, isSlot2 = isSlot) {
1060
- const props = __spreadValues({}, item.props);
1061
- const propKeys = Object.keys(props);
1062
- for (let i = 0; i < propKeys.length; i++) {
1063
- const propKey = propKeys[i];
1064
- const itemType = "type" in item ? item.type : "root";
1065
- if (isSlot2(itemType, propKey, props[propKey])) {
1066
- const content = props[propKey];
1067
- const mappedContent = recursive ? yield Promise.all(
1068
- content.map((item2) => __async(this, null, function* () {
1069
- return yield mapSlotsAsync(item2, map, recursive, isSlot2);
1070
- }))
1071
- ) : content;
1072
- props[propKey] = yield map(mappedContent, propKey);
1073
- }
1074
- }
1075
- return __spreadProps(__spreadValues({}, item), { props });
1076
- });
1077
- }
1078
- function mapSlotsSync(item, map, isSlot2 = isSlot) {
1079
- var _a, _b;
1080
- const props = __spreadValues({}, item.props);
1081
- const propKeys = Object.keys(props);
1082
- for (let i = 0; i < propKeys.length; i++) {
1083
- const propKey = propKeys[i];
1084
- const itemType = "type" in item ? item.type : "root";
1085
- if (isSlot2(itemType, propKey, props[propKey])) {
1086
- const content = props[propKey];
1087
- const mappedContent = content.map((item2) => {
1088
- return mapSlotsSync(item2, map, isSlot2);
1089
- });
1090
- props[propKey] = (_b = map(mappedContent, (_a = props.id) != null ? _a : "root", propKey)) != null ? _b : mappedContent;
1091
- }
1092
- }
1093
- return __spreadProps(__spreadValues({}, item), { props });
1094
- }
1095
-
1096
- // lib/data/walk-tree.ts
1097
1162
  function walkTree(data, config, callbackFn) {
1098
1163
  var _a, _b;
1099
- const isSlot2 = createIsSlotConfig(config);
1100
1164
  const walkItem = (item) => {
1101
- return mapSlotsSync(
1165
+ return mapSlots(
1102
1166
  item,
1103
- (content, parentId, propName) => callbackFn(content, { parentId, propName }),
1104
- isSlot2
1167
+ (content, parentId, propName) => {
1168
+ var _a2;
1169
+ return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
1170
+ },
1171
+ config,
1172
+ true
1105
1173
  );
1106
1174
  };
1107
1175
  if ("props" in data) {
@@ -1130,7 +1198,7 @@ var populateIds = (data, config, override = false) => {
1130
1198
  const id = generateId(data.type);
1131
1199
  return walkTree(
1132
1200
  __spreadProps(__spreadValues({}, data), {
1133
- props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({ id }, data.props)
1201
+ props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
1134
1202
  }),
1135
1203
  config,
1136
1204
  (contents) => contents.map((item) => {
@@ -1832,7 +1900,11 @@ var createNodesSlice = (set, get) => ({
1832
1900
  const s = get().nodes;
1833
1901
  const emptyNode = {
1834
1902
  id,
1835
- methods: { sync: () => null },
1903
+ methods: {
1904
+ sync: () => null,
1905
+ hideOverlay: () => null,
1906
+ showOverlay: () => null
1907
+ },
1836
1908
  element: null
1837
1909
  };
1838
1910
  const existingNode = s.nodes[id];
@@ -1883,12 +1955,13 @@ var flattenData = (state, config) => {
1883
1955
 
1884
1956
  // lib/get-changed.ts
1885
1957
  init_react_import();
1958
+ var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
1886
1959
  var getChanged = (newItem, oldItem) => {
1887
1960
  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
1888
1961
  const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
1889
1962
  const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
1890
1963
  return __spreadProps(__spreadValues({}, acc), {
1891
- [item]: oldItemProps[item] !== newItemProps[item]
1964
+ [item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
1892
1965
  });
1893
1966
  }, {}) : {};
1894
1967
  };
@@ -2034,7 +2107,8 @@ var createFieldsSlice = (_set, _get) => {
2034
2107
  return {
2035
2108
  fields: {},
2036
2109
  loading: false,
2037
- lastResolvedData: {}
2110
+ lastResolvedData: {},
2111
+ id: void 0
2038
2112
  };
2039
2113
  };
2040
2114
  var useRegisterFieldsSlice = (appStore, id) => {
@@ -2055,7 +2129,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
2055
2129
  let lastFields = fields;
2056
2130
  if (reset) {
2057
2131
  appStore.setState((s) => ({
2058
- fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
2132
+ fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
2059
2133
  }));
2060
2134
  lastFields = defaultFields;
2061
2135
  }
@@ -2083,12 +2157,13 @@ var useRegisterFieldsSlice = (appStore, id) => {
2083
2157
  fields: {
2084
2158
  fields: newFields,
2085
2159
  loading: false,
2086
- lastResolvedData: componentData
2160
+ lastResolvedData: componentData,
2161
+ id
2087
2162
  }
2088
2163
  });
2089
2164
  } else {
2090
2165
  appStore.setState((s) => ({
2091
- fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
2166
+ fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
2092
2167
  }));
2093
2168
  }
2094
2169
  }),
@@ -2105,14 +2180,16 @@ var useRegisterFieldsSlice = (appStore, id) => {
2105
2180
 
2106
2181
  // lib/resolve-component-data.ts
2107
2182
  init_react_import();
2108
- var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
2183
+ var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
2109
2184
  var cache = { lastChange: {} };
2110
- var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", recursive = true) {
2185
+ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
2111
2186
  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
2112
- if ((configForItem == null ? void 0 : configForItem.resolveData) && item.props) {
2113
- const id = "id" in item.props ? item.props.id : "root";
2187
+ const resolvedItem = __spreadValues({}, item);
2188
+ const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
2189
+ const id = "id" in item.props ? item.props.id : "root";
2190
+ if (shouldRunResolver) {
2114
2191
  const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
2115
- if (item && (0, import_fast_deep_equal.default)(item, oldItem)) {
2192
+ if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
2116
2193
  return { node: resolved, didChange: false };
2117
2194
  }
2118
2195
  const changed = getChanged(item, oldItem);
@@ -2125,46 +2202,42 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
2125
2202
  metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
2126
2203
  trigger
2127
2204
  });
2128
- let resolvedItem = __spreadProps(__spreadValues({}, item), {
2129
- props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
2130
- });
2131
- if (recursive) {
2132
- resolvedItem = yield mapSlotsAsync(
2133
- resolvedItem,
2134
- (content) => __async(void 0, null, function* () {
2135
- return Promise.all(
2136
- content.map(
2137
- (childItem) => __async(void 0, null, function* () {
2138
- return (yield resolveComponentData(
2139
- childItem,
2140
- config,
2141
- metadata,
2142
- onResolveStart,
2143
- onResolveEnd,
2144
- trigger,
2145
- false
2146
- )).node;
2147
- })
2148
- )
2149
- );
2150
- }),
2151
- false,
2152
- createIsSlotConfig(config)
2153
- );
2154
- }
2205
+ resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
2155
2206
  if (Object.keys(readOnly).length) {
2156
2207
  resolvedItem.readOnly = readOnly;
2157
2208
  }
2158
- cache.lastChange[id] = {
2159
- item,
2160
- resolved: resolvedItem
2161
- };
2162
- if (onResolveEnd) {
2163
- onResolveEnd(resolvedItem);
2164
- }
2165
- return { node: resolvedItem, didChange: !(0, import_fast_deep_equal.default)(item, resolvedItem) };
2166
2209
  }
2167
- return { node: item, didChange: false };
2210
+ let itemWithResolvedChildren = yield mapSlots(
2211
+ resolvedItem,
2212
+ (content) => __async(void 0, null, function* () {
2213
+ return yield Promise.all(
2214
+ content.map(
2215
+ (childItem) => __async(void 0, null, function* () {
2216
+ return (yield resolveComponentData(
2217
+ childItem,
2218
+ config,
2219
+ metadata,
2220
+ onResolveStart,
2221
+ onResolveEnd,
2222
+ trigger
2223
+ )).node;
2224
+ })
2225
+ )
2226
+ );
2227
+ }),
2228
+ config
2229
+ );
2230
+ if (shouldRunResolver && onResolveEnd) {
2231
+ onResolveEnd(resolvedItem);
2232
+ }
2233
+ cache.lastChange[id] = {
2234
+ item,
2235
+ resolved: itemWithResolvedChildren
2236
+ };
2237
+ return {
2238
+ node: itemWithResolvedChildren,
2239
+ didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
2240
+ };
2168
2241
  });
2169
2242
 
2170
2243
  // lib/data/to-root.ts
@@ -2184,7 +2257,8 @@ var toRoot = (item) => {
2184
2257
  return { props: {}, readOnly };
2185
2258
  };
2186
2259
 
2187
- // store/index.ts
2260
+ // store/default-app-state.ts
2261
+ init_react_import();
2188
2262
  var defaultAppState = {
2189
2263
  data: { content: [], root: {}, zones: {} },
2190
2264
  ui: {
@@ -2210,6 +2284,8 @@ var defaultAppState = {
2210
2284
  zones: {}
2211
2285
  }
2212
2286
  };
2287
+
2288
+ // store/index.ts
2213
2289
  var defaultPageFields = {
2214
2290
  title: { type: "text" }
2215
2291
  };
@@ -2398,328 +2474,30 @@ function useAppStoreApi() {
2398
2474
  init_react_import();
2399
2475
  var import_react12 = require("@dnd-kit/react");
2400
2476
 
2401
- // lib/dnd/dnd-kit/safe.ts
2402
- init_react_import();
2403
- var import_react10 = require("@dnd-kit/react");
2404
- var import_sortable = require("@dnd-kit/react/sortable");
2405
- function useDroppableSafe(input) {
2406
- if (typeof window === "undefined") {
2407
- return { ref: () => {
2408
- } };
2409
- }
2410
- return (0, import_react10.useDroppable)(input);
2411
- }
2412
- function useDraggableSafe(input) {
2413
- if (typeof window === "undefined") {
2414
- return { ref: () => {
2415
- } };
2416
- }
2417
- return (0, import_react10.useDraggable)(input);
2418
- }
2419
- function useSortableSafe(input) {
2420
- if (typeof window === "undefined") {
2421
- return { ref: () => {
2422
- }, status: "idle", handleRef: () => {
2423
- } };
2424
- }
2425
- return (0, import_sortable.useSortable)(input);
2426
- }
2427
-
2428
2477
  // lib/dnd/use-sensors.ts
2429
2478
  init_react_import();
2430
- var import_react11 = require("react");
2431
-
2432
- // lib/dnd/PointerSensor.ts
2433
- init_react_import();
2434
- var import_state = require("@dnd-kit/state");
2435
- var import_abstract = require("@dnd-kit/abstract");
2436
- var import_geometry = require("@dnd-kit/geometry");
2479
+ var import_react10 = require("react");
2480
+ var import_react11 = require("@dnd-kit/react");
2437
2481
  var import_utilities = require("@dnd-kit/dom/utilities");
2438
- var _clearTimeout;
2439
- var _PointerSensor = class _PointerSensor extends import_abstract.Sensor {
2440
- constructor(manager, options) {
2441
- super(manager);
2442
- this.manager = manager;
2443
- this.options = options;
2444
- this.listeners = new import_utilities.Listeners();
2445
- this.cleanup = /* @__PURE__ */ new Set();
2446
- this.source = void 0;
2447
- this.started = false;
2448
- __privateAdd(this, _clearTimeout);
2449
- this.handleCancel = this.handleCancel.bind(this);
2450
- this.handlePointerUp = this.handlePointerUp.bind(this);
2451
- this.handleKeyDown = this.handleKeyDown.bind(this);
2452
- (0, import_state.effect)(() => {
2453
- const unbindGlobal = this.bindGlobal(options != null ? options : {});
2454
- return () => {
2455
- unbindGlobal();
2456
- };
2457
- });
2458
- }
2459
- bind(source, options = this.options) {
2460
- const unbind = (0, import_state.effect)(() => {
2461
- var _a;
2462
- const target = (_a = source.handle) != null ? _a : source.element;
2463
- const listener = (event) => {
2464
- if ((0, import_utilities.isPointerEvent)(event)) {
2465
- this.handlePointerDown(event, source, options);
2466
- }
2467
- };
2468
- if (target) {
2469
- patchWindow(target.ownerDocument.defaultView);
2470
- target.addEventListener("pointerdown", listener);
2471
- return () => {
2472
- target.removeEventListener("pointerdown", listener);
2473
- };
2474
- }
2475
- });
2476
- return unbind;
2477
- }
2478
- bindGlobal(options) {
2479
- const documents = /* @__PURE__ */ new Set();
2480
- for (const draggable of this.manager.registry.draggables.value) {
2481
- if (draggable.element) {
2482
- documents.add((0, import_utilities.getDocument)(draggable.element));
2483
- }
2484
- }
2485
- for (const droppable of this.manager.registry.droppables.value) {
2486
- if (droppable.element) {
2487
- documents.add((0, import_utilities.getDocument)(droppable.element));
2488
- }
2489
- }
2490
- const unbindFns = Array.from(documents).map(
2491
- (doc) => this.listeners.bind(doc, [
2492
- {
2493
- type: "pointermove",
2494
- listener: (event) => this.handlePointerMove(event, doc, options)
2495
- },
2496
- {
2497
- type: "pointerup",
2498
- listener: this.handlePointerUp,
2499
- options: {
2500
- capture: true
2501
- }
2502
- },
2503
- {
2504
- // Cancel activation if there is a competing Drag and Drop interaction
2505
- type: "dragstart",
2506
- listener: this.handleDragStart
2507
- }
2508
- ])
2509
- );
2510
- return () => {
2511
- unbindFns.forEach((unbind) => unbind());
2512
- };
2513
- }
2514
- handlePointerDown(event, source, options = {}) {
2515
- if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
2516
- return;
2517
- }
2518
- const offset = (0, import_utilities.getFrameTransform)(source.element);
2519
- this.initialCoordinates = {
2520
- x: event.clientX * offset.scaleX + offset.x,
2521
- y: event.clientY * offset.scaleY + offset.y
2522
- };
2523
- this.source = source;
2524
- const { activationConstraints } = options;
2525
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
2526
- event.stopImmediatePropagation();
2527
- if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
2528
- this.handleStart(source, event);
2529
- } else {
2530
- const { delay } = constraints;
2531
- if (delay) {
2532
- const timeout3 = setTimeout(
2533
- () => this.handleStart(source, event),
2534
- delay.value
2535
- );
2536
- __privateSet(this, _clearTimeout, () => {
2537
- clearTimeout(timeout3);
2538
- __privateSet(this, _clearTimeout, void 0);
2539
- });
2540
- }
2541
- }
2542
- const cleanup = () => {
2543
- var _a;
2544
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2545
- this.initialCoordinates = void 0;
2546
- this.source = void 0;
2547
- };
2548
- this.cleanup.add(cleanup);
2549
- }
2550
- handlePointerMove(event, doc, options) {
2551
- if (!this.source) {
2552
- return;
2553
- }
2554
- const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
2555
- if (doc !== ownerDocument) {
2556
- return;
2557
- }
2558
- const coordinates = {
2559
- x: event.clientX,
2560
- y: event.clientY
2561
- };
2562
- const offset = (0, import_utilities.getFrameTransform)(this.source.element);
2563
- coordinates.x = coordinates.x * offset.scaleX + offset.x;
2564
- coordinates.y = coordinates.y * offset.scaleY + offset.y;
2565
- if (this.manager.dragOperation.status.dragging) {
2566
- event.preventDefault();
2567
- event.stopPropagation();
2568
- this.manager.actions.move({ to: coordinates });
2569
- return;
2570
- }
2571
- if (!this.initialCoordinates) {
2572
- return;
2573
- }
2574
- const delta = {
2575
- x: coordinates.x - this.initialCoordinates.x,
2576
- y: coordinates.y - this.initialCoordinates.y
2577
- };
2578
- const { activationConstraints } = options;
2579
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
2580
- const { distance, delay } = constraints != null ? constraints : {};
2581
- if (distance) {
2582
- if (distance.tolerance != null && (0, import_geometry.exceedsDistance)(delta, distance.tolerance)) {
2583
- return this.handleCancel();
2584
- }
2585
- if ((0, import_geometry.exceedsDistance)(delta, distance.value)) {
2586
- return this.handleStart(this.source, event);
2587
- }
2588
- }
2589
- if (delay) {
2590
- if ((0, import_geometry.exceedsDistance)(delta, delay.tolerance)) {
2591
- return this.handleCancel();
2592
- }
2593
- }
2594
- }
2595
- handlePointerUp(event) {
2596
- if (!this.source) {
2597
- return;
2598
- }
2599
- event.preventDefault();
2600
- event.stopPropagation();
2601
- const { status } = this.manager.dragOperation;
2602
- if (!status.idle) {
2603
- const canceled = !status.initialized;
2604
- this.manager.actions.stop({ canceled });
2605
- } else if (this.started) {
2606
- setTimeout(() => {
2607
- if (!this.manager.dragOperation.status.idle) {
2608
- this.manager.actions.stop({ canceled: false });
2609
- }
2610
- }, 10);
2611
- }
2612
- this.cleanup.forEach((cleanup) => cleanup());
2613
- this.cleanup.clear();
2614
- }
2615
- handleKeyDown(event) {
2616
- if (event.key === "Escape") {
2617
- event.preventDefault();
2618
- this.handleCancel();
2619
- }
2620
- }
2621
- handleStart(source, event) {
2622
- var _a;
2623
- const { manager, initialCoordinates } = this;
2624
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2625
- if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
2626
- return;
2627
- }
2628
- if (event.defaultPrevented) {
2629
- return;
2630
- }
2631
- this.started = true;
2632
- event.preventDefault();
2633
- (0, import_state.batch)(() => {
2634
- manager.actions.setDragSource(source.id);
2635
- manager.actions.start({ coordinates: initialCoordinates, event });
2636
- });
2637
- const ownerDocument = (0, import_utilities.getDocument)(event.target);
2638
- const unbind = this.listeners.bind(ownerDocument, [
2639
- {
2640
- // Prevent scrolling on touch devices
2641
- type: "touchmove",
2642
- listener: preventDefault,
2643
- options: {
2644
- passive: false
2645
- }
2646
- },
2647
- {
2648
- // Prevent click events
2649
- type: "click",
2650
- listener: preventDefault
2651
- },
2652
- {
2653
- type: "keydown",
2654
- listener: this.handleKeyDown
2655
- }
2656
- ]);
2657
- ownerDocument.body.setPointerCapture(event.pointerId);
2658
- this.cleanup.add(unbind);
2659
- this.cleanup.add(() => {
2660
- this.started = false;
2661
- });
2662
- }
2663
- handleDragStart(event) {
2664
- const { target } = event;
2665
- if (!(0, import_utilities.isElement)(target)) {
2666
- return;
2667
- }
2668
- const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
2669
- if (isNativeDraggable) {
2670
- this.handleCancel();
2671
- } else {
2672
- preventDefault(event);
2673
- }
2674
- }
2675
- handleCancel() {
2676
- const { dragOperation } = this.manager;
2677
- if (dragOperation.status.initialized) {
2678
- this.manager.actions.stop({ canceled: true });
2679
- }
2680
- this.cleanup.forEach((cleanup) => cleanup());
2681
- this.cleanup.clear();
2682
- }
2683
- destroy() {
2684
- this.listeners.clear();
2685
- }
2482
+ var touchDefault = { delay: { value: 200, tolerance: 10 } };
2483
+ var otherDefault = {
2484
+ delay: { value: 200, tolerance: 10 },
2485
+ distance: { value: 5 }
2686
2486
  };
2687
- _clearTimeout = new WeakMap();
2688
- _PointerSensor.configure = (0, import_abstract.configurator)(_PointerSensor);
2689
- var PointerSensor = _PointerSensor;
2690
- function preventDefault(event) {
2691
- event.preventDefault();
2692
- }
2693
- function noop() {
2694
- }
2695
- var windows = /* @__PURE__ */ new WeakSet();
2696
- function patchWindow(window2) {
2697
- if (!window2 || windows.has(window2)) {
2698
- return;
2699
- }
2700
- window2.addEventListener("touchmove", noop, {
2701
- capture: false,
2702
- passive: false
2703
- });
2704
- windows.add(window2);
2705
- }
2706
-
2707
- // lib/dnd/use-sensors.ts
2708
- var import_utilities2 = require("@dnd-kit/dom/utilities");
2709
2487
  var useSensors = ({
2710
- other,
2488
+ other = otherDefault,
2711
2489
  mouse,
2712
- touch
2490
+ touch = touchDefault
2713
2491
  } = {
2714
- touch: { delay: { value: 200, tolerance: 10 } },
2715
- other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
2492
+ touch: touchDefault,
2493
+ other: otherDefault
2716
2494
  }) => {
2717
- const [sensors] = (0, import_react11.useState)(() => [
2718
- PointerSensor.configure({
2495
+ const [sensors] = (0, import_react10.useState)(() => [
2496
+ import_react11.PointerSensor.configure({
2719
2497
  activationConstraints(event, source) {
2720
2498
  var _a;
2721
2499
  const { pointerType, target } = event;
2722
- if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
2500
+ if (pointerType === "mouse" && (0, import_utilities.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
2723
2501
  return mouse;
2724
2502
  }
2725
2503
  if (pointerType === "touch") {
@@ -2734,11 +2512,11 @@ var useSensors = ({
2734
2512
 
2735
2513
  // lib/dnd/collision/dynamic/index.ts
2736
2514
  init_react_import();
2737
- var import_abstract9 = require("@dnd-kit/abstract");
2515
+ var import_abstract8 = require("@dnd-kit/abstract");
2738
2516
 
2739
2517
  // lib/dnd/collision/directional/index.ts
2740
2518
  init_react_import();
2741
- var import_abstract2 = require("@dnd-kit/abstract");
2519
+ var import_abstract = require("@dnd-kit/abstract");
2742
2520
 
2743
2521
  // lib/dnd/collision/collision-debug.ts
2744
2522
  init_react_import();
@@ -2816,7 +2594,7 @@ var directionalCollision = (input, previous) => {
2816
2594
  return {
2817
2595
  id: droppable.id,
2818
2596
  value: 1,
2819
- type: import_abstract2.CollisionType.Collision
2597
+ type: import_abstract.CollisionType.Collision
2820
2598
  };
2821
2599
  }
2822
2600
  return null;
@@ -2858,7 +2636,7 @@ var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0)
2858
2636
 
2859
2637
  // lib/dnd/collision/dynamic/track-movement-interval.ts
2860
2638
  init_react_import();
2861
- var import_geometry2 = require("@dnd-kit/geometry");
2639
+ var import_geometry = require("@dnd-kit/geometry");
2862
2640
  var INTERVAL_SENSITIVITY = 10;
2863
2641
  var intervalCache = {
2864
2642
  current: { x: 0, y: 0 },
@@ -2874,13 +2652,15 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
2874
2652
  };
2875
2653
  intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
2876
2654
  if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
2877
- intervalCache.previous = import_geometry2.Point.from(point);
2655
+ intervalCache.previous = import_geometry.Point.from(point);
2878
2656
  }
2879
2657
  return intervalCache;
2880
2658
  };
2881
2659
 
2882
2660
  // ../../node_modules/@dnd-kit/collision/dist/index.js
2883
2661
  init_react_import();
2662
+ var import_abstract2 = require("@dnd-kit/abstract");
2663
+ var import_geometry2 = require("@dnd-kit/geometry");
2884
2664
  var import_abstract3 = require("@dnd-kit/abstract");
2885
2665
  var import_geometry3 = require("@dnd-kit/geometry");
2886
2666
  var import_abstract4 = require("@dnd-kit/abstract");
@@ -2891,8 +2671,6 @@ var import_abstract6 = require("@dnd-kit/abstract");
2891
2671
  var import_geometry6 = require("@dnd-kit/geometry");
2892
2672
  var import_abstract7 = require("@dnd-kit/abstract");
2893
2673
  var import_geometry7 = require("@dnd-kit/geometry");
2894
- var import_abstract8 = require("@dnd-kit/abstract");
2895
- var import_geometry8 = require("@dnd-kit/geometry");
2896
2674
  var pointerIntersection = ({
2897
2675
  dragOperation,
2898
2676
  droppable
@@ -2906,12 +2684,12 @@ var pointerIntersection = ({
2906
2684
  return null;
2907
2685
  }
2908
2686
  if (droppable.shape.containsPoint(pointerCoordinates)) {
2909
- const distance = import_geometry3.Point.distance(droppable.shape.center, pointerCoordinates);
2687
+ const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
2910
2688
  return {
2911
2689
  id,
2912
2690
  value: 1 / distance,
2913
- type: import_abstract3.CollisionType.PointerIntersection,
2914
- priority: import_abstract3.CollisionPriority.High
2691
+ type: import_abstract2.CollisionType.PointerIntersection,
2692
+ priority: import_abstract2.CollisionPriority.High
2915
2693
  };
2916
2694
  }
2917
2695
  return null;
@@ -2922,31 +2700,15 @@ var closestCorners = (input) => {
2922
2700
  if (!droppable.shape) {
2923
2701
  return null;
2924
2702
  }
2925
- const { left, top, right, bottom } = droppable.shape.boundingRectangle;
2926
- const corners = [
2927
- {
2928
- x: left,
2929
- y: top
2930
- },
2931
- {
2932
- x: right,
2933
- y: top
2934
- },
2935
- {
2936
- x: left,
2937
- y: bottom
2938
- },
2939
- {
2940
- x: right,
2941
- y: bottom
2942
- }
2943
- ];
2944
- const distance = corners.reduce(
2945
- (acc, corner) => {
2703
+ const shapeCorners = shape ? import_geometry4.Rectangle.from(shape.current.boundingRectangle).corners : void 0;
2704
+ const distance = import_geometry4.Rectangle.from(
2705
+ droppable.shape.boundingRectangle
2706
+ ).corners.reduce(
2707
+ (acc, corner, index) => {
2946
2708
  var _a;
2947
- return acc + import_geometry5.Point.distance(
2948
- import_geometry5.Point.from(corner),
2949
- (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
2709
+ return acc + import_geometry4.Point.distance(
2710
+ import_geometry4.Point.from(corner),
2711
+ (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
2950
2712
  );
2951
2713
  },
2952
2714
  0
@@ -2955,8 +2717,8 @@ var closestCorners = (input) => {
2955
2717
  return {
2956
2718
  id: droppable.id,
2957
2719
  value: 1 / value,
2958
- type: import_abstract5.CollisionType.Collision,
2959
- priority: import_abstract5.CollisionPriority.Normal
2720
+ type: import_abstract4.CollisionType.Collision,
2721
+ priority: import_abstract4.CollisionPriority.Normal
2960
2722
  };
2961
2723
  };
2962
2724
 
@@ -2981,12 +2743,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2981
2743
  const { center: dragCenter } = dragShape;
2982
2744
  const { fallbackEnabled } = collisionStore.getState();
2983
2745
  const interval = trackMovementInterval(position.current, dragAxis);
2984
- dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
2985
- direction: interval.direction
2986
- });
2987
- const collisionMap = dragOperation.data.collisionMap || {};
2988
- dragOperation.data.collisionMap = collisionMap;
2989
- collisionMap[droppable.id] = {
2746
+ const data = {
2990
2747
  direction: interval.direction
2991
2748
  };
2992
2749
  const { center: dropCenter } = dropShape;
@@ -3001,7 +2758,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3001
2758
  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
3002
2759
  if (collision) {
3003
2760
  return __spreadProps(__spreadValues({}, collision), {
3004
- priority: import_abstract9.CollisionPriority.Highest
2761
+ priority: import_abstract8.CollisionPriority.Highest,
2762
+ data
3005
2763
  });
3006
2764
  }
3007
2765
  }
@@ -3018,12 +2776,12 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3018
2776
  const collision = {
3019
2777
  id: droppable.id,
3020
2778
  value: intersectionRatio,
3021
- priority: import_abstract9.CollisionPriority.High,
3022
- type: import_abstract9.CollisionType.Collision
2779
+ priority: import_abstract8.CollisionPriority.High,
2780
+ type: import_abstract8.CollisionType.Collision
3023
2781
  };
3024
2782
  const shouldFlushId = flushNext === droppable.id;
3025
2783
  flushNext = "";
3026
- return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
2784
+ return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id, data });
3027
2785
  }
3028
2786
  if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
3029
2787
  const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
@@ -3035,9 +2793,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3035
2793
  x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
3036
2794
  y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
3037
2795
  });
3038
- collisionMap[droppable.id] = {
3039
- direction
3040
- };
2796
+ data.direction = direction;
3041
2797
  if (intersectionArea) {
3042
2798
  collisionDebug(
3043
2799
  dragCenter,
@@ -3048,7 +2804,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3048
2804
  );
3049
2805
  flushNext = droppable.id;
3050
2806
  return __spreadProps(__spreadValues({}, fallbackCollision), {
3051
- priority: import_abstract9.CollisionPriority.Low
2807
+ priority: import_abstract8.CollisionPriority.Low,
2808
+ data
3052
2809
  });
3053
2810
  }
3054
2811
  collisionDebug(
@@ -3058,16 +2815,19 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
3058
2815
  "orange",
3059
2816
  direction || ""
3060
2817
  );
3061
- return __spreadProps(__spreadValues({}, fallbackCollision), { priority: import_abstract9.CollisionPriority.Lowest });
2818
+ return __spreadProps(__spreadValues({}, fallbackCollision), {
2819
+ priority: import_abstract8.CollisionPriority.Lowest,
2820
+ data
2821
+ });
3062
2822
  }
3063
2823
  }
3064
2824
  }
3065
2825
  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
3066
- delete collisionMap[droppable.id];
3067
2826
  return null;
3068
2827
  };
3069
2828
 
3070
2829
  // components/Sortable/index.tsx
2830
+ var import_sortable = require("@dnd-kit/react/sortable");
3071
2831
  var import_jsx_runtime5 = require("react/jsx-runtime");
3072
2832
  var SortableProvider = ({
3073
2833
  children,
@@ -3087,16 +2847,16 @@ var SortableProvider = ({
3087
2847
  return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
3088
2848
  },
3089
2849
  onDragOver: (event, manager) => {
3090
- var _a, _b;
2850
+ var _a;
3091
2851
  event.preventDefault();
3092
2852
  const { operation } = event;
3093
2853
  const { source, target } = operation;
3094
2854
  if (!source || !target) return;
3095
2855
  let sourceIndex = source.data.index;
3096
2856
  let targetIndex = target.data.index;
3097
- const collisionData = (_b = (_a = manager.dragOperation.data) == null ? void 0 : _a.collisionMap) == null ? void 0 : _b[target.id];
2857
+ const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
3098
2858
  if (sourceIndex !== targetIndex && source.id !== target.id) {
3099
- const collisionPosition = collisionData.direction === "up" ? "before" : "after";
2859
+ const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
3100
2860
  if (targetIndex >= sourceIndex) {
3101
2861
  targetIndex = targetIndex - 1;
3102
2862
  }
@@ -3127,9 +2887,10 @@ var Sortable = ({
3127
2887
  }) => {
3128
2888
  const {
3129
2889
  ref: sortableRef,
3130
- status,
2890
+ isDragging,
2891
+ isDropping,
3131
2892
  handleRef
3132
- } = useSortableSafe({
2893
+ } = (0, import_sortable.useSortable)({
3133
2894
  id,
3134
2895
  type,
3135
2896
  index,
@@ -3137,7 +2898,7 @@ var Sortable = ({
3137
2898
  data: { index },
3138
2899
  collisionDetector: createDynamicCollisionDetector("y")
3139
2900
  });
3140
- return children({ status, ref: sortableRef, handleRef });
2901
+ return children({ isDragging, isDropping, ref: sortableRef, handleRef });
3141
2902
  };
3142
2903
 
3143
2904
  // components/AutoField/context.tsx
@@ -3262,12 +3023,25 @@ var ArrayField = ({
3262
3023
  }
3263
3024
  }, []);
3264
3025
  const [draggedItem, setDraggedItem] = (0, import_react14.useState)("");
3265
- const isDragging = !!draggedItem;
3026
+ const isDraggingAny = !!draggedItem;
3266
3027
  const canEdit = useAppStore(
3267
3028
  (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
3268
3029
  );
3269
3030
  const forceReadOnly = !canEdit;
3270
3031
  const valueRef = (0, import_react14.useRef)(value);
3032
+ const uniqifyItem = (0, import_react14.useCallback)(
3033
+ (val) => {
3034
+ if (field.type !== "array" || !field.arrayFields) return;
3035
+ const config = appStore.getState().config;
3036
+ return walkField({
3037
+ value: val,
3038
+ fields: field.arrayFields,
3039
+ map: (content) => content.map((item) => populateIds(item, config, true)),
3040
+ config
3041
+ });
3042
+ },
3043
+ [appStore, field]
3044
+ );
3271
3045
  if (field.type !== "array" || !field.arrayFields) {
3272
3046
  return null;
3273
3047
  }
@@ -3327,13 +3101,13 @@ var ArrayField = ({
3327
3101
  id: _arrayId,
3328
3102
  index: i,
3329
3103
  disabled: readOnly,
3330
- children: ({ status, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3104
+ children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3331
3105
  "div",
3332
3106
  {
3333
3107
  ref,
3334
3108
  className: getClassNameItem({
3335
3109
  isExpanded: arrayState.openId === _arrayId,
3336
- isDragging: status === "dragging",
3110
+ isDragging,
3337
3111
  readOnly
3338
3112
  }),
3339
3113
  children: [
@@ -3372,11 +3146,10 @@ var ArrayField = ({
3372
3146
  onClick: (e) => {
3373
3147
  e.stopPropagation();
3374
3148
  const existingValue = [...value || []];
3375
- existingValue.splice(
3376
- i,
3377
- 0,
3149
+ const newItem = uniqifyItem(
3378
3150
  existingValue[i]
3379
3151
  );
3152
+ existingValue.splice(i, 0, newItem);
3380
3153
  const newUi = mapArrayStateToUi(
3381
3154
  regenerateArrayState(existingValue)
3382
3155
  );
@@ -3474,12 +3247,14 @@ var ArrayField = ({
3474
3247
  type: "button",
3475
3248
  className: getClassName5("addButton"),
3476
3249
  onClick: () => {
3477
- if (isDragging) return;
3250
+ var _a;
3251
+ if (isDraggingAny) return;
3478
3252
  const existingValue = value || [];
3479
- const newValue = [
3480
- ...existingValue,
3481
- field.defaultItemProps || {}
3482
- ];
3253
+ const newItem = defaultSlots(
3254
+ uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
3255
+ field.arrayFields
3256
+ );
3257
+ const newValue = [...existingValue, newItem];
3483
3258
  const newArrayState = regenerateArrayState(newValue);
3484
3259
  setUi(mapArrayStateToUi(newArrayState), false);
3485
3260
  onChange(newValue);
@@ -4373,6 +4148,10 @@ function AutoFieldInternal(props) {
4373
4148
  });
4374
4149
  }
4375
4150
  }, []);
4151
+ const { visible = true } = props.field;
4152
+ if (!visible) {
4153
+ return null;
4154
+ }
4376
4155
  if (field.type === "slot") {
4377
4156
  return null;
4378
4157
  }
@@ -4457,24 +4236,24 @@ init_react_import();
4457
4236
 
4458
4237
  // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
4459
4238
  init_react_import();
4460
- var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
4239
+ var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
4461
4240
 
4462
4241
  // components/Drawer/index.tsx
4463
- var import_react37 = require("react");
4242
+ var import_react39 = require("react");
4464
4243
 
4465
4244
  // components/DragDropContext/index.tsx
4466
4245
  init_react_import();
4467
- var import_react35 = require("@dnd-kit/react");
4468
- var import_react36 = require("react");
4246
+ var import_react37 = require("@dnd-kit/react");
4247
+ var import_react38 = require("react");
4469
4248
  var import_dom = require("@dnd-kit/dom");
4470
4249
 
4471
4250
  // components/DropZone/index.tsx
4472
4251
  init_react_import();
4473
- var import_react34 = require("react");
4252
+ var import_react35 = require("react");
4474
4253
 
4475
4254
  // components/DraggableComponent/index.tsx
4476
4255
  init_react_import();
4477
- var import_react25 = require("react");
4256
+ var import_react26 = require("react");
4478
4257
 
4479
4258
  // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
4480
4259
  init_react_import();
@@ -4515,7 +4294,9 @@ var ZoneStoreContext = (0, import_react23.createContext)(
4515
4294
  areaDepthIndex: {},
4516
4295
  nextAreaDepthIndex: {},
4517
4296
  draggedItem: null,
4518
- previewIndex: {}
4297
+ previewIndex: {},
4298
+ enabledIndex: {},
4299
+ hoveringComponent: null
4519
4300
  }))
4520
4301
  );
4521
4302
  var ZoneStoreProvider = ({
@@ -4528,7 +4309,6 @@ var DropZoneProvider = ({
4528
4309
  children,
4529
4310
  value
4530
4311
  }) => {
4531
- const [hoveringComponent, setHoveringComponent] = (0, import_react23.useState)();
4532
4312
  const dispatch = useAppStore((s) => s.dispatch);
4533
4313
  const registerZone = (0, import_react23.useCallback)(
4534
4314
  (zoneCompound) => {
@@ -4550,16 +4330,33 @@ var DropZoneProvider = ({
4550
4330
  );
4551
4331
  const memoValue = (0, import_react23.useMemo)(
4552
4332
  () => __spreadValues({
4553
- hoveringComponent,
4554
- setHoveringComponent,
4555
4333
  registerZone,
4556
4334
  unregisterZone
4557
4335
  }, value),
4558
- [value, hoveringComponent]
4336
+ [value]
4559
4337
  );
4560
4338
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
4561
4339
  };
4562
4340
 
4341
+ // components/DraggableComponent/index.tsx
4342
+ var import_shallow2 = require("zustand/react/shallow");
4343
+ var import_sortable2 = require("@dnd-kit/react/sortable");
4344
+
4345
+ // lib/accumulate-transform.ts
4346
+ init_react_import();
4347
+ function accumulateTransform(el) {
4348
+ let matrix = new DOMMatrixReadOnly();
4349
+ let n = el.parentElement;
4350
+ while (n && n !== document.documentElement) {
4351
+ const t = getComputedStyle(n).transform;
4352
+ if (t && t !== "none") {
4353
+ matrix = new DOMMatrixReadOnly(t).multiply(matrix);
4354
+ }
4355
+ n = n.parentElement;
4356
+ }
4357
+ return { scaleX: matrix.a, scaleY: matrix.d };
4358
+ }
4359
+
4563
4360
  // lib/use-context-store.ts
4564
4361
  init_react_import();
4565
4362
  var import_react24 = require("react");
@@ -4573,8 +4370,39 @@ function useContextStore(context, selector) {
4573
4370
  return (0, import_zustand4.useStore)(store, (0, import_shallow.useShallow)(selector));
4574
4371
  }
4575
4372
 
4373
+ // lib/dnd/use-on-drag-finished.ts
4374
+ init_react_import();
4375
+ var import_react25 = require("react");
4376
+ var useOnDragFinished = (cb, deps = []) => {
4377
+ const appStore = useAppStoreApi();
4378
+ return (0, import_react25.useCallback)(() => {
4379
+ let dispose = () => {
4380
+ };
4381
+ const processDragging = (isDragging2) => {
4382
+ if (isDragging2) {
4383
+ cb(false);
4384
+ } else {
4385
+ setTimeout(() => {
4386
+ cb(true);
4387
+ }, 0);
4388
+ if (dispose) dispose();
4389
+ }
4390
+ };
4391
+ const isDragging = appStore.getState().state.ui.isDragging;
4392
+ processDragging(isDragging);
4393
+ if (isDragging) {
4394
+ dispose = appStore.subscribe(
4395
+ (s) => s.state.ui.isDragging,
4396
+ (isDragging2) => {
4397
+ processDragging(isDragging2);
4398
+ }
4399
+ );
4400
+ }
4401
+ return dispose;
4402
+ }, [appStore, ...deps]);
4403
+ };
4404
+
4576
4405
  // components/DraggableComponent/index.tsx
4577
- var import_shallow2 = require("zustand/react/shallow");
4578
4406
  var import_jsx_runtime20 = require("react/jsx-runtime");
4579
4407
  var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
4580
4408
  var DEBUG2 = false;
@@ -4604,7 +4432,6 @@ var DraggableComponent = ({
4604
4432
  isSelected = false,
4605
4433
  debug,
4606
4434
  label,
4607
- isEnabled,
4608
4435
  autoDragAxis,
4609
4436
  userDragAxis,
4610
4437
  inDroppableZone = true
@@ -4618,9 +4445,9 @@ var DraggableComponent = ({
4618
4445
  const overrides = useAppStore((s) => s.overrides);
4619
4446
  const dispatch = useAppStore((s) => s.dispatch);
4620
4447
  const iframe = useAppStore((s) => s.iframe);
4621
- const ctx = (0, import_react25.useContext)(dropZoneContext);
4622
- const [localZones, setLocalZones] = (0, import_react25.useState)({});
4623
- const registerLocalZone = (0, import_react25.useCallback)(
4448
+ const ctx = (0, import_react26.useContext)(dropZoneContext);
4449
+ const [localZones, setLocalZones] = (0, import_react26.useState)({});
4450
+ const registerLocalZone = (0, import_react26.useCallback)(
4624
4451
  (zoneCompound2, active) => {
4625
4452
  var _a;
4626
4453
  (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4630,7 +4457,7 @@ var DraggableComponent = ({
4630
4457
  },
4631
4458
  [setLocalZones]
4632
4459
  );
4633
- const unregisterLocalZone = (0, import_react25.useCallback)(
4460
+ const unregisterLocalZone = (0, import_react26.useCallback)(
4634
4461
  (zoneCompound2) => {
4635
4462
  var _a;
4636
4463
  (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4653,14 +4480,17 @@ var DraggableComponent = ({
4653
4480
  return s.permissions.getPermissions({ item });
4654
4481
  })
4655
4482
  );
4656
- const userIsDragging = useContextStore(
4657
- ZoneStoreContext,
4658
- (s) => !!s.draggedItem
4483
+ const zoneStore = (0, import_react26.useContext)(ZoneStoreContext);
4484
+ const [dragAxis, setDragAxis] = (0, import_react26.useState)(userDragAxis || autoDragAxis);
4485
+ const dynamicCollisionDetector = (0, import_react26.useMemo)(
4486
+ () => createDynamicCollisionDetector(dragAxis),
4487
+ [dragAxis]
4659
4488
  );
4660
- const canCollide = permissions.drag || userIsDragging;
4661
- const disabled = !isEnabled || !canCollide;
4662
- const [dragAxis, setDragAxis] = (0, import_react25.useState)(userDragAxis || autoDragAxis);
4663
- const { ref: sortableRef, status } = useSortableSafe({
4489
+ const {
4490
+ ref: sortableRef,
4491
+ isDragging: thisIsDragging,
4492
+ sortable
4493
+ } = (0, import_sortable2.useSortable)({
4664
4494
  id,
4665
4495
  index,
4666
4496
  group: zoneCompound,
@@ -4675,18 +4505,34 @@ var DraggableComponent = ({
4675
4505
  path: path || [],
4676
4506
  inDroppableZone
4677
4507
  },
4678
- collisionPriority: isEnabled ? depth : 0,
4679
- collisionDetector: createDynamicCollisionDetector(dragAxis),
4680
- disabled,
4508
+ collisionPriority: depth,
4509
+ collisionDetector: dynamicCollisionDetector,
4681
4510
  // "Out of the way" transition from react-beautiful-dnd
4682
4511
  transition: {
4683
4512
  duration: 200,
4684
4513
  easing: "cubic-bezier(0.2, 0, 0, 1)"
4685
- }
4514
+ },
4515
+ feedback: "clone"
4686
4516
  });
4687
- const thisIsDragging = status === "dragging";
4688
- const ref = (0, import_react25.useRef)(null);
4689
- const refSetter = (0, import_react25.useCallback)(
4517
+ (0, import_react26.useEffect)(() => {
4518
+ const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
4519
+ sortable.droppable.disabled = !isEnabled;
4520
+ sortable.draggable.disabled = !permissions.drag;
4521
+ const cleanup = zoneStore.subscribe((s) => {
4522
+ sortable.droppable.disabled = !s.enabledIndex[zoneCompound];
4523
+ });
4524
+ if (ref.current && !permissions.drag) {
4525
+ ref.current.setAttribute("data-puck-disabled", "");
4526
+ return () => {
4527
+ var _a;
4528
+ (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
4529
+ cleanup();
4530
+ };
4531
+ }
4532
+ return cleanup;
4533
+ }, [permissions.drag, zoneCompound]);
4534
+ const ref = (0, import_react26.useRef)(null);
4535
+ const refSetter = (0, import_react26.useCallback)(
4690
4536
  (el) => {
4691
4537
  sortableRef(el);
4692
4538
  if (el) {
@@ -4695,14 +4541,14 @@ var DraggableComponent = ({
4695
4541
  },
4696
4542
  [sortableRef]
4697
4543
  );
4698
- const [portalEl, setPortalEl] = (0, import_react25.useState)();
4699
- (0, import_react25.useEffect)(() => {
4544
+ const [portalEl, setPortalEl] = (0, import_react26.useState)();
4545
+ (0, import_react26.useEffect)(() => {
4700
4546
  var _a, _b, _c;
4701
4547
  setPortalEl(
4702
4548
  iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
4703
4549
  );
4704
4550
  }, [iframe.enabled, ref.current]);
4705
- const getStyle = (0, import_react25.useCallback)(() => {
4551
+ const getStyle = (0, import_react26.useCallback)(() => {
4706
4552
  var _a, _b, _c;
4707
4553
  if (!ref.current) return;
4708
4554
  const rect = ref.current.getBoundingClientRect();
@@ -4714,40 +4560,61 @@ var DraggableComponent = ({
4714
4560
  x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
4715
4561
  y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
4716
4562
  };
4563
+ const untransformed = {
4564
+ height: ref.current.offsetHeight,
4565
+ width: ref.current.offsetWidth
4566
+ };
4567
+ const transform = accumulateTransform(ref.current);
4717
4568
  const style2 = {
4718
- left: `${rect.left + scroll.x}px`,
4719
- top: `${rect.top + scroll.y}px`,
4720
- height: `${rect.height}px`,
4721
- width: `${rect.width}px`
4569
+ left: `${(rect.left + scroll.x) / transform.scaleX}px`,
4570
+ top: `${(rect.top + scroll.y) / transform.scaleY}px`,
4571
+ height: `${untransformed.height}px`,
4572
+ width: `${untransformed.width}px`
4722
4573
  };
4723
4574
  return style2;
4724
4575
  }, [ref.current]);
4725
- const [style, setStyle] = (0, import_react25.useState)();
4726
- const sync = (0, import_react25.useCallback)(() => {
4576
+ const [style, setStyle] = (0, import_react26.useState)();
4577
+ const sync = (0, import_react26.useCallback)(() => {
4727
4578
  setStyle(getStyle());
4728
4579
  }, [ref.current, iframe]);
4729
- (0, import_react25.useEffect)(() => {
4730
- if (ref.current && !userIsDragging) {
4580
+ (0, import_react26.useEffect)(() => {
4581
+ if (ref.current) {
4731
4582
  const observer = new ResizeObserver(sync);
4732
4583
  observer.observe(ref.current);
4733
4584
  return () => {
4734
4585
  observer.disconnect();
4735
4586
  };
4736
4587
  }
4737
- }, [ref.current, userIsDragging]);
4588
+ }, [ref.current]);
4738
4589
  const registerNode = useAppStore((s) => s.nodes.registerNode);
4739
- (0, import_react25.useEffect)(() => {
4590
+ const hideOverlay = (0, import_react26.useCallback)(() => {
4591
+ setIsVisible(false);
4592
+ }, []);
4593
+ const showOverlay = (0, import_react26.useCallback)(() => {
4594
+ setIsVisible(true);
4595
+ }, []);
4596
+ (0, import_react26.useEffect)(() => {
4740
4597
  var _a;
4741
- registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
4598
+ registerNode(id, {
4599
+ methods: { sync, showOverlay, hideOverlay },
4600
+ element: (_a = ref.current) != null ? _a : null
4601
+ });
4742
4602
  return () => {
4743
- registerNode(id, { methods: { sync: () => null }, element: null });
4603
+ registerNode(id, {
4604
+ methods: {
4605
+ sync: () => null,
4606
+ hideOverlay: () => null,
4607
+ showOverlay: () => null
4608
+ },
4609
+ element: null
4610
+ });
4744
4611
  };
4745
4612
  }, [id, zoneCompound, index, componentType, sync]);
4746
- const CustomActionBar = (0, import_react25.useMemo)(
4613
+ const CustomActionBar = (0, import_react26.useMemo)(
4747
4614
  () => overrides.actionBar || DefaultActionBar,
4748
4615
  [overrides.actionBar]
4749
4616
  );
4750
- const onClick = (0, import_react25.useCallback)(
4617
+ const onClick = (0, import_react26.useCallback)(
4751
4618
  (e) => {
4752
4619
  e.stopPropagation();
4753
4620
  dispatch({
@@ -4760,7 +4627,7 @@ var DraggableComponent = ({
4760
4627
  [index, zoneCompound, id]
4761
4628
  );
4762
4629
  const appStore = useAppStoreApi();
4763
- const onSelectParent = (0, import_react25.useCallback)(() => {
4630
+ const onSelectParent = (0, import_react26.useCallback)(() => {
4764
4631
  const { nodes, zones } = appStore.getState().state.indexes;
4765
4632
  const node = nodes[id];
4766
4633
  const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4781,28 +4648,32 @@ var DraggableComponent = ({
4781
4648
  }
4782
4649
  });
4783
4650
  }, [ctx, path]);
4784
- const onDuplicate = (0, import_react25.useCallback)(() => {
4651
+ const onDuplicate = (0, import_react26.useCallback)(() => {
4785
4652
  dispatch({
4786
4653
  type: "duplicate",
4787
4654
  sourceIndex: index,
4788
4655
  sourceZone: zoneCompound
4789
4656
  });
4790
4657
  }, [index, zoneCompound]);
4791
- const onDelete = (0, import_react25.useCallback)(() => {
4658
+ const onDelete = (0, import_react26.useCallback)(() => {
4792
4659
  dispatch({
4793
4660
  type: "remove",
4794
4661
  index,
4795
4662
  zone: zoneCompound
4796
4663
  });
4797
4664
  }, [index, zoneCompound]);
4798
- const [hover, setHover] = (0, import_react25.useState)(false);
4799
- const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
4800
- (0, import_react25.useEffect)(() => {
4665
+ const [hover, setHover] = (0, import_react26.useState)(false);
4666
+ const indicativeHover = useContextStore(
4667
+ ZoneStoreContext,
4668
+ (s) => s.hoveringComponent === id
4669
+ );
4670
+ (0, import_react26.useEffect)(() => {
4801
4671
  if (!ref.current) {
4802
4672
  return;
4803
4673
  }
4804
4674
  const el = ref.current;
4805
4675
  const _onMouseOver = (e) => {
4676
+ const userIsDragging = !!zoneStore.getState().draggedItem;
4806
4677
  if (userIsDragging) {
4807
4678
  if (thisIsDragging) {
4808
4679
  setHover(true);
@@ -4824,18 +4695,12 @@ var DraggableComponent = ({
4824
4695
  el.addEventListener("click", onClick);
4825
4696
  el.addEventListener("mouseover", _onMouseOver);
4826
4697
  el.addEventListener("mouseout", _onMouseOut);
4827
- if (thisIsDragging) {
4828
- el.setAttribute("data-puck-dragging", "");
4829
- } else {
4830
- el.removeAttribute("data-puck-dragging");
4831
- }
4832
4698
  return () => {
4833
4699
  el.removeAttribute("data-puck-component");
4834
4700
  el.removeAttribute("data-puck-dnd");
4835
4701
  el.removeEventListener("click", onClick);
4836
4702
  el.removeEventListener("mouseover", _onMouseOver);
4837
4703
  el.removeEventListener("mouseout", _onMouseOut);
4838
- el.removeAttribute("data-puck-dragging");
4839
4704
  };
4840
4705
  }, [
4841
4706
  ref,
@@ -4843,29 +4708,43 @@ var DraggableComponent = ({
4843
4708
  containsActiveZone,
4844
4709
  zoneCompound,
4845
4710
  id,
4846
- userIsDragging,
4847
4711
  thisIsDragging,
4848
4712
  inDroppableZone
4849
4713
  ]);
4850
- (0, import_react25.useEffect)(() => {
4851
- if (ref.current && disabled) {
4852
- ref.current.setAttribute("data-puck-disabled", "");
4853
- return () => {
4854
- var _a;
4855
- (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
4856
- };
4857
- }
4858
- }, [disabled, ref]);
4859
- const [isVisible, setIsVisible] = (0, import_react25.useState)(false);
4860
- (0, import_react25.useEffect)(() => {
4861
- sync();
4862
- if ((isSelected || hover || indicativeHover) && !userIsDragging) {
4863
- setIsVisible(true);
4714
+ const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
4715
+ const [dragFinished, setDragFinished] = (0, import_react26.useState)(true);
4716
+ const [_, startTransition] = (0, import_react26.useTransition)();
4717
+ (0, import_react26.useEffect)(() => {
4718
+ startTransition(() => {
4719
+ if (hover || indicativeHover || isSelected) {
4720
+ sync();
4721
+ setIsVisible(true);
4722
+ setThisWasDragging(false);
4723
+ } else {
4724
+ setIsVisible(false);
4725
+ }
4726
+ });
4727
+ }, [hover, indicativeHover, isSelected, iframe]);
4728
+ const [thisWasDragging, setThisWasDragging] = (0, import_react26.useState)(false);
4729
+ const onDragFinished = useOnDragFinished((finished) => {
4730
+ if (finished) {
4731
+ startTransition(() => {
4732
+ sync();
4733
+ setDragFinished(true);
4734
+ });
4864
4735
  } else {
4865
- setIsVisible(false);
4736
+ setDragFinished(false);
4737
+ }
4738
+ });
4739
+ (0, import_react26.useEffect)(() => {
4740
+ if (thisIsDragging) {
4741
+ setThisWasDragging(true);
4866
4742
  }
4867
- }, [isSelected, hover, indicativeHover, iframe, userIsDragging]);
4868
- const syncActionsPosition = (0, import_react25.useCallback)(
4743
+ }, [thisIsDragging]);
4744
+ (0, import_react26.useEffect)(() => {
4745
+ if (thisWasDragging) return onDragFinished();
4746
+ }, [thisWasDragging, onDragFinished]);
4747
+ const syncActionsPosition = (0, import_react26.useCallback)(
4869
4748
  (el) => {
4870
4749
  if (el) {
4871
4750
  const view = el.ownerDocument.defaultView;
@@ -4890,7 +4769,7 @@ var DraggableComponent = ({
4890
4769
  },
4891
4770
  [zoom]
4892
4771
  );
4893
- (0, import_react25.useEffect)(() => {
4772
+ (0, import_react26.useEffect)(() => {
4894
4773
  if (userDragAxis) {
4895
4774
  setDragAxis(userDragAxis);
4896
4775
  return;
@@ -4904,8 +4783,11 @@ var DraggableComponent = ({
4904
4783
  }
4905
4784
  setDragAxis(autoDragAxis);
4906
4785
  }, [ref, userDragAxis, autoDragAxis]);
4907
- const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CornerLeftUp, { size: 16 }) });
4908
- const nextContextValue = (0, import_react25.useMemo)(
4786
+ const parentAction = (0, import_react26.useMemo)(
4787
+ () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CornerLeftUp, { size: 16 }) }),
4788
+ [ctx == null ? void 0 : ctx.areaId]
4789
+ );
4790
+ const nextContextValue = (0, import_react26.useMemo)(
4909
4791
  () => __spreadProps(__spreadValues({}, ctx), {
4910
4792
  areaId: id,
4911
4793
  zoneCompound,
@@ -4925,7 +4807,7 @@ var DraggableComponent = ({
4925
4807
  ]
4926
4808
  );
4927
4809
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
4928
- isVisible && (0, import_react_dom2.createPortal)(
4810
+ dragFinished && isVisible && (0, import_react_dom2.createPortal)(
4929
4811
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4930
4812
  "div",
4931
4813
  {
@@ -4985,19 +4867,23 @@ var DraggableComponent = ({
4985
4867
 
4986
4868
  // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
4987
4869
  init_react_import();
4988
- var styles_module_default12 = { "DropZone": "_DropZone_3dmev_1", "DropZone--hasChildren": "_DropZone--hasChildren_3dmev_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_3dmev_19", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_3dmev_23", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_3dmev_24", "DropZone--isRootZone": "_DropZone--isRootZone_3dmev_24", "DropZone--isDestination": "_DropZone--isDestination_3dmev_34", "DropZone-item": "_DropZone-item_3dmev_46", "DropZone-hitbox": "_DropZone-hitbox_3dmev_50", "DropZone--isEnabled": "_DropZone--isEnabled_3dmev_58", "DropZone--isAnimating": "_DropZone--isAnimating_3dmev_67" };
4870
+ var styles_module_default12 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasChildren": "_DropZone--hasChildren_1i2sv_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1i2sv_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1i2sv_25", "DropZone--isRootZone": "_DropZone--isRootZone_1i2sv_25", "DropZone--isDestination": "_DropZone--isDestination_1i2sv_35", "DropZone-item": "_DropZone-item_1i2sv_47", "DropZone-hitbox": "_DropZone-hitbox_1i2sv_51", "DropZone--isEnabled": "_DropZone--isEnabled_1i2sv_59", "DropZone--isAnimating": "_DropZone--isAnimating_1i2sv_68" };
4871
+
4872
+ // components/DropZone/index.tsx
4873
+ var import_react36 = require("@dnd-kit/react");
4989
4874
 
4990
4875
  // components/DropZone/lib/use-min-empty-height.ts
4991
4876
  init_react_import();
4992
- var import_react26 = require("react");
4877
+ var import_react27 = require("react");
4878
+ var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
4993
4879
  var useMinEmptyHeight = ({
4994
4880
  zoneCompound,
4995
4881
  userMinEmptyHeight,
4996
4882
  ref
4997
4883
  }) => {
4998
4884
  const appStore = useAppStoreApi();
4999
- const [prevHeight, setPrevHeight] = (0, import_react26.useState)(0);
5000
- const [isAnimating, setIsAnimating] = (0, import_react26.useState)(false);
4885
+ const [prevHeight, setPrevHeight] = (0, import_react27.useState)(0);
4886
+ const [isAnimating, setIsAnimating] = (0, import_react27.useState)(false);
5001
4887
  const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
5002
4888
  var _a, _b;
5003
4889
  return {
@@ -5005,32 +4891,52 @@ var useMinEmptyHeight = ({
5005
4891
  isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
5006
4892
  };
5007
4893
  });
5008
- (0, import_react26.useEffect)(() => {
4894
+ const numItems = (0, import_react27.useRef)(0);
4895
+ const onDragFinished = useOnDragFinished(
4896
+ (finished) => {
4897
+ var _a;
4898
+ if (finished) {
4899
+ const newNumItems = getNumItems(appStore, zoneCompound);
4900
+ setPrevHeight(0);
4901
+ if (newNumItems || numItems.current === 0) {
4902
+ setIsAnimating(false);
4903
+ return;
4904
+ }
4905
+ const selectedItem = appStore.getState().selectedItem;
4906
+ const zones = appStore.getState().state.indexes.zones;
4907
+ const nodes = appStore.getState().nodes;
4908
+ (_a = nodes.nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.methods.hideOverlay();
4909
+ setTimeout(() => {
4910
+ var _a2;
4911
+ const contentIds = ((_a2 = zones[zoneCompound]) == null ? void 0 : _a2.contentIds) || [];
4912
+ contentIds.forEach((contentId) => {
4913
+ const node = nodes.nodes[contentId];
4914
+ node == null ? void 0 : node.methods.sync();
4915
+ });
4916
+ if (selectedItem) {
4917
+ setTimeout(() => {
4918
+ var _a3, _b;
4919
+ (_a3 = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _a3.methods.sync();
4920
+ (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.showOverlay();
4921
+ }, 200);
4922
+ }
4923
+ setIsAnimating(false);
4924
+ }, 100);
4925
+ }
4926
+ },
4927
+ [appStore, prevHeight, zoneCompound]
4928
+ );
4929
+ (0, import_react27.useEffect)(() => {
5009
4930
  if (draggedItem && ref.current) {
5010
4931
  if (isZone) {
5011
4932
  const rect = ref.current.getBoundingClientRect();
4933
+ numItems.current = getNumItems(appStore, zoneCompound);
5012
4934
  setPrevHeight(rect.height);
5013
4935
  setIsAnimating(true);
5014
- return;
4936
+ return onDragFinished();
5015
4937
  }
5016
4938
  }
5017
- setPrevHeight(0);
5018
- setTimeout(() => {
5019
- var _a, _b;
5020
- const zones = appStore.getState().state.indexes.zones;
5021
- const nodes = appStore.getState().nodes;
5022
- const selectedItem = appStore.getState().selectedItem;
5023
- const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
5024
- contentIds.forEach((contentId) => {
5025
- const node = nodes.nodes[contentId];
5026
- node == null ? void 0 : node.methods.sync();
5027
- });
5028
- if (selectedItem) {
5029
- (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
5030
- }
5031
- setIsAnimating(false);
5032
- }, 400);
5033
- }, [ref.current, draggedItem, zoneCompound]);
4939
+ }, [ref.current, draggedItem, onDragFinished]);
5034
4940
  return [prevHeight || userMinEmptyHeight, isAnimating];
5035
4941
  };
5036
4942
 
@@ -5051,15 +4957,15 @@ function assignRefs(refs, node) {
5051
4957
 
5052
4958
  // components/DropZone/lib/use-content-with-preview.ts
5053
4959
  init_react_import();
5054
- var import_react29 = require("react");
4960
+ var import_react30 = require("react");
5055
4961
 
5056
4962
  // lib/dnd/use-rendered-callback.ts
5057
4963
  init_react_import();
5058
- var import_react27 = require("@dnd-kit/react");
5059
- var import_react28 = require("react");
4964
+ var import_react28 = require("@dnd-kit/react");
4965
+ var import_react29 = require("react");
5060
4966
  function useRenderedCallback(callback, deps) {
5061
- const manager = (0, import_react27.useDragDropManager)();
5062
- return (0, import_react28.useCallback)(
4967
+ const manager = (0, import_react28.useDragDropManager)();
4968
+ return (0, import_react29.useCallback)(
5063
4969
  (...args) => __async(this, null, function* () {
5064
4970
  yield manager == null ? void 0 : manager.renderer.rendering;
5065
4971
  return callback(...args);
@@ -5070,24 +4976,18 @@ function useRenderedCallback(callback, deps) {
5070
4976
 
5071
4977
  // components/DropZone/lib/use-content-with-preview.ts
5072
4978
  var useContentIdsWithPreview = (contentIds, zoneCompound) => {
5073
- const { draggedItemId, preview, previewExists } = useContextStore(
4979
+ const zoneStore = (0, import_react30.useContext)(ZoneStoreContext);
4980
+ const preview = useContextStore(
5074
4981
  ZoneStoreContext,
5075
- (s) => {
5076
- var _a;
5077
- return {
5078
- draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
5079
- preview: s.previewIndex[zoneCompound],
5080
- previewExists: Object.keys(s.previewIndex || {}).length > 0
5081
- };
5082
- }
4982
+ (s) => s.previewIndex[zoneCompound]
5083
4983
  );
5084
4984
  const isDragging = useAppStore((s) => s.state.ui.isDragging);
5085
- const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react29.useState)(contentIds);
5086
- const [localPreview, setLocalPreview] = (0, import_react29.useState)(
4985
+ const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react30.useState)(contentIds);
4986
+ const [localPreview, setLocalPreview] = (0, import_react30.useState)(
5087
4987
  preview
5088
4988
  );
5089
4989
  const updateContent = useRenderedCallback(
5090
- (contentIds2, preview2, isDragging2) => {
4990
+ (contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
5091
4991
  if (isDragging2 && !previewExists) {
5092
4992
  return;
5093
4993
  }
@@ -5116,26 +5016,36 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
5116
5016
  }
5117
5017
  setLocalPreview(preview2);
5118
5018
  },
5119
- [draggedItemId, previewExists]
5019
+ []
5120
5020
  );
5121
- (0, import_react29.useEffect)(() => {
5122
- updateContent(contentIds, preview, isDragging);
5021
+ (0, import_react30.useEffect)(() => {
5022
+ var _a;
5023
+ const s = zoneStore.getState();
5024
+ const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
5025
+ const previewExists = Object.keys(s.previewIndex || {}).length > 0;
5026
+ updateContent(
5027
+ contentIds,
5028
+ preview,
5029
+ isDragging,
5030
+ draggedItemId,
5031
+ previewExists
5032
+ );
5123
5033
  }, [contentIds, preview, isDragging]);
5124
5034
  return [contentIdsWithPreview, localPreview];
5125
5035
  };
5126
5036
 
5127
5037
  // components/DropZone/lib/use-drag-axis.ts
5128
5038
  init_react_import();
5129
- var import_react30 = require("react");
5039
+ var import_react31 = require("react");
5130
5040
  var GRID_DRAG_AXIS = "dynamic";
5131
5041
  var FLEX_ROW_DRAG_AXIS = "x";
5132
5042
  var DEFAULT_DRAG_AXIS = "y";
5133
5043
  var useDragAxis = (ref, collisionAxis) => {
5134
5044
  const status = useAppStore((s) => s.status);
5135
- const [dragAxis, setDragAxis] = (0, import_react30.useState)(
5045
+ const [dragAxis, setDragAxis] = (0, import_react31.useState)(
5136
5046
  collisionAxis || DEFAULT_DRAG_AXIS
5137
5047
  );
5138
- const calculateDragAxis = (0, import_react30.useCallback)(() => {
5048
+ const calculateDragAxis = (0, import_react31.useCallback)(() => {
5139
5049
  if (ref.current) {
5140
5050
  const computedStyle = window.getComputedStyle(ref.current);
5141
5051
  if (computedStyle.display === "grid") {
@@ -5147,7 +5057,7 @@ var useDragAxis = (ref, collisionAxis) => {
5147
5057
  }
5148
5058
  }
5149
5059
  }, [ref.current]);
5150
- (0, import_react30.useEffect)(() => {
5060
+ (0, import_react31.useEffect)(() => {
5151
5061
  const onViewportChange = () => {
5152
5062
  calculateDragAxis();
5153
5063
  };
@@ -5156,54 +5066,57 @@ var useDragAxis = (ref, collisionAxis) => {
5156
5066
  window.removeEventListener("viewportchange", onViewportChange);
5157
5067
  };
5158
5068
  }, []);
5159
- (0, import_react30.useEffect)(calculateDragAxis, [status, collisionAxis]);
5069
+ (0, import_react31.useEffect)(calculateDragAxis, [status, collisionAxis]);
5160
5070
  return [dragAxis, calculateDragAxis];
5161
5071
  };
5162
5072
 
5163
5073
  // components/DropZone/index.tsx
5164
- var import_shallow3 = require("zustand/react/shallow");
5074
+ var import_shallow4 = require("zustand/react/shallow");
5165
5075
 
5166
5076
  // components/Render/index.tsx
5167
5077
  init_react_import();
5168
5078
 
5169
5079
  // lib/use-slots.tsx
5170
5080
  init_react_import();
5171
- var import_react31 = require("react");
5172
- function useSlots(config, props, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
5173
- const slotProps = (0, import_react31.useMemo)(() => {
5174
- if (!(config == null ? void 0 : config.fields)) return props;
5175
- const slotProps2 = {};
5176
- const fieldKeys = Object.keys(config.fields);
5177
- for (let i = 0; i < fieldKeys.length; i++) {
5178
- const fieldKey = fieldKeys[i];
5179
- const field = config.fields[fieldKey];
5180
- if ((field == null ? void 0 : field.type) === "slot") {
5181
- const content = props[fieldKey] || [];
5182
- const render = (readOnly == null ? void 0 : readOnly[fieldKey]) || forceReadOnly ? renderSlotRender : renderSlotEdit;
5081
+ var import_react32 = require("react");
5082
+ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
5083
+ const slotProps = (0, import_react32.useMemo)(() => {
5084
+ const mapped = mapSlots(
5085
+ item,
5086
+ (content, _parentId, propName, field, propPath) => {
5087
+ const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
5088
+ const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
5089
+ const render = isReadOnly ? renderSlotRender : renderSlotEdit;
5183
5090
  const Slot = (dzProps) => render(__spreadProps(__spreadValues({
5184
- allow: field.allow,
5185
- disallow: field.disallow
5091
+ allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
5092
+ disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
5186
5093
  }, dzProps), {
5187
- zone: fieldKey,
5094
+ zone: propName,
5188
5095
  content
5189
5096
  }));
5190
- slotProps2[fieldKey] = Slot;
5191
- }
5192
- }
5193
- return slotProps2;
5194
- }, [config, readOnly, forceReadOnly]);
5195
- return __spreadValues(__spreadValues({}, props), slotProps);
5097
+ return Slot;
5098
+ },
5099
+ config
5100
+ ).props;
5101
+ return mapped;
5102
+ }, [config, item, readOnly, forceReadOnly]);
5103
+ const mergedProps = (0, import_react32.useMemo)(
5104
+ () => __spreadValues(__spreadValues({}, item.props), slotProps),
5105
+ [item.props, slotProps]
5106
+ );
5107
+ return mergedProps;
5196
5108
  }
5197
5109
 
5198
5110
  // components/Render/index.tsx
5199
- var import_react33 = __toESM(require("react"));
5111
+ var import_react34 = __toESM(require("react"));
5200
5112
 
5201
5113
  // components/SlotRender/index.tsx
5202
5114
  init_react_import();
5115
+ var import_shallow3 = require("zustand/react/shallow");
5203
5116
 
5204
5117
  // components/SlotRender/server.tsx
5205
5118
  init_react_import();
5206
- var import_react32 = require("react");
5119
+ var import_react33 = require("react");
5207
5120
 
5208
5121
  // components/ServerRender/index.tsx
5209
5122
  init_react_import();
@@ -5238,12 +5151,15 @@ function DropZoneRender({
5238
5151
  metadata
5239
5152
  }
5240
5153
  ),
5241
- metadata
5154
+ metadata,
5155
+ dragRef: null,
5156
+ isEditing: false
5242
5157
  }
5243
5158
  });
5244
- const propsWithSlots = useSlots(Component, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
5159
+ const renderItem = __spreadProps(__spreadValues({}, item), { props });
5160
+ const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
5245
5161
  if (Component) {
5246
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots), item.props.id);
5162
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
5247
5163
  }
5248
5164
  return null;
5249
5165
  }) });
@@ -5258,7 +5174,7 @@ var Item = ({
5258
5174
  metadata
5259
5175
  }) => {
5260
5176
  const Component = config.components[item.type];
5261
- const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
5177
+ const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
5262
5178
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
5263
5179
  Component.render,
5264
5180
  __spreadProps(__spreadValues({}, props), {
@@ -5269,7 +5185,7 @@ var Item = ({
5269
5185
  })
5270
5186
  );
5271
5187
  };
5272
- var SlotRender = (0, import_react32.forwardRef)(
5188
+ var SlotRender = (0, import_react33.forwardRef)(
5273
5189
  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
5274
5190
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
5275
5191
  if (!config.components[item.type]) {
@@ -5297,10 +5213,12 @@ var ContextSlotRender = ({
5297
5213
  const config = useAppStore((s) => s.config);
5298
5214
  const metadata = useAppStore((s) => s.metadata);
5299
5215
  const slotContent = useAppStore(
5300
- (s) => {
5216
+ (0, import_shallow3.useShallow)((s) => {
5301
5217
  var _a, _b;
5302
- return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
5303
- }
5218
+ const indexes = s.state.indexes;
5219
+ const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
5220
+ return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
5221
+ })
5304
5222
  );
5305
5223
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
5306
5224
  SlotRenderPure,
@@ -5315,7 +5233,7 @@ var ContextSlotRender = ({
5315
5233
 
5316
5234
  // components/Render/index.tsx
5317
5235
  var import_jsx_runtime24 = require("react/jsx-runtime");
5318
- var renderContext = import_react33.default.createContext({
5236
+ var renderContext = import_react34.default.createContext({
5319
5237
  config: { components: {} },
5320
5238
  data: { root: {}, content: [] },
5321
5239
  metadata: {}
@@ -5330,7 +5248,7 @@ function Render({
5330
5248
  root: data.root || {},
5331
5249
  content: data.content || []
5332
5250
  });
5333
- const rootProps = defaultedData.root.props || defaultedData.root;
5251
+ const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
5334
5252
  const title = (rootProps == null ? void 0 : rootProps.title) || "";
5335
5253
  const pageProps = __spreadProps(__spreadValues({}, rootProps), {
5336
5254
  puck: {
@@ -5343,8 +5261,12 @@ function Render({
5343
5261
  editMode: false,
5344
5262
  id: "puck-root"
5345
5263
  });
5346
- const propsWithSlots = useSlots(config.root, pageProps, (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata })));
5347
- const nextContextValue = (0, import_react33.useMemo)(
5264
+ const propsWithSlots = useSlots(
5265
+ config,
5266
+ { type: "root", props: pageProps },
5267
+ (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
5268
+ );
5269
+ const nextContextValue = (0, import_react34.useMemo)(
5348
5270
  () => ({
5349
5271
  mode: "render",
5350
5272
  depth: 0
@@ -5366,19 +5288,18 @@ var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
5366
5288
  var DropZoneChild = ({
5367
5289
  zoneCompound,
5368
5290
  componentId,
5369
- preview,
5370
5291
  index,
5371
- isEnabled,
5372
5292
  dragAxis,
5373
5293
  collisionAxis,
5374
5294
  inDroppableZone
5375
5295
  }) => {
5376
5296
  var _a, _b;
5377
5297
  const metadata = useAppStore((s) => s.metadata);
5378
- const ctx = (0, import_react34.useContext)(dropZoneContext);
5298
+ const ctx = (0, import_react35.useContext)(dropZoneContext);
5379
5299
  const { depth = 1 } = ctx != null ? ctx : {};
5300
+ const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
5380
5301
  const nodeProps = useAppStore(
5381
- (0, import_shallow3.useShallow)((s) => {
5302
+ (0, import_shallow4.useShallow)((s) => {
5382
5303
  var _a2;
5383
5304
  return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
5384
5305
  })
@@ -5390,22 +5311,42 @@ var DropZoneChild = ({
5390
5311
  }
5391
5312
  );
5392
5313
  const nodeReadOnly = useAppStore(
5393
- (0, import_shallow3.useShallow)((s) => {
5314
+ (0, import_shallow4.useShallow)((s) => {
5394
5315
  var _a2;
5395
5316
  return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
5396
5317
  })
5397
5318
  );
5398
- const node = { type: nodeType, props: nodeProps };
5399
- const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
5319
+ const appStore = useAppStoreApi();
5320
+ const item = (0, import_react35.useMemo)(() => {
5321
+ if (nodeProps) {
5322
+ const expanded = expandNode({
5323
+ type: nodeType,
5324
+ props: nodeProps
5325
+ });
5326
+ return expanded;
5327
+ }
5328
+ const preview = zoneStore.getState().previewIndex[zoneCompound];
5329
+ if (componentId === (preview == null ? void 0 : preview.props.id)) {
5330
+ return {
5331
+ type: preview.componentType,
5332
+ props: preview.props,
5333
+ previewType: preview.type
5334
+ };
5335
+ }
5336
+ return null;
5337
+ }, [appStore, componentId, zoneCompound, nodeType, nodeProps]);
5400
5338
  const componentConfig = useAppStore(
5401
5339
  (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
5402
5340
  );
5403
- const puckProps = {
5404
- renderDropZone: DropZoneEditPure,
5405
- isEditing: true,
5406
- dragRef: null,
5407
- metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
5408
- };
5341
+ const puckProps = (0, import_react35.useMemo)(
5342
+ () => ({
5343
+ renderDropZone: DropZoneEditPure,
5344
+ isEditing: true,
5345
+ dragRef: null,
5346
+ metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
5347
+ }),
5348
+ [metadata, componentConfig == null ? void 0 : componentConfig.metadata]
5349
+ );
5409
5350
  const overrides = useAppStore((s) => s.overrides);
5410
5351
  const isLoading = useAppStore(
5411
5352
  (s) => {
@@ -5420,13 +5361,13 @@ var DropZoneChild = ({
5420
5361
  }
5421
5362
  );
5422
5363
  let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
5423
- const renderPreview = (0, import_react34.useMemo)(
5424
- () => function Preview4() {
5364
+ const renderPreview = (0, import_react35.useMemo)(
5365
+ () => function Preview3() {
5425
5366
  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
5426
5367
  },
5427
5368
  [componentId, label, overrides]
5428
5369
  );
5429
- const defaultsProps = (0, import_react34.useMemo)(
5370
+ const defaultsProps = (0, import_react35.useMemo)(
5430
5371
  () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
5431
5372
  puck: puckProps,
5432
5373
  editMode: true
@@ -5434,9 +5375,17 @@ var DropZoneChild = ({
5434
5375
  }),
5435
5376
  [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
5436
5377
  );
5378
+ const defaultedNode = (0, import_react35.useMemo)(
5379
+ () => {
5380
+ var _a2;
5381
+ return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
5382
+ },
5383
+ [item == null ? void 0 : item.type, nodeType, defaultsProps]
5384
+ );
5385
+ const config = useAppStore((s) => s.config);
5437
5386
  const defaultedPropsWithSlots = useSlots(
5438
- componentConfig,
5439
- defaultsProps,
5387
+ config,
5388
+ defaultedNode,
5440
5389
  DropZoneEditPure,
5441
5390
  (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }),
5442
5391
  nodeReadOnly,
@@ -5448,8 +5397,8 @@ var DropZoneChild = ({
5448
5397
  item.type
5449
5398
  ] });
5450
5399
  let componentType = item.type;
5451
- const isPreview = componentId === (preview == null ? void 0 : preview.props.id) && preview.type === "insert";
5452
- if (isPreview) {
5400
+ const isInserting = "previewType" in item ? item.previewType === "insert" : false;
5401
+ if (isInserting) {
5453
5402
  Render2 = renderPreview;
5454
5403
  }
5455
5404
  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -5463,11 +5412,10 @@ var DropZoneChild = ({
5463
5412
  isLoading,
5464
5413
  isSelected,
5465
5414
  label,
5466
- isEnabled,
5467
5415
  autoDragAxis: dragAxis,
5468
5416
  userDragAxis: collisionAxis,
5469
5417
  inDroppableZone,
5470
- children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
5418
+ children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
5471
5419
  Render2,
5472
5420
  __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
5473
5421
  puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
@@ -5478,8 +5426,8 @@ var DropZoneChild = ({
5478
5426
  }
5479
5427
  );
5480
5428
  };
5481
- var DropZoneChildMemo = (0, import_react34.memo)(DropZoneChild);
5482
- var DropZoneEdit = (0, import_react34.forwardRef)(
5429
+ var DropZoneChildMemo = (0, import_react35.memo)(DropZoneChild);
5430
+ var DropZoneEdit = (0, import_react35.forwardRef)(
5483
5431
  function DropZoneEditInternal({
5484
5432
  zone,
5485
5433
  allow,
@@ -5489,7 +5437,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5489
5437
  minEmptyHeight: userMinEmptyHeight = 128,
5490
5438
  collisionAxis
5491
5439
  }, userRef) {
5492
- const ctx = (0, import_react34.useContext)(dropZoneContext);
5440
+ const ctx = (0, import_react35.useContext)(dropZoneContext);
5493
5441
  const {
5494
5442
  // These all need setting via context
5495
5443
  areaId,
@@ -5498,7 +5446,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5498
5446
  unregisterLocalZone
5499
5447
  } = ctx != null ? ctx : {};
5500
5448
  const path = useAppStore(
5501
- (0, import_shallow3.useShallow)((s) => {
5449
+ (0, import_shallow4.useShallow)((s) => {
5502
5450
  var _a;
5503
5451
  return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
5504
5452
  })
@@ -5510,39 +5458,24 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5510
5458
  }
5511
5459
  }
5512
5460
  const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
5513
- const {
5514
- isDeepestZone,
5515
- inNextDeepestArea,
5516
- draggedComponentType,
5517
- userIsDragging
5518
- } = useContextStore(ZoneStoreContext, (s) => {
5519
- var _a, _b;
5520
- return {
5521
- isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
5522
- inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
5523
- draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
5524
- userIsDragging: !!s.draggedItem
5525
- };
5526
- });
5461
+ const inNextDeepestArea = useContextStore(
5462
+ ZoneStoreContext,
5463
+ (s) => s.nextAreaDepthIndex[areaId || ""]
5464
+ );
5527
5465
  const zoneContentIds = useAppStore(
5528
- (0, import_shallow3.useShallow)((s) => {
5466
+ (0, import_shallow4.useShallow)((s) => {
5529
5467
  var _a;
5530
5468
  return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
5531
5469
  })
5532
5470
  );
5533
5471
  const zoneType = useAppStore(
5534
- (0, import_shallow3.useShallow)((s) => {
5472
+ (0, import_shallow4.useShallow)((s) => {
5535
5473
  var _a;
5536
5474
  return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
5537
5475
  })
5538
5476
  );
5539
- (0, import_react34.useEffect)(() => {
5477
+ (0, import_react35.useEffect)(() => {
5540
5478
  if (!zoneType || zoneType === "dropzone") {
5541
- if (zoneCompound !== rootDroppableId) {
5542
- console.warn(
5543
- "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
5544
- );
5545
- }
5546
5479
  if (ctx == null ? void 0 : ctx.registerZone) {
5547
5480
  ctx == null ? void 0 : ctx.registerZone(zoneCompound);
5548
5481
  }
@@ -5553,11 +5486,20 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5553
5486
  };
5554
5487
  }
5555
5488
  }, [zoneType]);
5556
- const contentIds = (0, import_react34.useMemo)(() => {
5489
+ (0, import_react35.useEffect)(() => {
5490
+ if (zoneType === "dropzone") {
5491
+ if (zoneCompound !== rootDroppableId) {
5492
+ console.warn(
5493
+ "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
5494
+ );
5495
+ }
5496
+ }
5497
+ }, [zoneType]);
5498
+ const contentIds = (0, import_react35.useMemo)(() => {
5557
5499
  return zoneContentIds || [];
5558
5500
  }, [zoneContentIds]);
5559
- const ref = (0, import_react34.useRef)(null);
5560
- const acceptsTarget = (0, import_react34.useCallback)(
5501
+ const ref = (0, import_react35.useRef)(null);
5502
+ const acceptsTarget = (0, import_react35.useCallback)(
5561
5503
  (componentType) => {
5562
5504
  if (!componentType) {
5563
5505
  return true;
@@ -5579,29 +5521,44 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5579
5521
  },
5580
5522
  [allow, disallow]
5581
5523
  );
5582
- (0, import_react34.useEffect)(() => {
5524
+ const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
5525
+ var _a;
5526
+ const draggedComponentType = (_a = s.draggedItem) == null ? void 0 : _a.data.componentType;
5527
+ return acceptsTarget(draggedComponentType);
5528
+ });
5529
+ const hoveringOverArea = inNextDeepestArea || isRootZone;
5530
+ const isEnabled = useContextStore(ZoneStoreContext, (s) => {
5531
+ var _a;
5532
+ let _isEnabled = true;
5533
+ const isDeepestZone = (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false;
5534
+ _isEnabled = isDeepestZone;
5535
+ if (_isEnabled) {
5536
+ _isEnabled = targetAccepted;
5537
+ }
5538
+ return _isEnabled;
5539
+ });
5540
+ (0, import_react35.useEffect)(() => {
5583
5541
  if (registerLocalZone) {
5584
- registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
5542
+ registerLocalZone(zoneCompound, targetAccepted || isEnabled);
5585
5543
  }
5586
5544
  return () => {
5587
5545
  if (unregisterLocalZone) {
5588
5546
  unregisterLocalZone(zoneCompound);
5589
5547
  }
5590
5548
  };
5591
- }, [draggedComponentType, zoneCompound]);
5592
- const hoveringOverArea = inNextDeepestArea || isRootZone;
5593
- let isEnabled = true;
5594
- if (userIsDragging) {
5595
- isEnabled = isDeepestZone;
5596
- }
5597
- if (isEnabled) {
5598
- isEnabled = acceptsTarget(draggedComponentType);
5599
- }
5549
+ }, [targetAccepted, isEnabled, zoneCompound]);
5600
5550
  const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
5601
5551
  contentIds,
5602
5552
  zoneCompound
5603
5553
  );
5604
5554
  const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
5555
+ const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
5556
+ (0, import_react35.useEffect)(() => {
5557
+ const { enabledIndex } = zoneStore.getState();
5558
+ zoneStore.setState({
5559
+ enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
5560
+ });
5561
+ }, [isEnabled, zoneStore, zoneCompound]);
5605
5562
  const droppableConfig = {
5606
5563
  id: zoneCompound,
5607
5564
  collisionPriority: isEnabled ? depth : 0,
@@ -5611,11 +5568,11 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5611
5568
  data: {
5612
5569
  areaId,
5613
5570
  depth,
5614
- isDroppableTarget: acceptsTarget(draggedComponentType),
5571
+ isDroppableTarget: targetAccepted,
5615
5572
  path: path || []
5616
5573
  }
5617
5574
  };
5618
- const { ref: dropRef } = useDroppableSafe(droppableConfig);
5575
+ const { ref: dropRef } = (0, import_react36.useDroppable)(droppableConfig);
5619
5576
  const isAreaSelected = useAppStore(
5620
5577
  (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
5621
5578
  );
@@ -5630,7 +5587,6 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5630
5587
  {
5631
5588
  className: `${getClassName17({
5632
5589
  isRootZone,
5633
- userIsDragging,
5634
5590
  hoveringOverArea,
5635
5591
  isEnabled,
5636
5592
  isAreaSelected,
@@ -5652,12 +5608,10 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
5652
5608
  {
5653
5609
  zoneCompound,
5654
5610
  componentId,
5655
- preview,
5656
5611
  dragAxis,
5657
- isEnabled,
5658
5612
  index: i,
5659
5613
  collisionAxis,
5660
- inDroppableZone: acceptsTarget(draggedComponentType)
5614
+ inDroppableZone: targetAccepted
5661
5615
  },
5662
5616
  componentId
5663
5617
  );
@@ -5672,8 +5626,8 @@ var DropZoneRenderItem = ({
5672
5626
  metadata
5673
5627
  }) => {
5674
5628
  const Component = config.components[item.type];
5675
- const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
5676
- const nextContextValue = (0, import_react34.useMemo)(
5629
+ const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
5630
+ const nextContextValue = (0, import_react35.useMemo)(
5677
5631
  () => ({
5678
5632
  areaId: props.id,
5679
5633
  depth: 1
@@ -5691,14 +5645,14 @@ var DropZoneRenderItem = ({
5691
5645
  ) }, props.id);
5692
5646
  };
5693
5647
  var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRender2, __spreadValues({}, props));
5694
- var DropZoneRender2 = (0, import_react34.forwardRef)(
5648
+ var DropZoneRender2 = (0, import_react35.forwardRef)(
5695
5649
  function DropZoneRenderInternal({ className, style, zone }, ref) {
5696
- const ctx = (0, import_react34.useContext)(dropZoneContext);
5650
+ const ctx = (0, import_react35.useContext)(dropZoneContext);
5697
5651
  const { areaId = "root" } = ctx || {};
5698
- const { config, data, metadata } = (0, import_react34.useContext)(renderContext);
5652
+ const { config, data, metadata } = (0, import_react35.useContext)(renderContext);
5699
5653
  let zoneCompound = rootDroppableId;
5700
5654
  let content = (data == null ? void 0 : data.content) || [];
5701
- (0, import_react34.useEffect)(() => {
5655
+ (0, import_react35.useEffect)(() => {
5702
5656
  if (!content) {
5703
5657
  if (ctx == null ? void 0 : ctx.registerZone) {
5704
5658
  ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -5735,9 +5689,9 @@ var DropZoneRender2 = (0, import_react34.forwardRef)(
5735
5689
  }
5736
5690
  );
5737
5691
  var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, __spreadValues({}, props));
5738
- var DropZone = (0, import_react34.forwardRef)(
5692
+ var DropZone = (0, import_react35.forwardRef)(
5739
5693
  function DropZone2(props, ref) {
5740
- const ctx = (0, import_react34.useContext)(dropZoneContext);
5694
+ const ctx = (0, import_react35.useContext)(dropZoneContext);
5741
5695
  if ((ctx == null ? void 0 : ctx.mode) === "edit") {
5742
5696
  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
5743
5697
  }
@@ -5747,8 +5701,7 @@ var DropZone = (0, import_react34.forwardRef)(
5747
5701
 
5748
5702
  // lib/dnd/NestedDroppablePlugin.ts
5749
5703
  init_react_import();
5750
- var import_abstract10 = require("@dnd-kit/abstract");
5751
- var import_state2 = require("@dnd-kit/state");
5704
+ var import_abstract9 = require("@dnd-kit/abstract");
5752
5705
 
5753
5706
  // lib/throttle.ts
5754
5707
  init_react_import();
@@ -5797,7 +5750,7 @@ var GlobalPosition = class {
5797
5750
  var _a;
5798
5751
  this.target = target;
5799
5752
  this.original = original;
5800
- this.frameEl = document.querySelector("#preview-frame");
5753
+ this.frameEl = document.querySelector("iframe#preview-frame");
5801
5754
  if (this.frameEl) {
5802
5755
  this.frameRect = this.frameEl.getBoundingClientRect();
5803
5756
  this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
@@ -5877,6 +5830,7 @@ var getZoneId2 = (candidate) => {
5877
5830
  }
5878
5831
  return id;
5879
5832
  };
5833
+ var BUFFER = 6;
5880
5834
  var getPointerCollisions = (position, manager) => {
5881
5835
  const candidates = [];
5882
5836
  let elements = position.target.ownerDocument.elementsFromPoint(
@@ -5900,13 +5854,26 @@ var getPointerCollisions = (position, manager) => {
5900
5854
  for (let i = 0; i < elements.length; i++) {
5901
5855
  const element = elements[i];
5902
5856
  const dropzoneId = element.getAttribute("data-puck-dropzone");
5857
+ const id = element.getAttribute("data-puck-dnd");
5858
+ const isVoid = element.hasAttribute("data-puck-dnd-void");
5859
+ if (BUFFER && (dropzoneId || id) && !isVoid) {
5860
+ const box = element.getBoundingClientRect();
5861
+ const contractedBox = {
5862
+ left: box.left + BUFFER,
5863
+ right: box.right - BUFFER,
5864
+ top: box.top + BUFFER,
5865
+ bottom: box.bottom - BUFFER
5866
+ };
5867
+ if (position.frame.x < contractedBox.left || position.frame.x > contractedBox.right || position.frame.y > contractedBox.bottom || position.frame.y < contractedBox.top) {
5868
+ continue;
5869
+ }
5870
+ }
5903
5871
  if (dropzoneId) {
5904
5872
  const droppable = manager.registry.droppables.get(dropzoneId);
5905
5873
  if (droppable) {
5906
5874
  candidates.push(droppable);
5907
5875
  }
5908
5876
  }
5909
- const id = element.getAttribute("data-puck-dnd");
5910
5877
  if (id) {
5911
5878
  const droppable = manager.registry.droppables.get(id);
5912
5879
  if (droppable) {
@@ -5955,22 +5922,25 @@ var findDeepestCandidate = (position, manager) => {
5955
5922
  return true;
5956
5923
  });
5957
5924
  filteredCandidates.reverse();
5958
- const zone = getZoneId2(filteredCandidates[0]);
5959
- const area = (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
5925
+ const primaryCandidate = filteredCandidates[0];
5926
+ const primaryCandidateData = primaryCandidate.data;
5927
+ const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
5928
+ const zone = getZoneId2(primaryCandidate);
5929
+ const area = primaryCandidateIsComponent && primaryCandidateData.containsActiveZone ? filteredCandidates[0].id : (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
5960
5930
  return { zone, area };
5961
5931
  }
5962
5932
  return {
5963
- zone: "default-zone",
5964
- area: null
5933
+ zone: rootDroppableId,
5934
+ area: rootAreaId
5965
5935
  };
5966
5936
  };
5967
- var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract10.Plugin {
5937
+ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract9.Plugin {
5968
5938
  constructor(manager, options) {
5969
5939
  super(manager);
5970
5940
  if (typeof window === "undefined") {
5971
5941
  return;
5972
5942
  }
5973
- const cleanupEffect = (0, import_state2.effects)(() => {
5943
+ this.registerEffect(() => {
5974
5944
  const handleMove = (event) => {
5975
5945
  const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
5976
5946
  const position = new GlobalPosition(target, {
@@ -5994,12 +5964,12 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
5994
5964
  capture: true
5995
5965
  // dndkit's PointerSensor prevents propagation during drag
5996
5966
  });
5997
- this.destroy = () => {
5967
+ const cleanup = () => {
5998
5968
  document.body.removeEventListener("pointermove", handlePointerMove, {
5999
5969
  capture: true
6000
5970
  });
6001
- cleanupEffect();
6002
5971
  };
5972
+ return cleanup;
6003
5973
  });
6004
5974
  }
6005
5975
  };
@@ -6059,14 +6029,15 @@ function getDeepDir(el) {
6059
6029
  }
6060
6030
 
6061
6031
  // components/DragDropContext/index.tsx
6032
+ var import_state = require("@dnd-kit/state");
6062
6033
  var import_jsx_runtime26 = require("react/jsx-runtime");
6063
6034
  var DEBUG3 = false;
6064
- var dragListenerContext = (0, import_react36.createContext)({
6035
+ var dragListenerContext = (0, import_react38.createContext)({
6065
6036
  dragListeners: {}
6066
6037
  });
6067
6038
  function useDragListener(type, fn, deps = []) {
6068
- const { setDragListeners } = (0, import_react36.useContext)(dragListenerContext);
6069
- (0, import_react36.useEffect)(() => {
6039
+ const { setDragListeners } = (0, import_react38.useContext)(dragListenerContext);
6040
+ (0, import_react38.useEffect)(() => {
6070
6041
  if (setDragListeners) {
6071
6042
  setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
6072
6043
  [type]: [...old[type] || [], fn]
@@ -6076,8 +6047,8 @@ function useDragListener(type, fn, deps = []) {
6076
6047
  }
6077
6048
  var AREA_CHANGE_DEBOUNCE_MS = 100;
6078
6049
  var useTempDisableFallback = (timeout3) => {
6079
- const lastFallbackDisable = (0, import_react36.useRef)(null);
6080
- return (0, import_react36.useCallback)((manager) => {
6050
+ const lastFallbackDisable = (0, import_react38.useRef)(null);
6051
+ return (0, import_react38.useCallback)((manager) => {
6081
6052
  collisionStore.setState({ fallbackEnabled: false });
6082
6053
  const fallbackId = generateId();
6083
6054
  lastFallbackDisable.current = fallbackId;
@@ -6096,19 +6067,21 @@ var DragDropContextClient = ({
6096
6067
  const dispatch = useAppStore((s) => s.dispatch);
6097
6068
  const appStore = useAppStoreApi();
6098
6069
  const id = useSafeId();
6099
- const debouncedParamsRef = (0, import_react36.useRef)(null);
6070
+ const debouncedParamsRef = (0, import_react38.useRef)(null);
6100
6071
  const tempDisableFallback = useTempDisableFallback(100);
6101
- const [zoneStore] = (0, import_react36.useState)(
6072
+ const [zoneStore] = (0, import_react38.useState)(
6102
6073
  () => (0, import_zustand5.createStore)(() => ({
6103
6074
  zoneDepthIndex: {},
6104
6075
  nextZoneDepthIndex: {},
6105
6076
  areaDepthIndex: {},
6106
6077
  nextAreaDepthIndex: {},
6107
6078
  draggedItem: null,
6108
- previewIndex: {}
6079
+ previewIndex: {},
6080
+ enabledIndex: {},
6081
+ hoveringComponent: null
6109
6082
  }))
6110
6083
  );
6111
- const getChanged2 = (0, import_react36.useCallback)(
6084
+ const getChanged2 = (0, import_react38.useCallback)(
6112
6085
  (params, id2) => {
6113
6086
  const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
6114
6087
  const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -6129,7 +6102,7 @@ var DragDropContextClient = ({
6129
6102
  },
6130
6103
  [zoneStore]
6131
6104
  );
6132
- const setDeepestAndCollide = (0, import_react36.useCallback)(
6105
+ const setDeepestAndCollide = (0, import_react38.useCallback)(
6133
6106
  (params, manager) => {
6134
6107
  const { zoneChanged, areaChanged } = getChanged2(params, id);
6135
6108
  if (!zoneChanged && !areaChanged) return;
@@ -6153,7 +6126,7 @@ var DragDropContextClient = ({
6153
6126
  setDeepestDb.cancel();
6154
6127
  debouncedParamsRef.current = null;
6155
6128
  };
6156
- (0, import_react36.useEffect)(() => {
6129
+ (0, import_react38.useEffect)(() => {
6157
6130
  if (DEBUG3) {
6158
6131
  zoneStore.subscribe(
6159
6132
  (s) => {
@@ -6167,7 +6140,7 @@ var DragDropContextClient = ({
6167
6140
  );
6168
6141
  }
6169
6142
  }, []);
6170
- const [plugins] = (0, import_react36.useState)(() => [
6143
+ const [plugins] = (0, import_react38.useState)(() => [
6171
6144
  ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
6172
6145
  createNestedDroppablePlugin(
6173
6146
  {
@@ -6215,10 +6188,10 @@ var DragDropContextClient = ({
6215
6188
  )
6216
6189
  ]);
6217
6190
  const sensors = useSensors();
6218
- const [dragListeners, setDragListeners] = (0, import_react36.useState)({});
6219
- const dragMode = (0, import_react36.useRef)(null);
6220
- const initialSelector = (0, import_react36.useRef)(void 0);
6221
- const nextContextValue = (0, import_react36.useMemo)(
6191
+ const [dragListeners, setDragListeners] = (0, import_react38.useState)({});
6192
+ const dragMode = (0, import_react38.useRef)(null);
6193
+ const initialSelector = (0, import_react38.useRef)(void 0);
6194
+ const nextContextValue = (0, import_react38.useMemo)(
6222
6195
  () => ({
6223
6196
  mode: "edit",
6224
6197
  areaId: "root",
@@ -6234,12 +6207,14 @@ var DragDropContextClient = ({
6234
6207
  setDragListeners
6235
6208
  },
6236
6209
  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
6237
- import_react35.DragDropProvider,
6210
+ import_react37.DragDropProvider,
6238
6211
  {
6239
6212
  plugins,
6240
6213
  sensors,
6241
6214
  onDragEnd: (event, manager) => {
6242
- var _a;
6215
+ var _a, _b;
6216
+ const entryEl = (_a = getFrame()) == null ? void 0 : _a.querySelector("[data-puck-entry]");
6217
+ entryEl == null ? void 0 : entryEl.removeAttribute("data-puck-dragging");
6243
6218
  const { source, target } = event.operation;
6244
6219
  if (!source) {
6245
6220
  zoneStore.setState({ draggedItem: null });
@@ -6247,9 +6222,9 @@ var DragDropContextClient = ({
6247
6222
  }
6248
6223
  const { zone, index } = source.data;
6249
6224
  const { previewIndex = {} } = zoneStore.getState() || {};
6250
- const thisPreview = ((_a = previewIndex[zone]) == null ? void 0 : _a.props.id) === source.id ? previewIndex[zone] : null;
6251
- setTimeout(() => {
6252
- var _a2, _b;
6225
+ const thisPreview = ((_b = previewIndex[zone]) == null ? void 0 : _b.props.id) === source.id ? previewIndex[zone] : null;
6226
+ const onAnimationEnd = () => {
6227
+ var _a2, _b2;
6253
6228
  zoneStore.setState({ draggedItem: null });
6254
6229
  if (event.canceled || (target == null ? void 0 : target.type) === "void") {
6255
6230
  zoneStore.setState({ previewIndex: {} });
@@ -6285,23 +6260,28 @@ var DragDropContextClient = ({
6285
6260
  });
6286
6261
  }
6287
6262
  }
6288
- setTimeout(() => {
6289
- dispatch({
6290
- type: "setUi",
6291
- ui: {
6292
- itemSelector: { index, zone },
6293
- isDragging: false
6294
- },
6295
- recordHistory: true
6296
- });
6297
- }, 50);
6298
- (_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
6263
+ dispatch({
6264
+ type: "setUi",
6265
+ ui: {
6266
+ itemSelector: { index, zone },
6267
+ isDragging: false
6268
+ },
6269
+ recordHistory: true
6270
+ });
6271
+ (_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
6299
6272
  fn(event, manager);
6300
6273
  });
6301
- }, 250);
6274
+ };
6275
+ let dispose;
6276
+ dispose = (0, import_state.effect)(() => {
6277
+ if (source.status === "idle") {
6278
+ onAnimationEnd();
6279
+ dispose == null ? void 0 : dispose();
6280
+ }
6281
+ });
6302
6282
  },
6303
6283
  onDragOver: (event, manager) => {
6304
- var _a, _b, _c, _d, _e;
6284
+ var _a, _b, _c, _d;
6305
6285
  event.preventDefault();
6306
6286
  const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
6307
6287
  if (!draggedItem) return;
@@ -6319,7 +6299,7 @@ var DragDropContextClient = ({
6319
6299
  const targetData = target.data;
6320
6300
  targetZone = targetData.zone;
6321
6301
  targetIndex = targetData.index;
6322
- const collisionData = (_c = (_b = manager.dragOperation.data) == null ? void 0 : _b.collisionMap) == null ? void 0 : _c[targetId];
6302
+ const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
6323
6303
  const dir = getDeepDir(target.element);
6324
6304
  const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || dir === "ltr" && (collisionData == null ? void 0 : collisionData.direction) === "left" || dir === "rtl" && (collisionData == null ? void 0 : collisionData.direction) === "right" ? "before" : "after";
6325
6305
  if (targetIndex >= sourceIndex && sourceZone === targetZone) {
@@ -6332,7 +6312,7 @@ var DragDropContextClient = ({
6332
6312
  targetZone = target.id.toString();
6333
6313
  targetIndex = 0;
6334
6314
  }
6335
- const path = ((_d = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _d.path) || [];
6315
+ const path = ((_c = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _c.path) || [];
6336
6316
  if (targetId === sourceId || path.find((path2) => {
6337
6317
  const [pathId] = path2.split(":");
6338
6318
  return pathId === sourceId;
@@ -6378,16 +6358,12 @@ var DragDropContextClient = ({
6378
6358
  });
6379
6359
  }
6380
6360
  }
6381
- (_e = dragListeners.dragover) == null ? void 0 : _e.forEach((fn) => {
6361
+ (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
6382
6362
  fn(event, manager);
6383
6363
  });
6384
6364
  },
6385
6365
  onDragStart: (event, manager) => {
6386
6366
  var _a;
6387
- dispatch({
6388
- type: "setUi",
6389
- ui: { itemSelector: null, isDragging: true }
6390
- });
6391
6367
  const { source } = event.operation;
6392
6368
  if (source && source.type !== "void") {
6393
6369
  const sourceData = source.data;
@@ -6417,11 +6393,31 @@ var DragDropContextClient = ({
6417
6393
  });
6418
6394
  },
6419
6395
  onBeforeDragStart: (event) => {
6420
- var _a;
6421
- const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.data.type) === "drawer";
6396
+ var _a, _b, _c, _d;
6397
+ const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.type) === "drawer";
6422
6398
  dragMode.current = isNewComponent ? "new" : "existing";
6423
6399
  initialSelector.current = void 0;
6424
6400
  zoneStore.setState({ draggedItem: event.operation.source });
6401
+ if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== ((_c = event.operation.source) == null ? void 0 : _c.id)) {
6402
+ dispatch({
6403
+ type: "setUi",
6404
+ ui: {
6405
+ itemSelector: null,
6406
+ isDragging: true
6407
+ },
6408
+ recordHistory: false
6409
+ });
6410
+ } else {
6411
+ dispatch({
6412
+ type: "setUi",
6413
+ ui: {
6414
+ isDragging: true
6415
+ },
6416
+ recordHistory: false
6417
+ });
6418
+ }
6419
+ const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
6420
+ entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
6425
6421
  },
6426
6422
  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
6427
6423
  }
@@ -6441,6 +6437,7 @@ var DragDropContext = ({
6441
6437
  };
6442
6438
 
6443
6439
  // components/Drawer/index.tsx
6440
+ var import_react40 = require("@dnd-kit/react");
6444
6441
  var import_jsx_runtime27 = require("react/jsx-runtime");
6445
6442
  var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
6446
6443
  var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
@@ -6451,7 +6448,7 @@ var DrawerItemInner = ({
6451
6448
  dragRef,
6452
6449
  isDragDisabled
6453
6450
  }) => {
6454
- const CustomInner = (0, import_react37.useMemo)(
6451
+ const CustomInner = (0, import_react39.useMemo)(
6455
6452
  () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
6456
6453
  [children]
6457
6454
  );
@@ -6477,10 +6474,11 @@ var DrawerItemDraggable = ({
6477
6474
  id,
6478
6475
  isDragDisabled
6479
6476
  }) => {
6480
- const { ref } = useDraggableSafe({
6477
+ const { ref } = (0, import_react40.useDraggable)({
6481
6478
  id,
6482
- data: { type: "drawer", componentType: name },
6483
- disabled: isDragDisabled
6479
+ data: { componentType: name },
6480
+ disabled: isDragDisabled,
6481
+ type: "drawer"
6484
6482
  });
6485
6483
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName18("draggable"), children: [
6486
6484
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DrawerItemInner, { name, label, children }) }),
@@ -6505,7 +6503,7 @@ var DrawerItem = ({
6505
6503
  isDragDisabled
6506
6504
  }) => {
6507
6505
  const resolvedId = id || name;
6508
- const [dynamicId, setDynamicId] = (0, import_react37.useState)(generateId(resolvedId));
6506
+ const [dynamicId, setDynamicId] = (0, import_react39.useState)(generateId(resolvedId));
6509
6507
  if (typeof index !== "undefined") {
6510
6508
  console.error(
6511
6509
  "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -6545,7 +6543,7 @@ var Drawer = ({
6545
6543
  );
6546
6544
  }
6547
6545
  const id = useSafeId();
6548
- const { ref } = useDroppableSafe({
6546
+ const { ref } = (0, import_react40.useDroppable)({
6549
6547
  id,
6550
6548
  type: "void",
6551
6549
  collisionPriority: 0
@@ -6558,6 +6556,7 @@ var Drawer = ({
6558
6556
  ref,
6559
6557
  "data-puck-dnd": id,
6560
6558
  "data-puck-drawer": true,
6559
+ "data-puck-dnd-void": true,
6561
6560
  children
6562
6561
  }
6563
6562
  );
@@ -6566,7 +6565,7 @@ Drawer.Item = DrawerItem;
6566
6565
 
6567
6566
  // components/Puck/index.tsx
6568
6567
  init_react_import();
6569
- var import_react52 = require("react");
6568
+ var import_react56 = require("react");
6570
6569
 
6571
6570
  // components/SidebarSection/index.tsx
6572
6571
  init_react_import();
@@ -6577,7 +6576,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
6577
6576
 
6578
6577
  // lib/use-breadcrumbs.ts
6579
6578
  init_react_import();
6580
- var import_react38 = require("react");
6579
+ var import_react41 = require("react");
6581
6580
  var useBreadcrumbs = (renderCount) => {
6582
6581
  const selectedId = useAppStore((s) => {
6583
6582
  var _a;
@@ -6589,7 +6588,7 @@ var useBreadcrumbs = (renderCount) => {
6589
6588
  return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
6590
6589
  });
6591
6590
  const appStore = useAppStoreApi();
6592
- return (0, import_react38.useMemo)(() => {
6591
+ return (0, import_react41.useMemo)(() => {
6593
6592
  const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
6594
6593
  var _a, _b, _c;
6595
6594
  const [componentId] = zoneCompound.split(":");
@@ -6661,70 +6660,26 @@ var SidebarSection = ({
6661
6660
  );
6662
6661
  };
6663
6662
 
6664
- // components/MenuBar/index.tsx
6663
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
6665
6664
  init_react_import();
6665
+ var styles_module_default14 = { "Puck": "_Puck_dnlfp_19", "Puck-portal": "_Puck-portal_dnlfp_31", "PuckLayout-inner": "_PuckLayout-inner_dnlfp_38", "PuckLayout--mounted": "_PuckLayout--mounted_dnlfp_50", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_dnlfp_54", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_dnlfp_60", "PuckLayout-mounted": "_PuckLayout-mounted_dnlfp_74", "PuckLayout": "_PuckLayout_dnlfp_38", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_dnlfp_115", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_dnlfp_124" };
6666
6666
 
6667
- // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
6667
+ // components/Puck/components/Fields/index.tsx
6668
6668
  init_react_import();
6669
- var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
6670
6669
 
6671
- // components/MenuBar/index.tsx
6670
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
6671
+ init_react_import();
6672
+ var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
6673
+
6674
+ // components/Puck/components/Fields/index.tsx
6675
+ var import_react42 = require("react");
6676
+ var import_shallow5 = require("zustand/react/shallow");
6672
6677
  var import_jsx_runtime29 = require("react/jsx-runtime");
6673
- var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
6674
- function MenuBar({
6675
- menuOpen = false,
6676
- renderHeaderActions,
6677
- setMenuOpen
6678
- }) {
6679
- const back = useAppStore((s) => s.history.back);
6680
- const forward = useAppStore((s) => s.history.forward);
6681
- const hasFuture = useAppStore((s) => s.history.hasFuture());
6682
- const hasPast = useAppStore((s) => s.history.hasPast());
6683
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
6684
- "div",
6685
- {
6686
- className: getClassName20({ menuOpen }),
6687
- onClick: (event) => {
6688
- var _a;
6689
- const element = event.target;
6690
- if (window.matchMedia("(min-width: 638px)").matches) {
6691
- return;
6692
- }
6693
- if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
6694
- setMenuOpen(false);
6695
- }
6696
- },
6697
- children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName20("inner"), children: [
6698
- /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName20("history"), children: [
6699
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Undo2, { size: 21 }) }),
6700
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Redo2, { size: 21 }) })
6701
- ] }),
6702
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderHeaderActions && renderHeaderActions() })
6703
- ] })
6704
- }
6705
- );
6706
- }
6707
-
6708
- // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
6709
- init_react_import();
6710
- var styles_module_default15 = { "Puck": "_Puck_11o75_19", "Puck-portal": "_Puck-portal_11o75_24", "PuckLayout-inner": "_PuckLayout-inner_11o75_31", "PuckLayout--mounted": "_PuckLayout--mounted_11o75_43", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_11o75_47", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_11o75_53", "PuckLayout-mounted": "_PuckLayout-mounted_11o75_67", "PuckLayout": "_PuckLayout_11o75_31", "PuckLayout-header": "_PuckLayout-header_11o75_108", "PuckLayout-headerInner": "_PuckLayout-headerInner_11o75_117", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_11o75_127", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_11o75_134", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_11o75_135", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_11o75_139", "PuckLayout-headerPath": "_PuckLayout-headerPath_11o75_143", "PuckLayout-headerTools": "_PuckLayout-headerTools_11o75_150", "PuckLayout-menuButton": "_PuckLayout-menuButton_11o75_156", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_11o75_161", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_11o75_135", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_11o75_134" };
6711
-
6712
- // components/Puck/components/Fields/index.tsx
6713
- init_react_import();
6714
-
6715
- // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
6716
- init_react_import();
6717
- var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
6718
-
6719
- // components/Puck/components/Fields/index.tsx
6720
- var import_react39 = require("react");
6721
- var import_shallow4 = require("zustand/react/shallow");
6722
- var import_jsx_runtime30 = require("react/jsx-runtime");
6723
- var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
6678
+ var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
6724
6679
  var DefaultFields = ({
6725
6680
  children
6726
6681
  }) => {
6727
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
6682
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
6728
6683
  };
6729
6684
  var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
6730
6685
  let currentProps;
@@ -6784,18 +6739,19 @@ var FieldsChild = ({ fieldName }) => {
6784
6739
  return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
6785
6740
  });
6786
6741
  const permissions = useAppStore(
6787
- (0, import_shallow4.useShallow)((s) => {
6742
+ (0, import_shallow5.useShallow)((s) => {
6788
6743
  const { selectedItem, permissions: permissions2 } = s;
6789
6744
  return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
6790
6745
  })
6791
6746
  );
6792
6747
  const appStore = useAppStoreApi();
6793
- const onChange = (0, import_react39.useCallback)(createOnChange(fieldName, appStore), [
6748
+ const onChange = (0, import_react42.useCallback)(createOnChange(fieldName, appStore), [
6794
6749
  fieldName
6795
6750
  ]);
6796
- if (!field || !id) return null;
6751
+ const { visible = true } = field != null ? field : {};
6752
+ if (!field || !id || !visible) return null;
6797
6753
  if (field.type === "slot") return null;
6798
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("field"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
6754
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("field"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
6799
6755
  AutoFieldPrivate,
6800
6756
  {
6801
6757
  field,
@@ -6807,14 +6763,15 @@ var FieldsChild = ({ fieldName }) => {
6807
6763
  }
6808
6764
  ) }, id);
6809
6765
  };
6810
- var Fields = ({ wrapFields = true }) => {
6766
+ var FieldsChildMemo = (0, import_react42.memo)(FieldsChild);
6767
+ var FieldsInternal = ({ wrapFields = true }) => {
6811
6768
  const overrides = useAppStore((s) => s.overrides);
6812
6769
  const componentResolving = useAppStore((s) => {
6813
6770
  var _a, _b;
6814
6771
  const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
6815
6772
  return (loadingCount != null ? loadingCount : 0) > 0;
6816
6773
  });
6817
- const itemSelector = useAppStore((0, import_shallow4.useShallow)((s) => s.state.ui.itemSelector));
6774
+ const itemSelector = useAppStore((0, import_shallow5.useShallow)((s) => s.state.ui.itemSelector));
6818
6775
  const id = useAppStore((s) => {
6819
6776
  var _a;
6820
6777
  return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -6823,42 +6780,48 @@ var Fields = ({ wrapFields = true }) => {
6823
6780
  useRegisterFieldsSlice(appStore, id);
6824
6781
  const fieldsLoading = useAppStore((s) => s.fields.loading);
6825
6782
  const fieldNames = useAppStore(
6826
- (0, import_shallow4.useShallow)((s) => Object.keys(s.fields.fields))
6783
+ (0, import_shallow5.useShallow)((s) => {
6784
+ if (s.fields.id === id) {
6785
+ return Object.keys(s.fields.fields);
6786
+ }
6787
+ return [];
6788
+ })
6827
6789
  );
6828
6790
  const isLoading = fieldsLoading || componentResolving;
6829
- const Wrapper = (0, import_react39.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
6830
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
6791
+ const Wrapper = (0, import_react42.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
6792
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
6831
6793
  "form",
6832
6794
  {
6833
- className: getClassName21({ wrapFields }),
6795
+ className: getClassName20({ wrapFields }),
6834
6796
  onSubmit: (e) => {
6835
6797
  e.preventDefault();
6836
6798
  },
6837
6799
  children: [
6838
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldsChild, { fieldName }, fieldName)) }),
6839
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Loader, { size: 16 }) }) })
6800
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
6801
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Loader, { size: 16 }) }) })
6840
6802
  ]
6841
6803
  }
6842
6804
  );
6843
6805
  };
6806
+ var Fields = (0, import_react42.memo)(FieldsInternal);
6844
6807
 
6845
6808
  // components/Puck/components/Components/index.tsx
6846
6809
  init_react_import();
6847
6810
 
6848
6811
  // lib/use-component-list.tsx
6849
6812
  init_react_import();
6850
- var import_react40 = require("react");
6813
+ var import_react43 = require("react");
6851
6814
 
6852
6815
  // components/ComponentList/index.tsx
6853
6816
  init_react_import();
6854
6817
 
6855
6818
  // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
6856
6819
  init_react_import();
6857
- var styles_module_default17 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
6820
+ var styles_module_default16 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
6858
6821
 
6859
6822
  // components/ComponentList/index.tsx
6860
- var import_jsx_runtime31 = require("react/jsx-runtime");
6861
- var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
6823
+ var import_jsx_runtime30 = require("react/jsx-runtime");
6824
+ var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
6862
6825
  var ComponentListItem = ({
6863
6826
  name,
6864
6827
  label
@@ -6869,7 +6832,7 @@ var ComponentListItem = ({
6869
6832
  type: name
6870
6833
  }).insert
6871
6834
  );
6872
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
6835
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
6873
6836
  };
6874
6837
  var ComponentList = ({
6875
6838
  children,
@@ -6880,12 +6843,12 @@ var ComponentList = ({
6880
6843
  const setUi = useAppStore((s) => s.setUi);
6881
6844
  const componentList = useAppStore((s) => s.state.ui.componentList);
6882
6845
  const { expanded = true } = componentList[id] || {};
6883
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
6884
- title && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
6846
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName21({ isExpanded: expanded }), children: [
6847
+ title && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
6885
6848
  "button",
6886
6849
  {
6887
6850
  type: "button",
6888
- className: getClassName22("title"),
6851
+ className: getClassName21("title"),
6889
6852
  onClick: () => setUi({
6890
6853
  componentList: __spreadProps(__spreadValues({}, componentList), {
6891
6854
  [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -6895,14 +6858,14 @@ var ComponentList = ({
6895
6858
  }),
6896
6859
  title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
6897
6860
  children: [
6898
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: title }),
6899
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDown, { size: 12 }) })
6861
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: title }),
6862
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: 12 }) })
6900
6863
  ]
6901
6864
  }
6902
6865
  ),
6903
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
6866
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("content"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
6904
6867
  var _a;
6905
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6868
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
6906
6869
  ComponentListItem,
6907
6870
  {
6908
6871
  label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -6916,12 +6879,12 @@ var ComponentList = ({
6916
6879
  ComponentList.Item = ComponentListItem;
6917
6880
 
6918
6881
  // lib/use-component-list.tsx
6919
- var import_jsx_runtime32 = require("react/jsx-runtime");
6882
+ var import_jsx_runtime31 = require("react/jsx-runtime");
6920
6883
  var useComponentList = () => {
6921
- const [componentList, setComponentList] = (0, import_react40.useState)();
6884
+ const [componentList, setComponentList] = (0, import_react43.useState)();
6922
6885
  const config = useAppStore((s) => s.config);
6923
6886
  const uiComponentList = useAppStore((s) => s.state.ui.componentList);
6924
- (0, import_react40.useEffect)(() => {
6887
+ (0, import_react43.useEffect)(() => {
6925
6888
  var _a, _b, _c;
6926
6889
  if (Object.keys(uiComponentList).length > 0) {
6927
6890
  const matchedComponents = [];
@@ -6931,7 +6894,7 @@ var useComponentList = () => {
6931
6894
  if (category.visible === false || !category.components) {
6932
6895
  return null;
6933
6896
  }
6934
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6897
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6935
6898
  ComponentList,
6936
6899
  {
6937
6900
  id: categoryKey,
@@ -6940,7 +6903,7 @@ var useComponentList = () => {
6940
6903
  var _a2;
6941
6904
  matchedComponents.push(componentName);
6942
6905
  const componentConf = config.components[componentName] || {};
6943
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6906
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6944
6907
  ComponentList.Item,
6945
6908
  {
6946
6909
  label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -6960,7 +6923,7 @@ var useComponentList = () => {
6960
6923
  );
6961
6924
  if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
6962
6925
  _componentList.push(
6963
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6926
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6964
6927
  ComponentList,
6965
6928
  {
6966
6929
  id: "other",
@@ -6968,7 +6931,7 @@ var useComponentList = () => {
6968
6931
  children: remainingComponents.map((componentName, i) => {
6969
6932
  var _a2;
6970
6933
  const componentConf = config.components[componentName] || {};
6971
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
6934
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
6972
6935
  ComponentList.Item,
6973
6936
  {
6974
6937
  name: componentName,
@@ -6990,25 +6953,25 @@ var useComponentList = () => {
6990
6953
  };
6991
6954
 
6992
6955
  // components/Puck/components/Components/index.tsx
6993
- var import_react41 = require("react");
6994
- var import_jsx_runtime33 = require("react/jsx-runtime");
6956
+ var import_react44 = require("react");
6957
+ var import_jsx_runtime32 = require("react/jsx-runtime");
6995
6958
  var Components = () => {
6996
6959
  const overrides = useAppStore((s) => s.overrides);
6997
6960
  const componentList = useComponentList();
6998
- const Wrapper = (0, import_react41.useMemo)(() => overrides.components || "div", [overrides]);
6999
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ComponentList, { id: "all" }) });
6961
+ const Wrapper = (0, import_react44.useMemo)(() => overrides.components || "div", [overrides]);
6962
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComponentList, { id: "all" }) });
7000
6963
  };
7001
6964
 
7002
6965
  // components/Puck/components/Preview/index.tsx
7003
6966
  init_react_import();
7004
- var import_react43 = require("react");
6967
+ var import_react46 = require("react");
7005
6968
 
7006
6969
  // components/AutoFrame/index.tsx
7007
6970
  init_react_import();
7008
- var import_react42 = require("react");
6971
+ var import_react45 = require("react");
7009
6972
  var import_object_hash = __toESM(require("object-hash"));
7010
6973
  var import_react_dom3 = require("react-dom");
7011
- var import_jsx_runtime34 = require("react/jsx-runtime");
6974
+ var import_jsx_runtime33 = require("react/jsx-runtime");
7012
6975
  var styleSelector = 'style, link[rel="stylesheet"]';
7013
6976
  var collectStyles = (doc) => {
7014
6977
  const collected = [];
@@ -7051,7 +7014,7 @@ var CopyHostStyles = ({
7051
7014
  onStylesLoaded = () => null
7052
7015
  }) => {
7053
7016
  const { document: doc, window: win } = useFrame();
7054
- (0, import_react42.useEffect)(() => {
7017
+ (0, import_react45.useEffect)(() => {
7055
7018
  if (!win || !doc) {
7056
7019
  return () => {
7057
7020
  };
@@ -7208,10 +7171,10 @@ var CopyHostStyles = ({
7208
7171
  observer.disconnect();
7209
7172
  };
7210
7173
  }, []);
7211
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
7174
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
7212
7175
  };
7213
- var autoFrameContext = (0, import_react42.createContext)({});
7214
- var useFrame = () => (0, import_react42.useContext)(autoFrameContext);
7176
+ var autoFrameContext = (0, import_react45.createContext)({});
7177
+ var useFrame = () => (0, import_react45.useContext)(autoFrameContext);
7215
7178
  function AutoFrame(_a) {
7216
7179
  var _b = _a, {
7217
7180
  children,
@@ -7232,11 +7195,11 @@ function AutoFrame(_a) {
7232
7195
  "onNotReady",
7233
7196
  "frameRef"
7234
7197
  ]);
7235
- const [loaded, setLoaded] = (0, import_react42.useState)(false);
7236
- const [ctx, setCtx] = (0, import_react42.useState)({});
7237
- const [mountTarget, setMountTarget] = (0, import_react42.useState)();
7238
- const [stylesLoaded, setStylesLoaded] = (0, import_react42.useState)(false);
7239
- (0, import_react42.useEffect)(() => {
7198
+ const [loaded, setLoaded] = (0, import_react45.useState)(false);
7199
+ const [ctx, setCtx] = (0, import_react45.useState)({});
7200
+ const [mountTarget, setMountTarget] = (0, import_react45.useState)();
7201
+ const [stylesLoaded, setStylesLoaded] = (0, import_react45.useState)(false);
7202
+ (0, import_react45.useEffect)(() => {
7240
7203
  var _a2;
7241
7204
  if (frameRef.current) {
7242
7205
  const doc = frameRef.current.contentDocument;
@@ -7255,7 +7218,7 @@ function AutoFrame(_a) {
7255
7218
  }
7256
7219
  }
7257
7220
  }, [frameRef, loaded, stylesLoaded]);
7258
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7221
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
7259
7222
  "iframe",
7260
7223
  __spreadProps(__spreadValues({}, props), {
7261
7224
  className,
@@ -7265,7 +7228,7 @@ function AutoFrame(_a) {
7265
7228
  onLoad: () => {
7266
7229
  setLoaded(true);
7267
7230
  },
7268
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7231
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
7269
7232
  CopyHostStyles,
7270
7233
  {
7271
7234
  debug,
@@ -7281,14 +7244,14 @@ var AutoFrame_default = AutoFrame;
7281
7244
 
7282
7245
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
7283
7246
  init_react_import();
7284
- var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
7247
+ var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
7285
7248
 
7286
7249
  // components/Puck/components/Preview/index.tsx
7287
- var import_jsx_runtime35 = require("react/jsx-runtime");
7288
- var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
7250
+ var import_jsx_runtime34 = require("react/jsx-runtime");
7251
+ var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
7289
7252
  var useBubbleIframeEvents = (ref) => {
7290
7253
  const status = useAppStore((s) => s.status);
7291
- (0, import_react43.useEffect)(() => {
7254
+ (0, import_react46.useEffect)(() => {
7292
7255
  if (ref.current && status === "READY") {
7293
7256
  const iframe = ref.current;
7294
7257
  const handlePointerMove = (event) => {
@@ -7326,7 +7289,7 @@ var useBubbleIframeEvents = (ref) => {
7326
7289
  }
7327
7290
  }, [status]);
7328
7291
  };
7329
- var Preview3 = ({ id = "puck-preview" }) => {
7292
+ var Preview2 = ({ id = "puck-preview" }) => {
7330
7293
  const dispatch = useAppStore((s) => s.dispatch);
7331
7294
  const root = useAppStore((s) => s.state.data.root);
7332
7295
  const config = useAppStore((s) => s.config);
@@ -7337,22 +7300,25 @@ var Preview3 = ({ id = "puck-preview" }) => {
7337
7300
  const renderData = useAppStore(
7338
7301
  (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
7339
7302
  );
7340
- const Page = (0, import_react43.useCallback)(
7303
+ const Page = (0, import_react46.useCallback)(
7341
7304
  (pageProps) => {
7342
7305
  var _a, _b;
7343
- const rootConfig = config.root;
7344
- const propsWithSlots = useSlots(rootConfig, pageProps, DropZoneEditPure);
7306
+ const propsWithSlots = useSlots(
7307
+ config,
7308
+ { type: "root", props: pageProps },
7309
+ DropZoneEditPure
7310
+ );
7345
7311
  return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
7346
7312
  id: "puck-root"
7347
- }, propsWithSlots)) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: propsWithSlots.children });
7313
+ }, propsWithSlots)) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: propsWithSlots.children });
7348
7314
  },
7349
- [config.root]
7315
+ [config]
7350
7316
  );
7351
- const Frame = (0, import_react43.useMemo)(() => overrides.iframe, [overrides]);
7317
+ const Frame = (0, import_react46.useMemo)(() => overrides.iframe, [overrides]);
7352
7318
  const rootProps = root.props || root;
7353
- const ref = (0, import_react43.useRef)(null);
7319
+ const ref = (0, import_react46.useRef)(null);
7354
7320
  useBubbleIframeEvents(ref);
7355
- const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7321
+ const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7356
7322
  Page,
7357
7323
  __spreadProps(__spreadValues({}, rootProps), {
7358
7324
  puck: {
@@ -7362,28 +7328,28 @@ var Preview3 = ({ id = "puck-preview" }) => {
7362
7328
  metadata
7363
7329
  },
7364
7330
  editMode: true,
7365
- children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZonePure, { zone: rootDroppableId })
7331
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropZonePure, { zone: rootDroppableId })
7366
7332
  })
7367
- ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Render, { data: renderData, config });
7368
- (0, import_react43.useEffect)(() => {
7333
+ ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render, { data: renderData, config });
7334
+ (0, import_react46.useEffect)(() => {
7369
7335
  if (!iframe.enabled) {
7370
7336
  setStatus("READY");
7371
7337
  }
7372
7338
  }, [iframe.enabled]);
7373
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7339
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7374
7340
  "div",
7375
7341
  {
7376
- className: getClassName23(),
7342
+ className: getClassName22(),
7377
7343
  id,
7378
7344
  "data-puck-preview": true,
7379
7345
  onClick: () => {
7380
7346
  dispatch({ type: "setUi", ui: { itemSelector: null } });
7381
7347
  },
7382
- children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7348
+ children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7383
7349
  AutoFrame_default,
7384
7350
  {
7385
7351
  id: "preview-frame",
7386
- className: getClassName23("frame"),
7352
+ className: getClassName22("frame"),
7387
7353
  "data-rfd-iframe": true,
7388
7354
  onReady: () => {
7389
7355
  setStatus("READY");
@@ -7392,18 +7358,18 @@ var Preview3 = ({ id = "puck-preview" }) => {
7392
7358
  setStatus("MOUNTED");
7393
7359
  },
7394
7360
  frameRef: ref,
7395
- children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
7361
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
7396
7362
  if (Frame) {
7397
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Frame, { document: document2, children: inner });
7363
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Frame, { document: document2, children: inner });
7398
7364
  }
7399
7365
  return inner;
7400
7366
  } })
7401
7367
  }
7402
- ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7368
+ ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
7403
7369
  "div",
7404
7370
  {
7405
7371
  id: "preview-frame",
7406
- className: getClassName23("frame"),
7372
+ className: getClassName22("frame"),
7407
7373
  ref,
7408
7374
  "data-puck-entry": true,
7409
7375
  children: inner
@@ -7421,7 +7387,7 @@ init_react_import();
7421
7387
 
7422
7388
  // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
7423
7389
  init_react_import();
7424
- var styles_module_default19 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
7390
+ var styles_module_default18 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
7425
7391
 
7426
7392
  // lib/scroll-into-view.ts
7427
7393
  init_react_import();
@@ -7435,7 +7401,7 @@ var scrollIntoView = (el) => {
7435
7401
  };
7436
7402
 
7437
7403
  // components/LayerTree/index.tsx
7438
- var import_react44 = require("react");
7404
+ var import_react47 = require("react");
7439
7405
 
7440
7406
  // lib/on-scroll-end.ts
7441
7407
  init_react_import();
@@ -7457,21 +7423,21 @@ var onScrollEnd = (frame, cb) => {
7457
7423
  };
7458
7424
 
7459
7425
  // components/LayerTree/index.tsx
7460
- var import_shallow5 = require("zustand/react/shallow");
7461
- var import_jsx_runtime36 = require("react/jsx-runtime");
7462
- var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
7463
- var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
7426
+ var import_shallow6 = require("zustand/react/shallow");
7427
+ var import_jsx_runtime35 = require("react/jsx-runtime");
7428
+ var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
7429
+ var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
7464
7430
  var Layer = ({
7465
7431
  index,
7466
7432
  itemId,
7467
7433
  zoneCompound
7468
7434
  }) => {
7469
7435
  var _a;
7470
- const ctx = (0, import_react44.useContext)(dropZoneContext);
7436
+ const ctx = (0, import_react47.useContext)(dropZoneContext);
7471
7437
  const config = useAppStore((s) => s.config);
7472
7438
  const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
7473
7439
  const dispatch = useAppStore((s) => s.dispatch);
7474
- const setItemSelector = (0, import_react44.useCallback)(
7440
+ const setItemSelector = (0, import_react47.useCallback)(
7475
7441
  (itemSelector2) => {
7476
7442
  dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
7477
7443
  },
@@ -7484,16 +7450,18 @@ var Layer = ({
7484
7450
  const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
7485
7451
  const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
7486
7452
  const zonesForItem = useAppStore(
7487
- (0, import_shallow5.useShallow)(
7453
+ (0, import_shallow6.useShallow)(
7488
7454
  (s) => Object.keys(s.state.indexes.zones).filter(
7489
7455
  (z) => z.split(":")[0] === itemId
7490
7456
  )
7491
7457
  )
7492
7458
  );
7493
7459
  const containsZone = zonesForItem.length > 0;
7494
- const { setHoveringComponent = () => {
7495
- }, hoveringComponent } = ctx || {};
7496
- const isHovering = hoveringComponent === itemId;
7460
+ const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
7461
+ const isHovering = useContextStore(
7462
+ ZoneStoreContext,
7463
+ (s) => s.hoveringComponent === itemId
7464
+ );
7497
7465
  const childIsSelected = useAppStore((s) => {
7498
7466
  var _a2, _b;
7499
7467
  const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
@@ -7504,7 +7472,7 @@ var Layer = ({
7504
7472
  });
7505
7473
  const componentConfig = config.components[nodeData.data.type];
7506
7474
  const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
7507
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
7475
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
7508
7476
  "li",
7509
7477
  {
7510
7478
  className: getClassNameLayer({
@@ -7514,7 +7482,7 @@ var Layer = ({
7514
7482
  childIsSelected
7515
7483
  }),
7516
7484
  children: [
7517
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
7485
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
7518
7486
  "button",
7519
7487
  {
7520
7488
  type: "button",
@@ -7529,7 +7497,10 @@ var Layer = ({
7529
7497
  `[data-puck-component="${itemId}"]`
7530
7498
  );
7531
7499
  if (!el) {
7532
- console.error("Scroll failed. No element was found for", itemId);
7500
+ setItemSelector({
7501
+ index,
7502
+ zone: zoneCompound
7503
+ });
7533
7504
  return;
7534
7505
  }
7535
7506
  scrollIntoView(el);
@@ -7540,31 +7511,31 @@ var Layer = ({
7540
7511
  });
7541
7512
  });
7542
7513
  },
7543
- onMouseOver: (e) => {
7514
+ onMouseEnter: (e) => {
7544
7515
  e.stopPropagation();
7545
- setHoveringComponent(itemId);
7516
+ zoneStore.setState({ hoveringComponent: itemId });
7546
7517
  },
7547
- onMouseOut: (e) => {
7518
+ onMouseLeave: (e) => {
7548
7519
  e.stopPropagation();
7549
- setHoveringComponent(null);
7520
+ zoneStore.setState({ hoveringComponent: null });
7550
7521
  },
7551
7522
  children: [
7552
- containsZone && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
7523
+ containsZone && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7553
7524
  "div",
7554
7525
  {
7555
7526
  className: getClassNameLayer("chevron"),
7556
7527
  title: isSelected ? "Collapse" : "Expand",
7557
- children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronDown, { size: "12" })
7528
+ children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { size: "12" })
7558
7529
  }
7559
7530
  ),
7560
- /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassNameLayer("title"), children: [
7561
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LayoutGrid, { size: "16" }) }),
7562
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassNameLayer("name"), children: label })
7531
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassNameLayer("title"), children: [
7532
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LayoutGrid, { size: "16" }) }),
7533
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("name"), children: label })
7563
7534
  ] })
7564
7535
  ]
7565
7536
  }
7566
7537
  ) }),
7567
- containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
7538
+ containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
7568
7539
  ]
7569
7540
  }
7570
7541
  );
@@ -7575,22 +7546,22 @@ var LayerTree = ({
7575
7546
  }) => {
7576
7547
  const label = _label != null ? _label : zoneCompound.split(":")[1];
7577
7548
  const contentIds = useAppStore(
7578
- (0, import_shallow5.useShallow)(
7549
+ (0, import_shallow6.useShallow)(
7579
7550
  (s) => {
7580
7551
  var _a, _b;
7581
7552
  return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
7582
7553
  }
7583
7554
  )
7584
7555
  );
7585
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
7586
- label && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
7587
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Layers, { size: "16" }) }),
7556
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
7557
+ label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName23("zoneTitle"), children: [
7558
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Layers, { size: "16" }) }),
7588
7559
  label
7589
7560
  ] }),
7590
- /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("ul", { className: getClassName24(), children: [
7591
- contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
7561
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { className: getClassName23(), children: [
7562
+ contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName23("helper"), children: "No items" }),
7592
7563
  contentIds.map((itemId, i) => {
7593
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
7564
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
7594
7565
  Layer,
7595
7566
  {
7596
7567
  index: i,
@@ -7605,7 +7576,7 @@ var LayerTree = ({
7605
7576
  };
7606
7577
 
7607
7578
  // components/Puck/components/Outline/index.tsx
7608
- var import_react45 = require("react");
7579
+ var import_react48 = require("react");
7609
7580
 
7610
7581
  // lib/data/find-zones-for-area.ts
7611
7582
  init_react_import();
@@ -7616,15 +7587,15 @@ var findZonesForArea = (state, area) => {
7616
7587
  };
7617
7588
 
7618
7589
  // components/Puck/components/Outline/index.tsx
7619
- var import_shallow6 = require("zustand/react/shallow");
7620
- var import_jsx_runtime37 = require("react/jsx-runtime");
7590
+ var import_shallow7 = require("zustand/react/shallow");
7591
+ var import_jsx_runtime36 = require("react/jsx-runtime");
7621
7592
  var Outline = () => {
7622
7593
  const outlineOverride = useAppStore((s) => s.overrides.outline);
7623
7594
  const rootZones = useAppStore(
7624
- (0, import_shallow6.useShallow)((s) => findZonesForArea(s.state, "root"))
7595
+ (0, import_shallow7.useShallow)((s) => findZonesForArea(s.state, "root"))
7625
7596
  );
7626
- const Wrapper = (0, import_react45.useMemo)(() => outlineOverride || "div", [outlineOverride]);
7627
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7597
+ const Wrapper = (0, import_react48.useMemo)(() => outlineOverride || "div", [outlineOverride]);
7598
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
7628
7599
  LayerTree,
7629
7600
  {
7630
7601
  label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -7757,25 +7728,25 @@ var getBox = function getBox2(el) {
7757
7728
  };
7758
7729
 
7759
7730
  // components/Puck/components/Canvas/index.tsx
7760
- var import_react47 = require("react");
7731
+ var import_react50 = require("react");
7761
7732
 
7762
7733
  // components/ViewportControls/index.tsx
7763
7734
  init_react_import();
7764
- var import_react46 = require("react");
7735
+ var import_react49 = require("react");
7765
7736
 
7766
7737
  // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
7767
7738
  init_react_import();
7768
- var styles_module_default20 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
7739
+ var styles_module_default19 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
7769
7740
 
7770
7741
  // components/ViewportControls/index.tsx
7771
- var import_jsx_runtime38 = require("react/jsx-runtime");
7742
+ var import_jsx_runtime37 = require("react/jsx-runtime");
7772
7743
  var icons = {
7773
- Smartphone: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Smartphone, { size: 16 }),
7774
- Tablet: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Tablet, { size: 16 }),
7775
- Monitor: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Monitor, { size: 16 })
7744
+ Smartphone: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Smartphone, { size: 16 }),
7745
+ Tablet: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Tablet, { size: 16 }),
7746
+ Monitor: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Monitor, { size: 16 })
7776
7747
  };
7777
- var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
7778
- var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
7748
+ var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
7749
+ var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
7779
7750
  var ViewportButton = ({
7780
7751
  children,
7781
7752
  height = "auto",
@@ -7784,11 +7755,11 @@ var ViewportButton = ({
7784
7755
  onClick
7785
7756
  }) => {
7786
7757
  const viewports = useAppStore((s) => s.state.ui.viewports);
7787
- const [isActive, setIsActive] = (0, import_react46.useState)(false);
7788
- (0, import_react46.useEffect)(() => {
7758
+ const [isActive, setIsActive] = (0, import_react49.useState)(false);
7759
+ (0, import_react49.useEffect)(() => {
7789
7760
  setIsActive(width === viewports.current.width);
7790
7761
  }, [width, viewports.current.width]);
7791
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7762
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7792
7763
  IconButton,
7793
7764
  {
7794
7765
  title,
@@ -7797,7 +7768,7 @@ var ViewportButton = ({
7797
7768
  e.stopPropagation();
7798
7769
  onClick({ width, height });
7799
7770
  },
7800
- children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: getClassNameButton("inner"), children })
7771
+ children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton("inner"), children })
7801
7772
  }
7802
7773
  ) });
7803
7774
  };
@@ -7821,7 +7792,7 @@ var ViewportControls = ({
7821
7792
  const defaultsContainAutoZoom = defaultZoomOptions.find(
7822
7793
  (option) => option.value === autoZoom
7823
7794
  );
7824
- const zoomOptions = (0, import_react46.useMemo)(
7795
+ const zoomOptions = (0, import_react49.useMemo)(
7825
7796
  () => [
7826
7797
  ...defaultZoomOptions,
7827
7798
  ...defaultsContainAutoZoom ? [] : [
@@ -7833,8 +7804,8 @@ var ViewportControls = ({
7833
7804
  ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
7834
7805
  [autoZoom]
7835
7806
  );
7836
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getClassName25(), children: [
7837
- viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7807
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName24(), children: [
7808
+ viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7838
7809
  ViewportButton,
7839
7810
  {
7840
7811
  height: viewport.height,
@@ -7845,8 +7816,8 @@ var ViewportControls = ({
7845
7816
  },
7846
7817
  i
7847
7818
  )),
7848
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("divider") }),
7849
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7819
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("divider") }),
7820
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7850
7821
  IconButton,
7851
7822
  {
7852
7823
  title: "Zoom viewport out",
@@ -7860,10 +7831,10 @@ var ViewportControls = ({
7860
7831
  )].value
7861
7832
  );
7862
7833
  },
7863
- children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ZoomOut, { size: 16 })
7834
+ children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ZoomOut, { size: 16 })
7864
7835
  }
7865
7836
  ),
7866
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7837
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7867
7838
  IconButton,
7868
7839
  {
7869
7840
  title: "Zoom viewport in",
@@ -7877,19 +7848,19 @@ var ViewportControls = ({
7877
7848
  )].value
7878
7849
  );
7879
7850
  },
7880
- children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ZoomIn, { size: 16 })
7851
+ children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ZoomIn, { size: 16 })
7881
7852
  }
7882
7853
  ),
7883
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("divider") }),
7884
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7854
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("divider") }),
7855
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7885
7856
  "select",
7886
7857
  {
7887
- className: getClassName25("zoomSelect"),
7858
+ className: getClassName24("zoomSelect"),
7888
7859
  value: zoom.toString(),
7889
7860
  onChange: (e) => {
7890
7861
  onZoom(parseFloat(e.currentTarget.value));
7891
7862
  },
7892
- children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
7863
+ children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
7893
7864
  "option",
7894
7865
  {
7895
7866
  value: option.value,
@@ -7904,7 +7875,7 @@ var ViewportControls = ({
7904
7875
 
7905
7876
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
7906
7877
  init_react_import();
7907
- var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
7878
+ var styles_module_default20 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
7908
7879
 
7909
7880
  // lib/get-zoom-config.ts
7910
7881
  init_react_import();
@@ -7937,9 +7908,9 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
7937
7908
  };
7938
7909
 
7939
7910
  // components/Puck/components/Canvas/index.tsx
7940
- var import_shallow7 = require("zustand/react/shallow");
7941
- var import_jsx_runtime39 = require("react/jsx-runtime");
7942
- var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
7911
+ var import_shallow8 = require("zustand/react/shallow");
7912
+ var import_jsx_runtime38 = require("react/jsx-runtime");
7913
+ var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
7943
7914
  var ZOOM_ON_CHANGE = true;
7944
7915
  var Canvas = () => {
7945
7916
  const {
@@ -7951,7 +7922,7 @@ var Canvas = () => {
7951
7922
  status,
7952
7923
  iframe
7953
7924
  } = useAppStore(
7954
- (0, import_shallow7.useShallow)((s) => ({
7925
+ (0, import_shallow8.useShallow)((s) => ({
7955
7926
  dispatch: s.dispatch,
7956
7927
  overrides: s.overrides,
7957
7928
  setUi: s.setUi,
@@ -7962,23 +7933,23 @@ var Canvas = () => {
7962
7933
  }))
7963
7934
  );
7964
7935
  const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
7965
- (0, import_shallow7.useShallow)((s) => ({
7936
+ (0, import_shallow8.useShallow)((s) => ({
7966
7937
  leftSideBarVisible: s.state.ui.leftSideBarVisible,
7967
7938
  rightSideBarVisible: s.state.ui.rightSideBarVisible,
7968
7939
  viewports: s.state.ui.viewports
7969
7940
  }))
7970
7941
  );
7971
- const frameRef = (0, import_react47.useRef)(null);
7972
- const [showTransition, setShowTransition] = (0, import_react47.useState)(false);
7973
- const defaultRender = (0, import_react47.useMemo)(() => {
7974
- const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
7942
+ const frameRef = (0, import_react50.useRef)(null);
7943
+ const [showTransition, setShowTransition] = (0, import_react50.useState)(false);
7944
+ const defaultRender = (0, import_react50.useMemo)(() => {
7945
+ const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
7975
7946
  return PuckDefault;
7976
7947
  }, []);
7977
- const CustomPreview = (0, import_react47.useMemo)(
7948
+ const CustomPreview = (0, import_react50.useMemo)(
7978
7949
  () => overrides.preview || defaultRender,
7979
7950
  [overrides]
7980
7951
  );
7981
- const getFrameDimensions = (0, import_react47.useCallback)(() => {
7952
+ const getFrameDimensions = (0, import_react50.useCallback)(() => {
7982
7953
  if (frameRef.current) {
7983
7954
  const frame = frameRef.current;
7984
7955
  const box = getBox(frame);
@@ -7986,7 +7957,7 @@ var Canvas = () => {
7986
7957
  }
7987
7958
  return { width: 0, height: 0 };
7988
7959
  }, [frameRef]);
7989
- const resetAutoZoom = (0, import_react47.useCallback)(
7960
+ const resetAutoZoom = (0, import_react50.useCallback)(
7990
7961
  (newViewports = viewports) => {
7991
7962
  if (frameRef.current) {
7992
7963
  setZoomConfig(
@@ -8000,11 +7971,11 @@ var Canvas = () => {
8000
7971
  },
8001
7972
  [frameRef, zoomConfig, viewports]
8002
7973
  );
8003
- (0, import_react47.useEffect)(() => {
7974
+ (0, import_react50.useEffect)(() => {
8004
7975
  setShowTransition(false);
8005
7976
  resetAutoZoom(viewports);
8006
7977
  }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
8007
- (0, import_react47.useEffect)(() => {
7978
+ (0, import_react50.useEffect)(() => {
8008
7979
  const { height: frameHeight } = getFrameDimensions();
8009
7980
  if (viewports.current.height === "auto") {
8010
7981
  setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -8012,13 +7983,13 @@ var Canvas = () => {
8012
7983
  }));
8013
7984
  }
8014
7985
  }, [zoomConfig.zoom]);
8015
- (0, import_react47.useEffect)(() => {
7986
+ (0, import_react50.useEffect)(() => {
8016
7987
  if (ZOOM_ON_CHANGE) {
8017
7988
  setShowTransition(true);
8018
7989
  resetAutoZoom(viewports);
8019
7990
  }
8020
7991
  }, [viewports.current.width]);
8021
- (0, import_react47.useEffect)(() => {
7992
+ (0, import_react50.useEffect)(() => {
8022
7993
  const cb = () => {
8023
7994
  setShowTransition(false);
8024
7995
  resetAutoZoom();
@@ -8028,16 +7999,16 @@ var Canvas = () => {
8028
7999
  window.removeEventListener("resize", cb);
8029
8000
  };
8030
8001
  }, []);
8031
- const [showLoader, setShowLoader] = (0, import_react47.useState)(false);
8032
- (0, import_react47.useEffect)(() => {
8002
+ const [showLoader, setShowLoader] = (0, import_react50.useState)(false);
8003
+ (0, import_react50.useEffect)(() => {
8033
8004
  setTimeout(() => {
8034
8005
  setShowLoader(true);
8035
8006
  }, 500);
8036
8007
  }, []);
8037
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
8008
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
8038
8009
  "div",
8039
8010
  {
8040
- className: getClassName26({
8011
+ className: getClassName25({
8041
8012
  ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
8042
8013
  showLoader
8043
8014
  }),
@@ -8047,7 +8018,7 @@ var Canvas = () => {
8047
8018
  recordHistory: true
8048
8019
  }),
8049
8020
  children: [
8050
- viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
8021
+ viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
8051
8022
  ViewportControls,
8052
8023
  {
8053
8024
  autoZoom: zoomConfig.autoZoom,
@@ -8073,11 +8044,11 @@ var Canvas = () => {
8073
8044
  }
8074
8045
  }
8075
8046
  ) }),
8076
- /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
8077
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
8047
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getClassName25("inner"), ref: frameRef, children: [
8048
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
8078
8049
  "div",
8079
8050
  {
8080
- className: getClassName26("root"),
8051
+ className: getClassName25("root"),
8081
8052
  style: {
8082
8053
  width: iframe.enabled ? viewports.current.width : "100%",
8083
8054
  height: zoomConfig.rootHeight,
@@ -8095,10 +8066,10 @@ var Canvas = () => {
8095
8066
  })
8096
8067
  );
8097
8068
  },
8098
- children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Preview3, {}) })
8069
+ children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Preview2, {}) })
8099
8070
  }
8100
8071
  ),
8101
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Loader, { size: 24 }) })
8072
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader, { size: 24 }) })
8102
8073
  ] })
8103
8074
  ]
8104
8075
  }
@@ -8107,7 +8078,7 @@ var Canvas = () => {
8107
8078
 
8108
8079
  // lib/use-loaded-overrides.ts
8109
8080
  init_react_import();
8110
- var import_react48 = require("react");
8081
+ var import_react51 = require("react");
8111
8082
 
8112
8083
  // lib/load-overrides.ts
8113
8084
  init_react_import();
@@ -8146,26 +8117,26 @@ var useLoadedOverrides = ({
8146
8117
  overrides,
8147
8118
  plugins
8148
8119
  }) => {
8149
- return (0, import_react48.useMemo)(() => {
8120
+ return (0, import_react51.useMemo)(() => {
8150
8121
  return loadOverrides({ overrides, plugins });
8151
8122
  }, [plugins, overrides]);
8152
8123
  };
8153
8124
 
8154
8125
  // components/DefaultOverride/index.tsx
8155
8126
  init_react_import();
8156
- var import_jsx_runtime40 = require("react/jsx-runtime");
8157
- var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
8127
+ var import_jsx_runtime39 = require("react/jsx-runtime");
8128
+ var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
8158
8129
 
8159
8130
  // lib/use-inject-css.ts
8160
8131
  init_react_import();
8161
- var import_react49 = require("react");
8132
+ var import_react52 = require("react");
8162
8133
  var styles = ``;
8163
8134
  var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
8164
- const [el, setEl] = (0, import_react49.useState)();
8165
- (0, import_react49.useEffect)(() => {
8135
+ const [el, setEl] = (0, import_react52.useState)();
8136
+ (0, import_react52.useEffect)(() => {
8166
8137
  setEl(document.createElement("style"));
8167
8138
  }, []);
8168
- (0, import_react49.useEffect)(() => {
8139
+ (0, import_react52.useEffect)(() => {
8169
8140
  var _a;
8170
8141
  if (!el || typeof window === "undefined") {
8171
8142
  return;
@@ -8185,10 +8156,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
8185
8156
 
8186
8157
  // lib/use-preview-mode-hotkeys.ts
8187
8158
  init_react_import();
8188
- var import_react50 = require("react");
8159
+ var import_react53 = require("react");
8189
8160
  var usePreviewModeHotkeys = () => {
8190
8161
  const appStore = useAppStoreApi();
8191
- const toggleInteractive = (0, import_react50.useCallback)(() => {
8162
+ const toggleInteractive = (0, import_react53.useCallback)(() => {
8192
8163
  const dispatch = appStore.getState().dispatch;
8193
8164
  dispatch({
8194
8165
  type: "setUi",
@@ -8203,7 +8174,7 @@ var usePreviewModeHotkeys = () => {
8203
8174
 
8204
8175
  // lib/use-puck.ts
8205
8176
  init_react_import();
8206
- var import_react51 = require("react");
8177
+ var import_react54 = require("react");
8207
8178
  var import_zustand6 = require("zustand");
8208
8179
  var generateUsePuck = (store) => {
8209
8180
  const history = {
@@ -8237,7 +8208,7 @@ var generateUsePuck = (store) => {
8237
8208
  const get = () => storeData;
8238
8209
  return __spreadProps(__spreadValues({}, storeData), { get });
8239
8210
  };
8240
- var UsePuckStoreContext = (0, import_react51.createContext)(
8211
+ var UsePuckStoreContext = (0, import_react54.createContext)(
8241
8212
  null
8242
8213
  );
8243
8214
  var convertToPickedStore = (store) => {
@@ -8251,12 +8222,12 @@ var convertToPickedStore = (store) => {
8251
8222
  };
8252
8223
  };
8253
8224
  var useRegisterUsePuckStore = (appStore) => {
8254
- const [usePuckStore] = (0, import_react51.useState)(
8225
+ const [usePuckStore] = (0, import_react54.useState)(
8255
8226
  () => (0, import_zustand6.createStore)(
8256
8227
  () => generateUsePuck(convertToPickedStore(appStore.getState()))
8257
8228
  )
8258
8229
  );
8259
- (0, import_react51.useEffect)(() => {
8230
+ (0, import_react54.useEffect)(() => {
8260
8231
  return appStore.subscribe(
8261
8232
  (store) => convertToPickedStore(store),
8262
8233
  (pickedStore) => {
@@ -8268,7 +8239,7 @@ var useRegisterUsePuckStore = (appStore) => {
8268
8239
  };
8269
8240
  function createUsePuck() {
8270
8241
  return function usePuck2(selector) {
8271
- const usePuckApi = (0, import_react51.useContext)(UsePuckStoreContext);
8242
+ const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
8272
8243
  if (!usePuckApi) {
8273
8244
  throw new Error("usePuck must be used inside <Puck>.");
8274
8245
  }
@@ -8280,18 +8251,241 @@ function createUsePuck() {
8280
8251
  };
8281
8252
  }
8282
8253
  function usePuck() {
8283
- (0, import_react51.useEffect)(() => {
8254
+ (0, import_react54.useEffect)(() => {
8284
8255
  console.warn(
8285
8256
  "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
8286
8257
  );
8287
8258
  }, []);
8288
8259
  return createUsePuck()((s) => s);
8289
8260
  }
8261
+ function useGetPuck() {
8262
+ const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
8263
+ if (!usePuckApi) {
8264
+ throw new Error("usePuckGet must be used inside <Puck>.");
8265
+ }
8266
+ return usePuckApi.getState;
8267
+ }
8290
8268
 
8291
8269
  // components/Puck/index.tsx
8270
+ var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
8271
+
8272
+ // components/Puck/components/Header/index.tsx
8273
+ init_react_import();
8274
+ var import_react55 = require("react");
8275
+
8276
+ // components/MenuBar/index.tsx
8277
+ init_react_import();
8278
+
8279
+ // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
8280
+ init_react_import();
8281
+ var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
8282
+
8283
+ // components/MenuBar/index.tsx
8284
+ var import_jsx_runtime40 = require("react/jsx-runtime");
8285
+ var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
8286
+ function MenuBar({
8287
+ menuOpen = false,
8288
+ renderHeaderActions,
8289
+ setMenuOpen
8290
+ }) {
8291
+ const back = useAppStore((s) => s.history.back);
8292
+ const forward = useAppStore((s) => s.history.forward);
8293
+ const hasFuture = useAppStore((s) => s.history.hasFuture());
8294
+ const hasPast = useAppStore((s) => s.history.hasPast());
8295
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
8296
+ "div",
8297
+ {
8298
+ className: getClassName26({ menuOpen }),
8299
+ onClick: (event) => {
8300
+ var _a;
8301
+ const element = event.target;
8302
+ if (window.matchMedia("(min-width: 638px)").matches) {
8303
+ return;
8304
+ }
8305
+ if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
8306
+ setMenuOpen(false);
8307
+ }
8308
+ },
8309
+ children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("inner"), children: [
8310
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("history"), children: [
8311
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Undo2, { size: 21 }) }),
8312
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Redo2, { size: 21 }) })
8313
+ ] }),
8314
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: renderHeaderActions && renderHeaderActions() })
8315
+ ] })
8316
+ }
8317
+ );
8318
+ }
8319
+
8320
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
8321
+ init_react_import();
8322
+ var styles_module_default22 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
8323
+
8324
+ // components/Puck/components/Header/index.tsx
8292
8325
  var import_jsx_runtime41 = require("react/jsx-runtime");
8293
- var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
8294
- var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
8326
+ var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
8327
+ var HeaderInner = () => {
8328
+ const {
8329
+ onPublish,
8330
+ renderHeader,
8331
+ renderHeaderActions,
8332
+ headerTitle,
8333
+ headerPath,
8334
+ iframe: _iframe
8335
+ } = usePropsContext();
8336
+ const dispatch = useAppStore((s) => s.dispatch);
8337
+ const appStore = useAppStoreApi();
8338
+ const defaultHeaderRender = (0, import_react55.useMemo)(() => {
8339
+ if (renderHeader) {
8340
+ console.warn(
8341
+ "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
8342
+ );
8343
+ const RenderHeader = (_a) => {
8344
+ var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
8345
+ const Comp = renderHeader;
8346
+ const appState = useAppStore((s) => s.state);
8347
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
8348
+ };
8349
+ return RenderHeader;
8350
+ }
8351
+ return DefaultOverride;
8352
+ }, [renderHeader]);
8353
+ const defaultHeaderActionsRender = (0, import_react55.useMemo)(() => {
8354
+ if (renderHeaderActions) {
8355
+ console.warn(
8356
+ "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
8357
+ );
8358
+ const RenderHeader = (props) => {
8359
+ const Comp = renderHeaderActions;
8360
+ const appState = useAppStore((s) => s.state);
8361
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
8362
+ };
8363
+ return RenderHeader;
8364
+ }
8365
+ return DefaultOverride;
8366
+ }, [renderHeader]);
8367
+ const CustomHeader = useAppStore(
8368
+ (s) => s.overrides.header || defaultHeaderRender
8369
+ );
8370
+ const CustomHeaderActions = useAppStore(
8371
+ (s) => s.overrides.headerActions || defaultHeaderActionsRender
8372
+ );
8373
+ const [menuOpen, setMenuOpen] = (0, import_react55.useState)(false);
8374
+ const rootTitle = useAppStore((s) => {
8375
+ var _a, _b;
8376
+ const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
8377
+ return (_b = rootData.props.title) != null ? _b : "";
8378
+ });
8379
+ const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
8380
+ const rightSideBarVisible = useAppStore(
8381
+ (s) => s.state.ui.rightSideBarVisible
8382
+ );
8383
+ const toggleSidebars = (0, import_react55.useCallback)(
8384
+ (sidebar) => {
8385
+ const widerViewport = window.matchMedia("(min-width: 638px)").matches;
8386
+ const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
8387
+ const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
8388
+ dispatch({
8389
+ type: "setUi",
8390
+ ui: __spreadValues({
8391
+ [`${sidebar}SideBarVisible`]: !sideBarVisible
8392
+ }, !widerViewport ? { [oppositeSideBar]: false } : {})
8393
+ });
8394
+ },
8395
+ [dispatch, leftSideBarVisible, rightSideBarVisible]
8396
+ );
8397
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8398
+ CustomHeader,
8399
+ {
8400
+ actions: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8401
+ Button,
8402
+ {
8403
+ onClick: () => {
8404
+ const data = appStore.getState().state.data;
8405
+ onPublish && onPublish(data);
8406
+ },
8407
+ icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
8408
+ children: "Publish"
8409
+ }
8410
+ ) }) }),
8411
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8412
+ "header",
8413
+ {
8414
+ className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
8415
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("inner"), children: [
8416
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("toggle"), children: [
8417
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8418
+ IconButton,
8419
+ {
8420
+ onClick: () => {
8421
+ toggleSidebars("left");
8422
+ },
8423
+ title: "Toggle left sidebar",
8424
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { focusable: "false" })
8425
+ }
8426
+ ) }),
8427
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8428
+ IconButton,
8429
+ {
8430
+ onClick: () => {
8431
+ toggleSidebars("right");
8432
+ },
8433
+ title: "Toggle right sidebar",
8434
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { focusable: "false" })
8435
+ }
8436
+ ) })
8437
+ ] }),
8438
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("title"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
8439
+ headerTitle || rootTitle || "Page",
8440
+ headerPath && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
8441
+ " ",
8442
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: getClassName27("path"), children: headerPath })
8443
+ ] })
8444
+ ] }) }),
8445
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("tools"), children: [
8446
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8447
+ IconButton,
8448
+ {
8449
+ onClick: () => {
8450
+ return setMenuOpen(!menuOpen);
8451
+ },
8452
+ title: "Toggle menu bar",
8453
+ children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDown, { focusable: "false" })
8454
+ }
8455
+ ) }),
8456
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8457
+ MenuBar,
8458
+ {
8459
+ dispatch,
8460
+ onPublish,
8461
+ menuOpen,
8462
+ renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8463
+ Button,
8464
+ {
8465
+ onClick: () => {
8466
+ const data = appStore.getState().state.data;
8467
+ onPublish && onPublish(data);
8468
+ },
8469
+ icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
8470
+ children: "Publish"
8471
+ }
8472
+ ) }),
8473
+ setMenuOpen
8474
+ }
8475
+ )
8476
+ ] })
8477
+ ] })
8478
+ }
8479
+ )
8480
+ }
8481
+ );
8482
+ };
8483
+ var Header = (0, import_react55.memo)(HeaderInner);
8484
+
8485
+ // components/Puck/index.tsx
8486
+ var import_jsx_runtime42 = require("react/jsx-runtime");
8487
+ var getClassName28 = get_class_name_factory_default("Puck", styles_module_default14);
8488
+ var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
8295
8489
  var FieldSideBar = () => {
8296
8490
  const title = useAppStore(
8297
8491
  (s) => {
@@ -8299,13 +8493,13 @@ var FieldSideBar = () => {
8299
8493
  return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
8300
8494
  }
8301
8495
  );
8302
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Fields, {}) });
8496
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fields, {}) });
8303
8497
  };
8304
- var propsContext = (0, import_react52.createContext)({});
8498
+ var propsContext = (0, import_react56.createContext)({});
8305
8499
  function PropsProvider(props) {
8306
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(propsContext.Provider, { value: props, children: props.children });
8500
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(propsContext.Provider, { value: props, children: props.children });
8307
8501
  }
8308
- var usePropsContext = () => (0, import_react52.useContext)(propsContext);
8502
+ var usePropsContext = () => (0, import_react56.useContext)(propsContext);
8309
8503
  function PuckProvider({ children }) {
8310
8504
  const {
8311
8505
  config,
@@ -8321,11 +8515,14 @@ function PuckProvider({ children }) {
8321
8515
  metadata,
8322
8516
  onAction
8323
8517
  } = usePropsContext();
8324
- const iframe = __spreadValues({
8325
- enabled: true,
8326
- waitForStyles: true
8327
- }, _iframe);
8328
- const [generatedAppState] = (0, import_react52.useState)(() => {
8518
+ const iframe = (0, import_react56.useMemo)(
8519
+ () => __spreadValues({
8520
+ enabled: true,
8521
+ waitForStyles: true
8522
+ }, _iframe),
8523
+ [_iframe]
8524
+ );
8525
+ const [generatedAppState] = (0, import_react56.useState)(() => {
8329
8526
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
8330
8527
  const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
8331
8528
  let clientUiState = {};
@@ -8385,7 +8582,7 @@ function PuckProvider({ children }) {
8385
8582
  return walkAppState(newAppState, config);
8386
8583
  });
8387
8584
  const { appendData = true } = _initialHistory || {};
8388
- const [blendedHistories] = (0, import_react52.useState)(
8585
+ const [blendedHistories] = (0, import_react56.useState)(
8389
8586
  [
8390
8587
  ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
8391
8588
  ...appendData ? [{ state: generatedAppState }] : []
@@ -8405,7 +8602,7 @@ function PuckProvider({ children }) {
8405
8602
  overrides,
8406
8603
  plugins
8407
8604
  });
8408
- const generateAppStore = (0, import_react52.useCallback)(
8605
+ const generateAppStore = (0, import_react56.useCallback)(
8409
8606
  (state) => {
8410
8607
  return {
8411
8608
  state,
@@ -8429,10 +8626,15 @@ function PuckProvider({ children }) {
8429
8626
  metadata
8430
8627
  ]
8431
8628
  );
8432
- const [appStore] = (0, import_react52.useState)(
8629
+ const [appStore] = (0, import_react56.useState)(
8433
8630
  () => createAppStore(generateAppStore(initialAppState))
8434
8631
  );
8435
- (0, import_react52.useEffect)(() => {
8632
+ (0, import_react56.useEffect)(() => {
8633
+ if (process.env.NODE_ENV !== "production") {
8634
+ window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
8635
+ }
8636
+ }, [appStore]);
8637
+ (0, import_react56.useEffect)(() => {
8436
8638
  const state = appStore.getState().state;
8437
8639
  appStore.setState(__spreadValues({}, generateAppStore(state)));
8438
8640
  }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8441,66 +8643,47 @@ function PuckProvider({ children }) {
8441
8643
  index: initialHistoryIndex,
8442
8644
  initialAppState
8443
8645
  });
8444
- (0, import_react52.useEffect)(() => {
8445
- appStore.subscribe((s) => {
8446
- if (onChange) onChange(s.state.data);
8447
- });
8646
+ const previousData = (0, import_react56.useRef)(null);
8647
+ (0, import_react56.useEffect)(() => {
8648
+ appStore.subscribe(
8649
+ (s) => s.state.data,
8650
+ (data) => {
8651
+ if (onChange) {
8652
+ if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
8653
+ onChange(data);
8654
+ previousData.current = data;
8655
+ }
8656
+ }
8657
+ );
8448
8658
  }, []);
8449
8659
  useRegisterPermissionsSlice(appStore, permissions);
8450
8660
  const uPuckStore = useRegisterUsePuckStore(appStore);
8451
- (0, import_react52.useEffect)(() => {
8661
+ (0, import_react56.useEffect)(() => {
8452
8662
  const { resolveAndCommitData } = appStore.getState();
8453
8663
  resolveAndCommitData();
8454
8664
  }, []);
8455
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
8665
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
8456
8666
  }
8457
8667
  function PuckLayout({ children }) {
8458
8668
  const {
8459
- onChange,
8460
- onPublish,
8461
- renderHeader,
8462
- renderHeaderActions,
8463
- headerTitle,
8464
- headerPath,
8465
8669
  iframe: _iframe,
8466
8670
  dnd,
8467
8671
  initialHistory: _initialHistory
8468
8672
  } = usePropsContext();
8469
- const iframe = __spreadValues({
8470
- enabled: true,
8471
- waitForStyles: true
8472
- }, _iframe);
8673
+ const iframe = (0, import_react56.useMemo)(
8674
+ () => __spreadValues({
8675
+ enabled: true,
8676
+ waitForStyles: true
8677
+ }, _iframe),
8678
+ [_iframe]
8679
+ );
8473
8680
  useInjectGlobalCss(iframe.enabled);
8474
8681
  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
8475
8682
  const rightSideBarVisible = useAppStore(
8476
8683
  (s) => s.state.ui.rightSideBarVisible
8477
8684
  );
8478
- const [menuOpen, setMenuOpen] = (0, import_react52.useState)(false);
8479
- const appStore = useAppStoreApi();
8480
- (0, import_react52.useEffect)(() => {
8481
- return appStore.subscribe((s) => {
8482
- if (onChange) onChange(s.state.data);
8483
- });
8484
- }, [appStore]);
8485
- const rootProps = useAppStore(
8486
- (s) => s.state.data.root.props || s.state.data.root.props
8487
- );
8488
8685
  const dispatch = useAppStore((s) => s.dispatch);
8489
- const toggleSidebars = (0, import_react52.useCallback)(
8490
- (sidebar) => {
8491
- const widerViewport = window.matchMedia("(min-width: 638px)").matches;
8492
- const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
8493
- const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
8494
- dispatch({
8495
- type: "setUi",
8496
- ui: __spreadValues({
8497
- [`${sidebar}SideBarVisible`]: !sideBarVisible
8498
- }, !widerViewport ? { [oppositeSideBar]: false } : {})
8499
- });
8500
- },
8501
- [dispatch, leftSideBarVisible, rightSideBarVisible]
8502
- );
8503
- (0, import_react52.useEffect)(() => {
8686
+ (0, import_react56.useEffect)(() => {
8504
8687
  if (!window.matchMedia("(min-width: 638px)").matches) {
8505
8688
  dispatch({
8506
8689
  type: "setUi",
@@ -8523,55 +8706,18 @@ function PuckLayout({ children }) {
8523
8706
  window.removeEventListener("resize", handleResize);
8524
8707
  };
8525
8708
  }, []);
8526
- const defaultHeaderRender = (0, import_react52.useMemo)(() => {
8527
- if (renderHeader) {
8528
- console.warn(
8529
- "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
8530
- );
8531
- const RenderHeader = (_a) => {
8532
- var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
8533
- const Comp = renderHeader;
8534
- const appState = useAppStore((s) => s.state);
8535
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
8536
- };
8537
- return RenderHeader;
8538
- }
8539
- return DefaultOverride;
8540
- }, [renderHeader]);
8541
- const defaultHeaderActionsRender = (0, import_react52.useMemo)(() => {
8542
- if (renderHeaderActions) {
8543
- console.warn(
8544
- "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
8545
- );
8546
- const RenderHeader = (props) => {
8547
- const Comp = renderHeaderActions;
8548
- const appState = useAppStore((s) => s.state);
8549
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
8550
- };
8551
- return RenderHeader;
8552
- }
8553
- return DefaultOverride;
8554
- }, [renderHeader]);
8555
8709
  const overrides = useAppStore((s) => s.overrides);
8556
- const CustomPuck = (0, import_react52.useMemo)(
8710
+ const CustomPuck = (0, import_react56.useMemo)(
8557
8711
  () => overrides.puck || DefaultOverride,
8558
8712
  [overrides]
8559
8713
  );
8560
- const CustomHeader = (0, import_react52.useMemo)(
8561
- () => overrides.header || defaultHeaderRender,
8562
- [overrides]
8563
- );
8564
- const CustomHeaderActions = (0, import_react52.useMemo)(
8565
- () => overrides.headerActions || defaultHeaderActionsRender,
8566
- [overrides]
8567
- );
8568
- const [mounted, setMounted] = (0, import_react52.useState)(false);
8569
- (0, import_react52.useEffect)(() => {
8714
+ const [mounted, setMounted] = (0, import_react56.useState)(false);
8715
+ (0, import_react56.useEffect)(() => {
8570
8716
  setMounted(true);
8571
8717
  }, []);
8572
8718
  const ready = useAppStore((s) => s.status === "READY");
8573
8719
  useMonitorHotkeys();
8574
- (0, import_react52.useEffect)(() => {
8720
+ (0, import_react56.useEffect)(() => {
8575
8721
  if (ready && iframe.enabled) {
8576
8722
  const frameDoc = getFrame();
8577
8723
  if (frameDoc) {
@@ -8580,133 +8726,36 @@ function PuckLayout({ children }) {
8580
8726
  }
8581
8727
  }, [ready, iframe.enabled]);
8582
8728
  usePreviewModeHotkeys();
8583
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
8584
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8729
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `Puck ${getClassName28()}`, children: [
8730
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
8585
8731
  "div",
8586
8732
  {
8587
8733
  className: getLayoutClassName({
8588
8734
  leftSideBarVisible,
8589
- menuOpen,
8590
8735
  mounted,
8591
8736
  rightSideBarVisible
8592
8737
  }),
8593
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("inner"), children: [
8594
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8595
- CustomHeader,
8596
- {
8597
- actions: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8598
- Button,
8599
- {
8600
- onClick: () => {
8601
- const data = appStore.getState().state.data;
8602
- onPublish && onPublish(data);
8603
- },
8604
- icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
8605
- children: "Publish"
8606
- }
8607
- ) }) }),
8608
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
8609
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
8610
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8611
- "div",
8612
- {
8613
- className: getLayoutClassName("leftSideBarToggle"),
8614
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8615
- IconButton,
8616
- {
8617
- onClick: () => {
8618
- toggleSidebars("left");
8619
- },
8620
- title: "Toggle left sidebar",
8621
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { focusable: "false" })
8622
- }
8623
- )
8624
- }
8625
- ),
8626
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8627
- "div",
8628
- {
8629
- className: getLayoutClassName("rightSideBarToggle"),
8630
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8631
- IconButton,
8632
- {
8633
- onClick: () => {
8634
- toggleSidebars("right");
8635
- },
8636
- title: "Toggle right sidebar",
8637
- children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { focusable: "false" })
8638
- }
8639
- )
8640
- }
8641
- )
8642
- ] }),
8643
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
8644
- headerTitle || (rootProps == null ? void 0 : rootProps.title) || "Page",
8645
- headerPath && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
8646
- " ",
8647
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8648
- "code",
8649
- {
8650
- className: getLayoutClassName("headerPath"),
8651
- children: headerPath
8652
- }
8653
- )
8654
- ] })
8655
- ] }) }),
8656
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
8657
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8658
- IconButton,
8659
- {
8660
- onClick: () => {
8661
- return setMenuOpen(!menuOpen);
8662
- },
8663
- title: "Toggle menu bar",
8664
- children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDown, { focusable: "false" })
8665
- }
8666
- ) }),
8667
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8668
- MenuBar,
8669
- {
8670
- dispatch,
8671
- onPublish,
8672
- menuOpen,
8673
- renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8674
- Button,
8675
- {
8676
- onClick: () => {
8677
- const data = appStore.getState().state.data;
8678
- onPublish && onPublish(data);
8679
- },
8680
- icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
8681
- children: "Publish"
8682
- }
8683
- ) }),
8684
- setMenuOpen
8685
- }
8686
- )
8687
- ] })
8688
- ] }) })
8689
- }
8690
- ),
8691
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
8692
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Components, {}) }),
8693
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Outline, {}) })
8738
+ children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getLayoutClassName("inner"), children: [
8739
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Header, {}),
8740
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
8741
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Components, {}) }),
8742
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Outline, {}) })
8694
8743
  ] }),
8695
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Canvas, {}),
8696
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldSideBar, {}) })
8744
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Canvas, {}),
8745
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldSideBar, {}) })
8697
8746
  ] })
8698
8747
  }
8699
8748
  ) }) }),
8700
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
8749
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { id: "puck-portal-root", className: getClassName28("portal") })
8701
8750
  ] });
8702
8751
  }
8703
8752
  function Puck(props) {
8704
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PuckLayout, __spreadValues({}, props)) })) }));
8753
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PuckLayout, __spreadValues({}, props)) })) }));
8705
8754
  }
8706
8755
  Puck.Components = Components;
8707
8756
  Puck.Fields = Fields;
8708
8757
  Puck.Outline = Outline;
8709
- Puck.Preview = Preview3;
8758
+ Puck.Preview = Preview2;
8710
8759
 
8711
8760
  // lib/migrate.ts
8712
8761
  init_react_import();
@@ -8741,7 +8790,7 @@ var migrations = [
8741
8790
  const [id, slotName] = zoneCompound.split(":");
8742
8791
  const nodeData = indexes.nodes[id].data;
8743
8792
  const componentType = nodeData.type;
8744
- const configForComponent = config.components[componentType];
8793
+ const configForComponent = id === "root" ? config.root : config.components[componentType];
8745
8794
  if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
8746
8795
  updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
8747
8796
  props: __spreadProps(__spreadValues({}, nodeData.props), {
@@ -8799,11 +8848,13 @@ var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
8799
8848
  });
8800
8849
 
8801
8850
  // lib/transform-props.ts
8802
- function transformProps(data, propTransforms) {
8851
+ function transformProps(data, propTransforms, config = { components: {} }) {
8803
8852
  const mapItem = (item) => {
8804
8853
  if (propTransforms[item.type]) {
8805
8854
  return __spreadProps(__spreadValues({}, item), {
8806
- props: propTransforms[item.type](item.props)
8855
+ props: __spreadValues({
8856
+ id: item.props.id
8857
+ }, propTransforms[item.type](item.props))
8807
8858
  });
8808
8859
  }
8809
8860
  return item;
@@ -8812,23 +8863,18 @@ function transformProps(data, propTransforms) {
8812
8863
  const rootProps = defaultedData.root.props || defaultedData.root;
8813
8864
  let newRoot = __spreadValues({}, defaultedData.root);
8814
8865
  if (propTransforms["root"]) {
8815
- if (defaultedData.root.props) {
8816
- newRoot.props = propTransforms["root"](rootProps);
8817
- } else {
8818
- newRoot = propTransforms["root"](rootProps);
8819
- }
8866
+ newRoot.props = propTransforms["root"](rootProps);
8820
8867
  }
8821
- const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
8822
- root: newRoot,
8823
- content: defaultedData.content.map(mapItem),
8824
- zones: Object.keys(data.zones || {}).reduce(
8825
- (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
8826
- [zoneKey]: data.zones[zoneKey].map(mapItem)
8827
- }),
8828
- {}
8829
- )
8830
- });
8831
- return afterPropTransforms;
8868
+ const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
8869
+ const updatedData = walkTree(
8870
+ dataWithUpdatedRoot,
8871
+ config,
8872
+ (content) => content.map(mapItem)
8873
+ );
8874
+ if (!defaultedData.root.props) {
8875
+ updatedData.root = updatedData.root.props;
8876
+ }
8877
+ return updatedData;
8832
8878
  }
8833
8879
 
8834
8880
  // lib/resolve-all-data.ts
@@ -8859,13 +8905,12 @@ function resolveAllData(_0, _1) {
8859
8905
  },
8860
8906
  () => {
8861
8907
  },
8862
- "force",
8863
- false
8908
+ "force"
8864
8909
  )).node;
8865
- const resolvedDeep = yield mapSlotsAsync(
8910
+ const resolvedDeep = yield mapSlots(
8866
8911
  resolved,
8867
8912
  processContent,
8868
- false
8913
+ config
8869
8914
  );
8870
8915
  onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
8871
8916
  return resolvedDeep;
@@ -8913,6 +8958,7 @@ function resolveAllData(_0, _1) {
8913
8958
  renderContext,
8914
8959
  resolveAllData,
8915
8960
  transformProps,
8961
+ useGetPuck,
8916
8962
  usePuck,
8917
8963
  walkTree
8918
8964
  });