@lovett/ui 0.0.11 → 0.2.0

package/dist/rich-composer-impl-5NO443A6.js

@@ -0,0 +1,1859 @@
+import { parseMentionHref, ComposerNotice, ThreadComposer, useAttachments, AttachmentDropZone, Button, AttachmentTray, ComposerFooter, Kbd, AttachmentButton, ATTACHMENT_ACCEPT, Popover, GifPicker, cn } from './chunk-RBYWGBQ2.js';
+import { useRef, useState, useCallback, useEffect, useId, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Bold, Italic, Underline, Strikethrough, Code, Link, CornerDownRight, Check, Unlink, X, Images, Heading1, Heading2, Heading3, List, ListOrdered, TextQuote, SquareCode, Minus } from 'lucide-react';
+import { Mark, markInputRule, mergeAttributes, Extension, InputRule, isTextSelection, Editor } from '@tiptap/core';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import { Slice, Fragment, Node as Node$1 } from '@tiptap/pm/model';
+import { PluginKey } from '@tiptap/pm/state';
+import { useEditor, useEditorState, EditorContent } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Mention } from '@tiptap/extension-mention';
+import { Markdown } from '@tiptap/markdown';
+import { StarterKit } from '@tiptap/starter-kit';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+
+// src/thread/scroll-caret.ts
+function caretScrollDelta(box, caret, pad) {
+  if (caret.top < box.top + pad) return caret.top - (box.top + pad);
+  if (caret.bottom > box.bottom - pad) return caret.bottom - (box.bottom - pad);
+  return 0;
+}
+
+// src/thread/emoji.ts
+var EMOJI_ROWS = [
+  /* ── Faces ───────────────────────────────────────────────────────────── */
+  ["grinning", "\u{1F600}", "", "smile|happy|grin"],
+  ["smiley", "\u{1F603}", "", "happy|joy|cheerful"],
+  ["smile", "\u{1F604}", "", "happy|joy|laugh"],
+  ["grin", "\u{1F601}", "", "happy|beam|pleased"],
+  ["laughing", "\u{1F606}", "satisfied", "haha|lol|funny"],
+  ["sweat_smile", "\u{1F605}", "", "phew|relief|nervous"],
+  ["joy", "\u{1F602}", "lol", "laugh|tears|haha|funny"],
+  ["rofl", "\u{1F923}", "rolling_on_the_floor_laughing", "lol|haha|hilarious"],
+  ["slightly_smiling_face", "\u{1F642}", "slight_smile", "smile|fine|ok"],
+  ["upside_down_face", "\u{1F643}", "upside_down", "irony|sarcasm|silly"],
+  ["wink", "\u{1F609}", "", "flirt|joke|kidding"],
+  ["blush", "\u{1F60A}", "", "happy|shy|smile"],
+  ["innocent", "\u{1F607}", "", "angel|halo|good"],
+  ["heart_eyes", "\u{1F60D}", "", "love|adore|crush"],
+  ["star_struck", "\u{1F929}", "", "amazed|wow|excited"],
+  ["yum", "\u{1F60B}", "", "delicious|tasty|tongue"],
+  ["raised_eyebrow", "\u{1F928}", "face_with_raised_eyebrow", "skeptical|doubt|suspicious"],
+  ["neutral_face", "\u{1F610}", "", "meh|blank|straight"],
+  ["expressionless", "\u{1F611}", "", "blank|meh|deadpan"],
+  ["smirk", "\u{1F60F}", "", "smug|sly|knowing"],
+  ["unamused", "\u{1F612}", "", "meh|annoyed|unimpressed"],
+  ["roll_eyes", "\u{1F644}", "face_with_rolling_eyes|side_eye|sideeye", "whatever|annoyed|sarcasm|really"],
+  ["grimacing", "\u{1F62C}", "", "awkward|eek|yikes"],
+  ["relieved", "\u{1F60C}", "", "phew|calm|content"],
+  ["pensive", "\u{1F614}", "", "sad|thoughtful|wistful"],
+  ["sleeping", "\u{1F634}", "", "zzz|asleep|bored"],
+  ["exploding_head", "\u{1F92F}", "mind_blown", "mindblown|whoa|shocked"],
+  ["partying_face", "\u{1F973}", "", "birthday|hooray|horn"],
+  ["sunglasses", "\u{1F60E}", "", "cool|deal|smooth"],
+  ["nerd_face", "\u{1F913}", "nerd", "geek|glasses|smart"],
+  ["monocle_face", "\u{1F9D0}", "monocle", "inspect|scrutinize|examine"],
+  ["confused", "\u{1F615}", "", "unsure|puzzled"],
+  ["slightly_frowning_face", "\u{1F641}", "slight_frown", "sad|frown"],
+  ["open_mouth", "\u{1F62E}", "", "wow|surprise|shock"],
+  ["flushed", "\u{1F633}", "", "blush|embarrassed|shy"],
+  ["pleading_face", "\u{1F97A}", "pleading", "puppy|beg|please"],
+  ["fearful", "\u{1F628}", "", "scared|afraid|yikes"],
+  ["cry", "\u{1F622}", "", "sad|tear|upset"],
+  ["sob", "\u{1F62D}", "crying", "bawl|sad|tears"],
+  ["scream", "\u{1F631}", "", "horror|shock|panic"],
+  ["disappointed", "\u{1F61E}", "", "sad|letdown"],
+  ["weary", "\u{1F629}", "", "exhausted|tired|done"],
+  ["tired_face", "\u{1F62B}", "", "exhausted|fed_up"],
+  ["yawning_face", "\u{1F971}", "yawn", "bored|sleepy|tired"],
+  ["rage", "\u{1F621}", "enraged", "angry|mad|furious"],
+  ["angry", "\u{1F620}", "", "mad|annoyed|cross"],
+  ["thinking", "\u{1F914}", "thinking_face|hmm", "ponder|consider|unsure"],
+  ["shushing_face", "\u{1F92B}", "shush", "quiet|secret|hush"],
+  ["zipper_mouth_face", "\u{1F910}", "zipper_mouth", "secret|quiet|sealed"],
+  ["saluting_face", "\u{1FAE1}", "salute", "respect|acknowledge|yessir"],
+  ["face_holding_back_tears", "\u{1F979}", "holding_back_tears", "emotional|touched|proud"],
+  ["clown_face", "\u{1F921}", "clown", "joke|silly|circus"],
+  ["ghost", "\u{1F47B}", "", "boo|spooky|halloween"],
+  ["skull", "\u{1F480}", "", "dead|rip|died"],
+  ["robot", "\u{1F916}", "robot_face", "bot|automation|machine"],
+  ["see_no_evil", "\u{1F648}", "", "monkey|hide|oops"],
+  ["poop", "\u{1F4A9}", "hankey", "bad|garbage|rubbish"],
+  /* ── Hands and body ──────────────────────────────────────────────────── */
+  ["+1", "\u{1F44D}", "thumbsup|thumbs_up|like", "yes|agree|approve|ok"],
+  ["-1", "\u{1F44E}", "thumbsdown|thumbs_down|dislike", "no|disagree|reject"],
+  ["ok_hand", "\u{1F44C}", "", "perfect|fine|good"],
+  ["clap", "\u{1F44F}", "", "applause|bravo|well_done"],
+  ["raised_hands", "\u{1F64C}", "", "praise|hooray|celebrate"],
+  ["pray", "\u{1F64F}", "folded_hands", "please|thanks|thank_you|hope"],
+  ["muscle", "\u{1F4AA}", "flex", "strong|strength|power"],
+  ["wave", "\u{1F44B}", "", "hi|hello|bye|greeting"],
+  ["point_right", "\u{1F449}", "", "this|direction|there"],
+  ["point_left", "\u{1F448}", "", "that|direction|back"],
+  ["crossed_fingers", "\u{1F91E}", "fingers_crossed", "luck|hope|wish"],
+  ["handshake", "\u{1F91D}", "", "deal|agree|partner"],
+  ["writing_hand", "\u270D\uFE0F", "writing", "note|sign|draft"],
+  ["eyes", "\u{1F440}", "", "look|watch|reviewing|see"],
+  ["brain", "\u{1F9E0}", "", "smart|idea|think"],
+  ["facepalm", "\u{1F926}", "", "oops|ugh|smh"],
+  ["shrug", "\u{1F937}", "", "dunno|idk|whatever"],
+  ["raising_hand", "\u{1F64B}", "raise_hand", "question|volunteer|me"],
+  /* ── Celebration and energy ──────────────────────────────────────────── */
+  ["tada", "\u{1F389}", "party|hooray|celebrate", "confetti|launch|ship|shipped|done"],
+  ["sparkles", "\u2728", "", "shiny|magic|new|clean"],
+  ["fire", "\u{1F525}", "flame|lit", "hot|burning|great"],
+  ["rocket", "\u{1F680}", "", "launch|ship|deploy|fast"],
+  ["boom", "\u{1F4A5}", "collision", "explode|bang|impact"],
+  ["zap", "\u26A1", "lightning", "fast|power|energy"],
+  ["star", "\u2B50", "", "favourite|rating|good"],
+  ["100", "\u{1F4AF}", "hundred|perfect", "score|agree|exactly"],
+  ["trophy", "\u{1F3C6}", "", "win|award|champion"],
+  ["dart", "\u{1F3AF}", "bullseye|target", "goal|aim|precise"],
+  ["crown", "\u{1F451}", "", "king|queen|best"],
+  ["gem", "\u{1F48E}", "diamond", "jewel|valuable|premium"],
+  ["bulb", "\u{1F4A1}", "idea|light_bulb", "insight|bright|suggestion"],
+  /* ── Work, status and objects ────────────────────────────────────────── */
+  ["moneybag", "\u{1F4B0}", "money", "budget|cash|spend"],
+  ["chart_with_upwards_trend", "\u{1F4C8}", "chart_up|trending_up", "growth|increase|up"],
+  ["chart_with_downwards_trend", "\u{1F4C9}", "chart_down|trending_down", "decline|decrease|down"],
+  ["bar_chart", "\u{1F4CA}", "chart", "data|report|stats"],
+  ["clipboard", "\u{1F4CB}", "", "list|notes|tasks"],
+  ["calendar", "\u{1F4C5}", "date", "schedule|day|meeting"],
+  ["pushpin", "\u{1F4CC}", "pin", "pinned|note|important"],
+  ["paperclip", "\u{1F4CE}", "attachment", "attach|file|clip"],
+  ["mag", "\u{1F50D}", "search|magnifying_glass", "find|look|zoom"],
+  ["lock", "\u{1F512}", "", "secure|private|closed"],
+  ["unlock", "\u{1F513}", "", "open|access"],
+  ["key", "\u{1F511}", "", "access|password|secret"],
+  ["bell", "\u{1F514}", "notification", "alert|ring|remind"],
+  ["no_bell", "\u{1F515}", "mute", "silence|quiet|off"],
+  ["hourglass", "\u231B", "waiting", "time|wait|pending"],
+  ["alarm_clock", "\u23F0", "alarm", "time|remind|deadline"],
+  ["stopwatch", "\u23F1\uFE0F", "timer", "time|measure|speed"],
+  ["warning", "\u26A0\uFE0F", "caution", "careful|alert|risk"],
+  ["no_entry", "\u26D4", "blocked", "stop|forbidden|blocker"],
+  ["white_check_mark", "\u2705", "check|done", "complete|yes|approved|shipped"],
+  ["heavy_check_mark", "\u2714\uFE0F", "checkmark|tick", "done|yes|verified"],
+  ["x", "\u274C", "cross_mark", "no|wrong|cancel|failed"],
+  ["question", "\u2753", "", "help|ask|unknown"],
+  ["exclamation", "\u2757", "heavy_exclamation_mark", "important|alert"],
+  ["construction", "\u{1F6A7}", "wip", "work_in_progress|building|roadworks"],
+  ["hammer", "\u{1F528}", "", "build|fix|tool"],
+  ["wrench", "\u{1F527}", "", "fix|tool|maintenance"],
+  ["gear", "\u2699\uFE0F", "settings", "config|cog|options"],
+  ["bug", "\u{1F41B}", "", "defect|issue|error"],
+  ["computer", "\u{1F4BB}", "laptop", "code|work|dev"],
+  ["email", "\u2709\uFE0F", "envelope", "mail|message|send"],
+  ["package", "\u{1F4E6}", "", "box|release|ship|delivery"],
+  ["memo", "\u{1F4DD}", "note|pencil", "write|notes|edit"],
+  ["art", "\u{1F3A8}", "palette", "creative|paint|design"],
+  ["speech_balloon", "\u{1F4AC}", "comment", "talk|message|chat"],
+  ["thought_balloon", "\u{1F4AD}", "thought", "idea|think|dream"],
+  ["mega", "\u{1F4E3}", "megaphone|announce", "announcement|shout|promote"],
+  ["link", "\u{1F517}", "", "url|chain|connect"],
+  ["globe_with_meridians", "\u{1F310}", "globe", "internet|web|world"],
+  /* ── Hearts ──────────────────────────────────────────────────────────── */
+  ["heart", "\u2764\uFE0F", "red_heart|love", "like|adore"],
+  ["broken_heart", "\u{1F494}", "", "sad|heartbreak"],
+  ["sparkling_heart", "\u{1F496}", "", "love|sparkle"],
+  ["two_hearts", "\u{1F495}", "", "love|cute"],
+  /* ── Nature ──────────────────────────────────────────────────────────── */
+  ["sunny", "\u2600\uFE0F", "sun", "weather|clear|bright"],
+  ["rainbow", "\u{1F308}", "", "colour|pride|hope"],
+  ["seedling", "\u{1F331}", "sprout", "grow|new|plant"],
+  ["four_leaf_clover", "\u{1F340}", "clover", "luck|lucky"],
+  ["unicorn", "\u{1F984}", "", "magic|rare|special"],
+  /* ── Food and drink ──────────────────────────────────────────────────── */
+  ["coffee", "\u2615", "cafe", "caffeine|morning|espresso"],
+  ["beer", "\u{1F37A}", "", "drink|cheers|friday"],
+  ["champagne", "\u{1F37E}", "", "celebrate|launch|cheers"],
+  ["clinking_glasses", "\u{1F942}", "cheers", "toast|celebrate"],
+  ["pizza", "\u{1F355}", "", "food|slice"],
+  ["birthday", "\u{1F382}", "birthday_cake", "cake|celebrate"],
+  /* ── Play ────────────────────────────────────────────────────────────── */
+  ["video_game", "\u{1F3AE}", "gamepad", "play|gaming"],
+  ["gift", "\u{1F381}", "present", "birthday|surprise"]
+];
+function splitList(value) {
+  return value === "" ? [] : value.split("|");
+}
+var THREAD_EMOJI = EMOJI_ROWS.map(
+  ([name, glyph, aliases, keywords]) => ({
+    name,
+    glyph,
+    aliases: splitList(aliases),
+    keywords: splitList(keywords)
+  })
+);
+function normalizeShortcode(value) {
+  return value.trim().toLowerCase().replace(/^:+|:+$/g, "").replaceAll("-", "_");
+}
+var BY_SHORTCODE = (() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of THREAD_EMOJI) {
+    for (const code of [entry.name, ...entry.aliases]) {
+      const key = normalizeShortcode(code);
+      if (!map.has(key)) map.set(key, entry);
+    }
+  }
+  return map;
+})();
+function emojiByShortcode(code) {
+  return BY_SHORTCODE.get(normalizeShortcode(code));
+}
+function score(entry, query) {
+  if (entry.name === query) return 0;
+  if (entry.aliases.includes(query)) return 1;
+  if (entry.keywords.includes(query)) return 2;
+  if (entry.name.startsWith(query)) return 3;
+  if (entry.aliases.some((alias) => alias.startsWith(query))) return 4;
+  if (entry.keywords.some((keyword) => keyword.startsWith(query))) return 5;
+  return null;
+}
+var EMOJI_RESULT_LIMIT = 8;
+function searchEmoji(query, limit = EMOJI_RESULT_LIMIT) {
+  const normalized = normalizeShortcode(query);
+  if (normalized === "") return [];
+  const ranked = [];
+  for (const [order, entry] of THREAD_EMOJI.entries()) {
+    const rank = score(entry, normalized);
+    if (rank !== null) ranked.push({ entry, rank, order });
+  }
+  ranked.sort((a, b) => a.rank === b.rank ? a.order - b.order : a.rank - b.rank);
+  return ranked.slice(0, limit).map((match) => match.entry);
+}
+var UNDERLINE_MARKER = "++";
+var UNDERLINE_PATTERN = /^\+\+(?=\S)((?:\\[^\n]|(?!\+\+)[^\n\\])+?)(?<=\S)\+\+/;
+var UNDERLINE_INPUT_RULE = /(?:^|\s)(\+\+(?!\s)([^+]+?)(?<!\s)\+\+)$/;
+var ThreadUnderline = Mark.create({
+  name: "underline",
+  addOptions() {
+    return { HTMLAttributes: {} };
+  },
+  parseHTML() {
+    return [
+      { tag: "u" },
+      {
+        style: "text-decoration",
+        consuming: false,
+        getAttrs: (style) => typeof style === "string" && style.includes("underline") ? {} : false
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["u", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setUnderline: () => ({ commands }) => commands.setMark(this.name),
+      toggleUnderline: () => ({ commands }) => commands.toggleMark(this.name),
+      unsetUnderline: () => ({ commands }) => commands.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-u": () => this.editor.commands.toggleUnderline(),
+      "Mod-U": () => this.editor.commands.toggleUnderline()
+    };
+  },
+  /**
+   * Type `++text++` and it becomes underlined, the moment the closing `++`
+   * lands — the same as `**bold**` and `~~strike~~`, which StarterKit gives us
+   * for free. Without this the mark had commands, a shortcut and full markdown
+   * serialization but no way to reach it by TYPING, which is the way people
+   * who know markdown actually reach it. (Owner, 2026-09-07: "is it not like
+   * obsidian where you type them in and it autoformats as you type?")
+   *
+   * The pattern mirrors TipTap's own bold rule, with `+` swapped for `*`:
+   *   - `(?:^|\s)` — the run starts at the line start or after whitespace, so
+   *     `i++;` and `C++` are never rules, matching the renderer's flanking rule
+   *     (D13) rather than fighting it.
+   *   - `(?!\s+\+\+)` — no whitespace immediately inside the opener.
+   *   - `[^+]+` — the content cannot itself contain `+`, so `+++` runs and
+   *     `a++b++c++d` degrade to text instead of matching greedily.
+   */
+  addInputRules() {
+    return [markInputRule({ find: UNDERLINE_INPUT_RULE, type: this.type })];
+  },
+  markdownTokenizer: {
+    name: "underline",
+    level: "inline",
+    start: (src) => src.indexOf(UNDERLINE_MARKER),
+    tokenize: (src, _tokens, lexer) => {
+      const match = UNDERLINE_PATTERN.exec(src);
+      const inner = match?.[1];
+      if (match === null || inner === void 0) return void 0;
+      return { type: "underline", raw: match[0], text: inner, tokens: lexer.inlineTokens(inner) };
+    }
+  },
+  parseMarkdown: (token, helpers) => helpers.applyMark("underline", helpers.parseInline(token.tokens ?? [])),
+  renderMarkdown: (node, helpers) => `++${helpers.renderChildren(node)}++`
+});
+var THREAD_MENTION_SUGGESTION_KEY = new PluginKey("threadMentionSuggestion");
+var MENTION_PATTERN = /^@\[((?:\\.|[^\]\\\n])+)\]\(([^)\s]+)\)/;
+function escapeMentionLabel(label) {
+  return label.replace(/[\\[\]]/g, (char) => `\\${char}`);
+}
+function unescapeMentionLabel(raw) {
+  return raw.replace(/\\(.)/g, "$1");
+}
+function readMentionAttrs(attrs) {
+  if (attrs === void 0) return null;
+  const id = attrs["id"];
+  const label = attrs["label"];
+  const type = attrs["type"];
+  if (typeof id !== "string" || id === "") return null;
+  if (typeof type !== "string") return null;
+  const target = parseMentionHref(`${type}:${id}`);
+  if (target === null) return null;
+  return { id: target.id, label: typeof label === "string" && label !== "" ? label : id, type: target.type };
+}
+var ThreadMention = Mention.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      type: {
+        default: "user",
+        parseHTML: (element) => element.getAttribute("data-mention-type"),
+        renderHTML: (attributes) => ({ "data-mention-type": attributes["type"] })
+      }
+    };
+  },
+  markdownTokenizer: {
+    name: "mention",
+    level: "inline",
+    start: (src) => src.indexOf("@["),
+    tokenize: (src) => {
+      const match = MENTION_PATTERN.exec(src);
+      const rawLabel = match?.[1];
+      const href = match?.[2];
+      if (match === null || rawLabel === void 0 || href === void 0) return void 0;
+      const target = parseMentionHref(href);
+      if (target === null) return void 0;
+      return {
+        type: "mention",
+        raw: match[0],
+        label: unescapeMentionLabel(rawLabel),
+        id: target.id,
+        mentionType: target.type
+      };
+    }
+  },
+  parseMarkdown: (token) => ({
+    type: "mention",
+    attrs: {
+      id: token["id"],
+      label: token["label"],
+      type: token["mentionType"],
+      mentionSuggestionChar: "@"
+    }
+  }),
+  renderMarkdown: (node) => {
+    const mention = readMentionAttrs(node.attrs);
+    if (mention === null) return typeof node.attrs?.["label"] === "string" ? `@${node.attrs["label"]}` : "";
+    return `@[${escapeMentionLabel(mention.label)}](${mention.type}:${mention.id})`;
+  }
+});
+var RICH_HEADING_LEVELS = [1, 2, 3];
+var RICH_HEADING_LEVEL_SET = new Set(RICH_HEADING_LEVELS);
+var MENTION_SUGGESTION_MIN_QUERY = 1;
+var EMOJI_SUGGESTION_MIN_QUERY = 2;
+var THREAD_EMOJI_SUGGESTION_KEY = new PluginKey("threadEmojiSuggestion");
+var EMOJI_SHORTCODE_AT_END = /(?:^|\s)(:([^:\s]+):)$/;
+var EMOJI_INPUT_RULE = (text) => {
+  const match = EMOJI_SHORTCODE_AT_END.exec(text);
+  const shortcode = match?.[1];
+  if (match === null || shortcode === void 0 || emojiByShortcode(shortcode) === void 0) {
+    return null;
+  }
+  return { index: match.index, text: match[0], data: { shortcode } };
+};
+var ThreadEmojiShortcode = Extension.create({
+  name: "threadEmojiShortcode",
+  addInputRules() {
+    return [
+      new InputRule({
+        find: EMOJI_INPUT_RULE,
+        handler: ({ state, range, match }) => {
+          const shortcode = match.data?.["shortcode"];
+          const entry = typeof shortcode === "string" ? emojiByShortcode(shortcode) : void 0;
+          if (entry === void 0 || typeof shortcode !== "string") return null;
+          state.tr.insertText(entry.glyph, range.to - shortcode.length, range.to);
+          return void 0;
+        }
+      })
+    ];
+  }
+});
+function insertEmoji({
+  editor,
+  range,
+  props
+}) {
+  const entry = emojiByShortcode(props.id ?? "");
+  if (entry === void 0) return;
+  const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+  const to = nodeAfter?.text?.startsWith(" ") === true ? range.to + 1 : range.to;
+  editor.chain().focus().insertContentAt({ from: range.from, to }, [{ type: "text", text: `${entry.glyph} ` }]).run();
+}
+function emojiSuggestionItems(query) {
+  return searchEmoji(query).map((entry) => ({ id: entry.name, label: entry.glyph }));
+}
+function richSubsetExtensions(renderers = {}) {
+  return [
+    StarterKit.configure({
+      heading: { levels: [...RICH_HEADING_LEVELS] },
+      // horizontalRule: default, IN — owner, 2026-09-07.
+      underline: false,
+      link: {
+        openOnClick: false,
+        autolink: true,
+        linkOnPaste: true,
+        enableClickSelection: false
+      }
+    }),
+    ThreadUnderline,
+    ThreadEmojiShortcode,
+    ThreadMention.configure({
+      HTMLAttributes: { class: "ds-thread-mention" },
+      suggestions: [
+        {
+          char: "@",
+          pluginKey: THREAD_MENTION_SUGGESTION_KEY,
+          minQueryLength: MENTION_SUGGESTION_MIN_QUERY,
+          ...renderers.mention
+        },
+        {
+          char: ":",
+          pluginKey: THREAD_EMOJI_SUGGESTION_KEY,
+          minQueryLength: EMOJI_SUGGESTION_MIN_QUERY,
+          // The plugin's own view of what it is offering. The POPUP does not
+          // read this — it recomputes from the query, because
+          // `@tiptap/suggestion` types its items as `any` and the composer
+          // does not take `any` — but leaving it unset would make the plugin's
+          // state say "no items" while eight are on screen, which is a lie any
+          // future reader of that state would trip over.
+          items: ({ query }) => emojiSuggestionItems(query),
+          command: insertEmoji,
+          // A shortcode typed inside code stays literal: `:tada:` in a snippet
+          // is text about an emoji, not an emoji. The mention trigger keeps
+          // the extension's own default, which asks the schema whether a
+          // mention node may sit here.
+          allow: ({ editor }) => !editor.isActive("codeBlock") && !editor.isActive("code"),
+          ...renderers.emoji
+        }
+      ]
+    }),
+    Markdown
+  ];
+}
+var probe = null;
+function getProbe() {
+  if (probe === null) {
+    probe = new Editor({ element: null, extensions: richSubsetExtensions(), content: "" });
+  }
+  return probe;
+}
+function getManager() {
+  const manager = getProbe().markdown;
+  if (manager === void 0) {
+    throw new Error("rich composer: the Markdown extension did not attach a manager");
+  }
+  return manager;
+}
+function getSchema() {
+  return getProbe().schema;
+}
+function parseRichMarkdown(markdown) {
+  return canonicalizeInlineMarks(getManager().parse(markdown));
+}
+var BOUNDARY_MARKS = ["bold", "italic", "underline", "strike", "code"];
+function hasMark(node, type) {
+  return (node.marks ?? []).some((mark) => mark.type === type);
+}
+function withoutMark(node, type) {
+  const marks = (node.marks ?? []).filter((mark) => mark.type !== type);
+  const { marks: _marks, ...rest } = node;
+  return marks.length === 0 ? rest : { ...rest, marks };
+}
+function trimMarkRuns(content, type) {
+  const out = [];
+  let run = [];
+  const flush = () => {
+    if (run.length === 0) return;
+    const first = run[0];
+    const last = run[run.length - 1];
+    if (first === void 0 || last === void 0) return;
+    const leading = /^\s+/.exec(first.text ?? "")?.[0] ?? "";
+    if (leading !== "" && leading.length < (first.text ?? "").length) {
+      run[0] = { ...first, text: (first.text ?? "").slice(leading.length) };
+      out.push(withoutMark({ ...first, text: leading }, type));
+    } else if (leading !== "") {
+      run[0] = withoutMark(first, type);
+    }
+    const tail = run[run.length - 1];
+    if (tail !== void 0 && run.length >= 1 && !(run.length === 1 && leading !== "" && leading.length >= (first.text ?? "").length)) {
+      const trailing = /\s+$/.exec(tail.text ?? "")?.[0] ?? "";
+      if (trailing !== "" && trailing.length < (tail.text ?? "").length) {
+        run[run.length - 1] = { ...tail, text: (tail.text ?? "").slice(0, -trailing.length) };
+        out.push(...run);
+        out.push(withoutMark({ ...tail, text: trailing }, type));
+        run = [];
+        return;
+      }
+      if (trailing !== "" && run.length > 1) {
+        run[run.length - 1] = withoutMark(tail, type);
+      }
+    }
+    out.push(...run);
+    run = [];
+  };
+  for (const node of content) {
+    if (node.type === "text" && hasMark(node, type)) {
+      run.push(node);
+      continue;
+    }
+    flush();
+    out.push(node);
+  }
+  flush();
+  return out;
+}
+function canonicalizeInlineMarks(node) {
+  const content = node.content;
+  if (content === void 0) return node;
+  if (node.type === "paragraph" || node.type === "heading") {
+    let inline = [...content];
+    for (const type of BOUNDARY_MARKS) inline = trimMarkRuns(inline, type);
+    return { ...node, content: inline };
+  }
+  return { ...node, content: content.map(canonicalizeInlineMarks) };
+}
+function normalizeRichDocument(doc) {
+  const node = Node$1.fromJSON(getSchema(), doc);
+  node.check();
+  return node.toJSON();
+}
+var ESCAPE_SENTINEL = "\uE000";
+function hasCodeMark(node) {
+  return (node.marks ?? []).some((mark) => mark.type === "code");
+}
+function escapeBlockStart(text) {
+  return text.replace(/^(#{1,6})(?=[ \t]|$)/, (hashes) => hashes.replace(/#/g, `${ESCAPE_SENTINEL}#`)).replace(/^([-+])(?=[ \t]|$)/, `${ESCAPE_SENTINEL}$1`).replace(/^(\d{1,9})([.)])(?=[ \t]|$)/, `$1${ESCAPE_SENTINEL}$2`).replace(/^-{3,}[ \t]*$/, (rule) => `${ESCAPE_SENTINEL}${rule}`);
+}
+function escapePlusRuns(text) {
+  return text.replace(/\+{2,}/g, (run) => run.replace(/\+/g, `${ESCAPE_SENTINEL}+`));
+}
+function markLiteralSyntax(node) {
+  if (node.type === "codeBlock") return node;
+  const content = node.content;
+  if (content === void 0) return node;
+  let lineStart = node.type === "paragraph" || node.type === "heading";
+  const next = content.map((child) => {
+    if (child.type === "text") {
+      const startsLine = lineStart;
+      lineStart = false;
+      if (hasCodeMark(child)) return child;
+      const source = (child.text ?? "").replaceAll(ESCAPE_SENTINEL, "");
+      let text = escapePlusRuns(source);
+      if (startsLine) text = escapeBlockStart(text);
+      return text === child.text ? child : { ...child, text };
+    }
+    if (child.type === "hardBreak") {
+      lineStart = true;
+      return child;
+    }
+    lineStart = false;
+    return markLiteralSyntax(child);
+  });
+  return { ...node, content: next };
+}
+function serializeRichMarkdown(doc) {
+  return getManager().serialize(markLiteralSyntax(canonicalizeInlineMarks(doc))).replaceAll(ESCAPE_SENTINEL, "\\").trimEnd();
+}
+var SUPPORTED_TOKENS = /* @__PURE__ */ new Set([
+  "space",
+  "paragraph",
+  "heading",
+  "hr",
+  "blockquote",
+  "list",
+  "list_item",
+  "code",
+  "def",
+  "text",
+  "strong",
+  "em",
+  "del",
+  "codespan",
+  "link",
+  "br",
+  "escape",
+  "underline",
+  "mention"
+]);
+function tokensSupported(tokens) {
+  return tokens.every((token) => {
+    const type = token.type;
+    if (type === void 0 || !SUPPORTED_TOKENS.has(type)) return false;
+    if (type === "heading" && !RICH_HEADING_LEVEL_SET.has(token.depth ?? 1)) return false;
+    if (type === "list_item" && token["task"] === true) return false;
+    const children = [...token.tokens ?? [], ...token.items ?? []];
+    return tokensSupported(children);
+  });
+}
+function documentSupported(node) {
+  if (node.type === "heading") {
+    const level = node.attrs?.["level"];
+    if (typeof level !== "number" || !RICH_HEADING_LEVEL_SET.has(level)) return false;
+  }
+  if (node.type === "mention" && readMentionAttrs(node.attrs) === null) return false;
+  return (node.content ?? []).every(documentSupported);
+}
+function isRichEditable(markdown) {
+  if (markdown.trim() === "") return true;
+  const manager = getManager();
+  let tokens;
+  try {
+    tokens = manager.instance.lexer(markdown);
+  } catch {
+    return false;
+  }
+  if (!tokensSupported(tokens)) return false;
+  try {
+    const doc = manager.parse(markdown);
+    if (!documentSupported(doc)) return false;
+    normalizeRichDocument(doc);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function wrapIndex(current, length, delta) {
+  if (length <= 0) return 0;
+  return ((current + delta) % length + length) % length;
+}
+function listScrollTop(view, target) {
+  if (target.offsetTop < view.scrollTop) return target.offsetTop;
+  const bottom = target.offsetTop + target.offsetHeight;
+  if (bottom > view.scrollTop + view.clientHeight) return bottom - view.clientHeight;
+  return view.scrollTop;
+}
+function SuggestionList({
+  id,
+  label,
+  options,
+  activeIndex,
+  optionId,
+  onSelect,
+  onActivate
+}) {
+  const listRef = useRef(null);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (list === null) return;
+    const option = list.children.item(activeIndex);
+    if (!(option instanceof HTMLElement)) return;
+    list.scrollTop = listScrollTop(list, option);
+  }, [activeIndex, options]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      id,
+      role: "listbox",
+      "aria-label": label,
+      className: "ds-thread-suggestions",
+      onMouseDown: (event) => {
+        event.preventDefault();
+      },
+      children: options.map((option, index) => {
+        const active = index === activeIndex;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: optionId(index),
+            role: "option",
+            "aria-selected": active,
+            tabIndex: -1,
+            "data-active": active,
+            className: "ds-thread-suggestions__option",
+            onMouseDown: (event) => {
+              event.preventDefault();
+            },
+            onMouseEnter: () => {
+              onActivate(index);
+            },
+            onClick: () => {
+              onSelect(index);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...option.glyphDecorative === true || option.glyph === void 0 ? { "aria-hidden": true } : {},
+                  className: "ds-thread-suggestions__glyph",
+                  children: option.glyph
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ds-thread-suggestions__label", children: option.label }),
+              option.hint === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "ds-thread-suggestions__hint", children: option.hint })
+            ]
+          },
+          option.key
+        );
+      })
+    }
+  );
+}
+var DRAFT_DEBOUNCE_MS = 300;
+var FAIL_CLOSED_NOTICE = "Opened in the plain editor: this comment uses formatting the rich editor cannot hold. Nothing was changed.";
+var IS_APPLE = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+var SEND_KEYCAP = IS_APPLE ? "\u2318\u21B5" : "Ctrl \u21B5";
+var MOD_NAME = IS_APPLE ? "Command" : "Control";
+var BUBBLE_MENU_KEY = new PluginKey("threadBubbleMenu");
+function RichThreadComposerImpl(props) {
+  const { value, onChange, announce } = props;
+  const lastEmitted = useRef(null);
+  const [gate, setGate] = useState(() => ({ value, rich: isRichEditable(value) }));
+  if (value !== gate.value) {
+    setGate({ value, rich: value === lastEmitted.current ? gate.rich : isRichEditable(value) });
+  }
+  const emit = useCallback(
+    (next) => {
+      lastEmitted.current = next;
+      onChange(next);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    if (!gate.rich) announce?.(FAIL_CLOSED_NOTICE);
+  }, [announce, gate.rich]);
+  if (!gate.rich) {
+    const {
+      onEditor: _onEditor,
+      mentionItems: _items,
+      announce: _announce,
+      uploadAttachment: _uploadAttachment,
+      attachGif: _attachGif,
+      searchGifs: _searchGifs,
+      attachmentAccept: _attachmentAccept,
+      attachmentMaxPerComment: _attachmentMaxPerComment,
+      attachmentMaxFileBytes: _attachmentMaxFileBytes,
+      attachmentMaxTotalBytes: _attachmentMaxTotalBytes,
+      ...plain
+    } = props;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--space-1)]", children: [
+      /* @__PURE__ */ jsx(ComposerNotice, { children: FAIL_CLOSED_NOTICE }),
+      /* @__PURE__ */ jsx(ThreadComposer, { ...plain, onChange: emit })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(RichSurface, { ...props, onChange: emit });
+}
+var EMPTY_ROWS = { options: [], attrs: [] };
+var SUGGESTION_KEYS = {
+  mention: THREAD_MENTION_SUGGESTION_KEY,
+  emoji: THREAD_EMOJI_SUGGESTION_KEY
+};
+var SUGGESTION_LABELS = {
+  mention: "Mention someone",
+  emoji: "Emoji"
+};
+var SUGGESTION_NOUNS = {
+  mention: "mention",
+  emoji: "emoji"
+};
+var SUGGESTION_MIN_QUERY = {
+  mention: MENTION_SUGGESTION_MIN_QUERY,
+  emoji: EMOJI_SUGGESTION_MIN_QUERY
+};
+var MENTION_KIND_LABELS = {
+  user: "Person",
+  task_item: "Task",
+  task_board: "Board"
+};
+function exitSuggestionPlugin(view, kind) {
+  view.dispatch(view.state.tr.setMeta(SUGGESTION_KEYS[kind], { exit: true }));
+}
+function emojiRows(query) {
+  const entries = searchEmoji(query);
+  return {
+    options: entries.map((entry) => ({
+      key: entry.name,
+      label: `:${entry.name}:`,
+      glyph: entry.glyph
+    })),
+    attrs: entries.map((entry) => ({ id: entry.name, label: entry.glyph }))
+  };
+}
+function leadingInitial(label) {
+  return ([...label][0] ?? "").toUpperCase();
+}
+function mentionRows(items) {
+  return {
+    options: items.map((item) => ({
+      key: `${item.type}:${item.id}`,
+      label: item.label,
+      hint: MENTION_KIND_LABELS[item.type],
+      glyph: leadingInitial(item.label),
+      // The initial is the label's own first letter — decoration, not
+      // information. The emoji rows above deliberately do NOT set this.
+      glyphDecorative: true
+    })),
+    attrs: [...items]
+  };
+}
+function isPlainTab(event) {
+  return event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+var BARE_URL = /^(?:https?:\/\/|www\.)\S+$/i;
+function normalizeHref(input) {
+  const trimmed = input.trim();
+  if (trimmed === "") return null;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) {
+    return /^(?:https?:|mailto:|tel:)/i.test(trimmed) ? trimmed : null;
+  }
+  if (/^(?:www\.)?[\w-]+(?:\.[\w-]+)+(?:[/?#]\S*)?$/i.test(trimmed)) return `https://${trimmed}`;
+  return null;
+}
+function readSpaceToken(element, token, fallback) {
+  if (element === null || typeof getComputedStyle !== "function") return fallback;
+  const raw = parseFloat(getComputedStyle(element).getPropertyValue(token));
+  return Number.isFinite(raw) && raw > 0 ? raw : fallback;
+}
+function focusableButtons(root) {
+  if (root === null) return [];
+  return Array.from(root.querySelectorAll("button:not([disabled])"));
+}
+function RichSurface({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder = "Add a comment\u2026",
+  submitLabel = "Comment",
+  cancelLabel = "Cancel",
+  sending = false,
+  disabled = false,
+  replyingTo,
+  avatar,
+  rows = 3,
+  mode,
+  onModeChange,
+  autoFocus = false,
+  toolbar = true,
+  maxLength,
+  label,
+  className,
+  onEditor,
+  mentionItems,
+  announce,
+  uploadAttachment,
+  attachGif,
+  searchGifs,
+  attachmentAccept,
+  attachmentMaxPerComment,
+  attachmentMaxFileBytes,
+  attachmentMaxTotalBytes
+}) {
+  const labelId = useId();
+  const hintId = useId();
+  const linkErrorId = useId();
+  const listboxId = useId();
+  const shellRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const linkInputRef = useRef(null);
+  const [gifPickerOpen, setGifPickerOpen] = useState(false);
+  const attachments = useAttachments({
+    ...uploadAttachment === void 0 ? {} : { upload: uploadAttachment },
+    ...attachGif === void 0 ? {} : { attachGif },
+    ...announce === void 0 ? {} : { onError: announce },
+    ...attachmentMaxPerComment === void 0 ? {} : { maxPerComment: attachmentMaxPerComment },
+    ...attachmentMaxFileBytes === void 0 ? {} : { maxFileBytes: attachmentMaxFileBytes },
+    ...attachmentMaxTotalBytes === void 0 ? {} : { maxTotalBytes: attachmentMaxTotalBytes }
+  });
+  const latest = useRef({ value, onChange, onSubmit, onCancel, mentionItems, announce });
+  useLayoutEffect(() => {
+    latest.current = { value, onChange, onSubmit, onCancel, mentionItems, announce };
+  });
+  const editorRef = useRef(null);
+  const lastEmitted = useRef(value);
+  const emitTimer = useRef(null);
+  const [pendingSubmit, setPendingSubmit] = useState(null);
+  const composing = useRef(false);
+  const bubbleOpenRef = useRef(false);
+  const suggestionRef = useRef(null);
+  const activeIndexRef = useRef(0);
+  const [suggestion, setSuggestion] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const setActiveOption = useCallback((index) => {
+    activeIndexRef.current = index;
+    setActiveIndex(index);
+  }, []);
+  const optionDomId = useCallback(
+    (index) => `${listboxId}-option-${String(index)}`,
+    [listboxId]
+  );
+  const commitSuggestion = useCallback((index) => {
+    const active2 = suggestionRef.current;
+    const attrs = active2?.attrs[index];
+    if (active2 === void 0 || active2 === null || attrs === void 0) return;
+    active2.command(attrs);
+  }, []);
+  const dismissedSelection = useRef(null);
+  const [bubbleOpen, setBubbleOpen] = useState(false);
+  const [focusRequest, setFocusRequest] = useState(null);
+  const [linkMode, setLinkMode] = useState(false);
+  const [linkDraft, setLinkDraft] = useState("");
+  const [linkError, setLinkError] = useState(false);
+  const [rovingIndex, setRovingIndex] = useState(0);
+  const setBubble = useCallback((open) => {
+    bubbleOpenRef.current = open;
+    setBubbleOpen((prev) => prev === open ? prev : open);
+    if (!open) {
+      setLinkMode(false);
+      setLinkError(false);
+      setFocusRequest(null);
+    }
+  }, []);
+  const shouldShowBubble = useCallback((editor2) => {
+    if (!editor2.isEditable) return false;
+    const { selection, doc } = editor2.state;
+    if (selection.empty || !isTextSelection(selection)) return false;
+    if (doc.textBetween(selection.from, selection.to, " ").trim() === "") return false;
+    if (editor2.isActive("codeBlock")) return false;
+    if (editor2.view.composing || composing.current) return false;
+    if (suggestionRef.current !== null) return false;
+    const dismissed = dismissedSelection.current;
+    if (dismissed !== null) {
+      if (dismissed.from === selection.from && dismissed.to === selection.to) return false;
+      dismissedSelection.current = null;
+    }
+    return true;
+  }, []);
+  const syncBubble = useCallback(
+    (editor2) => {
+      setBubble(shouldShowBubble(editor2));
+    },
+    [setBubble, shouldShowBubble]
+  );
+  const dismissBubble = useCallback(
+    (editor2) => {
+      const { from, to } = editor2.state.selection;
+      dismissedSelection.current = { from, to };
+      setBubble(false);
+      editor2.view.dispatch(editor2.state.tr.setMeta(BUBBLE_MENU_KEY, "hide"));
+    },
+    [setBubble]
+  );
+  const emitNow = useCallback((editor2) => {
+    const markdown = serializeRichMarkdown(editor2.getJSON());
+    if (markdown !== lastEmitted.current) {
+      lastEmitted.current = markdown;
+      latest.current.onChange(markdown);
+    }
+    return markdown;
+  }, []);
+  const clearEmitTimer = useCallback(() => {
+    if (emitTimer.current !== null) {
+      window.clearTimeout(emitTimer.current);
+      emitTimer.current = null;
+    }
+  }, []);
+  const scheduleEmit = useCallback(
+    (editor2) => {
+      clearEmitTimer();
+      emitTimer.current = window.setTimeout(() => {
+        emitTimer.current = null;
+        if (!editor2.isDestroyed) emitNow(editor2);
+      }, DRAFT_DEBOUNCE_MS);
+    },
+    [clearEmitTimer, emitNow]
+  );
+  const flushEmit = useCallback(
+    (editor2) => {
+      clearEmitTimer();
+      return emitNow(editor2);
+    },
+    [clearEmitTimer, emitNow]
+  );
+  const requestSubmit = useCallback(
+    (editor2) => {
+      if (editor2.isEmpty) return;
+      const markdown = flushEmit(editor2);
+      setPendingSubmit(markdown);
+    },
+    [flushEmit]
+  );
+  const parsePastedText = useCallback(
+    (text, plain, view) => {
+      const { schema } = view.state;
+      const trimmed = text.trim();
+      const linkType = schema.marks["link"];
+      const paragraphType = schema.nodes["paragraph"];
+      if (linkType !== void 0 && BARE_URL.test(trimmed)) {
+        const href = /^www\./i.test(trimmed) ? `https://${trimmed}` : trimmed;
+        return new Slice(Fragment.from(schema.text(trimmed, [linkType.create({ href })])), 0, 0);
+      }
+      if (!plain && isRichEditable(text)) {
+        try {
+          const doc = Node$1.fromJSON(schema, parseRichMarkdown(text));
+          doc.check();
+          return Slice.maxOpen(doc.content);
+        } catch {
+        }
+      }
+      if (paragraphType === void 0) return Slice.empty;
+      const paragraphs = text.split(/\r\n?|\n/).map((line) => paragraphType.create(null, line === "" ? null : schema.text(line)));
+      return Slice.maxOpen(Fragment.from(paragraphs));
+    },
+    []
+  );
+  const makeSuggestionRenderer = useCallback(
+    (kind) => {
+      let container = null;
+      let unmount = null;
+      let lastQuery = null;
+      const rowsFor = (query) => {
+        if (query.length < SUGGESTION_MIN_QUERY[kind]) return EMPTY_ROWS;
+        if (kind === "emoji") return emojiRows(query);
+        const items = latest.current.mentionItems?.(query);
+        return items === void 0 ? EMPTY_ROWS : mentionRows(items);
+      };
+      const close = () => {
+        if (unmount !== null) {
+          unmount();
+          unmount = null;
+        }
+        container = null;
+        lastQuery = null;
+        if (suggestionRef.current?.kind === kind) suggestionRef.current = null;
+        setSuggestion((prev) => prev !== null && prev.kind === kind ? null : prev);
+      };
+      const sync = (props) => {
+        const rows2 = rowsFor(props.query);
+        if (rows2.options.length === 0) {
+          close();
+          return;
+        }
+        const opening = container === null;
+        let element = container;
+        if (element === null) {
+          element = document.createElement("div");
+          element.className = "ds-thread-suggestions-anchor";
+          container = element;
+          const anchored = element;
+          unmount = props.mount(element, {
+            onPosition: ({ x, y, strategy }) => {
+              anchored.style.position = strategy;
+              anchored.style.left = `${String(x)}px`;
+              anchored.style.top = `${String(y)}px`;
+            }
+          });
+        }
+        if (!opening && lastQuery === props.query) return;
+        suggestionRef.current = { kind, attrs: rows2.attrs, command: props.command };
+        lastQuery = props.query;
+        setActiveOption(0);
+        setBubble(false);
+        setSuggestion({ kind, container: element, options: rows2.options });
+        if (opening) {
+          latest.current.announce?.(
+            `${String(rows2.options.length)} ${SUGGESTION_NOUNS[kind]} suggestions. Use the arrow keys to choose, Enter to insert, Escape to close.`
+          );
+        }
+      };
+      return {
+        onStart: sync,
+        onUpdate: sync,
+        onExit: close,
+        // Escape, the arrows, Enter and Tab are all answered in
+        // `handleKeyDown` below — `editorProps` handlers run before any
+        // plugin's, which is what makes ADR-148 D9's Escape order a fact.
+        onKeyDown: () => false
+      };
+    },
+    [setActiveOption, setBubble]
+  );
+  const editor = useEditor(
+    {
+      extensions: [
+        ...richSubsetExtensions({
+          mention: { render: () => makeSuggestionRenderer("mention") },
+          emoji: { render: () => makeSuggestionRenderer("emoji") }
+        }),
+        Placeholder.configure({ placeholder })
+      ],
+      content: value,
+      contentType: "markdown",
+      editable: !disabled,
+      autofocus: autoFocus ? "end" : false,
+      // D8 is implemented once, in `clipboardTextParser` below. TipTap's
+      // regex paste rules (bold, italic, strike, code, …) would run a second,
+      // looser pass over the pasted text — and re-format a Shift-paste that
+      // was meant to stay literal. Input rules (typing `**x**`, `- `, `---`)
+      // are unaffected.
+      enablePasteRules: false,
+      editorProps: {
+        /**
+         * THE fix for "the entire viewport is scrolling down" on Enter.
+         *
+         * ProseMirror scrolls the selection into view after any transaction
+         * that asks for it — every Enter, every arrow key, most typing. Its
+         * `scrollRectIntoView` walks UP from the editor and scrolls *every*
+         * scrollable ancestor it finds until the caret is visible: the
+         * thread's own body, then `PageShell`'s content region, then whatever
+         * else. Capping the editor's height does not stop that; it only
+         * changes which ancestor moves. The ancestors have to be taken out of
+         * the walk entirely, and this hook is the only supported way to do it.
+         *
+         * Returning `true` means "handled — do not run the default". We then
+         * do the one scroll that is legitimate: bring the caret into view
+         * inside the EDITOR, and touch nothing else. `scrollTop` on a single
+         * element cannot chain.
+         */
+        handleScrollToSelection: (view) => {
+          const dom = view.dom;
+          const head = view.state.selection.head;
+          let caret;
+          try {
+            caret = view.coordsAtPos(head);
+          } catch {
+            return true;
+          }
+          const box = dom.getBoundingClientRect();
+          const pad = parseFloat(getComputedStyle(dom).lineHeight) || 0;
+          dom.scrollTop += caretScrollDelta(box, caret, pad);
+          return true;
+        },
+        attributes: {
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-labelledby": labelId,
+          "aria-describedby": hintId
+        },
+        handleDOMEvents: {
+          // D9: Tab is never captured. Returning true here skips ProseMirror's
+          // own keydown handling (and every keymap) without preventDefault, so
+          // the browser moves focus. ADR-149 D5 is the one exception: while a
+          // suggestion popup is open Tab INSERTS, so this stands down and
+          // `handleKeyDown` answers it (and does preventDefault, so focus
+          // stays where it already is — on the editor).
+          keydown: (_view, event) => isPlainTab(event) && suggestionRef.current === null,
+          compositionstart: () => {
+            composing.current = true;
+            setBubble(false);
+            return false;
+          },
+          compositionend: () => {
+            composing.current = false;
+            return false;
+          }
+        },
+        handleKeyDown: (view, event) => {
+          const editorFromView = editorRef.current;
+          if (editorFromView === null) return false;
+          const mod = event.metaKey || event.ctrlKey;
+          if (event.key === "Escape") {
+            if (bubbleOpenRef.current) {
+              dismissBubble(editorFromView);
+              return true;
+            }
+            const openSuggestion = suggestionRef.current;
+            if (openSuggestion !== null) {
+              exitSuggestionPlugin(view, openSuggestion.kind);
+              return true;
+            }
+            const cancel = latest.current.onCancel;
+            if (cancel !== void 0) {
+              cancel();
+              return true;
+            }
+            return false;
+          }
+          if (mod && event.key === "Enter") {
+            requestSubmit(editorFromView);
+            return true;
+          }
+          const navigating = suggestionRef.current;
+          if (navigating !== null && !mod && !event.altKey && !event.shiftKey) {
+            const count = navigating.attrs.length;
+            if (event.key === "ArrowDown") {
+              setActiveOption(wrapIndex(activeIndexRef.current, count, 1));
+              return true;
+            }
+            if (event.key === "ArrowUp") {
+              setActiveOption(wrapIndex(activeIndexRef.current, count, -1));
+              return true;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+              commitSuggestion(activeIndexRef.current);
+              return true;
+            }
+          }
+          if (mod && event.shiftKey && !event.altKey && event.key.toLowerCase() === "x") {
+            editorFromView.chain().focus().toggleStrike().run();
+            return true;
+          }
+          if (mod && event.key === ".") {
+            if (!shouldShowBubble(editorFromView)) return false;
+            dismissedSelection.current = null;
+            setBubble(true);
+            setLinkMode(false);
+            setRovingIndex(0);
+            setFocusRequest("toolbar");
+            return true;
+          }
+          if (mod && !event.shiftKey && !event.altKey && event.key.toLowerCase() === "k") {
+            if (editorFromView.isActive("link") && view.state.selection.empty) {
+              editorFromView.commands.extendMarkRange("link");
+            }
+            if (!shouldShowBubble(editorFromView)) return true;
+            dismissedSelection.current = null;
+            setBubble(true);
+            setLinkDraft(readHref(editorFromView));
+            setLinkError(false);
+            setLinkMode(true);
+            setFocusRequest("link");
+            return true;
+          }
+          return false;
+        },
+        handlePaste: (_view, event) => {
+          const dt = event.clipboardData;
+          if (!dt || dt.files.length > 0 || dt.types.includes("text/html")) return false;
+          return attachments.addPastedText(dt.getData("text/plain"));
+        },
+        clipboardTextParser: (text, _context, plain, view) => parsePastedText(text, plain, view)
+      },
+      onCreate: ({ editor: created }) => {
+        editorRef.current = created;
+      },
+      onUpdate: ({ editor: updated }) => {
+        setPendingSubmit(null);
+        scheduleEmit(updated);
+        syncBubble(updated);
+      },
+      onSelectionUpdate: ({ editor: updated }) => {
+        syncBubble(updated);
+      },
+      onFocus: ({ editor: focused }) => {
+        syncBubble(focused);
+      },
+      onBlur: ({ editor: blurred, event }) => {
+        flushEmit(blurred);
+        const next = event.relatedTarget;
+        const insideMenu = next instanceof Node && bubbleRef.current?.contains(next) === true;
+        if (!insideMenu) setBubble(false);
+        const openSuggestion = suggestionRef.current;
+        if (openSuggestion !== null) exitSuggestionPlugin(blurred.view, openSuggestion.kind);
+      }
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
+  useEffect(() => {
+    onEditor?.(editor);
+    return () => {
+      onEditor?.(null);
+    };
+  }, [editor, onEditor]);
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled, editor]);
+  const insertPastedText = useCallback(
+    (localId) => {
+      const text = attachments.insertAsText(localId);
+      if (text === null) return;
+      const slice = parsePastedText(text, true, editor.view);
+      editor.view.dispatch(editor.state.tr.replaceSelection(slice).scrollIntoView());
+      editor.commands.focus();
+    },
+    [attachments, editor, parsePastedText]
+  );
+  useEffect(() => {
+    if (value === lastEmitted.current) return;
+    clearEmitTimer();
+    lastEmitted.current = value;
+    editor.commands.setContent(value, { contentType: "markdown", emitUpdate: false });
+  }, [clearEmitTimer, editor, value]);
+  useEffect(() => {
+    if (pendingSubmit === null || value !== pendingSubmit || attachments.isUploading) return;
+    if (attachments.attachments.some((attachment) => attachment.state !== "ready")) return;
+    setPendingSubmit(null);
+    onSubmit(attachments.ticketIds.length === 0 ? void 0 : attachments.ticketIds);
+    attachments.clear();
+  }, [attachments, onSubmit, pendingSubmit, value]);
+  useEffect(
+    () => () => {
+      if (emitTimer.current === null) return;
+      window.clearTimeout(emitTimer.current);
+      emitTimer.current = null;
+      if (latest.current.value === lastEmitted.current && !editor.isDestroyed) emitNow(editor);
+    },
+    [editor, emitNow]
+  );
+  const announced = useRef(false);
+  useEffect(() => {
+    if (maxLength === void 0) return;
+    const over = value.length > maxLength * 0.9;
+    if (over && !announced.current) {
+      announced.current = true;
+      announce?.(
+        `Approaching the comment length limit: ${String(value.length)} of ${String(maxLength)} characters`
+      );
+    } else if (!over) {
+      announced.current = false;
+    }
+  }, [announce, maxLength, value.length]);
+  useLayoutEffect(() => {
+    if (editor.isDestroyed) return;
+    const dom = editor.view.dom;
+    if (suggestion === null) {
+      dom.removeAttribute("aria-controls");
+      dom.removeAttribute("aria-activedescendant");
+      return;
+    }
+    dom.setAttribute("aria-controls", listboxId);
+    dom.setAttribute("aria-activedescendant", optionDomId(activeIndex));
+  }, [activeIndex, editor, listboxId, optionDomId, suggestion]);
+  useEffect(() => {
+    if (focusRequest === null || !bubbleOpen) return;
+    const target = focusRequest === "link" ? linkInputRef.current : focusableButtons(bubbleRef.current)[0];
+    if (target instanceof HTMLElement) {
+      target.focus();
+      setFocusRequest(null);
+    }
+  }, [bubbleOpen, focusRequest, linkMode]);
+  const active = useEditorState({
+    editor,
+    selector: ({ editor: current }) => ({
+      isEmpty: current.isEmpty,
+      bold: current.isActive("bold"),
+      italic: current.isActive("italic"),
+      underline: current.isActive("underline"),
+      strike: current.isActive("strike"),
+      code: current.isActive("code"),
+      link: current.isActive("link"),
+      h1: current.isActive("heading", { level: 1 }),
+      h2: current.isActive("heading", { level: 2 }),
+      h3: current.isActive("heading", { level: 3 }),
+      bulletList: current.isActive("bulletList"),
+      orderedList: current.isActive("orderedList"),
+      blockquote: current.isActive("blockquote"),
+      codeBlock: current.isActive("codeBlock")
+    })
+  });
+  const overLimit = maxLength !== void 0 && value.length > maxLength;
+  const canSend = !active.isEmpty && !sending && !disabled && !overLimit && pendingSubmit === null && !attachments.attachments.some((attachment) => attachment.state === "failed");
+  const openLinkField = useCallback(() => {
+    setLinkDraft(readHref(editor));
+    setLinkError(false);
+    setLinkMode(true);
+    setFocusRequest("link");
+  }, [editor]);
+  const applyLink = useCallback(() => {
+    const href = normalizeHref(linkDraft);
+    if (href === null) {
+      setLinkError(true);
+      return;
+    }
+    const applied = editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+    if (!applied) {
+      setLinkError(true);
+      return;
+    }
+    setLinkMode(false);
+    setLinkError(false);
+  }, [editor, linkDraft]);
+  const removeLink = useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setLinkMode(false);
+    setLinkError(false);
+  }, [editor]);
+  const closeLinkField = useCallback(() => {
+    setLinkMode(false);
+    setLinkError(false);
+    setRovingIndex(BUBBLE_ACTIONS.length - 1);
+    setFocusRequest("toolbar");
+  }, []);
+  const onToolbarKeyDown = useCallback(
+    (event) => {
+      const buttons = focusableButtons(event.currentTarget);
+      const current = buttons.findIndex((button) => button === document.activeElement);
+      const move = (index) => {
+        const next = buttons[(index + buttons.length) % buttons.length];
+        if (next === void 0) return;
+        setRovingIndex(buttons.indexOf(next));
+        next.focus();
+      };
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          move(current + 1);
+          return;
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          move(current - 1);
+          return;
+        case "Home":
+          event.preventDefault();
+          move(0);
+          return;
+        case "End":
+          event.preventDefault();
+          move(buttons.length - 1);
+          return;
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          dismissBubble(editor);
+          editor.commands.focus();
+          return;
+        default:
+          return;
+      }
+    },
+    [dismissBubble, editor]
+  );
+  const onLinkFieldKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        applyLink();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        closeLinkField();
+      }
+    },
+    [applyLink, closeLinkField]
+  );
+  const bubbleActive = {
+    bold: active.bold,
+    italic: active.italic,
+    underline: active.underline,
+    strike: active.strike,
+    code: active.code,
+    link: active.link
+  };
+  const runBubbleAction = useCallback(
+    (action) => {
+      switch (action) {
+        case "bold":
+          editor.chain().focus().toggleBold().run();
+          return;
+        case "italic":
+          editor.chain().focus().toggleItalic().run();
+          return;
+        case "underline":
+          editor.chain().focus().toggleUnderline().run();
+          return;
+        case "strike":
+          editor.chain().focus().toggleStrike().run();
+          return;
+        case "code":
+          editor.chain().focus().toggleCode().run();
+          return;
+        case "link":
+          openLinkField();
+          return;
+      }
+    },
+    [editor, openLinkField]
+  );
+  const runBlockAction = useCallback(
+    (action) => {
+      const chain = editor.chain().focus();
+      switch (action) {
+        case "h1":
+          chain.toggleHeading({ level: 1 }).run();
+          return;
+        case "h2":
+          chain.toggleHeading({ level: 2 }).run();
+          return;
+        case "h3":
+          chain.toggleHeading({ level: 3 }).run();
+          return;
+        case "bulletList":
+          chain.toggleBulletList().run();
+          return;
+        case "orderedList":
+          chain.toggleOrderedList().run();
+          return;
+        case "blockquote":
+          chain.toggleBlockquote().run();
+          return;
+        case "codeBlock":
+          chain.toggleCodeBlock().run();
+          return;
+        case "divider":
+          chain.setHorizontalRule().run();
+          return;
+      }
+    },
+    [editor]
+  );
+  const blockActive = {
+    h1: active.h1,
+    h2: active.h2,
+    h3: active.h3,
+    bulletList: active.bulletList,
+    orderedList: active.orderedList,
+    blockquote: active.blockquote,
+    codeBlock: active.codeBlock,
+    divider: false
+  };
+  const shellStyle = {
+    // Concentric: the host panel declares --thread-inner-radius as its own
+    // radius minus its padding. Nothing here eyeballs a corner.
+    borderRadius: "var(--thread-inner-radius, var(--radius-sm))",
+    borderColor: "rgb(var(--border))",
+    background: "rgb(var(--surface-card))",
+    "--composer-rows": String(rows)
+  };
+  const controlsDisabled = disabled || sending || pendingSubmit !== null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-[var(--space-1)]", className), children: [
+    replyingTo === void 0 ? null : /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "flex items-center gap-[var(--space-1)] text-[12px]",
+        style: { color: "rgb(var(--text-tertiary))" },
+        children: [
+          /* @__PURE__ */ jsx(CornerDownRight, { size: 10, strokeWidth: 1.5, "aria-hidden": "true" }),
+          "Replying to",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "rgb(var(--text-secondary))" }, children: replyingTo })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--space-2)]", children: [
+      avatar,
+      /* @__PURE__ */ jsx(
+        AttachmentDropZone,
+        {
+          onFiles: attachments.addFiles,
+          disabled: controlsDisabled || uploadAttachment === void 0,
+          className: "min-w-0 flex-1",
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: shellRef,
+              className: cn(
+                "ds-thread-rich-composer relative min-w-0 w-full border",
+                "transition-[border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]",
+                "motion-reduce:transition-none",
+                "focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus)]"
+              ),
+              style: shellStyle,
+              children: [
+                /* @__PURE__ */ jsx("span", { id: labelId, className: "sr-only", children: label }),
+                /* @__PURE__ */ jsx("span", { id: hintId, className: "sr-only", children: `${MOD_NAME}+Enter sends. ${MOD_NAME}+Period opens the formatting menu on a selection. Type @ to mention someone, or a colon and two letters for emoji, then use the arrow keys and Enter. Escape closes the menu${onCancel === void 0 ? "" : ", then cancels the reply"}.` }),
+                /* @__PURE__ */ jsx(EditorContent, { editor }),
+                suggestion === null ? null : createPortal(
+                  /* @__PURE__ */ jsx(
+                    SuggestionList,
+                    {
+                      id: listboxId,
+                      label: SUGGESTION_LABELS[suggestion.kind],
+                      options: suggestion.options,
+                      activeIndex,
+                      optionId: optionDomId,
+                      onSelect: commitSuggestion,
+                      onActivate: setActiveOption
+                    }
+                  ),
+                  suggestion.container
+                ),
+                /* @__PURE__ */ jsx(
+                  BubbleMenu,
+                  {
+                    ref: bubbleRef,
+                    editor,
+                    pluginKey: BUBBLE_MENU_KEY,
+                    updateDelay: 0,
+                    shouldShow: ({ editor: current }) => shouldShowBubble(current),
+                    appendTo: () => shellRef.current ?? document.body,
+                    options: {
+                      placement: "top",
+                      offset: readSpaceToken(shellRef.current, "--space-2", 8),
+                      flip: true,
+                      shift: true
+                    },
+                    className: "ds-thread-bubble-menu",
+                    "data-open": bubbleOpen,
+                    children: !bubbleOpen ? null : linkMode ? /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "group",
+                        "aria-label": "Link",
+                        className: "flex items-center gap-[var(--space-1)]",
+                        style: {
+                          padding: "var(--space-1)",
+                          background: "rgb(var(--surface-card))",
+                          border: "1px solid rgb(var(--border))",
+                          borderRadius: "var(--radius-sm)",
+                          boxShadow: "var(--shadow-lg)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ref: linkInputRef,
+                              type: "url",
+                              "aria-label": "Link URL",
+                              "aria-invalid": linkError,
+                              ...linkError ? { "aria-describedby": linkErrorId } : {},
+                              placeholder: "https://",
+                              value: linkDraft,
+                              onChange: (event) => {
+                                setLinkDraft(event.target.value);
+                                setLinkError(false);
+                              },
+                              onKeyDown: onLinkFieldKeyDown,
+                              className: "min-w-0 bg-transparent text-[12.5px] outline-none",
+                              style: {
+                                inlineSize: "22ch",
+                                blockSize: "var(--ctrl-sm)",
+                                paddingInline: "var(--space-2)",
+                                color: "rgb(var(--foreground))",
+                                borderRadius: "var(--radius-xs)",
+                                border: linkError ? "1px solid rgb(var(--warning))" : "1px solid rgb(var(--border))"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "icon",
+                              size: "sm",
+                              "aria-label": "Apply link",
+                              title: "Apply link",
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                              },
+                              onClick: applyLink,
+                              children: /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 2, "aria-hidden": "true" })
+                            }
+                          ),
+                          active.link ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "icon",
+                              size: "sm",
+                              "aria-label": "Remove link",
+                              title: "Remove link",
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                              },
+                              onClick: removeLink,
+                              children: /* @__PURE__ */ jsx(Unlink, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "icon",
+                              size: "sm",
+                              "aria-label": "Close link field",
+                              title: "Close",
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                              },
+                              onClick: closeLinkField,
+                              children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })
+                            }
+                          ),
+                          linkError ? /* @__PURE__ */ jsx("span", { id: linkErrorId, role: "alert", className: "sr-only", children: "Enter a web, email or phone link." }) : null
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "toolbar",
+                        "aria-label": "Format selection",
+                        "aria-orientation": "horizontal",
+                        onKeyDown: onToolbarKeyDown,
+                        children: BUBBLE_ACTIONS.map((action, index) => {
+                          const Icon = action.icon;
+                          return /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "icon",
+                              size: "sm",
+                              "aria-label": action.label,
+                              "aria-pressed": bubbleActive[action.id],
+                              title: `${action.label} (${MOD_NAME}+${action.keycap})`,
+                              tabIndex: index === rovingIndex ? 0 : -1,
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                              },
+                              onClick: () => {
+                                runBubbleAction(action.id);
+                              },
+                              children: /* @__PURE__ */ jsx(Icon, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })
+                            },
+                            action.id
+                          );
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AttachmentTray,
+                  {
+                    attachments: attachments.attachments,
+                    onRemove: attachments.remove,
+                    onInsertAsText: insertPastedText,
+                    className: "px-[var(--space-2)]"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ComposerFooter,
+                  {
+                    ...mode === void 0 ? {} : { mode },
+                    ...onModeChange === void 0 ? {} : { onModeChange },
+                    modeDisabled: controlsDisabled || attachments.attachments.length > 0,
+                    toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      uploadAttachment === void 0 ? null : /* @__PURE__ */ jsx(
+                        AttachmentButton,
+                        {
+                          onFiles: attachments.addFiles,
+                          accept: attachmentAccept ?? ATTACHMENT_ACCEPT,
+                          disabled: controlsDisabled
+                        }
+                      ),
+                      attachGif === void 0 || searchGifs === void 0 ? null : /* @__PURE__ */ jsxs(Popover, { open: gifPickerOpen, onOpenChange: setGifPickerOpen, children: [
+                        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "icon",
+                            size: "sm",
+                            "aria-label": "Choose a GIF",
+                            title: "Choose a GIF",
+                            disabled: controlsDisabled,
+                            children: /* @__PURE__ */ jsx(Images, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          Popover.Content,
+                          {
+                            "aria-label": "Choose a GIF",
+                            align: "start",
+                            className: "p-[var(--space-3)]",
+                            style: {
+                              inlineSize: "calc(var(--space-12) * 8)",
+                              maxInlineSize: "calc(100vw - var(--space-6))"
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              GifPicker,
+                              {
+                                search: searchGifs,
+                                onPick: (gif) => {
+                                  attachments.addGif(gif);
+                                  setGifPickerOpen(false);
+                                }
+                              }
+                            )
+                          }
+                        )
+                      ] }),
+                      toolbar ? BLOCK_ACTIONS.map((action) => {
+                        const Icon = action.icon;
+                        return /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "icon",
+                            size: "sm",
+                            "aria-label": action.label,
+                            title: action.label,
+                            ...action.id === "divider" ? {} : { "aria-pressed": blockActive[action.id] },
+                            disabled: controlsDisabled,
+                            onMouseDown: (event) => {
+                              event.preventDefault();
+                            },
+                            onClick: () => {
+                              runBlockAction(action.id);
+                            },
+                            children: /* @__PURE__ */ jsx(Icon, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })
+                          },
+                          action.id
+                        );
+                      }) : null
+                    ] }),
+                    meta: /* @__PURE__ */ jsx(Fragment$1, { children: maxLength === void 0 ? null : /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "tabular-nums text-right",
+                        style: {
+                          minInlineSize: "7ch",
+                          fontSize: "11.5px",
+                          color: value.length > maxLength * 0.9 ? "rgb(var(--warning-ink))" : "rgb(var(--text-tertiary))"
+                        },
+                        children: [
+                          value.length,
+                          "/",
+                          maxLength
+                        ]
+                      }
+                    ) }),
+                    actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      onCancel === void 0 ? null : /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: controlsDisabled, children: cancelLabel }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "primary",
+                          size: "sm",
+                          onClick: () => {
+                            requestSubmit(editor);
+                          },
+                          disabled: !canSend,
+                          "aria-label": sending ? "Sending\u2026" : submitLabel,
+                          trailingIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds-composer-keycap", children: /* @__PURE__ */ jsx(Kbd, { size: "sm", tone: "on-accent", children: SEND_KEYCAP }) }),
+                          children: sending ? "Sending\u2026" : submitLabel
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function readHref(editor) {
+  const href = editor.getAttributes("link")["href"];
+  return typeof href === "string" ? href : "";
+}
+var BUBBLE_ACTIONS = [
+  { id: "bold", label: "Bold", icon: Bold, keycap: "B" },
+  { id: "italic", label: "Italic", icon: Italic, keycap: "I" },
+  { id: "underline", label: "Underline", icon: Underline, keycap: "U" },
+  { id: "strike", label: "Strikethrough", icon: Strikethrough, keycap: "Shift+X" },
+  { id: "code", label: "Code", icon: Code, keycap: "E" },
+  { id: "link", label: "Link", icon: Link, keycap: "K" }
+];
+var BLOCK_ACTIONS = [
+  { id: "h1", label: "Heading 1", icon: Heading1 },
+  { id: "h2", label: "Heading 2", icon: Heading2 },
+  { id: "h3", label: "Heading 3", icon: Heading3 },
+  { id: "bulletList", label: "Bulleted list", icon: List },
+  { id: "orderedList", label: "Numbered list", icon: ListOrdered },
+  { id: "blockquote", label: "Quote", icon: TextQuote },
+  { id: "codeBlock", label: "Code block", icon: SquareCode },
+  { id: "divider", label: "Divider", icon: Minus }
+];
+
+export { DRAFT_DEBOUNCE_MS, FAIL_CLOSED_NOTICE, RichThreadComposerImpl as default };
+//# sourceMappingURL=rich-composer-impl-5NO443A6.js.map
+//# sourceMappingURL=rich-composer-impl-5NO443A6.js.map