@tightknitai/block-kitchen 0.10.26 → 0.10.27

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, ChevronRight, ChevronLeft, GripVertical, ChevronsUpDown, Check, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Copy, Info, CheckCircle2, LayoutGrid, ArrowUp, ArrowDown, Lock, Type, Bold, Italic, Strikethrough, Underline, Code, AtSign, Hash, 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, ChevronRight, ChevronLeft, GripVertical, ChevronsUpDown, Check, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Copy, Info, CheckCircle2, LayoutGrid, ArrowUp, ArrowDown, ImagePlus, Lock, Type, Upload, Bold, Italic, Strikethrough, Underline, Code, AtSign, Hash, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, useId, useSyncExternalStore, useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
@@ -1928,6 +1928,36 @@ function CustomEmojiProvider({ customEmojis, children }) {
 function useCustomEmojis() {
   return useContext(CustomEmojiContext);
 }
+var DEFAULT_IMAGE_UPLOAD_ACCEPT = ["image/png", "image/jpeg", "image/gif"];
+var ImageUploadContext = createContext(null);
+function ImageUploadProvider({
+  imageUpload,
+  children
+}) {
+  const uploadImage = imageUpload?.uploadImage;
+  const accept = imageUpload?.accept;
+  const value = useMemo(
+    () => uploadImage ? { uploadImage, accept: accept ?? DEFAULT_IMAGE_UPLOAD_ACCEPT } : null,
+    [uploadImage, accept]
+  );
+  return /* @__PURE__ */ jsx(ImageUploadContext.Provider, { value, children });
+}
+function useImageUpload() {
+  return useContext(ImageUploadContext);
+}
+function isAcceptedImage(file, accept) {
+  return accept.includes(file.type);
+}
+function uploadErrorMessage(error) {
+  return error instanceof Error && error.message ? error.message : "Upload failed. Try again.";
+}
+function isFileDrag(dataTransfer) {
+  return Boolean(dataTransfer && Array.from(dataTransfer.types).includes("Files"));
+}
+function formatList(accept) {
+  const names = accept.map((type) => type.replace(/^image\//, "").toUpperCase());
+  return names.length > 1 ? `${names.slice(0, -1).join(", ")} or ${names[names.length - 1]}` : names[0] ?? "";
+}
 var MentionsContext = createContext(null);
 function MentionsProvider({ mentions, children }) {
   return /* @__PURE__ */ jsx(MentionsContext.Provider, { value: mentions ?? null, children });
@@ -3239,6 +3269,13 @@ var PopoverContent = React.forwardRef(({ className, align = "start", sideOffset
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+function returnFocusUnlessMoved(event) {
+  const active = document.activeElement;
+  const closing = event.target instanceof Node ? event.target : null;
+  if (active && active !== document.body && !closing?.contains(active)) {
+    event.preventDefault();
+  }
+}
 function matchesQuery(name, query) {
   const needle = query.replace(/^\s*#\s*/, "").trim().toLowerCase();
   return needle === "" || name.toLowerCase().includes(needle);
@@ -4730,6 +4767,73 @@ function SendDialog({
     ] })
   ] }) });
 }
+var ALT_TEXT_MAX_LENGTH = 2e3;
+function altTextFromFileName(file) {
+  const name = file.name.replace(/\.[^.]+$/, "").trim();
+  return (name || "Image").slice(0, ALT_TEXT_MAX_LENGTH);
+}
+function useCanvasImageDrop({
+  upload,
+  enabled,
+  onAddBlock
+}) {
+  const [dragging, setDragging] = useState(false);
+  const [pending, setPending] = useState(0);
+  const [error, setError] = useState(null);
+  const onAddBlockRef = useRef(onAddBlock);
+  onAddBlockRef.current = onAddBlock;
+  const addFiles = async (activeUpload, files) => {
+    const images = files.filter((file) => isAcceptedImage(file, activeUpload.accept));
+    const skipped = files.length - images.length;
+    setError(
+      skipped > 0 ? `${skipped === 1 ? "1 file was" : `${skipped} files were`} skipped. Only ${formatList(activeUpload.accept)} images can be added.` : null
+    );
+    if (images.length === 0) {
+      return;
+    }
+    setPending((count) => count + images.length);
+    const results = await Promise.allSettled(images.map((file) => activeUpload.uploadImage(file)));
+    setPending((count) => count - images.length);
+    const failures = [];
+    results.forEach((result, idx) => {
+      const file = images[idx];
+      if (result.status === "fulfilled") {
+        onAddBlockRef.current?.({ type: "image", image_url: result.value.url, alt_text: altTextFromFileName(file) });
+      } else {
+        failures.push(`Couldn't upload "${file.name}": ${uploadErrorMessage(result.reason)}`);
+      }
+    });
+    if (failures.length > 0) {
+      setError(failures.join(" "));
+    }
+  };
+  const isOwnEvent = (e) => isFileDrag(e.dataTransfer) && e.currentTarget.contains(e.target);
+  const handlers = upload && enabled && onAddBlock ? {
+    onDragOver: (e) => {
+      if (!isOwnEvent(e)) {
+        return;
+      }
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setDragging(true);
+    },
+    onDragLeave: (e) => {
+      const next = e.relatedTarget;
+      if (!next || !e.currentTarget.contains(next)) {
+        setDragging(false);
+      }
+    },
+    onDrop: (e) => {
+      if (!isOwnEvent(e)) {
+        return;
+      }
+      e.preventDefault();
+      setDragging(false);
+      void addFiles(upload, Array.from(e.dataTransfer.files));
+    }
+  } : void 0;
+  return { handlers, dragging, pending, error, dismissError: () => setError(null) };
+}
 function BlockActionButtons({
   actions,
   position,
@@ -4984,6 +5088,129 @@ function AlertEditor({ block, onChange }) {
     ) })
   ] });
 }
