@astryxdesign/cli 0.1.1-canary.a514b99 → 0.1.1-canary.b6ade74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.1-canary.a514b99",
+  "version": "0.1.1-canary.b6ade74",
   "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.a514b99",
-    "@astryxdesign/lab": "0.1.1-canary.a514b99",
-    "@astryxdesign/theme-neutral": "0.1.1-canary.a514b99"
+    "@astryxdesign/core": "0.1.1-canary.b6ade74",
+    "@astryxdesign/lab": "0.1.1-canary.b6ade74",
+    "@astryxdesign/theme-neutral": "0.1.1-canary.b6ade74"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +70,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.1-canary.a514b99",
-    "@astryxdesign/lab": "0.1.1-canary.a514b99",
-    "@astryxdesign/theme-neutral": "0.1.1-canary.a514b99"
+    "@astryxdesign/core": "0.1.1-canary.b6ade74",
+    "@astryxdesign/lab": "0.1.1-canary.b6ade74",
+    "@astryxdesign/theme-neutral": "0.1.1-canary.b6ade74"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/api/template.mjs

@@ -275,6 +275,65 @@ const STRUCTURAL = new Set([
   'FormLayout', 'Center',
 ]);
 
+const SPATIAL_PROPS = [
+  'padding', 'contentPadding', 'gap', 'rowGap', 'columnGap',
+  'columns', 'minChildWidth', 'hasDivider', 'defaultHasDividers',
+  'variant', 'density', 'role', 'height', 'width', 'maxWidth',
+];
+
+/**
+ * Copy allowlisted layout props verbatim from a JSX opening-tag fragment.
+ * Uses quote/brace matching so object literals and spaced strings stay intact.
+ *
+ * @param {string} tagText
+ * @returns {string[]}
+ */
+function extractSpatialAttrs(tagText) {
+  const attrs = [];
+  for (const name of SPATIAL_PROPS) {
+    const eqMatch = tagText.match(new RegExp(`\\b${name}\\s*=\\s*`));
+    if (eqMatch) {
+      const start = eqMatch.index;
+      let i = eqMatch.index + eqMatch[0].length;
+      const rest = tagText.slice(i);
+
+      if (rest[0] === '"' || rest[0] === "'") {
+        const q = rest[0];
+        i += 1;
+        while (i < tagText.length && tagText[i] !== q) {
+          if (tagText[i] === '\\') i += 1;
+          i += 1;
+        }
+        if (i < tagText.length) i += 1;
+      } else if (rest[0] === '{') {
+        let depth = 0;
+        while (i < tagText.length) {
+          if (tagText[i] === '{') depth += 1;
+          else if (tagText[i] === '}') {
+            depth -= 1;
+            if (depth === 0) {
+              i += 1;
+              break;
+            }
+          }
+          i += 1;
+        }
+      } else {
+        const bare = rest.match(/^[^\s/>]+/);
+        i += bare ? bare[0].length : 0;
+      }
+
+      attrs.push(tagText.slice(start, i).trim());
+      continue;
+    }
+
+    if (new RegExp(`\\b${name}(?=[\\s/>])`).test(tagText)) {
+      attrs.push(name);
+    }
+  }
+  return attrs;
+}
+
 function extractSkeleton(source) {
   const lines = source.split('\n');
   const out = [];
@@ -309,16 +368,7 @@ function extractSkeleton(source) {
         if (lines[j].includes('>')) break;
       }
 
-      const props = [];
-      const propRegex = /\b(padding|contentPadding|gap|rowGap|columnGap|columns|minChildWidth|hasDivider|defaultHasDividers|variant|density|role|height|width|maxWidth)\s*[=]\s*\{?\s*['"]?([^}'"\s,/>]+)/g;
-      let m;
-      while ((m = propRegex.exec(tagText)) !== null) {
-        const val = m[2];
-        if (val === 'true') props.push(m[1]);
-        else if (/^\d+$/.test(val)) props.push(`${m[1]}={${val}}`);
-        else props.push(`${m[1]}="${val}"`);
-      }
-
+      const props = extractSpatialAttrs(tagText);
       const hasSpatialProps = props.length > 0;
       const propStr = hasSpatialProps ? ' ' + props.join(' ') : '';
       const isVStack = comp === 'VStack' || comp === 'HStack';

package/src/api/template.test.mjs

@@ -74,5 +74,7 @@ describe('template --skeleton component extraction (prefix-agnostic)', () => {
     expect(result.data.skeleton.trim().length).toBeGreaterThan(0);
     expect(result.data.skeleton).toMatch(/<[A-Z]\w+/);
     expect(result.data.skeleton).not.toContain('<XDS');
+
+    expect(result.data.skeleton).toContain('columns={{minWidth: 200}}');
   });
 });

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'");
+  });
+});