@streamsai/ui 0.1.3 → 0.1.5

package/dist/components/ui/rich-text-editor.d.ts

@@ -73,8 +73,6 @@ export type SlashCommandCandidate = {
     insertText?: string | null;
     /** Menu section; the menu lists `cycles` before `commands`. Ungrouped candidates show under one title. */
     group?: 'cycles' | 'commands';
-    /** Draws a soft sweeping highlight behind the row, to point a first-time user at it. */
-    emphasis?: boolean;
 };
 /** Host-supplied emoji for the `:` shortcode typeahead (Slack-style `:smile:`). */
 export type EmojiCandidate = {

package/dist/components/ui/rich-text-editor.js

@@ -21,9 +21,8 @@ import { $createLinkNode, $isLinkNode, LinkNode, AutoLinkNode } from '@lexical/l
 import { $createCodeNode, $isCodeNode, CodeNode } from '@lexical/code';
 import { BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, CODE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, LINK, ORDERED_LIST, STRIKETHROUGH, UNORDERED_LIST, } from '@lexical/markdown';
 import { cn } from '../../lib/utils.js';
-import { Collapse, motion, useReducedMotion } from '../../motion/index.js';
-import { loops } from '../../motion/config.js';
-import { detectTextDirection, hasStrongCharacter } from '../../lib/text-direction.js';
+import { Collapse } from '../../motion/index.js';
+import { detectTextDirection, hasStrongCharacter, openingDirection } from '../../lib/text-direction.js';
 import { AgentAvatar } from './agent-avatar.js';
 import { ProviderBadge } from './provider-badge.js';
 import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
@@ -1403,22 +1402,13 @@ function SlashCommandsPlugin({ searchSlashCommands, onSelectCommand, onSlashType
                             : labels.slashTitle;
                     return (_jsxs(React.Fragment, { children: [startsGroup ? _jsx(SlashGroupHeader, { label: title, first: index === 0 }) : null, _jsxs("button", { id: `slash-typeahead-item-${index}`, type: "button", role: "option", tabIndex: -1, "aria-selected": selected, 
                                 // Lexical scrolls the highlighted row into the max-h menu via this ref.
-                                ref: option.setRefElement, className: cn('relative isolate flex w-full flex-col rounded-lg p-2 text-start text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', selected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent'), onClick: () => {
+                                ref: option.setRefElement, className: cn('flex w-full flex-col rounded-lg p-2 text-start text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', selected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent'), onClick: () => {
                                     setHighlightedIndex(index);
                                     selectOptionAndCleanUp(option);
-                                }, onMouseEnter: () => setHighlightedIndex(index), children: [option.candidate.emphasis ? _jsx(SlashEmphasis, {}) : null, _jsxs("span", { children: ["/", option.candidate.name] }), _jsx("span", { className: "text-muted-foreground", children: option.candidate.description })] })] }, option.key));
+                                }, onMouseEnter: () => setHighlightedIndex(index), children: [_jsxs("span", { children: ["/", option.candidate.name] }), _jsx("span", { className: "text-muted-foreground", children: option.candidate.description })] })] }, option.key));
                 })) }), document.body);
         } }));
 }
