@astryxdesign/cli 0.1.4-canary.549e44f → 0.1.4-canary.570c837

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.549e44f",
+  "version": "0.1.4-canary.570c837",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,16 +75,12 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.549e44f",
-    "@astryxdesign/core": "0.1.4-canary.549e44f",
-    "@astryxdesign/lab": "0.1.4-canary.549e44f",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.549e44f",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.570c837",
+    "@astryxdesign/lab": "0.1.4-canary.570c837",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.570c837",
+    "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
-    "@astryxdesign/charts": {
-      "optional": true
-    },
     "@astryxdesign/core": {
       "optional": true
     },
@@ -96,11 +92,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.549e44f",
-    "@astryxdesign/core": "0.1.4-canary.549e44f",
-    "@astryxdesign/lab": "0.1.4-canary.549e44f",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.549e44f",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.570c837",
+    "@astryxdesign/lab": "0.1.4-canary.570c837",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.570c837",
+    "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/api/component.mjs

@@ -8,7 +8,6 @@
  */
 
 import * as fs from 'node:fs';
-import * as path from 'node:path';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 import {findCoreDir, discoverExternalPackages} from '../utils/paths.mjs';
 import {
@@ -561,7 +560,7 @@ export async function component(name, options = {}) {
 
     // Examples: blocks in the component's own directory, or
     // componentsUsed match for sub-components without a directory.
-    const ownDir = allBlocks.filter(b => path.basename(b.category) === dirName);
+    const ownDir = allBlocks.filter(b => b.category.split('/').pop() === dirName);
     const examples = ownDir.length > 0
       ? ownDir
       : allBlocks.filter(b => b.componentsUsed?.some(c => c === dirName));

package/src/api/doctor.mjs

@@ -115,21 +115,10 @@ function findThemePackages(cwd) {
     return found;
   }
   for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
     if (!entry.name.startsWith('theme-')) continue;
-    const dir = path.join(scopeDir, entry.name);
-    // pnpm installs packages as symlinks into node_modules/.pnpm, and a
-    // symlink dirent reports isDirectory() as false — stat the target instead.
-    let isDir = entry.isDirectory();
-    if (!isDir && entry.isSymbolicLink()) {
-      try {
-        isDir = fs.statSync(dir).isDirectory();
-      } catch {
-        isDir = false;
-      }
-    }
-    if (!isDir) continue;
     const name = `@astryxdesign/${entry.name}`;
-    found.push({name, version: pkgVersion(dir)});
+    found.push({name, version: pkgVersion(path.join(scopeDir, entry.name))});
   }
   return found;
 }

package/src/api/template.mjs

