@tightknitai/block-kitchen 0.8.9 → 0.8.11

package/dist/index.cjs

@@ -2724,6 +2724,91 @@ function JsonDrawer({
     ] })
   ] }) });
 }
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "bk-portal-content fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "bk-portal-content fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+}
+var DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var Input = React__namespace.forwardRef(
   ({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -2739,6 +2824,213 @@ var Input = React__namespace.forwardRef(
   )
 );
 Input.displayName = "Input";
+var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("text-sm font-medium leading-none text-foreground", className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+function recentToResult(msg) {
+  return {
+    ok: true,
+    channelId: msg.channelId,
+    channelName: msg.channelName,
+    ts: msg.ts,
+    blocks: msg.blocks,
+    editableVia: msg.editableVia ?? "bot",
+    workspaceName: msg.workspaceName,
+    username: msg.username,
+    iconUrl: msg.iconUrl
+  };
+}
+function LoadMessageDialog({
+  open,
+  onOpenChange,
+  onLoadMessage,
+  loadRecentMessages,
+  onLoaded,
+  onOpenAsNew
+}) {
+  const [link, setLink] = React.useState("");
+  const [status, setStatus] = React.useState({ kind: "idle" });
+  const [recent, setRecent] = React.useState(null);
+  const [recentError, setRecentError] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const onLoadMessageRef = React.useRef(onLoadMessage);
+  const loadRecentMessagesRef = React.useRef(loadRecentMessages);
+  React.useEffect(() => {
+    onLoadMessageRef.current = onLoadMessage;
+    loadRecentMessagesRef.current = loadRecentMessages;
+  });
+  const hasRecent = !!loadRecentMessages;
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setLink("");
+    setStatus({ kind: "idle" });
+    if (!loadRecentMessagesRef.current) {
+      setRecent([]);
+      setRecentError(null);
+      return;
+    }
+    setRecent(null);
+    setRecentError(null);
+    let cancelled = false;
+    loadRecentMessagesRef.current().then((list) => {
+      if (!cancelled) {
+        setRecent(list);
+      }
+    }).catch((e) => {
+      if (!cancelled) {
+        setRecentError(e instanceof Error ? e.message : "Failed to load recent messages.");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+  const handleLoad = async () => {
+    const trimmed = link.trim();
+    if (!trimmed) {
+      setStatus({ kind: "error", error: "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 });
+    } catch (e) {
+      setStatus({ kind: "error", error: e instanceof Error ? e.message : "Failed to load message." });
+    }
+  };
+  const notEditable = status.kind === "not-editable" ? status : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogContent,
+    {
+      className: "w-[calc(100vw-1.5rem)] max-w-lg rounded-lg",
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+        inputRef.current?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Edit an existing message" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { className: "max-w-xs leading-relaxed", children: [
+                "In Slack, hover over the message and click the ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "\u22EE More actions" }),
+                " button (or right-click the message), then choose ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Copy link" }),
+                "."
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                ref: inputRef,
+                id: "message-link",
+                value: link,
+                onChange: (e) => {
+                  setLink(e.target.value);
+                  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
+              }
+            )
+          ] }),
+          status.kind === "error" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: status.error }),
+          notEditable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: notEditable.reason })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onOpenAsNew(notEditable.blocks),
+                children: "Open as a new message instead"
+              }
+            )
+          ] }),
+          hasRecent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }),
+              "or pick a recent message",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })
+            ] }),
+            recent === null && !recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Loading recent messages\u2026" }),
+            recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: recentError }),
+            recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "No recent messages from this app." }),
+            recent && recent.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-h-48 flex-col gap-1 overflow-y-auto", children: recent.map((m) => {
+              const asUser = (m.editableVia ?? "bot") === "user";
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onLoaded(recentToResult(m)),
+                  className: "flex flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: m.channelName ? `#${m.channelName}` : m.channelId }),
+                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: m.ts })
+                    ] }),
+                    m.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: m.label })
+                  ]
+                },
+                `${m.channelId}:${m.ts}`
+              );
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: handleLoad, disabled: status.kind === "loading" || !link.trim(), children: status.kind === "loading" ? "Loading\u2026" : "Load message" })
+        ] })
+      ]
+    }
+  ) });
+}
 var PALETTE_DRAG_PREFIX = "palette:";
 function parsePaletteDragId(id) {
   if (typeof id !== "string" || !id.startsWith(PALETTE_DRAG_PREFIX)) {
@@ -2938,100 +3230,6 @@ function PaletteItem({
     }
   );
 }
-var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
-  }
-);
-Button.displayName = "Button";
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "bk-portal-content fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
-    {
-      ref,
-      className: cn(
-        "bk-portal-content fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
-}
-var DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  LabelPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn("text-sm font-medium leading-none text-foreground", className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
 function SendDialog({
   open,
   onOpenChange,
@@ -3425,12 +3623,16 @@ function AlertEditor({ block, onChange }) {
     ) })
   ] });
 }
