@measured/puck 0.9.0-canary.fe1629e → 0.9.1-canary.3602b0f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -0
  2. package/dist/index.css +50 -44
  3. package/dist/index.js +131 -99
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -69,6 +69,7 @@ Render the page:
69
69
  ```jsx
70
70
  // Page.jsx
71
71
  import { Render } from "@measured/puck";
72
+ import "@measured/puck/dist/index.css";
72
73
 
73
74
  export function Page() {
74
75
  return <Render config={config} data={data} />;
package/dist/index.css CHANGED
@@ -210,28 +210,27 @@
210
210
  }
211
211
 
212
212
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
213
- ._DraggableComponent_1nlo8_1 {
214
- position: relative;
213
+ ._DraggableComponent_1phls_1 {
215
214
  pointer-events: auto;
216
215
  }
217
- ._DraggableComponent--isDragging_1nlo8_6 {
216
+ ._DraggableComponent--isDragging_1phls_5 {
218
217
  background: #abc7e510;
219
218
  outline: 2px var(--puck-color-azure-8) solid;
220
219
  overflow: hidden;
221
220
  }
222
- ._DraggableComponent-contents_1nlo8_12 {
221
+ ._DraggableComponent-contents_1phls_11 {
223
222
  position: relative;
224
223
  pointer-events: none;
224
+ z-index: 0;
225
225
  }
226
- ._DraggableComponent-contents_1nlo8_12::before,
227
- ._DraggableComponent-contents_1nlo8_12::after {
226
+ ._DraggableComponent-contents_1phls_11::before,
227
+ ._DraggableComponent-contents_1phls_11::after {
228
228
  content: " ";
229
229
  display: table;
230
230
  }
231
- ._DraggableComponent-overlay_1nlo8_24 {
231
+ ._DraggableComponent-overlay_1phls_24 {
232
232
  display: none;
233
233
  background: #abc7e530;
234
- outline: 2px var(--puck-color-azure-8) solid;
235
234
  cursor: pointer;
236
235
  height: 100%;
237
236
  width: 100%;
@@ -242,28 +241,36 @@
242
241
  pointer-events: none;
243
242
  box-sizing: border-box;
244
243
  }
245
- ._DraggableComponent_1nlo8_1:hover:not(._DraggableComponent--isLocked_1nlo8_39) > ._DraggableComponent-overlay_1nlo8_24 {
244
+ ._DraggableComponent_1phls_1:hover:not(._DraggableComponent--isLocked_1phls_38) > ._DraggableComponent-overlay_1phls_24 {
246
245
  display: block;
247
246
  pointer-events: none;
248
247
  }
249
- ._DraggableComponent--forceHover_1nlo8_45 > ._DraggableComponent-overlay_1nlo8_24 {
248
+ ._DraggableComponent--forceHover_1phls_44 > ._DraggableComponent-overlay_1phls_24 {
250
249
  display: block;
251
250
  pointer-events: none;
252
251
  }
253
- ._DraggableComponent--indicativeHover_1nlo8_50 > ._DraggableComponent-overlay_1nlo8_24 {
252
+ ._DraggableComponent_1phls_1:not(._DraggableComponent--isSelected_1phls_49) > ._DraggableComponent-overlay_1phls_24 {
253
+ outline: 2px var(--puck-color-azure-8) solid;
254
+ }
255
+ ._DraggableComponent--indicativeHover_1phls_54 > ._DraggableComponent-overlay_1phls_24 {
254
256
  display: block;
255
257
  background: transparent;
256
258
  pointer-events: none;
257
259
  }
258
- ._DraggableComponent_1nlo8_1:not(._DraggableComponent--isSelected_1nlo8_57):has(._DraggableComponent_1nlo8_1:hover > ._DraggableComponent-overlay_1nlo8_24) > ._DraggableComponent-overlay_1nlo8_24 {
260
+ ._DraggableComponent_1phls_1:not(._DraggableComponent--isSelected_1phls_49):has(._DraggableComponent_1phls_1:hover > ._DraggableComponent-overlay_1phls_24) > ._DraggableComponent-overlay_1phls_24 {
259
261
  display: none;
260
262
  }
261
- ._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 {
263
+ ._DraggableComponent--isSelected_1phls_49 {
264
+ outline: 2px var(--puck-color-azure-6) solid;
265
+ }
266
+ ._DraggableComponent--isSelected_1phls_49 > ._DraggableComponent-overlay_1phls_24 {
262
267
  background: none;
263
268
  display: block;
264
- outline: 2px var(--puck-color-azure-6) solid;
269
+ position: sticky;
270
+ top: 56px;
271
+ z-index: 1;
265
272
  }
266
- ._DraggableComponent-actions_1nlo8_70 {
273
+ ._DraggableComponent-actions_1phls_80 {
267
274
  position: absolute;
268
275
  right: 6.5px;
269
276
  width: auto;
@@ -279,10 +286,10 @@
279
286
  pointer-events: auto;
280
287
  box-sizing: border-box;
281
288
  }
282
- ._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 > ._DraggableComponent-actions_1nlo8_70 {
289
+ ._DraggableComponent--isSelected_1phls_49 > ._DraggableComponent-overlay_1phls_24 > ._DraggableComponent-actions_1phls_80 {
283
290
  display: flex;
284
291
  }
285
- ._DraggableComponent-actionsLabel_1nlo8_93 {
292
+ ._DraggableComponent-actionsLabel_1phls_103 {
286
293
  color: var(--puck-color-grey-7);
287
294
  display: flex;
288
295
  font-size: var(--puck-font-size-xxxs);
@@ -296,7 +303,7 @@
296
303
  text-overflow: ellipsis;
297
304
  white-space: nowrap;
298
305
  }
299
- ._DraggableComponent-action_1nlo8_70 {
306
+ ._DraggableComponent-action_1phls_80 {
300
307
  background: transparent;
301
308
  border: none;
302
309
  color: var(--puck-color-grey-7);
@@ -304,14 +311,14 @@
304
311
  border-radius: 4px;
305
312
  overflow: hidden;
306
313
  }
307
- ._DraggableComponent-action_1nlo8_70:hover {
314
+ ._DraggableComponent-action_1phls_80:hover {
308
315
  background: var(--puck-color-grey-2);
309
316
  color: var(--puck-color-azure-5);
310
317
  cursor: pointer;
311
318
  }
312
319
 
313
320
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
314
- ._DropZone_1980k_1 {
321
+ ._DropZone_ou0z5_1 {
315
322
  margin-left: auto;
316
323
  margin-right: auto;
317
324
  zoom: 1.33;
@@ -320,39 +327,37 @@
320
327
  outline-offset: -1px;
321
328
  width: 100%;
322
329
  }
323
- ._DropZone-content_1980k_11 {
330
+ ._DropZone-content_ou0z5_11 {
324
331
  min-height: 128px;
325
332
  height: 100%;
326
333
  }
327
- ._DropZone--userIsDragging_1980k_16 ._DropZone-content_1980k_11 {
334
+ ._DropZone--userIsDragging_ou0z5_16 ._DropZone-content_ou0z5_11 {
328
335
  pointer-events: all;
329
336
  }
330
- ._DropZone--userIsDragging_1980k_16:not(._DropZone--draggingOverArea_1980k_20):not(._DropZone--draggingNewComponent_1980k_21) > ._DropZone-content_1980k_11 {
337
+ ._DropZone--userIsDragging_ou0z5_16:not(._DropZone--draggingOverArea_ou0z5_20):not(._DropZone--draggingNewComponent_ou0z5_21) > ._DropZone-content_ou0z5_11 {
331
338
  pointer-events: none;
332
339
  }
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) {
340
+ ._DropZone--isAreaSelected_ou0z5_27,
341
+ ._DropZone--draggingOverArea_ou0z5_20:not(:has(._DropZone--hoveringOverArea_ou0z5_28)),
342
+ ._DropZone--hoveringOverArea_ou0z5_28:not(._DropZone--isDisabled_ou0z5_29):not(._DropZone--isRootZone_ou0z5_30) {
336
343
  background: var(--puck-color-azure-9);
337
344
  outline: 2px dashed var(--puck-color-azure-7);
338
345
  }
339
- ._DropZone_1980k_1:not(._DropZone--hasChildren_1980k_36) {
346
+ ._DropZone_ou0z5_1:not(._DropZone--hasChildren_ou0z5_36) {
340
347
  background: var(--puck-color-azure-9);
341
348
  outline: 2px dashed var(--puck-color-azure-7);
342
349
  }
343
- ._DropZone--isDestination_1980k_41 {
350
+ ._DropZone--isDestination_ou0z5_41 {
344
351
  outline: 2px dashed var(--puck-color-azure-3) !important;
345
352
  }
346
- ._DropZone--isDestination_1980k_41:not(._DropZone--isRootZone_1980k_30) {
353
+ ._DropZone--isDestination_ou0z5_41:not(._DropZone--isRootZone_ou0z5_30) {
347
354
  background: var(--puck-color-azure-85) !important;
348
355
  }
349
- ._DropZone-item_1980k_49 {
356
+ ._DropZone-item_ou0z5_49 {
350
357
  position: relative;
358
+ z-index: 0;
351
359
  }
352
- ._DropZone-item_1980k_49:has(._DropZone--draggingOverArea_1980k_20) {
353
- z-index: 1;
354
- }
355
- ._DropZone-hitbox_1980k_57 {
360
+ ._DropZone-hitbox_ou0z5_54 {
356
361
  position: absolute;
357
362
  bottom: -12px;
358
363
  height: 24px;
@@ -744,39 +749,40 @@
744
749
  }
745
750
 
746
751
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
747
- ._Heading_1y35v_1 {
752
+ ._Heading_1bvy5_1 {
748
753
  display: block;
754
+ color: var(--puck-color-black);
749
755
  font-family: var(--puck-font-stack);
750
756
  font-weight: 700;
751
757
  margin: 0;
752
758
  }
753
- ._Heading_1y35v_1 b {
759
+ ._Heading_1bvy5_1 b {
754
760
  font-weight: 700;
755
761
  }
756
- ._Heading--xxxxl_1y35v_12 {
762
+ ._Heading--xxxxl_1bvy5_13 {
757
763
  font-size: var(--puck-font-size-xxxxl);
758
764
  letter-spacing: 0.08ch;
759
765
  font-weight: 800;
760
766
  }
761
- ._Heading--xxxl_1y35v_18 {
767
+ ._Heading--xxxl_1bvy5_19 {
762
768
  font-size: var(--puck-font-size-xxxl);
763
769
  }
764
- ._Heading--xxl_1y35v_22 {
770
+ ._Heading--xxl_1bvy5_23 {
765
771
  font-size: var(--puck-font-size-xxl);
766
772
  }
767
- ._Heading--xl_1y35v_26 {
773
+ ._Heading--xl_1bvy5_27 {
768
774
  font-size: var(--puck-font-size-xl);
769
775
  }
770
- ._Heading--l_1y35v_30 {
776
+ ._Heading--l_1bvy5_31 {
771
777
  font-size: var(--puck-font-size-l);
772
778
  }
773
- ._Heading--m_1y35v_34 {
779
+ ._Heading--m_1bvy5_35 {
774
780
  font-size: var(--puck-font-size-m);
775
781
  }
776
- ._Heading--s_1y35v_38 {
782
+ ._Heading--s_1bvy5_39 {
777
783
  font-size: var(--puck-font-size-s);
778
784
  }
779
- ._Heading--xs_1y35v_42 {
785
+ ._Heading--xs_1bvy5_43 {
780
786
  font-size: var(--puck-font-size-xs);
781
787
  }
782
788
 
package/dist/index.js CHANGED
@@ -1223,7 +1223,7 @@ var import_react_beautiful_dnd = require("react-beautiful-dnd");
1223
1223
 
1224
1224
  // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
1225
1225
  init_react_import();
1226
- var styles_module_default = { "DraggableComponent": "_DraggableComponent_1nlo8_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1nlo8_6", "DraggableComponent-contents": "_DraggableComponent-contents_1nlo8_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_1nlo8_24", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1nlo8_39", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1nlo8_45", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1nlo8_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1nlo8_57", "DraggableComponent-actions": "_DraggableComponent-actions_1nlo8_70", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1nlo8_93", "DraggableComponent-action": "_DraggableComponent-action_1nlo8_70" };
1226
+ var styles_module_default = { "DraggableComponent": "_DraggableComponent_1phls_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1phls_5", "DraggableComponent-contents": "_DraggableComponent-contents_1phls_11", "DraggableComponent-overlay": "_DraggableComponent-overlay_1phls_24", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1phls_38", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1phls_44", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1phls_49", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1phls_54", "DraggableComponent-actions": "_DraggableComponent-actions_1phls_80", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1phls_103", "DraggableComponent-action": "_DraggableComponent-action_1phls_80" };
1227
1227
 
1228
1228
  // ../../node_modules/react-feather/dist/index.js
1229
1229
  init_react_import();
@@ -2451,12 +2451,12 @@ var DraggableComponent = ({
2451
2451
  onClick,
2452
2452
  children: [
2453
2453
  debug,
2454
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children }),
2455
2454
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2("actions"), children: [
2456
2455
  label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("actionsLabel"), children: label }),
2457
2456
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(copy_default, { size: 16 }) }),
2458
2457
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(trash_default, { size: 16 }) })
2459
- ] }) })
2458
+ ] }) }),
2459
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children })
2460
2460
  ]
2461
2461
  })
2462
2462
  )
@@ -2548,7 +2548,7 @@ var replace = (list, index, newItem) => {
2548
2548
 
2549
2549
  // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
2550
2550
  init_react_import();
2551
- var styles_module_default2 = { "DropZone": "_DropZone_1980k_1", "DropZone-content": "_DropZone-content_1980k_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_1980k_16", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_1980k_20", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_1980k_21", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1980k_27", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1980k_28", "DropZone--isDisabled": "_DropZone--isDisabled_1980k_29", "DropZone--isRootZone": "_DropZone--isRootZone_1980k_30", "DropZone--hasChildren": "_DropZone--hasChildren_1980k_36", "DropZone--isDestination": "_DropZone--isDestination_1980k_41", "DropZone-item": "_DropZone-item_1980k_49", "DropZone-hitbox": "_DropZone-hitbox_1980k_57" };
2551
+ var styles_module_default2 = { "DropZone": "_DropZone_ou0z5_1", "DropZone-content": "_DropZone-content_ou0z5_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_ou0z5_16", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_ou0z5_20", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_ou0z5_21", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_ou0z5_27", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_ou0z5_28", "DropZone--isDisabled": "_DropZone--isDisabled_ou0z5_29", "DropZone--isRootZone": "_DropZone--isRootZone_ou0z5_30", "DropZone--hasChildren": "_DropZone--hasChildren_ou0z5_36", "DropZone--isDestination": "_DropZone--isDestination_ou0z5_41", "DropZone-item": "_DropZone-item_ou0z5_49", "DropZone-hitbox": "_DropZone-hitbox_ou0z5_54" };
2552
2552
 
2553
2553
  // components/DropZone/context.tsx
2554
2554
  init_react_import();
@@ -2782,97 +2782,108 @@ function DropZoneEdit({ zone, style }) {
2782
2782
  editMode: true
2783
2783
  });
2784
2784
  const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
2785
+ const isDragging = ((draggedItem == null ? void 0 : draggedItem.draggableId) || "draggable-").split(
2786
+ "draggable-"
2787
+ )[1] === componentId;
2785
2788
  const containsZone = areasWithZones ? areasWithZones[componentId] : false;
2786
2789
  const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
2787
2790
  "No configuration for ",
2788
2791
  item.type
2789
2792
  ] });
2790
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName3("item"), children: [
2791
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2792
- DropZoneProvider,
2793
- {
2794
- value: __spreadProps(__spreadValues({}, ctx), {
2795
- areaId: componentId
2796
- }),
2797
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2798
- DraggableComponent,
2793
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2794
+ "div",
2795
+ {
2796
+ className: getClassName3("item"),
2797
+ style: { zIndex: isDragging ? 1 : void 0 },
2798
+ children: [
2799
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2800
+ DropZoneProvider,
2799
2801
  {
2800
- label: item.type.toString(),
2801
- id: `draggable-${componentId}`,
2802
- index: i,
2803
- isSelected,
2804
- isLocked: userIsDragging,
2805
- forceHover: hoveringComponent === componentId && !userIsDragging,
2806
- indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
2807
- onMount: () => {
2808
- ctx.registerPath({
2809
- index: i,
2810
- zone: zoneCompound
2811
- });
2812
- },
2813
- onClick: (e) => {
2814
- setItemSelector({
2802
+ value: __spreadProps(__spreadValues({}, ctx), {
2803
+ areaId: componentId
2804
+ }),
2805
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2806
+ DraggableComponent,
2807
+ {
2808
+ label: item.type.toString(),
2809
+ id: `draggable-${componentId}`,
2815
2810
  index: i,
2816
- zone: zoneCompound
2817
- });
2818
- e.stopPropagation();
2819
- },
2811
+ isSelected,
2812
+ isLocked: userIsDragging,
2813
+ forceHover: hoveringComponent === componentId && !userIsDragging,
2814
+ indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
2815
+ onMount: () => {
2816
+ ctx.registerPath({
2817
+ index: i,
2818
+ zone: zoneCompound
2819
+ });
2820
+ },
2821
+ onClick: (e) => {
2822
+ setItemSelector({
2823
+ index: i,
2824
+ zone: zoneCompound
2825
+ });
2826
+ e.stopPropagation();
2827
+ },
2828
+ onMouseOver: (e) => {
2829
+ e.stopPropagation();
2830
+ if (containsZone) {
2831
+ setHoveringArea(componentId);
2832
+ } else {
2833
+ setHoveringArea(zoneArea);
2834
+ }
2835
+ setHoveringComponent(componentId);
2836
+ setHoveringZone(zoneCompound);
2837
+ },
2838
+ onMouseOut: () => {
2839
+ setHoveringArea(null);
2840
+ setHoveringZone(null);
2841
+ setHoveringComponent(null);
2842
+ },
2843
+ onDelete: (e) => {
2844
+ dispatch({
2845
+ type: "remove",
2846
+ index: i,
2847
+ zone: zoneCompound
2848
+ });
2849
+ setItemSelector(null);
2850
+ e.stopPropagation();
2851
+ },
2852
+ onDuplicate: (e) => {
2853
+ dispatch({
2854
+ type: "duplicate",
2855
+ sourceIndex: i,
2856
+ sourceZone: zoneCompound
2857
+ });
2858
+ setItemSelector({
2859
+ zone: zoneCompound,
2860
+ index: i + 1
2861
+ });
2862
+ e.stopPropagation();
2863
+ },
2864
+ style: {
2865
+ pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
2866
+ },
2867
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
2868
+ }
2869
+ )
2870
+ }
2871
+ ),
2872
+ userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2873
+ "div",
2874
+ {
2875
+ className: getClassName3("hitbox"),
2820
2876
  onMouseOver: (e) => {
2821
2877
  e.stopPropagation();
2822
- if (containsZone) {
2823
- setHoveringArea(componentId);
2824
- } else {
2825
- setHoveringArea(zoneArea);
2826
- }
2827
- setHoveringComponent(componentId);
2878
+ setHoveringArea(zoneArea);
2828
2879
  setHoveringZone(zoneCompound);
2829
- },
2830
- onMouseOut: () => {
2831
- setHoveringArea(null);
2832
- setHoveringZone(null);
2833
- setHoveringComponent(null);
2834
- },
2835
- onDelete: (e) => {
2836
- dispatch({
2837
- type: "remove",
2838
- index: i,
2839
- zone: zoneCompound
2840
- });
2841
- setItemSelector(null);
2842
- e.stopPropagation();
2843
- },
2844
- onDuplicate: (e) => {
2845
- dispatch({
2846
- type: "duplicate",
2847
- sourceIndex: i,
2848
- sourceZone: zoneCompound
2849
- });
2850
- setItemSelector({
2851
- zone: zoneCompound,
2852
- index: i + 1
2853
- });
2854
- e.stopPropagation();
2855
- },
2856
- style: {
2857
- pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
2858
- },
2859
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
2880
+ }
2860
2881
  }
2861
2882
  )
2862
- }
2863
- ),
2864
- userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2865
- "div",
2866
- {
2867
- className: getClassName3("hitbox"),
2868
- onMouseOver: (e) => {
2869
- e.stopPropagation();
2870
- setHoveringArea(zoneArea);
2871
- setHoveringZone(zoneCompound);
2872
- }
2873
- }
2874
- )
2875
- ] }, item.props.id);
2883
+ ]
2884
+ },
2885
+ item.props.id
2886
+ );
2876
2887
  }),
2877
2888
  provided == null ? void 0 : provided.placeholder,
2878
2889
  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -3463,7 +3474,7 @@ init_react_import();
3463
3474
 
3464
3475
  // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
3465
3476
  init_react_import();
3466
- var styles_module_default7 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
3477
+ var styles_module_default7 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
3467
3478
 
3468
3479
  // components/Heading/index.tsx
3469
3480
  var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -4430,29 +4441,50 @@ function Puck({
4430
4441
  ]
4431
4442
  }
4432
4443
  ),
4433
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
4444
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
4434
4445
  "div",
4435
4446
  {
4436
4447
  style: {
4437
- padding: 32,
4438
4448
  overflowY: "auto",
4439
4449
  gridArea: "editor",
4440
- position: "relative"
4450
+ position: "relative",
4451
+ display: "flex",
4452
+ flexDirection: "column"
4441
4453
  },
4442
4454
  onClick: () => setItemSelector(null),
4443
4455
  id: "puck-frame",
4444
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
4445
- "div",
4446
- {
4447
- className: "puck-root",
4448
- style: {
4449
- border: "1px solid var(--puck-color-grey-8)",
4450
- boxShadow: "0px 0px 0px 3rem var(--puck-color-grey-10)",
4451
- zoom: 0.75
4452
- },
4453
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
4454
- }
4455
- )
4456
+ children: [
4457
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
4458
+ "div",
4459
+ {
4460
+ className: "puck-root",
4461
+ style: {
4462
+ boxShadow: "0px 0px 0px 32px var(--puck-color-grey-10)",
4463
+ margin: 32,
4464
+ zoom: 0.75
4465
+ },
4466
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
4467
+ "div",
4468
+ {
4469
+ style: {
4470
+ border: "1px solid var(--puck-color-grey-8)"
4471
+ },
4472
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
4473
+ }
4474
+ )
4475
+ }
4476
+ ),
4477
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
4478
+ "div",
4479
+ {
4480
+ style: {
4481
+ background: "var(--puck-color-grey-10)",
4482
+ height: "100%",
4483
+ flexGrow: 1
4484
+ }
4485
+ }
4486
+ )
4487
+ ]
4456
4488
  }
4457
4489
  ),
4458
4490
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.9.0-canary.fe1629e",
3
+ "version": "0.9.1-canary.3602b0f",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",