@astryxdesign/cli 0.1.4-canary.f5fcc51 → 0.1.4-canary.f767ee2

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.
+- 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 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,6 +80,7 @@ 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.f5fcc51",
+  "version": "0.1.4-canary.f767ee2",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,12 +75,16 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.4-canary.f5fcc51",
-    "@astryxdesign/lab": "0.1.4-canary.f5fcc51",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.f5fcc51",
+    "@astryxdesign/charts": "0.1.4-canary.f767ee2",
+    "@astryxdesign/core": "0.1.4-canary.f767ee2",
+    "@astryxdesign/lab": "0.1.4-canary.f767ee2",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.f767ee2",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
+    "@astryxdesign/charts": {
+      "optional": true
+    },
     "@astryxdesign/core": {
       "optional": true
     },
@@ -92,9 +96,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.4-canary.f5fcc51",
-    "@astryxdesign/lab": "0.1.4-canary.f5fcc51",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.f5fcc51",
+    "@astryxdesign/charts": "0.1.4-canary.f767ee2",
+    "@astryxdesign/core": "0.1.4-canary.f767ee2",
+    "@astryxdesign/lab": "0.1.4-canary.f767ee2",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.f767ee2",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/api/doctor.mjs

@@ -115,10 +115,21 @@ 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(path.join(scopeDir, entry.name))});
+    found.push({name, version: pkgVersion(dir)});
   }
   return found;
 }

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

@@ -99,5 +99,43 @@ 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,6 +178,7 @@ 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,
@@ -405,6 +406,7 @@ export async function runCodemods(
     totalFilesChanged,
     totalTransformsApplied,
     totalValidationBlocked,
+    writtenFiles,
     errors,
     skippedOptional,
   };

package/src/commands/doctor.test.mjs

@@ -63,6 +63,33 @@ 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);
 }
@@ -119,6 +146,13 @@ 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,66 +3,45 @@
 'use client';
 
 import {useMemo} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteList,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
+import {CommandPalette} 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 (
-    <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>
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+    />
   );
 }

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteInput',
+  name: 'CommandPaletteInput — With End Content',
+  displayName: 'CommandPaletteInput — With End Content',
+  description:
+    'Custom placeholder and a keyboard shortcut badge in the trailing slot via endContent.',
+  isReady: true,
+  isShowcase: false,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
+};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteInput,
+} from '@astryxdesign/core/CommandPalette';
+import {Kbd} from '@astryxdesign/core/Kbd';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteInputBasic() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'home', label: 'Home'},
+        {id: 'settings', label: 'Settings'},
+        {id: 'profile', label: 'Profile'},
+        {id: 'help', label: 'Help'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      input={
+        <CommandPaletteInput
+          placeholder="Search commands, files, or actions..."
+          endContent={<Kbd keys="mod+k" />}
+        />
+      }
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteInput',
+  name: 'CommandPaletteInput',
+  displayName: 'Command Palette Input',
+  description:
+    'Command palette search input with a custom placeholder and a keyboard shortcut hint in the endContent slot.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
+};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteInput,
+} from '@astryxdesign/core/CommandPalette';
+import {Kbd} from '@astryxdesign/core/Kbd';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteInputShowcase() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'home', label: 'Home'},
+        {id: 'settings', label: 'Settings'},
+        {id: 'profile', label: 'Profile'},
+        {id: 'help', label: 'Help'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      input={
+        <CommandPaletteInput
+          placeholder="Search commands, files, or actions..."
+          endContent={<Kbd keys="mod+k" />}
+        />
+      }
+    />
+  );
+}

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

@@ -3,16 +3,10 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteList,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
+import {CommandPalette} 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 = {
@@ -23,9 +17,21 @@ 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'}},
 ];
 
