@tightknitai/block-kitchen 0.10.23 → 0.10.25

package/dist/index.cjs

@@ -1817,6 +1817,35 @@ function labelForBlockType(type) {
       return "Data Table";
   }
 }
+function historyShortcutOf(event) {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+    return null;
+  }
+  const key = event.key.toLowerCase();
+  if (key === "z") {
+    return event.shiftKey ? "redo" : "undo";
+  }
+  return key === "y" ? "redo" : null;
+}
+function isTextEditingTarget(target) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  return target.isContentEditable || // jsdom has no `isContentEditable`, so check the attribute too.
+  target.closest('[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]') !== null || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}
+function isApplePlatform() {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const { userAgentData } = navigator;
+  return /mac|iphone|ipad|ipod/i.test(userAgentData?.platform ?? navigator.platform ?? "");
+}
+var subscribeToNothing = () => () => {
+};
+function useIsApplePlatform() {
+  return React.useSyncExternalStore(subscribeToNothing, isApplePlatform, () => false);
+}
 var Sheet = DialogPrimitive__namespace.Root;
 var SheetOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
@@ -1898,6 +1927,16 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+var BlockEditorsContext = React.createContext([]);
+function BlockEditorsProvider({
+  blockEditors,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(BlockEditorsContext.Provider, { value: blockEditors ?? [], children });
+}
+function useCustomBlockEditor(block) {
+  return React.useContext(BlockEditorsContext).find((editor) => editor.match(block));
+}
 var EMPTY = {
   customEmojis: [],
   byName: /* @__PURE__ */ new Map()
@@ -4239,6 +4278,7 @@ function Palette({
   mode = "advanced",
   defaultAdvanced = false,
   onAdvancedChange,
+  onLockedPicked,
   variant = "aside"
 }) {
   const [query, setQuery] = React.useState("");
@@ -4332,7 +4372,16 @@ function Palette({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: !advanced ? (
           // Simple mode: a flat list, no section headings — with this few
           // rows the headings would outnumber the blocks under them.
-          basics.map((v) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id))
+          basics.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+            PaletteItem,
+            {
+              variant: v,
+              onAdd: () => onAddBlock(v.factory()),
+              onLockedPicked,
+              mode: variant
+            },
+            v.id
+          ))
         ) : visibleSections.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
           PaletteSection,
           {
@@ -4340,6 +4389,7 @@ function Palette({
             defaultOpen: isDefaultOpen(section.name, defaultOpenSections),
             forceOpen: queryActive,
             onAddBlock,
+            onLockedPicked,
             variant
           },
           section.name
@@ -4371,6 +4421,7 @@ function PaletteSection({
   defaultOpen,
   forceOpen,
   onAddBlock,
+  onLockedPicked,
   variant = "aside"
 }) {
   const [open, setOpen] = React.useState(defaultOpen);
@@ -4402,18 +4453,32 @@ function PaletteSection({
         ]
       }
     ),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex flex-col", children: section.variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id)) }) : null
+    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex flex-col", children: section.variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+      PaletteItem,
+      {
+        variant: v,
+        onAdd: () => onAddBlock(v.factory()),
+        onLockedPicked,
+        mode: variant
+      },
+      v.id
+    )) }) : null
   ] });
 }
 function PaletteItem({
   variant,
   onAdd,
+  onLockedPicked,
   mode = "aside"
 }) {
   const { attributes, listeners, setNodeRef, setActivatorNodeRef, isDragging } = core.useDraggable({
-    id: `${PALETTE_DRAG_PREFIX}${variant.id}`
+    id: `${PALETTE_DRAG_PREFIX}${variant.id}`,
+    disabled: variant.locked
   });
   const isSheet = mode === "sheet";
+  if (variant.locked) {
+    return /* @__PURE__ */ jsxRuntime.jsx(LockedPaletteItem, { variant, isSheet, onPicked: onLockedPicked });
+  }
   if (isSheet) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -4428,6 +4493,7 @@ function PaletteItem({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label }),
+          variant.badge ? /* @__PURE__ */ jsxRuntime.jsx(VariantBadge, { badge: variant.badge }) : null,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }) })
         ]
       }
