@tutti-os/ui-rich-text 0.0.22 → 0.0.24

package/dist/at-panel/index.js

@@ -1,22 +1,21 @@
 import {
-  DEFAULT_RICH_TEXT_AT_PANEL_PAGE_SIZE,
-  RICH_TEXT_AT_ALL_FILTER_ID,
   activityMentionStatusBadgeClassName,
   activityMentionStatusTone,
-  buildDefaultRichTextTriggerProviderGroups,
-  buildMentionPaletteState,
-  buildRichTextAtFilterTabs,
-  findRichTextTriggerProviderGroup,
+  buildMentionPaletteModel,
+  buildMentionPaletteModelFromTriggerMatches,
+  findMentionPaletteEntry,
   flattenMentionPaletteEntries,
-  groupRichTextAtMatches,
   issueMentionStatusBadgeClassName,
   issueMentionStatusTone,
+  mentionPaletteGroup,
   mentionStatusBadgeClassName,
-  normalizeAtPanelQuery,
+  moveMentionPaletteHighlight,
+  nextMentionPaletteCategory,
+  repairMentionPaletteHighlight,
   resolveMentionFileThumbnailUrl,
   resolveMentionFileVisualKind,
-  richTextAtGroupExpandCount
-} from "../chunk-E4PWFY3N.js";
+  selectedMentionPaletteItem
+} from "../chunk-3ZXEASYU.js";
 
 // src/at-panel/MentionPalette.tsx
 import {
@@ -28,7 +27,7 @@ import {
   FolderFailedFilledIcon,
   KeyboardFilledIcon
 } from "@tutti-os/ui-system/icons";
-import { Spinner, UnderlineTabs } from "@tutti-os/ui-system/components";
+import { UnderlineTabs } from "@tutti-os/ui-system/components";
 import { cn as cn2 } from "@tutti-os/ui-system/utils";
 
 // src/at-panel/mentionPaletteScrollbar.tsx
@@ -256,15 +255,33 @@ function resolveMentionPaletteTheme(theme) {
     groupDividerAttribute: theme?.groupDividerAttribute ?? DEFAULT_THEME.groupDividerAttribute
   };
 }