+function ImageUrlInput({
+  id,
+  value,
+  placeholder,
+  onChange
+}) {
+  const upload = useImageUpload();
+  const input = /* @__PURE__ */ jsx(Input, { id, type: "url", value, placeholder, onChange: (e) => onChange(e.target.value) });
+  if (!upload) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(UploadDropZone, { upload, inputId: id, onUploaded: onChange, variant: "inline" }),
+    input
+  ] });
+}
+function UploadDropZone({
+  upload,
+  inputId,
+  onUploaded,
+  variant
+}) {
+  const [uploading, setUploading] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState(null);
+  const fileInputRef = useRef(null);
+  const onUploadedRef = useRef(onUploaded);
+  onUploadedRef.current = onUploaded;
+  const uploadFile = async (file) => {
+    if (!isAcceptedImage(file, upload.accept)) {
+      setError(`"${file.name}" isn't a supported image. Use ${formatList(upload.accept)}.`);
+      return;
+    }
+    setError(null);
+    setUploading(true);
+    try {
+      const { url } = await upload.uploadImage(file);
+      onUploadedRef.current(url);
+    } catch (err) {
+      setError(uploadErrorMessage(err));
+    } finally {
+      setUploading(false);
+    }
+  };
+  const onDragOver = (e) => {
+    if (!isFileDrag(e.dataTransfer)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(true);
+  };
+  const onDrop = (e) => {
+    if (!isFileDrag(e.dataTransfer)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+    const [file] = Array.from(e.dataTransfer.files);
+    if (file && !uploading) {
+      void uploadFile(file);
+    }
+  };
+  const fileInput = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: fileInputRef,
+      id: `${inputId}-file`,
+      type: "file",
+      accept: upload.accept.join(","),
+      className: "hidden",
+      tabIndex: -1,
+      "aria-hidden": "true",
+      onChange: (e) => {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+          void uploadFile(file);
+        }
+      }
+    }
+  );
+  const pickButton = (label) => /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", className: "h-7", disabled: uploading, onClick: () => fileInputRef.current?.click(), children: label });
+  const dropHandlers = { onDragOver, onDragLeave: () => setDragging(false), onDrop };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant === "panel" ? /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": "Upload an image",
+        ...dropHandlers,
+        className: cn(
+          "flex flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-6 text-center text-xs text-muted-foreground transition-colors",
+          dragging && "border-primary bg-primary/5 text-primary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Upload, { className: cn("h-5 w-5", uploading && "animate-pulse"), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: uploading ? "Uploading\u2026" : dragging ? "Drop to upload" : "Drag an image here, or" }),
+          pickButton("Choose file"),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px]", children: formatList(upload.accept) }),
+          fileInput
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": "Upload an image",
+        ...dropHandlers,
+        className: cn(
+          "flex items-center gap-2 rounded-md border border-dashed px-3 py-2 text-[11px] text-muted-foreground transition-colors",
+          dragging && "border-primary bg-primary/5 text-primary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Upload, { className: cn("h-3.5 w-3.5 shrink-0", uploading && "animate-pulse"), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", "aria-live": "polite", children: uploading ? "Uploading\u2026" : dragging ? "Drop to upload" : "Drop an image here, or paste a URL below" }),
+          pickButton("Upload image"),
+          fileInput
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[11px] leading-snug text-destructive", children: error }) : null
+  ] });
+}
 function CardEditor({
   block,
   onChange,
@@ -5090,13 +5317,12 @@ function ImageFields({
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
     /* @__PURE__ */ jsx(EditorField, { label, help, htmlFor: `${idPrefix}-url`, children: /* @__PURE__ */ jsx(
-      Input,
+      ImageUrlInput,
       {
         id: `${idPrefix}-url`,
-        type: "url",
         value: url,
         placeholder: "e.g. https://example.com/image.png",
-        onChange: (e) => update({ url: e.target.value })
+        onChange: (next) => update({ url: next })
       }
     ) }),
     /* @__PURE__ */ jsx(EditorField, { label: "Alt text", help: "Describes the image for screen readers.", htmlFor: `${idPrefix}-alt`, children: /* @__PURE__ */ jsx(
@@ -7656,15 +7882,14 @@ function ContainerEditor({ block, onChange }) {
       }
     ) : null,
     /* @__PURE__ */ jsx(EditorField, { label: "Icon URL", help: "Optional image shown left of the title.", htmlFor: "container-icon", children: /* @__PURE__ */ jsx(
-      Input,
+      ImageUrlInput,
       {
         id: "container-icon",
-        type: "url",
         value: iconUrl,
         placeholder: "https://example.com/icon.png",
-        onChange: (e) => onChange({
+        onChange: (url) => onChange({
           ...block,
-          icon: e.target.value ? { type: "image", image_url: e.target.value, alt_text: iconAlt || "Container icon" } : void 0
+          icon: url ? { type: "image", image_url: url, alt_text: iconAlt || "Container icon" } : void 0
         })
       }
     ) }),
@@ -8162,13 +8387,12 @@ function ImageItemCard({
         help: "A publicly accessible image URL. Best at small sizes (around 20px).",
         htmlFor: `ctx-img-url-${index}`,
         children: /* @__PURE__ */ jsx(
-          Input,
+          ImageUrlInput,
           {
             id: `ctx-img-url-${index}`,
-            type: "url",
             value: element.image_url,
             placeholder: "e.g. https://example.com/avatar.png",
-            onChange: (e) => onChange({ ...element, image_url: e.target.value })
+            onChange: (url) => onChange({ ...element, image_url: url })
           }
         )
       }
@@ -8910,36 +9134,44 @@ function HeaderEditor({ block, onChange }) {
   ] });
 }
 function ImageEditor({ block, onChange }) {
-  const source = "slack_file" in block ? "slack_file" : "url";
+  const upload = useImageUpload();
+  const [urlSource, setUrlSource] = useState(upload ? "upload" : "url");
+  const isSlackFile = "slack_file" in block;
+  const source = isSlackFile ? "slack_file" : upload ? urlSource : "url";
   const titleText = block.title?.text ?? "";
   const setSource = (next) => {
     if (next === source) {
       return;
     }
-    if (next === "url") {
+    if (next !== "slack_file") {
+      setUrlSource(next);
+    }
+    if (next !== "slack_file" && isSlackFile) {
       const { slack_file: _omit, ...rest } = block;
       onChange({ image_url: "", ...rest });
-    } else {
+    } else if (next === "slack_file") {
       const { image_url: _omit, ...rest } = block;
       onChange({ slack_file: { id: "" }, ...rest });
     }
   };
+  const sourceOptions = [
+    ...upload ? [["upload", "Upload image"]] : [],
+    ["url", "Public URL"],
+    ["slack_file", "Slack file"]
+  ];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsx(
       EditorField,
       {
         label: "Image source",
-        help: "Where the image comes from: a public URL, or a file already uploaded to your Slack workspace.",
+        help: upload ? "Where the image comes from: a file from your device, a public URL, or a file already uploaded to your Slack workspace." : "Where the image comes from: a public URL, or a file already uploaded to your Slack workspace.",
         children: /* @__PURE__ */ jsx(
           RadioGroup,
           {
             value: source,
             onValueChange: (v) => setSource(v),
             className: "flex flex-row flex-wrap gap-3",
-            children: [
-              ["url", "Public URL"],
-              ["slack_file", "Slack file"]
-            ].map(([value, label]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            children: sourceOptions.map(([value, label]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value, id: `img-source-${value}` }),
               /* @__PURE__ */ jsx(Label, { htmlFor: `img-source-${value}`, className: "text-xs", children: label })
             ] }, value))
@@ -8947,7 +9179,15 @@ function ImageEditor({ block, onChange }) {
         )
       }
     ),
-    "slack_file" in block ? /* @__PURE__ */ jsx(SlackFileFields, { block, onChange }) : /* @__PURE__ */ jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsx(
+    "slack_file" in block ? /* @__PURE__ */ jsx(SlackFileFields, { block, onChange }) : source === "upload" && upload ? /* @__PURE__ */ jsx(
+      UploadDropZone,
+      {
+        upload,
+        inputId: "img-upload",
+        variant: "panel",
+        onUploaded: (url) => onChange({ ...block, image_url: url })
+      }
+    ) : /* @__PURE__ */ jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsx(
       Input,
       {
         id: "img-url",
@@ -10130,13 +10370,12 @@ function ImageAccessoryFields({ image, onChange }) {
         help: "A publicly accessible image URL (PNG, JPG, GIF).",
         htmlFor: "section-acc-img-url",
         children: /* @__PURE__ */ jsx(
-          Input,
+          ImageUrlInput,
           {
             id: "section-acc-img-url",
-            type: "url",
             value: image.image_url ?? "",
             placeholder: "e.g. https://example.com/thumb.png",
-            onChange: (e) => onChange({ ...image, image_url: e.target.value })
+            onChange: (url) => onChange({ ...image, image_url: url })
           }
         )
       }
@@ -10499,10 +10738,24 @@ function BlockEditor({
   const custom = useCustomBlockEditor(block);
   const CustomForm = custom?.component;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
-      "Edit ",
-      custom ? custom.label : labelForBlockType(block.type)
-    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
+        "Edit ",
+        custom ? custom.label : labelForBlockType(block.type)
+      ] }),
+      onDone ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Close editor",
+          className: "-my-1 -mr-1 h-7 w-7 text-muted-foreground",
+          onClick: onDone,
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      ) : null
+    ] }),
     errors && errors.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-0.5 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: errors.map((err, i) => /* @__PURE__ */ jsx("li", { children: err }, i)) }) : null,
     CustomForm ? /* @__PURE__ */ jsx(CustomForm, { block, onChange }) : dispatch(block, onChange),
     /* @__PURE__ */ jsx(
@@ -10664,15 +10917,23 @@ function BlockRow({
         children: preview
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
-      BlockEditor,
+    /* @__PURE__ */ jsx(
+      PopoverContent,
       {
-        block: builderBlock.block,
-        errors,
-        onChange: (next) => onUpdate(builderBlock.id, next),
-        onDone: () => onOpenChange?.(false)
+        className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]",
+        align: "start",
+        onCloseAutoFocus: returnFocusUnlessMoved,
+        children: /* @__PURE__ */ jsx(
+          BlockEditor,
+          {
+            block: builderBlock.block,
+            errors,
+            onChange: (next) => onUpdate(builderBlock.id, next),
+            onDone: () => onOpenChange?.(false)
+          }
+        )
       }
-    ) })
+    )
   ] });
   const adornment = position && renderBlockAdornment?.(position);
   const hoverChrome = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -10938,7 +11199,7 @@ function ContainerRow({
         hasErrors ? "border-destructive/60" : "border-border"
       ),
       children: [
-        /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(open ? id : null), children: [
+        /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(id, open), children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
             "div",
             {
@@ -10950,7 +11211,7 @@ function ContainerRow({
               onKeyDown: (e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
-                  onOpenBlockChange?.(!isOpen ? id : null);
+                  onOpenBlockChange?.(id, !isOpen);
                 }
               },
               className: "flex w-full cursor-grab items-center gap-2 border-b bg-muted/40 px-3 py-2 text-left transition-colors hover:bg-muted active:cursor-grabbing",
@@ -10964,15 +11225,23 @@ function ContainerRow({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
-            BlockEditor,
+          /* @__PURE__ */ jsx(
+            PopoverContent,
             {
-              block,
-              errors,
-              onChange: (next) => onUpdate(id, next),
-              onDone: () => onOpenBlockChange?.(null)
+              className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]",
+              align: "start",
+              onCloseAutoFocus: returnFocusUnlessMoved,
+              children: /* @__PURE__ */ jsx(
+                BlockEditor,
+                {
+                  block,
+                  errors,
+                  onChange: (next) => onUpdate(id, next),
+                  onDone: () => onOpenBlockChange?.(id, false)
+                }
+              )
             }
-          ) })
+          )
         ] }),
         /* @__PURE__ */ jsx(
           "div",
@@ -11001,7 +11270,7 @@ function ContainerRow({
                   previewTheme,
                   errors: errorsByBlockId?.get(child.id),
                   isOpen: openBlockId === child.id,
-                  onOpenChange: (open) => onOpenBlockChange?.(open ? child.id : null),
+                  onOpenChange: (open) => onOpenBlockChange?.(child.id, open),
                   onUpdate,
                   onDuplicate,
                   onDelete,
@@ -11036,7 +11305,7 @@ function ContainerRow({
             {
               type: "button",
               "aria-label": `Show ${errors.length} validation ${errors.length === 1 ? "issue" : "issues"}`,
-              onClick: () => onOpenBlockChange?.(id),
+              onClick: () => onOpenBlockChange?.(id, true),
               className: "flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
               children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" })
             }
@@ -11055,7 +11324,7 @@ function ContainerRow({
           /* @__PURE__ */ jsx(ToolbarButton2, { label: "Move down", disabled: index >= total - 1, onClick: () => onReorder(id, index + 1), children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) })
         ] }) : null,
         /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
-        /* @__PURE__ */ jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id), children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id, true), children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }) }),
         /* @__PURE__ */ jsx(ToolbarButton2, { label: "Duplicate", onClick: () => onDuplicate(id), children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
         /* @__PURE__ */ jsx(ToolbarButton2, { label: "Delete", destructive: true, onClick: () => onDelete(id), children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }) })
       ]