-/** A tinted wash with a light band sweeping across it; still (tint only) under reduced motion. */
-function SlashEmphasis() {
-    const reduceMotion = useReducedMotion();
-    return (_jsx(motion.span, { "aria-hidden": true, "data-slot": "slash-emphasis", className: "pointer-events-none absolute inset-0 -z-10 rounded-lg bg-primary/8", style: {
-            backgroundImage: 'linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--primary) 22%, transparent) 50%, transparent 70%)',
-            backgroundSize: '220% 100%',
-            backgroundRepeat: 'no-repeat',
-        }, initial: { backgroundPosition: '160% 0' }, animate: reduceMotion === true ? undefined : { backgroundPosition: ['160% 0', '-60% 0'] }, transition: { ...loops.shimmer, duration: 1.8 } }));
-}
 function SlashGroupHeader({ label, first }) {
     return (_jsxs("div", { className: cn('flex items-center gap-2.5 px-2 pb-1 text-sm text-muted-foreground', first ? 'pt-1.5' : 'pt-3'), children: [_jsx("span", { children: label }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }));
 }
@@ -1948,8 +1938,8 @@ const toggleHeading = (editor, tag) => editor.update(() => {
  * underline are deliberately absent because the message AST has no representation for them.
  */
 const editorTheme = {
-    // DirectionPlugin sets `dir` for bidi; `text-left` keeps lines left-aligned like Slack.
-    paragraph: 'm-0 text-left',
+    // DirectionPlugin sets `dir` per block for bidi; the editor wrapper owns the message alignment.
+    paragraph: 'm-0',
     text: {
         bold: 'font-semibold',
         italic: 'italic',
@@ -1970,7 +1960,7 @@ const editorTheme = {
         nested: { listitem: 'list-none' },
     },
     link: 'text-primary underline underline-offset-2',
-    code: 'my-1 block rounded bg-muted p-2 font-mono text-[0.9em]',
+    code: 'my-1 block rounded bg-muted p-2 text-left font-mono text-[0.9em]',
 };
 const DOCUMENT_MARKDOWN_TRANSFORMERS = [
     BOLD_ITALIC_STAR,
@@ -2267,17 +2257,28 @@ function LinkDialog({ draft, labels, onClose, }) {
 }
 // ── Content direction (HAC #1045) ────────────────────────────────────────────
 const DIRECTION_PLUGIN_TAG = 'direction-plugin';
-/** Survives empty composer / send remount so typing Hebrew again keeps RTL. */
-let lastRememberedDirection = 'ltr';
+/**
+ * Opener direction of the last non-empty draft. Survives an empty composer / send remount so
+ * typing Hebrew again keeps RTL, and a Hebrew-led composer stays right-aligned while empty.
+ */
+let lastRememberedDirection = null;
 /** Test-only: reset module-scoped remembered direction between cases. */
 function __resetLastRememberedDirectionForTests() {
-    lastRememberedDirection = 'ltr';
+    lastRememberedDirection = null;
 }
 /**
  * Plain text used for word-vote direction: mentions, cycle triggers, stream
  * chips and link labels are excluded so `@Name` then Hebrew does not lock LTR.
+ * A list contributes its top-level items only, so a nested sub-list cannot outvote it.
  */
 const plainTextForDirection = (node) => {
+    // Items stay separate words, as the renderer joins them: `hello` + `please` must not fuse into one token.
+    if ($isListNode(node)) {
+        return node
+            .getChildren()
+            .map((item) => ($isElementNode(item) ? plainTextForDirection(item) : ''))
+            .join(' ');
+    }
     let out = '';
     for (const child of node.getChildren()) {
         if ($isMentionNode(child) ||
@@ -2286,6 +2287,8 @@ const plainTextForDirection = (node) => {
             $isCustomEmojiNode(child) ||
             $isLinkNode(child))
             continue;
+        if ($isListNode(child))
+            continue;
         if ($isTextNode(child)) {
             out += child.getTextContent();
             continue;
@@ -2301,9 +2304,10 @@ const plainTextForDirection = (node) => {
  * once mention display names enter the signal.
  *
  * Stamps the live DOM (HAC) and Lexical `setDirection` so caret alignment and
- * serialized `direction` stay in sync.
+ * serialized `direction` stay in sync. In chat mode (`onAlignmentChange` given) the first block
+ * with a strong letter also decides one side for the whole draft, so later paragraphs never move it.
  */
-function DirectionPlugin({ enabled = true }) {
+function DirectionPlugin({ enabled = true, onAlignmentChange, }) {
     const [editor] = useLexicalComposerContext();
     React.useEffect(() => {
         if (!enabled)
@@ -2311,6 +2315,18 @@ function DirectionPlugin({ enabled = true }) {
         const stampDirections = () => {
             const updates = [];
             editor.getEditorState().read(() => {
+                const blocks = $getRoot()
+                    .getChildren()
+                    .flatMap((child) => {
+                    if (!$isListNode(child) && !$isParagraphNode(child))
+                        return [];
+                    return [{ child, signal: plainTextForDirection(child) }];
+                });
+                const opener = openingDirection(blocks.map((block) => block.signal));
+                if (opener !== null)
+                    lastRememberedDirection = opener;
+                const draftDirection = opener ?? lastRememberedDirection;
+                onAlignmentChange?.(draftDirection === null ? null : draftDirection === 'rtl' ? 'right' : 'left');
                 for (const child of $getRoot().getChildren()) {
                     const dom = editor.getElementByKey(child.getKey());
                     let dir;
@@ -2323,12 +2339,13 @@ function DirectionPlugin({ enabled = true }) {
                             // Empty / "@" / "/" / mention-only blocks keep the last typed direction (HAC remount
                             // memory) on the DOM only: a model update here would re-run the typeahead listener
                             // mid-trigger and close the menu the composer's @ and / buttons just opened.
-                            if (dom && dom.getAttribute('dir') !== lastRememberedDirection)
+                            if (dom &&
+                                lastRememberedDirection &&
+                                dom.getAttribute('dir') !== lastRememberedDirection)
                                 dom.setAttribute('dir', lastRememberedDirection);
                             continue;
                         }
                         dir = detectTextDirection(signal);
-                        lastRememberedDirection = dir;
                     }
                     else {
                         continue;
@@ -2350,12 +2367,16 @@ function DirectionPlugin({ enabled = true }) {
             }, { tag: DIRECTION_PLUGIN_TAG });
         };
         stampDirections();
-        return editor.registerUpdateListener(({ tags }) => {
+        const unregister = editor.registerUpdateListener(({ tags }) => {
             if (tags.has(DIRECTION_PLUGIN_TAG))
                 return;
             stampDirections();
         });
-    }, [editor, enabled]);
+        return () => {
+            unregister();
+            onAlignmentChange?.(null);
+        };
+    }, [editor, enabled, onAlignmentChange]);
     return null;
 }
 const editorNodes = [
@@ -2384,6 +2405,7 @@ function RichTextEditorInner({ value: _value, onChange, placeholder, searchMenti
     const documentImages = useDocumentImages(editor, documentMode);
     const documentContext = React.useMemo(() => (documentMode ? { options: documentMode, labels: documentLabels } : null), [documentMode, documentLabels]);
     const [linkDraft, setLinkDraft] = React.useState(null);
+    const [alignment, setAlignment] = React.useState(null);
     const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const showToolbar = toolbar && !disabled;
     const openLinkDialog = React.useCallback(() => setLinkDraft(readLinkDraft(editor)), [editor]);
@@ -2393,9 +2415,12 @@ function RichTextEditorInner({ value: _value, onChange, placeholder, searchMenti
                 streamFallback: labels.streamFallback,
             }, children: _jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex min-h-0 flex-col rounded-md border', className), children: [_jsx(Collapse, { open: showToolbar, children: _jsx(FormattingToolbar, { labels: labels, onLinkClick: openLinkDialog, documentMode: documentContext
                                 ? { ...documentContext, addFiles: documentImages.addFiles }
-                                : undefined }) }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-y-auto", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { "aria-label": ariaLabel, "aria-multiline": true, role: "textbox", className: "min-h-9 w-full resize-none px-3 py-1.5 text-sm outline-none in-data-[platform=mobile]:text-base disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled }), placeholder: placeholder ? (_jsx("div", { className: "pointer-events-none absolute top-1.5 start-3 text-sm text-muted-foreground", children: placeholder })) : null, ErrorBoundary: PassthroughErrorBoundary }) }), autoFocus ? _jsx(AutoFocusPlugin, {}) : null, _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(ListTabIndentPlugin, {}), _jsx(LinkPlugin, { validateUrl: (url) => /^https?:\/\//i.test(url) }), _jsx(AutoLinkPlugin, { matchers: MATCHERS, excludeParents: AUTO_LINK_EXCLUDE_PARENTS }), _jsx(MarkdownShortcutPlugin, { transformers: documentMode ? DOCUMENT_MARKDOWN_TRANSFORMERS : MARKDOWN_TRANSFORMERS }), _jsx(PasteLinkOnSelectionPlugin, {}), linkDraft ? (_jsx(LinkDialog, { draft: linkDraft, labels: labels, onClose: () => setLinkDraft(null) })) : null, _jsx(OnChangePlugin, { onChange: (editorState) => {
+                                : undefined }) }), _jsx("div", { "data-align": documentMode ? undefined : (alignment ?? undefined), className: "group/align relative min-h-0 flex-1 overflow-y-auto", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { "aria-label": ariaLabel, "aria-multiline": true, role: "textbox", className: cn(
+                                // A document keeps its lines on the left; a chat draft aligns as one block by its
+                                // opener, and a right-aligned draft parks its (shrink-wrapped) lists on the right.
+                                documentMode ? 'text-left' : 'text-start', 'group-data-[align=left]/align:text-left group-data-[align=right]/align:text-right', 'group-data-[align=right]/align:[&>ol]:ml-auto group-data-[align=right]/align:[&>ul]:ml-auto group-data-[align=left]/align:[&>ol]:mr-auto group-data-[align=left]/align:[&>ul]:mr-auto', 'min-h-9 w-full resize-none px-3 py-1.5 text-sm outline-none in-data-[platform=mobile]:text-base disabled:cursor-not-allowed disabled:opacity-50'), disabled: disabled }), placeholder: placeholder ? (_jsx("div", { className: "pointer-events-none absolute top-1.5 start-3 text-sm text-muted-foreground group-data-[align=left]/align:start-auto group-data-[align=left]/align:left-3 group-data-[align=right]/align:start-auto group-data-[align=right]/align:right-3", children: placeholder })) : null, ErrorBoundary: PassthroughErrorBoundary }) }), autoFocus ? _jsx(AutoFocusPlugin, {}) : null, _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(ListTabIndentPlugin, {}), _jsx(LinkPlugin, { validateUrl: (url) => /^https?:\/\//i.test(url) }), _jsx(AutoLinkPlugin, { matchers: MATCHERS, excludeParents: AUTO_LINK_EXCLUDE_PARENTS }), _jsx(MarkdownShortcutPlugin, { transformers: documentMode ? DOCUMENT_MARKDOWN_TRANSFORMERS : MARKDOWN_TRANSFORMERS }), _jsx(PasteLinkOnSelectionPlugin, {}), linkDraft ? (_jsx(LinkDialog, { draft: linkDraft, labels: labels, onClose: () => setLinkDraft(null) })) : null, _jsx(OnChangePlugin, { onChange: (editorState) => {
                             onChange(editorState.toJSON());
-                        } }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, sendOnEnter: sendOnEnter }), documentMode ? null : _jsx(CodeFenceOnThirdBacktickPlugin, {}), _jsx(InsertTextAtCaretPlugin, { request: insertTextAtCaret, onInserted: onInsertTextAtCaret }), _jsx(TypeaheadEditGatePlugin, {}), _jsx(MentionsPluginWithPortal, { searchMentions: searchMentions, onMentionSelect: onMentionSelect }), _jsx(SlashCommandsPlugin, { searchSlashCommands: searchSlashCommands, onSelectCommand: onSlashCommandSelect, onSlashTyped: onSlashTyped, labels: labels }), _jsx(EmojiTypeaheadPlugin, { searchEmojis: searchEmojis, labels: labels, onEmojiUsed: onEmojiUsed }), _jsx(EmojiShortcodeReplacePlugin, { resolveEmojiShortcode: resolveEmojiShortcode, onEmojiUsed: onEmojiUsed }), _jsx(StreamChipsTypeaheadPlugin, { searchStreams: searchStreams, labels: labels }), _jsx(CycleTriggerPlugin, { request: insertCycleTrigger, onInserted: onCycleTriggerInserted }), _jsx(CustomEmojiPlugin, { request: insertCustomEmoji, onInserted: onCustomEmojiInserted }), _jsx(SlashCommandChipPlugin, { commands: chipSlashCommands }), _jsx(DirectionPlugin, { enabled: detectContentDirection })] }) }) }));
+                        } }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, sendOnEnter: sendOnEnter }), documentMode ? null : _jsx(CodeFenceOnThirdBacktickPlugin, {}), _jsx(InsertTextAtCaretPlugin, { request: insertTextAtCaret, onInserted: onInsertTextAtCaret }), _jsx(TypeaheadEditGatePlugin, {}), _jsx(MentionsPluginWithPortal, { searchMentions: searchMentions, onMentionSelect: onMentionSelect }), _jsx(SlashCommandsPlugin, { searchSlashCommands: searchSlashCommands, onSelectCommand: onSlashCommandSelect, onSlashTyped: onSlashTyped, labels: labels }), _jsx(EmojiTypeaheadPlugin, { searchEmojis: searchEmojis, labels: labels, onEmojiUsed: onEmojiUsed }), _jsx(EmojiShortcodeReplacePlugin, { resolveEmojiShortcode: resolveEmojiShortcode, onEmojiUsed: onEmojiUsed }), _jsx(StreamChipsTypeaheadPlugin, { searchStreams: searchStreams, labels: labels }), _jsx(CycleTriggerPlugin, { request: insertCycleTrigger, onInserted: onCycleTriggerInserted }), _jsx(CustomEmojiPlugin, { request: insertCustomEmoji, onInserted: onCustomEmojiInserted }), _jsx(SlashCommandChipPlugin, { commands: chipSlashCommands }), _jsx(DirectionPlugin, { enabled: detectContentDirection, onAlignmentChange: documentMode ? undefined : setAlignment })] }) }) }));
 }
 /**
  * Controlled rich-text editor built on Lexical.

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants
 export { Button, buttonVariants } from './components/ui/button.js';
 export { cn } from './lib/utils.js';
 export { HOME_TILE_COUNT, homeTileIndex } from './lib/home-tile.js';
-export { detectTextDirection, hasStrongCharacter, isNeutralToken } from './lib/text-direction.js';
+export { detectTextDirection, hasStrongCharacter, isNeutralToken, openingDirection, } from './lib/text-direction.js';
 export { Checkbox } from './components/ui/checkbox.js';
 export { Clickable, clickableVariants, type ClickableProps } from './components/ui/clickable.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/dialog.js';

package/dist/index.js

@@ -38,7 +38,7 @@ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants
 export { Button, buttonVariants } from './components/ui/button.js';
 export { cn } from './lib/utils.js';
 export { HOME_TILE_COUNT, homeTileIndex } from './lib/home-tile.js';
-export { detectTextDirection, hasStrongCharacter, isNeutralToken } from './lib/text-direction.js';
+export { detectTextDirection, hasStrongCharacter, isNeutralToken, openingDirection, } from './lib/text-direction.js';
 export { Checkbox } from './components/ui/checkbox.js';
 export { Clickable, clickableVariants } from './components/ui/clickable.js';
 // prettier-ignore

package/dist/lib/text-direction.d.ts

@@ -26,3 +26,8 @@ export declare const hasStrongCharacter: (text: string) => boolean;
  * with a dominant-script override.
  */
 export declare const detectTextDirection: (text: string) => TextDirection;