@@ -63,17 +63,6 @@ const DEMO_IMAGE_PATTERNS = [
   /https?:\/\/(?:[\w-]+\.)*lookaside\.facebook\.com\/[^\s'"`)]+/g,
 ];
 
-/**
- * Normalize path into Unix path (using forward slashes) for consistent comparison
- * across Windows, macOS, and Linux.
- *
- * @param {string} p - The file path to normalize.
- * @returns {string} The normalized Unix path.
- */
-function toPosixPath(p) {
-  return p.replace(/\\/g, '/');
-}
-
 /**
  * Replace demo image references with a self-contained placeholder data URI so
  * scaffolded pages render with zero setup. Builders drop in their own images.
@@ -155,7 +144,7 @@ async function discoverBlocks() {
     const tsxPath = path.join(path.dirname(docPath), basename + '.tsx');
     if (!fs.existsSync(tsxPath)) continue;
     const doc = await loadDocModule(docPath);
-    const relPath = toPosixPath(path.relative(BLOCKS_DIR, path.dirname(docPath)));
+    const relPath = path.relative(BLOCKS_DIR, path.dirname(docPath));
     blocks.push({
       type: 'block',
       dirName: basename,
@@ -191,7 +180,7 @@ async function discoverExternalBlocks(cwd = process.cwd()) {
       const tsxPath = path.join(path.dirname(docPath), basename + '.tsx');
       if (!fs.existsSync(tsxPath)) continue;
       const doc = await loadDocModule(docPath);
-      const relPath = toPosixPath(path.relative(ext.blocksDir, path.dirname(docPath)));
+      const relPath = path.relative(ext.blocksDir, path.dirname(docPath));
       blocks.push({
         type: 'block',
         dirName: basename,
@@ -439,7 +428,7 @@ export async function findShowcase(componentName, cwd, options) {
 
   // Priority 1: own directory (components/Badge/ for "Badge")
   const dirMatch = showcases.find(b => {
-    const catDir = path.basename(b.category).toLowerCase();
+    const catDir = b.category.split('/').pop()?.toLowerCase();
     return catDir === lc;
   });
   if (dirMatch) return toResult(dirMatch);

package/src/codemods/__tests__/runner.test.mjs

@@ -99,43 +99,5 @@ describe('runCodemods — unified config codemod path', () => {
     expect(fs.readFileSync(path.join(srcDir, 'a.ts'), 'utf-8')).toContain(
       'const bar = 1',
     );
-    // writtenFiles must be returned (consumed by upgrade.mjs to run the
-    // post-codemod formatting/lint hooks). Regression guard: it was previously
-    // built internally but omitted from the return object, so hooks received an
-    // empty file list and silently skipped, leaving codemod output unformatted.
-    expect(result.writtenFiles).toEqual([path.join(srcDir, 'a.ts')]);
-  });
-
-  it('returns writtenFiles for every changed file (post-codemod hook input)', async () => {
-    const srcDir = path.join(tmpDir, 'src');
-    fs.mkdirSync(srcDir);
-    fs.writeFileSync(path.join(srcDir, 'a.ts'), 'const foo = 1;\n');
-    fs.writeFileSync(path.join(srcDir, 'b.ts'), 'const foo = 2;\n');
-    fs.writeFileSync(path.join(srcDir, 'c.ts'), 'const untouched = 3;\n');
-
-    const versionManifests = [
-      {
-        version: '0.1.3',
-        transforms: [
-          {
-            name: 'synthetic-code-codemod',
-            meta: {title: 'Synthetic code codemod'},
-            transform: file => file.source.replace(/foo/g, 'bar'),
-          },
-        ],
-      },
-    ];
-
-    const result = await runCodemods(versionManifests, {
-      apply: true,
-      path: './src',
-      silent: true,
-    });
-
-    expect(result.totalFilesChanged).toBe(2);
-    // Only the two files that actually changed are reported (not c.ts).
-    expect([...result.writtenFiles].sort()).toEqual(
-      [path.join(srcDir, 'a.ts'), path.join(srcDir, 'b.ts')].sort(),
-    );
   });
 });

package/src/codemods/runner.mjs

@@ -178,7 +178,6 @@ function toUnifiedEntry(transformEntry, version) {
  * @param {string|undefined} options.codemod - Run only this specific transform
  * @param {Set<string>} [options.skipCodemods] - Transform names to exclude
  * @param {boolean} [options.silent] - Suppress all human-facing output (for --json)
- * @returns {{totalFilesChanged: number, totalTransformsApplied: number, totalValidationBlocked: number, writtenFiles: string[], errors: Array, skippedOptional: Array}}
  */
 export async function runCodemods(
   versionManifests,
@@ -406,7 +405,6 @@ export async function runCodemods(
     totalFilesChanged,
     totalTransformsApplied,
     totalValidationBlocked,
-    writtenFiles,
     errors,
     skippedOptional,
   };

package/src/commands/agent-docs.mjs

@@ -29,8 +29,7 @@ import {ERROR_CODES} from '../lib/error-codes.mjs';
 
 const AGENTS_MD = 'AGENTS.md';
 const CLAUDE_MD = 'CLAUDE.md';
-const CLAUDE_DIR_MD = '.claude/CLAUDE.md'; // cross-platform literal
-
+const CLAUDE_DIR_MD = path.join('.claude', 'CLAUDE.md');
 
 const MARKER_START = '<!-- ASTRYX:START -->';
 const MARKER_END = '<!-- ASTRYX:END -->';

package/src/commands/build-theme.mjs

@@ -175,85 +175,14 @@ async function getKnownValues(componentName) {
   return _knownValuesCache.get(componentName);
 }
 
-/**
- * Resolve `@astryxdesign/core`'s package root relative to the CLI package. Core
- * and the CLI ship as siblings (`@astryxdesign/core`, `@astryxdesign/cli`), so
- * `../../../core` from `src/commands/` reaches core whether installed from npm
- * or run inside the monorepo. Returns null if it can't be found.
- */
-function resolveCoreRoot() {
-  const cliDir = path.dirname(fileURLToPath(import.meta.url));
-  const coreRoot = path.resolve(cliDir, '../../../core');
-  return fs.existsSync(coreRoot) ? coreRoot : null;
-}
-
-/**
- * Read the type declarations `@astryxdesign/core/<Component>` exposes so we can
- * check whether a given augmentation-target interface actually exists before
- * generating a module augmentation against it.
- *
- * Reads the shipped `dist/<Component>/index.d.ts` (what a consumer's TypeScript
- * actually sees), falling back to the `src/<Component>/index.ts` in the
- * monorepo. Returns the file contents, or '' if nothing is found.
- */
-const _componentDeclCache = new Map();
-function readComponentDeclarations(pascalName) {
-  if (_componentDeclCache.has(pascalName)) {
-    return _componentDeclCache.get(pascalName);
-  }
-  let contents = '';
-  const coreRoot = resolveCoreRoot();
-  if (coreRoot) {
-    const candidates = [
-      path.join(coreRoot, 'dist', pascalName, 'index.d.ts'),
-      path.join(coreRoot, 'src', pascalName, 'index.ts'),
-    ];
-    for (const file of candidates) {
-      try {
-        if (fs.existsSync(file)) {
-          contents = fs.readFileSync(file, 'utf-8');
-          break;
-        }
-      } catch {
-        // ignore and try the next candidate
-      }
-    }
-  }
-  _componentDeclCache.set(pascalName, contents);
-  return contents;
-}
-
-/**
- * Determine whether `@astryxdesign/core/<Component>` exports an interface named
- * `interfaceName` that can be augmented via module augmentation.
- *
- * Only interfaces are extension points — closed literal-union types (e.g.
- * `HeadingType`, `ButtonSize`) are NOT augmentable, so a generated augmentation
- * against them is dead code. We check that the name is exported (directly or
- * re-exported) as a type/interface.
- */
-function componentHasAugmentableInterface(pascalName, interfaceName) {
-  const decl = readComponentDeclarations(pascalName);
-  if (!decl) return false;
-  // Word-boundary match so `ButtonVariantMap` doesn't match `XButtonVariantMap`.
-  const re = new RegExp(`\\b${interfaceName}\\b`);
-  return re.test(decl);
-}
-
 /**
  * Generate TypeScript declaration content with module augmentation for custom
  * component prop values found in the theme's `components` keys. Reads known
  * values from doc files to filter out base prop values.
  *
- * Interface naming convention: PascalCase(component) + PascalCase(prop) + Map
- *   banner + status → BannerStatusMap
- *   button + variant → ButtonVariantMap
- *
- * An augmentation is only emitted when `@astryxdesign/core/<Component>` actually
- * exports a matching interface. Props backed by closed literal-union types
- * (e.g. Button `size`, Heading `type`/`level`) have no augmentation point, so
- * generating a `declare module` block for them would be dead code — those are
- * skipped.
+ * Interface naming convention: Astryx + PascalCase(component) + PascalCase(prop) + Map
+ *   banner + status → XDSBannerStatusMap
+ *   button + variant → XDSButtonVariantMap
  *
  * @param {object} themeDef - Theme definition (resolved by defineTheme)
  * @returns {Promise<string|null>} TypeScript declaration content, or null if no augmentations needed
@@ -305,14 +234,7 @@ async function generateVariantDeclarationsAsync(themeDef) {
       const pascal = toPascalCase(component);
       const propPascal = prop.charAt(0).toUpperCase() + prop.slice(1);
       const modulePath = `@astryxdesign/core/${pascal}`;
-      const interfaceName = `${pascal}${propPascal}Map`;
-
-      // Only augment interfaces that actually exist as an extension point in
-      // core. Props backed by closed literal-union types (e.g. Button `size`,
-      // Heading `type`/`level`) have no `*Map` interface — a `declare module`
-      // block against a non-existent interface just creates a new, unused
-      // interface and never extends the component's prop union, so skip it.
-      if (!componentHasAugmentableInterface(pascal, interfaceName)) continue;
+      const interfaceName = `XDS${pascal}${propPascal}Map`;
 
       sections.push(`declare module '${modulePath}' {`);
       sections.push(`  interface ${interfaceName} {`);
@@ -325,13 +247,6 @@ async function generateVariantDeclarationsAsync(themeDef) {
     }
   }
 
-  // If every custom value targeted a non-augmentable prop, there's nothing to
-  // emit beyond the header — return null so no `.variants.d.ts` is written.
-  const hasEmittedAugmentation = sections.some(line =>
-    line.startsWith('declare module'),
-  );
-  if (!hasEmittedAugmentation) return null;
-
   return sections.join('\n');
 }
 
@@ -518,21 +433,13 @@ ${iconReExport}`;
 /**
  * Generate TypeScript declarations for a built theme module.
  */
-function generateBuiltTypes(themeDef, iconInfo, variantsFileName) {
+function generateBuiltTypes(themeDef, iconInfo) {
   const iconType = iconInfo
     ? `import type { IconRegistry } from '@astryxdesign/core/Icon';
 export declare const ${iconInfo.exportName}: IconRegistry;
 `
     : '';
-  // Pull in the generated custom-variant augmentations so that importing the
-  // theme's types also loads the module augmentations (otherwise the
-  // `.variants.d.ts` is emitted but never referenced, and the custom variants
-  // never widen the component prop unions for consumers).
-  const variantsRef = variantsFileName
-    ? `/// <reference path="./${variantsFileName}" />
-`
-    : '';
-  return `${variantsRef}import type { DefinedTheme } from '@astryxdesign/core/theme';
+  return `import type { DefinedTheme } from '@astryxdesign/core/theme';
 ${iconType}export declare const ${toIdentifier(themeDef.name)}Theme: DefinedTheme;
 `;
 }
@@ -987,23 +894,19 @@ export function registerTheme(program) {
 
       const iconInfo = extractIconInfo(filePath);
 
-      // Type augmentation .d.ts if theme has custom prop values. Computed
-      // before the main .d.ts so the latter can reference it (see below).
+      // Generate all file contents in memory first.
+      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
+      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
+      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo);
+
+      // Type augmentation .d.ts if theme has custom prop values
       const augmentationSource = resolvedTheme || themeDef;
       const variantDecl = await generateVariantDeclarationsAsync(augmentationSource);
-      const variantsFileName = variantDecl ? `${baseName}.variants.d.ts` : null;
-      const variantDtsPath = variantDecl ? path.join(outDir, variantsFileName) : null;
+      const variantDtsPath = variantDecl ? path.join(outDir, `${baseName}.variants.d.ts`) : null;
       const variantContent = variantDecl
         ? generatedHeader(sourceRelative, 'ts', buildCommand) + variantDecl
         : null;
 
-      // Generate all file contents in memory first. The main .d.ts references
-      // the variants file (when present) via a triple-slash directive so
-      // importing the theme also loads the custom-variant augmentations.
-      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
-      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
-      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo, variantsFileName);
-
       // Atomic-ish write: stage every file as `<dest>.tmp`, then rename
       // each into place. If any stage step fails we clean up partials and
       // exit; if a rename fails mid-way we still have the originals (or

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

@@ -78,13 +78,13 @@ describe('findShowcase() priority', () => {
   it('Badge resolves to Badge dir, not a sibling that uses Badge', async () => {
     const result = await findShowcase('Badge');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Badge[/\\]/);
+    expect(result.filePath).toMatch(/\/Badge\//);
   });
 
   it('Avatar resolves to Avatar dir, not AvatarStatusDot', async () => {
     const result = await findShowcase('Avatar');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Avatar[/\\]/);
+    expect(result.filePath).toMatch(/\/Avatar\//);
     expect(result.filePath).not.toMatch(/AvatarStatusDot/);
   });
 
@@ -92,7 +92,7 @@ describe('findShowcase() priority', () => {
     const result = await findShowcase('ClickableCard');
     expect(result).not.toBeNull();
     expect(result.name).toBe('ClickableCard');
-    expect(result.filePath).toMatch(/[/\\]Card[/\\]/);
+    expect(result.filePath).toMatch(/\/Card\//);
   });
 
   it('SelectableCard resolves via componentsUsed in Card/', async () => {
@@ -104,7 +104,7 @@ describe('findShowcase() priority', () => {
   it('Stack resolves to Stack dir despite componentsUsed elsewhere', async () => {
     const result = await findShowcase('Stack');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Stack[/\\]/);
+    expect(result.filePath).toMatch(/\/Stack\//);
   });
 
   it('returns null for nonexistent component', async () => {

package/src/commands/doctor.test.mjs

@@ -63,33 +63,6 @@ function installPkg(name, version = '1.0.0') {
   return dir;
 }
 
-/**
- * Mirror pnpm's layout: the real package lives under node_modules/.pnpm and
- * the entry in the scope directory is a symlink to it.
- */
-function installPkgPnpmStyle(name, version = '1.0.0') {
-  const realDir = path.join(
-    tmpDir,
-    'node_modules',
-    '.pnpm',
-    `${name.replace('/', '+')}@${version}`,
-    'node_modules',
-    ...name.split('/'),
-  );
-  fs.mkdirSync(realDir, {recursive: true});
-  fs.writeFileSync(
-    path.join(realDir, 'package.json'),
-    JSON.stringify({name, version, main: 'index.js'}),
-  );
-  fs.writeFileSync(path.join(realDir, 'index.js'), 'module.exports = {};');
-  const linkPath = path.join(tmpDir, 'node_modules', ...name.split('/'));
-  fs.mkdirSync(path.dirname(linkPath), {recursive: true});
-  // 'junction' keeps this working on Windows without elevated permissions;
-  // it is ignored on posix.
-  fs.symlinkSync(realDir, linkPath, 'junction');
-  return linkPath;
-}
-
 function find(checks, id) {
   return checks.find(c => c.id === id);
 }
@@ -146,13 +119,6 @@ describe('doctor — individual checks', () => {
     expect(res.status).toBe('pass');
   });
 
-  it('themes: detects pnpm-style symlinked theme packages (#3530)', () => {
-    installPkgPnpmStyle('@astryxdesign/theme-neutral', '0.1.2');
-    const res = checkThemes({cwd: tmpDir, configTheme: 'default'});
-    expect(res.status).toBe('pass');
-    expect(res.message).toContain('@astryxdesign/theme-neutral');
-  });
-
   it('config: INFO when no astryx.config.mjs', async () => {
     const res = await checkConfig({cwd: tmpDir, configPath: null});
     expect(res.status).toBe('info');

package/src/lib/component-discovery.mjs

@@ -335,13 +335,10 @@ export function resolveImportPath(coreDir, componentName) {
     ? JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
     : null;
 
-  const exportKeys = Object.keys(pkg?.exports || {});
-
   // Priority 1: exact subpath export matching the component name (e.g. ./Heading)
   // This allows convenience re-export directories to win over the source directory.
-  const exactMatch = exportKeys.find(k => k.toLowerCase() === `./${componentName}`.toLowerCase());
-  if (exactMatch) {
-    return `@astryxdesign/core/${exactMatch.slice(2)}`;
+  if (pkg?.exports?.[`./${componentName}`]) {
+    return `@astryxdesign/core/${componentName}`;
   }
 
   const sourcePath = findComponentSource(coreDir, componentName);
@@ -351,9 +348,8 @@ export function resolveImportPath(coreDir, componentName) {
   const relToSrc = path.relative(srcDir, sourcePath);
   const topDir = relToSrc.split(path.sep)[0];
 
-  const topMatch = exportKeys.find(k => k.toLowerCase() === `./${topDir}`.toLowerCase());
-  if (topMatch) {
-    return `@astryxdesign/core/${topMatch.slice(2)}`;
+  if (pkg?.exports?.[`./${topDir}`]) {
+    return `@astryxdesign/core/${topDir}`;
   }
 
   return '@astryxdesign/core';

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

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -475,13 +481,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -29,7 +35,11 @@ import {
 // ============= DATA =============
 
 type ProductCategory =
-  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
+  | 'Running'
+  | 'Lifestyle'
+  | 'Basketball'
+  | 'Training'
+  | 'Skateboarding';
 
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -829,13 +839,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',

package/src/commands/build-theme.variants.test.mjs

@@ -1,204 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Regression test for the custom-variant type augmentations emitted by
- * `astryx theme build` (#3391 companion: #3371).
- *
- * When a theme declares a custom component prop value (e.g.
- * `button['variant:accentOutline']`), the build emits a `<name>.variants.d.ts`
- * with a module augmentation so the custom value type-checks. This suite pins
- * the two bugs that made that augmentation dead code:
- *
- *   1. The augmentation targeted a non-existent, `XDS`-prefixed interface
- *      (`XDSButtonVariantMap`) instead of core's real `ButtonVariantMap`, so it
- *      created a new unused interface and never widened the prop union.
- *   2. Props with no augmentation point (closed literal-union types such as
- *      Button `size` or Heading `type`/`level`) still got a `declare module`
- *      block against a `*Map` interface that doesn't exist.
- *   3. The generated `.variants.d.ts` was never referenced by the main
- *      `<name>.d.ts`, so even a correct augmentation never loaded.
- *
- * Building `astryx theme build` requires a compiled @astryxdesign/core, so this
- * suite builds core once in beforeAll (mirrors build-theme.prose.test.mjs).
- */
-
-import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
-import {execFileSync} from 'node:child_process';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as os from 'node:os';
-import {fileURLToPath} from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
-const REPO_ROOT = path.resolve(__dirname, '../../../..');
-const CORE_THEME_ENTRY = path.join(
-  REPO_ROOT,
-  'packages/core/dist/theme/index.js',
-);
-// The fix reads core's shipped component declarations to decide whether an
-// interface is augmentable; those .d.ts files come from the same core build.
-const CORE_BUTTON_DTS = path.join(
-  REPO_ROOT,
-  'packages/core/dist/Button/index.d.ts',
-);
-
-function runCli(args, cwd) {
-  try {
-    const out = execFileSync('node', [CLI_BIN, ...args], {
-      cwd,
-      encoding: 'utf-8',
-      stdio: ['ignore', 'pipe', 'pipe'],
-      env: {...process.env, FORCE_COLOR: '0'},
-    });
-    return {code: 0, stdout: out, stderr: ''};
-  } catch (e) {
-    return {
-      code: e.status ?? 1,
-      stdout: e.stdout?.toString() ?? '',
-      stderr: e.stderr?.toString() ?? '',
-    };
-  }
-}
-
-function writeTheme(dir, contents) {
-  fs.mkdirSync(dir, {recursive: true});
-  const file = path.join(dir, 'variants-theme.mjs');
-  fs.writeFileSync(file, contents);
-  return file;
-}
-
-beforeAll(() => {
-  if (!fs.existsSync(CORE_THEME_ENTRY) || !fs.existsSync(CORE_BUTTON_DTS)) {
-    execFileSync('pnpm', ['-F', '@astryxdesign/core', 'build'], {
-      cwd: REPO_ROOT,
-      stdio: 'pipe',
-      timeout: 180_000,
-    });
-  }
-}, 200_000);
-
-let tmpDir;
-beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-variants-'));
-});
-afterEach(() => {
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-});
-
-describe('theme build custom-variant augmentations', () => {
-  it('targets the real (un-prefixed) core interface for a custom variant', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // Targets core's actual augmentation point…
-    expect(dts).toContain("declare module '@astryxdesign/core/Button'");
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    expect(dts).toContain("'accentOutline': true;");
-    // …and NOT the old, non-existent XDS-prefixed interface.
-    expect(dts).not.toMatch(/XDSButtonVariantMap/);
-  });
-
-  it('skips props with no augmentation point (Button size, Heading type)', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: {
-            'variant:accentOutline': { backgroundColor: 'transparent' },
-            'size:jumbo': { paddingBlock: '40px' },
-          },
-          heading: { 'type:hero': { fontSize: '80px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // The augmentable variant is emitted…
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    // …but closed literal-union props get no dead augmentation.
-    expect(dts).not.toMatch(/ButtonSizeMap/);
-    expect(dts).not.toMatch(/HeadingTypeMap/);
-    expect(dts).not.toContain("declare module '@astryxdesign/core/Heading'");
-  });
-
-  it('does not emit a .variants.d.ts when every custom value is non-augmentable', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'size:jumbo': { paddingBlock: '40px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-    expect(
-      fs.existsSync(path.join(tmpDir, 'variants-theme.variants.d.ts')),
-    ).toBe(false);
-  });
-
-  it('references the variants file from the main .d.ts so the augmentation loads', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const dts = fs.readFileSync(
-      path.join(tmpDir, 'variants-theme.d.ts'),
-      'utf-8',
-    );
-    // A triple-slash reference to the variants file, so importing the theme's
-    // types also loads the module augmentation.
-    expect(dts).toMatch(
-      /\/\/\/\s*<reference path="\.\/variants-theme\.variants\.d\.ts"\s*\/>/,
-    );
-  });
-});

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.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: 'BaseTypeahead',
-  name: 'BaseTypeahead — Custom Search Bar',
-  displayName: 'BaseTypeahead — Custom Search Bar',
-  description:
-    'BaseTypeahead embedded inside a custom-styled wrapper. The wrapper provides its own border and icon chrome; anchorRef positions the dropdown relative to it. Use this pattern when Typeahead\'s built-in field layout does not fit your composition.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['BaseTypeahead', 'Icon', 'Layout', 'Text'],
-};

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.tsx

@@ -1,58 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useRef, useState} from 'react';
-import {BaseTypeahead, createStaticSource} from '@astryxdesign/core/Typeahead';
-import type {SearchableItem} from '@astryxdesign/core/Typeahead';
-import {Icon} from '@astryxdesign/core/Icon';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
-
-const frameworks: SearchableItem[] = [
-  {id: 'react', label: 'React'},
-  {id: 'vue', label: 'Vue'},
-  {id: 'angular', label: 'Angular'},
-  {id: 'svelte', label: 'Svelte'},
-  {id: 'solid', label: 'SolidJS'},
-  {id: 'remix', label: 'Remix'},
-  {id: 'next', label: 'Next.js'},
-  {id: 'nuxt', label: 'Nuxt'},
-];
-
-const source = createStaticSource(frameworks);
-
-export default function BaseTypeaheadCustomSearch() {
-  const [value, setValue] = useState<SearchableItem | null>(null);
-  const wrapperRef = useRef<HTMLElement>(null);
-
-  return (
-    <VStack gap={3} style={{width: 320}}>
-      <HStack
-        ref={wrapperRef}
-        gap={2}
-        vAlign="center"
-        style={{
-          border: '1px solid var(--color-border)',
-          borderRadius: 'var(--radius-control)',
-          padding: '6px 10px',
-          background: 'var(--color-surface)',
-        }}>
-        <Icon icon={MagnifyingGlassIcon} size="sm" color="secondary" />
-        <BaseTypeahead
-          searchSource={source}
-          value={value}
-          onChange={setValue}
-          anchorRef={wrapperRef}
-          placeholder="Search frameworks…"
-          hasEntriesOnFocus
-          debounceMs={0}
-        />
-      </HStack>
-      <Text type="supporting" color="secondary">
-        {value != null ? `Selected: ${value.label}` : 'No selection'}
-      </Text>
-    </VStack>
-  );
-}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.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: 'CodeBlock',
-  name: 'Code — Terminal',
-  displayName: 'Code — Terminal',
-  description:
-    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages — reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['CodeBlock', 'SyntaxTheme'],
-};

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

@@ -1,24 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {SyntaxTheme} from '@astryxdesign/core/theme';
-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
-$ pnpm astryx component CodeBlock --dense`;
-
-export default function CodeBlockTerminal() {
-  return (
-    <SyntaxTheme theme={githubDark}>
-      <CodeBlock
-        code={commands}
-        language="bash"
-        hasCopyButton
-        style={{width: '100%', maxWidth: 480}}
-      />
-    </SyntaxTheme>
-  );
-}

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs

@@ -1,13 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Collapsible',
-  name: 'Collapsible — Divided Accordion',
-  displayName: 'Collapsible — Divided Accordion',
-  description: 'FAQ-style accordion using the dividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Collapsible', 'CollapsibleGroup', 'Text'],
-};

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx

@@ -1,33 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function CollapsibleDividedAccordion() {
-  return (
-    <div style={{width: '100%', maxWidth: 400}}>
-      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
-        <Collapsible trigger="How do I reset my password?" value="reset">
-          <Text type="body">
-            Go to Settings → Security → Change Password. You'll receive a
-            confirmation email within a few minutes.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="Can I change my username?" value="username">
-          <Text type="body">
-            Usernames can be changed once every 30 days from your profile
-            settings.
-          </Text>
-        </Collapsible>
-        <Collapsible trigger="How do I delete my account?" value="delete">
-          <Text type="body">
-            Account deletion is permanent. Your data will be removed within 30
-            days.
-          </Text>
-        </Collapsible>
-      </CollapsibleGroup>
-    </div>
-  );
-}

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'NavHeadingMenu',
-  name: 'NavHeadingMenu',
-  displayName: 'Nav Heading Menu',
-  description:
-    'NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['SideNav', 'SideNavHeading', 'NavHeadingMenu', 'NavHeadingMenuItem'],
-};

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {SideNav, SideNavHeading} from '@astryxdesign/core/SideNav';
-import {NavHeadingMenu, NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
-
-function AppIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
-      />
-    </svg>
-  );
-}
-
-export default function NavHeadingMenuShowcase() {
-  return (
-    <div style={{height: 100}}>
-      <SideNav
-        header={
-          <SideNavHeading
-            heading="Acme Platform"
-            icon={<AppIcon />}
-            menu={
-              <NavHeadingMenu size="lg">
-                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
-                <NavHeadingMenuItem label="Analytics" href="/analytics" />
-                <NavHeadingMenuItem label="Settings" href="/settings" />
-              </NavHeadingMenu>
-            }
-          />
-        }>
-        {null}
-      </SideNav>
-    </div>
-  );
-}