@tightknitai/block-kitchen 0.10.2 → 0.10.4

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, 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 { 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, 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';
@@ -13,14 +13,14 @@ import { nanoid } from 'nanoid';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import 'slack-blocks-to-jsx/dist/style.css';
+import { Message } from 'slack-blocks-to-jsx';
 import { CSS } from '@dnd-kit/utilities';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import Link from '@tiptap/extension-link';
 import { Node, ReactNodeViewRenderer, mergeAttributes, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
-import 'slack-blocks-to-jsx/dist/style.css';
-import { Message } from 'slack-blocks-to-jsx';
 
 // src/components/block-kitchen.tsx
 
@@ -1957,14 +1957,7 @@ function sanitizeBlocks(blocks) {
 
 // src/lib/to-slack-blocks.ts
 function toSlackBlocks(blocks) {
-  return blocks.map((block) => {
-    const safe = sanitizeBlock(block);
-    if (safe.type === "header" && "level" in safe) {
-      const { level: _omit, ...rest } = safe;
-      return rest;
-    }
-    return safe;
-  });
+  return blocks.map((block) => sanitizeBlock(block));
 }
 
 // src/lib/validation-sanitize.ts
@@ -3031,6 +3024,128 @@ var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
+function SlackBlockPreview({
+  block,
+  hooks,
+  theme = "light"
+}) {
+  const rootRef = useRef(null);
+  const safeBlock = useMemo(() => sanitizeBlock(block), [block]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    for (const wrapper of root.querySelectorAll(
+      ".slack_blocks_to_jsx__image_media_trigger, .slack_blocks_to_jsx__video_title"
+    )) {
+      for (const btn of wrapper.querySelectorAll("button:not([aria-label])")) {
+        const title = wrapper.querySelector(".slack_blocks_to_jsx__image_title")?.textContent?.trim();
+        btn.setAttribute("aria-label", title ? `Toggle ${title}` : "Toggle media");
+      }
+    }
+    for (const a of root.querySelectorAll("a[href]")) {
+      const href = a.getAttribute("href");
+      if (!isSafeHref(href)) {
+        a.setAttribute("href", "#");
+        a.setAttribute("data-bk-blocked-href", "1");
+      }
+    }
+    for (const img of root.querySelectorAll("img[src]")) {
+      const src = img.getAttribute("src");
+      if (!isSafeImageSrc(src)) {
+        img.removeAttribute("src");
+        img.setAttribute("data-bk-blocked-src", "1");
+      }
+    }
+  });
+  return (
+    // The library scopes all of its CSS under `#slack_blocks_to_jsx` and
+    // depends on the `slack_blocks_to_jsx styles_enabled` classes plus the
+    // `data-theme` attribute for its button / mention / divider styling
+    // (e.g. button reset + `bg-green-primary` for primary). `<Message
+    // withoutWrapper>` skips that wrapper entirely, so we re-create it
+    // here without the avatar / timestamp chrome.
+    /* @__PURE__ */ jsx("div", { ref: rootRef, id: "slack_blocks_to_jsx", "data-theme": theme, className: "slack_blocks_to_jsx styles_enabled", children: /* @__PURE__ */ jsx(
+      Message,
+      {
+        time: /* @__PURE__ */ new Date(),
+        name: "",
+        logo: "",
+        withoutWrapper: true,
+        theme,
+        blocks: [safeBlock],
+        hooks
+      }
+    ) })
+  );
+}
+var PLACEHOLDER_TIME = "10:37 AM";
+function SlackMessageFrame({
+  workspaceName,
+  authorName,
+  authorIcon,
+  time = PLACEHOLDER_TIME,
+  isDark,
+  children
+}) {
+  const displayName = authorName ?? workspaceName ?? "Your app";
+  const initial = displayName.slice(0, 1).toUpperCase();
+  const safeIcon = authorIcon && isSafeImageSrc(authorIcon) ? authorIcon : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-md border",
+        isDark ? "border-[#2c2d30] bg-[#1a1d21]" : "border-[#e8e8e8] bg-white"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex items-center gap-2 px-5 pt-3 pb-1 text-xs", isDark ? "text-white/60" : "text-[#616061]"),
+            children: [
+              safeIcon ? /* @__PURE__ */ jsx("img", { src: safeIcon, alt: "", className: "h-7 w-7 shrink-0 rounded object-cover" }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex h-7 w-7 items-center justify-center rounded text-[12px] font-semibold",
+                    isDark ? "bg-white/10 text-white" : "bg-[#4a154b]/10 text-[#1d1c1d]"
+                  ),
+                  children: initial
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("font-bold text-sm", isDark ? "text-white" : "text-[#1d1c1d]"), children: displayName }),
+              time ? /* @__PURE__ */ jsx("span", { children: time }) : null
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SlackMessagePreview({
+  blocks,
+  hooks,
+  theme = "light",
+  workspaceName,
+  authorName,
+  authorIcon,
+  time,
+  emptyLabel = "This message has no blocks to preview."
+}) {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx(
+    SlackMessageFrame,
+    {
+      workspaceName,
+      authorName,
+      authorIcon,
+      time,
+      isDark,
+      children: /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-col gap-1 px-5 pb-3", isDark ? "bg-[#1a1d21]" : "bg-white"), children: blocks.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("py-1 text-sm", isDark ? "text-white/60" : "text-[#616061]"), children: emptyLabel }) : blocks.map((block, index) => /* @__PURE__ */ jsx(SlackBlockPreview, { block, hooks, theme }, `${block.type}-${index}`)) })
+    }
+  );
+}
 var POLL_INTERVAL_MS = 2500;
 var MAX_POLLS = 24;
 function useSlackSignIn(loadStatus, { open, enabled }) {
@@ -3104,6 +3219,12 @@ function SlackSignInButton({ onClick, polling }) {
     /* @__PURE__ */ jsx(ExternalLink, {})
   ] }) });
 }