@@ -4451,7 +4517,11 @@ function PaletteItem({
             ...listeners,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: variant.label })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: variant.label }),
+              variant.badge ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(VariantBadge, { badge: variant.badge })
+              ] }) : null
             ]
           }
         ),
@@ -4469,6 +4539,48 @@ function PaletteItem({
     }
   );
 }
+function LockedPaletteItem({
+  variant,
+  isSheet,
+  onPicked
+}) {
+  const select = variant.onLockedSelect;
+  const className = cn(
+    "flex w-full items-center text-left text-muted-foreground",
+    isSheet ? "min-h-11 gap-3 rounded-md px-3 py-2 text-sm font-medium" : "gap-2 rounded px-2 py-1 text-sm"
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { "aria-hidden": true, className: cn("shrink-0", isSheet ? "h-4 w-4" : "h-3.5 w-3.5") }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label }),
+    variant.badge ? /* @__PURE__ */ jsxRuntime.jsx(VariantBadge, { badge: variant.badge }) : null
+  ] });
+  if (!select) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-disabled": "true", className, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `${variant.label} (locked${variant.badge ? `, ${variant.badge.label}` : ""})`,
+      onClick: () => {
+        onPicked?.();
+        select();
+      },
+      className: cn(
+        className,
+        "cursor-pointer appearance-none border-0 bg-transparent transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      ),
+      children: content
+    }
+  );
+}
+function VariantBadge({ badge }) {
+  const Icon = badge.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground", children: [
+    Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: "h-2.5 w-2.5 shrink-0" }) : null,
+    badge.label
+  ] });
+}
 function SendDialog({
   open,
   onOpenChange,
@@ -6288,7 +6400,7 @@ function MentionPicker({
   const listRef = React.useRef(null);
   const listboxId = React.useId();
   const activeOptionId = items[activeIndex] ? `${listboxId}-${activeIndex}` : void 0;
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const root = editor.view.dom;
     root.setAttribute("role", "combobox");
     root.setAttribute("aria-autocomplete", "list");
@@ -6307,7 +6419,7 @@ function MentionPicker({
       root.removeAttribute("aria-activedescendant");
     };
   }, [activeOptionId, editor, listboxId]);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     keyHandlerRef.current = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         if (items.length > 0) {
@@ -10397,13 +10509,15 @@ function BlockEditor({
   onChange,
   onDone
 }) {
+  const custom = useCustomBlockEditor(block);
+  const CustomForm = custom?.component;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
       "Edit ",
-      labelForBlockType(block.type)
+      custom ? custom.label : labelForBlockType(block.type)
     ] }) }),
     errors && errors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: errors.map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)) }) : null,
