@astryxdesign/cli 0.1.4-canary.37c19d3 → 0.1.4-canary.38ede5f

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

@@ -277,3 +277,70 @@ 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/Collapsible/CollapsibleWithoutCard.tsx

@@ -2,34 +2,36 @@
 
 'use client';
 
-import {Collapsible} from '@astryxdesign/core/Collapsible';
+import {Collapsible, CollapsibleGroup} 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 (
-    <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>
+    <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>
   );
 }

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

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="auto"
+      height="fill"
       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="auto"
+      height="fill"
       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="auto"
+      height="fill"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>