@astryxdesign/cli 0.1.4-canary.cdee37b → 0.1.4-canary.cfe8ece

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

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

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

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

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs

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

@@ -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/blocks/components/Collapsible/CollapsibleWithoutCard.tsx

@@ -2,36 +2,34 @@
 
 'use client';
 
-import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {Collapsible} from '@astryxdesign/core/Collapsible';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Text} from '@astryxdesign/core/Text';
 import {VStack} from '@astryxdesign/core/Layout';
 
 export default function CollapsibleWithoutCard() {
   return (
-    <CollapsibleGroup type="single" defaultValue="deployment">
-      <VStack gap={3} style={{width: '100%', maxWidth: 400}}>
-        <Collapsible trigger="Deployment Details" value="deployment">
-          <Text type="body">
-            Last deployed on April 18, 2026 at 3:42 PM by Sarah Chen. Build
-            duration was 2m 14s with zero warnings.
-          </Text>
-        </Collapsible>
-        <Divider />
-        <Collapsible trigger="Environment Variables" value="environment">
-          <Text type="body">
-            12 variables configured. Last updated March 30, 2026. All secrets
-            are encrypted at rest with AES-256.
-          </Text>
-        </Collapsible>
-        <Divider />
-        <Collapsible trigger="Build Logs" value="logs">
-          <Text type="body">
-            Build completed successfully. 847 modules compiled, 0 errors, 0
-            warnings. Bundle size: 142 KB gzipped.
-          </Text>
-        </Collapsible>
-      </VStack>
-    </CollapsibleGroup>
+    <VStack gap={3} style={{width: '100%', maxWidth: 400}}>
+      <Collapsible trigger="Deployment Details">
+        <Text type="body">
+          Last deployed on April 18, 2026 at 3:42 PM by Sarah Chen. Build
+          duration was 2m 14s with zero warnings.
+        </Text>
+      </Collapsible>
+      <Divider />
+      <Collapsible trigger="Environment Variables" defaultIsOpen={false}>
+        <Text type="body">
+          12 variables configured. Last updated March 30, 2026. All secrets are
+          encrypted at rest with AES-256.
+        </Text>
+      </Collapsible>
+      <Divider />
+      <Collapsible trigger="Build Logs" defaultIsOpen={false}>
+        <Text type="body">
+          Build completed successfully. 847 modules compiled, 0 errors, 0
+          warnings. Bundle size: 142 KB gzipped.
+        </Text>
+      </Collapsible>
+    </VStack>
   );
 }

package/templates/pages/classic-gallery/page.tsx

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={0}>
           <Center axis="horizontal">

package/templates/pages/dashboard/page.tsx

@@ -729,7 +729,7 @@ function TableCard<T extends {id: string}>({
 export default function DashboardTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={6}>

package/templates/pages/documentation/page.tsx

@@ -209,7 +209,7 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>

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

@@ -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/templates/pages/mixed-gallery/page.tsx

@@ -112,7 +112,7 @@ function GalleryCard({
 export default function MixedGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/payment-form/page.tsx

@@ -153,6 +153,10 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
 const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = {flexBasis: 0};
 // Space the Order Summary content below its collapsible trigger title.
@@ -262,9 +266,9 @@ export default function PaymentFormPage() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
-        <LayoutContent padding={0}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"

package/templates/pages/product-detail/page.tsx

@@ -3,7 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {
+  VStack,
+  HStack,
+  Layout,
+  LayoutContent,
+} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -198,7 +203,10 @@ function ProductInfo() {
       <VStack gap={2}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
-          <SegmentedControl value={finish} onChange={setFinish} label="Finish">
+          <SegmentedControl
+            value={finish}
+            onChange={setFinish}
+            label="Finish">
             {FINISHES.map(f => (
               <SegmentedControlItem
                 key={f.value}
@@ -278,7 +286,7 @@ export default function ProductDetailTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/product-gallery/page.tsx

@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
 export default function ProductGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/settings/page.tsx

@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1440}
       header={
         <LayoutHeader hasDivider>

package/templates/pages/side-gallery/page.tsx

@@ -101,7 +101,7 @@ function ImageGrid() {
 export default function SideGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/table-page/page.tsx

@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-chart/page.tsx

@@ -513,7 +513,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageChartTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-heatmap-status/page.tsx

@@ -430,7 +430,7 @@ function OutageHeatmap() {
 export default function TablePageHeatmapStatusTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -867,7 +867,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageShoeStoreHeatmapTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

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

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

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

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