@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.mjs CHANGED
@@ -4,16 +4,16 @@ import {
4
4
  __async,
5
5
  __commonJS,
6
6
  __objRest,
7
- __privateAdd,
8
- __privateGet,
9
- __privateSet,
10
7
  __spreadProps,
11
8
  __spreadValues,
12
9
  __toESM,
13
- createIsSlotConfig,
10
+ defaultAppState,
11
+ defaultSlots,
12
+ defaultViewports,
13
+ expandNode,
14
14
  getChanged,
15
15
  init_react_import,
16
- isSlot,
16
+ migrate,
17
17
  resolveAllData,
18
18
  resolveComponentData,
19
19
  rootAreaId,
@@ -22,8 +22,10 @@ import {
22
22
  setupZone,
23
23
  transformProps,
24
24
  useSlots,
25
+ walkAppState,
26
+ walkField,
25
27
  walkTree
26
- } from "./chunk-COT3ZFIM.mjs";
28
+ } from "./chunk-H4SMAS54.mjs";
27
29
 
28
30
  // ../../node_modules/classnames/index.js
29
31
  var require_classnames = __commonJS({
@@ -212,7 +214,7 @@ init_react_import();
212
214
 
213
215
  // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
214
216
  init_react_import();
215
- 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" };
217
+ 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" };
216
218
 
217
219
  // components/AutoField/index.tsx
218
220
  import {
@@ -703,198 +705,6 @@ init_react_import();
703
705
 
704
706
  // reducer/actions/set.ts
705
707
  init_react_import();
706
-
707
- // lib/data/walk-app-state.ts
708
- init_react_import();
709
-
710
- // lib/data/for-each-slot.ts
711
- init_react_import();
712
- var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
713
- const props = item.props || {};
714
- const propKeys = Object.keys(props);
715
- for (let i = 0; i < propKeys.length; i++) {
716
- const propKey = propKeys[i];
717
- const itemType = "type" in item ? item.type : "root";
718
- if (isSlot2(itemType, propKey, props[propKey])) {
719
- const content = props[propKey];
720
- cb(props.id, propKey, content);
721
- if (recursive) {
722
- content.forEach(
723
- (childItem) => __async(void 0, null, function* () {
724
- return forEachSlot(childItem, cb, true, isSlot2);
725
- })
726
- );
727
- }
728
- }
729
- }
730
- };
731
-
732
- // lib/data/for-related-zones.ts
733
- init_react_import();
734
-
735
- // lib/get-zone-id.ts
736
- init_react_import();
737
- var getZoneId = (zoneCompound) => {
738
- if (!zoneCompound) {
739
- return [];
740
- }
741
- if (zoneCompound && zoneCompound.indexOf(":") > -1) {
742
- return zoneCompound.split(":");
743
- }
744
- return [rootDroppableId, zoneCompound];
745
- };
746
-
747
- // lib/data/for-related-zones.ts
748
- function forRelatedZones(item, data, cb, path = []) {
749
- Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
750
- const [parentId] = getZoneId(zoneCompound);
751
- if (parentId === item.props.id) {
752
- cb(path, zoneCompound, content);
753
- }
754
- });
755
- }
756
-
757
- // lib/data/strip-slots.ts
758
- init_react_import();
759
- var stripSlots = (data) => {
760
- return __spreadProps(__spreadValues({}, data), {
761
- props: Object.entries(data.props).reduce(
762
- (acc, [propKey, propVal]) => {
763
- if (isSlot(propVal)) {
764
- return acc;
765
- }
766
- return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
767
- },
768
- { id: data.props.id }
769
- )
770
- });
771
- };
772
-
773
- // lib/data/walk-app-state.ts
774
- function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
775
- var _a;
776
- let newZones = {};
777
- const newZoneIndex = {};
778
- const newNodeIndex = {};
779
- const processContent = (path, zoneCompound, content, zoneType, newId) => {
780
- var _a2;
781
- const [parentId] = zoneCompound.split(":");
782
- const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
783
- const [_2, zone] = zoneCompound.split(":");
784
- const newZoneCompound = `${newId || parentId}:${zone}`;
785
- const newContent2 = mappedContent.map(
786
- (zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
787
- );
788
- newZoneIndex[newZoneCompound] = {
789
- contentIds: newContent2.map((item) => item.props.id),
790
- type: zoneType
791
- };
792
- return [newZoneCompound, newContent2];
793
- };
794
- const processRelatedZones = (item, newId, initialPath) => {
795
- forRelatedZones(
796
- item,
797
- state.data,
798
- (relatedPath, relatedZoneCompound, relatedContent) => {
799
- const [zoneCompound, newContent2] = processContent(
800
- relatedPath,
801
- relatedZoneCompound,
802
- relatedContent,
803
- "dropzone",
804
- newId
805
- );
806
- newZones[zoneCompound] = newContent2;
807
- },
808
- initialPath
809
- );
810
- };
811
- const processItem = (item, path, index) => {
812
- const mappedItem = mapNodeOrSkip(item, path, index);
813
- if (!mappedItem) return item;
814
- const id = mappedItem.props.id;
815
- const newProps = __spreadValues({}, mappedItem.props);
816
- forEachSlot(
817
- mappedItem,
818
- (parentId2, slotId, content) => {
819
- const zoneCompound = `${parentId2}:${slotId}`;
820
- const [_2, newContent2] = processContent(
821
- path,
822
- zoneCompound,
823
- content,
824
- "slot",
825
- parentId2
826
- );
827
- newProps[slotId] = newContent2;
828
- },
829
- false,
830
- createIsSlotConfig(config)
831
- );
832
- processRelatedZones(item, id, path);
833
- const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
834
- const thisZoneCompound = path[path.length - 1];
835
- const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
836
- newNodeIndex[id] = {
837
- data: newItem,
838
- flatData: stripSlots(newItem),
839
- path,
840
- parentId,
841
- zone
842
- };
843
- const finalData = __spreadProps(__spreadValues({}, newItem), { props: __spreadValues({}, newItem.props) });
844
- if (newProps.id === "root") {
845
- delete finalData["type"];
846
- delete finalData.props["id"];
847
- }
848
- return finalData;
849
- };
850
- const zones = state.data.zones || {};
851
- const [_, newContent] = processContent(
852
- [],
853
- rootDroppableId,
854
- state.data.content,
855
- "root"
856
- );
857
- const processedContent = newContent;
858
- const zonesAlreadyProcessed = Object.keys(newZones);
859
- Object.keys(zones || {}).forEach((zoneCompound) => {
860
- const [parentId] = zoneCompound.split(":");
861
- if (zonesAlreadyProcessed.includes(zoneCompound)) {
862
- return;
863
- }
864
- const [_2, newContent2] = processContent(
865
- [rootDroppableId],
866
- zoneCompound,
867
- zones[zoneCompound],
868
- "dropzone",
869
- parentId
870
- );
871
- newZones[zoneCompound] = newContent2;
872
- }, newZones);
873
- const processedRoot = processItem(
874
- {
875
- type: "root",
876
- props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
877
- },
878
- [],
879
- -1
880
- );
881
- const root = __spreadProps(__spreadValues({}, state.data.root), {
882
- props: processedRoot.props
883
- });
884
- return __spreadProps(__spreadValues({}, state), {
885
- data: {
886
- root,
887
- content: processedContent,
888
- zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
889
- },
890
- indexes: {
891
- nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
892
- zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
893
- }
894
- });
895
- }
896
-
897
- // reducer/actions/set.ts
898
708
  var setAction = (state, action, appStore) => {
899
709
  if (typeof action.state === "object") {
900
710
  const newState = __spreadValues(__spreadValues({}, state), action.state);
@@ -939,7 +749,7 @@ var populateIds = (data, config, override = false) => {
939
749
  const id = generateId(data.type);
940
750
  return walkTree(
941
751
  __spreadProps(__spreadValues({}, data), {
942
- props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({ id }, data.props)
752
+ props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
943
753
  }),
944
754
  config,
945
755
  (contents) => contents.map((item) => {
@@ -1377,14 +1187,6 @@ function createReducer({
1377
1187
  );
1378
1188
  }
1379
1189
 
1380
- // components/ViewportControls/default-viewports.ts
1381
- init_react_import();
1382
- var defaultViewports = [
1383
- { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1384
- { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1385
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1386
- ];
1387
-
1388
1190
  // store/index.ts
1389
1191
  import { create as create2, useStore } from "zustand";
1390
1192
  import { subscribeWithSelector as subscribeWithSelector2 } from "zustand/middleware";
@@ -1626,7 +1428,11 @@ var createNodesSlice = (set, get) => ({
1626
1428
  const s = get().nodes;
1627
1429
  const emptyNode = {
1628
1430
  id,
1629
- methods: { sync: () => null },
1431
+ methods: {
1432
+ sync: () => null,
1433
+ hideOverlay: () => null,
1434
+ showOverlay: () => null
1435
+ },
1630
1436
  element: null
1631
1437
  };
1632
1438
  const existingNode = s.nodes[id];
@@ -1816,7 +1622,8 @@ var createFieldsSlice = (_set, _get) => {
1816
1622
  return {
1817
1623
  fields: {},
1818
1624
  loading: false,
1819
- lastResolvedData: {}
1625
+ lastResolvedData: {},
1626
+ id: void 0
1820
1627
  };
1821
1628
  };
1822
1629
  var useRegisterFieldsSlice = (appStore, id) => {
@@ -1837,7 +1644,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
1837
1644
  let lastFields = fields;
1838
1645
  if (reset) {
1839
1646
  appStore.setState((s) => ({
1840
- fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
1647
+ fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
1841
1648
  }));
1842
1649
  lastFields = defaultFields;
1843
1650
  }
@@ -1865,12 +1672,13 @@ var useRegisterFieldsSlice = (appStore, id) => {
1865
1672
  fields: {
1866
1673
  fields: newFields,
1867
1674
  loading: false,
1868
- lastResolvedData: componentData
1675
+ lastResolvedData: componentData,
1676
+ id
1869
1677
  }
1870
1678
  });
1871
1679
  } else {
1872
1680
  appStore.setState((s) => ({
1873
- fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
1681
+ fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
1874
1682
  }));
1875
1683
  }
1876
1684
  }),
@@ -1903,31 +1711,6 @@ var toRoot = (item) => {
1903
1711
  };
1904
1712
 
1905
1713
  // store/index.ts
1906
- var defaultAppState = {
1907
- data: { content: [], root: {}, zones: {} },
1908
- ui: {
1909
- leftSideBarVisible: true,
1910
- rightSideBarVisible: true,
1911
- arrayState: {},
1912
- itemSelector: null,
1913
- componentList: {},
1914
- isDragging: false,
1915
- previewMode: "edit",
1916
- viewports: {
1917
- current: {
1918
- width: defaultViewports[0].width,
1919
- height: defaultViewports[0].height || "auto"
1920
- },
1921
- options: [],
1922
- controlsVisible: true
1923
- },
1924
- field: { focus: null }
1925
- },
1926
- indexes: {
1927
- nodes: {},
1928
- zones: {}
1929
- }
1930
- };
1931
1714
  var defaultPageFields = {
1932
1715
  title: { type: "text" }
1933
1716
  };
@@ -2116,340 +1899,30 @@ function useAppStoreApi() {
2116
1899
  init_react_import();
2117
1900
  import { DragDropProvider } from "@dnd-kit/react";
2118
1901
 
2119
- // lib/dnd/dnd-kit/safe.ts
2120
- init_react_import();
2121
- import {
2122
- useDraggable,
2123
- useDroppable
2124
- } from "@dnd-kit/react";
2125
- import { useSortable } from "@dnd-kit/react/sortable";
2126
- function useDroppableSafe(input) {
2127
- if (typeof window === "undefined") {
2128
- return { ref: () => {
2129
- } };
2130
- }
2131
- return useDroppable(input);
2132
- }
2133
- function useDraggableSafe(input) {
2134
- if (typeof window === "undefined") {
2135
- return { ref: () => {
2136
- } };
2137
- }
2138
- return useDraggable(input);
2139
- }
2140
- function useSortableSafe(input) {
2141
- if (typeof window === "undefined") {
2142
- return { ref: () => {
2143
- }, status: "idle", handleRef: () => {
2144
- } };
2145
- }
2146
- return useSortable(input);
2147
- }
2148
-
2149
1902
  // lib/dnd/use-sensors.ts
2150
1903
  init_react_import();
2151
1904
  import { useState as useState2 } from "react";
2152
-
2153
- // lib/dnd/PointerSensor.ts
2154
- init_react_import();
2155
- import { batch, effect } from "@dnd-kit/state";
2156
- import { Sensor, configurator } from "@dnd-kit/abstract";
2157
- import {
2158
- exceedsDistance
2159
- } from "@dnd-kit/geometry";
2160
- import {
2161
- getDocument,
2162
- isElement,
2163
- isHTMLElement,
2164
- isPointerEvent,
2165
- Listeners,
2166
- getFrameTransform
2167
- } from "@dnd-kit/dom/utilities";
2168
- var _clearTimeout;
2169
- var _PointerSensor = class _PointerSensor extends Sensor {
2170
- constructor(manager, options) {
2171
- super(manager);
2172
- this.manager = manager;
2173
- this.options = options;
2174
- this.listeners = new Listeners();
2175
- this.cleanup = /* @__PURE__ */ new Set();
2176
- this.source = void 0;
2177
- this.started = false;
2178
- __privateAdd(this, _clearTimeout);
2179
- this.handleCancel = this.handleCancel.bind(this);
2180
- this.handlePointerUp = this.handlePointerUp.bind(this);
2181
- this.handleKeyDown = this.handleKeyDown.bind(this);
2182
- effect(() => {
2183
- const unbindGlobal = this.bindGlobal(options != null ? options : {});
2184
- return () => {
2185
- unbindGlobal();
2186
- };
2187
- });
2188
- }
2189
- bind(source, options = this.options) {
2190
- const unbind = effect(() => {
2191
- var _a;
2192
- const target = (_a = source.handle) != null ? _a : source.element;
2193
- const listener = (event) => {
2194
- if (isPointerEvent(event)) {
2195
- this.handlePointerDown(event, source, options);
2196
- }
2197
- };
2198
- if (target) {
2199
- patchWindow(target.ownerDocument.defaultView);
2200
- target.addEventListener("pointerdown", listener);
2201
- return () => {
2202
- target.removeEventListener("pointerdown", listener);
2203
- };
2204
- }
2205
- });
2206
- return unbind;
2207
- }
2208
- bindGlobal(options) {
2209
- const documents = /* @__PURE__ */ new Set();
2210
- for (const draggable of this.manager.registry.draggables.value) {
2211
- if (draggable.element) {
2212
- documents.add(getDocument(draggable.element));
2213
- }
2214
- }
2215
- for (const droppable of this.manager.registry.droppables.value) {
2216
- if (droppable.element) {
2217
- documents.add(getDocument(droppable.element));
2218
- }
2219
- }
2220
- const unbindFns = Array.from(documents).map(
2221
- (doc) => this.listeners.bind(doc, [
2222
- {
2223
- type: "pointermove",
2224
- listener: (event) => this.handlePointerMove(event, doc, options)
2225
- },
2226
- {
2227
- type: "pointerup",
2228
- listener: this.handlePointerUp,
2229
- options: {
2230
- capture: true
2231
- }
2232
- },
2233
- {
2234
- // Cancel activation if there is a competing Drag and Drop interaction
2235
- type: "dragstart",
2236
- listener: this.handleDragStart
2237
- }
2238
- ])
2239
- );
2240
- return () => {
2241
- unbindFns.forEach((unbind) => unbind());
2242
- };
2243
- }
2244
- handlePointerDown(event, source, options = {}) {
2245
- if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled) {
2246
- return;
2247
- }
2248
- const offset = getFrameTransform(source.element);
2249
- this.initialCoordinates = {
2250
- x: event.clientX * offset.scaleX + offset.x,
2251
- y: event.clientY * offset.scaleY + offset.y
2252
- };
2253
- this.source = source;
2254
- const { activationConstraints } = options;
2255
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
2256
- event.stopImmediatePropagation();
2257
- if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
2258
- this.handleStart(source, event);
2259
- } else {
2260
- const { delay } = constraints;
2261
- if (delay) {
2262
- const timeout3 = setTimeout(
2263
- () => this.handleStart(source, event),
2264
- delay.value
2265
- );
2266
- __privateSet(this, _clearTimeout, () => {
2267
- clearTimeout(timeout3);
2268
- __privateSet(this, _clearTimeout, void 0);
2269
- });
2270
- }
2271
- }
2272
- const cleanup = () => {
2273
- var _a;
2274
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2275
- this.initialCoordinates = void 0;
2276
- this.source = void 0;
2277
- };
2278
- this.cleanup.add(cleanup);
2279
- }
2280
- handlePointerMove(event, doc, options) {
2281
- if (!this.source) {
2282
- return;
2283
- }
2284
- const ownerDocument = this.source.element && getDocument(this.source.element);
2285
- if (doc !== ownerDocument) {
2286
- return;
2287
- }
2288
- const coordinates = {
2289
- x: event.clientX,
2290
- y: event.clientY
2291
- };
2292
- const offset = getFrameTransform(this.source.element);
2293
- coordinates.x = coordinates.x * offset.scaleX + offset.x;
2294
- coordinates.y = coordinates.y * offset.scaleY + offset.y;
2295
- if (this.manager.dragOperation.status.dragging) {
2296
- event.preventDefault();
2297
- event.stopPropagation();
2298
- this.manager.actions.move({ to: coordinates });
2299
- return;
2300
- }
2301
- if (!this.initialCoordinates) {
2302
- return;
2303
- }
2304
- const delta = {
2305
- x: coordinates.x - this.initialCoordinates.x,
2306
- y: coordinates.y - this.initialCoordinates.y
2307
- };
2308
- const { activationConstraints } = options;
2309
- const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
2310
- const { distance, delay } = constraints != null ? constraints : {};
2311
- if (distance) {
2312
- if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
2313
- return this.handleCancel();
2314
- }
2315
- if (exceedsDistance(delta, distance.value)) {
2316
- return this.handleStart(this.source, event);
2317
- }
2318
- }
2319
- if (delay) {
2320
- if (exceedsDistance(delta, delay.tolerance)) {
2321
- return this.handleCancel();
2322
- }
2323
- }
2324
- }
2325
- handlePointerUp(event) {
2326
- if (!this.source) {
2327
- return;
2328
- }
2329
- event.preventDefault();
2330
- event.stopPropagation();
2331
- const { status } = this.manager.dragOperation;
2332
- if (!status.idle) {
2333
- const canceled = !status.initialized;
2334
- this.manager.actions.stop({ canceled });
2335
- } else if (this.started) {
2336
- setTimeout(() => {
2337
- if (!this.manager.dragOperation.status.idle) {
2338
- this.manager.actions.stop({ canceled: false });
2339
- }
2340
- }, 10);
2341
- }
2342
- this.cleanup.forEach((cleanup) => cleanup());
2343
- this.cleanup.clear();
2344
- }
2345
- handleKeyDown(event) {
2346
- if (event.key === "Escape") {
2347
- event.preventDefault();
2348
- this.handleCancel();
2349
- }
2350
- }
2351
- handleStart(source, event) {
2352
- var _a;
2353
- const { manager, initialCoordinates } = this;
2354
- (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
2355
- if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
2356
- return;
2357
- }
2358
- if (event.defaultPrevented) {
2359
- return;
2360
- }
2361
- this.started = true;
2362
- event.preventDefault();
2363
- batch(() => {
2364
- manager.actions.setDragSource(source.id);
2365
- manager.actions.start({ coordinates: initialCoordinates, event });
2366
- });
2367
- const ownerDocument = getDocument(event.target);
2368
- const unbind = this.listeners.bind(ownerDocument, [
2369
- {
2370
- // Prevent scrolling on touch devices
2371
- type: "touchmove",
2372
- listener: preventDefault,
2373
- options: {
2374
- passive: false
2375
- }
2376
- },
2377
- {
2378
- // Prevent click events
2379
- type: "click",
2380
- listener: preventDefault
2381
- },
2382
- {
2383
- type: "keydown",
2384
- listener: this.handleKeyDown
2385
- }
2386
- ]);
2387
- ownerDocument.body.setPointerCapture(event.pointerId);
2388
- this.cleanup.add(unbind);
2389
- this.cleanup.add(() => {
2390
- this.started = false;
2391
- });
2392
- }
2393
- handleDragStart(event) {
2394
- const { target } = event;
2395
- if (!isElement(target)) {
2396
- return;
2397
- }
2398
- const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
2399
- if (isNativeDraggable) {
2400
- this.handleCancel();
2401
- } else {
2402
- preventDefault(event);
2403
- }
2404
- }
2405
- handleCancel() {
2406
- const { dragOperation } = this.manager;
2407
- if (dragOperation.status.initialized) {
2408
- this.manager.actions.stop({ canceled: true });
2409
- }
2410
- this.cleanup.forEach((cleanup) => cleanup());
2411
- this.cleanup.clear();
2412
- }
2413
- destroy() {
2414
- this.listeners.clear();
2415
- }
1905
+ import { PointerSensor } from "@dnd-kit/react";
1906
+ import { isElement } from "@dnd-kit/dom/utilities";
1907
+ var touchDefault = { delay: { value: 200, tolerance: 10 } };
1908
+ var otherDefault = {
1909
+ delay: { value: 200, tolerance: 10 },
1910
+ distance: { value: 5 }
2416
1911
  };
2417
- _clearTimeout = new WeakMap();
2418
- _PointerSensor.configure = configurator(_PointerSensor);
2419
- var PointerSensor = _PointerSensor;
2420
- function preventDefault(event) {
2421
- event.preventDefault();
2422
- }
2423
- function noop() {
2424
- }
2425
- var windows = /* @__PURE__ */ new WeakSet();
2426
- function patchWindow(window2) {
2427
- if (!window2 || windows.has(window2)) {
2428
- return;
2429
- }
2430
- window2.addEventListener("touchmove", noop, {
2431
- capture: false,
2432
- passive: false
2433
- });
2434
- windows.add(window2);
2435
- }
2436
-
2437
- // lib/dnd/use-sensors.ts
2438
- import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
2439
1912
  var useSensors = ({
2440
- other,
1913
+ other = otherDefault,
2441
1914
  mouse,
2442
- touch
1915
+ touch = touchDefault
2443
1916
  } = {
2444
- touch: { delay: { value: 200, tolerance: 10 } },
2445
- other: { delay: { value: 200, tolerance: 10 }, distance: { value: 5 } }
1917
+ touch: touchDefault,
1918
+ other: otherDefault
2446
1919
  }) => {
2447
1920
  const [sensors] = useState2(() => [
2448
1921
  PointerSensor.configure({
2449
1922
  activationConstraints(event, source) {
2450
1923
  var _a;
2451
1924
  const { pointerType, target } = event;
2452
- if (pointerType === "mouse" && isElement2(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
1925
+ if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
2453
1926
  return mouse;
2454
1927
  }
2455
1928
  if (pointerType === "touch") {
@@ -2619,7 +2092,7 @@ import { Point as Point2 } from "@dnd-kit/geometry";
2619
2092
  import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
2620
2093
  import { Point as Point22 } from "@dnd-kit/geometry";
2621
2094
  import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
2622
- import { Point as Point3 } from "@dnd-kit/geometry";
2095
+ import { Point as Point3, Rectangle } from "@dnd-kit/geometry";
2623
2096
  import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
2624
2097
  import { Point as Point4 } from "@dnd-kit/geometry";
2625
2098
  import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
@@ -2655,31 +2128,15 @@ var closestCorners = (input) => {
2655
2128
  if (!droppable.shape) {
2656
2129
  return null;
2657
2130
  }
2658
- const { left, top, right, bottom } = droppable.shape.boundingRectangle;
2659
- const corners = [
2660
- {
2661
- x: left,
2662
- y: top
2663
- },
2664
- {
2665
- x: right,
2666
- y: top
2667
- },
2668
- {
2669
- x: left,
2670
- y: bottom
2671
- },
2672
- {
2673
- x: right,
2674
- y: bottom
2675
- }
2676
- ];
2677
- const distance = corners.reduce(
2678
- (acc, corner) => {
2131
+ const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
2132
+ const distance = Rectangle.from(
2133
+ droppable.shape.boundingRectangle
2134
+ ).corners.reduce(
2135
+ (acc, corner, index) => {
2679
2136
  var _a;
2680
2137
  return acc + Point3.distance(
2681
2138
  Point3.from(corner),
2682
- (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
2139
+ (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
2683
2140
  );
2684
2141
  },
2685
2142
  0
@@ -2714,12 +2171,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2714
2171
  const { center: dragCenter } = dragShape;
2715
2172
  const { fallbackEnabled } = collisionStore.getState();
2716
2173
  const interval = trackMovementInterval(position.current, dragAxis);
2717
- dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
2718
- direction: interval.direction
2719
- });
2720
- const collisionMap = dragOperation.data.collisionMap || {};
2721
- dragOperation.data.collisionMap = collisionMap;
2722
- collisionMap[droppable.id] = {
2174
+ const data = {
2723
2175
  direction: interval.direction
2724
2176
  };
2725
2177
  const { center: dropCenter } = dropShape;
@@ -2734,7 +2186,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2734
2186
  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
2735
2187
  if (collision) {
2736
2188
  return __spreadProps(__spreadValues({}, collision), {
2737
- priority: CollisionPriority7.Highest
2189
+ priority: CollisionPriority7.Highest,
2190
+ data
2738
2191
  });
2739
2192
  }
2740
2193
  }
@@ -2756,7 +2209,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2756
2209
  };
2757
2210
  const shouldFlushId = flushNext === droppable.id;
2758
2211
  flushNext = "";
2759
- return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
2212
+ return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id, data });
2760
2213
  }
2761
2214
  if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
2762
2215
  const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
@@ -2768,9 +2221,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2768
2221
  x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
2769
2222
  y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
2770
2223
  });
2771
- collisionMap[droppable.id] = {
2772
- direction
2773
- };
2224
+ data.direction = direction;
2774
2225
  if (intersectionArea) {
2775
2226
  collisionDebug(
2776
2227
  dragCenter,
@@ -2781,7 +2232,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2781
2232
  );
2782
2233
  flushNext = droppable.id;
2783
2234
  return __spreadProps(__spreadValues({}, fallbackCollision), {
2784
- priority: CollisionPriority7.Low
2235
+ priority: CollisionPriority7.Low,
2236
+ data
2785
2237
  });
2786
2238
  }
2787
2239
  collisionDebug(
@@ -2791,16 +2243,19 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
2791
2243
  "orange",
2792
2244
  direction || ""
2793
2245
  );
2794
- return __spreadProps(__spreadValues({}, fallbackCollision), { priority: CollisionPriority7.Lowest });
2246
+ return __spreadProps(__spreadValues({}, fallbackCollision), {
2247
+ priority: CollisionPriority7.Lowest,
2248
+ data
2249
+ });
2795
2250
  }
2796
2251
  }
2797
2252
  }
2798
2253
  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
2799
- delete collisionMap[droppable.id];
2800
2254
  return null;
2801
2255
  };
2802
2256
 
2803
2257
  // components/Sortable/index.tsx
2258
+ import { useSortable } from "@dnd-kit/react/sortable";
2804
2259
  import { jsx as jsx5 } from "react/jsx-runtime";
2805
2260
  var SortableProvider = ({
2806
2261
  children,
@@ -2820,16 +2275,16 @@ var SortableProvider = ({
2820
2275
  return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
2821
2276
  },
2822
2277
  onDragOver: (event, manager) => {
2823
- var _a, _b;
2278
+ var _a;
2824
2279
  event.preventDefault();
2825
2280
  const { operation } = event;
2826
2281
  const { source, target } = operation;
2827
2282
  if (!source || !target) return;
2828
2283
  let sourceIndex = source.data.index;
2829
2284
  let targetIndex = target.data.index;
2830
- const collisionData = (_b = (_a = manager.dragOperation.data) == null ? void 0 : _a.collisionMap) == null ? void 0 : _b[target.id];
2285
+ const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
2831
2286
  if (sourceIndex !== targetIndex && source.id !== target.id) {
2832
- const collisionPosition = collisionData.direction === "up" ? "before" : "after";
2287
+ const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
2833
2288
  if (targetIndex >= sourceIndex) {
2834
2289
  targetIndex = targetIndex - 1;
2835
2290
  }
@@ -2860,9 +2315,10 @@ var Sortable = ({
2860
2315
  }) => {
2861
2316
  const {
2862
2317
  ref: sortableRef,
2863
- status,
2318
+ isDragging,
2319
+ isDropping,
2864
2320
  handleRef
2865
- } = useSortableSafe({
2321
+ } = useSortable({
2866
2322
  id,
2867
2323
  type,
2868
2324
  index,
@@ -2870,7 +2326,7 @@ var Sortable = ({
2870
2326
  data: { index },
2871
2327
  collisionDetector: createDynamicCollisionDetector("y")
2872
2328
  });
2873
- return children({ status, ref: sortableRef, handleRef });
2329
+ return children({ isDragging, isDropping, ref: sortableRef, handleRef });
2874
2330
  };
2875
2331
 
2876
2332
  // components/AutoField/context.tsx
@@ -2995,12 +2451,25 @@ var ArrayField = ({
2995
2451
  }
2996
2452
  }, []);
2997
2453
  const [draggedItem, setDraggedItem] = useState3("");
2998
- const isDragging = !!draggedItem;
2454
+ const isDraggingAny = !!draggedItem;
2999
2455
  const canEdit = useAppStore(
3000
2456
  (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
3001
2457
  );
3002
2458
  const forceReadOnly = !canEdit;
3003
2459
  const valueRef = useRef(value);
2460
+ const uniqifyItem = useCallback2(
2461
+ (val) => {
2462
+ if (field.type !== "array" || !field.arrayFields) return;
2463
+ const config = appStore.getState().config;
2464
+ return walkField({
2465
+ value: val,
2466
+ fields: field.arrayFields,
2467
+ map: (content) => content.map((item) => populateIds(item, config, true)),
2468
+ config
2469
+ });
2470
+ },
2471
+ [appStore, field]
2472
+ );
3004
2473
  if (field.type !== "array" || !field.arrayFields) {
3005
2474
  return null;
3006
2475
  }
@@ -3060,13 +2529,13 @@ var ArrayField = ({
3060
2529
  id: _arrayId,
3061
2530
  index: i,
3062
2531
  disabled: readOnly,
3063
- children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
2532
+ children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs3(
3064
2533
  "div",
3065
2534
  {
3066
2535
  ref,
3067
2536
  className: getClassNameItem({
3068
2537
  isExpanded: arrayState.openId === _arrayId,
3069
- isDragging: status === "dragging",
2538
+ isDragging,
3070
2539
  readOnly
3071
2540
  }),
3072
2541
  children: [
@@ -3105,11 +2574,10 @@ var ArrayField = ({
3105
2574
  onClick: (e) => {
3106
2575
  e.stopPropagation();
3107
2576
  const existingValue = [...value || []];
3108
- existingValue.splice(
3109
- i,
3110
- 0,
2577
+ const newItem = uniqifyItem(
3111
2578
  existingValue[i]
3112
2579
  );
2580
+ existingValue.splice(i, 0, newItem);
3113
2581
  const newUi = mapArrayStateToUi(
3114
2582
  regenerateArrayState(existingValue)
3115
2583
  );
@@ -3207,12 +2675,14 @@ var ArrayField = ({
3207
2675
  type: "button",
3208
2676
  className: getClassName5("addButton"),
3209
2677
  onClick: () => {
3210
- if (isDragging) return;
2678
+ var _a;
2679
+ if (isDraggingAny) return;
3211
2680
  const existingValue = value || [];
3212
- const newValue = [
3213
- ...existingValue,
3214
- field.defaultItemProps || {}
3215
- ];
2681
+ const newItem = defaultSlots(
2682
+ uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
2683
+ field.arrayFields
2684
+ );
2685
+ const newValue = [...existingValue, newItem];
3216
2686
  const newArrayState = regenerateArrayState(newValue);
3217
2687
  setUi(mapArrayStateToUi(newArrayState), false);
3218
2688
  onChange(newValue);
@@ -4112,6 +3582,10 @@ function AutoFieldInternal(props) {
4112
3582
  });
4113
3583
  }
4114
3584
  }, []);
3585
+ const { visible = true } = props.field;
3586
+ if (!visible) {
3587
+ return null;
3588
+ }
4115
3589
  if (field.type === "slot") {
4116
3590
  return null;
4117
3591
  }
@@ -4196,7 +3670,7 @@ init_react_import();
4196
3670
 
4197
3671
  // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
4198
3672
  init_react_import();
4199
- 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" };
3673
+ 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" };
4200
3674
 
4201
3675
  // components/Drawer/index.tsx
4202
3676
  import { useMemo as useMemo11, useState as useState15 } from "react";
@@ -4206,11 +3680,11 @@ init_react_import();
4206
3680
  import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
4207
3681
  import {
4208
3682
  createContext as createContext4,
4209
- useCallback as useCallback10,
4210
- useContext as useContext7,
4211
- useEffect as useEffect16,
3683
+ useCallback as useCallback11,
3684
+ useContext as useContext8,
3685
+ useEffect as useEffect17,
4212
3686
  useMemo as useMemo10,
4213
- useRef as useRef4,
3687
+ useRef as useRef5,
4214
3688
  useState as useState14
4215
3689
  } from "react";
4216
3690
  import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -4220,22 +3694,23 @@ init_react_import();
4220
3694
  import {
4221
3695
  forwardRef as forwardRef3,
4222
3696
  memo,
4223
- useCallback as useCallback9,
4224
- useContext as useContext6,
4225
- useEffect as useEffect15,
3697
+ useCallback as useCallback10,
3698
+ useContext as useContext7,
3699
+ useEffect as useEffect16,
4226
3700
  useMemo as useMemo9,
4227
- useRef as useRef3
3701
+ useRef as useRef4
4228
3702
  } from "react";
4229
3703
 
4230
3704
  // components/DraggableComponent/index.tsx
4231
3705
  init_react_import();
4232
3706
  import {
4233
- useCallback as useCallback6,
3707
+ useCallback as useCallback7,
4234
3708
  useContext as useContext5,
4235
- useEffect as useEffect11,
3709
+ useEffect as useEffect12,
4236
3710
  useMemo as useMemo7,
4237
3711
  useRef as useRef2,
4238
- useState as useState10
3712
+ useState as useState10,
3713
+ useTransition
4239
3714
  } from "react";
4240
3715
 
4241
3716
  // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -4269,8 +3744,7 @@ init_react_import();
4269
3744
  import {
4270
3745
  createContext as createContext3,
4271
3746
  useCallback as useCallback5,
4272
- useMemo as useMemo6,
4273
- useState as useState9
3747
+ useMemo as useMemo6
4274
3748
  } from "react";
4275
3749
  import { createStore as createStore2 } from "zustand";
4276
3750
  import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
@@ -4282,7 +3756,9 @@ var ZoneStoreContext = createContext3(
4282
3756
  areaDepthIndex: {},
4283
3757
  nextAreaDepthIndex: {},
4284
3758
  draggedItem: null,
4285
- previewIndex: {}
3759
+ previewIndex: {},
3760
+ enabledIndex: {},
3761
+ hoveringComponent: null
4286
3762
  }))
4287
3763
  );
4288
3764
  var ZoneStoreProvider = ({
@@ -4295,7 +3771,6 @@ var DropZoneProvider = ({
4295
3771
  children,
4296
3772
  value
4297
3773
  }) => {
4298
- const [hoveringComponent, setHoveringComponent] = useState9();
4299
3774
  const dispatch = useAppStore((s) => s.dispatch);
4300
3775
  const registerZone = useCallback5(
4301
3776
  (zoneCompound) => {
@@ -4317,16 +3792,33 @@ var DropZoneProvider = ({
4317
3792
  );
4318
3793
  const memoValue = useMemo6(
4319
3794
  () => __spreadValues({
4320
- hoveringComponent,
4321
- setHoveringComponent,
4322
3795
  registerZone,
4323
3796
  unregisterZone
4324
3797
  }, value),
4325
- [value, hoveringComponent]
3798
+ [value]
4326
3799
  );
4327
3800
  return /* @__PURE__ */ jsx19(Fragment5, { children: memoValue && /* @__PURE__ */ jsx19(dropZoneContext.Provider, { value: memoValue, children }) });
4328
3801
  };
4329
3802
 
3803
+ // components/DraggableComponent/index.tsx
3804
+ import { useShallow as useShallow2 } from "zustand/react/shallow";
3805
+ import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
3806
+
3807
+ // lib/accumulate-transform.ts
3808
+ init_react_import();
3809
+ function accumulateTransform(el) {
3810
+ let matrix = new DOMMatrixReadOnly();
3811
+ let n = el.parentElement;
3812
+ while (n && n !== document.documentElement) {
3813
+ const t = getComputedStyle(n).transform;
3814
+ if (t && t !== "none") {
3815
+ matrix = new DOMMatrixReadOnly(t).multiply(matrix);
3816
+ }
3817
+ n = n.parentElement;
3818
+ }
3819
+ return { scaleX: matrix.a, scaleY: matrix.d };
3820
+ }
3821
+
4330
3822
  // lib/use-context-store.ts
4331
3823
  init_react_import();
4332
3824
  import { useContext as useContext4 } from "react";
@@ -4340,8 +3832,39 @@ function useContextStore(context, selector) {
4340
3832
  return useStore2(store, useShallow(selector));
4341
3833
  }
4342
3834
 
3835
+ // lib/dnd/use-on-drag-finished.ts
3836
+ init_react_import();
3837
+ import { useCallback as useCallback6 } from "react";
3838
+ var useOnDragFinished = (cb, deps = []) => {
3839
+ const appStore = useAppStoreApi();
3840
+ return useCallback6(() => {
3841
+ let dispose = () => {
3842
+ };
3843
+ const processDragging = (isDragging2) => {
3844
+ if (isDragging2) {
3845
+ cb(false);
3846
+ } else {
3847
+ setTimeout(() => {
3848
+ cb(true);
3849
+ }, 0);
3850
+ if (dispose) dispose();
3851
+ }
3852
+ };
3853
+ const isDragging = appStore.getState().state.ui.isDragging;
3854
+ processDragging(isDragging);
3855
+ if (isDragging) {
3856
+ dispose = appStore.subscribe(
3857
+ (s) => s.state.ui.isDragging,
3858
+ (isDragging2) => {
3859
+ processDragging(isDragging2);
3860
+ }
3861
+ );
3862
+ }
3863
+ return dispose;
3864
+ }, [appStore, ...deps]);
3865
+ };
3866
+
4343
3867
  // components/DraggableComponent/index.tsx
4344
- import { useShallow as useShallow2 } from "zustand/react/shallow";
4345
3868
  import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
4346
3869
  var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
4347
3870
  var DEBUG2 = false;
@@ -4371,7 +3894,6 @@ var DraggableComponent = ({
4371
3894
  isSelected = false,
4372
3895
  debug,
4373
3896
  label,
4374
- isEnabled,
4375
3897
  autoDragAxis,
4376
3898
  userDragAxis,
4377
3899
  inDroppableZone = true
@@ -4387,7 +3909,7 @@ var DraggableComponent = ({
4387
3909
  const iframe = useAppStore((s) => s.iframe);
4388
3910
  const ctx = useContext5(dropZoneContext);
4389
3911
  const [localZones, setLocalZones] = useState10({});
4390
- const registerLocalZone = useCallback6(
3912
+ const registerLocalZone = useCallback7(
4391
3913
  (zoneCompound2, active) => {
4392
3914
  var _a;
4393
3915
  (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4397,7 +3919,7 @@ var DraggableComponent = ({
4397
3919
  },
4398
3920
  [setLocalZones]
4399
3921
  );
4400
- const unregisterLocalZone = useCallback6(
3922
+ const unregisterLocalZone = useCallback7(
4401
3923
  (zoneCompound2) => {
4402
3924
  var _a;
4403
3925
  (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4420,14 +3942,17 @@ var DraggableComponent = ({
4420
3942
  return s.permissions.getPermissions({ item });
4421
3943
  })
4422
3944
  );
4423
- const userIsDragging = useContextStore(
4424
- ZoneStoreContext,
4425
- (s) => !!s.draggedItem
4426
- );
4427
- const canCollide = permissions.drag || userIsDragging;
4428
- const disabled = !isEnabled || !canCollide;
3945
+ const zoneStore = useContext5(ZoneStoreContext);
4429
3946
  const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
4430
- const { ref: sortableRef, status } = useSortableSafe({
3947
+ const dynamicCollisionDetector = useMemo7(
3948
+ () => createDynamicCollisionDetector(dragAxis),
3949
+ [dragAxis]
3950
+ );
3951
+ const {
3952
+ ref: sortableRef,
3953
+ isDragging: thisIsDragging,
3954
+ sortable
3955
+ } = useSortable2({
4431
3956
  id,
4432
3957
  index,
4433
3958
  group: zoneCompound,
@@ -4442,18 +3967,34 @@ var DraggableComponent = ({
4442
3967
  path: path || [],
4443
3968
  inDroppableZone
4444
3969
  },
4445
- collisionPriority: isEnabled ? depth : 0,
4446
- collisionDetector: createDynamicCollisionDetector(dragAxis),
4447
- disabled,
3970
+ collisionPriority: depth,
3971
+ collisionDetector: dynamicCollisionDetector,
4448
3972
  // "Out of the way" transition from react-beautiful-dnd
4449
3973
  transition: {
4450
3974
  duration: 200,
4451
3975
  easing: "cubic-bezier(0.2, 0, 0, 1)"
4452
- }
3976
+ },
3977
+ feedback: "clone"
4453
3978
  });
4454
- const thisIsDragging = status === "dragging";
3979
+ useEffect12(() => {
3980
+ const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
3981
+ sortable.droppable.disabled = !isEnabled;
3982
+ sortable.draggable.disabled = !permissions.drag;
3983
+ const cleanup = zoneStore.subscribe((s) => {
3984
+ sortable.droppable.disabled = !s.enabledIndex[zoneCompound];
3985
+ });
3986
+ if (ref.current && !permissions.drag) {
3987
+ ref.current.setAttribute("data-puck-disabled", "");
3988
+ return () => {
3989
+ var _a;
3990
+ (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
3991
+ cleanup();
3992
+ };
3993
+ }
3994
+ return cleanup;
3995
+ }, [permissions.drag, zoneCompound]);
4455
3996
  const ref = useRef2(null);
4456
- const refSetter = useCallback6(
3997
+ const refSetter = useCallback7(
4457
3998
  (el) => {
4458
3999
  sortableRef(el);
4459
4000
  if (el) {
@@ -4463,13 +4004,13 @@ var DraggableComponent = ({
4463
4004
  [sortableRef]
4464
4005
  );
4465
4006
  const [portalEl, setPortalEl] = useState10();
4466
- useEffect11(() => {
4007
+ useEffect12(() => {
4467
4008
  var _a, _b, _c;
4468
4009
  setPortalEl(
4469
4010
  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
4470
4011
  );
4471
4012
  }, [iframe.enabled, ref.current]);
4472
- const getStyle = useCallback6(() => {
4013
+ const getStyle = useCallback7(() => {
4473
4014
  var _a, _b, _c;
4474
4015
  if (!ref.current) return;
4475
4016
  const rect = ref.current.getBoundingClientRect();
@@ -4481,40 +4022,61 @@ var DraggableComponent = ({
4481
4022
  x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
4482
4023
  y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
4483
4024
  };
4025
+ const untransformed = {
4026
+ height: ref.current.offsetHeight,
4027
+ width: ref.current.offsetWidth
4028
+ };
4029
+ const transform = accumulateTransform(ref.current);
4484
4030
  const style2 = {
4485
- left: `${rect.left + scroll.x}px`,
4486
- top: `${rect.top + scroll.y}px`,
4487
- height: `${rect.height}px`,
4488
- width: `${rect.width}px`
4031
+ left: `${(rect.left + scroll.x) / transform.scaleX}px`,
4032
+ top: `${(rect.top + scroll.y) / transform.scaleY}px`,
4033
+ height: `${untransformed.height}px`,
4034
+ width: `${untransformed.width}px`
4489
4035
  };
4490
4036
  return style2;
4491
4037
  }, [ref.current]);
4492
4038
  const [style, setStyle] = useState10();
4493
- const sync = useCallback6(() => {
4039
+ const sync = useCallback7(() => {
4494
4040
  setStyle(getStyle());
4495
4041
  }, [ref.current, iframe]);
4496
- useEffect11(() => {
4497
- if (ref.current && !userIsDragging) {
4042
+ useEffect12(() => {
4043
+ if (ref.current) {
4498
4044
  const observer = new ResizeObserver(sync);
4499
4045
  observer.observe(ref.current);
4500
4046
  return () => {
4501
4047
  observer.disconnect();
4502
4048
  };
4503
4049
  }
4504
- }, [ref.current, userIsDragging]);
4050
+ }, [ref.current]);
4505
4051
  const registerNode = useAppStore((s) => s.nodes.registerNode);
4506
- useEffect11(() => {
4507
- var _a;
4508
- registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
4509
- return () => {
4510
- registerNode(id, { methods: { sync: () => null }, element: null });
4052
+ const hideOverlay = useCallback7(() => {
4053
+ setIsVisible(false);
4054
+ }, []);
4055
+ const showOverlay = useCallback7(() => {
4056
+ setIsVisible(true);
4057
+ }, []);
4058
+ useEffect12(() => {
4059
+ var _a;
4060
+ registerNode(id, {
4061
+ methods: { sync, showOverlay, hideOverlay },
4062
+ element: (_a = ref.current) != null ? _a : null
4063
+ });
4064
+ return () => {
4065
+ registerNode(id, {
4066
+ methods: {
4067
+ sync: () => null,
4068
+ hideOverlay: () => null,
4069
+ showOverlay: () => null
4070
+ },
4071
+ element: null
4072
+ });
4511
4073
  };
4512
4074
  }, [id, zoneCompound, index, componentType, sync]);
4513
4075
  const CustomActionBar = useMemo7(
4514
4076
  () => overrides.actionBar || DefaultActionBar,
4515
4077
  [overrides.actionBar]
4516
4078
  );
4517
- const onClick = useCallback6(
4079
+ const onClick = useCallback7(
4518
4080
  (e) => {
4519
4081
  e.stopPropagation();
4520
4082
  dispatch({
@@ -4527,7 +4089,7 @@ var DraggableComponent = ({
4527
4089
  [index, zoneCompound, id]
4528
4090
  );
4529
4091
  const appStore = useAppStoreApi();
4530
- const onSelectParent = useCallback6(() => {
4092
+ const onSelectParent = useCallback7(() => {
4531
4093
  const { nodes, zones } = appStore.getState().state.indexes;
4532
4094
  const node = nodes[id];
4533
4095
  const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4548,14 +4110,14 @@ var DraggableComponent = ({
4548
4110
  }
4549
4111
  });
4550
4112
  }, [ctx, path]);
4551
- const onDuplicate = useCallback6(() => {
4113
+ const onDuplicate = useCallback7(() => {
4552
4114
  dispatch({
4553
4115
  type: "duplicate",
4554
4116
  sourceIndex: index,
4555
4117
  sourceZone: zoneCompound
4556
4118
  });
4557
4119
  }, [index, zoneCompound]);
4558
- const onDelete = useCallback6(() => {
4120
+ const onDelete = useCallback7(() => {
4559
4121
  dispatch({
4560
4122
  type: "remove",
4561
4123
  index,
@@ -4563,13 +4125,17 @@ var DraggableComponent = ({
4563
4125
  });
4564
4126
  }, [index, zoneCompound]);
4565
4127
  const [hover, setHover] = useState10(false);
4566
- const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
4567
- useEffect11(() => {
4128
+ const indicativeHover = useContextStore(
4129
+ ZoneStoreContext,
4130
+ (s) => s.hoveringComponent === id
4131
+ );
4132
+ useEffect12(() => {
4568
4133
  if (!ref.current) {
4569
4134
  return;
4570
4135
  }
4571
4136
  const el = ref.current;
4572
4137
  const _onMouseOver = (e) => {
4138
+ const userIsDragging = !!zoneStore.getState().draggedItem;
4573
4139
  if (userIsDragging) {
4574
4140
  if (thisIsDragging) {
4575
4141
  setHover(true);
@@ -4591,18 +4157,12 @@ var DraggableComponent = ({
4591
4157
  el.addEventListener("click", onClick);
4592
4158
  el.addEventListener("mouseover", _onMouseOver);
4593
4159
  el.addEventListener("mouseout", _onMouseOut);
4594
- if (thisIsDragging) {
4595
- el.setAttribute("data-puck-dragging", "");
4596
- } else {
4597
- el.removeAttribute("data-puck-dragging");
4598
- }
4599
4160
  return () => {
4600
4161
  el.removeAttribute("data-puck-component");
4601
4162
  el.removeAttribute("data-puck-dnd");
4602
4163
  el.removeEventListener("click", onClick);
4603
4164
  el.removeEventListener("mouseover", _onMouseOver);
4604
4165
  el.removeEventListener("mouseout", _onMouseOut);
4605
- el.removeAttribute("data-puck-dragging");
4606
4166
  };
4607
4167
  }, [
4608
4168
  ref,
@@ -4610,29 +4170,43 @@ var DraggableComponent = ({
4610
4170
  containsActiveZone,
4611
4171
  zoneCompound,
4612
4172
  id,
4613
- userIsDragging,
4614
4173
  thisIsDragging,
4615
4174
  inDroppableZone
4616
4175
  ]);
4617
- useEffect11(() => {
4618
- if (ref.current && disabled) {
4619
- ref.current.setAttribute("data-puck-disabled", "");
4620
- return () => {
4621
- var _a;
4622
- (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
4623
- };
4624
- }
4625
- }, [disabled, ref]);
4626
4176
  const [isVisible, setIsVisible] = useState10(false);
4627
- useEffect11(() => {
4628
- sync();
4629
- if ((isSelected || hover || indicativeHover) && !userIsDragging) {
4630
- setIsVisible(true);
4177
+ const [dragFinished, setDragFinished] = useState10(true);
4178
+ const [_, startTransition] = useTransition();
4179
+ useEffect12(() => {
4180
+ startTransition(() => {
4181
+ if (hover || indicativeHover || isSelected) {
4182
+ sync();
4183
+ setIsVisible(true);
4184
+ setThisWasDragging(false);
4185
+ } else {
4186
+ setIsVisible(false);
4187
+ }
4188
+ });
4189
+ }, [hover, indicativeHover, isSelected, iframe]);
4190
+ const [thisWasDragging, setThisWasDragging] = useState10(false);
4191
+ const onDragFinished = useOnDragFinished((finished) => {
4192
+ if (finished) {
4193
+ startTransition(() => {
4194
+ sync();
4195
+ setDragFinished(true);
4196
+ });
4631
4197
  } else {
4632
- setIsVisible(false);
4198
+ setDragFinished(false);
4199
+ }
4200
+ });
4201
+ useEffect12(() => {
4202
+ if (thisIsDragging) {
4203
+ setThisWasDragging(true);
4633
4204
  }
4634
- }, [isSelected, hover, indicativeHover, iframe, userIsDragging]);
4635
- const syncActionsPosition = useCallback6(
4205
+ }, [thisIsDragging]);
4206
+ useEffect12(() => {
4207
+ if (thisWasDragging) return onDragFinished();
4208
+ }, [thisWasDragging, onDragFinished]);
4209
+ const syncActionsPosition = useCallback7(
4636
4210
  (el) => {
4637
4211
  if (el) {
4638
4212
  const view = el.ownerDocument.defaultView;
@@ -4657,7 +4231,7 @@ var DraggableComponent = ({
4657
4231
  },
4658
4232
  [zoom]
4659
4233
  );
4660
- useEffect11(() => {
4234
+ useEffect12(() => {
4661
4235
  if (userDragAxis) {
4662
4236
  setDragAxis(userDragAxis);
4663
4237
  return;
@@ -4671,7 +4245,10 @@ var DraggableComponent = ({
4671
4245
  }
4672
4246
  setDragAxis(autoDragAxis);
4673
4247
  }, [ref, userDragAxis, autoDragAxis]);
4674
- const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx20(CornerLeftUp, { size: 16 }) });
4248
+ const parentAction = useMemo7(
4249
+ () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx20(CornerLeftUp, { size: 16 }) }),
4250
+ [ctx == null ? void 0 : ctx.areaId]
4251
+ );
4675
4252
  const nextContextValue = useMemo7(
4676
4253
  () => __spreadProps(__spreadValues({}, ctx), {
4677
4254
  areaId: id,
@@ -4692,7 +4269,7 @@ var DraggableComponent = ({
4692
4269
  ]
4693
4270
  );
4694
4271
  return /* @__PURE__ */ jsxs9(DropZoneProvider, { value: nextContextValue, children: [
4695
- isVisible && createPortal2(
4272
+ dragFinished && isVisible && createPortal2(
4696
4273
  /* @__PURE__ */ jsxs9(
4697
4274
  "div",
4698
4275
  {
@@ -4752,11 +4329,15 @@ var DraggableComponent = ({
4752
4329
 
4753
4330
  // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
4754
4331
  init_react_import();
4755
- 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" };
4332
+ 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" };
4333
+
4334
+ // components/DropZone/index.tsx
4335
+ import { useDroppable } from "@dnd-kit/react";
4756
4336
 
4757
4337
  // components/DropZone/lib/use-min-empty-height.ts
4758
4338
  init_react_import();
4759
- import { useEffect as useEffect12, useState as useState11 } from "react";
4339
+ import { useEffect as useEffect13, useRef as useRef3, useState as useState11 } from "react";
4340
+ var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
4760
4341
  var useMinEmptyHeight = ({
4761
4342
  zoneCompound,
4762
4343
  userMinEmptyHeight,
@@ -4772,32 +4353,52 @@ var useMinEmptyHeight = ({
4772
4353
  isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
4773
4354
  };
4774
4355
  });
4775
- useEffect12(() => {
4356
+ const numItems = useRef3(0);
4357
+ const onDragFinished = useOnDragFinished(
4358
+ (finished) => {
4359
+ var _a;
4360
+ if (finished) {
4361
+ const newNumItems = getNumItems(appStore, zoneCompound);
4362
+ setPrevHeight(0);
4363
+ if (newNumItems || numItems.current === 0) {
4364
+ setIsAnimating(false);
4365
+ return;
4366
+ }
4367
+ const selectedItem = appStore.getState().selectedItem;
4368
+ const zones = appStore.getState().state.indexes.zones;
4369
+ const nodes = appStore.getState().nodes;
4370
+ (_a = nodes.nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.methods.hideOverlay();
4371
+ setTimeout(() => {
4372
+ var _a2;
4373
+ const contentIds = ((_a2 = zones[zoneCompound]) == null ? void 0 : _a2.contentIds) || [];
4374
+ contentIds.forEach((contentId) => {
4375
+ const node = nodes.nodes[contentId];
4376
+ node == null ? void 0 : node.methods.sync();
4377
+ });
4378
+ if (selectedItem) {
4379
+ setTimeout(() => {
4380
+ var _a3, _b;
4381
+ (_a3 = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _a3.methods.sync();
4382
+ (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.showOverlay();
4383
+ }, 200);
4384
+ }
4385
+ setIsAnimating(false);
4386
+ }, 100);
4387
+ }
4388
+ },
4389
+ [appStore, prevHeight, zoneCompound]
4390
+ );
4391
+ useEffect13(() => {
4776
4392
  if (draggedItem && ref.current) {
4777
4393
  if (isZone) {
4778
4394
  const rect = ref.current.getBoundingClientRect();
4395
+ numItems.current = getNumItems(appStore, zoneCompound);
4779
4396
  setPrevHeight(rect.height);
4780
4397
  setIsAnimating(true);
4781
- return;
4398
+ return onDragFinished();
4782
4399
  }
4783
4400
  }
4784
- setPrevHeight(0);
4785
- setTimeout(() => {
4786
- var _a, _b;
4787
- const zones = appStore.getState().state.indexes.zones;
4788
- const nodes = appStore.getState().nodes;
4789
- const selectedItem = appStore.getState().selectedItem;
4790
- const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
4791
- contentIds.forEach((contentId) => {
4792
- const node = nodes.nodes[contentId];
4793
- node == null ? void 0 : node.methods.sync();
4794
- });
4795
- if (selectedItem) {
4796
- (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
4797
- }
4798
- setIsAnimating(false);
4799
- }, 400);
4800
- }, [ref.current, draggedItem, zoneCompound]);
4401
+ }, [ref.current, draggedItem, onDragFinished]);
4801
4402
  return [prevHeight || userMinEmptyHeight, isAnimating];
4802
4403
  };
4803
4404
 
@@ -4818,15 +4419,15 @@ function assignRefs(refs, node) {
4818
4419
 
4819
4420
  // components/DropZone/lib/use-content-with-preview.ts
4820
4421
  init_react_import();
4821
- import { useEffect as useEffect13, useState as useState12 } from "react";
4422
+ import { useContext as useContext6, useEffect as useEffect14, useState as useState12 } from "react";
4822
4423
 
4823
4424
  // lib/dnd/use-rendered-callback.ts
4824
4425
  init_react_import();
4825
4426
  import { useDragDropManager } from "@dnd-kit/react";
4826
- import { useCallback as useCallback7 } from "react";
4427
+ import { useCallback as useCallback8 } from "react";
4827
4428
  function useRenderedCallback(callback, deps) {
4828
4429
  const manager = useDragDropManager();
4829
- return useCallback7(
4430
+ return useCallback8(
4830
4431
  (...args) => __async(this, null, function* () {
4831
4432
  yield manager == null ? void 0 : manager.renderer.rendering;
4832
4433
  return callback(...args);
@@ -4837,16 +4438,10 @@ function useRenderedCallback(callback, deps) {
4837
4438
 
4838
4439
  // components/DropZone/lib/use-content-with-preview.ts
4839
4440
  var useContentIdsWithPreview = (contentIds, zoneCompound) => {
4840
- const { draggedItemId, preview, previewExists } = useContextStore(
4441
+ const zoneStore = useContext6(ZoneStoreContext);
4442
+ const preview = useContextStore(
4841
4443
  ZoneStoreContext,
4842
- (s) => {
4843
- var _a;
4844
- return {
4845
- draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
4846
- preview: s.previewIndex[zoneCompound],
4847
- previewExists: Object.keys(s.previewIndex || {}).length > 0
4848
- };
4849
- }
4444
+ (s) => s.previewIndex[zoneCompound]
4850
4445
  );
4851
4446
  const isDragging = useAppStore((s) => s.state.ui.isDragging);
4852
4447
  const [contentIdsWithPreview, setContentIdsWithPreview] = useState12(contentIds);
@@ -4854,7 +4449,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
4854
4449
  preview
4855
4450
  );
4856
4451
  const updateContent = useRenderedCallback(
4857
- (contentIds2, preview2, isDragging2) => {
4452
+ (contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
4858
4453
  if (isDragging2 && !previewExists) {
4859
4454
  return;
4860
4455
  }
@@ -4883,17 +4478,27 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
4883
4478
  }
4884
4479
  setLocalPreview(preview2);
4885
4480
  },
4886
- [draggedItemId, previewExists]
4481
+ []
4887
4482
  );
4888
- useEffect13(() => {
4889
- updateContent(contentIds, preview, isDragging);
4483
+ useEffect14(() => {
4484
+ var _a;
4485
+ const s = zoneStore.getState();
4486
+ const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
4487
+ const previewExists = Object.keys(s.previewIndex || {}).length > 0;
4488
+ updateContent(
4489
+ contentIds,
4490
+ preview,
4491
+ isDragging,
4492
+ draggedItemId,
4493
+ previewExists
4494
+ );
4890
4495
  }, [contentIds, preview, isDragging]);
4891
4496
  return [contentIdsWithPreview, localPreview];
4892
4497
  };
4893
4498
 
4894
4499
  // components/DropZone/lib/use-drag-axis.ts
4895
4500
  init_react_import();
4896
- import { useCallback as useCallback8, useEffect as useEffect14, useState as useState13 } from "react";
4501
+ import { useCallback as useCallback9, useEffect as useEffect15, useState as useState13 } from "react";
4897
4502
  var GRID_DRAG_AXIS = "dynamic";
4898
4503
  var FLEX_ROW_DRAG_AXIS = "x";
4899
4504
  var DEFAULT_DRAG_AXIS = "y";
@@ -4902,7 +4507,7 @@ var useDragAxis = (ref, collisionAxis) => {
4902
4507
  const [dragAxis, setDragAxis] = useState13(
4903
4508
  collisionAxis || DEFAULT_DRAG_AXIS
4904
4509
  );
4905
- const calculateDragAxis = useCallback8(() => {
4510
+ const calculateDragAxis = useCallback9(() => {
4906
4511
  if (ref.current) {
4907
4512
  const computedStyle = window.getComputedStyle(ref.current);
4908
4513
  if (computedStyle.display === "grid") {
@@ -4914,7 +4519,7 @@ var useDragAxis = (ref, collisionAxis) => {
4914
4519
  }
4915
4520
  }
4916
4521
  }, [ref.current]);
4917
- useEffect14(() => {
4522
+ useEffect15(() => {
4918
4523
  const onViewportChange = () => {
4919
4524
  calculateDragAxis();
4920
4525
  };
@@ -4923,12 +4528,12 @@ var useDragAxis = (ref, collisionAxis) => {
4923
4528
  window.removeEventListener("viewportchange", onViewportChange);
4924
4529
  };
4925
4530
  }, []);
4926
- useEffect14(calculateDragAxis, [status, collisionAxis]);
4531
+ useEffect15(calculateDragAxis, [status, collisionAxis]);
4927
4532
  return [dragAxis, calculateDragAxis];
4928
4533
  };
4929
4534
 
4930
4535
  // components/DropZone/index.tsx
4931
- import { useShallow as useShallow3 } from "zustand/react/shallow";
4536
+ import { useShallow as useShallow4 } from "zustand/react/shallow";
4932
4537
 
4933
4538
  // components/Render/index.tsx
4934
4539
  init_react_import();
@@ -4936,6 +4541,7 @@ import React3, { useMemo as useMemo8 } from "react";
4936
4541
 
4937
4542
  // components/SlotRender/index.tsx
4938
4543
  init_react_import();
4544
+ import { useShallow as useShallow3 } from "zustand/react/shallow";
4939
4545
  import { jsx as jsx21 } from "react/jsx-runtime";
4940
4546
  var ContextSlotRender = ({
4941
4547
  componentId,
@@ -4944,10 +4550,12 @@ var ContextSlotRender = ({
4944
4550
  const config = useAppStore((s) => s.config);
4945
4551
  const metadata = useAppStore((s) => s.metadata);
4946
4552
  const slotContent = useAppStore(
4947
- (s) => {
4553
+ useShallow3((s) => {
4948
4554
  var _a, _b;
4949
- return (_b = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.props[zone]) != null ? _b : null;
4950
- }
4555
+ const indexes = s.state.indexes;
4556
+ const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
4557
+ return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
4558
+ })
4951
4559
  );
4952
4560
  return /* @__PURE__ */ jsx21(
4953
4561
  SlotRenderPure,
@@ -4977,7 +4585,7 @@ function Render({
4977
4585
  root: data.root || {},
4978
4586
  content: data.content || []
4979
4587
  });
4980
- const rootProps = defaultedData.root.props || defaultedData.root;
4588
+ const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
4981
4589
  const title = (rootProps == null ? void 0 : rootProps.title) || "";
4982
4590
  const pageProps = __spreadProps(__spreadValues({}, rootProps), {
4983
4591
  puck: {
@@ -4990,7 +4598,11 @@ function Render({
4990
4598
  editMode: false,
4991
4599
  id: "puck-root"
4992
4600
  });
4993
- const propsWithSlots = useSlots(config.root, pageProps, (props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata })));
4601
+ const propsWithSlots = useSlots(
4602
+ config,
4603
+ { type: "root", props: pageProps },
4604
+ (props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
4605
+ );
4994
4606
  const nextContextValue = useMemo8(
4995
4607
  () => ({
4996
4608
  mode: "render",
@@ -5013,19 +4625,18 @@ var DropZoneEditPure = (props) => /* @__PURE__ */ jsx23(DropZoneEdit, __spreadVa
5013
4625
  var DropZoneChild = ({
5014
4626
  zoneCompound,
5015
4627
  componentId,
5016
- preview,
5017
4628
  index,
5018
- isEnabled,
5019
4629
  dragAxis,
5020
4630
  collisionAxis,
5021
4631
  inDroppableZone
5022
4632
  }) => {
5023
4633
  var _a, _b;
5024
4634
  const metadata = useAppStore((s) => s.metadata);
5025
- const ctx = useContext6(dropZoneContext);
4635
+ const ctx = useContext7(dropZoneContext);
5026
4636
  const { depth = 1 } = ctx != null ? ctx : {};
4637
+ const zoneStore = useContext7(ZoneStoreContext);
5027
4638
  const nodeProps = useAppStore(
5028
- useShallow3((s) => {
4639
+ useShallow4((s) => {
5029
4640
  var _a2;
5030
4641
  return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
5031
4642
  })
@@ -5037,22 +4648,42 @@ var DropZoneChild = ({
5037
4648
  }
5038
4649
  );
5039
4650
  const nodeReadOnly = useAppStore(
5040
- useShallow3((s) => {
4651
+ useShallow4((s) => {
5041
4652
  var _a2;
5042
4653
  return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
5043
4654
  })
5044
4655
  );
5045
- const node = { type: nodeType, props: nodeProps };
5046
- const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
4656
+ const appStore = useAppStoreApi();
4657
+ const item = useMemo9(() => {
4658
+ if (nodeProps) {
4659
+ const expanded = expandNode({
4660
+ type: nodeType,
4661
+ props: nodeProps
4662
+ });
4663
+ return expanded;
4664
+ }
4665
+ const preview = zoneStore.getState().previewIndex[zoneCompound];
4666
+ if (componentId === (preview == null ? void 0 : preview.props.id)) {
4667
+ return {
4668
+ type: preview.componentType,
4669
+ props: preview.props,
4670
+ previewType: preview.type
4671
+ };
4672
+ }
4673
+ return null;
4674
+ }, [appStore, componentId, zoneCompound, nodeType, nodeProps]);
5047
4675
  const componentConfig = useAppStore(
5048
4676
  (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
5049
4677
  );
5050
- const puckProps = {
5051
- renderDropZone: DropZoneEditPure,
5052
- isEditing: true,
5053
- dragRef: null,
5054
- metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
5055
- };
4678
+ const puckProps = useMemo9(
4679
+ () => ({
4680
+ renderDropZone: DropZoneEditPure,
4681
+ isEditing: true,
4682
+ dragRef: null,
4683
+ metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
4684
+ }),
4685
+ [metadata, componentConfig == null ? void 0 : componentConfig.metadata]
4686
+ );
5056
4687
  const overrides = useAppStore((s) => s.overrides);
5057
4688
  const isLoading = useAppStore(
5058
4689
  (s) => {
@@ -5068,7 +4699,7 @@ var DropZoneChild = ({
5068
4699
  );
5069
4700
  let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
5070
4701
  const renderPreview = useMemo9(
5071
- () => function Preview4() {
4702
+ () => function Preview3() {
5072
4703
  return /* @__PURE__ */ jsx23(DrawerItemInner, { name: label, children: overrides.componentItem });
5073
4704
  },
5074
4705
  [componentId, label, overrides]
@@ -5081,9 +4712,17 @@ var DropZoneChild = ({
5081
4712
  }),
5082
4713
  [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
5083
4714
  );
4715
+ const defaultedNode = useMemo9(
4716
+ () => {
4717
+ var _a2;
4718
+ return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
4719
+ },
4720
+ [item == null ? void 0 : item.type, nodeType, defaultsProps]
4721
+ );
4722
+ const config = useAppStore((s) => s.config);
5084
4723
  const defaultedPropsWithSlots = useSlots(
5085
- componentConfig,
5086
- defaultsProps,
4724
+ config,
4725
+ defaultedNode,
5087
4726
  DropZoneEditPure,
5088
4727
  (slotProps) => /* @__PURE__ */ jsx23(ContextSlotRender, { componentId, zone: slotProps.zone }),
5089
4728
  nodeReadOnly,
@@ -5095,8 +4734,8 @@ var DropZoneChild = ({
5095
4734
  item.type
5096
4735
  ] });
5097
4736
  let componentType = item.type;
5098
- const isPreview = componentId === (preview == null ? void 0 : preview.props.id) && preview.type === "insert";
5099
- if (isPreview) {
4737
+ const isInserting = "previewType" in item ? item.previewType === "insert" : false;
4738
+ if (isInserting) {
5100
4739
  Render2 = renderPreview;
5101
4740
  }
5102
4741
  return /* @__PURE__ */ jsx23(
@@ -5110,11 +4749,10 @@ var DropZoneChild = ({
5110
4749
  isLoading,
5111
4750
  isSelected,
5112
4751
  label,
5113
- isEnabled,
5114
4752
  autoDragAxis: dragAxis,
5115
4753
  userDragAxis: collisionAxis,
5116
4754
  inDroppableZone,
5117
- children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(
4755
+ children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(
5118
4756
  Render2,
5119
4757
  __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
5120
4758
  puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
@@ -5136,7 +4774,7 @@ var DropZoneEdit = forwardRef3(
5136
4774
  minEmptyHeight: userMinEmptyHeight = 128,
5137
4775
  collisionAxis
5138
4776
  }, userRef) {
5139
- const ctx = useContext6(dropZoneContext);
4777
+ const ctx = useContext7(dropZoneContext);
5140
4778
  const {
5141
4779
  // These all need setting via context
5142
4780
  areaId,
@@ -5145,7 +4783,7 @@ var DropZoneEdit = forwardRef3(
5145
4783
  unregisterLocalZone
5146
4784
  } = ctx != null ? ctx : {};
5147
4785
  const path = useAppStore(
5148
- useShallow3((s) => {
4786
+ useShallow4((s) => {
5149
4787
  var _a;
5150
4788
  return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
5151
4789
  })
@@ -5157,39 +4795,24 @@ var DropZoneEdit = forwardRef3(
5157
4795
  }
5158
4796
  }
5159
4797
  const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
5160
- const {
5161
- isDeepestZone,
5162
- inNextDeepestArea,
5163
- draggedComponentType,
5164
- userIsDragging
5165
- } = useContextStore(ZoneStoreContext, (s) => {
5166
- var _a, _b;
5167
- return {
5168
- isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
5169
- inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
5170
- draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
5171
- userIsDragging: !!s.draggedItem
5172
- };
5173
- });
4798
+ const inNextDeepestArea = useContextStore(
4799
+ ZoneStoreContext,
4800
+ (s) => s.nextAreaDepthIndex[areaId || ""]
4801
+ );
5174
4802
  const zoneContentIds = useAppStore(
5175
- useShallow3((s) => {
4803
+ useShallow4((s) => {
5176
4804
  var _a;
5177
4805
  return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
5178
4806
  })
5179
4807
  );
5180
4808
  const zoneType = useAppStore(
5181
- useShallow3((s) => {
4809
+ useShallow4((s) => {
5182
4810
  var _a;
5183
4811
  return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
5184
4812
  })
5185
4813
  );
5186
- useEffect15(() => {
4814
+ useEffect16(() => {
5187
4815
  if (!zoneType || zoneType === "dropzone") {
5188
- if (zoneCompound !== rootDroppableId) {
5189
- console.warn(
5190
- "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"
5191
- );
5192
- }
5193
4816
  if (ctx == null ? void 0 : ctx.registerZone) {
5194
4817
  ctx == null ? void 0 : ctx.registerZone(zoneCompound);
5195
4818
  }
@@ -5200,11 +4823,20 @@ var DropZoneEdit = forwardRef3(
5200
4823
  };
5201
4824
  }
5202
4825
  }, [zoneType]);
4826
+ useEffect16(() => {
4827
+ if (zoneType === "dropzone") {
4828
+ if (zoneCompound !== rootDroppableId) {
4829
+ console.warn(
4830
+ "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"
4831
+ );
4832
+ }
4833
+ }
4834
+ }, [zoneType]);
5203
4835
  const contentIds = useMemo9(() => {
5204
4836
  return zoneContentIds || [];
5205
4837
  }, [zoneContentIds]);
5206
- const ref = useRef3(null);
5207
- const acceptsTarget = useCallback9(
4838
+ const ref = useRef4(null);
4839
+ const acceptsTarget = useCallback10(
5208
4840
  (componentType) => {
5209
4841
  if (!componentType) {
5210
4842
  return true;
@@ -5226,29 +4858,44 @@ var DropZoneEdit = forwardRef3(
5226
4858
  },
5227
4859
  [allow, disallow]
5228
4860
  );
5229
- useEffect15(() => {
4861
+ const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
4862
+ var _a;
4863
+ const draggedComponentType = (_a = s.draggedItem) == null ? void 0 : _a.data.componentType;
4864
+ return acceptsTarget(draggedComponentType);
4865
+ });
4866
+ const hoveringOverArea = inNextDeepestArea || isRootZone;
4867
+ const isEnabled = useContextStore(ZoneStoreContext, (s) => {
4868
+ var _a;
4869
+ let _isEnabled = true;
4870
+ const isDeepestZone = (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false;
4871
+ _isEnabled = isDeepestZone;
4872
+ if (_isEnabled) {
4873
+ _isEnabled = targetAccepted;
4874
+ }
4875
+ return _isEnabled;
4876
+ });
4877
+ useEffect16(() => {
5230
4878
  if (registerLocalZone) {
5231
- registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
4879
+ registerLocalZone(zoneCompound, targetAccepted || isEnabled);
5232
4880
  }
5233
4881
  return () => {
5234
4882
  if (unregisterLocalZone) {
5235
4883
  unregisterLocalZone(zoneCompound);
5236
4884
  }
5237
4885
  };
5238
- }, [draggedComponentType, zoneCompound]);
5239
- const hoveringOverArea = inNextDeepestArea || isRootZone;
5240
- let isEnabled = true;
5241
- if (userIsDragging) {
5242
- isEnabled = isDeepestZone;
5243
- }
5244
- if (isEnabled) {
5245
- isEnabled = acceptsTarget(draggedComponentType);
5246
- }
4886
+ }, [targetAccepted, isEnabled, zoneCompound]);
5247
4887
  const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
5248
4888
  contentIds,
5249
4889
  zoneCompound
5250
4890
  );
5251
4891
  const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
4892
+ const zoneStore = useContext7(ZoneStoreContext);
4893
+ useEffect16(() => {
4894
+ const { enabledIndex } = zoneStore.getState();
4895
+ zoneStore.setState({
4896
+ enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
4897
+ });
4898
+ }, [isEnabled, zoneStore, zoneCompound]);
5252
4899
  const droppableConfig = {
5253
4900
  id: zoneCompound,
5254
4901
  collisionPriority: isEnabled ? depth : 0,
@@ -5258,11 +4905,11 @@ var DropZoneEdit = forwardRef3(
5258
4905
  data: {
5259
4906
  areaId,
5260
4907
  depth,
5261
- isDroppableTarget: acceptsTarget(draggedComponentType),
4908
+ isDroppableTarget: targetAccepted,
5262
4909
  path: path || []
5263
4910
  }
5264
4911
  };
5265
- const { ref: dropRef } = useDroppableSafe(droppableConfig);
4912
+ const { ref: dropRef } = useDroppable(droppableConfig);
5266
4913
  const isAreaSelected = useAppStore(
5267
4914
  (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
5268
4915
  );
@@ -5277,7 +4924,6 @@ var DropZoneEdit = forwardRef3(
5277
4924
  {
5278
4925
  className: `${getClassName17({
5279
4926
  isRootZone,
5280
- userIsDragging,
5281
4927
  hoveringOverArea,
5282
4928
  isEnabled,
5283
4929
  isAreaSelected,
@@ -5299,12 +4945,10 @@ var DropZoneEdit = forwardRef3(
5299
4945
  {
5300
4946
  zoneCompound,
5301
4947
  componentId,
5302
- preview,
5303
4948
  dragAxis,
5304
- isEnabled,
5305
4949
  index: i,
5306
4950
  collisionAxis,
5307
- inDroppableZone: acceptsTarget(draggedComponentType)
4951
+ inDroppableZone: targetAccepted
5308
4952
  },
5309
4953
  componentId
5310
4954
  );
@@ -5319,7 +4963,7 @@ var DropZoneRenderItem = ({
5319
4963
  metadata
5320
4964
  }) => {
5321
4965
  const Component = config.components[item.type];
5322
- const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
4966
+ const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
5323
4967
  const nextContextValue = useMemo9(
5324
4968
  () => ({
5325
4969
  areaId: props.id,
@@ -5340,12 +4984,12 @@ var DropZoneRenderItem = ({
5340
4984
  var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx23(DropZoneRender, __spreadValues({}, props));
5341
4985
  var DropZoneRender = forwardRef3(
5342
4986
  function DropZoneRenderInternal({ className, style, zone }, ref) {
5343
- const ctx = useContext6(dropZoneContext);
4987
+ const ctx = useContext7(dropZoneContext);
5344
4988
  const { areaId = "root" } = ctx || {};
5345
- const { config, data, metadata } = useContext6(renderContext);
4989
+ const { config, data, metadata } = useContext7(renderContext);
5346
4990
  let zoneCompound = rootDroppableId;
5347
4991
  let content = (data == null ? void 0 : data.content) || [];
5348
- useEffect15(() => {
4992
+ useEffect16(() => {
5349
4993
  if (!content) {
5350
4994
  if (ctx == null ? void 0 : ctx.registerZone) {
5351
4995
  ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -5384,7 +5028,7 @@ var DropZoneRender = forwardRef3(
5384
5028
  var DropZonePure = (props) => /* @__PURE__ */ jsx23(DropZone, __spreadValues({}, props));
5385
5029
  var DropZone = forwardRef3(
5386
5030
  function DropZone2(props, ref) {
5387
- const ctx = useContext6(dropZoneContext);
5031
+ const ctx = useContext7(dropZoneContext);
5388
5032
  if ((ctx == null ? void 0 : ctx.mode) === "edit") {
5389
5033
  return /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
5390
5034
  }
@@ -5395,7 +5039,6 @@ var DropZone = forwardRef3(
5395
5039
  // lib/dnd/NestedDroppablePlugin.ts
5396
5040
  init_react_import();
5397
5041
  import { Plugin } from "@dnd-kit/abstract";
5398
- import { effects } from "@dnd-kit/state";
5399
5042
 
5400
5043
  // lib/throttle.ts
5401
5044
  init_react_import();
@@ -5444,7 +5087,7 @@ var GlobalPosition = class {
5444
5087
  var _a;
5445
5088
  this.target = target;
5446
5089
  this.original = original;
5447
- this.frameEl = document.querySelector("#preview-frame");
5090
+ this.frameEl = document.querySelector("iframe#preview-frame");
5448
5091
  if (this.frameEl) {
5449
5092
  this.frameRect = this.frameEl.getBoundingClientRect();
5450
5093
  this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
@@ -5509,7 +5152,7 @@ var depthSort = (candidates) => {
5509
5152
  return 0;
5510
5153
  });
5511
5154
  };
5512
- var getZoneId2 = (candidate) => {
5155
+ var getZoneId = (candidate) => {
5513
5156
  let id = candidate == null ? void 0 : candidate.id;
5514
5157
  if (!candidate) return null;
5515
5158
  if (candidate.type === "component") {
@@ -5524,6 +5167,7 @@ var getZoneId2 = (candidate) => {
5524
5167
  }
5525
5168
  return id;
5526
5169
  };
5170
+ var BUFFER = 6;
5527
5171
  var getPointerCollisions = (position, manager) => {
5528
5172
  const candidates = [];
5529
5173
  let elements = position.target.ownerDocument.elementsFromPoint(
@@ -5547,13 +5191,26 @@ var getPointerCollisions = (position, manager) => {
5547
5191
  for (let i = 0; i < elements.length; i++) {
5548
5192
  const element = elements[i];
5549
5193
  const dropzoneId = element.getAttribute("data-puck-dropzone");
5194
+ const id = element.getAttribute("data-puck-dnd");
5195
+ const isVoid = element.hasAttribute("data-puck-dnd-void");
5196
+ if (BUFFER && (dropzoneId || id) && !isVoid) {
5197
+ const box = element.getBoundingClientRect();
5198
+ const contractedBox = {
5199
+ left: box.left + BUFFER,
5200
+ right: box.right - BUFFER,
5201
+ top: box.top + BUFFER,
5202
+ bottom: box.bottom - BUFFER
5203
+ };
5204
+ if (position.frame.x < contractedBox.left || position.frame.x > contractedBox.right || position.frame.y > contractedBox.bottom || position.frame.y < contractedBox.top) {
5205
+ continue;
5206
+ }
5207
+ }
5550
5208
  if (dropzoneId) {
5551
5209
  const droppable = manager.registry.droppables.get(dropzoneId);
5552
5210
  if (droppable) {
5553
5211
  candidates.push(droppable);
5554
5212
  }
5555
5213
  }
5556
- const id = element.getAttribute("data-puck-dnd");
5557
5214
  if (id) {
5558
5215
  const droppable = manager.registry.droppables.get(id);
5559
5216
  if (droppable) {
@@ -5602,13 +5259,16 @@ var findDeepestCandidate = (position, manager) => {
5602
5259
  return true;
5603
5260
  });
5604
5261
  filteredCandidates.reverse();
5605
- const zone = getZoneId2(filteredCandidates[0]);
5606
- const area = (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
5262
+ const primaryCandidate = filteredCandidates[0];
5263
+ const primaryCandidateData = primaryCandidate.data;
5264
+ const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
5265
+ const zone = getZoneId(primaryCandidate);
5266
+ const area = primaryCandidateIsComponent && primaryCandidateData.containsActiveZone ? filteredCandidates[0].id : (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
5607
5267
  return { zone, area };
5608
5268
  }
5609
5269
  return {
5610
- zone: "default-zone",
5611
- area: null
5270
+ zone: rootDroppableId,
5271
+ area: rootAreaId
5612
5272
  };
5613
5273
  };
5614
5274
  var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends Plugin {
@@ -5617,7 +5277,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
5617
5277
  if (typeof window === "undefined") {
5618
5278
  return;
5619
5279
  }
5620
- const cleanupEffect = effects(() => {
5280
+ this.registerEffect(() => {
5621
5281
  const handleMove = (event) => {
5622
5282
  const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
5623
5283
  const position = new GlobalPosition(target, {
@@ -5641,12 +5301,12 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
5641
5301
  capture: true
5642
5302
  // dndkit's PointerSensor prevents propagation during drag
5643
5303
  });
5644
- this.destroy = () => {
5304
+ const cleanup = () => {
5645
5305
  document.body.removeEventListener("pointermove", handlePointerMove, {
5646
5306
  capture: true
5647
5307
  });
5648
- cleanupEffect();
5649
5308
  };
5309
+ return cleanup;
5650
5310
  });
5651
5311
  }
5652
5312
  };
@@ -5706,14 +5366,15 @@ function getDeepDir(el) {
5706
5366
  }
5707
5367
 
5708
5368
  // components/DragDropContext/index.tsx
5369
+ import { effect } from "@dnd-kit/state";
5709
5370
  import { jsx as jsx24 } from "react/jsx-runtime";
5710
5371
  var DEBUG3 = false;
5711
5372
  var dragListenerContext = createContext4({
5712
5373
  dragListeners: {}
5713
5374
  });
5714
5375
  function useDragListener(type, fn, deps = []) {
5715
- const { setDragListeners } = useContext7(dragListenerContext);
5716
- useEffect16(() => {
5376
+ const { setDragListeners } = useContext8(dragListenerContext);
5377
+ useEffect17(() => {
5717
5378
  if (setDragListeners) {
5718
5379
  setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
5719
5380
  [type]: [...old[type] || [], fn]
@@ -5723,8 +5384,8 @@ function useDragListener(type, fn, deps = []) {
5723
5384
  }
5724
5385
  var AREA_CHANGE_DEBOUNCE_MS = 100;
5725
5386
  var useTempDisableFallback = (timeout3) => {
5726
- const lastFallbackDisable = useRef4(null);
5727
- return useCallback10((manager) => {
5387
+ const lastFallbackDisable = useRef5(null);
5388
+ return useCallback11((manager) => {
5728
5389
  collisionStore.setState({ fallbackEnabled: false });
5729
5390
  const fallbackId = generateId();
5730
5391
  lastFallbackDisable.current = fallbackId;
@@ -5743,7 +5404,7 @@ var DragDropContextClient = ({
5743
5404
  const dispatch = useAppStore((s) => s.dispatch);
5744
5405
  const appStore = useAppStoreApi();
5745
5406
  const id = useSafeId();
5746
- const debouncedParamsRef = useRef4(null);
5407
+ const debouncedParamsRef = useRef5(null);
5747
5408
  const tempDisableFallback = useTempDisableFallback(100);
5748
5409
  const [zoneStore] = useState14(
5749
5410
  () => createStore3(() => ({
@@ -5752,10 +5413,12 @@ var DragDropContextClient = ({
5752
5413
  areaDepthIndex: {},
5753
5414
  nextAreaDepthIndex: {},
5754
5415
  draggedItem: null,
5755
- previewIndex: {}
5416
+ previewIndex: {},
5417
+ enabledIndex: {},
5418
+ hoveringComponent: null
5756
5419
  }))
5757
5420
  );
5758
- const getChanged2 = useCallback10(
5421
+ const getChanged2 = useCallback11(
5759
5422
  (params, id2) => {
5760
5423
  const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
5761
5424
  const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -5776,7 +5439,7 @@ var DragDropContextClient = ({
5776
5439
  },
5777
5440
  [zoneStore]
5778
5441
  );
5779
- const setDeepestAndCollide = useCallback10(
5442
+ const setDeepestAndCollide = useCallback11(
5780
5443
  (params, manager) => {
5781
5444
  const { zoneChanged, areaChanged } = getChanged2(params, id);
5782
5445
  if (!zoneChanged && !areaChanged) return;
@@ -5800,7 +5463,7 @@ var DragDropContextClient = ({
5800
5463
  setDeepestDb.cancel();
5801
5464
  debouncedParamsRef.current = null;
5802
5465
  };
5803
- useEffect16(() => {
5466
+ useEffect17(() => {
5804
5467
  if (DEBUG3) {
5805
5468
  zoneStore.subscribe(
5806
5469
  (s) => {
@@ -5863,8 +5526,8 @@ var DragDropContextClient = ({
5863
5526
  ]);
5864
5527
  const sensors = useSensors();
5865
5528
  const [dragListeners, setDragListeners] = useState14({});
5866
- const dragMode = useRef4(null);
5867
- const initialSelector = useRef4(void 0);
5529
+ const dragMode = useRef5(null);
5530
+ const initialSelector = useRef5(void 0);
5868
5531
  const nextContextValue = useMemo10(
5869
5532
  () => ({
5870
5533
  mode: "edit",
@@ -5886,7 +5549,9 @@ var DragDropContextClient = ({
5886
5549
  plugins,
5887
5550
  sensors,
5888
5551
  onDragEnd: (event, manager) => {
5889
- var _a;
5552
+ var _a, _b;
5553
+ const entryEl = (_a = getFrame()) == null ? void 0 : _a.querySelector("[data-puck-entry]");
5554
+ entryEl == null ? void 0 : entryEl.removeAttribute("data-puck-dragging");
5890
5555
  const { source, target } = event.operation;
5891
5556
  if (!source) {
5892
5557
  zoneStore.setState({ draggedItem: null });
@@ -5894,9 +5559,9 @@ var DragDropContextClient = ({
5894
5559
  }
5895
5560
  const { zone, index } = source.data;
5896
5561
  const { previewIndex = {} } = zoneStore.getState() || {};
5897
- const thisPreview = ((_a = previewIndex[zone]) == null ? void 0 : _a.props.id) === source.id ? previewIndex[zone] : null;
5898
- setTimeout(() => {
5899
- var _a2, _b;
5562
+ const thisPreview = ((_b = previewIndex[zone]) == null ? void 0 : _b.props.id) === source.id ? previewIndex[zone] : null;
5563
+ const onAnimationEnd = () => {
5564
+ var _a2, _b2;
5900
5565
  zoneStore.setState({ draggedItem: null });
5901
5566
  if (event.canceled || (target == null ? void 0 : target.type) === "void") {
5902
5567
  zoneStore.setState({ previewIndex: {} });
@@ -5932,23 +5597,28 @@ var DragDropContextClient = ({
5932
5597
  });
5933
5598
  }
5934
5599
  }
5935
- setTimeout(() => {
5936
- dispatch({
5937
- type: "setUi",
5938
- ui: {
5939
- itemSelector: { index, zone },
5940
- isDragging: false
5941
- },
5942
- recordHistory: true
5943
- });
5944
- }, 50);
5945
- (_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
5600
+ dispatch({
5601
+ type: "setUi",
5602
+ ui: {
5603
+ itemSelector: { index, zone },
5604
+ isDragging: false
5605
+ },
5606
+ recordHistory: true
5607
+ });
5608
+ (_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
5946
5609
  fn(event, manager);
5947
5610
  });
5948
- }, 250);
5611
+ };
5612
+ let dispose;
5613
+ dispose = effect(() => {
5614
+ if (source.status === "idle") {
5615
+ onAnimationEnd();
5616
+ dispose == null ? void 0 : dispose();
5617
+ }
5618
+ });
5949
5619
  },
5950
5620
  onDragOver: (event, manager) => {
5951
- var _a, _b, _c, _d, _e;
5621
+ var _a, _b, _c, _d;
5952
5622
  event.preventDefault();
5953
5623
  const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
5954
5624
  if (!draggedItem) return;
@@ -5966,7 +5636,7 @@ var DragDropContextClient = ({
5966
5636
  const targetData = target.data;
5967
5637
  targetZone = targetData.zone;
5968
5638
  targetIndex = targetData.index;
5969
- const collisionData = (_c = (_b = manager.dragOperation.data) == null ? void 0 : _b.collisionMap) == null ? void 0 : _c[targetId];
5639
+ const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
5970
5640
  const dir = getDeepDir(target.element);
5971
5641
  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";
5972
5642
  if (targetIndex >= sourceIndex && sourceZone === targetZone) {
@@ -5979,7 +5649,7 @@ var DragDropContextClient = ({
5979
5649
  targetZone = target.id.toString();
5980
5650
  targetIndex = 0;
5981
5651
  }
5982
- const path = ((_d = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _d.path) || [];
5652
+ const path = ((_c = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _c.path) || [];
5983
5653
  if (targetId === sourceId || path.find((path2) => {
5984
5654
  const [pathId] = path2.split(":");
5985
5655
  return pathId === sourceId;
@@ -6025,16 +5695,12 @@ var DragDropContextClient = ({
6025
5695
  });
6026
5696
  }
6027
5697
  }
6028
- (_e = dragListeners.dragover) == null ? void 0 : _e.forEach((fn) => {
5698
+ (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
6029
5699
  fn(event, manager);
6030
5700
  });
6031
5701
  },
6032
5702
  onDragStart: (event, manager) => {
6033
5703
  var _a;
6034
- dispatch({
6035
- type: "setUi",
6036
- ui: { itemSelector: null, isDragging: true }
6037
- });
6038
5704
  const { source } = event.operation;
6039
5705
  if (source && source.type !== "void") {
6040
5706
  const sourceData = source.data;
@@ -6064,11 +5730,31 @@ var DragDropContextClient = ({
6064
5730
  });
6065
5731
  },
6066
5732
  onBeforeDragStart: (event) => {
6067
- var _a;
6068
- const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.data.type) === "drawer";
5733
+ var _a, _b, _c, _d;
5734
+ const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.type) === "drawer";
6069
5735
  dragMode.current = isNewComponent ? "new" : "existing";
6070
5736
  initialSelector.current = void 0;
6071
5737
  zoneStore.setState({ draggedItem: event.operation.source });
5738
+ if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== ((_c = event.operation.source) == null ? void 0 : _c.id)) {
5739
+ dispatch({
5740
+ type: "setUi",
5741
+ ui: {
5742
+ itemSelector: null,
5743
+ isDragging: true
5744
+ },
5745
+ recordHistory: false
5746
+ });
5747
+ } else {
5748
+ dispatch({
5749
+ type: "setUi",
5750
+ ui: {
5751
+ isDragging: true
5752
+ },
5753
+ recordHistory: false
5754
+ });
5755
+ }
5756
+ const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
5757
+ entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
6072
5758
  },
6073
5759
  children: /* @__PURE__ */ jsx24(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children }) })
6074
5760
  }
@@ -6088,6 +5774,7 @@ var DragDropContext = ({
6088
5774
  };
6089
5775
 
6090
5776
  // components/Drawer/index.tsx
5777
+ import { useDraggable, useDroppable as useDroppable2 } from "@dnd-kit/react";
6091
5778
  import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
6092
5779
  var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
6093
5780
  var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
@@ -6124,10 +5811,11 @@ var DrawerItemDraggable = ({
6124
5811
  id,
6125
5812
  isDragDisabled
6126
5813
  }) => {
6127
- const { ref } = useDraggableSafe({
5814
+ const { ref } = useDraggable({
6128
5815
  id,
6129
- data: { type: "drawer", componentType: name },
6130
- disabled: isDragDisabled
5816
+ data: { componentType: name },
5817
+ disabled: isDragDisabled,
5818
+ type: "drawer"
6131
5819
  });
6132
5820
  return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
6133
5821
  /* @__PURE__ */ jsx25("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx25(DrawerItemInner, { name, label, children }) }),
@@ -6192,7 +5880,7 @@ var Drawer = ({
6192
5880
  );
6193
5881
  }
6194
5882
  const id = useSafeId();
6195
- const { ref } = useDroppableSafe({
5883
+ const { ref } = useDroppable2({
6196
5884
  id,
6197
5885
  type: "void",
6198
5886
  collisionPriority: 0
@@ -6205,6 +5893,7 @@ var Drawer = ({
6205
5893
  ref,
6206
5894
  "data-puck-dnd": id,
6207
5895
  "data-puck-drawer": true,
5896
+ "data-puck-dnd-void": true,
6208
5897
  children
6209
5898
  }
6210
5899
  );
@@ -6215,11 +5904,12 @@ Drawer.Item = DrawerItem;
6215
5904
  init_react_import();
6216
5905
  import {
6217
5906
  createContext as createContext7,
6218
- useCallback as useCallback16,
6219
- useContext as useContext11,
6220
- useEffect as useEffect24,
6221
- useMemo as useMemo20,
6222
- useState as useState22
5907
+ useCallback as useCallback18,
5908
+ useContext as useContext12,
5909
+ useEffect as useEffect25,
5910
+ useMemo as useMemo21,
5911
+ useRef as useRef8,
5912
+ useState as useState23
6223
5913
  } from "react";
6224
5914
 
6225
5915
  // components/SidebarSection/index.tsx
@@ -6315,70 +6005,26 @@ var SidebarSection = ({
6315
6005
  );
6316
6006
  };
6317
6007
 
6318
- // components/MenuBar/index.tsx
6319
- init_react_import();
6320
-
6321
- // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
6322
- init_react_import();
6323
- 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" };
6324
-
6325
- // components/MenuBar/index.tsx
6326
- import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
6327
- var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
6328
- function MenuBar({
6329
- menuOpen = false,
6330
- renderHeaderActions,
6331
- setMenuOpen
6332
- }) {
6333
- const back = useAppStore((s) => s.history.back);
6334
- const forward = useAppStore((s) => s.history.forward);
6335
- const hasFuture = useAppStore((s) => s.history.hasFuture());
6336
- const hasPast = useAppStore((s) => s.history.hasPast());
6337
- return /* @__PURE__ */ jsx27(
6338
- "div",
6339
- {
6340
- className: getClassName20({ menuOpen }),
6341
- onClick: (event) => {
6342
- var _a;
6343
- const element = event.target;
6344
- if (window.matchMedia("(min-width: 638px)").matches) {
6345
- return;
6346
- }
6347
- if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
6348
- setMenuOpen(false);
6349
- }
6350
- },
6351
- children: /* @__PURE__ */ jsxs13("div", { className: getClassName20("inner"), children: [
6352
- /* @__PURE__ */ jsxs13("div", { className: getClassName20("history"), children: [
6353
- /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
6354
- /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
6355
- ] }),
6356
- /* @__PURE__ */ jsx27(Fragment7, { children: renderHeaderActions && renderHeaderActions() })
6357
- ] })
6358
- }
6359
- );
6360
- }
6361
-
6362
6008
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
6363
6009
  init_react_import();
6364
- 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" };
6010
+ 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" };
6365
6011
 
6366
6012
  // components/Puck/components/Fields/index.tsx
6367
6013
  init_react_import();
6368
6014
 
6369
6015
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
6370
6016
  init_react_import();
6371
- 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" };
6017
+ 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" };
6372
6018
 
6373
6019
  // components/Puck/components/Fields/index.tsx
6374
- import { useCallback as useCallback11, useMemo as useMemo13 } from "react";
6375
- import { useShallow as useShallow4 } from "zustand/react/shallow";
6376
- import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
6377
- var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
6020
+ import { memo as memo2, useCallback as useCallback12, useMemo as useMemo13 } from "react";
6021
+ import { useShallow as useShallow5 } from "zustand/react/shallow";
6022
+ import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
6023
+ var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
6378
6024
  var DefaultFields = ({
6379
6025
  children
6380
6026
  }) => {
6381
- return /* @__PURE__ */ jsx28(Fragment8, { children });
6027
+ return /* @__PURE__ */ jsx27(Fragment7, { children });
6382
6028
  };
6383
6029
  var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
6384
6030
  let currentProps;
@@ -6438,18 +6084,19 @@ var FieldsChild = ({ fieldName }) => {
6438
6084
  return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
6439
6085
  });
6440
6086
  const permissions = useAppStore(
6441
- useShallow4((s) => {
6087
+ useShallow5((s) => {
6442
6088
  const { selectedItem, permissions: permissions2 } = s;
6443
6089
  return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
6444
6090
  })
6445
6091
  );
6446
6092
  const appStore = useAppStoreApi();
6447
- const onChange = useCallback11(createOnChange(fieldName, appStore), [
6093
+ const onChange = useCallback12(createOnChange(fieldName, appStore), [
6448
6094
  fieldName
6449
6095
  ]);
6450
- if (!field || !id) return null;
6096
+ const { visible = true } = field != null ? field : {};
6097
+ if (!field || !id || !visible) return null;
6451
6098
  if (field.type === "slot") return null;
6452
- return /* @__PURE__ */ jsx28("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx28(
6099
+ return /* @__PURE__ */ jsx27("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx27(
6453
6100
  AutoFieldPrivate,
6454
6101
  {
6455
6102
  field,
@@ -6461,14 +6108,15 @@ var FieldsChild = ({ fieldName }) => {
6461
6108
  }
6462
6109
  ) }, id);
6463
6110
  };
6464
- var Fields = ({ wrapFields = true }) => {
6111
+ var FieldsChildMemo = memo2(FieldsChild);
6112
+ var FieldsInternal = ({ wrapFields = true }) => {
6465
6113
  const overrides = useAppStore((s) => s.overrides);
6466
6114
  const componentResolving = useAppStore((s) => {
6467
6115
  var _a, _b;
6468
6116
  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;
6469
6117
  return (loadingCount != null ? loadingCount : 0) > 0;
6470
6118
  });
6471
- const itemSelector = useAppStore(useShallow4((s) => s.state.ui.itemSelector));
6119
+ const itemSelector = useAppStore(useShallow5((s) => s.state.ui.itemSelector));
6472
6120
  const id = useAppStore((s) => {
6473
6121
  var _a;
6474
6122
  return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -6477,42 +6125,48 @@ var Fields = ({ wrapFields = true }) => {
6477
6125
  useRegisterFieldsSlice(appStore, id);
6478
6126
  const fieldsLoading = useAppStore((s) => s.fields.loading);
6479
6127
  const fieldNames = useAppStore(
6480
- useShallow4((s) => Object.keys(s.fields.fields))
6128
+ useShallow5((s) => {
6129
+ if (s.fields.id === id) {
6130
+ return Object.keys(s.fields.fields);
6131
+ }
6132
+ return [];
6133
+ })
6481
6134
  );
6482
6135
  const isLoading = fieldsLoading || componentResolving;
6483
6136
  const Wrapper = useMemo13(() => overrides.fields || DefaultFields, [overrides]);
6484
- return /* @__PURE__ */ jsxs14(
6137
+ return /* @__PURE__ */ jsxs13(
6485
6138
  "form",
6486
6139
  {
6487
- className: getClassName21({ wrapFields }),
6140
+ className: getClassName20({ wrapFields }),
6488
6141
  onSubmit: (e) => {
6489
6142
  e.preventDefault();
6490
6143
  },
6491
6144
  children: [
6492
- /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx28(FieldsChild, { fieldName }, fieldName)) }),
6493
- isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
6145
+ /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx27(FieldsChildMemo, { fieldName }, fieldName)) }),
6146
+ isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
6494
6147
  ]
6495
6148
  }
6496
6149
  );
6497
6150
  };
6151
+ var Fields = memo2(FieldsInternal);
6498
6152
 
6499
6153
  // components/Puck/components/Components/index.tsx
6500
6154
  init_react_import();
6501
6155
 
6502
6156
  // lib/use-component-list.tsx
6503
6157
  init_react_import();
6504
- import { useEffect as useEffect17, useState as useState16 } from "react";
6158
+ import { useEffect as useEffect18, useState as useState16 } from "react";
6505
6159
 
6506
6160
  // components/ComponentList/index.tsx
6507
6161
  init_react_import();
6508
6162
 
6509
6163
  // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
6510
6164
  init_react_import();
6511
- 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" };
6165
+ 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" };
6512
6166
 
6513
6167
  // components/ComponentList/index.tsx
6514
- import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
6515
- var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
6168
+ import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
6169
+ var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
6516
6170
  var ComponentListItem = ({
6517
6171
  name,
6518
6172
  label
@@ -6523,7 +6177,7 @@ var ComponentListItem = ({
6523
6177
  type: name
6524
6178
  }).insert
6525
6179
  );
6526
- return /* @__PURE__ */ jsx29(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
6180
+ return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
6527
6181
  };
6528
6182
  var ComponentList = ({
6529
6183
  children,
@@ -6534,12 +6188,12 @@ var ComponentList = ({
6534
6188
  const setUi = useAppStore((s) => s.setUi);
6535
6189
  const componentList = useAppStore((s) => s.state.ui.componentList);
6536
6190
  const { expanded = true } = componentList[id] || {};
6537
- return /* @__PURE__ */ jsxs15("div", { className: getClassName22({ isExpanded: expanded }), children: [
6538
- title && /* @__PURE__ */ jsxs15(
6191
+ return /* @__PURE__ */ jsxs14("div", { className: getClassName21({ isExpanded: expanded }), children: [
6192
+ title && /* @__PURE__ */ jsxs14(
6539
6193
  "button",
6540
6194
  {
6541
6195
  type: "button",
6542
- className: getClassName22("title"),
6196
+ className: getClassName21("title"),
6543
6197
  onClick: () => setUi({
6544
6198
  componentList: __spreadProps(__spreadValues({}, componentList), {
6545
6199
  [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -6549,14 +6203,14 @@ var ComponentList = ({
6549
6203
  }),
6550
6204
  title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
6551
6205
  children: [
6552
- /* @__PURE__ */ jsx29("div", { children: title }),
6553
- /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
6206
+ /* @__PURE__ */ jsx28("div", { children: title }),
6207
+ /* @__PURE__ */ jsx28("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
6554
6208
  ]
6555
6209
  }
6556
6210
  ),
6557
- /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
6211
+ /* @__PURE__ */ jsx28("div", { className: getClassName21("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
6558
6212
  var _a;
6559
- return /* @__PURE__ */ jsx29(
6213
+ return /* @__PURE__ */ jsx28(
6560
6214
  ComponentListItem,
6561
6215
  {
6562
6216
  label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -6570,12 +6224,12 @@ var ComponentList = ({
6570
6224
  ComponentList.Item = ComponentListItem;
6571
6225
 
6572
6226
  // lib/use-component-list.tsx
6573
- import { jsx as jsx30 } from "react/jsx-runtime";
6227
+ import { jsx as jsx29 } from "react/jsx-runtime";
6574
6228
  var useComponentList = () => {
6575
6229
  const [componentList, setComponentList] = useState16();
6576
6230
  const config = useAppStore((s) => s.config);
6577
6231
  const uiComponentList = useAppStore((s) => s.state.ui.componentList);
6578
- useEffect17(() => {
6232
+ useEffect18(() => {
6579
6233
  var _a, _b, _c;
6580
6234
  if (Object.keys(uiComponentList).length > 0) {
6581
6235
  const matchedComponents = [];
@@ -6585,7 +6239,7 @@ var useComponentList = () => {
6585
6239
  if (category.visible === false || !category.components) {
6586
6240
  return null;
6587
6241
  }
6588
- return /* @__PURE__ */ jsx30(
6242
+ return /* @__PURE__ */ jsx29(
6589
6243
  ComponentList,
6590
6244
  {
6591
6245
  id: categoryKey,
@@ -6594,7 +6248,7 @@ var useComponentList = () => {
6594
6248
  var _a2;
6595
6249
  matchedComponents.push(componentName);
6596
6250
  const componentConf = config.components[componentName] || {};
6597
- return /* @__PURE__ */ jsx30(
6251
+ return /* @__PURE__ */ jsx29(
6598
6252
  ComponentList.Item,
6599
6253
  {
6600
6254
  label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -6614,7 +6268,7 @@ var useComponentList = () => {
6614
6268
  );
6615
6269
  if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
6616
6270
  _componentList.push(
6617
- /* @__PURE__ */ jsx30(
6271
+ /* @__PURE__ */ jsx29(
6618
6272
  ComponentList,
6619
6273
  {
6620
6274
  id: "other",
@@ -6622,7 +6276,7 @@ var useComponentList = () => {
6622
6276
  children: remainingComponents.map((componentName, i) => {
6623
6277
  var _a2;
6624
6278
  const componentConf = config.components[componentName] || {};
6625
- return /* @__PURE__ */ jsx30(
6279
+ return /* @__PURE__ */ jsx29(
6626
6280
  ComponentList.Item,
6627
6281
  {
6628
6282
  name: componentName,
@@ -6645,29 +6299,29 @@ var useComponentList = () => {
6645
6299
 
6646
6300
  // components/Puck/components/Components/index.tsx
6647
6301
  import { useMemo as useMemo14 } from "react";
6648
- import { jsx as jsx31 } from "react/jsx-runtime";
6302
+ import { jsx as jsx30 } from "react/jsx-runtime";
6649
6303
  var Components = () => {
6650
6304
  const overrides = useAppStore((s) => s.overrides);
6651
6305
  const componentList = useComponentList();
6652
6306
  const Wrapper = useMemo14(() => overrides.components || "div", [overrides]);
6653
- return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
6307
+ return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
6654
6308
  };
6655
6309
 
6656
6310
  // components/Puck/components/Preview/index.tsx
6657
6311
  init_react_import();
6658
- import { useCallback as useCallback12, useEffect as useEffect19, useRef as useRef5, useMemo as useMemo15 } from "react";
6312
+ import { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef6, useMemo as useMemo15 } from "react";
6659
6313
 
6660
6314
  // components/AutoFrame/index.tsx
6661
6315
  init_react_import();
6662
6316
  import {
6663
6317
  createContext as createContext5,
6664
- useContext as useContext8,
6665
- useEffect as useEffect18,
6318
+ useContext as useContext9,
6319
+ useEffect as useEffect19,
6666
6320
  useState as useState17
6667
6321
  } from "react";
6668
6322
  import hash from "object-hash";
6669
6323
  import { createPortal as createPortal3 } from "react-dom";
6670
- import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
6324
+ import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
6671
6325
  var styleSelector = 'style, link[rel="stylesheet"]';
6672
6326
  var collectStyles = (doc) => {
6673
6327
  const collected = [];
@@ -6710,7 +6364,7 @@ var CopyHostStyles = ({
6710
6364
  onStylesLoaded = () => null
6711
6365
  }) => {
6712
6366
  const { document: doc, window: win } = useFrame();
6713
- useEffect18(() => {
6367
+ useEffect19(() => {
6714
6368
  if (!win || !doc) {
6715
6369
  return () => {
6716
6370
  };
@@ -6867,10 +6521,10 @@ var CopyHostStyles = ({
6867
6521
  observer.disconnect();
6868
6522
  };
6869
6523
  }, []);
6870
- return /* @__PURE__ */ jsx32(Fragment9, { children });
6524
+ return /* @__PURE__ */ jsx31(Fragment8, { children });
6871
6525
  };
6872
6526
  var autoFrameContext = createContext5({});
6873
- var useFrame = () => useContext8(autoFrameContext);
6527
+ var useFrame = () => useContext9(autoFrameContext);
6874
6528
  function AutoFrame(_a) {
6875
6529
  var _b = _a, {
6876
6530
  children,
@@ -6895,7 +6549,7 @@ function AutoFrame(_a) {
6895
6549
  const [ctx, setCtx] = useState17({});
6896
6550
  const [mountTarget, setMountTarget] = useState17();
6897
6551
  const [stylesLoaded, setStylesLoaded] = useState17(false);
6898
- useEffect18(() => {
6552
+ useEffect19(() => {
6899
6553
  var _a2;
6900
6554
  if (frameRef.current) {
6901
6555
  const doc = frameRef.current.contentDocument;
@@ -6914,7 +6568,7 @@ function AutoFrame(_a) {
6914
6568
  }
6915
6569
  }
6916
6570
  }, [frameRef, loaded, stylesLoaded]);
6917
- return /* @__PURE__ */ jsx32(
6571
+ return /* @__PURE__ */ jsx31(
6918
6572
  "iframe",
6919
6573
  __spreadProps(__spreadValues({}, props), {
6920
6574
  className,
@@ -6924,7 +6578,7 @@ function AutoFrame(_a) {
6924
6578
  onLoad: () => {
6925
6579
  setLoaded(true);
6926
6580
  },
6927
- children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(
6581
+ children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(
6928
6582
  CopyHostStyles,
6929
6583
  {
6930
6584
  debug,
@@ -6940,14 +6594,14 @@ var AutoFrame_default = AutoFrame;
6940
6594
 
6941
6595
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
6942
6596
  init_react_import();
6943
- var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
6597
+ var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
6944
6598
 
6945
6599
  // components/Puck/components/Preview/index.tsx
6946
- import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
6947
- var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
6600
+ import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
6601
+ var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
6948
6602
  var useBubbleIframeEvents = (ref) => {
6949
6603
  const status = useAppStore((s) => s.status);
6950
- useEffect19(() => {
6604
+ useEffect20(() => {
6951
6605
  if (ref.current && status === "READY") {
6952
6606
  const iframe = ref.current;
6953
6607
  const handlePointerMove = (event) => {
@@ -6985,7 +6639,7 @@ var useBubbleIframeEvents = (ref) => {
6985
6639
  }
6986
6640
  }, [status]);
6987
6641
  };
6988
- var Preview3 = ({ id = "puck-preview" }) => {
6642
+ var Preview2 = ({ id = "puck-preview" }) => {
6989
6643
  const dispatch = useAppStore((s) => s.dispatch);
6990
6644
  const root = useAppStore((s) => s.state.data.root);
6991
6645
  const config = useAppStore((s) => s.config);
@@ -6996,22 +6650,25 @@ var Preview3 = ({ id = "puck-preview" }) => {
6996
6650
  const renderData = useAppStore(
6997
6651
  (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
6998
6652
  );
6999
- const Page = useCallback12(
6653
+ const Page = useCallback13(
7000
6654
  (pageProps) => {
7001
6655
  var _a, _b;
7002
- const rootConfig = config.root;
7003
- const propsWithSlots = useSlots(rootConfig, pageProps, DropZoneEditPure);
6656
+ const propsWithSlots = useSlots(
6657
+ config,
6658
+ { type: "root", props: pageProps },
6659
+ DropZoneEditPure
6660
+ );
7004
6661
  return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
7005
6662
  id: "puck-root"
7006
- }, propsWithSlots)) : /* @__PURE__ */ jsx33(Fragment10, { children: propsWithSlots.children });
6663
+ }, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment9, { children: propsWithSlots.children });
7007
6664
  },
7008
- [config.root]
6665
+ [config]
7009
6666
  );
7010
6667
  const Frame = useMemo15(() => overrides.iframe, [overrides]);
7011
6668
  const rootProps = root.props || root;
7012
- const ref = useRef5(null);
6669
+ const ref = useRef6(null);
7013
6670
  useBubbleIframeEvents(ref);
7014
- const inner = !renderData ? /* @__PURE__ */ jsx33(
6671
+ const inner = !renderData ? /* @__PURE__ */ jsx32(
7015
6672
  Page,
7016
6673
  __spreadProps(__spreadValues({}, rootProps), {
7017
6674
  puck: {
@@ -7021,28 +6678,28 @@ var Preview3 = ({ id = "puck-preview" }) => {
7021
6678
  metadata
7022
6679
  },
7023
6680
  editMode: true,
7024
- children: /* @__PURE__ */ jsx33(DropZonePure, { zone: rootDroppableId })
6681
+ children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
7025
6682
  })
7026
- ) : /* @__PURE__ */ jsx33(Render, { data: renderData, config });
7027
- useEffect19(() => {
6683
+ ) : /* @__PURE__ */ jsx32(Render, { data: renderData, config });
6684
+ useEffect20(() => {
7028
6685
  if (!iframe.enabled) {
7029
6686
  setStatus("READY");
7030
6687
  }
7031
6688
  }, [iframe.enabled]);
7032
- return /* @__PURE__ */ jsx33(
6689
+ return /* @__PURE__ */ jsx32(
7033
6690
  "div",
7034
6691
  {
7035
- className: getClassName23(),
6692
+ className: getClassName22(),
7036
6693
  id,
7037
6694
  "data-puck-preview": true,
7038
6695
  onClick: () => {
7039
6696
  dispatch({ type: "setUi", ui: { itemSelector: null } });
7040
6697
  },
7041
- children: iframe.enabled ? /* @__PURE__ */ jsx33(
6698
+ children: iframe.enabled ? /* @__PURE__ */ jsx32(
7042
6699
  AutoFrame_default,
7043
6700
  {
7044
6701
  id: "preview-frame",
7045
- className: getClassName23("frame"),
6702
+ className: getClassName22("frame"),
7046
6703
  "data-rfd-iframe": true,
7047
6704
  onReady: () => {
7048
6705
  setStatus("READY");
@@ -7051,18 +6708,18 @@ var Preview3 = ({ id = "puck-preview" }) => {
7051
6708
  setStatus("MOUNTED");
7052
6709
  },
7053
6710
  frameRef: ref,
7054
- children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
6711
+ children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
7055
6712
  if (Frame) {
7056
- return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
6713
+ return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
7057
6714
  }
7058
6715
  return inner;
7059
6716
  } })
7060
6717
  }
7061
- ) : /* @__PURE__ */ jsx33(
6718
+ ) : /* @__PURE__ */ jsx32(
7062
6719
  "div",
7063
6720
  {
7064
6721
  id: "preview-frame",
7065
- className: getClassName23("frame"),
6722
+ className: getClassName22("frame"),
7066
6723
  ref,
7067
6724
  "data-puck-entry": true,
7068
6725
  children: inner
@@ -7080,7 +6737,7 @@ init_react_import();
7080
6737
 
7081
6738
  // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
7082
6739
  init_react_import();
7083
- 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" };
6740
+ 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" };
7084
6741
 
7085
6742
  // lib/scroll-into-view.ts
7086
6743
  init_react_import();
@@ -7094,7 +6751,7 @@ var scrollIntoView = (el) => {
7094
6751
  };
7095
6752
 
7096
6753
  // components/LayerTree/index.tsx
7097
- import { useCallback as useCallback13, useContext as useContext9 } from "react";
6754
+ import { useCallback as useCallback14, useContext as useContext10 } from "react";
7098
6755
 
7099
6756
  // lib/on-scroll-end.ts
7100
6757
  init_react_import();
@@ -7116,21 +6773,21 @@ var onScrollEnd = (frame, cb) => {
7116
6773
  };
7117
6774
 
7118
6775
  // components/LayerTree/index.tsx
7119
- import { useShallow as useShallow5 } from "zustand/react/shallow";
7120
- import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
7121
- var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
7122
- var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
6776
+ import { useShallow as useShallow6 } from "zustand/react/shallow";
6777
+ import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
6778
+ var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
6779
+ var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
7123
6780
  var Layer = ({
7124
6781
  index,
7125
6782
  itemId,
7126
6783
  zoneCompound
7127
6784
  }) => {
7128
6785
  var _a;
7129
- const ctx = useContext9(dropZoneContext);
6786
+ const ctx = useContext10(dropZoneContext);
7130
6787
  const config = useAppStore((s) => s.config);
7131
6788
  const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
7132
6789
  const dispatch = useAppStore((s) => s.dispatch);
7133
- const setItemSelector = useCallback13(
6790
+ const setItemSelector = useCallback14(
7134
6791
  (itemSelector2) => {
7135
6792
  dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
7136
6793
  },
@@ -7143,16 +6800,18 @@ var Layer = ({
7143
6800
  const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
7144
6801
  const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
7145
6802
  const zonesForItem = useAppStore(
7146
- useShallow5(
6803
+ useShallow6(
7147
6804
  (s) => Object.keys(s.state.indexes.zones).filter(
7148
6805
  (z) => z.split(":")[0] === itemId
7149
6806
  )
7150
6807
  )
7151
6808
  );
7152
6809
  const containsZone = zonesForItem.length > 0;
7153
- const { setHoveringComponent = () => {
7154
- }, hoveringComponent } = ctx || {};
7155
- const isHovering = hoveringComponent === itemId;
6810
+ const zoneStore = useContext10(ZoneStoreContext);
6811
+ const isHovering = useContextStore(
6812
+ ZoneStoreContext,
6813
+ (s) => s.hoveringComponent === itemId
6814
+ );
7156
6815
  const childIsSelected = useAppStore((s) => {
7157
6816
  var _a2, _b;
7158
6817
  const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
@@ -7163,7 +6822,7 @@ var Layer = ({
7163
6822
  });
7164
6823
  const componentConfig = config.components[nodeData.data.type];
7165
6824
  const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
7166
- return /* @__PURE__ */ jsxs16(
6825
+ return /* @__PURE__ */ jsxs15(
7167
6826
  "li",
7168
6827
  {
7169
6828
  className: getClassNameLayer({
@@ -7173,7 +6832,7 @@ var Layer = ({
7173
6832
  childIsSelected
7174
6833
  }),
7175
6834
  children: [
7176
- /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs16(
6835
+ /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
7177
6836
  "button",
7178
6837
  {
7179
6838
  type: "button",
@@ -7188,7 +6847,10 @@ var Layer = ({
7188
6847
  `[data-puck-component="${itemId}"]`
7189
6848
  );
7190
6849
  if (!el) {
7191
- console.error("Scroll failed. No element was found for", itemId);
6850
+ setItemSelector({
6851
+ index,
6852
+ zone: zoneCompound
6853
+ });
7192
6854
  return;
7193
6855
  }
7194
6856
  scrollIntoView(el);
@@ -7199,31 +6861,31 @@ var Layer = ({
7199
6861
  });
7200
6862
  });
7201
6863
  },
7202
- onMouseOver: (e) => {
6864
+ onMouseEnter: (e) => {
7203
6865
  e.stopPropagation();
7204
- setHoveringComponent(itemId);
6866
+ zoneStore.setState({ hoveringComponent: itemId });
7205
6867
  },
7206
- onMouseOut: (e) => {
6868
+ onMouseLeave: (e) => {
7207
6869
  e.stopPropagation();
7208
- setHoveringComponent(null);
6870
+ zoneStore.setState({ hoveringComponent: null });
7209
6871
  },
7210
6872
  children: [
7211
- containsZone && /* @__PURE__ */ jsx34(
6873
+ containsZone && /* @__PURE__ */ jsx33(
7212
6874
  "div",
7213
6875
  {
7214
6876
  className: getClassNameLayer("chevron"),
7215
6877
  title: isSelected ? "Collapse" : "Expand",
7216
- children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
6878
+ children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
7217
6879
  }
7218
6880
  ),
7219
- /* @__PURE__ */ jsxs16("div", { className: getClassNameLayer("title"), children: [
7220
- /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
7221
- /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label })
6881
+ /* @__PURE__ */ jsxs15("div", { className: getClassNameLayer("title"), children: [
6882
+ /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
6883
+ /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label })
7222
6884
  ] })
7223
6885
  ]
7224
6886
  }
7225
6887
  ) }),
7226
- containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(LayerTree, { zoneCompound: subzone }) }, subzone))
6888
+ containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(LayerTree, { zoneCompound: subzone }) }, subzone))
7227
6889
  ]
7228
6890
  }
7229
6891
  );
@@ -7234,22 +6896,22 @@ var LayerTree = ({
7234
6896
  }) => {
7235
6897
  const label = _label != null ? _label : zoneCompound.split(":")[1];
7236
6898
  const contentIds = useAppStore(
7237
- useShallow5(
6899
+ useShallow6(
7238
6900
  (s) => {
7239
6901
  var _a, _b;
7240
6902
  return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
7241
6903
  }
7242
6904
  )
7243
6905
  );
7244
- return /* @__PURE__ */ jsxs16(Fragment11, { children: [
7245
- label && /* @__PURE__ */ jsxs16("div", { className: getClassName24("zoneTitle"), children: [
7246
- /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
6906
+ return /* @__PURE__ */ jsxs15(Fragment10, { children: [
6907
+ label && /* @__PURE__ */ jsxs15("div", { className: getClassName23("zoneTitle"), children: [
6908
+ /* @__PURE__ */ jsx33("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
7247
6909
  label
7248
6910
  ] }),
7249
- /* @__PURE__ */ jsxs16("ul", { className: getClassName24(), children: [
7250
- contentIds.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
6911
+ /* @__PURE__ */ jsxs15("ul", { className: getClassName23(), children: [
6912
+ contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName23("helper"), children: "No items" }),
7251
6913
  contentIds.map((itemId, i) => {
7252
- return /* @__PURE__ */ jsx34(
6914
+ return /* @__PURE__ */ jsx33(
7253
6915
  Layer,
7254
6916
  {
7255
6917
  index: i,
@@ -7275,15 +6937,15 @@ var findZonesForArea = (state, area) => {
7275
6937
  };
7276
6938
 
7277
6939
  // components/Puck/components/Outline/index.tsx
7278
- import { useShallow as useShallow6 } from "zustand/react/shallow";
7279
- import { jsx as jsx35 } from "react/jsx-runtime";
6940
+ import { useShallow as useShallow7 } from "zustand/react/shallow";
6941
+ import { jsx as jsx34 } from "react/jsx-runtime";
7280
6942
  var Outline = () => {
7281
6943
  const outlineOverride = useAppStore((s) => s.overrides.outline);
7282
6944
  const rootZones = useAppStore(
7283
- useShallow6((s) => findZonesForArea(s.state, "root"))
6945
+ useShallow7((s) => findZonesForArea(s.state, "root"))
7284
6946
  );
7285
6947
  const Wrapper = useMemo16(() => outlineOverride || "div", [outlineOverride]);
7286
- return /* @__PURE__ */ jsx35(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx35(
6948
+ return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
7287
6949
  LayerTree,
7288
6950
  {
7289
6951
  label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -7417,30 +7079,30 @@ var getBox = function getBox2(el) {
7417
7079
 
7418
7080
  // components/Puck/components/Canvas/index.tsx
7419
7081
  import {
7420
- useCallback as useCallback14,
7421
- useEffect as useEffect21,
7082
+ useCallback as useCallback15,
7083
+ useEffect as useEffect22,
7422
7084
  useMemo as useMemo18,
7423
- useRef as useRef6,
7085
+ useRef as useRef7,
7424
7086
  useState as useState19
7425
7087
  } from "react";
7426
7088
 
7427
7089
  // components/ViewportControls/index.tsx
7428
7090
  init_react_import();
7429
- import { useEffect as useEffect20, useMemo as useMemo17, useState as useState18 } from "react";
7091
+ import { useEffect as useEffect21, useMemo as useMemo17, useState as useState18 } from "react";
7430
7092
 
7431
7093
  // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
7432
7094
  init_react_import();
7433
- 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" };
7095
+ 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" };
7434
7096
 
7435
7097
  // components/ViewportControls/index.tsx
7436
- import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
7098
+ import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
7437
7099
  var icons = {
7438
- Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
7439
- Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
7440
- Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
7100
+ Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
7101
+ Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
7102
+ Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
7441
7103
  };
7442
- var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
7443
- var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
7104
+ var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
7105
+ var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
7444
7106
  var ViewportButton = ({
7445
7107
  children,
7446
7108
  height = "auto",
@@ -7450,10 +7112,10 @@ var ViewportButton = ({
7450
7112
  }) => {
7451
7113
  const viewports = useAppStore((s) => s.state.ui.viewports);
7452
7114
  const [isActive, setIsActive] = useState18(false);
7453
- useEffect20(() => {
7115
+ useEffect21(() => {
7454
7116
  setIsActive(width === viewports.current.width);
7455
7117
  }, [width, viewports.current.width]);
7456
- return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
7118
+ return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
7457
7119
  IconButton,
7458
7120
  {
7459
7121
  title,
@@ -7462,7 +7124,7 @@ var ViewportButton = ({
7462
7124
  e.stopPropagation();
7463
7125
  onClick({ width, height });
7464
7126
  },
7465
- children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
7127
+ children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
7466
7128
  }
7467
7129
  ) });
7468
7130
  };
@@ -7498,8 +7160,8 @@ var ViewportControls = ({
7498
7160
  ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
7499
7161
  [autoZoom]
7500
7162
  );
7501
- return /* @__PURE__ */ jsxs17("div", { className: getClassName25(), children: [
7502
- viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
7163
+ return /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
7164
+ viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
7503
7165
  ViewportButton,
7504
7166
  {
7505
7167
  height: viewport.height,
@@ -7510,8 +7172,8 @@ var ViewportControls = ({
7510
7172
  },
7511
7173
  i
7512
7174
  )),
7513
- /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
7514
- /* @__PURE__ */ jsx36(
7175
+ /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
7176
+ /* @__PURE__ */ jsx35(
7515
7177
  IconButton,
7516
7178
  {
7517
7179
  title: "Zoom viewport out",
@@ -7525,10 +7187,10 @@ var ViewportControls = ({
7525
7187
  )].value
7526
7188
  );
7527
7189
  },
7528
- children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
7190
+ children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
7529
7191
  }
7530
7192
  ),
7531
- /* @__PURE__ */ jsx36(
7193
+ /* @__PURE__ */ jsx35(
7532
7194
  IconButton,
7533
7195
  {
7534
7196
  title: "Zoom viewport in",
@@ -7542,19 +7204,19 @@ var ViewportControls = ({
7542
7204
  )].value
7543
7205
  );
7544
7206
  },
7545
- children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
7207
+ children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
7546
7208
  }
7547
7209
  ),
7548
- /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
7549
- /* @__PURE__ */ jsx36(
7210
+ /* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
7211
+ /* @__PURE__ */ jsx35(
7550
7212
  "select",
7551
7213
  {
7552
- className: getClassName25("zoomSelect"),
7214
+ className: getClassName24("zoomSelect"),
7553
7215
  value: zoom.toString(),
7554
7216
  onChange: (e) => {
7555
7217
  onZoom(parseFloat(e.currentTarget.value));
7556
7218
  },
7557
- children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
7219
+ children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
7558
7220
  "option",
7559
7221
  {
7560
7222
  value: option.value,
@@ -7569,7 +7231,7 @@ var ViewportControls = ({
7569
7231
 
7570
7232
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
7571
7233
  init_react_import();
7572
- 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" };
7234
+ 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" };
7573
7235
 
7574
7236
  // lib/get-zoom-config.ts
7575
7237
  init_react_import();
@@ -7602,9 +7264,9 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
7602
7264
  };
7603
7265
 
7604
7266
  // components/Puck/components/Canvas/index.tsx
7605
- import { useShallow as useShallow7 } from "zustand/react/shallow";
7606
- import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
7607
- var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
7267
+ import { useShallow as useShallow8 } from "zustand/react/shallow";
7268
+ import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
7269
+ var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
7608
7270
  var ZOOM_ON_CHANGE = true;
7609
7271
  var Canvas = () => {
7610
7272
  const {
@@ -7616,7 +7278,7 @@ var Canvas = () => {
7616
7278
  status,
7617
7279
  iframe
7618
7280
  } = useAppStore(
7619
- useShallow7((s) => ({
7281
+ useShallow8((s) => ({
7620
7282
  dispatch: s.dispatch,
7621
7283
  overrides: s.overrides,
7622
7284
  setUi: s.setUi,
@@ -7627,23 +7289,23 @@ var Canvas = () => {
7627
7289
  }))
7628
7290
  );
7629
7291
  const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
7630
- useShallow7((s) => ({
7292
+ useShallow8((s) => ({
7631
7293
  leftSideBarVisible: s.state.ui.leftSideBarVisible,
7632
7294
  rightSideBarVisible: s.state.ui.rightSideBarVisible,
7633
7295
  viewports: s.state.ui.viewports
7634
7296
  }))
7635
7297
  );
7636
- const frameRef = useRef6(null);
7298
+ const frameRef = useRef7(null);
7637
7299
  const [showTransition, setShowTransition] = useState19(false);
7638
7300
  const defaultRender = useMemo18(() => {
7639
- const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
7301
+ const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment11, { children });
7640
7302
  return PuckDefault;
7641
7303
  }, []);
7642
7304
  const CustomPreview = useMemo18(
7643
7305
  () => overrides.preview || defaultRender,
7644
7306
  [overrides]
7645
7307
  );
7646
- const getFrameDimensions = useCallback14(() => {
7308
+ const getFrameDimensions = useCallback15(() => {
7647
7309
  if (frameRef.current) {
7648
7310
  const frame = frameRef.current;
7649
7311
  const box = getBox(frame);
@@ -7651,7 +7313,7 @@ var Canvas = () => {
7651
7313
  }
7652
7314
  return { width: 0, height: 0 };
7653
7315
  }, [frameRef]);
7654
- const resetAutoZoom = useCallback14(
7316
+ const resetAutoZoom = useCallback15(
7655
7317
  (newViewports = viewports) => {
7656
7318
  if (frameRef.current) {
7657
7319
  setZoomConfig(
@@ -7665,11 +7327,11 @@ var Canvas = () => {
7665
7327
  },
7666
7328
  [frameRef, zoomConfig, viewports]
7667
7329
  );
7668
- useEffect21(() => {
7330
+ useEffect22(() => {
7669
7331
  setShowTransition(false);
7670
7332
  resetAutoZoom(viewports);
7671
7333
  }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
7672
- useEffect21(() => {
7334
+ useEffect22(() => {
7673
7335
  const { height: frameHeight } = getFrameDimensions();
7674
7336
  if (viewports.current.height === "auto") {
7675
7337
  setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7677,13 +7339,13 @@ var Canvas = () => {
7677
7339
  }));
7678
7340
  }
7679
7341
  }, [zoomConfig.zoom]);
7680
- useEffect21(() => {
7342
+ useEffect22(() => {
7681
7343
  if (ZOOM_ON_CHANGE) {
7682
7344
  setShowTransition(true);
7683
7345
  resetAutoZoom(viewports);
7684
7346
  }
7685
7347
  }, [viewports.current.width]);
7686
- useEffect21(() => {
7348
+ useEffect22(() => {
7687
7349
  const cb = () => {
7688
7350
  setShowTransition(false);
7689
7351
  resetAutoZoom();
@@ -7694,15 +7356,15 @@ var Canvas = () => {
7694
7356
  };
7695
7357
  }, []);
7696
7358
  const [showLoader, setShowLoader] = useState19(false);
7697
- useEffect21(() => {
7359
+ useEffect22(() => {
7698
7360
  setTimeout(() => {
7699
7361
  setShowLoader(true);
7700
7362
  }, 500);
7701
7363
  }, []);
7702
- return /* @__PURE__ */ jsxs18(
7364
+ return /* @__PURE__ */ jsxs17(
7703
7365
  "div",
7704
7366
  {
7705
- className: getClassName26({
7367
+ className: getClassName25({
7706
7368
  ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
7707
7369
  showLoader
7708
7370
  }),
@@ -7712,7 +7374,7 @@ var Canvas = () => {
7712
7374
  recordHistory: true
7713
7375
  }),
7714
7376
  children: [
7715
- viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
7377
+ viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName25("controls"), children: /* @__PURE__ */ jsx36(
7716
7378
  ViewportControls,
7717
7379
  {
7718
7380
  autoZoom: zoomConfig.autoZoom,
@@ -7738,11 +7400,11 @@ var Canvas = () => {
7738
7400
  }
7739
7401
  }
7740
7402
  ) }),
7741
- /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), ref: frameRef, children: [
7742
- /* @__PURE__ */ jsx37(
7403
+ /* @__PURE__ */ jsxs17("div", { className: getClassName25("inner"), ref: frameRef, children: [
7404
+ /* @__PURE__ */ jsx36(
7743
7405
  "div",
7744
7406
  {
7745
- className: getClassName26("root"),
7407
+ className: getClassName25("root"),
7746
7408
  style: {
7747
7409
  width: iframe.enabled ? viewports.current.width : "100%",
7748
7410
  height: zoomConfig.rootHeight,
@@ -7760,10 +7422,10 @@ var Canvas = () => {
7760
7422
  })
7761
7423
  );
7762
7424
  },
7763
- children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview3, {}) })
7425
+ children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview2, {}) })
7764
7426
  }
7765
7427
  ),
7766
- /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
7428
+ /* @__PURE__ */ jsx36("div", { className: getClassName25("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
7767
7429
  ] })
7768
7430
  ]
7769
7431
  }
@@ -7818,19 +7480,19 @@ var useLoadedOverrides = ({
7818
7480
 
7819
7481
  // components/DefaultOverride/index.tsx
7820
7482
  init_react_import();
7821
- import { Fragment as Fragment13, jsx as jsx38 } from "react/jsx-runtime";
7822
- var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment13, { children });
7483
+ import { Fragment as Fragment12, jsx as jsx37 } from "react/jsx-runtime";
7484
+ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
7823
7485
 
7824
7486
  // lib/use-inject-css.ts
7825
7487
  init_react_import();
7826
- import { useEffect as useEffect22, useState as useState20 } from "react";
7488
+ import { useEffect as useEffect23, useState as useState20 } from "react";
7827
7489
  var styles = ``;
7828
7490
  var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
7829
7491
  const [el, setEl] = useState20();
7830
- useEffect22(() => {
7492
+ useEffect23(() => {
7831
7493
  setEl(document.createElement("style"));
7832
7494
  }, []);
7833
- useEffect22(() => {
7495
+ useEffect23(() => {
7834
7496
  var _a;
7835
7497
  if (!el || typeof window === "undefined") {
7836
7498
  return;
@@ -7850,10 +7512,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
7850
7512
 
7851
7513
  // lib/use-preview-mode-hotkeys.ts
7852
7514
  init_react_import();
7853
- import { useCallback as useCallback15 } from "react";
7515
+ import { useCallback as useCallback16 } from "react";
7854
7516
  var usePreviewModeHotkeys = () => {
7855
7517
  const appStore = useAppStoreApi();
7856
- const toggleInteractive = useCallback15(() => {
7518
+ const toggleInteractive = useCallback16(() => {
7857
7519
  const dispatch = appStore.getState().dispatch;
7858
7520
  dispatch({
7859
7521
  type: "setUi",
@@ -7868,7 +7530,7 @@ var usePreviewModeHotkeys = () => {
7868
7530
 
7869
7531
  // lib/use-puck.ts
7870
7532
  init_react_import();
7871
- import { createContext as createContext6, useContext as useContext10, useEffect as useEffect23, useState as useState21 } from "react";
7533
+ import { createContext as createContext6, useContext as useContext11, useEffect as useEffect24, useState as useState21 } from "react";
7872
7534
  import { createStore as createStore4, useStore as useStore3 } from "zustand";
7873
7535
  var generateUsePuck = (store) => {
7874
7536
  const history = {
@@ -7921,7 +7583,7 @@ var useRegisterUsePuckStore = (appStore) => {
7921
7583
  () => generateUsePuck(convertToPickedStore(appStore.getState()))
7922
7584
  )
7923
7585
  );
7924
- useEffect23(() => {
7586
+ useEffect24(() => {
7925
7587
  return appStore.subscribe(
7926
7588
  (store) => convertToPickedStore(store),
7927
7589
  (pickedStore) => {
@@ -7933,7 +7595,7 @@ var useRegisterUsePuckStore = (appStore) => {
7933
7595
  };
7934
7596
  function createUsePuck() {
7935
7597
  return function usePuck2(selector) {
7936
- const usePuckApi = useContext10(UsePuckStoreContext);
7598
+ const usePuckApi = useContext11(UsePuckStoreContext);
7937
7599
  if (!usePuckApi) {
7938
7600
  throw new Error("usePuck must be used inside <Puck>.");
7939
7601
  }
@@ -7945,32 +7607,255 @@ function createUsePuck() {
7945
7607
  };
7946
7608
  }
7947
7609
  function usePuck() {
7948
- useEffect23(() => {
7610
+ useEffect24(() => {
7949
7611
  console.warn(
7950
7612
  "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."
7951
7613
  );
7952
7614
  }, []);
7953
7615
  return createUsePuck()((s) => s);
7954
7616
  }
7617
+ function useGetPuck() {
7618
+ const usePuckApi = useContext11(UsePuckStoreContext);
7619
+ if (!usePuckApi) {
7620
+ throw new Error("usePuckGet must be used inside <Puck>.");
7621
+ }
7622
+ return usePuckApi.getState;
7623
+ }
7955
7624
 
7956
7625
  // components/Puck/index.tsx
7957
- import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
7958
- var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
7959
- var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
7960
- var FieldSideBar = () => {
7961
- const title = useAppStore(
7962
- (s) => {
7963
- var _a, _b;
7964
- return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
7965
- }
7966
- );
7967
- return /* @__PURE__ */ jsx39(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx39(Fields, {}) });
7968
- };
7969
- var propsContext = createContext7({});
7626
+ import fdeq from "fast-deep-equal";
7627
+
7628
+ // components/Puck/components/Header/index.tsx
7629
+ init_react_import();
7630
+ import { memo as memo3, useCallback as useCallback17, useMemo as useMemo20, useState as useState22 } from "react";
7631
+
7632
+ // components/MenuBar/index.tsx
7633
+ init_react_import();
7634
+
7635
+ // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
7636
+ init_react_import();
7637
+ 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" };
7638
+
7639
+ // components/MenuBar/index.tsx
7640
+ import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
7641
+ var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
7642
+ function MenuBar({
7643
+ menuOpen = false,
7644
+ renderHeaderActions,
7645
+ setMenuOpen
7646
+ }) {
7647
+ const back = useAppStore((s) => s.history.back);
7648
+ const forward = useAppStore((s) => s.history.forward);
7649
+ const hasFuture = useAppStore((s) => s.history.hasFuture());
7650
+ const hasPast = useAppStore((s) => s.history.hasPast());
7651
+ return /* @__PURE__ */ jsx38(
7652
+ "div",
7653
+ {
7654
+ className: getClassName26({ menuOpen }),
7655
+ onClick: (event) => {
7656
+ var _a;
7657
+ const element = event.target;
7658
+ if (window.matchMedia("(min-width: 638px)").matches) {
7659
+ return;
7660
+ }
7661
+ if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
7662
+ setMenuOpen(false);
7663
+ }
7664
+ },
7665
+ children: /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), children: [
7666
+ /* @__PURE__ */ jsxs18("div", { className: getClassName26("history"), children: [
7667
+ /* @__PURE__ */ jsx38(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx38(Undo2, { size: 21 }) }),
7668
+ /* @__PURE__ */ jsx38(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx38(Redo2, { size: 21 }) })
7669
+ ] }),
7670
+ /* @__PURE__ */ jsx38(Fragment13, { children: renderHeaderActions && renderHeaderActions() })
7671
+ ] })
7672
+ }
7673
+ );
7674
+ }
7675
+
7676
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
7677
+ init_react_import();
7678
+ 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" };
7679
+
7680
+ // components/Puck/components/Header/index.tsx
7681
+ import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
7682
+ var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
7683
+ var HeaderInner = () => {
7684
+ const {
7685
+ onPublish,
7686
+ renderHeader,
7687
+ renderHeaderActions,
7688
+ headerTitle,
7689
+ headerPath,
7690
+ iframe: _iframe
7691
+ } = usePropsContext();
7692
+ const dispatch = useAppStore((s) => s.dispatch);
7693
+ const appStore = useAppStoreApi();
7694
+ const defaultHeaderRender = useMemo20(() => {
7695
+ if (renderHeader) {
7696
+ console.warn(
7697
+ "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
7698
+ );
7699
+ const RenderHeader = (_a) => {
7700
+ var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
7701
+ const Comp = renderHeader;
7702
+ const appState = useAppStore((s) => s.state);
7703
+ return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
7704
+ };
7705
+ return RenderHeader;
7706
+ }
7707
+ return DefaultOverride;
7708
+ }, [renderHeader]);
7709
+ const defaultHeaderActionsRender = useMemo20(() => {
7710
+ if (renderHeaderActions) {
7711
+ console.warn(
7712
+ "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
7713
+ );
7714
+ const RenderHeader = (props) => {
7715
+ const Comp = renderHeaderActions;
7716
+ const appState = useAppStore((s) => s.state);
7717
+ return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
7718
+ };
7719
+ return RenderHeader;
7720
+ }
7721
+ return DefaultOverride;
7722
+ }, [renderHeader]);
7723
+ const CustomHeader = useAppStore(
7724
+ (s) => s.overrides.header || defaultHeaderRender
7725
+ );
7726
+ const CustomHeaderActions = useAppStore(
7727
+ (s) => s.overrides.headerActions || defaultHeaderActionsRender
7728
+ );
7729
+ const [menuOpen, setMenuOpen] = useState22(false);
7730
+ const rootTitle = useAppStore((s) => {
7731
+ var _a, _b;
7732
+ const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
7733
+ return (_b = rootData.props.title) != null ? _b : "";
7734
+ });
7735
+ const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
7736
+ const rightSideBarVisible = useAppStore(
7737
+ (s) => s.state.ui.rightSideBarVisible
7738
+ );
7739
+ const toggleSidebars = useCallback17(
7740
+ (sidebar) => {
7741
+ const widerViewport = window.matchMedia("(min-width: 638px)").matches;
7742
+ const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
7743
+ const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
7744
+ dispatch({
7745
+ type: "setUi",
7746
+ ui: __spreadValues({
7747
+ [`${sidebar}SideBarVisible`]: !sideBarVisible
7748
+ }, !widerViewport ? { [oppositeSideBar]: false } : {})
7749
+ });
7750
+ },
7751
+ [dispatch, leftSideBarVisible, rightSideBarVisible]
7752
+ );
7753
+ return /* @__PURE__ */ jsx39(
7754
+ CustomHeader,
7755
+ {
7756
+ actions: /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
7757
+ Button,
7758
+ {
7759
+ onClick: () => {
7760
+ const data = appStore.getState().state.data;
7761
+ onPublish && onPublish(data);
7762
+ },
7763
+ icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
7764
+ children: "Publish"
7765
+ }
7766
+ ) }) }),
7767
+ children: /* @__PURE__ */ jsx39(
7768
+ "header",
7769
+ {
7770
+ className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
7771
+ children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), children: [
7772
+ /* @__PURE__ */ jsxs19("div", { className: getClassName27("toggle"), children: [
7773
+ /* @__PURE__ */ jsx39("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx39(
7774
+ IconButton,
7775
+ {
7776
+ onClick: () => {
7777
+ toggleSidebars("left");
7778
+ },
7779
+ title: "Toggle left sidebar",
7780
+ children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
7781
+ }
7782
+ ) }),
7783
+ /* @__PURE__ */ jsx39("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx39(
7784
+ IconButton,
7785
+ {
7786
+ onClick: () => {
7787
+ toggleSidebars("right");
7788
+ },
7789
+ title: "Toggle right sidebar",
7790
+ children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
7791
+ }
7792
+ ) })
7793
+ ] }),
7794
+ /* @__PURE__ */ jsx39("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
7795
+ headerTitle || rootTitle || "Page",
7796
+ headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
7797
+ " ",
7798
+ /* @__PURE__ */ jsx39("code", { className: getClassName27("path"), children: headerPath })
7799
+ ] })
7800
+ ] }) }),
7801
+ /* @__PURE__ */ jsxs19("div", { className: getClassName27("tools"), children: [
7802
+ /* @__PURE__ */ jsx39("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx39(
7803
+ IconButton,
7804
+ {
7805
+ onClick: () => {
7806
+ return setMenuOpen(!menuOpen);
7807
+ },
7808
+ title: "Toggle menu bar",
7809
+ children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
7810
+ }
7811
+ ) }),
7812
+ /* @__PURE__ */ jsx39(
7813
+ MenuBar,
7814
+ {
7815
+ dispatch,
7816
+ onPublish,
7817
+ menuOpen,
7818
+ renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
7819
+ Button,
7820
+ {
7821
+ onClick: () => {
7822
+ const data = appStore.getState().state.data;
7823
+ onPublish && onPublish(data);
7824
+ },
7825
+ icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
7826
+ children: "Publish"
7827
+ }
7828
+ ) }),
7829
+ setMenuOpen
7830
+ }
7831
+ )
7832
+ ] })
7833
+ ] })
7834
+ }
7835
+ )
7836
+ }
7837
+ );
7838
+ };
7839
+ var Header = memo3(HeaderInner);
7840
+
7841
+ // components/Puck/index.tsx
7842
+ import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
7843
+ var getClassName28 = get_class_name_factory_default("Puck", styles_module_default14);
7844
+ var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
7845
+ var FieldSideBar = () => {
7846
+ const title = useAppStore(
7847
+ (s) => {
7848
+ var _a, _b;
7849
+ return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
7850
+ }
7851
+ );
7852
+ return /* @__PURE__ */ jsx40(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx40(Fields, {}) });
7853
+ };
7854
+ var propsContext = createContext7({});
7970
7855
  function PropsProvider(props) {
7971
- return /* @__PURE__ */ jsx39(propsContext.Provider, { value: props, children: props.children });
7856
+ return /* @__PURE__ */ jsx40(propsContext.Provider, { value: props, children: props.children });
7972
7857
  }
7973
- var usePropsContext = () => useContext11(propsContext);
7858
+ var usePropsContext = () => useContext12(propsContext);
7974
7859
  function PuckProvider({ children }) {
7975
7860
  const {
7976
7861
  config,
@@ -7986,11 +7871,14 @@ function PuckProvider({ children }) {
7986
7871
  metadata,
7987
7872
  onAction
7988
7873
  } = usePropsContext();
7989
- const iframe = __spreadValues({
7990
- enabled: true,
7991
- waitForStyles: true
7992
- }, _iframe);
7993
- const [generatedAppState] = useState22(() => {
7874
+ const iframe = useMemo21(
7875
+ () => __spreadValues({
7876
+ enabled: true,
7877
+ waitForStyles: true
7878
+ }, _iframe),
7879
+ [_iframe]
7880
+ );
7881
+ const [generatedAppState] = useState23(() => {
7994
7882
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
7995
7883
  const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
7996
7884
  let clientUiState = {};
@@ -8050,7 +7938,7 @@ function PuckProvider({ children }) {
8050
7938
  return walkAppState(newAppState, config);
8051
7939
  });
8052
7940
  const { appendData = true } = _initialHistory || {};
8053
- const [blendedHistories] = useState22(
7941
+ const [blendedHistories] = useState23(
8054
7942
  [
8055
7943
  ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
8056
7944
  ...appendData ? [{ state: generatedAppState }] : []
@@ -8070,7 +7958,7 @@ function PuckProvider({ children }) {
8070
7958
  overrides,
8071
7959
  plugins
8072
7960
  });
8073
- const generateAppStore = useCallback16(
7961
+ const generateAppStore = useCallback18(
8074
7962
  (state) => {
8075
7963
  return {
8076
7964
  state,
@@ -8094,10 +7982,15 @@ function PuckProvider({ children }) {
8094
7982
  metadata
8095
7983
  ]
8096
7984
  );
8097
- const [appStore] = useState22(
7985
+ const [appStore] = useState23(
8098
7986
  () => createAppStore(generateAppStore(initialAppState))
8099
7987
  );
8100
- useEffect24(() => {
7988
+ useEffect25(() => {
7989
+ if (process.env.NODE_ENV !== "production") {
7990
+ window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
7991
+ }
7992
+ }, [appStore]);
7993
+ useEffect25(() => {
8101
7994
  const state = appStore.getState().state;
8102
7995
  appStore.setState(__spreadValues({}, generateAppStore(state)));
8103
7996
  }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8106,66 +7999,47 @@ function PuckProvider({ children }) {
8106
7999
  index: initialHistoryIndex,
8107
8000
  initialAppState
8108
8001
  });
8109
- useEffect24(() => {
8110
- appStore.subscribe((s) => {
8111
- if (onChange) onChange(s.state.data);
8112
- });
8002
+ const previousData = useRef8(null);
8003
+ useEffect25(() => {
8004
+ appStore.subscribe(
8005
+ (s) => s.state.data,
8006
+ (data) => {
8007
+ if (onChange) {
8008
+ if (fdeq(data, previousData.current)) return;
8009
+ onChange(data);
8010
+ previousData.current = data;
8011
+ }
8012
+ }
8013
+ );
8113
8014
  }, []);
8114
8015
  useRegisterPermissionsSlice(appStore, permissions);
8115
8016
  const uPuckStore = useRegisterUsePuckStore(appStore);
8116
- useEffect24(() => {
8017
+ useEffect25(() => {
8117
8018
  const { resolveAndCommitData } = appStore.getState();
8118
8019
  resolveAndCommitData();
8119
8020
  }, []);
8120
- return /* @__PURE__ */ jsx39(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx39(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
8021
+ return /* @__PURE__ */ jsx40(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx40(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
8121
8022
  }
8122
8023
  function PuckLayout({ children }) {
8123
8024
  const {
8124
- onChange,
8125
- onPublish,
8126
- renderHeader,
8127
- renderHeaderActions,
8128
- headerTitle,
8129
- headerPath,
8130
8025
  iframe: _iframe,
8131
8026
  dnd,
8132
8027
  initialHistory: _initialHistory
8133
8028
  } = usePropsContext();
8134
- const iframe = __spreadValues({
8135
- enabled: true,
8136
- waitForStyles: true
8137
- }, _iframe);
8029
+ const iframe = useMemo21(
8030
+ () => __spreadValues({
8031
+ enabled: true,
8032
+ waitForStyles: true
8033
+ }, _iframe),
8034
+ [_iframe]
8035
+ );
8138
8036
  useInjectGlobalCss(iframe.enabled);
8139
8037
  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
8140
8038
  const rightSideBarVisible = useAppStore(
8141
8039
  (s) => s.state.ui.rightSideBarVisible
8142
8040
  );
8143
- const [menuOpen, setMenuOpen] = useState22(false);
8144
- const appStore = useAppStoreApi();
8145
- useEffect24(() => {
8146
- return appStore.subscribe((s) => {
8147
- if (onChange) onChange(s.state.data);
8148
- });
8149
- }, [appStore]);
8150
- const rootProps = useAppStore(
8151
- (s) => s.state.data.root.props || s.state.data.root.props
8152
- );
8153
8041
  const dispatch = useAppStore((s) => s.dispatch);
8154
- const toggleSidebars = useCallback16(
8155
- (sidebar) => {
8156
- const widerViewport = window.matchMedia("(min-width: 638px)").matches;
8157
- const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
8158
- const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
8159
- dispatch({
8160
- type: "setUi",
8161
- ui: __spreadValues({
8162
- [`${sidebar}SideBarVisible`]: !sideBarVisible
8163
- }, !widerViewport ? { [oppositeSideBar]: false } : {})
8164
- });
8165
- },
8166
- [dispatch, leftSideBarVisible, rightSideBarVisible]
8167
- );
8168
- useEffect24(() => {
8042
+ useEffect25(() => {
8169
8043
  if (!window.matchMedia("(min-width: 638px)").matches) {
8170
8044
  dispatch({
8171
8045
  type: "setUi",
@@ -8188,55 +8062,18 @@ function PuckLayout({ children }) {
8188
8062
  window.removeEventListener("resize", handleResize);
8189
8063
  };
8190
8064
  }, []);
8191
- const defaultHeaderRender = useMemo20(() => {
8192
- if (renderHeader) {
8193
- console.warn(
8194
- "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
8195
- );
8196
- const RenderHeader = (_a) => {
8197
- var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
8198
- const Comp = renderHeader;
8199
- const appState = useAppStore((s) => s.state);
8200
- return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
8201
- };
8202
- return RenderHeader;
8203
- }
8204
- return DefaultOverride;
8205
- }, [renderHeader]);
8206
- const defaultHeaderActionsRender = useMemo20(() => {
8207
- if (renderHeaderActions) {
8208
- console.warn(
8209
- "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
8210
- );
8211
- const RenderHeader = (props) => {
8212
- const Comp = renderHeaderActions;
8213
- const appState = useAppStore((s) => s.state);
8214
- return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
8215
- };
8216
- return RenderHeader;
8217
- }
8218
- return DefaultOverride;
8219
- }, [renderHeader]);
8220
8065
  const overrides = useAppStore((s) => s.overrides);
8221
- const CustomPuck = useMemo20(
8066
+ const CustomPuck = useMemo21(
8222
8067
  () => overrides.puck || DefaultOverride,
8223
8068
  [overrides]
8224
8069
  );
8225
- const CustomHeader = useMemo20(
8226
- () => overrides.header || defaultHeaderRender,
8227
- [overrides]
8228
- );
8229
- const CustomHeaderActions = useMemo20(
8230
- () => overrides.headerActions || defaultHeaderActionsRender,
8231
- [overrides]
8232
- );
8233
- const [mounted, setMounted] = useState22(false);
8234
- useEffect24(() => {
8070
+ const [mounted, setMounted] = useState23(false);
8071
+ useEffect25(() => {
8235
8072
  setMounted(true);
8236
8073
  }, []);
8237
8074
  const ready = useAppStore((s) => s.status === "READY");
8238
8075
  useMonitorHotkeys();
8239
- useEffect24(() => {
8076
+ useEffect25(() => {
8240
8077
  if (ready && iframe.enabled) {
8241
8078
  const frameDoc = getFrame();
8242
8079
  if (frameDoc) {
@@ -8245,213 +8082,36 @@ function PuckLayout({ children }) {
8245
8082
  }
8246
8083
  }, [ready, iframe.enabled]);
8247
8084
  usePreviewModeHotkeys();
8248
- return /* @__PURE__ */ jsxs19("div", { className: `Puck ${getClassName27()}`, children: [
8249
- /* @__PURE__ */ jsx39(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
8085
+ return /* @__PURE__ */ jsxs20("div", { className: `Puck ${getClassName28()}`, children: [
8086
+ /* @__PURE__ */ jsx40(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx40(CustomPuck, { children: children || /* @__PURE__ */ jsx40(
8250
8087
  "div",
8251
8088
  {
8252
8089
  className: getLayoutClassName({
8253
8090
  leftSideBarVisible,
8254
- menuOpen,
8255
8091
  mounted,
8256
8092
  rightSideBarVisible
8257
8093
  }),
8258
- children: /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("inner"), children: [
8259
- /* @__PURE__ */ jsx39(
8260
- CustomHeader,
8261
- {
8262
- actions: /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
8263
- Button,
8264
- {
8265
- onClick: () => {
8266
- const data = appStore.getState().state.data;
8267
- onPublish && onPublish(data);
8268
- },
8269
- icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
8270
- children: "Publish"
8271
- }
8272
- ) }) }),
8273
- children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerInner"), children: [
8274
- /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerToggle"), children: [
8275
- /* @__PURE__ */ jsx39(
8276
- "div",
8277
- {
8278
- className: getLayoutClassName("leftSideBarToggle"),
8279
- children: /* @__PURE__ */ jsx39(
8280
- IconButton,
8281
- {
8282
- onClick: () => {
8283
- toggleSidebars("left");
8284
- },
8285
- title: "Toggle left sidebar",
8286
- children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
8287
- }
8288
- )
8289
- }
8290
- ),
8291
- /* @__PURE__ */ jsx39(
8292
- "div",
8293
- {
8294
- className: getLayoutClassName("rightSideBarToggle"),
8295
- children: /* @__PURE__ */ jsx39(
8296
- IconButton,
8297
- {
8298
- onClick: () => {
8299
- toggleSidebars("right");
8300
- },
8301
- title: "Toggle right sidebar",
8302
- children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
8303
- }
8304
- )
8305
- }
8306
- )
8307
- ] }),
8308
- /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
8309
- headerTitle || (rootProps == null ? void 0 : rootProps.title) || "Page",
8310
- headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
8311
- " ",
8312
- /* @__PURE__ */ jsx39(
8313
- "code",
8314
- {
8315
- className: getLayoutClassName("headerPath"),
8316
- children: headerPath
8317
- }
8318
- )
8319
- ] })
8320
- ] }) }),
8321
- /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerTools"), children: [
8322
- /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx39(
8323
- IconButton,
8324
- {
8325
- onClick: () => {
8326
- return setMenuOpen(!menuOpen);
8327
- },
8328
- title: "Toggle menu bar",
8329
- children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
8330
- }
8331
- ) }),
8332
- /* @__PURE__ */ jsx39(
8333
- MenuBar,
8334
- {
8335
- dispatch,
8336
- onPublish,
8337
- menuOpen,
8338
- renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
8339
- Button,
8340
- {
8341
- onClick: () => {
8342
- const data = appStore.getState().state.data;
8343
- onPublish && onPublish(data);
8344
- },
8345
- icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
8346
- children: "Publish"
8347
- }
8348
- ) }),
8349
- setMenuOpen
8350
- }
8351
- )
8352
- ] })
8353
- ] }) })
8354
- }
8355
- ),
8356
- /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("leftSideBar"), children: [
8357
- /* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
8358
- /* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
8094
+ children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("inner"), children: [
8095
+ /* @__PURE__ */ jsx40(Header, {}),
8096
+ /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("leftSideBar"), children: [
8097
+ /* @__PURE__ */ jsx40(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx40(Components, {}) }),
8098
+ /* @__PURE__ */ jsx40(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx40(Outline, {}) })
8359
8099
  ] }),
8360
- /* @__PURE__ */ jsx39(Canvas, {}),
8361
- /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx39(FieldSideBar, {}) })
8100
+ /* @__PURE__ */ jsx40(Canvas, {}),
8101
+ /* @__PURE__ */ jsx40("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx40(FieldSideBar, {}) })
8362
8102
  ] })
8363
8103
  }
8364
8104
  ) }) }),
8365
- /* @__PURE__ */ jsx39("div", { id: "puck-portal-root", className: getClassName27("portal") })
8105
+ /* @__PURE__ */ jsx40("div", { id: "puck-portal-root", className: getClassName28("portal") })
8366
8106
  ] });
8367
8107
  }
8368
8108
  function Puck(props) {
8369
- return /* @__PURE__ */ jsx39(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx39(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx39(PuckLayout, __spreadValues({}, props)) })) }));
8109
+ return /* @__PURE__ */ jsx40(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx40(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx40(PuckLayout, __spreadValues({}, props)) })) }));
8370
8110
  }
8371
8111
  Puck.Components = Components;
8372
8112
  Puck.Fields = Fields;
8373
8113
  Puck.Outline = Outline;
8374
- Puck.Preview = Preview3;
8375
-
8376
- // lib/migrate.ts
8377
- init_react_import();
8378
- var migrations = [
8379
- // Migrate root to root.props
8380
- (data) => {
8381
- const rootProps = data.root.props || data.root;
8382
- if (Object.keys(data.root).length > 0 && !data.root.props) {
8383
- console.warn(
8384
- "Migration applied: Root props moved from `root` to `root.props`."
8385
- );
8386
- return __spreadProps(__spreadValues({}, data), {
8387
- root: {
8388
- props: __spreadValues({}, rootProps)
8389
- }
8390
- });
8391
- }
8392
- return data;
8393
- },
8394
- // Migrate zones to slots
8395
- (data, config) => {
8396
- var _a;
8397
- if (!config) return data;
8398
- console.log("Migrating DropZones to slots...");
8399
- const updatedItems = {};
8400
- const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
8401
- const { indexes } = walkAppState(appState, config);
8402
- const deletedCompounds = [];
8403
- walkAppState(appState, config, (content, zoneCompound, zoneType) => {
8404
- var _a2, _b;
8405
- if (zoneType === "dropzone") {
8406
- const [id, slotName] = zoneCompound.split(":");
8407
- const nodeData = indexes.nodes[id].data;
8408
- const componentType = nodeData.type;
8409
- const configForComponent = config.components[componentType];
8410
- if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
8411
- updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
8412
- props: __spreadProps(__spreadValues({}, nodeData.props), {
8413
- [slotName]: content
8414
- })
8415
- });
8416
- deletedCompounds.push(zoneCompound);
8417
- }
8418
- return content;
8419
- }
8420
- return content;
8421
- });
8422
- const updated = walkAppState(
8423
- appState,
8424
- config,
8425
- (content) => content,
8426
- (item) => {
8427
- var _a2;
8428
- return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
8429
- }
8430
- );
8431
- deletedCompounds.forEach((zoneCompound) => {
8432
- var _a2;
8433
- const [_, propName] = zoneCompound.split(":");
8434
- console.log(
8435
- `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
8436
- );
8437
- (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
8438
- });
8439
- Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
8440
- const [_, propName] = zoneCompound.split(":");
8441
- throw new Error(
8442
- `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
8443
- );
8444
- });
8445
- delete updated.data.zones;
8446
- return updated.data;
8447
- }
8448
- ];
8449
- function migrate(data, config) {
8450
- return migrations == null ? void 0 : migrations.reduce(
8451
- (acc, migration) => migration(acc, config),
8452
- data
8453
- );
8454
- }
8114
+ Puck.Preview = Preview2;
8455
8115
  export {
8456
8116
  Action,
8457
8117
  ActionBar,
@@ -8471,6 +8131,7 @@ export {
8471
8131
  renderContext,
8472
8132
  resolveAllData,
8473
8133
  transformProps,
8134
+ useGetPuck,
8474
8135
  usePuck,
8475
8136
  walkTree
8476
8137
  };