@tightknitai/block-kitchen 0.9.10 → 0.10.0

package/README.md

@@ -110,9 +110,10 @@ export function MyBuilderPage() {
 | `loadSendAsUserStatus` | `() => Promise<{ canSendAsUser: boolean; oauthUrl?: string }>` | grouped\* | Whether the current user has a Slack user-token and can post as themselves. If `canSendAsUser` is false, `oauthUrl` is shown as a "Sign in with Slack" link. |
 | `onSend` | `(payload) => Promise<{ ok: boolean; error?: string }>` | grouped\* | Called when the user submits the send dialog. Payload is `{ channelId, blocks, sendAsUser, extras? }` (`extras` only when `renderSendExtras` is wired). |
 | `renderSendExtras` | `(ctx: SendExtrasContext) => ReactNode` | no | Renders host-defined fields inside the built-in send dialog, below the channel and identity pickers. Collect values with `ctx.setExtras(patch)`; they arrive on `onSend` as `payload.extras`. Requires the send trio. See [Extending the send dialog](#extending-the-send-dialog-custom-fields). |
-| `primaryAction` | `{ label, onClick, disableWhenInvalid? }` | no | Compose-only mode only: a host-owned button in the toolbar slot where "Review & send" normally sits. `onClick` receives `{ blocks, validation }` — the current draft plus the same verdict `onValidationChange` reports. See [Keeping the CTA in the toolbar](#keeping-the-cta-in-the-toolbar-primaryaction). |
-| `editing` | `{ onLoadMessage, onUpdate, loadRecentMessages? }` | no | Opt-in edit mode. When present, the toolbar exposes "Edit message": the user pastes a Slack message link, `onLoadMessage({ link })` returns a host-computed [editability verdict](#editing-an-existing-message-opt-in), and a successful load flips the primary action to "Update message" wired to `onUpdate`. Pass `loadRecentMessages` to add a "recent messages from this app" picker beside the paste input; the user picks a channel first (reusing `loadChannels`) and the lookup is scoped to it. Omit `editing` to keep send-only behavior. |
-| `loadButtonLabel` | `string` | no | Label + accessible name for the toolbar button that opens the load-message dialog (the edit-mode entry point). Defaults to `'Load message'`. Only shown when `editing` is set and no message is loaded. |
+| `primaryAction` | `{ label, onClick, disableWhenInvalid? }` | no | Compose-only mode only: a host-owned button in the toolbar slot where "Review & send" normally sits. `onClick` receives `{ blocks, validation, loadedMessage }` — the current draft, the same verdict `onValidationChange` reports, and the currently [loaded message](#loading-an-existing-message-opt-in) (`null` unless `loading` is configured and one is loaded). See [Keeping the CTA in the toolbar](#keeping-the-cta-in-the-toolbar-primaryaction). |
+| `loading` | `{ onLoadMessage, loadRecentMessages?, loadChannels?, initialTarget?, onLoadedMessageChange? }` | no | Opt-in: [load an existing message](#loading-an-existing-message-opt-in) into the editor. Adds a "Find message" toolbar entry — the user pastes a Slack permalink (or picks a recent message) and the draft is hydrated with its blocks. Loading is a *composition* concern, so it works in **both** send mode and compose-only mode. `onLoadedMessageChange` reports the loaded target (`null` on exit) so a host-owned commitment step can stay in sync. |
+| `onUpdate` | `(payload) => Promise<{ ok: boolean; error?: string }>` | no | Opt-in update-in-place mode (send mode only); sibling to `onSend`, but the payload carries the source `channel + ts`. With `loading` configured, a loaded message flips the primary action to a "Review & update" split button wired to it (`chat.update`). |
+| `loadButtonLabel` | `string` | no | Label + accessible name for the toolbar button that opens the load-message dialog. Defaults to `'Find message'`. Only shown when `loading` is configured. |
 | `updateButtonLabel` | `string` | no | Label for the toolbar's primary button while a message is loaded for editing. It's a split button: clicking it updates the message in place; the menu beside it also offers "Send as a new message" (post the current blocks as new). Defaults to `'Review & update'`. |
 | `confirmUpdateLabel` | `string` | no | Label for the update dialog's final confirm button. Defaults to `'Update message'` (shows `'Updating…'` while in flight). |
 | `previewHooks` | `PreviewHooks` | no | Hooks forwarded to `slack-blocks-to-jsx`'s `<Message>` for resolving user / channel / emoji directives. |
@@ -134,9 +135,10 @@ export function MyBuilderPage() {
 all-or-nothing: provide all three for the built-in send flow, or omit all
 three for [compose-only mode](#compose-only-mode-bring-your-own-send-flow)
 (no send button; your app owns the send flow). Wiring only some of the three
-is a type error. `editing` and `renderSendExtras` require the trio;
+is a type error. `onUpdate` and `renderSendExtras` require the trio;
 `primaryAction` requires its absence (the built-in Send/Update flow owns the
-toolbar's primary slot otherwise).
+toolbar's primary slot otherwise). `loading` is mode-agnostic — it works
+with or without the trio.
 
 ## Compose-only mode (bring your own send flow)
 
@@ -186,9 +188,15 @@ Notes:
 - `onValidationChange` reports the same verdict the issues sheet displays
   (validated against the `message` surface, like Send), so your CTA and the
   in-builder issue count can never disagree.
-- `editing` is unavailable in compose-only mode: updating an existing message
-  is inherently bound to its channel + timestamp, so the update flow only
-  exists alongside the send integration.
+- [Loading an existing message](#loading-an-existing-message-opt-in) works
+  here too — pass `loading` and the "Find message" entry appears. The loaded
+  target (channel + ts + editability verdict) reaches your app via
+  `primaryAction`'s `loadedMessage` context and
+  `loading.onLoadedMessageChange`, so your own commitment step can offer
+  "update in place" alongside "post as new".
+- The built-in *update* flow (`onUpdate`) is unavailable in compose-only
+  mode: dispatching a `chat.update` is inherently bound to a channel +
+  timestamp + token, so it only exists alongside the send integration.
 
 ### Keeping the CTA in the toolbar (`primaryAction`)
 
@@ -287,17 +295,20 @@ Notes:
   (identities, channels), prefer proposing a first-class prop over routing
   them through extras; the slot is for genuinely host-specific concerns.
 
-## Editing an existing message (opt-in)
+## Loading an existing message (opt-in)
 
-By default the builder is send-only. Pass `editing` to let users load an
-already-posted message, edit its blocks, and dispatch a `chat.update`. The
+By default the builder starts from a blank canvas. Pass `loading` to let
+users load an already-posted message's blocks into the editor — paste a
+permalink, or pick from a "recent messages from this app" list. Loading is a
+*composition* concern, so it works in **both** send mode and
+[compose-only mode](#compose-only-mode-bring-your-own-send-flow). The
 package stays integration-agnostic: it makes no Slack calls and computes
 nothing about who can edit; the host does both.
 
 ```tsx
 <BlockKitchen
-  /* …send-only props… */
-  editing={{
+  /* …send trio, or nothing (compose-only)… */
+  loading={{
     // Host parses the pasted permalink, fetches the message, and returns a
     // verdict. `chat.update` only edits a message authored by the calling
     // token, so the host decides: bot message → 'bot', the user's own
@@ -315,17 +326,11 @@ nothing about who can edit; the host does both.
         return { ok: true, channelId: msg.channel, channelName: msg.channelName, ts: msg.ts, blocks: msg.blocks, editableVia: 'user', ...author };
       return { ok: false, reason: 'Only messages your app or you posted can be edited.', blocks: msg.blocks };
     },
-    // Sibling to onSend; carries the source channel + ts. `asUser` follows
-    // the verdict's `editableVia`.
-    onUpdate: async ({ channelId, ts, blocks, asUser }) => {
-      await chatUpdate({ channel: channelId, ts, blocks, asUser }); // your code
-      return { ok: true };
-    },
     // Optional: adds a "recent messages from this app" picker beside the paste
-    // input. The user first picks a channel (reusing `loadChannels`), then this
-    // is called with that `channelId` so the lookup scans only one channel.
-    // These are editable-by-construction (the app authored them), so picking one
-    // loads it straight into edit mode (no verdict needed).
+    // input. The user first picks a channel, then this is called with that
+    // `channelId` so the lookup scans only one channel. These are
+    // editable-by-construction (the app authored them), so picking one loads
+    // it directly (no verdict needed).
     loadRecentMessages: async (channelId) => {
       const msgs = await fetchRecentAppMessages(channelId); // your code
       return msgs.map((m) => ({
@@ -337,17 +342,68 @@ nothing about who can edit; the host does both.
         label: m.preview // one-line preview shown in the picker row
       }));
     }
+    // In send mode the recent picker's channel list reuses the send trio's
+    // `loadChannels`. In compose-only mode there is no trio — pass
+    // `loadChannels` here too, or the picker is hidden.
   }}
 />
 ```
 
-- On `ok`, the builder hydrates with `blocks`, shows an edit-mode badge, locks
-  the destination to the source channel, and fixes the post-as identity to
-  `editableVia` (the `'user'` path reuses `loadSendAsUserStatus` for the "Sign
-  in with Slack" gate).
+- On `ok`, the builder hydrates with `blocks` and shows a loaded banner
+  ("References an existing message in #channel"), with the author's
+  name/avatar in the preview header.
 - On `{ ok: false, reason }`, the load dialog renders the reason inline and
   offers **Open as a new message instead**. Pass `blocks` on the failure
   result to hydrate the draft for that fallback.
+- `loading.onLoadedMessageChange` reports the loaded target — and `null`
+  when the user exits it — so host state stays in sync (most useful in
+  compose-only mode, where your app owns what happens next). It can
+  **re-fire for the same `channelId` + `ts`** when the host's verdict or
+  metadata changed (e.g. `editableVia` flipping after a Slack sign-in), so
+  key host state on the full target, not `ts` alone.
+- The banner's **"Switch to a new message"** exit is mode-aware: in send
+  mode it clears the canvas and reopens the load dialog (the edit-centric
+  "pick a different message" flow); in compose-only mode it only detaches
+  the reference and **keeps the draft** — loading seeded a composition, and
+  a misclick must not destroy it.
+
+### Updating it in place (send mode)
+
+In send mode, pair `loading` with `onUpdate` to dispatch a `chat.update` for
+the loaded message. The primary action flips to a "Review & update" split
+button (the menu also offers "Send as a new message"), the destination is
+locked to the source channel, and the post-as identity is fixed to the
+verdict's `editableVia` (the `'user'` path reuses `loadSendAsUserStatus` for
+the "Sign in with Slack" gate).
+
+```tsx
+<BlockKitchen
+  /* …send trio… */
+  loading={{ onLoadMessage }}
+  // Sibling to onSend; carries the source channel + ts. `asUser` follows
+  // the verdict's `editableVia`.
+  onUpdate={async ({ channelId, ts, blocks, asUser }) => {
+    await chatUpdate({ channel: channelId, ts, blocks, asUser }); // your code
+    return { ok: true };
+  }}
+/>
+```
+
+With `loading` alone (no `onUpdate`), a loaded message can still be posted
+as a brand-new message via the regular Send flow — there's just no in-place
+update. In compose-only mode `onUpdate` doesn't exist; implement your own
+update against the target from `loadedMessage` / `onLoadedMessageChange`.
+
+> **Migrating from the pre-split `editing` bundle (≤ 0.9.x):** the load
+> fields move to `loading` unchanged, and `onUpdate` becomes a top-level
+> prop (the `editing` wrapper is gone).
+>
+> ```tsx
+> // Before
+> <BlockKitchen editing={{ onLoadMessage, onUpdate, loadRecentMessages }} />
+> // After
+> <BlockKitchen loading={{ onLoadMessage, loadRecentMessages }} onUpdate={onUpdate} />
+> ```
 
 ## Customizing the palette
 
@@ -405,7 +461,9 @@ import type {
   SupportedBlockType,
   BlockKitchenProps,
   BlockKitchenBaseProps,        // shared props
-  BlockKitchenSendProps,        // the send trio + `editing` + `renderSendExtras`
+  BlockKitchenSendProps,        // the send trio + `onUpdate` + `renderSendExtras`
+  LoadingConfig,                // load an existing message (works in both modes)
+  LoadedMessage,                // the loaded target: channel + ts + verdict
   BlockKitchenComposeOnlyProps, // the trio explicitly absent + `primaryAction`
   PaletteSection,
   PaletteVariant,

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { Z as SupportedBlock } from './palette-Duj901T6.cjs';
-export { _ as SupportedBlockType } from './palette-Duj901T6.cjs';
+import { _ as SupportedBlock } from './palette-C8sPJuXx.cjs';
+export { $ as SupportedBlockType } from './palette-C8sPJuXx.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { Z as SupportedBlock } from './palette-Duj901T6.js';
-export { _ as SupportedBlockType } from './palette-Duj901T6.js';
+import { _ as SupportedBlock } from './palette-C8sPJuXx.js';
+export { $ as SupportedBlockType } from './palette-C8sPJuXx.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -2256,6 +2256,29 @@ function useBlockKitchenState({
     replaceAll
   };
 }
+function useDevWarning(condition, message) {
+  const warnedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (condition && !warnedRef.current) {
+      warnedRef.current = true;
+      console.warn(message);
+    }
+  }, [condition, message]);
+}
+function useNotifyOnChange(value, toKey, callback) {
+  const lastNotifiedRef = React.useRef(null);
+  React.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 = {
@@ -3053,7 +3076,7 @@ function LoadMessageDialog({
     loadRecentMessagesRef.current = loadRecentMessages;
     loadChannelsRef.current = loadChannels;
   });
-  const hasRecent = !!loadRecentMessages;
+  const hasRecent = !!loadRecentMessages && !!loadChannels;
   React.useEffect(() => {
     if (!open) {
       return;
@@ -3064,7 +3087,10 @@ function LoadMessageDialog({
     setRecent(null);
     setRecentError(null);
     setSelectedRecent(null);
-    if (!loadRecentMessagesRef.current) {
+  }, [open]);
+  React.useEffect(() => {
+    const load = loadChannelsRef.current;
+    if (!open || !hasRecent || !load) {
       setChannels([]);
       setChannelsError(null);
       return;
@@ -3072,7 +3098,7 @@ function LoadMessageDialog({
     setChannels(null);
     setChannelsError(null);
     let cancelled = false;
-    loadChannelsRef.current().then((list) => {
+    load().then((list) => {
       if (!cancelled) {
         setChannels(list);
       }
@@ -3084,7 +3110,7 @@ function LoadMessageDialog({
     return () => {
       cancelled = true;
     };
-  }, [open]);
+  }, [open, hasRecent]);
   React.useEffect(() => {
     if (!open || !loadRecentMessagesRef.current || !channelId) {
       return;
@@ -9444,7 +9470,8 @@ function Toolbar2({
   showSend = true,
   primaryAction,
   sendButtonLabel = "Review & send",
-  editingEnabled = false,
+  loadEnabled = false,
+  updateEnabled = false,
   editBadge,
   onOpenLoad,
   onOpenUpdate,
@@ -9464,7 +9491,7 @@ function Toolbar2({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
-        editingEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
+        loadEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MailSearch, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
@@ -9594,9 +9621,12 @@ function Toolbar2({
               children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
@@ -9669,7 +9699,7 @@ function Toolbar2({
         ] })
       ] })
     ] }),
-    editingEnabled && editBadge ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4 shrink-0 text-primary" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 text-sm", children: [
         "References an existing message in ",
@@ -9832,6 +9862,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,
@@ -9844,7 +9887,8 @@ function BlockKitchen(props) {
     loadSendAsUserStatus,
     onSend,
     renderSendExtras,
-    editing,
+    loading,
+    onUpdate: onUpdateProp,
     primaryAction,
     loadButtonLabel,
     updateButtonLabel,
@@ -9888,36 +9932,39 @@ function BlockKitchen(props) {
   const variantById = React.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;
-  React.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 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 } = useBlockKitchenState({ initialBlocks: seededBlocks, onChange });
   const childParentById = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -9934,8 +9981,11 @@ function BlockKitchen(props) {
   const [sendOpen, setSendOpen] = React.useState(false);
   const [updateOpen, setUpdateOpen] = React.useState(false);
   const [loadOpen, setLoadOpen] = React.useState(false);
-  const [editTarget, setEditTarget] = React.useState(() => editingConfig?.initialTarget ?? null);
-  const activeEditTarget = editingConfig ? editTarget : null;
+  const [editTarget, setEditTarget] = React.useState(
+    () => loading?.initialTarget ? toLoadedMessage(loading.initialTarget) : null
+  );
+  const activeEditTarget = loadEnabled ? editTarget : null;
+  useNotifyOnChange(activeEditTarget, loadedMessageKey, loading?.onLoadedMessageChange);
   const [issuesOpen, setIssuesOpen] = React.useState(false);
   const [paletteOpen, setPaletteOpen] = React.useState(false);
   const [openBlockId, setOpenBlockId] = React.useState(null);
@@ -9957,18 +10007,7 @@ function BlockKitchen(props) {
     () => ({ valid: validation.valid, errorCount: validation.total, errors: validation.errors }),
     [validation]
   );
-  const lastNotifiedValidationRef = React.useRef(null);
-  React.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 = core.useSensors(
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
     core.useSensor(core.TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
@@ -10075,11 +10114,16 @@ function BlockKitchen(props) {
               showSend: sendEnabled,
               primaryAction: !sendEnabled && primaryAction ? {
                 label: primaryAction.label,
-                onClick: () => primaryAction.onClick({ blocks: blockPayloads, validation: validationSummary }),
+                onClick: () => primaryAction.onClick({
+                  blocks: blockPayloads,
+                  validation: validationSummary,
+                  loadedMessage: activeEditTarget
+                }),
                 disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
               } : null,
               sendButtonLabel,
-              editingEnabled: !!editingConfig,
+              loadEnabled,
+              updateEnabled: Boolean(onUpdate),
               editBadge: activeEditTarget ? {
                 channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
                 ts: activeEditTarget.ts
@@ -10087,9 +10131,13 @@ function BlockKitchen(props) {
               onOpenLoad: () => setLoadOpen(true),
               onOpenUpdate: () => setUpdateOpen(true),
               onExitEdit: () => {
+                if (sendEnabled) {
+                  setEditTarget(null);
+                  replaceAll([]);
+                  setLoadOpen(true);
+                  return;
+                }
                 setEditTarget(null);
-                replaceAll([]);
-                setLoadOpen(true);
               },
               loadButtonLabel,
               updateButtonLabel
@@ -10179,7 +10227,7 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        activeEditTarget && editingConfig && loadSendAsUserStatus ? /* @__PURE__ */ jsxRuntime.jsx(
+        activeEditTarget && onUpdate && loadSendAsUserStatus ? /* @__PURE__ */ jsxRuntime.jsx(
           UpdateDialog,
           {
             open: updateOpen,
@@ -10187,7 +10235,7 @@ function BlockKitchen(props) {
             target: activeEditTarget,
             blocks: blockPayloads,
             loadSendAsUserStatus,
-            onUpdate: editingConfig.onUpdate,
+            onUpdate,
             confirmUpdateLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10196,25 +10244,17 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        editingConfig && loadChannels ? /* @__PURE__ */ jsxRuntime.jsx(
+        loading ? /* @__PURE__ */ jsxRuntime.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
-              });
+              setEditTarget(toLoadedMessage(result));
               setLoadOpen(false);
             },
             onOpenAsNew: (loadedBlocks) => {