@tightknitai/block-kitchen 0.10.19 → 0.10.21

package/dist/index.cjs

@@ -22,6 +22,7 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var Link = require('@tiptap/extension-link');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
+var state = require('@tiptap/pm/state');
 var suggestion = require('@tiptap/suggestion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -1096,6 +1097,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 } }] }
+                ]
+              }
+            ]
+          ]
+        })
       }
     ]
   },
@@ -1760,6 +1813,8 @@ function labelForBlockType(type) {
       return "Data Visualization";
     case "container":
       return "Container";
+    case "data_table":
+      return "Data Table";
   }
 }
 var Sheet = DialogPrimitive__namespace.Root;
@@ -5220,15 +5275,16 @@ function makeEmojiImportResolver(customByName, index = getEmojiIndex()) {
 
 // src/lib/rich-text-tiptap.ts
 var USER_MENTION_NODE = "userMention";
+var CHANNEL_MENTION_NODE = "channelMention";
 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", "user"]);
+var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji", "user", "channel"]);
 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 SUPPORTED_MENTION_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5283,10 +5339,13 @@ function scanInlines(inlines, where, out) {
         }
       }
     }
-    if (inline.type === "user") {
+    if (inline.type === "user" || inline.type === "channel") {
+      if (inline.type === "channel" && !inline.channel_id) {
+        out.push({ label: "Channel without id", where: sub });
+      }
       for (const k of Object.keys(inline.style ?? {})) {
-        if (!SUPPORTED_USER_STYLE_KEYS.has(k)) {
-          out.push({ label: `Mention style: ${k}`, where: sub });
+        if (!SUPPORTED_MENTION_STYLE_KEYS.has(k)) {
+          out.push({ label: `${inline.type === "channel" ? "Channel" : "Mention"} style: ${k}`, where: sub });
         }
       }
     }
@@ -5412,6 +5471,20 @@ function inlinesToPM(inlines, resolveEmoji) {
         node.marks = marks;
       }
       out.push(node);
+    } else if (inline.type === "channel") {
+      const channel = inline;
+      if (!channel.channel_id) {
+        continue;
+      }
+      const node = {
+        type: CHANNEL_MENTION_NODE,
+        attrs: { channelId: channel.channel_id, name: null }
+      };
+      const marks = styleToMarks(channel.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 || "";
@@ -5551,13 +5624,26 @@ function proseMirrorInlinesToRichTextElements(nodes) {
         continue;
       }
       const user = { type: "user", user_id: userId };
-      const style2 = userStyle(node.marks ?? []);
+      const style2 = mentionStyle(node.marks ?? []);
       if (Object.keys(style2).length > 0) {
         user.style = style2;
       }
       out.push(user);
       continue;
     }
+    if (node.type === CHANNEL_MENTION_NODE) {
+      const channelId = String(node.attrs?.channelId ?? "");
+      if (!channelId) {
+        continue;
+      }
+      const channel = { type: "channel", channel_id: channelId };
+      const style2 = mentionStyle(node.marks ?? []);
+      if (Object.keys(style2).length > 0) {
+        channel.style = style2;
+      }
+      out.push(channel);
+      continue;
+    }
     if (node.type === "hardBreak") {
       out.push({ type: "text", text: "\n" });
       continue;
@@ -5612,10 +5698,10 @@ function marksToStyle(marks) {
   }
   return style;
 }
-function userStyle(marks) {
+function mentionStyle(marks) {
   const style = {};
   for (const [key, value] of Object.entries(marksToStyle(marks))) {
-    if (SUPPORTED_USER_STYLE_KEYS.has(key)) {
+    if (SUPPORTED_MENTION_STYLE_KEYS.has(key)) {
       style[key] = value;
     }
   }
@@ -5644,50 +5730,52 @@ function sameStyle(a, b) {
   }
   return ak.every((k, i) => k === bk[i]);
 }
-function EmojiNodeView({ node }) {
-  const { name, src, unicode } = node.attrs;
-  const label = `:${name}:`;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src,
-      alt: label,
-      style: {
-        display: "inline-block",
-        width: "1.25em",
-        height: "1.25em",
-        verticalAlign: "-0.25em",
-        objectFit: "contain"
-      }
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+function channelMentionLabel(attrs, getChannelName) {
+  return getChannelName?.(attrs.channelId) ?? attrs.name ?? attrs.channelId;
 }
-var EmojiNode = react.Node.create({
-  name: "emoji",
+function ChannelMentionNodeView({ node }) {
+  const mentions = useMentions();
+  const attrs = node.attrs;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.NodeViewWrapper, { as: "span", className: "bk-channel-mention", "data-channel-mention": attrs.channelId, children: [
+    "#",
+    channelMentionLabel(attrs, mentions?.getChannelName)
+  ] });
+}
+var ChannelMentionNode = react.Node.create({
+  name: CHANNEL_MENTION_NODE,
   group: "inline",
   inline: true,
   atom: true,
   selectable: true,
   addAttributes() {
     return {
-      name: { default: "" },
-      src: { default: null },
-      unicode: { default: null },
-      skinTone: { default: null }
+      channelId: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-channel-mention") ?? "",
+        renderHTML: (attributes) => ({ "data-channel-mention": attributes.channelId })
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-channel-name"),
+        renderHTML: (attributes) => attributes.name ? { "data-channel-name": attributes.name } : {}
+      }
     };
   },
   parseHTML() {
-    return [{ tag: "span[data-emoji]" }];
+    return [{ tag: "span[data-channel-mention]" }];
   },
-  renderHTML({ HTMLAttributes }) {
-    const name = HTMLAttributes.name ?? "";
-    return ["span", react.mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", react.mergeAttributes(HTMLAttributes), `#${channelMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `#${channelMentionLabel(node.attrs)}`;
   },
   addNodeView() {
-    return react.ReactNodeViewRenderer(EmojiNodeView);
+    return react.ReactNodeViewRenderer(ChannelMentionNodeView);
   }
 });
 var MENTION_SEARCH_DEBOUNCE_MS = 200;
+var USER_MENTION_SUGGESTION_PLUGIN_KEY = new state.PluginKey("userMentionSuggestion");
 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 }, [
@@ -5696,13 +5784,16 @@ function insertUserMention(editor, range, user) {
   ]).run();
 }
 function insertMentionTrigger(editor) {
+  insertSuggestionTrigger(editor, "@");
+}
+function insertSuggestionTrigger(editor, char) {
   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();
+  editor.chain().focus().insertContent(needsSpace ? ` ${char}` : char).run();
 }
 function dismissMentionSuggestion(editor) {
-  suggestion.exitSuggestion(editor.view);
+  suggestion.exitSuggestion(editor.view, USER_MENTION_SUGGESTION_PLUGIN_KEY);
 }
 var MentionSuggestion = react.Extension.create({
   name: "userMentionSuggestion",
@@ -5718,6 +5809,7 @@ var MentionSuggestion = react.Extension.create({
     return [
       suggestion.Suggestion({
         editor: this.editor,
+        pluginKey: USER_MENTION_SUGGESTION_PLUGIN_KEY,
         char: "@",
         debounce: MENTION_SEARCH_DEBOUNCE_MS,
         allow: () => isEnabled(),
@@ -5728,6 +5820,90 @@ var MentionSuggestion = react.Extension.create({
     ];
   }
 });
+
+// src/lib/tiptap-channel-suggestion.ts
+var CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY = new state.PluginKey("channelMentionSuggestion");
+function insertChannelMention(editor, range, channel) {
+  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: CHANNEL_MENTION_NODE, attrs: { channelId: channel.id, name: channel.name } },
+    { type: "text", text: " " }
+  ]).run();
+}
+function insertChannelTrigger(editor) {
+  insertSuggestionTrigger(editor, "#");
+}
+function dismissChannelSuggestion(editor) {
+  suggestion.exitSuggestion(editor.view, CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY);
+}
+var ChannelSuggestion = react.Extension.create({
+  name: "channelMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      suggestion.Suggestion({
+        editor: this.editor,
+        pluginKey: CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY,
+        char: "#",
+        debounce: MENTION_SEARCH_DEBOUNCE_MS,
+        allow: () => isEnabled(),
+        items: ({ query, signal }) => search(query, signal),
+        command: ({ editor, range, props }) => insertChannelMention(editor, range, props),
+        render
+      })
+    ];
+  }
+});
+function EmojiNodeView({ node }) {
+  const { name, src, unicode } = node.attrs;
+  const label = `:${name}:`;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: label,
+      style: {
+        display: "inline-block",
+        width: "1.25em",
+        height: "1.25em",
+        verticalAlign: "-0.25em",
+        objectFit: "contain"
+      }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+}
+var EmojiNode = react.Node.create({
+  name: "emoji",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      name: { default: "" },
+      src: { default: null },
+      unicode: { default: null },
+      skinTone: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-emoji]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const name = HTMLAttributes.name ?? "";
+    return ["span", react.mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(EmojiNodeView);
+  }
+});
 function userMentionLabel(attrs, getUserName) {
   return getUserName?.(attrs.userId) ?? attrs.name ?? attrs.userId;
 }
@@ -6063,6 +6239,7 @@ function nextMentionPickerState(props, prev) {
 }
 function MentionPicker({
   editor,
+  kind,
   state,
   keyHandlerRef,
   onDismiss
@@ -6075,6 +6252,27 @@ function MentionPicker({
     setActiveIndex(0);
   }
   const listRef = React.useRef(null);
+  const listboxId = React.useId();
+  const activeOptionId = items[activeIndex] ? `${listboxId}-${activeIndex}` : void 0;
+  React.useEffect(() => {
+    const root = editor.view.dom;
+    root.setAttribute("role", "combobox");
+    root.setAttribute("aria-autocomplete", "list");
+    root.setAttribute("aria-expanded", "true");
+    root.setAttribute("aria-controls", listboxId);
+    if (activeOptionId) {
+      root.setAttribute("aria-activedescendant", activeOptionId);
+    } else {
+      root.removeAttribute("aria-activedescendant");
+    }
+    return () => {
+      root.removeAttribute("role");
+      root.removeAttribute("aria-autocomplete");
+      root.removeAttribute("aria-expanded");
+      root.removeAttribute("aria-controls");
+      root.removeAttribute("aria-activedescendant");
+    };
+  }, [activeOptionId, editor, listboxId]);
   React.useEffect(() => {
     keyHandlerRef.current = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -6085,11 +6283,11 @@ function MentionPicker({
         return true;
       }
       if (event.key === "Enter" || event.key === "Tab") {
-        const user = items[activeIndex];
-        if (!user) {
+        const item = items[activeIndex];
+        if (!item) {
           return false;
         }
-        command(user);
+        command(item);
         return true;
       }
       return false;
@@ -6136,29 +6334,39 @@ function MentionPicker({
                 e.preventDefault();
               }
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, role: "listbox", "aria-label": "People to mention", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MentionAvatar, { user }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name })
-                  ]
-                },
-                user.id
-              )
-            )) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: listRef,
+                id: listboxId,
+                role: "listbox",
+                "aria-label": kind === "channel" ? "Channels to mention" : "People to mention",
+                children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: loading ? "Searching\u2026" : `No ${kind === "channel" ? "channels" : "people"} match that search.` }) : items.map((item, 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__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      id: `${listboxId}-${index}`,
+                      role: "option",
+                      "aria-selected": index === activeIndex,
+                      onPointerDown: (e) => e.preventDefault(),
+                      onClick: () => command(item),
+                      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: [
+                        kind === "channel" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hash, { className: "h-3.5 w-3.5" }) }) : /* @__PURE__ */ jsxRuntime.jsx(MentionAvatar, { user: item }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: kind === "channel" ? `#${item.name}` : item.name })
+                      ]
+                    },
+                    item.id
+                  )
+                ))
+              }
+            )
           }
         )
       ]