-function CardEditor({ block, onChange }) {
+function CardEditor({
+  block,
+  onChange,
+  idPrefix = "card"
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: "card-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 150 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-title`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
-        id: "card-title",
+        id: `${idPrefix}-title`,
         value: block.title?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. New launch update",
@@ -3440,10 +3642,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: "card-subtitle", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Up to 150 characters.", htmlFor: `${idPrefix}-subtitle`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
-        id: "card-subtitle",
+        id: `${idPrefix}-subtitle`,
         value: block.subtitle?.text ?? "",
         maxLength: 150,
         placeholder: "e.g. Released April 28",
@@ -3453,10 +3655,10 @@ function CardEditor({ block, onChange }) {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: "card-body", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", help: "Up to 200 characters. Supports mrkdwn formatting.", htmlFor: `${idPrefix}-body`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Textarea,
       {
-        id: "card-body",
+        id: `${idPrefix}-body`,
         value: block.body?.text ?? "",
         maxLength: 200,
         rows: 3,
@@ -3472,7 +3674,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Hero image",
         help: "Wide image displayed at the top of the card.",
-        idPrefix: "card-hero",
+        idPrefix: `${idPrefix}-hero`,
         image: block.hero_image,
         onChange: (next) => onChange({ ...block, hero_image: next })
       }
@@ -3482,7 +3684,7 @@ function CardEditor({ block, onChange }) {
       {
         label: "Icon",
         help: "Small image shown next to the title.",
-        idPrefix: "card-icon",
+        idPrefix: `${idPrefix}-icon`,
         image: block.icon,
         onChange: (next) => onChange({ ...block, icon: next })
       }
@@ -3490,6 +3692,7 @@ function CardEditor({ block, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       ButtonsField,
       {
+        idPrefix,
         buttons: block.actions ?? [],
         onChange: (next) => onChange({ ...block, actions: next.length > 0 ? next : void 0 })
       }
@@ -3546,7 +3749,11 @@ function ImageFields({
     ) })
   ] });
 }
-function ButtonsField({ buttons, onChange }) {
+function ButtonsField({
+  buttons,
+  onChange,
+  idPrefix = "card"
+}) {
   const update = (idx, change) => {
     onChange(buttons.map((b, i) => i === idx ? { ...b, ...change } : b));
   };
@@ -3589,10 +3796,10 @@ function ButtonsField({ buttons, onChange }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `card-btn-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `${idPrefix}-btn-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
           Input,
           {
-            id: `card-btn-label-${idx}`,
+            id: `${idPrefix}-btn-label-${idx}`,
             value: label,
             placeholder: "e.g. Open",
             onChange: (e) => update(idx, {
@@ -3609,11 +3816,11 @@ function ButtonsField({ buttons, onChange }) {
           {
             label: "Link URL",
             help: "Optional. If set, the button opens this link.",
-            htmlFor: `card-btn-url-${idx}`,
+            htmlFor: `${idPrefix}-btn-url-${idx}`,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: `card-btn-url-${idx}`,
+                id: `${idPrefix}-btn-url-${idx}`,
                 type: "url",
                 value: url,
                 placeholder: "e.g. https://example.com",
@@ -3632,8 +3839,8 @@ function ButtonsField({ buttons, onChange }) {
             },
             className: "flex flex-row gap-3",
             children: ["default", "primary", "danger"].map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `card-btn-style-${idx}-${s}` }),
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `card-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `${idPrefix}-btn-style-${idx}-${s}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `${idPrefix}-btn-style-${idx}-${s}`, className: "text-xs capitalize", children: s })
             ] }, s))
           }
         ) })
