npm - @astryxdesign/cli - Versions diffs - 0.1.4-canary.ec9f8b2 → 0.1.4-canary.efa3ea5 - Mend

@astryxdesign/cli 0.1.4-canary.ec9f8b2 → 0.1.4-canary.efa3ea5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

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

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

package/package.json CHANGED Viewed

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

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

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

package/src/codemods/registry.mjs CHANGED Viewed

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

package/src/commands/build-theme.mjs CHANGED Viewed

@@ -939,9 +939,15 @@ 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
+          // 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' +
+              '  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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/CollapsibleDividedAccordion.doc.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ export const doc = {
   exampleFor: 'Collapsible',
   name: 'Collapsible — Divided Accordion',
   displayName: 'Collapsible — Divided Accordion',
-  description: 'FAQ-style accordion using the hasDividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
+  description: 'FAQ-style accordion using the dividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Collapsible', 'CollapsibleGroup', 'Text'],

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import {Text} from '@astryxdesign/core/Text';
 export default function CollapsibleDividedAccordion() {
   return (
     <div style={{width: '100%', maxWidth: 400}}>
-      <CollapsibleGroup type="single" hasDividers defaultValue="reset">
+      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
         <Collapsible trigger="How do I reset my password?" value="reset">
           <Text type="body">
             Go to Settings → Security → Change Password. You'll receive a

package/templates/pages/kanban-board/page.tsx CHANGED Viewed

@@ -439,11 +439,8 @@ export default function KanbanBoardTemplate() {
     let cb = columnRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {
-          columnEls.current.set(id, el);
-        } else {
-          columnEls.current.delete(id);
-        }
+        if (el) {columnEls.current.set(id, el);}
+        else {columnEls.current.delete(id);}
       };
       columnRefCbs.current.set(id, cb);
     }
@@ -454,11 +451,8 @@ export default function KanbanBoardTemplate() {
     let cb = cardRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {
-          cardEls.current.set(id, el);
-        } else {
-          cardEls.current.delete(id);
-        }
+        if (el) {cardEls.current.set(id, el);}
+        else {cardEls.current.delete(id);}
       };
       cardRefCbs.current.set(id, cb);
     }
