@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/src/Center/Center.test.tsx

@@ -0,0 +1,135 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Center.test.tsx
+ * @input Uses vitest, @testing-library/react, Center component
+ * @output Unit tests for Center component behavior
+ * @position Testing; validates Center.tsx implementation
+ *
+ * SYNC: When Center.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {Center} from './Center';
+
+describe('Center', () => {
+  it('renders and centers children (both axes by default)', () => {
+    render(
+      <Center data-testid="center">
+        <div>Centered Content</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(screen.getByText('Centered Content')).toBeInTheDocument();
+    expect(element).toBeInTheDocument();
+    // Check that it has flex display
+    expect(element).toHaveStyle({display: 'flex'});
+  });
+
+  it('centers horizontally only', () => {
+    render(
+      <Center axis="horizontal" data-testid="center">
+        <div>Horizontal Center</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(screen.getByText('Horizontal Center')).toBeInTheDocument();
+    expect(element).toHaveStyle({display: 'flex'});
+  });
+
+  it('centers vertically only', () => {
+    render(
+      <Center axis="vertical" data-testid="center">
+        <div>Vertical Center</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(screen.getByText('Vertical Center')).toBeInTheDocument();
+    expect(element).toHaveStyle({display: 'flex'});
+  });
+
+  it('applies height prop', () => {
+    render(
+      <Center height="100%" data-testid="center">
+        <div>Full Height</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    // Height is applied via StyleX dynamic styles
+    expect(element).toBeInTheDocument();
+  });
+
+  it('applies width prop', () => {
+    render(
+      <Center width={300} data-testid="center">
+        <div>Fixed Width</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    // Width is applied via StyleX dynamic styles
+    expect(element).toBeInTheDocument();
+  });
+
+  it('applies both width and height props', () => {
+    render(
+      <Center width="50%" height={200} data-testid="center">
+        <div>Sized Content</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    // Width and height are applied via StyleX dynamic styles
+    expect(element).toBeInTheDocument();
+  });
+
+  it('renders as inline-flex when isInline is true', () => {
+    render(
+      <Center isInline data-testid="center">
+        <div>Inline Content</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(element).toHaveStyle({display: 'inline-flex'});
+  });
+
+  it('forwards ref correctly', () => {
+    const ref = vi.fn();
+    render(
+      <Center ref={ref}>
+        <div>Test</div>
+      </Center>,
+    );
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+  });
+
+  it('applies xstyle prop', () => {
+    // Note: StyleX styles are transformed at build time, so we test that
+    // the component renders without error when xstyle is provided
+    render(
+      <Center data-testid="center" xstyle={undefined}>
+        <div>Styled Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center')).toBeInTheDocument();
+  });
+
+  it('passes through additional props', () => {
+    render(
+      <Center data-testid="center" aria-label="centered container">
+        <div>Content</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(element).toHaveAttribute('aria-label', 'centered container');
+  });
+
+  it('renders as div element', () => {
+    render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const element = screen.getByTestId('center');
+    expect(element.tagName).toBe('DIV');
+  });
+});

package/src/Center/Center.tsx

@@ -0,0 +1,132 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Center.tsx
+ * @input Uses React, StyleX for centering styles
+ * @output Exports Center component and CenterProps
+ * @position Center component for centering children horizontally/vertically
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /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)
+ */
+
+import type {ReactNode} from 'react';
+import type {BaseProps} from '../BaseProps';
+import * as stylex from '@stylexjs/stylex';
+import type {SizeValue} from '../utils/types';
+import {mergeProps} from '../utils';
+import {themeProps} from '../utils/themeProps';
+
+const styles = stylex.create({
+  base: {
+    display: 'flex',
+  },
+  inline: {
+    display: 'inline-flex',
+  },
+  alignItemsCenter: {
+    alignItems: 'center',
+  },
+  justifyContentCenter: {
+    justifyContent: 'center',
+  },
+});
+
+// Dynamic styles for sizing props
+const dynamicStyles = stylex.create({
+  sizing: (width: SizeValue | null, height: SizeValue | null) => ({
+    width,
+    height,
+  }),
+});
+
+export type CenterAxis = 'both' | 'horizontal' | 'vertical';
+
+
+export interface CenterProps extends BaseProps<HTMLDivElement> {
+  /** Ref forwarded to the root element */
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Center axis - which direction(s) to center.
+   * - `both`: Center both horizontally and vertically (default)
+   * - `horizontal`: Center horizontally only (justifyContent: center)
+   * - `vertical`: Center vertically only (alignItems: center)
+   * @default 'both'
+   */
+  axis?: CenterAxis;
+
+  /**
+   * Width of the container.
+   * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+   */
+  width?: SizeValue;
+
+  /**
+   * Height of the container.
+   * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+   */
+  height?: SizeValue;
+
+  /**
+   * Whether to make the container inline-flex (useful for text/icons).
+   * @default false
+   */
+  isInline?: boolean;
+
+  /**
+   * Content to render inside the center container.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Center component for centering children horizontally and/or vertically.
+ *
+ * Uses flexbox for centering. By default, centers on both axes.
+ * Use the `axis` prop to center on only one axis.
+ *
+ * @example
+ * ```
+ * <Center width={300} height={200}>
+ *   <Content />
+ * </Center>
+ * ```
+ */
+export function Center({
+  axis = 'both',
+  width,
+  height,
+  isInline = false,
+  children,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}: CenterProps) {
+  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),
+      xstyle,
+    ),
+    className,
+    style,
+  );
+
+  return (
+    <div ref={ref} {...stylexProps} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Center.displayName = 'Center';

package/src/Center/index.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports Center component
+ * @output Exports Center and types for @astryxdesign/core/Center
+ * @position Entry point for Center component
+ *
+ * SYNC: When modified, update /packages/core/src/Center/Center.doc.mjs
+ */
+
+export {Center} from './Center';
+export type {CenterProps, CenterAxis} from './Center';

package/src/Chat/Chat.doc.mjs

@@ -0,0 +1,142 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'Chat',
+  displayName: 'Chat',
+  group: 'Chat',
+  category: 'Chat',
+  // ChatPastedTextToken is an internal helper (not exported from index.ts).
+  // Hide it from the component listing so it doesn't surface as an undocumented entry.
+  hiddenComponents: ['ChatPastedTextToken'],
+  keywords: ['chat', 'message', 'bubble', 'conversation', 'ai', 'assistant', 'thread', 'system-message', 'composer', 'mention', 'trigger', 'typeahead', 'token', 'imperative', 'tokenized-text'],
+  theming: {
+    targets: [
+      {className: 'astryx-chat-layout', visualProps: ['density']},
+      {className: 'astryx-chat-composer', visualProps: ['density']},
+      {className: 'astryx-chat-composer-input'},
+      {className: 'astryx-chat-composer-drawer', visualProps: ['collapsed']},
+      {className: 'astryx-chat-message', visualProps: ['sender']},
+      {
+        className: 'astryx-chat-message-bubble',
+        visualProps: ['sender', 'variant', 'density'],
+      },
+      {className: 'astryx-chat-message-list', visualProps: ['density']},
+      {className: 'astryx-chat-system-message', visualProps: ['variant']},
+      {className: 'astryx-chat-message-metadata'},
+      {className: 'astryx-chat-send-button'},
+      {className: 'astryx-chat-tokenized-text'},
+      {className: 'astryx-chat-tool-calls'},
+      {className: 'astryx-trigger-menu'},
+    ],
+    vars: [
+      {name: '--_chat-composer-radius', description: 'Border radius of the composer body. Inner elements derive their radius concentrically.', default: 'var(--radius-chat)', private: true},
+      {name: '--_chat-composer-padding', description: 'Padding of the composer body. Used in the concentric radius calculation.', default: 'var(--spacing-3)', private: true},
+      {name: '--_button-radius', description: 'Concentric button radius inside the composer.', default: 'max(var(--radius-element), calc(var(--_chat-composer-radius) - var(--_chat-composer-padding)))', private: true, derived: true, formula: 'max(var(--radius-element), calc(var(--_chat-composer-radius) - var(--_chat-composer-padding)))'},
+    ],
+    derived: [
+      {property: 'borderRadius', vars: ['--_chat-composer-radius']},
+      {property: 'padding', vars: ['--_chat-composer-padding']},
+    ],
+  },
+  components: [
+    {name: 'ChatMessageList'},
+    {name: 'ChatMessage'},
+    {name: 'ChatMessageBubble'},
+    {name: 'ChatMessageMetadata'},
+    {name: 'ChatSystemMessage'},
+    {name: 'ChatComposer'},
+    {name: 'ChatComposerInput'},
+    {name: 'ChatComposerDrawer'},
+    {name: 'ChatSendButton'},
+    {name: 'ChatToolCalls'},
+    {name: 'ChatTokenizedText'},
+    {name: 'ChatComposerTokenElement'},
+    {name: 'ChatLayout'},
+    {name: 'ChatLayoutScrollButton'},
+  ],
+  usage: {
+    description: 'Chat is a family of composable primitives for building AI and human chat experiences. Combine ChatLayout, ChatMessageList, ChatMessage, bubbles, system messages, tool calls, tokenized text, and ChatComposer to assemble complete conversations without reimplementing sender-aware layout, density, scrolling, or composer behavior.',
+    bestPractices: [
+      { guidance: true, description: 'Compose messages using MessageList > Message > Bubble for consistent sender-aware styling and density.' },
+      { guidance: true, description: 'Set the density prop to control spacing globally: compact for sidebars, balanced for most views, spacious for long-form reading. Individual messages can override.' },
+      { guidance: true, description: 'Use gap when top-level rows are independent (for example, LLM tool events or streamed blocks) and list spacing needs to be tuned separately from density.' },
+      { guidance: true, description: 'Use the group prop on bubbles (first, middle, last) when a single sender sends multiple consecutive messages; it tightens corner radius to visually connect them.' },
+      { guidance: true, description: 'Use ChatSystemMessage with variant="divider" for date separators and default for inline status notices like joins, leaves, or topic changes.' },
+      { guidance: true, description: 'Put name on the first bubble and metadata on the last bubble in a message so they align with the bubble\'s inline padding.' },
+      { guidance: true, description: 'Provide an emptyState prop so new users see a clear prompt to start a conversation instead of a blank screen.' },
+      { guidance: true, description: 'Use the ghost bubble variant for AI-style responses that show rich content like code blocks or markdown without a visible boundary.' },
+      { guidance: false, description: 'Don\'t use ChatSystemMessage for sender content; it has no avatar, alignment, or bubble. Use ChatMessage with a sender role instead.' },
+      { guidance: false, description: 'Don\'t put long or multi-line content in a system message; keep it to a single short sentence. If you need more, use a bubble or a card.' },
+      { guidance: false, description: 'Don\'t nest ChatMessage inside another ChatMessage; each message is a standalone article element with its own sender context.' },
+      { guidance: false, description: 'Don\'t apply a fixed height directly on the message list; wrap it in a sized container and let the list fill with flex: 1.' },
+      { guidance: false, description: 'Don\'t mix filled and ghost bubble variants within the same sender\'s messages; pick one style per side and use it consistently.' },
+      { guidance: false, description: 'Don\'t place metadata or names on both the bubble and the message wrapper; pick one based on whether the content has a bubble boundary.' },
+],
+    anatomy: [
+      { name: 'Message area', required: true, description: 'Scrollable region for messages. Renders children (typically ChatMessageList) in a flex column that pushes content to the bottom when the list is short.' },
+      { name: 'Frosted glass dock', required: true, description: 'Sticky or fixed container at the bottom with a backdrop-blur layer. Houses the scroll button and composer.' },
+      { name: 'Scroll-to-bottom button', required: false, description: 'Appears when the user scrolls up or new messages arrive. Defaults to ChatLayoutScrollButton; pass null to hide or a custom element to override.' },
+      { name: 'Composer', required: true, description: 'The input area for sending messages, typically ChatComposer. Docked at the bottom inside the frosted glass layer.' },
+      { name: 'Empty state', required: false, description: 'Centered placeholder shown when no messages exist. Use EmptyState for a consistent look.' },
+      { name: 'Avatar', required: false, description: 'A sender avatar rendered beside the message. Typically Avatar with size="small". Hidden for system messages.' },
+      { name: 'Name', required: false, description: 'Sender name above the message body. Place on the bubble when using bubbles, or on the message wrapper for raw content.' },
+      { name: 'Content', required: true, description: 'The message body: one or more ChatMessageBubble elements, or any free-form ReactNode like images or tool calls.' },
+      { name: 'Metadata', required: false, description: 'Timestamp, delivery status, and footer actions below the message. Place on the last bubble or on the message wrapper.' },
+    ],
+  },
+};
+
+/** @type {import('../docs-types').TranslationDoc} */
+export const docsZh = {
+  usage: {
+    description: 'Chat 是一组用于构建 AI 和人工聊天体验的可组合基础组件。组合 ChatLayout、ChatMessageList、ChatMessage、气泡、系统消息、工具调用、标记文本和 ChatComposer，可构建完整对话，而无需重新实现发送者感知布局、密度、滚动或编写器行为。',
+    bestPractices: [
+      { guidance: true, description: '使用 MessageList > Message > Bubble 组合来获得一致的发送者感知样式和密度。' },
+      { guidance: true, description: '设置 density 属性来全局控制间距：compact 用于侧边栏，balanced 用于大多数视图，spacious 用于长篇阅读。' },
+      { guidance: true, description: '当同一发送者发送多条连续消息时，使用气泡的 group 属性（first、middle、last）来视觉上连接相关消息。' },
+      { guidance: true, description: '使用 ChatSystemMessage 的 variant="divider" 作为日期分隔线，使用 default 作为内联状态通知。' },
+      { guidance: true, description: '将 name 放在第一个气泡上，metadata 放在最后一个气泡上，使其与气泡的内边距对齐。' },
+      { guidance: true, description: '提供 emptyState 属性，让新用户看到开始对话的提示，而不是空白屏幕。' },
+      { guidance: true, description: '使用 ghost 气泡变体显示代码块或 Markdown 等富内容，无需可见边界。' },
+      { guidance: false, description: '不要将 ChatSystemMessage 用于发送者内容，它没有头像、对齐或气泡。请使用带有发送者角色的 ChatMessage。' },
+      { guidance: false, description: '不要在系统消息中放置冗长或多行内容，保持一句简短的话。如需更多内容，请使用气泡或卡片。' },
+      { guidance: false, description: '不要将 ChatMessage 嵌套在另一个 ChatMessage 内，每条消息都是独立的 article 元素。' },
+      { guidance: false, description: '不要直接在消息列表上应用固定高度，将其包裹在有尺寸的容器中，让列表以 flex: 1 填充。' },
+      { guidance: false, description: '不要在同一发送者的消息中混用 filled 和 ghost 气泡变体，每一侧选择一种样式并保持一致。' },
+      { guidance: false, description: '不要同时在气泡和消息包装器上放置 metadata 或 name，根据内容是否有气泡边界来选择。' },
+    ],
+    anatomy: [
+      { name: 'Message area', required: true, description: 'Scrollable region for messages. Renders children (typically ChatMessageList) in a flex column that pushes content to the bottom when the list is short.' },
+      { name: 'Frosted glass dock', required: true, description: 'Sticky or fixed container at the bottom with a backdrop-blur layer. Houses the scroll button and composer.' },
+      { name: 'Scroll-to-bottom button', required: false, description: 'Appears when the user scrolls up or new messages arrive. Defaults to ChatLayoutScrollButton; pass null to hide or a custom element to override.' },
+      { name: 'Composer', required: true, description: 'The input area for sending messages, typically ChatComposer. Docked at the bottom inside the frosted glass layer.' },
+      { name: 'Empty state', required: false, description: 'Centered placeholder shown when no messages exist. Use EmptyState for a consistent look.' },
+    ],
+  },
+};
+
+/** @type {import('../docs-types').TranslationDoc} */
+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: {
+    description: 'Chat family: layout + message list + sender messages + bubbles + system messages + tool calls + tokenized text + composer for complete conversation UIs.',
+    bestPractices: [
+      { guidance: true, description: 'MessageList > Message > Bubble for sender-aware styling.' },
+      { guidance: true, description: 'Density prop controls global spacing: compact for sidebars, balanced default, spacious for reading.' },
+      { guidance: true, description: 'gap tunes top-level row spacing separately from density for independent LLM/tool-event rows.' },
+      { guidance: true, description: 'Group prop on bubbles (first/middle/last) for consecutive same-sender messages; tightens corner radius.' },
+      { guidance: true, description: 'SystemMessage: divider variant for date breaks, default for status notices.' },
+      { guidance: true, description: 'Name on first bubble, metadata on last; aligns with bubble inline padding.' },
+      { guidance: true, description: 'Provide emptyState so new users see a prompt, not a blank screen.' },
+      { guidance: true, description: 'Ghost bubble variant for rich AI content like code/markdown without visible boundary.' },
+      { guidance: false, description: 'SystemMessage for sender content: no avatar/alignment/bubble. Use ChatMessage instead.' },
+      { guidance: false, description: 'Long/multi-line system messages: keep to a single short sentence.' },
+      { guidance: false, description: 'Nesting ChatMessage inside another: each is a standalone article.' },
+      { guidance: false, description: 'Fixed height on message list directly: wrap in a sized container, let flex: 1 fill.' },
+      { guidance: false, description: 'Mix filled and ghost variants in same sender\'s messages: pick one style per side.' },
+      { guidance: false, description: 'Metadata/names on both bubble and wrapper: pick one.' },
+],
+  },
+};

package/src/Chat/ChatComposer.doc.mjs

@@ -0,0 +1,220 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'ChatComposer',
+  subComponentOf: 'Chat',
+  displayName: 'Chat Composer',
+  description: 'Layout shell for a chat composer. Arranges named slots (drawer, header, input, footer, send) with page-radius container, hover/focus shadows, and concentric inner radius for child elements.',
+  props: [
+    {
+      name: 'onSubmit',
+      type: '(value: string) => void',
+      description: 'Called when the user submits a message.',
+      required: true,
+    },
+    {
+      name: 'onStop',
+      type: '() => void',
+      description: 'Called when the user requests to stop generation.',
+    },
+    {
+      name: 'isStopShown',
+      type: 'boolean',
+      description: 'Whether the stop button is shown instead of the send button.',
+      default: 'false',
+    },
+    {
+      name: 'value',
+      type: 'string',
+      description: 'Controlled input value.',
+    },
+    {
+      name: 'onChange',
+      type: '(value: string) => void',
+      description: 'Change handler for controlled mode.',
+    },
+    {
+      name: 'placeholder',
+      type: 'string',
+      description: 'Placeholder text shown when the input is empty.',
+      default: "'Type a message...'",
+    },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: 'Disables the composer.',
+      default: 'false',
+    },
+    {
+      name: 'density',
+      type: "'compact' | 'balanced' | 'spacious'",
+      description: 'Visual density.',
+      default: "'balanced'",
+    },
+    {
+      name: 'drawer',
+      type: 'ReactNode',
+      description: 'Slot: collapsible drawer above the input: attachments, context chips, etc. Use ChatComposerDrawer.',
+      slotElements: [
+        {
+          __element: 'Text',
+          props: {
+            type: 'body',
+          },
+          children: 'Drawer content',
+        },
+      ],
+    },
+    {
+      name: 'headerActions',
+      type: 'ReactNode',
+      description: 'Slot: left-aligned header actions (attach, mention buttons). Use icon-only size="sm" buttons.',
+      slotElements: [
+        {
+          __element: 'Button',
+          props: {
+            label: 'Action',
+            variant: 'ghost',
+            size: 'sm',
+          },
+        },
+      ],
+    },
+    {
+      name: 'headerContext',
+      type: 'ReactNode',
+      description: 'Slot: right-aligned contextual info in the header (context window usage, ProgressBar, supporting text).',
+      slotElements: [
+        {
+          __element: 'Text',
+          props: {
+            type: 'body',
+          },
+          children: 'Context',
+        },
+      ],
+    },
+    {
+      name: 'input',
+      type: 'ReactNode',
+      description: 'Slot: custom input element. Replaces the default textarea. Use ChatComposerInput for trigger menus.',
+      slotElements: [
+        {
+          __element: 'TextInput',
+          props: {
+            label: 'Input',
+            placeholder: 'Type here...',
+          },
+        },
+      ],
+    },
+    {
+      name: 'footerActions',
+      type: 'ReactNode',
+      description: 'Slot: left-aligned footer actions (model selector, etc).',
+      slotElements: [
+        {
+          __element: 'Button',
+          props: {
+            label: 'Action',
+            variant: 'ghost',
+            size: 'sm',
+          },
+        },
+      ],
+    },
+    {
+      name: 'sendActions',
+      type: 'ReactNode',
+      description: 'Slot: actions to the left of the send button.',
+      slotElements: [
+        {
+          __element: 'Button',
+          props: {
+            label: 'Action',
+            variant: 'ghost',
+            size: 'sm',
+          },
+        },
+      ],
+    },
+    {
+      name: 'sendButton',
+      type: 'ReactNode',
+      description: 'Slot: custom send button. Replaces the default send/stop button.',
+      slotElements: [
+        {
+          __element: 'Button',
+          props: {
+            label: 'Action',
+            variant: 'ghost',
+            size: 'sm',
+          },
+        },
+      ],
+    },
+    {
+      name: 'status',
+      type: "{ type: 'error' | 'warning'; message?: string }",
+      description: 'Status message rendered below (or above) the composer.',
+    },
+    {
+      name: 'statusPosition',
+      type: "'top' | 'bottom'",
+      description: 'Where to render the status.',
+      default: "'bottom'",
+    },
+  ],
+};
+
+export const docsZh = {
+  name: 'ChatComposer',
+  displayName: 'Chat Composer',
+  description: '聊天编写器布局外壳。排列命名插槽（附件、标题栏、输入、页脚、发送），带有页面圆角容器和同心内圆角。',
+  propDescriptions: {
+    onSubmit: '用户提交消息时调用。',
+    onStop: '用户请求停止生成时调用。',
+    isStopShown: '是否显示停止按钮。',
+    value: '受控输入值。',
+    onChange: '受控模式的输入值变更时调用。序列化字符串包含标记占位符。',
+    placeholder: '输入为空时显示的占位文本。',
+    isDisabled: '禁用编写器。',
+    density: '视觉密度。',
+    drawer: '插槽：输入上方的可折叠抽屉——附件、上下文标签等。使用 ChatComposerDrawer。',
+    headerActions: '插槽：标题左侧操作按钮（附件、提及按钮）。使用仅图标 size="sm" 按钮。',
+    headerContext: '插槽：标题右侧上下文信息（上下文窗口使用情况、ProgressBar、辅助文本）。',
+    input: '插槽：自定义输入元素。替换默认文本区域。使用 ChatComposerInput 实现触发菜单。',
+    footerActions: '插槽：左对齐的页脚操作（模型选择器等）。',
+    sendActions: '插槽：发送按钮左侧的操作。',
+    sendButton: '插槽：自定义发送按钮。替换默认的发送/停止按钮。',
+    status: '编写器下方（或上方）的状态消息。',
+    statusPosition: '状态渲染位置。',
+  },
+};
+
+export const docsDense = {
+  name: 'ChatComposer',
+  displayName: 'Chat Composer',
+  description: 'composer layout shell; named slots (drawer/header/input/footer/send) w/ page-radius + concentric inner radius',
+  propDescriptions: {
+    onSubmit: 'submit msg handler',
+    onStop: 'stop generation handler',
+    isStopShown: 'whether the stop button is shown',
+    value: 'controlled input value',
+    onChange: 'controlled change handler',
+    placeholder: 'placeholder when empty',
+    isDisabled: 'disabled; use during streaming or unmet prereqs',
+    density: 'visual density',
+    drawer: 'slot: collapsible drawer above input: attachments, context chips, etc.; use ChatComposerDrawer',
+    headerActions: 'slot: left header actions (attach, mention); icon-only sm buttons',
+    headerContext: 'slot: right header context info (window usage, ProgressBar, text)',
+    input: 'slot: custom input; replaces default textarea; use ChatComposerInput for triggers',
+    footerActions: 'slot: left footer actions (model selector etc)',
+    sendActions: 'slot: actions left of send btn',
+    sendButton: 'slot: custom send btn; replaces default',
+    status: 'status msg below/above composer',
+    statusPosition: 'status render position',
+  },
+};