@astryxdesign/cli 0.1.4-canary.fd7ab46 → 0.1.4

package/src/commands/build-theme.mjs

@@ -175,85 +175,14 @@ async function getKnownValues(componentName) {
   return _knownValuesCache.get(componentName);
 }
 
-/**
- * Resolve `@astryxdesign/core`'s package root relative to the CLI package. Core
- * and the CLI ship as siblings (`@astryxdesign/core`, `@astryxdesign/cli`), so
- * `../../../core` from `src/commands/` reaches core whether installed from npm
- * or run inside the monorepo. Returns null if it can't be found.
- */
-function resolveCoreRoot() {
-  const cliDir = path.dirname(fileURLToPath(import.meta.url));
-  const coreRoot = path.resolve(cliDir, '../../../core');
-  return fs.existsSync(coreRoot) ? coreRoot : null;
-}
-
-/**
- * Read the type declarations `@astryxdesign/core/<Component>` exposes so we can
- * check whether a given augmentation-target interface actually exists before
- * generating a module augmentation against it.
- *
- * Reads the shipped `dist/<Component>/index.d.ts` (what a consumer's TypeScript
- * actually sees), falling back to the `src/<Component>/index.ts` in the
- * monorepo. Returns the file contents, or '' if nothing is found.
- */
-const _componentDeclCache = new Map();
-function readComponentDeclarations(pascalName) {
-  if (_componentDeclCache.has(pascalName)) {
-    return _componentDeclCache.get(pascalName);
-  }
-  let contents = '';
-  const coreRoot = resolveCoreRoot();
-  if (coreRoot) {
-    const candidates = [
-      path.join(coreRoot, 'dist', pascalName, 'index.d.ts'),
-      path.join(coreRoot, 'src', pascalName, 'index.ts'),
-    ];
-    for (const file of candidates) {
-      try {
-        if (fs.existsSync(file)) {
-          contents = fs.readFileSync(file, 'utf-8');
-          break;
-        }
-      } catch {
-        // ignore and try the next candidate
-      }
-    }
-  }
-  _componentDeclCache.set(pascalName, contents);
-  return contents;
-}
-
-/**
- * Determine whether `@astryxdesign/core/<Component>` exports an interface named
- * `interfaceName` that can be augmented via module augmentation.
- *
- * Only interfaces are extension points — closed literal-union types (e.g.
- * `HeadingType`, `ButtonSize`) are NOT augmentable, so a generated augmentation
- * against them is dead code. We check that the name is exported (directly or
- * re-exported) as a type/interface.
- */
-function componentHasAugmentableInterface(pascalName, interfaceName) {
-  const decl = readComponentDeclarations(pascalName);
-  if (!decl) return false;
-  // Word-boundary match so `ButtonVariantMap` doesn't match `XButtonVariantMap`.
-  const re = new RegExp(`\\b${interfaceName}\\b`);
-  return re.test(decl);
-}
-
 /**
  * Generate TypeScript declaration content with module augmentation for custom
  * component prop values found in the theme's `components` keys. Reads known
  * values from doc files to filter out base prop values.
  *
- * Interface naming convention: PascalCase(component) + PascalCase(prop) + Map
- *   banner + status → BannerStatusMap
- *   button + variant → ButtonVariantMap
- *
- * An augmentation is only emitted when `@astryxdesign/core/<Component>` actually
- * exports a matching interface. Props backed by closed literal-union types
- * (e.g. Button `size`, Heading `type`/`level`) have no augmentation point, so
- * generating a `declare module` block for them would be dead code — those are
- * skipped.
+ * Interface naming convention: Astryx + PascalCase(component) + PascalCase(prop) + Map
+ *   banner + status → XDSBannerStatusMap
+ *   button + variant → XDSButtonVariantMap
  *
  * @param {object} themeDef - Theme definition (resolved by defineTheme)
  * @returns {Promise<string|null>} TypeScript declaration content, or null if no augmentations needed
@@ -305,14 +234,7 @@ async function generateVariantDeclarationsAsync(themeDef) {
       const pascal = toPascalCase(component);
       const propPascal = prop.charAt(0).toUpperCase() + prop.slice(1);
       const modulePath = `@astryxdesign/core/${pascal}`;
-      const interfaceName = `${pascal}${propPascal}Map`;
-
-      // Only augment interfaces that actually exist as an extension point in
-      // core. Props backed by closed literal-union types (e.g. Button `size`,
-      // Heading `type`/`level`) have no `*Map` interface — a `declare module`
-      // block against a non-existent interface just creates a new, unused
-      // interface and never extends the component's prop union, so skip it.
-      if (!componentHasAugmentableInterface(pascal, interfaceName)) continue;
+      const interfaceName = `XDS${pascal}${propPascal}Map`;
 
       sections.push(`declare module '${modulePath}' {`);
       sections.push(`  interface ${interfaceName} {`);
@@ -325,13 +247,6 @@ async function generateVariantDeclarationsAsync(themeDef) {
     }
   }
 
-  // If every custom value targeted a non-augmentable prop, there's nothing to
-  // emit beyond the header — return null so no `.variants.d.ts` is written.
-  const hasEmittedAugmentation = sections.some(line =>
-    line.startsWith('declare module'),
-  );
-  if (!hasEmittedAugmentation) return null;
-
   return sections.join('\n');
 }
 
@@ -518,21 +433,13 @@ ${iconReExport}`;
 /**
  * Generate TypeScript declarations for a built theme module.
  */
