@astryxdesign/cli 0.1.4-canary.2b3ac0f → 0.1.4-canary.2e11603

package/CHANGELOG.md

@@ -36,7 +36,7 @@ Thanks to everyone who contributed to this release:
 - Strict config + integration v1 schema (integrations, issuesUrl, hooks.postCodemod) and new @astryxdesign/cli/integration export.
 - File-based codemod API (createCodemod/createConfigCodemod) with the @astryxdesign/cli/codemod export and integration codemod discovery in upgrade.
 - component, template, and upgrade now print a one-line non-blocking warning when a configured integration has validation issues, pointing to validate-integration.
-- Add a Kanban Board page template: color-coded status columns, draggable task cards with priority tags, and board toolbar. Based on a design by @cg-hub18.
+- Add a Kanban Board page template: color-coded status columns, draggable task cards with priority tags, and board toolbar.
 - Add frame-first layout guidance: new `astryx docs layout` topic (shell choice, region budgets, app archetypes, cards-vs-rows policy, responsive contracts), layout rules in the generated agent cheat sheet, and layout anti-patterns in `docs principles`.
 - Add a v0.1.3 config codemod that migrates astryx.config layout.components to experimental.xle.components.
 - Add v0.1.0 codemods for migrating `declare module "@xds/core/..."` type augmentations and `.xds-*` / `[data-xds-theme]` / `@layer xds-theme` CSS surfaces to their `@astryxdesign`/`astryx-*` equivalents.
@@ -80,7 +80,6 @@ Thanks to everyone who contributed to this release:
 Thanks to everyone who contributed to this release:
 
 - @AKnassa
-- @cg-hub18
 - @ejhammond
 - @ernestt
 - @harshavardhan194

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.2b3ac0f",
+  "version": "0.1.4-canary.2e11603",
   "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.2b3ac0f",
-    "@astryxdesign/core": "0.1.4-canary.2b3ac0f",
-    "@astryxdesign/lab": "0.1.4-canary.2b3ac0f",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.2b3ac0f",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.2e11603",
+    "@astryxdesign/lab": "0.1.4-canary.2e11603",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.2e11603",
+    "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.2b3ac0f",
-    "@astryxdesign/core": "0.1.4-canary.2b3ac0f",
-    "@astryxdesign/lab": "0.1.4-canary.2b3ac0f",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.2b3ac0f",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.2e11603",
+    "@astryxdesign/lab": "0.1.4-canary.2e11603",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.2e11603",
+    "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

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/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/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/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/templates/blocks/components/CodeBlock/CodeBlockTerminal.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   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.',
+    '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/CommandPaletteGroup/CommandPaletteGroupShowcase.tsx

@@ -3,45 +3,66 @@
 'use client';
 
 import {useMemo} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
 
 export default function CommandPaletteGroupShowcase() {
   const source = useMemo(
     () =>
       createStaticSource([
-        {
-          id: 'index',
-          label: 'index.tsx',
-          auxiliaryData: {group: 'Recent Files'},
-        },
+        {id: 'index', label: 'index.tsx', auxiliaryData: {group: 'Recent Files'}},
         {id: 'app', label: 'App.tsx', auxiliaryData: {group: 'Recent Files'}},
-        {
-          id: 'settings',
-          label: 'Open Settings',
-          auxiliaryData: {group: 'Commands'},
-        },
-        {
-          id: 'terminal',
-          label: 'Toggle Terminal',
-          auxiliaryData: {group: 'Commands'},
-        },
-        {
-          id: 'theme',
-          label: 'Color Theme',
-          auxiliaryData: {group: 'Preferences'},
-        },
+        {id: 'settings', label: 'Open Settings', auxiliaryData: {group: 'Commands'}},
+        {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {group: 'Commands'}},
+        {id: 'theme', label: 'Color Theme', auxiliaryData: {group: 'Preferences'}},
         {id: 'font', label: 'Font Size', auxiliaryData: {group: 'Preferences'}},
       ]),
     [],
   );
 
   return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-    />
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Data-driven grouping (auxiliaryData.group)
+        </Text>
+        <CommandPalette
+          isOpen
+          isInline
+          onOpenChange={() => {}}
+          searchSource={source}
+        />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Composed form (CommandPaletteGroup + CommandPaletteItem)
+        </Text>
+        <CommandPaletteList>
+          <CommandPaletteGroup heading="Navigation">
+            <CommandPaletteItem value="home" onSelect={() => {}}>
+              Home
+            </CommandPaletteItem>
+            <CommandPaletteItem value="dashboard" onSelect={() => {}}>
+              Dashboard
+            </CommandPaletteItem>
+          </CommandPaletteGroup>
+          <CommandPaletteGroup heading="Actions">
+            <CommandPaletteItem value="new-file" onSelect={() => {}}>
+              New File
+            </CommandPaletteItem>
+            <CommandPaletteItem value="save" onSelect={() => {}}>
+              Save All
+            </CommandPaletteItem>
+          </CommandPaletteGroup>
+        </CommandPaletteList>
+      </Stack>
+    </Stack>
   );
 }

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx

