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

Sign up to get free protection for your applications and to get access to all the features.
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",