@@ -3682,8 +3889,8 @@ function CarouselEditor({ block, onChange }) {
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards. For icon, hero image, or action edits, use the View JSON drawer." }),
-    elements.map((card, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Carousels hold 1-10 cards." }),
+    elements.map((card, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
           "Card ",
@@ -3701,33 +3908,7 @@ function CarouselEditor({ block, onChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", htmlFor: `carousel-card-title-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          id: `carousel-card-title-${idx}`,
-          value: card.title?.text ?? "",
-          maxLength: 150,
-          placeholder: "e.g. Card title",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            title: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Body", htmlFor: `carousel-card-body-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Textarea,
-        {
-          id: `carousel-card-body-${idx}`,
-          value: card.body?.text ?? "",
-          maxLength: 200,
-          rows: 2,
-          placeholder: "e.g. Short card description.",
-          onChange: (e) => updateCard(idx, {
-            ...card,
-            body: e.target.value ? { type: "mrkdwn", text: e.target.value } : void 0
-          })
-        }
-      ) })
+      /* @__PURE__ */ jsxRuntime.jsx(CardEditor, { block: card, idPrefix: `carousel-card-${idx}`, onChange: (next) => updateCard(idx, next) })
     ] }, idx)),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addCard, disabled: elements.length >= MAX_CARDS, className: "self-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
@@ -4189,7 +4370,7 @@ function TextItemCard({
         id: `ctx-text-${index}`,
         value: element.text,
         rows: 2,
-        placeholder: "e.g. Posted by @stephen",
+        placeholder: "e.g. Posted by @riley",
         onChange: (e) => onChange({ ...element, text: e.target.value })
       }
     ) }),
@@ -4274,7 +4455,7 @@ function ImageItemCard({
       {
         id: `ctx-img-alt-${index}`,
         value: element.alt_text,
-        placeholder: "e.g. Stephen's avatar",
+        placeholder: "e.g. Riley's avatar",
         onChange: (e) => onChange({ ...element, alt_text: e.target.value })
       }
     ) })