+var LINK_DEBOUNCE_MS = 400;
+var LINK_HELP_TEXT = 'Click the \u2807menu while hovering over the message in Slack (or right-click), and select "Copy Link".';
+var TABS = [
+  { id: "recent", label: "Pick from Recent" },
+  { id: "link", label: "Direct Link" }
+];
 function recentToResult(msg) {
   return {
     ok: true,
@@ -3128,6 +3249,16 @@ function previewText(m) {
   }
   return `${m.blocks.length} block${m.blocks.length === 1 ? "" : "s"}`;
 }
+function formatTs(ts) {
+  const seconds = Number(ts);
+  if (!ts || !Number.isFinite(seconds) || seconds <= 0) {
+    return "";
+  }
+  return new Date(seconds * 1e3).toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function editableLabel(editableVia) {
+  return editableVia === "user" ? "You" : "Bot";
+}
 function LoadMessageDialog({
   open,
   onOpenChange,
@@ -3135,10 +3266,14 @@ function LoadMessageDialog({
   loadRecentMessages,
   loadChannels,
   onLoaded,
-  onOpenAsNew
+  onOpenAsNew,
+  previewHooks,
+  previewTheme = "light"
 }) {
   const [link, setLink] = useState("");
-  const [status, setStatus] = useState({ kind: "idle" });
+  const [linkStatus, setLinkStatus] = useState({ kind: "idle" });
+  const [emptyLinkError, setEmptyLinkError] = useState(null);
+  const [committing, setCommitting] = useState(false);
   const [channels, setChannels] = useState(null);
   const [channelsError, setChannelsError] = useState(null);
   const [channelId, setChannelId] = useState("");
@@ -3146,8 +3281,14 @@ function LoadMessageDialog({
   const [recentError, setRecentError] = useState(null);
   const [selectedRecent, setSelectedRecent] = useState(null);
   const [signInPolling, setSignInPolling] = useState(false);
+  const [tab, setTab] = useState("recent");
   const inputRef = useRef(null);
   const signInPollRef = useRef(null);
+  const resolvedLinkRef = useRef(null);
+  const linkRequestRef = useRef(0);
+  const domId = useId();
+  const tabDomId = (id) => `${domId}-${id}-tab`;
+  const panelDomId = (id) => `${domId}-${id}-panel`;
   const onLoadMessageRef = useRef(onLoadMessage);
   const loadRecentMessagesRef = useRef(loadRecentMessages);
   const loadChannelsRef = useRef(loadChannels);
@@ -3157,16 +3298,22 @@ function LoadMessageDialog({
     loadChannelsRef.current = loadChannels;
   });
   const hasRecent = !!loadRecentMessages && !!loadChannels;
+  const activeTab = hasRecent ? tab : "link";
   useEffect(() => {
     if (!open) {
       return;
     }
     setLink("");
-    setStatus({ kind: "idle" });
+    setLinkStatus({ kind: "idle" });
+    setEmptyLinkError(null);
+    setCommitting(false);
     setChannelId("");
     setRecent(null);
     setRecentError(null);
     setSelectedRecent(null);
+    setTab("recent");
+    resolvedLinkRef.current = null;
+    linkRequestRef.current += 1;
   }, [open]);
   useEffect(() => {
     const load = loadChannelsRef.current;
@@ -3225,27 +3372,71 @@ function LoadMessageDialog({
     }
     return stopSignInPoll;
   }, [open, stopSignInPoll]);
+  const resolveLink = useCallback(async (trimmed) => {
+    const requestId = ++linkRequestRef.current;
+    setLinkStatus({ kind: "loading" });
+    try {
+      const result = await onLoadMessageRef.current({ link: trimmed });
+      if (linkRequestRef.current !== requestId) {
+        return null;
+      }
+      resolvedLinkRef.current = trimmed;
+      setLinkStatus(
+        result.ok ? { kind: "ready", result } : { kind: "not-editable", reason: result.reason, blocks: result.blocks, oauthUrl: result.oauthUrl }
+      );
+      return result;
+    } catch (e) {
+      if (linkRequestRef.current !== requestId) {
+        return null;
+      }
+      resolvedLinkRef.current = trimmed;
+      setLinkStatus({ kind: "error", error: e instanceof Error ? e.message : "Failed to load message." });
+      return null;
+    }
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const trimmed = link.trim();
+    if (!trimmed) {
+      linkRequestRef.current += 1;
+      resolvedLinkRef.current = null;
+      setLinkStatus({ kind: "idle" });
+      return;
+    }
+    if (resolvedLinkRef.current === trimmed) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      if (resolvedLinkRef.current !== trimmed) {
+        void resolveLink(trimmed);
+      }
+    }, LINK_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, link, resolveLink]);
   const handleLoad = async () => {
     stopSignInPoll();
-    if (selectedRecent) {
-      onLoaded(recentToResult(selectedRecent));
+    if (activeTab === "recent") {
+      if (selectedRecent) {
+        onLoaded(recentToResult(selectedRecent));
+      }
       return;
     }
     const trimmed = link.trim();
     if (!trimmed) {
-      setStatus({ kind: "error", error: "Paste a Slack message link first." });
+      setEmptyLinkError("Paste a Slack message link first.");
       return;
     }
-    setStatus({ kind: "loading" });
-    try {
-      const result = await onLoadMessageRef.current({ link: trimmed });
-      if (result.ok) {
-        onLoaded(result);
-        return;
-      }
-      setStatus({ kind: "not-editable", reason: result.reason, blocks: result.blocks, oauthUrl: result.oauthUrl });
-    } catch (e) {
-      setStatus({ kind: "error", error: e instanceof Error ? e.message : "Failed to load message." });
+    if (linkStatus.kind === "ready" && resolvedLinkRef.current === trimmed) {
+      onLoaded(linkStatus.result);
+      return;
+    }
+    setCommitting(true);
+    const result = await resolveLink(trimmed);
+    setCommitting(false);
+    if (result?.ok) {
+      onLoaded(result);
     }
   };
   const startFindSignIn = (oauthUrl) => {
@@ -3277,191 +3468,288 @@ function LoadMessageDialog({
       });
     }, POLL_INTERVAL_MS2);
   };
-  const notEditable = status.kind === "not-editable" ? status : null;
-  const signInUrl = notEditable?.oauthUrl && isSafeHref(notEditable.oauthUrl) ? notEditable.oauthUrl : null;
+  const preview = activeTab === "recent" ? selectedRecent ? { kind: "ready", target: { ...selectedRecent, editableVia: selectedRecent.editableVia ?? "bot" } } : { kind: "empty" } : linkStatus.kind === "idle" ? { kind: "empty" } : linkStatus.kind === "ready" ? { kind: "ready", target: linkStatus.result } : linkStatus;
+  const canLoad = activeTab === "recent" ? !!selectedRecent : !!link.trim();
+  const panelProps = (id) => hasRecent ? { role: "tabpanel", id: panelDomId(id), "aria-labelledby": tabDomId(id) } : {};
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
-      className: "w-[calc(100vw-1.5rem)] max-w-lg rounded-lg",
+      className: "flex max-h-[85svh] w-[calc(100vw-1.5rem)] flex-col rounded-lg lg:max-w-4xl",
       onOpenAutoFocus: (e) => {
+        if (hasRecent) {
+          return;
+        }
         e.preventDefault();
         inputRef.current?.focus();
       },
       children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "shrink-0", children: [
           /* @__PURE__ */ jsx(DialogTitle, { children: "Find an existing message" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 text-left", children: [
-            /* @__PURE__ */ jsx(DialogDescription, { children: hasRecent ? "Paste a Slack message link, or pick a recent message your app posted." : `Paste a Slack message link (Slack's "Copy link") to load its blocks for editing.` }),
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "How to copy a message link",
-                  className: "mt-0.5 shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                  children: /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(TooltipContent, { className: "max-w-xs leading-relaxed", children: [
-                "In Slack, hover over the message and click the ",
-                /* @__PURE__ */ jsx("strong", { children: "\u22EE More actions" }),
-                " button (or right-click the message), then choose ",
-                /* @__PURE__ */ jsx("strong", { children: "Copy link" }),
-                "."
-              ] })
-            ] })
-          ] })
+          /* @__PURE__ */ jsx(DialogDescription, { children: hasRecent ? "Pick a recent message your app posted, or paste a Slack message link. Preview it before loading." : `Paste a Slack message link (Slack's "Copy link") to preview it and load its blocks for editing.` })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "message-link", children: "Message link" }),
-            /* @__PURE__ */ jsx(
-              Input,
+        /* @__PURE__ */ jsxs("div", { className: "-mx-1 flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-y-auto px-1 lg:flex-row lg:gap-5 lg:overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-3 lg:min-h-0 lg:w-[19rem]", children: [
+            hasRecent && /* @__PURE__ */ jsx(TabStrip, { activeTab, onSelect: setTab, tabDomId, panelDomId }),
+            activeTab === "recent" ? /* @__PURE__ */ jsxs(
+              "div",
               {
-                ref: inputRef,
-                id: "message-link",
-                value: link,
-                onChange: (e) => {
-                  setLink(e.target.value);
-                  setSelectedRecent(null);
-                  stopSignInPoll();
-                  if (status.kind !== "idle" && status.kind !== "loading") {
-                    setStatus({ kind: "idle" });
-                  }
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" && status.kind !== "loading") {
-                    e.preventDefault();
-                    handleLoad();
-                  }
-                },
-                placeholder: "https://your-workspace.slack.com/archives/C\u2026/p\u2026",
-                autoComplete: "off",
-                spellCheck: false
+                ...panelProps("recent"),
+                className: "-mx-1 flex min-w-0 flex-col gap-2 px-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-1.5", children: [
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "recent-channel-picker", children: "Channel" }),
+                    channels === null && !channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading channels\u2026" }),
+                    channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: channelsError }),
+                    channels && channels.length === 0 && !channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No public channels available." }),
+                    channels && channels.length > 0 && /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        id: "recent-channel-picker",
+                        value: channelId,
+                        onChange: (e) => setChannelId(e.target.value),
+                        className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select a channel\u2026" }),
+                          channels.map((c) => /* @__PURE__ */ jsxs("option", { value: c.id, children: [
+                            "#",
+                            c.name
+                          ] }, c.id))
+                        ]
+                      }
+                    )
+                  ] }),
+                  !channelId && channels && channels.length > 0 && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "Select a channel to see recent messages." }),
+                  channelId && recent === null && !recentError && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "Loading recent messages\u2026" }),
+                  channelId && recentError && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-destructive", children: recentError }),
+                  channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "No recent messages from this app in this channel." }),
+                  channelId && recent && recent.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex max-h-60 min-h-0 min-w-0 flex-col gap-1 overflow-y-auto lg:max-h-none lg:flex-1", children: recent.map((m) => {
+                    const asUser = (m.editableVia ?? "bot") === "user";
+                    const authorName = m.username || (asUser ? "You" : "App bot");
+                    const safeIcon = isSafeImageSrc(m.iconUrl) ? m.iconUrl : void 0;
+                    const isSelected = selectedRecent?.channelId === m.channelId && selectedRecent?.ts === m.ts;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": isSelected,
+                        onClick: () => {
+                          setSelectedRecent(m);
+                        },
+                        className: cn(
+                          // Inset rings so the scroll container's overflow clip
+                          // can't shave the corners off the selected outline.
+                          "flex min-w-0 items-start gap-2.5 rounded-md border border-input bg-background px-3 py-2 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                          isSelected && "border-primary! bg-accent ring-1 ring-inset ring-primary"
+                        ),
+                        children: [
+                          safeIcon ? /* @__PURE__ */ jsx("img", { src: safeIcon, alt: "", className: "h-9 w-9 shrink-0 rounded-md object-cover" }) : /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "aria-hidden": true,
+                              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground",
+                              children: authorName.charAt(0).toUpperCase()
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: authorName }),
+                              /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" })
+                            ] }),
+                            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                              new Date(Number(m.ts) * 1e3).toLocaleString(),
+                              " ",
+                              /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                                "(",
+                                m.ts,
+                                ")"
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm text-foreground", children: previewText(m) })
+                          ] })
+                        ]
+                      },
+                      `${m.channelId}:${m.ts}`
+                    );
+                  }) })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...panelProps("link"),
+                className: "-mx-1 flex min-w-0 flex-col gap-2 px-1 lg:min-h-0 lg:flex-1 lg:overflow-y-auto",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        ref: inputRef,
+                        id: "message-link",
+                        value: link,
+                        onChange: (e) => {
+                          setLink(e.target.value);
+                          setEmptyLinkError(null);
+                          stopSignInPoll();
+                        },
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !committing) {
+                            e.preventDefault();
+                            handleLoad();
+                          }
+                        },
+                        placeholder: "https://your-workspace.slack.com/archives/C\u2026/p\u2026",
+                        autoComplete: "off",
+                        spellCheck: false
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: LINK_HELP_TEXT })
+                  ] }),
+                  emptyLinkError && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: emptyLinkError })
+                ]
               }
             )
           ] }),
