@astryxdesign/cli 0.1.4-canary.e67829d → 0.1.4-canary.e830adc

package/src/commands/swizzle.mjs

@@ -26,7 +26,6 @@ import {jsonOut, humanLog} from '../lib/json.mjs';
 import {cliError} from '../lib/cli-error.mjs';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 import {checkGhCli} from '../utils/github.mjs';
-import {getRunPrefix} from '../utils/package-manager.mjs';
 import {Project} from '../lib/project.mjs';
 import {
   CORE_PACKAGE,
@@ -340,10 +339,6 @@ export function registerSwizzle(program) {
       // Copy all non-test, non-doc, non-README files
       const files = fs.readdirSync(componentDir);
       let copied = 0;
-      // Track whether any copied source uses StyleX. Swizzled StyleX source
-      // needs a build-time StyleX compiler in the consumer's app or it renders
-      // unstyled with no error — so we surface a setup note after copying.
-      let usesStyleX = false;
 
       for (const file of files) {
         // Skip test files, doc files, and README
@@ -360,13 +355,6 @@ export function registerSwizzle(program) {
           content = rewriteImports(content, owner.ownerPackage);
         }
 
-        if (
-          (file.endsWith('.ts') || file.endsWith('.tsx')) &&
-          content.includes('@stylexjs/stylex')
-        ) {
-          usesStyleX = true;
-        }
-
         fs.writeFileSync(path.join(outputDir, file), content);
         copied++;
       }
@@ -388,7 +376,6 @@ export function registerSwizzle(program) {
           outputDir: relOutput,
           filesCopied: copied,
           files: copiedFiles.map(f => f),
-          usesStyleX,
         };
         if (feedback) payload.feedback = feedback;
         return jsonOut('swizzle.copy', payload);
@@ -400,27 +387,6 @@ export function registerSwizzle(program) {
       );
       humanLog('You can now customize the component source freely.\n');
 
-      // StyleX build requirement. Swizzled components ship raw StyleX source,
-      // which needs a build-time StyleX compiler in the consumer's app to
-      // produce atomic CSS. Without it the component compiles but renders
-      // unstyled, with no error — a confusing silent failure, so call it out.
-      if (usesStyleX) {
-        humanLog(
-          '⚠ These components use StyleX and require a StyleX compiler in your build.',
-        );
-        humanLog(
-          '  Without one they render unstyled (no error). See setup per framework:',
-        );
-        humanLog(`  ${getRunPrefix()} astryx docs styling`);
-        humanLog(
-          '  Next.js note: the StyleX Babel plugin disables SWC and breaks next/font —',
-        );
-        humanLog(
-          '  use an SWC-based StyleX transform instead (covered in the guide).',
-        );
-        humanLog('');
-      }
-
       // Maintainer feedback note. If we couldn't swizzle cleanly, the team
       // wants to know — point users at the issue tracker. Skipped when the
       // owning package ships no issues URL.

package/src/commands/swizzle.routing.test.mjs

@@ -277,70 +277,3 @@ describe('swizzle — ambiguous ownership', () => {
     expect(out).toContain(`from '@astryxdesign/core/theme'`);
   });
 });
-
-/**
- * Build a fake @astryxdesign/core with a component that imports StyleX directly
- * (so the swizzle StyleX-build note should fire) and one that doesn't.
- */
-function buildStyleXCore(project) {
-  const core = path.join(project, 'node_modules', '@astryxdesign', 'core');
-  // StyleX component.
-  const styledDir = path.join(core, 'src', 'Styled');
-  fs.mkdirSync(styledDir, {recursive: true});
-  fs.writeFileSync(
-    path.join(core, 'package.json'),
-    '{"name":"@astryxdesign/core","version":"0.0.13"}',
-  );
-  fs.writeFileSync(
-    path.join(styledDir, 'Styled.tsx'),
-    [
-      `import * as stylex from '@stylexjs/stylex';`,
-      `const styles = stylex.create({base: {color: 'red'}});`,
-      `export const Styled = () => null;`,
-      '',
-    ].join('\n'),
-  );
-  // Plain component (no StyleX).
-  const plainDir = path.join(core, 'src', 'Plain');
-  fs.mkdirSync(plainDir, {recursive: true});
-  fs.writeFileSync(
-    path.join(plainDir, 'Plain.tsx'),
-    `export const Plain = () => null;\n`,
-  );
-  return core;
-}
-
-describe('swizzle — StyleX build setup note (#3373)', () => {
-  it('reports usesStyleX and prints a setup note for StyleX components', () => {
-    buildStyleXCore(project);
-    writeProjectPackageJson(project);
-
-    // JSON payload carries the machine-readable flag.
-    const jsonResult = runCli(['--json', 'swizzle', 'Styled', '-f'], project);
-    expect(jsonResult.code).toBe(0);
-    const env = JSON.parse(jsonResult.stdout);
-    expect(env.data.usesStyleX).toBe(true);
-
-    // Human output surfaces the compiler requirement + Next.js caveat.
-    const humanResult = runCli(['swizzle', 'Styled', '-f'], project);
-    expect(humanResult.code).toBe(0);
-    expect(humanResult.stdout).toMatch(/StyleX compiler/i);
-    expect(humanResult.stdout).toMatch(/unstyled/i);
-    expect(humanResult.stdout).toMatch(/next\/font/i);
-    expect(humanResult.stdout).toMatch(/astryx docs styling/);
-  });
-
-  it('does not print the StyleX note for components without StyleX', () => {
-    buildStyleXCore(project);
-    writeProjectPackageJson(project);
-
-    const jsonResult = runCli(['--json', 'swizzle', 'Plain', '-f'], project);
-    expect(jsonResult.code).toBe(0);
-    const env = JSON.parse(jsonResult.stdout);
-    expect(env.data.usesStyleX).toBe(false);
-
-    const humanResult = runCli(['swizzle', 'Plain', '-f'], project);
-    expect(humanResult.code).toBe(0);
-    expect(humanResult.stdout).not.toMatch(/StyleX compiler/i);
-  });
-});

