@astryxdesign/cli 0.0.0-bootstrap.0 → 0.0.15

package/src/codemods/transforms/v0.0.14/rename-action-props.mjs

@@ -0,0 +1,160 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename on*Action props to *Action (React 19 Action prop convention)
+ *
+ * Transforms:
+ * - onChangeAction → changeAction
+ * - onClickAction → clickAction
+ * - onPressedChangeAction → pressedChangeAction
+ * - onScrollToTopAction → scrollToTopAction
+ *
+ * Applies to JSX attributes on any component. The "Action" suffix signals
+ * that the function runs inside a React transition — the `on` prefix is
+ * dropped to align with the React 19 convention (e.g. `<form action={...}>`).
+ *
+ * @see https://react.dev/reference/react/useActionState#using-with-action-props
+ * @see https://aurorascharff.no/posts/building-design-components-with-action-props-using-async-react/
+ */
+
+export const meta = {
+  title: 'Rename on*Action props to *Action',
+  description:
+    'Renames `onChangeAction` → `changeAction`, `onClickAction` → `clickAction`, ' +
+    '`onPressedChangeAction` → `pressedChangeAction`, ' +
+    'and `onScrollToTopAction` → `scrollToTopAction` to align with the React 19 ' +
+    'Action prop naming convention.',
+};
+
+/**
+ * Map of old prop names → new prop names.
+ * Ordered longest-first to avoid partial matches during iteration.
+ */
+const PROP_RENAMES = {
+  onPressedChangeAction: 'pressedChangeAction',
+  onScrollToTopAction: 'scrollToTopAction',
+  onChangeAction: 'changeAction',
+  onClickAction: 'clickAction',
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // --- 1. Rename JSX attributes ---
+  root.find(j.JSXAttribute).forEach((path) => {
+    const name = path.node.name;
+    if (name.type !== 'JSXIdentifier') return;
+
+    const newName = PROP_RENAMES[name.name];
+    if (newName) {
+      name.name = newName;
+      hasChanges = true;
+    }
+  });
+
+  // --- 2. Rename destructured parameter names (before general ObjectProperty) ---
+  // Covers: function MyComponent({ onChangeAction, ...rest }) → { changeAction, ...rest }
+  // Must run before step 3 so the ObjectPattern keys are renamed first and tracked.
+  const renamedBindings = new Map(); // oldLocalName → newLocalName
+
+  root.find(j.ObjectPattern).forEach((path) => {
+    for (const prop of path.node.properties) {
+      if (prop.type !== 'ObjectProperty') continue;
+      const key = prop.key;
+      if (key.type !== 'Identifier') continue;
+
+      const newName = PROP_RENAMES[key.name];
+      if (!newName) continue;
+
+      if (
+        prop.shorthand &&
+        prop.value.type === 'Identifier' &&
+        prop.value.name === key.name
+      ) {
+        // Shorthand: { onChangeAction } → { changeAction }
+        const oldLocal = key.name;
+        key.name = newName;
+        prop.value.name = newName;
+        renamedBindings.set(oldLocal, newName);
+        hasChanges = true;
+      } else if (prop.value.type === 'Identifier' && prop.value.name === key.name) {
+        // Non-shorthand same name: { onChangeAction: onChangeAction }
+        const oldLocal = prop.value.name;
+        key.name = newName;
+        prop.value.name = newName;
+        renamedBindings.set(oldLocal, newName);
+        hasChanges = true;
+      } else {
+        // Aliased: { onChangeAction: myHandler } → { changeAction: myHandler }
+        key.name = newName;
+        hasChanges = true;
+      }
+    }
+  });
+
+  // --- 3. Rename object property keys (e.g. { onChangeAction: fn }) ---
+  // Covers cases like useXDSImperativeAlertDialog({ onAction: ... })
+  // Skips ObjectProperty inside ObjectPattern (already handled in step 2).
+  root.find(j.ObjectProperty).forEach((path) => {
+    // Skip if inside a destructuring pattern
+    if (path.parent.node.type === 'ObjectPattern') return;
+
+    const key = path.node.key;
+    if (key.type === 'Identifier') {
+      const newName = PROP_RENAMES[key.name];
+      if (newName) {
+        key.name = newName;
+        // Also rename value if it's the same identifier (shorthand)
+        if (
+          path.node.shorthand &&
+          path.node.value.type === 'Identifier' &&
+          path.node.value.name !== newName
+        ) {
+          path.node.value.name = newName;
+        }
+        hasChanges = true;
+      }
+    }
+  });
+
+  // --- 4. Rename interface/type property signatures ---
+  // Covers: interface Props { onChangeAction?: ... } → { changeAction?: ... }
+  root.find(j.TSPropertySignature).forEach((path) => {
+    const key = path.node.key;
+    if (key.type === 'Identifier') {
+      const newName = PROP_RENAMES[key.name];
+      if (newName) {
+        key.name = newName;
+        hasChanges = true;
+      }
+    }
+  });
+
+  // --- 5. Rename identifier references from renamed destructured bindings ---
+  // When { onChangeAction } was renamed to { changeAction }, all references
+  // to the local variable `onChangeAction` must become `changeAction`.
+  if (renamedBindings.size > 0) {
+    root.find(j.Identifier).forEach((path) => {
+      const newName = renamedBindings.get(path.node.name);
+      if (!newName) return;
+
+      // Skip if this is the destructuring site itself (already renamed)
+      const parent = path.parent.node;
+      if (parent.type === 'ObjectProperty') return;
+      // Skip import specifiers
+      if (parent.type === 'ImportSpecifier') return;
+      // Skip JSX attribute names (handled in step 1)
+      if (parent.type === 'JSXAttribute' && path.name === 'name') return;
+      // Skip object keys in non-pattern contexts (handled in step 2)
+      if (parent.type === 'Property' && path.name === 'key') return;
+
+      path.node.name = newName;
+      hasChanges = true;
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.14/rename-section-wash-to-muted.mjs

@@ -0,0 +1,131 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename Section/Toolbar variant "wash" to "muted"
+ * @see https://github.com/facebookexperimental/xds/pull/2063
+ *
+ * XDSSection and XDSToolbar renamed the `variant="wash"` value to
+ * `variant="muted"` for consistency with XDSCard, which already uses
+ * `muted` for the same `--color-background-muted` token.
+ *
+ * Transforms:
+ * - <XDSSection variant="wash" /> → <XDSSection variant="muted" />
+ * - <XDSToolbar variant="wash" /> → <XDSToolbar variant="muted" />
+ * - Object properties: { variant: 'wash' } → { variant: 'muted' }
+ *   (only in files that import XDSSection or XDSToolbar)
+ */
+
+export const meta = {
+  title: 'Rename Section/Toolbar variant "wash" to "muted"',
+  description:
+    'Renames `variant="wash"` to `variant="muted"` on XDSSection and XDSToolbar ' +
+    'to align with XDSCard which already uses `muted` for the same background token.',
+  pr: '#2063',
+};
+
+/** Components affected by this rename. */
+const TARGET_COMPONENTS = new Set(['XDSSection', 'XDSToolbar']);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // 1. Rename JSX attribute value: variant="wash" → variant="muted"
+  //    Only on XDSSection and XDSToolbar.
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
+
+    path.node.attributes.forEach((attr) => {
+      if (attr.type !== 'JSXAttribute') return;
+      if (attr.name.name !== 'variant') return;
+
+      const value = attr.value;
+
+      // variant="wash" (string literal)
+      if (
+        value &&
+        (value.type === 'StringLiteral' || value.type === 'Literal') &&
+        value.value === 'wash'
+      ) {
+        value.value = 'muted';
+        if (value.raw) value.raw = undefined;
+        hasChanges = true;
+      }
+
+      // variant={'wash'} (expression container with string literal)
+      if (
+        value &&
+        value.type === 'JSXExpressionContainer' &&
+        value.expression &&
+        (value.expression.type === 'StringLiteral' || value.expression.type === 'Literal') &&
+        value.expression.value === 'wash'
+      ) {
+        value.expression.value = 'muted';
+        if (value.expression.raw) value.expression.raw = undefined;
+        hasChanges = true;
+      }
+    });
+  });
+
+  // 2. Object properties in files that import XDSSection or XDSToolbar.
+  //    Handles Storybook args like: { variant: 'wash' } → { variant: 'muted' }
+  //    Also handles options arrays inside variant argTypes config objects.
+  const importsTarget =
+    root.find(j.ImportSpecifier, {imported: {name: 'XDSSection'}}).length > 0 ||
+    root.find(j.ImportSpecifier, {imported: {name: 'XDSToolbar'}}).length > 0;
+
+  if (importsTarget) {
+    const PropertyType = j.ObjectProperty ?? j.Property;
+    root.find(PropertyType, {key: {name: 'variant'}}).forEach((path) => {
+      const value = path.node.value;
+
+      // variant: 'wash' → variant: 'muted'
+      if (
+        (value.type === 'StringLiteral' || value.type === 'Literal') &&
+        value.value === 'wash'
+      ) {
+        value.value = 'muted';
+        if (value.raw) value.raw = undefined;
+        hasChanges = true;
+      }
+
+      // variant: { options: ['...', 'wash', '...'] } → replace 'wash' with 'muted'
+      if (value.type === 'ObjectExpression') {
+        const optionsProp = value.properties.find(
+          (p) => p.key && p.key.name === 'options',
+        );
+        if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
+          optionsProp.value.elements.forEach((el) => {
+            if (
+              el &&
+              (el.type === 'StringLiteral' || el.type === 'Literal') &&
+              el.value === 'wash'
+            ) {
+              el.value = 'muted';
+              if (el.raw) el.raw = undefined;
+              hasChanges = true;
+            }
+          });
+        }
+      }
+    });
+  }
+
+  // 3. JSX text children: replace "wash" text content adjacent to target components.
+  //    Covers labels like <h4>wash</h4> that describe the variant in Storybook stories.
+  if (importsTarget) {
+    root.find(j.JSXText).forEach((path) => {
+      if (path.node.value.trim() === 'wash') {
+        path.node.value = path.node.value.replace('wash', 'muted');
+        if (path.node.raw) path.node.raw = path.node.raw.replace('wash', 'muted');
+        hasChanges = true;
+      }
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.14/rename-status-variants.mjs

@@ -0,0 +1,248 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename status variants positive/negative → success/error
+ * @see https://github.com/facebookexperimental/xds/issues/996
+ *
+ * Converges component APIs to match the token layer naming:
+ * - `positive` → `success` (maps to --color-success)
+ * - `negative` → `error` (maps to --color-error)
+ * - `info` → `accent` (maps to --color-accent)
+ *
+ * Affected components:
+ * - XDSStatusDot: variant="positive|negative|info" → variant="success|error|accent"
+ * - XDSAvatarStatusDot: variant="positive|negative" → variant="success|error"
+ * - XDSIcon: color="positive|negative" → color="success|error"
+ * - XDSProgressBar: variant="positive|negative" → variant="success|error"
+ *
+ * Transforms JSX attributes, object properties (in files importing affected
+ * components), TypeScript type annotations, and Storybook argType options.
+ */
+
+export const meta = {
+  title: 'Rename status variants positive/negative → success/error',
+  description:
+    'Renames `positive` to `success`, `negative` to `error`, and `info` to `accent` ' +
+    'on StatusDot, AvatarStatusDot, Icon, SVGIcon, and ProgressBar to align with token naming. ' +
+    'The `info` -> `accent` rename is only applied to direct JSX attributes on these ' +
+    'components (where the component is known); in context-blind locations (object ' +
+    'properties, type unions) `info` is left untouched because it is a valid variant on ' +
+    'other components such as Badge.',
+  pr: '#996',
+};
+
+/** Rename mappings. */
+const RENAMES = new Map([
+  ['positive', 'success'],
+  ['negative', 'error'],
+  ['info', 'accent'],
+]);
+
+/**
+ * Ambiguous renames that are only safe when the target component is known.
+ *
+ * `info` is a VALID variant on non-target components (notably XDSBadge, whose
+ * BadgeVariantMap still has `info`). `positive`/`negative` are not retained by
+ * any component post-migration, so renaming them is always safe. Therefore the
+ * context-blind heuristic paths (object properties, type unions, and suffixed
+ * props on wrapper components) must NOT rewrite `info` — only the precise path,
+ * a direct JSX attribute on a known target component, may. Otherwise a
+ * `variant: 'info'` on an unrelated Badge config in a file that merely also
+ * imports e.g. XDSIcon gets wrongly rewritten to the invalid `accent`.
+ */
+const AMBIGUOUS_VALUES = new Set(['info']);
+
+
+/**
+ * Components and which props are affected.
+ * Key: component name. Value: set of prop names to check.
+ */
+const COMPONENT_PROPS = new Map([
+  ['XDSStatusDot', new Set(['variant'])],
+  ['XDSAvatarStatusDot', new Set(['variant'])],
+  ['XDSIcon', new Set(['color'])],
+  ['XDSProgressBar', new Set(['variant'])],
+]);
+
+/** All affected component names for quick lookup. */
+const TARGET_COMPONENTS = new Set(COMPONENT_PROPS.keys());
+
+/** All affected prop names (variant, color). */
+const TARGET_PROP_NAMES = new Set();
+for (const props of COMPONENT_PROPS.values()) {
+  for (const p of props) TARGET_PROP_NAMES.add(p);
+}
+
+/**
+ * Check if a key matches a target prop — exact or case-insensitive suffix.
+ * e.g. "dotVariant" matches because it ends with "variant".
+ */
+function matchesPropName(keyName) {
+  if (TARGET_PROP_NAMES.has(keyName)) return true;
+  const lower = keyName.toLowerCase();
+  for (const prop of TARGET_PROP_NAMES) {
+    if (lower.endsWith(prop.toLowerCase()) && lower !== prop.toLowerCase()) return true;
+  }
+  return false;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  /**
+   * Rename a string literal value if it matches our renames.
+   * Unwraps TSAsExpression (e.g. 'positive' as const) to reach the literal.
+   * @returns {boolean} whether a rename occurred
+   */
+  function renameValue(node, {precise = false} = {}) {
+    if (!node) return false;
+
+    // Unwrap TSAsExpression (e.g. 'positive' as const → StringLiteral)
+    const target = node.type === 'TSAsExpression' ? node.expression : node;
+
+    const isString =
+      target.type === 'StringLiteral' || target.type === 'Literal';
+    if (!isString || typeof target.value !== 'string') return false;
+
+    const replacement = RENAMES.get(target.value);
+    if (!replacement) return false;
+
+    // Ambiguous values (e.g. `info`) are only renamed in a precise context
+    // where the target component is known (a direct JSX attribute on a target).
+    // In context-blind paths they may belong to a component that legitimately
+    // keeps the value (e.g. Badge's `info`), so leave them untouched.
+    if (!precise && AMBIGUOUS_VALUES.has(target.value)) return false;
+
+    target.value = replacement;
+    if (target.raw) target.raw = undefined;
+    return true;
+  }
+
+  /**
+   * Rename elements in an array (handles TSAsExpression wrapping).
+   */
+  function renameArrayElements(node, {precise = false} = {}) {
+    let arrayNode = node;
+    if (arrayNode.type === 'TSAsExpression') arrayNode = arrayNode.expression;
+    if (arrayNode.type !== 'ArrayExpression') return;
+    arrayNode.elements.forEach((el) => {
+      if (renameValue(el, {precise})) hasChanges = true;
+    });
+  }
+
+  // Determine early: does this file import any target component?
+  const importsTarget = [...TARGET_COMPONENTS].some(
+    (name) =>
+      root.find(j.ImportSpecifier, {imported: {name}}).length > 0,
+  );
+
+  // 1. JSX attributes on target components
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName) return;
+
+    const isDirectTarget = TARGET_COMPONENTS.has(componentName);
+    // For non-target components, only check suffixed props if file imports targets
+    if (!isDirectTarget && !importsTarget) return;
+
+    path.node.attributes.forEach((attr) => {
+      if (attr.type !== 'JSXAttribute') return;
+      const attrName = attr.name.name;
+
+      if (isDirectTarget) {
+        // Direct targets: only their specific props
+        const targetProps = COMPONENT_PROPS.get(componentName);
+        if (!targetProps.has(attrName)) return;
+      } else {
+        // Non-target components: suffixed prop names only
+        // (e.g. dotVariant on ChangelogSection wrapping XDSStatusDot)
+        if (!matchesPropName(attrName) || TARGET_PROP_NAMES.has(attrName)) return;
+      }
+
+      // Only a direct JSX attribute on a target component is a precise context
+      // where the component (and thus the validity of `info`) is known. The
+      // wrapper/suffixed-prop case is a heuristic and must not touch ambiguous
+      // values.
+      const precise = isDirectTarget;
+      const value = attr.value;
+
+      // variant="positive" (string literal)
+      if (renameValue(value, {precise})) {
+        hasChanges = true;
+        return;
+      }
+
+      // variant={'positive'} (expression container)
+      if (
+        value &&
+        value.type === 'JSXExpressionContainer' &&
+        value.expression
+      ) {
+        if (renameValue(value.expression, {precise})) {
+          hasChanges = true;
+          return;
+        }
+
+        // variant={condition ? 'positive' : 'negative'} (ternary)
+        if (value.expression.type === 'ConditionalExpression') {
+          if (renameValue(value.expression.consequent, {precise}))
+            hasChanges = true;
+          if (renameValue(value.expression.alternate, {precise}))
+            hasChanges = true;
+        }
+      }
+    });
+  });
+
+  // 2. Object properties in files importing target components.
+  //    Handles args objects, config objects, Storybook argTypes, etc.
+  if (importsTarget) {
+    const PropertyType = j.ObjectProperty ?? j.Property;
+    root.find(PropertyType).forEach((path) => {
+      const key = path.node.key;
+      const keyName =
+        key.type === 'Identifier'
+          ? key.name
+          : key.type === 'StringLiteral' || key.type === 'Literal'
+            ? key.value
+            : null;
+
+      if (!keyName || !matchesPropName(keyName)) return;
+
+      const value = path.node.value;
+
+      // variant: 'positive' → variant: 'success'
+      if (renameValue(value)) {
+        hasChanges = true;
+        return;
+      }
+
+      // variant: { options: ['positive', 'negative', ...] }
+      if (value.type === 'ObjectExpression') {
+        const optionsProp = value.properties.find(
+          (p) => p.key && (p.key.name === 'options' || p.key.value === 'options'),
+        );
+        if (optionsProp) {
+          renameArrayElements(optionsProp.value);
+        }
+      }
+
+      // variant: ['positive', 'negative'] or [...] as Type[]
+      renameArrayElements(value);
+    });
+  }
+
+  // 3. TypeScript type references: 'positive' | 'negative' in union types
+  if (importsTarget) {
+    root.find(j.TSLiteralType).forEach((path) => {
+      const lit = path.node.literal;
+      if (renameValue(lit)) hasChanges = true;
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.15/__tests__/drop-xds-prefix-imports.test.mjs

@@ -0,0 +1,137 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import('../drop-xds-prefix-imports.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('drop-xds-prefix-imports', () => {
+  it('renames a named import + its JSX usage', async () => {
+    const input = [
+      `import {XDSButton} from '@xds/core';`,
+      `export const App = () => <XDSButton label="Hi" />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain(`import {Button} from '@xds/core';`);
+    expect(output).toContain('<Button label="Hi" />');
+    expect(output).not.toContain('XDSButton');
+  });
+
+  it('renames subpath imports and keeps the source path', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';`;
+    const output = await applyTransform(input);
+    expect(output).toContain('Button');
+    // The subpath dir is NOT renamed by this codemod.
+    expect(output).toContain(`from '@xds/core/Button'`);
+    expect(output).not.toContain('XDSButton');
+  });
+
+  it('renames hooks (useXDS -> use)', async () => {
+    const input = [
+      `import {useXDSTheme} from '@xds/core';`,
+      `const t = useXDSTheme();`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('import {useTheme}');
+    expect(output).toContain('const t = useTheme();');
+    expect(output).not.toContain('useXDSTheme');
+  });
+
+  it('renames type-only imports and type references', async () => {
+    const input = [
+      `import type {XDSButtonProps} from '@xds/core';`,
+      `type Props = XDSButtonProps & {extra: true};`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('ButtonProps');
+    expect(output).not.toContain('XDSButtonProps');
+  });
+
+  it('renames type references in generic type-argument positions', async () => {
+    const input = [
+      `import {XDSTableColumn} from '@xds/core/Table';`,
+      `const cols = useMemo<XDSTableColumn<Issue>[]>(() => [], []);`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain(`import {TableColumn} from '@xds/core/Table';`);
+    expect(output).toContain('useMemo<TableColumn<Issue>[]>');
+    // The unrelated generic argument `Issue` must be left alone.
+    expect(output).toContain('<Issue>');
+    expect(output).not.toContain('XDSTableColumn');
+  });
+
+  it('rewrites the imported name but keeps a custom local alias', async () => {
+    const input = [
+      `import {XDSButton as Btn} from '@xds/core';`,
+      `export const App = () => <Btn />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('Button as Btn');
+    expect(output).toContain('<Btn />');
+    expect(output).not.toContain('XDSButton');
+  });
+
+  it('does NOT touch identifiers that are not imported from @xds/core', async () => {
+    const input = [
+      `import {XDSButton} from '@my/other-lib';`,
+      `const XDSCustomThing = 1;`,
+      `export const App = () => <XDSButton />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    // Neither the third-party import nor the local symbol should change.
+    expect(output).toContain(`import {XDSButton} from '@my/other-lib';`);
+    expect(output).toContain('const XDSCustomThing = 1;');
+    expect(output).toContain('<XDSButton />');
+  });
+
+  it('does NOT touch strings that merely start with XDS', async () => {
+    const input = [
+      `import {XDSButton} from '@xds/core';`,
+      `const label = 'XDSButton is great';`,
+      `export const App = () => <XDSButton label={label} />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain(`'XDSButton is great'`);
+    expect(output).toContain('<Button label={label} />');
+  });
+
+  it('handles multiple specifiers and a mix of components, hooks, and types', async () => {
+    const input = [
+      `import {XDSButton, XDSCard, useXDSToast} from '@xds/core';`,
+      `import type {XDSCardProps} from '@xds/core';`,
+      `export function App() {`,
+      `  const toast = useXDSToast();`,
+      `  const p: XDSCardProps = {};`,
+      `  return <XDSCard><XDSButton /></XDSCard>;`,
+      `}`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('import {Button, Card, useToast}');
+    expect(output).toContain('CardProps');
+    expect(output).toContain('const toast = useToast();');
+    expect(output).toContain('<Card><Button /></Card>');
+    expect(output).not.toContain('XDS');
+  });
+
+  it('rewrites re-exports from @xds/core', async () => {
+    const input = `export {XDSButton} from '@xds/core/Button';`;
+    const output = await applyTransform(input);
+    expect(output).toContain('Button');
+    expect(output).toContain(`from '@xds/core/Button'`);
+    expect(output).not.toContain('XDSButton');
+  });
+
+  it('returns source unchanged when there is nothing to rename', async () => {
+    const input = `import {useState} from 'react';\nconst x = 1;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`import {useState} from 'react';`);
+    expect(output).toContain('const x = 1;');
+  });
+});