@sybilion/uilib 1.3.43 → 1.3.44

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPrompt.js

@@ -9,7 +9,7 @@ import { useChatPromptEditor } from './useChatPromptEditor.js';
 function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, onSlashItemCommand, attachments = [], onRemoveAttachment, disabled = false, attachmentAccept, onAttachmentFiles, }) {
     const attachmentsCount = attachments.length;
     const emitSubmitRef = useRef(() => { });
-    const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } = useChatPromptEditor({
+    const { editor, trimmedMessage, resetAfterSend } = useChatPromptEditor({
         disabled,
         placeholder,
         slashCommandItems,
@@ -42,7 +42,7 @@ function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage,
     if (!editor) {
         return null;
     }
-    return (jsxs("form", { onSubmit: handleSubmitForm, className: cn(S.root, className), children: [jsx(ChatPromptAttachments, { attachments: attachments, onRemove: index => onRemoveAttachment?.(index), disabled: disabled }), jsx(ChatPromptComposer, { editor: editor, disabled: disabled, trimmedMessage: trimmedMessage, attachments: attachments, attachmentAccept: attachmentAccept, onAttachmentFiles: onAttachmentFiles, onComposerKeyDown: handleComposerKeyDown }), footer] }));
+    return (jsxs("form", { onSubmit: handleSubmitForm, className: cn(S.root, className), children: [jsx(ChatPromptAttachments, { attachments: attachments, onRemove: index => onRemoveAttachment?.(index), disabled: disabled }), jsx(ChatPromptComposer, { editor: editor, disabled: disabled, trimmedMessage: trimmedMessage, attachments: attachments, attachmentAccept: attachmentAccept, onAttachmentFiles: onAttachmentFiles }), footer] }));
 }
 
 export { ChatPrompt };

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPrompt.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-6);padding-top:var(--p-5);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-6);padding-top:var(--p-5);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty.is-editor-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
 var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","fileInput":"ChatPrompt_fileInput__xdgPn","attachButton":"ChatPrompt_attachButton__gi-qF","editorWrap":"ChatPrompt_editorWrap__Q7gat","editorMount":"ChatPrompt_editorMount__Phh4D","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPromptComposer.js

@@ -5,7 +5,7 @@ import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
 import { Button } from '../../Button/Button.js';
 import S from './ChatPrompt.styl.js';
 
-function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, onComposerKeyDown, }) {
+function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, }) {
     const fileInputRef = useRef(null);
     const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
     const handleFileInputChange = useCallback((e) => {
@@ -19,7 +19,7 @@ function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, att
     return (jsxs("div", { className: S.composer, children: [showAttachButton ? (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: attachmentAccept, multiple: true, className: S.fileInput, disabled: disabled, onChange: handleFileInputChange }), jsx(Button, { type: "button", variant: "ghost", icon: true, size: "sm", className: S.attachButton, "aria-label": "Attach file", disabled: disabled, onClick: e => {
                             e.preventDefault();
                             fileInputRef.current?.click();
-                        }, children: jsx(PaperclipIcon, { size: 16 }) })] })) : null, jsx("div", { className: S.editorWrap, onKeyDown: onComposerKeyDown, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || !canSubmit, onMouseDown: e => e.preventDefault(), children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }));
+                        }, children: jsx(PaperclipIcon, { size: 16 }) })] })) : null, jsx("div", { className: S.editorWrap, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || !canSubmit, onMouseDown: e => e.preventDefault(), children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }));
 }
 
 export { ChatPromptComposer };

package/dist/esm/components/ui/Chat/ChatPrompt/useChatPromptEditor.js

@@ -44,7 +44,6 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
             Placeholder.configure({
                 placeholder: placeholderText,
                 showOnlyWhenEditable: true,
-                showOnlyCurrent: false,
             }),
         ];
         if (slashItemsStable.length > 0) {
@@ -70,6 +69,28 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
         });
     }, []);
     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, event) => {
+        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,
         content: CHAT_PROMPT_EMPTY_DOC,
@@ -80,6 +101,7 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
                 spellcheck: 'true',
                 'aria-label': ariaLabelComposer,
             },
+            handleKeyDown: handleEditorKeyDown,
         },
         onTransaction: ({ editor: ed }) => {
             const dom = chatPromptSafeEditorDom(ed);
@@ -89,7 +111,7 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
             setPlainDraft(ed.getText());
         },
         onCreate: bindEditorDom,