@@ -11088,7 +11357,7 @@ function ContainerRow({
               {
                 type: "button",
                 "aria-label": "Edit container",
-                onClick: () => onOpenBlockChange?.(id),
+                onClick: () => onOpenBlockChange?.(id, true),
                 className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
                 children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
               }
@@ -11166,10 +11435,14 @@ function Surface({
   isPaletteDrag = false,
   onOpenPalette,
   blockActions,
-  renderBlockAdornment
+  renderBlockAdornment,
+  onAddBlock,
+  imageDropEnabled = true
 }) {
   const { setNodeRef, isOver } = useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
+  const imageDrop = useCanvasImageDrop({ upload: useImageUpload(), enabled: imageDropEnabled, onAddBlock });
+  const isDropTarget = isPaletteDrag || imageDrop.dragging;
   const showEndDropZone = isPaletteDrag && isOver && blocks.length > 0;
   const blocksList = /* @__PURE__ */ jsx(
     "div",
@@ -11178,10 +11451,19 @@ function Surface({
       className: cn(
         "flex min-h-[180px] flex-col px-3 py-2 transition-colors sm:min-h-[240px] sm:px-5",
         isDark ? "bg-[#1a1d21]" : "bg-white",
-        isPaletteDrag && (isDark ? "bg-[#22262c] outline-2 outline-primary/40 -outline-offset-2 outline-dashed" : "bg-[#f5f8ff] outline-2 outline-primary/40 -outline-offset-2 outline-dashed"),
-        isPaletteDrag && isOver && (isDark ? "bg-[#2c3036]" : "bg-[#eaf0ff]")
+        isDropTarget && (isDark ? "bg-[#22262c] outline-2 outline-primary/40 -outline-offset-2 outline-dashed" : "bg-[#f5f8ff] outline-2 outline-primary/40 -outline-offset-2 outline-dashed"),
+        (isPaletteDrag && isOver || imageDrop.dragging) && (isDark ? "bg-[#2c3036]" : "bg-[#eaf0ff]")
       ),
-      children: blocks.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { isDark, isPaletteDrag, isOver, onOpenPalette }) : /* @__PURE__ */ jsxs(SortableContext, { items: blocks.map((b) => b.id), strategy: verticalListSortingStrategy, children: [
+      children: blocks.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          isDark,
+          isPaletteDrag,
+          isOver,
+          isFileDrag: imageDrop.dragging,
+          onOpenPalette
+        }
+      ) : /* @__PURE__ */ jsxs(SortableContext, { items: blocks.map((b) => b.id), strategy: verticalListSortingStrategy, children: [
         blocks.map(
           (block, idx) => block.block.type === "container" ? /* @__PURE__ */ jsx(
             ContainerRow,
@@ -11211,7 +11493,7 @@ function Surface({
               previewTheme,
               errors: errorsByBlockId?.get(block.id),
               isOpen: openBlockId === block.id,
-              onOpenChange: (open) => onOpenBlockChange?.(open ? block.id : null),
+              onOpenChange: (open) => onOpenBlockChange?.(block.id, open),
               onUpdate,
               onDuplicate,
               onDelete,
@@ -11226,7 +11508,7 @@ function Surface({
             block.id
           )
         ),
-        showEndDropZone ? /* @__PURE__ */ jsx(DropIndicator2, {}) : null
+        showEndDropZone || imageDrop.dragging ? /* @__PURE__ */ jsx(DropIndicator2, {}) : null
       ] })
     }
   );
@@ -11235,16 +11517,28 @@ 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(
-        SlackMessageFrame,
-        {
-          workspaceName,
-          authorName,
-          authorIcon,
-          isDark,
-          children: blocksList
-        }
-      ) })
+      ...imageDrop.handlers,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-2xl", children: [
+        imageDrop.handlers ? /* @__PURE__ */ jsx(
+          ImageDropStatus,
+          {
+            dragging: imageDrop.dragging,
+            pending: imageDrop.pending,
+            error: imageDrop.error,
+            onDismissError: imageDrop.dismissError
+          }
+        ) : null,
+        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
+          }
+        )
+      ] })
     }
   );
 }
