@tightknitai/block-kitchen 0.8.7 → 0.8.9

package/dist/index.cjs

@@ -53,6 +53,34 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // 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);
@@ -1151,6 +1179,49 @@ var defaultPalette = [
         })
       }
     ]
+  },
+  {
+    name: "Container",
+    icon: lucideReact.Container,
+    variants: [
+      {
+        id: "container_collapsible",
+        label: "Collapsible container",
+        factory: () => ({
+          type: "container",
+          title: { type: "plain_text", text: "Bulk update: 2 records selected" },
+          subtitle: { type: "plain_text", text: "Review changes before confirming" },
+          is_collapsible: true,
+          child_blocks: [
+            {
+              type: "section",
+              text: { type: "mrkdwn", text: "*DCW-1024*\nStatus: Open \u2192 Closed" }
+            },
+            { type: "divider" },
+            {
+              type: "section",
+              text: { type: "mrkdwn", text: "*DCW-1025*\nStatus: In Progress \u2192 Closed" }
+            },
+            {
+              type: "actions",
+              elements: [
+                {
+                  type: "button",
+                  text: { type: "plain_text", text: "Confirm All", emoji: true },
+                  style: "primary",
+                  action_id: "bulk_confirm"
+                },
+                {
+                  type: "button",
+                  text: { type: "plain_text", text: "Cancel", emoji: true },
+                  action_id: "bulk_cancel"
+                }
+              ]
+            }
+          ]
+        })
+      }
+    ]
   }
 ];
 var legacyInputVariants = [
@@ -1631,6 +1702,8 @@ function labelForBlockType(type) {
       return "Task Card";
     case "data_visualization":
       return "Data Visualization";
+    case "container":
+      return "Container";
   }
 }
 function cn(...inputs) {
@@ -1967,9 +2040,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.nanoid(8), block, children });
+  }
   return { id: nanoid.nanoid(8), block };
 }
