composeai 0.1.5 → 0.1.8

package/dist/index.js

@@ -1,7 +1,7 @@
-import { createContext, forwardRef, useMemo, useState, useRef, useCallback, useEffect, useContext, useLayoutEffect, useId, isValidElement, cloneElement } from 'react';
+import { createContext, forwardRef, useMemo, useState, useRef, useCallback, useEffect, useContext, useId, isValidElement, cloneElement, useLayoutEffect } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { ParagraphNode, $getRoot, $createParagraphNode, ElementNode, $createTextNode, TextNode, addClassNamesToElement, $isElementNode, $isTextNode, $isParagraphNode, KEY_ENTER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, PASTE_COMMAND, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, KEY_ESCAPE_COMMAND, $applyNodeReplacement, $isLineBreakNode } from 'lexical';
+import { ParagraphNode, $getRoot, $createParagraphNode, ElementNode, $createTextNode, TextNode, addClassNamesToElement, $isElementNode, $isTextNode, $isParagraphNode, $getSelection, $isRangeSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, PASTE_COMMAND, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, KEY_ESCAPE_COMMAND, $applyNodeReplacement, $isLineBreakNode } from 'lexical';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
@@ -393,6 +393,13 @@ var IconAttach = makeIcon(
     /* @__PURE__ */ jsx("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486" })
   ] })
 );