@@ -8607,6 +8788,8 @@ var SURFACE_DROPPABLE_ID = "builder-surface";
 function Surface({
   blocks,
   workspaceName,
+  authorName,
+  authorIcon,
   previewHooks,
   previewTheme,
   previewSurface = "message",
@@ -8682,16 +8865,20 @@ 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__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsxRuntime.jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsxRuntime.jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsxRuntime.jsx(MessageFrame, { workspaceName, isDark, children: blocksList }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsxRuntime.jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsxRuntime.jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsxRuntime.jsx(MessageFrame, { workspaceName, authorName, authorIcon, isDark, children: blocksList }) })
     }
   );
 }
 function MessageFrame({
   workspaceName,
+  authorName,
+  authorIcon,
   isDark,
   children
 }) {
-  const initial = (workspaceName ?? "A").slice(0, 1).toUpperCase();
+  const displayName = authorName ?? workspaceName ?? "Your app";
+  const initial = displayName.slice(0, 1).toUpperCase();
+  const safeIcon = authorIcon && isSafeImageSrc(authorIcon) ? authorIcon : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8705,7 +8892,7 @@ function MessageFrame({
           {
             className: cn("flex items-center gap-2 px-5 pt-3 pb-1 text-xs", isDark ? "text-white/60" : "text-[#616061]"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              safeIcon ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: safeIcon, alt: "", className: "h-7 w-7 shrink-0 rounded object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: cn(
@@ -8715,17 +8902,7 @@ function MessageFrame({
                   children: initial
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-bold text-sm", isDark ? "text-white" : "text-[#1d1c1d]"), children: workspaceName ?? "Your app" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "rounded px-1 text-[10px] font-semibold",
-                    isDark ? "bg-white/10 text-white/70" : "bg-[#f3f3f3] text-[#616061]"
-                  ),
-                  children: "APP"
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-bold text-sm", isDark ? "text-white" : "text-[#1d1c1d]"), children: displayName }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "10:37 AM" })
             ]
           }
@@ -8927,6 +9104,14 @@ var SURFACE_OPTIONS = [
 ];
 var DEFAULT_DOCS_HREF = "https://docs.slack.dev/reference/block-kit/blocks";
 var DEFAULT_DOCS_LABEL = "Docs";
+function formatMessageTs(ts) {
+  const seconds = Number.parseFloat(ts);
+  if (!Number.isFinite(seconds)) return ts;
+  const date = new Date(seconds * 1e3);
+  if (Number.isNaN(date.getTime())) return ts;
+  return date.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+}
+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({
   onClear,
   onOpenJson,
@@ -8943,7 +9128,14 @@ function Toolbar2({
   showThemeControl = true,
   docsLink,
   errorCount,
-  sendButtonLabel = "Send"
+  sendButtonLabel = "Review & send",
+  editingEnabled = false,
+  editBadge,
+  onOpenLoad,
+  onOpenUpdate,
+  onExitEdit,
+  loadButtonLabel = "Load message",
+  updateButtonLabel = "Review & update"
 }) {
   const activeTheme = THEME_OPTIONS.find((t) => t.value === previewTheme) ?? THEME_OPTIONS[0];
   const activeSurface = SURFACE_OPTIONS.find((s) => s.value === previewSurface) ?? SURFACE_OPTIONS[0];
@@ -8953,184 +9145,210 @@ function Toolbar2({
   const docsLabel = docsLink === false ? null : docsLink?.label ?? DEFAULT_DOCS_LABEL;
   const [surfaceMenuOpen, setSurfaceMenuOpen] = React.useState(false);
   const [themeMenuOpen, setThemeMenuOpen] = React.useState(false);
-  const [moreMenuOpen, setMoreMenuOpen] = React.useState(false);
-  return /* @__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: [
-      onOpenPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          onClick: onOpenPalette,
-          className: "md:hidden",
-          "aria-label": "Add a block",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Blocks" })
-          ]
-        }
-      ) : null,
-      showSurfaceControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: surfaceMenuOpen, onOpenChange: setSurfaceMenuOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview surface: ${activeSurface.label}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(activeSurface.Icon, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: activeSurface.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-36 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Menu,
+  const [sendMenuOpen, setSendMenuOpen] = React.useState(false);
+  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 && !editBadge ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
+        ] }) : null,
+        onOpenPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
           {
-            ariaLabel: "Preview surface",
-            options: surfaceOptions,
-            value: previewSurface,
-            onChange: (next) => {
-              onPreviewSurfaceChange(next);
-              setSurfaceMenuOpen(false);
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenPalette,
+            className: "md:hidden",
+            "aria-label": "Add a block",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Blocks" })
+            ]
+          }
+        ) : null,
+        showSurfaceControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: surfaceMenuOpen, onOpenChange: setSurfaceMenuOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview surface: ${activeSurface.label}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(activeSurface.Icon, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: activeSurface.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "hidden h-3.5 w-3.5 opacity-60 md:inline" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-36 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Menu,
+            {
+              ariaLabel: "Preview surface",
+              options: surfaceOptions,
+              value: previewSurface,
+              onChange: (next) => {
+                onPreviewSurfaceChange(next);
+                setSurfaceMenuOpen(false);
+              }
+            }
+          ) })
+        ] }) : null,
+        showThemeControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: themeMenuOpen, onOpenChange: setThemeMenuOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview theme: ${activeTheme.label}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(activeTheme.Icon, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: activeTheme.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-32 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Menu,
+            {
+              ariaLabel: "Preview theme",
+              options: THEME_OPTIONS,
+              value: previewTheme,
+              onChange: (next) => {
+                onPreviewThemeChange(next);
+                setThemeMenuOpen(false);
+              }
             }
+          ) })
+        ] }) : null,
+        docsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: docsHref,
+            target: "_blank",
+            rel: "noreferrer noopener",
+            className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "aria-label": `${docsLabel} (opens in a new tab)`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: docsLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "hidden h-3 w-3 opacity-50 md:inline" })
+            ]
           }
-        ) })
-      ] }) : null,
-      showThemeControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: themeMenuOpen, onOpenChange: setThemeMenuOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview theme: ${activeTheme.label}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(activeTheme.Icon, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: activeTheme.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-32 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Menu,
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+        errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
           {
-            ariaLabel: "Preview theme",
-            options: THEME_OPTIONS,
-            value: previewTheme,
-            onChange: (next) => {
-              onPreviewThemeChange(next);
-              setThemeMenuOpen(false);
-            }
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenIssues,
+            className: "border border-red-200! bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-700",
+            "aria-label": `${errorCount} ${errorCount === 1 ? "issue" : "issues"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                errorCount,
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: errorCount === 1 ? "issue" : "issues" })
+              ] })
+            ]
           }
-        ) })
-      ] }) : null,
-      docsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: docsHref,
-          target: "_blank",
-          rel: "noreferrer noopener",
-          className: "hidden h-8 items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:inline-flex",
-          "aria-label": `${docsLabel} (opens in a new tab)`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "h-3.5 w-3.5" }),
-            docsLabel,
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3 opacity-50" })
-          ]
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
-      errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          onClick: onOpenIssues,
-          className: "border border-red-200! bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-700",
-          "aria-label": `${errorCount} ${errorCount === 1 ? "issue" : "issues"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              errorCount,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: errorCount === 1 ? "issue" : "issues" })
-            ] })
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          onClick: onClear,
-          disabled: !canClear,
-          className: "hidden hover:bg-destructive/10 hover:text-destructive sm:inline-flex",
-          "aria-label": "Clear all blocks",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
-            "Clear"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          onClick: onOpenJson,
-          "aria-label": "View JSON",
-          className: "hidden sm:inline-flex",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
-            "View JSON"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: moreMenuOpen, onOpenChange: setMoreMenuOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
             type: "button",
             variant: "ghost",
             size: "sm",
-            "aria-label": "More actions",
-            "aria-haspopup": "menu",
-            className: "px-2 sm:hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-3.5 w-3.5" })
+            onClick: onClear,
+            disabled: !canClear,
+            className: "hover:bg-destructive/10 hover:text-destructive",
+            "aria-label": "Clear all blocks",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "Clear" })
+            ]
           }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "end", className: "w-44 p-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "menu", "aria-label": "More actions", className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ActionMenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
-              onSelect: () => {
-                setMoreMenuOpen(false);
-                onClear();
-              },
-              disabled: !canClear,
-              tone: "destructive",
-              children: "Clear"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ActionMenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
-              onSelect: () => {
-                setMoreMenuOpen(false);
-                onOpenJson();
-              },
-              children: "View JSON"
-            }
-          ),
-          docsHref ? /* @__PURE__ */ jsxRuntime.jsx(
-            ActionMenuLink,
-            {
-              href: docsHref,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "h-3.5 w-3.5" }),
-              trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3 opacity-50" }),
-              onSelect: () => setMoreMenuOpen(false),
-              children: docsLabel
-            }
-          ) : null
-        ] }) })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, "aria-label": "View JSON", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "View JSON" })
+        ] }),
+        editBadge ? (
+          // A message is loaded: split button. Main action updates it in
+          // place; the menu also offers posting the blocks as a new message.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                onClick: onOpenUpdate,
+                disabled: !canSend,
+                "aria-label": updateButtonLabel,
+                className: "rounded-r-none",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: updateButtonLabel })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: sendMenuOpen, onOpenChange: setSendMenuOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  "aria-label": "More message options",
+                  "aria-haspopup": "menu",
+                  className: "rounded-l-none border-l border-l-primary-foreground/30! px-1.5",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "end", className: "w-56 p-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "menu", "aria-label": "Message options", className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    disabled: !canSend,
+                    onClick: () => {
+                      setSendMenuOpen(false);
+                      onOpenUpdate?.();
+                    },
+                    className: SEND_MENU_ITEM,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: "Update message" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    disabled: !canSend,
+                    onClick: () => {
+                      setSendMenuOpen(false);
+                      onOpenSend();
+                    },
+                    className: SEND_MENU_ITEM,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: "Send as a new message" })
+                    ]
+                  }
+                )
+              ] }) })
+            ] })
+          ] })
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": sendButtonLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: sendButtonLabel })
+        ] })
+      ] })
+    ] }),
+    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: [
+      /* @__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 ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: editBadge.channelLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs opacity-70", title: editBadge.ts, children: formatMessageTs(editBadge.ts) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": sendButtonLabel, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3.5 w-3.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: sendButtonLabel })
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onExitEdit, className: "shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" }),
+        "Switch to a new message"
       ] })
-    ] })
+    ] }) : null
   ] });
 }
 function Menu({
@@ -9188,52 +9406,132 @@ function Menu({
     );
   }) });
 }
-var ACTION_ITEM_BASE = "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
-function ActionMenuItem({
-  icon,
-  children,
-  onSelect,
-  disabled,
-  tone
+function UpdateDialog({
+  open,
+  onOpenChange,
+  target,
+  blocks,
+  loadSendAsUserStatus,
+  onUpdate,
+  confirmUpdateLabel = "Update message",
+  errorCount,
+  onShowIssues
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      onClick: onSelect,
-      disabled,
-      className: cn(ACTION_ITEM_BASE, tone === "destructive" && "hover:bg-destructive/10 hover:text-destructive"),
-      children: [
-        icon,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children })
-      ]
+  const asUser = target.editableVia === "user";
+  const [userStatus, setUserStatus] = React.useState(null);
+  const [status, setStatus] = React.useState({ kind: "idle" });
+  const loadSendAsUserStatusRef = React.useRef(loadSendAsUserStatus);
+  React.useEffect(() => {
+    loadSendAsUserStatusRef.current = loadSendAsUserStatus;
+  });
+  const refreshSendAsUser = React.useCallback(() => {
+    loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
+  }, []);
+  React.useEffect(() => {
+    if (!open) {
+      return;
     }
-  );
-}
-function ActionMenuLink({
-  href,
-  icon,
-  trailingIcon,
-  children,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "a",
-    {
-      role: "menuitem",
-      href,
-      target: "_blank",
-      rel: "noreferrer noopener",
-      onClick: onSelect,
-      className: ACTION_ITEM_BASE,
-      children: [
-        icon,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        trailingIcon
-      ]
+    setStatus({ kind: "idle" });
+    if (asUser) {
+      setUserStatus(null);
+      refreshSendAsUser();
     }
-  );
+  }, [open, asUser, refreshSendAsUser]);
+  React.useEffect(() => {
+    if (!open || !asUser) {
+      return;
+    }
+    const handler = () => refreshSendAsUser();
+    window.addEventListener("focus", handler);
+    return () => window.removeEventListener("focus", handler);
+  }, [open, asUser, refreshSendAsUser]);
+  const needsSignIn = asUser && userStatus !== null && !userStatus.canSendAsUser;
+  const handleSubmit = async () => {
+    setStatus({ kind: "updating" });
+    try {
+      const result = await onUpdate({
+        channelId: target.channelId,
+        ts: target.ts,
+        blocks: toSlackBlocks(blocks),
+        asUser
+      });
+      if (result.ok) {
+        setStatus({ kind: "idle" });
+        onOpenChange(false);
+        return;
+      }
+      setStatus({ kind: "error", error: result.error ?? "Update failed." });
+    } catch (e) {
+      setStatus({ kind: "error", error: e instanceof Error ? e.message : "Update failed." });
+    }
+  };
+  const channelLabel = target.channelName ? `#${target.channelName}` : target.channelId;
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[calc(100vw-1.5rem)] max-w-lg rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Update message" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "This replaces the message that's already posted. It stays in the same channel and can't be moved." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Channel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: channelLabel })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Posting as" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: asUser ? "Your account" : "App bot" }),
+        needsSignIn && userStatus?.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: userStatus.oauthUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1 text-primary hover:underline",
+              children: [
+                "Sign in with Slack ",
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
+              ]
+            }
+          ),
+          " ",
+          "to update your own message."
+        ] }),
+        needsSignIn && !userStatus?.oauthUrl && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Sign in with Slack to update your own message." })
+      ] }),
+      errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onShowIssues,
+          className: "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-left text-xs text-destructive hover:bg-destructive/10",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1", children: [
+              "Fix ",
+              errorCount,
+              " ",
+              errorCount === 1 ? "issue" : "issues",
+              " before updating."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 underline", children: "Show issues" })
+          ]
+        }
+      ) : null,
+      status.kind === "error" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: status.error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handleSubmit,
+          disabled: status.kind === "updating" || blocks.length === 0 || errorCount > 0 || needsSignIn,
+          children: status.kind === "updating" ? "Updating\u2026" : confirmUpdateLabel
+        }
+      )
+    ] })
+  ] }) });
 }
 function BlockKitchen(props) {
   const {
@@ -9245,6 +9543,10 @@ function BlockKitchen(props) {
     loadChannels,
     loadSendAsUserStatus,
     onSend,
+    editing,
+    loadButtonLabel,
+    updateButtonLabel,
+    confirmUpdateLabel,
     palette,
     disabledBlockTypes,
     showPaletteSearch,
@@ -9290,6 +9592,10 @@ function BlockKitchen(props) {
   }, [blocks]);
   const [jsonOpen, setJsonOpen] = React.useState(false);
   const [sendOpen, setSendOpen] = React.useState(false);
+  const [updateOpen, setUpdateOpen] = React.useState(false);
+  const [loadOpen, setLoadOpen] = React.useState(false);
+  const [editTarget, setEditTarget] = React.useState(null);
+  const activeEditTarget = editing ? editTarget : null;
   const [issuesOpen, setIssuesOpen] = React.useState(false);
   const [paletteOpen, setPaletteOpen] = React.useState(false);
   const [openBlockId, setOpenBlockId] = React.useState(null);
@@ -9410,7 +9716,21 @@ function BlockKitchen(props) {
               allowedSurfaces,
               showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
               docsLink,
-              sendButtonLabel
+              sendButtonLabel,
+              editingEnabled: !!editing,
+              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__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
@@ -9429,6 +9749,8 @@ function BlockKitchen(props) {
               {
                 blocks,
                 workspaceName,
+                authorName: activeEditTarget?.username,
+                authorIcon: activeEditTarget?.iconUrl,
                 previewHooks: mergedPreviewHooks,
                 previewTheme,
                 previewSurface,
@@ -9494,6 +9816,52 @@ function BlockKitchen(props) {
             }
           }
         ),
+        activeEditTarget && editing ? /* @__PURE__ */ jsxRuntime.jsx(
+          UpdateDialog,
+          {
+            open: updateOpen,
+            onOpenChange: setUpdateOpen,
+            target: activeEditTarget,
+            blocks: blockPayloads,
+            loadSendAsUserStatus,
+            onUpdate: editing.onUpdate,
+            confirmUpdateLabel,
+            errorCount: validation.total,
+            onShowIssues: () => {
+              setUpdateOpen(false);
+              setIssuesOpen(true);
+            }
+          }
+        ) : null,
+        editing ? /* @__PURE__ */ jsxRuntime.jsx(
+          LoadMessageDialog,
+          {
+            open: loadOpen,
+            onOpenChange: setLoadOpen,
+            onLoadMessage: editing.onLoadMessage,
+            loadRecentMessages: editing.loadRecentMessages,
+            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
+              });
+              setLoadOpen(false);
+            },
+            onOpenAsNew: (loadedBlocks) => {
+              if (loadedBlocks) {
+                replaceAll(loadedBlocks);
+              }
+              setEditTarget(null);
+              setLoadOpen(false);
+            }
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           IssuesSheet,
           {