@measured/puck 0.7.1-canary.104091a → 0.7.1-canary.85b14d2

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/README.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # puck
2
2
 
3
+ <p align="left">
4
+ <a aria-label="Measured logo" href="https://measured.co">
5
+ <img src="https://img.shields.io/badge/MADE%20BY%20Measured-000000.svg?style=for-the-badge&labelColor=000">
6
+ </a>
7
+ <a aria-label="NPM version" href="https://www.npmjs.com/package/@measured/puck">
8
+ <img alt="" src="https://img.shields.io/npm/v/@measured/puck.svg?style=for-the-badge&labelColor=000000">
9
+ </a>
10
+ <a aria-label="License" href="https://github.com/measuredco/puck/blob/main/LICENSE">
11
+ <img alt="" src="https://img.shields.io/npm/l/@measured/puck.svg?style=for-the-badge&labelColor=000000">
12
+ </a>
13
+ <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
14
+ <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
15
+ </a>
16
+ </p>
17
+
3
18
  The self-hosted, drag and drop editor for React.
4
19
 
5
20
  - 🖱️ **Drag and drop**: Visual editing for your existing React component library
package/dist/index.css CHANGED
@@ -30,6 +30,7 @@
30
30
  --puck-color-azure-6: #88b0da;
31
31
  --puck-color-azure-7: #abc7e5;
32
32
  --puck-color-azure-8: #cfdff0;
33
+ --puck-color-azure-85: #e1eaf6;
33
34
  --puck-color-azure-9: #f3f6fb;
34
35
  --puck-color-green-0: #002000;
35
36
  --puck-color-green-1: #043604;
@@ -208,87 +209,169 @@
208
209
  width: 100%;
209
210
  }
210
211
 