-    dispatch(block, onChange),
+    CustomForm ? /* @__PURE__ */ jsxRuntime.jsx(CustomForm, { block, onChange }) : dispatch(block, onChange),
     /* @__PURE__ */ jsxRuntime.jsx(
       AdvancedIdField,
       {
@@ -10501,7 +10615,8 @@ function BlockRow({
   onReorder,
   isPaletteDrag = false,
   position,
-  blockActions
+  blockActions,
+  renderBlockAdornment
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = sortable.useSortable({
     id: builderBlock.id
@@ -10516,6 +10631,179 @@ function BlockRow({
   const [inlineEditing, setInlineEditing] = React.useState(false);
   const showDropIndicator = isPaletteDrag && isOver;
   const preview = /* @__PURE__ */ jsxRuntime.jsx(SlackBlockPreview, { block: builderBlock.block, hooks: previewHooks, theme: previewTheme });
+  const body = isRichText && inlineEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+    RichTextInlineEditor,
+    {
+      block: builderBlock.block,
+      onSave: (next) => {
+        onUpdate(builderBlock.id, next);
+        setInlineEditing(false);
+      },
+      onCancel: () => setInlineEditing(false)
+    }
+  ) : isRichText ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      BlockEditor,
+      {
+        block: builderBlock.block,
+        errors,
+        onChange: (next) => onUpdate(builderBlock.id, next),
+        onDone: () => onOpenChange?.(false)
+      }
+    ) })
+  ] });
+  const adornment = position && renderBlockAdornment?.(position);
+  const hoverChrome = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          // Hidden on mobile in favor of the inline row below; on desktop
+          // reveal on hover, on keyboard focus inside the row (so Tab-stops on
+          // the floating buttons themselves keep them visible), and when there
+          // are validation errors worth surfacing immediately.
+          // :focus-visible, not :focus-within — a drag leaves pointer focus on
+          // the block, which would otherwise pin the toolbar open until a click.
+          "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:opacity-100 group-has-[:focus-visible]: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: () => onOpenChange?.(true),
+                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.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Move block up",
+                  disabled: index === 0,
+                  onClick: () => onReorder(builderBlock.id, index - 1),
+                  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 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move up" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Move block down",
+                  disabled: index >= total - 1,
+                  onClick: () => onReorder(builderBlock.id, index + 1),
+                  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 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move down" })
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Edit block",
+                onClick: () => {
+                  if (isRichText) {
+                    setInlineEditing(true);
+                  } else {
+                    onOpenChange?.(true);
+                  }
+                },
+                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",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Edit" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Duplicate block",
+                onClick: () => onDuplicate(builderBlock.id),
+                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",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Duplicate" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Delete block",
+                onClick: () => onDelete(builderBlock.id),
+                className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Delete" })
+          ] })
+        ]
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10533,178 +10821,16 @@ function BlockRow({
             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)]" })
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
-          isRichText && inlineEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-            RichTextInlineEditor,
-            {
-              block: builderBlock.block,
-              onSave: (next) => {
-                onUpdate(builderBlock.id, next);
-                setInlineEditing(false);
-              },
-              onCancel: () => setInlineEditing(false)
-            }
-          ) : isRichText ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-              BlockEditor,
-              {
-                block: builderBlock.block,
-                errors,
-                onChange: (next) => onUpdate(builderBlock.id, next),
-                onDone: () => onOpenChange?.(false)
-              }
-            ) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full", children: renderBlockAdornment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            body,
+            hoverChrome
           ] }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                // Hidden on mobile in favor of the inline row below; on desktop
-                // reveal on hover, on keyboard focus inside the row (so Tab-stops on
-                // the floating buttons themselves keep them visible), and when there
-                // are validation errors worth surfacing immediately.
-                // :focus-visible, not :focus-within — a drag leaves pointer focus on
-                // the block, which would otherwise pin the toolbar open until a click.
-                "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:opacity-100 group-has-[:focus-visible]: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: () => onOpenChange?.(true),
-                      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.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": "Move block up",
-                        disabled: index === 0,
-                        onClick: () => onReorder(builderBlock.id, index - 1),
-                        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 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move up" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": "Move block down",
-                        disabled: index >= total - 1,
-                        onClick: () => onReorder(builderBlock.id, index + 1),
-                        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 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move down" })
-                  ] })
-                ] }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Edit block",
-                      onClick: () => {
-                        if (isRichText) {
-                          setInlineEditing(true);
-                        } else {
-                          onOpenChange?.(true);
-                        }
-                      },
-                      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",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Edit" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Duplicate block",
-                      onClick: () => onDuplicate(builderBlock.id),
-                      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",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Duplicate" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Delete block",
-                      onClick: () => onDelete(builderBlock.id),
-                      className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Delete" })
-                ] })
-              ]
-            }
-          )
-        ] }),
+          adornment != null && adornment !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: adornment }) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          body,
+          hoverChrome
+        ] }) }),
         /* @__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: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -10801,7 +10927,8 @@ function ContainerRow({
   index,
   total,
   isPaletteDrag = false,
-  blockActions
+  blockActions,
+  renderBlockAdornment
 }) {
   const { id } = builderBlock;
   const block = builderBlock.block;
@@ -10815,144 +10942,156 @@ function ContainerRow({
   const style = { transform: utilities.CSS.Transform.toString(transform), transition };
   const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
   const position = typeof index === "number" ? { index, childIndex: null } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const adornment = position && renderBlockAdornment?.(position);
+  const card = /* @__PURE__ */ jsxRuntime.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"),
+      className: cn(
+        "overflow-hidden rounded-md border bg-card transition-shadow",
+        hasErrors ? "border-destructive/60" : "border-border"
+      ),
       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: containerTitleText(block) || "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),
