@astryxdesign/cli 0.1.4-canary.d209405 → 0.1.4-canary.d267394

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/docs/getting-started.doc.mjs

@@ -69,10 +69,6 @@ export const docs = {
           type: 'prose',
           text: 'Available themes: @astryxdesign/theme-neutral (muted minimal, a good starting point), @astryxdesign/theme-butter, @astryxdesign/theme-chocolate, @astryxdesign/theme-gothic (dark-only), @astryxdesign/theme-matcha, @astryxdesign/theme-stone, and @astryxdesign/theme-y2k. See `npx astryx docs theme` for the full theming guide.',
         },
-        {
-          type: 'prose',
-          text: 'These stylesheets are cascade-layered: the reset loads in @layer reset and component styles in @layer astryx-base. If your project has existing global CSS, a legacy reset, or Tailwind, declare the layer order explicitly and assign every stylesheet to a layer deliberately: unlayered styles and later layers both override astryx-base regardless of specificity. See the Cascade Layer Safety section in `npx astryx docs migration` before building screens.',
-        },
       ],
     },
     {

package/docs/migration.doc.mjs

@@ -33,7 +33,6 @@ export const docs = {
             'Install the design system and run init so the project has package scripts, theme CSS, and agent docs.',
             'Wrap the app root with Theme and choose the initial light, dark, or system mode behavior.',
             'Make Tailwind and design system CSS layer order explicit before replacing components.',
-            'Render the foundation smoke test page and confirm primitives keep their padding before migrating any surface.',
             'Move the persistent frame first: AppShell, TopNav, SideNav, page content, and mobile navigation.',
             'Replace shared primitives: Button, IconButton, TextInput, NumberInput, Switch, CheckboxInput, RadioList, Selector, Tabs, Dialog, AlertDialog, Banner, Toast, Badge, Card, Table, and ListItem.',
             'Replace global workflows: command palette, settings popover, theme toggle, search, filters, create flows, and destructive confirmation dialogs.',
@@ -126,139 +125,6 @@ export function AppRoot({children}: {children: React.ReactNode}) {
 @import "@astryxdesign/core/tailwind-theme.css";
 @import "tailwindcss/utilities.css" layer(utilities);`,
         },
-        {
-          type: 'prose',
-          text: 'On Tailwind v3 there is no preflight.css to import, so wrap the @tailwind base directive in a named layer instead. Keep utilities unlayered so existing app utility classes still win everywhere.',
-        },
-        {
-          type: 'code',
-          lang: 'css',
-          label: 'Tailwind v3 coexistence',
-          code: `@layer reset, tw-preflight, astryx-base, astryx-theme;
-
-@import "@astryxdesign/core/reset.css";
-@import "@astryxdesign/core/astryx.css";
-@import "@astryxdesign/theme-neutral/theme.css";
-
-@layer tw-preflight {
-  @tailwind base; /* layered: astryx-theme now wins over preflight */
-}
-@tailwind components;
-@tailwind utilities; /* unlayered: legacy utility classes keep winning */`,
-        },
-      ],
-    },
-    {
-      title: 'Cascade Layer Safety',
-      content: [
-        {
-          type: 'prose',
-          text: 'In a stylesheet with no layers at all, a zero-specificity reset like `* { padding: 0 }` loses to any class selector, so most developers treat resets as harmless. Layers change the rules twice: unlayered styles beat every named layer, and a later layer beats an earlier one, both regardless of specificity. The same reset therefore wins against every component style either by staying unlayered or by landing in a layer declared after astryx-base. Same CSS, opposite outcome, and no error or warning when it happens.',
-        },
-        {
-          type: 'prose',
-          text: 'This is the most common way an adoption breaks, through one of two @import mechanisms. A top-level @import without the layer() keyword keeps the legacy reset unlayered, where it overrides every design system layer. And an @import nested inside a file that was itself imported into a layer inherits that surrounding layer, so a reset can silently land in a consumer layer above astryx-base. Either way the fix is the same: import the legacy reset into the lowest layer explicitly.',
-        },
-        {
-          type: 'code',
-          lang: 'css',
-          label: 'Legacy reset, explicitly layered',
-          code: `/* was: @import "./legacy-reset.css";  (unlayered: beats every layer) */
-@import "./legacy-reset.css" layer(reset);`,
-        },
-        {
-          type: 'prose',
-          text: 'Audit the layers around the design system with this checklist before building screens.',
-        },
-        {
-          type: 'list',
-          style: 'unordered',
-          items: [
-            'Declare the canonical @layer order once, before any @import. With webpack-based bundlers (including Next.js) the order declaration must live in its own CSS file imported first, such as layers.css, because webpack hoists @import content above the inline CSS that follows it.',
-            'Audit every pre-existing global or reset stylesheet and assign each one to a layer deliberately. Top-level imports without layer() stay unlayered and beat every layer; imports nested inside a layered file inherit that layer.',
-            'Remove or demote the app legacy reset. The design system ships its own :where() reset in the lowest layer, so any app reset belongs in that same reset layer and never in a layer above astryx-base.',
-            'Layer Tailwind preflight. On Tailwind v4, import preflight.css with layer(base). On Tailwind v3, wrap the @tailwind base directive in a named layer (see the snippet in Theme and CSS Setup). Unlayered preflight overrides theme CSS silently.',
-            'Set moduleResolution to bundler or node16 and newer so subpath imports like @astryxdesign/core/reset.css resolve.',
-            'Theme with defineTheme and the accent family API instead of hand-writing individual color tokens. Derived tokens like --color-on-accent are generated from the accent scale automatically; hand-writing only --color-accent leaves --color-on-accent at its stale white default with no contrast guarantee against the new accent.',
-            'Run the foundation smoke test below and view a few components in both light and dark mode before migrating any route.',
-          ],
-        },
-        {
-          type: 'prose',
-          text: 'One more mental model shift: a className or utility class you write on a component still reaches the DOM either way, but whether it overrides the component is a layer question, not a source order question. Keep app utilities in the utilities layer so they keep winning.',
-        },
-      ],
-    },
-    {
-      title: 'Foundation Smoke Test',
-      content: [
-        {
-          type: 'prose',
-          text: 'A broken layer order fails silently and identically on every page, so catch it before feature work instead of after N migrated screens. Render one throwaway page with a few primitives as the first migration step.',
-        },
-        {
-          type: 'code',
-          lang: 'tsx',
-          label: 'Foundation check page',
-          code: `import {useState} from 'react';
-import {Button} from '@astryxdesign/core/Button';
-import {Card} from '@astryxdesign/core/Card';
-import {Table} from '@astryxdesign/core/Table';
-import {TextInput} from '@astryxdesign/core/TextInput';
-import {VStack} from '@astryxdesign/core/VStack';
-
-export default function FoundationCheck() {
-  const [email, setEmail] = useState('');
-
-  return (
-    <div data-foundation-check>
-      <VStack gap={4}>
-        <Button label="Primary action" variant="primary" />
-        <TextInput
-          label="Email"
-          placeholder="you@example.com"
-          value={email}
-          onChange={setEmail}
-        />
-        <Card>One card with default padding</Card>
-        <Table
-          data={[{name: 'Foundation', status: 'ok'}]}
-          columns={[
-            {key: 'name', header: 'Name'},
-            {key: 'status', header: 'Status'},
-          ]}
-        />
-      </VStack>
-    </div>
-  );
-}`,
-        },
-        {
-          type: 'prose',
-          text: 'If the button renders with visible padding, a filled primary background, and the input and card have borders and internal spacing, the foundation is sound. For an assertion that can run in any test runner or a dev-only effect, check that a primitive keeps non-zero padding:',
-        },
-        {
-          type: 'code',
-          lang: 'ts',
-          label: 'Foundation assertion',
-          code: `const button = document.querySelector<HTMLButtonElement>(
-  '[data-foundation-check] button',
-);
-if (!button) {
-  throw new Error('Foundation check page did not render a button.');
-}
-if (getComputedStyle(button).paddingInline === '0px') {
-  throw new Error(
-    'Foundation broken: an unlayered reset or a later cascade layer is ' +
-      'overriding component styles. Check that no app reset sits outside ' +
-      'the reset layer.',
-  );
-}`,
-        },
-        {
-          type: 'prose',
-          text: 'When this fails, the fix is almost always in the layer order: find the stylesheet that zeroes padding, and move it into the reset layer or delete it.',
-        },
       ],
     },
     {

package/package.json

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

package/src/commands/agent-docs.mjs

@@ -9,12 +9,11 @@
  * - Claude Code: CLAUDE.md (root) or .claude/CLAUDE.md
  * - Cursor: .cursorrules
  * - Codex/generic: AGENTS.md
- * - Hermes Agent: .hermes.md or HERMES.md (existing), else AGENTS.md
  *
  * Auto-detect: discovers existing files and updates them in place.
  * Default (no existing files): creates .claude/CLAUDE.md.
  *
- * --agent <tool>: target a specific tool preset (claude, cursor, codex, hermes, all)
+ * --agent <tool>: target a specific tool preset (claude, cursor, codex, all)
  * --agent-docs-path <path>: explicit file path(s)
  */
 
@@ -47,7 +46,6 @@ const AGENT_PRESETS = {
   claude: [CLAUDE_MD, CLAUDE_DIR_MD],
   cursor: ['.cursorrules', AGENTS_MD],
   codex: [AGENTS_MD],
-  hermes: ['.hermes.md', 'HERMES.md', AGENTS_MD],
 };
 
 /**
@@ -66,7 +64,7 @@ export function discoverAgentDocs(targetDir) {
  * Searches for existing files first, falls back to default creation path.
  *
  * @param {string} targetDir
- * @param {string} agent - Preset name: 'claude', 'cursor', 'codex', 'hermes', 'all'
+ * @param {string} agent - Preset name: 'claude', 'cursor', 'codex', 'all'
  * @returns {{inject: string[], create: string[]}} Files to inject into vs create fresh
  */
 export function resolveAgentPaths(targetDir, agent) {
@@ -388,7 +386,7 @@ export function removeAgentDocs(targetDir) {
  * @param {object} [options]
  * @param {boolean} [options.zh]
  * @param {string} [options.lang]
- * @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', 'hermes', 'all'
+ * @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', 'all'
  * @param {string[]} [options.paths] - Explicit paths (overrides agent/auto-detect)
  * @param {boolean} [options.onlyReplace] - Only update files that already have Astryx markers (for upgrades)
  * @returns {string[]} List of files written
@@ -470,14 +468,14 @@ export function installAgentDocs(targetDir, {zh = false, lang, agent, paths, onl
   return written;
 }
 
-const VALID_AGENTS = ['claude', 'cursor', 'codex', 'hermes', 'all'];
+const VALID_AGENTS = ['claude', 'cursor', 'codex', 'all'];
 
 export function registerAgentDocs(program) {
   program
     .command('agent-docs')
     .description('Install/update the component index for AI coding agents')
     .option('--remove', 'Remove the design system section from all agent doc files')
-    .option('--agent <tool>', 'Target tool: claude, cursor, codex, hermes, all')
+    .option('--agent <tool>', 'Target tool: claude, cursor, codex, all')
     .option('--agent-docs-path <path...>', 'Explicit file path(s) to write to')
     .action(options => {
       const targetDir = process.cwd();

package/src/commands/agent-docs.test.mjs

@@ -449,17 +449,6 @@ describe('installAgentDocs', () => {
     expect(fs.existsSync(path.join(tmpDir, 'AGENTS.md'))).toBe(true);
   });
 
-  it('respects --agent hermes preset: creates AGENTS.md', () => {
-    setupCorePackage(tmpDir);
-
-    const written = installAgentDocs(tmpDir, {agent: 'hermes'});
-
-    expect(written).toEqual(['AGENTS.md']);
-    const content = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
-    expect(content).toContain('<!-- ASTRYX:START -->');
-    expect(fs.existsSync(path.join(tmpDir, '.claude'))).toBe(false);
-  });
-
   it('respects explicit --paths', () => {
     setupCorePackage(tmpDir);
 
@@ -559,26 +548,4 @@ describe('resolveAgentPaths', () => {
     expect(result.create).toContain('AGENTS.md');
     expect(result.create).toContain('.claude/CLAUDE.md');
   });
-
-  it('hermes preset creates AGENTS.md when nothing exists', () => {
-    const result = resolveAgentPaths(tmpDir, 'hermes');
-    expect(result).toEqual({inject: [], create: ['AGENTS.md']});
-  });
-
-  it('hermes preset finds existing .hermes.md', () => {
-    fs.writeFileSync(path.join(tmpDir, '.hermes.md'), '');
-    const result = resolveAgentPaths(tmpDir, 'hermes');
-    expect(result).toEqual({inject: ['.hermes.md'], create: []});
-  });
-
-  it('hermes preset finds existing HERMES.md when no .hermes.md', () => {
-    fs.writeFileSync(path.join(tmpDir, 'HERMES.md'), '');
-    const result = resolveAgentPaths(tmpDir, 'hermes');
-    expect(result).toEqual({inject: ['HERMES.md'], create: []});
-  });
-
-  it('claude preset still creates .claude/CLAUDE.md when nothing exists (hermes is additive)', () => {
-    const result = resolveAgentPaths(tmpDir, 'claude');
-    expect(result).toEqual({inject: [], create: ['.claude/CLAUDE.md']});
-  });
 });

package/src/commands/init.mjs

@@ -198,7 +198,7 @@ export function registerInit(program) {
     .option('--features <list>', 'Comma-separated features to install (agents, theme, template)')
     .option('--all', 'Install all features, no prompts')
     .option('--remove-agents', 'Remove AI agent docs from all agent doc files')
-    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, hermes, all')
+    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, all')
     .option('--agent-docs-path <path...>', 'Explicit file path(s) for agent docs')
     .action(async (options) => {
       const targetDir = process.cwd();

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/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.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: '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

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

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

@@ -1,39 +0,0 @@
-// 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/CommandPaletteList/CommandPaletteListBasic.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: '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

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

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

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

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

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

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

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