@@ -493,9 +487,7 @@ export default function KanbanBoardTemplate() {
   ): DropTarget | null => {
     for (const [colId, el] of Array.from(columnEls.current.entries())) {
       const r = el.getBoundingClientRect();
-      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {
-        continue;
-      }
+      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {continue;}
       const ids = itemsByColumn[colId]
         .filter(it => it.id !== draggedId)
@@ -504,9 +496,7 @@ export default function KanbanBoardTemplate() {
       let index = ids.length;
       for (let i = 0; i < ids.length; i++) {
         const cardEl = cardEls.current.get(ids[i]);
-        if (!cardEl) {
-          continue;
-        }
+        if (!cardEl) {continue;}
         const cr = cardEl.getBoundingClientRect();
         if (py < cr.top + cr.height / 2) {
           index = i;
@@ -523,27 +513,21 @@ export default function KanbanBoardTemplate() {
   const commitDrag = (id: string, target: DropTarget) => {
     setItems(prev => {
       const moved = prev.find(it => it.id === id);
-      if (!moved) {
-        return prev;
-      }
+      if (!moved) {return prev;}
       const rest = prev.filter(it => it.id !== id);
       const updated: WorkItem = {...moved, column: target.column};
       const colItems = rest.filter(it => it.column === target.column);
       const anchor = colItems[target.index];
-      if (!anchor) {
-        return [...rest, updated];
-      }
+      if (!anchor) {return [...rest, updated];}
       const at = rest.indexOf(anchor);
       return [...rest.slice(0, at), updated, ...rest.slice(at)];
     });
   };
   const onCardPointerDown = (e: ReactPointerEvent, id: string) => {
-    if (e.button !== 0) {
-      return;
-    }
+    if (e.button !== 0) {return;}
     // Let the card's own controls (the actions menu) handle the press.
     if (
       (e.target as HTMLElement).closest(
@@ -554,9 +538,7 @@ export default function KanbanBoardTemplate() {
     }
     const el = cardEls.current.get(id);
-    if (!el) {
-      return;
-    }
+    if (!el) {return;}
     const rect = el.getBoundingClientRect();
     const startX = e.clientX;
@@ -592,9 +574,7 @@ export default function KanbanBoardTemplate() {
     const onUp = () => {
       teardownRef.current?.();
-      if (started && target) {
-        commitDrag(id, target);
-      }
+      if (started && target) {commitDrag(id, target);}
       setDrag(null);
     };
@@ -614,9 +594,7 @@ export default function KanbanBoardTemplate() {
   // Suppress selection while dragging and detach listeners on unmount.
   useEffect(() => {
-    if (!isDragging) {
-      return;
-    }
+    if (!isDragging) {return;}
     const previous = document.body.style.userSelect;
     document.body.style.userSelect = 'none';
     return () => {
@@ -634,9 +612,7 @@ export default function KanbanBoardTemplate() {
     const ghostTarget =
       drag && drag.target && drag.target.column === colId ? drag : null;
-    if (visible.length === 0 && !ghostTarget) {
-      return null;
-    }
+    if (visible.length === 0 && !ghostTarget) {return null;}
     const nodes: ReactNode[] = visible.map(it => (
       <BoardCard

package/src/codemods/transforms/v0.1.5/__tests__/rename-switch-label-spacing-default-to-hug.test.mjs DELETED Viewed

@@ -1,93 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-import {describe, it, expect} from 'vitest';
-async function applyTransform(source) {
-  const {default: transform} =
-    await import('../rename-switch-label-spacing-default-to-hug.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('rename-switch-label-spacing-default-to-hug', () => {
-  it('renames Switch labelSpacing="default" to labelSpacing="hug"', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).not.toContain('default');
-  });
-  it("renames expression-container labelSpacing={'default'}", async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing={'default'} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).not.toContain("'default'");
-  });
-  it('renames default inside a ternary labelSpacing expression', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing={isRow ? 'spread' : 'default'} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).toContain("'spread'");
-    expect(output).not.toContain("'default'");
-  });
-  it('does not change labelSpacing="spread"', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing="spread" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-  it('does not touch labelSpacing="default" on non-Switch components', async () => {
-    const input = `<LegacyToggle labelSpacing="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-  it('does not touch other props with a "default" value on Switch', async () => {
-    const input = `<Switch label="Notify" value={on} data-variant="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-  it('does not touch unrelated "default" string literals', async () => {
-    const input = `const theme = {mode: 'default', label: 'Default Mode'};`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-  it('renames object labelSpacing prop in files importing Switch', async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const cfg = {labelSpacing: 'default'};`;
-    const output = await applyTransform(input);
-    expect(output).toContain("labelSpacing: 'hug'");
-    expect(output).not.toContain("'default'");
-  });
-  it("renames labelSpacing: 'default' as const in files importing Switch", async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const ROWS = [{labelSpacing: 'default' as const, label: 'Adjacent'}];`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug' as const");
-    expect(output).not.toContain("'default'");
-  });
-  it('does not rename object labelSpacing prop when Switch is not imported', async () => {
-    const input = `const cfg = {labelSpacing: 'default'};`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-  it('renames Storybook argTypes options in files importing Switch', async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const meta = {argTypes: {labelSpacing: {control: 'select', options: ['default', 'spread']}}};`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).toContain("'spread'");
-    expect(output).not.toContain("'default'");
-  });
-});

package/src/codemods/transforms/v0.1.5/index.mjs DELETED Viewed

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file v0.1.5 transform manifest
- *
- * Lists all codemods for the v0.1.5 release in the order they should run.
- */
-import renameSwitchLabelSpacingDefaultToHug, {
-  meta as renameSwitchLabelSpacingDefaultToHugMeta,
-} from './rename-switch-label-spacing-default-to-hug.mjs';
-export default [
-  {
-    name: 'rename-switch-label-spacing-default-to-hug',
-    transform: renameSwitchLabelSpacingDefaultToHug,
-    meta: renameSwitchLabelSpacingDefaultToHugMeta,
-  },
-];

package/src/codemods/transforms/v0.1.5/rename-switch-label-spacing-default-to-hug.mjs DELETED Viewed

@@ -1,140 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file Codemod: Rename Switch labelSpacing "default" to "hug"
- * @see https://github.com/facebook/astryx/issues/2889
- *
- * The `labelSpacing="default"` value is renamed to `labelSpacing="hug"` so
- * the name describes the behavior (label and switch hug each other), matching
- * the behavioral register of the sibling `spread` value and the existing
- * `hug`/`fill` layout vocabulary on TabList and SegmentedControl. The old
- * `default` value keeps working as a deprecated alias, so this codemod is a
- * cleanup, not a build fix.
- *
- * Transforms (scoped to Switch):
- * - <Switch labelSpacing="default" />            → <Switch labelSpacing="hug" />
- * - <Switch labelSpacing={'default'} />          → <Switch labelSpacing={'hug'} />
- * - <Switch labelSpacing={cond ? 'default' : x}> → <Switch labelSpacing={cond ? 'hug' : x}>
- * - Storybook argTypes: labelSpacing: { options: [..., 'default', ...] }
- *     → replaces 'default' with 'hug' (files importing Switch)
- * - Object properties: { labelSpacing: 'default' } / { labelSpacing: 'default' as const }
- *     → { labelSpacing: 'hug' } (files importing Switch)
- *
- * The transform deliberately does NOT touch bare `'default'` strings that are
- * not a `labelSpacing` value (an extremely common string otherwise), so it is
- * safe to run across an entire codebase.
- */
-export const meta = {
-  title: 'Rename Switch labelSpacing "default" to "hug"',
-  description:
-    'Renames the `labelSpacing="default"` value to `labelSpacing="hug"` on ' +
-    'Switch. The old value keeps working as a deprecated alias. Also updates ' +
-    'Storybook labelSpacing argTypes options and object-literal `labelSpacing` ' +
-    'props in files that import Switch.',
-  pr: '#2889',
-};
-const OLD_VALUE = 'default';
-const NEW_VALUE = 'hug';
-/** Prop whose value is being renamed. */
-const TARGET_PROP = 'labelSpacing';
-/** Components whose `labelSpacing` prop accepts a SwitchLabelSpacing value. */
-const TARGET_COMPONENTS = new Set(['Switch']);
-export default function transformer(file, api) {
-  const j = api.jscodeshift;
-  const root = j(file.source);
-  let hasChanges = false;
-  /** Rewrite a string-literal node when it equals the old value. */
-  function renameStringLiteral(node) {
-    if (!node) return false;
-    if (
-      (node.type === 'StringLiteral' || node.type === 'Literal') &&
-      node.value === OLD_VALUE
-    ) {
-      node.value = NEW_VALUE;
-      if (node.raw) node.raw = `'${NEW_VALUE}'`;
-      return true;
-    }
-    return false;
-  }
-  /** Recursively rewrite the old value inside ternary/logical expressions. */
-  function renameInExpression(node) {
-    if (!node) return false;
-    let changed = false;
-    if (node.type === 'StringLiteral' || node.type === 'Literal') {
-      changed = renameStringLiteral(node) || changed;
-    } else if (node.type === 'ConditionalExpression') {
-      changed = renameInExpression(node.consequent) || changed;
-      changed = renameInExpression(node.alternate) || changed;
-    } else if (node.type === 'LogicalExpression') {
-      changed = renameInExpression(node.left) || changed;
-      changed = renameInExpression(node.right) || changed;
-    } else if (node.type === 'TSAsExpression') {
-      // `'default' as const` → rewrite the inner expression
-      changed = renameInExpression(node.expression) || changed;
-    }
-    return changed;
-  }
-  // --- 1. JSX attribute: labelSpacing="default" / labelSpacing={'default'} on Switch ---
-  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 || attr.name.name !== TARGET_PROP) return;
-      const value = attr.value;
-      if (!value) return;
-      if (value.type === 'StringLiteral' || value.type === 'Literal') {
-        if (renameStringLiteral(value)) hasChanges = true;
-      } else if (value.type === 'JSXExpressionContainer') {
-        if (renameInExpression(value.expression)) hasChanges = true;
-      }
-    });
-  });
-  // Object-property / argTypes transforms only run in files that use a target
-  // component — keeps unrelated `{ labelSpacing: 'default' }` strings safe.
-  const importsTarget =
-    root
-      .find(j.ImportSpecifier)
-      .filter(p => TARGET_COMPONENTS.has(p.node.imported?.name))
-      .size() > 0;
-  if (importsTarget) {
-    const PropertyType = j.ObjectProperty ?? j.Property;
-    // --- 2. Object property: { labelSpacing: 'default' } / 'default' as const ---
-    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
-      if (renameInExpression(path.node.value)) hasChanges = true;
-    });
-    // --- 3. Storybook argTypes: labelSpacing: { options: [..., 'default', ...] } ---
-    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
-      const value = path.node.value;
-      if (!value || value.type !== 'ObjectExpression') return;
-      const optionsProp = value.properties.find(
-        p => p.key && (p.key.name === 'options' || p.key.value === 'options'),
-      );
-      if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
-        optionsProp.value.elements.forEach(el => {
-          if (renameStringLiteral(el)) hasChanges = true;
-        });
-      }
-    });
-  }
-  if (!hasChanges) return undefined;
-  return root.toSource({quote: 'single'});
-}