Implement new drag-and-drop engine

apps/demo/app/[...puckPath]/client.tsx

@@ -21,6 +21,8 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
 
   if (!isClient) return null;
 
+  const params = new URL(window.location.href).searchParams;
+
   if (isEdit) {
     return (
       <div>
@@ -32,6 +34,9 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
           }}
           plugins={[headingAnalyzer]}
           headerPath={path}
+          iframe={{
+            enabled: params.get("disableIframe") === "true" ? false : true,
+          }}
           overrides={{
             headerActions: ({ children }) => (
               <>

apps/demo/app/custom-ui/[...puckPath]/client.tsx

@@ -281,13 +281,15 @@ const CustomDrawer = () => {
   const { getPermissions } = usePuck();
 
   return (
-    <Drawer direction="horizontal">
+    <Drawer>
       <div
         style={{
-          display: "flex",
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))",
           pointerEvents: "all",
           padding: "16px",
           background: "var(--puck-color-grey-12)",
+          gap: 8,
         }}
       >
         {Object.keys(config.components).map((componentKey, componentIndex) => {
@@ -299,19 +301,8 @@ const CustomDrawer = () => {
             <Drawer.Item
               key={componentKey}
               name={componentKey}
-              index={componentIndex}
               isDragDisabled={!canInsert}
-            >
-              {({ children }) => (
-                <div
-                  style={{
-                    marginRight: 8,
-                  }}
-                >
-                  {children}
-                </div>
-              )}
-            </Drawer.Item>
+            />
           );
         })}
       </div>
@@ -377,7 +368,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
           outline: ({ children }) => (
             <div style={{ padding: 16 }}>{children}</div>
           ),
-          actionBar: ({ children, label }) => {
+          actionBar: ({ children, label, parentAction }) => {
             const { getPermissions, selectedItem, refreshPermissions } =
               // Disable rules of hooks since this is a render function
               // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -397,15 +388,23 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
 
             if (!selectedItem)
               return (
-                <ActionBar label={label}>
+                <ActionBar>
+                  <ActionBar.Group>
+                    {parentAction}
+                    {label && <ActionBar.Label label={label} />}
+                  </ActionBar.Group>
                   <ActionBar.Group>{children}</ActionBar.Group>
                 </ActionBar>
               );
 
             const isLocked = !!lockedComponents[selectedItem.props.id];
 
             return (
-              <ActionBar label={label}>
+              <ActionBar>
+                <ActionBar.Group>
+                  {parentAction}
+                  {label && <ActionBar.Label label={label} />}
+                </ActionBar.Group>
                 <ActionBar.Group>
                   {children}
                   {globalPermissions.lockable && (

apps/demo/config/blocks/Blank/index.tsx

@@ -3,11 +3,11 @@ import { ComponentConfig } from "@/core";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 
-const getClassName = getClassNameFactory("Hero", styles);
+const getClassName = getClassNameFactory("Blank", styles);
 
-export type HeroProps = {};
+export type BlankProps = {};
 
-export const Hero: ComponentConfig<HeroProps> = {
+export const Blank: ComponentConfig<BlankProps> = {
   fields: {},
   defaultProps: {},
   render: () => {

apps/demo/config/blocks/Blank/styles.module.css

@@ -1,4 +1,4 @@
-.Hero {
+.Blank {
   background: hotpink;
   padding: 16px;
 }

apps/demo/config/blocks/Button/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ComponentConfig } from "@/core/types";
+import { Button as _Button } from "@/core/components/Button";
+
+export type ButtonProps = {
+  label: string;
+  href: string;
+  variant: "primary" | "secondary";
+};
+
+export const Button: ComponentConfig<ButtonProps> = {
+  label: "Button",
+  fields: {
+    label: { type: "text" },
+    href: { type: "text" },
+    variant: {
+      type: "radio",
+      options: [
+        { label: "primary", value: "primary" },
+        { label: "secondary", value: "secondary" },
+      ],
+    },
+  },
+  defaultProps: {
+    label: "Button",
+    href: "#",
+    variant: "primary",
+  },
+  render: ({ href, variant, label, puck }) => {
+    return (
+      <div>
+        <_Button
+          href={puck.isEditing ? "#" : href}
+          variant={variant}
+          size="large"
+          tabIndex={puck.isEditing ? -1 : undefined}
+        >
+          {label}
+        </_Button>
+      </div>
+    );
+  },
+};

apps/demo/config/blocks/Card/index.tsx

@@ -5,6 +5,7 @@ import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import dynamic from "next/dynamic";
 import dynamicIconImports from "lucide-react/dynamicIconImports";
+import { withLayout, WithLayout } from "../../components/Layout";
 
 const getClassName = getClassNameFactory("Card", styles);
 
@@ -24,14 +25,14 @@ const iconOptions = Object.keys(dynamicIconImports).map((iconName) => ({
   value: iconName,
 }));
 
-export type CardProps = {
+export type CardProps = WithLayout<{
   title: string;
   description: string;
   icon?: string;
   mode: "flat" | "card";
-};
+}>;
 
-export const Card: ComponentConfig<CardProps> = {
+const CardInner: ComponentConfig<CardProps> = {
   fields: {
     title: { type: "text" },
     description: { type: "textarea" },
@@ -56,10 +57,15 @@ export const Card: ComponentConfig<CardProps> = {
   render: ({ title, icon, description, mode }) => {
     return (
       <div className={getClassName({ [mode]: mode })}>
-        <div className={getClassName("icon")}>{icon && icons[icon]}</div>
-        <div className={getClassName("title")}>{title}</div>
-        <div className={getClassName("description")}>{description}</div>
+        <div className={getClassName("inner")}>
+          <div className={getClassName("icon")}>{icon && icons[icon]}</div>
+
+          <div className={getClassName("title")}>{title}</div>
+          <div className={getClassName("description")}>{description}</div>
+        </div>
       </div>
     );
   },
 };
+
+export const Card = withLayout(CardInner);

apps/demo/config/blocks/Card/styles.module.css

@@ -1,24 +1,24 @@
 .Card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-left: auto;
-  margin-right: auto;
-  gap: 16px;
-  width: 100%;
+  height: 100%;
 }
 
 .Card--card {
   background: white;
   box-shadow: rgba(140, 152, 164, 0.25) 0px 3px 6px 0px;
   border-radius: 8px;
-  flex: 1;
   max-width: 100%;
-  margin-left: unset;
-  margin-right: unset;
-  padding: 24px;
+}
+
+.Card-inner {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}
+
+.Card--card .Card-inner {
   align-items: flex-start;
-  width: auto;
+  padding: 24px;
 }
 
 .Card-icon {