@astryxdesign/cli 0.1.4-canary.12abceb → 0.1.4-canary.188a3dc

package/docs/styling.doc.mjs

@@ -338,59 +338,6 @@ const styles = stylex.create({
         },
       ],
     },
-    {
-      title: 'StyleX Build Setup (required for swizzled components)',
-  category: 'guide',
-      content: [
-        {
-          type: 'prose',
-          text: 'Astryx components ship pre-compiled, so consuming the published package needs no StyleX setup. But `astryx swizzle <Component>` copies the raw StyleX *source* into your app, and StyleX source requires a build-time StyleX compiler to produce atomic CSS. Without one the component compiles but renders completely unstyled: no error, no warning. If a swizzled component looks unstyled, a missing StyleX compiler is almost always why. The same applies if you author your own StyleX with `stylex.create()`.',
-        },
-        {
-          type: 'table',
-          headers: ['Bundler', 'StyleX plugin'],
-          rows: [
-            ['Webpack', '@stylexjs/webpack-plugin'],
-            ['Vite / Rollup', '@stylexjs/rollup-plugin (or a community Vite plugin)'],
-            ['Babel (any bundler)', '@stylexjs/babel-plugin + @stylexjs/postcss-plugin'],
-            ['Next.js (App Router, SWC)', 'An SWC-based transform; see the Next.js note below'],
-          ],
-        },
-        {
-          type: 'prose',
-          text: 'Next.js (App Router) is the sharp edge. StyleX\'s canonical compiler is a Babel plugin, but introducing a Babel config in Next.js disables the SWC compiler, which in turn breaks SWC-dependent features like `next/font`. So the "obvious" Babel setup is actively incompatible with a standard Next 15 App Router app.',
-        },
-        {
-          type: 'prose',
-          text: 'The working path on Next.js is an SWC-based StyleX transform (e.g. the community `@stylexswc/nextjs-plugin`) wired into `next.config`, which keeps SWC and `next/font` intact. See the example app `apps/example-nextjs-stylex` in the repo for a complete, working Next.js + StyleX + SWC configuration.',
-        },
-        {
-          type: 'code',
-          lang: 'js',
-          label: 'next.config.mjs: SWC-based StyleX transform (keeps next/font working)',
-          code: `import stylexPlugin from '@stylexswc/nextjs-plugin';
-
-export default stylexPlugin({
-  rsOptions: {
-    // Resolve @astryxdesign/core's StyleX so swizzled component source compiles.
-    aliases: {'@/*': ['./src/*']},
-    unstable_moduleResolution: {type: 'commonJS'},
-  },
-})({
-  // your existing Next.js config
-});`,
-        },
-        {
-          type: 'list',
-          style: 'unordered',
-          items: [
-            'Symptom of a missing compiler: swizzled component renders with no styles, but no build or runtime error.',
-            'Do NOT add @stylexjs/babel-plugin to a Next.js App Router app; it disables SWC and breaks next/font.',
-            'Pure theming (defineTheme + astryx theme build) needs NO StyleX compiler; only swizzled/authored StyleX source does.',
-          ],
-        },
-      ],
-    },
     {
       title: 'What NOT to Do',
   category: 'guide',

package/docs/working-with-ai.doc.mjs

@@ -125,7 +125,7 @@ If you don't know all three, run \`npx astryx init --features agents\` to genera
           lang: 'json',
           label: 'package.json',
           code: `"scripts": {
-  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
+  "xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
 }`,
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.12abceb",
+  "version": "0.1.4-canary.188a3dc",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -68,17 +68,17 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@clack/prompts": "^1.7.0",
+    "@clack/prompts": "^1.5.1",
     "commander": "^12.1.0",
     "jiti": "^2.7.0",
     "jscodeshift": "^17.3.0",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.12abceb",
-    "@astryxdesign/core": "0.1.4-canary.12abceb",
-    "@astryxdesign/lab": "0.1.4-canary.12abceb",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.12abceb",
+    "@astryxdesign/charts": "0.1.4-canary.188a3dc",
+    "@astryxdesign/core": "0.1.4-canary.188a3dc",
+    "@astryxdesign/lab": "0.1.4-canary.188a3dc",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.188a3dc",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -96,10 +96,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.12abceb",
-    "@astryxdesign/core": "0.1.4-canary.12abceb",
-    "@astryxdesign/lab": "0.1.4-canary.12abceb",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.12abceb",
+    "@astryxdesign/charts": "0.1.4-canary.188a3dc",
+    "@astryxdesign/core": "0.1.4-canary.188a3dc",
+    "@astryxdesign/lab": "0.1.4-canary.188a3dc",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.188a3dc",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/codemods/__tests__/registry.test.mjs

@@ -19,7 +19,6 @@ describe('registry', () => {
         '0.1.0',
         '0.1.2',
         '0.1.3',
-        '0.1.5',
       ]);
     });
   });