-    }, [extensions, bindEditorDom, ariaLabelComposer]);
+    }, [extensions, bindEditorDom, ariaLabelComposer, handleEditorKeyDown]);
     useEffect(() => {
         if (!editor)
             return;
@@ -131,8 +153,6 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
             return;
         syncChatPromptComposerHeight(dom, plainDraft);
     }, [editor, plainDraft]);
-    const onEnterSubmitRef = useRef(onEnterSubmit);
-    onEnterSubmitRef.current = onEnterSubmit;
     const resetAfterSend = useCallback(() => {
         if (!editor)
             return;
@@ -144,23 +164,10 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
         });
         setPlainDraft('');
     }, [editor]);
-    const handleComposerKeyDown = useCallback((e) => {
-        if (!(e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey))
-            return;
-        if (!editorDomRef.current?.contains(e.target))
-            return;
-        if (slashOpenRef.current)
-            return;
-        if (!trimmedMessage && attachmentsCount === 0)
-            return;
-        e.preventDefault();
-        onEnterSubmitRef.current();
-    }, [attachmentsCount, trimmedMessage]);
     return {
         editor,
         trimmedMessage,
         resetAfterSend,
-        handleComposerKeyDown,
     };
 }
 

package/dist/esm/components/ui/Page/PageHeader/PageHeader.js

@@ -8,7 +8,7 @@ import S from './PageHeader.styl.js';
 
 function PageHeader({ breadcrumbs, breadcrumbClientLogo, breadcrumbCompanyName, breadcrumbSidebarTrigger = true, title, subheader, actions, }) {
     const { isScrolled } = useContext(PageContext);
-    return (jsx("div", { className: cn(S.root, actions && S.hasActions, isScrolled && S.scrolled), children: jsxs("div", { className: S.inner, children: [jsx(Breadcrumbs, { className: S.breadcrumbs, items: breadcrumbs ?? [], clientLogo: breadcrumbClientLogo, companyName: breadcrumbCompanyName, sidebarTrigger: breadcrumbSidebarTrigger, children: isScrolled && (jsxs("div", { className: S.titleDupe, children: [jsx(BreadCrumbsSeparator, { size: 14 }), title] })) }), jsxs("div", { className: S.main, children: [jsxs("div", { className: S.title, children: [jsx("h1", { children: title }), subheader && (jsx(TextWithDeferTooltip, { className: S.subheader, children: subheader }))] }), actions && jsx("div", { className: S.actions, children: actions })] })] }) }));
+    return (jsx("div", { className: cn(S.root, actions && S.hasActions, isScrolled && S.scrolled), children: jsxs("div", { className: S.inner, children: [jsx(Breadcrumbs, { className: S.breadcrumbs, items: breadcrumbs ?? [], clientLogo: breadcrumbClientLogo, companyName: breadcrumbCompanyName, sidebarTrigger: breadcrumbSidebarTrigger, children: isScrolled && (jsxs("div", { className: S.titleDupe, children: [jsx(BreadCrumbsSeparator, { size: 14 }), title] })) }), jsxs("div", { className: S.main, children: [jsxs("div", { className: S.title, children: [jsx("h1", { children: title }), subheader && (jsx(TextWithDeferTooltip, { className: S.subheader, overTrigger: true, children: subheader }))] }), actions && jsx("div", { className: S.actions, children: actions })] })] }) }));
 }
 
 export { PageHeader };

package/dist/esm/components/ui/TextWithDeferTooltip/TextWithDeferTooltip.js

@@ -4,19 +4,41 @@ import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 
 function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bottom', overTrigger = false, ...props }) {
     const [withTooltip, setWithTooltip] = useState(false);
+    const [tooltipStyles, setTooltipStyles] = useState({});
     const ref = useRef(null);
