@tightknitai/block-kitchen 0.8.8 → 0.8.10

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, MoreHorizontal, Send, Search, CheckCircle2, Check, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Pencil, Copy, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Link as Link$1, Smile } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, MoreHorizontal, Send, Search, CheckCircle2, Check, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Pencil, Copy, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useMemo, useState, useCallback, useRef, useEffect, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -23,6 +23,34 @@ import 'slack-blocks-to-jsx/dist/style.css';
 import { Message } from 'slack-blocks-to-jsx';
 
 // src/components/block-kitchen.tsx
+
+// src/lib/container-blocks.ts
+var CONTAINER_CHILD_TYPES = /* @__PURE__ */ new Set([
+  "actions",
+  "context",
+  "divider",
+  "header",
+  "image",
+  "input",
+  "rich_text",
+  "section",
+  "table",
+  "video"
+]);
+var MAX_CONTAINER_CHILDREN = 10;
+function isContainerChildType(type) {
+  return CONTAINER_CHILD_TYPES.has(type);
+}
+var BODY_PREFIX = "container-body:";
+function containerBodyId(containerId) {
+  return `${BODY_PREFIX}${containerId}`;
+}
+function parseContainerBodyId(id) {
+  if (typeof id !== "string" || !id.startsWith(BODY_PREFIX)) {
+    return null;
+  }
+  return id.slice(BODY_PREFIX.length);
+}
 function makeEmojiHook(byName) {
   return (data, parse) => {
     const entry = byName.get(data.name);
@@ -1982,9 +2010,52 @@ function useBlockKitValidation(blocks, surface) {
   }, [blocks, surface]);
   return state;
 }
+function mirror(node) {
+  if (!node.children) {
+    return node;
+  }
+  return {
+    ...node,
+    block: { ...node.block, child_blocks: node.children.map((c) => c.block) }
+  };
+}
 function wrap(block) {
+  if (block.type === "container") {
+    const children = (block.child_blocks ?? []).map(wrap);
+    return mirror({ id: nanoid(8), block, children });
+  }
   return { id: nanoid(8), block };
 }
