@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/Calendar/styles.ts

@@ -65,18 +65,12 @@ export const calendarStyles = stylex.create({
     borderWidth: 0,
   },
   /**
-   * Wrapper for the month nav chevrons. In RTL the flex header already
-   * swaps the buttons' visual sides; the glyphs must mirror with them so
-   * "Previous month" points outward (visually right) instead of inward.
-   * Keyed on the dir attribute (dir="rtl"), same as MobileNav's drawer
-   * transform — bare CSS `direction: rtl` alone won't trigger it.
+   * Wrapper for the month nav chevrons. RTL mirroring is applied by
+   * composing the shared `rtlStyles.mirror` transform onto this wrapper
+   * at the call site (see Calendar.tsx).
    */
   navIcon: {
     display: 'inline-flex',
-    transform: {
-      default: null,
-      ':is([dir="rtl"] *)': 'scaleX(-1)',
-    },
   },
 });
 
@@ -145,24 +139,24 @@ export const dayCellStyles = stylex.create({
     position: 'absolute',
     top: '2px',
     bottom: '2px',
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
   },
-  rangeBgRadiusLeft: {
-    left: '2px',
-    borderTopLeftRadius: radiusVars['--radius-full'],
-    borderBottomLeftRadius: radiusVars['--radius-full'],
+  rangeBgRadiusStart: {
+    insetInlineStart: '2px',
+    borderStartStartRadius: radiusVars['--radius-full'],
+    borderEndStartRadius: radiusVars['--radius-full'],
   },
-  rangeBgRadiusRight: {
-    right: '2px',
-    borderTopRightRadius: radiusVars['--radius-full'],
-    borderBottomRightRadius: radiusVars['--radius-full'],
+  rangeBgRadiusEnd: {
+    insetInlineEnd: '2px',
+    borderStartEndRadius: radiusVars['--radius-full'],
+    borderEndEndRadius: radiusVars['--radius-full'],
   },
-  rangeInsetLeft: {
-    left: '2px',
+  rangeInsetStart: {
+    insetInlineStart: '2px',
   },
-  rangeInsetRight: {
-    right: '2px',
+  rangeInsetEnd: {
+    insetInlineEnd: '2px',
   },
 
   // Preview background - structural positioning
@@ -170,28 +164,28 @@ export const dayCellStyles = stylex.create({
     position: 'absolute',
     top: '2px',
     bottom: '2px',
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
   },
-  previewBgRadiusLeft: {
-    left: '2px',
-    borderTopLeftRadius: radiusVars['--radius-full'],
-    borderBottomLeftRadius: radiusVars['--radius-full'],
+  previewBgRadiusStart: {
+    insetInlineStart: '2px',
+    borderStartStartRadius: radiusVars['--radius-full'],
+    borderEndStartRadius: radiusVars['--radius-full'],
   },
-  previewBgRadiusRight: {
-    right: '2px',
-    borderTopRightRadius: radiusVars['--radius-full'],
-    borderBottomRightRadius: radiusVars['--radius-full'],
+  previewBgRadiusEnd: {
+    insetInlineEnd: '2px',
+    borderStartEndRadius: radiusVars['--radius-full'],
+    borderEndEndRadius: radiusVars['--radius-full'],
   },
   previewStart: {
-    left: '2px',
-    borderTopLeftRadius: radiusVars['--radius-full'],
-    borderBottomLeftRadius: radiusVars['--radius-full'],
+    insetInlineStart: '2px',
+    borderStartStartRadius: radiusVars['--radius-full'],
+    borderEndStartRadius: radiusVars['--radius-full'],
   },
   previewEnd: {
-    right: '2px',
-    borderTopRightRadius: radiusVars['--radius-full'],
-    borderBottomRightRadius: radiusVars['--radius-full'],
+    insetInlineEnd: '2px',
+    borderStartEndRadius: radiusVars['--radius-full'],
+    borderEndEndRadius: radiusVars['--radius-full'],
   },
 
   // Day button - structural
@@ -221,9 +215,9 @@ export const dayCellStyles = stylex.create({
       content: '""',
       position: 'absolute',
       top: '-2px',
-      right: '-2px',
+      insetInlineEnd: '-2px',
       bottom: '-2px',
-      left: '-2px',
+      insetInlineStart: '-2px',
     },
   },
 

package/src/Card/Card.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Card',
@@ -103,7 +103,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Card',
   displayName: 'Card',
@@ -151,7 +151,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'bordered container for DISCRETE items; NOT the default layout tool. Most content doesn\'t need a card.',
   usage: {

package/src/Card/Card.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Card/Card.doc.mjs (props table, features)
  * - /packages/core/src/Card/index.ts (exports if types change)
  * - /apps/storybook/stories/Card.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Card/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Card/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -92,7 +92,7 @@ const styles = stylex.create({
   withBorder: {
     borderWidth: borderVars['--border-width'],
     borderStyle: 'solid',
-    borderColor: colorVars['--color-border-emphasized'],
+    borderColor: colorVars['--color-border'],
     paddingInlineStart: `calc(var(--container-padding-inline-start) - ${borderVars['--border-width']})`,
     paddingInlineEnd: `calc(var(--container-padding-inline-end) - ${borderVars['--border-width']})`,
     paddingBlockStart: `calc(var(--container-padding-block-start) - ${borderVars['--border-width']})`,

package/src/Carousel/Carousel.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Carousel',
@@ -56,7 +56,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -81,7 +81,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'horizontal scroll container w/ fade edges, nav buttons, scroll-snap',
   usage: {

package/src/Carousel/Carousel.tsx

@@ -17,7 +17,7 @@
  * 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)
+ * - /packages/cli/assets/templates/blocks/components/Carousel/ (showcase blocks)
  */
 
 import {
@@ -41,8 +41,9 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {useLayer} from '../Layer';
 import {useScrollOverflow} from '../hooks/useScrollOverflow';
+import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -166,10 +167,16 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   buttonPillStart: {
-    transform: 'translateX(-50%)',
+    transform: {
+      default: 'translateX(-50%)',
+      ':is([dir="rtl"] *)': 'translateX(50%)',
+    },
   },
   buttonPillEnd: {
-    transform: 'translateX(50%)',
+    transform: {
+      default: 'translateX(50%)',
+      ':is([dir="rtl"] *)': 'translateX(-50%)',
+    },
   },
   buttonHidden: {
     opacity: 0,
@@ -347,7 +354,11 @@ export function Carousel({
       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',
     });
   }, []);
@@ -425,7 +436,11 @@ export function Carousel({
                 !overflowStart && styles.buttonHidden,
               )}>
               <Button
-                icon={<Icon icon="chevronLeft" size="xsm" />}
+                icon={
+                  <span {...stylex.props(rtlStyles.mirror)}>
+                    <Icon icon="chevronLeft" size="xsm" />
+                  </span>
+                }
                 label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
                 size="sm"
@@ -446,7 +461,11 @@ export function Carousel({
                 !overflowEnd && styles.buttonHidden,
               )}>
               <Button
-                icon={<Icon icon="chevronRight" size="xsm" />}
+                icon={
+                  <span {...stylex.props(rtlStyles.mirror)}>
+                    <Icon icon="chevronRight" size="xsm" />
+                  </span>
+                }
                 label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"
                 size="sm"

package/src/Center/Center.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Center',
@@ -36,6 +36,24 @@ export const docs = {
       type: 'SizeValue',
       description: 'Minimum container height (px or CSS value).',
     },
+    {
+      name: 'padding',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Stack, Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
+    },
+    {
+      name: 'paddingInline',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
+    },
+    {
+      name: 'paddingBlock',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
+    },
     {
       name: 'isInline',
       type: 'boolean',
@@ -76,7 +94,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Center',
   displayName: 'Center',
@@ -95,6 +113,22 @@ export const docsZh = {
     {name: 'axis', type: "'both' | 'horizontal' | 'vertical'", description: '居中的方向。', default: "'both'"},
     {name: 'width', type: 'number | string', description: '容器宽度（px 或 CSS 值）。'},
     {name: 'height', type: 'number | string', description: '容器高度（px 或 CSS 值）。'},
+    {
+      name: 'padding',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        '所有方向的内边距，使用间距刻度（0、0.5、1、1.5、2、3、4、5、6、8、10）。与 Stack、Card、LayoutContent 和 LayoutPanel 的 padding 属性一致。在 JSX 中使用数字表达式 e.g. padding={3}。',
+    },
+    {
+      name: 'paddingInline',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内（水平）内边距，使用间距刻度。两者同时设置时在行内轴上覆盖 padding。',
+    },
+    {
+      name: 'paddingBlock',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '块（垂直）内边距，使用间距刻度。两者同时设置时在块轴上覆盖 padding。',
+    },
     {name: 'isInline', type: 'boolean', description: '使用 inline-flex（适用于文本/图标）。', default: 'false'},
     {name: 'children', type: 'ReactNode', description: '要居中的内容。'},
     {
@@ -116,7 +150,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'centers content horizontally and/or vertically via flexbox',
   usage: {
@@ -134,6 +168,10 @@ export const docsDense = {
     axis: 'centering direction(s)',
     width: 'container width (px or CSS)',
     height: 'container height (px or CSS)',
+    padding:
+      'inner padding on all sides (spacing step: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10)',
+    paddingInline: 'inline (horizontal) padding; overrides padding on that axis',
+    paddingBlock: 'block (vertical) padding; overrides padding on that axis',
     isInline: 'use inline-flex for text/icons',
     children: 'content to center',
     xstyle: 'StyleX styles for layout (margins, positioning, sizing); must be stylex.create() value',

package/src/Center/Center.test.tsx

@@ -82,6 +82,81 @@ describe('Center', () => {
     expect(element).toBeInTheDocument();
   });
 
+  it('applies a class when padding is set', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const withPadding = screen.getByTestId('center').className;
+    expect(withPadding).not.toBe('');
+    expect(withPadding).not.toBe(baseline);
+  });
+
+  it('accepts paddingInline and paddingBlock without error', () => {
+    render(
+      <Center paddingInline={4} paddingBlock={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center')).toBeInTheDocument();
+  });
+
+  it('lets paddingInline/paddingBlock override padding on their axis', () => {
+    // padding sets both axes; paddingInline overrides the inline axis. The
+    // component should render without conflict and carry a class.
+    render(
+      <Center padding={2} paddingInline={5} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe('');
+  });
+
+  it('applies a class for explicit padding={0} (zero is a valid spacing step)', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center padding={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('leaves the default className unchanged when no padding props are set', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    // Opting in changes the className...
+    rerender(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+    // ...and dropping the prop restores the exact default output.
+    rerender(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).toBe(baseline);
+  });
+
   it('renders as inline-flex when isInline is true', () => {
     render(
       <Center isInline data-testid="center">

package/src/Center/Center.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Center.tsx
- * @input Uses React, StyleX for centering styles
+ * @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding
  * @output Exports Center component and CenterProps
  * @position Center component for centering children horizontally/vertically
  *
@@ -12,13 +12,17 @@
  * - /packages/core/src/Center/Center.doc.mjs
  * - /packages/core/src/Center/Center.test.tsx
  * - /apps/storybook/stories/Center.stories.tsx
- * - /packages/cli/templates/blocks/components/Center/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Center/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
-import type {SizeValue} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
+import {
+  paddingInlineStyles,
+  paddingBlockStyles,
+} from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 
@@ -90,6 +94,26 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
    */
   minHeight?: SizeValue;
 
+  /**
+   * Inner padding on all sides, using the spacing scale.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   *
+   * Matches the `padding` prop on `Stack`, `Card`, `LayoutContent`, and `LayoutPanel`.
+   */
+  padding?: SpacingStep;
+
+  /**
+   * Inline (horizontal) padding, using the spacing scale.
+   * Overrides `padding` on the inline axis when both are set.
+   */
+  paddingInline?: SpacingStep;
+
+  /**
+   * Block (vertical) padding, using the spacing scale.
+   * Overrides `padding` on the block axis when both are set.
+   */
+  paddingBlock?: SpacingStep;
+
   /**
    * Whether to make the container inline-flex (useful for text/icons).
    * @default false
@@ -121,6 +145,9 @@ export function Center({
   height,
   maxWidth,
   minHeight,
+  padding,
+  paddingInline,
+  paddingBlock,
   isInline = false,
   children,
   xstyle,
@@ -129,6 +156,11 @@ export function Center({
   ref,
   ...props
 }: CenterProps) {
+  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
+  // / `paddingBlock` take precedence on their own axis when provided.
+  const resolvedPaddingInline = paddingInline ?? padding;
+  const resolvedPaddingBlock = paddingBlock ?? padding;
+
   const stylexProps = mergeProps(
     themeProps('center', {axis}),
     stylex.props(
@@ -141,6 +173,9 @@ export function Center({
         maxWidth ?? null,
         minHeight ?? null,
       ),
+      resolvedPaddingInline != null &&
+        paddingInlineStyles[resolvedPaddingInline],
+      resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
       xstyle,
     ),
     className,

package/src/Chat/Chat.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Chat',
@@ -88,7 +88,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description: 'Chat 是一组用于构建 AI 和人工聊天体验的可组合基础组件。组合 ChatLayout、ChatMessageList、ChatMessage、气泡、系统消息、工具调用、标记文本和 ChatComposer，可构建完整对话，而无需重新实现发送者感知布局、密度、滚动或编写器行为。',
@@ -117,7 +117,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'AI chat components. Layout (MessageList>Message>Bubble+SystemMessage) + Composer (shell w/ slots, ContentEditable input w/ trigger menus, tokens, msg history, attachments)',
   usage: {

package/src/Chat/ChatComposer.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'ChatComposer',
@@ -60,7 +60,7 @@ export const docs = {
       name: 'elevation',
       type: "'none' | 'low'",
       description:
-        "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, matching inset rings).",
+        "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, matching inset rings).",
       default: "'low'",
     },
     {
@@ -109,7 +109,7 @@ export const docs = {
     {
       name: 'input',
       type: 'ReactNode',
-      description: 'Slot: custom input element. Replaces the default input. Use ChatComposerInput for trigger menus/tokens, or wire any input (plain textarea, rich editor) to the composition contract via useChatComposerContext() — read value/onChange/onSubmit/canSend and register a focus control on inputControlRef so body-click-to-focus works.',
+      description: 'Slot: custom input element. Replaces the default input. Use ChatComposerInput for trigger menus/tokens, or wire any input (plain textarea, rich editor) to the composition contract via useChatComposerContext(): read value/onChange/onSubmit/canSend and register a focus control on inputControlRef so body-click-to-focus works.',
       slotElements: [
         {
           __element: 'TextInput',

package/src/Chat/ChatComposer.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/Chat.doc.mjs
  * - /apps/storybook/stories/ChatComposer.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatComposer/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatComposer/ (block examples)
  */
 
 import React, {
@@ -230,16 +230,16 @@ const styles = stylex.create({
     paddingBlockEnd:
       'calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))',
     marginBlockEnd: 'calc(-1 * var(--_chat-composer-radius))',
-    borderTopLeftRadius: 'var(--_chat-composer-radius)',
-    borderTopRightRadius: 'var(--_chat-composer-radius)',
+    borderStartStartRadius: 'var(--_chat-composer-radius)',
+    borderStartEndRadius: 'var(--_chat-composer-radius)',
   },
   statusBottom: {
     paddingBlockStart:
       'calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))',
     paddingBlockEnd: 'var(--_chat-composer-padding)',
     marginBlockStart: 'calc(-1 * var(--_chat-composer-radius))',
-    borderBottomLeftRadius: 'var(--_chat-composer-radius)',
-    borderBottomRightRadius: 'var(--_chat-composer-radius)',
+    borderEndStartRadius: 'var(--_chat-composer-radius)',
+    borderEndEndRadius: 'var(--_chat-composer-radius)',
   },
   statusError: {
     backgroundColor: colorVars['--color-error-muted'],

package/src/Chat/ChatComposerDrawer.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'ChatComposerDrawer',

package/src/Chat/ChatComposerDrawer.tsx

@@ -14,7 +14,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
- * - /packages/cli/templates/blocks/components/ChatComposerDrawer/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatComposerDrawer/ (block examples)
  */
 
 import {useId, useState, type ReactNode} from 'react';
@@ -104,8 +104,8 @@ const styles = stylex.create({
     // opaque or translucent.
     backgroundColor: colorVars['--color-background-surface'],
     backgroundImage: `linear-gradient(${colorVars['--color-background-muted']}, ${colorVars['--color-background-muted']})`,
-    borderTopLeftRadius: radiusVars['--radius-chat'],
-    borderTopRightRadius: radiusVars['--radius-chat'],
+    borderStartStartRadius: radiusVars['--radius-chat'],
+    borderStartEndRadius: radiusVars['--radius-chat'],
   },
 
   // Toggle row — both the bar handle and badge+label live in the

package/src/Chat/ChatComposerInput.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'ChatComposerInput',
@@ -83,7 +83,7 @@ export const docs = {
     {
       name: 'onKeyDown',
       type: '(event) => void',
-      description: 'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected — Enter never submits mid-composition.',
+      description: 'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected; Enter never submits mid-composition.',
     },
   ],
 };