@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/src/ButtonGroup/ButtonGroup.tsx

@@ -8,9 +8,10 @@
  * @output Exports ButtonGroup component, context, and types
  * @position Groups buttons with connected styling; consumed by index.ts
  *
- * Children (Button, IconButton) consume the ButtonGroup context to
- * apply position-aware styles using CSS :first-child / :last-child
- * pseudo-classes — no cloneElement or wrapper divs needed.
+ * Children (Button, IconButton) consume the ButtonGroup context to apply
+ * position-aware styles in pure CSS — no cloneElement or wrapper divs needed.
+ * The end-cap radius rules live in Button.tsx; see IS_LAST_ITEM there for why
+ * the trailing edge cannot use :last-child (#2508).
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ButtonGroup/ButtonGroup.doc.mjs (props table, features)
@@ -25,7 +26,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {ButtonSize} from '../Button';
 import {SizeProvider, useSize} from '../SizeContext/SizeContext';
 import {useListFocus} from '../hooks/useListFocus';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {ButtonGroupContext} from './ButtonGroupContext';
 import type {ButtonGroupOrientation} from './ButtonGroupContext';
@@ -97,7 +98,10 @@ const styles = stylex.create({
  * handling (only on outer edges), and horizontal or vertical orientation.
  *
  * Children automatically detect the group via context and apply position-aware
- * styles using CSS :first-child / :last-child pseudo-classes.
+ * styles in pure CSS.
+ *
+ * Members that render their own layer — a Button with a `tooltip`, or a
+ * DropdownMenu — compose correctly, including as the trailing member.
  *
  * @example
  * ```
@@ -107,6 +111,17 @@ const styles = stylex.create({
  *   <Button label="Paste" />
  * </ButtonGroup>
  * ```
+ *
+ * @example
+ * ```
+ * <ButtonGroup label="Approve action">
+ *   <Button label="Allow once" variant="primary" />
+ *   <DropdownMenu
+ *     button={{label: 'Allow options', variant: 'primary', isIconOnly: true, icon: <Icon icon="chevronDown" />}}
+ *     items={[{label: 'Allow for 30 minutes'}, {label: 'Always allow'}]}
+ *   />
+ * </ButtonGroup>
+ * ```
  */
 export function ButtonGroup({
   children,
@@ -119,6 +134,7 @@ export function ButtonGroup({
   style,
   ref,
   'data-testid': testId,
+  onKeyDown,
   ...props
 }: ButtonGroupProps): ReactNode {
   const size = useSize(sizeProp, 'md');
@@ -138,11 +154,7 @@ export function ButtonGroup({
       <SizeProvider value={size}>
         <div
           ref={mergeRefs(ref, listRef)}
-          role="group"
-          aria-label={label}
-          onKeyDown={handleKeyDown}
-          aria-disabled={isDisabled || undefined}
-          data-testid={testId}
+          {...props}
           {...mergeProps(
             themeProps('button-group', {size, orientation}),
             stylex.props(
@@ -153,7 +165,11 @@ export function ButtonGroup({
             className,
             style,
           )}
-          {...props}>
+          role="group"
+          aria-label={label}
+          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
+          aria-disabled={isDisabled || undefined}
+          data-testid={testId}>
           {children}
         </div>
       </SizeProvider>

package/src/Calendar/Calendar.tsx

@@ -56,7 +56,7 @@ import {
   DATE_FORMAT_WITH_WEEKDAY,
   DATE_FORMAT_MONTH_YEAR,
 } from '../utils/plainDate';
-import {mergeProps} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
 import {
   computeDayCellState,
   computeRangeRounding,
@@ -84,6 +84,7 @@ import type {
 } from '../utils/dateTypes';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /** Imperative handle for Calendar handleRef */
 
@@ -197,6 +198,7 @@ export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
  * ```
  */
 export function Calendar({ref, ...props}: CalendarProps) {
+  const t = useTranslator();
   const {
     handleRef,
     mode = 'single',
@@ -216,6 +218,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     xstyle,
     className,
     style,
+    onKeyDown,
     ...rest
   } = props;
 
@@ -418,18 +421,18 @@ export function Calendar({ref, ...props}: CalendarProps) {
   return (
     <div
       ref={ref}
+      {...rest}
       {...mergeProps(
         themeProps('calendar', {mode}),
         stylex.props(calendarStyles.calendar, xstyle),
         className,
         style,
       )}
-      onKeyDown={handleCalendarKeyDown}
-      {...rest}>
+      onKeyDown={composeEventHandlers(onKeyDown, handleCalendarKeyDown)}>
       {/* Header with navigation */}
       <div {...stylex.props(calendarStyles.header)}>
         <Button
-          label="Previous month"
+          label={t('@astryx.calendar.previousMonth')}
           variant="ghost"
           icon={
             // Wrapper span (not Icon props): Icon's string mode clobbers
@@ -449,7 +452,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
         </span>
 
         <Button
-          label="Next month"
+          label={t('@astryx.calendar.nextMonth')}
           variant="ghost"
           icon={
             <span {...stylex.props(calendarStyles.navIcon)}>

package/src/Card/Card.doc.mjs

@@ -62,9 +62,9 @@ export const docs = {
     },
     {
       name: 'variant',
-      type: "'default' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'",
+      type: "'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'",
       description:
-        'Background color variant. `default` uses the standard card background. `muted` uses the muted background for de-emphasised cards. The non-semantic variants use the corresponding `--color-<name>-background` token.',
+        'Background color variant. `default` uses the standard card background. `transparent` drops the background entirely. `muted` uses the muted background for de-emphasised cards. The non-semantic variants use the corresponding `--color-background-<name>` token.',
       default: "'default'",
     },
   ],
@@ -169,6 +169,6 @@ export const docsDense = {
     minHeight: 'min card height',
     children: 'content inside card',
     padding: 'internal padding via spacing scale',
-    variant: 'background color variant; `default` = standard card bg, `muted` = muted bg for de-emphasised cards; non-semantic variants use the corresponding `--color-<name>-background` token',
+    variant: 'background color variant; `default` = standard card bg, `transparent` = no background at all, `muted` = muted bg for de-emphasised cards; non-semantic variants use the corresponding `--color-background-<name>` token',
   },
 };

package/src/Carousel/Carousel.tsx

@@ -34,6 +34,7 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps, mergeRefs} from '../utils';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface CarouselProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -256,13 +257,15 @@ export function Carousel({
   hasEdgeFade = true,
   hasSnap = false,
   padding,
-  'aria-label': ariaLabel = 'Carousel',
+  'aria-label': ariaLabelFromProps,
   xstyle,
   className,
   style,
   'data-testid': testId,
   ...htmlProps
 }: CarouselProps) {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.carousel.label');
   const scrollElRef = useRef<HTMLElement | null>(null);
   const {scrollRef, overflowStart, overflowEnd} = useScrollOverflow();
 
@@ -330,16 +333,16 @@ export function Carousel({
     <div
       ref={mergeRefs(ref, layer.ref as React.Ref<HTMLDivElement>)}
       data-testid={testId}
-      role="region"
-      aria-label={ariaLabel}
-      aria-roledescription="carousel"
+      {...htmlProps}
       {...mergeProps(
         themeProps('carousel'),
         stylex.props(styles.root, xstyle),
         className,
         style,
       )}
-      {...htmlProps}>
+      role="region"
+      aria-label={ariaLabel}
+      aria-roledescription="carousel">
       <div
         ref={composedRef}
         tabIndex={0}
@@ -366,7 +369,7 @@ export function Carousel({
               )}>
               <Button
                 icon={<Icon icon="chevronLeft" size="xsm" />}
-                label="Scroll left"
+                label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
                 size="sm"
                 isIconOnly
@@ -387,7 +390,7 @@ export function Carousel({
               )}>
               <Button
                 icon={<Icon icon="chevronRight" size="xsm" />}
-                label="Scroll right"
+                label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"
                 size="sm"
                 isIconOnly

package/src/Chat/ChatComposer.tsx

@@ -49,6 +49,7 @@ import {ChatComposerInput} from './ChatComposerInput';
 import {ChatComposerContext} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -268,6 +269,7 @@ const styles = stylex.create({
  * ```
  */
 export function ChatComposer(props: ChatComposerProps) {
+  const t = useTranslator();
   const {
     ref,
     onSubmit,
@@ -275,7 +277,7 @@ export function ChatComposer(props: ChatComposerProps) {
     isStopShown = false,
     value: controlledValue,
     onChange,
-    placeholder = 'Type a message\u2026',
+    placeholder: placeholderFromProps,
     isDisabled = false,
     density = 'balanced',
     drawer,
@@ -292,6 +294,8 @@ export function ChatComposer(props: ChatComposerProps) {
     style,
     ...rest
   } = props;
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.chat.composer.placeholder');
 
   const [internalValue, setInternalValue] = useState('');
 

package/src/Chat/ChatComposerDrawer.tsx

@@ -30,6 +30,7 @@ import {Badge} from '../Badge';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -220,7 +221,7 @@ export function ChatComposerDrawer({
   ref,
   children,
   count,
-  label = 'Items',
+  label: labelFromProps,
   isCollapsed: controlledCollapsed,
   defaultIsCollapsed = false,
   onCollapsedChange,
@@ -230,6 +231,8 @@ export function ChatComposerDrawer({
   'data-testid': testId,
   ...htmlProps
 }: ChatComposerDrawerProps): React.ReactElement {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.chat.composerDrawer.label');
   const [internalCollapsed, setInternalCollapsed] =
     useState(defaultIsCollapsed);
   const isControlled = controlledCollapsed !== undefined;
@@ -268,7 +271,11 @@ export function ChatComposerDrawer({
           role="button"
           tabIndex={0}
           aria-expanded={!isCollapsed}
-          aria-label={isCollapsed ? `Expand ${label}` : `Collapse ${label}`}
+          aria-label={
+            isCollapsed
+              ? t('@astryx.chatComposerDrawer.expand', {label})
+              : t('@astryx.chatComposerDrawer.collapse', {label})
+          }
           onClick={toggle}
           onKeyDown={e => {
             if (e.key === 'Enter' || e.key === ' ') {

package/src/Chat/ChatComposerInput.tsx

@@ -53,6 +53,7 @@ import {
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -96,8 +97,7 @@ export type ChatComposerTokenCustom = {
  *   Use for tooltips, hovercards, or any content beyond a badge.
  */
 export type ChatComposerToken =
-  | ChatComposerTokenBadge
-  | ChatComposerTokenCustom;
+  ChatComposerTokenBadge | ChatComposerTokenCustom;
 
 export type ChatComposerTriggerItem = SearchableItem;
 
@@ -279,6 +279,7 @@ function serialize(node: Node): string {
 // =============================================================================
 
 export function ChatComposerInput(props: ChatComposerInputProps) {
+  const t = useTranslator();
   const composerCtx = useChatComposerContext();
   const hasControlledValueProp = props.value !== undefined;
 
@@ -287,12 +288,12 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     handleRef,
     value: controlledValue = composerCtx?.value,
     onChange: onChangeProp,
-    placeholder = composerCtx?.placeholder ?? 'Type a message\u2026',
+    placeholder: placeholderFromProps,
     maxRows = 8,
     triggers,
     debounceMs = 150,
     hasHistory = true,
-    label = 'Message input',
+    label: labelFromProps,
     isDisabled = composerCtx?.isDisabled ?? false,
     onPaste: onPasteProp,
     pasteAsToken: pasteAsTokenProp,
@@ -303,6 +304,11 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     style,
     ...rest
   } = props;
+  const label = labelFromProps ?? t('@astryx.chat.composerInput.label');
+  const placeholder =
+    placeholderFromProps ??
+    composerCtx?.placeholder ??
+    t('@astryx.chat.composer.placeholder');
 
   const composerOnChange = composerCtx?.onChange;
   const onChange = useCallback(

package/src/Chat/ChatLayout.tsx

@@ -32,6 +32,7 @@ import {useChatNewMessages} from './useChatNewMessages';
 import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
 import {ChatLayoutContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -39,17 +40,6 @@ import {themeProps} from '../utils/themeProps';
 
 type Density = 'compact' | 'balanced' | 'spacious';
 
-/** Imperative handle for ChatLayout scroll controls. */
-export interface ChatLayoutHandle {
-  /** Scroll a message to the top and unlock for stream-in. */
-  /** Scroll to bottom and re-lock. */
-  scrollToBottom: () => void;
-  /** Navigate to a message, no lock change. */
-  scrollToMessage: (el: HTMLElement) => void;
-  /** Scroll to the last message. */
-  scrollToLastMessage: () => void;
-}
-
 export interface ChatLayoutProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element. */
   ref?: React.Ref<HTMLDivElement>;
@@ -268,7 +258,9 @@ export function ChatLayout({
   style,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatLayoutProps) {
+  const t = useTranslator();
   const rootRef = useRef<HTMLDivElement>(null);
 
   const scrollContainerRef = externalScrollRef ?? rootRef;
@@ -284,7 +276,7 @@ export function ChatLayout({
   const defaultScrollButton = (
     <ChatLayoutScrollButton
       isVisible={scroll.isScrolledUp || newMsgs.hasNewMessages}
-      label={newMsgs.hasNewMessages ? 'New messages' : undefined}
+      label={newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined}
       onClick={() => {
         newMsgs.dismiss();
         scroll.scrollToBottom();
@@ -327,6 +319,7 @@ export function ChatLayout({
   return (
     <ChatLayoutContext value={layoutContext}>
       <div
+        {...rest}
         ref={mergeRefs(ref, rootRef)}
         data-testid={testId}
         {...mergeProps(

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -30,6 +30,7 @@ import {Icon} from '../Icon';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -120,6 +121,7 @@ export function ChatLayoutScrollButton({
   style,
   ...rest
 }: ChatLayoutScrollButtonProps) {
+  const t = useTranslator();
   return (
     <div
       ref={ref}
@@ -132,8 +134,8 @@ export function ChatLayoutScrollButton({
           label ? styles.expanded : styles.collapsed,
         )}>
         <Button
-          label={label ?? 'Scroll to bottom'}
-          aria-label={label ?? 'Scroll to bottom'}
+          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/ChatMessage.tsx

@@ -36,6 +36,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface ChatMessageProps extends BaseProps<HTMLElement> {
   ref?: React.Ref<HTMLElement>;
@@ -167,7 +168,9 @@ export function ChatMessage({
   style: styleProp,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageProps) {
+  const t = useTranslator();
   const listContext = useChatListContext();
   const density = densityProp ?? listContext?.density ?? 'balanced';
 
@@ -216,9 +219,10 @@ export function ChatMessage({
   return (
     <ChatMessageContext value={contextValue}>
       <article
+        {...rest}
         ref={ref}
         data-testid={testId}
-        aria-label={!hasName ? `Message from ${sender}` : undefined}
+        aria-label={!hasName ? t('@astryx.chatMessage.messageFrom', {sender}) : undefined}
         aria-labelledby={hasName ? nameId : undefined}
         {...mergeProps(
           themeProps('chat-message', {sender, density}),

package/src/Chat/ChatMessageBubble.tsx

@@ -216,6 +216,7 @@ export function ChatMessageBubble({
   style: styleProp,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageBubbleProps) {
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
@@ -274,6 +275,7 @@ export function ChatMessageBubble({
         </div>
       )}
       <div
+        {...rest}
         ref={ref}
         data-testid={testId}
         {...mergeProps(

package/src/Chat/ChatMessageList.doc.mjs

@@ -42,7 +42,7 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Gap between top-level message rows. Defaults to the selected density; override for LLM event streams or independent rows that need different spacing from density.',
     },
     {

package/src/Chat/ChatMessageList.tsx

@@ -210,6 +210,7 @@ export function ChatMessageList({
   style,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageListProps) {
   const layoutContext = useChatLayoutContext();
   const sentinelRef = useRef<HTMLDivElement>(null);
@@ -264,6 +265,7 @@ export function ChatMessageList({
   return (
     <ChatListContext value={contextValue}>
       <div
+        {...rest}
         ref={ref}
         role="log"
         aria-live="polite"

package/src/Chat/ChatMessageMetadata.tsx

@@ -26,19 +26,20 @@ import type {IconName} from '../Icon/globalIconRegistry';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type ChatMessageStatus =
   'sending' | 'sent' | 'delivered' | 'read' | 'error';
 
 const STATUS_CONFIG: Record<
   ChatMessageStatus,
-  {icon: IconName; label: string}
+  {icon: IconName; i18nKey: string}
 > = {
-  sending: {icon: 'clock', label: 'Sending'},
-  sent: {icon: 'check', label: 'Sent'},
-  delivered: {icon: 'checkDouble', label: 'Delivered'},
-  read: {icon: 'checkDouble', label: 'Read'},
-  error: {icon: 'error', label: 'Failed'},
+  sending: {icon: 'clock', i18nKey: '@astryx.chat.status.sending'},
+  sent: {icon: 'check', i18nKey: '@astryx.chat.status.sent'},
+  delivered: {icon: 'checkDouble', i18nKey: '@astryx.chat.status.delivered'},
+  read: {icon: 'checkDouble', i18nKey: '@astryx.chat.status.read'},
+  error: {icon: 'error', i18nKey: '@astryx.chat.status.failed'},
 };
 
 const pulseKeyframes = stylex.keyframes({
@@ -116,10 +117,13 @@ export function ChatMessageMetadata({
   style,
   ...rest
 }: ChatMessageMetadataProps) {
+  const t = useTranslator();
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
 
   const statusConfig = status != null ? STATUS_CONFIG[status] : null;
+  const statusLabel =
+    statusConfig != null ? t(statusConfig.i18nKey) : '';
 
   const hasContent =
     timestamp != null || footer != null || statusConfig != null;
@@ -149,15 +153,17 @@ export function ChatMessageMetadata({
       {footer != null && statusConfig != null && <span>·</span>}
       {statusConfig != null && (
         <span
-          title={statusConfig.label}
-          aria-label={'Message ' + statusConfig.label.toLowerCase()}
+          title={statusLabel}
+          aria-label={t('@astryx.chat.messageAriaLabel', {
+            status: statusLabel.toLowerCase(),
+          })}
           {...stylex.props(
             styles.statusRow,
             status === 'error' && styles.statusError,
             status === 'sending' && styles.statusPulse,
           )}>
           <Icon icon={statusConfig.icon} size="xsm" color="inherit" />
-          <span>{statusConfig.label}</span>
+          <span>{statusLabel}</span>
         </span>
       )}
     </div>

package/src/Chat/ChatPastedTextToken.tsx

@@ -25,6 +25,7 @@ import {
 import {Badge} from '../Badge';
 import {Button} from '../Button';
 import {HoverCard} from '../HoverCard';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -88,6 +89,7 @@ export function ChatPastedTextToken({
   text,
   onExpand,
 }: ChatPastedTextTokenProps) {
+  const t = useTranslator();
   const label = formatLabel(text);
 
   const cardContent = (
@@ -97,7 +99,7 @@ export function ChatPastedTextToken({
         <span {...stylex.props(styles.meta)}>{label}</span>
         {onExpand && (
           <Button
-            label="Expand"
+            label={t('@astryx.chat.pastedText.expand')}
             variant="ghost"
             size="sm"
             onClick={onExpand}

package/src/Chat/ChatSendButton.tsx

@@ -25,6 +25,7 @@ import {useChatComposerContext} from './ChatContext';
 
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -75,6 +76,7 @@ const styles = stylex.create({
  * ```
  */
 export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
+  const t = useTranslator();
   const context = useChatComposerContext();
 
   const {
@@ -94,7 +96,7 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
   return (
     <Button
       ref={ref}
-      label={isStopShown ? 'Stop' : 'Send'}
+      label={isStopShown ? t('@astryx.chatSendButton.stop') : t('@astryx.chatSendButton.send')}
       variant={isStopShown ? 'secondary' : 'primary'}
       size={size}
       icon={

package/src/Chat/ChatToolCalls.doc.mjs

@@ -38,7 +38,7 @@ export const docs = {
       name: 'calls',
       type: 'ChatToolCallItem[]',
       description:
-        'Array of tool call data. Each item has name, status, target, duration, node, additions, deletions, stats, errorMessage, resultDetail, key, and data.',
+        "Array of tool call data. Each item has name, status, target, duration, node, additions, deletions, stats, errorMessage, resultDetail, key, and data. status is one of 'pending', 'running', 'complete', or 'error' (defaults to 'complete').",
       required: true,
     },
     {

package/src/Chat/useSpeechRecognition.ts

@@ -14,6 +14,7 @@
  */
 
 import {useState, useCallback, useEffect, useMemo, useRef} from 'react';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -258,6 +259,7 @@ export function getDefaultAudioContext(): AudioContext {
 export function useSpeechRecognition(
   options: UseSpeechRecognitionOptions = {},
 ): UseSpeechRecognitionReturn {
+  const t = useTranslator();
   const {
     lang,
     continuous = true,
@@ -408,13 +410,20 @@ export function useSpeechRecognition(
     recognition.onnomatch = () => {
       callbacksRef.current.onError?.({
         error: 'no-speech',
-        message: 'No speech was detected.',
+        message: t('@astryx.chat.speechRecognition.noSpeechDetected'),
       });
     };
 
     recognitionRef.current = recognition;
     recognition.start();
-  }, [lang, continuous, interimResults, startVolumePolling, stopVolumePolling]);
+  }, [
+    lang,
+    continuous,
+    interimResults,
+    startVolumePolling,
+    stopVolumePolling,
+    t,
+  ]);
 
   const stop = useCallback(() => {
     recognitionRef.current?.stop();