+    const cachedFontSizeRef = useRef(null);
     const handleMouseEnter = () => {
         if (!ref.current)
             return;
         const isOverflowingHorizontally = ref.current.scrollWidth - ref.current.clientWidth > 3;
         const isOverflowingVertically = ref.current.scrollHeight - ref.current.clientHeight > 3;
         if (isOverflowingHorizontally || isOverflowingVertically) {
+            const styles = {
+                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);
         }
     };
     const textElement = (jsx("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, ...props, children: children }));
     if (withTooltip) {
-        return (jsxs(Tooltip, { open: withTooltip, onOpenChange: setWithTooltip, children: [jsx(TooltipTrigger, { asChild: true, children: textElement }), jsx(TooltipContent, { side: side, overTrigger: overTrigger, maxWidth: maxWidth, style: width !== undefined ? { width: `${width}px` } : undefined, children: children })] }));
+        const tooltipSide = overTrigger ? 'bottom' : side;
+        return (jsxs(Tooltip, { open: withTooltip, onOpenChange: setWithTooltip, children: [jsx(TooltipTrigger, { asChild: true, children: textElement }), jsx(TooltipContent, { side: tooltipSide, style: {
+                        ...(maxWidth !== undefined && { maxWidth: `${maxWidth}px` }),
+                        ...tooltipStyles,
+                    }, overTrigger: overTrigger, children: children })] }));
     }
     return textElement;
 }

package/dist/esm/components/widgets/DriverCard/DriverCard.js

@@ -83,7 +83,7 @@ function DriverCard({ selectedDriver, isLoading, inQueue = false, driverSelector
     const directionText = direction > 0 ? 'Positive' : 'Negative';
     const DirectionIcon = direction > 0 ? TrendUpIcon : TrendDownIcon;
     const nameElem = (jsx("h4", { className: `${S.driverTitle} ${S.truncated}`, children: name }));
-    return (jsx(Card, { className: S.root, paddingSize: "l", children: jsx(CardContent, { noScroll: true, children: jsxs("div", { className: S.cardContent, children: [jsx("div", { className: S.driverHeader, children: jsxs("div", { className: S.headerContent, children: [jsxs("div", { className: S.topHeader, children: [jsxs("p", { className: S.categoryInfo, children: [jsx("span", { className: S.categoryIcon, children: getCategoryIcon(category) }), jsx("span", { className: S.categoryText, children: category })] }), driverSelector] }), name.length > 60 ? (jsxs(Tooltip, { children: [jsx(LabelWithId, { id: id, label: jsx(TooltipTrigger, { asChild: true, children: nameElem }) }), jsx(TooltipContent, { side: "left", className: S.tooltipContent, children: jsx("div", { className: S.tooltipTitle, children: name }) })] })) : (jsx(LabelWithId, { id: id, label: nameElem })), jsx("p", { className: S.regionDisplay, children: regionDisplay })] }) }), jsx("div", { className: S.metricsSection, children: jsx("div", { className: S.importanceScore, children: importanceDisplay }) }), jsxs("div", { className: S.directionLagSection, children: [jsxs(Badge, { variant: direction > 0 ? 'green' : 'red', className: S.directionBadge, children: [jsx(DirectionIcon, { className: S.trendIcon }), directionText, " correlation"] }), jsxs("span", { className: S.lagInfo, children: ["Lag: ", lag] })] }), jsx(DriverPerformanceChart, { driver: selectedDriver }), jsx("p", { className: S.description, children: summary ?? '' })] }) }) }));
+    return (jsx(Card, { className: S.root, paddingSize: "l", children: jsx(CardContent, { noScroll: true, children: jsxs("div", { className: S.cardContent, children: [jsx("div", { className: S.driverHeader, children: jsxs("div", { className: S.headerContent, children: [jsxs("div", { className: S.topHeader, children: [jsxs("p", { className: S.categoryInfo, children: [jsx("span", { className: S.categoryIcon, children: getCategoryIcon(category) }), jsx("span", { className: S.categoryText, children: category })] }), driverSelector] }), name.length > 60 ? (jsxs(Tooltip, { children: [jsx(LabelWithId, { id: id, label: jsx(TooltipTrigger, { asChild: true, children: nameElem }) }), jsx(TooltipContent, { side: "left", className: S.tooltipContent, overTrigger: true, children: jsx("div", { className: S.tooltipTitle, children: name }) })] })) : (jsx(LabelWithId, { id: id, label: nameElem })), jsx("p", { className: S.regionDisplay, children: regionDisplay })] }) }), jsx("div", { className: S.metricsSection, children: jsx("div", { className: S.importanceScore, children: importanceDisplay }) }), jsxs("div", { className: S.directionLagSection, children: [jsxs(Badge, { variant: direction > 0 ? 'green' : 'red', className: S.directionBadge, children: [jsx(DirectionIcon, { className: S.trendIcon }), directionText, " correlation"] }), jsxs("span", { className: S.lagInfo, children: ["Lag: ", lag] })] }), jsx(DriverPerformanceChart, { driver: selectedDriver }), jsx("p", { className: S.description, children: summary ?? '' })] }) }) }));
 }
 
 export { DriverCard };

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.d.ts

@@ -1,4 +1,3 @@
-import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { Editor } from '@tiptap/core';
 import type { ChatAttachmentDropItem } from '../Chat.types';
 export type ChatPromptComposerProps = {
@@ -8,6 +7,5 @@ export type ChatPromptComposerProps = {
     attachments: ChatAttachmentDropItem[];
     attachmentAccept?: string;
     onAttachmentFiles?: (files: File[]) => void;
-    onComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
-export declare function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, onComposerKeyDown, }: ChatPromptComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, }: ChatPromptComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/useChatPromptEditor.d.ts

@@ -1,4 +1,3 @@
-import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { Editor } from '@tiptap/core';
 export type UseChatPromptEditorOptions = {
@@ -16,6 +15,5 @@ export type UseChatPromptEditorResult = {
     editor: Editor | null;
     trimmedMessage: string;
     resetAfterSend: () => void;
-    handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
 export declare function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount, onEnterSubmit, }: UseChatPromptEditorOptions): UseChatPromptEditorResult;

package/dist/esm/types/src/docs/pages/ChatSheetPage.d.ts

@@ -0,0 +1 @@
+export default function ChatSheetPage(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.43",
+  "version": "1.3.44",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl

@@ -62,7 +62,7 @@ INPUT_MAX_HEIGHT = 200px
     overflow-y auto !important
     overflow-x hidden !important
 
-  & :global(.ProseMirror p.is-empty::before)
+  & :global(.ProseMirror p.is-empty.is-editor-empty::before)
     color var(--muted-foreground)
     content attr(data-placeholder)
     float left

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.tsx

@@ -24,16 +24,15 @@ export function ChatPrompt({
   const attachmentsCount = attachments.length;
 
   const emitSubmitRef = useRef(() => {});
-  const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } =
-    useChatPromptEditor({
-      disabled,
-      placeholder,
-      slashCommandItems,
-      onSlashItemCommand,
-      prefillMessage,
-      attachmentsCount,
-      onEnterSubmit: () => emitSubmitRef.current(),
-    });
+  const { editor, trimmedMessage, resetAfterSend } = useChatPromptEditor({
+    disabled,
+    placeholder,
+    slashCommandItems,
+    onSlashItemCommand,
+    prefillMessage,
+    attachmentsCount,
+    onEnterSubmit: () => emitSubmitRef.current(),
+  });
 
   const emitSubmitAndClear = useCallback(() => {
     if (!editor) return;
@@ -79,7 +78,6 @@ export function ChatPrompt({
         attachments={attachments}
         attachmentAccept={attachmentAccept}
         onAttachmentFiles={onAttachmentFiles}
-        onComposerKeyDown={handleComposerKeyDown}
       />
       {footer}
     </form>

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.tsx

@@ -1,9 +1,4 @@
-import {
-  type ChangeEvent,
-  type KeyboardEvent as ReactKeyboardEvent,
-  useCallback,
-  useRef,
-} from 'react';
+import { type ChangeEvent, useCallback, useRef } from 'react';
 
 import type { Editor } from '@tiptap/core';
 import { EditorContent } from '@tiptap/react';
@@ -20,7 +15,6 @@ export type ChatPromptComposerProps = {
   attachments: ChatAttachmentDropItem[];
   attachmentAccept?: string;
   onAttachmentFiles?: (files: File[]) => void;
-  onComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
 
 export function ChatPromptComposer({
@@ -30,7 +24,6 @@ export function ChatPromptComposer({
   attachments,
   attachmentAccept,
   onAttachmentFiles,
-  onComposerKeyDown,
 }: ChatPromptComposerProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
@@ -79,7 +72,7 @@ export function ChatPromptComposer({
         </>
       ) : null}
 
-      <div className={S.editorWrap} onKeyDown={onComposerKeyDown}>
+      <div className={S.editorWrap}>
         <EditorContent editor={editor} className={S.editorMount} />
       </div>
 

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/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/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/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',