@longd/layout-ui 0.1.0 → 0.1.2

package/dist/chunk-ZME2TTK5.js

@@ -0,0 +1,2527 @@
+import {
+  cn
+} from "./chunk-BLJWR4ZV.js";
+import {
+  detectQuotes
+} from "./chunk-YXQGAND3.js";
+
+// src/layout/cat-editor/CATEditor.tsx
+import {
+  forwardRef,
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import {
+  $createParagraphNode as $createParagraphNode2,
+  $createRangeSelection as $createRangeSelection2,
+  $createTextNode as $createTextNode3,
+  $getNodeByKey,
+  $getRoot as $getRoot3,
+  $setSelection as $setSelection2,
+  COMMAND_PRIORITY_CRITICAL,
+  KEY_DOWN_COMMAND
+} from "lexical";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+
+// src/layout/cat-editor/constants.ts
+var CODEPOINT_DISPLAY_MAP = {
+  0: "\u2400",
+  9: "\u21E5",
+  10: "\u21A9",
+  12: "\u240C",
+  13: "\u21B5",
+  160: "\u237D",
+  8194: "\u2423",
+  8195: "\u2423",
+  8201: "\xB7",
+  8202: "\xB7",
+  8203: "\u2205",
+  8204: "\u2298",
+  8205: "\u2295",
+  8288: "\u2040",
+  12288: "\u25A1",
+  65279: "\u25CA"
+};
+var _codepointOverrides;
+function setCodepointOverrides(overrides) {
+  _codepointOverrides = overrides;
+}
+function getEffectiveCodepointMap() {
+  return _codepointOverrides ? { ...CODEPOINT_DISPLAY_MAP, ..._codepointOverrides } : CODEPOINT_DISPLAY_MAP;
+}
+var NL_MARKER_PREFIX = "__nl-";
+function replaceInvisibleChars(text, overrides) {
+  const map = overrides ? { ...CODEPOINT_DISPLAY_MAP, ...overrides } : getEffectiveCodepointMap();
+  let result = "";
+  for (const ch of text) {
+    const cp = ch.codePointAt(0) ?? 0;
+    result += map[cp] ?? ch;
+  }
+  return result;
+}
+
+// src/layout/cat-editor/highlight-node.ts
+import { TextNode } from "lexical";
+var HighlightNode = class _HighlightNode extends TextNode {
+  __highlightTypes;
+  __ruleIds;
+  __displayText;
+  static getType() {
+    return "highlight";
+  }
+  static clone(node) {
+    return new _HighlightNode(
+      node.__text,
+      node.__highlightTypes,
+      node.__ruleIds,
+      node.__displayText,
+      node.__key
+    );
+  }
+  constructor(text, highlightTypes, ruleIds, displayText, key) {
+    super(text, key);
+    this.__highlightTypes = highlightTypes;
+    this.__ruleIds = ruleIds;
+    this.__displayText = displayText ?? "";
+  }
+  createDOM(config) {
+    const dom = super.createDOM(config);
+    dom.classList.add("cat-highlight");
+    for (const t of this.__highlightTypes.split(",")) {
+      dom.classList.add(`cat-highlight-${t}`);
+      if (t.startsWith("glossary-")) {
+        dom.classList.add("cat-highlight-glossary");
+      }
+      if (t.startsWith("spellcheck-")) {
+        dom.classList.add("cat-highlight-spellcheck");
+      }
+    }
+    if (this.__highlightTypes.includes(",")) {
+      dom.classList.add("cat-highlight-nested");
+    }
+    dom.dataset.highlightTypes = this.__highlightTypes;
+    dom.dataset.ruleIds = this.__ruleIds;
+    if (this.__ruleIds.startsWith(NL_MARKER_PREFIX)) {
+      dom.style.userSelect = "none";
+      dom.classList.add("cat-highlight-nl-marker");
+    }
+    if (this.__displayText) {
+      dom.dataset.display = this.__displayText;
+    }
+    if (this.__highlightTypes.split(",").includes("tag-collapsed")) {
+      dom.textContent = "\u200B";
+      dom.contentEditable = "false";
+    }
+    if (this.__highlightTypes.split(",").includes("special-char")) {
+      if (this.__text === " ") {
+        dom.classList.add("cat-highlight-space-char");
+        dom.style.position = "relative";
+      } else {
+        const replaced = replaceInvisibleChars(this.__text);
+        if (replaced !== this.__text) {
+          dom.textContent = replaced;
+        }
+      }
+    }
+    if (this.__highlightTypes.split(",").includes("quote") && this.__displayText) {
+      dom.classList.add("cat-highlight-quote-char");
+      dom.textContent = "\u200B";
+      dom.contentEditable = "false";
+    }
+    return dom;
+  }
+  updateDOM(prevNode, dom, config) {
+    const updated = super.updateDOM(prevNode, dom, config);
+    if (prevNode.__highlightTypes !== this.__highlightTypes) {
+      for (const t of prevNode.__highlightTypes.split(",")) {
+        dom.classList.remove(`cat-highlight-${t}`);
+        if (t.startsWith("glossary-")) {
+          dom.classList.remove("cat-highlight-glossary");
+        }
+        if (t.startsWith("spellcheck-")) {
+          dom.classList.remove("cat-highlight-spellcheck");
+        }
+      }
+      dom.classList.remove("cat-highlight-nested");
+      for (const t of this.__highlightTypes.split(",")) {
+        dom.classList.add(`cat-highlight-${t}`);
+        if (t.startsWith("glossary-")) {
+          dom.classList.add("cat-highlight-glossary");
+        }
+        if (t.startsWith("spellcheck-")) {
+          dom.classList.add("cat-highlight-spellcheck");
+        }
+      }
+      if (this.__highlightTypes.includes(",")) {
+        dom.classList.add("cat-highlight-nested");
+      }
+      dom.dataset.highlightTypes = this.__highlightTypes;
+    }
+    if (prevNode.__ruleIds !== this.__ruleIds) {
+      dom.dataset.ruleIds = this.__ruleIds;
+    }
+    if (prevNode.__displayText !== this.__displayText) {
+      if (this.__displayText) {
+        dom.dataset.display = this.__displayText;
+      } else {
+        delete dom.dataset.display;
+      }
+    }
+    if (this.__highlightTypes.split(",").includes("tag-collapsed")) {
+      dom.textContent = "\u200B";
+      dom.contentEditable = "false";
+    } else if (dom.contentEditable === "false") {
+      dom.removeAttribute("contenteditable");
+    }
+    if (this.__highlightTypes.split(",").includes("special-char")) {
+      if (this.__text === " ") {
+        dom.classList.add("cat-highlight-space-char");
+        dom.style.position = "relative";
+      } else {
+        const replaced = replaceInvisibleChars(this.__text);
+        if (replaced !== this.__text) {
+          dom.textContent = replaced;
+        }
+      }
+    }
+    if (this.__highlightTypes.split(",").includes("quote") && this.__displayText) {
+      dom.classList.add("cat-highlight-quote-char");
+      dom.textContent = "\u200B";
+      dom.contentEditable = "false";
+    } else if (prevNode.__highlightTypes.split(",").includes("quote")) {
+      dom.classList.remove("cat-highlight-quote-char");
+      if (dom.contentEditable === "false") {
+        dom.removeAttribute("contenteditable");
+      }
+    }
+    return updated;
+  }
+  static importJSON(json) {
+    const node = new _HighlightNode(
+      json.text,
+      json.highlightTypes,
+      json.ruleIds,
+      json.displayText
+    );
+    node.setFormat(json.format);
+    node.setDetail(json.detail);
+    node.setMode(json.mode);
+    node.setStyle(json.style);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "highlight",
+      highlightTypes: this.__highlightTypes,
+      ruleIds: this.__ruleIds,
+      displayText: this.__displayText
+    };
+  }
+  /** NL-marker nodes must not leak the display symbol ↩ into
+   *  clipboard or getTextContent() calls — they are purely visual. */
+  getTextContent() {
+    if (this.__ruleIds.startsWith(NL_MARKER_PREFIX)) return "";
+    return super.getTextContent();
+  }
+  canInsertTextBefore() {
+    if (this.__ruleIds.startsWith(NL_MARKER_PREFIX)) return false;
+    if (this.getMode() === "token") return false;
+    return true;
+  }
+  canInsertTextAfter() {
+    if (this.__ruleIds.startsWith(NL_MARKER_PREFIX)) return false;
+    if (this.getMode() === "token") return false;
+    return true;
+  }
+  isTextEntity() {
+    return false;
+  }
+};
+function $createHighlightNode(text, highlightTypes, ruleIds, displayText, forceToken) {
+  const node = new HighlightNode(text, highlightTypes, ruleIds, displayText);
+  if (highlightTypes.split(",").includes("special-char") || ruleIds.startsWith(NL_MARKER_PREFIX) || forceToken) {
+    node.setMode("token");
+  }
+  return node;
+}
+function $isHighlightNode(node) {
+  return node instanceof HighlightNode;
+}
+
+// src/layout/cat-editor/mention-node.ts
+import { $applyNodeReplacement, TextNode as TextNode2 } from "lexical";
+var DEFAULT_MENTION_SERIALIZE = (id) => `@{${id}}`;
+var DEFAULT_MENTION_PATTERN = /@\{([^}]+)\}/g;
+var _mentionNodeConfig = {};
+function setMentionNodeConfig(config) {
+  _mentionNodeConfig = config;
+}
+function getMentionModelText(id) {
+  return (_mentionNodeConfig.serialize ?? DEFAULT_MENTION_SERIALIZE)(id);
+}
+function getMentionPattern() {
+  const src = _mentionNodeConfig.pattern ?? DEFAULT_MENTION_PATTERN;
+  return new RegExp(src.source, src.flags);
+}
+function renderDefaultMentionDOM(element, _mentionId, mentionName) {
+  element.textContent = "";
+  const label = document.createElement("span");
+  label.className = "cat-mention-label";
+  label.textContent = `@${mentionName}`;
+  element.appendChild(label);
+}
+function $convertMentionElement(domNode) {
+  const mentionId = domNode.getAttribute("data-mention-id");
+  const mentionName = domNode.getAttribute("data-mention-name");
+  if (mentionId !== null) {
+    const node = $createMentionNode(mentionId, mentionName ?? mentionId);
+    return { node };
+  }
+  return null;
+}
+var MentionNode = class _MentionNode extends TextNode2 {
+  __mentionId;
+  __mentionName;
+  static getType() {
+    return "mention";
+  }
+  static clone(node) {
+    return new _MentionNode(
+      node.__mentionId,
+      node.__mentionName,
+      node.__text,
+      node.__key
+    );
+  }
+  static importJSON(serializedNode) {
+    return $createMentionNode(
+      serializedNode.mentionId,
+      serializedNode.mentionName
+    ).updateFromJSON(serializedNode);
+  }
+  constructor(mentionId, mentionName, text, key) {
+    super(text ?? getMentionModelText(mentionId), key);
+    this.__mentionId = mentionId;
+    this.__mentionName = mentionName;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      mentionId: this.__mentionId,
+      mentionName: this.__mentionName
+    };
+  }
+  createDOM(config) {
+    const dom = super.createDOM(config);
+    dom.className = "cat-mention-node";
+    dom.spellcheck = false;
+    dom.contentEditable = "false";
+    dom.setAttribute("data-mention-id", this.__mentionId);
+    dom.setAttribute("data-mention-name", this.__mentionName);
+    this._renderInnerDOM(dom);
+    return dom;
+  }
+  updateDOM(prevNode, dom, _config) {
+    if (prevNode.__mentionId !== this.__mentionId || prevNode.__mentionName !== this.__mentionName) {
+      dom.setAttribute("data-mention-id", this.__mentionId);
+      dom.setAttribute("data-mention-name", this.__mentionName);
+      this._renderInnerDOM(dom);
+    }
+    return false;
+  }
+  /** Fill the span with visible content (default: @label, or custom). */
+  _renderInnerDOM(element) {
+    const renderer = _mentionNodeConfig.renderDOM;
+    if (renderer) {
+      const handled = renderer(element, this.__mentionId, this.__mentionName);
+      if (handled) return;
+    }
+    renderDefaultMentionDOM(element, this.__mentionId, this.__mentionName);
+  }
+  exportDOM() {
+    const element = document.createElement("span");
+    element.setAttribute("data-mention", "true");
+    element.setAttribute("data-mention-id", this.__mentionId);
+    element.setAttribute("data-mention-name", this.__mentionName);
+    element.textContent = this.__text;
+    return { element };
+  }
+  static importDOM() {
+    return {
+      span: (domNode) => {
+        if (!domNode.hasAttribute("data-mention")) {
+          return null;
+        }
+        return {
+          conversion: $convertMentionElement,
+          priority: 1
+        };
+      }
+    };
+  }
+  isTextEntity() {
+    return true;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+};
+function $createMentionNode(mentionId, mentionName, textContent) {
+  const node = new MentionNode(
+    mentionId,
+    mentionName,
+    textContent ?? getMentionModelText(mentionId)
+  );
+  node.setMode("token").toggleDirectionless();
+  return $applyNodeReplacement(node);
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+
+// src/layout/cat-editor/mention-plugin.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import * as ReactDOM from "react-dom";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  useBasicTypeaheadTriggerMatch
+} from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { $createTextNode } from "lexical";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SUGGESTION_LIST_LENGTH_LIMIT = 50;
+var ITEM_HEIGHT = 36;
+var MentionTypeaheadOption = class extends MenuOption {
+  user;
+  constructor(user) {
+    super(user.id);
+    this.user = user;
+  }
+};
+function MentionAvatar({
+  user,
+  size = 24
+}) {
+  if (user.avatar) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-flex items-center justify-center",
+        style: { width: size, height: size },
+        children: user.avatar()
+      }
+    );
+  }
+  const initials = user.name.split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium",
+      style: { width: size, height: size, fontSize: size * 0.4 },
+      children: initials
+    }
+  );
+}
+function MentionMenuItem({
+  option,
+  isSelected,
+  onClick,
+  onMouseEnter
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      tabIndex: -1,
+      className: `flex items-center gap-2 px-2 py-1.5 text-sm cursor-default select-none rounded-sm ${isSelected ? "bg-accent text-accent-foreground" : "text-popover-foreground"}`,
+      ref: option.setRefElement,
+      role: "option",
+      "aria-selected": isSelected,
+      onMouseEnter,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(MentionAvatar, { user: option.user, size: 22 }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: option.user.name })
+      ]
+    },
+    option.key
+  );
+}
+function VirtualizedMentionMenu({
+  options,
+  selectedIndex,
+  selectOptionAndCleanUp,
+  setHighlightedIndex
+}) {
+  const parentRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: options.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 8
+  });
+  useEffect(() => {
+    if (selectedIndex !== null && selectedIndex >= 0) {
+      virtualizer.scrollToIndex(selectedIndex, { align: "auto" });
+    }
+  }, [selectedIndex, virtualizer]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: parentRef,
+      className: "max-h-[280px] overflow-y-auto overflow-x-hidden",
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          role: "listbox",
+          "aria-label": "Mention suggestions",
+          style: {
+            height: `${virtualizer.getTotalSize()}px`,
+            position: "relative",
+            width: "100%"
+          },
+          children: virtualizer.getVirtualItems().map((vItem) => {
+            const option = options[vItem.index];
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${vItem.start}px)`
+                },
+                ref: virtualizer.measureElement,
+                "data-index": vItem.index,
+                children: /* @__PURE__ */ jsx(
+                  MentionMenuItem,
+                  {
+                    option,
+                    isSelected: selectedIndex === vItem.index,
+                    onClick: () => {
+                      setHighlightedIndex(vItem.index);
+                      selectOptionAndCleanUp(option);
+                    },
+                    onMouseEnter: () => {
+                      setHighlightedIndex(vItem.index);
+                    }
+                  }
+                )
+              },
+              option.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
+function checkForMentionMatch(text, trigger) {
+  const escaped = trigger.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(
+    `(^|\\s|\\()([${escaped}]((?:[^${escaped}\\s]){0,75}))$`
+  );
+  const match = regex.exec(text);
+  if (match !== null) {
+    const maybeLeadingWhitespace = match[1];
+    const matchingString = match[3];
+    return {
+      leadOffset: match.index + maybeLeadingWhitespace.length,
+      matchingString,
+      replaceableString: match[2]
+    };
+  }
+  return null;
+}
+function MentionPlugin({
+  users,
+  trigger = "@",
+  onMentionInsert
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [queryString, setQueryString] = useState(null);
+  const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
+    minLength: 0
+  });
+  const results = useMemo(() => {
+    if (queryString === null)
+      return users.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
+    const q = queryString.toLowerCase();
+    return users.filter((u) => u.name.toLowerCase().includes(q)).slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
+  }, [users, queryString]);
+  const options = useMemo(
+    () => results.map((user) => new MentionTypeaheadOption(user)),
+    [results]
+  );
+  const onSelectOption = useCallback(
+    (selectedOption, nodeToReplace, closeMenu) => {
+      editor.update(() => {
+        const mentionNode = $createMentionNode(
+          selectedOption.user.id,
+          selectedOption.user.name
+        );
+        if (nodeToReplace) {
+          nodeToReplace.replace(mentionNode);
+        }
+        const spaceNode = $createTextNode(" ");
+        mentionNode.insertAfter(spaceNode);
+        spaceNode.selectEnd();
+        closeMenu();
+      });
+      onMentionInsert?.(selectedOption.user);
+    },
+    [editor, onMentionInsert]
+  );
+  const checkForMentionTrigger = useCallback(
+    (text) => {
+      const slashMatch = checkForSlashTriggerMatch(text, editor);
+      if (slashMatch !== null) {
+        return null;
+      }
+      return checkForMentionMatch(text, trigger);
+    },
+    [checkForSlashTriggerMatch, editor, trigger]
+  );
+  return /* @__PURE__ */ jsx(
+    LexicalTypeaheadMenuPlugin,
+    {
+      onQueryChange: setQueryString,
+      onSelectOption,
+      triggerFn: checkForMentionTrigger,
+      options,
+      menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length ? ReactDOM.createPortal(
+        /* @__PURE__ */ jsx("div", { className: "cat-mention-popover", children: /* @__PURE__ */ jsx(
+          VirtualizedMentionMenu,
+          {
+            options,
+            selectedIndex,
+            selectOptionAndCleanUp,
+            setHighlightedIndex
+          }
+        ) }),
+        anchorElementRef.current
+      ) : null
+    }
+  );
+}
+
+// src/layout/cat-editor/plugins.tsx
+import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
+import { $isParentElementRTL } from "@lexical/selection";
+import {
+  $addUpdateTag,
+  $createParagraphNode,
+  $createRangeSelection,
+  $createTextNode as $createTextNode2,
+  $getRoot as $getRoot2,
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  PASTE_COMMAND,
+  SELECTION_CHANGE_COMMAND
+} from "lexical";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/layout/cat-editor/compute-segments.ts
+var TAG_RE = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)\b[^>]*?(\/?)>/g;
+function detectAndPairTags(text, _detectInner = true) {
+  const allTags = [];
+  TAG_RE.lastIndex = 0;
+  let m;
+  while ((m = TAG_RE.exec(text)) !== null) {
+    const isClosing = m[1] === "/";
+    const isSelfClosing = m[3] === "/" || !isClosing && m[0].endsWith("/>");
+    allTags.push({
+      start: m.index,
+      end: m.index + m[0].length,
+      tagName: m[2].toLowerCase(),
+      isClosing,
+      isSelfClosing,
+      originalText: m[0]
+    });
+  }
+  let nextNum = 1;
+  const stack = [];
+  const result = [];
+  for (let i = 0; i < allTags.length; i++) {
+    const tag = allTags[i];
+    if (tag.isSelfClosing) {
+      const num = nextNum++;
+      result.push({
+        ...tag,
+        tagNumber: num,
+        displayText: `<${num}/>`
+      });
+    } else if (!tag.isClosing) {
+      const num = nextNum++;
+      stack.push({ name: tag.tagName, num, idx: i });
+    } else {
+      let matchIdx = -1;
+      for (let j = stack.length - 1; j >= 0; j--) {
+        if (stack[j].name === tag.tagName) {
+          matchIdx = j;
+          break;
+        }
+      }
+      if (matchIdx >= 0) {
+        const openEntry = stack[matchIdx];
+        stack.splice(matchIdx, 1);
+        const openTag = allTags[openEntry.idx];
+        result.push({
+          ...openTag,
+          tagNumber: openEntry.num,
+          displayText: `<${openEntry.num}>`
+        });
+        result.push({
+          ...tag,
+          tagNumber: openEntry.num,
+          displayText: `</${openEntry.num}>`
+        });
+      }
+    }
+  }
+  result.sort((a, b) => a.start - b.start);
+  return result;
+}
+var HTML_TAG_CLASSIFY = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)\b[^>]*?(\/?)>$/;
+function detectCustomTags(text, patternSource) {
+  let re;
+  try {
+    re = new RegExp(patternSource, "g");
+  } catch {
+    return [];
+  }
+  const matches = [];
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m[0].length === 0) {
+      re.lastIndex++;
+      continue;
+    }
+    const htmlMatch = HTML_TAG_CLASSIFY.exec(m[0]);
+    if (htmlMatch) {
+      matches.push({
+        start: m.index,
+        end: m.index + m[0].length,
+        text: m[0],
+        htmlName: htmlMatch[2].toLowerCase(),
+        isClosing: htmlMatch[1] === "/",
+        isSelfClosing: htmlMatch[3] === "/" || !htmlMatch[1] && m[0].endsWith("/>")
+      });
+    } else {
+      matches.push({
+        start: m.index,
+        end: m.index + m[0].length,
+        text: m[0],
+        htmlName: null,
+        isClosing: false,
+        isSelfClosing: false
+      });
+    }
+  }
+  let nextNum = 1;
+  const stack = [];
+  const result = [];
+  for (let i = 0; i < matches.length; i++) {
+    const raw = matches[i];
+    if (!raw.htmlName) {
+      const num = nextNum++;
+      result.push({
+        start: raw.start,
+        end: raw.end,
+        tagName: raw.text,
+        tagNumber: num,
+        isClosing: false,
+        isSelfClosing: false,
+        originalText: raw.text,
+        displayText: `<${num}>`
+      });
+      continue;
+    }
+    if (raw.isSelfClosing) {
+      const num = nextNum++;
+      result.push({
+        start: raw.start,
+        end: raw.end,
+        tagName: raw.htmlName,
+        tagNumber: num,
+        isClosing: false,
+        isSelfClosing: true,
+        originalText: raw.text,
+        displayText: `<${num}/>`
+      });
+    } else if (!raw.isClosing) {
+      const num = nextNum++;
+      stack.push({ name: raw.htmlName, num, idx: i });
+    } else {
+      let matchIdx = -1;
+      for (let j = stack.length - 1; j >= 0; j--) {
+        if (stack[j].name === raw.htmlName) {
+          matchIdx = j;
+          break;
+        }
+      }
+      if (matchIdx >= 0) {
+        const openEntry = stack[matchIdx];
+        stack.splice(matchIdx, 1);
+        const openRaw = matches[openEntry.idx];
+        result.push({
+          start: openRaw.start,
+          end: openRaw.end,
+          tagName: openRaw.htmlName,
+          tagNumber: openEntry.num,
+          isClosing: false,
+          isSelfClosing: false,
+          originalText: openRaw.text,
+          displayText: `<${openEntry.num}>`
+        });
+        result.push({
+          start: raw.start,
+          end: raw.end,
+          tagName: raw.htmlName,
+          tagNumber: openEntry.num,
+          isClosing: true,
+          isSelfClosing: false,
+          originalText: raw.text,
+          displayText: `</${openEntry.num}>`
+        });
+      }
+    }
+  }
+  result.sort((a, b) => a.start - b.start);
+  return result;
+}
+function computeHighlightSegments(text, rules) {
+  const rawRanges = [];
+  for (const rule of rules) {
+    if (rule.type === "spellcheck") {
+      for (const v of rule.validations) {
+        if (v.start < 0 || v.start >= v.end || !v.content) continue;
+        let matchStart = -1;
+        let matchEnd = -1;
+        if (v.end <= text.length && text.slice(v.start, v.end) === v.content) {
+          matchStart = v.start;
+          matchEnd = v.end;
+        } else {
+          const searchRadius = Math.max(64, v.content.length * 4);
+          const searchFrom = Math.max(0, v.start - searchRadius);
+          const searchTo = Math.min(text.length, v.end + searchRadius);
+          const regionLower = text.slice(searchFrom, searchTo).toLowerCase();
+          const contentLower = v.content.toLowerCase();
+          const idx = regionLower.indexOf(contentLower);
+          if (idx !== -1) {
+            matchStart = searchFrom + idx;
+            matchEnd = matchStart + v.content.length;
+          }
+        }
+        if (matchStart >= 0) {
+          rawRanges.push({
+            start: matchStart,
+            end: matchEnd,
+            annotation: {
+              type: "spellcheck",
+              id: `sc-${matchStart}-${matchEnd}`,
+              data: v
+            }
+          });
+        }
+      }
+    } else if (rule.type === "glossary") {
+      const { label, entries } = rule;
+      for (const entry of entries) {
+        if (!entry.term && !entry.pattern) continue;
+        if (entry.pattern) {
+          let re;
+          try {
+            re = new RegExp(entry.pattern, "g");
+          } catch {
+            continue;
+          }
+          let m;
+          while ((m = re.exec(text)) !== null) {
+            rawRanges.push({
+              start: m.index,
+              end: m.index + m[0].length,
+              annotation: {
+                type: "glossary",
+                id: `gl-${label}-${m.index}-${m.index + m[0].length}`,
+                data: {
+                  label,
+                  term: entry.term || entry.pattern,
+                  description: entry.description
+                }
+              }
+            });
+            if (m[0].length === 0) re.lastIndex++;
+          }
+        } else {
+          let idx = 0;
+          while ((idx = text.indexOf(entry.term, idx)) !== -1) {
+            rawRanges.push({
+              start: idx,
+              end: idx + entry.term.length,
+              annotation: {
+                type: "glossary",
+                id: `gl-${label}-${idx}-${idx + entry.term.length}`,
+                data: {
+                  label,
+                  term: entry.term,
+                  description: entry.description
+                }
+              }
+            });
+            idx += entry.term.length;
+          }
+        }
+      }
+    } else if (rule.type === "tag") {
+      const pairs = rule.pattern ? detectCustomTags(text, rule.pattern) : detectAndPairTags(text, rule.detectInner ?? true);
+      for (const p of pairs) {
+        const isHtml = !rule.pattern || p.tagName !== p.originalText;
+        rawRanges.push({
+          start: p.start,
+          end: p.end,
+          annotation: {
+            type: "tag",
+            id: `tag-${p.start}-${p.end}`,
+            data: {
+              tagNumber: p.tagNumber,
+              tagName: p.tagName,
+              isClosing: p.isClosing,
+              isSelfClosing: p.isSelfClosing,
+              originalText: p.originalText,
+              displayText: p.displayText,
+              isHtml
+            }
+          }
+        });
+      }
+    } else if (rule.type === "quote") {
+      const quoteMap = detectQuotes(text, rule.detectOptions);
+      const seen = /* @__PURE__ */ new Set();
+      for (const [, qr] of quoteMap) {
+        if (seen.has(qr.start)) continue;
+        seen.add(qr.start);
+        const mapping = qr.quoteType === "single" ? rule.singleQuote : rule.doubleQuote;
+        const originalChar = qr.quoteType === "single" ? "'" : '"';
+        rawRanges.push({
+          start: qr.start,
+          end: qr.start + 1,
+          annotation: {
+            type: "quote",
+            id: `q-${qr.quoteType}-open-${qr.start}`,
+            data: {
+              quoteType: qr.quoteType,
+              position: "opening",
+              originalChar,
+              replacementChar: mapping.opening
+            }
+          }
+        });
+        if (qr.closed && qr.end !== null) {
+          rawRanges.push({
+            start: qr.end,
+            end: qr.end + 1,
+            annotation: {
+              type: "quote",
+              id: `q-${qr.quoteType}-close-${qr.end}`,
+              data: {
+                quoteType: qr.quoteType,
+                position: "closing",
+                originalChar,
+                replacementChar: mapping.closing
+              }
+            }
+          });
+        }
+      }
+    } else if (rule.type === "special-char") {
+      const allEntries = [...rule.entries];
+      for (const entry of allEntries) {
+        const flags = entry.pattern.flags.includes("g") ? entry.pattern.flags : entry.pattern.flags + "g";
+        const re = new RegExp(entry.pattern.source, flags);
+        let m;
+        while ((m = re.exec(text)) !== null) {
+          const matchStr = m[0];
+          const cp = matchStr.split("").map(
+            (c) => "U+" + (c.codePointAt(0) ?? 0).toString(16).toUpperCase().padStart(4, "0")
+          ).join(" ");
+          rawRanges.push({
+            start: m.index,
+            end: m.index + matchStr.length,
+            annotation: {
+              type: "special-char",
+              id: `sp-${m.index}-${m.index + matchStr.length}`,
+              data: { name: entry.name, char: matchStr, codePoint: cp }
+            }
+          });
+        }
+      }
+    } else if (rule.type === "link") {
+      const defaultPattern = String.raw`https?:\/\/[^\s<>"']+|www\.[^\s<>"']+`;
+      const patternSource = rule.pattern ?? defaultPattern;
+      let re;
+      try {
+        re = new RegExp(patternSource, "gi");
+      } catch {
+        continue;
+      }
+      let m;
+      while ((m = re.exec(text)) !== null) {
+        if (m[0].length === 0) {
+          re.lastIndex++;
+          continue;
+        }
+        let matched = m[0];
+        const trailingPunct = /[.,;:!?)}\]]+$/;
+        const trailingMatch = trailingPunct.exec(matched);
+        if (trailingMatch) {
+          matched = matched.slice(0, -trailingMatch[0].length);
+        }
+        const end = m.index + matched.length;
+        const url = matched.startsWith("www.") ? "https://" + matched : matched;
+        rawRanges.push({
+          start: m.index,
+          end,
+          annotation: {
+            type: "link",
+            id: `link-${m.index}-${end}`,
+            data: {
+              url,
+              displayText: matched
+            }
+          }
+        });
+      }
+    }
+  }
+  if (rawRanges.length === 0) return [];
+  const tagRules = rules.filter((r) => r.type === "tag");
+  const tagsCollapsed = tagRules.some((r) => r.collapsed);
+  const tagRanges = rawRanges.filter((r) => r.annotation.type === "tag");
+  const quoteDetectInTags = rules.filter((r) => r.type === "quote").some((r) => r.detectInTags);
+  let filteredRanges = rawRanges;
+  if (tagRanges.length > 0) {
+    filteredRanges = rawRanges.filter((r) => {
+      if (r.annotation.type === "tag") return true;
+      if (r.annotation.type === "quote" && !quoteDetectInTags) {
+        return !tagRanges.some((t) => r.start >= t.start && r.end <= t.end);
+      }
+      if (tagsCollapsed) {
+        return !tagRanges.some((t) => r.start < t.end && r.end > t.start);
+      }
+      return true;
+    });
+  }
+  const points = /* @__PURE__ */ new Set();
+  for (const r of filteredRanges) {
+    points.add(r.start);
+    points.add(r.end);
+  }
+  const sortedPoints = [...points].sort((a, b) => a - b);
+  const segments = [];
+  for (let i = 0; i < sortedPoints.length - 1; i++) {
+    const segStart = sortedPoints[i];
+    const segEnd = sortedPoints[i + 1];
+    const annotations = filteredRanges.filter((r) => r.start <= segStart && r.end >= segEnd).map((r) => r.annotation);
+    if (annotations.length > 0) {
+      segments.push({ start: segStart, end: segEnd, annotations });
+    }
+  }
+  return segments;
+}
+
+// src/layout/cat-editor/selection-helpers.ts
+import { $getRoot } from "lexical";
+function $isCEFalseToken(node) {
+  const types = node.__highlightTypes.split(",");
+  if (types.includes("tag-collapsed")) return true;
+  if (types.includes("quote") && node.__displayText) return true;
+  return false;
+}
+function $pointToGlobalOffset(nodeKey, offset) {
+  const root = $getRoot();
+  const paragraphs = root.getChildren();
+  let global = 0;
+  for (let pi = 0; pi < paragraphs.length; pi++) {
+    if (pi > 0) global += 1;
+    const p = paragraphs[pi];
+    if (p.getKey() === nodeKey) {
+      if ("getChildren" in p) {
+        const children = p.getChildren();
+        let childChars = 0;
+        for (let ci = 0; ci < Math.min(offset, children.length); ci++) {
+          const child = children[ci];
+          if ($isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX))
+            continue;
+          childChars += child.getTextContent().length;
+        }
+        return global + childChars;
+      }
+      return global;
+    }
+    if (!("getChildren" in p)) continue;
+    for (const child of p.getChildren()) {
+      const isNlMarker = $isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX);
+      if (child.getKey() === nodeKey) {
+        if (isNlMarker) return global;
+        if ($isHighlightNode(child) && child.getMode() === "token") {
+          return global + (offset > 0 ? child.getTextContent().length : 0);
+        }
+        if ($isMentionNode(child)) {
+          return global + (offset > 0 ? child.getTextContent().length : 0);
+        }
+        return global + offset;
+      }
+      if (isNlMarker) continue;
+      global += child.getTextContent().length;
+    }
+  }
+  return global;
+}
+function $globalOffsetToPoint(target) {
+  const root = $getRoot();
+  const paragraphs = root.getChildren();
+  let remaining = target;
+  for (let pi = 0; pi < paragraphs.length; pi++) {
+    if (pi > 0) {
+      if (remaining <= 0) {
+        const p2 = paragraphs[pi];
+        if ("getChildren" in p2) {
+          for (const child of p2.getChildren()) {
+            if ($isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX))
+              continue;
+            return { key: child.getKey(), offset: 0, type: "text" };
+          }
+        }
+        return { key: paragraphs[pi].getKey(), offset: 0, type: "element" };
+      }
+      remaining -= 1;
+    }
+    const p = paragraphs[pi];
+    if (!("getChildren" in p)) continue;
+    const allChildren = p.getChildren();
+    for (let ci = 0; ci < allChildren.length; ci++) {
+      const child = allChildren[ci];
+      if ($isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX))
+        continue;
+      const len = child.getTextContent().length;
+      if ($isHighlightNode(child) && $isCEFalseToken(child)) {
+        if (remaining <= 0) {
+          return { key: p.getKey(), offset: ci, type: "element" };
+        }
+        remaining -= len;
+        continue;
+      }
+      if ($isMentionNode(child)) {
+        if (remaining <= 0) {
+          return { key: p.getKey(), offset: ci, type: "element" };
+        }
+        remaining -= len;
+        continue;
+      }
+      if ($isHighlightNode(child) && child.getMode() === "token") {
+        if (remaining > len) {
+          remaining -= len;
+          continue;
+        }
+        return {
+          key: child.getKey(),
+          offset: remaining <= 0 ? 0 : remaining >= len ? len : remaining <= len / 2 ? 0 : len,
+          type: "text"
+        };
+      }
+      if (remaining <= len) {
+        return {
+          key: child.getKey(),
+          offset: Math.max(0, remaining),
+          type: "text"
+        };
+      }
+      remaining -= len;
+    }
+    if (remaining <= 0) {
+      let afterIdx = allChildren.length;
+      for (let ci = allChildren.length - 1; ci >= 0; ci--) {
+        const c = allChildren[ci];
+        if ($isHighlightNode(c) && c.__ruleIds.startsWith(NL_MARKER_PREFIX)) {
+          afterIdx = ci;
+        } else {
+          break;
+        }
+      }
+      return { key: p.getKey(), offset: afterIdx, type: "element" };
+    }
+  }
+  for (let pi = paragraphs.length - 1; pi >= 0; pi--) {
+    const p = paragraphs[pi];
+    if ("getChildren" in p) {
+      const allChildren = p.getChildren();
+      for (let ci = allChildren.length - 1; ci >= 0; ci--) {
+        const child = allChildren[ci];
+        if ($isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX))
+          continue;
+        if ($isHighlightNode(child) && $isCEFalseToken(child)) continue;
+        if ($isMentionNode(child)) continue;
+        return {
+          key: child.getKey(),
+          offset: child.getTextContent().length,
+          type: "text"
+        };
+      }
+      let afterIdx = allChildren.length;
+      for (let ci = allChildren.length - 1; ci >= 0; ci--) {
+        const c = allChildren[ci];
+        if ($isHighlightNode(c) && c.__ruleIds.startsWith(NL_MARKER_PREFIX)) {
+          afterIdx = ci;
+        } else {
+          break;
+        }
+      }
+      return { key: p.getKey(), offset: afterIdx, type: "element" };
+    }
+  }
+  return null;
+}
+
+// src/layout/cat-editor/plugins.tsx
+function HighlightsPlugin({
+  rules,
+  annotationMapRef,
+  codepointDisplayMap
+}) {
+  const [editor] = useLexicalComposerContext2();
+  const rafRef = useRef2(null);
+  const applyHighlights = useCallback2(() => {
+    setCodepointOverrides(codepointDisplayMap);
+    const editorElement = editor.getRootElement();
+    const editorHasFocus = editorElement != null && editorElement.contains(editorElement.ownerDocument.activeElement);
+    editor.update(
+      () => {
+        $addUpdateTag("cat-highlights");
+        const root = $getRoot2();
+        const paragraphs = root.getChildren();
+        const lines = [];
+        const savedMentions = [];
+        let collectOffset = 0;
+        for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
+          const p = paragraphs[pIdx];
+          let lineText = "";
+          if ("getChildren" in p) {
+            for (const child of p.getChildren()) {
+              if ($isHighlightNode(child) && child.__ruleIds.startsWith(NL_MARKER_PREFIX)) {
+                continue;
+              }
+              if ($isMentionNode(child)) {
+                const text = child.getTextContent();
+                savedMentions.push({
+                  start: collectOffset + lineText.length,
+                  end: collectOffset + lineText.length + text.length,
+                  mentionId: child.__mentionId,
+                  mentionName: child.__mentionName,
+                  text
+                });
+              }
+              lineText += child.getTextContent();
+            }
+          } else {
+            lineText = p.getTextContent();
+          }
+          lines.push(lineText);
+          collectOffset += lineText.length + 1;
+        }
+        const fullText = lines.join("\n");
+        const mentionRule = rules.find(
+          (r) => r.type === "mention"
+        );
+        if (mentionRule) {
+          const pattern = getMentionPattern();
+          let match;
+          while ((match = pattern.exec(fullText)) !== null) {
+            const matchStart = match.index;
+            const matchEnd = matchStart + match[0].length;
+            const matchId = match[1];
+            const alreadySaved = savedMentions.some(
+              (m) => m.start === matchStart && m.end === matchEnd
+            );
+            if (alreadySaved) continue;
+            const user = mentionRule.users.find((u) => u.id === matchId);
+            if (user) {
+              savedMentions.push({
+                start: matchStart,
+                end: matchEnd,
+                mentionId: user.id,
+                mentionName: user.name,
+                text: match[0]
+              });
+            }
+          }
+        }
+        let segmentText = fullText;
+        for (let mi = savedMentions.length - 1; mi >= 0; mi--) {
+          const m = savedMentions[mi];
+          segmentText = segmentText.slice(0, m.start) + "
".repeat(m.end - m.start) + segmentText.slice(m.end);
+        }
+        const segments = computeHighlightSegments(segmentText, rules);
+        const newMap = /* @__PURE__ */ new Map();
+        for (const seg of segments) {
+          for (const ann of seg.annotations) {
+            newMap.set(ann.id, ann);
+          }
+        }
+        annotationMapRef.current = newMap;
+        const prevSelection = $getSelection();
+        let savedAnchor = null;
+        let savedFocus = null;
+        if ($isRangeSelection(prevSelection)) {
+          savedAnchor = $pointToGlobalOffset(
+            prevSelection.anchor.key,
+            prevSelection.anchor.offset
+          );
+          savedFocus = $pointToGlobalOffset(
+            prevSelection.focus.key,
+            prevSelection.focus.offset
+          );
+        }
+        root.clear();
+        if (fullText.length === 0) {
+          const p = $createParagraphNode();
+          p.append($createTextNode2(""));
+          root.append(p);
+          return;
+        }
+        const emittedMentionStarts = /* @__PURE__ */ new Set();
+        const appendWithMentions = (paragraph, rangeStart, rangeEnd, makeNode) => {
+          const overlapping = savedMentions.filter(
+            (m) => m.start < rangeEnd && m.end > rangeStart && !emittedMentionStarts.has(m.start)
+          );
+          if (overlapping.length === 0) {
+            const text = fullText.slice(rangeStart, rangeEnd);
+            if (text.length > 0) {
+              paragraph.append(makeNode(text));
+            }
+            return;
+          }
+          overlapping.sort((a, b) => a.start - b.start);
+          let cursor = rangeStart;
+          for (const m of overlapping) {
+            const mStart = Math.max(m.start, rangeStart);
+            const mEnd = Math.min(m.end, rangeEnd);
+            if (mStart > cursor) {
+              const beforeText = fullText.slice(cursor, mStart);
+              if (beforeText.length > 0) {
+                paragraph.append(makeNode(beforeText));
+              }
+            }
+            paragraph.append(
+              $createMentionNode(m.mentionId, m.mentionName, m.text)
+            );
+            emittedMentionStarts.add(m.start);
+            cursor = mEnd;
+          }
+          if (cursor < rangeEnd) {
+            const afterText = fullText.slice(cursor, rangeEnd);
+            if (afterText.length > 0) {
+              paragraph.append(makeNode(afterText));
+            }
+          }
+        };
+        const textLines = fullText.split("\n");
+        let globalOffset = 0;
+        for (const line of textLines) {
+          const paragraph = $createParagraphNode();
+          const lineStart = globalOffset;
+          const lineEnd = globalOffset + line.length;
+          const lineSegments = segments.filter(
+            (s) => s.start < lineEnd && s.end > lineStart
+          );
+          let pos = lineStart;
+          for (const seg of lineSegments) {
+            const sStart = Math.max(seg.start, lineStart);
+            const sEnd = Math.min(seg.end, lineEnd);
+            if (sStart > pos) {
+              appendWithMentions(
+                paragraph,
+                pos,
+                sStart,
+                (text) => $createTextNode2(text)
+              );
+            }
+            const tagAnn = seg.annotations.find((a) => a.type === "tag");
+            const tagRule = rules.find((r) => r.type === "tag");
+            const tagsCollapsed = !!tagRule?.collapsed;
+            const collapseScope = tagRule?.collapseScope ?? "all";
+            const thisTagCollapsed = tagsCollapsed && !!tagAnn && (collapseScope === "all" || tagAnn.data.isHtml);
+            const typesArr = [
+              ...new Set(
+                seg.annotations.map((a) => {
+                  if (a.type === "glossary") return `glossary-${a.data.label}`;
+                  if (a.type === "spellcheck")
+                    return `spellcheck-${a.data.categoryId}`;
+                  return a.type;
+                })
+              )
+            ];
+            if (thisTagCollapsed) {
+              typesArr.push("tag-collapsed");
+            }
+            const types = typesArr.join(",");
+            const ids = seg.annotations.map((a) => a.id).join(",");
+            const tagDisplayText = tagAnn?.type === "tag" && thisTagCollapsed ? tagAnn.data.displayText : void 0;
+            const isTagToken = thisTagCollapsed;
+            const quoteAnn = seg.annotations.find((a) => a.type === "quote");
+            const quoteDisplayText = quoteAnn?.type === "quote" ? quoteAnn.data.replacementChar : void 0;
+            const isQuoteToken = !!quoteAnn;
+            const containingMention = savedMentions.find(
+              (m) => m.start <= sStart && m.end >= sEnd
+            );
+            if (containingMention) {
+              if (!emittedMentionStarts.has(containingMention.start)) {
+                paragraph.append(
+                  $createMentionNode(
+                    containingMention.mentionId,
+                    containingMention.mentionName,
+                    containingMention.text
+                  )
+                );
+                emittedMentionStarts.add(containingMention.start);
+              }
+            } else {
+              appendWithMentions(
+                paragraph,
+                sStart,
+                sEnd,
+                (text) => $createHighlightNode(
+                  text,
+                  types,
+                  ids,
+                  tagDisplayText ?? quoteDisplayText,
+                  isTagToken || isQuoteToken
+                )
+              );
+            }
+            pos = sEnd;
+          }
+          if (pos < lineEnd) {
+            appendWithMentions(
+              paragraph,
+              pos,
+              lineEnd,
+              (text) => $createTextNode2(text)
+            );
+          }
+          const nlPos = lineEnd;
+          if (nlPos < fullText.length && fullText[nlPos] === "\n") {
+            const nlSegments = segments.filter(
+              (s) => s.start <= nlPos && s.end > nlPos
+            );
+            if (nlSegments.length > 0) {
+              const nlAnns = nlSegments.flatMap((s) => s.annotations);
+              const types = [
+                ...new Set(
+                  nlAnns.map((a) => {
+                    if (a.type === "glossary") return `glossary-${a.data.label}`;
+                    if (a.type === "spellcheck")
+                      return `spellcheck-${a.data.categoryId}`;
+                    return a.type;
+                  })
+                )
+              ].join(",");
+              const ids = nlAnns.map((a) => a.id).join(",");
+              const symbol = CODEPOINT_DISPLAY_MAP[10];
+              if (paragraph.getChildrenSize() === 0) {
+                paragraph.append($createTextNode2(""));
+              }
+              paragraph.append(
+                $createHighlightNode(symbol, types, NL_MARKER_PREFIX + ids)
+              );
+            }
+          }
+          if (paragraph.getChildrenSize() === 0) {
+            paragraph.append($createTextNode2(""));
+          }
+          root.append(paragraph);
+          globalOffset = lineEnd + 1;
+        }
+        if (editorHasFocus && savedAnchor !== null && savedFocus !== null) {
+          const anchorPt = $globalOffsetToPoint(savedAnchor);
+          const focusPt = $globalOffsetToPoint(savedFocus);
+          if (anchorPt && focusPt) {
+            const sel = $createRangeSelection();
+            sel.anchor.set(anchorPt.key, anchorPt.offset, anchorPt.type);
+            sel.focus.set(focusPt.key, focusPt.offset, focusPt.type);
+            $setSelection(sel);
+          }
+        } else {
+          $setSelection(null);
+        }
+      },
+      { tag: "historic" }
+    );
+  }, [editor, rules, annotationMapRef]);
+  useEffect2(() => {
+    applyHighlights();
+  }, [applyHighlights]);
+  useEffect2(() => {
+    const unregister = editor.registerUpdateListener(
+      ({ tags, dirtyElements, dirtyLeaves }) => {
+        if (tags.has("cat-highlights")) return;
+        if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+        if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+          applyHighlights();
+        });
+      }
+    );
+    return () => {
+      unregister();
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [editor, applyHighlights]);
+  useEffect2(() => {
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        const text = clipboardData.getData("text/plain");
+        if (text && text !== text.replace(/\n+$/, "")) {
+          event.preventDefault();
+          const trimmed = text.replace(/\n+$/, "");
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              selection.insertRawText(trimmed);
+            }
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor]);
+  return null;
+}
+function EditorRefPlugin({
+  editorRef,
+  savedSelectionRef
+}) {
+  const [editor] = useLexicalComposerContext2();
+  useEffect2(() => {
+    editorRef.current = editor;
+  }, [editor, editorRef]);
+  useEffect2(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const sel = $getSelection();
+        if ($isRangeSelection(sel)) {
+          savedSelectionRef.current = {
+            anchor: $pointToGlobalOffset(sel.anchor.key, sel.anchor.offset),
+            focus: $pointToGlobalOffset(sel.focus.key, sel.focus.offset)
+          };
+        }
+      });
+    });
+  }, [editor, savedSelectionRef]);
+  return null;
+}
+function $isNonEditableNode(node) {
+  if (!$isHighlightNode(node)) return false;
+  if (node.__ruleIds.startsWith(NL_MARKER_PREFIX)) return true;
+  const types = node.__highlightTypes.split(",");
+  if (types.includes("tag-collapsed")) return true;
+  if (types.includes("quote") && node.__displayText) return true;
+  return false;
+}
+function $clampPointAwayFromNonEditable(point) {
+  if (point.type === "element") return null;
+  const node = point.getNode();
+  if (!$isNonEditableNode(node)) return null;
+  const parent = node.getParent();
+  if (parent && "getChildren" in parent) {
+    const siblings = parent.getChildren();
+    const idx = siblings.findIndex((s) => s.getKey() === node.getKey());
+    if (idx >= 0) {
+      const elemOffset = point.offset > 0 ? idx + 1 : idx;
+      return {
+        key: parent.getKey(),
+        offset: elemOffset,
+        type: "element"
+      };
+    }
+  }
+  return null;
+}
+function $findNextEditable(startNode) {
+  if ($isHighlightNode(startNode) && startNode.__ruleIds.startsWith(NL_MARKER_PREFIX)) {
+    const paragraph2 = startNode.getParent();
+    const nextParagraph = paragraph2?.getNextSibling();
+    if (nextParagraph && "getChildren" in nextParagraph) {
+      const first = nextParagraph.getFirstChild();
+      if (first && !$isNonEditableNode(first)) {
+        return { key: first.getKey(), offset: 0, type: "text" };
+      }
+      if (first) {
+        return {
+          key: nextParagraph.getKey(),
+          offset: 0,
+          type: "element"
+        };
+      }
+    }
+    return null;
+  }
+  const next = startNode.getNextSibling();
+  if (next && !$isNonEditableNode(next)) {
+    return { key: next.getKey(), offset: 0, type: "text" };
+  }
+  const paragraph = startNode.getParent();
+  if (paragraph && "getChildren" in paragraph) {
+    const children = paragraph.getChildren();
+    const idx = children.findIndex((s) => s.getKey() === startNode.getKey());
+    if (idx >= 0) {
+      return { key: paragraph.getKey(), offset: idx + 1, type: "element" };
+    }
+  }
+  return null;
+}
+function $findPrevEditable(startNode) {
+  const prev = startNode.getPreviousSibling();
+  if (prev && !$isNonEditableNode(prev)) {
+    return {
+      key: prev.getKey(),
+      offset: prev.getTextContent().length,
+      type: "text"
+    };
+  }
+  const paragraph = startNode.getParent();
+  if (paragraph && "getChildren" in paragraph) {
+    const children = paragraph.getChildren();
+    const idx = children.findIndex((s) => s.getKey() === startNode.getKey());
+    if (idx >= 0) {
+      return { key: paragraph.getKey(), offset: idx, type: "element" };
+    }
+  }
+  return null;
+}
+function NLMarkerNavigationPlugin() {
+  const [editor] = useLexicalComposerContext2();
+  useEffect2(() => {
+    const unregRight = editor.registerCommand(
+      KEY_ARROW_RIGHT_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed())
+          return false;
+        const isRTL = $isParentElementRTL(selection);
+        const { anchor } = selection;
+        const node = anchor.getNode();
+        let adjacentNode = null;
+        if (isRTL) {
+          if (anchor.type === "text") {
+            if (anchor.offset > 0) return false;
+            adjacentNode = node.getPreviousSibling();
+          } else {
+            const children = node.getChildren();
+            adjacentNode = children[anchor.offset - 1] ?? null;
+          }
+        } else {
+          if (anchor.type === "text") {
+            if (anchor.offset < node.getTextContent().length) return false;
+            adjacentNode = node.getNextSibling();
+          } else {
+            const children = node.getChildren();
+            adjacentNode = children[anchor.offset] ?? null;
+          }
+        }
+        if (adjacentNode && $isNonEditableNode(adjacentNode)) {
+          const target = isRTL ? $findPrevEditable(adjacentNode) : $findNextEditable(adjacentNode);
+          if (target) {
+            selection.anchor.set(target.key, target.offset, target.type);
+            selection.focus.set(target.key, target.offset, target.type);
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+        if ($isNonEditableNode(node)) {
+          const target = isRTL ? $findPrevEditable(node) : $findNextEditable(node);
+          if (target) {
+            selection.anchor.set(target.key, target.offset, target.type);
+            selection.focus.set(target.key, target.offset, target.type);
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+    const unregLeft = editor.registerCommand(
+      KEY_ARROW_LEFT_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed())
+          return false;
+        const isRTL = $isParentElementRTL(selection);
+        const { anchor } = selection;
+        const node = anchor.getNode();
+        let adjacentNode = null;
+        if (isRTL) {
+          if (anchor.type === "text") {
+            if (anchor.offset < node.getTextContent().length) return false;
+            adjacentNode = node.getNextSibling();
+          } else {
+            const children = node.getChildren();
+            adjacentNode = children[anchor.offset] ?? null;
+          }
+        } else {
+          if (anchor.type === "text") {
+            if (anchor.offset > 0) return false;
+            adjacentNode = node.getPreviousSibling();
+          } else {
+            const children = node.getChildren();
+            adjacentNode = children[anchor.offset - 1] ?? null;
+          }
+        }
+        if (adjacentNode && $isNonEditableNode(adjacentNode)) {
+          const target = isRTL ? $findNextEditable(adjacentNode) : $findPrevEditable(adjacentNode);
+          if (target) {
+            selection.anchor.set(target.key, target.offset, target.type);
+            selection.focus.set(target.key, target.offset, target.type);
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+        if ($isNonEditableNode(node)) {
+          const target = isRTL ? $findNextEditable(node) : $findPrevEditable(node);
+          if (target) {
+            selection.anchor.set(target.key, target.offset, target.type);
+            selection.focus.set(target.key, target.offset, target.type);
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+    const unregSel = editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return false;
+        const anchorFix = $clampPointAwayFromNonEditable(selection.anchor);
+        const focusFix = $clampPointAwayFromNonEditable(selection.focus);
+        if (anchorFix) {
+          selection.anchor.set(anchorFix.key, anchorFix.offset, anchorFix.type);
+        }
+        if (focusFix) {
+          selection.focus.set(focusFix.key, focusFix.offset, focusFix.type);
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+    return () => {
+      unregRight();
+      unregLeft();
+      unregSel();
+    };
+  }, [editor]);
+  return null;
+}
+
+// src/layout/cat-editor/popover.tsx
+import * as React from "react";
+import { useLayoutEffect, useRef as useRef3 } from "react";
+import { createPopper } from "@popperjs/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SpellCheckPopoverContent({
+  data,
+  onSuggestionClick
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2.5 p-3 max-w-sm", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2("span", { className: "cat-badge cat-badge-spell", children: data.shortMessage || "Spelling" }),
+      /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: data.categoryId })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm leading-relaxed text-foreground", children: data.message }),
+    data.content && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+      "Found:",
+      " ",
+      /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-destructive-foreground", children: data.content })
+    ] }),
+    data.suggestions.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground", children: "Suggestions:" }),
+      /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1", children: data.suggestions.map((s, i) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "cat-suggestion-btn",
+          onClick: () => onSuggestionClick(s.value),
+          children: s.value
+        },
+        i
+      )) })
+    ] }),
+    data.dictionaries && data.dictionaries.length > 0 && /* @__PURE__ */ jsxs2("p", { className: "text-[11px] text-muted-foreground", children: [
+      "Dictionaries: ",
+      data.dictionaries.join(", ")
+    ] })
+  ] });
+}
+function KeywordsPopoverContent({
+  data
+}) {
+  const displayLabel = data.label.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 max-w-xs space-y-2", children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: `cat-badge cat-badge-glossary cat-badge-glossary-${data.label}`,
+        children: displayLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs2("p", { className: "text-sm leading-relaxed text-foreground", children: [
+      "Term:",
+      " ",
+      /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-foreground", children: data.term })
+    ] }),
+    data.description && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground leading-relaxed", children: data.description })
+  ] });
+}
+function SpecialCharPopoverContent({
+  data
+}) {
+  const cp = data.char.codePointAt(0) ?? 0;
+  const effectiveMap = getEffectiveCodepointMap();
+  const displaySymbol = effectiveMap[cp] ?? (data.char.trim() === "" ? "\xB7" : data.char);
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 max-w-xs space-y-3", children: [
+    /* @__PURE__ */ jsx2("span", { className: "cat-badge cat-badge-special-char", children: "Special Char" }),
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center justify-center min-w-12 min-h-12 rounded-lg border-2 border-border bg-muted px-3 py-2 text-2xl font-bold font-mono text-foreground select-none", children: displaySymbol }) }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm leading-relaxed text-foreground text-center", children: /* @__PURE__ */ jsx2("strong", { className: "font-semibold", children: data.name }) }),
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center gap-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono", children: data.codePoint }) })
+  ] });
+}
+function TagPopoverContent({
+  data
+}) {
+  const isPlaceholder = !data.isClosing && !data.isSelfClosing && data.tagName === data.originalText;
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 max-w-xs space-y-2", children: [
+    /* @__PURE__ */ jsxs2("span", { className: "cat-badge cat-badge-tag", children: [
+      isPlaceholder ? "Placeholder" : "Tag",
+      " #",
+      data.tagNumber
+    ] }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-sm leading-relaxed text-foreground", children: [
+      isPlaceholder ? "Placeholder" : data.isClosing ? "Closing tag" : data.isSelfClosing ? "Self-closing tag" : "Opening tag",
+      ":",
+      " ",
+      /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-foreground", children: data.originalText })
+    ] }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+      "Collapsed:",
+      " ",
+      /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1 py-0.5 font-mono", children: data.displayText })
+    ] }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground break-all", children: [
+      "Original:",
+      " ",
+      /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1 py-0.5 font-mono", children: data.originalText })
+    ] })
+  ] });
+}
+function LinkPopoverContent({
+  data,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 max-w-xs space-y-2", children: [
+    /* @__PURE__ */ jsx2("span", { className: "cat-badge cat-badge-link", children: "Link" }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm leading-relaxed text-foreground break-all", children: /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-xs", children: data.url }) }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "cat-suggestion-btn", onClick: onOpen, children: "Open link \u2197" })
+  ] });
+}
+function QuotePopoverContent({
+  data
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 max-w-xs space-y-2", children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: `cat-badge cat-badge-quote cat-badge-quote-${data.quoteType}`,
+        children: data.quoteType === "single" ? "Single Quote" : "Double Quote"
+      }
+    ),
+    /* @__PURE__ */ jsxs2("p", { className: "text-sm leading-relaxed text-foreground", children: [
+      data.position === "opening" ? "Opening" : "Closing",
+      " quote"
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono", children: data.originalChar }),
+      /* @__PURE__ */ jsx2("span", { children: "\u2192" }),
+      /* @__PURE__ */ jsx2("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono", children: data.replacementChar })
+    ] })
+  ] });
+}
+function HighlightPopover({
+  state,
+  annotationMap,
+  onSuggestionClick,
+  onLinkOpen,
+  onDismiss,
+  onPopoverEnter,
+  renderPopoverContent,
+  dir
+}) {
+  const popoverRef = useRef3(null);
+  const popperRef = useRef3(null);
+  useLayoutEffect(() => {
+    const el = popoverRef.current;
+    if (!el) {
+      popperRef.current?.destroy();
+      popperRef.current = null;
+      return;
+    }
+    const ar = state.anchorRect;
+    const virtualEl = {
+      getBoundingClientRect: () => ({
+        top: ar?.top ?? state.y,
+        left: ar?.left ?? state.x,
+        bottom: ar?.bottom ?? state.y,
+        right: ar?.right ?? state.x,
+        width: ar?.width ?? 0,
+        height: ar?.height ?? 0,
+        x: ar?.left ?? state.x,
+        y: ar?.top ?? state.y,
+        toJSON: () => {
+        }
+      })
+    };
+    el.style.visibility = "hidden";
+    if (popperRef.current) {
+      popperRef.current.state.elements.reference = virtualEl;
+    } else {
+      popperRef.current = createPopper(virtualEl, el, {
+        strategy: "fixed",
+        placement: "bottom-start",
+        modifiers: [
+          { name: "offset", options: { offset: [0, 6] } },
+          { name: "preventOverflow", options: { padding: 16 } },
+          { name: "flip", options: { padding: 16 } }
+        ]
+      });
+    }
+    popperRef.current.forceUpdate();
+    el.style.visibility = "";
+  }, [state.visible, state.x, state.y, state.anchorRect]);
+  useLayoutEffect(() => {
+    return () => {
+      popperRef.current?.destroy();
+      popperRef.current = null;
+    };
+  }, []);
+  if (!state.visible) return null;
+  const annotations = state.ruleIds.map((id) => annotationMap.get(id)).filter((a) => a != null);
+  if (annotations.length === 0) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: popoverRef,
+      className: "cat-popover",
+      dir,
+      style: {
+        position: "fixed",
+        left: 0,
+        top: 0,
+        zIndex: 1e3,
+        visibility: "hidden"
+      },
+      onMouseEnter: () => onPopoverEnter(),
+      onMouseLeave: () => onDismiss(),
+      children: annotations.map((ann, i) => {
+        const custom = renderPopoverContent?.({
+          annotation: ann,
+          onSuggestionClick: (s) => onSuggestionClick(s, ann.id)
+        });
+        return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx2("hr", { className: "border-border my-0" }),
+          custom != null ? custom : ann.type === "spellcheck" ? /* @__PURE__ */ jsx2(
+            SpellCheckPopoverContent,
+            {
+              data: ann.data,
+              onSuggestionClick: (s) => onSuggestionClick(s, ann.id)
+            }
+          ) : ann.type === "glossary" ? /* @__PURE__ */ jsx2(KeywordsPopoverContent, { data: ann.data }) : ann.type === "tag" ? /* @__PURE__ */ jsx2(TagPopoverContent, { data: ann.data }) : ann.type === "quote" ? /* @__PURE__ */ jsx2(QuotePopoverContent, { data: ann.data }) : ann.type === "link" ? /* @__PURE__ */ jsx2(
+            LinkPopoverContent,
+            {
+              data: ann.data,
+              onOpen: () => {
+                if (onLinkOpen) {
+                  onLinkOpen(ann.data.url);
+                } else {
+                  window.open(ann.data.url, "_blank", "noopener,noreferrer");
+                }
+              }
+            }
+          ) : /* @__PURE__ */ jsx2(SpecialCharPopoverContent, { data: ann.data })
+        ] }, ann.id);
+      })
+    }
+  );
+}
+
+// src/layout/cat-editor/CATEditor.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CATEditor = forwardRef(
+  function CATEditor2({
+    initialText = "",
+    rules = [],
+    onChange,
+    onSuggestionApply,
+    codepointDisplayMap,
+    renderPopoverContent,
+    onLinkClick,
+    openLinksOnClick = true,
+    onMentionClick,
+    onMentionInsert,
+    mentionSerialize,
+    mentionPattern,
+    renderMentionDOM,
+    placeholder = "Start typing or paste text here\u2026",
+    className,
+    dir,
+    popoverDir: popoverDirProp = "ltr",
+    jpFont = false,
+    editable: editableProp,
+    readOnlySelectable = false,
+    onKeyDown: onKeyDownProp,
+    readOnly: readOnlyLegacy = false
+  }, ref) {
+    const isEditable = editableProp !== void 0 ? editableProp : !readOnlyLegacy;
+    const annotationMapRef = useRef4(/* @__PURE__ */ new Map());
+    const editorRef = useRef4(null);
+    const savedSelectionRef = useRef4(null);
+    const containerRef = useRef4(null);
+    const dismissTimerRef = useRef4(null);
+    useEffect3(() => {
+      setMentionNodeConfig({
+        renderDOM: renderMentionDOM,
+        serialize: mentionSerialize,
+        pattern: mentionPattern
+      });
+    }, [renderMentionDOM, mentionSerialize, mentionPattern]);
+    const flashIdRef = useRef4(null);
+    const flashTimerRef = useRef4(null);
+    const flashEditUnregRef = useRef4(null);
+    const applyFlashClass = useCallback3((annotationId) => {
+      const container = containerRef.current;
+      if (!container) return;
+      container.querySelectorAll(".cat-highlight-flash").forEach((el) => el.classList.remove("cat-highlight-flash"));
+      container.querySelectorAll(".cat-highlight").forEach((el) => {
+        const ids = el.getAttribute("data-rule-ids");
+        if (ids && ids.split(",").includes(annotationId)) {
+          el.classList.add("cat-highlight-flash");
+        }
+      });
+    }, []);
+    const clearFlashInner = useCallback3(() => {
+      flashIdRef.current = null;
+      if (flashTimerRef.current) {
+        clearTimeout(flashTimerRef.current);
+        flashTimerRef.current = null;
+      }
+      if (flashEditUnregRef.current) {
+        flashEditUnregRef.current();
+        flashEditUnregRef.current = null;
+      }
+      containerRef.current?.querySelectorAll(".cat-highlight-flash").forEach((el) => el.classList.remove("cat-highlight-flash"));
+    }, []);
+    const [popoverState, setPopoverState] = useState2({
+      visible: false,
+      x: 0,
+      y: 0,
+      ruleIds: []
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        insertText: (text) => {
+          const editor = editorRef.current;
+          if (!editor) return;
+          editor.update(() => {
+            const saved = savedSelectionRef.current;
+            if (saved) {
+              const anchorPt = $globalOffsetToPoint(saved.anchor);
+              const focusPt = $globalOffsetToPoint(saved.focus);
+              if (anchorPt && focusPt) {
+                const anchorNode = $getNodeByKey(anchorPt.key);
+                if (anchorNode && $isHighlightNode(anchorNode) && anchorNode.getMode() === "token" && saved.anchor === saved.focus) {
+                  const newText = $createTextNode3(text);
+                  if (anchorPt.offset === 0 || anchorPt.offset < anchorNode.getTextContentSize()) {
+                    anchorNode.insertBefore(newText);
+                  } else {
+                    anchorNode.insertAfter(newText);
+                  }
+                  newText.selectEnd();
+                  return;
+                }
+                const sel2 = $createRangeSelection2();
+                sel2.anchor.set(anchorPt.key, anchorPt.offset, anchorPt.type);
+                sel2.focus.set(focusPt.key, focusPt.offset, focusPt.type);
+                $setSelection2(sel2);
+                sel2.insertText(text);
+                return;
+              }
+            }
+            const root = $getRoot3();
+            const lastChild = root.getLastChild();
+            if (lastChild) {
+              lastChild.selectEnd();
+            }
+            const sel = $createRangeSelection2();
+            $setSelection2(sel);
+            sel.insertText(text);
+          });
+          editor.focus();
+        },
+        focus: () => {
+          editorRef.current?.focus();
+        },
+        getText: () => {
+          let text = "";
+          editorRef.current?.getEditorState().read(() => {
+            text = $getRoot3().getTextContent();
+          });
+          return text;
+        },
+        flashHighlight: (annotationId, durationMs = 5e3) => {
+          clearFlashInner();
+          flashIdRef.current = annotationId;
+          applyFlashClass(annotationId);
+          flashTimerRef.current = setTimeout(() => {
+            clearFlashInner();
+          }, durationMs);
+          const editor = editorRef.current;
+          if (editor) {
+            flashEditUnregRef.current = editor.registerUpdateListener(
+              ({ tags }) => {
+                if (tags.has("cat-highlights")) {
+                  if (flashIdRef.current) {
+                    requestAnimationFrame(
+                      () => applyFlashClass(flashIdRef.current)
+                    );
+                  }
+                  return;
+                }
+                clearFlashInner();
+              }
+            );
+          }
+        },
+        replaceAll: (search, replacement) => {
+          const editor = editorRef.current;
+          if (!editor || !search) return 0;
+          let count = 0;
+          editor.update(() => {
+            const root = $getRoot3();
+            const fullText = root.getTextContent();
+            let idx = 0;
+            while ((idx = fullText.indexOf(search, idx)) !== -1) {
+              count++;
+              idx += search.length;
+            }
+            if (count === 0) return;
+            const newText = fullText.split(search).join(replacement);
+            root.clear();
+            const lines = newText.split("\n");
+            for (const line of lines) {
+              const p = $createParagraphNode2();
+              p.append($createTextNode3(line));
+              root.append(p);
+            }
+          });
+          return count;
+        },
+        clearFlash: () => {
+          clearFlashInner();
+        }
+      }),
+      [applyFlashClass, clearFlashInner]
+    );
+    const initialConfig = useMemo2(
+      () => ({
+        namespace: "CATEditor",
+        theme: {
+          root: "cat-editor-root",
+          paragraph: "cat-editor-paragraph",
+          text: {
+            base: "cat-editor-text"
+          }
+        },
+        nodes: [HighlightNode, MentionNode],
+        // When readOnlySelectable, Lexical must be editable so the caret
+        // and selection work — we block mutations via KEY_DOWN_COMMAND.
+        editable: isEditable || readOnlySelectable,
+        onError: (error) => {
+          console.error("CATEditor Lexical error:", error);
+        },
+        editorState: () => {
+          const root = $getRoot3();
+          const lines = initialText.split("\n");
+          for (const line of lines) {
+            const p = $createParagraphNode2();
+            p.append($createTextNode3(line));
+            root.append(p);
+          }
+        }
+      }),
+      []
+      // intentional: initialConfig should not change
+    );
+    const isOverHighlightRef = useRef4(false);
+    const isOverPopoverRef = useRef4(false);
+    const scheduleHide = useCallback3(() => {
+      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+      dismissTimerRef.current = setTimeout(() => {
+        if (!isOverHighlightRef.current && !isOverPopoverRef.current) {
+          setPopoverState((prev) => ({ ...prev, visible: false }));
+        }
+      }, 400);
+    }, []);
+    const cancelHide = useCallback3(() => {
+      if (dismissTimerRef.current) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+    }, []);
+    useEffect3(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const handleMouseOver = (e) => {
+        const target = e.target.closest(".cat-highlight");
+        if (!target) {
+          if (isOverHighlightRef.current) {
+            isOverHighlightRef.current = false;
+            scheduleHide();
+          }
+          return;
+        }
+        const ruleIdsAttr = target.getAttribute("data-rule-ids");
+        if (!ruleIdsAttr) return;
+        const ruleIds = [
+          ...new Set(
+            ruleIdsAttr.split(",").map(
+              (id) => id.startsWith(NL_MARKER_PREFIX) ? id.slice(NL_MARKER_PREFIX.length) : id
+            )
+          )
+        ];
+        isOverHighlightRef.current = true;
+        cancelHide();
+        const rect = target.getBoundingClientRect();
+        setPopoverState({
+          visible: true,
+          x: rect.left,
+          y: rect.bottom,
+          anchorRect: {
+            top: rect.top,
+            left: rect.left,
+            bottom: rect.bottom,
+            right: rect.right,
+            width: rect.width,
+            height: rect.height
+          },
+          ruleIds
+        });
+      };
+      const handleMouseOut = (e) => {
+        const related = e.relatedTarget;
+        if (related?.closest(".cat-highlight")) return;
+        isOverHighlightRef.current = false;
+        scheduleHide();
+      };
+      container.addEventListener("mouseover", handleMouseOver);
+      container.addEventListener("mouseout", handleMouseOut);
+      return () => {
+        container.removeEventListener("mouseover", handleMouseOver);
+        container.removeEventListener("mouseout", handleMouseOut);
+        if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+      };
+    }, [scheduleHide, cancelHide]);
+    useEffect3(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const handleClick = (e) => {
+        if (openLinksOnClick) {
+          const highlightTarget = e.target.closest(
+            ".cat-highlight"
+          );
+          if (highlightTarget) {
+            const ruleIdsAttr = highlightTarget.getAttribute("data-rule-ids");
+            if (ruleIdsAttr) {
+              const ids = ruleIdsAttr.split(",");
+              for (const id of ids) {
+                const ann = annotationMapRef.current.get(id);
+                if (!ann) continue;
+                if (ann.type === "link") {
+                  e.preventDefault();
+                  if (onLinkClick) {
+                    onLinkClick(ann.data.url);
+                  } else {
+                    window.open(ann.data.url, "_blank", "noopener,noreferrer");
+                  }
+                  return;
+                }
+              }
+            }
+          }
+        }
+        const mentionTarget = e.target.closest(
+          ".cat-mention-node"
+        );
+        if (mentionTarget) {
+          const mentionId = mentionTarget.getAttribute("data-mention-id");
+          const mentionName = mentionTarget.getAttribute("data-mention-name");
+          if (mentionId && mentionName) {
+            e.preventDefault();
+            onMentionClick?.(mentionId, mentionName);
+            return;
+          }
+        }
+      };
+      container.addEventListener("click", handleClick);
+      return () => {
+        container.removeEventListener("click", handleClick);
+      };
+    }, [onLinkClick, openLinksOnClick, onMentionClick]);
+    const handleSuggestionClick = useCallback3(
+      (suggestion, ruleId) => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        let replacedRange;
+        editor.update(() => {
+          const root = $getRoot3();
+          const allNodes = root.getAllTextNodes();
+          for (const node of allNodes) {
+            if ($isHighlightNode(node) && node.__ruleIds.split(",").includes(ruleId)) {
+              const globalOffset = $pointToGlobalOffset(node.getKey(), 0);
+              const originalContent = node.getTextContent();
+              replacedRange = {
+                start: globalOffset,
+                end: globalOffset + originalContent.length,
+                content: originalContent
+              };
+              const textNode = $createTextNode3(suggestion);
+              node.replace(textNode);
+              break;
+            }
+          }
+        });
+        setPopoverState((prev) => ({ ...prev, visible: false }));
+        if (replacedRange !== void 0) {
+          const annotation = annotationMapRef.current.get(ruleId);
+          if (annotation) {
+            onSuggestionApply?.(
+              ruleId,
+              suggestion,
+              replacedRange,
+              annotation.type
+            );
+          }
+        }
+      },
+      [onSuggestionApply]
+    );
+    const handleChange = useCallback3(
+      (editorState) => {
+        if (!onChange) return;
+        editorState.read(() => {
+          const root = $getRoot3();
+          onChange(root.getTextContent());
+        });
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(
+          "cat-editor-container",
+          jpFont && "cat-editor-jp-font",
+          className
+        ),
+        dir,
+        children: [
+          /* @__PURE__ */ jsx3(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs3("div", { className: "cat-editor-inner", children: [
+            /* @__PURE__ */ jsx3(
+              PlainTextPlugin,
+              {
+                contentEditable: /* @__PURE__ */ jsx3(
+                  ContentEditable,
+                  {
+                    className: cn(
+                      "cat-editor-editable",
+                      !isEditable && !readOnlySelectable && "cat-editor-readonly",
+                      !isEditable && readOnlySelectable && "cat-editor-readonly-selectable"
+                    )
+                  }
+                ),
+                placeholder: /* @__PURE__ */ jsx3("div", { className: "cat-editor-placeholder", children: placeholder }),
+                ErrorBoundary: LexicalErrorBoundary
+              }
+            ),
+            /* @__PURE__ */ jsx3(HistoryPlugin, {}),
+            /* @__PURE__ */ jsx3(OnChangePlugin, { onChange: handleChange }),
+            /* @__PURE__ */ jsx3(
+              HighlightsPlugin,
+              {
+                rules,
+                annotationMapRef,
+                codepointDisplayMap
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              EditorRefPlugin,
+              {
+                editorRef,
+                savedSelectionRef
+              }
+            ),
+            /* @__PURE__ */ jsx3(NLMarkerNavigationPlugin, {}),
+            !isEditable && readOnlySelectable && /* @__PURE__ */ jsx3(ReadOnlySelectablePlugin, {}),
+            onKeyDownProp && /* @__PURE__ */ jsx3(KeyDownPlugin, { onKeyDown: onKeyDownProp }),
+            dir && dir !== "auto" && /* @__PURE__ */ jsx3(DirectionPlugin, { dir }),
+            rules.filter((r) => r.type === "mention").map((mentionRule, i) => /* @__PURE__ */ jsx3(
+              MentionPlugin,
+              {
+                users: mentionRule.users,
+                trigger: mentionRule.trigger,
+                onMentionInsert
+              },
+              `mention-${i}`
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx3(
+            HighlightPopover,
+            {
+              state: popoverState,
+              annotationMap: annotationMapRef.current,
+              onSuggestionClick: handleSuggestionClick,
+              onLinkOpen: onLinkClick,
+              onDismiss: () => {
+                isOverPopoverRef.current = false;
+                scheduleHide();
+              },
+              onPopoverEnter: () => {
+                isOverPopoverRef.current = true;
+                cancelHide();
+              },
+              renderPopoverContent,
+              dir: popoverDirProp === "inherit" ? dir : popoverDirProp
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CATEditor_default = CATEditor;
+function ReadOnlySelectablePlugin() {
+  const [editor] = useLexicalComposerContext3();
+  useEffect3(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta" || event.key === "Tab" || event.key === "Escape" || event.key === "F5" || event.key === "F12" || // Ctrl/Cmd shortcuts that don't mutate: copy, select-all, find
+        (event.ctrlKey || event.metaKey) && (event.key === "c" || event.key === "a" || event.key === "f" || event.key === "g")) {
+          return false;
+        }
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor]);
+  useEffect3(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const block = (e) => e.preventDefault();
+    root.addEventListener("paste", block);
+    root.addEventListener("cut", block);
+    root.addEventListener("drop", block);
+    return () => {
+      root.removeEventListener("paste", block);
+      root.removeEventListener("cut", block);
+      root.removeEventListener("drop", block);
+    };
+  }, [editor]);
+  return null;
+}
+function KeyDownPlugin({
+  onKeyDown
+}) {
+  const [editor] = useLexicalComposerContext3();
+  useEffect3(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        return onKeyDown(event);
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, onKeyDown]);
+  return null;
+}
+function DirectionPlugin({ dir }) {
+  const [editor] = useLexicalComposerContext3();
+  useEffect3(() => {
+    editor.update(() => {
+      $getRoot3().setDirection(dir);
+    });
+    return () => {
+      editor.update(() => {
+        $getRoot3().setDirection(null);
+      });
+    };
+  }, [editor, dir]);
+  return null;
+}
+
+export {
+  CODEPOINT_DISPLAY_MAP,
+  getEffectiveCodepointMap,
+  setMentionNodeConfig,
+  getMentionModelText,
+  getMentionPattern,
+  MentionNode,
+  $createMentionNode,
+  $isMentionNode,
+  MentionPlugin,
+  CATEditor,
+  CATEditor_default
+};
+//# sourceMappingURL=chunk-ZME2TTK5.js.map