package/templates/blocks/components/AspectRatio/AspectRatioCircleImage.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioCircleImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} shape="ellipse" fit="cover">
+      <AspectRatio ratio={1} shape="ellipse">
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="Circular image"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioImageGallery.tsx

@@ -25,11 +25,16 @@ export default function AspectRatioImageGallery() {
     <Center width={600}>
       <Grid columns={3} gap={4} width="100%">
         {images.map(({id, alt}) => (
-          <AspectRatio key={id} ratio={4 / 3} fit="cover">
+          <AspectRatio key={id} ratio={4 / 3}>
             <img
               src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
               alt={alt}
-              style={{borderRadius: 8}}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                borderRadius: 8,
+              }}
             />
           </AspectRatio>
         ))}

package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -34,13 +34,16 @@ export default function AspectRatioShowcase() {
         <VStack key={label} gap={2} hAlign="center">
           <AspectRatio
             ratio={ratio}
-            fit="cover"
             style={{
               height: 120,
               width: 'auto',
               borderRadius: 'var(--radius-container)',
             }}>
-            <img src={src} alt={alt} />
+            <img
+              src={src}
+              alt={alt}
+              style={{width: '100%', height: '100%', objectFit: 'cover'}}
+            />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

package/templates/blocks/components/AspectRatio/AspectRatioSquareImage.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioSquareImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} fit="cover">
+      <AspectRatio ratio={1}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="1:1 square"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioWidescreen.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioWidescreen() {
   return (
     <Center width={600}>
-      <AspectRatio ratio={16 / 9} fit="cover">
+      <AspectRatio ratio={16 / 9}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
           alt="16:9 widescreen"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

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/Collapsible/CollapsibleWithoutCard.tsx

@@ -2,36 +2,34 @@
 
 'use client';
 
-import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {Collapsible} from '@astryxdesign/core/Collapsible';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Text} from '@astryxdesign/core/Text';
 import {VStack} from '@astryxdesign/core/Layout';
 
 export default function CollapsibleWithoutCard() {
   return (
-    <CollapsibleGroup type="single" defaultValue="deployment">
-      <VStack gap={3} style={{width: '100%', maxWidth: 400}}>
-        <Collapsible trigger="Deployment Details" value="deployment">
-          <Text type="body">
-            Last deployed on April 18, 2026 at 3:42 PM by Sarah Chen. Build
-            duration was 2m 14s with zero warnings.
-          </Text>
-        </Collapsible>
-        <Divider />
-        <Collapsible trigger="Environment Variables" value="environment">
-          <Text type="body">
-            12 variables configured. Last updated March 30, 2026. All secrets
-            are encrypted at rest with AES-256.
-          </Text>
-        </Collapsible>
-        <Divider />
-        <Collapsible trigger="Build Logs" value="logs">
-          <Text type="body">
-            Build completed successfully. 847 modules compiled, 0 errors, 0
-            warnings. Bundle size: 142 KB gzipped.
-          </Text>
-        </Collapsible>
-      </VStack>
-    </CollapsibleGroup>
+    <VStack gap={3} style={{width: '100%', maxWidth: 400}}>
+      <Collapsible trigger="Deployment Details">
+        <Text type="body">
+          Last deployed on April 18, 2026 at 3:42 PM by Sarah Chen. Build
+          duration was 2m 14s with zero warnings.
+        </Text>
+      </Collapsible>
+      <Divider />
+      <Collapsible trigger="Environment Variables" defaultIsOpen={false}>
+        <Text type="body">
+          12 variables configured. Last updated March 30, 2026. All secrets are
+          encrypted at rest with AES-256.
+        </Text>
+      </Collapsible>
+      <Divider />
+      <Collapsible trigger="Build Logs" defaultIsOpen={false}>
+        <Text type="body">
+          Build completed successfully. 847 modules compiled, 0 errors, 0
+          warnings. Bundle size: 142 KB gzipped.
+        </Text>
+      </Collapsible>
+    </VStack>
   );
 }

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/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -25,23 +25,21 @@ function AppIcon() {
 
 export default function NavHeadingMenuShowcase() {
   return (
-    <div style={{height: 100}}>
-      <SideNav
-        header={
-          <SideNavHeading
-            heading="Acme Platform"
-            icon={<AppIcon />}
-            menu={
-              <NavHeadingMenu size="lg">
-                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
-                <NavHeadingMenuItem label="Analytics" href="/analytics" />
-                <NavHeadingMenuItem label="Settings" href="/settings" />
-              </NavHeadingMenu>
-            }
-          />
-        }>
-        {null}
-      </SideNav>
-    </div>
+    <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>
   );
 }

package/templates/pages/classic-gallery/page.tsx

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={0}>
           <Center axis="horizontal">

package/templates/pages/dashboard/page.tsx

@@ -729,7 +729,7 @@ function TableCard<T extends {id: string}>({
 export default function DashboardTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={6}>

package/templates/pages/documentation/page.tsx

@@ -209,7 +209,7 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>