@astryxdesign/cli 0.1.7 → 0.1.8-canary.07362a9

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

@@ -23,9 +23,14 @@ export default function ThumbnailDisabled() {
             src={GOLDEN_SUNSET}
             alt="Golden sunset over mountains"
             label="golden-sunset.jpg"
+            showRemoveOn="always"
+            onRemove={() => {}}
+          />
+          <Thumbnail
+            label="document.pdf"
+            showRemoveOn="always"
             onRemove={() => {}}
           />
-          <Thumbnail label="document.pdf" onRemove={() => {}} />
         </Stack>
       </Stack>
       <Stack direction="vertical" gap={1}>

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

@@ -66,6 +66,7 @@ export default function ThumbnailGallery() {
             src={item.src}
             alt={item.alt}
             label={item.label}
+            showRemoveOn="always"
             onClick={() => setSelected(item.label)}
             onRemove={() =>
               setItems(prev => prev.filter(i => i.id !== item.id))

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

@@ -65,6 +65,7 @@ export default function ThumbnailRemovable() {
             src={item.src}
             alt={item.alt}
             label={item.label}
+            showRemoveOn="always"
             onRemove={() =>
               setItems(prev => prev.filter(i => i.id !== item.id))
             }

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>

package/templates/pages/messaging-shell/page.tsx

@@ -337,7 +337,7 @@ function StreamMessageGroup({message}: {message: StreamMessage}) {
   return (
     <ChatMessage
       sender={isSelf ? 'user' : 'assistant'}
-      avatar={isSelf ? undefined : <Avatar name={user.name} size="small" />}>
+      avatar={isSelf ? undefined : <Avatar name={user.name} size="md" />}>
       {message.bubbles.map((text, index) => (
         <ChatMessageBubble
           key={`${message.id}-${index}`}
@@ -395,7 +395,7 @@ export default function MessagingShellPage() {
 
   const workspaceRail = (
     <VStack gap={2} style={styles.rail}>
-      <Avatar name="Astryx HQ" size="small" />
+      <Avatar name="Astryx HQ" size="md" />
       {RAIL_ITEMS.map(item => (
         <IconButton
           key={item.id}
@@ -416,7 +416,7 @@ export default function MessagingShellPage() {
       />
       <Avatar
         name={USERS.you.name}
-        size="small"
+        size="md"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
     </VStack>
@@ -497,7 +497,7 @@ export default function MessagingShellPage() {
                 startContent={
                   <Avatar
                     name={USERS[dm.userId].name}
-                    size="xsmall"
+                    size="sm"
                     status={
                       <AvatarStatusDot
                         variant={PRESENCE_VARIANT[dm.presence]}
@@ -600,9 +600,7 @@ export default function MessagingShellPage() {
         <ChatMessageList density="compact">
           <ChatMessage
             sender="assistant"
-            avatar={
-              <Avatar name={USERS[THREAD_ROOT.userId].name} size="small" />
-            }>
+            avatar={<Avatar name={USERS[THREAD_ROOT.userId].name} size="md" />}>
             <ChatMessageBubble
               name={USERS[THREAD_ROOT.userId].name}
               metadata={
@@ -622,7 +620,7 @@ export default function MessagingShellPage() {
             <ChatMessage
               key={reply.id}
               sender="assistant"
-              avatar={<Avatar name={USERS[reply.userId].name} size="small" />}>
+              avatar={<Avatar name={USERS[reply.userId].name} size="md" />}>
               <ChatMessageBubble
                 name={USERS[reply.userId].name}
                 metadata={

package/templates/pages/table-grouped/page.tsx

@@ -22,7 +22,10 @@ import {Badge} from '@astryxdesign/core/Badge';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Selector} from '@astryxdesign/core/Selector';
 import {PowerSearch} from '@astryxdesign/core/PowerSearch';
-import type {PowerSearchConfig, PowerSearchFilter} from '@astryxdesign/core/PowerSearch';
+import type {
+  PowerSearchConfig,
+  PowerSearchFilter,
+} from '@astryxdesign/core/PowerSearch';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Popover} from '@astryxdesign/core/Popover';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
@@ -798,19 +801,15 @@ function TaskDetailPanel({
           </MetadataListItem>
           <MetadataListItem label="Assignee">
             <HStack gap={2} vAlign="center">
-              <Avatar name={task.assignee} size="xsmall" />
+              <Avatar name={task.assignee} size="sm" />
               <Text type="body">{task.assignee}</Text>
             </HStack>
           </MetadataListItem>
           <MetadataListItem label="Project">
             {task.project || '\u2014'}
           </MetadataListItem>
-          <MetadataListItem label="Created">
-            {task.created}
-          </MetadataListItem>
-          <MetadataListItem label="Updated">
-            {task.updated}
-          </MetadataListItem>
+          <MetadataListItem label="Created">{task.created}</MetadataListItem>
+          <MetadataListItem label="Updated">{task.updated}</MetadataListItem>
         </MetadataList>
 
         {task.tags.length > 0 && (
@@ -942,11 +941,7 @@ export default function DataTableTemplate() {
                       </RadioList>
                     </VStack>
                   }>
-                  <Button
-                    label="View Options"
-                    variant="secondary"
-                    size="md"
-                  />
+                  <Button label="View Options" variant="secondary" size="md" />
                 </Popover>
               </HStack>
             </VStack>
@@ -1066,7 +1061,7 @@ export default function DataTableTemplate() {
                             </Text>
                           </TableCell>
                           <TableCell>
-                            <Avatar name={task.assignee} size="xsmall" />
+                            <Avatar name={task.assignee} size="sm" />
                           </TableCell>
                           <TableCell>
                             <DropdownMenu

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

@@ -16,7 +16,10 @@ import {Button} from '@astryxdesign/core/Button';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Avatar} from '@astryxdesign/core/Avatar';
-import {PowerSearch, usePowerSearchConfig} from '@astryxdesign/core/PowerSearch';
+import {
+  PowerSearch,
+  usePowerSearchConfig,
+} from '@astryxdesign/core/PowerSearch';
 import type {PowerSearchFilter} from '@astryxdesign/core/PowerSearch';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
@@ -353,7 +356,7 @@ const columns: TableColumn<DogRow>[] = [
     width: proportional(2),
     renderCell: (item: DogRow) => (
       <HStack gap={3} vAlign="center">
-        <Avatar name={item.name} size="small" />
+        <Avatar name={item.name} size="md" />
         <VStack gap={0}>
           <Text type="body">{item.name}</Text>
           <Text type="supporting" color="secondary">
@@ -367,9 +370,7 @@ const columns: TableColumn<DogRow>[] = [
     key: 'biography',
     header: 'Biography',
     width: proportional(5),
-    renderCell: (item: DogRow) => (
-      <Text type="body">{item.biography}</Text>
-    ),
+    renderCell: (item: DogRow) => <Text type="body">{item.biography}</Text>,
   },
   {
     key: 'age',
@@ -406,10 +407,7 @@ export default function TablePageTemplate() {
               icon={<Icon icon={ArrowDownTrayIcon} size="sm" />}
               variant="ghost"
             />
-            <Button
-              label="Add"
-              icon={<Icon icon={PlusIcon} size="sm" />}
-            />
+            <Button label="Add" icon={<Icon icon={PlusIcon} size="sm" />} />
           </HStack>
         </LayoutHeader>
       }

package/templates/pages/table-page-heatmap-status/page.tsx

@@ -338,17 +338,13 @@ const columns: TableColumn<IncidentRow>[] = [
     key: 'product',
     header: 'Product',
     width: proportional(2),
-    renderCell: (item: IncidentRow) => (
-      <Text type="body">{item.product}</Text>
-    ),
+    renderCell: (item: IncidentRow) => <Text type="body">{item.product}</Text>,
   },
   {
     key: 'title',
     header: 'Description',
     width: proportional(5),
-    renderCell: (item: IncidentRow) => (
-      <Text type="body">{item.title}</Text>
-    ),
+    renderCell: (item: IncidentRow) => <Text type="body">{item.title}</Text>,
   },
   {
     key: 'startTime',
@@ -362,9 +358,7 @@ const columns: TableColumn<IncidentRow>[] = [
     key: 'duration',
     header: 'Duration',
     width: pixel(100),
-    renderCell: (item: IncidentRow) => (
-      <Text type="body">{item.duration}</Text>
-    ),
+    renderCell: (item: IncidentRow) => <Text type="body">{item.duration}</Text>,
   },
   {
     key: 'oncall',
@@ -375,7 +369,7 @@ const columns: TableColumn<IncidentRow>[] = [
         <Avatar
           name={item.oncall}
           src={ONCALL_AVATARS[item.oncall]}
-          size="xsmall"
+          size="sm"
         />
         <Text type="body">{item.oncall}</Text>
       </HStack>
@@ -396,9 +390,7 @@ const columns: TableColumn<IncidentRow>[] = [
     key: 'date',
     header: 'Date',
     width: pixel(110),
-    renderCell: (item: IncidentRow) => (
-      <Text type="body">{item.date}</Text>
-    ),
+    renderCell: (item: IncidentRow) => <Text type="body">{item.date}</Text>,
   },
 ];
 

package/{src/types → types}/api.contract.assert.ts

@@ -31,14 +31,14 @@
  */
 
 import type * as Api from './api';
-import type {component} from '../api/component.mjs';
-import type {docs} from '../api/docs.mjs';
-import type {discover} from '../api/discover.mjs';
-import type {template} from '../api/template.mjs';
+import type {component} from '../api/component/component.mjs';
+import type {docs} from '../api/docs/docs.mjs';
+import type {discover} from '../api/discover/discover.mjs';
+import type {template} from '../api/template/template.mjs';
 
 /** Resolve to `true` only when `A` and `B` are mutually assignable. */
 type Equal<A, B> =
-  (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2)
+  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2
     ? true
     : false;
 
@@ -52,16 +52,25 @@ type Opt<T> = NonNullable<T>;
 // must describe the same set of keys/types, in both directions. ──────────────
 
 type _ComponentOptions = Expect<
-  Equal<Opt<Parameters<typeof Api.component>[1]>, Opt<Parameters<typeof component>[1]>>
+  Equal<
+    Opt<Parameters<typeof Api.component>[1]>,
+    Opt<Parameters<typeof component>[1]>
+  >
 >;
 type _DocsOptions = Expect<
   Equal<Opt<Parameters<typeof Api.docs>[2]>, Opt<Parameters<typeof docs>[2]>>
 >;
 type _DiscoverOptions = Expect<
-  Equal<Opt<Parameters<typeof Api.discover>[1]>, Opt<Parameters<typeof discover>[1]>>
+  Equal<
+    Opt<Parameters<typeof Api.discover>[1]>,
+    Opt<Parameters<typeof discover>[1]>
+  >
 >;
 type _TemplateOptions = Expect<
-  Equal<Opt<Parameters<typeof Api.template>[1]>, Opt<Parameters<typeof template>[1]>>
+  Equal<
+    Opt<Parameters<typeof Api.template>[1]>,
+    Opt<Parameters<typeof template>[1]>
+  >
 >;
 
 // ── Positional-argument parity: arity and positional types must match. ───────

package/{src/types → types}/api.d.ts

@@ -44,17 +44,24 @@ import type {
 import type {SearchResponse, SearchDomain} from './search';
 import type {ErrorCode} from './error-codes';
 import type {DoctorResponse} from './doctor';
+import type {
+  LayoutForm,
+  LayoutExpandResponse,
+  LayoutCheckResponse,
+  LayoutGrammarResponse,
+} from './layout';
+import type {ValidateIntegrationResponse} from './validate-integration';
+import type {AstryxIntegrationIssue} from './integration';
+import type {BuildHelpResponse, BuildKitResponse} from './build';
+import type {SwizzleListResponse, SwizzleCopyResponse} from './swizzle';
+import type {Suggestion} from './base';
 
 /** Structured API error with a stable machine-readable code. */
 export declare class AstryxError extends Error {
   /** Stable error code; consumers branch on this, never the message. */
   code: ErrorCode;
-  suggestions?: Array<{name: string; reason: string}>;
-  constructor(
-    message: string,
-    suggestions?: Array<{name: string; reason: string}>,
-    code?: ErrorCode,
-  );
+  suggestions?: Suggestion[];
+  constructor(message: string, suggestions?: Suggestion[], code?: ErrorCode);
 }
 
 // ── Component ────────────────────────────────────────────────────────
@@ -100,9 +107,7 @@ export interface DocsOptions {
 }
 
 type DocsResult =
-  | DocsListResponse
-  | DocsDetailResponse
-  | DocsDetailSectionResponse;
+  DocsListResponse | DocsDetailResponse | DocsDetailSectionResponse;
 
 export declare function docs(
   topic?: string,
@@ -191,6 +196,47 @@ export declare function search(
   options?: SearchOptions,
 ): Promise<SearchResponse>;
 
+// ── Build ────────────────────────────────────────────────────────────
+
+export interface BuildOptions {
+  cwd?: string;
+  type?: SearchDomain;
+  limit?: number;
+}
+
+/**
+ * Page-building assistant. No query → `build.help` (playbook signal); a query →
+ * `build.kit` (grouped composition kit of raw search entries + frame/foundation).
+ */
+export declare function build(
+  query?: string,
+  options?: BuildOptions,
+): Promise<BuildHelpResponse | BuildKitResponse>;
+
+// ── Swizzle ──────────────────────────────────────────────────────────
+
+export interface SwizzleOptions {
+  cwd?: string;
+  /** Output directory (must resolve inside cwd). Defaults to ./components/astryx. */
+  output?: string;
+  /** Scope to a specific owning package when a name is ambiguous. */
+  package?: string;
+  /** Force the list response even with a component argument. */
+  list?: boolean;
+  /** Overwrite existing files instead of erroring. */
+  overwrite?: boolean;
+}
+
+/**
+ * List swizzlable components (no name / `list`) or copy one component's source
+ * into the project (side effect) and return a `swizzle.copy` receipt. Errors
+ * throw AstryxError (ERR_UNKNOWN_COMPONENT, ERR_AMBIGUOUS_COMPONENT, …).
+ */
+export declare function swizzle(
+  component?: string,
+  options?: SwizzleOptions,
+): Promise<SwizzleListResponse | SwizzleCopyResponse>;
+
 // ── Doctor ──────────────────────────────────
 
 export interface DoctorOptions {
@@ -200,3 +246,58 @@ export interface DoctorOptions {
 export declare function doctor(
   options?: DoctorOptions,
 ): Promise<DoctorResponse>;
+
+// ── Layout ───────────────────────────────────────────────────────────
+
+export interface LayoutExpandOptions {
+  targetPath?: string;
+  form?: LayoutForm;
+  loose?: boolean;
+  name?: string;
+  cwd?: string;
+}
+
+export declare function layoutExpand(
+  expression: string,
+  options?: LayoutExpandOptions,
+): Promise<LayoutExpandResponse>;
+
+export interface LayoutCheckOptions {
+  form?: LayoutForm;
+  loose?: boolean;
+  cwd?: string;
+}
+
+export declare function layoutCheck(
+  expression: string,
+  options?: LayoutCheckOptions,
+): Promise<LayoutCheckResponse>;
+
+export interface LayoutGrammarOptions {
+  cwd?: string;
+}
+
+export declare function layoutGrammar(
+  options?: LayoutGrammarOptions,
+): Promise<LayoutGrammarResponse>;
+
+// ── Validate integration ─────────────────────────────────────────────
+
+export interface ValidateIntegrationOptions {
+  cwd?: string;
+}
+
+/**
+ * Validate the local integration (no `pkg`) or an installed one (`pkg` given).
+ * The no-manifest local case returns `{ name: null, version: null, issues: [] }`.
+ */
+export declare function validateIntegration(
+  pkg?: string,
+  options?: ValidateIntegrationOptions,
+): Promise<ValidateIntegrationResponse>;
+
+/** Count issues by severity. */
+export declare function summarizeIssues(issues: AstryxIntegrationIssue[]): {
+  errors: number;
+  warnings: number;
+};