+function cloneNode(node) {
+  if (node.children) {
+    return mirror({ id: nanoid(8), block: structuredClone(node.block), children: node.children.map(cloneNode) });
+  }
+  return { id: nanoid(8), block: structuredClone(node.block) };
+}
+function applyUpdate(node, block) {
+  if (node.children) {
+    return mirror({ ...node, block });
+  }
+  return { ...node, block };
+}
+function locate(blocks, id) {
+  const top = blocks.findIndex((b) => b.id === id);
+  if (top !== -1) {
+    return { kind: "top", index: top };
+  }
+  for (const block of blocks) {
+    if (block.children) {
+      const idx = block.children.findIndex((c) => c.id === id);
+      if (idx !== -1) {
+        return { kind: "child", parentId: block.id, index: idx };
+      }
+    }
+  }
+  return null;
+}
+function withChildren(blocks, parentId, fn) {
+  return blocks.map((b) => b.id === parentId && b.children ? mirror({ ...b, children: fn(b.children) }) : b);
+}
 function useBlockKitchenState({
   initialBlocks,
   onChange
@@ -2005,41 +2076,113 @@ function useBlockKitchenState({
   const addBlock = useCallback((block, atIndex) => {
     setBlocks((prev) => {
       const next = [...prev];
-      const inserted = wrap(block);
       const idx = atIndex === void 0 ? next.length : Math.max(0, Math.min(atIndex, next.length));
-      next.splice(idx, 0, inserted);
+      next.splice(idx, 0, wrap(block));
       return next;
     });
   }, []);
+  const addChild = useCallback((parentId, block, atIndex) => {
+    if (!isContainerChildType(block.type)) {
+      return;
+    }
+    setBlocks(
+      (prev) => withChildren(prev, parentId, (children) => {
+        if (children.length >= MAX_CONTAINER_CHILDREN) {
+          return children;
+        }
+        const next = [...children];
+        const idx = atIndex === void 0 ? next.length : Math.max(0, Math.min(atIndex, next.length));
+        next.splice(idx, 0, wrap(block));
+        return next;
+      })
+    );
+  }, []);
   const updateBlock = useCallback((id, block) => {
-    setBlocks((prev) => prev.map((b) => b.id === id ? { ...b, block } : b));
+    setBlocks(
+      (prev) => prev.map((b) => {
+        if (b.id === id) {
+          return applyUpdate(b, block);
+        }
+        if (b.children?.some((c) => c.id === id)) {
+          return mirror({ ...b, children: b.children.map((c) => c.id === id ? applyUpdate(c, block) : c) });
+        }
+        return b;
+      })
+    );
   }, []);
   const removeBlock = useCallback((id) => {
-    setBlocks((prev) => prev.filter((b) => b.id !== id));
+    setBlocks((prev) => {
+      if (prev.some((b) => b.id === id)) {
+        return prev.filter((b) => b.id !== id);
+      }
+      return prev.map(
+        (b) => b.children?.some((c) => c.id === id) ? mirror({ ...b, children: b.children.filter((c) => c.id !== id) }) : b
+      );
+    });
   }, []);
   const duplicateBlock = useCallback((id) => {
     setBlocks((prev) => {
-      const idx = prev.findIndex((b) => b.id === id);
-      if (idx === -1) {
+      const loc = locate(prev, id);
+      if (!loc) {
         return prev;
       }
-      const source = prev[idx];
-      const next = [...prev];
-      next.splice(idx + 1, 0, wrap(structuredClone(source.block)));
-      return next;
+      if (loc.kind === "top") {
+        const next = [...prev];
+        next.splice(loc.index + 1, 0, cloneNode(prev[loc.index]));
+        return next;
+      }
+      return withChildren(prev, loc.parentId, (children) => {
+        const next = [...children];
+        next.splice(loc.index + 1, 0, cloneNode(children[loc.index]));
+        return next;
+      });
     });
   }, []);
   const reorderBlock = useCallback((fromId, toIndex) => {
     setBlocks((prev) => {
-      const fromIndex = prev.findIndex((b) => b.id === fromId);
-      if (fromIndex === -1) {
+      const loc = locate(prev, fromId);
+      if (!loc) {
         return prev;
       }
-      const next = [...prev];
-      const [moved] = next.splice(fromIndex, 1);
-      const clamped = Math.max(0, Math.min(toIndex, next.length));
-      next.splice(clamped, 0, moved);
-      return next;
+      const reorder = (list) => {
+        const next = [...list];
+        const [moved] = next.splice(loc.index, 1);
+        next.splice(Math.max(0, Math.min(toIndex, next.length)), 0, moved);
+        return next;
+      };
+      if (loc.kind === "top") {
+        return reorder(prev);
+      }
+      return withChildren(prev, loc.parentId, reorder);
+    });
+  }, []);
+  const moveBlock = useCallback((activeId, target) => {
+    setBlocks((prev) => {
+      const loc = locate(prev, activeId);
+      if (!loc) {
+        return prev;
+      }
+      const moved = loc.kind === "top" ? prev[loc.index] : prev.find((b) => b.id === loc.parentId)?.children?.[loc.index];
+      if (!moved) {
+        return prev;
+      }
+      if (target.kind === "container") {
+        if (moved.children || !isContainerChildType(moved.block.type)) {
+          return prev;
+        }
+        const sameContainer = loc.kind === "child" && loc.parentId === target.parentId;
+        const destCount = prev.find((b) => b.id === target.parentId)?.children?.length ?? 0;
+        if (!sameContainer && destCount >= MAX_CONTAINER_CHILDREN) {
+          return prev;
+        }
+      }
+      const detached = loc.kind === "top" ? prev.filter((_, i) => i !== loc.index) : withChildren(prev, loc.parentId, (children) => children.filter((_, i) => i !== loc.index));
+      const insert = (list) => {
+        const next = [...list];
+        next.splice(Math.max(0, Math.min(target.index, next.length)), 0, moved);
+        return next;
+      };
+      return target.kind === "container" ? withChildren(detached, target.parentId, insert) : insert(detached);
     });
   }, []);
   const replaceAll = useCallback((newBlocks) => {
@@ -2048,10 +2191,12 @@ function useBlockKitchenState({
   return {
     blocks,
     addBlock,
+    addChild,
     updateBlock,
     removeBlock,
     duplicateBlock,
     reorderBlock,
+    moveBlock,
     replaceAll
   };
 }
@@ -3250,12 +3395,16 @@ function AlertEditor({ block, onChange }) {
     ) })
   ] });
 }
-function CardEditor({ block, onChange }) {
+function CardEditor({
+  block,
+  onChange,
+  idPrefix = "card"
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: "card-title", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-title`, children: /* @__PURE__ */ jsx(
       Input,
       {
-        id: "card-title",
+        id: `${idPrefix}-title`,
         value: block.title?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. New launch update",
@@ -3265,10 +3414,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: "card-subtitle", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: `${idPrefix}-subtitle`, children: /* @__PURE__ */ jsx(
       Input,
       {
-        id: "card-subtitle",
+        id: `${idPrefix}-subtitle`,
         value: block.subtitle?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. Released April 28",
@@ -3278,10 +3427,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: "card-body", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-body`, children: /* @__PURE__ */ jsx(
       Textarea,
       {
-        id: "card-body",
+        id: `${idPrefix}-body`,
         value: block.body?.text ?? "",
         maxLength: 200,
         rows: 3,
@@ -3297,7 +3446,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Hero image",
         help: "Wide image displayed at the top of the card.",
-        idPrefix: "card-hero",
+        idPrefix: `${idPrefix}-hero`,
         image: block.hero_image,
         onChange: (next) => onChange({ ...block, hero_image: next })
       }
@@ -3307,7 +3456,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Icon",
         help: "Small image shown next to the title.",
-        idPrefix: "card-icon",
+        idPrefix: `${idPrefix}-icon`,
         image: block.icon,
         onChange: (next) => onChange({ ...block, icon: next })
       }
@@ -3315,6 +3464,7 @@ function CardEditor({ block, onChange }) {
     /* @__PURE__ */ jsx(
       ButtonsField,
       {
+        idPrefix,
         buttons: block.actions ?? [],
         onChange: (next) => onChange({ ...block, actions: next.length > 0 ? next : void 0 })
       }
@@ -3371,7 +3521,11 @@ function ImageFields({
     ) })
   ] });
 }
-function ButtonsField({ buttons, onChange }) {
+function ButtonsField({
+  buttons,
+  onChange,
+  idPrefix = "card"
+}) {
   const update = (idx, change) => {
     onChange(buttons.map((b, i) => i === idx ? { ...b, ...change } : b));
   };
@@ -3414,10 +3568,10 @@ function ButtonsField({ buttons, onChange }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(EditorField, { label: "Label", htmlFor: `card-btn-label-${idx}`, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(EditorField, { label: "Label", htmlFor: `${idPrefix}-btn-label-${idx}`, children: /* @__PURE__ */ jsx(
           Input,
           {
-            id: `card-btn-label-${idx}`,
+            id: `${idPrefix}-btn-label-${idx}`,
             value: label,
             placeholder: "e.g. Open",
             onChange: (e) => update(idx, {
@@ -3434,11 +3588,11 @@ function ButtonsField({ buttons, onChange }) {
           {
             label: "Link URL",
             help: "Optional. If set, the button opens this link.",
-            htmlFor: `card-btn-url-${idx}`,
+            htmlFor: `${idPrefix}-btn-url-${idx}`,
             children: /* @__PURE__ */ jsx(
               Input,
               {
-                id: `card-btn-url-${idx}`,
+                id: `${idPrefix}-btn-url-${idx}`,
                 type: "url",
                 value: url,
                 placeholder: "e.g. https://example.com",
@@ -3457,8 +3611,8 @@ function ButtonsField({ buttons, onChange }) {
             },
             className: "flex flex-row gap-3",
             children: ["default", "primary", "danger"].map((s) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(RadioGroupItem, { value: s, id: `card-btn-style-${idx}-${s}` }),
-              /* @__PURE__ */ jsx(Label, { htmlFor: `card-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: s, id: `${idPrefix}-btn-style-${idx}-${s}` }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${idPrefix}-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
             ] }, s))
           }
         ) })
@@ -3507,8 +3661,8 @@ function CarouselEditor({ block, onChange }) {
     });
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards. For icon, hero image, or action edits, use the View JSON drawer." }),
-    elements.map((card, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards." }),
+    elements.map((card, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
           "Card ",
@@ -3526,33 +3680,7 @@ function CarouselEditor({ block, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(EditorField, { label: "Title", htmlFor: `carousel-card-title-${idx}`, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: `carousel-card-title-${idx}`,
-          value: card.title?.text ?? "",
-          maxLength: 150,
-          placeholder: "e.g. Card title",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            title: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(EditorField, { label: "Body", htmlFor: `carousel-card-body-${idx}`, children: /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          id: `carousel-card-body-${idx}`,
-          value: card.body?.text ?? "",
-          maxLength: 200,
-          rows: 2,
-          placeholder: "e.g. Short card description.",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            body: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) })
+      /* @__PURE__ */ jsx(CardEditor, { block: card, idPrefix: `carousel-card-${idx}`, onChange: (next) => updateCard(idx, next) })
     ] }, idx)),
     /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addCard, disabled: elements.length >= MAX_CARDS, className: "self-start", children: [
       /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
@@ -3560,22 +3688,10 @@ function CarouselEditor({ block, onChange }) {
     ] })
   ] });
 }
-var MAX_CHILDREN = 10;
 var WIDTHS = ["narrow", "standard", "wide", "full"];
 function ContainerEditor({ block, onChange }) {
-  const children = block.child_blocks ?? [];
   const iconUrl = block.icon && "image_url" in block.icon ? block.icon.image_url ?? "" : "";
   const iconAlt = block.icon?.alt_text ?? "";
-  const removeChildAt = (idx) => {
-    onChange({ ...block, child_blocks: children.filter((_, i) => i !== idx) });
-  };
-  const addChild = () => {
-    const child = {
-      type: "section",
-      text: { type: "mrkdwn", text: "New block." }
-    };
-    onChange({ ...block, child_blocks: [...children, child] });
-  };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsx(EditorField, { label: "Title", help: "Heading shown at the top of the container.", htmlFor: "container-title", children: /* @__PURE__ */ jsx(
       Input,
@@ -3650,42 +3766,7 @@ function ContainerEditor({ block, onChange }) {
         onChange: (checked) => onChange({ ...block, default_collapsed: checked || void 0 })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Child blocks" }),
-      /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "A container holds 1-10 blocks. To edit a child's content, use the View JSON drawer." }),
-      children.map((child, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/20 px-3 py-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
-          idx + 1,
-          ". ",
-          labelForBlockType(child.type)
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Remove child block",
-            onClick: () => removeChildAt(idx),
-            disabled: children.length <= 1,
-            className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ] }, idx)),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          size: "sm",
-          onClick: addChild,
-          disabled: children.length >= MAX_CHILDREN,
-          className: "self-start",
-          children: [
-            /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
-            " Add block"
-          ]
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Drag blocks into the container on the canvas to add them (1-10), and drag them out to remove. Click a child to edit it." })
   ] });
 }
 function Checkbox({
@@ -8256,6 +8337,225 @@ function RichTextInlineEditor({
     }
   );
 }
+function ContainerRow({
+  builderBlock,
+  previewHooks,
+  previewTheme,
+  errorsByBlockId,
+  openBlockId,
+  onOpenBlockChange,
+  onUpdate,
+  onDuplicate,
+  onDelete,
+  onReorder,
+  index,
+  total,
+  isPaletteDrag = false
+}) {
+  const { id } = builderBlock;
+  const block = builderBlock.block;
+  const children = builderBlock.children ?? [];
+  const errors = errorsByBlockId?.get(id);
+  const hasErrors = !!errors && errors.length > 0;
+  const isOpen = openBlockId === id;
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const { role: _dndRole, tabIndex: _dndTabIndex, ...sortableA11yAttrs } = attributes;
+  const { setNodeRef: setBodyRef, isOver: isBodyOver } = useDroppable({ id: containerBodyId(id) });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+  const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden rounded-md border bg-card transition-shadow",
+              hasErrors ? "border-destructive/60" : "border-border"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(open ? id : null), children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-label": "Edit container",
+                    ...sortableA11yAttrs,
+                    ...listeners,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onOpenBlockChange?.(!isOpen ? id : null);
+                      }
+                    },
+                    className: "flex w-full cursor-grab items-center gap-2 border-b bg-muted/40 px-3 py-2 text-left transition-colors hover:bg-muted active:cursor-grabbing",
+                    children: [
+                      icon ? /* @__PURE__ */ jsx("img", { src: icon, alt: "", "aria-hidden": "true", className: "h-5 w-5 shrink-0 rounded object-cover" }) : null,
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: block.title?.text || "Container" }),
+                        block.subtitle?.text ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: block.subtitle.text }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Container" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(BlockEditor, { block, errors, onChange: (next) => onUpdate(id, next) }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: setBodyRef,
+                  className: cn(
+                    "flex flex-col gap-2 p-3 transition-colors",
+                    isPaletteDrag && "outline-2 -outline-offset-2 outline-dashed outline-primary/40",
+                    isPaletteDrag && isBodyOver && "bg-primary/5"
+                  ),
+                  children: children.length === 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex items-center justify-center rounded-md border border-dashed px-3 py-6 text-center text-[11px] transition-colors",
+                        isBodyOver ? "border-primary/60 text-primary" : "border-border text-muted-foreground"
+                      ),
+                      children: "Drag blocks here"
+                    }
+                  ) : /* @__PURE__ */ jsxs(SortableContext, { items: children.map((c) => c.id), strategy: verticalListSortingStrategy, children: [
+                    children.map((child, idx) => /* @__PURE__ */ jsx(
+                      BlockRow,
+                      {
+                        builderBlock: child,
+                        previewHooks,
+                        previewTheme,
+                        errors: errorsByBlockId?.get(child.id),
+                        isOpen: openBlockId === child.id,
+                        onOpenChange: (open) => onOpenBlockChange?.(open ? child.id : null),
+                        onUpdate,
+                        onDuplicate,
+                        onDelete,
+                        index: idx,
+                        total: children.length,
+                        onReorder,
+                        isPaletteDrag
+                      },
+                      child.id
+                    )),
+                    isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute -top-3 right-2 z-10 hidden items-center gap-0.5 rounded-md border bg-background p-0.5 shadow-sm transition-opacity md:flex",
+              hasErrors ? "opacity-100" : "opacity-0 group-hover/container:opacity-100 group-focus-within/container:opacity-100"
+            ),
+            children: [
+              hasErrors ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Show ${errors.length} validation ${errors.length === 1 ? "issue" : "issues"}`,
+                    onClick: () => onOpenBlockChange?.(id),
+                    className: "flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "top", align: "end", children: /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-0.5", children: [
+                  errors.slice(0, 4).map((err, i) => /* @__PURE__ */ jsx("li", { children: err }, i)),
+                  errors.length > 4 ? /* @__PURE__ */ jsxs("li", { className: "text-muted-foreground", children: [
+                    "and ",
+                    errors.length - 4,
+                    " more"
+                  ] }) : null
+                ] }) })
+              ] }) : null,
+              onReorder && typeof index === "number" && typeof total === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ToolbarButton2, { label: "Move up", disabled: index === 0, onClick: () => onReorder(id, index - 1), children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) }),
+                /* @__PURE__ */ jsx(ToolbarButton2, { label: "Move down", disabled: index >= total - 1, onClick: () => onReorder(id, index + 1), children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) })
+              ] }) : null,
+              /* @__PURE__ */ jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id), children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton2, { label: "Duplicate", onClick: () => onDuplicate(id), children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton2, { label: "Delete", destructive: true, onClick: () => onDelete(id), children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 rounded-md border border-dashed bg-muted/40 px-2 py-1 md:hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium text-muted-foreground", children: "Container" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Edit container",
+                onClick: () => onOpenBlockChange?.(id),
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Duplicate container",
+                onClick: () => onDuplicate(id),
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Delete container",
+                onClick: () => onDelete(id),
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ToolbarButton2({
+  label,
+  onClick,
+  disabled,
+  destructive,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        disabled,
+        onClick,
+        className: cn(
+          "flex h-6 w-6 items-center justify-center rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
+          destructive ? "hover:bg-destructive/10 hover:text-destructive" : "hover:bg-accent hover:text-foreground"
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: label })
+  ] });
+}
+function DropIndicator() {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsx("span", { className: "-left-1 -top-[3px] absolute h-2 w-2 rounded-full bg-primary shadow-[0_0_0_2px_var(--color-background)]" }) });
+}
 var SURFACE_DROPPABLE_ID = "builder-surface";
 function Surface({
   blocks,
@@ -8287,26 +8587,46 @@ function Surface({
         isPaletteDrag && isOver && (isDark ? "bg-[#2c3036]" : "bg-[#eaf0ff]")
       ),
       children: blocks.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { isDark, isPaletteDrag, isOver, onOpenPalette }) : /* @__PURE__ */ jsxs(SortableContext, { items: blocks.map((b) => b.id), strategy: verticalListSortingStrategy, children: [
-        blocks.map((block, idx) => /* @__PURE__ */ jsx(
-          BlockRow,
-          {
-            builderBlock: block,
-            previewHooks,
-            previewTheme,
-            errors: errorsByBlockId?.get(block.id),
-            isOpen: openBlockId === block.id,
-            onOpenChange: (open) => onOpenBlockChange?.(open ? block.id : null),
-            onUpdate,
-            onDuplicate,
-            onDelete,
-            index: idx,
-            total: blocks.length,
-            onReorder,
-            isPaletteDrag
-          },
-          block.id
-        )),
-        showEndDropZone ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
+        blocks.map(
+          (block, idx) => block.block.type === "container" ? /* @__PURE__ */ jsx(
+            ContainerRow,
+            {
+              builderBlock: block,
+              previewHooks,
+              previewTheme,
+              errorsByBlockId,
+              openBlockId,
+              onOpenBlockChange,
+              onUpdate,
+              onDuplicate,
+              onDelete,
+              index: idx,
+              total: blocks.length,
+              onReorder,
+              isPaletteDrag
+            },
+            block.id
+          ) : /* @__PURE__ */ jsx(
+            BlockRow,
+            {
+              builderBlock: block,
+              previewHooks,
+              previewTheme,
+              errors: errorsByBlockId?.get(block.id),
+              isOpen: openBlockId === block.id,
+              onOpenChange: (open) => onOpenBlockChange?.(open ? block.id : null),
+              onUpdate,
+              onDuplicate,
+              onDelete,
+              index: idx,
+              total: blocks.length,
+              onReorder,
+              isPaletteDrag
+            },
+            block.id
+          )
+        ),
+        showEndDropZone ? /* @__PURE__ */ jsx(DropIndicator2, {}) : null
       ] })
     }
   );
@@ -8546,7 +8866,7 @@ function EmptyState({
     }
   );
 }
-function DropIndicator() {
+function DropIndicator2() {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsx("span", { className: "-left-1 -top-[3px] absolute h-2 w-2 rounded-full bg-primary shadow-[0_0_0_2px_var(--color-background)]" }) });
 }
 var THEME_OPTIONS = [
@@ -8909,9 +9229,18 @@ function BlockKitchen(props) {
   }, [palette, disabledBlockTypes]);
   const variantById = useMemo(() => buildVariantById(paletteSections), [paletteSections]);
   const allowedSurfaces = allowedSurfacesProp && allowedSurfacesProp.length > 0 ? allowedSurfacesProp : ["message"];
-  const { blocks, addBlock, updateBlock, removeBlock, duplicateBlock, reorderBlock, replaceAll } = useBlockKitchenState(
-    { initialBlocks, onChange }
-  );
+  const { blocks, addBlock, addChild, updateBlock, removeBlock, duplicateBlock, reorderBlock, moveBlock, replaceAll } = useBlockKitchenState({ initialBlocks, onChange });
+  const childParentById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const top of blocks) {
+      if (top.children) {
+        for (const child of top.children) {
+          map.set(child.id, top.id);
+        }
+      }
+    }
+    return map;
+  }, [blocks]);
   const [jsonOpen, setJsonOpen] = useState(false);
   const [sendOpen, setSendOpen] = useState(false);
   const [issuesOpen, setIssuesOpen] = useState(false);
