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

package/dist/Carousel/Carousel.js

@@ -9,14 +9,17 @@
  * @position Horizontal scroll container with fade-edge overflow indication,
  *   optional prev/next buttons on the top layer, scroll-snap, a 1px
  *   visual bleed allowance for child selection indicators, and Shift + wheel
- *   mapping so mouse users can scroll horizontally.
+ *   mapping so mouse users can scroll horizontally. Exposes APG
+ *   carousel semantics: the root is a labelled region with
+ *   aria-roledescription="carousel" and each item wrapper is a group with
+ *   aria-roledescription="slide" named "Slide N of M".
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)
  * - /apps/storybook/stories/Carousel.stories.tsx
  * - /packages/cli/templates/blocks/components/Carousel/ (showcase blocks)
  */
-import { useRef, useCallback, useEffect, Children } from 'react';
+import { useRef, useCallback, useEffect, Children, isValidElement } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars, colorVars, shadowVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -24,7 +27,8 @@ import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useLayer } from "../Layer/index.js";
 import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { isRtlElement } from "../hooks/isRtlElement.js";
+import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -220,6 +224,11 @@ export function Carousel({
     overflowStart,
     overflowEnd
   } = useScrollOverflow();
+
+  // Children.toArray drops null/undefined/boolean children and assigns
+  // stable keys, so slide numbering ("Slide N of M") matches what actually
+  // renders even when some children are conditionally omitted.
+  const slides = Children.toArray(children);
   const layer = useLayer({
     mode: 'context',
     lightDismiss: false
@@ -276,7 +285,10 @@ export function Carousel({
     // for users who opted out of motion.
     const prefersReducedMotion = typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     el.scrollBy({
-      left: direction * Math.max(amount, itemWidth),
+      // `direction` is the logical intent (-1 = toward content start, +1 =
+      // toward content end). Under RTL the scroll axis is inverted (start is
+      // scrollLeft 0, the end is negative), so flip the physical delta sign.
+      left: (isRtlElement(el) ? -1 : 1) * direction * Math.max(amount, itemWidth),
       behavior: prefersReducedMotion ? 'auto' : 'smooth'
     });
   }, []);
@@ -302,26 +314,41 @@ export function Carousel({
       tabIndex: 0,
       onWheel: handleWheel,
       ...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
-      children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
+      children: slides.map((child, index) =>
+      /*#__PURE__*/
+      // APG carousel pattern: each slide container is a group with
+      // aria-roledescription="slide" and an "N of M" accessible name so
+      // ATs announce slide boundaries and position instead of anonymous
+      // generics.
+      _jsx("div", {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": t('@astryx.carousel.slideLabel', {
+          current: index + 1,
+          total: slides.length
+        }),
         ...{
           className: "x1bhewko x78zum5 x2lah0s"
         },
         children: child
-      }))
+      }, /*#__PURE__*/isValidElement(child) ? child.key : index))
     }), hasButtons && layer.render(/*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         ...{
           0: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xuuh30"
+            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xuuh30 x1nyx83j"
           },
           1: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xuuh30 xg01cxk x47corl"
+            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xuuh30 x1nyx83j xg01cxk x47corl"
           }
         }[!!!overflowStart << 0],
         children: /*#__PURE__*/_jsx(Button, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "chevronLeft",
-            size: "xsm"
+          icon: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(rtlStyles.mirror),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "chevronLeft",
+              size: "xsm"
+            })
           }),
           label: t('@astryx.carousel.scrollLeft'),
           variant: "ghost",
@@ -339,16 +366,19 @@ export function Carousel({
       }), /*#__PURE__*/_jsx("div", {
         ...{
           0: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xitnhlw"
+            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xitnhlw x36dvrd"
           },
           1: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xitnhlw xg01cxk x47corl"
+            className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xitnhlw x36dvrd xg01cxk x47corl"
           }
         }[!!!overflowEnd << 0],
         children: /*#__PURE__*/_jsx(Button, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "chevronRight",
-            size: "xsm"
+          icon: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(rtlStyles.mirror),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "chevronRight",
+              size: "xsm"
+            })
           }),
           label: t('@astryx.carousel.scrollRight'),
           variant: "ghost",

package/dist/Chat/ChatComposer.d.ts

@@ -43,6 +43,14 @@ export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
     isDisabled?: boolean;
     /** Density variant */
     density?: ChatComposerDensity;
+    /**
+     * Resting elevation of the composer body. `low` (the default) keeps today's
+     * raised look — low at rest, bumping to med on hover / focus. `none` flattens
+     * it and draws a border with the same rest / hover / focus treatment as a
+     * text input (emphasized border → accent on focus, with matching inset rings).
+     * @default 'low'
+     */
+    elevation?: 'none' | 'low';
     /** Collapsible drawer rendered above the input — attachments, context chips, etc. Use ChatComposerDrawer. */
     drawer?: ReactNode;
     /** Actions rendered on the left side of the header (e.g. attach, mention buttons). Use icon-only `size="sm"` buttons. */

