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

package/README.md

@@ -69,6 +69,7 @@ Render the page:
 ```jsx
 // Page.jsx
 import { Render } from "@measured/puck";
+import "@measured/puck/dist/index.css";
 
 export function Page() {
   return <Render config={config} data={data} />;

package/dist/index.css

@@ -210,28 +210,27 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_1nlo8_1 {
-  position: relative;
+._DraggableComponent_1phls_1 {
   pointer-events: auto;
 }
-._DraggableComponent--isDragging_1nlo8_6 {
+._DraggableComponent--isDragging_1phls_5 {
   background: #abc7e510;
   outline: 2px var(--puck-color-azure-8) solid;
   overflow: hidden;
 }
-._DraggableComponent-contents_1nlo8_12 {
+._DraggableComponent-contents_1phls_11 {
   position: relative;
   pointer-events: none;
+  z-index: 0;
 }
-._DraggableComponent-contents_1nlo8_12::before,
-._DraggableComponent-contents_1nlo8_12::after {
+._DraggableComponent-contents_1phls_11::before,
+._DraggableComponent-contents_1phls_11::after {
   content: " ";
   display: table;
 }
-._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent-overlay_1phls_24 {
   display: none;
   background: #abc7e530;
-  outline: 2px var(--puck-color-azure-8) solid;
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -242,28 +241,36 @@
   pointer-events: none;
   box-sizing: border-box;
 }
-._DraggableComponent_1nlo8_1:hover:not(._DraggableComponent--isLocked_1nlo8_39) > ._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent_1phls_1:hover:not(._DraggableComponent--isLocked_1phls_38) > ._DraggableComponent-overlay_1phls_24 {
   display: block;
   pointer-events: none;
 }
-._DraggableComponent--forceHover_1nlo8_45 > ._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent--forceHover_1phls_44 > ._DraggableComponent-overlay_1phls_24 {
   display: block;
   pointer-events: none;
 }
-._DraggableComponent--indicativeHover_1nlo8_50 > ._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent_1phls_1:not(._DraggableComponent--isSelected_1phls_49) > ._DraggableComponent-overlay_1phls_24 {
+  outline: 2px var(--puck-color-azure-8) solid;
+}
+._DraggableComponent--indicativeHover_1phls_54 > ._DraggableComponent-overlay_1phls_24 {
   display: block;
   background: transparent;
   pointer-events: none;
 }
-._DraggableComponent_1nlo8_1:not(._DraggableComponent--isSelected_1nlo8_57):has(._DraggableComponent_1nlo8_1:hover > ._DraggableComponent-overlay_1nlo8_24) > ._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent_1phls_1:not(._DraggableComponent--isSelected_1phls_49):has(._DraggableComponent_1phls_1:hover > ._DraggableComponent-overlay_1phls_24) > ._DraggableComponent-overlay_1phls_24 {
   display: none;
 }
-._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 {
+._DraggableComponent--isSelected_1phls_49 {
+  outline: 2px var(--puck-color-azure-6) solid;
+}
+._DraggableComponent--isSelected_1phls_49 > ._DraggableComponent-overlay_1phls_24 {
   background: none;
   display: block;
-  outline: 2px var(--puck-color-azure-6) solid;
+  position: sticky;
+  top: 56px;
+  z-index: 1;
 }
-._DraggableComponent-actions_1nlo8_70 {
+._DraggableComponent-actions_1phls_80 {
   position: absolute;
   right: 6.5px;
   width: auto;
@@ -279,10 +286,10 @@
   pointer-events: auto;
   box-sizing: border-box;
 }
-._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 > ._DraggableComponent-actions_1nlo8_70 {
+._DraggableComponent--isSelected_1phls_49 > ._DraggableComponent-overlay_1phls_24 > ._DraggableComponent-actions_1phls_80 {
   display: flex;
 }
-._DraggableComponent-actionsLabel_1nlo8_93 {
+._DraggableComponent-actionsLabel_1phls_103 {
   color: var(--puck-color-grey-7);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
@@ -296,7 +303,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._DraggableComponent-action_1nlo8_70 {
+._DraggableComponent-action_1phls_80 {
   background: transparent;
   border: none;
   color: var(--puck-color-grey-7);
@@ -304,14 +311,14 @@
   border-radius: 4px;
   overflow: hidden;
 }
-._DraggableComponent-action_1nlo8_70:hover {
+._DraggableComponent-action_1phls_80:hover {
   background: var(--puck-color-grey-2);
   color: var(--puck-color-azure-5);
   cursor: pointer;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
-._DropZone_1980k_1 {
+._DropZone_ou0z5_1 {
   margin-left: auto;
   margin-right: auto;
   zoom: 1.33;
@@ -320,39 +327,37 @@
   outline-offset: -1px;
   width: 100%;
 }
-._DropZone-content_1980k_11 {
+._DropZone-content_ou0z5_11 {
   min-height: 128px;
   height: 100%;
 }
-._DropZone--userIsDragging_1980k_16 ._DropZone-content_1980k_11 {
+._DropZone--userIsDragging_ou0z5_16 ._DropZone-content_ou0z5_11 {
   pointer-events: all;
 }
-._DropZone--userIsDragging_1980k_16:not(._DropZone--draggingOverArea_1980k_20):not(._DropZone--draggingNewComponent_1980k_21) > ._DropZone-content_1980k_11 {
+._DropZone--userIsDragging_ou0z5_16:not(._DropZone--draggingOverArea_ou0z5_20):not(._DropZone--draggingNewComponent_ou0z5_21) > ._DropZone-content_ou0z5_11 {
   pointer-events: none;
 }
-._DropZone--isAreaSelected_1980k_27,
-._DropZone--draggingOverArea_1980k_20:not(:has(._DropZone--hoveringOverArea_1980k_28)),
-._DropZone--hoveringOverArea_1980k_28:not(._DropZone--isDisabled_1980k_29):not(._DropZone--isRootZone_1980k_30) {
+._DropZone--isAreaSelected_ou0z5_27,
+._DropZone--draggingOverArea_ou0z5_20:not(:has(._DropZone--hoveringOverArea_ou0z5_28)),
+._DropZone--hoveringOverArea_ou0z5_28:not(._DropZone--isDisabled_ou0z5_29):not(._DropZone--isRootZone_ou0z5_30) {
   background: var(--puck-color-azure-9);
   outline: 2px dashed var(--puck-color-azure-7);
 }
-._DropZone_1980k_1:not(._DropZone--hasChildren_1980k_36) {
+._DropZone_ou0z5_1:not(._DropZone--hasChildren_ou0z5_36) {
   background: var(--puck-color-azure-9);
   outline: 2px dashed var(--puck-color-azure-7);
 }
-._DropZone--isDestination_1980k_41 {
+._DropZone--isDestination_ou0z5_41 {
   outline: 2px dashed var(--puck-color-azure-3) !important;
 }
-._DropZone--isDestination_1980k_41:not(._DropZone--isRootZone_1980k_30) {
+._DropZone--isDestination_ou0z5_41:not(._DropZone--isRootZone_ou0z5_30) {
   background: var(--puck-color-azure-85) !important;
 }
-._DropZone-item_1980k_49 {
+._DropZone-item_ou0z5_49 {
   position: relative;
+  z-index: 0;
 }
-._DropZone-item_1980k_49:has(._DropZone--draggingOverArea_1980k_20) {
-  z-index: 1;
-}
-._DropZone-hitbox_1980k_57 {
+._DropZone-hitbox_ou0z5_54 {
   position: absolute;
   bottom: -12px;
   height: 24px;
@@ -744,39 +749,40 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
-._Heading_1y35v_1 {
+._Heading_1bvy5_1 {
   display: block;
+  color: var(--puck-color-black);
   font-family: var(--puck-font-stack);
   font-weight: 700;
   margin: 0;
 }
-._Heading_1y35v_1 b {
+._Heading_1bvy5_1 b {
   font-weight: 700;
 }
-._Heading--xxxxl_1y35v_12 {
+._Heading--xxxxl_1bvy5_13 {
   font-size: var(--puck-font-size-xxxxl);
   letter-spacing: 0.08ch;
   font-weight: 800;
 }
-._Heading--xxxl_1y35v_18 {
+._Heading--xxxl_1bvy5_19 {
   font-size: var(--puck-font-size-xxxl);
 }
-._Heading--xxl_1y35v_22 {
+._Heading--xxl_1bvy5_23 {
   font-size: var(--puck-font-size-xxl);
 }
-._Heading--xl_1y35v_26 {
+._Heading--xl_1bvy5_27 {
   font-size: var(--puck-font-size-xl);
 }
-._Heading--l_1y35v_30 {
+._Heading--l_1bvy5_31 {
   font-size: var(--puck-font-size-l);
 }
-._Heading--m_1y35v_34 {
+._Heading--m_1bvy5_35 {
   font-size: var(--puck-font-size-m);
 }
-._Heading--s_1y35v_38 {
+._Heading--s_1bvy5_39 {
   font-size: var(--puck-font-size-s);
 }
-._Heading--xs_1y35v_42 {
+._Heading--xs_1bvy5_43 {
   font-size: var(--puck-font-size-xs);
 }
 

package/dist/index.js

@@ -1223,7 +1223,7 @@ var import_react_beautiful_dnd = require("react-beautiful-dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-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" };
+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" };
 
 // ../../node_modules/react-feather/dist/index.js
 init_react_import();
@@ -2451,12 +2451,12 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2("actions"), children: [
               label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("actionsLabel"), children: label }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(copy_default, { size: 16 }) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(trash_default, { size: 16 }) })
-            ] }) })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children })
           ]
         })
       )
@@ -2548,7 +2548,7 @@ var replace = (list, index, newItem) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-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" };
+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" };
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -2782,97 +2782,108 @@ function DropZoneEdit({ zone, style }) {
                       editMode: true
                     });
                     const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
+                    const isDragging = ((draggedItem == null ? void 0 : draggedItem.draggableId) || "draggable-").split(
+                      "draggable-"
+                    )[1] === componentId;
                     const containsZone = areasWithZones ? areasWithZones[componentId] : false;
                     const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
                       "No configuration for ",
                       item.type
                     ] });
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName3("item"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        DropZoneProvider,
-                        {
-                          value: __spreadProps(__spreadValues({}, ctx), {
-                            areaId: componentId
-                          }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                            DraggableComponent,
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "div",
+                      {
+                        className: getClassName3("item"),
+                        style: { zIndex: isDragging ? 1 : void 0 },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            DropZoneProvider,
                             {
-                              label: item.type.toString(),
-                              id: `draggable-${componentId}`,
-                              index: i,
-                              isSelected,
-                              isLocked: userIsDragging,
-                              forceHover: hoveringComponent === componentId && !userIsDragging,
-                              indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
-                              onMount: () => {
-                                ctx.registerPath({
-                                  index: i,
-                                  zone: zoneCompound
-                                });
-                              },
-                              onClick: (e) => {
-                                setItemSelector({
+                              value: __spreadProps(__spreadValues({}, ctx), {
+                                areaId: componentId
+                              }),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                DraggableComponent,
+                                {
+                                  label: item.type.toString(),
+                                  id: `draggable-${componentId}`,
                                   index: i,
-                                  zone: zoneCompound
-                                });
-                                e.stopPropagation();
-                              },
+                                  isSelected,
+                                  isLocked: userIsDragging,
+                                  forceHover: hoveringComponent === componentId && !userIsDragging,
+                                  indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
+                                  onMount: () => {
+                                    ctx.registerPath({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                  },
+                                  onClick: (e) => {
+                                    setItemSelector({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  onMouseOver: (e) => {
+                                    e.stopPropagation();
+                                    if (containsZone) {
+                                      setHoveringArea(componentId);
+                                    } else {
+                                      setHoveringArea(zoneArea);
+                                    }
+                                    setHoveringComponent(componentId);
+                                    setHoveringZone(zoneCompound);
+                                  },
+                                  onMouseOut: () => {
+                                    setHoveringArea(null);
+                                    setHoveringZone(null);
+                                    setHoveringComponent(null);
+                                  },
+                                  onDelete: (e) => {
+                                    dispatch({
+                                      type: "remove",
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    setItemSelector(null);
+                                    e.stopPropagation();
+                                  },
+                                  onDuplicate: (e) => {
+                                    dispatch({
+                                      type: "duplicate",
+                                      sourceIndex: i,
+                                      sourceZone: zoneCompound
+                                    });
+                                    setItemSelector({
+                                      zone: zoneCompound,
+                                      index: i + 1
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  style: {
+                                    pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                                }
+                              )
+                            }
+                          ),
+                          userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "div",
+                            {
+                              className: getClassName3("hitbox"),
                               onMouseOver: (e) => {
                                 e.stopPropagation();
-                                if (containsZone) {
-                                  setHoveringArea(componentId);
-                                } else {
-                                  setHoveringArea(zoneArea);
-                                }
-                                setHoveringComponent(componentId);
+                                setHoveringArea(zoneArea);
                                 setHoveringZone(zoneCompound);
-                              },
-                              onMouseOut: () => {
-                                setHoveringArea(null);
-                                setHoveringZone(null);
-                                setHoveringComponent(null);
-                              },
-                              onDelete: (e) => {
-                                dispatch({
-                                  type: "remove",
-                                  index: i,
-                                  zone: zoneCompound
-                                });
-                                setItemSelector(null);
-                                e.stopPropagation();
-                              },
-                              onDuplicate: (e) => {
-                                dispatch({
-                                  type: "duplicate",
-                                  sourceIndex: i,
-                                  sourceZone: zoneCompound
-                                });
-                                setItemSelector({
-                                  zone: zoneCompound,
-                                  index: i + 1
-                                });
-                                e.stopPropagation();
-                              },
-                              style: {
-                                pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                              }
                             }
                           )
-                        }
-                      ),
-                      userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        "div",
-                        {
-                          className: getClassName3("hitbox"),
-                          onMouseOver: (e) => {
-                            e.stopPropagation();
-                            setHoveringArea(zoneArea);
-                            setHoveringZone(zoneCompound);
-                          }
-                        }
-                      )
-                    ] }, item.props.id);
+                        ]
+                      },
+                      item.props.id
+                    );
                   }),
                   provided == null ? void 0 : provided.placeholder,
                   (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -3463,7 +3474,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-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" };
+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" };
 
 // components/Heading/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -4430,29 +4441,50 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       style: {
-                        padding: 32,
                         overflowY: "auto",
                         gridArea: "editor",
-                        position: "relative"
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "column"
                       },
                       onClick: () => setItemSelector(null),
                       id: "puck-frame",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        "div",
-                        {
-                          className: "puck-root",
-                          style: {
-                            border: "1px solid var(--puck-color-grey-8)",
-                            boxShadow: "0px 0px 0px 3rem var(--puck-color-grey-10)",
-                            zoom: 0.75
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "div",
+                          {
+                            className: "puck-root",
+                            style: {
+                              boxShadow: "0px 0px 0px 32px var(--puck-color-grey-10)",
+                              margin: 32,
+                              zoom: 0.75
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              "div",
+                              {
+                                style: {
+                                  border: "1px solid var(--puck-color-grey-8)"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "div",
+                          {
+                            style: {
+                              background: "var(--puck-color-grey-10)",
+                              height: "100%",
+                              flexGrow: 1
+                            }
+                          }
+                        )
+                      ]
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.9.0-canary.fe1629e",
+  "version": "0.9.1-canary.3602b0f",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",