@tightknitai/block-kitchen 0.10.0 → 0.10.2

package/dist/index.cjs

@@ -2066,6 +2066,69 @@ function useBlockKitValidation(blocks, surface) {
   }, [blocks, surface]);
   return state;
 }
+var MAX_HISTORY = 20;
+function useHistoryState(initial) {
+  const [record, setRecord] = React.useState(() => ({
+    past: [],
+    present: typeof initial === "function" ? initial() : initial,
+    future: [],
+    lastTag: null
+  }));
+  const commit = React.useCallback((updater, options) => {
+    const tag = options?.tag ?? null;
+    setRecord((h) => {
+      const next = typeof updater === "function" ? updater(h.present) : updater;
+      if (Object.is(next, h.present)) {
+        return h;
+      }
+      if (tag !== null && h.lastTag === tag) {
+        return { ...h, present: next, future: [] };
+      }
+      const past = [...h.past, h.present];
+      return {
+        past: past.length > MAX_HISTORY ? past.slice(past.length - MAX_HISTORY) : past,
+        present: next,
+        future: [],
+        lastTag: tag
+      };
+    });
+  }, []);
+  const undo = React.useCallback(() => {
+    setRecord((h) => {
+      if (h.past.length === 0) {
+        return h;
+      }
+      const previous = h.past[h.past.length - 1];
+      return { past: h.past.slice(0, -1), present: previous, future: [h.present, ...h.future], lastTag: null };
+    });
+  }, []);
+  const redo = React.useCallback(() => {
+    setRecord((h) => {
+      if (h.future.length === 0) {
+        return h;
+      }
+      const [next, ...rest] = h.future;
+      return { past: [...h.past, h.present], present: next, future: rest, lastTag: null };
+    });
+  }, []);
+  const reset = React.useCallback((next) => {
+    setRecord({ past: [], present: next, future: [], lastTag: null });
+  }, []);
+  return React.useMemo(
+    () => ({
+      present: record.present,
+      canUndo: record.past.length > 0,
+      canRedo: record.future.length > 0,
+      commit,
+      undo,
+      redo,
+      reset
+    }),
+    [record, commit, undo, redo, reset]
+  );
+}
+
+// src/state/use-block-kitchen-state.ts
 function mirror(node) {
   if (!node.children) {
     return node;
@@ -2116,7 +2179,15 @@ function useBlockKitchenState({
   initialBlocks,
   onChange
 } = {}) {
-  const [blocks, setBlocks] = React.useState(() => (initialBlocks ?? []).map(wrap));
+  const {
+    present: blocks,
+    commit,
+    undo,
+    redo,
+    reset,
+    canUndo,
+    canRedo
+  } = useHistoryState(() => (initialBlocks ?? []).map(wrap));
   const onChangeRef = React.useRef(onChange);
   React.useEffect(() => {
     onChangeRef.current = onChange;
@@ -2129,121 +2200,155 @@ function useBlockKitchenState({
     }
     onChangeRef.current?.(blocks.map((b) => b.block));
   }, [blocks]);
-  const addBlock = React.useCallback((block, atIndex) => {
-    setBlocks((prev) => {
-      const next = [...prev];
-      const idx = atIndex === void 0 ? next.length : Math.max(0, Math.min(atIndex, next.length));
-      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 addBlock = React.useCallback(
+    (block, atIndex) => {
+      commit((prev) => {
+        const next = [...prev];
         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) => {
-        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) => {
-      if (prev.some((b) => b.id === id)) {
-        return prev.filter((b) => b.id !== id);
+      });
+    },
+    [commit]
+  );
+  const addChild = React.useCallback(
+    (parentId, block, atIndex) => {
+      if (!isContainerChildType(block.type)) {
+        return;
       }
-      return prev.map(
-        (b) => b.children?.some((c) => c.id === id) ? mirror({ ...b, children: b.children.filter((c) => c.id !== id) }) : b
+      commit(
+        (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 duplicateBlock = React.useCallback((id) => {
-    setBlocks((prev) => {
-      const loc = locate(prev, id);
-      if (!loc) {
-        return prev;
-      }
-      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;
+    },
+    [commit]
+  );
+  const updateBlock = React.useCallback(
+    (id, block) => {
+      commit(
+        (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;
+        }),
+        // Coalesce a run of edits to the same block (every keystroke in an
+        // editor field lands here) into a single undo step. Editing a
+        // different block, or any structural change, starts a new step.
+        { tag: `update:${id}` }
+      );
+    },
+    [commit]
+  );
+  const removeBlock = React.useCallback(
+    (id) => {
+      commit((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 reorderBlock = React.useCallback((fromId, toIndex) => {
-    setBlocks((prev) => {
-      const loc = locate(prev, fromId);
-      if (!loc) {
-        return prev;
-      }
-      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)) {
+    },
+    [commit]
+  );
+  const duplicateBlock = React.useCallback(
+    (id) => {
+      commit((prev) => {
+        const loc = locate(prev, id);
+        if (!loc) {
           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) {
+        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;
+        });
+      });
+    },
+    [commit]
+  );
+  const reorderBlock = React.useCallback(
+    (fromId, toIndex) => {
+      commit((prev) => {
+        const loc = locate(prev, fromId);
+        if (!loc) {
           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) => {
-    setBlocks(sanitizeBlocks(newBlocks).map(wrap));
-  }, []);
+        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);
+      });
+    },
+    [commit]
+  );
+  const moveBlock = React.useCallback(
+    (activeId, target) => {
+      commit((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);
+      });
+    },
+    [commit]
+  );
+  const replaceAll = React.useCallback(
+    (newBlocks) => {
+      commit(sanitizeBlocks(newBlocks).map(wrap));
+    },
+    [commit]
+  );
+  const resetAll = React.useCallback(
+    (newBlocks) => {
+      reset(sanitizeBlocks(newBlocks).map(wrap));
+    },
+    [reset]
+  );
   return {
     blocks,
     addBlock,
@@ -2253,7 +2358,12 @@ function useBlockKitchenState({
     duplicateBlock,
     reorderBlock,
     moveBlock,
-    replaceAll
+    replaceAll,
+    resetAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo
   };
 }
 function useDevWarning(condition, message) {
@@ -3801,6 +3911,27 @@ function EditorField({
     help && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: help })
   ] });
 }
+function AdvancedIdField({
+  label,
+  help,
+  htmlFor,
+  value,
+  placeholder,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "rounded-md border bg-muted/20 px-2.5 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-[11px] font-medium text-muted-foreground hover:text-foreground", children: "Advanced" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label, help, htmlFor, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: htmlFor,
+        value: value ?? "",
+        placeholder,
+        onChange: (e) => onChange(e.target.value || void 0)
+      }
+    ) }) })
+  ] });
+}
 function ActionsEditor({ block, onChange }) {
   const elements = block.elements ?? [];
   const updateButton = (idx, update) => {
@@ -3899,7 +4030,18 @@ function ActionsEditor({ block, onChange }) {
               /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
             ] }, s))
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AdvancedIdField,
+          {
+            label: "Action ID",
+            help: "Optional. Sent in the interaction payload so your app knows which button was clicked.",
+            htmlFor: `btn-action-${idx}`,
+            value: el.action_id,
+            placeholder: "e.g. approve_request",
+            onChange: (next) => updateButton(idx, { action_id: next })
+          }
+        )
       ] }, idx);
     }),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addButton, className: "self-start", children: [
@@ -4182,7 +4324,18 @@ function ButtonsField({
               /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `${idPrefix}-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
             ] }, s))
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AdvancedIdField,
+          {
+            label: "Action ID",
+            help: "Optional. Sent in the interaction payload so your app knows which button was clicked.",
+            htmlFor: `${idPrefix}-btn-action-${idx}`,
+            value: btn.action_id,
+            placeholder: "e.g. open_details",
+            onChange: (next) => update(idx, { action_id: next })
+          }
+        )
       ] }, idx);
     }),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addButton, disabled: atLimit, className: "self-start", children: [
@@ -8010,7 +8163,18 @@ function ButtonAccessoryFields({ button, onChange }) {
           /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `section-acc-btn-style-${s}`, className: "text-xs capitalize", children: s })
         ] }, s))
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AdvancedIdField,
+      {
+        label: "Action ID",
+        help: "Optional. Sent in the interaction payload so your app knows which button was clicked.",
+        htmlFor: "section-acc-btn-action",
+        value: button.action_id,
+        placeholder: "e.g. learn_more",
+        onChange: (next) => onChange({ ...button, action_id: next })
+      }
+    )
   ] });
 }
 function ImageAccessoryFields({ image, onChange }) {
@@ -8482,7 +8646,8 @@ function VideoEditor({ block, onChange }) {
 function BlockEditor({
   block,
   errors,
-  onChange
+  onChange,
+  onDone
 }) {
   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: [
@@ -8490,7 +8655,19 @@ function BlockEditor({
       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)
+    dispatch(block, onChange),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AdvancedIdField,
+      {
+        label: "Block ID",
+        help: "Optional. Unique within the message or view. Slack returns it in interaction payloads.",
+        htmlFor: "block-id",
+        value: block.block_id,
+        placeholder: "e.g. approval_row",
+        onChange: (next) => onChange({ ...block, block_id: next })
+      }
+    ),
+    onDone ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end border-t pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: onDone, children: "Done" }) }) : null
   ] });
 }
 function dispatch(block, onChange) {
@@ -8707,7 +8884,8 @@ function BlockRow({
               {
                 block: builderBlock.block,
                 errors,
-                onChange: (next) => onUpdate(builderBlock.id, next)
+                onChange: (next) => onUpdate(builderBlock.id, next),
+                onDone: () => onOpenChange?.(false)
               }
             ) })
           ] }),
@@ -8971,7 +9149,15 @@ function ContainerRow({
                     ]
                   }
                 ) }),
-                /* @__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(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",
@@ -9452,6 +9638,10 @@ function formatMessageTs(ts) {
 }
 var SEND_MENU_ITEM = "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
 function Toolbar2({
+  canUndo = false,
+  canRedo = false,
+  onUndo,
+  onRedo,
   onClear,
   onOpenJson,
   onOpenIssues,
@@ -9565,6 +9755,36 @@ function Toolbar2({
         ) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+        onUndo && onRedo ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: onUndo,
+              disabled: !canUndo,
+              "aria-label": "Undo",
+              title: "Undo (Ctrl+Z)",
+              className: "px-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: onRedo,
+              disabled: !canRedo,
+              "aria-label": "Redo",
+              title: "Redo (Ctrl+Shift+Z)",
+              className: "px-2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }) : null,
         errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
@@ -9965,7 +10185,22 @@ function BlockKitchen(props) {
     Boolean(primaryAction && sendEnabled),
     "[BlockKitchen] `primaryAction` is only available in compose-only mode \u2014 with the send integration wired, the built-in Send/Update flow owns the toolbar\u2019s primary action; ignoring `primaryAction`."
   );
-  const { blocks, addBlock, addChild, updateBlock, removeBlock, duplicateBlock, reorderBlock, moveBlock, replaceAll } = useBlockKitchenState({ initialBlocks: seededBlocks, onChange });
+  const {
+    blocks,
+    addBlock,
+    addChild,
+    updateBlock,
+    removeBlock,
+    duplicateBlock,
+    reorderBlock,
+    moveBlock,
+    replaceAll,
+    resetAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo
+  } = useBlockKitchenState({ initialBlocks: seededBlocks, onChange });
   const childParentById = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const top of blocks) {
@@ -10081,6 +10316,30 @@ function BlockKitchen(props) {
   const handleDragCancel = React.useCallback(() => {
     setActivePaletteVariantId(null);
   }, []);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+        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))) {
+        return;
+      }
+      event.preventDefault();
+      if (isRedo) {
+        if (canRedo) redo();
+      } else if (canUndo) {
+        undo();
+      }
+    },
+    [canRedo, canUndo, redo, undo]
+  );
   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(
@@ -10092,91 +10351,102 @@ function BlockKitchen(props) {
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Toolbar2,
-            {
-              onClear: () => replaceAll([]),
-              onOpenJson: () => setJsonOpen(true),
-              onOpenIssues: () => setIssuesOpen(true),
-              onOpenSend: () => setSendOpen(true),
-              onOpenPalette: () => setPaletteOpen(true),
-              canSend: blocks.length > 0,
-              canClear: blocks.length > 0,
-              errorCount: validation.total,
-              previewTheme,
-              onPreviewThemeChange: setUncontrolledPreviewTheme,
-              previewSurface,
-              onPreviewSurfaceChange: setPreviewSurface,
-              allowedSurfaces,
-              showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
-              docsLink,
-              showSend: sendEnabled,
-              primaryAction: !sendEnabled && primaryAction ? {
-                label: primaryAction.label,
-                onClick: () => primaryAction.onClick({
-                  blocks: blockPayloads,
-                  validation: validationSummary,
-                  loadedMessage: activeEditTarget
-                }),
-                disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
-              } : null,
-              sendButtonLabel,
-              loadEnabled,
-              updateEnabled: Boolean(onUpdate),
-              editBadge: activeEditTarget ? {
-                channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
-                ts: activeEditTarget.ts
-              } : null,
-              onOpenLoad: () => setLoadOpen(true),
-              onOpenUpdate: () => setUpdateOpen(true),
-              onExitEdit: () => {
-                if (sendEnabled) {
-                  setEditTarget(null);
-                  replaceAll([]);
-                  setLoadOpen(true);
-                  return;
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Toolbar2,
+                {
+                  canUndo,
+                  canRedo,
+                  onUndo: undo,
+                  onRedo: redo,
+                  onClear: () => replaceAll([]),
+                  onOpenJson: () => setJsonOpen(true),
+                  onOpenIssues: () => setIssuesOpen(true),
+                  onOpenSend: () => setSendOpen(true),
+                  onOpenPalette: () => setPaletteOpen(true),
+                  canSend: blocks.length > 0,
+                  canClear: blocks.length > 0,
+                  errorCount: validation.total,
+                  previewTheme,
+                  onPreviewThemeChange: setUncontrolledPreviewTheme,
+                  previewSurface,
+                  onPreviewSurfaceChange: setPreviewSurface,
+                  allowedSurfaces,
+                  showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
+                  docsLink,
+                  showSend: sendEnabled,
+                  primaryAction: !sendEnabled && primaryAction ? {
+                    label: primaryAction.label,
+                    onClick: () => primaryAction.onClick({
+                      blocks: blockPayloads,
+                      validation: validationSummary,
+                      loadedMessage: activeEditTarget
+                    }),
+                    disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
+                  } : null,
+                  sendButtonLabel,
+                  loadEnabled,
+                  updateEnabled: Boolean(onUpdate),
+                  editBadge: activeEditTarget ? {
+                    channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
+                    ts: activeEditTarget.ts
+                  } : null,
+                  onOpenLoad: () => setLoadOpen(true),
+                  onOpenUpdate: () => setUpdateOpen(true),
+                  onExitEdit: () => {
+                    if (sendEnabled) {
+                      setEditTarget(null);
+                      resetAll([]);
+                      setLoadOpen(true);
+                      return;
+                    }
+                    setEditTarget(null);
+                  },
+                  loadButtonLabel,
+                  updateButtonLabel
                 }
-                setEditTarget(null);
-              },
-              loadButtonLabel,
-              updateButtonLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Palette,
-              {
-                onAddBlock: (block) => addBlock(block),
-                sections: paletteSections,
-                showSearch: showPaletteSearch,
-                searchPlaceholder: paletteSearchPlaceholder,
-                defaultOpenSections
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Surface,
-              {
-                blocks,
-                workspaceName,
-                authorName: activeEditTarget?.username,
-                authorIcon: activeEditTarget?.iconUrl,
-                previewHooks: mergedPreviewHooks,
-                previewTheme,
-                previewSurface,
-                errorsByBlockId: validation.byBlockId,
-                openBlockId,
-                onOpenBlockChange: setOpenBlockId,
-                onUpdate: updateBlock,
-                onDuplicate: duplicateBlock,
-                onDelete: removeBlock,
-                onReorder: reorderBlock,
-                isPaletteDrag: activePaletteVariant !== null,
-                onOpenPalette: () => setPaletteOpen(true)
-              }
-            )
-          ] })
-        ] }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Palette,
+                  {
+                    onAddBlock: (block) => addBlock(block),
+                    sections: paletteSections,
+                    showSearch: showPaletteSearch,
+                    searchPlaceholder: paletteSearchPlaceholder,
+                    defaultOpenSections
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Surface,
+                  {
+                    blocks,
+                    workspaceName,
+                    authorName: activeEditTarget?.username,
+                    authorIcon: activeEditTarget?.iconUrl,
+                    previewHooks: mergedPreviewHooks,
+                    previewTheme,
+                    previewSurface,
+                    errorsByBlockId: validation.byBlockId,
+                    openBlockId,
+                    onOpenBlockChange: setOpenBlockId,
+                    onUpdate: updateBlock,
+                    onDuplicate: duplicateBlock,
+                    onDelete: removeBlock,
+                    onReorder: reorderBlock,
+                    isPaletteDrag: activePaletteVariant !== null,
+                    onOpenPalette: () => setPaletteOpen(true)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: activePaletteVariant ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 rounded border bg-background px-1.5 py-1 text-xs text-foreground shadow-md", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3 w-3 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: activePaletteVariant.label })
@@ -10253,13 +10523,13 @@ function BlockKitchen(props) {
             loadRecentMessages: loading.loadRecentMessages,
             loadChannels: recentChannelSource,
             onLoaded: (result) => {
-              replaceAll(result.blocks);
+              resetAll(result.blocks);
               setEditTarget(toLoadedMessage(result));
               setLoadOpen(false);
             },
             onOpenAsNew: (loadedBlocks) => {
               if (loadedBlocks) {
-                replaceAll(loadedBlocks);
+                resetAll(loadedBlocks);
               }
               setEditTarget(null);
               setLoadOpen(false);