-                    onDone: () => onOpenBlockChange?.(null)
-                  }
-                ) })
-              ] }),
-              /* @__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,
-                        position: typeof index === "number" ? { index, childIndex: idx } : void 0,
-                        blockActions
-                      },
-                      child.id
-                    )),
-                    isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
-                  ] })
+        /* @__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);
                 }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+              },
+              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: containerTitleText(block) || "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),
+              onDone: () => onOpenBlockChange?.(null)
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            ref: setBodyRef,
             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-has-[:focus-visible]/container:opacity-100"
+              "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: [
-              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(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
-              /* @__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" }) })
-            ]
+            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,
+                  position: typeof index === "number" ? { index, childIndex: idx } : void 0,
+                  blockActions,
+                  renderBlockAdornment
+                },
+                child.id
+              )),
+              isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+            ] })
           }
-        ),
+        )
+      ]
+    }
+  );
+  const toolbar = /* @__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-has-[:focus-visible]/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(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
+        /* @__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" }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            card,
+            toolbar
+          ] }),
+          adornment != null && adornment !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: adornment }) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          card,
+          toolbar
+        ] }),
         /* @__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: [
@@ -11039,7 +11178,8 @@ function Surface({
   onReorder,
   isPaletteDrag = false,
   onOpenPalette,
-  blockActions
+  blockActions,
+  renderBlockAdornment
 }) {
   const { setNodeRef, isOver } = core.useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
@@ -11072,7 +11212,8 @@ function Surface({
               total: blocks.length,
               onReorder,
               isPaletteDrag,
-              blockActions
+              blockActions,
+              renderBlockAdornment
             },
             block.id
           ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -11092,7 +11233,8 @@ function Surface({
               onReorder,
               isPaletteDrag,
               position: { index: idx, childIndex: null },
-              blockActions
+              blockActions,
+              renderBlockAdornment
             },
             block.id
           )
@@ -11366,6 +11508,7 @@ function Toolbar2({
   canRedo = false,
   onUndo,
   onRedo,
+  undoRedoShortcuts = true,
   onClear,
   onOpenJson,
   onOpenIssues,
@@ -11399,6 +11542,7 @@ function Toolbar2({
   const showSurfaceControl = surfaceOptions.length > 1;
   const docsHref = docsLink === false ? null : docsLink?.href ?? DEFAULT_DOCS_HREF;
   const docsLabel = docsLink === false ? null : docsLink?.label ?? DEFAULT_DOCS_LABEL;
+  const isApple = useIsApplePlatform();
   const [surfaceMenuOpen, setSurfaceMenuOpen] = React.useState(false);
   const [themeMenuOpen, setThemeMenuOpen] = React.useState(false);
   const [sendMenuOpen, setSendMenuOpen] = React.useState(false);
@@ -11489,7 +11633,8 @@ function Toolbar2({
               onClick: onUndo,
               disabled: !canUndo,
               "aria-label": "Undo",
-              title: "Undo (Ctrl+Z)",
+              "aria-keyshortcuts": undoRedoShortcuts ? "Control+Z Meta+Z" : void 0,
+              title: undoRedoShortcuts ? `Undo (${isApple ? "\u2318Z" : "Ctrl+Z"})` : "Undo",
               className: "px-2",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-3.5 w-3.5" })
             }
@@ -11503,7 +11648,8 @@ function Toolbar2({
               onClick: onRedo,
               disabled: !canRedo,
               "aria-label": "Redo",
-              title: "Redo (Ctrl+Shift+Z)",
+              "aria-keyshortcuts": undoRedoShortcuts ? "Control+Shift+Z Meta+Shift+Z Control+Y" : void 0,
+              title: undoRedoShortcuts ? `Redo (${isApple ? "\u21E7\u2318Z" : "Ctrl+Shift+Z"})` : "Redo",
               className: "px-2",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-3.5 w-3.5" })
             }
@@ -11851,6 +11997,8 @@ function BlockKitchen(props) {
     onValidationChange,
     previewHooks,
     blockActions,
+    renderBlockAdornment,
+    blockEditors,
     customEmojis,
     mentions,
     loadChannels,
@@ -11876,7 +12024,8 @@ function BlockKitchen(props) {
     previewTheme: controlledPreviewTheme,
     sendButtonLabel,
     confirmSendLabel,
-    theme
+    theme,
+    undoRedoShortcuts = true
     // Widen the all-or-nothing union so the branch-specific props
     // destructure as independent optionals: untyped JS consumers can still
     // pass partial wiring (handled by the runtime guards below), and the
@@ -12056,7 +12205,7 @@ function BlockKitchen(props) {
       const variantId = parsePaletteDragId(active.id);
       if (variantId) {
         const variant = variantById.get(variantId);
-        if (!variant) {
+        if (!variant || variant.locked) {
           return;
         }
         if (target.kind === "container") {
@@ -12075,30 +12224,47 @@ function BlockKitchen(props) {
   const handleDragCancel = React.useCallback(() => {
     setActivePaletteVariantId(null);
   }, []);
-  const handleKeyDown = React.useCallback(
+  const runHistoryShortcut = React.useCallback(
     (event) => {
-      if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+      const action = historyShortcutOf(event);
+      if (!undoRedoShortcuts || !action || event.defaultPrevented || isTextEditingTarget(event.target)) {
         return;
       }
-      const key = event.key.toLowerCase();
-      const isUndo = key === "z" && !event.shiftKey;
-      const isRedo = key === "y" || key === "z" && event.shiftKey;
-      if (!isUndo && !isRedo) {
-        return;
-      }
-      const target = event.target;
-      if (target && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))) {
+      if (action === "undo" ? !canUndo : !canRedo) {
         return;
       }
       event.preventDefault();
-      if (isRedo) {
-        if (canRedo) redo();
-      } else if (canUndo) {
+      if (action === "undo") {
         undo();
+      } else {
+        redo();
       }
     },
-    [canRedo, canUndo, redo, undo]
+    [canRedo, canUndo, redo, undo, undoRedoShortcuts]
   );
+  const rootRef = React.useRef(null);
+  const lastClickInBuilderRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!undoRedoShortcuts) {
+      return;
+    }
+    const onPointerDown = () => {
+      lastClickInBuilderRef.current = false;
+    };
+    const onKeyDown = (event) => {
+      const root = rootRef.current;
+      const focusAroundBuilder = event.target instanceof Node && root !== null && event.target.contains(root);
+      if (focusAroundBuilder && lastClickInBuilderRef.current) {
+        runHistoryShortcut(event);
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [runHistoryShortcut, undoRedoShortcuts]);
   const activePaletteVariant = activePaletteVariantId ? variantById.get(activePaletteVariantId) : null;
   const blockPayloads = blocks.map((b) => b.block);
   return /* @__PURE__ */ jsxRuntime.jsx(BrandThemeScope, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(CustomEmojiProvider, { customEmojis, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12113,8 +12279,12 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            ref: rootRef,
             className: "bk-root flex h-full max-h-[var(--bk-max-height,100svh)] w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
-            onKeyDown: handleKeyDown,
+            onKeyDown: runHistoryShortcut,
+            onPointerDownCapture: () => {
+              lastClickInBuilderRef.current = true;
+            },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Toolbar2,
@@ -12123,6 +12293,7 @@ function BlockKitchen(props) {
                   canRedo,
                   onUndo: undo,
                   onRedo: redo,
+                  undoRedoShortcuts,
                   onClear: () => replaceAll([]),
                   onOpenJson: () => setJsonOpen(true),
                   onOpenIssues: () => setIssuesOpen(true),
@@ -12213,7 +12384,7 @@ function BlockKitchen(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsxRuntime.jsx(BlockEditorsProvider, { blockEditors, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Surface,
                   {
                     blocks,
@@ -12232,9 +12403,10 @@ function BlockKitchen(props) {
                     onReorder: reorderBlock,
                     isPaletteDrag: activePaletteVariant !== null,
                     onOpenPalette: () => setPaletteOpen(true),
-                    blockActions
+                    blockActions,
+                    renderBlockAdornment
                   }
-                ) })
+                ) }) })
               ] })
             ]
           }
@@ -12265,6 +12437,7 @@ function BlockKitchen(props) {
                     addBlock(block);
                     setPaletteOpen(false);
                   },
+                  onLockedPicked: () => setPaletteOpen(false),
                   sections: paletteSections,
                   mode: paletteMode,
                   showSearch: showPaletteSearch,