@astryxdesign/cli 0.1.7 → 0.1.8-canary.0c4d8d7

package/templates/blocks/components/ChatMessage/ChatMessageMultiBubble.tsx

@@ -37,7 +37,7 @@ export default function ChatMessageMultiBubble() {
       </ChatMessage>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleGrouping.tsx

@@ -17,7 +17,7 @@ export default function ChatMessageBubbleGrouping() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleMetadata.tsx

@@ -20,7 +20,7 @@ export default function ChatMessageBubbleMetadata() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">

package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx

@@ -16,9 +16,9 @@ import {Fragment} from 'react';
 const DENSITIES = ['compact', 'balanced', 'spacious'] as const;
 
 const AVATAR_SIZE = {
-  compact: 'xsmall' as const,
-  balanced: 'small' as const,
-  spacious: 'small' as const,
+  compact: 'sm' as const,
+  balanced: 'md' as const,
+  spacious: 'md' as const,
 };
 
 export default function ChatMessageListDensity() {
@@ -34,15 +34,11 @@ export default function ChatMessageListDensity() {
             <VStack style={{flex: 1, minHeight: 0}}>
               <ChatMessageList density={density}>
                 <ChatMessage sender="user">
-                  <ChatMessageBubble>
-                    How does density work?
-                  </ChatMessageBubble>
+                  <ChatMessageBubble>How does density work?</ChatMessageBubble>
                 </ChatMessage>
                 <ChatMessage
                   sender="assistant"
-                  avatar={
-                    <Avatar name="Agent" size={AVATAR_SIZE[density]} />
-                  }>
+                  avatar={<Avatar name="Agent" size={AVATAR_SIZE[density]} />}>
                   <ChatMessageBubble>
                     Density provides default spacing at every level — message
                     gap, bubble padding, and gap between child elements. Use gap

package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx

@@ -42,7 +42,7 @@ export default function ChatMessageListFullFeatured() {
 
         <ChatMessage
           sender="assistant"
-          avatar={<Avatar name="Agent" size="small" />}>
+          avatar={<Avatar name="Agent" size="md" />}>
           <ChatMessageBubble group="first">
             <Markdown density="compact">
               {`Sure! Here's the key pattern from **useReducer.ts**:`}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.tsx

@@ -7,7 +7,7 @@ import {githubDark} from '@astryxdesign/core/theme/syntax';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 
 const commands = `$ astryx init --features agents
-✓ AI agent docs installed → .claude/CLAUDE.md
+✓ AI agent docs installed → AGENTS.md
 $ pnpm astryx component CodeBlock --dense`;
 
 export default function CodeBlockTerminal() {

package/templates/blocks/components/HoverCard/HoverCardShowcase.tsx

@@ -15,7 +15,7 @@ export default function HoverCardShowcase() {
       content={
         <Stack direction="vertical" gap={2} style={{width: 240}}>
           <Stack direction="horizontal" gap={2} vAlign="center">
-            <Avatar name="Jane Doe" size="medium" />
+            <Avatar name="Jane Doe" size="lg" />
             <Stack direction="vertical" gap={0}>
               <Heading level={5}>Jane Doe</Heading>
               <Text type="supporting" color="secondary">

package/templates/blocks/components/IconButton/IconButtonFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'IconButton',
+  name: 'IconButton — Floating',
+  displayName: 'IconButton — Floating',
+  description:
+    'A floating action button (FAB) — the most common floating-button shape is icon-only. Raised here with `elevation="high"`.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['IconButton', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/IconButton/IconButtonFloating.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {PlusIcon} from '@heroicons/react/24/outline';
+
+const VARIANTS = [
+  {variant: 'primary' as const, label: 'Primary'},
+  {variant: 'secondary' as const, label: 'Secondary'},
+  {variant: 'ghost' as const, label: 'Ghost'},
+  {variant: 'destructive' as const, label: 'Destructive'},
+];
+
+export default function IconButtonFloating() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        FABs are usually icon-only — raise one with `elevation="high"`
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        {VARIANTS.map(({variant, label}) => (
+          <IconButton
+            key={variant}
+            label={label}
+            variant={variant}
+            icon={<Icon icon={PlusIcon} />}
+            elevation="high"
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Item/ItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ItemWithMedia() {
   return (
     <Stack gap={0}>
       <Item
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         label="Ada Lovelace"
         description="Design systems engineer"
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <Item
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         label="Grace Hopper"
         description="Compiler platform"
         endContent={<Text color="secondary">Online</Text>}

package/templates/blocks/components/ListItem/ListItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ListItemWithMedia() {
       <ListItem
         label="Ada Lovelace"
         description="Design systems engineer"
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <ListItem
         label="Grace Hopper"
         description="Platform infrastructure"
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         endContent={<Badge label="On call" variant="blue" />}
         onClick={() => {}}
       />

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Capped Toolbar',
+  displayName: 'OverflowList — Capped Toolbar',
+  description:
+    'maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Button', 'DropdownMenu', 'Card', 'Center'],
+};

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Card} from '@astryxdesign/core/Card';
+import {Center} from '@astryxdesign/core/Center';
+
+const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
+
+export default function OverflowListCappedToolbar() {
+  return (
+    <Center width={420}>
+      <Card padding={2}>
+        <OverflowList
+          gap={2}
+          maxVisibleItems={3}
+          overflowRenderer={overflowItems => (
+            <DropdownMenu
+              button={{
+                label: `+${overflowItems.length}`,
+                variant: 'ghost',
+                size: 'sm',
+              }}
+              items={overflowItems.map(({index}) => ({
+                label: actions[index],
+              }))}
+            />
+          )}>
+          {actions.map(action => (
+            <Button key={action} label={action} size="sm" />
+          ))}
+        </OverflowList>
+      </Card>
+    </Center>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Multi-row Tags',
+  displayName: 'OverflowList — Multi-row Tags',
+  description:
+    'Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Badge', 'Card'],
+};

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+
+const tags = [
+  'React',
+  'TypeScript',
+  'StyleX',
+  'Storybook',
+  'Vitest',
+  'Playwright',
+  'ESLint',
+  'Prettier',
+  'Vite',
+  'pnpm',
+];
+
+export default function OverflowListMultiRowTags() {
+  return (
+    <Card
+      padding={2}
+      style={{
+        resize: 'horizontal',
+        overflow: 'hidden',
+        minWidth: 120,
+        width: 260,
+      }}>
+      <OverflowList
+        gap={1}
+        maxRows={2}
+        overflowRenderer={overflowItems => (
+          <Badge variant="neutral" label={`+${overflowItems.length}`} />
+        )}>
+        {tags.map(tag => (
+          <Badge key={tag} variant="info" label={tag} />
+        ))}
+      </OverflowList>
+    </Card>
+  );
+}

package/templates/blocks/components/Pagination/PaginationDotsCarousel.tsx

@@ -62,12 +62,8 @@ export default function PaginationDotsCarousel() {
         <Stack direction="vertical" gap={3}>
           <Stars count={review.stars} />
           <Text type="body">{review.quote}</Text>
-          <Stack
-            direction="horizontal"
-            gap={3}
-            vAlign="center"
-            hAlign="start">
-            <Avatar name={review.name} size="small" />
+          <Stack direction="horizontal" gap={3} vAlign="center" hAlign="start">
+            <Avatar name={review.name} size="md" />
             <Stack direction="vertical" gap={0}>
               <Text type="supporting" weight="bold">
                 {review.name}

package/templates/blocks/components/Stack/StackFillItem.tsx

@@ -17,13 +17,9 @@ export default function StackFillItem() {
   return (
     <Stack direction="vertical" gap={3} width="100%" style={{maxWidth: 300}}>
       {USERS.map(user => (
-        <Stack
-          key={user.name}
-          direction="horizontal"
-          gap={3}
-          vAlign="center">
+        <Stack key={user.name} direction="horizontal" gap={3} vAlign="center">
           <StackItem size="static">
-            <Avatar name={user.name} size="small" />
+            <Avatar name={user.name} size="md" />
           </StackItem>
           <StackItem size="fill">
             <Stack direction="vertical" gap={0}>

package/templates/blocks/components/TabList/TabListTabsWithActions.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'TabList — With Actions',
   displayName: 'TabList — With Actions',
   description:
-    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don\'t overpower the tab row.',
+    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, match the Button size to the TabList size so the tabs and actions align to a shared baseline above the divider.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['TabList', 'Tab', 'Button'],

package/templates/blocks/components/TabList/TabListTabsWithActions.tsx

@@ -55,16 +55,11 @@ export default function TabListTabsWithActions() {
         <Button
           label="Filter"
           variant="ghost"
-          size="sm"
+          size="lg"
           icon={FilterIcon}
           isIconOnly
         />
-        <Button
-          label="New item"
-          variant="primary"
-          size="sm"
-          icon={PlusIcon}
-        />
+        <Button label="New item" variant="primary" size="lg" icon={PlusIcon} />
       </div>
     </TabList>
   );

package/templates/blocks/components/Table/TableRowStatusTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableRowStatus',
+  name: 'useTableRowStatus - Status Dots',
+  displayName: 'useTableRowStatus - Status Dots',
+  description:
+    'A job table using useTableRowStatus to render a colored status dot (or icon) per row (failed / running / queued). Rows with no status show no dot.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableRowStatusTable.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Table,
+  useTableRowStatus,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn, TableRowStatus} from '@astryxdesign/core/Table';
+
+interface Job extends Record<string, unknown> {
+  id: string;
+  name: string;
+  owner: string;
+  state: 'failed' | 'running' | 'queued' | 'succeeded';
+}
+
+const jobs: Job[] = [
+  {id: 'j1', name: 'build-core', owner: 'Ava', state: 'failed'},
+  {id: 'j2', name: 'lint', owner: 'Liam', state: 'running'},
+  {id: 'j3', name: 'unit-tests', owner: 'Zoe', state: 'succeeded'},
+  {id: 'j4', name: 'docsite-deploy', owner: 'Max', state: 'queued'},
+  {id: 'j5', name: 'smoke-test', owner: 'Mia', state: 'succeeded'},
+];
+
+const columns: TableColumn<Job>[] = [
+  {key: 'name', header: 'Job', width: proportional(2)},
+  {key: 'owner', header: 'Owner', width: pixel(120)},
+  {key: 'state', header: 'State', width: pixel(120)},
+];
+
+function jobStatus(job: Job): TableRowStatus | null {
+  switch (job.state) {
+    case 'failed':
+      return {color: 'error', icon: 'error', label: 'Failed'};
+    case 'running':
+      return {color: 'warning', icon: 'warning', label: 'Running'};
+    case 'queued':
+      return {color: 'gray', label: 'Queued'};
+    default:
+      return null; // succeeded: no dot
+  }
+}
+
+export default function TableRowStatusTable() {
+  const rowStatus = useTableRowStatus<Job>({getStatus: jobStatus});
+
+  return (
+    <Table
+      data={jobs}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{rowStatus}}
+    />
+  );
+}

package/templates/blocks/components/Thumbnail/ThumbnailElevated.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Thumbnail',
+  name: 'Thumbnail — Elevated',
+  displayName: 'Thumbnail — Elevated',
+  description:
+    'Image tiles raised at rest with `elevation`. The default keeps the existing hover-only shadow; a set level lifts the tile off the page.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Thumbnail', 'Layout', 'Text'],
+};

package/templates/blocks/components/Thumbnail/ThumbnailElevated.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+// Demo imagery is inlined as same-origin data URIs so the example is
+// self-contained. Thumbnail's remove-button overlay uses useImageMode, which
+// FETCHES the image to sample pixels (APCA) for contrast — a cross-origin CDN
+// URL without CORS headers cannot be sampled, so contrast detection fails
+// silently in hosted previews.
+const NIGHT_FOREST =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX18+H08uDy8d/y8N/v7t/m5NXl49Tk4tPc3NDX1cnW1cnW1cjW1MjV1MjV1MfR0cXIyLzEw7m8vLC3t68wM0QvM0MvM0IvMkIuMkEtMEErLz8iJjkhJTggJTcgJDcfJDYfIzYeIjUcITMbHzIWHiwYGzIXGjEWGjAWGTAVGS8VGC8UGC4UGC0UFy4TFy0TFywTFi0SFiwRFSsQFSkNFR4QFCoPFCkPFCgPEykOEygOEigNEicNEScMESYIDw8ECgr+gzZIAAABqElEQVR42uWQ61aCQBRGD5GylNBMKS9FZgNdNE0cyUvB+79VM8MoF9Fgplau2j/8nO8c9hqAD0ngDwjeJYH1lrfBWoCtYDboNu/Zv7qQYNap1bpCN1gxFh1dNe5WAsCScWqoWttbChAKvHZZ0W6XQoIFpW8ooFmLCG2Rl1BgaZAU5Ac8yg0RlC9nngCRQDFuhQRzinWmkCuYk3lxQoFrlskVqlcTMcEFvYIKoFbNfmEFuIypWaGGkt66tqZuEbjAHZl6SQVF1WqNvpDAHVktXTvR9JbgDZii1+tZI7cYMJXkCASvksB4L5VxHmAsibzgRRIYbjgfCgFDSeBZkh8W1HMIniSBR0mOQPCQA3RgBk4M5DhNZwdEcbKgLXy5iDiZg5gApRYbqTql2FZgMxAKeEWSNUFYx3s2SfU28HPWItrpySSwE2cEdqrYtxgmxgHGScFmHrAGk8SxczIxZnNC1McFOGshShyb4yxB9sI3CXDGnH0MLsD7F5LvvptEgH12Zg1Pn2WuHsjvrwt8308t+nwxT38sgiAE8/RTeagH+vx/F8SeF0Ja8Ak14ia/LgmpZQAAAABJRU5ErkJggg==';
+const GOLDEN_SUNSET =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEX/+uv/7sj6tFr3sVn1r1nzrVjxq1jvqVftp1frpVbpo1bnoVXln1XjnVThm1TfmVPdl1PblVLZk1LXkVLVj1HTjVHRi1DPiVDNh0/LhU/Jg07HgU7Ff03DfU3Be0y/eUy9d0u7dUu5c0u2cEq0bkqybEmwakmuaEisZkiqZEeoYkemYEakXkaiXEVgLjQ8HCjaJlMkAAABI0lEQVR42u3Mx3qDMBSE0Z/03nsvdhxjcnn/twsYjISR5MUkO5+V9N2ZYUPEpogtEdsidkTsitgTsS/iQMShiCMRxyJORJyKOBNxLuJCxKWIKxHXIm5E3Iq4E3Ev4kHEo4gnEc8iXkS8inhLymrJBO8J2UIiw0dc5sRDfEbVRWr1o/pbMMWox9yz6zcLIzMbBTD2VaHu7fr1gjXGA3w5baj5+H0w6x09TDpdaP7rDZhn0sd3y89Y9fcHbPnoYdroZ2w6dQNmg6OHfG4QyrsBC8gdZpVQxtqF4M1mjepFURThTLNgMYsePxaX2WqY6D8GSm2grK2slbGBciHZ9hOE2smNpTuxenhieCdeH06E7qTqvYnImWTbbUSPlKL1wHrgTwZ+AWq+3H5MpRkwAAAAAElFTkSuQmCC';
+
+export default function ThumbnailElevated() {
+  return (
+    <Stack direction="vertical" gap={3}>
+      <Text type="supporting" color="secondary">
+        Raised tiles — `elevation` lifts an image off the page at rest
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Thumbnail src={NIGHT_FOREST} alt="Forest at night" elevation="low" />
+        <Thumbnail src={GOLDEN_SUNSET} alt="Golden sunset" elevation="high" />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/TypeaheadItem/TypeaheadItemShowcase.tsx

@@ -40,7 +40,7 @@ export default function TypeaheadItemShowcase() {
         renderItem={(item: PersonItem) => (
           <TypeaheadItem
             item={item}
-            icon={<Avatar name={item.label} size="small" />}
+            icon={<Avatar name={item.label} size="md" />}
             description={item.auxiliaryData.role}
           />
         )}

package/templates/pages/ai-chat/page.tsx

@@ -390,7 +390,7 @@ export default function AIChatConversationTemplate() {
                     {/* Assistant message: tool calls, markdown, code block */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         Looking into the auth files now. Let me read through the
                         code and trace the token refresh flow.
@@ -510,7 +510,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: test results table + code block */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatToolCalls
                         defaultIsExpanded
                         calls={[
@@ -608,7 +608,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: artifact card */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
                           {`I've drafted a design doc covering the problem, the fix, and the test matrix — pulling straight from the changes we just made.\n\nOpen the document below to review it. Want me to expand any section?`}
@@ -647,7 +647,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: in-progress tool call */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
                           {`On it — adding a **Rollout & Monitoring** section with a staged flag ramp and the alert thresholds. Updating the document now.`}

package/templates/pages/dashboard-portfolio/page.tsx

@@ -4,12 +4,7 @@
 
 import {useState} from 'react';
 
-import {
-  VStack,
-  HStack,
-  Layout,
-  LayoutContent,
-} from '@astryxdesign/core/Layout';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Grid, GridSpan} from '@astryxdesign/core/Grid';
@@ -642,7 +637,7 @@ function AssetRow({
       label={<Text weight="bold">{ticker}</Text>}
       description={name}
       href="#"
-      startContent={<Avatar name={ticker} size="small" />}
+      startContent={<Avatar name={ticker} size="md" />}
       endContent={
         <VStack gap={0} hAlign="end">
           <Text type="body">{value}</Text>
@@ -693,10 +688,7 @@ export default function DashboardPortfolioTemplate() {
             {/* KPI metric cards */}
             <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
               {Array.from({length: Math.ceil(metrics.length / 2)}, (_, i) => (
-                <Grid
-                  key={i}
-                  columns={{minWidth: 280, repeat: 'fit'}}
-                  gap={4}>
+                <Grid key={i} columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
                   {metrics.slice(i * 2, i * 2 + 2).map(m => (
                     <MetricCard key={m.label} {...m} />
                   ))}

package/templates/pages/detail-page/page.tsx

@@ -199,7 +199,7 @@ function PageHeader({
                   </Text>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Avatar name="Jane Doe" size="xsmall" />
+                    <Avatar name="Jane Doe" size="sm" />
                     <Text type="body" maxLines={1}>
                       Jane Doe
                     </Text>
@@ -444,7 +444,7 @@ function TimelineSection() {
           {ACTIVITY.map((item, i) => (
             <VStack key={i} gap={2}>
               <HStack gap={3} vAlign="start">
-                <Avatar name={item.user} size="small" />
+                <Avatar name={item.user} size="md" />
                 <StackItem size="fill">
                   <VStack gap={2}>
                     <Card variant="muted" padding={3}>
@@ -478,11 +478,7 @@ function TimelineSection() {
                           size="xsm"
                           color="secondary"
                         />
-                        <Icon
-                          icon={HeartIcon}
-                          size="xsm"
-                          color="secondary"
-                        />
+                        <Icon icon={HeartIcon} size="xsm" color="secondary" />
                         <Text type="supporting" color="secondary">
                           {item.reactions}
                         </Text>
@@ -533,16 +529,13 @@ function PanelContent() {
             321 Smith Road, CA 38238
           </MetadataListItem>
           <MetadataListItem label="Phone">234-</MetadataListItem>
-          <MetadataListItem label="Email">
-            janedoe@email.com
-          </MetadataListItem>
+          <MetadataListItem label="Email">janedoe@email.com</MetadataListItem>
           <MetadataListItem label="Billing Address">
             Same as shipping address
           </MetadataListItem>
         </MetadataList>
       </Collapsible>
-      <Collapsible
-        trigger={<Heading level={4}>Fraud Analysis</Heading>}>
+      <Collapsible trigger={<Heading level={4}>Fraud Analysis</Heading>}>
         <VStack gap={1}>
           <ProgressBar
             label="Risk level"

package/templates/pages/documentation-design/page.tsx

@@ -541,7 +541,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
         endContent={<Badge label="New" variant="info" />}
       />
     ),
-    avatar: <Avatar name="Alice" size="medium" />,
+    avatar: <Avatar name="Alice" size="lg" />,
     badge: <Badge label="Success" variant="success" />,
     card: (
       <Card>