package/dist/Chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAI9B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AAwJD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiKpD;yBAjKe,YAAY"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AA8LD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiLpD;yBAjLe,YAAY"}

package/dist/Chat/ChatComposer.js

@@ -25,7 +25,7 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, borderVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { Icon } from "../Icon/index.js";
 import { ChatComposerInput } from "./ChatComposerInput.js";
@@ -53,18 +53,42 @@ const styles = {
     kaIpWk: "x1xunbrq",
     kWkggS: "x1prclbq",
     kkrTdU: "x1ed109x",
-    kGVxlE: "x1i5ehqx xhouywz",
-    kmkexE: "xiw5bxp",
-    knuKkz: "xyavpck",
+    kmkexE: "xrg7dcy",
     $$css: true
   },
   compact: {
-    kmVPX3: "xlsj2fj",
+    "--_chat-composer-padding": "x18zce08",
     kOIVth: "xzye2dw",
     $$css: true
   }
 };
 
+// Resting elevation for the composer body, narrowed to two steps.
+// - `low` (default) preserves today's look: low at rest, bumping to med on
+//   hover / focus-within (a CSS-only interaction state the component owns).
+// - `none` is flat; depth comes from a border + inset rings instead. The
+//   border is drawn *inside* the padding — its width is subtracted from every
+//   side (like Card) so total inset (border + padding) equals the elevated
+//   case and content geometry is unchanged. Border color, hover, and focus
+//   states mirror TextInput (shared `inputWrapperStyles.base` treatment):
+//   emphasized border at rest → accent on focus-within, with the same inset
+//   shadow rings on hover and focus.
+const elevationStyles = {
+  low: {
+    kGVxlE: "x1i5ehqx xhouywz",
+    knuKkz: "xyavpck",
+    $$css: true
+  },
+  none: {
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "xvy26l8 x6q1khz",
+    kmVPX3: "x1b50gpf",
+    kGVxlE: "x1gnnqk1 x12y27fx xuihb5h",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -93,6 +117,7 @@ export function ChatComposer(props) {
     placeholder: placeholderFromProps,
     isDisabled = false,
     density = 'balanced',
+    elevation = 'low',
     drawer,
     headerActions,
     headerContext,
@@ -127,6 +152,11 @@ export function ChatComposer(props) {
   }, [currentValue, isDisabled, onSubmit, updateValue]);
   const canSend = currentValue.trim().length > 0 && !isDisabled;
   const bodyRef = useRef(null);
+
+  // Input slot registers its focus (and future) control here so the shell can
+  // drive it without knowing its DOM shape. Stable ref — safe in the memoized
+  // context value.
+  const inputControlRef = useRef(null);
   const handleBodyClick = useCallback(e => {
     // Focus the input when clicking empty space in the body.
     // Skip if the click target is a button, link, or interactive element.
@@ -134,6 +164,14 @@ export function ChatComposer(props) {
     if (target.closest('button, a, [role="button"], [contenteditable="true"], [data-astryx-token]')) {
       return;
     }
+    // Prefer the input's registered control (works for any input shape,
+    // including editors whose focusable node isn't a bare
+    // contenteditable/textarea). Fall back to a DOM query so uninstrumented
+    // custom inputs still get click-to-focus.
+    if (inputControlRef.current) {
+      inputControlRef.current.focus();
+      return;
+    }
     const editable = bodyRef.current?.querySelector('[contenteditable="true"], textarea');
     editable?.focus();
   }, []);
@@ -179,7 +217,8 @@ export function ChatComposer(props) {
     isDisabled,
     isStopShown,
     canSend,
-    onStop
+    onStop,
+    inputControlRef
   }), [currentValue, updateValue, handleSubmit, placeholder, isDisabled, isStopShown, canSend, onStop]);
   return /*#__PURE__*/_jsx(ChatComposerContext, {
     value: composerContext,
@@ -199,7 +238,7 @@ export function ChatComposer(props) {
       children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
         ref: bodyRef,
         onClick: handleBodyClick,
-        ...stylex.props(styles.body, density === 'compact' && styles.compact, xstyle),
+        ...stylex.props(styles.body, elevationStyles[elevation], density === 'compact' && styles.compact, xstyle),
         children: [(headerActions || headerContext) && /*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj xe0p6wg"

package/dist/Chat/ChatComposerDrawer.d.ts

@@ -5,6 +5,8 @@
  * @position Collapsible drawer panel for ChatComposer.
  *   Supports expanded (full content) and collapsed (count + label) states
  *   with fade animation and grid-template-rows height transition.
+ *   The collapse toggle exposes aria-expanded + aria-controls linking it to
+ *   the content region (disclosure pattern).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)

package/dist/Chat/ChatComposerDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposerDrawer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerDrawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnD;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgID;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,mBAAmB,EAChC,kBAA0B,EAC1B,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAqF9C;yBAlGe,kBAAkB"}
+{"version":3,"file":"ChatComposerDrawer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerDrawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnD;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgID;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,mBAAmB,EAChC,kBAA0B,EAC1B,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CA6F9C;yBA1Ge,kBAAkB"}

package/dist/Chat/ChatComposerDrawer.js

@@ -9,12 +9,14 @@
  * @position Collapsible drawer panel for ChatComposer.
  *   Supports expanded (full content) and collapsed (count + label) states
  *   with fade animation and grid-template-rows height transition.
+ *   The collapse toggle exposes aria-expanded + aria-controls linking it to
+ *   the content region (disclosure pattern).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /packages/cli/templates/blocks/components/ChatComposerDrawer/ (block examples)
  */
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -74,6 +76,12 @@ export function ChatComposerDrawer({
   const isControlled = controlledCollapsed !== undefined;
   const isCollapsed = isControlled ? controlledCollapsed : internalCollapsed;
   const canCollapse = count != null;
+
+  // Links the toggle to the region it shows/hides so assistive tech can move
+  // from the button to its controlled content (disclosure pattern). The
+  // content stays mounted while collapsed (hidden via the grid-row collapse),
+  // so the reference always resolves.
+  const contentId = useId();
   const toggle = () => {
     const next = !isCollapsed;
     if (!isControlled) {
@@ -100,6 +108,7 @@ export function ChatComposerDrawer({
       role: "button",
       tabIndex: 0,
       "aria-expanded": !isCollapsed,
+      "aria-controls": contentId,
       "aria-label": isCollapsed ? t('@astryx.chatComposerDrawer.expand', {
         label
       }) : t('@astryx.chatComposerDrawer.collapse', {
@@ -141,6 +150,7 @@ export function ChatComposerDrawer({
         }[!!isCollapsed << 0]
       })]
     }), /*#__PURE__*/_jsx("div", {
+      id: contentId,
       ...{
         0: {
           className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"

package/dist/Chat/ChatComposerInput.d.ts

@@ -7,8 +7,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:
@@ -16,7 +18,7 @@
  * - /apps/storybook/stories/ChatComposer.stories.tsx
  * - /packages/cli/templates/blocks/components/ChatComposerInput/ (block examples)
  */
-import { type ReactNode, type ClipboardEvent } from 'react';
+import { type ReactNode, type KeyboardEvent, type ClipboardEvent } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { SearchableItem, SearchSource } from '../Typeahead/types';
 import { type UseChatPasteAsTokenReturn } from './useChatPasteAsToken';
@@ -137,6 +139,21 @@ export interface ChatComposerInputProps extends Omit<BaseProps<HTMLDivElement>,
     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;
 }
 export declare function ChatComposerInput(props: ChatComposerInputProps): import("react").JSX.Element;
 export declare namespace ChatComposerInput {

package/dist/Chat/ChatComposerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}

package/dist/Chat/ChatComposerInput.js

@@ -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:
@@ -133,6 +135,7 @@ export function ChatComposerInput(props) {
     pasteAsToken: pasteAsTokenProp,
     onFiles,
     onSubmit = composerCtx?.onSubmit,
+    onKeyDown: onKeyDownProp,
     xstyle,
     className,
     style,
@@ -188,6 +191,22 @@ export function ChatComposerInput(props) {
   };
   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;
@@ -289,6 +308,13 @@ export function ChatComposerInput(props) {
       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') {
@@ -322,6 +348,12 @@ export function ChatComposerInput(props) {
       }
     }
     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;
@@ -379,7 +411,7 @@ export function ChatComposerInput(props) {
         e.preventDefault();
       }
     }
-  }, [hasHistory, onSubmit, onChange, emitChange, triggerMenu]);
+  }, [hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp]);
   const handlePaste = useCallback(e => {
     const editable = editableRef.current;
     if (!editable) {
@@ -426,7 +458,7 @@ export function ChatComposerInput(props) {
     ...rest,
     children: [isEmpty && /*#__PURE__*/_jsx("div", {
       ...{
-        className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x47corl xv1l7n4 xjm74w1 x6pjikd x19v9tvf x9ynric x87ps6o x9epnlk"
+        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x47corl xv1l7n4 xjm74w1 x6pjikd x19v9tvf x9ynric x87ps6o x9epnlk"
       },
       "aria-hidden": "true",
       children: placeholder

package/dist/Chat/ChatContext.d.ts

@@ -1,3 +1,13 @@
+/**
+ * @file ChatContext.tsx
+ * @input Uses React createContext
+ * @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 { type RefObject } from 'react';
 export type ChatMessageSender = 'user' | 'assistant' | 'system';
 export type ChatDensity = 'compact' | 'balanced' | 'spacious';
 export interface ChatMessageContextValue {
@@ -11,6 +21,20 @@ export interface ChatListContextValue {
 }
 export declare const ChatListContext: import("react").Context<ChatListContextValue | null>;
 export declare function useChatListContext(): ChatListContextValue | null;
+/**
+ * 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;
@@ -20,6 +44,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 declare const ChatComposerContext: import("react").Context<ChatComposerContextValue | null>;
 export declare function useChatComposerContext(): ChatComposerContextValue | null;

package/dist/Chat/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatContext.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,yDACsB,CAAC;AAGtD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,sDAE3B,CAAC;AAGF,wBAAgB,kBAAkB,IAAI,oBAAoB,GAAG,IAAI,CAEhE;AAMD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxD,+FAA+F;IAC/F,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,wDACsB,CAAC;AAGrD,wBAAgB,oBAAoB,IAAI,sBAAsB,GAAG,IAAI,CAEpE"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,yDAE9B,CAAC;AAGF,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAGhF,wBAAgB,kBAAkB,IAAI,oBAAoB,GAAG,IAAI,CAEhE;AAMD;;;;;;;;;GASG;AACH,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAC;CAC9D;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxD,+FAA+F;IAC/F,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,wDAE7B,CAAC;AAGF,wBAAgB,oBAAoB,IAAI,sBAAsB,GAAG,IAAI,CAEpE"}

package/dist/Chat/ChatContext.js

@@ -5,8 +5,11 @@
 /**
  * @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';
 export const ChatMessageContext = /*#__PURE__*/createContext(null);
@@ -24,6 +27,17 @@ export function useChatListContext() {
 // 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 const ChatComposerContext = /*#__PURE__*/createContext(null);
 ChatComposerContext.displayName = 'ChatComposerContext';
 export function useChatComposerContext() {

package/dist/Chat/ChatDictationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BA+D1B;yBAzEe,mBAAmB"}
+{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiDD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BAoE1B;yBA9Ee,mBAAmB"}

package/dist/Chat/ChatDictationButton.js

@@ -24,6 +24,7 @@ import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { mergeProps } from "../utils/index.js";
+import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
 // Types
@@ -86,6 +87,7 @@ export function ChatDictationButton({
   style,
   ...rest
 }) {
+  const t = useTranslator();
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
   }
@@ -94,7 +96,7 @@ export function ChatDictationButton({
     bands,
     volume: rawVolume
   } = dictation;
-  const accessibleLabel = label ?? (isListening ? 'Stop dictation' : 'Start dictation');
+  const accessibleLabel = 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));
@@ -126,7 +128,7 @@ export function ChatDictationButton({
         const scale = BAR_MIN_SCALE + level * (1 - BAR_MIN_SCALE);
         return /*#__PURE__*/_jsx("span", {
           ...mergeProps({
-            className: "xjspbzw x1g0ag68 x18dpk69 x11bq7d0 x9lcvmn"
+            className: "xjspbzw x1g0ag68 x18dpk69 x11bq7d0 x12w9bfk x9lcvmn"
           }, {
             style: {
               width: barWidth,

package/dist/Chat/ChatLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8JD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0GjB;yBAvHe,UAAU"}
+{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8JD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}

package/dist/Chat/ChatLayout.js

@@ -69,8 +69,8 @@ const styles = {
   blurLayer: {
     kVAEAm: "x10l6tqk",
     krVfgx: "x1ey2m1c",
-    kbCHJM: "xu96u03",
-    kCIrl2: "x3m8u43",
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     kfzvcC: "x47corl",
     k6WDB: "xvn2z4z",
     keRtuK: "x67t5t6",
@@ -258,10 +258,10 @@ export function ChatLayout({
       }), /*#__PURE__*/_jsxs("div", {
         ...{
           0: {
-            className: "x1ey2m1c xu96u03 x3m8u43 x1ja2u2z xc8icb0 x47corl xixxii4"
+            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl xixxii4"
           },
           1: {
-            className: "x1ey2m1c xu96u03 x3m8u43 x1ja2u2z xc8icb0 x47corl x7wzq59"
+            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x7wzq59"
           }
         }[!!isSelfScrolling << 0],
         children: [scrollButton === undefined ? defaultScrollButton : scrollButton, /*#__PURE__*/_jsx("div", {