@astryxdesign/cli 0.1.1-canary.d5f107c → 0.1.1-canary.e3e409f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.1-canary.d5f107c",
+  "version": "0.1.1-canary.e3e409f",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -54,9 +54,9 @@
     "jscodeshift": "^17.3.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.1-canary.d5f107c",
-    "@astryxdesign/lab": "0.1.1-canary.d5f107c",
-    "@astryxdesign/theme-neutral": "0.1.1-canary.d5f107c"
+    "@astryxdesign/core": "0.1.1-canary.e3e409f",
+    "@astryxdesign/lab": "0.1.1-canary.e3e409f",
+    "@astryxdesign/theme-neutral": "0.1.1-canary.e3e409f"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +70,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.1-canary.d5f107c",
-    "@astryxdesign/lab": "0.1.1-canary.d5f107c",
-    "@astryxdesign/theme-neutral": "0.1.1-canary.d5f107c"
+    "@astryxdesign/core": "0.1.1-canary.e3e409f",
+    "@astryxdesign/lab": "0.1.1-canary.e3e409f",
+    "@astryxdesign/theme-neutral": "0.1.1-canary.e3e409f"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/commands/init.mjs

@@ -29,6 +29,37 @@ import {requireInteractive} from '../utils/interactive.mjs';
 const VALID_FEATURES = ['agents', 'theme', 'template'];
 const run = getRunPrefix();
 
+/**
+ * Build the "Next steps" lines printed at the end of `astryx init`.
+ *
+ * Theme guidance must match the runtime recommendation emitted by core's
+ * <Theme> component (packages/core/src/theme/Theme.tsx): the pre-built theme
+ * path (`/built` import + `theme.css`) plus the base CSS import, so users
+ * don't end up with an unstyled app or the slower runtime style-injection
+ * path. See https://github.com/facebook/astryx/issues/3080.
+ *
+ * Exported for testing.
+ *
+ * @param {string} runPrefix package-manager run prefix (e.g. `npx`)
+ * @returns {string[]} ordered list of human-facing lines
+ */
+export function getNextSteps(runPrefix) {
+  return [
+    '',
+    '  Next steps:',
+    "    1. Import base styles: import '@astryxdesign/core/reset.css'",
+    "       and import '@astryxdesign/core/astryx.css'",
+    "    2. Import components: import { Button } from '@astryxdesign/core'",
+    '    3. Optionally add a theme (use the pre-built path for performance):',
+    "       import { neutralTheme } from '@astryxdesign/theme-neutral/built'",
+    "       import '@astryxdesign/theme-neutral/theme.css'",
+    '       <Theme theme={neutralTheme}>...</Theme>',
+    `       For custom themes, run \`${runPrefix} astryx theme build <file>\` to generate the built artifacts.`,
+    `    4. ${runPrefix} astryx --help for all commands`,
+    '',
+  ];
+}
+
 function isCancel(value) {
   if (p.isCancel(value)) {
     p.cancel('Setup cancelled.');
@@ -250,13 +281,8 @@ export function registerInit(program) {
       // Outro
       p.outro('Design system initialized!');
 
-      humanLog('');
-      humanLog('  Next steps:');
-      humanLog("    1. Import components: import { Button } from '@astryxdesign/core'");
-      humanLog('    2. Optionally add a theme:');
-      humanLog("       import { neutralTheme } from '@astryxdesign/theme-neutral'");
-      humanLog('       <Theme theme={neutralTheme}>...</Theme>');
-      humanLog(`    3. ${run} astryx --help for all commands`);
-      humanLog('');
+      for (const line of getNextSteps(run)) {
+        humanLog(line);
+      }
     });
 }

package/src/commands/init.next-steps.test.mjs

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Regression test for `astryx init` "Next steps" theme guidance.
+ *
+ * The init command previously steered users toward the slower runtime
+ * style-injection path:
+ *
+ *   import { neutralTheme } from '@astryxdesign/theme-neutral'
+ *   <Theme theme={neutralTheme}>...</Theme>
+ *
+ * ...which contradicted the runtime console warning emitted by core's
+ * <Theme> component (packages/core/src/theme/Theme.tsx) recommending the
+ * pre-built path, and left users with an unstyled app because the base CSS
+ * imports were never mentioned (facebook/astryx#3080).
+ *
+ * These assertions lock in the corrected guidance: base CSS imports, the
+ * pre-built (`/built` + `theme.css`) theme path, and the custom-theme build
+ * command.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {getNextSteps} from './init.mjs';
+
+describe('init Next steps theme guidance', () => {
+  const text = getNextSteps('npx').join('\n');
+
+  it('mentions the base CSS imports so the app is not left unstyled', () => {
+    expect(text).toContain("'@astryxdesign/core/reset.css'");
+    expect(text).toContain("'@astryxdesign/core/astryx.css'");
+  });
+
+  it('uses the pre-built theme path matching the runtime recommendation', () => {
+    expect(text).toContain("'@astryxdesign/theme-neutral/built'");
+    expect(text).toContain("'@astryxdesign/theme-neutral/theme.css'");
+  });
+
+  it('mentions building custom themes via `astryx theme build`', () => {
+    expect(text).toContain('astryx theme build <file>');
+  });
+
+  it('does not steer users to the runtime style-injection import', () => {
+    // The bare source import (no `/built`) is the slow runtime-injection path.
+    expect(text).not.toContain("from '@astryxdesign/theme-neutral'");
+  });
+});