@tightknitai/block-kitchen 0.10.22 → 0.10.24

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CXXqlwIH.cjs';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.cjs';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Bup6i-9c.cjs';
+export { A as AlertBlock, e as AlertLevel, f as BlockAction, g as BlockKitchenBaseProps, h as BlockKitchenComposeOnlyProps, i as BlockKitchenSendProps, j as BlockPosition, k as BrandPreset, l as BrandTheme, m as BrandTokens, n as BuilderBlock, o as CardBlock, p as CarouselBlock, q as CartesianChart, r as Chart, s as ChartAxisConfig, t as ChartDataPoint, u as ChartSeries, v as ChartType, w as ContainerBlock, x as ContainerChildBlock, y as ContextActionsBlock, z as ContextActionsElement, D as CustomEmoji, E as DataTableActionCell, F as DataTableBlock, G as DataTableCell, H as DataTableRawNumberCell, I as DataVisualizationBlock, J as EditableVia, K as FeedbackButtonSubobject, L as FeedbackButtonsElement, M as HeaderLevel, N as IconButtonElement, O as IconButtonIcon, Q as InputBlock, R as LoadMessageInput, U as LoadResult, V as LoadedMessage, W as LoadingConfig, X as MarkdownBlock, Y as MentionChannel, Z as MentionUser, _ as MentionsConfig, $ as PaletteMode, a0 as PaletteSection, a1 as PaletteVariant, a2 as PieChart, a3 as PieChartSegment, a4 as PlanBlock, a5 as PreviewHooks, a6 as PrimaryActionConfig, a7 as PrimaryActionContext, a8 as RecentMessage, a9 as SendResult, aa as SupportedBlockType, ab as SupportedHeaderBlock, ac as TableBlock, ad as TableCell, ae as TableColumnSetting, af as TableRawTextCell, ag as TaskCardBlock, ah as TaskCardStatus, ai as UpdatePayload, aj as UpdateResult, ak as UrlSourceElement, al as ValidationSummary, am as VideoBlock, an as defaultPalette, ao as extraAlertVariant, ap as legacyInputVariants } from './palette-Bup6i-9c.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CXXqlwIH.js';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.js';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Bup6i-9c.js';
+export { A as AlertBlock, e as AlertLevel, f as BlockAction, g as BlockKitchenBaseProps, h as BlockKitchenComposeOnlyProps, i as BlockKitchenSendProps, j as BlockPosition, k as BrandPreset, l as BrandTheme, m as BrandTokens, n as BuilderBlock, o as CardBlock, p as CarouselBlock, q as CartesianChart, r as Chart, s as ChartAxisConfig, t as ChartDataPoint, u as ChartSeries, v as ChartType, w as ContainerBlock, x as ContainerChildBlock, y as ContextActionsBlock, z as ContextActionsElement, D as CustomEmoji, E as DataTableActionCell, F as DataTableBlock, G as DataTableCell, H as DataTableRawNumberCell, I as DataVisualizationBlock, J as EditableVia, K as FeedbackButtonSubobject, L as FeedbackButtonsElement, M as HeaderLevel, N as IconButtonElement, O as IconButtonIcon, Q as InputBlock, R as LoadMessageInput, U as LoadResult, V as LoadedMessage, W as LoadingConfig, X as MarkdownBlock, Y as MentionChannel, Z as MentionUser, _ as MentionsConfig, $ as PaletteMode, a0 as PaletteSection, a1 as PaletteVariant, a2 as PieChart, a3 as PieChartSegment, a4 as PlanBlock, a5 as PreviewHooks, a6 as PrimaryActionConfig, a7 as PrimaryActionContext, a8 as RecentMessage, a9 as SendResult, aa as SupportedBlockType, ab as SupportedHeaderBlock, ac as TableBlock, ad as TableCell, ae as TableColumnSetting, af as TableRawTextCell, ag as TaskCardBlock, ah as TaskCardStatus, ai as UpdatePayload, aj as UpdateResult, ak as UrlSourceElement, al as ValidationSummary, am as VideoBlock, an as defaultPalette, ao as extraAlertVariant, ap as legacyInputVariants } from './palette-Bup6i-9c.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -4601,6 +4601,40 @@ function SendDialog({
     ] })
   ] }) });
 }
+function BlockActionButtons({
+  actions,
+  position,
+  variant
+}) {
+  if (!actions?.length || !position) {
+    return null;
+  }
+  return actions.map(
+    (action) => variant === "toolbar" ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": action.label,
+          onClick: () => action.onSelect(position),
+          className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:h-3.5 [&_svg]:w-3.5",
+          children: action.icon
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: action.label })
+    ] }, action.id) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": action.label,
+        onClick: () => action.onSelect(position),
+        className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:h-4 [&_svg]:w-4",
+        children: action.icon
+      },
+      action.id
+    )
+  );
+}
 var RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref }));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -10435,7 +10469,10 @@ function BlockRow({
   index,
   total,
   onReorder,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  position,
+  blockActions,
+  renderBlockAdornment
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
     id: builderBlock.id
@@ -10450,11 +10487,70 @@ function BlockRow({
   const [inlineEditing, setInlineEditing] = useState(false);
   const showDropIndicator = isPaletteDrag && isOver;
   const preview = /* @__PURE__ */ jsx(SlackBlockPreview, { block: builderBlock.block, hooks: previewHooks, theme: previewTheme });
+  const body = isRichText && inlineEditing ? /* @__PURE__ */ jsx(
+    RichTextInlineEditor,
+    {
+      block: builderBlock.block,
+      onSave: (next) => {
+        onUpdate(builderBlock.id, next);
+        setInlineEditing(false);
+      },
+      onCancel: () => setInlineEditing(false)
+    }
+  ) : isRichText ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Edit block",
+      onClick: () => setInlineEditing(true),
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+        hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
+      ),
+      children: preview
+    }
+  ) : /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Edit block",
+        ...sortableA11yAttrs,
+        ...listeners,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onOpenChange?.(!isOpen);
+          }
+        },
+        className: cn(
+          "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+          hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
+        ),
+        children: preview
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
+      BlockEditor,
+      {
+        block: builderBlock.block,
+        errors,
+        onChange: (next) => onUpdate(builderBlock.id, next),
+        onDone: () => onOpenChange?.(false)
+      }
+    ) })
+  ] });
+  const adornment = position && renderBlockAdornment?.(position);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setNodeRef,
       style,
