@tightknitai/block-kitchen 0.9.10 → 0.10.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -2036,6 +2036,69 @@ function useBlockKitValidation(blocks, surface) {
   }, [blocks, surface]);
   return state;
 }
+var MAX_HISTORY = 20;
+function useHistoryState(initial) {
+  const [record, setRecord] = useState(() => ({
+    past: [],
+    present: typeof initial === "function" ? initial() : initial,
+    future: [],
+    lastTag: null
+  }));
+  const commit = 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 = 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 = 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 = useCallback((next) => {
+    setRecord({ past: [], present: next, future: [], lastTag: null });
+  }, []);
+  return 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;
@@ -2086,7 +2149,15 @@ function useBlockKitchenState({
   initialBlocks,
   onChange
 } = {}) {
-  const [blocks, setBlocks] = useState(() => (initialBlocks ?? []).map(wrap));
+  const {
+    present: blocks,
+    commit,
+    undo,
+    redo,
+    reset,
+    canUndo,
+    canRedo
+  } = useHistoryState(() => (initialBlocks ?? []).map(wrap));
   const onChangeRef = useRef(onChange);
   useEffect(() => {
     onChangeRef.current = onChange;
@@ -2099,121 +2170,155 @@ function useBlockKitchenState({
     }
     onChangeRef.current?.(blocks.map((b) => b.block));
   }, [blocks]);
-  const addBlock = 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 = 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 = 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 = 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 = useCallback((id) => {
-    setBlocks((prev) => {
-      if (prev.some((b) => b.id === id)) {
-        return prev.filter((b) => b.id !== id);
+      });
+    },
+    [commit]
+  );
+  const addChild = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = useCallback(
+    (newBlocks) => {
+      commit(sanitizeBlocks(newBlocks).map(wrap));
+    },
+    [commit]
+  );
+  const resetAll = useCallback(
+    (newBlocks) => {
+      reset(sanitizeBlocks(newBlocks).map(wrap));
+    },
+    [reset]
+  );
   return {
     blocks,
     addBlock,
@@ -2223,9 +2328,37 @@ function useBlockKitchenState({
     duplicateBlock,
     reorderBlock,
     moveBlock,
-    replaceAll
+    replaceAll,
+    resetAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo
   };
 }
+function useDevWarning(condition, message) {
+  const warnedRef = useRef(false);
+  useEffect(() => {
+    if (condition && !warnedRef.current) {
+      warnedRef.current = true;
+      console.warn(message);
+    }
+  }, [condition, message]);
+}
+function useNotifyOnChange(value, toKey, callback) {
+  const lastNotifiedRef = useRef(null);
+  useEffect(() => {
+    if (!callback) {
+      return;
+    }
+    const key = toKey(value);
+    if (lastNotifiedRef.current === key) {
+      return;
+    }
+    lastNotifiedRef.current = key;
+    callback(value);
+  }, [value, toKey, callback]);
+}
 
 // src/lib/brand-theme.ts
 var TOKEN_TO_CSS_VAR = {
@@ -3023,7 +3156,7 @@ function LoadMessageDialog({
     loadRecentMessagesRef.current = loadRecentMessages;
     loadChannelsRef.current = loadChannels;
   });
-  const hasRecent = !!loadRecentMessages;
+  const hasRecent = !!loadRecentMessages && !!loadChannels;
   useEffect(() => {
     if (!open) {
       return;
@@ -3034,7 +3167,10 @@ function LoadMessageDialog({
     setRecent(null);
     setRecentError(null);
     setSelectedRecent(null);
-    if (!loadRecentMessagesRef.current) {
+  }, [open]);
+  useEffect(() => {
+    const load = loadChannelsRef.current;
+    if (!open || !hasRecent || !load) {
       setChannels([]);
       setChannelsError(null);
       return;
@@ -3042,7 +3178,7 @@ function LoadMessageDialog({
     setChannels(null);
     setChannelsError(null);
     let cancelled = false;
-    loadChannelsRef.current().then((list) => {
+    load().then((list) => {
       if (!cancelled) {
         setChannels(list);
       }
@@ -3054,7 +3190,7 @@ function LoadMessageDialog({
     return () => {
       cancelled = true;
     };
-  }, [open]);
+  }, [open, hasRecent]);
   useEffect(() => {
     if (!open || !loadRecentMessagesRef.current || !channelId) {
       return;
@@ -8426,7 +8562,8 @@ function VideoEditor({ block, onChange }) {
 function BlockEditor({
   block,
   errors,
-  onChange
+  onChange,
+  onDone
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
@@ -8434,7 +8571,8 @@ function BlockEditor({
       labelForBlockType(block.type)
     ] }) }),
     errors && errors.length > 0 ? /* @__PURE__ */ 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__ */ jsx("li", { children: err }, i)) }) : null,
-    dispatch(block, onChange)
+    dispatch(block, onChange),
+    onDone ? /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t pt-3", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: onDone, children: "Done" }) }) : null
   ] });
 }
 function dispatch(block, onChange) {
@@ -8651,7 +8789,8 @@ function BlockRow({
               {
                 block: builderBlock.block,
                 errors,
-                onChange: (next) => onUpdate(builderBlock.id, next)
+                onChange: (next) => onUpdate(builderBlock.id, next),
+                onDone: () => onOpenChange?.(false)
               }
             ) })
           ] }),
@@ -8915,7 +9054,15 @@ function ContainerRow({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(BlockEditor, { block, errors, onChange: (next) => onUpdate(id, next) }) })
+                /* @__PURE__ */ jsx(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",
@@ -9396,6 +9543,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,
@@ -9414,7 +9565,8 @@ function Toolbar2({
   showSend = true,
   primaryAction,
   sendButtonLabel = "Review & send",
-  editingEnabled = false,
+  loadEnabled = false,
+  updateEnabled = false,
   editBadge,
   onOpenLoad,
   onOpenUpdate,
@@ -9434,7 +9586,7 @@ function Toolbar2({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1 border-b bg-background px-2 py-1.5 sm:px-3 sm:py-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
-        editingEnabled ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
+        loadEnabled ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
           /* @__PURE__ */ jsx(MailSearch, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
@@ -9508,6 +9660,36 @@ function Toolbar2({
         ) : null
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+        onUndo && onRedo ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: onUndo,
+              disabled: !canUndo,
+              "aria-label": "Undo",
+              title: "Undo (Ctrl+Z)",
+              className: "px-2",
+              children: /* @__PURE__ */ jsx(Undo2, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(Redo2, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }) : null,
         errorCount > 0 ? /* @__PURE__ */ jsxs(
           Button,
           {
@@ -9564,9 +9746,12 @@ function Toolbar2({
               children: /* @__PURE__ */ jsx("span", { children: primaryAction.label })
             }
           )
-        ) : null : editBadge ? (
-          // A message is loaded: split button. Main action updates it in
-          // place; the menu also offers posting the blocks as a new message.
+        ) : null : editBadge && updateEnabled ? (
+          // A message is loaded and update-in-place is wired: split button.
+          // Main action updates it in place; the menu also offers posting
+          // the blocks as a new message. Without `updateEnabled` (loading
+          // configured but no `editing.onUpdate`), the plain send button
+          // below stays — the loaded message can only be posted as new.
           /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
             /* @__PURE__ */ jsxs(
               Button,
@@ -9639,7 +9824,7 @@ function Toolbar2({
         ] })
       ] })
     ] }),
-    editingEnabled && editBadge ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b bg-muted px-2 py-2 text-foreground sm:px-3", children: [
+    loadEnabled && editBadge ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b bg-muted px-2 py-2 text-foreground sm:px-3", children: [
       /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 shrink-0 text-primary" }),
       /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 text-sm", children: [
         "References an existing message in ",
@@ -9802,6 +9987,19 @@ function UpdateDialog({
     ] })
   ] }) });
 }
+function toLoadedMessage({
+  ok: _ok,
+  blocks: _blocks,
+  ...loadedMessage
+}) {
+  return loadedMessage;
+}
+function loadedMessageKey(message) {
+  return message ? JSON.stringify(message) : null;
+}
+function validationSummaryKey(summary) {
+  return JSON.stringify([summary.valid, summary.errorCount, ...summary.errors]);
+}
 function BlockKitchen(props) {
   const {
     workspaceName,
@@ -9814,7 +10012,8 @@ function BlockKitchen(props) {
     loadSendAsUserStatus,
     onSend,
     renderSendExtras,
-    editing,
+    loading,
+    onUpdate: onUpdateProp,
     primaryAction,
     loadButtonLabel,
     updateButtonLabel,
@@ -9858,37 +10057,55 @@ function BlockKitchen(props) {
   const variantById = useMemo(() => buildVariantById(paletteSections), [paletteSections]);
   const allowedSurfaces = allowedSurfacesProp && allowedSurfacesProp.length > 0 ? allowedSurfacesProp : ["message"];
   const sendEnabled = Boolean(loadChannels && loadSendAsUserStatus && onSend);
-  const editingConfig = sendEnabled ? editing : void 0;
-  const seededBlocks = editingConfig?.initialTarget?.blocks ?? initialBlocks;
-  useEffect(() => {
-    if (editingConfig?.initialTarget && initialBlocks) {
-      console.warn(
-        "[BlockKitchen] Both `initialBlocks` and `editing.initialTarget` were provided; using the target\u2019s blocks and ignoring `initialBlocks`."
-      );
-    }
-    const sendPropsProvided = [loadChannels, loadSendAsUserStatus, onSend].filter(Boolean).length;
-    if (sendPropsProvided > 0 && sendPropsProvided < 3) {
-      console.warn(
-        "[BlockKitchen] Partial send wiring: `loadChannels`, `loadSendAsUserStatus`, and `onSend` are all-or-nothing. The send button is hidden until all three are provided."
-      );
-    }
-    if (editing && !sendEnabled) {
-      console.warn(
-        "[BlockKitchen] `editing` requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `editing`."
-      );
-    }
-    if (renderSendExtras && !sendEnabled) {
-      console.warn(
-        "[BlockKitchen] `renderSendExtras` extends the built-in send dialog, which requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `renderSendExtras`."
-      );
-    }
-    if (primaryAction && sendEnabled) {
-      console.warn(
-        "[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 loadEnabled = Boolean(loading);
+  const recentChannelSource = loading?.loadChannels ?? (sendEnabled ? loadChannels : void 0);
+  const onUpdate = sendEnabled ? onUpdateProp : void 0;
+  const seededBlocks = loading?.initialTarget?.blocks ?? initialBlocks;
+  const sendPropsProvided = [loadChannels, loadSendAsUserStatus, onSend].filter(Boolean).length;
+  useDevWarning(
+    Boolean(loading?.initialTarget && initialBlocks),
+    "[BlockKitchen] Both `initialBlocks` and an `initialTarget` were provided; using the target\u2019s blocks and ignoring `initialBlocks`."
+  );
+  useDevWarning(
+    sendPropsProvided > 0 && sendPropsProvided < 3,
+    "[BlockKitchen] Partial send wiring: `loadChannels`, `loadSendAsUserStatus`, and `onSend` are all-or-nothing. The send button is hidden until all three are provided."
+  );
+  useDevWarning(
+    Boolean(onUpdateProp && !sendEnabled),
+    "[BlockKitchen] `onUpdate` requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `onUpdate`. To load an existing message without the send integration, use the `loading` prop instead."
+  );
+  useDevWarning(
+    Boolean(sendEnabled && onUpdateProp && !loading),
+    "[BlockKitchen] `onUpdate` needs a loaded message, but no load source is configured \u2014 provide the `loading` prop. The update flow is unreachable."
+  );
+  useDevWarning(
+    Boolean(loading?.loadRecentMessages && !recentChannelSource),
+    "[BlockKitchen] `loading.loadRecentMessages` needs a channel list to scope its lookup \u2014 provide `loading.loadChannels` (compose-only mode has no send integration to reuse). Hiding the recent-messages picker."
+  );
+  useDevWarning(
+    Boolean(renderSendExtras && !sendEnabled),
+    "[BlockKitchen] `renderSendExtras` extends the built-in send dialog, which requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `renderSendExtras`."
+  );
+  useDevWarning(
+    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,
+    resetAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo
+  } = useBlockKitchenState({ initialBlocks: seededBlocks, onChange });
   const childParentById = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const top of blocks) {
@@ -9904,8 +10121,11 @@ function BlockKitchen(props) {
   const [sendOpen, setSendOpen] = useState(false);
   const [updateOpen, setUpdateOpen] = useState(false);
   const [loadOpen, setLoadOpen] = useState(false);
-  const [editTarget, setEditTarget] = useState(() => editingConfig?.initialTarget ?? null);
-  const activeEditTarget = editingConfig ? editTarget : null;
+  const [editTarget, setEditTarget] = useState(
+    () => loading?.initialTarget ? toLoadedMessage(loading.initialTarget) : null
+  );
+  const activeEditTarget = loadEnabled ? editTarget : null;
+  useNotifyOnChange(activeEditTarget, loadedMessageKey, loading?.onLoadedMessageChange);
   const [issuesOpen, setIssuesOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [openBlockId, setOpenBlockId] = useState(null);
@@ -9927,18 +10147,7 @@ function BlockKitchen(props) {
     () => ({ valid: validation.valid, errorCount: validation.total, errors: validation.errors }),
     [validation]
   );
-  const lastNotifiedValidationRef = useRef(null);
-  useEffect(() => {
-    if (!onValidationChange) {
-      return;
-    }
-    const key = JSON.stringify([validationSummary.valid, validationSummary.errorCount, ...validationSummary.errors]);
-    if (lastNotifiedValidationRef.current === key) {
-      return;
-    }
-    lastNotifiedValidationRef.current = key;
-    onValidationChange(validationSummary);
-  }, [validationSummary, onValidationChange]);
+  useNotifyOnChange(validationSummary, validationSummaryKey, onValidationChange);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
@@ -10012,6 +10221,30 @@ function BlockKitchen(props) {
   const handleDragCancel = useCallback(() => {
     setActivePaletteVariantId(null);
   }, []);
+  const handleKeyDown = 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__ */ jsx(BrandThemeScope, { theme, children: /* @__PURE__ */ jsx(CustomEmojiProvider, { customEmojis, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
@@ -10023,82 +10256,102 @@ function BlockKitchen(props) {
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground", children: [
-          /* @__PURE__ */ 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 }),
-                disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
-              } : null,
-              sendButtonLabel,
-              editingEnabled: !!editingConfig,
-              editBadge: activeEditTarget ? {
-                channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
-                ts: activeEditTarget.ts
-              } : null,
-              onOpenLoad: () => setLoadOpen(true),
-              onOpenUpdate: () => setUpdateOpen(true),
-              onExitEdit: () => {
-                setEditTarget(null);
-                replaceAll([]);
-                setLoadOpen(true);
-              },
-              loadButtonLabel,
-              updateButtonLabel
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsx(
-              Palette,
-              {
-                onAddBlock: (block) => addBlock(block),
-                sections: paletteSections,
-                showSearch: showPaletteSearch,
-                searchPlaceholder: paletteSearchPlaceholder,
-                defaultOpenSections
-              }
-            ) }),
-            /* @__PURE__ */ 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__ */ 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__ */ 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
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
+                /* @__PURE__ */ jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsx(
+                  Palette,
+                  {
+                    onAddBlock: (block) => addBlock(block),
+                    sections: paletteSections,
+                    showSearch: showPaletteSearch,
+                    searchPlaceholder: paletteSearchPlaceholder,
+                    defaultOpenSections
+                  }
+                ) }),
+                /* @__PURE__ */ 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__ */ jsx(DragOverlay, { dropAnimation: null, children: activePaletteVariant ? /* @__PURE__ */ 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__ */ jsx(GripVertical, { className: "h-3 w-3 shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "truncate", children: activePaletteVariant.label })
@@ -10149,7 +10402,7 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        activeEditTarget && editingConfig && loadSendAsUserStatus ? /* @__PURE__ */ jsx(
+        activeEditTarget && onUpdate && loadSendAsUserStatus ? /* @__PURE__ */ jsx(
           UpdateDialog,
           {
             open: updateOpen,
@@ -10157,7 +10410,7 @@ function BlockKitchen(props) {
             target: activeEditTarget,
             blocks: blockPayloads,
             loadSendAsUserStatus,
-            onUpdate: editingConfig.onUpdate,
+            onUpdate,
             confirmUpdateLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10166,30 +10419,22 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        editingConfig && loadChannels ? /* @__PURE__ */ jsx(
+        loading ? /* @__PURE__ */ jsx(
           LoadMessageDialog,
           {
             open: loadOpen,
             onOpenChange: setLoadOpen,
-            onLoadMessage: editingConfig.onLoadMessage,
-            loadRecentMessages: editingConfig.loadRecentMessages,
-            loadChannels,
+            onLoadMessage: loading.onLoadMessage,
+            loadRecentMessages: loading.loadRecentMessages,
+            loadChannels: recentChannelSource,
             onLoaded: (result) => {
-              replaceAll(result.blocks);
-              setEditTarget({
-                channelId: result.channelId,
-                channelName: result.channelName,
-                ts: result.ts,
-                editableVia: result.editableVia,
-                workspaceName: result.workspaceName,
-                username: result.username,
-                iconUrl: result.iconUrl
-              });
+              resetAll(result.blocks);
+              setEditTarget(toLoadedMessage(result));
               setLoadOpen(false);
             },
             onOpenAsNew: (loadedBlocks) => {
               if (loadedBlocks) {
-                replaceAll(loadedBlocks);
+                resetAll(loadedBlocks);
               }
               setEditTarget(null);
               setLoadOpen(false);