@sybilion/uilib 1.3.43 → 1.3.46

package/src/components/ui/Chat/ChatPrompt/useChatPromptEditor.ts

@@ -1,5 +1,4 @@
 import {
-  type KeyboardEvent as ReactKeyboardEvent,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -43,7 +42,6 @@ export type UseChatPromptEditorResult = {
   editor: Editor | null;
   trimmedMessage: string;
   resetAfterSend: () => void;
-  handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
 
 export function useChatPromptEditor({
@@ -94,7 +92,6 @@ export function useChatPromptEditor({
       Placeholder.configure({
         placeholder: placeholderText,
         showOnlyWhenEditable: true,
-        showOnlyCurrent: false,
       }),
     ];
     if (slashItemsStable.length > 0) {
@@ -126,6 +123,38 @@ export function useChatPromptEditor({
 
   const trimmedMessage = plainDraft.trim();
 
+  const trimmedMessageRef = useRef(trimmedMessage);
+  trimmedMessageRef.current = trimmedMessage;
+
+  const attachmentsCountRef = useRef(attachmentsCount);
+  attachmentsCountRef.current = attachmentsCount;
+
+  const onEnterSubmitRef = useRef(onEnterSubmit);
+  onEnterSubmitRef.current = onEnterSubmit;
+
+  const handleEditorKeyDown = useCallback(
+    (_view: unknown, event: KeyboardEvent) => {
+      if (
+        !(
+          event.key === 'Enter' &&
+          !event.shiftKey &&
+          !event.metaKey &&
+          !event.ctrlKey
+        )
+      ) {
+        return false;
+      }
+      if (slashOpenRef.current) return false;
+      if (!trimmedMessageRef.current && attachmentsCountRef.current === 0) {
+        return false;
+      }
+      event.preventDefault();
+      onEnterSubmitRef.current();
+      return true;
+    },
+    [],
+  );
+
   const editor = useEditor(
     {
       extensions,
@@ -137,6 +166,7 @@ export function useChatPromptEditor({
           spellcheck: 'true',
           'aria-label': ariaLabelComposer,
         },
+        handleKeyDown: handleEditorKeyDown,
       },
       onTransaction: ({ editor: ed }) => {
         const dom = chatPromptSafeEditorDom(ed);
@@ -147,7 +177,7 @@ export function useChatPromptEditor({
       },
       onCreate: bindEditorDom,
     },
-    [extensions, bindEditorDom, ariaLabelComposer],
+    [extensions, bindEditorDom, ariaLabelComposer, handleEditorKeyDown],
   );
 
   useEffect(() => {
@@ -188,9 +218,6 @@ export function useChatPromptEditor({
     syncChatPromptComposerHeight(dom, plainDraft);
   }, [editor, plainDraft]);
 
-  const onEnterSubmitRef = useRef(onEnterSubmit);
-  onEnterSubmitRef.current = onEnterSubmit;
-
   const resetAfterSend = useCallback(() => {
     if (!editor) return;
     editor.chain().clearContent().focus().run();
@@ -201,23 +228,9 @@ export function useChatPromptEditor({
     setPlainDraft('');
   }, [editor]);
 
-  const handleComposerKeyDown = useCallback(
-    (e: ReactKeyboardEvent) => {
-      if (!(e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey))
-        return;
-      if (!editorDomRef.current?.contains(e.target as Node)) return;
-      if (slashOpenRef.current) return;
-      if (!trimmedMessage && attachmentsCount === 0) return;
-      e.preventDefault();
-      onEnterSubmitRef.current();
-    },
-    [attachmentsCount, trimmedMessage],
-  );
-
   return {
     editor,
     trimmedMessage,
     resetAfterSend,
-    handleComposerKeyDown,
   };
 }

package/src/components/ui/Chat/index.ts

@@ -27,6 +27,15 @@ export type {
 } from './ChatSheet/useChatPanelChromeModel';
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
+export type { ChatPromptComposerHandle } from './ChatPrompt/ChatPromptComposer';
+export {
+  CHAT_PROMPT_COMMAND_CHIP_CLASS,
+  chatPromptChipHtml,
+  createChatPromptComposerHandle,
+  getChatPromptTokenRangeBeforePos,
+  insertChatPromptContentAtCaret,
+} from './ChatPrompt/chatPromptComposerInsert';
+export type { ChatPromptComposerInsertOptions } from './ChatPrompt/ChatPromptComposer.types';
 export { ChatPresets } from './ChatPresets';
 export type {
   ChatEmptyStateConfig,

package/src/components/ui/Logo/Logo.styl

@@ -9,6 +9,7 @@
   flex-shrink 0
   height 24px
   width auto
+  color var(--brand-color)
 
 .text
   font-family var(--font-family-heading)

package/src/components/ui/Logo/logo.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+	<path fill="currentColor" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
 </svg>

package/src/components/ui/Page/PageFooter/PageFooter.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
+import { Logo } from '#uilib/components/ui/Logo';
 import { GlobeIcon, MailIcon } from 'lucide-react';
 
 import S from './PageFooter.styl';
@@ -14,7 +15,6 @@ export interface PageFooterLinkItem {
 }
 
 export interface PageFooterProps {
-  logo?: ReactNode;
   /** Rendered between logo block and copyright (e.g. debug UI from the app). */
   children?: ReactNode;
   /** When non-empty, version badge links here (e.g. `/releases`). */
@@ -55,7 +55,6 @@ export function PageFooter({
   versionLabel,
   homeTo = '/',
   brandText = 'Sybilion',
-  logo,
   websiteHref = 'https://sybilion.com',
   mailHref = 'mailto:support@sybilion.com',
   copyrightText = '© 2026 Sybilion. All rights reserved.',
@@ -84,7 +83,7 @@ export function PageFooter({
       <div className={S.line}>
         <div className={S.logo}>
           <Link to={homeTo}>
-            {logo}
+            <Logo />
             &nbsp;{brandText}
           </Link>
           {versionLink !== '' && (

package/src/components/ui/Page/PageHeader/PageHeader.tsx

@@ -54,7 +54,7 @@ export function PageHeader({
           <div className={S.title}>
             <h1>{title}</h1>
             {subheader && (
-              <TextWithDeferTooltip className={S.subheader}>
+              <TextWithDeferTooltip className={S.subheader} overTrigger>
                 {subheader}
               </TextWithDeferTooltip>
             )}

package/src/components/ui/TextWithDeferTooltip/TextWithDeferTooltip.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { CSSProperties, useRef, useState } from 'react';
 
 import {
   Tooltip,
@@ -18,7 +18,9 @@ function TextWithDeferTooltip({
   ...props
 }: TextWithDeferTooltipProps) {
   const [withTooltip, setWithTooltip] = useState(false);
+  const [tooltipStyles, setTooltipStyles] = useState<CSSProperties>({});
   const ref = useRef<HTMLDivElement>(null);
+  const cachedFontSizeRef = useRef<string | null>(null);
 
   const handleMouseEnter = () => {
     if (!ref.current) return;
@@ -29,6 +31,31 @@ function TextWithDeferTooltip({
       ref.current.scrollHeight - ref.current.clientHeight > 3;
 
     if (isOverflowingHorizontally || isOverflowingVertically) {
+      const styles: CSSProperties = {
+        fontSize: cachedFontSizeRef.current || undefined,
+      };
+
+      if (ref.current) {
+        const {
+          width: rectWidth,
+          left,
+          top,
+        } = ref.current.getBoundingClientRect();
+
+        styles.width = `${width ?? rectWidth}px`;
+
+        if (!cachedFontSizeRef.current) {
+          const { fontSize } = window.getComputedStyle(ref.current);
+          cachedFontSizeRef.current = fontSize;
+          styles.fontSize = fontSize;
+        }
+
+        if (overTrigger) {
+          styles.transform = `translate(${left}px, ${top}px) !important`;
+        }
+      }
+
+      setTooltipStyles(styles);
       setWithTooltip(true);
     }
   };
@@ -45,14 +72,18 @@ function TextWithDeferTooltip({
   );
 
   if (withTooltip) {
+    const tooltipSide = overTrigger ? 'bottom' : side;
+
     return (
       <Tooltip open={withTooltip} onOpenChange={setWithTooltip}>
         <TooltipTrigger asChild>{textElement}</TooltipTrigger>
         <TooltipContent
-          side={side}
+          side={tooltipSide}
+          style={{
+            ...(maxWidth !== undefined && { maxWidth: `${maxWidth}px` }),
+            ...tooltipStyles,
+          }}
           overTrigger={overTrigger}
-          maxWidth={maxWidth}
-          style={width !== undefined ? { width: `${width}px` } : undefined}
         >
           {children}
         </TooltipContent>

package/src/components/widgets/DriverCard/DriverCard.tsx

@@ -177,7 +177,11 @@ export function DriverCard({
                     id={id}
                     label={<TooltipTrigger asChild>{nameElem}</TooltipTrigger>}
                   />
-                  <TooltipContent side="left" className={S.tooltipContent}>
+                  <TooltipContent
+                    side="left"
+                    className={S.tooltipContent}
+                    overTrigger
+                  >
                     <div className={S.tooltipTitle}>{name}</div>
                   </TooltipContent>
                 </Tooltip>

package/src/docs/DocsShell.tsx

@@ -1,7 +1,6 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
-import { LogoMark } from '#uilib/components/ui/Logo';
 import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
 import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
 import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
@@ -23,11 +22,7 @@ export function DocsShell() {
         <AppShellMainContent
           header={<AppHeaderHost />}
           footer={
-            <PageFooter
-              logo={<LogoMark />}
-              versionLink="/releases"
-              versionLabel="1.0.0-docs"
-            />
+            <PageFooter versionLink="/releases" versionLabel="1.0.0-docs" />
           }
         >
           <SybilionAppHeader

package/src/docs/pages/ChatSheetPage.tsx

@@ -0,0 +1,61 @@
+import type { SlashCommandItem } from '#uilib/components/ui/Chat';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { MessageSquare } from 'lucide-react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DOCS_CHAT_USER_KEY } from '../docsConstants';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const DOCS_CHAT_SHEET_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-chat-sheet-portal`;
+
+const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
+  {
+    id: 'sample-command',
+    label: 'sample-command',
+    description: 'Demo slash item for portal ChatSheet regression.',
+  },
+];
+
+export default function ChatSheetPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Chat' }, { label: 'Chat sheet' }]}
+        title="Chat sheet (portal)"
+        subheader="Same integration as design-demo: ChatSheet in page header actions, chat panel portaled into the shell sidebar slot. No inline ChatChrome on this page."
+        actions={
+          <DocsHeaderActions
+            scopeId={DOCS_CHAT_SHEET_SCOPE_ID}
+            slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
+            triggerLabel={
+              <>
+                <MessageSquare size={20} />
+                &nbsp;AI Assistant
+              </>
+            }
+          />
+        }
+      />
+      <PageContentSection>
+        <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
+          Open <strong>AI Assistant</strong> in the header. The composer runs
+          inside the portaled chat panel (not inline on this page).
+        </p>
+        <h3 style={{ marginBottom: 8, fontSize: 14, fontWeight: 600 }}>
+          Regression checklist
+        </h3>
+        <ul
+          style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.6 }}
+        >
+          <li>Plain Enter with text → submit and clear composer</li>
+          <li>
+            Plain Enter must not create empty lines with duplicated placeholders
+          </li>
+          <li>Shift+Enter with text → multiline, no placeholder after text</li>
+          <li>Empty Enter → no submit</li>
+          <li>Submit button and slash menu still work</li>
+        </ul>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -8,7 +8,6 @@ import {
   type SlashCommandItem,
 } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
-import type { SlashItemCommandContext } from '#uilib/tiptap/slash-mention/types';
 import { ScrollRef } from '@homecode/ui';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -16,65 +15,40 @@ import { DocsHeaderActions } from '../docsHeaderActions';
 
 const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
 
-const DOCS_SAMPLE_COMMAND_ID = 'sample-command';
-
-/** Sample items so the docs demo still shows a `/` palette (`DEFAULT_CHAT_SLASH_ITEMS` is empty). */
-const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
+/** Sample items — default TipTap mention insert; optional `className` / `color` style the chip. */
+const DOCS_SLASH_ITEMS: SlashCommandItem[] = [
+  {
+    id: 'generate-dashboard',
+    label: 'Generate dashboard',
+    description: 'Insert /generate-dashboard',
+    color: 'var(--brand-color-600)',
+  },
   {
-    id: DOCS_SAMPLE_COMMAND_ID,
-    label: DOCS_SAMPLE_COMMAND_ID,
-    description:
-      'Demo handler — clears composer and runs `onSlashItemCommand` (no mention insert).',
+    id: 'performance-chart',
+    label: 'Performance chart (bigger font)',
+    description: 'Insert /PerformanceChart',
+    className: 'docs-slash-mention-accent',
+    color: '#16a34a',
+  },
+  {
+    id: 'mention-fallback',
+    label: 'Mention fallback',
+    description: 'Default mention styling only',
+    color: 'var(--foreground)',
   },
 ];
 
-const SAMPLE_COMMAND_PROGRESS_TEXT = 'Running sample command…';
-
-const SAMPLE_COMMAND_SUCCESS_TEXT = '✅ Sample command complete.';
-
-function makeMessage(
-  role: MessageRole,
-  text: string,
-  options?: { inProgress?: boolean },
-): Message {
+function makeMessage(role: MessageRole, text: string): Message {
   return {
     id: crypto.randomUUID(),
     role,
     text,
     timestamp: Date.now(),
-    ...(options?.inProgress ? { inProgress: true } : {}),
   };
 }
 
-/** Local-state equivalent of chat-context `updateMessageById`. */
-function updateMessageInPlace(
-  messages: Message[],
-  messageId: string,
-  patch: { role?: MessageRole; text?: string; inProgress?: boolean },
-): Message[] {
-  return messages.map(message => {
-    if (message.id !== messageId) return message;
-    const next: Message = { ...message };
-    if (patch.role != null) {
-      next.role = patch.role;
-    }
-    if (patch.text != null) {
-      next.text = patch.text;
-    }
-    if (patch.inProgress === true) {
-      next.inProgress = true;
-    } else if (
-      patch.inProgress === false ||
-      (patch.role != null && patch.role !== MessageRole.SYSTEM)
-    ) {
-      delete next.inProgress;
-    }
-    return next;
-  });
-}
-
 const ASSISTANT_REPLY_TEXT =
-  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+  'Demo reply. Slash picks insert inline mention chips; plain text on send uses each item id (e.g. /generate-dashboard).';
 
 export default function ChatSlashCommandsPage() {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -95,84 +69,33 @@ export default function ChatSlashCommandsPage() {
     messages.length > 0 &&
     messages[messages.length - 1]?.role === MessageRole.USER;
 
-  const runSampleCommand = useCallback(() => {
-    const progressId = crypto.randomUUID();
+  const onSubmit = useCallback((raw: string) => {
+    const text = raw.trim();
+    if (!text) return;
+
+    setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
     setIsLoading(true);
-    setMessages(prev => [
-      ...prev,
-      {
-        id: progressId,
-        role: MessageRole.SYSTEM,
-        text: SAMPLE_COMMAND_PROGRESS_TEXT,
-        timestamp: Date.now(),
-        inProgress: true,
-      },
-    ]);
 
     if (replyTimeoutRef.current != null) {
       clearTimeout(replyTimeoutRef.current);
     }
     replyTimeoutRef.current = setTimeout(() => {
       replyTimeoutRef.current = null;
-      setMessages(prev =>
-        updateMessageInPlace(prev, progressId, {
-          role: MessageRole.ASSISTANT,
-          text: SAMPLE_COMMAND_SUCCESS_TEXT,
-          inProgress: false,
-        }),
-      );
+      setMessages(prev => [
+        ...prev,
+        makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
+      ]);
       setIsLoading(false);
-    }, 1200);
+    }, 900);
   }, []);
 
-  const onSlashItemCommand = useCallback(
-    ({ item }: SlashItemCommandContext) => {
-      if (item.id !== DOCS_SAMPLE_COMMAND_ID) {
-        return false;
-      }
-      queueMicrotask(() => runSampleCommand());
-      return true;
-    },
-    [runSampleCommand],
-  );
-
-  const onSubmit = useCallback(
-    (raw: string) => {
-      const text = raw.trim();
-      if (!text) return;
-
-      if (text === `/${DOCS_SAMPLE_COMMAND_ID}`) {
-        runSampleCommand();
-        return;
-      }
-
-      setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
-      setIsLoading(true);
-
-      if (replyTimeoutRef.current != null) {
-        clearTimeout(replyTimeoutRef.current);
-      }
-      replyTimeoutRef.current = setTimeout(() => {
-        replyTimeoutRef.current = null;
-        setMessages(prev => [
-          ...prev,
-          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
-        ]);
-        setIsLoading(false);
-      }, 900);
-    },
-    [runSampleCommand],
-  );
-
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat slash commands' }]}
         title="Chat slash commands"
-        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention. Long-running handlers can append a SYSTEM message with inProgress while work is in flight, then update it in place (e.g. via updateMessageById) to a final assistant message when done.`}
-        actions={
-          <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
-        }
+        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app — each item inserts an inline mention chip by default. Optional className and color on SlashCommandItem style the chip in the composer.`}
+        actions={<DocsHeaderActions slashCommandItems={DOCS_SLASH_ITEMS} />}
       />
       <PageContentSection>
         <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
@@ -180,13 +103,17 @@ export default function ChatSlashCommandsPage() {
           <Link className="underline underline-offset-2" to="/docs/chat">
             Chat
           </Link>{' '}
-          shell below: scrolling history, empty state, disclaimer, composer.
-          Type <kbd className="font-mono">/</kbd> at line start or after a
-          space; pick <kbd className="font-mono">sample-command</kbd> to run the
-          custom handler (shows an <kbd className="font-mono">inProgress</kbd>{' '}
-          shimmer, then updates the same message to a success assistant reply),
-          or send <kbd className="font-mono">/sample-command</kbd> with Enter.
+          shell below. Type <kbd className="font-mono">/</kbd> at line start or
+          after a space, then pick a command — the composer inserts a styled
+          mention chip. Items can set <kbd className="font-mono">className</kbd>{' '}
+          and <kbd className="font-mono">color</kbd> on{' '}
+          <kbd className="font-mono">SlashCommandItem</kbd>.
         </p>
+        <style>{`
+          .docs-slash-mention-accent {
+            font-size: 150%;
+          }
+        `}</style>
         <ChatChrome
           showResizeHandle={false}
           resizeHandle={undefined}
@@ -207,13 +134,12 @@ export default function ChatSlashCommandsPage() {
           effectiveScopeId="docs-chat-slash-inline"
           onPromptSubmit={onSubmit}
           onChatDeleted={() => {}}
-          slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
-          onSlashItemCommand={onSlashItemCommand}
+          slashCommandItems={DOCS_SLASH_ITEMS}
           promptPlaceholder='Ask something or type "/" for demo commands…'
           emptyState={{
-            title: 'Try a slash command',
+            title: 'Try slash commands',
             description:
-              'Pick sample-command from the palette or send /sample-command — inProgress placeholder shimmers, then becomes "✅ Sample command complete." in the same slot.',
+              'Pick a command from the palette to insert a mention chip with optional className and color.',
           }}
         />
       </PageContentSection>

package/src/docs/pages/TooltipPage.tsx

@@ -11,9 +11,6 @@ import { DocsHeaderActions } from '../docsHeaderActions';
 
 const TOOLTIP_SIDES = ['left', 'top', 'bottom', 'right'] as const;
 
-const OVER_TRIGGER_TEXT =
-  'Actual Order volume for Baerlocher MB 301, a compound that includes stearin as a component. MB 301 is typically used in construction-grade applications.';
-
 export default function TooltipPage() {
   return (
     <>
@@ -37,34 +34,6 @@ export default function TooltipPage() {
           ))}
         </div>
       </PageContentSection>
-      <PageContentSection>
-        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Over trigger</p>
-        <div
-          style={{
-            maxWidth: 500,
-            border: '1px dashed var(--border)',
-            padding: 8,
-          }}
-        >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                style={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  fontWeight: 600,
-                }}
-              >
-                {OVER_TRIGGER_TEXT}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent overTrigger maxWidth={400}>
-              {OVER_TRIGGER_TEXT}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </PageContentSection>
     </>
   );
 }

package/src/docs/registry.ts

@@ -115,6 +115,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Chat',
     load: () => import('./pages/ChatSlashCommandsPage'),
   },
+  {
+    slug: 'chat-sheet',
+    title: 'Chat sheet (portal)',
+    section: 'Chat',
+    load: () => import('./pages/ChatSheetPage'),
+  },
   {
     slug: 'chat-user-csv-attachment',
     title: 'Chat user CSV attachment',

package/src/tiptap/slash-mention/SlashSuggestionList.styl

@@ -46,3 +46,7 @@
 .itemDesc
   font-size var(--text-xs)
   color var(--muted-foreground)
+
+.mention
+  border-radius .3em
+  padding 0 .3em

package/src/tiptap/slash-mention/SlashSuggestionList.styl.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'itemDesc': string;
   'itemHighlighted': string;
   'itemLabel': string;
+  'mention': string;
   'root': string;
 }
 export const cssExports: CssExports;