@@ -6755,7 +6963,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions(mentionSuggestion) {
+function buildRichTextExtensions(mentionSuggestion, channelSuggestion) {
   return [
     StarterKit__default.default.configure({
       heading: false,
@@ -6789,10 +6997,11 @@ function buildRichTextExtensions(mentionSuggestion) {
       shouldAutoLink: hasExplicitSafeScheme,
       HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
     }),
-    // Always registered, so mentions already in the content round-trip with
-    // or without the picker.
+    // Always registered, so mentions already in the content round-trip with or without pickers.
     UserMentionNode,
-    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : []
+    ChannelMentionNode,
+    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : [],
+    ...channelSuggestion ? [ChannelSuggestion.configure(channelSuggestion)] : []
   ];
 }
 function RichTextWysiwygEditor({ block, onChange }) {
@@ -6820,24 +7029,39 @@ function RichTextWysiwygEditor({ block, onChange }) {
     [onChange]
   );
   const mentions = useMentions();
-  const mentionsEnabled = mentions !== null;
+  const userMentionsEnabled = mentions !== null;
+  const channelMentionsEnabled = mentions?.searchChannels !== void 0;
   const mentionsRef = React.useRef(mentions);
   React.useEffect(() => {
     mentionsRef.current = mentions;
   }, [mentions]);
   const [mentionPicker, setMentionPicker] = React.useState(null);
   const mentionKeyHandlerRef = React.useRef(() => false);
+  const [channelPicker, setChannelPicker] = React.useState(null);
+  const channelKeyHandlerRef = React.useRef(() => false);
   const editor = react.useEditor({
-    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)
-      })
-    }),
+    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)
+        })
+      },
+      {
+        isEnabled: () => mentionsRef.current?.searchChannels !== void 0,
+        search: async (query, signal) => await mentionsRef.current?.searchChannels?.(query, { signal }) ?? [],
+        render: () => ({
+          onStart: (props) => setChannelPicker((prev) => nextMentionPickerState(props, prev)),
+          onUpdate: (props) => setChannelPicker((prev) => nextMentionPickerState(props, prev)),
+          onExit: () => setChannelPicker(null),
+          onKeyDown: ({ event }) => channelKeyHandlerRef.current(event)
+        })
+      }
+    ),
     enableInputRules: RICH_TEXT_INPUT_RULE_ALLOWLIST,
     content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