+function cloneNode(node) {
+  if (node.children) {
+    return mirror({ id: nanoid.nanoid(8), block: structuredClone(node.block), children: node.children.map(cloneNode) });
+  }
+  return { id: nanoid.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
@@ -1990,41 +2106,113 @@ function useBlockKitchenState({
   const addBlock = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.useCallback((newBlocks) => {
@@ -2033,10 +2221,12 @@ function useBlockKitchenState({
   return {
     blocks,
     addBlock,
+    addChild,
     updateBlock,
     removeBlock,
     duplicateBlock,
     reorderBlock,
+    moveBlock,
     replaceAll
   };
 }
@@ -3545,6 +3735,113 @@ function CarouselEditor({ block, onChange }) {
     ] })
   ] });
 }
+var WIDTHS = ["narrow", "standard", "wide", "full"];
+function ContainerEditor({ block, onChange }) {
+  const iconUrl = block.icon && "image_url" in block.icon ? block.icon.image_url ?? "" : "";
+  const iconAlt = block.icon?.alt_text ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Heading shown at the top of the container.", htmlFor: "container-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "container-title",
+        value: block.title?.text ?? "",
+        maxLength: 150,
+        placeholder: "e.g. Bulk update: 2 records selected",
+        onChange: (e) => onChange({ ...block, title: { type: "plain_text", text: e.target.value } })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Optional secondary line under the title.", htmlFor: "container-subtitle", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "container-subtitle",
+        value: block.subtitle?.text ?? "",
+        maxLength: 150,
+        placeholder: "e.g. Review changes before confirming",
+        onChange: (e) => onChange({
+          ...block,
+          subtitle: e.target.value ? { type: "plain_text", text: e.target.value } : void 0
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Icon URL", help: "Optional image shown left of the title.", htmlFor: "container-icon", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "container-icon",
+        type: "url",
+        value: iconUrl,
+        placeholder: "https://example.com/icon.png",
+        onChange: (e) => onChange({
+          ...block,
+          icon: e.target.value ? { type: "image", image_url: e.target.value, alt_text: iconAlt || "Container icon" } : void 0
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Width", help: "How wide the container renders in the message.", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroup,
+      {
+        value: block.width ?? "standard",
+        onValueChange: (v) => onChange({ ...block, width: v }),
+        className: "flex flex-row flex-wrap gap-3",
+        children: WIDTHS.map((w) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: w, id: `container-width-${w}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `container-width-${w}`, className: "text-xs capitalize", children: w })
+        ] }, w))
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        id: "container-collapsible",
+        label: "Collapsible",
+        help: "Let readers expand and collapse the container.",
+        checked: !!block.is_collapsible,
+        onChange: (checked) => onChange({
+          ...block,
+          is_collapsible: checked || void 0,
+          default_collapsed: checked ? block.default_collapsed : void 0
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Checkbox,
+      {
+        id: "container-default-collapsed",
+        label: "Collapsed by default",
+        help: "Start collapsed on first render. Requires Collapsible.",
+        checked: !!block.default_collapsed,
+        disabled: !block.is_collapsible,
+        onChange: (checked) => onChange({ ...block, default_collapsed: checked || void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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({
+  id,
+  label,
+  help,
+  checked,
+  disabled,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked,
+          disabled,
+          onChange: (e) => onChange(e.target.checked),
+          className: "h-3.5 w-3.5 cursor-pointer rounded border-input disabled:cursor-not-allowed disabled:opacity-40"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, className: "cursor-pointer text-xs", children: label })
+    ] }),
+    help ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ml-5 text-[11px] leading-snug text-muted-foreground", children: help }) : null
+  ] });
+}
 var MAX_ELEMENTS = 5;
 function ContextActionsEditor({ block, onChange }) {
   const elements = block.elements ?? [];
@@ -7714,6 +8011,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
     case "data_visualization":
       return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
+    case "container":
+      return /* @__PURE__ */ jsxRuntime.jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -7790,7 +8089,8 @@ var BLOCK_TYPE_LABELS = {
   video: "Video",
   plan: "Plan",
   task_card: "Task Card",
-  data_visualization: "Data Visualization"
+  data_visualization: "Data Visualization",
+  container: "Container"
 };
 function BlockRow({
   builderBlock,
@@ -8084,6 +8384,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 } = sortable.useSortable({ id });
+  const { role: _dndRole, tabIndex: _dndTabIndex, ...sortableA11yAttrs } = attributes;
+  const { setNodeRef: setBodyRef, isOver: isBodyOver } = core.useDroppable({ id: containerBodyId(id) });
+  const style = { transform: utilities.CSS.Transform.toString(transform), transition };
+  const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden rounded-md border bg-card transition-shadow",
+              hasErrors ? "border-destructive/60" : "border-border"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(open ? id : null), children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: icon, alt: "", "aria-hidden": "true", className: "h-5 w-5 shrink-0 rounded object-cover" }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: block.title?.text || "Container" }),
+                        block.subtitle?.text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: block.subtitle.text }) : null
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Container" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(BlockEditor, { block, errors, onChange: (next) => onUpdate(id, next) }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: children.map((c) => c.id), strategy: sortable.verticalListSortingStrategy, children: [
+                    children.map((child, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-col gap-0.5", children: [
+                  errors.slice(0, 4).map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)),
+                  errors.length > 4 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-muted-foreground", children: [
+                    "and ",
+                    errors.length - 4,
+                    " more"
+                  ] }) : null
+                ] }) })
+              ] }) : null,
+              onReorder && typeof index === "number" && typeof total === "number" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Move up", disabled: index === 0, onClick: () => onReorder(id, index - 1), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Move down", disabled: index >= total - 1, onClick: () => onReorder(id, index + 1), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" }) })
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Duplicate", onClick: () => onDuplicate(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Delete", destructive: true, onClick: () => onDelete(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] font-medium text-muted-foreground", children: "Container" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ToolbarButton2({
+  label,
+  onClick,
+  disabled,
+  destructive,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: label })
+  ] });
+}
+function DropIndicator() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsxRuntime.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,
@@ -8115,26 +8634,46 @@ function Surface({
         isPaletteDrag && isOver && (isDark ? "bg-[#2c3036]" : "bg-[#eaf0ff]")
       ),
       children: blocks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { isDark, isPaletteDrag, isOver, onOpenPalette }) : /* @__PURE__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: blocks.map((b) => b.id), strategy: sortable.verticalListSortingStrategy, children: [
-        blocks.map((block, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+        blocks.map(
+          (block, idx) => block.block.type === "container" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ContainerRow,
+            {
+              builderBlock: block,
+              previewHooks,
+              previewTheme,
+              errorsByBlockId,
+              openBlockId,
+              onOpenBlockChange,
+              onUpdate,
+              onDuplicate,
+              onDelete,
+              index: idx,
+              total: blocks.length,
+              onReorder,
+              isPaletteDrag
+            },
+            block.id
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropIndicator2, {}) : null
       ] })
     }
   );
@@ -8374,7 +8913,7 @@ function EmptyState({
     }
   );
 }
-function DropIndicator() {
+function DropIndicator2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsxRuntime.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 = [
@@ -8737,9 +9276,18 @@ function BlockKitchen(props) {
   }, [palette, disabledBlockTypes]);
   const variantById = React.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 = React.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] = React.useState(false);
   const [sendOpen, setSendOpen] = React.useState(false);
   const [issuesOpen, setIssuesOpen] = React.useState(false);
@@ -8764,14 +9312,22 @@ function BlockKitchen(props) {
     core.useSensor(core.TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
     core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
-  const collisionDetection = React.useCallback((args) => {
-    const pointerHits = core.pointerWithin(args);
-    if (pointerHits.length > 0) {
-      const blockHit = pointerHits.find((c) => c.id !== SURFACE_DROPPABLE_ID);
-      return blockHit ? [blockHit] : pointerHits;
-    }
-    return core.closestCenter(args);
-  }, []);
+  const collisionDetection = React.useCallback(
+    (args) => {
+      const hits = core.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 core.closestCenter(args);
+    },
+    [childParentById]
+  );
   const handleDragStart = React.useCallback((event) => {
     const variantId = parsePaletteDragId(event.active.id);
     setActivePaletteVariantId(variantId);
@@ -8783,24 +9339,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 = React.useCallback(() => {
     setActivePaletteVariantId(null);