@@ -3,10 +3,16 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
 import {Text} from '@astryxdesign/core/Text';
 import {Kbd} from '@astryxdesign/core/Kbd';
+import {Icon} from '@astryxdesign/core/Icon';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem} from '@astryxdesign/core/Typeahead';
 
 const itemLabel: CSSProperties = {
@@ -17,21 +23,9 @@ type CommandItem = SearchableItem<{shortcut?: string}>;
 
 const commands: CommandItem[] = [
   {id: 'save', label: 'Save File', auxiliaryData: {shortcut: 'mod+s'}},
-  {
-    id: 'find',
-    label: 'Find in Files',
-    auxiliaryData: {shortcut: 'mod+shift+f'},
-  },
-  {
-    id: 'palette',
-    label: 'Command Palette',
-    auxiliaryData: {shortcut: 'mod+shift+p'},
-  },
-  {
-    id: 'terminal',
-    label: 'Toggle Terminal',
-    auxiliaryData: {shortcut: 'ctrl+`'},
-  },
+  {id: 'find', label: 'Find in Files', auxiliaryData: {shortcut: 'mod+shift+f'}},
+  {id: 'palette', label: 'Command Palette', auxiliaryData: {shortcut: 'mod+shift+p'}},
+  {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {shortcut: 'ctrl+`'}},
   {id: 'sidebar', label: 'Toggle Sidebar', auxiliaryData: {shortcut: 'mod+b'}},
 ];
 
@@ -39,21 +33,50 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      renderItem={(item: CommandItem) => (
-        <>
-          <Text type="body" style={itemLabel}>
-            {item.label}
-          </Text>
-          {item.auxiliaryData?.shortcut && (
-            <Kbd keys={item.auxiliaryData.shortcut} />
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Custom renderItem with keyboard shortcuts
+        </Text>
+        <CommandPalette
+          isOpen
+          isInline
+          onOpenChange={() => {}}
+          searchSource={source}
+          renderItem={(item: CommandItem) => (
+            <>
+              <Text type="body" style={itemLabel}>
+                {item.label}
+              </Text>
+              {item.auxiliaryData?.shortcut && (
+                <Kbd keys={item.auxiliaryData.shortcut} />
+              )}
+            </>
           )}
-        </>
-      )}
-    />
+        />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Composed items with icons and states
+        </Text>
+        <CommandPaletteList>
+          <CommandPaletteItem value="home" onSelect={() => {}}>
+            <Icon icon="externalLink" size="sm" />
+            <Text type="body" style={itemLabel}>Home</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
+            <Icon icon="search" size="sm" />
+            <Text type="body" style={itemLabel}>Search (highlighted)</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="selected" isSelected onSelect={() => {}}>
+            <Icon icon="check" size="sm" />
+            <Text type="body" style={itemLabel}>Selected item</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="disabled" isDisabled>
+            <Text type="body" style={itemLabel}>Disabled item</Text>
+          </CommandPaletteItem>
+        </CommandPaletteList>
+      </Stack>
+    </Stack>
   );
 }

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',