@@ -11373,9 +11667,10 @@ function EmptyState({
   isDark,
   isPaletteDrag,
   isOver,
+  isFileDrag: isFileDrag2 = false,
   onOpenPalette
 }) {
-  const active = isPaletteDrag && isOver;
+  const active = isPaletteDrag && isOver || isFileDrag2;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11402,7 +11697,7 @@ function EmptyState({
                 "text-sm font-semibold transition-colors",
                 active ? "text-primary" : isDark ? "text-white" : "text-[#1d1c1d]"
               ),
-              children: active ? "Drop to add block" : "Start adding blocks!"
+              children: isFileDrag2 ? "Drop to add image" : active ? "Drop to add block" : "Start adding blocks!"
             }
           ),
           /* @__PURE__ */ jsx("p", { className: "text-xs", children: active ? "Release to insert it here." : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -11426,6 +11721,40 @@ function EmptyState({
     }
   );
 }
+function ImageDropStatus({
+  dragging,
+  pending,
+  error,
+  onDismissError
+}) {
+  const progress = dragging ? "Drop images to add them at the end of the message." : pending > 0 ? `Uploading ${pending === 1 ? "1 image" : `${pending} images`}\u2026` : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { role: "status", className: "empty:hidden", children: progress ? /* @__PURE__ */ jsxs("p", { className: "mb-2 flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(ImagePlus, { className: cn("h-3.5 w-3.5", pending > 0 && !dragging && "animate-pulse"), "aria-hidden": "true" }),
+      progress
+    ] }) : null }),
+    error ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "mb-2 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "flex-1", children: error }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Dismiss",
+              onClick: onDismissError,
+              className: "rounded p-0.5 hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
 function DropIndicator2() {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsx("span", { className: "-left-1 -top-[3px] absolute h-2 w-2 rounded-full bg-primary shadow-[0_0_0_2px_var(--color-background)]" }) });
 }