+var IconPlus = makeIcon(
+  "IconPlus",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+  ] })
+);
 var IconImage = makeIcon(
   "IconImage",
   /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -481,6 +488,7 @@ var DEFAULT_ICONS = {
   send: IconSend,
   stop: IconStop,
   attach: IconAttach,
+  plus: IconPlus,
   image: IconImage,
   voice: IconVoice,
   voiceRecording: IconVoiceRecording,
@@ -506,6 +514,8 @@ var DEFAULT_FEATURES = {
   voice: true,
   mermaid: true,
   web: true,
+  // No consumer-defined actions by default.
+  custom: [],
   // Off by default — ghost autocomplete is an opt-in input affordance that
   // only makes sense when the consumer has a curated list of completions.
   ghostedAutoComplete: false
@@ -537,6 +547,7 @@ function normalizeFeatures(features) {
     voice: features.voice ?? DEFAULT_FEATURES.voice,
     mermaid: features.mermaid ?? DEFAULT_FEATURES.mermaid,
     web: features.web ?? DEFAULT_FEATURES.web,
+    custom: features.custom ?? DEFAULT_FEATURES.custom,
     ghostedAutoComplete: features.ghostedAutoComplete ?? DEFAULT_FEATURES.ghostedAutoComplete
   };
 }
@@ -552,6 +563,7 @@ function ComposerProvider({
   closeMenusOnOutsideClick = true,
   attachmentOptions,
   mode = "markdown",
+  variant = "compact",
   multiline = true,
   submitOnEnter = true,
   smartNewline = true,
@@ -730,6 +742,7 @@ function ComposerProvider({
       attachmentOptions: normalizedAttachmentOptions,
       markdownMode,
       mode,
+      variant,
       multiline,
       submitOnEnter,
       smartNewline,
@@ -762,6 +775,7 @@ function ComposerProvider({
       normalizedAttachmentOptions,
       markdownMode,
       mode,
+      variant,
       multiline,
       submitOnEnter,
       smartNewline,
@@ -786,8 +800,11 @@ function useComposerContext() {
 }
 function EditorShell({
   placeholder,
+  animated,
   mode,
+  variant,
   multiline,
+  expanded,
   header,
   toolbar,
   sendButton,
@@ -795,11 +812,18 @@ function EditorShell({
 }) {
   const { classNames, sx, dir } = useComposerContext();
   const isMarkdown = mode === "markdown";
-  const editorClass = multiline ? "composer-editor composer-editor--multiline" : "composer-editor composer-editor--inline";
+  const isCompact = variant === "compact";
+  const compactInline = isCompact && !expanded;
+  const fillEditor = compactInline || !isCompact && !multiline;
+  const editorClass = isCompact ? "composer-editor composer-editor--compact" : multiline ? "composer-editor composer-editor--multiline" : "composer-editor composer-editor--inline";
   const editor = slotProps("editor", editorClass, classNames, sx);
   const editorResolved = resolveSx(sx?.editor);
   const placeholderBase = mirrorEditorPadding(editorResolved);
-  const placeholderClass = multiline ? "composer-placeholder composer-placeholder--multiline" : "composer-placeholder composer-placeholder--inline";
+  const placeholderClass = cn(
+    isCompact ? "composer-placeholder composer-placeholder--compact" : multiline ? "composer-placeholder composer-placeholder--multiline" : "composer-placeholder composer-placeholder--inline",
+    // Adds the blinking caret after the typewriter text.
+    animated && "composer-placeholder--animated"
+  );
   const placeholderProps = slotProps(
     "placeholder",
     placeholderClass,
@@ -814,8 +838,9 @@ function EditorShell({
     {
       className: cn(
         "composer-editor-block",
-        // Inline: the editor block is the flex child that fills the row.
-        !multiline && "composer-editor-block--inline"
+        // Inline + compact: the editor block is the flex child that fills the
+        // row between the leading actions and the trailing send cluster.
+        fillEditor && "composer-editor-block--inline"
       ),
       children: isMarkdown ? /* @__PURE__ */ jsx(
         RichTextPlugin,
@@ -834,6 +859,32 @@ function EditorShell({
       )
     }
   );
+  if (isCompact) {
+    const actions = toolbar && /* @__PURE__ */ jsx("div", { className: "composer-compact-actions", children: toolbar });
+    const sendCluster = sendButton && /* @__PURE__ */ jsx("div", { className: "composer-compact-send", children: sendButton });
+    if (expanded) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        header,
+        editorBlock,
+        (actions || sendCluster) && /* @__PURE__ */ jsxs("div", { className: "composer-compact-footer", children: [
+          actions ?? /* @__PURE__ */ jsx("span", {}),
+          sendCluster
+        ] }),
+        /* @__PURE__ */ jsx(HistoryPlugin, {}),
+        footer
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      header,
+      /* @__PURE__ */ jsxs("div", { className: "composer-compact-row", children: [
+        actions,
+        editorBlock,
+        sendCluster
+      ] }),
+      /* @__PURE__ */ jsx(HistoryPlugin, {}),
+      footer
+    ] });
+  }
   if (!multiline) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       header,
@@ -1224,6 +1275,63 @@ function $createLinkTextNode(text = "", url = "") {
 function $isLinkTextNode(node) {
   return node instanceof LinkTextNode;
 }
+var BASE_CLASS = "composer-code-tok";
+var CodeTokenNode = class _CodeTokenNode extends TextNode {
+  __codeKind;
+  static getType() {
+    return "composeai-code-token";
+  }
+  static clone(node) {
+    return new _CodeTokenNode(node.__text, node.__codeKind, node.__key);
+  }
+  constructor(text = "", codeKind = "text", key) {
+    super(text, key);
+    this.__codeKind = codeKind;
+  }
+  getCodeKind() {
+    return this.getLatest().__codeKind;
+  }
+  setCodeKind(kind) {
+    const self = this.getWritable();
+    self.__codeKind = kind;
+    return self;
+  }
+  createDOM(config) {
+    const dom = super.createDOM(config);
+    addClassNamesToElement(dom, BASE_CLASS, `${BASE_CLASS}--${this.__codeKind}`);
+    return dom;
+  }
+  updateDOM(prevNode, dom, config) {
+    const updated = super.updateDOM(prevNode, dom, config);
+    if (prevNode.__codeKind !== this.__codeKind) {
+      dom.classList.remove(`${BASE_CLASS}--${prevNode.__codeKind}`);
+      dom.classList.add(`${BASE_CLASS}--${this.__codeKind}`);
+    }
+    return updated;
+  }
+  static importJSON(serializedNode) {
+    return $createCodeTokenNode("", serializedNode.codeKind).updateFromJSON(
+      serializedNode
+    );
+  }
+  updateFromJSON(serializedNode) {
+    return super.updateFromJSON(serializedNode);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: _CodeTokenNode.getType(),
+      version: 1,
+      codeKind: this.__codeKind
+    };
+  }
+};
+function $createCodeTokenNode(text = "", codeKind = "text") {
+  return $applyNodeReplacement(new CodeTokenNode(text, codeKind));
+}
+function $isCodeTokenNode(node) {
+  return node instanceof CodeTokenNode;
+}
 var HEADING_RE = /^(#{1,6}) /;
 var QUOTE_RE = /^> /;
 var BULLET_RE = /^[-*+] /;
@@ -1297,12 +1405,20 @@ function $computeBlockMap() {
   const map = /* @__PURE__ */ new Map();
   const root = $getRoot();
   let insideCode = false;
+  let codeLang;
   for (const child of root.getChildren()) {
     if (!$isParagraphNode(child)) continue;
-    const info = $resolveBlockFor(child, insideCode);
+    let info = $resolveBlockFor(child, insideCode);
+    if (info.kind === "code-fence-open") {
+      insideCode = true;
+      codeLang = info.lang;
+    } else if (info.kind === "code-fence-close") {
+      insideCode = false;
+      codeLang = void 0;
+    } else if (info.kind === "code-line" && codeLang) {
+      info = { ...info, lang: codeLang };
+    }
     map.set(child.getKey(), info);
-    if (info.kind === "code-fence-open") insideCode = true;
-    else if (info.kind === "code-fence-close") insideCode = false;
   }
   return map;
 }
@@ -1508,11 +1624,6 @@ function $isInsideCodeFence() {
   const block = $detectBlockFor(top);
   return block.kind === "code-line" || block.kind === "code-fence-open";
 }
-function $hasMultiLineContent() {
-  const root = $getRoot();
-  if (root.getChildrenSize() > 1) return true;
-  return root.getTextContent().includes("\n");
-}
 function $offsetWithinParagraph(paragraph, point) {
   if (point.type === "element") {
     const children = paragraph.getChildren();
@@ -1605,10 +1716,8 @@ function KeyboardPlugin({ onSubmit }) {
           return true;
         }
         let inCodeFence = false;
-        let hasMultiLine = false;
         editor.getEditorState().read(() => {
           inCodeFence = $isInsideCodeFence();
-          hasMultiLine = $hasMultiLineContent();
         });
         if (inCodeFence) {
           if (!multiline) {
@@ -1630,7 +1739,6 @@ function KeyboardPlugin({ onSubmit }) {
             return true;
           }
         }
-        if (smartNewline && hasMultiLine) return false;
         if (!submitOnEnter) return false;
         return trySubmit(event);
       },
@@ -1760,6 +1868,134 @@ function PasteDropPlugin() {
   return null;
 }
 
+// src/plugins/mermaid-highlight.ts
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "flowchart",
+  "graph",
+  "sequenceDiagram",
+  "classDiagram",
+  "stateDiagram",
+  "stateDiagram-v2",
+  "erDiagram",
+  "journey",
+  "gantt",
+  "pie",
+  "gitGraph",
+  "mindmap",
+  "timeline",
+  "quadrantChart",
+  "requirementDiagram",
+  "C4Context",
+  "subgraph",
+  "end",
+  "direction",
+  "participant",
+  "actor",
+  "note",
+  "loop",
+  "alt",
+  "opt",
+  "par",
+  "and",
+  "else",
+  "rect",
+  "activate",
+  "deactivate",
+  "class",
+  "state",
+  "click",
+  "call",
+  "href",
+  "style",
+  "linkStyle",
+  "classDef",
+  "section",
+  "title",
+  "accTitle",
+  "accDescr",
+  "over",
+  "as",
+  // flowchart directions
+  "TB",
+  "TD",
+  "BT",
+  "RL",
+  "LR"
+]);
+var ARROW_CHARS = /* @__PURE__ */ new Set(["-", "=", ".", "<", ">"]);
+var WS_RE = /\s/;
+var WORD_RE = /[A-Za-z0-9_]/;
+var DIGIT_RE = /[0-9]/;
+function tokenizeMermaidLine(line) {
+  const out = [];
+  const push = (text, kind) => {
+    if (text) out.push({ text, kind });
+  };
+  let i = 0;
+  const n = line.length;
+  while (i < n) {
+    const c = line[i];
+    if (WS_RE.test(c)) {
+      let j = i + 1;
+      while (j < n && WS_RE.test(line[j])) j++;
+      push(line.slice(i, j), "text");
+      i = j;
+      continue;
+    }
+    if (c === "%" && line[i + 1] === "%") {
+      push(line.slice(i), "comment");
+      i = n;
+      continue;
+    }
+    if (c === '"') {
+      let j = i + 1;
+      while (j < n && line[j] !== '"') j++;
+      j = Math.min(j + 1, n);
+      push(line.slice(i, j), "string");
+      i = j;
+      continue;
+    }
+    if ("[](){}|".includes(c)) {
+      push(c, "punct");
+      i++;
+      continue;
+    }
+    if (ARROW_CHARS.has(c)) {
+      let j = i + 1;
+      while (j < n && ARROW_CHARS.has(line[j])) j++;
+      if (j < n && (line[j] === "x" || line[j] === "o") && j - i >= 2) j++;
+      const run = line.slice(i, j);
+      const isArrow = run.length >= 2 || run.includes(">") || run.includes("<");
+      push(run, isArrow ? "arrow" : "punct");
+      i = j;
+      continue;
+    }
+    if (":;,&+*".includes(c)) {
+      push(c, "punct");
+      i++;
+      continue;
+    }
+    if (DIGIT_RE.test(c)) {
+      let j = i + 1;
+      while (j < n && /[0-9.]/.test(line[j])) j++;
+      push(line.slice(i, j), "number");
+      i = j;
+      continue;
+    }
+    if (WORD_RE.test(c)) {
+      let j = i + 1;
+      while (j < n && WORD_RE.test(line[j])) j++;
+      const word = line.slice(i, j);
+      push(word, KEYWORDS.has(word) ? "keyword" : "ident");
+      i = j;
+      continue;
+    }
+    push(c, "text");
+    i++;
+  }
+  return out;
+}
+
 // src/plugins/markdown-tokenizer.ts
 var PAIRED_PATTERNS = [
   { open: "**", close: "**", format: "bold" },
@@ -1871,6 +2107,13 @@ function readCurrentChildren(paragraph) {
       });
     } else if ($isMarkdownTokenNode(child)) {
       out.push({ kind: "token", text: child.getTextContent(), format: 0 });
+    } else if ($isCodeTokenNode(child)) {
+      out.push({
+        kind: "code",
+        text: child.getTextContent(),
+        format: 0,
+        codeKind: child.getCodeKind()
+      });
     } else if ($isTextNode(child)) {
       out.push({
         kind: "text",
@@ -1893,6 +2136,7 @@ function nodesEqual(a, b) {
     if (aKind !== bKind) return false;
     if (ai.text !== bi.text) return false;
     if (ai.format !== bi.format) return false;
+    if (ai.codeKind !== bi.codeKind) return false;
   }
   return true;
 }
@@ -2060,7 +2304,18 @@ function $applyStyling(paragraph, block, mode) {
       trailingDropForOffsetMap = body.length;
       body = "";
     } else if (body.length > 0) {
-      desired.push({ kind: "text", text: body, format: 0 });
+      if (block.kind === "code-line" && block.lang === "mermaid") {
+        for (const tok of tokenizeMermaidLine(body)) {
+          desired.push({
+            kind: "code",
+            text: tok.text,
+            format: 0,
+            codeKind: tok.kind
+          });
+        }
+      } else {
+        desired.push({ kind: "text", text: body, format: 0 });
+      }
     }
   } else if (block.kind === "hr") {
     if (body.length > 0) {
@@ -2148,6 +2403,8 @@ function $applyStyling(paragraph, block, mode) {
   for (const node of desired) {
     if (node.kind === "token") {
       paragraph.append($createMarkdownTokenNode(node.text));
+    } else if (node.kind === "code") {
+      paragraph.append($createCodeTokenNode(node.text, node.codeKind));
     } else if (node.kind === "link") {
       const t = $createLinkTextNode(node.text, node.url ?? "");
       if (node.format !== 0) t.setFormat(node.format);
@@ -2409,10 +2666,13 @@ async function loadMermaid() {
 function svgToDataUri(svg) {
   return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 }
-function MermaidPlugin() {
+var MermaidContext = createContext(null);
+function useMermaidContext() {
+  return useContext(MermaidContext);
+}
+function MermaidProvider({ children }) {
   const [editor] = useLexicalComposerContext();
-  const { features, icons, renderDiagram, classNames, sx } = useComposerContext();
-  const { sparkle: SparkleIcon } = icons;
+  const { features, renderDiagram } = useComposerContext();
   const [diagrams, setDiagrams] = useState([]);
   const keepSource = typeof features.mermaid === "object" ? features.mermaid.keepSource !== false : true;
   useEffect(() => {
@@ -2420,10 +2680,10 @@ function MermaidPlugin() {
       editor.getEditorState().read(() => {
         const found = [];
         const root = $getRoot();
-        const children = root.getChildren();
+        const children2 = root.getChildren();
         let i = 0;
-        while (i < children.length) {
-          const opener = children[i];
+        while (i < children2.length) {
+          const opener = children2[i];
           if (!$isParagraphNode(opener) || !FENCE_OPEN_MERMAID.test(opener.getTextContent())) {
             i++;
             continue;
@@ -2431,8 +2691,8 @@ function MermaidPlugin() {
           const paragraphKeys = [opener.getKey()];
           const codeLines = [];
           let j = i + 1;
-          while (j < children.length) {
-            const next = children[j];
+          while (j < children2.length) {
+            const next = children2[j];
             if (!$isParagraphNode(next)) break;
             const text = next.getTextContent();
             paragraphKeys.push(next.getKey());
@@ -2496,26 +2756,190 @@ function MermaidPlugin() {
       hiddenKeysRef.current.clear();
     };
   }, [editor]);
-  if (diagrams.length === 0) return null;
-  const preview = slotProps(
-    "mermaidPreview",
-    "composer-mermaid",
-    classNames,
-    sx
+  const value = useMemo(
+    () => ({ diagrams, renderDiagram }),
+    [diagrams, renderDiagram]
   );
+  return /* @__PURE__ */ jsxs(MermaidContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(MermaidBackground, {})
+  ] });
+}
+function MermaidBackground() {
+  const ctx = useMermaidContext();
+  if (!ctx || ctx.renderDiagram) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: ctx.diagrams.map((d) => /* @__PURE__ */ jsx(DiagramBackdrop, { diagram: d }, d.id)) });
+}
+function DiagramBackdrop({ diagram }) {
+  const [editor] = useLexicalComposerContext();
+  const { svg } = useDiagramSvg(diagram);
+  const [rect, setRect] = useState(null);
+  const dataUri = useMemo(() => svg ? svgToDataUri(svg) : null, [svg]);
+  useEffect(() => {
+    if (!svg) {
+      setRect(null);
+      return;
+    }
+    const root = editor.getRootElement();
+    const block2 = root?.parentElement;
+    if (!root || !block2) return;
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      const blockRect = block2.getBoundingClientRect();
+      let top = Infinity;
+      let left = Infinity;
+      let right = -Infinity;
+      let bottom = -Infinity;
+      let any = false;
+      for (const key of diagram.paragraphKeys) {
+        const el = editor.getElementByKey(key);
+        if (!el) continue;
+        any = true;
+        const r = el.getBoundingClientRect();
+        top = Math.min(top, r.top);
+        left = Math.min(left, r.left);
+        right = Math.max(right, r.right);
+        bottom = Math.max(bottom, r.bottom);
+      }
+      if (!any) {
+        setRect(null);
+        return;
+      }
+      const relTop = top - blockRect.top;
+      const visTop = Math.max(0, relTop);
+      const visBottom = Math.min(blockRect.height, relTop + (bottom - top));
+      if (visBottom <= visTop) {
+        setRect(null);
+        return;
+      }
+      setRect({
+        top: visTop,
+        left: left - blockRect.left,
+        width: right - left,
+        height: visBottom - visTop
+      });
+    };
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(measure);
+    };
+    schedule();
+    const unregister = editor.registerUpdateListener(schedule);
+    root.addEventListener("scroll", schedule, { passive: true });
+    const ro = new ResizeObserver(schedule);
+    ro.observe(root);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      unregister();
+      root.removeEventListener("scroll", schedule);
+      ro.disconnect();
+    };
+  }, [editor, svg, diagram.paragraphKeys]);
+  const block = editor.getRootElement()?.parentElement;
+  if (!dataUri || !rect || !block) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "composer-mermaid-backdrop",
+        style: {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+          backgroundImage: `url("${dataUri}")`
+        }
+      }
+    ),
+    block
+  );
+}
+function MermaidPreview() {
+  const ctx = useMermaidContext();
+  const { icons, classNames, sx } = useComposerContext();
+  const { sparkle: SparkleIcon } = icons;
+  if (!ctx || ctx.diagrams.length === 0) return null;
+  const preview = slotProps("mermaidPreview", "composer-mermaid", classNames, sx);
   return /* @__PURE__ */ jsxs("div", { ...preview, children: [
     /* @__PURE__ */ jsxs("div", { className: "composer-mermaid-head", children: [
       /* @__PURE__ */ jsx(SparkleIcon, {}),
       "Diagram preview"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "composer-mermaid-row", children: diagrams.map((d) => /* @__PURE__ */ jsx(
-      DiagramTile,
+    /* @__PURE__ */ jsx("div", { className: "composer-mermaid-row", children: ctx.diagrams.map((d) => /* @__PURE__ */ jsx(DiagramTile, { diagram: d, renderDiagram: ctx.renderDiagram }, d.id)) })
+  ] });
+}
+function MermaidQuickAction() {
+  const ctx = useMermaidContext();
+  const { icons, closeMenusOnOutsideClick } = useComposerContext();
+  const { sparkle: SparkleIcon } = icons;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const menuId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!closeMenusOnOutsideClick) return;
+      const target = event.target;
+      if (!target) return;
+      if (popoverRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, closeMenusOnOutsideClick]);
+  if (!ctx || ctx.diagrams.length === 0) return null;
+  const count = ctx.diagrams.length;
+  return /* @__PURE__ */ jsxs("div", { className: "composer-quick-actions", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        diagram: d,
-        renderDiagram
-      },
-      d.id
-    )) })
+        ref: triggerRef,
+        type: "button",
+        "aria-label": `Diagram preview (${count})`,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        "data-active": open ? "" : void 0,
+        onClick: () => setOpen((o) => !o),
+        className: "composer-mermaid-trigger",
+        children: [
+          /* @__PURE__ */ jsx(DiagramThumb, { diagram: ctx.diagrams[0], renderDiagram: ctx.renderDiagram }),
+          count > 1 && /* @__PURE__ */ jsx("span", { className: "composer-mermaid-count", children: count })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: popoverRef,
+        id: menuId,
+        role: "dialog",
+        "aria-label": "Diagram preview",
+        "data-composer-popover": "open",
+        className: "composer-popover-in composer-mermaid-pop",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "composer-mermaid-head", children: [
+            /* @__PURE__ */ jsx(SparkleIcon, {}),
+            "Diagram preview"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "composer-mermaid-row", children: ctx.diagrams.map((d) => /* @__PURE__ */ jsx(DiagramTile, { diagram: d, renderDiagram: ctx.renderDiagram }, d.id)) })
+        ]
+      }
+    )
   ] });
 }
 function DiagramTile({ diagram, renderDiagram }) {
@@ -2537,12 +2961,9 @@ function ConsumerTile({
   }
   return /* @__PURE__ */ jsx("div", { className: "composer-mermaid-tile", children: content });
 }
-function MermaidTile({ diagram }) {
-  const { icons } = useComposerContext();
-  const { zoom: ZoomIcon } = icons;
+function useDiagramSvg(diagram) {
   const [svg, setSvg] = useState(null);
   const [error, setError] = useState(null);
-  const [zoom, setZoom] = useState(false);
   const [mermaidMissing, setMermaidMissing] = useState(false);
   const renderId = useMemo(
     () => `mermaid-${diagram.id}-${Math.random().toString(36).slice(2, 8)}`,
@@ -2575,6 +2996,13 @@ function MermaidTile({ diagram }) {
       cancelled = true;
     };
   }, [diagram.code, renderId]);
+  return { svg, error, mermaidMissing };
+}
+function MermaidTile({ diagram }) {
+  const { icons } = useComposerContext();
+  const { zoom: ZoomIcon } = icons;
+  const [zoom, setZoom] = useState(false);
+  const { svg, error, mermaidMissing } = useDiagramSvg(diagram);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2610,6 +3038,35 @@ function MermaidTile({ diagram }) {
     )
   ] });
 }
+function DiagramThumb({ diagram, renderDiagram }) {
+  if (renderDiagram) {
+    return /* @__PURE__ */ jsx(ConsumerThumb, { diagram, renderDiagram });
+  }
+  return /* @__PURE__ */ jsx(MermaidThumb, { diagram });
+}
+function ConsumerThumb({
+  diagram,
+  renderDiagram
+}) {
+  let content = null;
+  try {
+    content = renderDiagram({ code: diagram.code, language: "mermaid" });
+  } catch {
+    content = null;
+  }
+  return /* @__PURE__ */ jsx("span", { className: "composer-mermaid-thumb", children: content });
+}
+function MermaidThumb({ diagram }) {
+  const { svg } = useDiagramSvg(diagram);
+  if (!svg) return /* @__PURE__ */ jsx("span", { className: "composer-mermaid-thumb" });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "composer-mermaid-thumb",
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
 function SlashMenu({
   options,
   selectedIndex,
@@ -3872,8 +4329,284 @@ function AttachmentTypePicker({
     )
   ] });
 }
+function useCustomActionContext(submit) {
+  const [editor] = useLexicalComposerContext();
+  return useMemo(
+    () => ({
+      insertText: (text) => {
+        editor.update(() => {
+          const sel = $getSelection();
+          if ($isRangeSelection(sel)) sel.insertText(text);
+        });
+        focusEditor(editor);
+      },
+      insertMarkdown: (md) => {
+        editor.update(() => {
+          $insertTextWithParagraphBreaks(md);
+        });
+        focusEditor(editor);
+      },
+      submit
+    }),
+    [editor, submit]
+  );
+}
+function CustomActionButtons({ submit }) {
+  const { features, classNames, sx } = useComposerContext();
+  const ctx = useCustomActionContext(submit);
+  const actions = features.custom;
+  const toolbarBtn = slotProps(
+    "toolbarButton",
+    "composer-toolbar-btn",
+    classNames,
+    sx
+  );
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: actions.map((action, i) => /* @__PURE__ */ jsx(Tooltip, { content: action.title, side: "top", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": action.title,
+      "aria-pressed": action.active,
+      "data-active": action.active ? "" : void 0,
+      disabled: action.disabled,
+      onClick: () => action.onClick(ctx),
+      ...toolbarBtn,
+      children: action.icon
+    }
+  ) }, action.id ?? i)) });
+}
+function QuickActionsMenu({ extras, submit }) {
+  const {
+    features,
+    attachmentsConfig,
+    addFiles,
+    webEnabled,
+    toggleWeb,
+    icons,
+    classNames,
+    sx,
+    closeMenusOnOutsideClick
+  } = useComposerContext();
+  const {
+    plus: PlusIcon,
+    attach: AttachIcon,
+    image: ImageIcon,
+    web: WebIcon
+  } = icons;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const imageInputRef = useRef(null);
+  const menuId = useId();
+  const attachmentsEnabled = !!features.attachments;
+  const showFileBtn = attachmentsEnabled && attachmentsConfig.file !== false;
+  const showImageBtn = attachmentsEnabled && attachmentsConfig.image !== false;
+  const types = showFileBtn && Array.isArray(attachmentsConfig.types) ? attachmentsConfig.types : [];
+  const hasTypePicker = types.length > 0;
+  const customActions = features.custom;
+  const actionCtx = useCustomActionContext(submit ?? (() => {
+  }));
+  const hasAnyAction = showFileBtn || showImageBtn || features.web || customActions.length > 0 || !!extras;
+  const close = useCallback(() => setOpen(false), []);
+  const openFilePicker = useCallback((accept) => {
+    const input = fileInputRef.current;
+    if (!input) return;
+    input.accept = accept ?? attachmentsConfig.accept ?? "";
+    input.click();
+  }, [attachmentsConfig.accept]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!closeMenusOnOutsideClick) return;
+      const target = event.target;
+      if (!target) return;
+      if (popoverRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, closeMenusOnOutsideClick, close]);
+  if (!hasAnyAction) return null;
+  const triggerBtn = slotProps(
+    "toolbarButton",
+    "composer-toolbar-btn",
+    classNames,
+    sx
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "composer-quick-actions", children: [
+    showFileBtn && /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        accept: attachmentsConfig.accept,
+        hidden: true,
+        onChange: (e) => {
+          const files = e.target.files;
+          if (files) addFiles(Array.from(files));
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+      }
+    ),
+    showImageBtn && /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: imageInputRef,
+        type: "file",
+        multiple: true,
+        accept: "image/*",
+        hidden: true,
+        onChange: (e) => {
+          const files = e.target.files;
+          if (files) addFiles(Array.from(files));
+          if (imageInputRef.current) imageInputRef.current.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-label": "Quick actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        "data-active": open ? "" : void 0,
+        onClick: () => setOpen((o) => !o),
+        ...triggerBtn,
+        children: /* @__PURE__ */ jsx(PlusIcon, {})
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: popoverRef,
+        id: menuId,
+        role: "menu",
+        "aria-label": "Quick actions",
+        "data-composer-popover": "open",
+        className: "composer-popover-in composer-attach-menu composer-quick-menu",
+        children: [
+          showFileBtn && !hasTypePicker && /* @__PURE__ */ jsx(
+            ActionItem,
+            {
+              icon: /* @__PURE__ */ jsx(AttachIcon, {}),
+              label: "Attach file",
+              onClick: () => {
+                close();
+                openFilePicker();
+              }
+            }
+          ),
+          hasTypePicker && types.map((type) => /* @__PURE__ */ jsx(
+            ActionItem,
+            {
+              icon: type.icon ?? /* @__PURE__ */ jsx(AttachIcon, {}),
+              label: type.label,
+              description: type.description,
+              onClick: () => {
+                close();
+                openFilePicker(type.accept);
+              }
+            },
+            type.id
+          )),
+          showImageBtn && /* @__PURE__ */ jsx(
+            ActionItem,
+            {
+              icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+              label: "Add image",
+              onClick: () => {
+                close();
+                imageInputRef.current?.click();
+              }
+            }
+          ),
+          features.web && /* @__PURE__ */ jsx(
+            ActionItem,
+            {
+              icon: /* @__PURE__ */ jsx(WebIcon, {}),
+              label: "Search the web",
+              active: webEnabled,
+              onClick: () => {
+                toggleWeb();
+                close();
+              }
+            }
+          ),
+          customActions.map((action, i) => /* @__PURE__ */ jsx(
+            ActionItem,
+            {
+              icon: action.icon,
+              label: action.title,
+              active: action.active,
+              disabled: action.disabled,
+              onClick: () => {
+                action.onClick(actionCtx);
+                close();
+              }
+            },
+            action.id ?? i
+          )),
+          extras && /* @__PURE__ */ jsx("div", { className: "composer-quick-extras", children: extras })
+        ]
+      }
+    )
+  ] });
+}
+function ActionItem({
+  icon,
+  label,
+  description,
+  active,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      role: "menuitem",
+      type: "button",
+      "aria-pressed": active,
+      "data-active": active ? "" : void 0,
+      disabled,
+      onClick,
+      className: cn("composer-attach-item"),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "composer-attach-item-icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "composer-attach-item-label", children: label }),
+        description ? /* @__PURE__ */ jsx("span", { className: "composer-attach-item-desc", children: description }) : null
+      ]
+    }
+  );
+}
 var TOOLBAR_BTN_BASE = "composer-toolbar-btn";
-function Toolbar({ extras }) {
+function Toolbar({ extras, variant = "full", submit }) {
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(QuickActionsMenu, { extras, submit }),
+      /* @__PURE__ */ jsx(MermaidQuickAction, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsx(FullToolbar, { extras, submit });
+}
+function FullToolbar({ extras, submit }) {
   const {
     features,
     attachmentsConfig,
@@ -3972,6 +4705,8 @@ function Toolbar({ extras }) {
         ]
       }
     ),
+    /* @__PURE__ */ jsx(CustomActionButtons, { submit: submit ?? (() => {
+    }) }),
     extras
   ] });
 }
