@astryxdesign/cli 0.1.4-canary.39ffd21 → 0.1.4-canary.3b5f42e

package/package.json

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

package/src/api/component.mjs

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

package/src/api/template.mjs

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

package/src/commands/agent-docs.mjs

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

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

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

package/src/lib/component-discovery.mjs

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

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

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

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

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CodeBlock',
+  name: 'Code — Terminal',
+  displayName: 'Code — Terminal',
+  description:
+    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages — reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CodeBlock', 'SyntaxTheme'],
+};

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

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {SyntaxTheme} from '@astryxdesign/core/theme';
+import {githubDark} from '@astryxdesign/core/theme/syntax';
+import {CodeBlock} from '@astryxdesign/core/CodeBlock';
+
+const commands = `$ astryx init --features agents
+✓ AI agent docs installed → .claude/CLAUDE.md
+$ pnpm astryx component CodeBlock --dense`;
+
+export default function CodeBlockTerminal() {
+  return (
+    <SyntaxTheme theme={githubDark}>
+      <CodeBlock
+        code={commands}
+        language="bash"
+        hasCopyButton
+        style={{width: '100%', maxWidth: 480}}
+      />
+    </SyntaxTheme>
+  );
+}

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.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: 'NavHeadingMenu',
+  name: 'NavHeadingMenu',
+  displayName: 'Nav Heading Menu',
+  description:
+    'NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['SideNav', 'SideNavHeading', 'NavHeadingMenu', 'NavHeadingMenuItem'],
+};

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

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