@astryxdesign/cli 0.1.8-canary.0db5dfd → 0.1.8-canary.17d83c9

package/cli/commands/component-resolution.test.mjs

@@ -6,6 +6,12 @@ import {findShowcase, findRelatedBlocks} from '../../api/template/template.mjs';
 
 const CWD = {cwd: '.'};
 
+// These cases resolve components by walking the source tree and importing
+// every `.doc.mjs`, which takes several seconds and gets slower under the
+// full-suite parallel load — enough to cross the default 5s per-test limit.
+// Give the filesystem scans the same generous budget the spawned-CLI cases use.
+const SCAN_TIMEOUT = 30_000;
+
 // ─── Bug: sub-component doc resolution ──────────────────────────
 // When asking for a sub-component (Code, HStack, Heading, SideNavItem),
 // the API should scope the response to that specific sub-component,
@@ -68,7 +74,7 @@ describe('component() sub-component scoping', () => {
     const result = await component('SideNav', CWD);
     expect(result.data.name).toBe('SideNav');
   });
-});
+}, SCAN_TIMEOUT);
 
 // ─── Bug: findShowcase priority ─────────────────────────────────
 // findShowcase should prioritize exact directory matches over
@@ -111,7 +117,7 @@ describe('findShowcase() priority', () => {
     const result = await findShowcase('NonExistentWidget');
     expect(result).toBeNull();
   });
-});
+}, SCAN_TIMEOUT);
 
 // ─── Feature: component() → blocks (showcase, examples, related) ─
 // The blocks API returns three separate lists so consumers can use
@@ -174,4 +180,4 @@ describe('component() blocks integration', () => {
     expect(result.data.showcase.name).toBe('ThemeShowcase');
     expect(result.data.showcase.isShowcase).toBe(true);
   });
-});
+}, SCAN_TIMEOUT);

package/cli/commands/search.test.mjs

@@ -22,6 +22,13 @@ const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
 const REPO_ROOT = path.resolve(__dirname, '../../../..');
 const OPTS = {cwd: REPO_ROOT};
 