@@ -4065,7 +4800,6 @@ function HintBar({ hint }) {
   const {
     multiline,
     submitOnEnter,
-    smartNewline,
     focusShortcut,
     classNames,
     sx
@@ -4079,16 +4813,6 @@ function HintBar({ hint }) {
         " to send."
       ] });
     }
-    if (smartNewline && submitOnEnter) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        "Press ",
-        /* @__PURE__ */ jsx(Key, { children: "Enter" }),
-        " to send a single line,",
-        " ",
-        /* @__PURE__ */ jsx(Key, { children: "\u2318/Ctrl + Enter" }),
-        " to send once you've started a new line."
-      ] });
-    }
     if (!submitOnEnter) {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         "Press ",
@@ -4105,7 +4829,7 @@ function HintBar({ hint }) {
       /* @__PURE__ */ jsx(Key, { children: "Shift + Enter" }),
       " for newline."
     ] });
-  }, [multiline, submitOnEnter, smartNewline]);
+  }, [multiline, submitOnEnter]);
   const focusHint = useMemo(() => {
     if (!focusShortcut) return null;
     const label = formatShortcut(focusShortcut);
@@ -4208,6 +4932,107 @@ function useComposerHandle(ref, onSubmit) {
     };
   }, [editor, ref, onSubmit, addFiles]);
 }
