@tutti-os/ui-rich-text 0.0.11 → 0.0.13

package/dist/at-panel/index.js

@@ -0,0 +1,1165 @@
+import {
+  DEFAULT_RICH_TEXT_AT_PANEL_PAGE_SIZE,
+  RICH_TEXT_AT_ALL_FILTER_ID,
+  activityMentionStatusBadgeClassName,
+  activityMentionStatusTone,
+  buildDefaultRichTextTriggerProviderGroups,
+  buildMentionPaletteState,
+  buildRichTextAtFilterTabs,
+  findRichTextTriggerProviderGroup,
+  flattenMentionPaletteEntries,
+  groupRichTextAtMatches,
+  issueMentionStatusBadgeClassName,
+  issueMentionStatusTone,
+  mentionStatusBadgeClassName,
+  normalizeAtPanelQuery,
+  resolveMentionFileThumbnailUrl,
+  resolveMentionFileVisualKind,
+  richTextAtGroupExpandCount
+} from "../chunk-E4PWFY3N.js";
+
+// src/at-panel/MentionPalette.tsx
+import {
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  FolderFailedFilledIcon,
+  KeyboardFilledIcon
+} from "@tutti-os/ui-system/icons";
+import { Spinner, UnderlineTabs } from "@tutti-os/ui-system/components";
+import { cn as cn2 } from "@tutti-os/ui-system/utils";
+
+// src/at-panel/mentionPaletteScrollbar.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "@tutti-os/ui-system/utils";
+import { jsx } from "react/jsx-runtime";
+var MENTION_PALETTE_SCROLLBAR_MIN_THUMB_HEIGHT = 24;
+var MENTION_PALETTE_SCROLLBAR_HIDDEN_STATE = {
+  scrollable: false,
+  thumbHeight: 0,
+  thumbTop: 0
+};
+function MentionPaletteScrollbar({
+  scrollBodyRef,
+  className,
+  thumbClassName,
+  testId
+}) {
+  "use memo";
+  const trackRef = useRef(null);
+  const dragStateRef = useRef(null);
+  const [scrollbarState, setScrollbarState] = useState({
+    scrollable: false,
+    thumbHeight: 0,
+    thumbTop: 0
+  });
+  const [dragging, setDragging] = useState(false);
+  const hideScrollbar = useCallback(() => {
+    setScrollbarState(
+      (previous) => previous.scrollable || previous.thumbHeight !== 0 || previous.thumbTop !== 0 ? MENTION_PALETTE_SCROLLBAR_HIDDEN_STATE : previous
+    );
+  }, []);
+  const syncScrollbarState = useCallback(() => {
+    const contentElement = scrollBodyRef.current;
+    if (!contentElement) {
+      hideScrollbar();
+      return;
+    }
+    const { scrollHeight, scrollTop, clientHeight } = contentElement;
+    const measuredTrackHeight = trackRef.current?.clientHeight ?? 0;
+    const trackHeight = measuredTrackHeight > 0 ? measuredTrackHeight : clientHeight;
+    const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+    if (clientHeight <= 0 || trackHeight <= 0 || maxScrollTop <= 0) {
+      hideScrollbar();
+      return;
+    }
+    const thumbHeight = Math.max(
+      MENTION_PALETTE_SCROLLBAR_MIN_THUMB_HEIGHT,
+      Math.round(clientHeight / scrollHeight * trackHeight)
+    );
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight);
+    const thumbTop = Math.round(scrollTop / maxScrollTop * maxThumbTop);
+    setScrollbarState(
+      (previous) => previous.scrollable && previous.thumbHeight === thumbHeight && previous.thumbTop === thumbTop ? previous : { scrollable: true, thumbHeight, thumbTop }
+    );
+  }, [hideScrollbar, scrollBodyRef]);
+  useEffect(() => {
+    const contentElement = scrollBodyRef.current;
+    if (!contentElement) {
+      hideScrollbar();
+      return;
+    }
+    syncScrollbarState();
+    contentElement.addEventListener("scroll", syncScrollbarState, {
+      passive: true
+    });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(syncScrollbarState) : null;
+    resizeObserver?.observe(contentElement);
+    if (trackRef.current) {
+      resizeObserver?.observe(trackRef.current);
+    }
+    const animationFrameId = window.requestAnimationFrame(syncScrollbarState);
+    return () => {
+      contentElement.removeEventListener("scroll", syncScrollbarState);
+      resizeObserver?.disconnect();
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [hideScrollbar, scrollBodyRef, syncScrollbarState]);
+  useEffect(() => {
+    if (!dragging) {
+      return;
+    }
+    const handleMouseMove = (event) => {
+      const contentElement = scrollBodyRef.current;
+      const dragState = dragStateRef.current;
+      if (!contentElement || !dragState || dragState.maxThumbTop <= 0) {
+        return;
+      }
+      const delta = event.clientY - dragState.startClientY;
+      const nextThumbTop = dragState.startScrollTop / dragState.maxScrollTop * dragState.maxThumbTop + delta;
+      contentElement.scrollTop = Math.min(Math.max(0, nextThumbTop), dragState.maxThumbTop) / dragState.maxThumbTop * dragState.maxScrollTop;
+      syncScrollbarState();
+    };
+    const handleMouseUp = () => {
+      dragStateRef.current = null;
+      setDragging(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, scrollBodyRef, syncScrollbarState]);
+  const scrollContentToThumbTop = (thumbTop) => {
+    const contentElement = scrollBodyRef.current;
+    const trackElement = trackRef.current;
+    if (!contentElement || !trackElement) {
+      return;
+    }
+    const maxScrollTop = Math.max(
+      0,
+      contentElement.scrollHeight - contentElement.clientHeight
+    );
+    const maxThumbTop = Math.max(
+      0,
+      trackElement.clientHeight - scrollbarState.thumbHeight
+    );
+    if (maxScrollTop <= 0 || maxThumbTop <= 0) {
+      return;
+    }
+    contentElement.scrollTop = Math.min(Math.max(0, thumbTop), maxThumbTop) / maxThumbTop * maxScrollTop;
+    syncScrollbarState();
+  };
+  const handleTrackMouseDown = (event) => {
+    if (event.button !== 0 || !scrollbarState.scrollable || event.target !== event.currentTarget) {
+      return;
+    }
+    event.preventDefault();
+    const trackRect = event.currentTarget.getBoundingClientRect();
+    scrollContentToThumbTop(
+      event.clientY - trackRect.top - scrollbarState.thumbHeight / 2
+    );
+  };
+  const handleThumbMouseDown = (event) => {
+    if (event.button !== 0 || !scrollbarState.scrollable) {
+      return;
+    }
+    const contentElement = scrollBodyRef.current;
+    const trackElement = trackRef.current;
+    if (!contentElement || !trackElement) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    dragStateRef.current = {
+      maxScrollTop: Math.max(
+        0,
+        contentElement.scrollHeight - contentElement.clientHeight
+      ),
+      maxThumbTop: Math.max(
+        0,
+        trackElement.clientHeight - scrollbarState.thumbHeight
+      ),
+      startClientY: event.clientY,
+      startScrollTop: contentElement.scrollTop
+    };
+    setDragging(true);
+  };
+  if (!scrollbarState.scrollable && !dragging) {
+    return /* @__PURE__ */ jsx("div", { ref: trackRef, className: "hidden", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: trackRef,
+      className: cn("group/status-scrollbar", className),
+      "data-scrollable": scrollbarState.scrollable ? "true" : "false",
+      "data-dragging": dragging ? "true" : "false",
+      "data-testid": testId,
+      "aria-hidden": "true",
+      onMouseDown: handleTrackMouseDown,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: thumbClassName,
+          onMouseDown: handleThumbMouseDown,
+          style: {
+            height: `${scrollbarState.thumbHeight}px`,
+            transform: `translateY(${scrollbarState.thumbTop}px)`
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/at-panel/MentionPalette.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_THEME = {
+  classNames: {
+    palette: "rich-text-at-mention-palette",
+    header: "rich-text-at-mention-palette-header",
+    footer: "rich-text-at-mention-palette-footer",
+    tabs: "rich-text-at-mention-palette-tabs",
+    scrollRegion: "rich-text-at-mention-palette-scroll-region",
+    scrollbar: "rich-text-at-mention-palette-scrollbar",
+    scrollbarThumb: "rich-text-at-mention-palette-scrollbar-thumb",
+    hint: "rich-text-at-mention-palette-hint",
+    hintItem: "rich-text-at-mention-palette-hint-item",
+    hintButton: "rich-text-at-mention-palette-hint-button",
+    hintSeparator: "rich-text-at-mention-palette-hint-separator",
+    shortcut: "rich-text-at-mention-palette-shortcut",
+    shortcutArrow: "rich-text-at-mention-palette-shortcut--arrow",
+    shortcutButton: "rich-text-at-mention-palette-shortcut-button",
+    shortcutGroup: "rich-text-at-mention-palette-shortcut-group"
+  },
+  testIds: {
+    emptyState: "rich-text-at-mention-palette-empty-state",
+    hint: "rich-text-at-mention-palette-hint",
+    scrollbar: "rich-text-at-mention-palette-scrollbar",
+    loadingSpinner: "rich-text-at-mention-loading-spinner"
+  },
+  groupDividerAttribute: "data-rich-text-at-mention-group-divider"
+};
+function resolveMentionPaletteTheme(theme) {
+  return {
+    classNames: { ...DEFAULT_THEME.classNames, ...theme?.classNames },
+    testIds: { ...DEFAULT_THEME.testIds, ...theme?.testIds },
+    groupDividerAttribute: theme?.groupDividerAttribute ?? DEFAULT_THEME.groupDividerAttribute
+  };
+}
+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)]"
+};
+var MENTION_PALETTE_LOADING_MIN_VISIBLE_MS = 320;
+function MentionPalette(props) {
+  "use memo";
+  const {
+    state,
+    highlightedKey,
+    getItemKey,
+    renderItem,
+    labels,
+    hintLabels,
+    maxHeightPx,
+    onHighlightChange,
+    onSelectItem,
+    onSelectCategory,
+    onSelectFilter,
+    onExpandGroup,
+    onCycleFilter,
+    onMoveSelection,
+    renderListFooter,
+    loadingBanner,
+    scrollHighlightedIntoViewCentered = false,
+    theme: themeProp
+  } = props;
+  const theme = resolveMentionPaletteTheme(themeProp);
+  const highlightedOptionRef = useRef2(null);
+  const scrollBodyRef = useRef2(null);
+  const loadingVisibleUntilRef = useRef2(0);
+  const loadingHideTimerRef = useRef2(
+    null
+  );
+  const [loadingIndicatorVisible, setLoadingIndicatorVisible] = useState2(
+    state.status === "loading"
+  );
+  const interactiveEntries = flattenMentionPaletteEntries(
+    state,
+    (item, groupId) => getItemKey(item, findGroup(state.groups, groupId))
+  );
+  const hasInteractiveEntries = interactiveEntries.some(
+    (entry) => entry.type === "item" || entry.type === "expand"
+  );
+  const showLoadingState = loadingIndicatorVisible && (!hasInteractiveEntries || state.mode === "browse");
+  const showLoadingBanner = Boolean(loadingBanner) && loadingIndicatorVisible && hasInteractiveEntries && state.mode === "results";
+  useEffect2(() => {
+    const highlightedElement = highlightedOptionRef.current;
+    if (!highlightedElement) {
+      return;
+    }
+    const scrollContainer = scrollBodyRef.current;
+    if (!scrollContainer || !scrollContainer.contains(highlightedElement)) {
+      highlightedElement.scrollIntoView({ block: "nearest" });
+      return;
+    }
+    if (!scrollHighlightedIntoViewCentered) {
+      return;
+    }
+    centerElementInScrollContainer(scrollContainer, highlightedElement);
+  }, [highlightedKey, scrollHighlightedIntoViewCentered]);
+  useEffect2(() => {
+    if (loadingHideTimerRef.current !== null) {
+      clearTimeout(loadingHideTimerRef.current);
+      loadingHideTimerRef.current = null;
+    }
+    if (state.status === "loading") {
+      loadingVisibleUntilRef.current = Date.now() + MENTION_PALETTE_LOADING_MIN_VISIBLE_MS;
+      setLoadingIndicatorVisible(true);
+      return;
+    }
+    const remainingMs = loadingVisibleUntilRef.current - Date.now();
+    if (remainingMs <= 0) {
+      setLoadingIndicatorVisible(false);
+      return;
+    }
+    loadingHideTimerRef.current = setTimeout(() => {
+      loadingHideTimerRef.current = null;
+      setLoadingIndicatorVisible(false);
+    }, remainingMs);
+    return () => {
+      if (loadingHideTimerRef.current !== null) {
+        clearTimeout(loadingHideTimerRef.current);
+        loadingHideTimerRef.current = null;
+      }
+    };
+  }, [state.status]);
+  const paletteMaxHeightStyle = maxHeightPx > 0 ? { maxHeight: `${maxHeightPx}px` } : void 0;
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn2(theme.classNames.palette, paletteStyles.palette),
+        style: paletteMaxHeightStyle,
+        role: "listbox",
+        "aria-label": labels.listbox ?? labels.tabHint,
+        children: /* @__PURE__ */ jsx2(
+          MentionPaletteEmptyState,
+          {
+            icon: "folder-failed",
+            label: labels.error,
+            testId: theme.testIds.emptyState
+          }
+        )
+      }
+    );
+  }
+  const isBrowse = state.mode === "browse";
+  let body;
+  if (showLoadingState) {
+    body = /* @__PURE__ */ jsx2(
+      MentionPaletteLoading,
+      {
+        label: labels.loading,
+        spinnerTestId: theme.testIds.loadingSpinner
+      }
+    );
+  } else if (state.groups.length === 0) {
+    body = /* @__PURE__ */ jsx2(
+      MentionPaletteEmptyState,
+      {
+        icon: isBrowse ? "keyboard" : "folder-failed",
+        label: labels.empty,
+        testId: theme.testIds.emptyState
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx2(
+      MentionPaletteGroups,
+      {
+        state,
+        highlightedKey,
+        highlightedOptionRef,
+        getItemKey,
+        renderItem,
+        onHighlightChange,
+        onSelectItem,
+        onExpandGroup,
+        renderListFooter,
+        groupDividerAttribute: theme.groupDividerAttribute
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn2(theme.classNames.palette, paletteStyles.palette),
+      style: paletteMaxHeightStyle,
+      role: "listbox",
+      "aria-label": labels.listbox ?? labels.tabHint,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn2(theme.classNames.header, paletteStyles.header), children: [
+          /* @__PURE__ */ jsx2(
+            UnderlineTabs,
+            {
+              tabs: state.categories.map((category) => ({
+                value: category.id,
+                label: category.label
+              })),
+              value: state.filter,
+              onValueChange: isBrowse ? onSelectCategory : onSelectFilter,
+              className: theme.classNames.tabs,
+              preventMouseDownDefault: true
+            }
+          ),
+          showLoadingBanner ? loadingBanner : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: paletteStyles.scrollShell, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              ref: scrollBodyRef,
+              className: cn2(
+                theme.classNames.scrollRegion,
+                paletteStyles.scrollBody
+              ),
+              children: body
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            MentionPaletteScrollbar,
+            {
+              scrollBodyRef,
+              className: theme.classNames.scrollbar,
+              thumbClassName: theme.classNames.scrollbarThumb,
+              testId: theme.testIds.scrollbar
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: cn2(theme.classNames.footer, paletteStyles.footer), children: /* @__PURE__ */ jsx2(
+          MentionPaletteHint,
+          {
+            ariaLabel: labels.tabHint,
+            cycleFilterLabel: hintLabels.cycleFilter,
+            moveSelectionLabel: hintLabels.moveSelection,
+            onCycleFilter,
+            onMoveSelection,
+            classNames: theme.classNames,
+            testId: theme.testIds.hint
+          }
+        ) })
+      ]
+    }
+  );
+}
+function centerElementInScrollContainer(container, element) {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  const currentScrollTop = container.scrollTop;
+  const elementTop = elementRect.top - containerRect.top + currentScrollTop;
+  const centeredScrollTop = elementTop - (container.clientHeight - elementRect.height) / 2;
+  const maxScrollTop = Math.max(
+    0,
+    container.scrollHeight - container.clientHeight
+  );
+  const nextScrollTop = Math.min(Math.max(0, centeredScrollTop), maxScrollTop);
+  container.scrollTo({ top: nextScrollTop, behavior: "auto" });
+}
+function findGroup(groups, groupId) {
+  const group = groups.find((candidate) => candidate.id === groupId);
+  if (!group) {
+    throw new Error(`MentionPalette: unknown group id "${groupId}"`);
+  }
+  return group;
+}
+function MentionPaletteGroups({
+  state,
+  highlightedKey,
+  highlightedOptionRef,
+  getItemKey,
+  renderItem,
+  onHighlightChange,
+  onSelectItem,
+  onExpandGroup,
+  renderListFooter,
+  groupDividerAttribute
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    state.groups.map((group, index) => {
+      const showGroupDivider = index > 0 && !group.hideTopDivider;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: cn2("grid gap-1", group.sectionClassName),
+          children: [
+            showGroupDivider ? /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "mx-3 mb-2 border-t border-[var(--line-1)]",
+                ...{ [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.items.map((item) => {
+                const entryKey = `${group.id}:${getItemKey(item, group)}`;
+                const isHighlighted = entryKey === highlightedKey;
+                return /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    ref: isHighlighted ? highlightedOptionRef : null,
+                    type: "button",
+                    className: cn2(
+                      paletteStyles.rowButton,
+                      isHighlighted && "bg-[var(--transparency-block)]"
+                    ),
+                    role: "option",
+                    "aria-selected": isHighlighted,
+                    "data-highlighted": isHighlighted ? "" : void 0,
+                    onMouseEnter: () => onHighlightChange(entryKey),
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => onSelectItem(item, group),
+                    children: renderItem(item, { active: isHighlighted })
+                  },
+                  entryKey
+                );
+              }),
+              group.hasMore ? /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  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)]"
+                  ),
+                  "data-highlighted": `expand:${group.id}` === highlightedKey ? "" : void 0,
+                  onMouseEnter: () => onHighlightChange(`expand:${group.id}`),
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => onExpandGroup(group.id),
+                  children: group.expandLabel ?? `+${Math.max(0, group.totalCount - group.visibleCount)}`
+                },
+                `expand:${group.id}`
+              ) : null
+            ] })
+          ]
+        },
+        group.id
+      );
+    }),
+    renderListFooter?.()
+  ] });
+}
+function MentionPaletteEmptyState({
+  icon = "folder-failed",
+  label,
+  testId
+}) {
+  "use memo";
+  const EmptyStateIcon = icon === "keyboard" ? KeyboardFilledIcon : FolderFailedFilledIcon;
+  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)]",
+      "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: [
+        /* @__PURE__ */ jsx2(
+          EmptyStateIcon,
+          {
+            className: "h-6 w-6 text-[var(--text-tertiary)]",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "leading-5 text-[var(--text-tertiary)]", children: label })
+      ] })
+    }
+  );
+}
+function MentionPaletteLoading({
+  label,
+  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: [
+    /* @__PURE__ */ jsx2(
+      Spinner,
+      {
+        size: 16,
+        className: "text-[var(--text-secondary)]",
+        testId: spinnerTestId
+      }
+    ),
+    /* @__PURE__ */ jsx2("span", { children: label })
+  ] });
+}
+function MentionPaletteHint({
+  ariaLabel,
+  cycleFilterLabel,
+  moveSelectionLabel,
+  onCycleFilter,
+  onMoveSelection,
+  classNames,
+  testId
+}) {
+  "use memo";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames.hint,
+      "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__ */ jsx2("span", { className: classNames.hintSeparator, "aria-hidden": "true", children: "\uFF5C" }),
+        /* @__PURE__ */ jsxs("span", { className: classNames.hintItem, children: [
+          /* @__PURE__ */ jsxs("span", { className: classNames.shortcutGroup, children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: cn2(
+                  classNames.shortcut,
+                  classNames.shortcutArrow,
+                  classNames.shortcutButton
+                ),
+                type: "button",
+                "aria-label": `\u2191 ${moveSelectionLabel}`,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onMoveSelection(-1),
+                children: "\u2191"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: cn2(
+                  classNames.shortcut,
+                  classNames.shortcutArrow,
+                  classNames.shortcutButton
+                ),
+                type: "button",
+                "aria-label": `\u2193 ${moveSelectionLabel}`,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onMoveSelection(1),
+                children: "\u2193"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("span", { children: moveSelectionLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/at-panel/MentionRow.tsx
+import {
+  ArrowLeftIcon,
+  Badge,
+  FileCodeIcon,
+  FileTextIcon,
+  FolderIcon,
+  ImageFileIcon,
+  ProductIcon,
+  StatusDot,
+  VideoFileIcon,
+  cn as cn3
+} from "@tutti-os/ui-system";
+
+// src/at-panel/mentionRowDataAttributes.ts
+var MENTION_ROW_DATA_ATTRIBUTES = {
+  shared: {
+    agentAvatar: "data-rich-text-at-mention-agent-avatar",
+    appIcon: "data-rich-text-at-mention-app-icon",
+    fileEntryKind: "data-rich-text-at-mention-file-entry-kind",
+    fileThumb: "data-rich-text-at-mention-file-thumb",
+    fileVisualKind: "data-rich-text-at-mention-file-visual-kind",
+    navigation: "data-rich-text-at-mention-navigation",
+    statusTag: "data-rich-text-at-mention-status-tag",
+    userAvatar: "data-rich-text-at-mention-user-avatar"
+  },
+  agent: {
+    agentAvatar: "data-agent-mention-agent-avatar",
+    appIcon: "data-agent-mention-app-icon",
+    fileEntryKind: "data-agent-file-entry-kind",
+    fileThumb: "data-agent-mention-file-thumb",
+    fileVisualKind: "data-agent-file-visual-kind",
+    navigation: "data-agent-mention-navigation",
+    statusTag: "data-agent-mention-status-tag",
+    userAvatar: "data-agent-mention-user-avatar"
+  }
+};
+function mentionRowRootDataAttributes(mode, kind) {
+  return mode === "agent" ? {
+    "data-agent-file-mention": "true",
+    "data-agent-mention-kind": kind
+  } : {
+    "data-rich-text-at-mention-row": "true",
+    "data-rich-text-at-mention-kind": kind
+  };
+}
+function mentionRowDataAttribute(mode, key, value) {
+  return {
+    [MENTION_ROW_DATA_ATTRIBUTES[mode][key]]: value
+  };
+}
+
+// src/at-panel/MentionRow.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MENTION_FILE_VISUAL_KIND_ICON = {
+  back: ArrowLeftIcon,
+  folder: FolderIcon,
+  document: FileTextIcon,
+  // The agent maps markdown to `product-filled.svg`; ProductIcon is the
+  // matching boundary-safe ui-system glyph.
+  markdown: ProductIcon,
+  code: FileCodeIcon,
+  image: ImageFileIcon,
+  video: VideoFileIcon
+};
+var DEFAULT_MENTION_ROW_CLASS_NAMES = {
+  fileIcon: "rich-text-at-mention-file-icon",
+  fileThumb: "rich-text-at-mention-file-thumb",
+  kindIcon: "rich-text-at-mention-kind-icon",
+  avatarImgUserPlaceholder: "rich-text-at-mention-avatar-img--user-placeholder"
+};
+function resolveMentionRowClassNames(classNames) {
+  return {
+    fileIcon: classNames?.fileIcon ?? DEFAULT_MENTION_ROW_CLASS_NAMES.fileIcon,
+    fileThumb: classNames?.fileThumb ?? DEFAULT_MENTION_ROW_CLASS_NAMES.fileThumb,
+    kindIcon: classNames?.kindIcon ?? DEFAULT_MENTION_ROW_CLASS_NAMES.kindIcon,
+    avatarImgUserPlaceholder: classNames?.avatarImgUserPlaceholder ?? DEFAULT_MENTION_ROW_CLASS_NAMES.avatarImgUserPlaceholder
+  };
+}
+function resolveMentionRowRenderOptions(options) {
+  if (isMentionRowRenderOptions(options)) {
+    return {
+      classNames: options.classNames,
+      dataAttributeMode: options.dataAttributeMode ?? "shared"
+    };
+  }
+  return {
+    classNames: options,
+    dataAttributeMode: "shared"
+  };
+}
+function isMentionRowRenderOptions(options) {
+  return options !== void 0 && ("classNames" in options || "dataAttributeMode" in options);
+}
+function renderMentionRow(item, options) {
+  const { classNames, dataAttributeMode } = resolveMentionRowRenderOptions(options);
+  const resolved = resolveMentionRowClassNames(classNames);
+  if (item.kind === "file") {
+    return /* @__PURE__ */ jsx3(
+      MentionFileRow,
+      {
+        item,
+        classNames: resolved,
+        dataAttributeMode
+      }
+    );
+  }
+  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(
+          MentionSessionAvatarStack,
+          {
+            item,
+            classNames: resolved,
+            dataAttributeMode
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-[13px] font-semibold leading-[16px] text-[var(--text-primary)]", children: /* @__PURE__ */ jsx3(MentionSessionTitle, { item }) })
+      ] }),
+      item.statusTag ? /* @__PURE__ */ jsx3(
+        MentionStatusBadge,
+        {
+          statusTag: item.statusTag,
+          dataAttributeMode
+        }
+      ) : null
+    ] });
+  }
+  if (item.kind === "app") {
+    return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: [
+      /* @__PURE__ */ jsx3(
+        MentionWorkspaceAppIcon,
+        {
+          iconUrl: item.iconUrl,
+          kindIconClassName: resolved.kindIcon,
+          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
+      ] })
+    ] });
+  }
+  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__ */ jsxs2("span", { className: "grid min-w-0 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(
+        MentionStatusBadge,
+        {
+          statusTag: item.statusTag,
+          dataAttributeMode
+        }
+      ) : null
+    ] }),
+    item.creatorName ? /* @__PURE__ */ jsx3("span", { className: "truncate text-[13px] font-normal text-[var(--text-secondary)]", children: item.creatorName }) : null
+  ] });
+}
+function MentionFileRow({
+  item,
+  classNames,
+  dataAttributeMode
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: "flex min-w-0 items-center gap-2",
+      ...mentionRowRootDataAttributes(dataAttributeMode, "file"),
+      ...item.entryKind ? mentionRowDataAttribute(
+        dataAttributeMode,
+        "fileEntryKind",
+        item.entryKind
+      ) : {},
+      ...mentionRowDataAttribute(
+        dataAttributeMode,
+        "fileVisualKind",
+        item.visualKind
+      ),
+      ...item.mentionNavigation ? mentionRowDataAttribute(
+        dataAttributeMode,
+        "navigation",
+        item.mentionNavigation
+      ) : {},
+      children: [
+        /* @__PURE__ */ jsx3(
+          MentionFileIcon,
+          {
+            item,
+            classNames,
+            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
+        ] })
+      ]
+    }
+  );
+}
+function MentionFileIcon({
+  item,
+  classNames,
+  dataAttributeMode
+}) {
+  const thumbnailUrl = item.visualKind === "image" ? item.thumbnailUrl?.trim() || "" : "";
+  if (thumbnailUrl) {
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: classNames.fileThumb,
+        ...mentionRowDataAttribute(dataAttributeMode, "fileThumb", "true"),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: thumbnailUrl,
+            alt: "",
+            className: "h-full w-full object-cover",
+            decoding: "async",
+            loading: "lazy",
+            draggable: false
+          }
+        )
+      }
+    );
+  }
+  const usesDefaultFileIcon = classNames.fileIcon === DEFAULT_MENTION_ROW_CLASS_NAMES.fileIcon;
+  if (usesDefaultFileIcon) {
+    const Icon = MENTION_FILE_VISUAL_KIND_ICON[item.visualKind];
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: cn3(
+          classNames.fileIcon,
+          "grid h-4 w-4 shrink-0 place-items-center text-[var(--text-secondary)]"
+        ),
+        ...mentionRowDataAttribute(
+          dataAttributeMode,
+          "fileVisualKind",
+          item.visualKind
+        ),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx3(Icon, { size: 16 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: classNames.fileIcon,
+      ...mentionRowDataAttribute(
+        dataAttributeMode,
+        "fileVisualKind",
+        item.visualKind
+      ),
+      "aria-hidden": "true"
+    }
+  );
+}
+function MentionWorkspaceAppIcon({
+  iconUrl,
+  kindIconClassName,
+  dataAttributeMode
+}) {
+  const normalizedIconUrl = iconUrl?.trim() ?? "";
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: "grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-[5px] bg-block text-[var(--text-secondary)]",
+      ...mentionRowDataAttribute(dataAttributeMode, "appIcon", "true"),
+      "data-workspace-app-icon": "true",
+      "aria-hidden": "true",
+      children: normalizedIconUrl ? /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src: normalizedIconUrl,
+          alt: "",
+          className: "h-full w-full object-cover",
+          decoding: "async",
+          loading: "lazy",
+          draggable: false
+        }
+      ) : /* @__PURE__ */ jsx3("span", { className: cn3(kindIconClassName, "h-4 w-4") })
+    }
+  );
+}
+function MentionSessionAvatarStack({
+  item,
+  classNames,
+  dataAttributeMode
+}) {
+  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",
+          {
+            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
+                  );
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            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
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+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: [
+      " ",
+      item.summary ?? ""
+    ] })
+  ] });
+}
+function MentionStatusBadge({
+  statusTag,
+  dataAttributeMode
+}) {
+  if (statusTag.variant === "issue") {
+    return /* @__PURE__ */ jsx3(
+      Badge,
+      {
+        variant: "secondary",
+        className: cn3(
+          "shrink-0 text-[13px]",
+          mentionStatusBadgeClassName({
+            tone: statusTag.tone,
+            variant: "issue"
+          })
+        ),
+        ...mentionRowDataAttribute(dataAttributeMode, "statusTag", "true"),
+        ...statusTag.dataStatus ? { "data-status": statusTag.dataStatus } : {},
+        children: statusTag.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    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",
+        mentionStatusBadgeClassName({
+          tone: statusTag.tone,
+          variant: "activity"
+        })
+      ),
+      ...mentionRowDataAttribute(dataAttributeMode, "statusTag", "true"),
+      ...statusTag.dataStatus ? { "data-status": statusTag.dataStatus } : {},
+      "data-tone": statusTag.tone,
+      title: statusTag.label,
+      children: [
+        /* @__PURE__ */ jsx3(
+          StatusDot,
+          {
+            tone: statusTag.tone,
+            pulse: statusTag.pulse ?? false,
+            size: "xs",
+            title: statusTag.label
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { children: statusTag.label })
+      ]
+    }
+  );
+}
+
+// src/at-panel/useAtPanelKeyboard.ts
+function makeAtPanelKeyDown(actions) {
+  return (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      actions.moveSelection(1);
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      actions.moveSelection(-1);
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      actions.close();
+      return true;
+    }
+    if (event.key === "Tab" && actions.cycleFilter) {
+      event.preventDefault();
+      actions.cycleFilter(event.shiftKey ? -1 : 1);
+      return true;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      actions.commitSelection();
+      return true;
+    }
+    return false;
+  };
+}
+function useAtPanelKeyboard(actions) {
+  return makeAtPanelKeyDown(actions);
+}
+export {
+  DEFAULT_RICH_TEXT_AT_PANEL_PAGE_SIZE,
+  MentionPalette,
+  RICH_TEXT_AT_ALL_FILTER_ID,
+  activityMentionStatusBadgeClassName,
+  activityMentionStatusTone,
+  buildDefaultRichTextTriggerProviderGroups,
+  buildMentionPaletteState,
+  buildRichTextAtFilterTabs,
+  findRichTextTriggerProviderGroup,
+  flattenMentionPaletteEntries,
+  groupRichTextAtMatches,
+  issueMentionStatusBadgeClassName,
+  issueMentionStatusTone,
+  makeAtPanelKeyDown,
+  mentionStatusBadgeClassName,
+  normalizeAtPanelQuery,
+  renderMentionRow,
+  resolveMentionFileThumbnailUrl,
+  resolveMentionFileVisualKind,
+  richTextAtGroupExpandCount,
+  useAtPanelKeyboard
+};
+//# sourceMappingURL=index.js.map