@@ -33,50 +39,21 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <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} />
-              )}
-            </>
+    <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/blocks/components/CommandPaletteList/CommandPaletteListBasic.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteList',
+  name: 'CommandPaletteList — Item States',
+  displayName: 'CommandPaletteList — Item States',
+  description:
+    'Flat list showing the highlighted, selected, and disabled item states. Use CommandPaletteGroup to add section headings.',
+  isReady: true,
+  isShowcase: false,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPaletteList', 'CommandPaletteItem'],
+};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteListBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteItem value="home" onSelect={() => {}}>
+        Go Home
+      </CommandPaletteItem>
+      <CommandPaletteItem value="settings" isHighlighted onSelect={() => {}}>
+        Open Settings
+      </CommandPaletteItem>
+      <CommandPaletteItem value="profile" isSelected onSelect={() => {}}>
+        View Profile
+      </CommandPaletteItem>
+      <CommandPaletteItem value="help" isDisabled onSelect={() => {}}>
+        Help (unavailable)
+      </CommandPaletteItem>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteList',
+  name: 'CommandPaletteList',
+  displayName: 'Command Palette List',
+  description:
+    'Scrollable command palette list with grouped items, including a highlighted item, composed without a full CommandPalette.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPaletteList', 'CommandPaletteGroup', 'CommandPaletteItem'],
+};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteListShowcase() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteGroup heading="Navigation">
+        <CommandPaletteItem value="home" onSelect={() => {}}>
+          Go Home
+        </CommandPaletteItem>
+        <CommandPaletteItem value="settings" onSelect={() => {}}>
+          Open Settings
+        </CommandPaletteItem>
+        <CommandPaletteItem value="profile" onSelect={() => {}}>
+          View Profile
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+      <CommandPaletteGroup heading="Actions">
+        <CommandPaletteItem value="new-file" onSelect={() => {}}>
+          New File
+        </CommandPaletteItem>
+        <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
+          Search Files
+        </CommandPaletteItem>
+        <CommandPaletteItem value="save" onSelect={() => {}}>
+          Save All
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.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: 'ContextMenuItem',
+  name: 'ContextMenuItem — Basic',
+  displayName: 'ContextMenuItem — Basic',
+  description:
+    'Context menu items with labels and secondary descriptions. Use ContextMenuItem to render custom menu entries with consistent styling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ContextMenu', 'ContextMenuItem'],
+};

package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
+
+export default function ContextMenuItemBasic() {
+  return (
+    <ContextMenu
+      menuContent={
+        <>
+          <ContextMenuItem
+            label="Edit"
+            description="Modify this item"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            label="Duplicate"
+            description="Create a copy"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            label="Delete"
+            description="This action cannot be undone"
+            onClick={() => {}}
+          />
+        </>
+      }>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: 'var(--color-border)',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ContextMenuItem',
+  name: 'ContextMenuItem',
+  displayName: 'Context Menu Item',
+  description:
+    'Context menu with custom-rendered items using ContextMenuItem for icons and descriptions.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ContextMenu', 'ContextMenuItem'],
+};

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
+
+const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+
+const CopyIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+const ShareIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <circle cx="18" cy="5" r="3" />
+    <circle cx="6" cy="12" r="3" />
+    <circle cx="18" cy="19" r="3" />
+    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+  </svg>
+);
+
+const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
+export default function ContextMenuItemShowcase() {
+  return (
+    <ContextMenu
+      menuContent={
+        <>
+          <ContextMenuItem
+            icon={PencilIcon}
+            label="Edit"
+            description="Modify this item"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            icon={CopyIcon}
+            label="Duplicate"
+            description="Create a copy"
+            onClick={() => {}}
+          />
+          <ContextMenuItem icon={ShareIcon} label="Share" onClick={() => {}} />
+          <ContextMenuItem
+            icon={TrashIcon}
+            label="Delete"
+            description="This action cannot be undone"
+            onClick={() => {}}
+          />
+        </>
+      }>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: 'var(--color-border)',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

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

@@ -19,13 +19,7 @@ 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 {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -481,17 +475,13 @@ 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,13 +19,7 @@ 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 {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -35,11 +29,7 @@ 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>`;
@@ -839,17 +829,13 @@ 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',