@astryxdesign/cli 0.1.4-canary.fce2e7b → 0.1.4-canary.ff77e1c

package/src/commands/agent-docs.mjs

@@ -9,11 +9,12 @@
  * - Claude Code: CLAUDE.md (root) or .claude/CLAUDE.md
  * - Cursor: .cursorrules
  * - Codex/generic: AGENTS.md
+ * - Hermes Agent: .hermes.md or HERMES.md (existing), else AGENTS.md
  *
  * Auto-detect: discovers existing files and updates them in place.
  * Default (no existing files): creates .claude/CLAUDE.md.
  *
- * --agent <tool>: target a specific tool preset (claude, cursor, codex, all)
+ * --agent <tool>: target a specific tool preset (claude, cursor, codex, hermes, all)
  * --agent-docs-path <path>: explicit file path(s)
  */
 
@@ -46,6 +47,7 @@ const AGENT_PRESETS = {
   claude: [CLAUDE_MD, CLAUDE_DIR_MD],
   cursor: ['.cursorrules', AGENTS_MD],
   codex: [AGENTS_MD],
+  hermes: ['.hermes.md', 'HERMES.md', AGENTS_MD],
 };
 
 /**
@@ -64,7 +66,7 @@ export function discoverAgentDocs(targetDir) {
  * Searches for existing files first, falls back to default creation path.
  *
  * @param {string} targetDir
- * @param {string} agent - Preset name: 'claude', 'cursor', 'codex', 'all'
+ * @param {string} agent - Preset name: 'claude', 'cursor', 'codex', 'hermes', 'all'
  * @returns {{inject: string[], create: string[]}} Files to inject into vs create fresh
  */
 export function resolveAgentPaths(targetDir, agent) {
@@ -386,7 +388,7 @@ export function removeAgentDocs(targetDir) {
  * @param {object} [options]
  * @param {boolean} [options.zh]
  * @param {string} [options.lang]
- * @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', 'all'
+ * @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', 'hermes', 'all'
  * @param {string[]} [options.paths] - Explicit paths (overrides agent/auto-detect)
  * @param {boolean} [options.onlyReplace] - Only update files that already have Astryx markers (for upgrades)
  * @returns {string[]} List of files written
@@ -468,14 +470,14 @@ export function installAgentDocs(targetDir, {zh = false, lang, agent, paths, onl
   return written;
 }
 
-const VALID_AGENTS = ['claude', 'cursor', 'codex', 'all'];
+const VALID_AGENTS = ['claude', 'cursor', 'codex', 'hermes', 'all'];
 
 export function registerAgentDocs(program) {
   program
     .command('agent-docs')
     .description('Install/update the component index for AI coding agents')
     .option('--remove', 'Remove the design system section from all agent doc files')
-    .option('--agent <tool>', 'Target tool: claude, cursor, codex, all')
+    .option('--agent <tool>', 'Target tool: claude, cursor, codex, hermes, all')
     .option('--agent-docs-path <path...>', 'Explicit file path(s) to write to')
     .action(options => {
       const targetDir = process.cwd();

package/src/commands/agent-docs.test.mjs

@@ -449,6 +449,17 @@ describe('installAgentDocs', () => {
     expect(fs.existsSync(path.join(tmpDir, 'AGENTS.md'))).toBe(true);
   });
 
+  it('respects --agent hermes preset: creates AGENTS.md', () => {
+    setupCorePackage(tmpDir);
+
+    const written = installAgentDocs(tmpDir, {agent: 'hermes'});
+
+    expect(written).toEqual(['AGENTS.md']);
+    const content = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
+    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(fs.existsSync(path.join(tmpDir, '.claude'))).toBe(false);
+  });
+
   it('respects explicit --paths', () => {
     setupCorePackage(tmpDir);
 
@@ -548,4 +559,26 @@ describe('resolveAgentPaths', () => {
     expect(result.create).toContain('AGENTS.md');
     expect(result.create).toContain('.claude/CLAUDE.md');
   });
+
+  it('hermes preset creates AGENTS.md when nothing exists', () => {
+    const result = resolveAgentPaths(tmpDir, 'hermes');
+    expect(result).toEqual({inject: [], create: ['AGENTS.md']});
+  });
+
+  it('hermes preset finds existing .hermes.md', () => {
+    fs.writeFileSync(path.join(tmpDir, '.hermes.md'), '');
+    const result = resolveAgentPaths(tmpDir, 'hermes');
+    expect(result).toEqual({inject: ['.hermes.md'], create: []});
+  });
+
+  it('hermes preset finds existing HERMES.md when no .hermes.md', () => {
+    fs.writeFileSync(path.join(tmpDir, 'HERMES.md'), '');
+    const result = resolveAgentPaths(tmpDir, 'hermes');
+    expect(result).toEqual({inject: ['HERMES.md'], create: []});
+  });
+
+  it('claude preset still creates .claude/CLAUDE.md when nothing exists (hermes is additive)', () => {
+    const result = resolveAgentPaths(tmpDir, 'claude');
+    expect(result).toEqual({inject: [], create: ['.claude/CLAUDE.md']});
+  });
 });

package/src/commands/build-theme.color-scheme.test.mjs

@@ -0,0 +1,153 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Regression test for the `color-scheme` declaration `astryx theme build`
+ * emits alongside `light-dark()` token output (see #3658).
+ *
+ * `astryx theme build` injects a `color-scheme` declaration into
+ * `@layer astryx-theme` whenever the generated CSS contains `light-dark()`,
+ * so LightningCSS/browsers can resolve it. That declaration must mirror
+ * reset.css's own `html[data-theme]` -> `color-scheme` mapping (a bare
+ * `:root { color-scheme: light dark; }` alone permanently pins the page to
+ * "light dark", defeating `<Theme mode="light|dark">` forcing regardless of
+ * `@layer astryx-theme` being declared after `@layer reset` in layer order):
+ *
+ *   :root { color-scheme: light dark; }
+ *   html[data-theme="light"] { color-scheme: light; }
+ *   html[data-theme="dark"] { color-scheme: dark; }
+ *
+ * Themes that never use `light-dark()` have no `color-scheme` ambiguity to
+ * resolve, so none of the three rules should be emitted for them.
+ *
+ * Building `astryx theme build` requires a compiled @astryxdesign/core (there is no in-CLI
+ * fallback generator), so this suite builds core once in beforeAll via the
+ * shared ensureCoreBuilt() helper — which serializes concurrent Vitest workers
+ * behind a lock — to stay self-sufficient regardless of CI job ordering.
+ */
+
+import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
+import {execFileSync} from 'node:child_process';
+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 COLOR_SCHEME_ROOT_DECL = ':root { color-scheme: light dark; }';
+const COLOR_SCHEME_LIGHT_DECL = 'html[data-theme="light"] { color-scheme: light; }';
+const COLOR_SCHEME_DARK_DECL = 'html[data-theme="dark"] { color-scheme: dark; }';
+
+function runCli(args, cwd) {
+  try {
+    const out = execFileSync('node', [CLI_BIN, ...args], {
+      cwd,
+      encoding: 'utf-8',
+      stdio: ['ignore', 'pipe', 'pipe'],
+      env: {...process.env, FORCE_COLOR: '0'},
+    });
+    return {code: 0, stdout: out, stderr: ''};
+  } catch (e) {
+    return {
+      code: e.status ?? 1,
+      stdout: e.stdout?.toString() ?? '',
+      stderr: e.stderr?.toString() ?? '',
+    };
+  }
+}
+
+function writeTheme(dir, name, tokens) {
+  fs.mkdirSync(dir, {recursive: true});
+  // The CLI writes <basename>.css next to the source file, so use the
+  // theme name as the filename for unambiguous fixtures.
+  const file = path.join(dir, `${name}.mjs`);
+  fs.writeFileSync(
+    file,
+    `export default { name: ${JSON.stringify(name)}, tokens: ${JSON.stringify(tokens)} };\n`,
+  );
+  return file;
+}
+
+// `astryx theme build` imports the compiled @astryxdesign/core/theme entry. Build core
+// once if it isn't already present so the suite works in any CI job.
+beforeAll(() => {
+  ensureCoreBuilt();
+}, 200_000);
+
+let tmpDir;
+beforeEach(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-color-scheme-'));
+});
+afterEach(() => {
+  fs.rmSync(tmpDir, {recursive: true, force: true});
+});
+
+describe('theme build color-scheme output', () => {
+  it('emits the mode-aware color-scheme rules in @layer astryx-theme for a light-dark() theme', () => {
+    const project = path.join(tmpDir, 'project');
+    const themesDir = path.join(project, 'themes');
+    // A raw light-dark() token value is what triggers the color-scheme
+    // injection in build-theme.mjs (it checks the generated CSS for the
+    // literal substring). `defineTheme.test.ts` already covers the separate
+    // [light, dark] tuple -> light-dark() conversion; this fixture writes
+    // the string directly so this test stays focused on the CLI's own
+    // color-scheme decision, not on that conversion.
+    const themeFile = writeTheme(themesDir, 'with-light-dark', {
+      '--color-accent': 'light-dark(#0077B6, #48CAE4)',
+    });
+
+    const result = runCli(
+      ['theme', 'build', path.relative(project, themeFile)],
+      project,
+    );
+
+    expect(result.code).toBe(0);
+
+    const cssPath = path.join(themesDir, 'with-light-dark.css');
+    expect(fs.existsSync(cssPath)).toBe(true);
+    const css = fs.readFileSync(cssPath, 'utf-8');
+
+    expect(css).toContain('light-dark(#0077B6, #48CAE4)');
+
+    // All 3 rules must be present...
+    expect(css).toContain(COLOR_SCHEME_ROOT_DECL);
+    expect(css).toContain(COLOR_SCHEME_LIGHT_DECL);
+    expect(css).toContain(COLOR_SCHEME_DARK_DECL);
+
+    // ...and specifically inside @layer astryx-theme, not @layer reset (the
+    // declaration must sit alongside the light-dark() token/component output
+    // it resolves, not the zero-specificity prose defaults).
+    const themeLayerStart = css.indexOf('@layer astryx-theme');
+    expect(themeLayerStart).toBeGreaterThanOrEqual(0);
+    const themeLayerBody = css.slice(themeLayerStart);
+    expect(themeLayerBody).toContain(COLOR_SCHEME_ROOT_DECL);
+    expect(themeLayerBody).toContain(COLOR_SCHEME_LIGHT_DECL);
+    expect(themeLayerBody).toContain(COLOR_SCHEME_DARK_DECL);
+  });
+
+  it('omits all color-scheme rules for a theme with no light-dark() tokens', () => {
+    const project = path.join(tmpDir, 'project');
+    const themesDir = path.join(project, 'themes');
+    const themeFile = writeTheme(themesDir, 'no-light-dark', {
+      '--color-accent': '#0077B6',
+    });
+
+    const result = runCli(
+      ['theme', 'build', path.relative(project, themeFile)],
+      project,
+    );
+
+    expect(result.code).toBe(0);
+
+    const cssPath = path.join(themesDir, 'no-light-dark.css');
+    expect(fs.existsSync(cssPath)).toBe(true);
+    const css = fs.readFileSync(cssPath, 'utf-8');
+
+    expect(css).not.toContain('light-dark(');
+    expect(css).not.toContain(COLOR_SCHEME_ROOT_DECL);
+    expect(css).not.toContain(COLOR_SCHEME_LIGHT_DECL);
+    expect(css).not.toContain(COLOR_SCHEME_DARK_DECL);
+  });
+});

package/src/commands/build-theme.mjs

@@ -939,8 +939,9 @@ export function registerTheme(program) {
         if (component.length > 0) {
           const componentInner = component.join('\n\n');
           const componentScope = `@scope (${scopeSelector}) to (${scopeTo}) {\n${componentInner}\n}`;
+          // #3658: also emit attribute-specific rules so <Theme mode> can override color-scheme
           const colorSchemeDecl = componentScope.includes('light-dark(')
-            ? '  :root { color-scheme: light dark; }\n\n'
+            ? '  :root { color-scheme: light dark; }\n  html[data-theme="light"] { color-scheme: light; }\n  html[data-theme="dark"] { color-scheme: dark; }\n\n'
             : '';
           cssParts.push(
             `@layer astryx-theme {\n${colorSchemeDecl}${componentScope}\n}`,

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

@@ -28,20 +28,10 @@ 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 {
@@ -68,14 +58,13 @@ 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(() => {
-  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,
-    });
-  }
+  ensureCoreBuilt();
 }, 200_000);
 
 let tmpDir;

package/src/commands/doctor.test.mjs

@@ -63,6 +63,33 @@ 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);
 }
@@ -119,6 +146,13 @@ 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, all')
+    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, hermes, 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,6 +26,7 @@ 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,
@@ -339,6 +340,10 @@ 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
@@ -355,6 +360,13 @@ 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++;
       }
@@ -376,6 +388,7 @@ export function registerSwizzle(program) {
           outputDir: relOutput,
           filesCopied: copied,
           files: copiedFiles.map(f => f),
+          usesStyleX,
         };
         if (feedback) payload.feedback = feedback;
         return jsonOut('swizzle.copy', payload);
@@ -387,6 +400,27 @@ 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,3 +277,70 @@ 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/AspectRatio/AspectRatioCircleImage.tsx

@@ -8,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioCircleImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} shape="ellipse">
+      <AspectRatio ratio={1} shape="ellipse" fit="cover">
         <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,16 +25,11 @@ export default function AspectRatioImageGallery() {
     <Center width={600}>
       <Grid columns={3} gap={4} width="100%">
         {images.map(({id, alt}) => (
-          <AspectRatio key={id} ratio={4 / 3}>
+          <AspectRatio key={id} ratio={4 / 3} fit="cover">
             <img
               src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
               alt={alt}
-              style={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-                borderRadius: 8,
-              }}
+              style={{borderRadius: 8}}
             />
           </AspectRatio>
         ))}

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

@@ -34,16 +34,13 @@ 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}
-              style={{width: '100%', height: '100%', objectFit: 'cover'}}
-            />
+            <img src={src} alt={alt} />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

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

@@ -8,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioSquareImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1}>
+      <AspectRatio ratio={1} fit="cover">
         <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,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioWidescreen() {
   return (
     <Center width={600}>
-      <AspectRatio ratio={16 / 9}>
+      <AspectRatio ratio={16 / 9} fit="cover">
         <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/CodeBlock/CodeBlockTerminal.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Code — Terminal',
   displayName: 'Code — Terminal',
   description:
-    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages — reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
+    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages. Reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
   isReady: true,
   aspectRatio: 16 / 9,
   componentsUsed: ['CodeBlock', 'SyntaxTheme'],