+function mentionPaletteRootClassName(theme) {
+  return cn2(
+    DEFAULT_THEME.classNames.palette,
+    theme.classNames.palette,
+    paletteStyles.palette
+  );
+}
 var paletteStyles = {
-  palette: "nodrag grid h-full max-h-[320px] min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden text-[13px] [-webkit-app-region:no-drag]",
-  header: "relative z-10 shrink-0",
-  footer: "shrink-0",
-  scrollShell: "relative min-h-0 overflow-hidden",
-  scrollBody: "h-full min-h-0 overflow-y-auto overscroll-contain px-1 pb-1 pt-2",
-  rowButton: "nodrag relative flex min-h-9 w-full min-w-0 cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-[6px] border-0 bg-transparent px-2.5 py-2 text-left text-[13px] text-[var(--text-primary)] outline-hidden transition-colors duration-200 [-webkit-app-region:no-drag] active:bg-[var(--transparency-active)] data-[highlighted]:bg-[var(--transparency-block)] data-[highlighted]:text-[var(--text-primary)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:flex-1 *:[span]:last:items-center *:[span]:last:gap-2",
-  categoryButton: "nodrag flex min-h-[72px] w-full items-center gap-3.5 rounded-[6px] border-0 bg-transparent px-2.5 py-2.5 text-left text-[var(--text-primary)] transition-[background-color,color] hover:bg-[var(--transparency-block)] focus-visible:bg-[var(--transparency-block)] focus-visible:outline-none active:bg-[var(--transparency-active)]",
-  expandButton: "nodrag flex w-full items-center justify-center rounded-[6px] px-3 py-2 text-[13px] font-medium text-[var(--text-secondary)] transition focus-visible:outline-none active:bg-[var(--transparency-active)] data-[highlighted]:bg-[var(--transparency-block)] data-[highlighted]:text-[var(--text-primary)]"
+  palette: "rich-text-at-mention-palette__shell",
+  header: "rich-text-at-mention-palette__header",
+  footer: "rich-text-at-mention-palette__footer",
+  scrollShell: "rich-text-at-mention-palette__scroll-shell",
+  scrollBody: "rich-text-at-mention-palette__scroll-body",
+  groups: "rich-text-at-mention-palette__groups",
+  group: "rich-text-at-mention-palette__group",
+  groupDivider: "rich-text-at-mention-palette__group-divider",
+  groupLabel: "rich-text-at-mention-palette__group-label",
+  groupItems: "rich-text-at-mention-palette__group-items",
+  groupEmpty: "rich-text-at-mention-palette__group-empty",
+  rowButton: "rich-text-at-mention-palette__row-button",
+  expandButton: "rich-text-at-mention-palette__expand-button",
+  emptyState: "rich-text-at-mention-palette__empty-state",
+  emptyStateInner: "rich-text-at-mention-palette__empty-state-inner",
+  emptyStateIcon: "rich-text-at-mention-palette__empty-state-icon",
+  emptyStateText: "rich-text-at-mention-palette__empty-state-text",
+  loading: "rich-text-at-mention-palette__loading",
+  loadingSpinner: "rich-text-at-mention-palette__loading-spinner"
 };
 var MENTION_PALETTE_LOADING_MIN_VISIBLE_MS = 320;
 function MentionPalette(props) {
@@ -318,10 +335,14 @@ function MentionPalette(props) {
       highlightedElement.scrollIntoView({ block: "nearest" });
       return;
     }
-    if (!scrollHighlightedIntoViewCentered) {
+    if (scrollHighlightedIntoViewCentered) {
+      centerElementInScrollContainer(scrollContainer, highlightedElement);
       return;
     }
-    centerElementInScrollContainer(scrollContainer, highlightedElement);
+    scrollElementIntoScrollContainerNearest(
+      scrollContainer,
+      highlightedElement
+    );
   }, [highlightedKey, scrollHighlightedIntoViewCentered]);
   useEffect2(() => {
     if (loadingHideTimerRef.current !== null) {
@@ -354,7 +375,7 @@ function MentionPalette(props) {
     return /* @__PURE__ */ jsx2(
       "div",
       {
-        className: cn2(theme.classNames.palette, paletteStyles.palette),
+        className: mentionPaletteRootClassName(theme),
         style: paletteMaxHeightStyle,
         role: "listbox",
         "aria-label": labels.listbox ?? labels.tabHint,
@@ -408,7 +429,7 @@ function MentionPalette(props) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn2(theme.classNames.palette, paletteStyles.palette),
+      className: mentionPaletteRootClassName(theme),
       style: paletteMaxHeightStyle,
       role: "listbox",
       "aria-label": labels.listbox ?? labels.tabHint,
@@ -480,6 +501,26 @@ function centerElementInScrollContainer(container, element) {
   const nextScrollTop = Math.min(Math.max(0, centeredScrollTop), maxScrollTop);
   container.scrollTo({ top: nextScrollTop, behavior: "auto" });
 }
+function scrollElementIntoScrollContainerNearest(container, element) {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  let nextScrollTop = container.scrollTop;
+  if (elementRect.top < containerRect.top) {
+    nextScrollTop -= containerRect.top - elementRect.top;
+  } else if (elementRect.bottom > containerRect.bottom) {
+    nextScrollTop += elementRect.bottom - containerRect.bottom;
+  } else {
+    return;
+  }
+  const maxScrollTop = Math.max(
+    0,
+    container.scrollHeight - container.clientHeight
+  );
+  container.scrollTo({
+    top: Math.min(Math.max(0, nextScrollTop), maxScrollTop),
+    behavior: "auto"
+  });
+}
 function findGroup(groups, groupId) {
   const group = groups.find((candidate) => candidate.id === groupId);
   if (!group) {
@@ -499,25 +540,25 @@ function MentionPaletteGroups({
   renderListFooter,
   groupDividerAttribute
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: paletteStyles.groups, children: [
     state.groups.map((group, index) => {
       const showGroupDivider = index > 0 && !group.hideTopDivider;
       return /* @__PURE__ */ jsxs(
         "section",
         {
-          className: cn2("grid gap-1", group.sectionClassName),
+          className: cn2(paletteStyles.group, group.sectionClassName),
           children: [
             showGroupDivider ? /* @__PURE__ */ jsx2(
               "div",
               {
-                className: "mx-3 mb-2 border-t border-[var(--line-1)]",
+                className: paletteStyles.groupDivider,
                 ...{ [groupDividerAttribute]: "true" },
                 "aria-hidden": "true"
               }
             ) : null,
-            group.label ? /* @__PURE__ */ jsx2("div", { className: "px-3 text-[13px] font-normal text-[var(--text-secondary)]", children: group.label }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-              group.items.length === 0 && group.emptyLabel ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-1 text-[13px] font-normal text-[var(--text-tertiary)]", children: group.emptyLabel }) : null,
+            group.label ? /* @__PURE__ */ jsx2("div", { className: paletteStyles.groupLabel, children: group.label }) : null,
+            /* @__PURE__ */ jsxs("div", { className: paletteStyles.groupItems, children: [
+              group.items.length === 0 && group.emptyLabel ? /* @__PURE__ */ jsx2("div", { className: paletteStyles.groupEmpty, children: group.emptyLabel }) : null,
               group.items.map((item) => {
                 const entryKey = `${group.id}:${getItemKey(item, group)}`;
                 const isHighlighted = entryKey === highlightedKey;
@@ -526,14 +567,15 @@ function MentionPaletteGroups({
                   {
                     ref: isHighlighted ? highlightedOptionRef : null,
                     type: "button",
-                    className: cn2(
-                      paletteStyles.rowButton,
-                      isHighlighted && "bg-[var(--transparency-block)]"
-                    ),
+                    className: paletteStyles.rowButton,
                     role: "option",
                     "aria-selected": isHighlighted,
                     "data-highlighted": isHighlighted ? "" : void 0,
-                    onMouseEnter: () => onHighlightChange(entryKey),
+                    onPointerMove: () => {
+                      if (!isHighlighted) {
+                        onHighlightChange(entryKey);
+                      }
+                    },
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => onSelectItem(item, group),
                     children: renderItem(item, { active: isHighlighted })
@@ -546,12 +588,13 @@ function MentionPaletteGroups({
                 {
                   ref: `expand:${group.id}` === highlightedKey ? highlightedOptionRef : null,
                   type: "button",
-                  className: cn2(
-                    paletteStyles.expandButton,
-                    `expand:${group.id}` === highlightedKey && "bg-[var(--transparency-block)] text-[var(--text-primary)]"
-                  ),
+                  className: paletteStyles.expandButton,
                   "data-highlighted": `expand:${group.id}` === highlightedKey ? "" : void 0,
-                  onMouseEnter: () => onHighlightChange(`expand:${group.id}`),
+                  onPointerMove: () => {
+                    if (`expand:${group.id}` !== highlightedKey) {
+                      onHighlightChange(`expand:${group.id}`);
+                    }
+                  },
                   onMouseDown: (event) => event.preventDefault(),
                   onClick: () => onExpandGroup(group.id),
                   children: group.expandLabel ?? `+${Math.max(0, group.totalCount - group.visibleCount)}`
@@ -577,18 +620,18 @@ function MentionPaletteEmptyState({
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: "flex h-full min-h-0 flex-1 items-center justify-center px-4 py-6 text-center text-[13px] text-[var(--text-tertiary)]",
+      className: paletteStyles.emptyState,
       "data-empty-state-icon": icon,
       "data-testid": testId,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[28ch] flex-col items-center justify-center gap-3", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: paletteStyles.emptyStateInner, children: [
         /* @__PURE__ */ jsx2(
           EmptyStateIcon,
           {
-            className: "h-6 w-6 text-[var(--text-tertiary)]",
+            className: paletteStyles.emptyStateIcon,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx2("span", { className: "leading-5 text-[var(--text-tertiary)]", children: label })
+        /* @__PURE__ */ jsx2("span", { className: paletteStyles.emptyStateText, children: label })
       ] })
     }
   );
@@ -598,13 +641,13 @@ function MentionPaletteLoading({
   spinnerTestId
 }) {
   "use memo";
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[52px] items-center gap-2 rounded-xl px-3 text-[13px] text-[var(--text-secondary)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: paletteStyles.loading, children: [
     /* @__PURE__ */ jsx2(
-      Spinner,
+      "span",
       {
-        size: 16,
-        className: "text-[var(--text-secondary)]",
-        testId: spinnerTestId
+        "aria-hidden": "true",
+        className: paletteStyles.loadingSpinner,
+        "data-testid": spinnerTestId
       }
     ),
     /* @__PURE__ */ jsx2("span", { children: label })
@@ -627,20 +670,52 @@ function MentionPaletteHint({
       "aria-label": ariaLabel,
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: cn2(classNames.hintItem, classNames.hintButton),
-            type: "button",
-            "aria-label": cycleFilterLabel,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => onCycleFilter(1),
-            children: [
-              /* @__PURE__ */ jsx2("kbd", { className: classNames.shortcut, children: "Tab" }),
-              /* @__PURE__ */ jsx2("span", { children: cycleFilterLabel })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("span", { className: classNames.hintItem, children: [
+          /* @__PURE__ */ jsxs("span", { className: classNames.shortcutGroup, children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: cn2(classNames.shortcut, classNames.shortcutButton),
+                type: "button",
+                "aria-label": `Tab ${cycleFilterLabel}`,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onCycleFilter(1),
+                children: "Tab"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: cn2(
+                  classNames.shortcut,
+                  classNames.shortcutArrow,
+                  classNames.shortcutButton
+                ),
+                type: "button",
+                "aria-label": `\u2190 ${cycleFilterLabel}`,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onCycleFilter(-1),
+                children: "\u2190"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: cn2(
+                  classNames.shortcut,
+                  classNames.shortcutArrow,
+                  classNames.shortcutButton
+                ),
+                type: "button",
+                "aria-label": `\u2192 ${cycleFilterLabel}`,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onCycleFilter(1),
+                children: "\u2192"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("span", { children: cycleFilterLabel })
+        ] }),
         /* @__PURE__ */ jsx2("span", { className: classNames.hintSeparator, "aria-hidden": "true", children: "\uFF5C" }),
         /* @__PURE__ */ jsxs("span", { className: classNames.hintItem, children: [
           /* @__PURE__ */ jsxs("span", { className: classNames.shortcutGroup, children: [
@@ -682,6 +757,193 @@ function MentionPaletteHint({
   );
 }
 
+// src/at-panel/mentionPaletteStateAdapter.ts
+function createMentionPaletteStateAdapter(input) {
+  const getPaletteItemKey = (item, group) => input.getItemKey(item, group.id);
+  const selectCategory = (categoryId) => {
+    input.callbacks?.onActiveCategoryIdChange?.(categoryId);
+  };
+  const expandGroup = (groupId) => {
+    input.callbacks?.onExpandGroup?.(groupId);
+  };
+  const moveSelection = (delta) => {
+    const nextKey = moveMentionPaletteHighlight({
+      state: input.state,
+      currentKey: input.highlightedKey,
+      delta,
+      getItemKey: input.getItemKey
+    });
+    if (nextKey !== null) {
+      input.callbacks?.onHighlightChange?.(nextKey);
+    }
+    return nextKey;
+  };
+  const cycleCategory = (delta) => {
+    const cycleCategories = resolveCycleCategories(input.categoryCycleOrder);
+    const categories = cycleCategories.length ? cycleCategories : input.state.categories;
+    if (categories.length === 0) {
+      return null;
+    }
+    const nextCategoryId = nextMentionPaletteCategory(
+      categories,
+      input.state.filter,
+      delta
+    );
+    selectCategory(nextCategoryId);
+    return nextCategoryId;
+  };
+  const selectedItem = selectedMentionPaletteItem({
+    state: input.state,
+    key: input.highlightedKey,
+    getItemKey: input.getItemKey
+  });
+  const commitHighlighted = () => {
+    const activeEntry = findMentionPaletteEntry({
+      state: input.state,
+      key: input.highlightedKey,
+      getItemKey: input.getItemKey
+    });
+    const fallbackCategoryId = categoryIdFromKey(input.highlightedKey);
+    if (!activeEntry) {
+      if (fallbackCategoryId !== null && input.state.categories.some(
+        (category) => category.id === fallbackCategoryId
+      )) {
+        selectCategory(fallbackCategoryId);
+        return { type: "category", categoryId: fallbackCategoryId };
+      }
+      return { type: "none" };
+    }
+    if (activeEntry.type === "category" && activeEntry.categoryId) {
+      selectCategory(activeEntry.categoryId);
+      return { type: "category", categoryId: activeEntry.categoryId };
+    }
+    if (activeEntry.type === "expand" && activeEntry.groupId) {
+      expandGroup(activeEntry.groupId);
+      return { type: "expand", groupId: activeEntry.groupId };
+    }
+    if (activeEntry.type === "item") {
+      const item = selectedMentionPaletteItem({
+        state: input.state,
+        key: activeEntry.key,
+        getItemKey: input.getItemKey
+      });
+      if (item !== null) {
+        input.callbacks?.onSelectItem?.(item);
+        return { type: "item", item };
+      }
+    }
+    return { type: "none" };
+  };
+  return {
+    selectedItem,
+    paletteProps: {
+      state: input.state,
+      highlightedKey: input.highlightedKey,
+      getItemKey: getPaletteItemKey,
+      onHighlightChange: (key) => {
+        input.callbacks?.onHighlightChange?.(key);
+      },
+      onSelectItem: (item) => {
+        input.callbacks?.onSelectItem?.(item);
+      },
+      onSelectCategory: selectCategory,
+      onSelectFilter: selectCategory,
+      onExpandGroup: expandGroup,
+      onCycleFilter: cycleCategory,
+      onMoveSelection: moveSelection
+    },
+    moveSelection,
+    selectCategory,
+    expandGroup,
+    cycleCategory,
+    commitHighlighted
+  };
+}
+function resolveCycleCategories(categories) {
+  return categories?.map(
+    (category) => typeof category === "string" ? { id: category } : category
+  ) ?? [];
+}
+function categoryIdFromKey(key) {
+  const prefix = "category:";
+  return key?.startsWith(prefix) ? key.slice(prefix.length) : null;
+}
+
+// src/at-panel/MentionPaletteFromState.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MentionPaletteFromState(props) {
+  "use memo";
+  const {
+    labels,
+    hintLabels,
+    maxHeightPx,
+    renderItem,
+    renderListFooter,
+    loadingBanner,
+    scrollHighlightedIntoViewCentered,
+    theme,
+    ...adapterInput
+  } = props;
+  const adapter = createMentionPaletteStateAdapter(adapterInput);
+  return /* @__PURE__ */ jsx3(
+    MentionPalette,
+    {
+      ...adapter.paletteProps,
+      labels,
+      hintLabels,
+      maxHeightPx,
+      renderItem,
+      renderListFooter,
+      loadingBanner,
+      scrollHighlightedIntoViewCentered,
+      theme
+    }
+  );
+}
+
+// src/at-panel/MentionPaletteControls.tsx
+import { CheckIcon } from "@tutti-os/ui-system/icons";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function MentionPaletteSelectIndicator(props) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "rich-text-at-mention-select-indicator",
+      "data-selected": props.selected ? "true" : "false",
+      children: /* @__PURE__ */ jsx4(CheckIcon, { size: 13 })
+    }
+  );
+}
+function MentionPaletteMultiSelectFooter(props) {
+  return /* @__PURE__ */ jsxs2("div", { className: "rich-text-at-mention-multiselect-footer", children: [
+    /* @__PURE__ */ jsx4("span", { className: "rich-text-at-mention-multiselect-footer__count", children: props.countLabel }),
+    /* @__PURE__ */ jsxs2("div", { className: "rich-text-at-mention-multiselect-footer__actions", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "rich-text-at-mention-multiselect-footer__button rich-text-at-mention-multiselect-footer__button--secondary",
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: props.onCancel,
+          children: props.cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          disabled: props.count === 0,
+          className: "rich-text-at-mention-multiselect-footer__button rich-text-at-mention-multiselect-footer__button--primary",
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: props.onConfirm,
+          children: props.confirmLabel
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/at-panel/MentionRow.tsx
 import {
   ArrowLeftIcon,
@@ -738,7 +1000,7 @@ function mentionRowDataAttribute(mode, key, value) {
 }
 
 // src/at-panel/MentionRow.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var MENTION_FILE_VISUAL_KIND_ICON = {
   back: ArrowLeftIcon,
   folder: FolderIcon,
@@ -789,7 +1051,7 @@ function renderMentionRow(item, options) {
     openReferencesLabel
   } = resolveMentionRowRenderOptions(options);
   const resolved = resolveMentionRowClassNames(classNames);
-  const referencesButton = onOpenReferences ? /* @__PURE__ */ jsx3(
+  const referencesButton = onOpenReferences ? /* @__PURE__ */ jsx5(
     MentionOpenReferencesButton,
     {
       label: openReferencesLabel,
@@ -798,7 +1060,7 @@ function renderMentionRow(item, options) {
     }
   ) : null;
   if (item.kind === "file") {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       MentionFileRow,
       {
         item,
@@ -807,10 +1069,19 @@ function renderMentionRow(item, options) {
       }
     );
   }
+  if (item.kind === "plain") {
+    return /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row rich-text-at-mention-row--plain", children: [
+      item.leading,
+      /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__text-stack", children: [
+        /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__title", children: item.label }),
+        item.description ? /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__description", children: item.description }) : null
+      ] })
+    ] });
+  }
   if (item.kind === "session") {
-    return /* @__PURE__ */ jsxs2("span", { className: "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3", children: [
-      /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: [
-        /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row rich-text-at-mention-row--session", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__leading", children: [
+        /* @__PURE__ */ jsx5(
           MentionSessionAvatarStack,
           {
             item,
@@ -818,9 +1089,9 @@ function renderMentionRow(item, options) {
             dataAttributeMode
           }
         ),
-        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-[13px] font-semibold leading-[16px] text-[var(--text-primary)]", children: /* @__PURE__ */ jsx3(MentionSessionTitle, { item }) })
+        /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__session-title", children: /* @__PURE__ */ jsx5(MentionSessionTitle, { item }) })
       ] }),
-      item.statusTag ? /* @__PURE__ */ jsx3(
+      item.statusTag ? /* @__PURE__ */ jsx5(
         MentionStatusBadge,
         {
           statusTag: item.statusTag,
@@ -830,8 +1101,8 @@ function renderMentionRow(item, options) {
     ] });
   }
   if (item.kind === "app") {
-    return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: [
-      /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row rich-text-at-mention-row--app", children: [
+      /* @__PURE__ */ jsx5(
         MentionWorkspaceAppIcon,
         {
           iconUrl: item.iconUrl,
@@ -839,21 +1110,21 @@ function renderMentionRow(item, options) {
           dataAttributeMode
         }
       ),
-      /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-1 items-baseline gap-1 overflow-hidden", children: [
-        /* @__PURE__ */ jsx3("span", { className: "min-w-0 max-w-[40%] shrink-0 truncate text-[13px] font-semibold text-[var(--text-primary)]", children: item.name }),
-        item.description ? /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate text-[13px] font-normal text-[var(--text-secondary)]", children: item.description }) : null
+      /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__app-text", children: [
+        /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__app-name", children: item.name }),
+        item.description ? /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__app-description", children: item.description }) : null
       ] }),
       referencesButton
     ] });
   }
   if (item.kind === "app-factory") {
-    return /* @__PURE__ */ jsx3("span", { className: "grid min-w-0 overflow-hidden gap-1", children: /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold text-[var(--text-primary)]", children: item.name }) });
+    return /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__text-stack", children: /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__title", children: item.name }) });
   }
-  return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs2("span", { className: "grid min-w-0 flex-1 overflow-hidden gap-1", children: [
-      /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: [
-        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-[13px] font-semibold text-[var(--text-primary)]", children: item.title }),
-        item.statusTag ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row rich-text-at-mention-row--issue", children: [
+    /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__text-stack rich-text-at-mention-row__text-stack--fill", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__inline", children: [
+        /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__title", children: item.title }),
+        item.statusTag ? /* @__PURE__ */ jsx5(
           MentionStatusBadge,
           {
             statusTag: item.statusTag,
@@ -861,7 +1132,7 @@ function renderMentionRow(item, options) {
           }
         ) : null
       ] }),
-      item.creatorName ? /* @__PURE__ */ jsx3("span", { className: "truncate text-[13px] font-normal text-[var(--text-secondary)]", children: item.creatorName }) : null
+      item.creatorName ? /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__description", children: item.creatorName }) : null
     ] }),
     referencesButton
   ] });
@@ -871,14 +1142,14 @@ function MentionOpenReferencesButton({
   onOpenReferences,
   dataAttributeMode
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
       role: "button",
       tabIndex: -1,
       "aria-label": label,
       title: label,
-      className: "ml-auto grid h-6 w-6 shrink-0 cursor-pointer place-items-center rounded-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--transparency-active)] hover:text-[var(--text-secondary)]",
+      className: "rich-text-at-mention-row__open-references",
       ...mentionRowDataAttribute(dataAttributeMode, "openReferences", "true"),
       onMouseDown: (event) => {
         event.preventDefault();
@@ -889,7 +1160,7 @@ function MentionOpenReferencesButton({
         event.stopPropagation();
         onOpenReferences();
       },
-      children: /* @__PURE__ */ jsx3(LocateFolderIcon, { size: 16 })
+      children: /* @__PURE__ */ jsx5(LocateFolderIcon, { size: 16 })
     }
   );
 }
@@ -898,10 +1169,10 @@ function MentionFileRow({
   classNames,
   dataAttributeMode
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "span",
     {
-      className: "flex min-w-0 items-center gap-2",
+      className: "rich-text-at-mention-row rich-text-at-mention-row--file",
       ...mentionRowRootDataAttributes(dataAttributeMode, "file"),
       ...item.entryKind ? mentionRowDataAttribute(
         dataAttributeMode,
@@ -919,7 +1190,7 @@ function MentionFileRow({
         item.mentionNavigation
       ) : {},
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           MentionFileIcon,
           {
             item,
@@ -927,9 +1198,9 @@ function MentionFileRow({
             dataAttributeMode
           }
         ),
-        /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-baseline gap-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-[13px] font-semibold text-[var(--text-primary)]", children: item.name }),
-          item.childCountLabel ? /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-[13px] font-normal text-[var(--text-secondary)]", children: item.childCountLabel }) : null
+        /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__file-text", children: [
+          /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__title", children: item.name }),
+          item.childCountLabel ? /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__file-count", children: item.childCountLabel }) : null
         ] })
       ]
     }
@@ -942,18 +1213,18 @@ function MentionFileIcon({
 }) {
   const thumbnailUrl = item.visualKind === "image" ? item.thumbnailUrl?.trim() || "" : "";
   if (thumbnailUrl) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       "span",
       {
         className: classNames.fileThumb,
         ...mentionRowDataAttribute(dataAttributeMode, "fileThumb", "true"),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx5(
           "img",
           {
             src: thumbnailUrl,
             alt: "",
-            className: "h-full w-full object-cover",
+            className: "rich-text-at-mention-row__media",
             decoding: "async",
             loading: "lazy",
             draggable: false
@@ -965,12 +1236,12 @@ function MentionFileIcon({
   const usesDefaultFileIcon = classNames.fileIcon === DEFAULT_MENTION_ROW_CLASS_NAMES.fileIcon;
   if (usesDefaultFileIcon) {
     const Icon = MENTION_FILE_VISUAL_KIND_ICON[item.visualKind];
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       "span",
       {
         className: cn3(
           classNames.fileIcon,
-          "grid h-4 w-4 shrink-0 place-items-center text-[var(--text-secondary)]"
+          "rich-text-at-mention-file-icon--glyph"
         ),
         ...mentionRowDataAttribute(
           dataAttributeMode,
@@ -978,11 +1249,11 @@ function MentionFileIcon({
           item.visualKind
         ),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx3(Icon, { size: 16 })
+        children: /* @__PURE__ */ jsx5(Icon, { size: 16 })
       }
     );
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
       className: classNames.fileIcon,
@@ -1001,24 +1272,32 @@ function MentionWorkspaceAppIcon({
   dataAttributeMode
 }) {
   const normalizedIconUrl = iconUrl?.trim() ?? "";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
-      className: "grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-[5px] bg-block text-[var(--text-secondary)]",
+      className: "rich-text-at-mention-app-icon",
       ...mentionRowDataAttribute(dataAttributeMode, "appIcon", "true"),
       "data-workspace-app-icon": "true",
       "aria-hidden": "true",
-      children: normalizedIconUrl ? /* @__PURE__ */ jsx3(
+      children: normalizedIconUrl ? /* @__PURE__ */ jsx5(
         "img",
         {
           src: normalizedIconUrl,
           alt: "",
-          className: "h-full w-full object-cover",
+          className: "rich-text-at-mention-row__media",
           decoding: "async",
           loading: "lazy",
           draggable: false
         }
-      ) : /* @__PURE__ */ jsx3("span", { className: cn3(kindIconClassName, "h-4 w-4") })
+      ) : /* @__PURE__ */ jsx5(
+        "span",
+        {
+          className: cn3(
+            kindIconClassName,
+            "rich-text-at-mention-kind-icon--app"
+          )
+        }
+      )
     }
   );
 }
@@ -1030,72 +1309,65 @@ function MentionSessionAvatarStack({
   const userAvatarUrl = item.userAvatarUrl?.trim() ?? "";
   const placeholderUrl = item.userAvatarPlaceholderUrl;
   const userImageUrl = userAvatarUrl || placeholderUrl;
-  return /* @__PURE__ */ jsxs2(
-    "span",
-    {
-      className: "relative isolate block h-5 w-9 shrink-0",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx3(
-          "span",
+  return /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-avatar-stack", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "rich-text-at-mention-avatar rich-text-at-mention-avatar--user",
+        ...mentionRowDataAttribute(dataAttributeMode, "userAvatar", "true"),
+        children: /* @__PURE__ */ jsx5(
+          "img",
           {
-            className: "absolute left-0 top-0 z-0 grid h-5 w-5 overflow-hidden rounded-full bg-block",
-            ...mentionRowDataAttribute(dataAttributeMode, "userAvatar", "true"),
-            children: /* @__PURE__ */ jsx3(
-              "img",
-              {
-                src: userImageUrl,
-                alt: "",
-                className: cn3(
-                  "h-full w-full object-cover",
-                  !userAvatarUrl && classNames.avatarImgUserPlaceholder
-                ),
-                decoding: "async",
-                loading: "lazy",
-                referrerPolicy: "no-referrer",
-                draggable: false,
-                onError: (event) => {
-                  if (event.currentTarget.dataset.fallbackAvatarApplied === "true") {
-                    return;
-                  }
-                  event.currentTarget.dataset.fallbackAvatarApplied = "true";
-                  event.currentTarget.src = placeholderUrl;
-                  event.currentTarget.classList.add(
-                    classNames.avatarImgUserPlaceholder
-                  );
-                }
+            src: userImageUrl,
+            alt: "",
+            className: cn3(
+              "rich-text-at-mention-row__media",
+              !userAvatarUrl && classNames.avatarImgUserPlaceholder
+            ),
+            decoding: "async",
+            loading: "lazy",
+            referrerPolicy: "no-referrer",
+            draggable: false,
+            onError: (event) => {
+              if (event.currentTarget.dataset.fallbackAvatarApplied === "true") {
+                return;
               }
-            )
+              event.currentTarget.dataset.fallbackAvatarApplied = "true";
+              event.currentTarget.src = placeholderUrl;
+              event.currentTarget.classList.add(
+                classNames.avatarImgUserPlaceholder
+              );
+            }
           }
-        ),
-        /* @__PURE__ */ jsx3(
-          "span",
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "rich-text-at-mention-avatar rich-text-at-mention-avatar--agent",
+        ...mentionRowDataAttribute(dataAttributeMode, "agentAvatar", "true"),
+        children: /* @__PURE__ */ jsx5(
+          "img",
           {
-            className: "absolute left-4 top-0 z-10 grid h-5 w-5 overflow-hidden rounded-full bg-block",
-            ...mentionRowDataAttribute(dataAttributeMode, "agentAvatar", "true"),
-            children: /* @__PURE__ */ jsx3(
-              "img",
-              {
-                src: item.agentIconUrl,
-                alt: "",
-                className: "h-full w-full object-cover",
-                decoding: "async",
-                loading: "lazy",
-                draggable: false
-              }
-            )
+            src: item.agentIconUrl,
+            alt: "",
+            className: "rich-text-at-mention-row__media",
+            decoding: "async",
+            loading: "lazy",
+            draggable: false
           }
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 }
 function MentionSessionTitle({
   item
 }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[16px]", children: item.participant }),
-    /* @__PURE__ */ jsxs2("span", { className: "text-[13px] font-normal leading-[16px] text-[var(--text-secondary)]", children: [
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "rich-text-at-mention-row__session-participant", children: item.participant }),
+    /* @__PURE__ */ jsxs3("span", { className: "rich-text-at-mention-row__session-summary", children: [
       " ",
       item.summary ?? ""
     ] })
@@ -1106,12 +1378,12 @@ function MentionStatusBadge({
   dataAttributeMode
 }) {
   if (statusTag.variant === "issue") {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       Badge,
       {
         variant: "secondary",
         className: cn3(
-          "shrink-0 text-[13px]",
+          "rich-text-at-mention-status rich-text-at-mention-status--issue",
           mentionStatusBadgeClassName({
             tone: statusTag.tone,
             variant: "issue"
@@ -1119,16 +1391,17 @@ function MentionStatusBadge({
         ),
         ...mentionRowDataAttribute(dataAttributeMode, "statusTag", "true"),
         ...statusTag.dataStatus ? { "data-status": statusTag.dataStatus } : {},
+        "data-tone": statusTag.tone,
         children: statusTag.label
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Badge,
     {
       variant: "secondary",
       className: cn3(
-        "inline-flex h-5 shrink-0 items-center gap-1.5 rounded-[4px] px-2 text-[11px] font-semibold leading-none",
+        "rich-text-at-mention-status rich-text-at-mention-status--activity",
         mentionStatusBadgeClassName({
           tone: statusTag.tone,
           variant: "activity"
@@ -1139,7 +1412,7 @@ function MentionStatusBadge({
       "data-tone": statusTag.tone,
       title: statusTag.label,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           StatusDot,
           {
             tone: statusTag.tone,
@@ -1148,12 +1421,466 @@ function MentionStatusBadge({
             title: statusTag.label
           }
         ),
-        /* @__PURE__ */ jsx3("span", { children: statusTag.label })
+        /* @__PURE__ */ jsx5("span", { children: statusTag.label })
       ]
     }
   );
 }
 
+// src/at-panel/mentionReferenceIcon.ts
+import React from "react";
+var REFERENCE_LEADING_STYLE = {
+  alignItems: "center",
+  background: "var(--bg-block, var(--block, #0000000a))",
+  borderRadius: "8px",
+  color: "var(--rich-text-at-mention-text-secondary, currentColor)",
+  display: "inline-grid",
+  flex: "0 0 32px",
+  height: "32px",
+  justifyItems: "center",
+  overflow: "hidden",
+  width: "32px"
+};
+var REFERENCE_IMAGE_STYLE = {
+  display: "block",
+  height: "100%",
+  objectFit: "cover",
+  width: "100%"
+};
+var REFERENCE_ICON_STYLE = {
+  display: "block",
+  height: "18px",
+  width: "18px"
+};
+function resolveMentionReferenceImageUrl(input) {
+  return input.thumbnailUrl?.trim() || input.iconUrl?.trim() || void 0;
+}
+function renderMentionReferenceLeading(input) {
+  const imageUrl = resolveMentionReferenceImageUrl(input);
+  return React.createElement(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: input.className,
+      "data-rich-text-at-mention-reference-kind": input.kind,
+      "data-rich-text-at-mention-reference-leading": "true",
+      style: REFERENCE_LEADING_STYLE
+    },
+    imageUrl ? React.createElement("img", {
+      alt: "",
+      className: input.imageClassName,
+      decoding: "async",
+      draggable: false,
+      loading: "lazy",
+      src: imageUrl,
+      style: REFERENCE_IMAGE_STYLE
+    }) : renderMentionReferenceFallbackIcon(input)
+  );
+}
+function renderMentionReferenceFallbackIcon(input) {
+  return React.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.8,
+      style: REFERENCE_ICON_STYLE,
+      viewBox: "0 0 24 24"
+    },
+    ...referenceIconPaths(input)
+  );
+}
+function referenceIconPaths(input) {
+  if (input.kind === "workspace-app") {
+    return [
+      React.createElement("rect", {
+        height: 7,
+        key: "a",
+        rx: 1.5,
+        width: 7,
+        x: 4,
+        y: 4
+      }),
+      React.createElement("rect", {
+        height: 7,
+        key: "b",
+        rx: 1.5,
+        width: 7,
+        x: 13,
+        y: 4
+      }),
+      React.createElement("rect", {
+        height: 7,
+        key: "c",
+        rx: 1.5,
+        width: 7,
+        x: 4,
+        y: 13
+      }),
+      React.createElement("rect", {
+        height: 7,
+        key: "d",
+        rx: 1.5,
+        width: 7,
+        x: 13,
+        y: 13
+      })
+    ];
+  }
+  if (input.kind === "workspace-issue") {
+    return [
+      React.createElement("circle", { cx: 12, cy: 12, key: "a", r: 8 }),
+      React.createElement("path", { d: "M8.5 12.5 11 15l4.5-5", key: "b" })
+    ];
+  }
+  if (input.kind === "agent-session") {
+    return [
+      React.createElement("path", {
+        d: "M6 9.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v2.5a5 5 0 0 1-5 5h-1.5L8 19v-2.4A5 5 0 0 1 6 12z",
+        key: "a"
+      })
+    ];
+  }
+  if (input.kind === "file" || input.kind === "agent-generated-file" || input.fileVisualKind != null) {
+    if (input.fileVisualKind === "folder" || input.fileVisualKind === "back") {
+      return [
+        React.createElement("path", {
+          d: "M3.5 7.5h6l2 2h9v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z",
+          key: "a"
+        })
+      ];
+    }
+    if (input.fileVisualKind === "image") {
+      return [
+        React.createElement("rect", {
+          height: 14,
+          key: "a",
+          rx: 2,
+          width: 16,
+          x: 4,
+          y: 5
+        }),
+        React.createElement("path", {
+          d: "m7 16 3.5-3.5 2.5 2.5 2-2 2 3",
+          key: "b"
+        }),
+        React.createElement("circle", { cx: 9, cy: 9, key: "c", r: 1 })
+      ];
+    }
+    if (input.fileVisualKind === "video") {
+      return [
+        React.createElement("rect", {
+          height: 14,
+          key: "a",
+          rx: 2,
+          width: 16,
+          x: 4,
+          y: 5
+        }),
+        React.createElement("path", {
+          d: "m10 9 5 3-5 3z",
+          key: "b"
+        })
+      ];
+    }
+    return [
+      React.createElement("path", {
+        d: "M7 3.5h7l4 4V20a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1z",
+        key: "a"
+      }),
+      React.createElement("path", { d: "M14 3.5v4h4", key: "b" })
+    ];
+  }
+  return [
+    React.createElement("path", {
+      d: "M9.5 14.5 14.5 9.5",
+      key: "a"
+    }),
+    React.createElement("path", {
+      d: "M8.5 10.5 7 12a3.5 3.5 0 0 0 5 5l1.5-1.5",
+      key: "b"
+    }),
+    React.createElement("path", {
+      d: "M15.5 13.5 17 12a3.5 3.5 0 0 0-5-5l-1.5 1.5",
+      key: "c"
+    })
+  ];
+}
+
+// src/at-panel/mentionTriggerRowItem.ts
+var SUPPORTED_MENTION_TRIGGER_ROW_PROVIDER_IDS = /* @__PURE__ */ new Set([
+  "agent-generated-file",
+  "agent-session",
+  "file",
+  "workspace-app",
+  "workspace-issue"
+]);
+function richTextTriggerQueryMatchToMentionRowItem(match, options = {}) {
+  const presentation = mentionPresentation(match);
+  const label = resolveMentionRowLabel(match);
+  const description = resolveMentionRowDescription(match, options);
+  const providerKind = mentionReferenceProviderKind(match.providerId);
+  const iconUrl = resolveMentionRowIconUrl(match, presentation, options);
+  const thumbnailUrl = resolveMentionRowThumbnailUrl(
+    match,
+    presentation,
+    options
+  );
+  const fileVisualKind = isFileMentionProvider(match.providerId) ? resolveMentionRowFileVisualKind(match, options) : void 0;
+  const customLeading = options.renderLeading?.({
+    description,
+    fileVisualKind,
+    iconUrl,
+    label,
+    match,
+    providerKind,
+    thumbnailUrl
+  });
+  if (customLeading !== void 0) {
+    return mentionRowPlainItem({
+      description,
+      label,
+      leading: customLeading
+    });
+  }
+  if (match.providerId === "workspace-app") {
+    return {
+      kind: "app",
+      description,
+      iconUrl,
+      name: label
+    };
+  }
+  if (match.providerId === "workspace-issue") {
+    return {
+      kind: "issue",
+      creatorName: description,
+      statusTag: resolveMentionRowStatusTag(match, "issue", options),
+      title: label
+    };
+  }
+  if (isFileMentionProvider(match.providerId)) {
+    const entryKind = resolveFileEntryKind(match, options);
+    const mentionNavigation = resolveFileMentionNavigation(match, options);
+    const visualKind = fileVisualKind ?? "document";
+    return {
+      kind: "file",
+      childCountLabel: normalizedText(options.getChildCountLabel?.(match)),
+      entryKind,
+      mentionNavigation,
+      name: label,
+      thumbnailUrl: resolveMentionFileThumbnailUrl({
+        thumbnailUrl,
+        visualKind
+      }) ?? null,
+      visualKind
+    };
+  }
+  if (match.providerId === "agent-session") {
+    const session = agentSessionMentionRowItem(match, {
+      description,
+      iconUrl,
+      options,
+      presentation
+    });
+    if (session) {
+      return session;
+    }
+  }
+  return mentionRowPlainItem({
+    description,
+    label,
+    leading: renderMentionReferenceLeading({
+      fileVisualKind,
+      iconUrl,
+      kind: providerKind,
+      label,
+      thumbnailUrl
+    })
+  });
+}
+function isMentionTriggerRowProviderId(providerId) {
+  return SUPPORTED_MENTION_TRIGGER_ROW_PROVIDER_IDS.has(providerId);
+}
+function workspaceAppIconFallbackUrlFromTriggerMatch(match) {
+  const appId = mentionEntityId(match) || match.key.trim();
+  if (!appId) {
+    return null;
+  }
+  return `tutti://workspace-apps/${encodeURIComponent(appId)}/icon.png`;
+}
+function mentionRowStatusTagFromPresentation(match, input) {
+  const presentation = mentionPresentation(match);
+  const label = normalizedText(presentation?.statusLabel);
+  if (!label) {
+    return null;
+  }
+  const dataStatus = normalizedText(presentation?.statusDataStatus) ?? normalizedText(presentation?.status);
+  return {
+    dataStatus: dataStatus ?? void 0,
+    label,
+    pulse: presentation?.statusPulse === "true",
+    tone: input.tone ?? "neutral",
+    variant: input.variant
+  };
+}
+function agentSessionMentionRowItem(match, input) {
+  const agentIconUrl = normalizedText(input.options.getAgentIconUrl?.(match)) ?? normalizedText(input.presentation?.agentIconUrl) ?? input.iconUrl;
+  const userAvatarPlaceholderUrl = normalizedText(input.options.getUserAvatarPlaceholderUrl?.(match)) ?? normalizedText(input.presentation?.userAvatarPlaceholderUrl);
+  if (!agentIconUrl || !userAvatarPlaceholderUrl) {
+    return null;
+  }
+  return {
+    kind: "session",
+    agentIconUrl,
+    participant: normalizedText(input.presentation?.participant) ?? resolveMentionRowLabel(match),
+    statusTag: resolveMentionRowStatusTag(match, "activity", input.options),
+    summary: input.description,
+    userAvatarPlaceholderUrl,
+    userAvatarUrl: normalizedText(input.options.getUserAvatarUrl?.(match)) ?? null
+  };
+}
+function mentionRowPlainItem(input) {
+  return {
+    kind: "plain",
+    description: input.description,
+    label: input.label,
+    leading: input.leading
+  };
+}
+function resolveMentionRowLabel(match) {
+  return normalizedText(
+    match.insertResult.kind === "mention" ? match.insertResult.mention.label : match.insertResult.kind === "markdown-link" ? match.insertResult.label : void 0
+  ) ?? normalizedText(match.label) ?? match.key;
+}
+function resolveMentionRowDescription(match, options) {
+  const presentation = mentionPresentation(match);
+  return normalizedText(options.getDescription?.(match)) ?? normalizedText(presentation?.description) ?? normalizedText(presentation?.subtitle) ?? normalizedText(match.subtitle) ?? null;
+}
+function resolveMentionRowIconUrl(match, presentation, options) {
+  return normalizedText(presentation?.iconUrl) ?? normalizedText(match.iconUrl) ?? (match.providerId === "workspace-app" ? normalizedText(options.getWorkspaceAppIconFallbackUrl?.(match)) ?? workspaceAppIconFallbackUrlFromTriggerMatch(match) : null) ?? null;
+}
+function resolveMentionRowThumbnailUrl(match, presentation, options) {
+  return normalizedText(options.getFileThumbnailUrl?.(match)) ?? normalizedText(presentation?.thumbnailUrl) ?? normalizedText(readStringProperty(match.item, "thumbnailUrl")) ?? (isFileMentionProvider(match.providerId) ? normalizedText(match.iconUrl) : null) ?? null;
+}
+function resolveMentionRowFileVisualKind(match, options) {
+  const override = options.getFileVisualKind?.(match);
+  if (override) {
+    return override;
+  }
+  return resolveMentionFileVisualKind({
+    baseVisualKind: inferMentionFileVisualKind(
+      markdownLinkHref(match) ?? normalizedText(match.subtitle) ?? normalizedText(match.label) ?? match.key
+    ),
+    entryKind: resolveFileEntryKind(match, options),
+    mentionNavigation: resolveFileMentionNavigation(match, options)
+  });
+}
+function resolveMentionRowStatusTag(match, variant, options) {
+  return options.getStatusTag?.(match, variant) ?? mentionRowStatusTagFromPresentation(match, { variant });
+}
+function resolveFileEntryKind(match, options) {
+  return normalizedText(options.getFileEntryKind?.(match)) ?? normalizedText(readStringProperty(match.item, "entryKind")) ?? normalizedText(readStringProperty(match.item, "kind")) ?? null;
+}
+function resolveFileMentionNavigation(match, options) {
+  return normalizedText(options.getFileMentionNavigation?.(match)) ?? normalizedText(readStringProperty(match.item, "mentionNavigation")) ?? null;
+}
+function mentionReferenceProviderKind(providerId) {
+  if (providerId === "workspace-app") {
+    return "workspace-app";
+  }
+  if (providerId === "workspace-issue") {
+    return "workspace-issue";
+  }
+  if (providerId === "agent-session") {
+    return "agent-session";
+  }
+  if (providerId === "agent-generated-file") {
+    return "agent-generated-file";
+  }
+  if (providerId === "file") {
+    return "file";
+  }
+  return "generic";
+}
+function isFileMentionProvider(providerId) {
+  return providerId === "file" || providerId === "agent-generated-file";
+}
+function mentionPresentation(match) {
+  return match.insertResult.kind === "mention" ? match.insertResult.mention.presentation ?? null : null;
+}
+function mentionEntityId(match) {
+  return match.insertResult.kind === "mention" ? normalizedText(match.insertResult.mention.entityId) ?? null : null;
+}
+function markdownLinkHref(match) {
+  return match.insertResult.kind === "markdown-link" ? normalizedText(match.insertResult.href) ?? null : null;
+}
+function inferMentionFileVisualKind(pathOrName) {
+  const normalized = pathOrName.trim().toLowerCase();
+  if (!normalized) {
+    return "document";
+  }
+  if (normalized.endsWith("/")) {
+    return "folder";
+  }
+  const extension = normalized.match(/\.([a-z0-9]+)(?:[?#].*)?$/)?.[1] ?? "";
+  if (["apng", "avif", "gif", "jpeg", "jpg", "png", "svg", "webp"].includes(
+    extension
+  )) {
+    return "image";
+  }
+  if (["avi", "m4v", "mkv", "mov", "mp4", "webm"].includes(extension)) {
+    return "video";
+  }
+  if (["markdown", "md", "mdx"].includes(extension)) {
+    return "markdown";
+  }
+  if ([
+    "c",
+    "cpp",
+    "css",
+    "go",
+    "h",
+    "hpp",
+    "html",
+    "java",
+    "js",
+    "jsx",
+    "json",
+    "kt",
+    "php",
+    "py",
+    "rb",
+    "rs",
+    "sh",
+    "sql",
+    "swift",
+    "toml",
+    "ts",
+    "tsx",
+    "xml",
+    "yaml",
+    "yml"
+  ].includes(extension)) {
+    return "code";
+  }
+  return "document";
+}
+function readStringProperty(value, key) {
+  if (value === null || typeof value !== "object") {
+    return void 0;
+  }
+  const record = value;
+  return typeof record[key] === "string" ? record[key] : void 0;
+}
+function normalizedText(value) {
+  const normalized = value?.trim() ?? "";
+  return normalized || null;
+}
+
 // src/at-panel/useAtPanelKeyboard.ts
 function makeAtPanelKeyDown(actions) {
   return (event) => {
@@ -1177,6 +1904,16 @@ function makeAtPanelKeyDown(actions) {
       actions.cycleFilter(event.shiftKey ? -1 : 1);
       return true;
     }
+    if (event.key === "ArrowRight" && actions.cycleFilter) {
+      event.preventDefault();
+      actions.cycleFilter(1);
+      return true;
+    }
+    if (event.key === "ArrowLeft" && actions.cycleFilter) {
+      event.preventDefault();
+      actions.cycleFilter(-1);
+      return true;
+    }
     if (event.key === "Enter") {
       event.preventDefault();
       actions.commitSelection();
@@ -1189,26 +1926,35 @@ function useAtPanelKeyboard(actions) {
   return makeAtPanelKeyDown(actions);
 }
 export {
-  DEFAULT_RICH_TEXT_AT_PANEL_PAGE_SIZE,
   MentionPalette,
-  RICH_TEXT_AT_ALL_FILTER_ID,
+  MentionPaletteFromState,
+  MentionPaletteMultiSelectFooter,
+  MentionPaletteSelectIndicator,
   activityMentionStatusBadgeClassName,
   activityMentionStatusTone,
-  buildDefaultRichTextTriggerProviderGroups,
-  buildMentionPaletteState,
-  buildRichTextAtFilterTabs,
-  findRichTextTriggerProviderGroup,
+  buildMentionPaletteModel,
+  buildMentionPaletteModelFromTriggerMatches,
+  createMentionPaletteStateAdapter,
+  findMentionPaletteEntry,
   flattenMentionPaletteEntries,
-  groupRichTextAtMatches,
+  isMentionTriggerRowProviderId,
   issueMentionStatusBadgeClassName,
   issueMentionStatusTone,
   makeAtPanelKeyDown,
+  mentionPaletteGroup,
+  mentionRowStatusTagFromPresentation,
   mentionStatusBadgeClassName,
-  normalizeAtPanelQuery,
+  moveMentionPaletteHighlight,
+  nextMentionPaletteCategory,
+  renderMentionReferenceLeading,
   renderMentionRow,
+  repairMentionPaletteHighlight,
   resolveMentionFileThumbnailUrl,
   resolveMentionFileVisualKind,
-  richTextAtGroupExpandCount,
-  useAtPanelKeyboard
+  resolveMentionReferenceImageUrl,
+  richTextTriggerQueryMatchToMentionRowItem,
+  selectedMentionPaletteItem,
+  useAtPanelKeyboard,
+  workspaceAppIconFallbackUrlFromTriggerMatch
 };
 //# sourceMappingURL=index.js.map