@astryxdesign/core 0.2.0 → 0.3.0

package/dist/Carousel/Carousel.js

@@ -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,9 +19,9 @@
  * 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 { useRef, useCallback, useEffect, Children, isValidElement } from 'react';
+import { useRef, useCallback, useEffect, useImperativeHandle, 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";
@@ -31,6 +33,12 @@ 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";
+
+/**
+ * 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`.
+ */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -203,10 +211,12 @@ const paddingStyles = {
  */
 export function Carousel({
   ref,
+  handleRef,
   children,
   gap = 1,
   hasButtons = true,
   hasEdgeFade = true,
+  hasLoop = false,
   hasSnap = false,
   padding,
   'aria-label': ariaLabelFromProps,
@@ -222,7 +232,8 @@ export function Carousel({
   const {
     scrollRef,
     overflowStart,
-    overflowEnd
+    overflowEnd,
+    hasOverflow
   } = useScrollOverflow();
 
   // Children.toArray drops null/undefined/boolean children and assigns
@@ -277,22 +288,78 @@ export function Carousel({
     if (!el) {
       return;
     }
-    const firstChild = el.firstElementChild;
-    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 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;
+    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). 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),
+      // toward content end).
+      left: rtlSign * direction * Math.max(amount, itemWidth),
+      behavior
+    });
+  }, [hasLoop, hasOverflow, overflowStart, overflowEnd]);
+  const scrollToIndex = useCallback(index => {
+    const el = scrollElRef.current;
+    const items = el?.children;
+    if (!el || !items || items.length === 0) {
+      return;
+    }
+    const clamped = Math.max(0, Math.min(index, items.length - 1));
+    const target = items[clamped];
+    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({
+      left: delta,
       behavior: prefersReducedMotion ? 'auto' : 'smooth'
     });
   }, []);
-  const fadeStyle = hasEdgeFade ? overflowStart && overflowEnd ? styles.fadeBoth : overflowStart ? styles.fadeStart : overflowEnd ? styles.fadeEnd : null : null;
+  useImperativeHandle(handleRef, () => ({
+    scrollNext: () => scrollBy(1),
+    scrollPrev: () => scrollBy(-1),
+    scrollTo: index => 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 ? hasLoop && hasOverflow || overflowStart && overflowEnd ? styles.fadeBoth : overflowStart ? styles.fadeStart : overflowEnd ? styles.fadeEnd : null : null;
 
   // Self-authored position styles (positioning: 'custom' below): a cover
   // centered on the anchor, sized to it — direction-neutral by construction.
@@ -341,7 +408,7 @@ export function Carousel({
           1: {
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xuuh30 x1nyx83j xg01cxk x47corl"
           }
-        }[!!!overflowStart << 0],
+        }[!!!canScrollStart << 0],
         children: /*#__PURE__*/_jsx(Button, {
           icon: /*#__PURE__*/_jsx("span", {
             ...stylex.props(rtlStyles.mirror),
@@ -359,7 +426,7 @@ export function Carousel({
           // 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
         })
@@ -371,7 +438,7 @@ export function Carousel({
           1: {
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xitnhlw x36dvrd xg01cxk x47corl"
           }
-        }[!!!overflowEnd << 0],
+        }[!!!canScrollEnd << 0],
         children: /*#__PURE__*/_jsx(Button, {
           icon: /*#__PURE__*/_jsx("span", {
             ...stylex.props(rtlStyles.mirror),
@@ -387,7 +454,7 @@ export function Carousel({
           // 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/dist/Carousel/index.d.ts

@@ -5,5 +5,5 @@
  * @position Public entry point for the Carousel module
  */
 export { Carousel } from './Carousel';
-export type { CarouselProps } from './Carousel';
+export type { CarouselProps, CarouselHandle } from './Carousel';
 //# sourceMappingURL=index.d.ts.map

package/dist/Carousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Carousel/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Carousel/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC"}

package/dist/Center/Center.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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
  *
@@ -8,11 +8,11 @@
  * - /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 type { SizeValue } from '../utils/types';
+import type { SizeValue, SpacingStep } from '../utils/types';
 export type CenterAxis = 'both' | 'horizontal' | 'vertical';
 export interface CenterProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
@@ -45,6 +45,23 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
      * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
      */
     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
@@ -68,7 +85,7 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
  * </Center>
  * ```
  */
-export declare function Center({ axis, width, height, maxWidth, minHeight, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
+export declare function Center({ axis, width, height, maxWidth, minHeight, padding, paddingInline, paddingBlock, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
 export declare namespace Center {
     var displayName: string;
 }

package/dist/Center/Center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAkC9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwBb;yBArCe,MAAM"}
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsC3D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAgCb;yBAhDe,MAAM"}

package/dist/Center/Center.js

@@ -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,9 +12,10 @@
  * - /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 * as stylex from '@stylexjs/stylex';
+import { paddingInlineStyles, paddingBlockStyles } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -71,6 +72,9 @@ export function Center({
   height,
   maxWidth,
   minHeight,
+  padding,
+  paddingInline,
+  paddingBlock,
   isInline = false,
   children,
   xstyle,
@@ -79,9 +83,13 @@ export function Center({
   ref,
   ...props
 }) {
+  // 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(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), xstyle), className, style);
+  }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), resolvedPaddingInline != null && paddingInlineStyles[resolvedPaddingInline], resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock], xstyle), className, style);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...stylexProps,

package/dist/Chat/ChatComposer.d.ts

@@ -16,7 +16,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, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Chat/ChatComposer.js

@@ -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, { useState, useCallback, useRef, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -179,28 +179,28 @@ export function ChatComposer(props) {
     role: status.type === 'error' ? 'alert' : 'status',
     ...{
       0: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf xkvxy4d x6k0y1c"
       },
       4: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xy7p8pm xzc3kxz"
       },
       2: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x1pritpl x1joocv1"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf xkvxy4d x6k0y1c x1pritpl x1joocv1"
       },
       6: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x1pritpl x1joocv1"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xy7p8pm xzc3kxz x1pritpl x1joocv1"
       },
       1: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x24i8r5 xdhq94a"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf xkvxy4d x6k0y1c x24i8r5 xdhq94a"
       },
       5: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x24i8r5 xdhq94a"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xy7p8pm xzc3kxz x24i8r5 xdhq94a"
       },
       3: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x24i8r5 xdhq94a"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf xkvxy4d x6k0y1c x24i8r5 xdhq94a"
       },
       7: {
-        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x24i8r5 xdhq94a"
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xy7p8pm xzc3kxz x24i8r5 xdhq94a"
       }
     }[!!(statusPosition === 'top') << 2 | !!(status.type === 'error') << 1 | !!(status.type === 'warning') << 0],
     children: [/*#__PURE__*/_jsx(Icon, {

package/dist/Chat/ChatComposerDrawer.d.ts

@@ -10,7 +10,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 { type ReactNode } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';

package/dist/Chat/ChatComposerDrawer.js

@@ -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 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -38,8 +38,8 @@ const styles = {
     k1K539: "x1cdrix3",
     kWkggS: "x10xzikg",
     kKwaWg: "x1vrk509",
-    kIxVMA: "x1d6do9d",
-    ksF3WI: "x1b9br5y",
+    krdFHd: "x1n70msy",
+    kfmiAY: "xg0tfu",
     $$css: true
   }
 };
@@ -142,10 +142,10 @@ export function ChatComposerDrawer({
       }), /*#__PURE__*/_jsx("div", {
         ...{
           0: {
-            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1hc1fzr x1e8aii2 xuedmi6 xlr8y92"
+            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xfyiiit x1b2l0oc xjspbzw x1q5y3ey x1pe4z86 x1hc1fzr x1e8aii2 xuedmi6 xlr8y92"
           },
           1: {
-            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1e8aii2 xuedmi6 xlr8y92 xg01cxk x47corl"
+            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xfyiiit x1b2l0oc xjspbzw x1q5y3ey x1pe4z86 x1e8aii2 xuedmi6 xlr8y92 xg01cxk x47corl"
           }
         }[!!isCollapsed << 0]
       })]

package/dist/Chat/ChatComposerInput.d.ts

@@ -16,7 +16,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 { type ReactNode, type KeyboardEvent, type ClipboardEvent } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Chat/ChatComposerInput.js

@@ -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 { useRef, useState, useCallback, useEffect, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';

package/dist/Chat/ChatDictationButton.d.ts

@@ -11,7 +11,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
- * - /packages/cli/templates/blocks/components/ChatDictationButton/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatDictationButton/ (block examples)
  */
 import React from 'react';
 import type { UseSpeechRecognitionReturn } from './useSpeechRecognition';

package/dist/Chat/ChatDictationButton.js

@@ -15,7 +15,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
- * - /packages/cli/templates/blocks/components/ChatDictationButton/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatDictationButton/ (block examples)
  */
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Chat/ChatLayout.d.ts

@@ -8,6 +8,13 @@
  * Provides the scroll container ref and content ref, renders the
  * scroll-to-bottom button, frosted glass dock, and message area.
  *
+ * Layout contract: the root is a flex column. The message area flexes
+ * (grow 1, shrink 0) to fill the space the dock doesn't need; the sticky
+ * dock keeps its natural height in flow. Short content therefore fills
+ * exactly 100% with no overflow, and long content grows past the root so
+ * self-scroll mode scrolls (#2573). In external-scrollRef mode the dock
+ * is position: fixed (out of flow) and the message area fills the root.
+ *
  * Density (compact/balanced/spacious) is controlled via a prop with
  * 'balanced' as the default. No JS measurement or ResizeObserver needed.
  * The container-type on root enables container queries in child components.
@@ -15,7 +22,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/ChatLayout.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatLayout/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatLayout/ (block examples)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

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,+BA4GjB;yBAzHe,UAAU"}
+{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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;AA4KD,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

@@ -12,6 +12,13 @@
  * Provides the scroll container ref and content ref, renders the
  * scroll-to-bottom button, frosted glass dock, and message area.
  *
+ * Layout contract: the root is a flex column. The message area flexes
+ * (grow 1, shrink 0) to fill the space the dock doesn't need; the sticky
+ * dock keeps its natural height in flow. Short content therefore fills
+ * exactly 100% with no overflow, and long content grows past the root so
+ * self-scroll mode scrolls (#2573). In external-scrollRef mode the dock
+ * is position: fixed (out of flow) and the message area fills the root.
+ *
  * Density (compact/balanced/spacious) is controlled via a prop with
  * 'balanced' as the default. No JS measurement or ResizeObserver needed.
  * The container-type on root enables container queries in child components.
@@ -19,7 +26,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/ChatLayout.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatLayout/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatLayout/ (block examples)
  */
 import { useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -47,6 +54,8 @@ const styles = {
     k9g6sI: "x12h1iku",
     kAzted: "x2lwn1j",
     kUk6DE: "x98rzlu",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
     $$css: true
   },
   rootScrollable: {
@@ -59,7 +68,9 @@ const styles = {
     k1xSpc: "x78zum5",
     kXwgrk: "xdt5ytf",
     kUOVxO: "xvueqy4",
-    kAzted: "x1us19tq",
+    kzQI83: "x1iyjqo2",
+    kmuXW: "x2lah0s",
+    kCS8Yb: "xdl72j9",
     kGO01o: "xjpqqx5",
     kzqmXN: "xh8yej3",
     ks0D6T: "x193iq5w",
@@ -258,10 +269,10 @@ export function ChatLayout({
       }), /*#__PURE__*/_jsxs("div", {
         ...{
           0: {
-            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl xixxii4"
+            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x2lah0s xixxii4"
           },
           1: {
-            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x7wzq59"
+            className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x2lah0s x7wzq59"
           }
         }[!!isSelfScrolling << 0],
         children: [scrollButton === undefined ? defaultScrollButton : scrollButton, /*#__PURE__*/_jsx("div", {

package/dist/Chat/ChatLayoutScrollButton.d.ts

@@ -9,7 +9,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
- * - /packages/cli/templates/blocks/components/ChatLayoutScrollButton/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatLayoutScrollButton/ (block examples)
  */
 import React from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Chat/ChatLayoutScrollButton.js

@@ -13,7 +13,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
- * - /packages/cli/templates/blocks/components/ChatLayoutScrollButton/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatLayoutScrollButton/ (block examples)
  */
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Chat/ChatMessage.d.ts

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessage/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessage/ (block examples)
  */
 import { type ReactNode } from 'react';
 import { type ChatMessageSender, type ChatDensity } from './ChatContext';

package/dist/Chat/ChatMessage.js

@@ -16,7 +16,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessage/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessage/ (block examples)
  */
 import { useMemo, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Chat/ChatMessageBubble.d.ts

@@ -18,7 +18,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessageBubble/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessageBubble/ (block examples)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Chat/ChatMessageBubble.js

@@ -22,7 +22,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessageBubble/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessageBubble/ (block examples)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";

package/dist/Chat/ChatMessageList.d.ts

@@ -15,7 +15,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessageList/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessageList/ (block examples)
  */
 import { type ReactNode } from 'react';
 import { type ChatDensity } from './ChatContext';

package/dist/Chat/ChatMessageList.js

@@ -19,7 +19,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
- * - /packages/cli/templates/blocks/components/ChatMessageList/ (block examples)
+ * - /packages/cli/assets/templates/blocks/components/ChatMessageList/ (block examples)
  */
 import { useEffect, useMemo, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA8CpE;yBA9Ce,cAAc"}
+{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAgDpE;yBAhDe,cAAc"}