@@ -6872,7 +7096,8 @@ function RichTextWysiwygEditor({ block, onChange }) {
       Toolbar,
       {
         editor,
-        mention: mentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null
+        mention: userMentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null,
+        channel: channelMentionsEnabled ? { active: channelPicker !== null, insert: () => insertChannelTrigger(editor) } : null
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
@@ -6880,14 +7105,29 @@ function RichTextWysiwygEditor({ block, onChange }) {
       MentionPicker,
       {
         editor,
+        kind: "user",
         state: mentionPicker,
         keyHandlerRef: mentionKeyHandlerRef,
         onDismiss: () => dismissMentionSuggestion(editor)
       }
+    ),
+    channelPicker && /* @__PURE__ */ jsxRuntime.jsx(
+      MentionPicker,
+      {
+        editor,
+        kind: "channel",
+        state: channelPicker,
+        keyHandlerRef: channelKeyHandlerRef,
+        onDismiss: () => dismissChannelSuggestion(editor)
+      }
     )
   ] });
 }
-function Toolbar({ editor, mention }) {
+function Toolbar({
+  editor,
+  mention,
+  channel
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-0.5 rounded-md border bg-muted/30 p-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -6947,6 +7187,7 @@ function Toolbar({ editor, mention }) {
       }
     ),
     mention && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: lucideReact.AtSign }),
+    channel && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "Channel", active: channel.active, onClick: channel.insert, Icon: lucideReact.Hash }),
     /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -7810,6 +8051,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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label, help, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }),
+        Array.from({ length: columnCount }, (_, c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
+          renderColumnControl ? renderColumnControl(c) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 truncate px-1.5 text-[11px] text-muted-foreground", children: [
+            "Column ",
+            c + 1
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove column ${c + 1}`,
+              onClick: () => removeColumn(c),
+              disabled: columnCount <= 1,
+              className: REMOVE_BUTTON_CLASS,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }, c))
+      ] }),
+      rows.map((row, r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        lockFirstRow && r === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove row ${r + 1}`,
+            onClick: () => removeRow(r),
+            disabled: rows.length <= minRows,
+            className: REMOVE_BUTTON_CLASS,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+          }
+        ),
+        row.map((cell, c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= maxRows, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add row"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= maxColumns, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      leading,
+      input
+    ] }) : input,
+    cell.type === "rich_text" ? /* @__PURE__ */ jsxRuntime.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] = React.useState(String(value));
+  React.useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Caption", help: "Required. Names the table for screen readers.", htmlFor: "data-table-caption", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditorField,
+        {
+          label: "Rows per page",
+          help: "Optional, 1-100. Slack shows 5 when empty.",
+          htmlFor: "data-table-page-size",
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        EditorField,
+        {
+          label: "Row header column",
+          help: "The column that identifies each row for screen readers.",
+          htmlFor: "data-table-row-header",
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: c, children: text ? `Column ${c + 1}: ${text}` : `Column ${c + 1}` }, c);
+                }),
+                rowHeader >= header.length ? /* @__PURE__ */ jsxRuntime.jsxs("option", { value: rowHeader, children: [
+                  "Column ",
+                  rowHeader + 1,
+                  " (missing)"
+                ] }) : null
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataTableCellField, { cell, position, onChange: update })
+      }
+    )
+  ] });
+}
+function DataTableCellField({
+  cell,
+  position,
+  onChange
+}) {
+  const { row, col, label } = position;
+  if (cell.type === "action_cell") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.MousePointerClick, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: cellText(cell) || "Button" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NumberToggle, { label, pressed: true, onClick: () => onChange(toTextCell(cell)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            value: cell.value,
+            ariaLabel: `${label} value`,
+            onCommit: (value) => onChange({ ...cell, value }),
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NumberToggle, { label, pressed: false, onClick: () => onChange(toNumberCell(cell)) }) : /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+      onChange
+    }
+  );
+}
+function ToggleSpacer() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 shrink-0", "aria-hidden": "true" });
+}
+function NumberToggle({ label, pressed, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Hash, { className: "h-3 w-3" })
+    }
+  );
+}
 var CHART_TYPES = ["line", "bar", "area", "pie"];
 function isCartesian(chart) {
   return chart.type !== "pie";
@@ -7864,46 +8486,6 @@ function DataVisualizationEditor({ block, onChange }) {
     isCartesian(chart) ? /* @__PURE__ */ jsxRuntime.jsx(CartesianFields, { chart, onChange: setChart }) : /* @__PURE__ */ jsxRuntime.jsx(PieFields, { chart, onChange: setChart })
   ] });
 }
-function NumberInput({
-  id,
-  value,
-  onCommit,
-  ariaLabel,
-  className
-}) {
-  const [draft, setDraft] = React.useState(String(value));
-  React.useEffect(() => {
-    setDraft(String(value));
-  }, [value]);
-  return /* @__PURE__ */ jsxRuntime.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) ?? [];
@@ -9446,45 +10028,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 === "") {
@@ -9495,81 +10045,45 @@ function TableEditor({ block, onChange }) {
     }
     onChange({ ...block, column_settings: next });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Cells", help: "Up to 100 rows and 20 columns. Slack allows one table per message.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", children: "Default" }),
-                  ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a, children: a }, a))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
-              }
-            )
-          ] }, c);
-        })
-      ] }),
-      rows.map((row, r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
-          }
-        ),
-        row.map((cell, c) => {
-          const isRichText = cell.type === "rich_text";
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "Was rich-text; editing replaces with plain text." }) : null
-          ] }, c);
-        })
-      ] }, r))
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= 100, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-        " Add row"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= 20, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-        " Add column"
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", children: "Default" }),
+            ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a, children: a }, a))
+          ]
+        }
+      ),
+      renderCell: (cell, { row, col, label }, update) => /* @__PURE__ */ jsxRuntime.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 }) {
@@ -9910,6 +10424,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
     case "container":
       return /* @__PURE__ */ jsxRuntime.jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
+    case "data_table":
+      return /* @__PURE__ */ jsxRuntime.jsx(DataTableEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -9933,7 +10449,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,