@@ -11988,6 +12317,7 @@ function BlockKitchen(props) {
     blockEditors,
     customEmojis,
     mentions,
+    imageUpload,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
@@ -12118,6 +12448,9 @@ function BlockKitchen(props) {
     setPaletteAdvanced(false);
   }
   const [openBlockId, setOpenBlockId] = useState(null);
+  const setBlockOpen = useCallback((id, open) => {
+    setOpenBlockId((current) => open ? id : current === id ? null : current);
+  }, []);
   const [uncontrolledPreviewTheme, setUncontrolledPreviewTheme] = useState(defaultPreviewTheme);
   const isPreviewThemeControlled = controlledPreviewTheme !== void 0;
   const previewTheme = controlledPreviewTheme ?? uncontrolledPreviewTheme;
@@ -12371,7 +12704,7 @@ function BlockKitchen(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsx(BlockEditorsProvider, { blockEditors, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsx(ImageUploadProvider, { imageUpload, children: /* @__PURE__ */ jsx(BlockEditorsProvider, { blockEditors, children: /* @__PURE__ */ jsx(
                   Surface,
                   {
                     blocks,
@@ -12383,7 +12716,7 @@ function BlockKitchen(props) {
                     previewSurface,
                     errorsByBlockId: validation.byBlockId,
                     openBlockId,
-                    onOpenBlockChange: setOpenBlockId,
+                    onOpenBlockChange: setBlockOpen,
                     onUpdate: updateBlock,
                     onDuplicate: duplicateBlock,
                     onDelete: removeBlock,
@@ -12391,9 +12724,11 @@ function BlockKitchen(props) {
                     isPaletteDrag: activePaletteVariant !== null,
                     onOpenPalette: () => setPaletteOpen(true),
                     blockActions,
-                    renderBlockAdornment
+                    renderBlockAdornment,
+                    onAddBlock: addBlock,
+                    imageDropEnabled: !disabledBlockTypes?.includes("image")
                   }
-                ) }) })
+                ) }) }) })
               ] })
             ]
           }