@tightknitai/block-kitchen 0.10.18 → 0.10.20

package/dist/index.js

@@ -1,8 +1,8 @@
 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, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, 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, Type, Bold, Italic, Strikethrough, Underline, Code, AtSign, List, ListOrdered, Quote, Hash, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -19,8 +19,9 @@ import { Message } from 'slack-blocks-to-jsx';
 import { CSS } from '@dnd-kit/utilities';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import Link from '@tiptap/extension-link';
-import { Node as Node$1, ReactNodeViewRenderer, mergeAttributes, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
+import { Node as Node$1, ReactNodeViewRenderer, mergeAttributes, Extension, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { Suggestion, exitSuggestion } from '@tiptap/suggestion';
 
 // src/components/block-kitchen.tsx
 
@@ -1065,6 +1066,58 @@ var defaultPalette = [
             ]
           ]
         })
+      },
+      {
+        // Slack's documented example.
+        id: "data_table_basic",
+        label: "Data table",
+        factory: () => ({
+          type: "data_table",
+          caption: "A Fabulous Table",
+          rows: [
+            [
+              { type: "raw_text", text: "Name" },
+              { type: "raw_text", text: "Department" },
+              { type: "raw_text", text: "Badge" }
+            ],
+            [
+              { type: "raw_text", text: "Data Refinement Department" },
+              { type: "raw_text", text: "MDR" },
+              {
+                type: "rich_text",
+                elements: [
+                  { type: "rich_text_section", elements: [{ type: "text", text: "Blue", style: { bold: true } }] }
+                ]
+              }
+            ],
+            [
+              { type: "raw_text", text: "Art Sourcing Department" },
+              { type: "raw_text", text: "O&D" },
+              {
+                type: "rich_text",
+                elements: [
+                  {
+                    type: "rich_text_section",
+                    elements: [
+                      { type: "text", text: "Green " },
+                      { type: "text", text: "review", style: { italic: true } }
+                    ]
+                  }
+                ]
+              }
+            ],
+            [
+              { type: "raw_text", text: "Wellness Department" },
+              { type: "raw_text", text: "Wellness Center" },
+              {
+                type: "rich_text",
+                elements: [
+                  { type: "rich_text_section", elements: [{ type: "text", text: "Limited", style: { bold: true } }] }
+                ]
+              }
+            ]
+          ]
+        })
       }
     ]
   },
@@ -1729,6 +1782,8 @@ function labelForBlockType(type) {
       return "Data Visualization";
     case "container":
       return "Container";
+    case "data_table":
+      return "Data Table";
   }
 }
 var Sheet = DialogPrimitive.Root;
@@ -1833,6 +1888,13 @@ function CustomEmojiProvider({ customEmojis, children }) {
 function useCustomEmojis() {
   return useContext(CustomEmojiContext);
 }
+var MentionsContext = createContext(null);
+function MentionsProvider({ mentions, children }) {
+  return /* @__PURE__ */ jsx(MentionsContext.Provider, { value: mentions ?? null, children });
+}
+function useMentions() {
+  return useContext(MentionsContext);
+}
 
 // src/lib/error-grouping.ts
 function toValidatorSurface(surface) {
@@ -3333,12 +3395,27 @@ function ChannelCombobox({
   ] });
 }
 var EMBED_SELECTOR = "iframe[src], embed[src], object[data], source[src], video[src], audio[src], track[src]";
+function useLatestHooks(hooks) {
+  const latest = useRef(hooks);
+  latest.current = hooks;
+  const [live] = useState(
+    () => new Proxy(
+      {},
+      {
+        get: (_target, key) => typeof key === "string" ? latest.current?.[key] : void 0,
+        has: (_target, key) => typeof key === "string" && latest.current !== void 0 && key in latest.current
+      }
+    )
+  );
+  return live;
+}
 function SlackBlockPreview({
   block,
   hooks,
   theme = "light"
 }) {
   const rootRef = useRef(null);
+  const liveHooks = useLatestHooks(hooks);
   const safeBlock = useMemo(() => sanitizeBlock(block), [block]);
   useEffect(() => {
     const root = rootRef.current;
@@ -3393,7 +3470,7 @@ function SlackBlockPreview({
         withoutWrapper: true,
         theme,
         blocks: [safeBlock],
-        hooks
+        hooks: liveHooks
       }
     ) })
   );
@@ -5166,14 +5243,16 @@ function makeEmojiImportResolver(customByName, index = getEmojiIndex()) {
 }
 
 // src/lib/rich-text-tiptap.ts