package/src/codemods/registry.mjs

@@ -20,7 +20,6 @@ const registry = new Map([
   ['0.1.0', () => import('./transforms/v0.1.0/index.mjs')],
   ['0.1.2', () => import('./transforms/v0.1.2/index.mjs')],
   ['0.1.3', () => import('./transforms/v0.1.3/index.mjs')],
-  ['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/src/commands/build-theme.mjs

@@ -939,15 +939,8 @@ export function registerTheme(program) {
         if (component.length > 0) {
           const componentInner = component.join('\n\n');
           const componentScope = `@scope (${scopeSelector}) to (${scopeTo}) {\n${componentInner}\n}`;
-          // light-dark() needs a color-scheme declaration in this bundle, but a
-          // bare `:root { color-scheme: light dark }` outranks reset.css's
-          // `html[data-theme]` mapping (astryx-theme layer comes after reset),
-          // silently defeating `<Theme mode>` forcing on <html>. Mirror the
-          // attribute-keyed mapping so the declaration follows the active mode.
           const colorSchemeDecl = componentScope.includes('light-dark(')
-            ? '  :root { color-scheme: light dark; }\n' +
-              '  html[data-theme="light"] { color-scheme: light; }\n' +
-              '  html[data-theme="dark"] { color-scheme: dark; }\n\n'
+            ? '  :root { color-scheme: light dark; }\n\n'
             : '';
           cssParts.push(
             `@layer astryx-theme {\n${colorSchemeDecl}${componentScope}\n}`,

package/src/commands/build-theme.variants.test.mjs

@@ -28,10 +28,20 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as os from 'node:os';
 import {fileURLToPath} from 'node:url';
-import {ensureCoreBuilt} from './ensure-core-built.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
+const REPO_ROOT = path.resolve(__dirname, '../../../..');
+const CORE_THEME_ENTRY = path.join(
+  REPO_ROOT,
+  'packages/core/dist/theme/index.js',
+);
+// The fix reads core's shipped component declarations to decide whether an
+// interface is augmentable; those .d.ts files come from the same core build.
+const CORE_BUTTON_DTS = path.join(
+  REPO_ROOT,
+  'packages/core/dist/Button/index.d.ts',
+);
 
 function runCli(args, cwd) {
   try {
@@ -58,13 +68,14 @@ function writeTheme(dir, contents) {
   return file;
 }
 
-// Build core through the shared lock helper — this suite previously ran its
-// own unguarded `if (!exists) pnpm -F core build`, and when Vitest scheduled
-// it alongside the other build-theme suites on a fresh checkout, the
-// concurrent builds collided on packages/core/dist (core's build starts by
-// wiping dist), nondeterministically breaking whichever suite was mid-read.
 beforeAll(() => {
-  ensureCoreBuilt();
+  if (!fs.existsSync(CORE_THEME_ENTRY) || !fs.existsSync(CORE_BUTTON_DTS)) {
+    execFileSync('pnpm', ['-F', '@astryxdesign/core', 'build'], {
+      cwd: REPO_ROOT,
+      stdio: 'pipe',
+      timeout: 180_000,
+    });
+  }
 }, 200_000);
 
 let tmpDir;

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/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/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}>

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

@@ -112,7 +112,7 @@ function GalleryCard({
 export default function MixedGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/payment-form/page.tsx

@@ -153,6 +153,10 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
 const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = {flexBasis: 0};
 // Space the Order Summary content below its collapsible trigger title.
@@ -262,9 +266,9 @@ export default function PaymentFormPage() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
-        <LayoutContent padding={0}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"

package/templates/pages/product-detail/page.tsx

@@ -3,7 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {
+  VStack,
+  HStack,
+  Layout,
+  LayoutContent,
+} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -198,7 +203,10 @@ function ProductInfo() {
       <VStack gap={2}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
-          <SegmentedControl value={finish} onChange={setFinish} label="Finish">
+          <SegmentedControl
+            value={finish}
+            onChange={setFinish}
+            label="Finish">
             {FINISHES.map(f => (
               <SegmentedControlItem
                 key={f.value}
@@ -278,7 +286,7 @@ export default function ProductDetailTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

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

@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
 export default function ProductGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/settings/page.tsx

@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1440}
       header={
         <LayoutHeader hasDivider>

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

@@ -101,7 +101,7 @@ function ImageGrid() {
 export default function SideGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/table-page/page.tsx

@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-chart/page.tsx

@@ -513,7 +513,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageChartTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-heatmap-status/page.tsx

@@ -430,7 +430,7 @@ function OutageHeatmap() {
 export default function TablePageHeatmapStatusTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -867,7 +867,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageShoeStoreHeatmapTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">