@astryxdesign/cli 0.1.0 → 0.1.1-canary.129bf0e

package/src/commands/upgrade.test.mjs

@@ -6,7 +6,6 @@ import * as path from 'node:path';
 import * as os from 'node:os';
 import {Command} from 'commander';
 import {registerUpgrade} from './upgrade.mjs';
-import {latestVersion} from '../codemods/registry.mjs';
 
 let tmpDir;
 let originalCwd;
@@ -15,7 +14,7 @@ let stdoutCalls;
 let exitCode;
 
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-upgrade-test-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-upgrade-test-'));
   originalCwd = process.cwd();
   process.chdir(tmpDir);
   logCalls = [];
@@ -53,13 +52,28 @@ function createProgram() {
   return program;
 }
 
-function writePkg(deps) {
+function writePkg(deps = {}) {
   fs.writeFileSync(
     path.join(tmpDir, 'package.json'),
     JSON.stringify({name: 'fixture', dependencies: deps}, null, 2),
   );
 }
 
+function writeInstalledCore(version, packageName = '@astryxdesign/core') {
+  const parts = packageName.split('/');
+  const dir = path.join(tmpDir, 'node_modules', ...parts);
+  fs.mkdirSync(dir, {recursive: true});
+  fs.writeFileSync(
+    path.join(dir, 'package.json'),
+    JSON.stringify({name: packageName, version}, null, 2),
+  );
+}
+
+function writeSourceFile() {
+  fs.mkdirSync(path.join(tmpDir, 'src'), {recursive: true});
+  fs.writeFileSync(path.join(tmpDir, 'src', 'index.ts'), 'const x = 1;\n');
+}
+
 /** Run a command and capture the parsed JSON response (last printed JSON line). */
 async function runJson(args) {
   const program = createProgram();
@@ -83,53 +97,53 @@ async function runJson(args) {
 }
 
 describe('upgrade gate (semver comparison)', () => {
-  it('does NOT block an upgrade from 0.0.9 to 0.0.10 (regression)', async () => {
+  it('does NOT block an upgrade from 0.0.9 to installed 0.0.10 (regression)', async () => {
     // The original bug: string compare said '0.0.9' >= '0.0.10', so the
     // gate told users "Already up to date" without --force.
-    writePkg({'@astryxdesign/core': '^0.0.9'});
+    writePkg();
+    writeInstalledCore('0.0.10');
+    writeSourceFile();
 
-    const result = await runJson(['--json', 'upgrade', '--to', '0.0.10', '--codemod-only']);
-    // Either a real run or "no codemods available" — but never the
-    // up-to-date short-circuit (which has no `type` field).
+    const result = await runJson(['--json', 'upgrade', '--from', '0.0.9', '--path', 'src']);
     expect(result).not.toBeNull();
-    // The receipt or "no codemods" path should not look like the
-    // up-to-date short-circuit (which would return without printing JSON).
     expect(result.type === 'upgrade.run' || result.error || logCalls.some(l => l.includes('No codemods'))).toBeTruthy();
   });
 
-  it('blocks when current >= target by semver (e.g. 0.0.10 → 0.0.9)', async () => {
-    writePkg({'@astryxdesign/core': '^0.0.10'});
+  it('blocks when --from >= installed target by semver (e.g. 0.0.10 → 0.0.9)', async () => {
+    writePkg();
+    writeInstalledCore('0.0.9');
     const program = createProgram();
-    await program.parseAsync(['node', 'astryx', 'upgrade', '--to', '0.0.9']);
+    await program.parseAsync(['node', 'astryx', 'upgrade', '--from', '0.0.10']);
     const output = stdoutCalls.join('') + logCalls.join('\n');
     expect(output).toMatch(/up to date|Already/i);
   });
 });
 
-describe('upgrade --to validation', () => {
-  it('rejects bogus --to values with a structured error', async () => {
-    writePkg({'@astryxdesign/core': '^0.0.5'});
-    const result = await runJson(['--json', 'upgrade', '--to', 'bogus']);
+describe('upgrade argument validation', () => {
+  it('requires --from for upgrade runs', async () => {
+    writePkg();
+    writeInstalledCore('0.0.15');
+    const result = await runJson(['--json', 'upgrade']);
     expect(result).not.toBeNull();
-    expect(result.error).toMatch(/Invalid --to/);
+    expect(result.error).toMatch(/Missing required --from/);
     expect(exitCode).toBe(1);
   });
 
   it('rejects bogus --from values', async () => {
-    writePkg({'@astryxdesign/core': '^0.0.5'});
-    const result = await runJson(['--json', 'upgrade', '--from', 'not-a-version', '--to', '0.0.5']);
+    writePkg();
+    writeInstalledCore('0.0.15');
+    const result = await runJson(['--json', 'upgrade', '--from', 'not-a-version']);
     expect(result).not.toBeNull();
     expect(result.error).toMatch(/Invalid --from/);
     expect(exitCode).toBe(1);
   });
 
-  it('accepts a valid semver --to', async () => {
-    writePkg({'@astryxdesign/core': '^0.0.5'});
-    // Don't actually run codemods — codemod-only + a target with no
-    // matching transforms is enough to confirm validation passed.
-    const result = await runJson(['--json', 'upgrade', '--to', latestVersion, '--codemod-only']);
-    // No "Invalid --to" error means validation passed.
-    expect(result?.error || '').not.toMatch(/Invalid --to/);
+  it('detects the installed target version from @astryxdesign/core', async () => {
+    writePkg();
+    writeInstalledCore('0.0.15');
+    writeSourceFile();
+    const result = await runJson(['--json', 'upgrade', '--from', '0.0.14', '--path', 'src']);
+    expect(result?.error || '').not.toMatch(/Could not find installed/);
   });
 });
 

package/src/index.mjs

@@ -249,6 +249,7 @@ const commands = [
   {name: 'hook', path: './commands/hook/index.mjs', register: 'registerHook'},
   {name: 'discover', path: './commands/discover.mjs', register: 'registerDiscover'},
   {name: 'search', path: './commands/search.mjs', register: 'registerSearch'},
+  {name: 'build', path: './commands/build.mjs', register: 'registerBuild'},
   {name: 'doctor', path: './commands/doctor.mjs', register: 'registerDoctor'},
 ];
 

package/src/lib/config.mjs

@@ -13,6 +13,7 @@ import {pathToFileURL} from 'node:url';
 
 const DEFAULTS = {
   packages: [],
+  integrations: [],
 };
 
 /**
@@ -46,6 +47,7 @@ export async function loadConfig(startDir = process.cwd()) {
       ...DEFAULTS,
       ...config,
       packages: normalizePackages(config.packages, path.dirname(configPath)),
+      integrations: normalizeIntegrations(config.integrations),
     };
   } catch {
     return {...DEFAULTS};
@@ -72,3 +74,13 @@ function normalizePackages(packages, configDir) {
   }
   return result;
 }
+
+/**
+ * Normalize integration specs to a string array. Integrations are package names
+ * or manifest paths consumed by `astryx upgrade --integration`.
+ */
+function normalizeIntegrations(integrations) {
+  if (!integrations) return [];
+  const arr = Array.isArray(integrations) ? integrations : [integrations];
+  return arr.filter(value => typeof value === 'string' && value !== '');
+}

package/src/lib/config.test.mjs

@@ -0,0 +1,42 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {loadConfig} from './config.mjs';
+
+let tmpDir;
+
+beforeEach(() => {
+  tmpDir = fs.mkdtempSync(path.join(process.cwd(), '.astryx-config-test-'));
+});
+
+afterEach(() => {
+  fs.rmSync(tmpDir, {recursive: true, force: true});
+});
+
+describe('loadConfig', () => {
+  it('normalizes integrations from astryx.config.mjs', async () => {
+    const dir = path.join(tmpDir, 'one');
+    fs.mkdirSync(dir);
+    fs.writeFileSync(
+      path.join(dir, 'astryx.config.mjs'),
+      `export default { integrations: '@nest/xds-meta' };\n`,
+    );
+    await expect(loadConfig(dir)).resolves.toMatchObject({
+      integrations: ['@nest/xds-meta'],
+    });
+  });
+
+  it('normalizes integration arrays and filters non-strings', async () => {
+    const dir = path.join(tmpDir, 'two');
+    fs.mkdirSync(dir);
+    fs.writeFileSync(
+      path.join(dir, 'astryx.config.mjs'),
+      `export default { integrations: ['@nest/xds-meta', '', 42] };\n`,
+    );
+    await expect(loadConfig(dir)).resolves.toMatchObject({
+      integrations: ['@nest/xds-meta'],
+    });
+  });
+});

package/src/lib/error-codes.mjs

@@ -56,6 +56,7 @@
  *   | 'ERR_UNKNOWN_AGENT'
  *   | 'ERR_UNKNOWN_FEATURE'
  *   | 'ERR_UNKNOWN_CODEMOD'
+   | 'ERR_CODEMOD_FAILED'
  *   | 'ERR_NOT_FOUND'
  *   | 'ERR_NO_DOC'
  *   | 'ERR_NO_SHOWCASE'
@@ -129,6 +130,8 @@ export const ERROR_CODES = Object.freeze({
   ERR_UNKNOWN_FEATURE: 'ERR_UNKNOWN_FEATURE',
   /** A `--codemod` value did not match any registered codemod (upgrade). */
   ERR_UNKNOWN_CODEMOD: 'ERR_UNKNOWN_CODEMOD',
+  /** One or more codemods failed during an upgrade run. */
+  ERR_CODEMOD_FAILED: 'ERR_CODEMOD_FAILED',
   /** A generic discover/lookup query matched nothing in any package. */
   ERR_NOT_FOUND: 'ERR_NOT_FOUND',
 

package/src/types/error-codes.d.ts

@@ -29,6 +29,7 @@ export type ErrorCode =
   | 'ERR_UNKNOWN_AGENT'
   | 'ERR_UNKNOWN_FEATURE'
   | 'ERR_UNKNOWN_CODEMOD'
+  | 'ERR_CODEMOD_FAILED'
   | 'ERR_NOT_FOUND'
   | 'ERR_NO_DOC'
   | 'ERR_NO_SHOWCASE'

package/src/utils/interactive.mjs

@@ -60,7 +60,7 @@ export function isInteractive({
  */
 export function requireInteractive({command, hint, json = false} = {}, env) {
   if (isInteractive(env)) return;
-  const name = command ? `xds ${command}` : 'this command';
+  const name = command ? `astryx ${command}` : 'this command';
   console.error(
     `Error: \`${name}\` with no flags is interactive and requires a TTY.`,
   );

package/src/utils/interactive.test.mjs

@@ -64,5 +64,7 @@ describe('requireInteractive', () => {
     const output = err.mock.calls.map(c => c.join(' ')).join('\n');
     expect(output).toMatch(/requires a TTY/i);
     expect(output).toMatch(/astryx theme <preset>/);
+    expect(output).toMatch(/`astryx theme`/);
+    expect(output).not.toMatch(/\bxds\b/);
   });
 });

package/src/utils/package-manager.mjs

@@ -4,7 +4,7 @@
  * @file Detect the project's package manager from lockfiles.
  *
  * Returns the correct command prefix for running package binaries
- * (e.g. 'npx xds', 'yarn xds', 'pnpm exec xds').
+ * (e.g. 'npx astryx', 'yarn astryx', 'pnpm exec astryx').
  */
 
 import * as fs from 'node:fs';

package/src/utils/package-manager.test.mjs

@@ -18,7 +18,7 @@ afterEach(() => {
 });
 
 function makeTmpDir() {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-pm-test-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-pm-test-'));
   return tmpDir;
 }
 

package/src/utils/path-safety.test.mjs

@@ -13,7 +13,7 @@ import {
 
 let tmpDir;
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-path-safety-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-path-safety-'));
 });
 afterEach(() => {
   fs.rmSync(tmpDir, {recursive: true, force: true});

package/src/utils/paths.test.mjs

@@ -9,7 +9,7 @@ import {findCoreDir, findProjectRoot, listComponents, discoverExternalPackages}
 let tmpDir;
 
 function makeTmpDir() {
-  return fs.mkdtempSync(path.join(os.tmpdir(), 'xds-paths-test-'));
+  return fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-paths-test-'));
 }
 
 beforeEach(() => {
@@ -69,12 +69,12 @@ describe('findProjectRoot', () => {
 describe('discoverExternalPackages', () => {
   it('finds packages with an "astryx" field in package.json', () => {
     const nm = path.join(tmpDir, 'node_modules');
-    const extDir = path.join(nm, 'xds-charts');
+    const extDir = path.join(nm, 'astryx-charts');
     fs.mkdirSync(extDir, {recursive: true});
     fs.writeFileSync(
       path.join(extDir, 'package.json'),
       JSON.stringify({
-        name: 'xds-charts',
+        name: 'astryx-charts',
         astryx: {docs: './src', category: 'Data Viz'},
       }),
     );
@@ -82,7 +82,7 @@ describe('discoverExternalPackages', () => {
     const result = discoverExternalPackages(tmpDir);
     expect(result).toEqual([
       {
-        name: 'xds-charts',
+        name: 'astryx-charts',
         category: 'Data Viz',
         docsDir: path.join(extDir, 'src'),
         blocksDir: null,
@@ -92,7 +92,7 @@ describe('discoverExternalPackages', () => {
 
   it('handles scoped packages (@org/pkg)', () => {
     const nm = path.join(tmpDir, 'node_modules');
-    const scopedDir = path.join(nm, '@acme', 'xds-widgets');
+    const scopedDir = path.join(nm, '@acme', 'astryx-widgets');
     fs.mkdirSync(scopedDir, {recursive: true});
     fs.writeFileSync(
       path.join(scopedDir, 'package.json'),
@@ -165,12 +165,12 @@ describe('discoverExternalPackages', () => {
 
   it('walks up directories to find node_modules', () => {
     const nm = path.join(tmpDir, 'node_modules');
-    const extDir = path.join(nm, 'xds-ext');
+    const extDir = path.join(nm, 'astryx-ext');
     fs.mkdirSync(extDir, {recursive: true});
     fs.writeFileSync(
       path.join(extDir, 'package.json'),
       JSON.stringify({
-        name: 'xds-ext',
+        name: 'astryx-ext',
         astryx: {docs: './src'},
       }),
     );
@@ -180,7 +180,7 @@ describe('discoverExternalPackages', () => {
 
     const result = discoverExternalPackages(nested);
     expect(result).toHaveLength(1);
-    expect(result[0].name).toBe('xds-ext');
+    expect(result[0].name).toBe('astryx-ext');
   });
 
   it('handles invalid JSON in package.json gracefully', () => {

package/src/utils/update-check.mjs

@@ -4,9 +4,8 @@
  * @file Check for newer @astryxdesign/core versions via local signals.
  *
  * Resolution order:
- * 1. $ASTRYX_LATEST_VERSION env var (set by previous CLI invocation)
- * 2. xds.versionFile in consumer's package.json (e.g. ../../libs/xds-common/LATEST_VERSION)
- * 3. If neither: no hint (no network calls from this module)
+ * 1. $ASTRYX_LATEST_VERSION env var
+ * 2. If unset: no hint (no network calls from this module)
  *
  * When a newer version is detected, returns a hint string for CLI output.
  * Also sets $ASTRYX_LATEST_VERSION for subsequent commands in the same shell.
@@ -23,34 +22,13 @@ import {semverGt} from './semver.mjs';
  * @param {string} [cwd] - Project directory (default: process.cwd())
  * @returns {string|null} Latest version string, or null if unknown
  */
-export function getLatestVersion(cwd = process.cwd()) {
+export function getLatestVersion() {
   // 1. Check env var (fastest — set by previous CLI run)
   const envVersion = process.env.ASTRYX_LATEST_VERSION;
   if (envVersion && /^\d+\.\d+\.\d+/.test(envVersion)) {
     return envVersion;
   }
 
-  // 2. Check versionFile from package.json config
-  try {
-    const pkgPath = path.resolve(cwd, 'package.json');
-    if (fs.existsSync(pkgPath)) {
-      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-      const versionFile = pkg.astryx?.versionFile;
-
-      if (versionFile) {
-        const filePath = path.resolve(cwd, versionFile);
-        if (fs.existsSync(filePath)) {
-          const version = fs.readFileSync(filePath, 'utf-8').trim();
-          if (/^\d+\.\d+\.\d+/.test(version)) {
-            return version;
-          }
-        }
-      }
-    }
-  } catch {
-    // Silently fail — version check should never break the CLI
-  }
-
   return null;
 }
 
@@ -97,7 +75,7 @@ export function checkForUpdate(cwd = process.cwd()) {
   // Use semver-aware comparison so '0.0.20' is correctly treated as greater
   // than '0.0.5' (lexicographic compare gets that backwards).
   if (semverGt(latest, installed)) {
-    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. You can upgrade with: astryx upgrade --apply --to ${latest}`;
+    return `FYI: A newer version of @astryxdesign/core (${latest}) is available. Install the new package version, then run: astryx upgrade --from <old-version> --apply`;
   }
 
   return null;

package/src/utils/update-check.test.mjs

@@ -14,7 +14,7 @@ let tmpDir;
 const originalEnv = {};
 
 beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xds-update-check-'));
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-update-check-'));
   // Save and clear env
   originalEnv.ASTRYX_LATEST_VERSION = process.env.ASTRYX_LATEST_VERSION;
   delete process.env.ASTRYX_LATEST_VERSION;
@@ -41,17 +41,6 @@ describe('getLatestVersion', () => {
     expect(getLatestVersion(tmpDir)).toBeNull();
   });
 
-  it('reads from versionFile in package.json', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './LATEST_VERSION'}}),
-    );
-
-    expect(getLatestVersion(tmpDir)).toBe('0.0.9');
-  });
-
   it('returns null when no signals exist', () => {
     fs.writeFileSync(
       path.join(tmpDir, 'package.json'),
@@ -59,26 +48,6 @@ describe('getLatestVersion', () => {
     );
     expect(getLatestVersion(tmpDir)).toBeNull();
   });
-
-  it('returns null when versionFile path does not exist', () => {
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './missing/LATEST_VERSION'}}),
-    );
-    expect(getLatestVersion(tmpDir)).toBeNull();
-  });
-
-  it('env var takes priority over versionFile', () => {
-    process.env.ASTRYX_LATEST_VERSION = '1.0.0';
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({astryx: {versionFile: './LATEST_VERSION'}}),
-    );
-
-    expect(getLatestVersion(tmpDir)).toBe('1.0.0');
-  });
 });
 
 describe('getInstalledVersion', () => {
@@ -117,7 +86,7 @@ describe('checkForUpdate', () => {
 
     const hint = checkForUpdate(tmpDir);
     expect(hint).toContain('0.0.8');
-    expect(hint).toContain('astryx upgrade --apply --to 0.0.8');
+    expect(hint).toContain('astryx upgrade --from <old-version> --apply');
     expect(hint).toContain('FYI');
   });
 
@@ -140,37 +109,6 @@ describe('checkForUpdate', () => {
     expect(checkForUpdate(tmpDir)).toBeNull();
   });
 
-  it('sets env var for subsequent calls', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.8\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({
-        dependencies: {'@astryxdesign/core': '^0.0.7'},
-        astryx: {versionFile: './LATEST_VERSION'},
-      }),
-    );
-
-    checkForUpdate(tmpDir);
-    expect(process.env.ASTRYX_LATEST_VERSION).toBe('0.0.8');
-  });
-
-  it('reads from versionFile and produces hint', () => {
-    const versionFilePath = path.join(tmpDir, 'LATEST_VERSION');
-    fs.writeFileSync(versionFilePath, '0.0.9\n');
-    fs.writeFileSync(
-      path.join(tmpDir, 'package.json'),
-      JSON.stringify({
-        dependencies: {'@astryxdesign/core': '^0.0.7'},
-        astryx: {versionFile: './LATEST_VERSION'},
-      }),
-    );
-
-    const hint = checkForUpdate(tmpDir);
-    expect(hint).toContain('0.0.9');
-    expect(hint).toContain('FYI');
-  });
-
   it('uses semver (not lexicographic) comparison for double-digit patches', () => {
     // Regression: with string compare, '0.0.20' > '0.0.5' is false because
     // '2' < '5' lexicographically. Users on 0.0.5 would never be told that

package/templates/blocks/components/AppShell/AppShellContentOnly.tsx

@@ -5,18 +5,10 @@
 import {AppShell} from '@astryxdesign/core/AppShell';
 import {VStack} from '@astryxdesign/core/Stack';
 import {Heading, Text} from '@astryxdesign/core/Text';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellContentOnly() {
   return (
-    <AppShell contentPadding={6} xstyle={styles.fit}>
+    <AppShell contentPadding={6} style={{height: '100%', minHeight: 0}}>
       <VStack gap={4}>
         <Heading level={3}>Page Content</Heading>
         <Text type="body">

package/templates/blocks/components/AppShell/AppShellShowcase.tsx

@@ -19,21 +19,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-    width: '100%',
-  },
-});
 
 export default function AppShellShowcase() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0, width: '100%'}}
       sideNav={
         <SideNav
           header={

package/templates/blocks/components/AppShell/AppShellSideNavOnly.tsx

@@ -20,20 +20,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellSideNavOnly() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       sideNav={
         <SideNav
           header={

package/templates/blocks/components/AppShell/AppShellTopNavOnly.tsx

@@ -8,20 +8,12 @@ import {Heading, Text} from '@astryxdesign/core/Text';
 import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
 import {NavIcon} from '@astryxdesign/core/NavIcon';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellTopNavOnly() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"

package/templates/blocks/components/AppShell/AppShellTopNavWithSideNav.tsx

@@ -16,20 +16,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellTopNavWithSideNav() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"

package/templates/blocks/components/AppShell/AppShellWithBanner.tsx

@@ -17,20 +17,12 @@ import {
 } from '@heroicons/react/24/outline';
 import {HomeIcon} from '@heroicons/react/24/solid';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  fit: {
-    height: '100%',
-    minHeight: 0,
-  },
-});
 
 export default function AppShellWithBanner() {
   return (
     <AppShell
       contentPadding={6}
-      xstyle={styles.fit}
+      style={{height: '100%', minHeight: 0}}
       topNav={
         <TopNav
           label="Main navigation"