@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/Chat/ChatComposerInput.test.tsx

@@ -155,6 +155,109 @@ describe('ChatComposerInput', () => {
     });
   });
 
+  describe('composer focus control', () => {
+    it('registers a focus control so a body click focuses the input', () => {
+      render(
+        <ChatComposer onSubmit={() => {}} input={<ChatComposerInput />} />,
+      );
+      const editable = screen.getByRole('textbox');
+      // Walk to the composer body: editable → input root → inputArea → body.
+      const inputRoot = editable.parentElement!;
+      const inputArea = inputRoot.parentElement!;
+      const body = inputArea.parentElement!;
+      // Click empty space in the body → shell drives the registered control.
+      fireEvent.click(body);
+      expect(document.activeElement).toBe(editable);
+    });
+  });
+
+  describe('Enter submit behavior', () => {
+    it('does not submit on Enter while IME composition is in progress', () => {
+      const onSubmit = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'こんにちは';
+      fireEvent.input(textbox);
+      // isComposing is surfaced on the native event during IME composition.
+      fireEvent.keyDown(textbox, {key: 'Enter', isComposing: true});
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('does not submit on Enter for the legacy keyCode 229 composing signal', () => {
+      const onSubmit = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'ㅎ';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter', keyCode: 229});
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('lets onKeyDown suppress the default submit via preventDefault (touch-newline recipe)', () => {
+      // The documented "insert a newline instead of sending" pattern: a
+      // consumer preventDefaults Enter (e.g. on a coarse pointer).
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+        }
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('lets onKeyDown add behavior (Cmd/Ctrl+Enter submit) without preventDefault', () => {
+      // Adding a submit shortcut is just handling the event yourself; the
+      // built-in Enter handling still runs for the plain-Enter case.
+      const onSubmit = vi.fn();
+      const handle = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          handle();
+        }
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter', metaKey: true});
+      expect(handle).toHaveBeenCalled();
+      // Consumer did not preventDefault, so the built-in submit also fires.
+      expect(onSubmit).toHaveBeenCalledWith('hello');
+    });
+
+    it('calls onKeyDown before submit and lets preventDefault take over', () => {
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        e.preventDefault();
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('calls onKeyDown but still submits when the consumer does not preventDefault', () => {
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).toHaveBeenCalledWith('hello');
+    });
+  });
+
   // Controlled-value sync used to overwrite `textContent` on every
   // distinct render, which (a) collapsed the caret to offset 0
   // (visible after a slash-command pick like

package/src/Chat/ChatComposerInput.tsx

@@ -11,8 +11,10 @@
  *
  * ContentEditable-based rich input for the chat composer.
  * Supports trigger menus (@ mentions, / commands) via SearchSource,
- * inline token rendering, serialization, Enter/Shift+Enter, message
- * history, paste/drop file handling, and mobile-safe touch typography.
+ * inline token rendering, serialization, Enter-to-submit with
+ * IME-composition guarding and an onKeyDown seam for platform-specific
+ * key handling, message history, paste/drop file handling, and
+ * mobile-safe touch typography.
  *
  *
  * SYNC: When modified, update:
@@ -188,6 +190,21 @@ export interface ChatComposerInputProps extends Omit<
   onFiles?: (files: File[]) => void;
   /** Submit handler (Enter without Shift) */
   onSubmit?: (value: string) => void;
+  /**
+   * Key-down handler invoked before the built-in Enter/history behavior
+   * (but after an open trigger menu consumes the event).
+   *
+   * This is the seam for platform- or app-specific key handling:
+   * - Call `event.preventDefault()` to suppress the default submit (e.g.
+   *   let Enter insert a newline on a touch keyboard).
+   * - Add behavior by acting on the event yourself (e.g. submit on
+   *   Cmd/Ctrl+Enter) without calling `preventDefault()`, so the default
+   *   handling still runs for other keys.
+   *
+   * IME composition is always respected regardless of this handler: Enter
+   * never submits while a composition is in progress.
+   */
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
 }
 
 // =============================================================================
@@ -221,8 +238,8 @@ const styles = stylex.create({
   placeholder: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     pointerEvents: 'none',
     color: colorVars['--color-text-secondary'],
     fontSize: {
@@ -299,6 +316,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     pasteAsToken: pasteAsTokenProp,
     onFiles,
     onSubmit = composerCtx?.onSubmit,
+    onKeyDown: onKeyDownProp,
     xstyle,
     className,
     style,
@@ -366,6 +384,20 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
   selfRef.current = handle;
   useImperativeHandle(handleRef, () => handle);
 
+  // Register a focus control with the composer shell so body-click-to-focus
+  // works without the shell sniffing the input's DOM shape. Cleared on
+  // unmount so the shell falls back cleanly if the input goes away.
+  const inputControlRef = composerCtx?.inputControlRef;
+  useEffect(() => {
+    if (!inputControlRef) {
+      return;
+    }
+    inputControlRef.current = {focus: () => editableRef.current?.focus()};
+    return () => {
+      inputControlRef.current = null;
+    };
+  }, [inputControlRef]);
+
   useEffect(() => {
     if (controlledValue === undefined || !editableRef.current) {
       return;
@@ -477,6 +509,13 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         return;
       }
 
+      // Consumer passthrough — runs before built-in Enter/history handling.
+      // A consumer can preventDefault() to fully own the keystroke.
+      onKeyDownProp?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+
       // Handle Backspace near tokens — prevent browser from creating
       // stray <br> elements or moving the cursor unexpectedly.
       if (e.key === 'Backspace') {
@@ -519,6 +558,13 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
       }
 
       if (e.key === 'Enter' && !e.shiftKey) {
+        // Never submit mid-composition — an IME uses Enter to commit a
+        // candidate (e.g. Japanese/Chinese/Korean input), and browsers may
+        // also surface the legacy keyCode 229 for composing keystrokes.
+        if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) {
+          return;
+        }
+
         e.preventDefault();
         if (!editableRef.current) {
           return;
@@ -583,7 +629,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         }
       }
     },
-    [hasHistory, onSubmit, onChange, emitChange, triggerMenu],
+    [hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp],
   );
 
   const handlePaste = useCallback(

package/src/Chat/ChatContext.tsx

@@ -5,11 +5,14 @@
 /**
  * @file ChatContext.tsx
  * @input Uses React createContext
- * @output Exports ChatMessageContext for sharing sender/density between Chat components
- * @position Internal context; consumed by ChatMessage and ChatMessageBubble
+ * @output Exports Chat message/list/composer/layout contexts. The composer
+ *   context (value + input-control registration) is public composition API,
+ *   re-exported from Chat/index.ts for custom inputs.
+ * @position Shared contexts; consumed by ChatMessage, ChatComposer,
+ *   ChatComposerInput, ChatSendButton, and custom inputs.
  */
 
-import {createContext, use} from 'react';
+import {createContext, use, type RefObject} from 'react';
 
 export type ChatMessageSender = 'user' | 'assistant' | 'system';
 export type ChatDensity = 'compact' | 'balanced' | 'spacious';
@@ -19,8 +22,9 @@ export interface ChatMessageContextValue {
   density: ChatDensity;
 }
 
-export const ChatMessageContext =
-  createContext<ChatMessageContextValue | null>(null);
+export const ChatMessageContext = createContext<ChatMessageContextValue | null>(
+  null,
+);
 ChatMessageContext.displayName = 'ChatMessageContext';
 
 export function useChatMessageContext(): ChatMessageContextValue | null {
@@ -31,9 +35,7 @@ export interface ChatListContextValue {
   density: ChatDensity;
 }
 
-export const ChatListContext = createContext<ChatListContextValue | null>(
-  null,
-);
+export const ChatListContext = createContext<ChatListContextValue | null>(null);
 ChatListContext.displayName = 'ChatListContext';
 
 export function useChatListContext(): ChatListContextValue | null {
@@ -44,6 +46,21 @@ export function useChatListContext(): ChatListContextValue | null {
 // Composer context — shared state between ChatComposer and ChatComposerInput
 // =============================================================================
 
+/**
+ * Imperative surface the composer shell can invoke on its input slot.
+ *
+ * The input is one slot inside the composer body — it does not span the whole
+ * body — so shell-level interactions like "click empty space to focus the
+ * input" must flow shell → input. A custom input registers this control (via
+ * `ChatComposerContextValue.inputControlRef`) so the shell can drive it
+ * without knowing its DOM shape. Optional methods can be added over time;
+ * inputs implement only what they support.
+ */
+export interface ChatComposerInputControl {
+  /** Move keyboard focus into the input. */
+  focus: () => void;
+}
+
 export interface ChatComposerContextValue {
   value: string;
   onChange: (value: string) => void;
@@ -53,6 +70,15 @@ export interface ChatComposerContextValue {
   isStopShown: boolean;
   canSend: boolean;
   onStop?: () => void;
+  /**
+   * Mutable handle the input slot populates with its {@link
+   * ChatComposerInputControl}. The shell reads `.current` to drive the input
+   * (e.g. focus on body click). A custom input assigns
+   * `inputControlRef.current = { focus }` on mount and clears it on unmount.
+   * When unset, the shell falls back to focusing a `contenteditable`/`textarea`
+   * it finds in the body.
+   */
+  inputControlRef?: RefObject<ChatComposerInputControl | null>;
 }
 
 export const ChatComposerContext =
@@ -74,8 +100,9 @@ export interface ChatLayoutContextValue {
   contentRef: (el: HTMLElement | null) => void;
 }
 
-export const ChatLayoutContext =
-  createContext<ChatLayoutContextValue | null>(null);
+export const ChatLayoutContext = createContext<ChatLayoutContextValue | null>(
+  null,
+);
 ChatLayoutContext.displayName = 'ChatLayoutContext';
 
 export function useChatLayoutContext(): ChatLayoutContextValue | null {

package/src/Chat/ChatDictationButton.tsx

@@ -26,6 +26,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -66,7 +67,10 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-full'],
     transformOrigin: 'center',
     transitionProperty: 'transform, background-color',
-    transitionDuration: '0.06s',
+    transitionDuration: {
+      default: '0.06s',
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: 'ease-out',
   },
 });
@@ -107,13 +111,18 @@ export function ChatDictationButton({
   style,
   ...rest
 }: ChatDictationButtonProps) {
+  const t = useTranslator();
+
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
   }
 
   const {isListening, bands, volume: rawVolume} = dictation;
   const accessibleLabel =
-    label ?? (isListening ? 'Stop dictation' : 'Start dictation');
+    label ??
+    (isListening
+      ? t('@astryx.chatDictationButton.stopDictation')
+      : t('@astryx.chatDictationButton.startDictation'));
 
   // Boost each band for visibility — quiet speech (0-10%) maps to full visual range
   const boostedBands = bands.map(b => Math.min(Math.pow(b / 0.2, 0.5), 1));

package/src/Chat/ChatLayout.tsx

@@ -134,8 +134,8 @@ const styles = stylex.create({
   // --- Dock container ---
   dockContainer: {
     bottom: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     zIndex: 0,
     isolation: 'isolate',
     pointerEvents: 'none',
@@ -150,8 +150,8 @@ const styles = stylex.create({
   blurLayer: {
     position: 'absolute',
     bottom: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     pointerEvents: 'none',
     backdropFilter: 'blur(12px)',
     WebkitBackdropFilter: 'blur(12px)',
@@ -276,7 +276,9 @@ export function ChatLayout({
   const defaultScrollButton = (
     <ChatLayoutScrollButton
       isVisible={scroll.isScrolledUp || newMsgs.hasNewMessages}
-      label={newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined}
+      label={
+        newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined
+      }
       onClick={() => {
         newMsgs.dismiss();
         scroll.scrollToBottom();

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -69,7 +69,10 @@ const styles = stylex.create({
     height: '32px',
     transitionProperty: 'opacity, transform, max-width',
     transitionTimingFunction: easeVars['--ease-standard'],
-    transitionDuration: durationVars['--duration-fast-max'],
+    transitionDuration: {
+      default: durationVars['--duration-fast-max'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
   },
   hidden: {
     opacity: 0,
@@ -135,7 +138,9 @@ export function ChatLayoutScrollButton({
         )}>
         <Button
           label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
-          aria-label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
+          aria-label={
+            label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')
+          }
           icon={<Icon icon="chevronDown" size="md" />}
           variant="ghost"
           size="md"

package/src/Chat/ChatMessageMetadata.tsx

@@ -122,8 +122,7 @@ export function ChatMessageMetadata({
   const sender = msgContext?.sender ?? 'assistant';
 
   const statusConfig = status != null ? STATUS_CONFIG[status] : null;
-  const statusLabel =
-    statusConfig != null ? t(statusConfig.i18nKey) : '';
+  const statusLabel = statusConfig != null ? t(statusConfig.i18nKey) : '';
 
   const hasContent =
     timestamp != null || footer != null || statusConfig != null;

package/src/Chat/ChatSendButton.tsx

@@ -88,7 +88,10 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
     stopIcon,
     size = 'md',
     xstyle,
+    className,
+    style,
     ref,
+    ...rest
   } = props;
 
   const handleSend = onSend ?? (() => context?.onSubmit(''));
@@ -96,7 +99,11 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
   return (
     <Button
       ref={ref}
-      label={isStopShown ? t('@astryx.chatSendButton.stop') : t('@astryx.chatSendButton.send')}
+      label={
+        isStopShown
+          ? t('@astryx.chatSendButton.stop')
+          : t('@astryx.chatSendButton.send')
+      }
       variant={isStopShown ? 'secondary' : 'primary'}
       size={size}
       icon={
@@ -107,7 +114,10 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
       isIconOnly
       isDisabled={!isStopShown && isDisabled}
       onClick={isStopShown ? onStop : handleSend}
+      {...rest}
       {...themeProps('chat-send-button')}
+      className={className}
+      style={style}
       xstyle={[styles.root, xstyle]}
     />
   );

package/src/Chat/ChatToolCalls.test.tsx

@@ -133,6 +133,70 @@ describe('ChatToolCalls', () => {
     expect(panel).toHaveTextContent('file contents here');
   });
 
+  it('exposes the error message as text without requiring hover', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {
+            name: 'bash',
+            status: 'error',
+            errorMessage: 'Command exited with code 1',
+          },
+        ]}
+      />,
+    );
+    // The message must exist as real (screen-reader-visible) text content,
+    // not only inside a hover-only title attribute.
+    expect(screen.getByText(/Command exited with code 1/)).toBeInTheDocument();
+  });
+
+  it('includes the error message in the accessible name of an expandable error row', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {
+            name: 'bash',
+            status: 'error',
+            errorMessage: 'Command exited with code 1',
+            resultDetail: <div>stderr output</div>,
+          },
+        ]}
+      />,
+    );
+    expect(
+      screen.getByRole('button', {name: /Command exited with code 1/}),
+    ).toBeInTheDocument();
+  });
+
+  it('keeps the hover tooltip on the error status icon', () => {
+    const {container} = render(
+      <ChatToolCalls
+        calls={[
+          {
+            name: 'bash',
+            status: 'error',
+            errorMessage: 'Command exited with code 1',
+          },
+        ]}
+      />,
+    );
+    expect(
+      container.querySelector('[title="Command exited with code 1"]'),
+    ).not.toBeNull();
+  });
+
+  it('renders no error text for non-error calls', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {name: 'bash', status: 'complete', errorMessage: 'stale message'},
+        ]}
+      />,
+    );
+    expect(screen.queryByText(/stale message/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Error:/)).not.toBeInTheDocument();
+  });
+
   it('points the group header aria-controls at the content region', () => {
     render(
       <ChatToolCalls

package/src/Chat/ChatToolCalls.tsx

@@ -35,7 +35,9 @@ import {getKey, mergeProps} from '../utils';
 import {Badge} from '../Badge';
 import {Icon, type IconName} from '../Icon';
 import {Spinner} from '../Spinner';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -60,7 +62,11 @@ export interface ChatToolCallItem {
   deletions?: number;
   /** Additional info rendered after the label. Free-form ReactNode. */
   stats?: ReactNode;
-  /** Error message when status is 'error'. Shown in a tooltip on the status icon. */
+  /**
+   * Error message when status is 'error'. Rendered as visually hidden text in
+   * the row (so screen readers and keyboard users perceive it) and echoed in a
+   * hover tooltip on the status icon.
+   */
   errorMessage?: string;
   /** Unique key for React list rendering. Derived from stable metadata if omitted. */
   key?: string;
@@ -128,7 +134,10 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
-    transition: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
+    transition: {
+      default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
   },
   chevronExpanded: {
     transform: 'rotate(180deg)',
@@ -136,7 +145,10 @@ const styles = stylex.create({
   groupContent: {
     display: 'grid',
     gridTemplateRows: '0fr',
-    transition: `grid-template-rows ${durationVars['--duration-medium']} ${easeVars['--ease-standard']}`,
+    transition: {
+      default: `grid-template-rows ${durationVars['--duration-medium']} ${easeVars['--ease-standard']}`,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
   },
   groupContentExpanded: {
     gridTemplateRows: '1fr',
@@ -261,7 +273,10 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
-    transition: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
+    transition: {
+      default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     marginInlineStart: 'auto',
   },
   callDetailContent: {
@@ -349,6 +364,7 @@ function getToolCallKey(call: ChatToolCallItem): string {
 // =============================================================================
 
 function CallRow({call}: {call: ChatToolCallItem}) {
+  const t = useTranslator();
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
@@ -395,6 +411,17 @@ function CallRow({call}: {call: ChatToolCallItem}) {
             </span>
           </>
         )}
+        {status === 'error' && call.errorMessage != null && (
+          // The title attribute above is hover-only; expose the error detail
+          // as real text so it reaches screen readers, keyboard, and touch
+          // users. Rendering it inside the row also folds it into the
+          // accessible name of expandable (role="button") rows.
+          <VisuallyHidden>
+            {t('@astryx.chatToolCalls.error', {
+              message: call.errorMessage ?? '',
+            })}
+          </VisuallyHidden>
+        )}
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
       {call.node != null && (
@@ -477,6 +504,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
  * ```
  */
 export function ChatToolCalls(props: ChatToolCallsProps) {
+  const t = useTranslator();
   const {
     calls,
     label: _customLabel,
@@ -559,7 +587,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
               <Icon icon="wrench" size="sm" color="inherit" />
             </span>
             <span {...stylex.props(styles.groupLabel)}>
-              {calls.length} tool calls
+              {t('@astryx.chatToolCalls.groupLabel', {count: calls.length})}
             </span>
           </>
         ) : (

package/src/Chat/index.ts

@@ -81,7 +81,11 @@ export type {
   TokenPortal,
 } from './useChatComposerTokens';
 export type {ChatMessageSender, ChatDensity} from './ChatContext';
-export {useChatLayoutContext} from './ChatContext';
+export {useChatLayoutContext, useChatComposerContext} from './ChatContext';
+export type {
+  ChatComposerContextValue,
+  ChatComposerInputControl,
+} from './ChatContext';
 
 export {ChatToolCalls} from './ChatToolCalls';
 export type {