-          status.kind === "error" && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: status.error }),
-          notEditable && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-amber-200! bg-amber-50 p-3 text-xs text-amber-800", children: [
+          /* @__PURE__ */ jsx(
+            PreviewPane,
+            {
+              state: preview,
+              hooks: previewHooks,
+              theme: previewTheme,
+              emptyHint: activeTab === "recent" ? "Select a recent message to preview it here." : "Paste a message link to preview it here.",
+              signInPolling,
+              onSignIn: startFindSignIn,
+              onOpenAsNew
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "shrink-0", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleLoad, disabled: committing || !canLoad, children: committing ? "Loading\u2026" : "Load message" })
+        ] })
+      ]
+    }
+  ) });
+}
+function TabStrip({
+  activeTab,
+  onSelect,
+  tabDomId,
+  panelDomId
+}) {
+  const tabRefs = useRef({});
+  const moveTo = (next) => {
+    onSelect(next);
+    tabRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Message source", className: "flex shrink-0 gap-1 rounded-md bg-muted p-1", children: TABS.map((entry, index) => {
+    const selected = entry.id === activeTab;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          tabRefs.current[entry.id] = node;
+        },
+        type: "button",
+        role: "tab",
+        id: tabDomId(entry.id),
+        "aria-selected": selected,
+        "aria-controls": panelDomId(entry.id),
+        tabIndex: selected ? 0 : -1,
+        onClick: () => onSelect(entry.id),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            const delta = e.key === "ArrowRight" ? 1 : -1;
+            moveTo(TABS[(index + delta + TABS.length) % TABS.length].id);
+          } else if (e.key === "Home") {
+            e.preventDefault();
+            moveTo(TABS[0].id);
+          } else if (e.key === "End") {
+            e.preventDefault();
+            moveTo(TABS[TABS.length - 1].id);
+          }
+        },
+        className: cn(
+          "flex-1 rounded-sm px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          selected ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: entry.label
+      },
+      entry.id
+    );
+  }) });
+}
+function PreviewPane({
+  state,
+  hooks,
+  theme,
+  emptyHint,
+  signInPolling,
+  onSignIn,
+  onOpenAsNew
+}) {
+  const target = state.kind === "ready" ? state.target : null;
+  const signInUrl = state.kind === "not-editable" && state.oauthUrl && isSafeHref(state.oauthUrl) ? state.oauthUrl : null;
+  const verdictBlocks = state.kind === "not-editable" ? state.blocks : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-2 lg:min-h-0 lg:flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Preview" }),
+      target?.channelName || target?.channelId ? /* @__PURE__ */ jsx("span", { className: "rounded border px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: target.channelName ? `#${target.channelName}` : target.channelId }) : null,
+      target?.editableVia ? /* @__PURE__ */ jsxs("span", { className: "rounded border px-1.5 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+        "Editable as ",
+        editableLabel(target.editableVia)
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-label": "Message preview",
+        tabIndex: 0,
+        className: "flex max-h-72 min-h-32 flex-1 flex-col gap-3 overflow-y-auto rounded-md border bg-muted/40 p-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring lg:max-h-none lg:min-h-0",
+        children: [
+          state.kind === "not-editable" && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 rounded-md border border-amber-200! bg-amber-50 p-3 text-xs text-amber-800", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: notEditable.reason })
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: state.reason })
             ] }),
-            signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => startFindSignIn(signInUrl), polling: signInPolling }),
-            notEditable.blocks && notEditable.blocks.length > 0 && /* @__PURE__ */ jsx(
+            signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
+            verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsx(
               Button,
               {
                 type: "button",
                 variant: "outline",
                 size: "sm",
                 className: "self-start",
-                onClick: () => onOpenAsNew(notEditable.blocks),
+                onClick: () => onOpenAsNew(verdictBlocks),
                 children: "Open as a new message instead"
               }
             )
           ] }),