211
- /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
212
- ._IconButton_13gzt_1 {
213
- background: transparent;
214
- border: none;
215
- color: var(--puck-color-grey-3);
216
- display: flex;
217
- align-items: center;
218
- justify-content: center;
219
- border-radius: 4px;
220
- padding: 4px;
221
- }
222
- ._IconButton_13gzt_1:hover {
223
- background: var(--puck-color-grey-9);
224
- color: var(--puck-color-blue);
225
- cursor: pointer;
226
- }
227
-
228
212
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
229
- ._DraggableComponent_1ew8n_1 {
213
+ ._DraggableComponent_1nlo8_1 {
230
214
  position: relative;
215
+ pointer-events: auto;
231
216
  }
232
- ._DraggableComponent-contents_1ew8n_5 {
217
+ ._DraggableComponent--isDragging_1nlo8_6 {
218
+ background: #abc7e510;
219
+ outline: 2px var(--puck-color-azure-8) solid;
220
+ overflow: hidden;
221
+ }
222
+ ._DraggableComponent-contents_1nlo8_12 {
233
223
  position: relative;
224
+ pointer-events: none;
234
225
  }
235
- ._DraggableComponent-contents_1ew8n_5::before,
236
- ._DraggableComponent-contents_1ew8n_5::after {
226
+ ._DraggableComponent-contents_1nlo8_12::before,
227
+ ._DraggableComponent-contents_1nlo8_12::after {
237
228
  content: " ";
238
229
  display: table;
239
230
  }
240
- ._DraggableComponent-overlay_1ew8n_16 {
231
+ ._DraggableComponent-overlay_1nlo8_24 {
241
232
  display: none;
233
+ background: #abc7e530;
234
+ outline: 2px var(--puck-color-azure-8) solid;
235
+ cursor: pointer;
242
236
  height: 100%;
243
237
  width: 100%;
244
238
  top: 0;
245
239
  position: absolute;
246
240
  z-index: 1;
247
241
  font-family: var(--puck-font-stack);
242
+ pointer-events: none;
243
+ box-sizing: border-box;
248
244
  }
249
- ._DraggableComponent_1ew8n_1:hover ._DraggableComponent-overlay_1ew8n_16 {
245
+ ._DraggableComponent_1nlo8_1:hover:not(._DraggableComponent--isLocked_1nlo8_39) > ._DraggableComponent-overlay_1nlo8_24 {
250
246
  display: block;
251
- background-color: #cdcdcd50;
252
- box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
247
+ pointer-events: none;
253
248
  }
254
- ._DraggableComponent--isModifierHeld_1ew8n_32:hover ._DraggableComponent-overlay_1ew8n_16 {
255
- display: none;
249
+ ._DraggableComponent--forceHover_1nlo8_45 > ._DraggableComponent-overlay_1nlo8_24 {
250
+ display: block;
251
+ pointer-events: none;
256
252
  }
257
- ._DraggableComponent--isSelected_1ew8n_36 ._DraggableComponent-overlay_1ew8n_16 {
258
- box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
253
+ ._DraggableComponent--indicativeHover_1nlo8_50 > ._DraggableComponent-overlay_1nlo8_24 {
259
254
  display: block;
255
+ background: transparent;
256
+ pointer-events: none;
260
257
  }
261
- ._DraggableComponent-actions_1ew8n_41 {
258
+ ._DraggableComponent_1nlo8_1:not(._DraggableComponent--isSelected_1nlo8_57):has(._DraggableComponent_1nlo8_1:hover > ._DraggableComponent-overlay_1nlo8_24) > ._DraggableComponent-overlay_1nlo8_24 {
262
259
  display: none;
263
260
  }
264
- ._DraggableComponent_1ew8n_1:hover ._DraggableComponent-actions_1ew8n_41 {
261
+ ._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 {
262
+ background: none;
263
+ display: block;
264
+ outline: 2px var(--puck-color-azure-6) solid;
265
+ }
266
+ ._DraggableComponent-actions_1nlo8_70 {
265
267
  position: absolute;
266
- right: 0;
267
- padding: 8px;
268
- border-bottom-left-radius: 8px;
269
- background: white;
270
- display: flex;
268
+ right: 6.5px;
269
+ width: auto;
270
+ top: -48px;
271
+ padding: 4px;
272
+ border-top-left-radius: 8px;
273
+ border-top-right-radius: 8px;
274
+ border-radius: 8px;
275
+ background: var(--puck-color-grey-0);
276
+ color: white;
277
+ display: none;
271
278
  gap: 4px;
272
- border: 1px solid var(--puck-color-grey-8);
279
+ pointer-events: auto;
280
+ box-sizing: border-box;
281
+ }
282
+ ._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 > ._DraggableComponent-actions_1nlo8_70 {
283
+ display: flex;
273
284
  }
274
- ._DraggableComponent-actionsLabel_1ew8n_56 {
275
- color: var(--puck-color-grey-0);
285
+ ._DraggableComponent-actionsLabel_1nlo8_93 {
286
+ color: var(--puck-color-grey-7);
276
287
  display: flex;
288
+ font-size: var(--puck-font-size-xxxs);
289
+ font-weight: 500;
277
290
  justify-content: center;
278
291
  align-items: center;
279
- padding-left: 12px;
292
+ padding-left: 8px;
280
293
  padding-right: 16px;
281
294
  margin-right: 8px;
282
- border-right: 1px solid var(--puck-color-grey-8);
295
+ border-right: 1px solid var(--puck-color-grey-4);
296
+ text-overflow: ellipsis;
297
+ white-space: nowrap;
283
298
  }
284
- ._DraggableComponent-action_1ew8n_41 {
299
+ ._DraggableComponent-action_1nlo8_70 {
285
300
  background: transparent;
286
301
  border: none;
287
- color: var(--puck-color-grey-2);
288
- padding: 8px;
302
+ color: var(--puck-color-grey-7);
303
+ padding: 6px 8px;
289
304
  border-radius: 4px;
305
+ overflow: hidden;
306
+ }
307
+ ._DraggableComponent-action_1nlo8_70:hover {
308
+ background: var(--puck-color-grey-2);
309
+ color: var(--puck-color-azure-5);
310
+ cursor: pointer;
311
+ }
312
+
313
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
314
+ ._DropZone_1980k_1 {
315
+ margin-left: auto;
316
+ margin-right: auto;
317
+ zoom: 1.33;
318
+ position: relative;
319
+ height: 100%;
320
+ outline-offset: -1px;
321
+ width: 100%;
322
+ }
323
+ ._DropZone-content_1980k_11 {
324
+ min-height: 128px;
325
+ height: 100%;
326
+ }
327
+ ._DropZone--userIsDragging_1980k_16 ._DropZone-content_1980k_11 {
328
+ pointer-events: all;
329
+ }
330
+ ._DropZone--userIsDragging_1980k_16:not(._DropZone--draggingOverArea_1980k_20):not(._DropZone--draggingNewComponent_1980k_21) > ._DropZone-content_1980k_11 {
331
+ pointer-events: none;
332
+ }
333
+ ._DropZone--isAreaSelected_1980k_27,
334
+ ._DropZone--draggingOverArea_1980k_20:not(:has(._DropZone--hoveringOverArea_1980k_28)),
335
+ ._DropZone--hoveringOverArea_1980k_28:not(._DropZone--isDisabled_1980k_29):not(._DropZone--isRootZone_1980k_30) {
336
+ background: var(--puck-color-azure-9);
337
+ outline: 2px dashed var(--puck-color-azure-7);
338
+ }
339
+ ._DropZone_1980k_1:not(._DropZone--hasChildren_1980k_36) {
340
+ background: var(--puck-color-azure-9);
341
+ outline: 2px dashed var(--puck-color-azure-7);
342
+ }
343
+ ._DropZone--isDestination_1980k_41 {
344
+ outline: 2px dashed var(--puck-color-azure-3) !important;
290
345
  }
291
- ._DraggableComponent-action_1ew8n_41:hover {
346
+ ._DropZone--isDestination_1980k_41:not(._DropZone--isRootZone_1980k_30) {
347
+ background: var(--puck-color-azure-85) !important;
348
+ }
349
+ ._DropZone-item_1980k_49 {
350
+ position: relative;
351
+ }
352
+ ._DropZone-item_1980k_49:has(._DropZone--draggingOverArea_1980k_20) {
353
+ z-index: 1;
354
+ }
355
+ ._DropZone-hitbox_1980k_57 {
356
+ position: absolute;
357
+ bottom: -12px;
358
+ height: 24px;
359
+ width: 100%;
360
+ z-index: 1;
361
+ }
362
+
363
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
364
+ ._IconButton_13gzt_1 {
365
+ background: transparent;
366
+ border: none;
367
+ color: var(--puck-color-grey-3);
368
+ display: flex;
369
+ align-items: center;
370
+ justify-content: center;
371
+ border-radius: 4px;
372
+ padding: 4px;
373
+ }
374
+ ._IconButton_13gzt_1:hover {
292
375
  background: var(--puck-color-grey-9);
293
376
  color: var(--puck-color-blue);
294
377
  cursor: pointer;
@@ -580,14 +663,15 @@
580
663
  }
581
664
 
582
665
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
583
- ._ComponentList_1sym6_1 {
666
+ ._ComponentList_1ybn0_1 {
584
667
  display: grid;
585
668
  font-family: var(--puck-font-stack);
586
669
  grid-template-columns: 1fr;
587
670
  max-width: 100%;
671
+ grid-gap: 12px;
588
672
  }
589
- ._ComponentList-item_1sym6_8,
590
- ._ComponentList-itemShadow_1sym6_9 {
673
+ ._ComponentList-item_1ybn0_9,
674
+ ._ComponentList-itemShadow_1ybn0_10 {
591
675
  background: white;
592
676
  padding: 12px;
593
677
  display: flex;
@@ -598,92 +682,66 @@
598
682
  align-items: center;
599
683
  gap: 12px;
600
684
  cursor: grab;
601
- margin-bottom: 12px;
602
685
  }
603
- ._ComponentList-item_1sym6_8:last-of-type,
604
- ._ComponentList-itemShadow_1sym6_9:last-of-type {
686
+ ._ComponentList-item_1ybn0_9:last-of-type,
687
+ ._ComponentList-itemShadow_1ybn0_10:last-of-type {
605
688
  margin-bottom: 0px;
606
689
  }
607
- ._ComponentList-itemIcon_1sym6_28 {
690
+ ._ComponentList-itemIcon_1ybn0_28 {
608
691
  color: var(--puck-color-grey-4);
609
692
  }
610
- ._ComponentList-item_1sym6_8:hover {
693
+ ._ComponentList-item_1ybn0_9:hover {
611
694
  background-color: var(--puck-color-azure-9);
612
695
  }
613
696
 
614
- /* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
615
- ._OutlineList_gor6f_1 {
616
- color: var(--puck-color-grey-2);
617
- font-family: var(--puck-font-stack);
618
- margin: 0;
619
- margin-left: 16px;
620
- padding-left: 16px;
621
- position: relative;
622
- list-style: none;
623
- }
624
- ._OutlineList_gor6f_1::before {
625
- background: var(--puck-color-grey-7);
626
- position: absolute;
627
- left: -1px;
628
- top: 0px;
629
- width: 1px;
630
- height: calc(100% - 9px);
631
- content: "";
632
- }
633
- ._OutlineList_gor6f_1 li {
634
- position: relative;
635
- margin-bottom: 4px;
636
- }
637
- ._OutlineList_gor6f_1 li::before {
638
- background: var(--puck-color-grey-7);
639
- position: absolute;
640
- left: -17px;
641
- top: 9px;
642
- width: 13px;
643
- height: 1px;
644
- content: "";
645
- }
646
- ._OutlineList_gor6f_1 ._OutlineList-clickableItem_gor6f_36:hover {
647
- color: var(--puck-color-blue);
648
- cursor: pointer;
649
- }
650
- ._OutlineList_gor6f_1 li > ._OutlineList_gor6f_1 {
651
- margin: 8px;
652
- }
653
-
654
697
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
655
- ._SidebarSection_1y6bv_1 {
698
+ ._SidebarSection_ivnrs_1 {
656
699
  display: flex;
657
700
  position: relative;
658
701
  flex-direction: column;
659
702
  }
660
- ._SidebarSection_1y6bv_1:last-of-type {
703
+ ._SidebarSection_ivnrs_1:last-of-type {
661
704
  flex-grow: 1;
662
705
  }
663
- ._SidebarSection-title_1y6bv_11 {
706
+ ._SidebarSection-title_ivnrs_11 {
664
707
  background: white;
665
708
  padding: 16px;
666
709
  border-bottom: 1px solid var(--puck-color-grey-8);
710
+ overflow-x: scroll;
667
711
  }
668
- ._SidebarSection-content_1y6bv_17 {
712
+ ._SidebarSection-content_ivnrs_18 {
669
713
  border-bottom: 1px solid var(--puck-color-grey-8);
670
714
  padding: 16px;
671
715
  }
672
- ._SidebarSection--noPadding_1y6bv_22 ._SidebarSection-content_1y6bv_17 {
716
+ ._SidebarSection--noPadding_ivnrs_23 ._SidebarSection-content_ivnrs_18 {
673
717
  padding: 0px;
674
718
  }
675
- ._SidebarSection_1y6bv_1:last-of-type ._SidebarSection-content_1y6bv_17 {
719
+ ._SidebarSection_ivnrs_1:last-of-type ._SidebarSection-content_ivnrs_18 {
676
720
  border-bottom: none;
677
721
  flex-grow: 1;
678
722
  }
679
- ._SidebarSection-breadcrumb_1y6bv_31 {
723
+ ._SidebarSection-breadcrumbLabel_ivnrs_32 {
680
724
  color: var(--puck-color-azure-3);
725
+ flex-shrink: 0;
681
726
  }
682
- ._SidebarSection-breadcrumb_1y6bv_31:hover {
727
+ ._SidebarSection-breadcrumbLabel_ivnrs_32:hover {
683
728
  color: var(--puck-color-azure-4);
684
729
  cursor: pointer;
685
730
  text-decoration: underline;
686
731
  }
732
+ ._SidebarSection-breadcrumbs_ivnrs_43 {
733
+ align-items: center;
734
+ display: flex;
735
+ gap: 4px;
736
+ }
737
+ ._SidebarSection-breadcrumb_ivnrs_32 {
738
+ align-items: center;
739
+ display: flex;
740
+ gap: 4px;
741
+ }
742
+ ._SidebarSection-heading_ivnrs_55 {
743
+ padding-right: 16px;
744
+ }
687
745
 
688
746
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
689
747
  ._Heading_1y35v_1 {
@@ -721,3 +779,88 @@
721
779
  ._Heading--xs_1y35v_42 {
722
780
  font-size: var(--puck-font-size-xs);
723
781
  }
782
+
783
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
784
+ ._LayerTree_1dcmd_1 {
785
+ color: var(--puck-color-grey-2);
786
+ font-family: var(--puck-font-stack);
787
+ font-size: var(--puck-font-size-xxs);
788
+ margin: 0;
789
+ position: relative;
790
+ list-style: none;
791
+ padding: 0;
792
+ }
793
+ ._LayerTree-zoneTitle_1dcmd_11 {
794
+ color: var(--puck-color-grey-4);
795
+ font-size: var(--puck-font-size-xxxs);
796
+ text-transform: uppercase;
797
+ }
798
+ ._LayerTree-helper_1dcmd_17 {
799
+ text-align: center;
800
+ color: var(--puck-color-grey-6);
801
+ font-family: var(--puck-font-stack);
802
+ margin: 8px 4px;
803
+ }
804
+ ._Layer_1dcmd_1 {
805
+ position: relative;
806
+ border: 1px solid transparent;
807
+ }
808
+ ._Layer-inner_1dcmd_29 {
809
+ padding-left: 20px;
810
+ padding-right: 8px;
811
+ border-radius: 3px;
812
+ }
813
+ ._Layer--containsZone_1dcmd_35 > ._Layer-inner_1dcmd_29 {
814
+ padding-left: 8px;
815
+ }
816
+ ._Layer-clickable_1dcmd_39 {
817
+ align-items: center;
818
+ display: flex;
819
+ }
820
+ ._Layer-inner_1dcmd_29:hover {
821
+ cursor: pointer;
822
+ }
823
+ ._Layer_1dcmd_1:not(._Layer--isSelected_1dcmd_48) > ._Layer-inner_1dcmd_29:hover,
824
+ ._Layer--isHovering_1dcmd_49 > ._Layer-inner_1dcmd_29 {
825
+ color: var(--puck-color-blue);
826
+ background: var(--puck-color-azure-85);
827
+ }
828
+ ._Layer--isSelected_1dcmd_48 {
829
+ background: var(--puck-color-azure-9);
830
+ border-color: var(--puck-color-azure-7);
831
+ border-radius: 4px;
832
+ }
833
+ ._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 {
834
+ background: var(--puck-color-azure-85);
835
+ font-weight: 600;
836
+ }
837
+ ._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65,
838
+ ._Layer--childIsSelected_1dcmd_66 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65 {
839
+ transform: scaleY(-1);
840
+ }
841
+ ._Layer-zones_1dcmd_70 {
842
+ display: none;
843
+ margin-left: 20px;
844
+ }
845
+ ._Layer--isSelected_1dcmd_48 > ._Layer-zones_1dcmd_70,
846
+ ._Layer--childIsSelected_1dcmd_66 > ._Layer-zones_1dcmd_70 {
847
+ display: block;
848
+ }
849
+ ._Layer-zones_1dcmd_70 > ._LayerTree_1dcmd_1 {
850
+ margin-left: 16px;
851
+ }
852
+ ._Layer-title_1dcmd_84,
853
+ ._LayerTree-zoneTitle_1dcmd_11 {
854
+ display: flex;
855
+ gap: 8px;
856
+ align-items: center;
857
+ margin: 8px 4px;
858
+ }
859
+ ._Layer-icon_1dcmd_92 {
860
+ color: var(--puck-color-rose-6);
861
+ margin-top: 4px;
862
+ }
863
+ ._Layer-zoneIcon_1dcmd_97 {
864
+ color: var(--puck-color-grey-7);
865
+ margin-top: 4px;
866
+ }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
- import { ReactElement, ReactNode } from 'react';
1
+ import * as react from 'react';
2
+ import { ReactElement, ReactNode, CSSProperties } from 'react';
2
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { DragStart, DragUpdate } from 'react-beautiful-dnd';
3
5
 
4
6
  type Adaptor<AdaptorParams = {}> = {
5
7
  name: string;
@@ -44,6 +46,11 @@ type DefaultComponentProps = {
44
46
  type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
45
47
  [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName][0]>;
46
48
  };
49
+ type Content<Props extends {
50
+ [key: string]: any;
51
+ } = {
52
+ [key: string]: any;
53
+ }> = MappedItem<Props>[];
47
54
  type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps> = {
48
55
  render: (props: ComponentProps) => ReactElement;
49
56
  defaultProps?: DefaultProps;
@@ -55,7 +62,7 @@ type Config<Props extends {
55
62
  [key: string]: any;
56
63
  }, RootProps extends DefaultRootProps = DefaultRootProps> = {
57
64
  components: {
58
- [ComponentName in keyof Props]: ComponentConfig<Props[ComponentName]>;
65
+ [ComponentName in keyof Props]: ComponentConfig<Props[ComponentName], Props[ComponentName]>;
59
66
  };
60
67
  root?: ComponentConfig<RootProps & {
61
68
  children: ReactNode;
@@ -87,7 +94,8 @@ type Data<Props extends {
87
94
  [key: string]: any;
88
95
  }> = {
89
96
  root: RootProps;
90
- content: MappedItem<Props>[];
97
+ content: Content<Props>;
98
+ zones?: Record<string, Content<Props>>;
91
99
  };
92
100
 
93
101
  declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
@@ -104,6 +112,100 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
104
112
  size?: "medium" | "large" | undefined;
105
113
  }) => react_jsx_runtime.JSX.Element;
106
114
 
115
+ type ItemSelector = {
116
+ index: number;
117
+ zone?: string;
118
+ };
119
+
120
+ type InsertAction = {
121
+ type: "insert";
122
+ componentType: string;
123
+ destinationIndex: number;
124
+ destinationZone: string;
125
+ };
126
+ type DuplicateAction = {
127
+ type: "duplicate";
128
+ sourceIndex: number;
129
+ sourceZone: string;
130
+ };
131
+ type ReplaceAction = {
132
+ type: "replace";
133
+ destinationIndex: number;
134
+ destinationZone: string;
135
+ data: any;
136
+ };
137
+ type ReorderAction = {
138
+ type: "reorder";
139
+ sourceIndex: number;
140
+ destinationIndex: number;
141
+ destinationZone: string;
142
+ };
143
+ type MoveAction = {
144
+ type: "move";
145
+ sourceIndex: number;
146
+ sourceZone: string;
147
+ destinationIndex: number;
148
+ destinationZone: string;
149
+ };
150
+ type RemoveAction = {
151
+ type: "remove";
152
+ index: number;
153
+ zone: string;
154
+ };
155
+ type SetDataAction = {
156
+ type: "set";
157
+ data: Partial<Data>;
158
+ };
159
+ type RegisterZoneAction = {
160
+ type: "registerZone";
161
+ zone: string;
162
+ };
163
+ type UnregisterZoneAction = {
164
+ type: "unregisterZone";
165
+ zone: string;
166
+ };
167
+ type PuckAction = ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetDataAction | RegisterZoneAction | UnregisterZoneAction;
168
+
169
+ type PathData = Record<string, {
170
+ selector: ItemSelector | null;
171
+ label: string;
172
+ }[]>;
173
+ type DropZoneContext = {
174
+ data: Data;
175
+ config: Config;
176
+ itemSelector?: ItemSelector | null;
177
+ setItemSelector?: (newIndex: ItemSelector | null) => void;
178
+ dispatch?: (action: PuckAction) => void;
179
+ areaId?: string;
180
+ draggedItem?: DragStart & Partial<DragUpdate>;
181
+ placeholderStyle?: CSSProperties;
182
+ hoveringArea?: string | null;
183
+ setHoveringArea?: (area: string | null) => void;
184
+ hoveringZone?: string | null;
185
+ setHoveringZone?: (zone: string | null) => void;
186
+ hoveringComponent?: string | null;
187
+ setHoveringComponent?: (id: string | null) => void;
188
+ registerZoneArea?: (areaId: string) => void;
189
+ areasWithZones?: Record<string, boolean>;
190
+ registerZone?: (zoneCompound: string) => void;
191
+ unregisterZone?: (zoneCompound: string) => void;
192
+ activeZones?: Record<string, boolean>;
193
+ pathData?: PathData;
194
+ registerPath?: (selector: ItemSelector) => void;
195
+ mode?: "edit" | "render";
196
+ } | null;
197
+ declare const dropZoneContext: react.Context<DropZoneContext>;
198
+ declare const DropZoneProvider: ({ children, value, }: {
199
+ children: ReactNode;
200
+ value: DropZoneContext;
201
+ }) => react_jsx_runtime.JSX.Element;
202
+
203
+ type DropZoneProps = {
204
+ zone: string;
205
+ style?: CSSProperties;
206
+ };
207
+ declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
208
+
107
209
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
108
210
  children: ReactNode;
109
211
  href?: string | undefined;
@@ -141,11 +243,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
141
243
  renderHeader?: (props: {
142
244
  children: ReactNode;
143
245
  data: Data;
144
- setData: (data: Data) => void;
246
+ dispatch: (action: PuckAction) => void;
145
247
  }) => ReactElement;
146
248
  renderHeaderActions?: (props: {
147
249
  data: Data;
148
- setData: (data: Data) => void;
250
+ dispatch: (action: PuckAction) => void;
149
251
  }) => ReactElement;
150
252
  headerTitle?: string;
151
253
  headerPath?: string;
@@ -162,4 +264,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
162
264
  label: string;
163
265
  }) => react_jsx_runtime.JSX.Element;
164
266
 
165
- export { Adaptor, Button, ComponentConfig, Config, Data, DefaultComponentProps, DefaultRootProps, Field, FieldLabel, Fields, IconButton, Puck, Render };
267
+ export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };