@brainfish-ai/editor 0.16.1 → 0.16.3

package/dist/{index-o1kUBM0B.js → index-f6Jh9zCn.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$2 } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useRef, useState, useMemo, useContext, useCallback, useLayoutEffect, useEffect, useId, Suspense, lazy } from 'react';
+import React__default, { createContext, useRef, useState, useMemo, useContext, useCallback, useLayoutEffect, useEffect, useReducer, useId, Suspense, lazy } from 'react';
 import clsx from 'clsx';
 import { BrainfishColors } from '@brainfish-ai/components/colors';
 import * as Y from 'yjs';
@@ -8,7 +8,7 @@ import { UndoManager, Item as Item$1, ContentType, Text as Text$2, XmlElement, e
 import { flushSync, createPortal } from 'react-dom';
 import katex from 'katex';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { Plus, Trash, SquaresFour, Warning, Info, Star, ArrowSquareOut, File as File$1, MagicWand, YoutubeLogo, Browser, X, Video, Paperclip, DownloadSimple, TextHOne, TextHSix, TextHFive, TextHFour, TextHThree, TextHTwo, Highlighter, ListBullets, ListNumbers, Link as Link$1, Eye, CodeSimple } from '@phosphor-icons/react';
+import { Plus, Trash, SquaresFour, Warning, CaretLeft, CaretRight, ArrowSquareOut, Info, Star, File as File$1, MagicWand, YoutubeLogo, Browser, X, Video, Paperclip, DownloadSimple, TextHOne, TextHSix, TextHFive, TextHFour, TextHThree, TextHTwo, Highlighter, ListBullets, ListNumbers, Link as Link$1, Eye, CodeSimple } from '@phosphor-icons/react';
 import { Button } from '@brainfish-ai/components/ui/button';
 import { Input } from '@brainfish-ai/components/ui/input';
 import { ButtonGroup } from '@brainfish-ai/components/ui/button-group';
@@ -16,7 +16,7 @@ import { SimpleSelect } from '@brainfish-ai/components/select';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@brainfish-ai/components/ui/tooltip';
 import { Command, CommandInput, CommandList, CommandGroup, CommandItem } from '@brainfish-ai/components/ui/command';
 import { Popover, PopoverTrigger, PopoverContent } from '@brainfish-ai/components/ui/popover';
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@brainfish-ai/components/ui/card';
+import { Card, CardContent, CardFooter } from '@brainfish-ai/components/ui/card';
 import { Textarea } from '@brainfish-ai/components/ui/textarea';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@brainfish-ai/components/ui/tabs';
 
@@ -41745,9 +41745,11 @@ function configureMentionStringify(crepe) {
 }
 
 const emptyRef = { current: [] };
+const emptyFooterButtonClickRef = { current: void 0 };
 const MentionsRuntimeContext = createContext({
   providersRef: emptyRef,
-  providers: []
+  providers: [],
+  onFooterButtonClickRef: emptyFooterButtonClickRef
 });
 function useMentionsRuntime() {
   return useContext(MentionsRuntimeContext);
@@ -41858,6 +41860,7 @@ const MentionNodeView = () => {
         className: clsx(
           MENTION_PILL_CLASS,
           "inline-flex relative top-0.5 items-center gap-1 rounded-full px-2 py-0.5 h-6 text-sm font-medium align-baseline",
+          "max-w-64 min-w-0",
           { "bg-purple-800 text-purple-100 ring-purple-300": !invalid },
           { "bg-warning text-warning border border-warning ring-yellow-500": invalid },
           { "!ring-2": selected }
@@ -41878,8 +41881,8 @@ const MentionNodeView = () => {
           moveCaretOffMention(view, pos, node.nodeSize, event.key);
         },
         children: [
-          invalid ? /* @__PURE__ */ jsx(Warning, { size: 16, weight: "regular", "data-testid": "mention-pill-warning" }) : TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { size: 16, weight: "fill", "data-testid": "mention-pill-type-icon" }) : null,
-          parsed.label || parsed.type
+          invalid ? /* @__PURE__ */ jsx(Warning, { size: 16, weight: "regular", className: "shrink-0", "data-testid": "mention-pill-warning" }) : TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { size: 16, weight: "fill", className: "shrink-0", "data-testid": "mention-pill-type-icon" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", title: parsed.label || parsed.type, children: parsed.label || parsed.type })
         ]
       }
     ) }),
@@ -41917,6 +41920,30 @@ function configureMentionNodeView(ctx, nodeViewFactory) {
   ]);
 }
 
+const ALL_MENTION_GROUP = "all";
+function filterMentionSlashRows(rows, activeGroup) {
+  if (activeGroup === ALL_MENTION_GROUP) return rows;
+  return rows.filter((row) => row.groupLabel === activeGroup);
+}
+function resolveMentionSlashGroup(rows, activeGroup) {
+  if (activeGroup === ALL_MENTION_GROUP) return ALL_MENTION_GROUP;
+  return rows.some((row) => row.groupLabel === activeGroup) ? activeGroup : ALL_MENTION_GROUP;
+}
+function mentionSlashTabIds(rows) {
+  const labels = [ALL_MENTION_GROUP];
+  for (const row of rows) {
+    if (!labels.includes(row.groupLabel)) labels.push(row.groupLabel);
+  }
+  return labels;
+}
+function cycleMentionSlashGroup(tabIds, current, direction) {
+  if (!tabIds.length) return ALL_MENTION_GROUP;
+  const resolved = tabIds.includes(current) ? current : ALL_MENTION_GROUP;
+  const index = tabIds.indexOf(resolved);
+  const delta = direction === "next" ? 1 : -1;
+  return tabIds[(index + delta + tabIds.length) % tabIds.length] ?? ALL_MENTION_GROUP;
+}
+
 //#region src/slash-plugin.ts
 function slashFactory(id) {
 	const slashSpec = $ctx({}, `${id}_SLASH_SPEC`);
@@ -42712,7 +42739,10 @@ const mentionSlashApi = $ctx(
     isOpen: () => false,
     nav: () => {
     },
+    navGroup: () => {
+    },
     pick: () => false,
+    focusFooterButton: () => false,
     dismiss: () => {
     }
   },
@@ -42781,34 +42811,135 @@ function firstSlashMessage(providers, kind) {
   return null;
 }
 
+async function loadMentionSlashMenu(providers, query, signal) {
+  const decision = decideSlashFetch(providers);
+  if (decision.kind === "loading") return { type: "retry" };
+  if (decision.kind === "not-connected") {
+    return { type: "not-connected", content: firstSlashMessage(providers, "not-connected") };
+  }
+  try {
+    const settled = await Promise.allSettled(
+      decision.ready.map(async (provider) => {
+        const items = query ? await provider.search({ query, signal }) : await provider.list({ limit: 5, signal });
+        return items.map(
+          (item) => ({
+            ...item,
+            type: item.type || provider.type,
+            groupLabel: provider.groupLabel,
+            refAttr: provider.refAttr,
+            provider
+          })
+        );
+      })
+    );
+    if (signal.aborted) return { type: "retry" };
+    const outcome = decideSlashFetchResult(settled);
+    if (outcome === "error") {
+      return { type: "error", content: firstSlashMessage(providers, "error") };
+    }
+    return {
+      type: "loaded",
+      rows: settled.flatMap((result) => result.status === "fulfilled" ? result.value : []),
+      status: outcome
+    };
+  } catch (error) {
+    if (signal.aborted) return { type: "retry" };
+    if (error instanceof DOMException && error.name === "AbortError") return { type: "retry" };
+    return { type: "error", content: firstSlashMessage(providers, "error") };
+  }
+}
+
+const initialMentionSlashMenuState = {
+  open: false,
+  query: "",
+  status: "loading",
+  slashContent: null,
+  rows: [],
+  selectedIndex: 0,
+  activeGroup: ALL_MENTION_GROUP
+};
+function mentionSlashMenuReducer(state, action) {
+  switch (action.type) {
+    case "show": {
+      const queryChanged = state.query !== action.query;
+      if (state.open && !queryChanged) return state;
+      return {
+        ...state,
+        open: true,
+        query: action.query,
+        ...queryChanged ? {
+          activeGroup: ALL_MENTION_GROUP,
+          selectedIndex: 0,
+          status: "loading",
+          rows: [],
+          slashContent: null
+        } : {}
+      };
+    }
+    case "hide":
+      return initialMentionSlashMenuState;
+    case "loading":
+      return { ...state, status: "loading", slashContent: null, rows: [] };
+    case "not-connected":
+      return { ...state, status: "not-connected", slashContent: action.content, rows: [] };
+    case "error":
+      return { ...state, status: "error", slashContent: action.content, rows: [] };
+    case "loaded":
+      return {
+        ...state,
+        rows: action.rows,
+        status: action.status,
+        slashContent: null,
+        selectedIndex: 0,
+        activeGroup: resolveMentionSlashGroup(action.rows, state.activeGroup)
+      };
+    case "select":
+      return { ...state, selectedIndex: action.index };
+    case "setGroup":
+      return { ...state, activeGroup: action.group, selectedIndex: 0 };
+    case "nav": {
+      const visible = visibleMentionSlashRows(state);
+      if (!visible.length) return state;
+      const next = action.direction === "next" ? (state.selectedIndex + 1) % visible.length : (state.selectedIndex - 1 + visible.length) % visible.length;
+      return { ...state, selectedIndex: next };
+    }
+    case "navGroup":
+      return {
+        ...state,
+        activeGroup: cycleMentionSlashGroup(
+          mentionSlashTabIds(state.rows),
+          resolveMentionSlashGroup(state.rows, state.activeGroup),
+          action.direction
+        ),
+        selectedIndex: 0
+      };
+  }
+}
+function visibleMentionSlashRows(state) {
+  return filterMentionSlashRows(state.rows, resolveMentionSlashGroup(state.rows, state.activeGroup));
+}
+function resolvedMentionSlashGroup(state) {
+  return resolveMentionSlashGroup(state.rows, state.activeGroup);
+}
+
 const SEARCH_DEBOUNCE_MS = 200;
 const AVAILABILITY_RECHECK_MS = 200;
 function useMentionSlashMenu() {
   const { view } = usePluginViewContext();
   const { getInstance, loading } = useEditorAction();
-  const { providersRef } = useMentionsRuntime();
+  const { providersRef, onFooterButtonClickRef } = useMentionsRuntime();
   const contentRef = useRef(null);
+  const listRef = useRef(null);
   const providerRef = useRef(null);
   const viewRef = useRef(view);
   viewRef.current = view;
-  const listRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [status, setStatus] = useState("loading");
-  const [slashContent, setSlashContent] = useState(null);
-  const [rows, setRows] = useState([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [availabilityTick, setAvailabilityTick] = useState(0);
   const fromToRef = useRef({ from: 0, to: 0 });
-  const rowsRef = useRef(rows);
-  rowsRef.current = rows;
-  const selectedIndexRef = useRef(selectedIndex);
-  selectedIndexRef.current = selectedIndex;
-  const statusRef = useRef(status);
-  statusRef.current = status;
-  const openRef = useRef(open);
-  openRef.current = open;
   const hostRef = useRef(null);
+  const [state, dispatch] = useReducer(mentionSlashMenuReducer, initialMentionSlashMenuState);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const visibleRows = visibleMentionSlashRows(state);
+  const activeGroup = resolvedMentionSlashGroup(state);
   useLayoutEffect(() => {
     const el = contentRef.current;
     if (el?.parentElement && el.parentElement !== document.body) {
@@ -42823,10 +42954,11 @@ function useMentionSlashMenu() {
     };
   }, []);
   const pickRef = useRef(() => false);
-  pickRef.current = () => {
-    const row = rowsRef.current[selectedIndexRef.current];
+  pickRef.current = (index) => {
+    const current = stateRef.current;
+    const row = visibleMentionSlashRows(current)[index ?? current.selectedIndex];
     const editorView = viewRef.current;
-    if (statusRef.current !== "ready") return false;
+    if (current.status !== "ready") return false;
     if (!row || !editorView || !editorView.editable) return false;
     const inserted = insertMentionInView(editorView, fromToRef.current.from, fromToRef.current.to, row, row.provider);
     if (inserted) providerRef.current?.hide();
@@ -42842,141 +42974,187 @@ function useMentionSlashMenu() {
       root: document.body,
       floatingUIOptions: { strategy: "fixed" },
       shouldShow(editorView) {
+        if (contentRef.current?.contains(document.activeElement)) return true;
         if (!editorView.editable) return false;
         if (!providersRef.current.length) return false;
         const trigger = findMentionTrigger(editorView.state);
         if (!trigger) return false;
         fromToRef.current = { from: trigger.from, to: trigger.to };
-        queueMicrotask(() => {
-          setQuery(trigger.query);
-          setOpen(true);
-        });
+        queueMicrotask(() => dispatch({ type: "show", query: trigger.query }));
         return true;
       }
     });
     slashProvider.onHide = () => {
-      queueMicrotask(() => {
-        setOpen(false);
-        setRows([]);
-        setSlashContent(null);
-        setStatus("loading");
-      });
+      queueMicrotask(() => dispatch({ type: "hide" }));
     };
     providerRef.current = slashProvider;
     const onNativeMouseDown = (event) => {
       if (!viewRef.current?.editable) return;
-      const option = event.target instanceof Element ? event.target.closest("[data-mention-option-index]") : null;
+      const target = event.target instanceof Element ? event.target : null;
+      const tabNav = target?.closest("[data-mention-tab-nav]");
+      if (tabNav) {
+        event.preventDefault();
+        event.stopPropagation();
+        const direction = tabNav.getAttribute("data-mention-tab-nav");
+        if (direction === "next" || direction === "prev") dispatch({ type: "navGroup", direction });
+        return;
+      }
+      const tab = target?.closest("[data-mention-group]");
+      if (tab) {
+        event.preventDefault();
+        event.stopPropagation();
+        const group = tab.getAttribute("data-mention-group");
+        if (group) dispatch({ type: "setGroup", group });
+        return;
+      }
+      const option = target?.closest("[data-mention-option-index]");
       if (!option) return;
       event.preventDefault();
       event.stopPropagation();
       const index = Number(option.getAttribute("data-mention-option-index"));
       if (!Number.isFinite(index)) return;
-      selectedIndexRef.current = index;
-      setSelectedIndex(index);
-      pickRef.current();
+      dispatch({ type: "select", index });
+      pickRef.current(index);
+    };
+    const onNativeKeyDown = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target?.closest('[data-testid="mention-slash-footer-button"]')) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        viewRef.current?.focus();
+        providerRef.current?.hide();
+        return;
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        viewRef.current?.focus();
+      }
+    };
+    const onNativeClick = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target?.closest('[data-testid="mention-slash-footer-button"]')) return;
+      onFooterButtonClickRef.current?.();
     };
     content.addEventListener("mousedown", onNativeMouseDown);
+    content.addEventListener("keydown", onNativeKeyDown);
+    content.addEventListener("click", onNativeClick);
     return () => {
       content.removeEventListener("mousedown", onNativeMouseDown);
+      content.removeEventListener("keydown", onNativeKeyDown);
+      content.removeEventListener("click", onNativeClick);
       slashProvider.destroy();
       providerRef.current = null;
     };
-  }, [view, providersRef]);
+  }, [view, providersRef, onFooterButtonClickRef]);
+  const prevEditorStateRef = useRef(void 0);
   useEffect(() => {
     if (!view || !providerRef.current) return;
-    providerRef.current.update(view);
+    providerRef.current.update(view, prevEditorStateRef.current);
+    prevEditorStateRef.current = view.state;
   });
   useEffect(() => {
-    if (!open) return;
+    if (!state.open) return;
     const abort = new AbortController();
     let recheckTimer;
-    const run = debounce(async () => {
-      const providers = providersRef.current;
-      const decision = decideSlashFetch(providers);
-      if (decision.kind === "loading") {
-        setRows([]);
-        setSlashContent(null);
-        setStatus("loading");
-        recheckTimer = setTimeout(() => setAvailabilityTick((tick) => tick + 1), AVAILABILITY_RECHECK_MS);
-        return;
-      }
-      if (decision.kind === "not-connected") {
-        setRows([]);
-        setSlashContent(firstSlashMessage(providers, "not-connected"));
-        setStatus("not-connected");
+    const load = async () => {
+      const result = await loadMentionSlashMenu(providersRef.current, state.query, abort.signal);
+      if (abort.signal.aborted) return;
+      if (result.type === "retry") {
+        dispatch({ type: "loading" });
+        recheckTimer = setTimeout(() => {
+          void load();
+        }, AVAILABILITY_RECHECK_MS);
         return;
       }
-      setSlashContent(null);
-      setStatus("loading");
-      try {
-        const settled = await Promise.allSettled(
-          decision.ready.map(async (provider) => {
-            const items = query ? await provider.search({ query, signal: abort.signal }) : await provider.list({ limit: 5, signal: abort.signal });
-            return items.map((item) => ({
-              ...item,
-              type: item.type || provider.type,
-              groupLabel: provider.groupLabel,
-              refAttr: provider.refAttr,
-              provider
-            }));
-          })
-        );
-        if (abort.signal.aborted) return;
-        const outcome = decideSlashFetchResult(settled);
-        if (outcome === "error") {
-          setRows([]);
-          setSlashContent(firstSlashMessage(providers, "error"));
-          setStatus("error");
-          return;
-        }
-        const next = settled.flatMap((result) => result.status === "fulfilled" ? result.value : []);
-        setRows(next);
-        setSelectedIndex(0);
-        setSlashContent(null);
-        setStatus(outcome);
-      } catch (error) {
-        if (abort.signal.aborted) return;
-        if (error instanceof DOMException && error.name === "AbortError") return;
-        setRows([]);
-        setSlashContent(firstSlashMessage(providersRef.current, "error"));
-        setStatus("error");
-      }
-    }, SEARCH_DEBOUNCE_MS);
+      dispatch(result);
+    };
+    const run = debounce(load, SEARCH_DEBOUNCE_MS);
     void run();
     return () => {
       abort.abort();
       run.cancel();
       clearTimeout(recheckTimer);
     };
-  }, [open, query, providersRef, availabilityTick]);
+  }, [state.open, state.query, providersRef]);
   useEffect(() => {
     const ctx = getInstance()?.ctx;
     if (!ctx) return;
     ctx.set(mentionSlashApi.key, {
-      isOpen: () => openRef.current,
-      nav: (direction) => {
-        const items = rowsRef.current;
-        if (!items.length) return;
-        setSelectedIndex((index) => direction === "next" ? (index + 1) % items.length : (index - 1 + items.length) % items.length);
-      },
+      isOpen: () => stateRef.current.open,
+      nav: (direction) => dispatch({ type: "nav", direction }),
+      navGroup: (direction) => dispatch({ type: "navGroup", direction }),
       pick: () => pickRef.current(),
+      focusFooterButton: () => {
+        const button = contentRef.current?.querySelector('[data-testid="mention-slash-footer-button"]');
+        if (!button) return false;
+        button.focus({ focusVisible: true });
+        return true;
+      },
       dismiss: () => providerRef.current?.hide()
     });
   }, [getInstance, loading]);
   useLayoutEffect(() => {
     listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
-  return { contentRef, listRef, open, query, status, slashContent, rows, selectedIndex };
+  }, [state.selectedIndex]);
+  return {
+    contentRef,
+    listRef,
+    open: state.open,
+    query: state.query,
+    status: state.status,
+    slashContent: state.slashContent,
+    rows: state.rows,
+    visibleRows,
+    selectedIndex: state.selectedIndex,
+    activeGroup,
+    setActiveGroup: (group) => dispatch({ type: "setGroup", group })
+  };
 }
 
 const MentionSlashView = () => {
-  const { contentRef, listRef, open, query, status, slashContent, rows, selectedIndex } = useMentionSlashMenu();
-  const grouped = groupRows(rows);
-  const activeId = rows[selectedIndex] ? `bf-mention-opt-${selectedIndex}` : void 0;
-  const selectedRow = rows[selectedIndex];
-  const activeGroup = grouped.find((group) => selectedRow != null && group.rows.includes(selectedRow));
-  const activeGroupIndex = activeGroup && selectedRow ? activeGroup.rows.indexOf(selectedRow) : 0;
-  const activeGroupCount = activeGroup?.rows.length ?? 0;
+  const { footerButtonLabel } = useMentionsRuntime();
+  const {
+    contentRef,
+    listRef,
+    open,
+    query,
+    status,
+    slashContent,
+    rows,
+    visibleRows,
+    selectedIndex,
+    activeGroup,
+    setActiveGroup
+  } = useMentionSlashMenu();
+  const grouped = groupRows(visibleRows);
+  const tabGroups = groupRows(rows);
+  const activeId = visibleRows[selectedIndex] ? `bf-mention-opt-${selectedIndex}` : void 0;
+  const tabsRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const measureTabs = useCallback(() => {
+    const node = tabsRef.current;
+    if (!node) return;
+    setCanScrollLeft(node.scrollLeft > 1);
+    setCanScrollRight(node.scrollLeft + node.clientWidth < node.scrollWidth - 1);
+  }, []);
+  useLayoutEffect(() => {
+    const node = tabsRef.current;
+    if (!node) return;
+    measureTabs();
+    const observer = new ResizeObserver(measureTabs);
+    observer.observe(node);
+    node.addEventListener("scroll", measureTabs, { passive: true });
+    return () => {
+      observer.disconnect();
+      node.removeEventListener("scroll", measureTabs);
+    };
+  }, [tabGroups, open, status, measureTabs]);
+  useLayoutEffect(() => {
+    const tab = tabsRef.current?.querySelector(`[data-mention-group="${CSS.escape(activeGroup)}"]`);
+    tab?.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
+  }, [activeGroup]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -42991,26 +43169,78 @@ const MentionSlashView = () => {
           role: "listbox",
           "aria-label": "Mentions",
           "aria-activedescendant": activeId,
-          className: "text-xs p-1.5 w-96",
+          className: "text-xs p-1.5 w-80 max-w-full min-w-0 overflow-hidden",
           children: [
             status === "loading" && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-muted-foreground", children: "Loading…" }),
             (status === "error" || status === "not-connected") && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-muted-foreground", children: slashContent }),
-            status === "empty" && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-muted-foreground", children: "No matches" }),
+            status === "empty" && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-muted-foreground", children: query.trim() ? "No matches" : "No mentions yet" }),
             status === "ready" && /* @__PURE__ */ jsxs(Fragment$2, { children: [
-              /* @__PURE__ */ jsx(CardHeader, { className: "p-2 pt-1.5", children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "uppercase", children: activeGroup?.label }),
-                query ? /* @__PURE__ */ jsxs("span", { "data-testid": "mention-slash-counter", children: [
-                  activeGroupIndex + 1,
-                  " of ",
-                  activeGroupCount
+              /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 max-w-full overflow-hidden border-b border-border", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: tabsRef,
+                    className: "flex w-full min-w-0 flex-nowrap overflow-x-auto overflow-y-hidden scroll-smooth [scrollbar-width:none]",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        GroupTab,
+                        {
+                          groupId: ALL_MENTION_GROUP,
+                          label: "All",
+                          count: rows.length,
+                          selected: activeGroup === ALL_MENTION_GROUP,
+                          onSelect: () => setActiveGroup(ALL_MENTION_GROUP)
+                        }
+                      ),
+                      tabGroups.map((group) => /* @__PURE__ */ jsx(
+                        GroupTab,
+                        {
+                          groupId: group.label,
+                          label: group.label,
+                          count: group.rows.length,
+                          selected: activeGroup === group.label,
+                          onSelect: () => setActiveGroup(group.label)
+                        },
+                        group.label
+                      ))
+                    ]
+                  }
+                ),
+                canScrollLeft ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-card to-transparent" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Previous mention group",
+                      "data-mention-tab-nav": "prev",
+                      className: "absolute inset-y-0 left-0 z-10 px-0.5 text-muted-foreground",
+                      onMouseDown: (event) => event.preventDefault(),
+                      children: /* @__PURE__ */ jsx(CaretLeft, { size: 14 })
+                    }
+                  )
+                ] }) : null,
+                canScrollRight ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-card to-transparent" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Next mention group",
+                      "data-mention-tab-nav": "next",
+                      className: "absolute inset-y-0 right-0 z-10 px-0.5 text-muted-foreground",
+                      onMouseDown: (event) => event.preventDefault(),
+                      children: /* @__PURE__ */ jsx(CaretRight, { size: 14 })
+                    }
+                  )
                 ] }) : null
-              ] }) }),
+              ] }),
               /* @__PURE__ */ jsx(CardContent, { className: "p-0 max-h-72 overflow-y-auto", children: grouped.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
-                grouped.length > 1 && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: group.label }),
+                activeGroup === ALL_MENTION_GROUP && grouped.length > 1 && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-muted-foreground truncate", title: group.label, children: group.label }),
                 group.rows.map((row) => {
-                  const index = rows.indexOf(row);
+                  const index = visibleRows.indexOf(row);
                   const selected = index === selectedIndex;
-                  const TypeIcon = row.provider.typeIcon;
+                  const TypeIcon = row.icon ?? row.provider.typeIcon;
                   return /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -43019,25 +43249,37 @@ const MentionSlashView = () => {
                       "aria-selected": selected,
                       "data-selected": selected ? "true" : void 0,
                       "data-mention-option-index": index,
-                      className: `cursor-pointer grid grid-cols-[24px_minmax(0,1fr)_auto] gap-[2px_8px] items-center p-2 ${selected ? "bg-dark-200" : ""}`,
+                      className: `cursor-pointer flex min-w-0 items-center gap-2 p-2 ${selected ? "bg-dark-200" : ""}`,
                       children: [
+                        /* @__PURE__ */ jsx(TypeIcon, { size: 16, weight: "fill", className: "shrink-0 text-subtle" }),
                         /* @__PURE__ */ jsx(
                           "span",
                           {
-                            className: `size-6 rounded-md grid place-items-center bg-purple-800 text-purple-100 ${row.description ? "row-span-2" : ""}`,
-                            children: /* @__PURE__ */ jsx(TypeIcon, { size: 12, weight: "fill" })
+                            className: "min-w-0 flex-1 font-semibold text-sm overflow-hidden text-ellipsis whitespace-nowrap",
+                            title: row.label,
+                            children: row.label
                           }
-                        ),
-                        /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm overflow-hidden text-ellipsis whitespace-nowrap", children: row.label }),
-                        /* @__PURE__ */ jsx("span", { className: "text-xs text-subtlest whitespace-nowrap tabular-nums", children: row.inputCount ? `${row.inputCount} inputs` : null }),
-                        row.description ? /* @__PURE__ */ jsx("span", { className: "col-start-2 col-span-2 text-xs text-subtlest overflow-hidden text-ellipsis whitespace-nowrap", children: row.description }) : null
+                        )
                       ]
                     },
                     `${row.type}-${row.id}-${index}`
                   );
                 })
               ] }, `${group.label}-${groupIndex}`)) }),
