@astryxdesign/cli 0.4.7 → 0.5.0-canary.009bcb3

package/api/theme/build/build.mjs

@@ -43,6 +43,10 @@ import {ERROR_CODES} from '../../../foundation/response/error-codes.mjs';
 import {AstryxError} from '../../error.mjs';
 import {logger} from '../../logger.mjs';
 import {loadComponentDoc} from '../../../foundation/discovery/component-loader.mjs';
+import {
+  collectThemingTargets,
+  targetsByKey,
+} from '../../../foundation/discovery/theming-targets.mjs';
 import {
   collectUnloadedFonts,
   formatFontLoadingHelp,
@@ -58,12 +62,14 @@ import {
 /** @type {any} */ let _defineTheme = null;
 /** @type {any} */ let _generateThemeRulesSplit = null;
 /** @type {any} */ let _generateOnMediaCSS = null;
+/** @type {any} */ let _dataTokenDefaults = null;
 /** @type {any} */ let _coreImportError = null;
 try {
   const coreTheme = await import('@astryxdesign/core/theme');
   _defineTheme = coreTheme.defineTheme;
   _generateThemeRulesSplit = coreTheme.generateThemeRulesSplit;
   _generateOnMediaCSS = coreTheme.generateOnMediaCSS;
+  _dataTokenDefaults = coreTheme.dataTokenDefaults;
 } catch (e) {
   // Capture the reason so the theme action can surface a precise, actionable
   // error. We don't throw here: this module is imported eagerly by the CLI
@@ -345,8 +351,8 @@ const _augmentationTargetCache = new Map();
  * Resolve a rendered theme class token (the key without `astryx-`) to candidate
  * public core subpaths and interface prefixes that may own its augmentable prop
  * maps. Some tokens are subtargets documented by a parent component
- * (`avatar-status-dot` augments `@astryxdesign/core/Avatar`), and some stable
- * class tokens intentionally omit word separators (`progressbar`, `statusdot`)
+ * (`avatar-status-dot` augments `@astryxdesign/core/Avatar`), and some
+ * deprecated tokens still omit word separators (`progressbar`, `statusdot`)
  * while the public API keeps `ProgressBar`/`StatusDot` casing. Component docs
  * are the source of truth for the target token → owning component relationship.
  *
@@ -424,8 +430,8 @@ async function resolveAugmentationTargetCandidates(componentName) {
 
       // Try the exact rendered token first for documented subtargets such as
       // avatar-status-dot → AvatarStatusDotVariantMap, then the owning public
-      // component name for unhyphenated public casings such as progressbar →
-      // ProgressBarVariantMap/statusdot → StatusDotVariantMap.
+      // component name for the deprecated unhyphenated tokens such as
+      // progressbar → ProgressBarVariantMap/statusdot → StatusDotVariantMap.
       addCandidate(moduleName, toPascalCase(componentName));
       addCandidate(moduleName, moduleName);
       if (Array.isArray(doc?.components)) {
@@ -882,6 +888,9 @@ ${iconType}export declare const ${toIdentifier(themeDef.name)}Theme: DefinedThem
  * Returns null when docs are unavailable so validation can skip unknown-key
  * warnings rather than guessing from a second registry.
  *
+ * Shares its enumeration with `theme targets`, so what a theme author can list
+ * is exactly what this validator accepts.
+ *
  * @returns {Promise<Record<string, string[]> | null>}
  */
 async function loadKnownComponents() {
@@ -889,44 +898,7 @@ async function loadKnownComponents() {
   const coreSrc = coreRoot ? path.join(coreRoot, 'src') : null;
   if (!coreSrc || !fs.existsSync(coreSrc)) return null;
 
-  /** @type {Record<string, string[]>} */
-  const targets = {};
-
-  /** @param {string} dir */
-  async function scan(dir) {
-    const entries = fs.readdirSync(dir, {withFileTypes: true});
-    for (const entry of entries) {
-      const full = path.join(dir, entry.name);
-      if (entry.isDirectory()) {
-        if (entry.name === 'node_modules' || entry.name === '__tests__') continue;
-        await scan(full);
-        continue;
-      }
-      if (!entry.name.endsWith('.doc.mjs')) continue;
-
-      /** @type {any} */
-      let doc;
-      try {
-        doc = await loadComponentDoc(full);
-      } catch {
-        continue;
-      }
-
-      for (const target of doc?.theming?.targets || []) {
-        const className = target?.className;
-        if (typeof className !== 'string') continue;
-        const key = className.replace(/^astryx-/, '');
-        if (!key) continue;
-        const props = [target.visualProps, target.states]
-          .filter(list => Array.isArray(list))
-          .flat()
-          .filter((/** @type {unknown} */ p) => typeof p === 'string');
-        targets[key] = [...new Set([...(targets[key] || []), ...props])];
-      }
-    }
-  }
-
-  await scan(coreSrc);
+  const targets = targetsByKey(await collectThemingTargets(coreSrc));
   return Object.keys(targets).length > 0 ? targets : null;
 }
 
@@ -1196,8 +1168,15 @@ export async function themeBuild(
     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(')
+      // #3658: also emit attribute-specific rules so <Theme mode> can override color-scheme.
+      // Decided from the theme's own values, not the generated CSS: that CSS
+      // also carries the data-token defaults, which are light-dark() pairs, so
+      // a substring check on it would fire for every theme.
+      const themeOwnValues = JSON.stringify([
+        resolvedTheme.tokens ?? {},
+        resolvedTheme.components ?? {},
+      ]);
+      const colorSchemeDecl = themeOwnValues.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'
         : '';
       cssParts.push(
@@ -1215,6 +1194,26 @@ export async function themeBuild(
       logger.log('No overrides found — nothing to build.');
       return null;
     }
+    // The data-token defaults are theme-independent and go in @layer
+    // astryx-base, below the theme's own overrides. Formatted here from the
+    // public `dataTokenDefaults` export, byte for byte as the `<Theme>`
+    // runtime emits it — build-theme.data-tokens.test.mjs is the drift guard.
+    // Placed after the reset block and before the theme block: a layer's order
+    // is fixed by where it is first declared, so emitting it anywhere else in
+    // the file would invert reset < astryx-base < astryx-theme for a consumer
+    // who imports this stylesheet on its own.
+    const baseCss = _dataTokenDefaults
+      ? `:root {\n${Object.entries(_dataTokenDefaults)
+          .map(([name, value]) => `  ${name}: ${value};`)
+          .join('\n')}\n}`
+      : '';
+    if (baseCss) {
+      cssParts.splice(
+        prose.length > 0 ? 1 : 0,
+        0,
+        `@layer astryx-base {\n${baseCss}\n}`,
+      );
+    }
     css = cssParts.join('\n\n') + '\n';
   }
 

package/api/theme/targets/targets.d.mts

@@ -0,0 +1,18 @@
+// @generated by scripts/sync-api-types.mjs from the JSDoc in api/**/*.mjs.
+// DO NOT EDIT — run `pnpm sync:api-types` to regenerate.
+
+/**
+ * List every component theming target — the `defineTheme` `components` keys,
+ * with the props and states each one accepts.
+ *
+ * A filter naming a component exactly wins over a substring search, so
+ * `theme targets Button` is Button's own set (what `astryx component Button`
+ * prints) rather than every key that happens to contain "button".
+ *
+ * @param {string} [filter] - component name, or a substring of a target key
+ * @param {{cwd?: string}} [ctx]
+ * @returns {Promise<import('../theme.type.mjs').ThemeTargetsResponse>}
+ */
+export function themeTargets(filter?: string, { cwd }?: {
+    cwd?: string;
+}): Promise<import("../theme.type.mjs").ThemeTargetsResponse>;

package/api/theme/targets/targets.mjs

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file `astryx theme targets` leaf — the whole themeable surface, enumerated.
+ *
+ * @input  a cwd (to resolve the project's `@astryxdesign/core`) and an optional
+ *         component/key filter
+ * @output the `theme.targets` envelope: one row per theming target
+ * @position api/theme/targets — projection over
+ *           foundation/discovery/theming-targets.mjs, the same component docs
+ *           `astryx component <Name>` prints its Theming table from.
+ */
+
+import * as path from 'node:path';
+import {findCoreDir} from '../../../foundation/fs/paths.mjs';
+import {collectThemingTargets} from '../../../foundation/discovery/theming-targets.mjs';
+import {ERROR_CODES} from '../../../foundation/response/error-codes.mjs';
+import {AstryxError} from '../../error.mjs';
+
+/**
+ * Whether a target matches the caller's filter loosely: any target whose key,
+ * class, or component contains it — so `theme targets thumb` finds the switch
+ * thumb without knowing which component owns it.
+ * @param {import('../../../foundation/discovery/theming-targets.mjs').ThemingTarget} target
+ * @param {string} filter - already lowercased
+ * @returns {boolean}
+ */
+function matchesLoosely(target, filter) {
+  return (
+    target.key.toLowerCase().includes(filter) ||
+    target.className.toLowerCase().includes(filter) ||
+    target.component.toLowerCase().includes(filter)
+  );
+}
+
+/**
+ * List every component theming target — the `defineTheme` `components` keys,
+ * with the props and states each one accepts.
+ *
+ * A filter naming a component exactly wins over a substring search, so
+ * `theme targets Button` is Button's own set (what `astryx component Button`
+ * prints) rather than every key that happens to contain "button".
+ *
+ * @param {string} [filter] - component name, or a substring of a target key
+ * @param {{cwd?: string}} [ctx]
+ * @returns {Promise<import('../theme.type.mjs').ThemeTargetsResponse>}
+ */
+export async function themeTargets(filter, {cwd = process.cwd()} = {}) {
+  const coreDir = findCoreDir(cwd);
+  if (!coreDir) {
+    throw new AstryxError(
+      'Could not find @astryxdesign/core package',
+      undefined,
+      ERROR_CODES.ERR_CORE_NOT_FOUND,
+    );
+  }
+
+  const all = await collectThemingTargets(path.join(coreDir, 'src'));
+  const needle = filter ? String(filter).toLowerCase() : null;
+  let targets = all;
+  if (needle) {
+    const named = all.filter(t => t.component.toLowerCase() === needle);
+    targets = named.length > 0 ? named : all.filter(t => matchesLoosely(t, needle));
+  }
+
+  if (needle && targets.length === 0) {
+    const near = [...new Set(all.map(t => t.component))]
+      .filter(name => name.toLowerCase().startsWith(needle.slice(0, 3)))
+      .sort()
+      .slice(0, 5)
+      .map(name => ({name, reason: 'has theming targets'}));
+    throw new AstryxError(
+      `No theming target matches "${filter}". Run \`theme targets\` with no filter for the whole list.`,
+      near.length > 0 ? near : undefined,
+      ERROR_CODES.ERR_UNKNOWN_COMPONENT,
+    );
+  }
+
+  return {
+    type: 'theme.targets',
+    data: {
+      filter: filter ?? null,
+      componentCount: new Set(targets.map(t => t.component)).size,
+      targets,
+    },
+  };
+}

package/api/theme/targets/targets.test.mjs

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Direct-API tests for the `theme targets` leaf. Runs against the real
+ * core docs, so it doubles as a guard that the themeable surface stays
+ * readable and shaped as `theme.targets` promises.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {themeTargets} from './targets.mjs';
+
+describe('themeTargets (api/theme/targets)', () => {
+  it('returns a theme.targets envelope covering the whole surface', async () => {
+    const result = await themeTargets();
+    expect(result.type).toBe('theme.targets');
+    expect(result.data.filter).toBeNull();
+    expect(result.data.targets.length).toBeGreaterThan(100);
+    expect(result.data.componentCount).toBeGreaterThan(50);
+    for (const t of result.data.targets) {
+      expect(Object.keys(t).sort()).toEqual([
+        'className',
+        'component',
+        'key',
+        'props',
+        'states',
+      ]);
+    }
+  }, 60_000);
+
+  it('scopes to one component by name', async () => {
+    const {data} = await themeTargets('Switch');
+    expect(data.filter).toBe('Switch');
+    expect(data.componentCount).toBe(1);
+    expect(data.targets.map(t => t.key)).toEqual([
+      'switch',
+      'switch-field',
+      'switch-label',
+      'switch-thumb',
+    ]);
+  }, 60_000);
+
+  // Half the system's keys contain "button" (chat-send-button, toggle-button,
+  // …). A component name has to mean the component, or `theme targets Button`
+  // answers a different question than `component Button` and the two views
+  // look like they disagree.
+  it('prefers an exact component name over a substring match', async () => {
+    const {data} = await themeTargets('Button');
+    expect(data.targets.map(t => t.key)).toEqual(['button']);
+  }, 60_000);
+
+  // This command answers "which theme slot paints the switch thumb?" — a
+  // question you can only ask by the part, not the component, until you
+  // already know which component owns it.
+  it('searches keys by substring, across components', async () => {
+    const {data} = await themeTargets('thumb');
+    expect(data.componentCount).toBeGreaterThan(1);
+    expect(data.targets.map(t => t.key)).toContain('switch-thumb');
+    for (const t of data.targets) expect(t.key).toContain('thumb');
+  }, 60_000);
+
+  it('rejects a filter that matches nothing, with components to try', async () => {
+    await expect(themeTargets('nosuchthing')).rejects.toMatchObject({
+      code: 'ERR_UNKNOWN_COMPONENT',
+    });
+  }, 60_000);
+});

package/api/theme/theme.d.mts

@@ -3,6 +3,7 @@
 
 export { themeAdd } from "./add/add.mjs";
 export { themeTemplate } from "./template/template.mjs";
+export { themeTargets } from "./targets/targets.mjs";
 export { themeList } from "./list/list.mjs";
 export { listThemes } from "./_adapter.mjs";
 export { themeBuild, importSpecifier } from "./build/build.mjs";

package/api/theme/theme.mjs

@@ -1,7 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file `theme` command barrel — re-exports the build/add/list leaves so the CLI
+ * @file `theme` command barrel — re-exports the build/add/list/template/targets
+ * leaves so the CLI
  * (cli/commands/build-theme.mjs) and scripted callers import from one place.
  * Each leaf is also importable directly (e.g. api/theme/add/add.mjs). `theme`
  * has real subcommands, so there is no flag-dispatch here — the CLI calls the
@@ -11,5 +12,6 @@
 export {themeBuild, importSpecifier} from './build/build.mjs';
 export {themeAdd} from './add/add.mjs';
 export {themeTemplate} from './template/template.mjs';
+export {themeTargets} from './targets/targets.mjs';
 export {themeList} from './list/list.mjs';
 export {listThemes} from './_adapter.mjs';

package/api/theme/theme.type.d.mts

@@ -101,3 +101,26 @@ export type ThemeTemplateResponse = {
         reason: "exists" | null;
     };
 };
+/**
+ * One themeable target: the `defineTheme` `components` key, the class it
+ * renders as, the component whose doc declares it, and the props and states
+ * that are legal override keys under it.
+ */
+export type ThemeTargetEntry = {
+    key: string;
+    className: string;
+    component: string;
+    props: string[];
+    states: string[];
+};
+/**
+ * xds --json theme targets [filter]
+ */
+export type ThemeTargetsResponse = {
+    type: "theme.targets";
+    data: {
+        filter: string | null;
+        componentCount: number;
+        targets: ThemeTargetEntry[];
+    };
+};

package/api/theme/theme.type.mjs

@@ -14,9 +14,10 @@
  * xds --json theme list                     -> theme.list
  * xds --json theme add <slug>               -> theme.add
  * xds --json theme template                 -> theme.template
+ * xds --json theme targets [filter]         -> theme.targets
  * (file not found / parse error)            -> CLIError
  *
- * @position api — colocated typedefs for api/theme/{theme,build,add,list,template,_adapter}
+ * @position api — colocated typedefs for api/theme/{theme,build,add,list,template,targets,_adapter}
  */
 
 /**
@@ -78,6 +79,25 @@
  * @property {{path: string, written: boolean, reason: 'exists' | null}} data
  */
 
+/**
+ * One themeable target: the `defineTheme` `components` key, the class it
+ * renders as, the component whose doc declares it, and the props and states
+ * that are legal override keys under it.
+ * @typedef {object} ThemeTargetEntry
+ * @property {string} key
+ * @property {string} className
+ * @property {string} component
+ * @property {string[]} props
+ * @property {string[]} states
+ */
+
+/**
+ * xds --json theme targets [filter]
+ * @typedef {object} ThemeTargetsResponse
+ * @property {'theme.targets'} type
+ * @property {{filter: string | null, componentCount: number, targets: ThemeTargetEntry[]}} data
+ */
+
 // Make this a module so the @typedefs above are importable as types via
 // `import('./theme.type.mjs').ThemeBuildResponse` (and re-exportable from a .d.ts).
 export {};

package/api/theme/themeTargets.doc.d.mts

@@ -0,0 +1,11 @@
+// @generated by scripts/sync-api-types.mjs from the JSDoc in api/**/*.mjs.
+// DO NOT EDIT — run `pnpm sync:api-types` to regenerate.
+
+/**
+ * @file FunctionDoc for `themeTargets()` / `astryx theme targets`. Colocated
+ * with the API function it documents; the response-shape source of truth stays
+ * in `theme.type.mjs`.
+ * @position packages/cli/api/theme — function documentation
+ */
+/** @type {import('@astryxdesign/cli/authoring').FunctionDoc} */
+export const doc: import("@astryxdesign/cli/authoring").FunctionDoc;

package/api/theme/themeTargets.doc.mjs

@@ -0,0 +1,58 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file FunctionDoc for `themeTargets()` / `astryx theme targets`. Colocated
+ * with the API function it documents; the response-shape source of truth stays
+ * in `theme.type.mjs`.
+ * @position packages/cli/api/theme — function documentation
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').FunctionDoc} */
+export const doc = {
+  type: 'function',
+  kind: 'api',
+  name: 'themeTargets',
+  displayName: 'themeTargets()',
+  summary: 'List every component theming target a theme can override.',
+  description:
+    'Enumerates the whole themeable surface: each `defineTheme` components key, the stable ' +
+    'class it paints, the component that declares it, and the props and states that are legal ' +
+    'override keys under it. Same source as the Theming table `astryx component <Name>` prints ' +
+    '(the component docs), so the list cannot drift from the components, and `theme build` ' +
+    'validates overrides against this exact set. A filter naming a component gives that ' +
+    'component\'s set; anything else is a substring search over the keys.',
+  importPath: '@astryxdesign/cli/api',
+  signature:
+    'themeTargets(filter?: string, ctx?: {cwd?: string}): Promise<ThemeTargetsResponse>',
+  keywords: ['theme', 'targets', 'defineTheme', 'components', 'override', 'class', 'states', 'audit'],
+  params: [
+    {
+      name: 'filter',
+      type: 'string',
+      description:
+        'A component name (exact, case-insensitive) or a substring of a target key. Omit for the whole surface.',
+    },
+    {
+      name: 'ctx.cwd',
+      type: 'string',
+      description: 'Directory the project\'s @astryxdesign/core is resolved from.',
+    },
+  ],
+  returns: [
+    {
+      type: 'theme.targets',
+      description:
+        'The echoed filter, how many components are represented, and the targets: each {key, className, component, props, states}.',
+    },
+  ],
+  throws: [
+    {code: 'ERR_CORE_NOT_FOUND', when: '@astryxdesign/core cannot be resolved from cwd'},
+    {code: 'ERR_UNKNOWN_COMPONENT', when: 'a filter matches no target'},
+  ],
+  examples: [
+    {label: 'The whole themeable surface', code: 'await themeTargets();'},
+    {label: "One component's targets", code: "await themeTargets('Switch');"},
+  ],
+  command: 'theme targets',
+  related: ['themeBuild', 'themeTemplate', 'component'],
+};

package/api/theme/themeTemplate.doc.mjs

@@ -15,9 +15,9 @@ export const doc = {
   displayName: 'themeTemplate()',
   summary: 'Write the annotated theme template into a project.',
   description:
-    'Writes theme.template.ts: the annotated reference for the whole theme surface — every ' +
+    'Writes theme.template.ts: the annotated reference for the whole theme surface, covering every ' +
     'defineTheme field, the token families, the component override syntax, and how a theme is ' +
-    'consumed — with the CLI command that prints the authoritative reference for each section. ' +
+    'consumed, with the CLI command that prints the authoritative reference for each section. ' +
     'Read it, copy what you need into your own theme file, delete it. Where `theme add` starts ' +
     'you from a theme we ship, this starts you from a blank one. Refuses to overwrite without ' +
     '`overwrite`, so it is safe to re-run.',
@@ -48,7 +48,7 @@ export const doc = {
     {
       type: 'theme.template',
       description:
-        'Receipt: the path (relative to cwd), whether it was written, and the reason it was not — `exists` when a file was already there, which is a success, not a failure.',
+        'Receipt: the path (relative to cwd), whether it was written, and the reason it was not. `exists` when a file was already there, which is a success, not a failure.',
     },
   ],
   throws: [{code: 'ERR_PATH_TRAVERSAL', when: 'the target path escapes cwd'}],

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

@@ -26,6 +26,7 @@ describe('registry', () => {
         '0.2.1',
         '0.3.0',
         '0.4.0',
+        '0.5.0',
       ]);
     });
   });

package/assets/codemods/registry.mjs

@@ -27,6 +27,7 @@ const registry = new Map([
   ['0.2.1', () => import('./transforms/v0.2.1/index.mjs')],
   ['0.3.0', () => import('./transforms/v0.3.0/index.mjs')],
   ['0.4.0', () => import('./transforms/v0.4.0/index.mjs')],
+  ['0.5.0', () => import('./transforms/v0.5.0/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/assets/codemods/transforms/v0.5.0/__tests__/next-codemods.test.mjs

@@ -0,0 +1,127 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Unit tests for the staged (next-release) codemods.
+ *
+ * Mirrors v0.4.0/__tests__/next-codemods.test.mjs, which covers the codemods
+ * after promotion. Keeping a copy here means a staged transform is tested from
+ * the day it is written rather than the day it is released.
+ */
+
+import {describe, expect, it} from 'vitest';
+import jscodeshift from 'jscodeshift';
+
+const j = jscodeshift.withParser('tsx');
+const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+
+async function apply(name, source) {
+  const {default: transform} = await import(`../${name}.mjs`);
+  return transform({source, path: 'test.tsx'}, api) ?? source;
+}
+
+const TRANSFORM = 'banner-collapsible-content';
+
+const IMPORT = "import {Banner} from '@astryxdesign/core/Banner';\n";
+
+describe('banner-collapsible-content', () => {
+  it('rewrites a bare defaultIsExpanded to a starts-open config', async () => {
+    const output = await apply(
+      TRANSFORM,
+      `${IMPORT}const el = <Banner status="info" title="T" defaultIsExpanded><p>d</p></Banner>;`,
+    );
+    expect(output).toContain('defaultIsOpen: true');
+    expect(output).not.toContain('defaultIsExpanded');
+  });
+
+  it('rewrites defaultIsExpanded={true} the same way', async () => {
+    const output = await apply(
+      TRANSFORM,
+      `${IMPORT}const el = <Banner status="info" title="T" defaultIsExpanded={true}><p>d</p></Banner>;`,
+    );
+    expect(output).toContain('defaultIsOpen: true');
+    expect(output).not.toContain('defaultIsExpanded');
+  });
+
+  it('drops defaultIsExpanded={false}, which is the default', async () => {
+    const output = await apply(
+      TRANSFORM,
+      `${IMPORT}const el = <Banner status="info" title="T" defaultIsExpanded={false}><p>d</p></Banner>;`,
+    );
+    expect(output).not.toContain('defaultIsExpanded');
+    // No config needed: starting collapsed is what a Banner does by default.
+    expect(output).not.toContain('collapsible');
+    // Untouched attributes keep their original text (recast only reprints
+    // what changed), so the element is exactly the base minus the prop.
+    expect(output).toContain('<Banner status="info" title="T">');
+  });
+
+  it('keeps a dynamic default dynamic', async () => {
+    const output = await apply(
+      TRANSFORM,
+      `${IMPORT}const el = <Banner status="info" title="T" defaultIsExpanded={isOpen}><p>d</p></Banner>;`,
+    );
+    expect(output).toContain('defaultIsOpen: isOpen');
+    expect(output).not.toContain('defaultIsExpanded');
+  });
+
+  it('leaves a banner that never set the prop alone', async () => {
+    // The default is unchanged, so this banner still behaves as it did. The
+    // migration must not touch it — that is the whole point of the shape.
+    const source = `${IMPORT}const el = <Banner status="error" title="T"><ul><li>a</li></ul></Banner>;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('leaves a childless banner alone', async () => {
+    const source = `${IMPORT}const el = <Banner status="info" title="T" />;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('leaves a banner that already uses collapsible alone', async () => {
+    const source = `${IMPORT}const el = <Banner status="info" title="T" collapsible={false} defaultIsExpanded><p>d</p></Banner>;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('does not guess around a spread', async () => {
+    const source = `${IMPORT}const el = <Banner status="info" title="T" defaultIsExpanded {...rest}><p>d</p></Banner>;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it("leaves another component's defaultIsExpanded alone", async () => {
+    // ChatToolCalls has a prop of the same name that this migration must not
+    // touch.
+    const source = `import {ChatToolCalls} from '@astryxdesign/core/Chat';
+const el = <ChatToolCalls calls={calls} defaultIsExpanded />;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('leaves a Banner that is not the core Banner alone', async () => {
+    const source = `import {Banner} from './ui/Banner';
+const el = <Banner status="info" title="T" defaultIsExpanded><p>d</p></Banner>;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('leaves the prop inside a props object alone', async () => {
+    // Out of scope by design: which component the object feeds is a guess,
+    // and the removed prop makes those sites a type error anyway.
+    const source = `${IMPORT}const args = {status: 'info', title: 'T', defaultIsExpanded: true};
+const el = <Banner {...args} />;`;
+    const output = await apply(TRANSFORM, source);
+    expect(output).toBe(source);
+  });
+
+  it('migrates a Banner imported from the package root', async () => {
+    const output = await apply(
+      TRANSFORM,
+      `import {Banner, Button} from '@astryxdesign/core';
+const el = <Banner status="info" title="T" defaultIsExpanded><p>d</p></Banner>;`,
+    );
+    expect(output).toContain('defaultIsOpen: true');
+    expect(output).not.toContain('defaultIsExpanded');
+  });
+});