-function generateBuiltTypes(themeDef, iconInfo, variantsFileName) {
+function generateBuiltTypes(themeDef, iconInfo) {
   const iconType = iconInfo
     ? `import type { IconRegistry } from '@astryxdesign/core/Icon';
 export declare const ${iconInfo.exportName}: IconRegistry;
 `
     : '';
-  // Pull in the generated custom-variant augmentations so that importing the
-  // theme's types also loads the module augmentations (otherwise the
-  // `.variants.d.ts` is emitted but never referenced, and the custom variants
-  // never widen the component prop unions for consumers).
-  const variantsRef = variantsFileName
-    ? `/// <reference path="./${variantsFileName}" />
-`
-    : '';
-  return `${variantsRef}import type { DefinedTheme } from '@astryxdesign/core/theme';
+  return `import type { DefinedTheme } from '@astryxdesign/core/theme';
 ${iconType}export declare const ${toIdentifier(themeDef.name)}Theme: DefinedTheme;
 `;
 }
@@ -939,15 +846,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}`,
@@ -994,23 +894,19 @@ export function registerTheme(program) {
 
       const iconInfo = extractIconInfo(filePath);
 
-      // Type augmentation .d.ts if theme has custom prop values. Computed
-      // before the main .d.ts so the latter can reference it (see below).
+      // Generate all file contents in memory first.
+      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
+      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
+      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo);
+
+      // Type augmentation .d.ts if theme has custom prop values
       const augmentationSource = resolvedTheme || themeDef;
       const variantDecl = await generateVariantDeclarationsAsync(augmentationSource);
-      const variantsFileName = variantDecl ? `${baseName}.variants.d.ts` : null;
-      const variantDtsPath = variantDecl ? path.join(outDir, variantsFileName) : null;
+      const variantDtsPath = variantDecl ? path.join(outDir, `${baseName}.variants.d.ts`) : null;
       const variantContent = variantDecl
         ? generatedHeader(sourceRelative, 'ts', buildCommand) + variantDecl
         : null;
 
-      // Generate all file contents in memory first. The main .d.ts references
-      // the variants file (when present) via a triple-slash directive so
-      // importing the theme also loads the custom-variant augmentations.
-      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
-      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
-      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo, variantsFileName);
-
       // Atomic-ish write: stage every file as `<dest>.tmp`, then rename
       // each into place. If any stage step fails we clean up partials and
       // exit; if a rename fails mid-way we still have the originals (or

package/src/commands/component-resolution.test.mjs

@@ -78,13 +78,13 @@ describe('findShowcase() priority', () => {
   it('Badge resolves to Badge dir, not a sibling that uses Badge', async () => {
     const result = await findShowcase('Badge');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Badge[/\\]/);
+    expect(result.filePath).toMatch(/\/Badge\//);
   });
 
   it('Avatar resolves to Avatar dir, not AvatarStatusDot', async () => {
     const result = await findShowcase('Avatar');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Avatar[/\\]/);
+    expect(result.filePath).toMatch(/\/Avatar\//);
     expect(result.filePath).not.toMatch(/AvatarStatusDot/);
   });
 
@@ -92,7 +92,7 @@ describe('findShowcase() priority', () => {
     const result = await findShowcase('ClickableCard');
     expect(result).not.toBeNull();
     expect(result.name).toBe('ClickableCard');
-    expect(result.filePath).toMatch(/[/\\]Card[/\\]/);
+    expect(result.filePath).toMatch(/\/Card\//);
   });
 
   it('SelectableCard resolves via componentsUsed in Card/', async () => {
@@ -104,7 +104,7 @@ describe('findShowcase() priority', () => {
   it('Stack resolves to Stack dir despite componentsUsed elsewhere', async () => {
     const result = await findShowcase('Stack');
     expect(result).not.toBeNull();
-    expect(result.filePath).toMatch(/[/\\]Stack[/\\]/);
+    expect(result.filePath).toMatch(/\/Stack\//);
   });
 
   it('returns null for nonexistent component', async () => {

package/src/commands/doctor.test.mjs

@@ -63,33 +63,6 @@ function installPkg(name, version = '1.0.0') {
   return dir;
 }
 
-/**
- * Mirror pnpm's layout: the real package lives under node_modules/.pnpm and
- * the entry in the scope directory is a symlink to it.
- */
-function installPkgPnpmStyle(name, version = '1.0.0') {
-  const realDir = path.join(
-    tmpDir,
-    'node_modules',
-    '.pnpm',
-    `${name.replace('/', '+')}@${version}`,
-    'node_modules',
-    ...name.split('/'),
-  );
-  fs.mkdirSync(realDir, {recursive: true});
-  fs.writeFileSync(
-    path.join(realDir, 'package.json'),
-    JSON.stringify({name, version, main: 'index.js'}),
-  );
-  fs.writeFileSync(path.join(realDir, 'index.js'), 'module.exports = {};');
-  const linkPath = path.join(tmpDir, 'node_modules', ...name.split('/'));
-  fs.mkdirSync(path.dirname(linkPath), {recursive: true});
-  // 'junction' keeps this working on Windows without elevated permissions;
-  // it is ignored on posix.
-  fs.symlinkSync(realDir, linkPath, 'junction');
-  return linkPath;
-}
-
 function find(checks, id) {
   return checks.find(c => c.id === id);
 }
@@ -146,13 +119,6 @@ describe('doctor — individual checks', () => {
     expect(res.status).toBe('pass');
   });
 
-  it('themes: detects pnpm-style symlinked theme packages (#3530)', () => {
-    installPkgPnpmStyle('@astryxdesign/theme-neutral', '0.1.2');
-    const res = checkThemes({cwd: tmpDir, configTheme: 'default'});
-    expect(res.status).toBe('pass');
-    expect(res.message).toContain('@astryxdesign/theme-neutral');
-  });
-
   it('config: INFO when no astryx.config.mjs', async () => {
     const res = await checkConfig({cwd: tmpDir, configPath: null});
     expect(res.status).toBe('info');

package/src/commands/init.mjs

@@ -198,7 +198,7 @@ export function registerInit(program) {
     .option('--features <list>', 'Comma-separated features to install (agents, theme, template)')
     .option('--all', 'Install all features, no prompts')
     .option('--remove-agents', 'Remove AI agent docs from all agent doc files')
-    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, hermes, all')
+    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, all')
     .option('--agent-docs-path <path...>', 'Explicit file path(s) for agent docs')
     .action(async (options) => {
       const targetDir = process.cwd();

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/src/lib/component-discovery.mjs

@@ -335,13 +335,10 @@ export function resolveImportPath(coreDir, componentName) {
     ? JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
     : null;
 
-  const exportKeys = Object.keys(pkg?.exports || {});
-
   // Priority 1: exact subpath export matching the component name (e.g. ./Heading)
   // This allows convenience re-export directories to win over the source directory.
-  const exactMatch = exportKeys.find(k => k.toLowerCase() === `./${componentName}`.toLowerCase());
-  if (exactMatch) {
-    return `@astryxdesign/core/${exactMatch.slice(2)}`;
+  if (pkg?.exports?.[`./${componentName}`]) {
+    return `@astryxdesign/core/${componentName}`;
   }
 
   const sourcePath = findComponentSource(coreDir, componentName);
@@ -351,9 +348,8 @@ export function resolveImportPath(coreDir, componentName) {
   const relToSrc = path.relative(srcDir, sourcePath);
   const topDir = relToSrc.split(path.sep)[0];
 
-  const topMatch = exportKeys.find(k => k.toLowerCase() === `./${topDir}`.toLowerCase());
-  if (topMatch) {
-    return `@astryxdesign/core/${topMatch.slice(2)}`;
+  if (pkg?.exports?.[`./${topDir}`]) {
+    return `@astryxdesign/core/${topDir}`;
   }
 
   return '@astryxdesign/core';

package/templates/blocks/components/AspectRatio/AspectRatioCircleImage.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioCircleImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} shape="ellipse" fit="cover">
+      <AspectRatio ratio={1} shape="ellipse">
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="Circular image"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioImageGallery.tsx

@@ -25,11 +25,16 @@ export default function AspectRatioImageGallery() {
     <Center width={600}>
       <Grid columns={3} gap={4} width="100%">
         {images.map(({id, alt}) => (
-          <AspectRatio key={id} ratio={4 / 3} fit="cover">
+          <AspectRatio key={id} ratio={4 / 3}>
             <img
               src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
               alt={alt}
-              style={{borderRadius: 8}}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                borderRadius: 8,
+              }}
             />
           </AspectRatio>
         ))}

package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -34,13 +34,16 @@ export default function AspectRatioShowcase() {
         <VStack key={label} gap={2} hAlign="center">
           <AspectRatio
             ratio={ratio}
-            fit="cover"
             style={{
               height: 120,
               width: 'auto',
               borderRadius: 'var(--radius-container)',
             }}>
-            <img src={src} alt={alt} />
+            <img
+              src={src}
+              alt={alt}
+              style={{width: '100%', height: '100%', objectFit: 'cover'}}
+            />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

package/templates/blocks/components/AspectRatio/AspectRatioSquareImage.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioSquareImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} fit="cover">
+      <AspectRatio ratio={1}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="1:1 square"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioWidescreen.tsx

@@ -8,10 +8,15 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioWidescreen() {
   return (
     <Center width={600}>
-      <AspectRatio ratio={16 / 9} fit="cover">
+      <AspectRatio ratio={16 / 9}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
           alt="16:9 widescreen"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
         />
       </AspectRatio>
     </Center>

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>
   );
 }