+var USER_MENTION_NODE = "userMention";
 var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_section",
   "rich_text_list",
   "rich_text_quote",
   "rich_text_preformatted"
 ]);
-var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji"]);
+var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji", "user"]);
 var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline", "code"]);
+var SUPPORTED_USER_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5196,6 +5275,17 @@ function detectLossy(block) {
     if ("border" in el && (el.border ?? 0) > 0) {
       out.push({ label: "Quote/preformatted border", where });
     }
+    if (el.type === "rich_text_preformatted") {
+      el.elements?.forEach((inline, i) => {
+        const sub = `${where}.elements[${i}]`;
+        if (inline.type !== "text") {
+          out.push({ label: `In code block: ${inline.type}`, where: sub });
+        } else if (Object.values(inline.style ?? {}).some(Boolean)) {
+          out.push({ label: "Styled text in code block", where: sub });
+        }
+      });
+      return;
+    }
     scanInlines(el.elements ?? [], where, out);
   });
   return out;
@@ -5217,6 +5307,13 @@ function scanInlines(inlines, where, out) {
         }
       }
     }
+    if (inline.type === "user") {
+      for (const k of Object.keys(inline.style ?? {})) {
+        if (!SUPPORTED_USER_STYLE_KEYS.has(k)) {
+          out.push({ label: `Mention style: ${k}`, where: sub });
+        }
+      }
+    }
   });
 }
 var defaultEmojiResolver = (el) => ({
@@ -5328,6 +5425,17 @@ function inlinesToPM(inlines, resolveEmoji) {
         continue;
       }
       out.push({ type: "emoji", attrs });
+    } else if (inline.type === "user") {
+      const user = inline;
+      if (!user.user_id) {
+        continue;
+      }
+      const node = { type: USER_MENTION_NODE, attrs: { userId: user.user_id, name: null } };
+      const marks = styleToMarks(user.style);
+      if (marks.length > 0) {
+        node.marks = marks;
+      }
+      out.push(node);
     } else if (inline.type === "link") {
       const link = inline;
       const text = link.text || link.url || "";
@@ -5461,6 +5569,19 @@ function proseMirrorInlinesToRichTextElements(nodes) {
       out.push(emoji);
       continue;
     }
+    if (node.type === USER_MENTION_NODE) {
+      const userId = String(node.attrs?.userId ?? "");
+      if (!userId) {
+        continue;
+      }
+      const user = { type: "user", user_id: userId };
+      const style2 = userStyle(node.marks ?? []);
+      if (Object.keys(style2).length > 0) {
+        user.style = style2;
+      }
+      out.push(user);
+      continue;
+    }
     if (node.type === "hardBreak") {
       out.push({ type: "text", text: "\n" });
       continue;
@@ -5515,6 +5636,15 @@ function marksToStyle(marks) {
   }
   return style;
 }
+function userStyle(marks) {
+  const style = {};
+  for (const [key, value] of Object.entries(marksToStyle(marks))) {
+    if (SUPPORTED_USER_STYLE_KEYS.has(key)) {
+      style[key] = value;
+    }
+  }
+  return style;
+}
 function mergeAdjacentTextRuns(inlines) {
   const out = [];
   for (const inline of inlines) {
@@ -5581,6 +5711,91 @@ var EmojiNode = Node$1.create({
     return ReactNodeViewRenderer(EmojiNodeView);
   }
 });
+var MENTION_SEARCH_DEBOUNCE_MS = 200;
+function insertUserMention(editor, range, user) {
+  const to = editor.state.doc.textBetween(range.to, Math.min(range.to + 1, editor.state.doc.content.size)) === " " ? range.to + 1 : range.to;
+  editor.chain().focus().insertContentAt({ from: range.from, to }, [
+    { type: USER_MENTION_NODE, attrs: { userId: user.id, name: user.name } },
+    { type: "text", text: " " }
+  ]).run();
+}
+function insertMentionTrigger(editor) {
+  const { from } = editor.state.selection;
+  const before = from > 1 ? editor.state.doc.textBetween(from - 1, from, void 0, "\uFFFC") : "";
+  const needsSpace = before !== "" && !/\s/.test(before);
+  editor.chain().focus().insertContent(needsSpace ? " @" : "@").run();
+}
+function dismissMentionSuggestion(editor) {
+  exitSuggestion(editor.view);
+}
+var MentionSuggestion = Extension.create({
+  name: "userMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "@",
+        debounce: MENTION_SEARCH_DEBOUNCE_MS,
+        allow: () => isEnabled(),
+        items: ({ query, signal }) => search(query, signal),
+        command: ({ editor, range, props }) => insertUserMention(editor, range, props),
+        render
+      })
+    ];
+  }
+});
+function userMentionLabel(attrs, getUserName) {
+  return getUserName?.(attrs.userId) ?? attrs.name ?? attrs.userId;
+}
+function UserMentionNodeView({ node }) {
+  const mentions = useMentions();
+  const attrs = node.attrs;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "span", className: "bk-user-mention", "data-user-mention": attrs.userId, children: [
+    "@",
+    userMentionLabel(attrs, mentions?.getUserName)
+  ] });
+}
+var UserMentionNode = Node$1.create({
+  name: USER_MENTION_NODE,
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      userId: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-user-mention") ?? "",
+        renderHTML: (attributes) => ({ "data-user-mention": attributes.userId })
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-user-name"),
+        renderHTML: (attributes) => attributes.name ? { "data-user-name": attributes.name } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-user-mention]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes(HTMLAttributes), `@${userMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `@${userMentionLabel(node.attrs)}`;
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(UserMentionNodeView);
+  }
+});
 
 // src/lib/emoji-recents.ts
 var STORAGE_KEY = "bk:emoji-recents";
@@ -5862,6 +6077,133 @@ function EmojiPickerButton({
     ) })
   ] });
 }
+function nextMentionPickerState(props, prev) {
+  return {
+    items: props.loading && prev ? prev.items : props.items,
+    loading: props.loading,
+    clientRect: props.clientRect ?? null,
+    command: props.command
+  };
+}
+function MentionPicker({
+  editor,
+  state,
+  keyHandlerRef,
+  onDismiss
+}) {
+  const { items, loading, clientRect, command } = state;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [shownItems, setShownItems] = useState(items);
+  if (shownItems !== items) {
+    setShownItems(items);
+    setActiveIndex(0);
+  }
+  const listRef = useRef(null);
+  useEffect(() => {
+    keyHandlerRef.current = (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        if (items.length > 0) {
+          const step = event.key === "ArrowDown" ? 1 : -1;
+          setActiveIndex((index) => (index + step + items.length) % items.length);
+        }
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        const user = items[activeIndex];
+        if (!user) {
+          return false;
+        }
+        command(user);
+        return true;
+      }
+      return false;
+    };
+    return () => {
+      keyHandlerRef.current = () => false;
+    };
+  }, [keyHandlerRef, items, activeIndex, command]);
+  useEffect(() => {
+    const row = listRef.current?.querySelectorAll('[role="option"]')[activeIndex];
+    row?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex]);
+  const anchorRef = useMemo(
+    () => ({
+      current: {
+        getBoundingClientRect: () => clientRect?.() ?? editor.view.dom.getBoundingClientRect()
+      }
+    }),
+    [clientRect, editor]
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          onDismiss();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: "max-h-[min(15rem,var(--radix-popover-content-available-height))] w-64 p-1",
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onEscapeKeyDown: (e) => e.stopPropagation(),
+            onInteractOutside: (e) => {
+              if (e.target instanceof Node && editor.view.dom.contains(e.target)) {
+                e.preventDefault();
+              }
+            },
+            children: /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", "aria-label": "People to mention", children: items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: loading ? "Searching\u2026" : "No people match that search." }) : items.map((user, index) => (
+              // biome-ignore lint/a11y/useFocusableInteractive: focus stays in the editor, which drives this list through the suggestion plugin's key handling.
+              // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard path is the editor's, forwarded via keyHandlerRef.
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  onPointerDown: (e) => e.preventDefault(),
+                  onClick: () => command(user),
+                  onMouseMove: () => setActiveIndex(index),
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground",
+                    index === activeIndex && "bg-accent"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(MentionAvatar, { user }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: user.name })
+                  ]
+                },
+                user.id
+              )
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+function MentionAvatar({ user }) {
+  const [failed, setFailed] = useState(false);
+  const src = user.avatarUrl && isSafeImageSrc(user.avatarUrl) ? user.avatarUrl : null;
+  if (src && !failed) {
+    return /* @__PURE__ */ jsx("img", { src, alt: "", className: "h-5 w-5 shrink-0 rounded object-cover", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground",
+      children: Array.from(user.name.trim())[0]?.toUpperCase() ?? "@"
+    }
+  );
+}
 var BLOCK_ELEMENT_LABEL = {
   rich_text_section: "Section",
   rich_text_list: "List",
@@ -6437,7 +6779,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions() {
+function buildRichTextExtensions(mentionSuggestion) {
   return [
     StarterKit.configure({
       heading: false,
@@ -6470,7 +6812,11 @@ function buildRichTextExtensions() {
       // via the link button.
       shouldAutoLink: hasExplicitSafeScheme,
       HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
-    })
+    }),
+    // Always registered, so mentions already in the content round-trip with
+    // or without the picker.
+    UserMentionNode,
+    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : []
   ];
 }
 function RichTextWysiwygEditor({ block, onChange }) {
@@ -6497,8 +6843,25 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     [onChange]
   );
+  const mentions = useMentions();
+  const mentionsEnabled = mentions !== null;
+  const mentionsRef = useRef(mentions);
+  useEffect(() => {
+    mentionsRef.current = mentions;
+  }, [mentions]);
+  const [mentionPicker, setMentionPicker] = useState(null);
+  const mentionKeyHandlerRef = useRef(() => false);
   const editor = useEditor({
-    extensions: buildRichTextExtensions(),
+    extensions: buildRichTextExtensions({
+      isEnabled: () => mentionsRef.current !== null,
+      search: async (query, signal) => await mentionsRef.current?.searchUsers(query, { signal }) ?? [],
+      render: () => ({
+        onStart: (props) => setMentionPicker((prev) => nextMentionPickerState(props, prev)),
+        onUpdate: (props) => setMentionPicker((prev) => nextMentionPickerState(props, prev)),
+        onExit: () => setMentionPicker(null),
+        onKeyDown: ({ event }) => mentionKeyHandlerRef.current(event)
+      })
+    }),
     enableInputRules: RICH_TEXT_INPUT_RULE_ALLOWLIST,
     content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
@@ -6508,10 +6871,16 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     onUpdate: ({ editor: ed }) => handleUpdate(ed)
   });
+  const seenBlockRef = useRef(block);
   useEffect(() => {
     if (!editor) {
       return;
     }
+    const blockChanged = seenBlockRef.current !== block;
+    seenBlockRef.current = block;
+    if (!blockChanged && lastEmittedRef.current) {
+      return;
+    }
     if (lastEmittedRef.current && JSON.stringify(lastEmittedRef.current) === JSON.stringify(block)) {
       return;
     }
@@ -6523,11 +6892,26 @@ function RichTextWysiwygEditor({ block, onChange }) {
     return /* @__PURE__ */ jsx("div", { className: "min-h-[120px] rounded-md border border-input bg-background" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(Toolbar, { editor }),
-    /* @__PURE__ */ jsx(EditorContent, { editor })
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        editor,
+        mention: mentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null
+      }
+    ),
+    /* @__PURE__ */ jsx(EditorContent, { editor }),
+    mentionPicker && /* @__PURE__ */ jsx(
+      MentionPicker,
+      {
+        editor,
+        state: mentionPicker,
+        keyHandlerRef: mentionKeyHandlerRef,
+        onDismiss: () => dismissMentionSuggestion(editor)
+      }
+    )
   ] });
 }
-function Toolbar({ editor }) {
+function Toolbar({ editor, mention }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-0.5 rounded-md border bg-muted/30 p-1", children: [
     /* @__PURE__ */ jsx(
       ToolbarButton,
@@ -6586,6 +6970,7 @@ function Toolbar({ editor }) {
         }).run()
       }
     ),
+    mention && /* @__PURE__ */ jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: AtSign }),
     /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsx(
       ToolbarButton,
@@ -7449,6 +7834,387 @@ function ImageItemCard({
     ) })
   ] });
 }
+var REMOVE_BUTTON_CLASS = "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40";
+function CellGrid({
+  label,
+  help,
+  rows,
+  minRows,
+  maxRows,
+  maxColumns,
+  lockFirstRow = false,
+  blankCell,
+  renderCell,
+  renderColumnControl,
+  onChange
+}) {
+  const columnCount = rows[0]?.length ?? 0;
+  const setCell = (rowIdx, colIdx, next) => {
+    onChange(rows.map((row, r) => r === rowIdx ? row.map((cell, c) => c === colIdx ? next : cell) : row));
+  };
+  const addRow = () => {
+    onChange([...rows, Array.from({ length: columnCount || 1 }, blankCell)]);
+  };
+  const removeRow = (rowIdx) => {
+    if (rows.length <= minRows) {
+      return;
+    }
+    onChange(rows.filter((_, r) => r !== rowIdx));
+  };
+  const addColumn = () => {
+    onChange(
+      rows.map((row) => [...row, blankCell()]),
+      { kind: "add" }
+    );
+  };
+  const removeColumn = (colIdx) => {
+    if (columnCount <= 1) {
+      return;
+    }
+    onChange(
+      rows.map((row) => row.filter((_, c) => c !== colIdx)),
+      { kind: "remove", index: colIdx }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(EditorField, { label, help, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }),
+        Array.from({ length: columnCount }, (_, c) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
+          renderColumnControl ? renderColumnControl(c) : /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate px-1.5 text-[11px] text-muted-foreground", children: [
+            "Column ",
+            c + 1
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove column ${c + 1}`,
+              onClick: () => removeColumn(c),
+              disabled: columnCount <= 1,
+              className: REMOVE_BUTTON_CLASS,
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }, c))
+      ] }),
+      rows.map((row, r) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        lockFirstRow && r === 0 ? /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove row ${r + 1}`,
+            onClick: () => removeRow(r),
+            disabled: rows.length <= minRows,
+            className: REMOVE_BUTTON_CLASS,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+          }
+        ),
+        row.map((cell, c) => /* @__PURE__ */ jsx("div", { className: "flex min-w-[120px] flex-1 flex-col gap-0.5", children: renderCell(
+          cell,
+          { row: r, col: c, label: `Row ${r + 1}, column ${c + 1}` },
+          (next) => setCell(r, c, next)
+        ) }, c))
+      ] }, r))
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= maxRows, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+        " Add row"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= maxColumns, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+        " Add column"
+      ] })
+    ] })
+  ] });
+}
+function CellTextInput({
+  cell,
+  label,
+  placeholder,
+  leading,
+  richTextNote = "Was rich-text; editing replaces with plain text.",
+  onChange
+}) {
+  const input = /* @__PURE__ */ jsx(
+    Input,
+    {
+      "aria-label": label,
+      value: cell.type === "raw_text" ? cell.text : "[rich_text]",
+      placeholder,
+      onChange: (e) => onChange({ type: "raw_text", text: e.target.value }),
+      className: "h-8 text-xs"
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      leading,
+      input
+    ] }) : input,
+    cell.type === "rich_text" ? /* @__PURE__ */ jsx("span", { className: cn("text-[10px] text-muted-foreground", leading && "pl-7"), children: richTextNote }) : null
+  ] });
+}
+function NumberInput({
+  id,
+  value,
+  onCommit,
+  ariaLabel,
+  className
+}) {
+  const [draft, setDraft] = useState(String(value));
+  useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      inputMode: "numeric",
+      "aria-label": ariaLabel,
+      value: draft,
+      className,
+      onChange: (e) => {
+        const raw = e.target.value;
+        setDraft(raw);
+        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
+          return;
+        }
+        const next = Number(raw);
+        if (!Number.isNaN(next)) {
+          onCommit(next);
+        }
+      },
+      onBlur: () => {
+        const next = Number(draft);
+        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
+        onCommit(safe);
+        setDraft(String(safe));
+      }
+    }
+  );
+}
+var MAX_ROWS = 201;
+var MIN_ROWS = 2;
+var MAX_COLUMNS = 20;
+var MAX_PAGE_SIZE = 100;
+var SELECT_CLASS = "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+function withOptional(block, key, value) {
+  const next = { ...block };
+  if (value === void 0) {
+    delete next[key];
+  } else {
+    next[key] = value;
+  }
+  return next;
+}
+function realignRowHeader(index, edit) {
+  if (index === void 0 || edit.kind === "add" || edit.index > index) {
+    return index;
+  }
+  return edit.index === index ? void 0 : index - 1;
+}
+function cellText(cell) {
+  switch (cell?.type) {
+    case "raw_text":
+      return cell.text;
+    case "raw_number":
+      return cell.text ?? String(cell.value);
+    case "action_cell":
+      return cell.element.text.text;
+    default:
+      return "";
+  }
+}
+function toNumberCell(cell) {
+  const text = cell.text.trim();
+  const parsed = text === "" ? Number.NaN : Number(text.replace(/,/g, ""));
+  if (Number.isFinite(parsed)) {
+    return String(parsed) === text ? { type: "raw_number", value: parsed } : { type: "raw_number", value: parsed, text };
+  }
+  return text ? { type: "raw_number", value: 0, text } : { type: "raw_number", value: 0 };
+}
+function toTextCell(cell) {
+  return { type: "raw_text", text: cell.text ?? String(cell.value) };
+}
+function DataTableEditor({ block, onChange }) {
+  const rows = block.rows ?? [];
+  const header = rows[0] ?? [];
+  const rowHeader = block.row_header_column_index ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(EditorField, { label: "Caption", help: "Required. Names the table for screen readers.", htmlFor: "data-table-caption", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "data-table-caption",
+        value: block.caption,
+        placeholder: "e.g. Open deals by stage",
+        onChange: (e) => onChange({ ...block, caption: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        EditorField,
+        {
+          label: "Rows per page",
+          help: "Optional, 1-100. Slack shows 5 when empty.",
+          htmlFor: "data-table-page-size",
+          children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "data-table-page-size",
+              type: "number",
+              min: 1,
+              max: MAX_PAGE_SIZE,
+              value: block.page_size ?? "",
+              placeholder: "5",
+              onChange: (e) => {
+                const n = Math.trunc(Number(e.target.value));
+                const next = e.target.value === "" || Number.isNaN(n) ? void 0 : Math.min(MAX_PAGE_SIZE, Math.max(1, n));
+                onChange(withOptional(block, "page_size", next));
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditorField,
+        {
+          label: "Row header column",
+          help: "The column that identifies each row for screen readers.",
+          htmlFor: "data-table-row-header",
+          children: /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "data-table-row-header",
+              value: rowHeader,
+              disabled: header.length === 0,
+              onChange: (e) => {
+                const index = Number(e.target.value);
+                onChange(withOptional(block, "row_header_column_index", index === 0 ? void 0 : index));
+              },
+              className: SELECT_CLASS,
+              children: [
+                header.map((cell, c) => {
+                  const text = cellText(cell);
+                  return /* @__PURE__ */ jsx("option", { value: c, children: text ? `Column ${c + 1}: ${text}` : `Column ${c + 1}` }, c);
+                }),
+                rowHeader >= header.length ? /* @__PURE__ */ jsxs("option", { value: rowHeader, children: [
+                  "Column ",
+                  rowHeader + 1,
+                  " (missing)"
+                ] }) : null
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      CellGrid,
+      {
+        label: "Cells",
+        help: "The first row is the header. Up to 200 more rows and 20 columns. Use # to make a cell a number; a column of only numbers sorts numerically.",
+        rows,
+        minRows: MIN_ROWS,
+        maxRows: MAX_ROWS,
+        maxColumns: MAX_COLUMNS,
+        lockFirstRow: true,
+        blankCell: () => ({ type: "raw_text", text: "" }),
+        onChange: (nextRows, edit) => {
+          const next = { ...block, rows: nextRows };
+          onChange(
+            edit ? withOptional(next, "row_header_column_index", realignRowHeader(block.row_header_column_index, edit)) : next
+          );
+        },
+        renderCell: (cell, position, update) => /* @__PURE__ */ jsx(DataTableCellField, { cell, position, onChange: update })
+      }
+    )
+  ] });
+}
+function DataTableCellField({
+  cell,
+  position,
+  onChange
+}) {
+  const { row, col, label } = position;
+  if (cell.type === "action_cell") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-dashed px-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MousePointerClick, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: cellText(cell) || "Button" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "pl-7 text-[10px] text-muted-foreground", children: "Button cell. Edit it via View JSON." })
+    ] });
+  }
+  if (cell.type === "raw_number") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(NumberToggle, { label, pressed: true, onClick: () => onChange(toTextCell(cell)) }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            value: cell.value,
+            ariaLabel: `${label} value`,
+            onCommit: (value) => onChange({ ...cell, value }),
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": `${label} display text`,
+            value: cell.text ?? "",
+            placeholder: "Display as (optional)",
+            onChange: (e) => {
+              const { text: _omit, ...rest } = cell;
+              onChange(e.target.value ? { ...rest, text: e.target.value } : rest);
+            },
+            className: "h-7 text-[11px]"
+          }
+        )
+      ] })
+    ] });
+  }
+  const isHeader = row === 0;
+  return /* @__PURE__ */ jsx(
+    CellTextInput,
+    {
+      cell,
+      label,
+      placeholder: isHeader ? `Header ${col + 1}` : "Cell text",
+      richTextNote: isHeader ? "Header cells can't be rich text. Type to replace it." : void 0,
+      leading: !isHeader && cell.type === "raw_text" ? /* @__PURE__ */ jsx(NumberToggle, { label, pressed: false, onClick: () => onChange(toNumberCell(cell)) }) : /* @__PURE__ */ jsx(ToggleSpacer, {}),
+      onChange
+    }
+  );
+}
+function ToggleSpacer() {
+  return /* @__PURE__ */ jsx("span", { className: "h-6 w-6 shrink-0", "aria-hidden": "true" });
+}
+function NumberToggle({ label, pressed, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `${label} as number`,
+      "aria-pressed": pressed,
+      title: pressed ? "Number cell. Click to make it text." : "Text cell. Click to make it a number.",
+      onClick,
+      className: cn(
+        "flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors",
+        pressed ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(Hash, { className: "h-3 w-3" })
+    }
+  );
+}
 var CHART_TYPES = ["line", "bar", "area", "pie"];
 function isCartesian(chart) {
   return chart.type !== "pie";
@@ -7503,46 +8269,6 @@ function DataVisualizationEditor({ block, onChange }) {
     isCartesian(chart) ? /* @__PURE__ */ jsx(CartesianFields, { chart, onChange: setChart }) : /* @__PURE__ */ jsx(PieFields, { chart, onChange: setChart })
   ] });
 }
-function NumberInput({
-  id,
-  value,
-  onCommit,
-  ariaLabel,
-  className
-}) {
-  const [draft, setDraft] = useState(String(value));
-  useEffect(() => {
-    setDraft(String(value));
-  }, [value]);
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      id,
-      type: "number",
-      inputMode: "numeric",
-      "aria-label": ariaLabel,
-      value: draft,
-      className,
-      onChange: (e) => {
-        const raw = e.target.value;
-        setDraft(raw);
-        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
-          return;
-        }
-        const next = Number(raw);
-        if (!Number.isNaN(next)) {
-          onCommit(next);
-        }
-      },
-      onBlur: () => {
-        const next = Number(draft);
-        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
-        onCommit(safe);
-        setDraft(String(safe));
-      }
-    }
-  );
-}
 function CartesianFields({ chart, onChange }) {
   const series = chart.series;
   const categories = chart.axis_config?.categories && chart.axis_config.categories.length > 0 ? chart.axis_config.categories : series[0]?.data.map((d) => d.label) ?? [];
@@ -9085,45 +9811,13 @@ function ImageAccessoryFields({ image, onChange }) {
   ] });
 }
 var ALIGN_OPTIONS = ["left", "center", "right"];
-function cellAsText(cell) {
-  if (cell.type === "raw_text") {
-    return cell.text;
-  }
-  return "[rich_text]";
+function alignColumnSettings(settings, edit) {
+  return edit.kind === "add" ? [...settings, null] : settings.filter((_, c) => c !== edit.index);
 }
 function TableEditor({ block, onChange }) {
   const rows = block.rows ?? [];
   const columnCount = rows[0]?.length ?? 0;
   const columnSettings = block.column_settings ?? [];
-  const setCell = (rowIdx, colIdx, text) => {
-    const nextRows = rows.map(
-      (row, r) => r === rowIdx ? row.map((cell, c) => c === colIdx ? { type: "raw_text", text } : cell) : row
-    );
-    onChange({ ...block, rows: nextRows });
-  };
-  const addRow = () => {
-    const blankRow = Array.from({ length: columnCount || 1 }, () => ({ type: "raw_text", text: "" }));
-    onChange({ ...block, rows: [...rows, blankRow] });
-  };
-  const removeRow = (rowIdx) => {
-    if (rows.length <= 1) {
-      return;
-    }
-    onChange({ ...block, rows: rows.filter((_, r) => r !== rowIdx) });
-  };
-  const addColumn = () => {
-    const nextRows = rows.map((row) => [...row, { type: "raw_text", text: "" }]);
-    const nextSettings = [...columnSettings, null];
-    onChange({ ...block, rows: nextRows, column_settings: nextSettings });
-  };
-  const removeColumn = (colIdx) => {
-    if (columnCount <= 1) {
-      return;
-    }
-    const nextRows = rows.map((row) => row.filter((_, c) => c !== colIdx));
-    const nextSettings = columnSettings.filter((_, c) => c !== colIdx);
-    onChange({ ...block, rows: nextRows, column_settings: nextSettings });
-  };
   const setColumnAlign = (colIdx, align) => {
     const next = Array.from({ length: columnCount }, (_, i) => columnSettings[i] ?? null);
     if (align === "") {
@@ -9134,81 +9828,45 @@ function TableEditor({ block, onChange }) {
     }
     onChange({ ...block, column_settings: next });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx(EditorField, { label: "Cells", help: "Up to 100 rows and 20 columns. Slack allows one table per message.", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }),
-        Array.from({ length: columnCount }, (_, c) => {
-          const setting = columnSettings[c];
-          const align = setting?.align ?? "";
-          return /* @__PURE__ */ jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": `Column ${c + 1} alignment`,
-                value: align,
-                onChange: (e) => setColumnAlign(c, e.target.value),
-                className: "h-7 flex-1 rounded-sm border border-input bg-background px-1.5 text-[11px] text-muted-foreground",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
-                  ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx("option", { value: a, children: a }, a))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": `Remove column ${c + 1}`,
-                onClick: () => removeColumn(c),
-                disabled: columnCount <= 1,
-                className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
-              }
-            )
-          ] }, c);
-        })
-      ] }),
-      rows.map((row, r) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Remove row ${r + 1}`,
-            onClick: () => removeRow(r),
-            disabled: rows.length <= 1,
-            className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
-          }
-        ),
-        row.map((cell, c) => {
-          const isRichText = cell.type === "rich_text";
-          return /* @__PURE__ */ jsxs("div", { className: "flex min-w-[120px] flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: cellAsText(cell),
-                placeholder: r === 0 ? `Header ${c + 1}` : "Cell text",
-                onChange: (e) => setCell(r, c, e.target.value),
-                className: "h-8 text-xs"
-              }
-            ),
-            isRichText ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Was rich-text; editing replaces with plain text." }) : null
-          ] }, c);
-        })
-      ] }, r))
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= 100, children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
-        " Add row"
-      ] }),
-      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= 20, children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
-        " Add column"
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(
+    CellGrid,
+    {
+      label: "Cells",
+      help: "Up to 100 rows and 20 columns. Slack allows one table per message.",
+      rows,
+      minRows: 1,
+      maxRows: 100,
+      maxColumns: 20,
+      blankCell: () => ({ type: "raw_text", text: "" }),
+      onChange: (nextRows, edit) => onChange({
+        ...block,
+        rows: nextRows,
+        ...edit ? { column_settings: alignColumnSettings(columnSettings, edit) } : {}
+      }),
+      renderColumnControl: (c) => /* @__PURE__ */ jsxs(
+        "select",
+        {
+          "aria-label": `Column ${c + 1} alignment`,
+          value: columnSettings[c]?.align ?? "",
+          onChange: (e) => setColumnAlign(c, e.target.value),
+          className: "h-7 flex-1 rounded-sm border border-input bg-background px-1.5 text-[11px] text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
+            ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx("option", { value: a, children: a }, a))
+          ]
+        }
+      ),
+      renderCell: (cell, { row, col, label }, update) => /* @__PURE__ */ jsx(
+        CellTextInput,
+        {
+          cell,
+          label,
+          placeholder: row === 0 ? `Header ${col + 1}` : "Cell text",
+          onChange: update
+        }
+      )
+    }
+  );
 }
 var STATUSES2 = ["pending", "in_progress", "complete", "error"];
 function TaskCardEditor({ block, onChange }) {
@@ -9549,6 +10207,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
     case "container":
       return /* @__PURE__ */ jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
+    case "data_table":
+      return /* @__PURE__ */ jsx(DataTableEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -9572,7 +10232,8 @@ var BLOCK_TYPE_LABELS = {
   plan: "Plan",
   task_card: "Task Card",
   data_visualization: "Data Visualization",
-  container: "Container"
+  container: "Container",
+  data_table: "Data Table"
 };
 function BlockRow({
   builderBlock,
@@ -10922,6 +11583,7 @@ function BlockKitchen(props) {
     onValidationChange,
     previewHooks,
     customEmojis,
+    mentions,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
@@ -11282,7 +11944,7 @@ function BlockKitchen(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsx(
                   Surface,
                   {
                     blocks,
@@ -11302,7 +11964,7 @@ function BlockKitchen(props) {
                     isPaletteDrag: activePaletteVariant !== null,
                     onOpenPalette: () => setPaletteOpen(true)
                   }
-                )
+                ) })
               ] })
             ]
           }