-              /* @__PURE__ */ jsx(CardFooter, { className: "p-2 pb-1 border-t border-border", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-subtlest", children: "↑↓ to move · Enter to insert · Esc to close" }) })
+              /* @__PURE__ */ jsx(CardFooter, { className: "p-2 pb-1 border-t border-border min-w-0", children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "link",
+                  size: "sm",
+                  className: "h-auto max-w-full min-w-0 p-0 text-lime-700 font-normal whitespace-nowrap",
+                  "data-testid": "mention-slash-footer-button",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: footerButtonLabel ?? "Create a workflow" }),
+                    /* @__PURE__ */ jsx(ArrowSquareOut, { size: 14, className: "shrink-0" })
+                  ]
+                }
+              ) })
             ] })
           ]
         }
@@ -43045,6 +43287,33 @@ const MentionSlashView = () => {
     }
   );
 };
+function GroupTab({
+  groupId,
+  label,
+  count,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": selected,
+      "data-mention-group": groupId,
+      "data-testid": `mention-slash-tab-${label}`,
+      title: label,
+      className: `relative shrink-0 scroll-mx-8 px-2 py-1.5 text-sm whitespace-nowrap flex items-center gap-1 ${selected ? "text-foreground font-semibold" : "text-subtlest"}`,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: onSelect,
+      children: [
+        label,
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-subtlest px-1.5 rounded-full bg-dark-200 text-xs tabular-nums shrink-0", children: count }),
+        selected ? /* @__PURE__ */ jsx("span", { className: "absolute inset-x-2 bottom-0 h-0.5 rounded-sm bg-foreground" }) : null
+      ]
+    }
+  );
+}
 function groupRows(rows) {
   const groups = [];
   for (const row of rows) {
@@ -43072,11 +43341,22 @@ function mentionSlashKeydown(ctx) {
         event.preventDefault();
         api.nav("prev");
         return true;
+      case "ArrowRight":
+        event.preventDefault();
+        api.navGroup("next");
+        return true;
+      case "ArrowLeft":
+        event.preventDefault();
+        api.navGroup("prev");
+        return true;
       case "Enter":
-      case "Tab":
         event.preventDefault();
         api.pick();
         return true;
+      case "Tab":
+        event.preventDefault();
+        if (!event.shiftKey) api.focusFooterButton();
+        return true;
       case "Escape":
         event.preventDefault();
         api.dismiss();
@@ -43135,7 +43415,11 @@ const getThemeFromHtml = () => {
   return getSystemTheme();
 };
 const useEditorTheme = (theme = "system") => {
-  const [resolvedTheme, setResolvedTheme] = useState(theme === "system" ? "light" : theme);
+  const [resolvedTheme, setResolvedTheme] = useState(() => {
+    if (theme !== "system") return theme;
+    if (typeof document === "undefined") return "light";
+    return getThemeFromHtml();
+  });
   useEffect(() => {
     if (theme !== "system") {
       setResolvedTheme(theme);
@@ -70109,7 +70393,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql(dialectName) {
-    return import('./index-DPERyOhC.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-hvx6Ru78.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -70120,7 +70404,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-DLaMyc-O.js').then(m => m.cpp());
+            return import('./index-Byx5Rin8.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70128,7 +70412,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-DLaMyc-O.js').then(m => m.cpp());
+            return import('./index-Byx5Rin8.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70141,14 +70425,14 @@ const languages = [
         name: "CSS",
         extensions: ["css"],
         load() {
-            return import('./index-TzlF4I2U.js').then(m => m.css());
+            return import('./index-D_WC_iU-.js').then(m => m.css());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-BoGCS5K8.js').then(m => m.go());
+            return import('./index-DHS4fqlV.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70156,14 +70440,14 @@ const languages = [
         alias: ["xhtml"],
         extensions: ["html", "htm", "handlebars", "hbs"],
         load() {
-            return import('./index-DO4yrIc-.js').then(m => m.html());
+            return import('./index-wnkG3YUJ.js').then(m => m.html());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-DaEJooLf.js').then(m => m.java());
+            return import('./index-CHiJxeZP.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70171,14 +70455,14 @@ const languages = [
         alias: ["ecmascript", "js", "node"],
         extensions: ["js", "mjs", "cjs"],
         load() {
-            return import('./index-CkC8SVWG.js').then(m => m.javascript());
+            return import('./index-xzCgWTs0.js').then(m => m.javascript());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Jinja",
         extensions: ["j2", "jinja", "jinja2"],
         load() {
-            return import('./index-D2xHwKn1.js').then(m => m.jinja());
+            return import('./index-BgpucQu9.js').then(m => m.jinja());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70186,28 +70470,28 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-Pbdt_JAa.js').then(m => m.json());
+            return import('./index-DysiDhtD.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "JSX",
         extensions: ["jsx"],
         load() {
-            return import('./index-CkC8SVWG.js').then(m => m.javascript({ jsx: true }));
+            return import('./index-xzCgWTs0.js').then(m => m.javascript({ jsx: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-DmshtaDi.js').then(m => m.less());
+            return import('./index-DgawIQVL.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-yGP3q8Ph.js').then(m => m.liquid());
+            return import('./index-CZ_tRMOP.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70218,7 +70502,7 @@ const languages = [
         name: "Markdown",
         extensions: ["md", "markdown", "mkd"],
         load() {
-            return import('./index-ugK_d0Eb.js').then(m => m.markdown());
+            return import('./index-CgxTSc3A.js').then(m => m.markdown());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70233,7 +70517,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-3kIhnnQF.js').then(m => m.php());
+            return import('./index-DC8dl4wM.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70250,28 +70534,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-dd3JkZcJ.js').then(m => m.python());
+            return import('./index-nC_e7r57.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-D1lvHOEq.js').then(m => m.rust());
+            return import('./index-BCU5wvMA.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-DnIbufdg.js').then(m => m.sass({ indented: true }));
+            return import('./index-ioAG3mIK.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-DnIbufdg.js').then(m => m.sass());
+            return import('./index-ioAG3mIK.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70287,7 +70571,7 @@ const languages = [
         name: "TSX",
         extensions: ["tsx"],
         load() {
-            return import('./index-CkC8SVWG.js').then(m => m.javascript({ jsx: true, typescript: true }));
+            return import('./index-xzCgWTs0.js').then(m => m.javascript({ jsx: true, typescript: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70295,14 +70579,14 @@ const languages = [
         alias: ["ts"],
         extensions: ["ts", "mts", "cts"],
         load() {
-            return import('./index-CkC8SVWG.js').then(m => m.javascript({ typescript: true }));
+            return import('./index-xzCgWTs0.js').then(m => m.javascript({ typescript: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-B3Tj0aeA.js').then(m => m.wast());
+            return import('./index-BrHQTa5O.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70310,7 +70594,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-mjlRw27L.js').then(m => m.xml());
+            return import('./index-wcyxRMSc.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -70318,7 +70602,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-DQl-jPCB.js').then(m => m.yaml());
+            return import('./index-CSYZYQcP.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -71107,13 +71391,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-DcHkonsK.js').then(m => m.vue());
+            return import('./index-D3qfXl4a.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-DC7kmwxC.js').then(m => m.angular());
+            return import('./index-FrO1JgY0.js').then(m => m.angular());
         }
     })
 ];
@@ -110760,6 +111044,38 @@ const createVitesseLightTheme = (options = {}) => {
 };
 const vitesseLight = createVitesseLightTheme();
 
+const themeCompartment = new Compartment();
+const appliedTheme = /* @__PURE__ */ new WeakMap();
+const themeExtension = (theme) => theme === "dark" ? oneDark : vitesseLight;
+const applyTheme = (view, theme) => {
+  if (appliedTheme.get(view) === theme) return;
+  appliedTheme.set(view, theme);
+  view.dispatch({ effects: themeCompartment.reconfigure(themeExtension(theme)) });
+};
+const codeMirrorThemeConfig = (themeRef) => ({
+  theme: themeCompartment.of(themeExtension(themeRef.current)),
+  extensions: [
+    ViewPlugin.fromClass(
+      class {
+        constructor(view) {
+          queueMicrotask(() => {
+            if (!view.dom.isConnected) return;
+            applyTheme(view, themeRef.current);
+          });
+        }
+      }
+    )
+  ]
+});
+const syncCodeMirrorTheme = (root, theme) => {
+  root.querySelectorAll(".cm-editor").forEach((node) => {
+    if (!(node instanceof HTMLElement)) return;
+    const view = EditorView.findFromDOM(node);
+    if (!view) return;
+    applyTheme(view, theme);
+  });
+};
+
 var DateType = /* @__PURE__ */ ((DateType2) => {
   DateType2["DATE"] = "date";
   DateType2["TIME"] = "time";
@@ -117237,9 +117553,7 @@ function buildCrepe({
           }
         }
       },
-      [Crepe.Feature.CodeMirror]: {
-        theme: resolvedThemeRef.current === "dark" ? oneDark : vitesseLight
-      },
+      [Crepe.Feature.CodeMirror]: codeMirrorThemeConfig(resolvedThemeRef),
       ...placeholder ? { [Crepe.Feature.Placeholder]: { text: placeholder, mode: "doc" } } : {}
     }
   });
@@ -124285,7 +124599,7 @@ function useSlashMenuPortal(container) {
 }
 
 const ReviewSuggestionsViewport = lazy(
-  () => import('./index-BgzDJCPK.js').then((module) => ({ default: module.ReviewSuggestionsViewport }))
+  () => import('./index-QwNEKxue.js').then((module) => ({ default: module.ReviewSuggestionsViewport }))
 );
 const MilkdownEditorInner = ({
   readOnly = false,
@@ -124482,6 +124796,10 @@ const MilkdownEditorInner = ({
     [editorReadyRef]
   );
   useSlashMenuPortal(editorHost);
+  useEffect(() => {
+    if (!editorHost) return;
+    syncCodeMirrorTheme(editorHost, resolvedTheme);
+  }, [editorHost, resolvedTheme]);
   if (!reviewSuggestionsLoader && !hasReviewSuggestions) {
     return /* @__PURE__ */ jsx("div", { ref: containerRef, className, "data-testid": "brainfish-editor", children: /* @__PURE__ */ jsx(Milkdown, {}) });
   }
@@ -124505,7 +124823,18 @@ const MilkdownEditor = (props) => {
   const mentions = props.mentions ?? [];
   const mentionsRef = useRef(mentions);
   mentionsRef.current = mentions;
-  const mentionsRuntime = useMemo(() => ({ providersRef: mentionsRef, providers: mentions }), [mentions]);
+  const onFooterButtonClickRef = useRef(props.footerButton?.onClick);
+  onFooterButtonClickRef.current = props.footerButton?.onClick;
+  const footerButtonLabel = props.footerButton?.label;
+  const mentionsRuntime = useMemo(
+    () => ({
+      providersRef: mentionsRef,
+      providers: mentions,
+      onFooterButtonClickRef,
+      footerButtonLabel
+    }),
+    [mentions, footerButtonLabel]
+  );
   return /* @__PURE__ */ jsx(
     VariableContentChannelsContext.Provider,
     {
@@ -124614,7 +124943,8 @@ const MarkdownSourceEditor = React.forwardRef(
     onChange,
     slashMenu = "basic",
     toolbar = "basic",
-    mentions
+    mentions,
+    footerButton
   }, ref) {
     const [mode, setMode] = React.useState("markdown");
     const [markdown, setMarkdown] = React.useState(initialMarkdown);
@@ -124682,6 +125012,7 @@ const MarkdownSourceEditor = React.forwardRef(
           toolbar,
           placeholder,
           mentions,
+          footerButton,
           onContentChange: handleEditorChange
         },
         editorKey