@@ -8936,14 +9265,22 @@ function BlockKitchen(props) {
     useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
-  const collisionDetection = useCallback((args) => {
-    const pointerHits = pointerWithin(args);
-    if (pointerHits.length > 0) {
-      const blockHit = pointerHits.find((c) => c.id !== SURFACE_DROPPABLE_ID);
-      return blockHit ? [blockHit] : pointerHits;
-    }
-    return closestCenter(args);
-  }, []);
+  const collisionDetection = useCallback(
+    (args) => {
+      const hits = pointerWithin(args);
+      if (hits.length > 0) {
+        const child = hits.find((c) => childParentById.has(c.id));
+        if (child) return [child];
+        const body = hits.find((c) => parseContainerBodyId(c.id) !== null);
+        if (body) return [body];
+        const block = hits.find((c) => c.id !== SURFACE_DROPPABLE_ID && parseContainerBodyId(c.id) === null);
+        if (block) return [block];
+        return hits;
+      }
+      return closestCenter(args);
+    },
+    [childParentById]
+  );
   const handleDragStart = useCallback((event) => {
     const variantId = parsePaletteDragId(event.active.id);
     setActivePaletteVariantId(variantId);
@@ -8955,24 +9292,43 @@ function BlockKitchen(props) {
       if (!over) {
         return;
       }
+      const overId = over.id;
+      let target;
+      const bodyParent = parseContainerBodyId(overId);
+      const childParent = childParentById.get(overId);
+      if (overId === SURFACE_DROPPABLE_ID) {
+        target = { kind: "top", index: blocks.length };
+      } else if (bodyParent) {
+        const count = blocks.find((b) => b.id === bodyParent)?.children?.length ?? 0;
+        target = { kind: "container", parentId: bodyParent, index: count };
+      } else if (childParent) {
+        const siblings = blocks.find((b) => b.id === childParent)?.children ?? [];
+        target = { kind: "container", parentId: childParent, index: siblings.findIndex((c) => c.id === overId) };
+      } else {
+        const topIndex = blocks.findIndex((b) => b.id === overId);
+        target = topIndex === -1 ? null : { kind: "top", index: topIndex };
+      }
+      if (!target) {
+        return;
+      }
       const variantId = parsePaletteDragId(active.id);
       if (variantId) {
         const variant = variantById.get(variantId);
         if (!variant) {
           return;
         }
-        const targetIndex = over.id === SURFACE_DROPPABLE_ID ? blocks.length : blocks.findIndex((b) => b.id === over.id);
-        addBlock(variant.factory(), targetIndex === -1 ? void 0 : targetIndex);
+        if (target.kind === "container") {
+          addChild(target.parentId, variant.factory(), target.index);
+        } else {
+          addBlock(variant.factory(), target.index);
+        }
         return;
       }
-      if (active.id !== over.id) {
-        const overIndex = blocks.findIndex((b) => b.id === over.id);
-        if (overIndex !== -1) {
-          reorderBlock(active.id, overIndex);
-        }
+      if (active.id !== overId) {
+        moveBlock(active.id, target);
       }
     },
-    [addBlock, blocks, reorderBlock, variantById]
+    [addBlock, addChild, blocks, childParentById, moveBlock, variantById]
   );
   const handleDragCancel = useCallback(() => {
     setActivePaletteVariantId(null);