+var DEFAULT_TIMING = {
+  typeSpeed: 55,
+  deleteSpeed: 28,
+  holdDuration: 1800,
+  pauseDuration: 450
+};
+function useAnimatedPlaceholder(phrases, enabled, options) {
+  const [state, setState] = useState({
+    text: "",
+    active: true
+  });
+  const optsRef = useRef({});
+  optsRef.current = options ?? {};
+  const active = enabled && Array.isArray(phrases) && phrases.length > 0;
+  const key = active ? phrases.join("\u241F") : "";
+  const loop = !!options?.loop;
+  const phrasesRef = useRef(phrases);
+  phrasesRef.current = phrases;
+  useEffect(() => {
+    if (!active) {
+      setState({ text: "", active: true });
+      return;
+    }
+    const list = phrasesRef.current;
+    const lastIdx = list.length - 1;
+    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      setState({ text: list[0], active: false });
+      return;
+    }
+    let timer;
+    let phraseIdx = 0;
+    let charIdx = 0;
+    let phase = "typing";
+    const tick = () => {
+      const timing = { ...DEFAULT_TIMING, ...optsRef.current };
+      const { typeSpeed, deleteSpeed, holdDuration, pauseDuration } = timing;
+      const settleTo = optsRef.current.settleTo;
+      const current = list[phraseIdx];
+      const isLast = phraseIdx === lastIdx;
+      switch (phase) {
+        case "typing": {
+          charIdx += 1;
+          setState({ text: current.slice(0, charIdx), active: true });
+          if (charIdx >= current.length) {
+            phase = "holding";
+            timer = setTimeout(tick, holdDuration);
+          } else {
+            timer = setTimeout(tick, typeSpeed);
+          }
+          break;
+        }
+        case "holding": {
+          if (!loop && isLast) {
+            if (settleTo !== void 0) {
+              phase = "settling";
+              timer = setTimeout(tick, deleteSpeed);
+            } else {
+              setState({ text: current, active: false });
+            }
+          } else {
+            phase = "deleting";
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+        case "deleting": {
+          charIdx -= 1;
+          setState({ text: current.slice(0, Math.max(0, charIdx)), active: true });
+          if (charIdx <= 0) {
+            phase = "pausing";
+            timer = setTimeout(tick, pauseDuration);
+          } else {
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+        case "pausing": {
+          phraseIdx = phraseIdx >= lastIdx ? 0 : phraseIdx + 1;
+          charIdx = 0;
+          phase = "typing";
+          timer = setTimeout(tick, typeSpeed);
+          break;
+        }
+        case "settling": {
+          charIdx -= 1;
+          if (charIdx <= 0) {
+            setState({ text: settleTo ?? "", active: false });
+          } else {
+            setState({ text: current.slice(0, charIdx), active: true });
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+      }
+    };
+    timer = setTimeout(tick, DEFAULT_TIMING.typeSpeed);
+    return () => clearTimeout(timer);
+  }, [active, key, loop]);
+  return active ? state : null;
+}
 
 // src/internal/shortcut.ts
 var MODIFIERS = /* @__PURE__ */ new Set([
@@ -4285,6 +5110,7 @@ function matchesShortcut(parsed, event) {
 var Composer = forwardRef(function Composer2(props, ref) {
   const {
     placeholder = "Send a message\u2026",
+    animatedPlaceholder,
     onSend,
     onStop,
     isStreaming,
@@ -4303,6 +5129,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
     toolbarExtras,
     closeMenusOnOutsideClick = true,
     mode = "markdown",
+    variant = "compact",
     multiline = true,
     submitOnEnter = true,
     smartNewline = true,
@@ -4313,6 +5140,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
     attachmentOptions,
     dir
   } = props;
+  const hasPlaceholder = props.placeholder != null;
   const tokenStyle = useMemo(() => {
     const derived = color ? deriveColorTokens(color) : null;
     if (!derived && !tokens) return void 0;
@@ -4331,6 +5159,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
       closeMenusOnOutsideClick,
       attachmentOptions,
       mode,
+      variant,
       multiline,
       submitOnEnter,
       smartNewline,
@@ -4355,6 +5184,8 @@ var Composer = forwardRef(function Composer2(props, ref) {
               ComposerCard,
               {
                 placeholder,
+                animatedPlaceholder,
+                hasPlaceholder,
                 initialValue,
                 handleRef: ref,
                 onSend,
@@ -4365,6 +5196,7 @@ var Composer = forwardRef(function Composer2(props, ref) {
                 isStreaming: !!isStreaming,
                 toolbarExtras,
                 mode,
+                variant,
                 multiline
               }
             ),
@@ -4385,11 +5217,14 @@ var RICH_NODES = [
   MarkdownTokenNode,
   BlockParagraphNode,
   LinkTextNode,
+  CodeTokenNode,
   BLOCK_PARAGRAPH_REPLACEMENT
 ];
 var PLAIN_NODES = [MentionNode];
 function ComposerCard({
   placeholder,
+  animatedPlaceholder,
+  hasPlaceholder,
   initialValue,
   handleRef,
   onSend,
@@ -4400,6 +5235,7 @@ function ComposerCard({
   isStreaming,
   toolbarExtras,
   mode,
+  variant,
   multiline
 }) {
   const { webEnabled, isDraggingFiles, classNames, sx } = useComposerContext();
@@ -4420,7 +5256,8 @@ function ComposerCard({
     "div",
     {
       "data-composer-root": "",
-      "data-composer-inline": multiline ? void 0 : "",
+      "data-composer-variant": variant,
+      "data-composer-inline": variant === "full" && !multiline ? "" : void 0,
       "data-composer-web": webEnabled ? "" : void 0,
       "data-composer-dragging": isDraggingFiles ? "" : void 0,
       ...card,
@@ -4449,7 +5286,10 @@ function ComposerCard({
           ComposerInner,
           {
             placeholder,
+            animatedPlaceholder,
+            hasPlaceholder,
             mode,
+            variant,
             multiline,
             handleRef,
             onSend,
@@ -4468,7 +5308,10 @@ function ComposerCard({
 }
 function ComposerInner({
   placeholder,
+  animatedPlaceholder,
+  hasPlaceholder,
   mode,
+  variant,
   multiline,
   handleRef,
   onSend,
@@ -4496,6 +5339,9 @@ function ComposerInner({
   const [hasText, setHasText] = useState(
     !!initialValue && initialValue.trim().length > 0
   );
+  const [isMultiLine, setIsMultiLine] = useState(
+    !!initialValue && initialValue.includes("\n")
+  );
   const onSendRef = useRef(onSend);
   onSendRef.current = onSend;
   const refocusOnSubmitRef = useRef(refocusOnSubmit);
@@ -4574,8 +5420,10 @@ function ComposerInner({
   useEffect(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
-        const text = $getRoot().getTextContent().trim();
-        setHasText(text.length > 0);
+        const root = $getRoot();
+        const text = root.getTextContent();
+        setHasText(text.trim().length > 0);
+        setIsMultiLine(root.getChildrenSize() > 1 || text.includes("\n"));
       });
     });
   }, [editor]);
@@ -4591,8 +5439,17 @@ function ComposerInner({
       }
     });
   }, [editor, registerRunPrompt, submit]);
-  const toolbarSlot = /* @__PURE__ */ jsx(Toolbar, { extras: toolbarExtras });
-  const sendButtonSlot = /* @__PURE__ */ jsx(
+  const isCompact = variant === "compact";
+  const animatedPhrases = Array.isArray(animatedPlaceholder) ? animatedPlaceholder : animatedPlaceholder?.phrases;
+  const animatedLoop = Array.isArray(animatedPlaceholder) ? false : !!animatedPlaceholder?.loop;
+  const animatedFrame = useAnimatedPlaceholder(animatedPhrases, !hasText, {
+    loop: animatedLoop,
+    settleTo: hasPlaceholder ? placeholder : void 0
+  });
+  const effectivePlaceholder = animatedFrame?.text ?? placeholder;
+  const mermaidActive = multiline && mode === "markdown" && !!features.mermaid;
+  const toolbarSlot = /* @__PURE__ */ jsx(Toolbar, { extras: toolbarExtras, variant, submit });
+  const sendButton = /* @__PURE__ */ jsx(
     SendButton,
     {
       canSend: (
@@ -4605,38 +5462,38 @@ function ComposerInner({
       onStop
     }
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const sendButtonSlot = isCompact && features.voice ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VoiceButton, {}),
+    sendButton
+  ] }) : sendButton;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       EditorShell,
       {
-        placeholder,
+        placeholder: effectivePlaceholder,
+        animated: animatedFrame?.active ?? false,
         mode,
+        variant,
         multiline,
+        expanded: isCompact && isMultiLine,
         header: /* @__PURE__ */ jsx(AttachmentTray, {}),
         toolbar: toolbarSlot,
         sendButton: sendButtonSlot,
-        footer: multiline ? /* @__PURE__ */ jsx(MermaidSlot, {}) : null
+        footer: mermaidActive && !isCompact ? /* @__PURE__ */ jsx(MermaidPreview, {}) : null
       }
     ),
     /* @__PURE__ */ jsx(KeyboardPlugin, { onSubmit: submit }),
     /* @__PURE__ */ jsx(AutoFocusPlugin, { enabled: !!autoFocus }),
     /* @__PURE__ */ jsx(PasteDropPlugin, {}),
     markdownEnabled && /* @__PURE__ */ jsx(MarkdownPlugin, {}),
-    features.slashCommands && /* @__PURE__ */ jsx(
-      SlashCommandPlugin,
-      {
-        config: features.slashCommands,
-        onSubmit: submit
-      }
-    ),
+    features.slashCommands && // One typeahead per config — a single config or an array of them, so
+    // consumers can register several trigger symbols (each with its own
+    // action menu) at once. Keyed by trigger; give each a distinct symbol.
+    (Array.isArray(features.slashCommands) ? features.slashCommands : [features.slashCommands]).map((cfg, i) => /* @__PURE__ */ jsx(SlashCommandPlugin, { config: cfg, onSubmit: submit }, cfg.trigger ?? `slash-${i}`)),
     features.mentions && /* @__PURE__ */ jsx(MentionPlugin, { config: features.mentions }),
     features.ghostedAutoComplete && /* @__PURE__ */ jsx(GhostedAutoCompletePlugin, { config: features.ghostedAutoComplete })
   ] });
-}
-function MermaidSlot() {
-  const { features, mode } = useComposerContext();
-  if (mode !== "markdown" || !features.mermaid) return null;
-  return /* @__PURE__ */ jsx(MermaidPlugin, {});
+  return mermaidActive ? /* @__PURE__ */ jsx(MermaidProvider, { children: content }) : content;
 }
 function SuggestionRow({ items, onSelect, className }) {
   const { icons } = useComposerContext();