+/**
+ * Side a whole chat message aligns to: the word vote on the first block that has a strong
+ * letter (blank, digit-only and punctuation-only openers are skipped), or `null` when no block has one.
+ */
+export declare const openingDirection: (blockTexts: Iterable<string>) => TextDirection | null;

package/dist/lib/text-direction.js

@@ -117,3 +117,23 @@ export const detectTextDirection = (text) => {
         return 'ltr';
     return firstStrong;
 };
+const LETTER = /\p{L}/u;
+/** Like `hasStrongCharacter`, but digits and punctuation in RTL ranges (`١٢`, `׃`) do not count. */
+const hasStrongLetter = (text) => {
+    for (const character of text) {
+        if (strengthOf(character) !== null && LETTER.test(character))
+            return true;
+    }
+    return false;
+};
+/**
+ * Side a whole chat message aligns to: the word vote on the first block that has a strong
+ * letter (blank, digit-only and punctuation-only openers are skipped), or `null` when no block has one.
+ */
+export const openingDirection = (blockTexts) => {
+    for (const text of blockTexts) {
+        if (hasStrongLetter(text))
+            return detectTextDirection(text);
+    }
+    return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamsai/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Streams design system: shadcn/ui components on Base UI, design tokens (Tailwind v4) and a theme provider for React 19.",
   "license": "MIT",
   "repository": {