-          hasRecent && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-              "or pick a recent message",
-              /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "recent-channel-picker", children: "Channel" }),
-              channels === null && !channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading channels\u2026" }),
-              channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: channelsError }),
-              channels && channels.length === 0 && !channelsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No public channels available." }),
-              channels && channels.length > 0 && /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  id: "recent-channel-picker",
-                  value: channelId,
-                  onChange: (e) => setChannelId(e.target.value),
-                  className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select a channel\u2026" }),
-                    channels.map((c) => /* @__PURE__ */ jsxs("option", { value: c.id, children: [
-                      "#",
-                      c.name
-                    ] }, c.id))
-                  ]
-                }
-              )
-            ] }),
-            !channelId && channels && channels.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Select a channel to see recent messages." }),
-            channelId && recent === null && !recentError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading recent messages\u2026" }),
-            channelId && recentError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: recentError }),
-            channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No recent messages from this app in this channel." }),
-            channelId && recent && recent.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex max-h-48 min-w-0 flex-col gap-1 overflow-y-auto", children: recent.map((m) => {
-              const asUser = (m.editableVia ?? "bot") === "user";
-              const authorName = m.username || (asUser ? "You" : "App bot");
-              const safeIcon = isSafeImageSrc(m.iconUrl) ? m.iconUrl : void 0;
-              const isSelected = selectedRecent?.channelId === m.channelId && selectedRecent?.ts === m.ts;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "aria-pressed": isSelected,
-                  onClick: () => {
-                    setSelectedRecent(m);
-                    setLink("");
-                    if (status.kind !== "idle" && status.kind !== "loading") {
-                      setStatus({ kind: "idle" });
-                    }
-                  },
-                  className: cn(
-                    // Inset rings so the scroll container's overflow clip
-                    // can't shave the corners off the selected outline.
-                    "flex min-w-0 items-start gap-2.5 rounded-md border border-input bg-background px-3 py-2 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-                    isSelected && "border-primary! bg-accent ring-1 ring-inset ring-primary"
-                  ),
-                  children: [
-                    safeIcon ? /* @__PURE__ */ jsx("img", { src: safeIcon, alt: "", className: "h-9 w-9 shrink-0 rounded-md object-cover" }) : /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "aria-hidden": true,
-                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground",
-                        children: authorName.charAt(0).toUpperCase()
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: authorName }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" })
-                      ] }),
-                      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                        new Date(Number(m.ts) * 1e3).toLocaleString(),
-                        " ",
-                        /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
-                          "(",
-                          m.ts,
-                          ")"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm text-foreground", children: previewText(m) })
-                    ] })
-                  ]
-                },
-                `${m.channelId}:${m.ts}`
-              );
-            }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
-          /* @__PURE__ */ jsx(
-            Button,
+          state.kind === "error" && /* @__PURE__ */ jsx("p", { className: "shrink-0 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: state.error }),
+          state.kind === "loading" && /* @__PURE__ */ jsxs("p", { className: "m-auto flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+            "Looking up that message\u2026"
+          ] }),
+          state.kind === "empty" && /* @__PURE__ */ jsx("p", { className: "m-auto px-4 text-center text-sm text-muted-foreground", children: emptyHint }),
+          target && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+            SlackMessagePreview,
             {
-              type: "button",
-              onClick: handleLoad,
-              disabled: status.kind === "loading" || !selectedRecent && !link.trim(),
-              children: status.kind === "loading" ? "Loading\u2026" : "Load message"
+              blocks: target.blocks,
+              hooks,
+              theme,
+              workspaceName: target.workspaceName,
+              authorName: target.username,
+              authorIcon: target.iconUrl,
+              time: formatTs(target.ts)
             }
-          )
-        ] })
-      ]
-    }
-  ) });
+          ) }),
+          verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(SlackMessagePreview, { blocks: verdictBlocks, hooks, theme, time: "" }) })
+        ]
+      }
+    )
+  ] });
 }
 var PALETTE_DRAG_PREFIX = "palette:";
 function parsePaletteDragId(id) {
@@ -5654,7 +5942,7 @@ function HeaderEditor({ block, onChange }) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(EditorField, { label: "Level", help: "Optional. Builder-only extension; Slack's API ignores this value.", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(EditorField, { label: "Level", help: "Optional. Sets the heading size Slack renders, from H1 (largest) to H4.", children: /* @__PURE__ */ jsxs(
       RadioGroup,
       {
         value: level === void 0 ? "default" : String(level),
@@ -8684,60 +8972,6 @@ function dispatch(block, onChange) {
       return null;
   }
 }
-function SlackBlockPreview({
-  block,
-  hooks,
-  theme = "light"
-}) {
-  const rootRef = useRef(null);
-  const safeBlock = useMemo(() => sanitizeBlock(block), [block]);
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    for (const wrapper of root.querySelectorAll(
-      ".slack_blocks_to_jsx__image_media_trigger, .slack_blocks_to_jsx__video_title"
-    )) {
-      for (const btn of wrapper.querySelectorAll("button:not([aria-label])")) {
-        const title = wrapper.querySelector(".slack_blocks_to_jsx__image_title")?.textContent?.trim();
-        btn.setAttribute("aria-label", title ? `Toggle ${title}` : "Toggle media");
-      }
-    }
-    for (const a of root.querySelectorAll("a[href]")) {
-      const href = a.getAttribute("href");
-      if (!isSafeHref(href)) {
-        a.setAttribute("href", "#");
-        a.setAttribute("data-bk-blocked-href", "1");
-      }
-    }
-    for (const img of root.querySelectorAll("img[src]")) {
-      const src = img.getAttribute("src");
-      if (!isSafeImageSrc(src)) {
-        img.removeAttribute("src");
-        img.setAttribute("data-bk-blocked-src", "1");
-      }
-    }
-  });
-  return (
-    // The library scopes all of its CSS under `#slack_blocks_to_jsx` and
-    // depends on the `slack_blocks_to_jsx styles_enabled` classes plus the
-    // `data-theme` attribute for its button / mention / divider styling
-    // (e.g. button reset + `bg-green-primary` for primary). `<Message
-    // withoutWrapper>` skips that wrapper entirely, so we re-create it
-    // here without the avatar / timestamp chrome.
-    /* @__PURE__ */ jsx("div", { ref: rootRef, id: "slack_blocks_to_jsx", "data-theme": theme, className: "slack_blocks_to_jsx styles_enabled", children: /* @__PURE__ */ jsx(
-      Message,
-      {
-        time: /* @__PURE__ */ new Date(),
-        name: "",
-        logo: "",
-        withoutWrapper: true,
-        theme,
-        blocks: [safeBlock],
-        hooks
-      }
-    ) })
-  );
-}
 var BLOCK_TYPE_LABELS = {
   section: "Section",
   header: "Header",
@@ -9360,50 +9594,16 @@ function Surface({
     {
       "aria-label": "Block preview",
       className: cn("flex min-w-0 flex-1 flex-col overflow-y-auto bg-muted p-3 sm:p-6"),
-      children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsx(MessageFrame, { workspaceName, authorName, authorIcon, isDark, children: blocksList }) })
-    }
-  );
-}
-function MessageFrame({
-  workspaceName,
-  authorName,
-  authorIcon,
-  isDark,
-  children
-}) {
-  const displayName = authorName ?? workspaceName ?? "Your app";
-  const initial = displayName.slice(0, 1).toUpperCase();
-  const safeIcon = authorIcon && isSafeImageSrc(authorIcon) ? authorIcon : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-col overflow-hidden rounded-md border",
-        isDark ? "border-[#2c2d30] bg-[#1a1d21]" : "border-[#e8e8e8] bg-white"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex items-center gap-2 px-5 pt-3 pb-1 text-xs", isDark ? "text-white/60" : "text-[#616061]"),
-            children: [
-              safeIcon ? /* @__PURE__ */ jsx("img", { src: safeIcon, alt: "", className: "h-7 w-7 shrink-0 rounded object-cover" }) : /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex h-7 w-7 items-center justify-center rounded text-[12px] font-semibold",
-                    isDark ? "bg-white/10 text-white" : "bg-[#4a154b]/10 text-[#1d1c1d]"
-                  ),
-                  children: initial
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: cn("font-bold text-sm", isDark ? "text-white" : "text-[#1d1c1d]"), children: displayName }),
-              /* @__PURE__ */ jsx("span", { children: "10:37 AM" })
-            ]
-          }
-        ),
-        children
-      ]
+      children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsx(
+        SlackMessageFrame,
+        {
+          workspaceName,
+          authorName,
+          authorIcon,
+          isDark,
+          children: blocksList
+        }
+      ) })
     }
   );
 }
@@ -10492,6 +10692,8 @@ function BlockKitchen(props) {
             onLoadMessage: loading.onLoadMessage,
             loadRecentMessages: loading.loadRecentMessages,
             loadChannels: recentChannelSource,
+            previewHooks: mergedPreviewHooks,
+            previewTheme,
             onLoaded: (result) => {
               resetAll(result.blocks);
               setEditTarget(toLoadedMessage(result));