+      "data-bk-block-index": position?.index,
+      "data-bk-child-index": position?.childIndex ?? void 0,
       className: cn("group relative mb-2 last:mb-0 hover:z-10 md:mb-0", isDragging && "opacity-40"),
       children: [
         showDropIndicator ? /* @__PURE__ */ jsx(
@@ -10466,62 +10562,10 @@ function BlockRow({
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          isRichText && inlineEditing ? /* @__PURE__ */ jsx(
-            RichTextInlineEditor,
-            {
-              block: builderBlock.block,
-              onSave: (next) => {
-                onUpdate(builderBlock.id, next);
-                setInlineEditing(false);
-              },
-              onCancel: () => setInlineEditing(false)
-            }
-          ) : isRichText ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Edit block",
-              onClick: () => setInlineEditing(true),
-              ...attributes,
-              ...listeners,
-              className: cn(
-                "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
-                hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
-              ),
-              children: preview
-            }
-          ) : /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange, children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Edit block",
-                ...sortableA11yAttrs,
-                ...listeners,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    onOpenChange?.(!isOpen);
-                  }
-                },
-                className: cn(
-                  "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
-                  hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
-                ),
-                children: preview
-              }
-            ) }),
-            /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
-              BlockEditor,
-              {
-                block: builderBlock.block,
-                errors,
-                onChange: (next) => onUpdate(builderBlock.id, next),
-                onDone: () => onOpenChange?.(false)
-              }
-            ) })
-          ] }),
+          renderBlockAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: body }),
+            adornment != null && adornment !== false ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: adornment }) : null
+          ] }) : body,
           /* @__PURE__ */ jsx("span", { className: "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 z-10 hidden bg-background px-1.5 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 md:block", children: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -10587,6 +10631,7 @@ function BlockRow({
                     /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Move down" })
                   ] })
                 ] }) : null,
+                /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
                 /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     "button",
@@ -10649,6 +10694,7 @@ function BlockRow({
                 children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" })
               }
             ) : null,
+            /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -10730,7 +10776,9 @@ function ContainerRow({
   onReorder,
   index,
   total,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  blockActions,
+  renderBlockAdornment
 }) {
   const { id } = builderBlock;
   const block = builderBlock.block;
@@ -10743,102 +10791,112 @@ function ContainerRow({
   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(
+  const position = typeof index === "number" ? { index, childIndex: null } : void 0;
+  const adornment = position && renderBlockAdornment?.(position);
+  const card = /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: setNodeRef,
-      style,
-      className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
+      className: cn(
+        "overflow-hidden rounded-md border bg-card transition-shadow",
+        hasErrors ? "border-destructive/60" : "border-border"
+      ),
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__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: containerTitleText(block) || "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),
+              onDone: () => onOpenBlockChange?.(null)
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
           "div",
           {
+            ref: setBodyRef,
             className: cn(
-              "overflow-hidden rounded-md border bg-card transition-shadow",
-              hasErrors ? "border-destructive/60" : "border-border"
+              "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: [
-              /* @__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: containerTitleText(block) || "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),
-                    onDone: () => onOpenBlockChange?.(null)
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
+            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,
                 {
-                  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
-                  ] })
-                }
-              )
-            ]
+                  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,
+                  position: typeof index === "number" ? { index, childIndex: idx } : void 0,
+                  blockActions,
+                  renderBlockAdornment
+                },
+                child.id
+              )),
+              isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
+            ] })
           }
-        ),
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      "data-bk-block-index": index,
+      className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
+      children: [
+        renderBlockAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: card }),
+          adornment != null && adornment !== false ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: adornment }) : null
+        ] }) : card,
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -10871,6 +10929,7 @@ function ContainerRow({
                 /* @__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(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
               /* @__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" }) })
@@ -10880,6 +10939,7 @@ function ContainerRow({
         /* @__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(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -10961,7 +11021,9 @@ function Surface({
   onDelete,
   onReorder,
   isPaletteDrag = false,
-  onOpenPalette
+  onOpenPalette,
+  blockActions,
+  renderBlockAdornment
 }) {
   const { setNodeRef, isOver } = useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
@@ -10993,7 +11055,9 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              blockActions,
+              renderBlockAdornment
             },
             block.id
           ) : /* @__PURE__ */ jsx(
@@ -11011,7 +11075,10 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              position: { index: idx, childIndex: null },
+              blockActions,
+              renderBlockAdornment
             },
             block.id
           )
@@ -11769,6 +11836,8 @@ function BlockKitchen(props) {
     onChange,
     onValidationChange,
     previewHooks,
+    blockActions,
+    renderBlockAdornment,
     customEmojis,
     mentions,
     loadChannels,
@@ -12149,7 +12218,9 @@ function BlockKitchen(props) {
                     onDelete: removeBlock,
                     onReorder: reorderBlock,
                     isPaletteDrag: activePaletteVariant !== null,
-                    onOpenPalette: () => setPaletteOpen(true)
+                    onOpenPalette: () => setPaletteOpen(true),
+                    blockActions,
+                    renderBlockAdornment
                   }
                 ) })
               ] })