@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

package/src/Carousel/Carousel.tsx

@@ -9,7 +9,9 @@
  * @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. Exposes APG
+ *   mapping so mouse users can scroll horizontally. Supports optional
+ *   wrap-around looping and an imperative handle (handleRef) for programmatic
+ *   scroll control. 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".
@@ -17,7 +19,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 {
@@ -25,6 +27,7 @@ import {
   useRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   Children,
   isValidElement,
 } from 'react';
@@ -48,8 +51,48 @@ import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
+/**
+ * Imperative control surface for the Carousel, accessed via the `handleRef`
+ * prop. Methods drive the same native-scroll machinery as the built-in
+ * buttons, so they respect RTL, reduced-motion, and `hasLoop`.
+ */
+export interface CarouselHandle {
+  /**
+   * Scroll forward by roughly one viewport. With `hasLoop`, wraps to the
+   * start once the end is reached.
+   */
+  scrollNext(): void;
+  /**
+   * Scroll backward by roughly one viewport. With `hasLoop`, wraps to the
+   * end once the start is reached.
+   */
+  scrollPrev(): void;
+  /**
+   * Scroll the item at the given 0-based index to the start edge. The index
+   * is clamped to the item range, and only the carousel scrolls — the page
+   * position is left untouched.
+   */
+  scrollTo(index: number): void;
+  /**
+   * Whether there is scrollable content past the trailing edge. With
+   * `hasLoop`, returns true whenever the content overflows, since wrapping
+   * is always available. Reads live state — safe to call in an event handler.
+   */
+  canScrollNext(): boolean;
+  /**
+   * Whether there is scrollable content past the leading edge. With
+   * `hasLoop`, returns true whenever the content overflows. Reads live state.
+   */
+  canScrollPrev(): boolean;
+}
+
 export interface CarouselProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Imperative handle for programmatic scroll control. Exposes scrollNext,
+   * scrollPrev, scrollTo, and the canScrollNext/canScrollPrev queries.
+   */
+  handleRef?: React.Ref<CarouselHandle>;
   /** Carousel items — rendered in a horizontal scroll container. */
   children: ReactNode;
   /**
@@ -69,6 +112,16 @@ export interface CarouselProps extends BaseProps<HTMLDivElement> {
    * @default true
    */
   hasEdgeFade?: boolean;
+  /**
+   * Enable wrap-around scrolling. When the content overflows, pressing Next
+   * at the end scrolls back to the start, and Prev at the start scrolls to
+   * the end — for both the built-in buttons and the imperative handle. The
+   * navigation buttons stay visible at both edges instead of hiding, since a
+   * scroll is always available. Has no effect when the content fits without
+   * overflowing.
+   * @default false
+   */
+  hasLoop?: boolean;
   /**
    * Enable scroll-snap on items. Each direct child snaps to the start edge.
    * @default false
@@ -269,10 +322,12 @@ const paddingStyles = stylex.create({
  */
 export function Carousel({
   ref,
+  handleRef,
   children,
   gap = 1,
   hasButtons = true,
   hasEdgeFade = true,
+  hasLoop = false,
   hasSnap = false,
   padding,
   'aria-label': ariaLabelFromProps,
@@ -285,7 +340,8 @@ export function Carousel({
   const t = useTranslator();
   const ariaLabel = ariaLabelFromProps ?? t('@astryx.carousel.label');
   const scrollElRef = useRef<HTMLElement | null>(null);
-  const {scrollRef, overflowStart, overflowEnd} = useScrollOverflow();
+  const {scrollRef, overflowStart, overflowEnd, hasOverflow} =
+    useScrollOverflow();
 
   // Children.toArray drops null/undefined/boolean children and assigns
   // stable keys, so slide numbering ("Slide N of M") matches what actually
@@ -338,33 +394,100 @@ export function Carousel({
     el.scrollBy({left: event.deltaY, behavior: 'auto'});
   }, []);
 
-  const scrollBy = useCallback((direction: -1 | 1) => {
+  const scrollBy = useCallback(
+    (direction: -1 | 1) => {
+      const el = scrollElRef.current;
+      if (!el) {
+        return;
+      }
+      // Respect the user's reduced-motion preference — mirrors the CSS
+      // scroll-behavior override so button-driven scrolling doesn't animate
+      // for users who opted out of motion.
+      const prefersReducedMotion =
+        typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const behavior = prefersReducedMotion ? 'auto' : 'smooth';
+      // Under RTL the scroll axis is inverted (start is scrollLeft 0, the end
+      // is negative), so flip the physical delta sign.
+      const rtlSign = isRtlElement(el) ? -1 : 1;
+
+      // Wrap-around: when looping over overflowing content, a press that would
+      // run past an edge jumps to the opposite edge instead. Overshoot by the
+      // full scroll width in the opposite logical direction and let the browser
+      // clamp to the far edge — this reuses the same RTL sign convention as a
+      // normal scroll, so it stays direction-correct without special-casing.
+      if (hasLoop && hasOverflow) {
+        const atEnd = direction === 1 && !overflowEnd;
+        const atStart = direction === -1 && !overflowStart;
+        if (atEnd || atStart) {
+          el.scrollBy({left: rtlSign * -direction * el.scrollWidth, behavior});
+          return;
+        }
+      }
+
+      const firstChild = el.firstElementChild as HTMLElement | null;
+      const itemWidth = firstChild ? firstChild.offsetWidth : 0;
+      const amount = el.clientWidth - itemWidth * 0.5;
+      el.scrollBy({
+        // `direction` is the logical intent (-1 = toward content start, +1 =
+        // toward content end).
+        left: rtlSign * direction * Math.max(amount, itemWidth),
+        behavior,
+      });
+    },
+    [hasLoop, hasOverflow, overflowStart, overflowEnd],
+  );
+
+  const scrollToIndex = useCallback((index: number) => {
     const el = scrollElRef.current;
-    if (!el) {
+    const items = el?.children;
+    if (!el || !items || items.length === 0) {
       return;
     }
-    const firstChild = el.firstElementChild as HTMLElement | null;
-    const itemWidth = firstChild ? firstChild.offsetWidth : 0;
-    const amount = el.clientWidth - itemWidth * 0.5;
-    // Respect the user's reduced-motion preference — mirrors the CSS
-    // scroll-behavior override so button-driven scrolling doesn't animate
-    // for users who opted out of motion.
+    const clamped = Math.max(0, Math.min(index, items.length - 1));
+    const target = items[clamped] as HTMLElement;
     const prefersReducedMotion =
       typeof window !== 'undefined' &&
       typeof window.matchMedia === 'function' &&
       window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    // Bring the item to the start edge by scrolling the container by the
+    // measured gap between the item and the container edge. Using scrollBy
+    // (not scrollIntoView) keeps the scroll contained to the carousel and
+    // never moves ancestors or the page. In RTL the start edge is the right
+    // edge, so align the trailing edges instead of the leading ones.
+    const containerRect = el.getBoundingClientRect();
+    const itemRect = target.getBoundingClientRect();
+    const delta = isRtlElement(el)
+      ? itemRect.right - containerRect.right
+      : itemRect.left - containerRect.left;
     el.scrollBy({
-      // `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),
+      left: delta,
       behavior: prefersReducedMotion ? 'auto' : 'smooth',
     });
   }, []);
 
+  useImperativeHandle(
+    handleRef,
+    () => ({
+      scrollNext: () => scrollBy(1),
+      scrollPrev: () => scrollBy(-1),
+      scrollTo: (index: number) => scrollToIndex(index),
+      // With loop, either direction is reachable whenever the content
+      // overflows; otherwise reflect the live per-edge overflow state.
+      canScrollNext: () => (hasLoop ? hasOverflow : overflowEnd),
+      canScrollPrev: () => (hasLoop ? hasOverflow : overflowStart),
+    }),
+    [scrollBy, scrollToIndex, hasLoop, hasOverflow, overflowStart, overflowEnd],
+  );
+
+  // With loop, the buttons stay reachable at both edges as long as there's
+  // something to scroll; without loop they follow the per-edge overflow state.
+  const canScrollStart = hasLoop && hasOverflow ? true : overflowStart;
+  const canScrollEnd = hasLoop && hasOverflow ? true : overflowEnd;
+
   const fadeStyle = hasEdgeFade
-    ? overflowStart && overflowEnd
+    ? (hasLoop && hasOverflow) || (overflowStart && overflowEnd)
       ? styles.fadeBoth
       : overflowStart
         ? styles.fadeStart
@@ -433,13 +556,15 @@ export function Carousel({
               {...stylex.props(
                 styles.buttonPill,
                 styles.buttonPillStart,
-                !overflowStart && styles.buttonHidden,
+                !canScrollStart && styles.buttonHidden,
               )}>
               <Button
                 icon={
-                  <span {...stylex.props(rtlStyles.mirror)}>
-                    <Icon icon="chevronLeft" size="xsm" />
-                  </span>
+                  <Icon
+                    icon="chevronLeft"
+                    size="xsm"
+                    xstyle={rtlStyles.mirror}
+                  />
                 }
                 label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
@@ -449,7 +574,7 @@ export function Carousel({
                 // button mounted (stable layout/focus) but removes it from the
                 // tab order and a11y tree while it's visually hidden, so
                 // keyboard users don't land on an invisible control.
-                isDisabled={!overflowStart}
+                isDisabled={!canScrollStart}
                 onClick={() => scrollBy(-1)}
                 xstyle={styles.buttonRadiusOverride}
               />
@@ -458,13 +583,15 @@ export function Carousel({
               {...stylex.props(
                 styles.buttonPill,
                 styles.buttonPillEnd,
-                !overflowEnd && styles.buttonHidden,
+                !canScrollEnd && styles.buttonHidden,
               )}>
               <Button
                 icon={
-                  <span {...stylex.props(rtlStyles.mirror)}>
-                    <Icon icon="chevronRight" size="xsm" />
-                  </span>
+                  <Icon
+                    icon="chevronRight"
+                    size="xsm"
+                    xstyle={rtlStyles.mirror}
+                  />
                 }
                 label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"
@@ -472,7 +599,7 @@ export function Carousel({
                 isIconOnly
                 // See "Scroll left" — disabled while visually hidden so the
                 // button stays mounted but out of the tab order / a11y tree.
-                isDisabled={!overflowEnd}
+                isDisabled={!canScrollEnd}
                 onClick={() => scrollBy(1)}
                 xstyle={styles.buttonRadiusOverride}
               />

package/src/Carousel/index.ts

@@ -10,4 +10,4 @@
  */
 
 export {Carousel} from './Carousel';
-export type {CarouselProps} from './Carousel';
+export type {CarouselProps, CarouselHandle} from './Carousel';

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',

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
@@ -157,8 +157,8 @@ const styles = stylex.create({
     gridColumn: 1,
     justifySelf: 'center',
     alignSelf: 'start',
-    width: '20px',
-    height: '2px',
+    width: spacingVars['--spacing-5'],
+    height: spacingVars['--spacing-0-5'],
     borderRadius: radiusVars['--radius-full'],
     backgroundColor: {
       default: colorVars['--color-icon-secondary'],

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',

package/src/Chat/ChatComposerInput.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts
  * - /apps/storybook/stories/ChatComposer.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatComposerInput/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatComposerInput/ (block examples)
  */
 
 import {