@measured/puck 0.8.0-canary.f4b0563 → 0.9.0-canary.1822536

package/README.md

@@ -160,6 +160,63 @@ export const MyComponent: ComponentConfig = {
 };
 ```
 
+## DropZones
+
+Puck supports creating complex layouts (like multi-column layouts) using the `<DropZone>` component.
+
+### Example
+
+In this example, we use the `<DropZone>` component to render two nested DropZones within another component:
+
+```tsx
+import { DropZone } from "@measured/puck";
+
+export const MyComponent: ComponentConfig = {
+  render: () => {
+    return (
+      <div>
+        <DropZone zone="first-drop-zone">
+        <DropZone zone="second-drop-zone">
+      </div>
+    )
+  }
+};
+```
+
+### Custom root entry points
+
+You can also do this at the root of your component. This is useful if you have a fixed layout and only want to make certain parts of your page customisable:
+
+```tsx
+import { DropZone, Config } from "@measured/puck";
+
+export const config: Config = {
+  root: {
+    render: ({ children }) => {
+      return (
+        <div>
+          {/* children renders the default zone. This can be omitted if necessary. */}
+          {children}
+
+          <div>
+            <DropZone zone="other-drop-zone">
+          </div>
+        </div>
+      )
+    }
+  }
+};
+```
+
+### The Rules of DropZones
+
+The current DropZone implementation has certain rules and limitations:
+
+1. You can drag from the component list on the LHS into any DropZone
+2. You can drag components between DropZones, so long as those DropZones share a parent (also known as _area_)
+3. You can't drag between DropZones that don't share a parent (or _area_)
+4. Your mouse must be directly over a DropZone for a collision to be detected
+
 ## Reference
 
 ### `<Puck>`
@@ -183,6 +240,13 @@ The `<Render>` component renders user-facing UI using Puck data.
 - **config** (`Config`): Puck component configuration
 - **data** (`Data`): Data to render
 
+### `<DropZone>`
+
+The `<DropZone>` component allows you to create advanced layouts, like multi-columns.
+
+- **zone** (`string`): Identifier for the zone of your component, unique to the parent component
+- **style** (`CSSProperties`): Custom inline styles
+
 ### `Config`
 
 The `Config` object describes which components Puck should render, how they should render and which inputs are available to them.

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);
 }