+// The API-level search walks the source tree and imports every `.doc.mjs` to
+// build its index; that takes several seconds and gets slower under the
+// full-suite parallel load — enough to cross the default 5s per-test limit.
+// The CLI-level cases spawn a subprocess (its own 30s cap) but still run under
+// the vitest per-test timeout. Give both the same generous scan budget.
+const SCAN_TIMEOUT = 30_000;
+
 function runCli(args) {
   const res = spawnSync('node', [CLI_BIN, ...args], {
     cwd: REPO_ROOT,
@@ -52,7 +59,7 @@ describe('search() API — ranking', () => {
     expect(iconButton.score).toBeGreaterThanOrEqual(70);
     expect(iconButton.reason.toLowerCase()).toContain('keyword');
   });
-});
+}, SCAN_TIMEOUT);
 
 describe('search() API — cross-domain', () => {
   it('returns results from more than one domain for a broad query', async () => {
@@ -74,7 +81,7 @@ describe('search() API — cross-domain', () => {
       expect(r.command.length).toBeGreaterThan(0);
     }
   });
-});
+}, SCAN_TIMEOUT);
 
 describe('search() API — filters', () => {
   it('--type component returns only components', async () => {
@@ -100,7 +107,7 @@ describe('search() API — filters', () => {
   it('rejects an unknown --type', async () => {
     await expect(search('x', {...OPTS, type: 'bogus'})).rejects.toThrow(/Unknown --type/);
   });
-});
+}, SCAN_TIMEOUT);
 
 describe('search() API — fuzzy / typo tolerance', () => {
   it('finds Button for the typo "buton"', async () => {
@@ -109,7 +116,7 @@ describe('search() API — fuzzy / typo tolerance', () => {
     expect(button).toBeTruthy();
     expect(button.domain).toBe('component');
   });
-});
+}, SCAN_TIMEOUT);
 
 describe('search() API — empty + envelope', () => {
   it('returns an empty result set (not an error) for a no-match query', async () => {
@@ -135,7 +142,7 @@ describe('search() API — empty + envelope', () => {
     expect(top).toHaveProperty('description');
     expect(top).toHaveProperty('command');
   });
-});
+}, SCAN_TIMEOUT);
 
 describe('scoreCandidate()', () => {
   it('scores an exact name match at 100', () => {
@@ -199,4 +206,4 @@ describe('search CLI — exit codes + JSON contract', () => {
     expect(r.stdout).toContain('astryx component Button');
     expect(r.stdout).toContain('[component]');
   });
-});
+}, SCAN_TIMEOUT);

package/docs/elevation.doc.mjs

@@ -56,7 +56,7 @@ export const docs = {
             [
               'low',
               'The component is in the normal page flow but should read as distinct from the background. Use for emphasis or to separate the component from the surface behind it — the component still sits on the page, it is not floating over other content.',
-              'A raised Card that needs emphasis, a ChatComposer, a resting Thumbnail',
+              'A raised Card that needs emphasis, a ChatComposer',
             ],
             [
               'med',
@@ -82,11 +82,11 @@ export const docs = {
       content: [
         {
           type: 'prose',
-          text: 'Configurable surfaces expose a single `elevation` prop instead of asking consumers to hand-write a box-shadow. It takes the graded enum `none | low | med | high`, narrowed per component to the steps that surface needs: Card, ClickableCard, SelectableCard, Button, IconButton, ButtonGroup, Thumbnail, and Banner expose the full scale, while ChatComposer exposes only `none | low`. `none` is a flat literal (`box-shadow: none`); the other levels map to the `--shadow-*` tokens above, so a surface stays theme-agnostic.',
+          text: 'Configurable surfaces expose a single `elevation` prop instead of asking consumers to hand-write a box-shadow. It takes the graded enum `none | low | med | high`, narrowed per component to the steps that surface needs: Card, ClickableCard, SelectableCard, Button, IconButton, ButtonGroup, and Banner expose the full scale, while ChatComposer exposes only `none | low`. `none` is a flat literal (`box-shadow: none`); the other levels map to the `--shadow-*` tokens above, so a surface stays theme-agnostic.',
         },
         {
           type: 'prose',
-          text: 'Prop defaults preserve current appearance: every surface defaults to `none` except ChatComposer, which defaults to `low` to keep its raised look. Set `elevation="none"` to flatten it — the flat composer draws a border with the same rest / hover / focus treatment as a text input. Thumbnail keeps its existing hover-only shadow at the `none` default.',
+          text: 'Prop defaults preserve current appearance: every surface defaults to `none` except ChatComposer, which defaults to `low` to keep its raised look. Set `elevation="none"` to flatten it — the flat composer draws a border with the same rest / hover / focus treatment as a text input.',
         },
         {
           type: 'code',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.8-canary.0db5dfd",
+  "version": "0.1.8-canary.17d83c9",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -86,10 +86,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/core": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/lab": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/theme-neutral": "0.1.8-canary.0db5dfd",
+    "@astryxdesign/charts": "0.1.8-canary.17d83c9",
+    "@astryxdesign/core": "0.1.8-canary.17d83c9",
+    "@astryxdesign/lab": "0.1.8-canary.17d83c9",
+    "@astryxdesign/theme-neutral": "0.1.8-canary.17d83c9",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -107,10 +107,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/core": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/lab": "0.1.8-canary.0db5dfd",
-    "@astryxdesign/theme-neutral": "0.1.8-canary.0db5dfd",
+    "@astryxdesign/charts": "0.1.8-canary.17d83c9",
+    "@astryxdesign/core": "0.1.8-canary.17d83c9",
+    "@astryxdesign/lab": "0.1.8-canary.17d83c9",
+    "@astryxdesign/theme-neutral": "0.1.8-canary.17d83c9",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/templates/blocks/components/Avatar/AvatarTooltip.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: 'Avatar',
+  name: 'Avatar — Tooltip',
+  displayName: 'Avatar — Tooltip',
+  description:
+    "By default an avatar shows its name in a tooltip on hover and keyboard focus. Pass a string to show custom text instead, or false to turn the tooltip off.",
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Avatar', 'Layout', 'Text'],
+};

package/templates/blocks/components/Avatar/AvatarTooltip.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Avatar} from '@astryxdesign/core/Avatar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function AvatarTooltip() {
+  return (
+    <Stack direction="vertical" gap={5}>
+      <Stack direction="vertical" gap={2}>
+        <Text type="supporting" color="secondary">
+          Hover or focus to reveal each name
+        </Text>
+        <Stack direction="horizontal" gap={4} vAlign="center">
+          <Avatar
+            src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+            name="Ana Thomas"
+            size="xl"
+          />
+          <Avatar
+            src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
+            name="Drew Young"
+            size="xl"
+          />
+          <Avatar
+            src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
+            name="Jihoo Song"
+            size="xl"
+          />
+        </Stack>
+      </Stack>
+      <Stack direction="vertical" gap={2}>
+        <Text type="supporting" color="secondary">
+          Custom tooltip text
+        </Text>
+        <Avatar
+          src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+          name="Itai Jordaan"
+          size="xl"
+          tooltip="Itai Jordaan · Engineering Lead"
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Breadcrumbs/BreadcrumbsMenuItem.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: 'Breadcrumbs',
+  name: 'Breadcrumbs — Menu item',
+  displayName: 'Breadcrumbs — Menu item',
+  description:
+    'Give a mid-trail crumb a `menu` prop to turn it into a menu trigger for switching between sibling destinations. It reuses the same item API as DropdownMenu, so an existing option array (or composed item children) drops in verbatim.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Breadcrumbs'],
+};

package/templates/blocks/components/Breadcrumbs/BreadcrumbsMenuItem.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Breadcrumbs,
+  BreadcrumbItem,
+  type BreadcrumbMenuOption,
+} from '@astryxdesign/core/Breadcrumbs';
+
+const teamMenu: BreadcrumbMenuOption[] = [
+  {label: 'Design', onClick: () => {}},
+  {label: 'Engineering', onClick: () => {}},
+  {type: 'divider'},
+  {label: 'Data', onClick: () => {}},
+];
+
+export default function BreadcrumbsMenuItem() {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem menu={teamMenu}>Teams</BreadcrumbItem>
+      <BreadcrumbItem isCurrent>Overview</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}

package/templates/blocks/components/DateInput/DateInputFormats.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: 'DateInput',
+  name: 'DateInput — Formats',
+  displayName: 'DateInput — Formats',
+  description:
+    "The format prop reuses Timestamp's format vocabulary to control how the committed value is displayed — date, date_long (default), date_weekday, and system_date — or a function for a fully custom string. Formatting applies only to the committed value, never to text the user is actively typing.",
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['DateInput', 'Layout', 'Text'],
+};

package/templates/blocks/components/DateInput/DateInputFormats.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+type DateString =
+  `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+
+export default function DateInputFormats() {
+  const [value, setValue] = useState<DateString | undefined>(
+    '2026-03-21' as DateString,
+  );
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <Text type="supporting" color="secondary">
+        The same committed date, displayed with different formats.
+      </Text>
+      <DateInput
+        label="Short month (date)"
+        value={value}
+        onChange={setValue}
+        format="date"
+      />
+      <DateInput
+        label="Long month (date_long, default)"
+        value={value}
+        onChange={setValue}
+        format="date_long"
+      />
+      <DateInput
+        label="With weekday (date_weekday)"
+        value={value}
+        onChange={setValue}
+        format="date_weekday"
+      />
+      <DateInput
+        label="ISO 8601 (system_date)"
+        value={value}
+        onChange={setValue}
+        format="system_date"
+      />
+      <DateInput
+        label="Custom function"
+        value={value}
+        onChange={setValue}
+        format={iso => `Ship by ${iso}`}
+      />
+    </Stack>
+  );
+}

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/Timestamp/TimestampFormats.tsx

@@ -17,6 +17,8 @@ export default function TimestampFormats() {
         </Text>
         <Stack direction="horizontal" gap={4} vAlign="center">
           <Timestamp value={DATE} format="date" color="primary" />
+          <Timestamp value={DATE} format="date_long" color="primary" />
+          <Timestamp value={DATE} format="date_weekday" color="primary" />
           <Timestamp value={DATE} format="date_time" color="primary" />
           <Timestamp value={DATE} format="time" color="primary" />
         </Stack>
@@ -26,9 +28,24 @@ export default function TimestampFormats() {
           System formats (logs and dev tools)
         </Text>
         <Stack direction="horizontal" gap={4} vAlign="center">
-          <Timestamp value={DATE} format="system_date" type="code" color="primary" />
-          <Timestamp value={DATE} format="system_date_time" type="code" color="primary" />
-          <Timestamp value={DATE} format="system_time" type="code" color="primary" />
+          <Timestamp
+            value={DATE}
+            format="system_date"
+            type="code"
+            color="primary"
+          />
+          <Timestamp
+            value={DATE}
+            format="system_date_time"
+            type="code"
+            color="primary"
+          />
+          <Timestamp
+            value={DATE}
+            format="system_time"
+            type="code"
+            color="primary"
+          />
         </Stack>
       </Stack>
     </Stack>

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

@@ -1,14 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-// 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>
-  );
-}